:root{
  --bg1:#0a0524; --bg2:#1a0b3d; --bg3:#2a0f5c;
  --neon:#00e5ff; --neon2:#ff2fd6; --gold:#ffcc33;
  --green:#22e07a; --red:#ff4d6d; --blue:#3a9bff; --yellow:#ffd23a;
  --text:#f5f0ff; --muted:#a89dc9;
  --glass:rgba(255,255,255,0.06); --glass-b:rgba(255,255,255,0.14);
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',sans-serif}
html,body{min-height:100vh;color:var(--text);background:
  radial-gradient(1200px 800px at 10% 10%, #3b0f7a55, transparent 60%),
  radial-gradient(1000px 800px at 90% 90%, #0f3b7a55, transparent 60%),
  linear-gradient(135deg,var(--bg1),var(--bg2) 50%,var(--bg3));
  background-attachment:fixed; overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,0.02) 0 1px,transparent 1px 40px),
  repeating-linear-gradient(90deg,rgba(255,255,255,0.02) 0 1px,transparent 1px 40px);
  pointer-events:none;z-index:0}
#app{position:relative;z-index:1}

.glass{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-b);border-radius:20px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08)}

/* Auth */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{padding:40px;width:min(420px,100%);text-align:center}
.logo-3d{font-family:'Orbitron',sans-serif;font-weight:900;font-size:56px;letter-spacing:2px;
  background:linear-gradient(180deg,#fff,var(--neon) 60%,var(--neon2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(0,229,255,0.4);
  transform:perspective(400px) rotateX(12deg)}
.logo-3d span{color:var(--gold);-webkit-text-fill-color:var(--gold);margin-left:6px;text-shadow:0 0 20px var(--gold)}
.tagline{color:var(--muted);margin:8px 0 24px}
.tabs{display:flex;gap:8px;background:rgba(0,0,0,0.3);padding:6px;border-radius:12px;margin-bottom:20px}
.tab{flex:1;padding:10px;background:transparent;border:none;color:var(--muted);cursor:pointer;border-radius:8px;font-weight:600}
.tab.active{background:linear-gradient(135deg,var(--neon),var(--neon2));color:#fff;box-shadow:0 0 20px rgba(0,229,255,0.4)}
.auth-form{display:grid;gap:12px}
.auth-form input{padding:14px 16px;background:rgba(0,0,0,0.3);border:1px solid var(--glass-b);color:#fff;border-radius:12px;font-size:15px}
.auth-form input:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,229,255,0.2)}
.hint{margin-top:16px;color:var(--muted);font-size:12px}
.auth-msg{min-height:20px;margin-top:12px;color:var(--gold);font-size:13px;font-weight:700;line-height:1.4}
.auth-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.auth-tools .btn-ghost{font-size:12px;padding:9px 10px}
@media(max-width:420px){.auth-tools{grid-template-columns:1fr}}
.reg-only{display:none}
.mode-register .reg-only{display:block}

/* Buttons */
.btn-primary,.btn-secondary,.btn-ghost{padding:12px 20px;border-radius:12px;border:none;cursor:pointer;font-weight:600;font-size:14px;transition:transform .15s, box-shadow .2s}
.btn-primary{background:linear-gradient(135deg,var(--neon),var(--neon2));color:#fff}
.btn-primary.neon{box-shadow:0 0 30px rgba(0,229,255,0.5), 0 8px 20px rgba(255,47,214,0.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(0,229,255,0.7)}
.btn-secondary{background:linear-gradient(135deg,var(--gold),#ff8a00);color:#1a0b3d}
.btn-ghost{background:rgba(255,255,255,0.08);color:#fff;border:1px solid var(--glass-b)}
.btn-ghost:hover{background:rgba(255,255,255,0.15)}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;margin:16px;gap:12px;flex-wrap:wrap}
.brand{font-family:'Orbitron',sans-serif;font-weight:800;font-size:24px;background:linear-gradient(90deg,var(--neon),var(--neon2));-webkit-background-clip:text;color:transparent}
.brand span{color:var(--gold);-webkit-text-fill-color:var(--gold);margin-left:4px}
.wallet-chip{padding:10px 18px;background:linear-gradient(135deg,var(--gold),#ff8a00);color:#1a0b3d;border-radius:30px;font-weight:800;box-shadow:0 0 20px rgba(255,204,51,0.4)}
.user-chip{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px}
.user-chip #userLabel{font-weight:600;color:#fff}

/* Lobby */
.lobby{padding:0 24px 40px;display:grid;gap:24px;max-width:1200px;margin:0 auto}
.hero-panel{padding:36px;text-align:center;background:
  linear-gradient(135deg,rgba(0,229,255,0.15),rgba(255,47,214,0.15)),var(--glass)}
.hero-panel h1{font-family:'Orbitron',sans-serif;font-size:36px;margin-bottom:8px}
.hero-panel p{color:var(--muted);margin-bottom:20px}
.matches h2{margin-bottom:14px;font-family:'Orbitron',sans-serif}
.match-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.match-card{padding:20px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-b);position:relative;overflow:hidden}
.match-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--neon),var(--neon2))}
.match-card h4{margin-bottom:8px;color:var(--gold)}
.match-card .price{font-size:22px;font-weight:800;color:var(--neon);margin:8px 0}
.match-card .meta{color:var(--muted);font-size:13px;margin-bottom:12px}
.empty{padding:40px;text-align:center;color:var(--muted)}

/* Modal */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:100;padding:20px}
.modal{padding:28px;width:min(440px,100%);display:grid;gap:14px}
.modal h2{font-family:'Orbitron',sans-serif}
.modal label{display:grid;gap:6px;color:var(--muted);font-size:13px}
.modal input,.modal select{padding:12px;background:rgba(0,0,0,0.3);border:1px solid var(--glass-b);color:#fff;border-radius:10px;font-size:15px}
.row{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

/* Wallet */
.wallet-page{padding:0 24px 40px;max-width:900px;margin:0 auto;display:grid;gap:20px}
.wallet-hero{padding:36px;text-align:center}
.wallet-hero p{color:var(--muted)}
.wallet-hero h1{font-family:'Orbitron',sans-serif;font-size:52px;background:linear-gradient(135deg,var(--gold),var(--neon));-webkit-background-clip:text;color:transparent;margin:8px 0 18px}
.wallet-hero .row{justify-content:center}
.fine{color:var(--muted);font-size:12px;margin-top:14px}
.history{padding:24px}
.history h3{margin-bottom:14px;font-family:'Orbitron',sans-serif}
.tx{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid var(--glass-b);align-items:center}
.tx:last-child{border-bottom:none}
.tx .amt.credit{color:var(--green);font-weight:700}
.tx .amt.debit{color:var(--red);font-weight:700}
.badge{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;text-transform:uppercase}
.badge.pending{background:rgba(255,204,51,0.2);color:var(--gold)}
.badge.approved{background:rgba(34,224,122,0.2);color:var(--green)}
.badge.rejected{background:rgba(255,77,109,0.2);color:var(--red)}

/* Game */
.game-page{min-height:100vh}
.game-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;padding:0 20px 20px;max-width:1200px;margin:0 auto}
@media(max-width:900px){.game-layout{grid-template-columns:1fr}}
.board-wrap{display:grid;gap:16px;justify-items:center}
#board{width:100%;max-width:600px;aspect-ratio:1;border-radius:20px;
  background:linear-gradient(135deg,#1a0b3d,#0a0524);
  box-shadow:0 0 60px rgba(0,229,255,0.3), inset 0 0 40px rgba(0,0,0,0.5);
  border:2px solid var(--glass-b)}
.dice-area{display:flex;gap:20px;align-items:center;padding:14px 24px;background:var(--glass);border-radius:16px;border:1px solid var(--glass-b)}
.dice{width:70px;height:70px;font-size:38px;border-radius:16px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#fff,#ddd);color:#1a0b3d;font-weight:900;
  box-shadow:0 8px 20px rgba(0,0,0,0.4), inset 0 2px 0 #fff, 0 0 30px rgba(0,229,255,0.4);
  transition:transform .2s}
.dice:hover{transform:scale(1.08) rotate(-6deg)}
.dice:disabled{opacity:.5;cursor:not-allowed}
#diceVal{font-size:32px;font-weight:900;color:var(--gold);min-width:50px;text-align:center;font-family:'Orbitron',sans-serif}
#turnLabel{font-weight:700;color:var(--neon)}

/* Chat */
.chat{padding:20px;display:flex;flex-direction:column;height:600px}
.chat h3{margin-bottom:12px;font-family:'Orbitron',sans-serif}
.chat-box{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:8px;background:rgba(0,0,0,0.25);border-radius:12px}
.msg{padding:8px 12px;background:var(--glass);border-radius:10px;font-size:13px}
.msg .who{font-weight:700;color:var(--neon);margin-right:6px}
.msg.mine{background:linear-gradient(135deg,rgba(0,229,255,0.2),rgba(255,47,214,0.2));align-self:flex-end;max-width:80%}
#chatForm{display:flex;gap:8px;margin-top:10px}
#chatIn{flex:1;padding:10px;background:rgba(0,0,0,0.3);border:1px solid var(--glass-b);color:#fff;border-radius:10px}

/* Admin */
.admin{padding:0 24px 40px;max-width:1200px;margin:0 auto;display:grid;gap:20px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.stat{padding:22px}
.stat span{color:var(--muted);font-size:13px}
.stat h2{font-family:'Orbitron',sans-serif;font-size:28px;margin-top:6px;background:linear-gradient(135deg,var(--neon),var(--gold));-webkit-background-clip:text;color:transparent}
.panel{padding:22px}
.panel h3{margin-bottom:14px;font-family:'Orbitron',sans-serif}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:10px;border-bottom:1px solid var(--glass-b);font-size:14px}
.tbl th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase}
.req-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;padding:12px;border-bottom:1px solid var(--glass-b);align-items:center;font-size:14px}
.req-row .actions{display:flex;gap:6px}
.mini{padding:6px 10px;font-size:12px;border-radius:8px;border:none;cursor:pointer;font-weight:600}
.ok{background:var(--green);color:#0a0524}
.no{background:var(--red);color:#fff}

/* ============ LUXURY UPGRADE ============ */
:root{
  --gold:#f5c451; --gold-2:#ffe08a; --royal:#6d28d9; --royal-2:#a855f7;
  --neon:#22d3ee; --danger:#ef4444; --muted:#94a3b8;
}
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(168,85,247,.35), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(245,196,81,.18), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(34,211,238,.22), transparent 60%),
    linear-gradient(180deg,#0b0722 0%, #100836 60%, #05030f 100%);
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(245,196,81,.7), transparent 50%),
    radial-gradient(2px 2px at 40% 80%, rgba(168,85,247,.7), transparent 50%),
    radial-gradient(1px 1px at 85% 25%, rgba(34,211,238,.7), transparent 50%);
  background-size: 900px 900px; opacity:.5; animation: twinkle 8s linear infinite;
}
@keyframes twinkle{ 0%{background-position:0 0}100%{background-position:900px 900px} }
#app{position:relative; z-index:1}

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.logo-3d, .brand{
  font-family:'Orbitron',sans-serif; font-weight:900;
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 45%, #a67318 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)) drop-shadow(0 0 22px rgba(245,196,81,.35));
  letter-spacing:.06em;
}
.brand span, .logo-3d span{
  background: linear-gradient(180deg,#e0aaff,#a855f7);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn-primary.neon{
  background: linear-gradient(135deg, var(--gold), #d99a20);
  color:#1a0f00; font-weight:800; border:0;
  box-shadow: 0 10px 30px -6px rgba(245,196,81,.55), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-primary.neon:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -6px rgba(245,196,81,.7); }
.btn-ghost{
  background: rgba(255,255,255,.06); color:#eaeaff; border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:8px 14px; cursor:pointer;
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-secondary{
  background: linear-gradient(135deg,var(--royal),var(--royal-2));
  color:#fff; border:0; font-weight:700;
  box-shadow: 0 10px 30px -6px rgba(168,85,247,.55);
}

.wallet-chip{
  background: linear-gradient(135deg, rgba(245,196,81,.2), rgba(168,85,247,.15));
  border:1px solid rgba(245,196,81,.4);
  color:var(--gold-2); font-weight:700; padding:8px 14px; border-radius:999px;
  box-shadow: inset 0 0 20px rgba(245,196,81,.15);
}
.match-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(168,85,247,.06));
  border:1px solid rgba(245,196,81,.25); border-radius:16px; padding:16px;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,.6);
  transition: transform .2s;
}
.match-card:hover{ transform: translateY(-4px); border-color:rgba(245,196,81,.55); }
.match-card .price{
  font-family:'Orbitron'; font-size:28px; font-weight:900; margin:8px 0;
  color:var(--gold-2); text-shadow:0 0 20px rgba(245,196,81,.4);
}

/* Feature bar */
.feature-bar{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:18px 0;
}
@media(max-width:820px){ .feature-bar{ grid-template-columns:repeat(2,1fr);} }
.feature-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:16px 10px; cursor:pointer;
  background: linear-gradient(160deg, rgba(168,85,247,.18), rgba(245,196,81,.08));
  border:1px solid rgba(255,255,255,.12); color:#fff; border-radius:16px;
  transition: all .2s; position:relative; overflow:hidden;
}
.feature-btn::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(245,196,81,.6) 85%, transparent 100%);
  opacity:0; transition:opacity .3s; z-index:-1; animation: spin 3s linear infinite;
}
.feature-btn:hover{ transform:translateY(-3px); border-color:rgba(245,196,81,.5); box-shadow:0 12px 30px -10px rgba(245,196,81,.4); }
.feature-btn .ic{ font-size:28px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.feature-btn b{ font-size:14px; }
.feature-btn small{ color:var(--muted); font-size:11px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Spin wheel */
.spin-modal .wheel-wrap{ position:relative; width:260px; height:260px; margin:20px auto; }
.wheel{ width:100%; height:100%; border-radius:50%; position:relative; overflow:hidden;
  border:6px solid var(--gold); box-shadow:0 0 40px rgba(245,196,81,.5), inset 0 0 20px rgba(0,0,0,.4); background:#1a0f2e; }
.wheel .slice{ position:absolute; top:0; left:50%; width:50%; height:50%; transform-origin:0 100%;
  background: linear-gradient(135deg, var(--royal), var(--royal-2)); border-right:2px solid rgba(255,255,255,.2);
  display:flex; align-items:flex-start; justify-content:center; }
.wheel .slice:nth-child(even){ background: linear-gradient(135deg, var(--gold), #d99a20); color:#1a0f00; }
.wheel .slice span{ display:inline-block; margin-top:20px; font-weight:900; font-family:'Orbitron'; }
.pointer{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); color:var(--gold); font-size:32px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }

/* Referral */
.ref-code{
  font-family:'Orbitron'; font-size:32px; font-weight:900; text-align:center;
  padding:16px; margin:12px 0; letter-spacing:.15em;
  background: linear-gradient(135deg, rgba(245,196,81,.2), rgba(168,85,247,.15));
  border:2px dashed var(--gold); border-radius:14px; color:var(--gold-2);
}

/* Badges */
.badges{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px;}
.badge-item{ text-align:center; padding:12px 6px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); }
.badge-item .ic{ font-size:26px; }
.badge-item.locked{ opacity:.3; filter:grayscale(1); }
.badge-item.unlocked{ border-color:var(--gold); box-shadow:0 0 20px rgba(245,196,81,.3); }
.badge-item small{ display:block; margin-top:4px; font-size:10px; color:var(--muted); }

/* Toasts */
.toast-root{ position:fixed; top:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast{ padding:12px 18px; border-radius:12px; min-width:220px; color:#fff; font-weight:600;
  background: linear-gradient(135deg, rgba(168,85,247,.9), rgba(109,40,217,.9));
  border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px);
  box-shadow: 0 12px 40px -8px rgba(0,0,0,.6);
  transform: translateX(120%); transition: transform .35s cubic-bezier(.2,.9,.3,1);
}
.toast.show{ transform: translateX(0); }
.toast.win{ background: linear-gradient(135deg, var(--gold), #d99a20); color:#1a0f00; }
.toast.error{ background: linear-gradient(135deg, #b91c1c, var(--danger)); }

/* Board glow */
#board{ box-shadow: 0 0 60px rgba(168,85,247,.35), 0 0 100px rgba(245,196,81,.2); border-radius:20px; border:2px solid rgba(245,196,81,.3); }

/* Classic Ludo board styling */
#board{background:#f5ecd3;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,0.5);cursor:pointer;max-width:100%;height:auto}
.auto-timer{font-size:12px;color:var(--gold);font-weight:700;margin-top:6px;min-height:16px}
.media-bar{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap;padding:10px;background:rgba(0,0,0,0.3);border-radius:12px;border:1px solid var(--glass-b)}
.media-btn{padding:8px 14px;border-radius:20px;background:rgba(255,255,255,0.08);color:#fff;border:1px solid var(--glass-b);cursor:pointer;font-weight:600;font-size:13px}
.media-btn.on{background:linear-gradient(135deg,var(--neon),var(--neon2));box-shadow:0 0 20px rgba(0,229,255,0.5)}
.mic-meter{flex:1;min-width:80px;height:8px;background:rgba(0,0,0,0.4);border-radius:4px;overflow:hidden}
.mic-meter span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#22e07a,var(--gold),#ff4d6d);transition:width .1s}
#selfVideo{width:140px;height:105px;border-radius:10px;border:2px solid var(--neon);object-fit:cover;background:#000}

/* Classic wooden board frame */
#board{
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(135deg,#3a2414,#6b4523,#3a2414);
  box-shadow: 0 12px 32px rgba(0,0,0,.55), inset 0 0 0 3px #2a1608;
}

/* === v3 additions === */
.ic-svg{ display:inline-block; vertical-align:middle; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px; }
.icon-btn .ic-svg{ pointer-events:none; }

.cloud-chip{ padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600; margin-left:auto; margin-right:10px; }
.cloud-chip.ok{ background:rgba(20,180,90,.18); color:#4ade80; border:1px solid rgba(74,222,128,.4); }
.cloud-chip.warn{ background:rgba(230,180,20,.15); color:#fbbf24; border:1px solid rgba(251,191,36,.4); }
.cloud-chip.err{ background:rgba(230,60,60,.15); color:#fb7185; border:1px solid rgba(251,113,133,.5); }

.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.btn-primary.small, .btn-ghost.small{ padding:6px 12px; font-size:13px; }

.pm-list{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.pm-card{ display:flex; gap:10px; align-items:flex-start; padding:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; }
.pm-card .pm-ic{ width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg,#7c3aed,#06b6d4); color:#fff; flex-shrink:0; }
.pm-card .pm-body{ flex:1; min-width:0; }
.pm-card .pm-line{ font-size:13px; color:var(--muted,#a3a3b8); word-break:break-all; }
.mono{ font-family: ui-monospace, "SF Mono", Menlo, monospace; color:#fff; }

.pm-picker{ margin:8px 0; }
.pm-options{ display:grid; gap:8px; }
.pm-opt{ display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid rgba(255,255,255,.1); border-radius:10px; cursor:pointer; background:rgba(255,255,255,.03); }
.pm-opt input{ margin-top:4px; }
.pm-opt-title{ font-weight:600; display:flex; align-items:center; gap:6px; }
.pm-opt-line{ font-size:12px; color:var(--muted,#a3a3b8); }
.pm-opt-line .mini.copy{ padding:2px 6px; margin-left:6px; }
.pm-opt-line.pm-note{ color:#fbbf24; font-style:italic; }
.pm-opt:has(input:checked){ border-color:#22d3ee; background:rgba(34,211,238,.08); }

.role-pill{ padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.role-pill.user{ background:rgba(148,163,184,.2); color:#cbd5e1; }
.role-pill.admin{ background:rgba(251,191,36,.2); color:#fbbf24; }

.proof-thumb{ max-width:80px; max-height:60px; border-radius:6px; margin-top:4px; display:block; }

.tbl-wrap{ overflow-x:auto; }
.row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.mini{ display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:8px; font-size:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.mini.ok{ background:linear-gradient(135deg,#16a34a,#22c55e); border-color:transparent; }
.mini.no{ background:linear-gradient(135deg,#dc2626,#ef4444); border-color:transparent; }
.mini:hover{ filter:brightness(1.1); }

.empty{ padding:14px; text-align:center; color:var(--muted,#94a3b8); font-size:14px; }

.req-row{ display:grid; grid-template-columns: 1.2fr 1.4fr 1.4fr auto; gap:10px; padding:10px; border-bottom:1px solid rgba(255,255,255,.06); align-items:center; }
.req-row .actions{ display:flex; gap:6px; }
@media(max-width:640px){ .req-row{ grid-template-columns:1fr 1fr; } .req-row .actions{ grid-column:1/-1; } }

/* ==== Pro admin dashboard additions ==== */
.stat.warn h2{ color:#fbbf24; }
.stat.danger h2{ color:#f87171; }

.adm-tabs{ display:flex; gap:6px; padding:8px; margin:14px 0; overflow-x:auto; flex-wrap:wrap; }
.adm-tab{ padding:8px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:#cbd5e1; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap; }
.adm-tab:hover{ background:rgba(255,255,255,.08); color:#fff; }
.adm-tab.active{ background:linear-gradient(135deg,#7c3aed,#06b6d4); color:#fff; border-color:transparent; box-shadow:0 4px 18px rgba(124,58,237,.35); }

.status-pill{ padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.status-pill.active{ background:rgba(34,197,94,.2); color:#4ade80; }
.status-pill.suspended{ background:rgba(251,191,36,.2); color:#fbbf24; }
.status-pill.blocked{ background:rgba(239,68,68,.2); color:#f87171; }

.mini.warn{ background:linear-gradient(135deg,#d97706,#f59e0b); border-color:transparent; }
.mini.danger{ background:linear-gradient(135deg,#7f1d1d,#b91c1c); border-color:transparent; color:#fff; }

.search-inp, .filter-sel{ padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#fff; font-size:13px; min-width:220px; }
.filter-sel{ min-width:160px; }

.badge.deposit{ background:rgba(34,197,94,.18); color:#4ade80; }
.badge.withdraw{ background:rgba(239,68,68,.18); color:#f87171; }
.badge.match_win{ background:rgba(251,191,36,.18); color:#fbbf24; }
.badge.match_entry, .badge.match{ background:rgba(148,163,184,.18); color:#cbd5e1; }
.badge.daily_bonus{ background:rgba(124,58,237,.18); color:#c4b5fd; }
.badge.pending{ background:rgba(251,191,36,.2); color:#fbbf24; }
.badge.approved{ background:rgba(34,197,94,.2); color:#4ade80; }
.badge.rejected{ background:rgba(239,68,68,.2); color:#f87171; }
.badge.open{ background:rgba(34,211,238,.18); color:#67e8f9; }
.badge.playing{ background:rgba(124,58,237,.2); color:#c4b5fd; }
.badge.finished{ background:rgba(148,163,184,.18); color:#cbd5e1; }

.audit-list{ display:grid; gap:6px; max-height:520px; overflow:auto; }
.audit-row{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; padding:8px 10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:8px; font-size:13px; align-items:center; }
.audit-row .mono{ font-size:11px; color:#94a3b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.status-banner{ margin:10px auto; max-width:1100px; padding:10px 14px; border-radius:12px; font-weight:600; text-align:center; }
.status-banner.suspended{ background:rgba(251,191,36,.15); border:1px solid rgba(251,191,36,.4); color:#fbbf24; }
.status-banner.blocked{ background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.4); color:#f87171; }

/* ============ Admin Sidebar Dashboard ============ */
.admin-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(120,80,220,.20), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(0,200,255,.15), transparent 60%),
    #0b0b18;
  transition:grid-template-columns .25s ease;
}
.admin-shell.collapsed{ grid-template-columns: 76px 1fr; }
.admin-shell.collapsed .si-tx,
.admin-shell.collapsed .side-user-info,
.admin-shell.collapsed .side-back,
.admin-shell.collapsed .side-logout,
.admin-shell.collapsed .side-brand .brand,
.admin-shell.collapsed #cloudStatus{ display:none; }
.admin-shell.collapsed .side-item{ justify-content:center; padding:12px 8px; }
.admin-shell.collapsed .si-badge{ position:absolute; top:6px; right:6px; }

.admin-sidebar{
  position:sticky; top:0; align-self:start; height:100vh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(30,20,60,.95), rgba(15,10,35,.98));
  border-right:1px solid rgba(255,255,255,.08);
  padding:16px 12px; gap:14px;
  box-shadow: 4px 0 30px rgba(0,0,0,.35);
  z-index:20;
}
.side-brand{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px 12px; border-bottom:1px solid rgba(255,255,255,.06);
}
.side-brand .brand{ font-family:'Orbitron',sans-serif; font-weight:900; color:#ffd93d; font-size:20px; letter-spacing:1px; }
.side-brand .brand span{ color:#7ef9ff; margin-left:4px; }
.side-toggle{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:#fff; border-radius:8px; width:34px; height:34px; cursor:pointer; font-size:18px;
}
.side-toggle:hover{ background:rgba(255,255,255,.12); }

.side-user{
  display:flex; align-items:center; gap:10px;
  padding:10px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06); border-radius:12px;
}
.side-avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,#ff6b9d,#c471ed);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; font-size:18px;
}
.side-user-info{ display:flex; flex-direction:column; line-height:1.2; }
.side-user-info b{ color:#fff; font-size:14px; }
.side-user-info small{ color:#aab; font-size:11px; }

.side-nav{ display:flex; flex-direction:column; gap:4px; overflow-y:auto; flex:1; padding:4px 0; }
.side-nav::-webkit-scrollbar{ width:6px; }
.side-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:3px; }

.side-item{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:10px;
  background:transparent; border:none; cursor:pointer;
  color:#c8c8dd; font-size:14px; font-weight:500;
  text-align:left; width:100%; transition:all .15s ease;
  font-family:inherit;
}
.side-item:hover{ background:rgba(255,255,255,.06); color:#fff; transform:translateX(2px); }
.side-item.active{
  background:linear-gradient(90deg, rgba(126,249,255,.15), rgba(126,249,255,.02));
  color:#7ef9ff;
  box-shadow: inset 3px 0 0 #7ef9ff;
}
.side-item .si-ic{ display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; }
.side-item .si-ic svg{ width:18px; height:18px; }
.si-badge{
  margin-left:auto; background:#ff4d6d; color:#fff;
  font-size:11px; font-weight:700; padding:2px 7px;
  border-radius:10px; min-width:20px; text-align:center;
}

.side-foot{ display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); }
.side-foot .cloud-chip{ text-align:center; font-size:12px; padding:6px 10px; }
.side-back, .side-logout{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  color:#dcdcf0; padding:8px 12px; border-radius:8px; font-size:13px; cursor:pointer;
}
.side-back:hover{ background:rgba(126,249,255,.15); color:#7ef9ff; }
.side-logout:hover{ background:rgba(255,77,109,.2); color:#ff8fa3; }

.admin-main{ display:flex; flex-direction:column; min-width:0; }
.admin-topbar{
  display:flex; align-items:center; gap:14px;
  padding:14px 22px; margin:14px 18px 0;
  border-radius:14px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
}
.admin-topbar h2{
  margin:0; font-size:20px; font-weight:700; color:#fff;
  font-family:'Orbitron',sans-serif; letter-spacing:.5px;
}
.admin-topbar .topbar-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.cloud-chip.small{ font-size:11px; padding:4px 10px; }
.hamburger{
  display:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:#fff; width:36px; height:36px; border-radius:8px; cursor:pointer; font-size:16px;
}

.admin-body{ padding:18px; display:flex; flex-direction:column; gap:16px; }
.admin-body .panel{ padding:20px; }
.admin-body .stat-grid{ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.cloud-help{
  margin-top:18px; padding:14px 16px; border-radius:12px;
  background:rgba(255,180,60,.08); border:1px solid rgba(255,180,60,.25); color:#ffd28a;
}
.cloud-help b{ color:#ffb74d; }
.cloud-help ol{ margin:8px 0 4px 18px; font-size:13px; }
.cloud-help code{ background:rgba(0,0,0,.3); padding:1px 6px; border-radius:4px; font-size:12px; }

/* Mobile */
@media (max-width: 900px){
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-sidebar{
    position:fixed; top:0; left:0; width:270px; height:100vh;
    transform:translateX(-100%); transition:transform .25s ease;
  }
  .admin-shell.mobile-open .admin-sidebar{ transform:translateX(0); }
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
  .admin-topbar{ margin:10px; padding:10px 14px; }
  .admin-topbar h2{ font-size:16px; }
  .admin-body{ padding:10px; }
}

/* ==== v5: Modernized fonts + Google auth + new admin stats ==== */
body, .auth-form input, .auth-form button, .side-item, .stat span, .stat h2, .tbl, .modal, .btn-primary, .btn-secondary, .btn-ghost{
  font-family: 'Inter', 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}
.brand, .logo-3d, .admin-topbar h2, .side-brand .brand{
  font-family: 'Space Grotesk', 'Orbitron', sans-serif;
  letter-spacing: .5px;
}
.stat h2{ font-family:'Space Grotesk','Orbitron',sans-serif; font-weight:700; }

/* Google sign-in button */
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px 14px; margin:10px 0 4px;
  background:#fff; color:#1f2937;
  border:1px solid rgba(255,255,255,.15); border-radius:12px;
  font-weight:600; font-size:14px; cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-google:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(66,133,244,.35); }
.btn-google:disabled{ opacity:.6; cursor:wait; }
.divider{ display:flex; align-items:center; gap:8px; margin:14px 0 10px; color:#94a3b8; font-size:11px; text-transform:uppercase; letter-spacing:1px; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.1); }

/* New stat card variants */
.stat.ok h2{ color:#4ade80; }
.stat.ok{ position:relative; }
.stat .live-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.7);
  animation:pulse 1.6s infinite; margin-left:6px; vertical-align:middle;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.6); }
  70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* Online dot next to username in users table */
.online-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#22c55e; margin-right:6px; vertical-align:middle;
  box-shadow:0 0 6px rgba(34,197,94,.9);
}
.prov{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
  background:linear-gradient(135deg,#ea4335,#4285f4); color:#fff;
  font-size:10px; font-weight:800;
}

/* ==== v5.1: WhatsApp/YouTube style admin redesign (overrides) ==== */
:root{
  --adm-bg:      #0b1014;
  --adm-side:    #131a21;
  --adm-side-2:  #1a2229;
  --adm-line:    #22303a;
  --adm-text:    #e9edef;
  --adm-mute:    #8696a0;
  --adm-accent:  #25d366;   /* WhatsApp green */
  --adm-accent-2:#00a884;
  --adm-red:     #ef4444;
  --adm-amber:   #f59e0b;
  --adm-blue:    #3b82f6;
}

.admin-shell{
  display:grid !important;
  grid-template-columns: 264px 1fr !important;
  min-height:100vh;
  background: var(--adm-bg) !important;
  color: var(--adm-text);
  font-family:'Inter','Space Grotesk',system-ui,sans-serif;
}
.admin-shell.collapsed{ grid-template-columns: 72px 1fr !important; }

/* ---- Sidebar ---- */
.admin-sidebar{
  background: var(--adm-side) !important;
  border-right: 1px solid var(--adm-line);
  display:flex; flex-direction:column;
  padding: 14px 10px 12px;
  gap:8px;
  box-shadow: 4px 0 20px rgba(0,0,0,.3);
}
.side-brand{
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 10px 12px;
  border-bottom:1px solid var(--adm-line);
  margin-bottom:6px;
}
.side-brand .brand{
  font-family:'Space Grotesk',sans-serif !important;
  font-weight:800 !important; font-size:20px !important;
  color: var(--adm-accent) !important; letter-spacing:.5px;
}
.side-brand .brand span{ color: var(--adm-text) !important; margin-left:3px; }
.side-toggle{
  background: transparent; color: var(--adm-mute);
  border: none; width:34px; height:34px; border-radius:50%;
  font-size:18px; cursor:pointer; transition: background .15s;
}
.side-toggle:hover{ background: var(--adm-side-2); color: var(--adm-text); }

.side-user{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--adm-side-2);
  margin-bottom: 8px;
}
.side-avatar{
  width:38px; height:38px; border-radius:50%;
  background: linear-gradient(135deg, var(--adm-accent), var(--adm-accent-2));
  color: #06231a; font-weight:800; display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.side-user-info b{ color: var(--adm-text) !important; font-size:14px; font-weight:600; }
.side-user-info small{ color: var(--adm-mute) !important; font-size:11px; text-transform:uppercase; letter-spacing:.6px; }

.side-nav{
  display:flex !important; flex-direction:column; gap:2px;
  overflow-y:auto; flex:1; padding: 4px 0 12px;
}
.side-nav::-webkit-scrollbar{ width:6px; }
.side-nav::-webkit-scrollbar-thumb{ background: var(--adm-line); border-radius:3px; }

.side-item{
  display:flex !important; align-items:center; gap:14px;
  padding: 11px 14px;
  border-radius: 10px;
  background: transparent !important;
  border: none !important;
  color: var(--adm-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  text-align:left;
  position: relative;
  transition: background .15s ease, color .15s ease, transform .1s ease;
  width:100%;
}
.side-item:hover{
  background: var(--adm-side-2) !important;
  transform: none !important;
}
.side-item.active{
  background: rgba(37,211,102,.14) !important;
  color: var(--adm-accent) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.side-item.active::before{
  content:""; position:absolute; left:-10px; top:8px; bottom:8px;
  width:3px; border-radius:0 3px 3px 0; background: var(--adm-accent);
}
.side-item .si-ic{
  width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  color: inherit; flex-shrink:0;
}
.side-item .si-ic svg{ width:20px; height:20px; stroke-width:2; }
.side-item .si-tx{ flex:1; }
.side-item .si-badge{
  background: var(--adm-red); color:#fff;
  min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
}

.admin-shell.collapsed .si-tx,
.admin-shell.collapsed .side-user-info,
.admin-shell.collapsed .side-brand .brand,
.admin-shell.collapsed .side-back span,
.admin-shell.collapsed .side-logout span,
.admin-shell.collapsed #cloudStatus{ display:none; }
.admin-shell.collapsed .side-item{ justify-content:center; padding: 12px; }
.admin-shell.collapsed .side-item.active::before{ left:-6px; }

.side-foot{
  display:flex; flex-direction:column; gap:6px;
  padding-top:10px; border-top:1px solid var(--adm-line); margin-top:auto;
}
.side-foot .cloud-chip{
  text-align:center; font-size:11px; padding:6px 10px; border-radius:999px;
  background: var(--adm-side-2); color: var(--adm-mute); border:1px solid var(--adm-line);
}
.side-foot .cloud-chip.ok{ background: rgba(37,211,102,.12); color: var(--adm-accent); border-color: rgba(37,211,102,.3); }
.side-foot .cloud-chip.warn{ background: rgba(245,158,11,.12); color: var(--adm-amber); border-color: rgba(245,158,11,.3); }
.side-foot .cloud-chip.err{ background: rgba(239,68,68,.12); color: var(--adm-red); border-color: rgba(239,68,68,.3); }
.side-back, .side-logout{
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding:10px 12px; border-radius:10px; font-size:13px; font-weight:600;
  background: var(--adm-side-2) !important; color: var(--adm-text) !important;
  border:1px solid var(--adm-line) !important; cursor:pointer;
}
.side-back:hover{ background: rgba(59,130,246,.15) !important; color: var(--adm-blue) !important; }
.side-logout:hover{ background: rgba(239,68,68,.15) !important; color: var(--adm-red) !important; }

/* ---- Main area ---- */
.admin-main{ background: var(--adm-bg); display:flex; flex-direction:column; min-width:0; }
.admin-topbar{
  background: var(--adm-side) !important;
  border-bottom: 1px solid var(--adm-line) !important;
  padding: 14px 22px !important;
  display:flex; align-items:center; gap:14px;
  box-shadow: none !important; backdrop-filter: none !important;
}
.admin-topbar h2{
  font-family:'Space Grotesk',sans-serif !important;
  font-size:20px !important; font-weight:700 !important;
  color: var(--adm-text) !important; margin:0 !important;
  background: none !important; -webkit-text-fill-color: initial !important;
}
.admin-topbar .cloud-chip{
  font-size:11px; padding:5px 12px; border-radius:999px;
  background: var(--adm-side-2); color: var(--adm-mute); border:1px solid var(--adm-line);
}
.admin-topbar .cloud-chip.ok{ background: rgba(37,211,102,.12); color: var(--adm-accent); border-color: rgba(37,211,102,.3); }
.admin-topbar .cloud-chip.warn{ background: rgba(245,158,11,.12); color: var(--adm-amber); }
.hamburger{
  display:none; background: transparent; border:none; color:var(--adm-text);
  font-size:22px; cursor:pointer; padding:4px 10px;
}

.admin-body{ padding:22px !important; gap:18px !important; }

/* ---- Panels & stats ---- */
.adm-panel{
  background: var(--adm-side) !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; gap:12px; flex-wrap:wrap;
}
.panel-head h3, .adm-panel > h3{
  font-family:'Space Grotesk',sans-serif !important;
  font-size:16px !important; font-weight:700 !important;
  color: var(--adm-text) !important; margin:0;
}

.stat-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap:14px !important;
}
.stat{
  background: var(--adm-side-2) !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  position:relative; overflow:hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.stat:hover{ transform: translateY(-2px); border-color: var(--adm-accent); }
.stat span{
  color: var(--adm-mute) !important;
  font-size: 12px !important; font-weight: 500;
  text-transform: uppercase; letter-spacing: .6px;
  display:flex; align-items:center; gap:6px;
}
.stat h2{
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 28px !important; font-weight: 700 !important;
  margin-top: 6px !important;
  background: none !important; -webkit-text-fill-color: initial !important;
  color: var(--adm-text) !important;
}
.stat.ok h2   { color: var(--adm-accent) !important; }
.stat.warn h2 { color: var(--adm-amber) !important; }
.stat.danger h2{ color: var(--adm-red) !important; }

/* ---- Tables / inputs / buttons ---- */
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{
  text-align:left; padding:10px 12px; color: var(--adm-mute);
  font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.5px;
  border-bottom:1px solid var(--adm-line); background: var(--adm-side-2);
}
.tbl td{
  padding:12px; border-bottom:1px solid var(--adm-line); color: var(--adm-text);
  vertical-align:middle;
}
.tbl tr:hover td{ background: rgba(255,255,255,.02); }
.tbl-wrap{ overflow-x:auto; border:1px solid var(--adm-line); border-radius:10px; }

.filter-sel, .search-inp{
  background: var(--adm-side-2) !important;
  border: 1px solid var(--adm-line) !important;
  color: var(--adm-text) !important;
  padding: 8px 12px !important; border-radius: 8px !important;
  font-size: 13px !important; font-family: inherit;
}
.search-inp{ min-width:260px; }
.filter-sel:focus, .search-inp:focus{ outline:none; border-color: var(--adm-accent) !important; }

.mini{
  padding:6px 10px !important; border-radius:6px !important;
  font-size:11px !important; font-weight:600 !important;
  border:1px solid var(--adm-line) !important; background: var(--adm-side-2) !important;
  color: var(--adm-text) !important; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; margin:2px;
}
.mini:hover{ background: var(--adm-line) !important; }
.mini.ok{ background: rgba(37,211,102,.15) !important; color: var(--adm-accent) !important; border-color: rgba(37,211,102,.3) !important; }
.mini.no, .mini.danger{ background: rgba(239,68,68,.15) !important; color: var(--adm-red) !important; border-color: rgba(239,68,68,.3) !important; }
.mini.warn{ background: rgba(245,158,11,.15) !important; color: var(--adm-amber) !important; border-color: rgba(245,158,11,.3) !important; }

.badge{
  display:inline-block; padding:3px 8px; border-radius:6px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  background: var(--adm-side-2); color: var(--adm-mute); border:1px solid var(--adm-line);
}
.badge.pending{ background: rgba(245,158,11,.15); color: var(--adm-amber); border-color: rgba(245,158,11,.3); }
.badge.approved{ background: rgba(37,211,102,.15); color: var(--adm-accent); border-color: rgba(37,211,102,.3); }
.badge.rejected{ background: rgba(239,68,68,.15); color: var(--adm-red); border-color: rgba(239,68,68,.3); }
.badge.deposit{ background: rgba(59,130,246,.15); color: var(--adm-blue); border-color: rgba(59,130,246,.3); }
.badge.withdraw{ background: rgba(168,85,247,.15); color: #c084fc; border-color: rgba(168,85,247,.3); }

.status-pill{ padding:3px 10px !important; border-radius:999px !important; font-size:10px !important; font-weight:700 !important; }
.status-pill.active{ background: rgba(37,211,102,.15); color: var(--adm-accent); }
.role-pill{ padding:3px 10px; border-radius:999px; font-size:10px; font-weight:700; text-transform:uppercase; }
.role-pill.user{ background: var(--adm-side-2); color: var(--adm-mute); }
.role-pill.admin{ background: rgba(245,158,11,.2); color: var(--adm-amber); }

.req-row{
  display:grid; grid-template-columns: 1.2fr 1.5fr 1.5fr auto;
  gap:14px; padding:14px; border:1px solid var(--adm-line); border-radius:10px;
  background: var(--adm-side-2); margin-bottom:10px; align-items:center; font-size:13px;
}
.req-row .actions{ display:flex; gap:6px; }
.proof-thumb{ max-width:80px; max-height:60px; border-radius:6px; border:1px solid var(--adm-line); }
.mono{ font-family: 'Space Grotesk', monospace; font-size:12px; }
.empty{ padding:40px; text-align:center; color: var(--adm-mute); font-size:13px; }

.pm-list{ display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.pm-card{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start;
  background: var(--adm-side-2); border:1px solid var(--adm-line);
  border-radius:12px; padding:14px;
}
.pm-ic{ color: var(--adm-accent); }
.pm-body b{ display:block; margin-bottom:4px; }
.pm-line{ font-size:12px; color: var(--adm-mute); margin-top:2px; }

.audit-row{
  display:flex; gap:10px; align-items:center; padding:10px 14px;
  background: var(--adm-side-2); border:1px solid var(--adm-line);
  border-radius:8px; margin-bottom:6px; font-size:12px; flex-wrap:wrap;
}
.audit-row b{ color: var(--adm-accent); }
.audit-list{ display:flex; flex-direction:column; gap:6px; }

/* Online indicator (already added, reinforce) */
.online-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background: var(--adm-accent); margin-right:6px; vertical-align:middle;
  box-shadow: 0 0 6px rgba(37,211,102,.9);
}
.live-dot{
  background: var(--adm-accent) !important;
  box-shadow:0 0 0 0 rgba(37,211,102,.7) !important;
}

@media (max-width: 900px){
  .admin-shell{ grid-template-columns: 1fr !important; }
  .admin-sidebar{
    position:fixed; top:0; left:0; bottom:0; width:280px; z-index:100;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  .admin-shell.mobile-open .admin-sidebar{ transform: translateX(0); }
  .hamburger{ display:inline-block; }
  .search-inp{ min-width:0; width:100%; }
  .req-row{ grid-template-columns: 1fr; }
}

/* v6: signup-only fields, hidden by default; shown when auth is in signup mode */
.auth-card .reg-only{ display:none; }
.auth-card.mode-register .reg-only{ display:block; }

/* v6: online dot for active user rows */
.online-dot{
  display:inline-block; width:8px; height:8px; margin-right:6px;
  background:#22c55e; border-radius:50%;
  box-shadow:0 0 8px rgba(34,197,94,.7);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{opacity:.9;transform:scale(1)} 50%{opacity:.5;transform:scale(1.15)} }
.live-dot{ display:inline-block; width:8px; height:8px; background:#22c55e; border-radius:50%; margin-left:4px; animation:pulse-dot 1.6s ease-in-out infinite; }
small.prov{ background:#e8f0fe; color:#1a73e8; padding:1px 6px; border-radius:6px; font-weight:700; font-size:10px; margin-left:4px;}

/* ===== v7: Admin removed, luxury dashboard additions ===== */
:root[data-theme="royal"]{ --neon:#ffcc33; --neon2:#b8860b; --gold:#ffcc33; }
:root[data-theme="emerald"]{ --neon:#22e07a; --neon2:#0f766e; --gold:#22e07a; }
:root[data-theme="sunset"]{ --neon:#ff6b6b; --neon2:#ffa000; --gold:#ffa000; }

.hero-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hero-txt{text-align:left;flex:1;min-width:260px}
.hero-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap}
.hs-card{padding:12px 18px;background:rgba(255,255,255,0.08);border:1px solid var(--glass-b);border-radius:14px;text-align:center;min-width:88px}
.hs-card small{color:var(--muted);font-size:11px;display:block;text-transform:uppercase;letter-spacing:1px}
.hs-card b{font-size:20px;color:var(--gold)}

.vip-bar-wrap{margin-top:18px}
.vip-bar{width:100%;height:8px;border-radius:8px;background:rgba(0,0,0,0.3);overflow:hidden}
.vip-fill{height:100%;background:linear-gradient(90deg,var(--neon),var(--neon2));box-shadow:0 0 12px var(--neon);transition:width .6s}
.vip-bar-wrap small{color:var(--muted);font-size:12px;display:block;margin-top:6px;text-align:right}

.feature-bar{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px}
.feature-btn{padding:16px 12px;background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid var(--glass-b);border-radius:16px;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:transform .15s, box-shadow .2s;position:relative;overflow:hidden}
.feature-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--neon)22,var(--neon2)22);opacity:0;transition:opacity .2s}
.feature-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px -12px rgba(0,229,255,0.5);border-color:var(--neon)}
.feature-btn:hover::before{opacity:1}
.feature-btn .ic{font-size:26px;position:relative}
.feature-btn b{font-size:13px;position:relative}
.feature-btn small{color:var(--muted);font-size:11px;position:relative}

/* Scratch card */
.scratch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.scratch-cell{aspect-ratio:1;background:linear-gradient(135deg,#666,#333);border-radius:12px;display:grid;place-items:center;cursor:pointer;font-weight:800;font-size:22px;transition:all .3s;user-select:none}
.scratch-cell.open{background:linear-gradient(135deg,var(--gold),#ff8a00);color:#1a0b3d;transform:scale(1.05)}
.scratch-cell:hover{transform:scale(1.05)}

/* Coin flip / predict */
.coin-pick{display:flex;gap:10px;margin:12px 0}
.pick-btn{flex:1;padding:16px;border-radius:14px;border:1px solid var(--glass-b);background:rgba(255,255,255,0.08);color:#fff;font-weight:700;font-size:16px;cursor:pointer;transition:transform .15s}
.pick-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,0.15)}
.predict-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}
.predict-btn{padding:16px;border-radius:14px;border:none;color:#fff;font-weight:800;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,0.6);display:flex;flex-direction:column;align-items:center;transition:transform .15s}
.predict-btn small{font-size:12px;opacity:0.9}
.predict-btn:hover{transform:scale(1.05)}

/* Missions */
.mission-list{display:grid;gap:8px;margin:10px 0}
.mission-item{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:rgba(255,255,255,0.06);border:1px solid var(--glass-b);border-radius:12px}
.mission-item small{color:var(--gold);display:block;font-size:11px}
.mission-item.done{opacity:0.6}
.mission-item.done b{text-decoration:line-through}

/* VIP tiers */
.vip-status{text-align:center;margin:14px 0;padding:14px;background:rgba(255,255,255,0.06);border-radius:14px}
.vip-lvl{font-family:'Orbitron',sans-serif;font-size:32px;color:var(--gold);margin-bottom:8px}
.vip-tiers{display:grid;gap:6px;max-height:260px;overflow-y:auto}
.vip-tier{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid var(--glass-b);opacity:0.55}
.vip-tier.unlocked{opacity:1;border-color:var(--gold);background:linear-gradient(135deg,rgba(255,204,51,0.15),transparent)}
.vip-tier small{display:block;color:var(--muted);font-size:11px;margin-top:2px}

/* History / notif lists */
.hist-list,.notif-list{display:grid;gap:6px;max-height:340px;overflow-y:auto}
.hist-item,.notif-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:rgba(255,255,255,0.05);border-radius:10px;border:1px solid var(--glass-b)}
.hist-item small,.notif-item small{color:var(--muted);font-size:11px;display:block}
.notif-item.unread{border-color:var(--neon);box-shadow:0 0 12px rgba(0,229,255,0.3)}
.credit{color:var(--green)} .debit{color:var(--red)}

/* Store */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:10px 0}
.store-item{padding:12px;background:rgba(255,255,255,0.06);border:1px solid var(--glass-b);border-radius:12px;text-align:center;display:grid;gap:6px}
.store-item b{font-size:14px}
.store-item div{color:var(--gold);font-weight:700}
.btn-primary.small{padding:6px 12px;font-size:12px}

/* Tournaments */
.tourney-card{padding:16px;background:linear-gradient(135deg,rgba(0,229,255,0.12),rgba(255,47,214,0.12));border:1px solid var(--glass-b);border-radius:14px;margin:10px 0;position:relative}
.tourney-card h3{margin:6px 0;font-family:'Orbitron',sans-serif}
.tourney-card p{color:var(--muted);font-size:13px;margin-bottom:10px}
.tc-badge{position:absolute;top:12px;right:12px;padding:4px 10px;background:var(--gold);color:#1a0b3d;border-radius:20px;font-size:10px;font-weight:800}
.tc-badge.free{background:var(--green);color:#fff}

/* Theme picker */
.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0}
.theme-opt{padding:22px;border-radius:14px;border:2px solid transparent;color:#fff;font-weight:800;font-size:16px;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,0.6);transition:transform .15s}
.theme-opt:hover{transform:scale(1.03)}
.theme-opt.active{border-color:#fff;box-shadow:0 0 20px rgba(255,255,255,0.5)}

/* Toast */
.toast-root{position:fixed;top:20px;right:20px;z-index:9999;display:grid;gap:8px}
.toast{padding:12px 18px;background:rgba(0,0,0,0.85);border:1px solid var(--glass-b);border-radius:12px;color:#fff;opacity:0;transform:translateX(20px);transition:all .3s;min-width:200px}
.toast.show{opacity:1;transform:translateX(0)}
.toast.win{border-color:var(--green);box-shadow:0 0 20px rgba(34,224,122,0.4)}
.toast.error{border-color:var(--red);box-shadow:0 0 20px rgba(255,77,109,0.4)}

/* Status banner */
.status-banner{padding:10px 16px;margin:0 24px 12px;border-radius:10px;text-align:center;font-weight:600}
.status-banner.blocked{background:rgba(255,77,109,0.2);border:1px solid var(--red);color:#ffb0bd}
.status-banner.suspended{background:rgba(255,204,51,0.15);border:1px solid var(--gold);color:#ffe38a}

@media (max-width:640px){
  .hero-panel h1{font-size:24px}
  .feature-bar{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .hero-inner{flex-direction:column;align-items:stretch}
  .hero-stats{justify-content:center}
}

/* v15: request badge on admin Requests tab */
.adm-tab{position:relative}
.adm-tab .req-badge{
  display:inline-grid;place-items:center;
  min-width:20px;height:20px;padding:0 6px;margin-left:6px;
  border-radius:999px;background:#ef4444;color:#fff;
  font-size:11px;font-weight:800;line-height:1;
  box-shadow:0 0 12px rgba(239,68,68,.7);
  animation:reqPulse 1.4s ease-in-out infinite;
}
@keyframes reqPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 8px rgba(239,68,68,.6)}
  50%{transform:scale(1.15);box-shadow:0 0 18px rgba(239,68,68,.95)}
}

/* v15: mobile-friendly modal — submit button always reachable */
.modal-back{padding:12px;align-items:start}
.modal{
  max-height:calc(100vh - 24px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  margin:12px auto;
}
.modal .row{
  position:sticky;bottom:-4px;
  background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 30%,rgba(0,0,0,.85) 100%);
  padding:10px 0 4px;margin:8px -4px -4px;
  flex-wrap:wrap;
}
.modal .row button{flex:1 1 auto;min-height:46px;font-size:15px}

@media (max-width:640px){
  .modal-back{padding:8px}
  .modal{padding:18px;gap:10px;border-radius:14px}
  .modal h2{font-size:18px;line-height:1.2}
  .modal input,.modal select{padding:12px;font-size:16px} /* 16px prevents iOS zoom */
  .modal label{font-size:12px}
  .row{flex-direction:column-reverse;gap:8px}
  .row button{width:100%}
  .pm-options{gap:6px}
  .pm-opt{padding:10px}
  /* admin tabs scrollable & readable on phone */
  .admin-tabs{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:6px}
  .admin-tabs .adm-tab{flex:0 0 auto;font-size:12px;padding:8px 10px}
  .admin-page{padding:12px!important}
  /* wallet buttons full width on phone */
  .wallet-page{padding:0 12px 40px}
  .wallet-hero{padding:22px 16px}
  .wallet-hero h1{font-size:36px}
  .wallet-hero .row{flex-direction:column;gap:10px}
  .wallet-hero .row button{width:100%}
  .hero-row{flex-wrap:wrap}
  .hero-row button{flex:1 1 45%;min-height:44px}
  .topbar{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .user-chip{flex-wrap:wrap}
  table{font-size:12px}
  table td,table th{padding:6px!important}
}