@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    --nk-gold   : #FFD700;
    --nk-gold-d : #B8860B;
    --nk-red    : #FF2244;
    --nk-green  : #00FF88;
    --nk-bg     : #0A0A0F;
    --nk-panel  : #12121A;
    --nk-panel2 : #1A1A28;
    --nk-border : #2A2A40;
    --nk-text   : #E0E0FF;
    --nk-cyan   : #00EEFF;
    --nk-purple : #A29BFE;
    --nk-orange : #FF9F43;
}

/* ── Base Wrap ─────────────────────────────────────────────── */
.nk-wrap {
    background: var(--nk-bg);
    color: var(--nk-text);
    font-family: 'Rajdhani', sans-serif;
    padding: 20px;
    border-radius: 20px;
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
/* Grid background */
.nk-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,238,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,238,255,.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}
/* Glow vignette */
.nk-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(0,238,255,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── Header ────────────────────────────────────────────────── */
.nk-header { text-align: center; padding: 20px 0 10px; position: relative; z-index: 1; }
.nk-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(24px, 6vw, 46px);
    font-weight: 900;
    background: linear-gradient(135deg, var(--nk-gold), #FFF7AA, var(--nk-gold-d));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px rgba(255,215,0,.55));
    letter-spacing: 3px;
}
.nk-subtitle { font-size: 13px; color: var(--nk-cyan); letter-spacing: 2px; margin-top: 4px; }

/* ── Jackpot Bar ───────────────────────────────────────────── */
.nk-jackpot-bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(184,134,11,0.05));
    border: 1px solid rgba(255,215,0,0.25);
    border-radius: 12px;
    padding: 10px 20px;
    margin: 0 0 12px;
    animation: nkJackpotGlow 3s ease-in-out infinite;
}
@keyframes nkJackpotGlow {
    0%,100% { box-shadow: 0 0 12px rgba(255,215,0,0.1); }
    50%      { box-shadow: 0 0 28px rgba(255,215,0,0.25); }
}
.nk-jackpot-label {
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    color: #888;
    text-transform: uppercase;
}
.nk-jackpot-amt {
    font-family: 'Orbitron', monospace;
    font-size: 22px;
    font-weight: 900;
    color: var(--nk-gold);
    text-shadow: 0 0 15px rgba(255,215,0,0.6);
    transition: transform 0.3s;
}
.nk-jackpot-bump { animation: nkBump 0.5s cubic-bezier(.34,1.56,.64,1); }
@keyframes nkBump { 50% { transform: scale(1.15); color: #fff; } }
.nk-jackpot-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--nk-gold);
    animation: nkPulse 1.2s ease-in-out infinite;
}
@keyframes nkPulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(1.5);} }

