/* ══════════════════════════════════════════════════════════════════════
   auth-ui.css — BTCBUNCH auth pages
   Design language: the CAB-UI kit used across the games (keys, modal, tones, fonts).
   Colours/surfaces: the site's own light/dark theme tokens. No game-arena scenery.
     A. Site theme tokens        (same values the old auth pages used)
     1. CAB-UI v1.2 kit          (VERBATIM from the games — re-paste to update)
     B+. Kit surfaces -> site theme, then the auth composition layer (safe to edit)
   Needs: Font Awesome 6, Google fonts Fredoka + Lilita One (auth-ui.php loads them).
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   AUTH PAGES — composition layer (site theme + kit components)
   Colours/surfaces = the site's light/dark tokens (same names and values the old
   auth pages used, so the captcha include keeps working unchanged).
   Components      = CAB-UI kit above (keys, modal, tones, fonts).
   Nothing from the game ARENA (cabinet, marquee, bulbs, neon) is used here.
   ══════════════════════════════════════════════════════════════════════ */

/* ── A. Site theme tokens (verbatim from the old auth pages) ─────────── */
:root{
  --acc:#E8820C; --acc2:#F5C077; --acc-bg:#FEF3E2; --acc-br:#F5C077; --acc-tx:#92400E;
  --bg:#F4F3EF; --card:#FFFFFF; --surf:#EEEDE8; --surf2:#E6E4DE; --hover:#E0DED8;
  --br:#E5E4DF; --br2:#D1CFC8;
  --tx:#1A1916; --tx2:#6B6860; --tx3:#A8A69F;
  --r1:8px; --r2:12px; --r3:18px;
  --sh:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.07);
  --sh2:0 2px 8px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.06);
  --sh3:0 4px 20px rgba(0,0,0,.1),0 12px 40px rgba(0,0,0,.08);
  --red:#DC2626; --red-bg:#FEF2F2; --red-br:#FECACA;
  --green:#16A34A; --blue:#2563EB; --purple:#6D28D9;
}
[data-theme="dark"]{
  --acc:#FB923C; --acc2:#7C3A0A; --acc-bg:#1C1108; --acc-br:#7C3A0A; --acc-tx:#FED7AA;
  --bg:#000000; --card:#000000; --surf:#0A0A0A; --surf2:#151515; --hover:#1F1F1F;
  --br:#1F1F1F; --br2:#2A2A2A;
  --tx:#F2F0EB; --tx2:#9A9890; --tx3:#5A5956;
  --sh:0 1px 3px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.4);
  --sh2:0 2px 8px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --sh3:0 4px 20px rgba(0,0,0,.5),0 12px 40px rgba(0,0,0,.4);
  --red:#F87171; --red-bg:#2D0A0A; --red-br:#7F1D1D;
  --green:#4ADE80; --blue:#60A5FA; --purple:#A78BFA;
}


/* ═══ 1. CAB-UI KIT (verbatim from the games) ═══ */
/* >>> CAB-UI CSS START */
/* ══════════════════════════════════════════════════════════════════════
   CAB-UI v1.2 — "Candy Deck"
   Shared chips, hero keys and modals for every cab-cabinet game.
   One tone per control (data-tone) · one modal shell · one JS controller.
   v1.2 changes (from v1.1):
     · NEW  .cab-ow  - the Mahala offerwall dialog (iframe + claim key) is part of the kit now. Do NOT restyle
                       your page's own ad modal; give it these classes (see README "Offerwall").
     · NEW  html.cab-reduce-motion - one page-level switch that pauses every idle animation (chips, keys, bulbs).
     · No other visual change. Look is identical to slot-machine.
   v1.1 changes (from v1.0):
     · Black outline ring removed from every button, chip, key, tab, switch, tag and icon.
     · Weight = ONE sharp, darker edge under the control (--stack). No haze/glow under it.
     · Nothing sits on the face of a button: no gloss strip, no bright rim line, no SPIN sweep.
     · Modal frame/tail keep their dark outline. Modal glow/shadow unchanged.
   Needs: Font Awesome 6 (solid) · Google fonts Fredoka + Lilita One
   Browsers: color-mix(), :where(), container queries (graceful fallbacks below)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ──────────────────────────────────────────────────────── */
:root{
  --cab-d:'Lilita One','Fredoka','Trebuchet MS',system-ui,sans-serif;   /* display: titles, keys, numbers */
  --cab-b:'Fredoka','Trebuchet MS',system-ui,sans-serif;                /* body copy */
  --cab-ink:#0b0520;                                                    /* the outline on everything */
  --cab-card-hi:#2d1b69; --cab-card-lo:#170b3d;                         /* modal body */
  --cab-well:#0c0624;                                                   /* recessed wells / LCDs */
  --cab-tx2:#d9d0fb; --cab-tx3:#a59bdc;
  --cab-hero-h:42px; --cab-chip-h:22px;                                 /* the only two sizes you may need to tune */
  --cab-z:9990;                                                         /* modal layer; scrim sits 5 below. Keep under your win/ad overlays */
}
@media (min-width:641px){ :root{ --cab-hero-h:56px; } }

