/* ============================================================
   Zovio — shared theme tokens + floating theme toggle
   ------------------------------------------------------------
   ONE source of truth for the three site-wide palettes. Keyed on
   html[data-theme=midnight|arcade|holo] (set pre-paint by
   zovioThemeBoot()). Consumed by landing.php, zovio.css (auth/
   admin) and dsi.css (player "holo" chrome). Default = midnight,
   so every inner page matches the marketing landing out of the box.
   ============================================================ */

/* ---- MIDNIGHT (default) — violet/indigo glass, matches landing ---- */
html,
html[data-theme="midnight"] {
  --zt-bg:#0a0f1e;            --zt-bg2:#121a30;        --zt-bg3:#070b16;
  --zt-text:#e2e8f0;          --zt-muted:#94a3b8;
  --zt-accent:#7c3aed;        --zt-accent2:#6366f1;    --zt-accent-soft:#a855f7;
  --zt-link:#7dd3fc;
  --zt-glass:rgba(255,255,255,.06);
  --zt-glass-strong:rgba(255,255,255,.09);
  --zt-border:rgba(255,255,255,.12);
  --zt-border-strong:rgba(255,255,255,.22);
  --zt-bar:rgba(10,14,30,.72);
  --zt-aurora1:rgba(79,70,229,.32);
  --zt-aurora2:rgba(56,110,231,.24);
  --zt-aurora3:rgba(34,211,238,.16);
  --zt-grad-primary:linear-gradient(145deg,#818cf8,#6366f1 55%,#a855f7);
  --zt-grad-accent:linear-gradient(120deg,#818cf8,#a855f7 60%,#c084fc);
  --zt-on-accent:#fff;
  --zt-shadow:0 18px 50px -18px rgba(0,0,0,.7);
  --zt-font-display:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* semantic status colours — intentionally stable across themes */
  --zt-emerald:#10b981; --zt-amber:#f59e0b; --zt-rose:#fb5b78; --zt-red:#ef4444;
}

/* ---- ARCADE — neon magenta/cyan, Archivo Black display ---- */
html[data-theme="arcade"] {
  --zt-bg:#0d0418;            --zt-bg2:#1a0830;        --zt-bg3:#0d0418;
  --zt-text:#ffffff;          --zt-muted:#94a3b8;
  --zt-accent:#ec4899;        --zt-accent2:#06b6d4;    --zt-accent-soft:#e879f9;
  --zt-link:#06b6d4;
  --zt-glass:rgba(255,255,255,.04);
  --zt-glass-strong:rgba(255,255,255,.06);
  --zt-border:rgba(236,72,153,.30);
  --zt-border-strong:rgba(236,72,153,.55);
  --zt-bar:rgba(13,4,24,.72);
  --zt-aurora1:rgba(236,72,153,.25);
  --zt-aurora2:rgba(6,182,212,.20);
  --zt-aurora3:rgba(192,38,211,.15);
  --zt-grad-primary:linear-gradient(135deg,#ec4899,#06b6d4);
  --zt-grad-accent:linear-gradient(135deg,#ec4899,#06b6d4);
  --zt-on-accent:#fff;
  --zt-shadow:0 18px 50px -18px rgba(0,0,0,.7);
  --zt-font-display:'Archivo Black','Arial Black',Arial,sans-serif;
  --zt-emerald:#10b981; --zt-amber:#f59e0b; --zt-rose:#fb5b78; --zt-red:#ef4444;
}

/* ============================================================
   Theme toggle — compact icon button, placed INSIDE the header
   (static, no floating/overlap). Shows the current theme's icon.
   ============================================================ */
.zt-toggle {
  display: inline-grid; place-items: center; height: 2.4rem; width: 2.4rem;
  border-radius: .75rem; cursor: pointer; flex: none;
  color: var(--zt-text);
  background: var(--zt-glass); border: 1px solid var(--zt-border);
  transition: background .15s, color .15s;
}
.zt-toggle:hover { background: var(--zt-glass-strong); }
.zt-toggle:active { transform: scale(.96); }
.zt-toggle svg { width: 1.15rem; height: 1.15rem; }
.zt-toggle .zt-state { display: none; }
html[data-theme="midnight"] .zt-toggle .zt-state-midnight { display: grid; place-items: center; }
html[data-theme="arcade"]   .zt-toggle .zt-state-arcade   { display: grid; place-items: center; }
html[data-theme="arcade"] .zt-toggle { color: var(--zt-accent2); }
/* Bare auth shell (login/register): park the toggle top-right, in-flow (absolute, not fixed). */
.zt-auth-tools { position: absolute; top: 14px; right: 14px; z-index: 20; }

/* ============================================================
   Shared homepage-style app chrome for logged-in sub-pages
   (wallet/account/deposit/cashout/referrals). Token-driven so it
   matches the dashboard's header/bottom-nav in every theme. Emitted
   by playerHead()/playerFoot(); page bodies keep .holo-page/.holo-glass.
   ============================================================ */
body.zt-app { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }

/* Legal footer (Terms link) — shared by sub-pages + auth pages */
.zt-legal { text-align: center; font-size: 11px; color: var(--zt-muted); padding: 22px 16px; line-height: 1.6; }
.zt-legal a { color: var(--zt-link); text-decoration: underline; }

/* top header */
.zt-appbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--zt-glass); border-bottom: 1px solid var(--zt-border);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.zt-appbar-in { max-width: 80rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; }
@media (min-width: 640px) { .zt-appbar-in { padding: .75rem 1.5rem; } }
.zt-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.zt-brand-mark {
  display: grid; place-items: center; height: 2.4rem; width: 2.4rem; border-radius: .8rem;
  color: var(--zt-on-accent); font-family: var(--zt-font-display); font-weight: 700; font-size: 1.05rem;
  background: var(--zt-grad-primary); box-shadow: 0 0 22px -4px var(--zt-accent);
}
.zt-brand-text { font-family: var(--zt-font-display); font-weight: 700; letter-spacing: .14em; color: var(--zt-text); font-size: 1.15rem; }
.zt-appbar-nav { display: none; gap: 1.6rem; font-size: .85rem; font-weight: 600; }
@media (min-width: 1024px) { .zt-appbar-nav { display: flex; } }
.zt-appbar-nav a { color: var(--zt-muted); text-decoration: none; transition: color .15s; }
.zt-appbar-nav a:hover, .zt-appbar-nav a.active { color: var(--zt-text); }
.zt-appbar-right { display: flex; align-items: center; gap: .5rem; }
.zt-hide-sm { display: none; }
@media (min-width: 640px) { .zt-hide-sm { display: inline-flex; } }
.zt-appbar-actions { display: none; align-items: center; gap: .55rem; }
@media (min-width: 640px) { .zt-appbar-actions { display: flex; } }
/* always-visible icon button (logout, etc.) — matches the bell button */
.zt-iconbtn {
  display: inline-grid; place-items: center; height: 2.4rem; width: 2.4rem; border-radius: .75rem;
  color: var(--zt-text); background: var(--zt-glass); border: 1px solid var(--zt-border); cursor: pointer; text-decoration: none;
}
.zt-iconbtn:hover { background: var(--zt-glass-strong); }
.zt-iconbtn svg { width: 1.15rem; height: 1.15rem; }
.zt-balance-pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 999px;
  background: var(--zt-glass-strong); border: 1px solid var(--zt-border-strong); color: var(--zt-text); text-decoration: none;
}
.zt-balance-pill .l { opacity: .6; text-transform: uppercase; letter-spacing: .08em; font-size: .6rem; font-weight: 600; }
.zt-balance-pill .v { font-weight: 800; font-size: .82rem; color: #6ee7b7; }
.zt-appbar-btn {
  padding: .5rem .95rem; border-radius: .75rem; font-size: .8rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--zt-border); background: var(--zt-glass); color: var(--zt-text);
}
.zt-appbar-btn:hover { background: var(--zt-glass-strong); }

/* bottom nav (matches the dashboard's 5-item bar) */
.zt-appnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--zt-glass-strong); border-top: 1px solid var(--zt-border);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.zt-appnav-in { max-width: 32rem; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: .2rem; padding: .4rem .5rem; }
.zt-appnav a {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem .2rem; border-radius: .9rem;
  color: var(--zt-muted); font-size: .62rem; font-weight: 600; text-decoration: none; transition: color .15s, background .15s;
}
.zt-appnav a svg { width: 1.3rem; height: 1.3rem; }
.zt-appnav a:hover { color: var(--zt-text); }
.zt-appnav a.active { color: var(--zt-accent-soft); }
html[data-theme="arcade"] .zt-appnav a.active { color: var(--zt-accent); }