/* ── Live Feed ─────────────────────────────────────────────── */
.nk-live-feed { display: none !important; /* feed hidden */ }
.nk-live-feed-DISABLED {
    position: relative; z-index: 1;
    background: var(--nk-panel);
    border: 1px solid var(--nk-border);
    border-left: 3px solid var(--nk-green);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    min-height: 32px;
    overflow: hidden;
}
.nk-feed-inner { display: flex; flex-direction: column; gap: 4px; }
.nk-feed-item {
    color: #aaa;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s, transform 0.4s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nk-feed-item.nk-feed-visible { opacity: 1; transform: translateY(0); }
.nk-feed-item:first-child { color: var(--nk-text); }

/* ── Balance Bar ───────────────────────────────────────────── */
.nk-balance-bar {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    margin: 16px 0; position: relative; z-index: 1;
}
.nk-bal-box {
    background: var(--nk-panel);
    border: 1px solid var(--nk-border);
    border-radius: 12px;
    padding: 10px 18px;
    text-align: center;
    flex: 1; min-width: 90px;
    transition: border-color 0.2s;
}
.nk-bal-box:hover { border-color: rgba(255,215,0,0.3); }
.nk-bal-label { font-size: 10px; color: #888; letter-spacing: 2px; text-transform: uppercase; }
.nk-bal-val {
    font-family: 'Orbitron', monospace;
    font-size: 18px; font-weight: 700; color: var(--nk-gold); margin-top: 2px;
}
.nk-bal-box-btn { display: flex; align-items: center; justify-content: center; }
.nk-add-btn {
    background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(184,134,11,0.1));
    border: 1px solid var(--nk-gold-d);
    color: var(--nk-gold);
    padding: 9px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    white-space: nowrap;
}
.nk-add-btn:hover {
    background: rgba(255,215,0,0.2);
    box-shadow: 0 0 18px rgba(255,215,0,0.3);
    transform: translateY(-1px);
}

/* ── Streak ────────────────────────────────────────────────── */
.nk-streak-val { color: var(--nk-text) !important; }
.nk-streak-fire { color: var(--nk-orange) !important; animation: nkStreakFire 0.8s ease infinite alternate; }
.nk-streak-mega { color: var(--nk-gold) !important; animation: nkStreakMega 0.6s ease infinite alternate; }
@keyframes nkStreakFire { to { text-shadow: 0 0 12px var(--nk-orange); transform: scale(1.1); } }
@keyframes nkStreakMega { to { text-shadow: 0 0 20px var(--nk-gold); transform: scale(1.15); } }

/* ── Game Main (timer + wheel) ─────────────────────────────── */
.nk-game-main {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 30px;
    flex-wrap: wrap; margin: 10px 0 18px;
}
.nk-timer-wrap { text-align: center; }
.nk-timer-ring-wrap { display: inline-block; position: relative; width: 110px; height: 110px; }
.nk-timer-ring-wrap svg { transform: rotate(-90deg); }
.nk-ring-bg   { fill: none; stroke: var(--nk-border); stroke-width: 8; }
.nk-ring-prog {
    fill: none; stroke: var(--nk-cyan); stroke-width: 8;
    stroke-linecap: round; stroke-dasharray: 301; stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke .3s;
    filter: drop-shadow(0 0 4px var(--nk-cyan));
}
.nk-timer-num {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: 'Orbitron', monospace; font-size: 24px; font-weight: 700; color: var(--nk-cyan);
}
.nk-timer-label { font-size: 10px; color: #555; letter-spacing: 2px; margin-top: 6px; text-transform: uppercase; }

.nk-spin-area { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nk-spin-wheel {
    width: 100px; height: 100px;
    background: linear-gradient(135deg, var(--nk-panel2), var(--nk-panel));
    border: 3px solid var(--nk-gold-d);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Orbitron', monospace; font-size: 40px; font-weight: 900; color: var(--nk-gold);
    box-shadow: 0 0 30px rgba(255,215,0,0.2), inset 0 0 20px rgba(0,0,0,0.5);
    transition: border-color 0.3s;
}
.nk-spin-wheel.nk-spinning { animation: nkSpin .1s linear infinite; border-color: var(--nk-cyan); box-shadow: 0 0 40px rgba(0,238,255,.4); }
.nk-spin-wheel.nk-won      { border-color: var(--nk-green); animation: nkWon .5s ease infinite alternate; box-shadow: 0 0 50px rgba(0,255,136,.6); }
@keyframes nkSpin { to { transform: rotateY(360deg); } }
@keyframes nkWon  { from { box-shadow: 0 0 30px rgba(0,255,136,.4); transform: scale(1); } to { box-shadow: 0 0 70px rgba(0,255,136,.8); transform: scale(1.08); } }

.nk-result-msg { font-family: 'Orbitron', monospace; font-size: clamp(11px,2.2vw,14px); max-width: 220px; text-align: center; color: #555; line-height: 1.4; }

/* Sound button */
.nk-sound-btn {
    position: absolute; top: 0; right: 0;
    background: var(--nk-panel2); border: 1px solid var(--nk-border);
    border-radius: 8px; width: 38px; height: 38px;
    font-size: 18px; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.nk-sound-btn:hover { border-color: var(--nk-gold); background: rgba(255,215,0,0.08); }

/* ── Status ────────────────────────────────────────────────── */
.nk-status {
    text-align: center; padding: 8px;
    font-size: 13px; color: #666; letter-spacing: 1px;
    margin-bottom: 8px; position: relative; z-index: 1;
    font-weight: 600;
}

/* ── Hot & Cold ────────────────────────────────────────────── */
.nk-hot-cold-wrap {
    display: flex; gap: 12px; margin-bottom: 14px;
    position: relative; z-index: 1;
}
.nk-hc-box {
    flex: 1;
    background: var(--nk-panel);
    border: 1px solid var(--nk-border);
    border-radius: 12px;
    padding: 12px 16px;
}
.nk-hc-label { font-size: 10px; letter-spacing: 2px; color: #666; text-transform: uppercase; margin-bottom: 8px; }
.nk-hc-nums  { display: flex; gap: 8px; flex-wrap: wrap; }
.nk-hc-num {
    font-family: 'Orbitron', monospace;
    font-size: 16px; font-weight: 900;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid transparent;
}
.nk-hc-hot  { background: rgba(255,34,68,0.15);  border-color: #FF2244; color: #FF2244; text-shadow: 0 0 8px #FF2244; }
.nk-hc-cold { background: rgba(0,238,255,0.1);   border-color: var(--nk-cyan); color: var(--nk-cyan); text-shadow: 0 0 8px var(--nk-cyan); }
.nk-hc-loading { font-size: 12px; color: #444; }

/* ── Section ───────────────────────────────────────────────── */
.nk-section {
    background: var(--nk-panel);
    border: 1px solid var(--nk-border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
    position: relative; z-index: 1;
}
.nk-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.nk-section-title {
    font-family: 'Orbitron', monospace;
    font-size: 11px; letter-spacing: 2px; color: #666;
    text-transform: uppercase;
}
.nk-mini-stats { display: flex; gap: 14px; font-size: 12px; color: #555; }
.nk-mini-stats b { color: var(--nk-cyan); }

/* ── Chips ─────────────────────────────────────────────────── */
.nk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.nk-chip {
    background: var(--nk-panel2);
    border: 1px solid var(--nk-border);
    border-radius: 8px; padding: 7px 14px;
    font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700;
    color: var(--nk-text); cursor: pointer; transition: all 0.2s;
}
.nk-chip:hover, .nk-chip.active {
    border-color: var(--nk-gold); color: var(--nk-gold);
    background: rgba(255,215,0,0.08);
    box-shadow: 0 0 10px rgba(255,215,0,0.15);
    transform: translateY(-1px);
}
.nk-custom-bet { display: flex; align-items: center; gap: 10px; }
.nk-custom-bet label { font-size: 12px; color: #666; }
.nk-custom-bet input {
    background: var(--nk-panel2); border: 1px solid var(--nk-border);
    border-radius: 8px; padding: 7px 12px;
    color: var(--nk-text); font-family: 'Orbitron', monospace; font-size: 13px;
    width: 130px; outline: none; transition: border-color 0.2s;
}
.nk-custom-bet input:focus { border-color: var(--nk-gold); }

/* ── Number Grid ───────────────────────────────────────────── */
.nk-heatmap-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #555; }
.nk-hm-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 2px; }
.nk-hm-hot  { background: #FF2244; }
.nk-hm-warm { background: var(--nk-orange); }
.nk-hm-cool { background: var(--nk-cyan); }

.nk-num-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nk-num-btn {
    aspect-ratio: 1;
    background: var(--nk-panel2);
    border: 2px solid var(--nk-border);
    border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
    position: relative; overflow: hidden;
}
.nk-num-btn:hover:not(.nk-locked) {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}
.nk-num-btn.nk-locked { cursor: not-allowed; opacity: 0.65; }
.nk-num-btn.nk-selected { transform: scale(0.96); border-color: var(--nk-gold); background: rgba(255,215,0,0.07); }

/* Heatmap overlay */
.nk-num-heat {
    position: absolute; inset: 0; border-radius: 12px;
    pointer-events: none; opacity: 0; transition: opacity 0.6s;
}
.nk-heat-hot  .nk-num-heat { background: radial-gradient(circle, rgba(255,34,68,0.5), transparent 70%); }
.nk-heat-warm .nk-num-heat { background: radial-gradient(circle, rgba(255,159,67,0.4), transparent 70%); }
.nk-heat-cool .nk-num-heat { background: radial-gradient(circle, rgba(0,238,255,0.25), transparent 70%); }
.nk-heat-hot  { border-color: rgba(255,34,68,0.4) !important; }
.nk-heat-warm { border-color: rgba(255,159,67,0.3) !important; }

.nk-num { font-family: 'Orbitron', monospace; font-size: clamp(24px, 4.2vw, 38px); font-weight: 900; line-height: 1; }
.nk-num-bet  { font-size: 10px; color: #666; margin-top: 3px; }
.nk-num-pot  { font-family: 'Orbitron', monospace; font-size: 10px; color: var(--nk-green); margin-top: 1px; }
.nk-num-freq { font-size: 9px; color: #444; margin-top: 1px; letter-spacing: 1px; }

.nk-num-btn[data-n="1"] .nk-num{color:#FF6B6B;}
.nk-num-btn[data-n="2"] .nk-num{color:#FF9F43;}
.nk-num-btn[data-n="3"] .nk-num{color:#FECA57;}
.nk-num-btn[data-n="4"] .nk-num{color:#48DBFB;}
.nk-num-btn[data-n="5"] .nk-num{color:#FF9FF3;}
.nk-num-btn[data-n="6"] .nk-num{color:#54A0FF;}
.nk-num-btn[data-n="7"] .nk-num{color:#A29BFE;}
.nk-num-btn[data-n="8"] .nk-num{color:#00D2D3;}
.nk-num-btn[data-n="9"] .nk-num{color:#FF6B81;}

.nk-num-btn.nk-winner-flash { animation: nkFlash .4s ease 3; }
@keyframes nkFlash { 50% { transform: scale(1.15); filter: brightness(2); } }
.nk-bet-pulse { animation: nkBetPulse 0.4s ease; }
@keyframes nkBetPulse { 50% { transform: scale(1.06); box-shadow: 0 0 20px rgba(255,215,0,0.5); } }

/* ── Leaderboard ───────────────────────────────────────────── */
.nk-lb-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: var(--nk-panel2);
    border: 1px solid var(--nk-border);
    transition: background 0.2s;
}
.nk-lb-row:hover { background: rgba(255,215,0,0.05); }
.nk-lb-first {
    background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(184,134,11,0.06));
    border-color: rgba(255,215,0,0.3);
}
.nk-lb-rank  { font-size: 20px; width: 30px; text-align: center; }
.nk-lb-name  { flex: 1; font-weight: 700; font-size: 15px; color: var(--nk-text); }
.nk-lb-bets  { font-size: 12px; color: #555; }
.nk-lb-won   { font-family: 'Orbitron', monospace; font-size: 14px; font-weight: 700; color: var(--nk-green); min-width: 80px; text-align: right; }
.nk-lb-loading, .nk-lb-empty { text-align: center; color: #444; padding: 20px; font-size: 13px; }

/* ── History ───────────────────────────────────────────────── */
.nk-history { display: flex; gap: 7px; flex-wrap: wrap; }
.nk-hist-badge {
    font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 700;
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--nk-panel2); border: 1px solid var(--nk-border);
    transition: transform 0.2s;
}
.nk-hist-badge:hover { transform: scale(1.1); }
.nk-hist-low  { border-color: rgba(255,107,107,0.4); color: #FF6B6B; }
.nk-hist-mid  { border-color: rgba(254,202,87,0.3);  color: #FECA57; }
.nk-hist-high { border-color: rgba(0,255,136,0.3);   color: var(--nk-green); }

/* ── How to Play ───────────────────────────────────────────── */
.nk-how-section { background: linear-gradient(135deg, rgba(0,238,255,0.03), rgba(255,215,0,0.03)); }
.nk-how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 600px) { .nk-how-grid { grid-template-columns: repeat(2, 1fr); } }
.nk-how-step { text-align: center; padding: 10px 6px; }
.nk-how-icon { font-size: 30px; margin-bottom: 8px; }
.nk-how-text { font-size: 12px; color: #888; line-height: 1.5; }
.nk-how-text b { color: var(--nk-text); display: block; margin-bottom: 3px; font-size: 13px; }

/* ── Offline ───────────────────────────────────────────────── */
.nk-offline { text-align: center; padding: 60px; font-family: 'Orbitron', monospace; font-size: 16px; color: var(--nk-red); }

/* ── Toast ─────────────────────────────────────────────────── */
.nk-toast {
    position: fixed; top: 16px; left: 50%;
    transform: translateX(-50%) translateY(-120px);
    background: var(--nk-panel2);
    border: 1px solid var(--nk-border);
    border-radius: 12px;
    padding: 12px 24px;
    font-family: 'Orbitron', monospace; font-size: 13px;
    z-index: 10000;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
    text-align: center; pointer-events: none;
    max-width: 320px;
}
.nk-toast.show  { transform: translateX(-50%) translateY(0); }
.nk-toast.win   { border-color: var(--nk-green); color: var(--nk-green); box-shadow: 0 0 20px rgba(0,255,136,0.2); }
.nk-toast.lose  { border-color: var(--nk-red);   color: var(--nk-red);   box-shadow: 0 0 20px rgba(255,34,68,0.2); }

/* ── Modal ─────────────────────────────────────────────────── */
.nk-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.nk-modal {
    background: var(--nk-panel);
    border: 1px solid var(--nk-gold-d);
    border-radius: 20px; padding: 28px;
    max-width: 420px; width: 92%;
    position: relative; color: var(--nk-text);
    box-shadow: 0 0 60px rgba(255,215,0,0.12);
}
.nk-modal h2 { font-family: 'Orbitron', monospace; color: var(--nk-gold); margin-bottom: 14px; }
.nk-modal-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; color: #888; font-size: 18px; cursor: pointer;
    transition: color 0.2s;
}
.nk-modal-close:hover { color: var(--nk-red); }
.nk-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.nk-preset-btn {
    background: var(--nk-panel2); border: 1px solid var(--nk-border);
    border-radius: 8px; padding: 10px;
    font-family: 'Orbitron', monospace; font-size: 12px;
    color: var(--nk-text); cursor: pointer; transition: all 0.2s;
}
.nk-preset-btn:hover, .nk-preset-btn.active { border-color: var(--nk-gold); color: var(--nk-gold); background: rgba(255,215,0,0.08); }
.nk-pay-btn {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, var(--nk-gold), var(--nk-gold-d));
    color: #000; font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 700;
    border: none; border-radius: 10px; cursor: pointer; margin-top: 4px;
    transition: all 0.2s;
}
.nk-pay-btn:hover { box-shadow: 0 0 20px rgba(255,215,0,0.4); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════
   DASHBOARD STYLES
══════════════════════════════════════════════════════════ */
.nk-dash-wrap { max-width: 900px; margin: 0 auto; padding: 20px; font-family: 'Rajdhani', sans-serif; }

.nk-dash-header {
    display: flex; align-items: center; gap: 20px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid #2a2a40;
    border-radius: 16px; padding: 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.nk-dash-avatar img { border-radius: 50%; border: 3px solid #FFD700; width:64px; height:64px; }
.nk-dash-userinfo { flex: 1; }
.nk-dash-userinfo h2 { margin: 0 0 4px; font-size: 22px; color: #fff; }
.nk-dash-email  { color: #888; font-size: 13px; margin: 0 0 4px; }
.nk-dash-member { font-size: 12px; color: #555; }
.nk-dash-balance-big { text-align: right; }
.nk-db-label  { display: block; font-size: 11px; color: #888; letter-spacing: 2px; text-transform: uppercase; }
.nk-db-amount { display: block; font-size: 28px; font-weight: 900; color: #FFD700; font-family: 'Orbitron', monospace; }
.nk-dash-topup {
    display: inline-block; margin-top: 8px; padding: 6px 16px;
    background: rgba(255,215,0,0.1); border: 1px solid #FFD700;
    color: #FFD700; border-radius: 8px; font-size: 13px; text-decoration: none;
    transition: background 0.2s;
}
.nk-dash-topup:hover { background: rgba(255,215,0,0.2); }

.nk-dash-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px; margin-bottom: 28px;
}
.nk-ds {
    background: #12121a; border: 1px solid #2a2a40; border-radius: 14px;
    padding: 16px 14px; text-align: center;
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color 0.2s, transform 0.2s;
}
.nk-ds:hover { border-color: rgba(255,215,0,0.25); transform: translateY(-2px); }
.nk-ds-icon { font-size: 22px; }
.nk-ds-val  { font-size: 20px; font-weight: 800; font-family: 'Orbitron', monospace; color: #fff; }
.nk-ds-lbl  { font-size: 11px; color: #666; letter-spacing: 1px; text-transform: uppercase; }
.nk-ds.nk-won  .nk-ds-val { color: #00FF88; }
.nk-ds.nk-lost .nk-ds-val { color: #FF2244; }

.nk-dash-section { margin-bottom: 32px; }
.nk-dash-section-title {
    font-size: 16px; font-weight: 700; color: #fff;
    border-left: 4px solid #FFD700; padding-left: 12px; margin-bottom: 14px;
    font-family: 'Orbitron', monospace; font-size: 13px; letter-spacing: 1px;
}

/* Scrollable table */
.nk-table-scroll {
    overflow-x: auto; overflow-y: auto;
    max-height: 420px; border-radius: 12px; border: 1px solid #2a2a40;
    scroll-behavior: smooth;
}
.nk-table-scroll::-webkit-scrollbar       { width: 6px; height: 6px; }
.nk-table-scroll::-webkit-scrollbar-track { background: #0d0d18; border-radius: 6px; }
.nk-table-scroll::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 6px; }
.nk-table-scroll::-webkit-scrollbar-thumb:hover { background: #ffc400; }

.nk-dash-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.nk-dash-table thead th {
    background: #1a1a28; color: #888; font-size: 11px; letter-spacing: 1px;
    text-transform: uppercase; padding: 12px 14px; text-align: left;
    border-bottom: 1px solid #2a2a40;
    position: sticky; top: 0; z-index: 2;
}
.nk-dash-table tbody tr   { border-bottom: 1px solid #1a1a28; transition: background 0.15s; }
.nk-dash-table tbody tr:hover { background: rgba(255,215,0,0.03); }
.nk-dash-table td         { padding: 10px 14px; font-size: 14px; color: #ccc; }
.nk-dash-table td.nk-won  { color: #00FF88; font-weight: 700; }
.nk-dash-table td.nk-lost { color: #FF2244; }

/* Number badges in table */
.nk-num-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    font-weight: 800; font-size: 14px;
    background: #1a1a28; border: 2px solid #333; color: #fff;
}
.nk-badge-won     { color: #00FF88; font-weight: 700; font-size: 13px; }
.nk-badge-lost    { color: #FF2244; font-size: 13px; }
.nk-badge-pending { color: #FF9800; font-size: 13px; }

.nk-txn-badge {
    display: inline-block; padding: 3px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.nk-txn-credit, .nk-txn-win     { background: rgba(0,255,136,0.1); color: #00FF88; }
.nk-txn-debit, .nk-txn-bet      { background: rgba(255,34,68,0.1);  color: #FF2244; }
.nk-txn-deposit                  { background: rgba(0,238,255,0.1);  color: #00EEFF; }
.nk-txn-refund                   { background: rgba(255,215,0,0.1);  color: #FFD700; }
.nk-txn-admin_credit             { background: rgba(162,155,254,0.1); color: #A29BFE; }
.nk-txn-admin_debit              { background: rgba(255,34,68,0.1);  color: #FF2244; }

.nk-dash-empty { color: #555; padding: 20px; text-align: center; background: #12121a; border-radius: 10px; }
.nk-dash-empty a { color: #FFD700; }

/* ── Admin CSS ─────────────────────────────────────────────── */
.nk-admin-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
.nk-admin-row .nk-admin-card { flex: 1; min-width: 300px; }
.nk-admin-num-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-weight: 800; font-size: 14px;
    background: #f0f0f0; border: 2px solid #ddd; color: #333;
}
.nk-stat-profit .nk-stat-val { color: #4CAF50 !important; }
.nk-round-info th { width: 140px; }
.nk-spin-wheel.nk-spinning { animation: nkSpin .1s linear infinite; border-color: var(--nk-cyan); box-shadow: 0 0 40px rgba(0,238,255,.4); }
.nk-spin-wheel.nk-won      { border-color: var(--nk-green); animation: nkWon .5s ease infinite alternate; box-shadow: 0 0 50px rgba(0,255,136,.6); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 580px) {
    .nk-hot-cold-wrap  { flex-direction: column; }
    .nk-game-main      { gap: 16px; }
    .nk-balance-bar    { gap: 7px; }
    .nk-bal-box        { padding: 8px 12px; min-width: 70px; }
    .nk-bal-val        { font-size: 14px; }
    .nk-section        { padding: 14px; }
    .nk-lb-bets        { display: none; }
    .nk-sound-btn      { top: auto; bottom: 0; }
}

/* ── Achievements ──────────────────────────────────────────── */
.nk-achievements {
    display: flex; gap: 12px; flex-wrap: wrap;
}
.nk-achievement-badge {
    display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 14px; padding: 14px 18px;
    min-width: 110px; text-align: center;
    transition: all 0.2s;
    animation: nkAchIn 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes nkAchIn { from { opacity:0; transform: scale(0.8); } to { opacity:1; transform: scale(1); } }
.nk-achievement-badge:hover {
    border-color: rgba(255,215,0,0.5);
    box-shadow: 0 0 20px rgba(255,215,0,0.12);
    transform: translateY(-3px);
}
.nk-ach-icon  { font-size: 28px; margin-bottom: 6px; }
.nk-ach-title { font-size: 13px; font-weight: 700; color: #FFD700; margin-bottom: 3px; }
.nk-ach-desc  { font-size: 11px; color: #666; }

/* ── Referral ──────────────────────────────────────────────── */
.nk-referral-section {
    background: linear-gradient(135deg, rgba(0,255,136,0.04), rgba(0,238,255,0.03)) !important;
    border-color: rgba(0,255,136,0.2) !important;
}
.nk-ref-desc { font-size: 13px; color: #888; margin-bottom: 12px; }
.nk-ref-link-wrap { display: flex; gap: 10px; align-items: center; }
.nk-ref-input {
    flex: 1; background: #0d0d18; border: 1px solid #2a2a40;
    border-radius: 8px; padding: 10px 14px;
    color: #aaa; font-size: 13px; outline: none;
    font-family: monospace;
}
.nk-ref-copy-btn {
    background: linear-gradient(135deg, rgba(0,255,136,0.15), rgba(0,238,255,0.1));
    border: 1px solid #00FF88;
    color: #00FF88; padding: 10px 18px;
    border-radius: 8px; cursor: pointer; font-weight: 700;
    font-size: 13px; white-space: nowrap; transition: all 0.2s;
}
.nk-ref-copy-btn:hover { box-shadow: 0 0 14px rgba(0,255,136,0.3); transform: translateY(-1px); }