/* ── 2. Tones — set --c once, every shade below is derived from it ───── */
:where([data-tone]){ --c:#8644f7; --on:#fff; --ts:rgba(11,5,32,.42); }
[data-tone=gold]   { --c:#ffb21f; --on:#3a1c00; --ts:rgba(255,255,255,.5); }
[data-tone=orange] { --c:#ff7d1f; --on:#3a1400; --ts:rgba(255,255,255,.45); }
[data-tone=rose]   { --c:#d9265d; }
[data-tone=red]    { --c:#dc2238; }
[data-tone=magenta]{ --c:#ff2fd0; }
[data-tone=violet] { --c:#8644f7; }
[data-tone=blue]   { --c:#2663ee; }
[data-tone=aqua]   { --c:#2cbcff; --on:#02263d; --ts:rgba(255,255,255,.5); }
[data-tone=teal]   { --c:#14d0a6; --on:#022e24; --ts:rgba(255,255,255,.5); }
[data-tone=green]  { --c:#11883d; }
[data-tone=slate]  { --c:#5d6fa5; }
[data-tone=rainbow]{
  --ts:rgba(11,5,32,.62);
  --c:#ff5ba6; --hi:#ffd1e6; --lo:#7a2a8f; --lip:#4a1658; --glow:rgba(255,120,190,.55); --on:#fff;
  --face:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 54%),
         linear-gradient(100deg,#ff4d8d,#ff9a2e 26%,#ffd93d 44%,#3be08f 62%,#33b5ff 80%,#a560ff);
}

/* Derived shades. :where() = zero specificity, so a tone or component can override any of them. */
:where([data-tone],.cab-chip,.cab-btn,.cab-key,.cab-modal,.cab-seg>button,.cab-switch){
  --hi:color-mix(in srgb,var(--c) 58%,#fff);
  --lo:color-mix(in srgb,var(--c) 74%,#000);
  --lip:color-mix(in srgb,var(--c) 44%,#000);
  --glow:color-mix(in srgb,var(--c) 60%,transparent);
  --face:linear-gradient(180deg,var(--hi) 0%,var(--c) 46%,var(--lo) 100%);
  --ring:1.5px; --lh:3px;
  /* the "enamel key" stack: rim light · lip · ink outline · coloured under-glow */
  --stack:0 var(--lh) 0 0 var(--lip);   /* sharp edge only: the weight. No haze, no rim light. */
}
@supports not (color:color-mix(in srgb,red,blue)){
  :where([data-tone],.cab-chip,.cab-btn,.cab-key,.cab-modal,.cab-seg>button,.cab-switch){
    --hi:var(--c); --lo:var(--c); --lip:#000; --glow:transparent;
  }
}
:where(.cab-key){ --c:#5d6fa5; --on:#fff; --ts:rgba(11,5,32,.42); }

/* ── 3. Chips — small modal buttons in the strip ────────────────────── */
.cab-strip{ display:flex; gap:6px; justify-content:center; container:cabstrip / inline-size; }
.cab-chip{
  --lh:2px;
  position:relative; flex:1 1 0; min-width:0; height:var(--cab-chip-h);
  display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 6px;
  border:0; border-radius:calc(var(--cab-chip-h) * .4); cursor:pointer;
  font:400 11px/1 var(--cab-d); letter-spacing:.02em; color:var(--on);
  background:var(--face); box-shadow:var(--stack);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .12s,filter .2s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.cab-chip::before{ content:''; position:absolute; inset:-7px -2px; }             /* fat-finger hit area */
.cab-chip i{ font-size:calc(var(--cab-chip-h) * .5); line-height:1; filter:drop-shadow(0 1px 0 var(--ts)); }
.cab-chip .lbl{ display:none; white-space:nowrap; text-shadow:0 1px 0 var(--ts); }
@container cabstrip (min-width:430px){ .cab-chip{ padding:0 10px; } .cab-chip .lbl{ display:inline; } }
@media (hover:hover){ .cab-chip:not(:disabled):hover{ transform:translateY(-1px) rotate(-1.5deg); } }
.cab-chip:active,.cab-chip.open{ --lh:.5px; transform:translateY(2px); }
.cab-chip::after{                                                                 /* lit pip while its modal is open */
  content:''; position:absolute; top:-4px; right:-3px; width:7px; height:7px; border-radius:50%;
  background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.9);
  transform:scale(0); transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.cab-chip.open::after{ transform:scale(1); }
.cab-chip:disabled,.cab-btn:disabled,.cab-key:disabled{ filter:saturate(.3) brightness(.8); cursor:not-allowed; }

/* Chip state modifiers — game code only toggles these classes */
.cab-chip.mahala-claimable{ animation:cabNudge 2.6s ease-in-out infinite; }
.cab-chip.mahala-claimable::after{ background:#ffe14d; transform:scale(1); box-shadow:0 0 9px 2px rgba(255,225,77,.95); }
.cab-chip.mahala-pending::after{ background:#7dff9b; transform:scale(1); box-shadow:0 0 9px 2px rgba(125,255,155,.95); }
.cab-chip.mahala-cooldown{ filter:saturate(.45) brightness(.9); }
.cab-chip.muted{ filter:saturate(.35) brightness(.9); }
@keyframes cabNudge{ 0%,100%{transform:translateY(0)} 42%{transform:translateY(-3px)} 58%{transform:translateY(0)} 74%{transform:translateY(-1.5px)} }

/* ── 4. Hero keys — BET / SPIN / AUTO (42px phone · 56px desktop) ────── */
.cab-hero-row{ display:flex; gap:9px; }
.cab-btn{
  --lh:4px; --ring:2px;
  position:relative; flex:1.4; min-width:0; height:var(--cab-hero-h); overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:0; border-radius:calc(var(--cab-hero-h) * .3); cursor:pointer;
  font:400 14px/1 var(--cab-d); color:var(--on);
  background:var(--face); box-shadow:var(--stack);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .12s,filter .2s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.cab-btn>*{ position:relative; z-index:1; }

.cab-btn .cap{ display:flex; align-items:center; gap:5px; font-size:calc(var(--cab-hero-h) * .34); text-shadow:0 1px 0 var(--ts); white-space:nowrap; max-width:100%; }
.cab-btn .cap i{ font-size:.82em; filter:drop-shadow(0 1px 0 var(--ts)); }
.cab-btn .cap-sm{ font-size:max(9px,calc(var(--cab-hero-h) * .21)); letter-spacing:.04em; text-shadow:0 1px 0 var(--ts); line-height:1; }
.cab-btn:active,.cab-btn.open{ --lh:1.5px; transform:translateY(2.5px); }
@media (hover:hover){ .cab-btn:not(:disabled):hover{ filter:brightness(1.07); } }

.cab-btn-spin{ flex:1.9; flex-direction:row; gap:7px; }
.cab-btn-spin>i{ font-size:calc(var(--cab-hero-h) * .3); filter:drop-shadow(0 1px 0 var(--ts)); }
.cab-btn-spin .cap,.cab-btn-spin{ font-size:calc(var(--cab-hero-h) * .4); }

@keyframes cabSheen{ 0%{transform:translateX(-130%)} 32%,100%{transform:translateX(130%)} }
.cab-btn.spinning-state{
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.2) 0 8px,transparent 8px 16px) 0 0/22.6px 22.6px,var(--face);
  animation:cabStripes .55s linear infinite; filter:none; cursor:progress;
}
.cab-btn.spinning-state::after{ display:none; }
@keyframes cabStripes{ to{ background-position:22.6px 0,0 0; } }
.cab-btn-auto.running{ --c:#dc2238; --on:#fff; --ts:rgba(11,5,32,.42); }
.cab-btn-auto.running .cap i{ animation:cabBlink 1s steps(2) infinite; }
@keyframes cabBlink{ 50%{ opacity:.3; } }

/* Insufficient-balance nudge (shared "lb-nudge-target" class) — an outline ring, so it never fights the box-shadow stack */
.cab-btn.lb-nudge-target,.cab-chip.lb-nudge-target{ z-index:20; animation:cabRing 1s ease-in-out infinite; }
@keyframes cabRing{
  0%,100%{ outline:3px solid rgba(75,220,108,.95); outline-offset:2px; }
  50%    { outline:3px solid rgba(75,220,108,0);  outline-offset:9px; }
}

/* ── 5. Modal shell ──────────────────────────────────────────────────── */
.cab-scrim{ position:fixed; inset:0; z-index:calc(var(--cab-z) - 5); background:rgba(7,2,18,.68); opacity:0; pointer-events:none; transition:opacity .2s; touch-action:none; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.cab-scrim.on{ opacity:1; pointer-events:auto; }

.cab-modal,.cab-modal *{ box-sizing:border-box; }
.cab-modal{
  --accent:var(--c); --on-accent:var(--on); --ts-accent:var(--ts);
  position:fixed; left:0; top:0; z-index:var(--cab-z); width:var(--w,240px); max-width:calc(100vw - 16px);
  font-family:var(--cab-b); color:#fff; -webkit-font-smoothing:antialiased; outline:none; text-align:left;
  visibility:hidden; opacity:0; pointer-events:none;
  transform:translateY(10px) scale(.88); transform-origin:var(--ox,50%) 100%;
  transition:opacity .14s ease,transform .26s cubic-bezier(.34,1.56,.5,1),visibility 0s linear .26s;
}
.cab-modal.open{ visibility:visible; opacity:1; pointer-events:auto; transform:none; transition-delay:0s; }
.cab-modal[data-side=below]{ transform-origin:var(--ox,50%) 0; transform:translateY(-10px) scale(.88); }
.cab-modal[data-side=below].open{ transform:none; }

.cab-modal__card{
  position:relative; display:flex; flex-direction:column; max-height:var(--mh,none); overflow:hidden; border-radius:18px;
  background:linear-gradient(180deg,var(--cab-card-hi),var(--cab-card-lo));
  box-shadow:0 0 0 2.5px var(--cab-ink),0 0 26px -3px var(--glow),0 18px 34px rgba(0,0,0,.55);
}
.cab-modal__head{
  position:relative; flex:none; display:flex; align-items:center; gap:8px; padding:6px 7px 9px 8px;
  background:var(--face); color:var(--on); border-bottom:2.5px solid var(--cab-ink);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5);
}
.cab-modal__head::after{                                                          /* marquee bulbs, echoing the cabinet */
  content:''; position:absolute; left:12px; right:12px; bottom:2px; height:3px; pointer-events:none; opacity:.55;
  background:radial-gradient(circle,rgba(255,255,255,.95) 1.1px,transparent 1.6px) 0 0/9px 3px repeat-x;
}
.cab-modal.open .cab-modal__head::after{ animation:cabBulbs .9s steps(3) infinite; }
@keyframes cabBulbs{ to{ background-position:9px 0; } }
.cab-modal__ico{
  flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font-size:12px;
  background:#fff; color:var(--lo); transform:rotate(-8deg);
  box-shadow:none;
}
.cab-modal__title{ flex:1; min-width:0; margin:0; font:400 16px/1 var(--cab-d); letter-spacing:.01em; text-shadow:0 1.5px 0 var(--ts); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cab-modal__x{
  position:relative; flex:none; width:24px; height:24px; display:grid; place-items:center; padding:0; border:0; border-radius:8px; cursor:pointer;
  background:rgba(11,5,32,.3); color:var(--on); font-size:11px; box-shadow:inset 0 0 0 1.5px rgba(11,5,32,.55);
  transition:background .15s,transform .2s;
}
.cab-modal__x::before{ content:''; position:absolute; inset:-9px; }
.cab-modal__x:hover{ background:rgba(11,5,32,.5); transform:rotate(90deg); }
.cab-modal__body{
  flex:1 1 auto; min-height:0; padding:10px; display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--c) transparent;
}
.cab-modal__body::-webkit-scrollbar{ width:6px; }
.cab-modal__body::-webkit-scrollbar-thumb{ background:var(--c); border-radius:9px; }

/* Tail — a speech-bubble point aimed at the trigger (injected by cab-ui.js) */
.cab-modal__tail{ position:absolute; left:var(--tx,50%); top:calc(100% - 3px); width:28px; height:19px; margin-left:-14px; pointer-events:none; }
.cab-modal__tail .f{ fill:var(--cab-card-lo); }
.cab-modal__tail .s{ fill:none; stroke:var(--cab-ink); stroke-width:2.5; stroke-linejoin:round; }
.cab-modal[data-side=below] .cab-modal__tail{ top:auto; bottom:calc(100% - 3px); transform:scaleY(-1); }
.cab-modal[data-side=below] .cab-modal__tail .f{ fill:var(--hi); }

/* Sheet mode — bottom sheet on phones, centred dialog on desktop */
.cab-modal[data-mode=sheet]{ left:50%; top:auto; bottom:0; width:100vw; max-width:100vw; transform:translate(-50%,30px); transform-origin:50% 100%; }
.cab-modal[data-mode=sheet].open{ transform:translate(-50%,0); }
.cab-modal[data-mode=sheet] .cab-modal__card{ border-radius:20px 20px 0 0; max-height:min(84vh,640px); padding-bottom:env(safe-area-inset-bottom,0px); }
.cab-modal[data-mode=sheet] .cab-modal__tail{ display:none; }
@media (min-width:641px){
  .cab-modal[data-mode=sheet]{ top:50%; bottom:auto; width:min(var(--w,420px),calc(100vw - 32px)); transform:translate(-50%,-46%) scale(.94); transform-origin:50% 50%; }
  .cab-modal[data-mode=sheet].open{ transform:translate(-50%,-50%); }
  .cab-modal[data-mode=sheet] .cab-modal__card{ border-radius:18px; max-height:min(84vh,660px); padding-bottom:0; }
}

/* ── 6. Widgets used inside modals ──────────────────────────────────── */
.cab-key{
  position:relative; min-width:32px; height:30px; padding:0 10px; border:0; border-radius:10px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font:400 13px/1 var(--cab-d); color:var(--on); text-shadow:0 1px 0 var(--ts);
  background:var(--face); box-shadow:var(--stack);
  transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .1s,filter .15s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.cab-key:active:not(:disabled){ --lh:1px; transform:translateY(2px); }
.cab-key:is(.selected,.active,.is-on){ --c:var(--accent); --on:var(--on-accent); --ts:var(--ts-accent); }
.cab-key--round{ width:36px; height:36px; padding:0; border-radius:50%; font-size:14px; flex:none; }
.cab-key--cta{ width:100%; height:40px; border-radius:13px; font-size:15px; --lh:3.5px; }
.cab-key--cta.running{ --c:#dc2238; --on:#fff; --ts:rgba(11,5,32,.42); }
.cab-keys{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:7px; padding-bottom:3px; }
.cab-keys .cab-key{ min-width:0; padding:0 4px; }

.cab-stepper{ display:flex; align-items:center; gap:9px; padding-bottom:3px; }
.cab-lcd{
  flex:1; min-width:0; height:42px; display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(180deg,#06021a,#130a32);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.7),inset 0 0 0 1.5px rgba(0,0,0,.65),0 1.5px 0 rgba(255,255,255,.1);
}
.cab-lcd--sm{ flex:none; width:56px; height:32px; border-radius:10px; }
.cab-lcd__val{ font:400 22px/1 var(--cab-d); letter-spacing:.02em; color:var(--hi); text-shadow:0 0 10px var(--glow),0 0 2px var(--glow); white-space:nowrap; }
.cab-lcd--sm .cab-lcd__val{ font-size:15px; }
.cab-lcd__val.at-min{ color:#ffd24f; text-shadow:0 0 10px rgba(255,210,79,.6); }
.cab-note{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0; padding:5px 9px; border-radius:99px; font:600 11px/1.2 var(--cab-b); color:#ffd24f; background:rgba(255,210,79,.12); box-shadow:inset 0 0 0 1.5px rgba(255,210,79,.28); }
.cab-note--tog{ display:none; }
.cab-note--tog.show{ display:flex; }

.cab-vol{ display:flex; align-items:center; gap:9px; }
.cab-slider{ --v:70; position:relative; flex:1; min-width:0; height:36px; margin:0 13px; cursor:pointer; touch-action:none; outline:none; -webkit-tap-highlight-color:transparent; }
.cab-slider::before{
  content:''; position:absolute; left:-3px; right:-3px; top:50%; height:15px; transform:translateY(-50%); border-radius:99px;
  background:var(--cab-well); box-shadow:inset 0 3px 5px rgba(0,0,0,.75), 0 1.5px 0 1.5px rgba(255,255,255,.08);
}
.cab-slider__fill{
  position:absolute; left:0; top:50%; height:9px; transform:translateY(-50%); width:calc(var(--v) * 1%);
  border-radius:99px; background:var(--face); box-shadow:0 0 12px var(--glow),inset 0 1px 0 rgba(255,255,255,.6);
}
.cab-slider__thumb{
  position:absolute; top:50%; left:calc(var(--v) * 1%); width:26px; height:26px; transform:translate(-50%,-50%); pointer-events:none;
  border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#e6defc 55%,#b9aaf0);
  box-shadow:0 7px 10px rgba(0,0,0,.4);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1);
}
.cab-slider:active .cab-slider__thumb{ transform:translate(-50%,-50%) scale(1.14); }
.cab-slider:focus-visible .cab-slider__thumb{ box-shadow:0 0 0 5px var(--c); }

.cab-fieldlbl{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin:0; font:400 12.5px/1 var(--cab-d); color:var(--cab-tx2); }
.cab-fieldlbl em{ font:600 11.5px/1 var(--cab-b); font-style:normal; color:var(--hi); }
.cab-status{ display:none; margin:0; padding:7px 10px; border-radius:11px; font:500 11.5px/1.35 var(--cab-b); color:var(--cab-tx2); background:var(--cab-well); box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.05); }
.cab-status.show{ display:block; }
.cab-status strong{ font:400 12px var(--cab-d); color:#fff; }

/* Segmented control + tabs */
.cab-seg{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:3px; border-radius:13px;
  background:var(--cab-well); box-shadow:inset 0 2px 5px rgba(0,0,0,.65),inset 0 0 0 1.5px rgba(255,255,255,.05);
}
.cab-seg>button{
  min-width:0; height:28px; padding:0 4px; border:0; border-radius:10px; cursor:pointer; background:transparent;
  font:400 12px/1 var(--cab-d); color:var(--cab-tx2); display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; transition:background .15s,color .15s;
}
.cab-seg>button:hover{ background:rgba(255,255,255,.07); }
.cab-seg>button:is(.selected,.active){
  --c:var(--accent); --on:var(--on-accent); --ts:var(--ts-accent);
  background:var(--face); color:var(--on); text-shadow:0 1px 0 var(--ts);
  box-shadow:0 2px 0 var(--lip);
}
.cab-seg--lg>button{ height:32px; font-size:13px; }
.cab-pane{ display:none; }
.cab-pane.active{ display:flex; flex-direction:column; gap:7px; }

/* Rows (settings / how-to) */
.cab-row{ display:flex; align-items:center; gap:10px; padding:8px 10px 8px 8px; border-radius:14px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.06); }
.cab-row--col{ flex-wrap:wrap; }
.cab-row--col>.cab-seg{ flex:1 0 100%; }
.cab-row__ico{
  flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; font-size:13px; color:var(--on);
  background:var(--face); box-shadow:none; text-shadow:0 1px 0 var(--ts);
}
.cab-row__txt{ flex:1; min-width:0; }
.cab-row__t{ font:400 13.5px/1.1 var(--cab-d); color:#fff; }
.cab-row__s{ margin-top:3px; font:500 11px/1.25 var(--cab-b); color:var(--cab-tx3); }
.cab-switch{
  --c:#4bdc6c; --on:#06301a;
  position:relative; flex:none; width:46px; height:26px; padding:0; border:0; border-radius:99px; cursor:pointer;
  background:#1b1044; box-shadow:inset 0 2px 5px rgba(0,0,0,.75); transition:background .18s,box-shadow .18s;
}
.cab-switch::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:linear-gradient(180deg,#fff,#cfc5f6); box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.cab-switch[aria-checked=true]{ background:linear-gradient(180deg,var(--hi),var(--c)); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 0 12px var(--glow); }
.cab-switch[aria-checked=true]::after{ transform:translateX(20px); }
.cab-howto-p{ margin:0 2px 2px; font:500 12px/1.4 var(--cab-b); color:var(--cab-tx2); }
.cab-howto-p b{ color:#fff; font-weight:600; }

/* Jackpot plaques */
.cab-plaque{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:10px; padding:7px 11px 7px 7px; border-radius:14px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 26%,var(--cab-well)),var(--cab-well) 72%);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 55%,transparent),inset 0 2px 6px rgba(0,0,0,.5);
}
.cab-plaque__gem{
  flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; font-size:14px; color:var(--on);
  background:var(--face); box-shadow:none; text-shadow:0 1px 0 var(--ts);
}
.cab-plaque__name{ flex:1; min-width:0; font:400 14px/1 var(--cab-d); color:#fff; }
.cab-plaque__amt{ font:400 16px/1 var(--cab-d); letter-spacing:.01em; color:var(--hi); text-shadow:0 0 10px var(--glow); white-space:nowrap; }
.cab-plaque--hero{ padding:10px 12px 10px 9px; }
.cab-plaque--hero .cab-plaque__gem{ width:38px; height:38px; font-size:18px; border-radius:12px; }
.cab-plaque--hero .cab-plaque__name{ display:flex; flex-direction:column; gap:4px; }
.cab-plaque--hero .cab-plaque__name small{ font:600 10.5px/1 var(--cab-b); color:var(--cab-tx3); }
.cab-plaque--hero .cab-plaque__amt{ font-size:23px; }
.cab-plaque--hero::after{                                                         /* the one shimmer in the jackpot modal */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,225,140,.3) 50%,transparent 60%);
  transform:translateX(-130%); animation:cabSheen 3.8s ease-in-out 1s infinite;
}

/* Skin cards */
.cab-skins{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:3px 2px 2px; }
.cab-skins>.cab-skin:last-child:nth-child(odd){ grid-column:1/-1; }
.cab-skin{
  position:relative; display:flex; flex-direction:column; gap:6px; padding:5px 5px 7px; border:0; border-radius:14px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08);
  font:400 13px/1 var(--cab-d); color:#fff; transition:transform .14s cubic-bezier(.34,1.56,.64,1),background .15s;
}
@media (hover:hover){ .cab-skin:hover{ transform:translateY(-2px) rotate(-1deg); } }
.cab-skin__pv{ position:relative; height:42px; border-radius:10px; background:var(--sk,#555); box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.5),inset 0 -10px 14px rgba(0,0,0,.28); }
.cab-skin__pv::before{ content:''; position:absolute; left:7px; right:7px; top:4px; height:4px; background:radial-gradient(circle,#fff 1.3px,transparent 1.9px) 0 0/10px 4px repeat-x; opacity:.9; }
.cab-skin__pv::after{
  content:''; position:absolute; left:10px; right:10px; bottom:6px; height:18px; border-radius:6px; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.6);
  background:linear-gradient(90deg,transparent calc(33.3% - 1px),rgba(0,0,0,.5) calc(33.3% - 1px) calc(33.3% + 1px),transparent calc(33.3% + 1px) calc(66.6% - 1px),rgba(0,0,0,.5) calc(66.6% - 1px) calc(66.6% + 1px),transparent calc(66.6% + 1px)),rgba(6,2,18,.6);
}
.cab-skin__nm{ padding:0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cab-skin.active{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 2.5px #fff,0 0 14px rgba(255,255,255,.25); }
.cab-skin.active::after{
  content:'\f00c'; font:900 9px/1 'Font Awesome 6 Free','Font Awesome 5 Free'; position:absolute; top:-5px; right:-5px; width:18px; height:18px; display:grid; place-items:center;
  border-radius:50%; background:#4bdc6c; color:#06301a; box-shadow:none;
}

/* Paytable */
.cab-pt-rules{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.cab-stat{ padding:7px 4px 6px; border-radius:13px; text-align:center; background:var(--cab-well); box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.05); }
.cab-stat b{ display:block; font:400 18px/1 var(--cab-d); color:var(--hi); text-shadow:0 0 10px var(--glow); }
.cab-stat span{ display:block; margin-top:4px; font:600 10.5px/1 var(--cab-b); color:var(--cab-tx3); }
.cab-pt-intro{ margin:0 2px; font:500 11.5px/1.4 var(--cab-b); color:var(--cab-tx2); }
.cab-pt-cols,.cab-pt-row{ display:grid; grid-template-columns:34px 1fr 100px; align-items:center; gap:8px; }
.cab-pt-cols{ padding:0 10px 0 7px; font:400 11px/1 var(--cab-d); color:var(--cab-tx3); }
.cab-pt-cols>div,.cab-pt-row__v{ display:grid; grid-template-columns:repeat(3,1fr); text-align:center; }
.cab-pt-list{ display:flex; flex-direction:column; gap:5px; }
.cab-pt-row{ padding:3px 10px 3px 7px; border-radius:13px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.06); }
.cab-pt-row.is-rare{ background:rgba(165,96,255,.16); box-shadow:inset 0 0 0 1.5px rgba(165,96,255,.55); }
.cab-pt-row.is-must-get{ background:rgba(255,178,31,.15); box-shadow:inset 0 0 0 1.5px rgba(255,178,31,.65); }
.cab-pt-row__sym{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cab-pt-row__sym img{ max-width:100%; max-height:100%; }
.cab-pt-row__nm{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-width:0; font:400 13.5px/1.1 var(--cab-d); }
.cab-pt-row__v{ font:400 12.5px/1 var(--cab-d); color:var(--cab-tx2); }
.cab-pt-row__v .top{ color:#ffd166; font-size:14px; }
.cab-pt-row.is-rare .cab-pt-row__v .top{ color:#d9b8ff; }
.cab-tag{ padding:2px 6px 1px; border-radius:99px; font:400 9.5px/1.1 var(--cab-d); letter-spacing:.03em; color:#3a1c00; background:linear-gradient(180deg,#ffd166,#ffab1a); box-shadow:none; }
.cab-tag--rare{ color:#fff; background:linear-gradient(180deg,#c496ff,#8a45ee); }
.cab-pt-foot{ margin:0 2px; font:500 10.5px/1.35 var(--cab-b); color:var(--cab-tx3); }

/* Mahala card */
.cab-fr-msg{ margin:0; padding:9px 11px; border-radius:12px; font:500 12.5px/1.4 var(--cab-b); color:var(--cab-tx2); background:var(--cab-well); box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.05); }
.cab-fr-msg.is-time{ text-align:center; font:400 26px/1 var(--cab-d); letter-spacing:.06em; color:var(--hi); text-shadow:0 0 12px var(--glow); padding:11px; }
.cab-fr-msg.is-time::before{ content:attr(data-cap); display:block; margin-bottom:7px; font:500 11px/1 var(--cab-b); letter-spacing:0; color:var(--cab-tx3); text-shadow:none; }

/* ── 6b. Offerwall (.cab-ow) — the "complete a task, claim your mahala" dialog ───────────────────────
   Markup (ids/handlers stay yours; only the classes matter):
     <div class="cab-ow" data-tone="teal" id="xxAdModal" role="dialog" aria-modal="true" aria-label="…">
       <div class="cab-ow__box">
         <div class="cab-ow__x" onclick="close()"><i class="fas fa-xmark"></i></div>
         <div class="cab-ow__slot"><iframe …></iframe></div>        (or inject the iframe into it with JS)
         <div class="cab-ow__wait"><span class="cab-ow__dot"></span><span>Waiting for task completion…</span></div>   (optional)
         <button class="cab-ow__go" disabled><i class="fas fa-gift"></i> Claim</button>
       </div>
     </div>
   Your JS only adds / removes .active on .cab-ow. Always teal (the Mahala tone). Sits above modals. */
.cab-ow{
  display:none; position:fixed; inset:0; z-index:calc(var(--cab-z) + 9); align-items:center; justify-content:center;
  background:rgba(7,2,18,.8); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.cab-ow.active{ display:flex; }
.cab-ow__box{
  position:relative; box-sizing:border-box; width:96vw; max-width:420px; max-height:98vh; padding:12px 10px 10px; text-align:center;
  border-radius:20px; background:linear-gradient(180deg,var(--cab-card-hi),var(--cab-card-lo));
  box-shadow:0 0 0 2.5px var(--cab-ink),0 0 30px -4px var(--glow),0 22px 44px rgba(0,0,0,.6);
}
.cab-ow__x{
  position:absolute; top:10px; right:10px; z-index:2; width:28px; height:28px; display:grid; place-items:center; cursor:pointer;
  border-radius:9px; font-size:13px; color:var(--on); background:var(--c); transition:transform .2s,background .15s;
}
.cab-ow__x:hover{ background:var(--hi); transform:rotate(90deg); }
.cab-ow__slot{
  box-sizing:border-box; height:92vh; max-height:640px; margin-bottom:10px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:14px; background:var(--cab-well); box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}
@media (max-width:640px){ .cab-ow__slot{ height:calc(92vh - 140px); min-height:320px; } }
.cab-ow__slot iframe{ display:block; width:100%; height:100%; border:0; }
.cab-ow__wait{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 10px; font:500 12.5px/1 var(--cab-b); color:var(--cab-tx2); }
.cab-ow__dot{ width:8px; height:8px; border-radius:50%; background:#ffd24f; animation:cabOwDot 1.2s ease-in-out infinite; }
@keyframes cabOwDot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }
.cab-ow__go{
  display:block; width:100%; height:42px; border:0; border-radius:13px; cursor:pointer; color:var(--on);
  font:400 15px/1 var(--cab-d); text-shadow:0 1px 0 var(--ts); background:var(--face); box-shadow:0 3px 0 var(--lip);
  transition:transform .12s,filter .15s;
}
.cab-ow__go:hover:not(:disabled){ filter:brightness(1.06); }
.cab-ow__go:active:not(:disabled){ transform:translateY(2px); }
.cab-ow__go:disabled{ cursor:not-allowed; color:var(--cab-tx3); text-shadow:none; background:#2a1d5c; box-shadow:inset 0 2px 5px rgba(0,0,0,.6); }
.cab-ow__x:focus-visible,.cab-ow__go:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* ── 7. Keyboard focus + reduced motion ─────────────────────────────── */
.cab-chip:focus-visible,.cab-btn:focus-visible,.cab-key:focus-visible,.cab-skin:focus-visible,.cab-switch:focus-visible,.cab-seg>button:focus-visible,.cab-modal__x:focus-visible{
  outline:3px solid #fff; outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .cab-modal,.cab-chip,.cab-btn,.cab-key,.cab-skin,.cab-switch::after,.cab-slider__thumb{ transition-duration:.01ms !important; }
  .cab-plaque--hero::after,.cab-chip.mahala-claimable,.cab-btn.spinning-state,.cab-modal.open .cab-modal__head::after,.cab-btn-auto.running .cap i,.cab-btn.lb-nudge-target,.cab-ow__dot{ animation:none !important; }
}
/* Page-level "Reduce motion" switch (Settings modal). Your JS only does
   document.documentElement.classList.toggle('cab-reduce-motion', on). No per-game CSS needed. */
html.cab-reduce-motion .cab-bulb-row .cab-bulb,
html.cab-reduce-motion .cab-bulb{ animation-play-state:paused !important; }
html.cab-reduce-motion .cab-btn-spin::after,
html.cab-reduce-motion .cab-chip.mahala-claimable,
html.cab-reduce-motion .cab-btn.spinning-state,
html.cab-reduce-motion .cab-btn.lb-nudge-target,
html.cab-reduce-motion .cab-btn-auto.running .cap i,
html.cab-reduce-motion .cab-plaque--hero::after,
html.cab-reduce-motion .cab-modal.open .cab-modal__head::after,
html.cab-reduce-motion .cab-ow__dot{ animation:none !important; }
/* <<< CAB-UI CSS END */

/* ══════════════════════════════════════════════════════════════════════
   AUTH PAGES — composition layer, part 2 (runs AFTER the kit)
   ══════════════════════════════════════════════════════════════════════ */

/* ── B. Kit surfaces → site theme ─────────────────────────────────────
   The kit paints its modal/wells from these tokens (purple in the arena). Re-pointing
   them at the site tokens is what keeps every kit component on-theme in light AND dark. */
:root{
  --cab-ink:#1A1916;
  --cab-card-hi:var(--card); --cab-card-lo:var(--card);
  --cab-well:var(--surf);
  --cab-tx2:var(--tx2); --cab-tx3:var(--tx3);
}
[data-theme="dark"]{ --cab-ink:#2A2A2A; }

/* ── C. Page shell ──────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg); }
body.au-body{
  min-height:100vh; min-height:100dvh;
  font-family:var(--cab-b); font-size:15px; line-height:1.6; color:var(--tx); background:var(--bg);
  -webkit-font-smoothing:antialiased; transition:background .2s,color .2s;
}
::selection{ background:var(--acc); color:#2a1500; }
.au-page{ min-height:100vh; min-height:100dvh; padding-top:48px; display:flex; flex-direction:column; }
.au-stage{
  flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:40px 24px;
}
.au-stage::before{            /* the same soft accent glow the old pages had */
  content:''; position:absolute; width:600px; height:600px; border-radius:50%; top:-120px; right:-100px; pointer-events:none;
  background:radial-gradient(circle,rgba(232,130,12,.12) 0%,transparent 70%);
}

/* ── D. Top bar (same structure, size and behaviour as the old pages) ── */
.au-nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:48px;
  background:var(--card); border-bottom:1px solid var(--br); box-shadow:0 1px 0 var(--br),0 4px 16px rgba(0,0,0,.05);
  transition:background .2s;
}
.au-nav__in{ max-width:1280px; margin:0 auto; padding:0 22px; height:100%; display:flex; align-items:center; gap:8px; }
.au-logo{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--tx); margin-right:auto; min-width:0; }
.au-logo__mark{
  width:28px; height:28px; border-radius:8px; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(160deg,#ffb020,#e8820c); box-shadow:0 2px 8px rgba(232,130,12,.3);
  font-family:'Instrument Serif',serif; font-size:16px; font-style:italic; color:#fff;
}
.au-logo__txt{ font:700 15px/1 'Instrument Sans',system-ui,sans-serif; letter-spacing:-.02em; color:var(--tx); white-space:nowrap; }
.au-logo__txt em{ font-style:normal; color:#ffb020; }

.au-badge{
  display:inline-flex; align-items:center; gap:6px; padding:0 10px; height:23.1px; text-decoration:none;
  background:var(--card); border:1px solid var(--br); border-radius:var(--r1); transition:all .18s;
}
.au-badge:hover{ background:var(--surf); border-color:var(--br2); transform:translateY(-1px); }
.au-badge__ico{ font-size:12px; color:#e8820c; }
.au-badge__txt{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.au-badge__txt small{ font:600 6.5px/1.1 var(--cab-b); letter-spacing:.5px; color:var(--tx3); }
.au-badge__txt b{ font:400 10px/1.1 var(--cab-d); color:var(--tx); }

.tseg{ display:flex; background:var(--surf); border:1px solid var(--br); border-radius:var(--r1); padding:2px; gap:2px; box-shadow:inset 0 1px 2px rgba(0,0,0,.06); }
.topt{
  width:19px; height:19px; border-radius:5px; display:grid; place-items:center; font-size:9px; cursor:pointer;
  color:var(--tx3); border:1px solid transparent; background:none; transition:all .18s cubic-bezier(.4,0,.2,1);
}
.topt:hover:not(.on){ color:var(--tx2); background:var(--hover); }
.topt[data-t="light"].on{ background:linear-gradient(135deg,#ffd166 0%,#e8820c 100%); color:#2a1500; box-shadow:0 2px 6px rgba(232,130,12,.4); }
.topt[data-t="dark"].on{ background:linear-gradient(135deg,#d6249f 0%,#8b1550 100%); color:#fff; box-shadow:0 2px 6px rgba(214,36,159,.4); }

a.cab-key{ text-decoration:none; }
.au-nav .cab-key{ height:24px; min-width:0; padding:0 12px; border-radius:8px; font-size:11.5px; --lh:2px; }

/* ── E. Card ────────────────────────────────────────────────────────── */
.au-card{
  position:relative; z-index:1; width:100%; max-width:1080px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden;
  background:var(--card); border:1.5px solid rgba(232,130,12,.35); border-radius:22px; box-shadow:var(--sh3);
}
[data-theme="dark"] .au-card{ border-color:rgba(214,36,159,.4); }
.au-card--single{ grid-template-columns:1fr; max-width:520px; }

/* left panel — the brand pitch. Warm dark in BOTH themes, exactly as the old pages had it. */
.au-side{
  position:relative; overflow:hidden; padding:34px 30px; color:#fff;
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
  background:linear-gradient(160deg,#1A1916 0%,#2D1E05 55%,#1A1916 100%);
}
.au-side::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 88% 6%, rgba(214,36,159,.30) 0%, transparent 62%),
    radial-gradient(ellipse 40% 35% at 6% 100%, rgba(214,36,159,.12) 0%, transparent 70%),
    radial-gradient(ellipse 45% 60% at 10% 90%, rgba(234,179,8,.10) 0%, transparent 60%);
}
.au-side>*{ position:relative; }
.au-eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 10px; margin-bottom:16px; border-radius:99px;
  font:400 12.5px/1 var(--cab-d); letter-spacing:.03em; color:#F5C077;
  background:rgba(245,192,119,.12); box-shadow:inset 0 0 0 1.5px rgba(245,192,119,.35);
}
.au-eyebrow i{ color:#ffb020; font-size:12px; }
.au-title{ font:400 clamp(30px,3.3vw,40px)/1.05 var(--cab-d); margin-bottom:12px; }
.au-title em{ font-style:normal; color:#ffb020; }
.au-lead{ font:500 15px/1.55 var(--cab-b); color:rgba(255,255,255,.72); max-width:36ch; }
.au-perks{ display:flex; flex-direction:column; gap:9px; margin-top:22px; }
.au-perk{
  display:flex; align-items:center; gap:12px; padding:9px 12px 9px 9px; border-radius:15px;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09);
}
.au-gem{
  flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; font-size:17px;
  color:var(--on); text-shadow:0 1px 0 var(--ts); background:var(--face); box-shadow:var(--stack);
}
.au-perk b{ display:block; font:400 15px/1.15 var(--cab-d); }
.au-perk small{ display:block; margin-top:4px; font:600 11.5px/1.25 var(--cab-b); color:rgba(255,255,255,.58); }
.au-pills{ display:flex; flex-wrap:wrap; gap:7px; }
.au-pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:99px; font:400 12px/1 var(--cab-d);
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12);
}
.au-pill i{ color:var(--hi); font-size:11px; }

/* right panel — the form */
.au-main{ padding:34px 36px 30px; display:flex; flex-direction:column; justify-content:center; }
.au-h1{ font:400 clamp(30px,3.6vw,38px)/1.05 var(--cab-d); color:var(--tx); margin-bottom:6px; }
.au-h1 em{ font-style:normal; color:var(--acc); }
.au-sub{ font:500 14px/1.4 var(--cab-b); color:var(--tx2); margin-bottom:18px; }
.au-sub a,.au-foot a{ color:var(--acc); font-weight:600; text-decoration:none; }
.au-sub a:hover,.au-foot a:hover{ text-decoration:underline; text-underline-offset:3px; }

.au-socials{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; padding-bottom:3px; }
.au-soc{ height:44px; border-radius:13px; font-size:19px; }
.au-soc--google  { --c:#ffffff; --on:#1f1f1f; --ts:rgba(255,255,255,0); --lip:#c9c7c0; outline:1.5px solid var(--br2); outline-offset:-1.5px; }
.au-soc--telegram{ --c:#2aa9e0; --on:#fff; }
.au-soc--discord { --c:#5865f2; --on:#fff; }
.au-soc--github  { --c:#2f3340; --on:#fff; }
.au-soc[data-tooltip]::after{
  content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 9px); transform:translate(-50%,4px);
  padding:5px 9px; border-radius:8px; background:var(--tx); color:var(--bg); font:400 11.5px/1 var(--cab-d);
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .14s,transform .14s; z-index:6;
}
@media (hover:hover){ .au-soc:hover::after{ opacity:1; transform:translate(-50%,0); } }

.au-div{ display:flex; align-items:center; gap:12px; margin:18px 0 16px; font:400 12px/1 var(--cab-d); letter-spacing:.04em; color:var(--tx3); }
.au-div::before,.au-div::after{ content:''; flex:1; height:1.5px; background:var(--br); }

/* alerts — site red tokens */
.au-alert{
  display:flex; gap:9px; align-items:flex-start; margin-bottom:14px; padding:10px 13px; border-radius:13px;
  font:600 13px/1.4 var(--cab-b); color:var(--red); background:var(--red-bg); box-shadow:inset 0 0 0 1.5px var(--red-br);
}
.au-alert>i{ margin-top:2px; flex:none; }
.au-alert ul{ margin:5px 0 0; padding-left:18px; font-weight:500; }
.au-alert li{ margin:3px 0; }
.au-alert__t{ font:400 14px/1.2 var(--cab-d); }
.au-main .cab-note{ margin-bottom:14px; --note:var(--acc-tx); color:var(--acc-tx); background:var(--acc-bg); box-shadow:inset 0 0 0 1.5px var(--acc-br); }
[data-theme="dark"] .au-main .cab-note{ color:var(--acc); }

/* fields — the kit's recessed "well", on site surface tokens */
.au-grp{ display:flex; flex-direction:column; gap:8px; margin-bottom:15px; }
.au-grp .cab-fieldlbl{ font-size:13.5px; color:var(--tx); }
.au-input{
  width:100%; height:48px; padding:0 15px; border:0; border-radius:13px; outline:none;
  font:500 16px/1 var(--cab-b); color:var(--tx); caret-color:var(--acc); background:var(--surf);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.10), inset 0 0 0 1.5px var(--br2);
  transition:box-shadow .16s,background .2s;
}
.au-input::placeholder{ color:var(--tx3); }
.au-input:focus{
  box-shadow:inset 0 2px 5px rgba(0,0,0,.08), inset 0 0 0 2px var(--acc), 0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent);
}
.au-input:-webkit-autofill,.au-input:-webkit-autofill:hover,.au-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--tx); caret-color:var(--tx);
  box-shadow:inset 0 0 0 1000px var(--surf), inset 0 0 0 1.5px var(--br2);
  transition:background-color 9999s ease-out;
}
.au-hint{ font:600 11.5px/1.3 var(--cab-b); color:var(--tx3); }
.au-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.au-pw{ position:relative; }
.au-pw .au-input{ padding-right:46px; }
.au-pw__btn{
  position:absolute; top:0; right:0; width:46px; height:48px; display:grid; place-items:center; border:0; background:none;
  color:var(--tx3); font-size:14px; cursor:pointer; border-radius:0 13px 13px 0; transition:color .15s;
}
.au-pw__btn:hover,.au-pw__btn:focus-visible{ color:var(--tx); outline:none; }

/* primary key — kit .cab-btn on the site accent */
.au-cta{
  --cab-hero-h:52px; --c:var(--acc); --on:#2a1500; --ts:rgba(255,255,255,.4);
  width:100%; flex:none; margin-top:8px; flex-direction:row; gap:8px;
}
.au-cta .cap{ font-size:19px; }
.au-foot{ text-align:center; margin-top:18px; font:500 13.5px/1.4 var(--cab-b); color:var(--tx2); }

/* ── F. Verification modal (kit .cab-modal, sheet mode, flat + on-theme) ── */
.au-modal{ --w:420px; --c:var(--acc); --on:#2a1500; --ts:rgba(255,255,255,.4); }
.au-modal .cab-modal__card{ box-shadow:0 0 0 2.5px var(--cab-ink), var(--sh3); }
.au-modal .cab-modal__head::after{ display:none; }
.au-modal .cab-modal__title{ text-shadow:0 1px 0 rgba(255,255,255,.35); }
.au-modal .cab-modal__body{ padding:16px; gap:12px; }
.au-modal__p{ font:500 13.5px/1.5 var(--cab-b); color:var(--tx2); }
.au-cap-widget{ display:flex; justify-content:center; min-height:64px; padding:10px; border-radius:14px; background:var(--surf); box-shadow:inset 0 0 0 1.5px var(--br); }
.au-cap-err{ min-height:18px; font:600 12.5px/1.3 var(--cab-b); color:var(--red); }
.au-cap-err:empty{ min-height:0; }
.au-cap-note{ display:flex; align-items:center; justify-content:center; gap:6px; font:600 11px/1.35 var(--cab-b); color:var(--tx3); text-align:center; }

/* ── G. Zoom gate (behaviour unchanged, on site tokens) ─────────────── */
#bbZoomGate{
  position:fixed; inset:0; z-index:2147483647; display:none; align-items:center; justify-content:center; flex-direction:column;
  text-align:center; padding:24px; background:var(--bg); color:var(--tx); font-family:var(--cab-b);
}
#bbZoomGate.bbzg-show{ display:flex; }
.bbzg-logo{ display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.bbzg-title{ font:400 24px/1.1 var(--cab-d); margin-bottom:10px; }
.bbzg-sub{ font:500 14px/1.6 var(--cab-b); color:var(--tx2); max-width:380px; }
.bbzg-key{ display:inline-block; padding:1px 7px; border-radius:6px; background:var(--surf); border:1px solid var(--br2); color:var(--tx); font:600 12px/1.5 'JetBrains Mono',monospace; }
.bbzg-level{ font:600 12px/1 'JetBrains Mono',monospace; color:var(--tx3); margin-top:16px; }

/* ── J. Login-only: stat tiles, forgot link, banned-account screen ──── */
.au-stats{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:22px; }
.au-stat{
  display:flex; align-items:center; gap:10px; padding:9px 11px 9px 9px; border-radius:15px;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09);
}
.au-gem--sm{ width:34px; height:34px; font-size:15px; border-radius:11px; }
.au-stat b{ display:block; font:400 17px/1.1 var(--cab-d); }
.au-stat small{ display:block; margin-top:2px; font:600 11px/1.2 var(--cab-b); color:rgba(255,255,255,.58); }
.au-forgot{ display:flex; justify-content:flex-end; margin:-4px 0 14px; }
.au-forgot a{ font:600 12.5px/1 var(--cab-b); color:var(--acc); text-decoration:none; }
.au-forgot a:hover{ text-decoration:underline; text-underline-offset:3px; }

.au-ban{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); animation:auFade .2s ease;
}
@keyframes auFade{ from{opacity:0} to{opacity:1} }
@keyframes auRise{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }
.au-ban__card{
  width:100%; max-width:400px; overflow:hidden; background:var(--card); border:1px solid var(--br); border-radius:20px;
  box-shadow:var(--sh3); animation:auRise .28s cubic-bezier(.34,1.4,.64,1);
}
.au-ban__bar{ height:4px; background:linear-gradient(90deg,#DC2626,#F87171,#DC2626); }
.au-ban__head{ background:#501313; padding:28px 24px 22px; text-align:center; }
.au-ban__ring{ width:54px; height:54px; margin:0 auto 14px; display:grid; place-items:center; border-radius:50%; border:1.5px solid rgba(255,255,255,.18); }
.au-ban__eyebrow{ font:400 11.5px/1 var(--cab-d); letter-spacing:.1em; text-transform:uppercase; color:#F09595; margin-bottom:6px; }
.au-ban__head h2{ font:400 22px/1.1 var(--cab-d); color:#fff; }
.au-ban__body{ padding:20px 22px 22px; }
.au-ban__reason{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; margin-bottom:16px; border-radius:13px; background:var(--red-bg); box-shadow:inset 0 0 0 1.5px var(--red-br); }
.au-ban__ico{ flex:none; margin-top:1px; }
.au-ban__lbl{ font:400 11px/1 var(--cab-d); letter-spacing:.07em; text-transform:uppercase; color:var(--red); margin-bottom:4px; }
.au-ban__why{ font:600 14px/1.3 var(--cab-b); color:var(--tx); }
.au-ban__note{ font:500 13px/1.65 var(--cab-b); color:var(--tx2); text-align:center; margin-bottom:16px; }
.au-ban__note strong{ color:var(--tx); font-weight:700; }
.au-ban__fine{ height:1.5px; background:var(--br); margin-bottom:14px; }
.au-ban__sig{ font:500 11px/1.4 var(--cab-b); font-style:italic; color:var(--tx3); text-align:center; margin-bottom:14px; }
.au-ban__x{
  width:100%; height:42px; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  background:transparent; color:var(--tx2); border:1.5px solid var(--br2); border-radius:12px; font:400 14px/1 var(--cab-d); transition:all .15s;
}
.au-ban__x:hover{ background:var(--surf); color:var(--tx); }
@media (max-width:640px){ .au-stats{ grid-template-columns:1fr 1fr; gap:7px; } }

/* ── H. Embed mode (page inside the homepage popup): just the form, flush ── */
body.is-embed .au-page{ padding-top:0; }
body.is-embed .au-stage{ padding:0; align-items:stretch; }
body.is-embed .au-stage::before{ display:none; }
body.is-embed .au-card{ max-width:100%; grid-template-columns:1fr; border:0; border-radius:0; box-shadow:none; }
body.is-embed .au-main{ padding:28px 22px; }

/* ── I. Responsive (same breakpoints as the old pages) ──────────────── */
@media (max-width:900px){
  .au-card{ max-width:560px; grid-template-columns:1fr; }
  .au-main{ padding:28px 22px; }
}
@media (min-width:641px) and (max-width:900px){
  .au-side{ display:none; }
}
@media (max-width:640px){
  .au-page{ padding-top:41.04px; }
  .au-nav{ height:41.04px; }
  .au-nav__in{ padding:0 10px; gap:4px; }
  .au-logo__txt{ font-size:12px; }
  .au-logo__mark{ width:22px; height:22px; font-size:13px; border-radius:6px; }
  .au-badge{ padding:0 6px; gap:4px; }
  .au-badge__txt small{ font-size:6px; }
  .au-badge__ico{ font-size:10px; }
  .au-nav .cab-key{ padding:0 8px; font-size:10px; }
  .tseg{ flex-shrink:0; }
  .topt{ width:17px; height:17px; font-size:8px; }
  /* compact phone layout: same components, tighter rhythm */
  .au-stage{ padding:10px; align-items:stretch; }          /* card stretches to the bottom of the screen */
  .au-card{ border-radius:18px; }
  .au-main{ padding:16px 14px 14px; justify-content:flex-start; }
  body.is-embed .au-main>form{ flex:1 1 auto; display:flex; flex-direction:column; }   /* embed only: form grows to the card bottom… */
  body.is-embed .au-main>form>.au-cta{ margin-top:auto; }                              /* …and the main key sits at thumb reach */
  .au-h1{ font-size:26px; margin-bottom:2px; }
  .au-sub{ font-size:12.5px; margin-bottom:10px; }
  .au-socials{ gap:6px; padding-bottom:2px; }
  .au-soc{ height:36px; border-radius:11px; font-size:17px; }
  .au-soc svg{ width:18px; height:18px; }
  .au-div{ margin:11px 0 10px; font-size:11px; }
  .au-grp{ gap:5px; margin-bottom:9px; }
  .au-grp .cab-fieldlbl{ font-size:12.5px; }
  .au-input{ height:42px; padding:0 12px; border-radius:11px; font-size:16px; }   /* 16px keeps iOS from zooming on focus */
  .au-pw .au-input{ padding-right:38px; }
  .au-pw__btn{ width:38px; height:42px; font-size:13px; }
  .au-hint{ font-size:10.5px; }
  .au-row2{ gap:8px; }                      /* password + confirm sit side by side */
  .au-row2 .au-hint{ line-height:1.2; }
  .au-forgot{ margin:-2px 0 9px; }
  .au-forgot a{ font-size:12px; }
  .au-cta{ --cab-hero-h:44px; }
  .au-cta .cap{ font-size:17px; }
  .au-foot{ margin-top:10px; font-size:12.5px; }
  .au-alert{ margin-bottom:9px; padding:8px 11px; font-size:12px; border-radius:11px; }
  .au-main .cab-note{ margin-bottom:9px; padding:4px 9px; font-size:10.5px; }
}
@media (max-width:299px){
  .au-row2{ grid-template-columns:1fr; gap:0; }     /* only absurdly narrow screens stack password / confirm */
}
@media (max-width:380px){
  .au-nav__in{ padding:0 8px; gap:3px; }
  .au-logo__txt{ font-size:11px; }
  .au-badge__txt small{ display:none; }
  .au-badge{ padding:0 5px; }
  .au-main{ padding:14px 12px 12px; }
}

/* ── I0. PHONES — hero + sheet ────────────────────────────────────────────────────────────────
   The desktop pitch panel comes back as a compact dark HERO on top of the card; the form sits below
   it as a rounded sheet. The hero is the flexible part: it takes exactly the height the form leaves
   over, so the card always ends at the bottom of the screen with no empty gap and no scrolling.
   What the hero shows is decided by the height it actually gets (container queries):
     title  →  tiles  →  lead  →  trust pills.   Short phone = fewer rows, tall phone = all of them. */
@media (max-width:640px){
  /* title row of the form is replaced by the hero headline (kept in the DOM for screen readers) */
  body:not(.is-embed) .au-h1,
  body:not(.is-embed) .au-sub{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }

  body:not(.is-embed) .au-stage{ padding:10px; }
  body:not(.is-embed) .au-card{ display:flex; flex-direction:column; border-radius:20px; }

  /* ── the hero ── */
  body:not(.is-embed) .au-side{
    display:flex; flex-direction:column; justify-content:space-evenly; align-items:stretch;
    flex:1 1 0; min-height:0; gap:0; padding:12px 16px 30px;
    container:aus / size;
  }
  /* blocks (head · tiles · pills) become direct flex items, so leftover height is shared evenly between them */
  body:not(.is-embed) .au-side__top{ display:contents; }
  body:not(.is-embed) .au-side__head{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; }
  /* decoration: a big faint coin, so spare height reads as design, never as a gap */
  body:not(.is-embed) .au-side::after{
    content:'\f15a'; font:400 150px/1 'Font Awesome 6 Brands'; position:absolute; right:-26px; top:-22px;
    color:#fff; opacity:.05; transform:rotate(14deg); pointer-events:none;
  }
  body:not(.is-embed) .au-eyebrow{ margin:0 0 7px; padding:5px 11px 5px 9px; font-size:11.5px; }
  body:not(.is-embed) .au-title{ font-size:clamp(26px,9.2cqw,34px); line-height:1.05; margin:0; }
  body:not(.is-embed) .au-title br{ display:none; }                  /* wraps naturally to the width */
  body:not(.is-embed) .au-lead,
  body:not(.is-embed) .au-stats,
  body:not(.is-embed) .au-perks,
  body:not(.is-embed) .au-pills{ display:none; }
  body:not(.is-embed) .au-lead{ font-size:13px; line-height:1.45; max-width:none; margin-top:7px; }

  /* tiles — login stats and register perks share one 2×2 grid */
  body:not(.is-embed) .au-stats,
  body:not(.is-embed) .au-perks{ position:relative; z-index:1; grid-template-columns:1fr 1fr; gap:7px; width:100%; margin:0; }
  body:not(.is-embed) .au-stat,
  body:not(.is-embed) .au-perk{ gap:9px; padding:clamp(7px,calc(5.2cqh - 11px),16px) 9px clamp(7px,calc(5.2cqh - 11px),16px) 8px; border-radius:14px; min-width:0; }
  body:not(.is-embed) .au-gem,
  body:not(.is-embed) .au-gem--sm{ width:clamp(34px,calc(9cqh - 6px),42px); height:clamp(34px,calc(9cqh - 6px),42px); border-radius:11px; font-size:15px; }
  body:not(.is-embed) .au-stat b{ font-size:14px; line-height:1.1; }
  body:not(.is-embed) .au-perk b{ font-size:13px; line-height:1.1; }
  body:not(.is-embed) .au-stat small{ font-size:10.5px; margin-top:2px; }
  body:not(.is-embed) .au-perk small{ display:none; }

  body:not(.is-embed) .au-pills{ position:relative; z-index:1; flex-wrap:nowrap; gap:5px; margin:0; }
  body:not(.is-embed) .au-pill{ padding:5px 8px; gap:4px; font-size:10.5px; white-space:nowrap; }
  body:not(.is-embed) .au-pill i{ font-size:10px; }

  body:not(.is-embed) .au-side{ gap:8px; }          /* minimum breathing room between blocks */

  /* tiny screens: headline only */
  @container aus (max-height:105px){ body:not(.is-embed) .au-eyebrow{ display:none; } }

  /* ── LOGIN thresholds (hero content height) ── */
  @container aus (min-height:196px){ body:not(.is-embed) .au-side--login .au-stats{ display:grid; } }
  @container aus (min-height:262px){ body:not(.is-embed) .au-side--login .au-lead{ display:block; } }
  @container aus (min-height:300px){ body:not(.is-embed) .au-side--login .au-pills{ display:flex; } }
  /* tall phones: stats stand up (icon over text) and the headline breaks like on desktop */
  @container aus (min-height:468px){
    body:not(.is-embed) .au-side--login .au-stat{ flex-direction:column; align-items:flex-start; gap:9px; padding:11px 12px 12px; }
    body:not(.is-embed) .au-side--login .au-gem--sm{ width:40px; height:40px; font-size:17px; }
    body:not(.is-embed) .au-side--login .au-stat b{ font-size:20px; }
    body:not(.is-embed) .au-side--login .au-stat small{ font-size:11.5px; }
  }
  @container aus (min-height:540px){
    body:not(.is-embed) .au-side--login .au-title br{ display:inline; }
    body:not(.is-embed) .au-side--login .au-title{ font-size:clamp(30px,11cqw,42px); }
  }
  /* ── REGISTER thresholds ── */
  @container aus (min-height:150px) and (max-height:223px){ body:not(.is-embed) .au-side--reg .au-lead{ display:block; } }
  @container aus (min-height:224px){ body:not(.is-embed) .au-side--reg .au-perks{ display:grid; } }
  @container aus (min-height:296px){ body:not(.is-embed) .au-side--reg .au-lead{ display:block; } }
  @container aus (min-height:330px){ body:not(.is-embed) .au-side--reg .au-pills{ display:flex; } }
  @container aus (min-height:400px){
    body:not(.is-embed) .au-side--reg .au-title{ font-size:clamp(28px,10cqw,38px); }
    body:not(.is-embed) .au-side--reg .au-gem{ width:40px; height:40px; font-size:17px; }
    body:not(.is-embed) .au-side--reg .au-perk{ padding-block:11px; }
    body:not(.is-embed) .au-side--reg .au-perk b{ font-size:14.5px; }
  }

  /* ── the form sheet ── */
  body:not(.is-embed) .au-main{
    position:relative; z-index:2; flex:none; margin-top:-20px; border-radius:22px 22px 0 0;
    padding:16px 14px calc(12px + env(safe-area-inset-bottom,0px)); background:var(--card);
    border-top:1.5px solid rgba(232,130,12,.35); box-shadow:0 -8px 22px rgba(0,0,0,.22);
  }
  [data-theme="dark"] body:not(.is-embed) .au-main{ border-top-color:rgba(214,36,159,.4); }
  body:not(.is-embed) .au-cta{ margin-top:4px; }
}


/* ── K. Magenta touch (the site's pink, used sparingly) ─────────────────
   Orange stays the brand; magenta only appears as: hero glow (above), the headline highlight,
   a thin bar on the form edge, and the coin watermark tint. */
.au-title em{
  background:linear-gradient(95deg,#ffb020 0%,#ff7a59 45%,#ff4fc0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.au-main::before{                       /* thin orange→magenta bar */
  content:''; position:absolute; left:0; right:0; top:0; height:3px; pointer-events:none;
  background:linear-gradient(90deg,#e8820c,#d6249f 70%,#ff4fc0);
}
.au-main{ position:relative; }
@media (min-width:901px){ .au-main::before{ display:none; } }     /* desktop card already has its own frame */
@media (max-width:640px){
  body:not(.is-embed) .au-main{ overflow:hidden; }       /* keeps the bar inside the sheet's rounded corners */
  body:not(.is-embed) .au-side::after{ color:#ff4fc0; opacity:.09; }
  body.is-embed .au-main::before{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   L. FIXES — mobile modal + locked layout (keep this block LAST)
   ══════════════════════════════════════════════════════════════════════ */

/* L1. Nothing in the auth shell may be a scroll container the browser can nudge when an input
   is focused. overflow:clip clips like hidden but can never be scrolled, so the form can't be
   left "half pushed up" after the keyboard closes. (Browsers without clip keep hidden.) */
@supports (overflow:clip){
  .au-stage,.au-card,.au-side{ overflow:clip; }
  @media (max-width:640px){ body:not(.is-embed) .au-main{ overflow:clip; } }
}
html{ scroll-behavior:auto; }

/* L2. Touch devices: lock the page to the height measured at load (set by auth-ui.php as --au-h).
   The on-screen keyboard changes innerHeight; --au-h ignores that, so layout never reflows.
   .au-page may still scroll internally as a safety net for very short screens, but only
   when the content truly doesn't fit. */
html.au-lock,
html.au-lock body.au-body{ height:var(--au-h,100dvh); overflow:hidden; overscroll-behavior:none; }
html.au-lock body.au-body{ position:fixed; inset:0; width:100%; min-height:0; }
html.au-lock .au-page{ height:var(--au-h,100dvh); min-height:0; overflow-x:clip; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
html.au-lock .au-page::-webkit-scrollbar{ display:none; }

/* L3. Verification modal on phones: a compact dialog popped in the MIDDLE of the screen, like desktop.
   Centred with left/right:0 + auto margins (no 100vw, no translateX) and a 16px gutter each side,
   so it can never touch or overflow the screen edges. */
@media (max-width:640px){
  .cab-modal[data-mode=sheet]{
    left:0; right:0; top:50%; bottom:auto; margin:0 auto;
    width:calc(100% - 32px); max-width:400px;
    transform:translateY(-46%) scale(.94); transform-origin:50% 50%;
    transition:opacity .14s ease,transform .26s cubic-bezier(.34,1.56,.5,1),visibility 0s linear .26s;
  }
  .cab-modal[data-mode=sheet].open{ transform:translateY(-50%); transition-delay:0s; }
  .cab-modal[data-mode=sheet] .cab-modal__card{
    width:100%; max-height:calc(var(--au-h,100dvh) - 32px); border-radius:18px; padding-bottom:0;
  }
  .au-modal .cab-modal__body{ padding:14px; gap:10px; }
}
.cab-scrim{ inset:0; width:100%; height:100%; }
.au-modal .cab-modal__body{ min-width:0; }
.au-cap-widget{ max-width:100%; min-width:0; overflow:hidden; }
.au-cap-widget>*{ max-width:100%; }

/* L4. The modal lives inside .au-card (a stacking context under the fixed nav). While it is
   open, lift the whole card above the nav so scrim + sheet cover the screen edge to edge. */
html.au-modal-open .au-card{ z-index:200; }

/* ══════════════════════════════════════════════════════════════════════
   M. SOCIAL / SINGLE-CARD PAGES (google, telegram, discord, github…)
   One centred card: brand badge, headline, one key, captcha modal.
   ══════════════════════════════════════════════════════════════════════ */
.au-card--single{ grid-template-columns:1fr; max-width:460px; }
.au-card--single .au-main{ align-items:center; text-align:center; padding:34px 32px 28px; }
.au-card--single .au-main::before{ display:none; }                  /* no top bar on single-card pages */
.au-card--single .au-sub{ max-width:34ch; margin:0 auto 18px; }
.au-card--single .au-main>form{ width:100%; }
.au-card--single .au-cta{ margin-top:0; }

.au-brand-ico{                                                       /* provider badge */
  width:68px; height:68px; margin:0 auto 14px; display:grid; place-items:center; border-radius:20px; font-size:30px;
  color:var(--on,#fff); background:var(--face,#fff); box-shadow:var(--stack,0 4px 14px rgba(0,0,0,.15));
}
.au-brand-ico--google{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--br2), 0 6px 16px rgba(66,133,244,.18); }
[data-theme="dark"] .au-brand-ico--google{ background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.5); }

.au-steps{ width:100%; display:flex; flex-direction:column; gap:7px; margin:0 0 16px; text-align:left; }
.au-step{
  display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:13px;
  font:600 12.5px/1.3 var(--cab-b); color:var(--tx2); background:var(--surf); box-shadow:inset 0 0 0 1.5px var(--br);
}
.au-step i{ flex:none; width:22px; text-align:center; color:var(--acc); font-size:13px; }
.au-foot--line{ width:100%; margin-top:16px; padding-top:14px; border-top:1.5px solid var(--br); }

@media (max-width:640px){
  .au-stage--single{ align-items:center; }                           /* ONLY single-card pages: card sits mid-screen */
  .au-stage--single .au-card--single{ align-self:center; }
  /* the phone hero/sheet treatment is for the two-panel pages — undo it here */
  body:not(.is-embed) .au-card--single .au-main{
    margin-top:0; border-radius:0; border-top:0; box-shadow:none; flex:1 1 auto;
    padding:24px 16px calc(18px + env(safe-area-inset-bottom,0px));
  }
  body:not(.is-embed) .au-card--single .au-h1,
  body:not(.is-embed) .au-card--single .au-sub{
    position:static; width:auto; height:auto; margin:0 0 4px; padding:0; overflow:visible; clip:auto; white-space:normal;
  }
  body:not(.is-embed) .au-card--single .au-h1{ font-size:28px; }
  body:not(.is-embed) .au-card--single .au-sub{ font-size:13px; margin:0 auto 14px; }
}

/* M2. provider badges + loading state for single-card pages */
.au-brand-ico--telegram{ background:#2aa9e0; color:#fff; box-shadow:0 6px 16px rgba(42,169,224,.35), inset 0 -3px 0 rgba(0,0,0,.18); }
.au-spin{
  width:34px; height:34px; border-radius:50%; margin:0 auto;
  border:3.5px solid color-mix(in srgb,var(--acc) 22%,transparent); border-top-color:var(--acc);
  animation:auSpin .75s linear infinite;
}
@keyframes auSpin{ to{ transform:rotate(360deg); } }

/* M3. Discord badge */
.au-brand-ico--discord{ background:#5865f2; color:#fff; box-shadow:0 6px 16px rgba(88,101,242,.38), inset 0 -3px 0 rgba(0,0,0,.18); }

/* M4. GitHub badge */
.au-brand-ico--github{ background:#2f3340; color:#fff; box-shadow:0 6px 16px rgba(47,51,64,.35), inset 0 0 0 1.5px rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.25); }

/* ══════════════════════════════════════════════════════════════════════
   N. ACCOUNT PAGES (forgot / reset / 2FA / verify) — single-card extras
   ══════════════════════════════════════════════════════════════════════ */
a.cab-btn{ text-decoration:none; }
.au-card--single .au-grp{ width:100%; text-align:left; }
.au-card--single .au-alert{ width:100%; text-align:left; }
.au-stack{ width:100%; display:flex; flex-direction:column; gap:10px; }

.au-state{                                                           /* big status badge */
  width:76px; height:76px; margin:0 auto 14px; display:grid; place-items:center; border-radius:22px; font-size:32px;
}
.au-state--ok { color:var(--green); background:color-mix(in srgb,var(--green) 12%,transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--green) 38%,transparent); }
.au-state--err{ color:var(--red);   background:var(--red-bg);  box-shadow:inset 0 0 0 1.5px var(--red-br); }
.au-state--acc{ color:var(--acc);   background:var(--acc-bg);  box-shadow:inset 0 0 0 1.5px var(--acc-br); }

.au-info{
  display:flex; gap:10px; align-items:flex-start; width:100%; margin:0 0 16px; padding:11px 13px; border-radius:13px;
  text-align:left; font:600 12.5px/1.5 var(--cab-b); color:var(--tx2); background:var(--surf); box-shadow:inset 0 0 0 1.5px var(--br);
}
.au-info i{ flex:none; margin-top:2px; color:var(--tx3); }
.au-info strong{ color:var(--tx); font-weight:700; }

.au-ghost{                                                           /* secondary key */
  width:100%; height:46px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer;
  border-radius:14px; background:transparent; color:var(--tx2); text-decoration:none;
  font:400 14.5px/1 var(--cab-d); box-shadow:inset 0 0 0 1.5px var(--br2); transition:background .15s,color .15s;
}
.au-ghost:hover,.au-ghost:focus-visible{ background:var(--surf); color:var(--tx); outline:none; }

.au-code{ text-align:center; font:600 22px/1 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.35em; padding-left:calc(15px + .35em); }
.au-code::placeholder{ letter-spacing:.2em; }
.au-card--single .au-div{ width:100%; margin:14px 0; }

@media (max-width:640px){
  .au-state{ width:64px; height:64px; font-size:27px; border-radius:19px; margin-bottom:10px; }
  .au-code{ font-size:20px; }
}