/* ---------- Color tokens ---------- */
:root{
  --brand:#2563eb;
  --brand-2:#1e40af;
  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;

  --bg:#0b1020;
  --bg2:#0a0f1d;
  --panel:#10172a;
  --text:#ebf1ff;
  --muted:#9aa4b2;
  --ring:#3b82f6;
  --border:#1f2a44;

  --card:#0f1730;
  --chip-bg:#0f1835;
  --chip-border:#233a6a;
}


*{ box-sizing:border-box }
html, body { height:100% }
html{
  color-scheme: dark;
  background: linear-gradient(180deg,var(--bg),var(--bg2)) fixed !important;
  /* Prevent iOS gray flash during overscroll */
  background-color: var(--bg) !important;
}
body{
  margin:0;
  background: transparent !important; /* use html gradient */
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.35;
}

/* Ensure major containers never introduce gray */
header, main, footer, nav, section, dialog, .auth-shell, .auth-card, #app, .page {
  background: transparent !important;
}

/* Dialog + backdrop (avoid default gray) */
dialog{
  background: var(--panel) !important;
  color: var(--text);
  border:1px solid var(--border);
  border-radius:14px;
}
dialog::backdrop{
  background: rgba(5,10,24,.65) !important;
}

/* ---------- Utilities ---------- */
.hide{ display:none !important }
.wrap{ max-width:1100px; margin:0 auto; padding:0 16px }
.row{ display:flex; align-items:center; gap:10px }
.col{ display:flex; flex-direction:column; gap:10px }
.grow{ flex:1 }
.small{ font-size:12px }
.muted{ color:var(--muted) }
.right{ margin-left:auto }
.kicker{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#b8c6ff }
.pill{ display:inline-flex; align-items:center; gap:6px; background:#0f1530; border:1px solid #263a63; padding:3px 8px; border-radius:999px; font-size:12px; color:#c7d2fe }
.pillset .pill{ margin-left:6px }
.chip{ display:inline-block; background:var(--chip-bg); border:1px solid var(--chip-border); border-radius:8px; padding:3px 8px; font-size:12px }

/* ---------- Header / Tabs ---------- */
header{
  position:sticky; top:0; z-index:20;
  background: rgba(16,23,42,.9) !important; /* dark, no gray */
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom:1px solid var(--border);
}
.topbar{ display:flex; align-items:center; gap:12px; padding:12px 0 }
.title{ font-weight:800; letter-spacing:.3px }
.tag{ font-size:12px; color:#c7d2fe; background:#111a33; border:1px solid var(--border); border-radius:999px; padding:4px 10px }

nav.tabs{
  position:relative; display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  border-bottom:1px solid var(--border); padding-bottom:8px;
}
nav.tabs button{
  background:#121b33; border:1px solid #203054; color:#dbe4ff; padding:8px 12px; border-radius:10px; cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
nav.tabs button:hover{ transform:translateY(-1px) }
nav.tabs button.active{ background:var(--brand); border-color:#3b82f6; color:#fff; transform:translateY(-2px) }
nav.tabs .ink{
  position:absolute; left:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,#4f9bf5,#62d0ff);
  border-radius:2px; width:40px; transform:translateX(0);
  transition:transform .28s ease, width .28s ease;
}

/* ---------- Main / Cards ---------- */
main{ padding:18px 0 60px; min-height:70vh }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px }
.card{
  background: var(--panel) !important;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}

/* ---------- Buttons ---------- */
.btn{
  appearance:none; border:1px solid #29406a; background:#0f1730; color:#e6ecff;
  border-radius:10px; padding:10px 12px; cursor:pointer;
  transition:transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  touch-action:manipulation;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn.primary{ background:var(--brand); border-color:#3b82f6; color:#fff }
.btn.ghost{ background:transparent; border-color:#263a63 }
.btn.warn{ background:#3d1a1a; border-color:#703333; color:#ffd1d1 }
.btn.block{ display:block; width:100% }
.btn[disabled]{ opacity:.55; cursor:not-allowed; filter:grayscale(.2) }

/* ---------- Inputs ---------- */
.field{ display:grid; gap:6px; margin:10px 0 }
label{ color:#cfe1ff }
input,select,textarea{
  background:#0b1228 !important;
  color:var(--text) !important;
  border:1px solid #203054 !important;
  border-radius:10px; padding:10px;
  outline:none; transition:border-color .18s ease, box-shadow .18s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:#355c96 !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.18) !important;
}
textarea{ min-height:90px; resize:vertical }
::placeholder{ color:#a9b6d1 }

/* Fix iOS autofill yellow/gray */
input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 40px #0b1228 inset;
  -webkit-text-fill-color: var(--text);
}

/* ---------- Progress ---------- */
.progress{ height:8px; background:#0f1730; border:1px solid #23365c; border-radius:999px; overflow:hidden }
.progress > span{ display:block; height:100%; background:linear-gradient(90deg,#4f9bf5,#62d0ff) }

/* ---------- Banners / Toasts ---------- */
.banner{
  background:#0f1730 !important;
  border:1px dashed #395287;
  border-radius:12px; padding:10px;
  text-align:center; color:#cfe1ff;
}
.toast{
  position:fixed; bottom:20px; right:20px;
  background:#121b33 !important;
  border:1px solid #203054;
  border-radius:10px; padding:10px 12px; z-index:50;
}

/* ---------- Table ---------- */
.table{ width:100%; border-collapse:collapse; background:transparent }
.table td,.table th{ padding:8px; border-bottom:1px solid #203054 }

/* ---------- Tag Buttons (filters / games) ---------- */
.tagbtn{
  background:#121b33; border:1px solid #203054; color:#dbe4ff; padding:6px 10px; border-radius:999px; cursor:pointer; font-size:13px;
  transition:background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}
.tagbtn:hover{ transform:translateY(-1px) }
.tagbtn.active{ background:#203d73; border-color:#3b82f6; color:#fff }

/* ---------- Badges ---------- */
.b-guard{ background:#0f2a20; border-color:#1f6f48; color:#bbf7d0 }
.b-lock{ background:#291b0c; border-color:#8e5b14; color:#fde68a }
.b-thresh{ background:#1c1b29; border-color:#4b3fb7; color:#ddd6fe }

/* ---------- Views (top-anchored, fade-only) ---------- */
section.view{
  opacity:0; transition:opacity .22s ease;
  /* ensure top anchor (no centering shift) */
  display:block;
}
section.view.active{ opacity:1 }
section.view.hide{ display:none }

/* ---------- Auth Pages (standalone) ---------- */
.auth-shell{
  min-height:100dvh; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
  background: transparent !important; /* keep global gradient */
}
.auth-card{
  width:min(560px, 96%);
  background:var(--panel) !important;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  padding:22px 18px;
  display:flex; flex-direction:column; gap:16px;
  animation:fadeIn .26s ease both;
}
.auth-head{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.auth-title{ font-weight:800 }
.auth-sub{ font-size:12px; color:var(--muted) }
.auth-footer{ font-size:12px; color:var(--muted); text-align:center }
.error{ color:#ffb4c4; font-size:13px; min-height:18px }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:740px){ .grid-2{ grid-template-columns:1fr } }

/* ---------- Simple animations ---------- */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ---------- Scrollbars (optional, dark) ---------- */
*{
  scrollbar-color: #2a3c66 transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:#2a3c66; border-radius:8px }
::-webkit-scrollbar-thumb:hover{ background:#34528f }