/* ===== «Black Box» skin v2 (1405/08/22) — matte black, type-led, one light.
   Rules of this skin: (1) black is flat — no gradients on surfaces, no glass, hairlines instead of boxes;
   (2) red is spent once per screen: the primary action, the live state, or the lit object — never decoration;
   (3) only ONE object per screen glows (the neon ring or the glass %); text never glows;
   (4) corners are tight (3–6px), layout is start-aligned, numerals are big and tabular;
   (5) motion explains something (time running, a state changing, an arrival) — nothing pulses to look busy.
   Loaded after app.css. All motion stops under prefers-reduced-motion (rule in app.css). ===== */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.theme-dark{
  --bg:#000;--surface:#0b0b0c;--surface-2:#141415;--ink:#fff;--muted:#9b9ba0;--faint:#66666b;
  --line:#1e1e20;--line-2:#303034;--red:#ff3333;--red-ink:#fff;--red-soft:rgba(255,51,51,.12);
  --ok:#35c97f;--ok-soft:rgba(53,201,127,.12);--warn:#f2b441;--warn-soft:rgba(242,180,65,.12);--info:#9db8ff;--info-soft:rgba(157,184,255,.12);
  --focus:#fff;--shadow:none;--r-sm:3px;--r:6px;--r-lg:8px;--gap:12px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
html{background:#000}
body.theme-dark{background:#000;color:var(--ink);line-height:1.7}
#app{position:relative;z-index:1}
.stage{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(80vmax 55vmax at 100% 0,rgba(120,8,12,.20),transparent 62%),#000}
.stage::after{content:"";position:absolute;inset:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- the two lit objects ---------- */
.nring{position:absolute;aspect-ratio:1;pointer-events:none;border-radius:50%}
.nring::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(110,6,10,.5),rgba(40,2,4,.2) 62%,transparent)}
.nring b{position:absolute;inset:0;border-radius:50%;animation:spin 9s linear infinite;
  background:conic-gradient(from 0deg,transparent 0 10%,#ff2020 28%,#fff 38%,#ff2020 48%,transparent 70%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  filter:drop-shadow(0 0 5px #ff2020) drop-shadow(0 0 16px rgba(255,30,30,.7))}
.nring b:nth-child(2){inset:5%;animation-duration:14s;animation-direction:reverse;background:conic-gradient(from 130deg,transparent 0 22%,#ff2a2a 46%,#ffdada 52%,#ff2a2a 58%,transparent 82%)}
.nring b:nth-child(3){inset:-3% 2% 2% -2%;animation-duration:22s;opacity:.6;background:conic-gradient(from 240deg,transparent 0 44%,#ff2a2a 64%,transparent 80%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px))}
.nring b:nth-child(4){inset:10%;animation-duration:6s;opacity:.85;background:conic-gradient(from 60deg,transparent 0 60%,#ff3a3a 80%,#fff 85%,transparent 92%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px))}
.nglyph{position:relative;display:inline-block;font-weight:700;line-height:1;direction:ltr;color:transparent;
  background:linear-gradient(155deg,rgba(255,255,255,.30),rgba(255,255,255,.03) 46%,rgba(255,50,50,.22));-webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1.5px #ff3030;filter:drop-shadow(0 0 4px rgba(255,40,40,.85)) drop-shadow(0 0 26px rgba(255,30,30,.45));animation:neonon 1.8s ease-out both}
.nglyph::before{content:attr(data-t);position:absolute;inset:0;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);transform:translate(.04em,-.04em);background:none}
@keyframes neonon{0%{opacity:0}8%{opacity:1}12%{opacity:.15}18%{opacity:1}24%{opacity:.4}32%,100%{opacity:1}}
.spinner{width:28px;height:28px;border:0;border-radius:50%;animation:spin .8s linear infinite;background:conic-gradient(from 0deg,transparent 0 25%,#ff2a2a 70%,#fff 80%,transparent 84%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px))}
.neon-text{color:#fff}

/* ---------- ticker (a quiet, endless strip of the offer) ---------- */
.ticker{overflow:hidden;white-space:nowrap;direction:ltr;border-block:1px solid var(--line);padding:9px 0;user-select:none}
.ticker>div{display:inline-flex;gap:28px;padding-inline-end:28px;animation:marquee 36s linear infinite;font-size:12px;letter-spacing:.22em;color:var(--faint);font-weight:500}
.ticker b{color:var(--red);font-weight:700;letter-spacing:.05em}
@keyframes marquee{to{transform:translateX(-50%)}}
.dwall{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:.05em .45em;font-weight:700;direction:ltr;line-height:1.1;pointer-events:none;user-select:none}
.dwall span{color:#101011;text-shadow:-1px -1px 0 rgba(255,255,255,.07),2px 4px 8px #000;animation:lit 13.5s linear infinite}
.dwall span:nth-child(2){animation-delay:1.5s}.dwall span:nth-child(3){animation-delay:3s}.dwall span:nth-child(4){animation-delay:4.5s}.dwall span:nth-child(5){animation-delay:6s}
.dwall span:nth-child(6){animation-delay:7.5s}.dwall span:nth-child(7){animation-delay:9s}.dwall span:nth-child(8){animation-delay:10.5s}.dwall span:nth-child(9){animation-delay:12s}
@keyframes lit{0%,10%{color:#ff3333;text-shadow:0 0 14px rgba(255,45,45,.8)}12%,100%{color:#101011;text-shadow:-1px -1px 0 rgba(255,255,255,.07),2px 4px 8px #000}}

/* ---------- type ---------- */
.theme-dark h1{font-size:28px;line-height:1.25;letter-spacing:-.02em}
.theme-dark h2{font-size:17px;letter-spacing:-.01em}
.theme-dark h3{font-size:15px}
.kicker,.land-kicker{font-size:11px;letter-spacing:.3em;color:var(--faint);direction:ltr;font-weight:500;text-align:end}
[dir=rtl] .land-kicker{text-align:end}
.theme-dark .small{font-size:13px}.theme-dark .muted{color:var(--muted)}

/* ---------- surfaces: flat, hairline ---------- */
.theme-dark .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:none;padding:16px}
.theme-dark .card.flat{background:transparent}
.theme-dark .page{gap:20px}
.theme-dark .page>*{animation:rise .45s var(--ease) both}
.theme-dark .page>*:nth-child(2){animation-delay:40ms}.theme-dark .page>*:nth-child(3){animation-delay:80ms}.theme-dark .page>*:nth-child(n+4){animation-delay:120ms}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.theme-dark .topbar{background:#000;border-bottom:1px solid var(--line);padding:12px 20px}
.theme-dark .topbar .brand{font-size:15px}
.theme-dark .side{background:#000;border-inline-end:1px solid var(--line);padding:16px 0}
.theme-dark .side button{border-radius:0;padding:9px 20px;font-weight:400;color:var(--muted);border-inline-start:2px solid transparent;transition:color .15s}
.theme-dark .side button:hover{background:transparent;color:#fff}
.theme-dark .side button[aria-current=page]{background:transparent;color:#fff;font-weight:700;border-inline-start-color:var(--red)}
.theme-dark .side .grp{padding:18px 22px 6px;font-size:11px;letter-spacing:.04em;color:var(--faint)}
.theme-dark .tablewrap{background:transparent;border:0;border-top:1px solid var(--line-2);border-radius:0}
.theme-dark table.t th{background:transparent;color:var(--faint);font-size:12px;font-weight:500;padding:10px 12px;border-bottom:1px solid var(--line)}
.theme-dark table.t td{padding:11px 12px;border-bottom:1px solid var(--line)}
.theme-dark table.t tr.clickable:hover td{background:var(--surface-2)}
.theme-dark .note{background:var(--surface-2);border-radius:0;border-inline-start:2px solid var(--red);box-shadow:none;padding:10px 14px}
.theme-dark .problems{background:var(--red-soft);border-radius:var(--r-sm)}
.theme-dark .kbd{background:var(--surface-2);border-color:var(--line-2)}
.theme-dark .empty{color:var(--faint);padding:36px 12px;font-size:14px}

/* ---------- controls ---------- */
.theme-dark .btn{border-radius:var(--r-sm);border:1px solid var(--line-2);background:transparent;font-weight:500;min-height:44px;transition:background .15s,border-color .15s,color .15s,transform .1s}
.theme-dark .btn:hover{background:var(--surface-2);border-color:#55555a}
.theme-dark .btn:active:not(:disabled){transform:scale(.985)}
.theme-dark .btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:700;box-shadow:none;animation:none}
.theme-dark .btn.primary:hover{background:#ff4d4d;border-color:#ff4d4d;filter:none}
.theme-dark .btn.primary.lg::after{display:none}
.theme-dark .btn.dark{background:#fff;border-color:#fff;color:#000;font-weight:700}
.theme-dark .btn.dark:hover{background:#e6e6e6}
.theme-dark .btn.lg{min-height:54px;font-size:16px}
.theme-dark .btn.ghost{border-color:transparent;color:var(--muted)}
.theme-dark .btn.ghost:hover{color:#fff;background:transparent}
.theme-dark .btn.danger{color:var(--red);border-color:rgba(255,51,51,.5)}
.theme-dark .btn.ok{background:var(--ok);border-color:var(--ok);color:#000;font-weight:700}
.theme-dark .btn:disabled{opacity:.4}
.theme-dark .iconbtn{border-radius:var(--r-sm);color:var(--muted);transition:color .15s}
.theme-dark .iconbtn:hover{background:transparent;color:#fff}
.theme-dark .iconbtn[aria-pressed=true]{color:var(--red)}
.theme-dark .field>label,.theme-dark .field>.label{font-size:12px;color:var(--muted);font-weight:400}
.theme-dark .input,.theme-dark .select,.theme-dark .textarea{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);min-height:48px;transition:border-color .15s}
.theme-dark .input:focus,.theme-dark .select:focus,.theme-dark .textarea:focus{outline:0;border-color:#fff;box-shadow:none}
.theme-dark .select option{background:#141415;color:#fff}
.theme-dark .code-input{caret-color:var(--red);min-height:64px}
.theme-dark .chips{gap:0;border-bottom:1px solid var(--line)}
.theme-dark .chip{border:0;border-radius:0;padding:10px 14px;color:var(--faint);font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s}
.theme-dark .chip[aria-pressed=true]{background:transparent;color:#fff;font-weight:700;border-bottom-color:#fff;box-shadow:none}
.theme-dark .badge{border-radius:2px;border:1px solid var(--line-2);font-size:11.5px;padding:0 7px;font-weight:500}
.theme-dark .badge.red{background:var(--red);color:#fff;border-color:var(--red);font-weight:700;text-shadow:none}
.theme-dark .badge.dark{background:var(--surface-2);color:var(--faint);border-color:var(--line-2)}
.theme-dark .badge.warn{font-variant-numeric:tabular-nums}
.theme-dark .tabs{border-bottom:1px solid var(--line);gap:0}
.theme-dark .tabs button{padding:12px 16px;color:var(--faint);font-weight:400;transition:color .15s}
.theme-dark .tabs button[aria-selected=true]{color:#fff;font-weight:700;border-bottom-color:var(--red);text-shadow:none}
.theme-dark .switch input:checked{background:var(--red)}
.theme-dark .backdrop{background:rgba(0,0,0,.8)}
.theme-dark .sheet{background:#0b0b0c;border:1px solid var(--line-2);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:none;animation:sheetup .3s var(--ease)}
@media (min-width:700px){.theme-dark .sheet{border-radius:var(--r-lg)}}
.theme-dark .toast{background:#fff;color:#000;border:0;border-radius:var(--r-sm);font-weight:500;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.theme-dark .toast.err{background:var(--red);color:#fff}
.theme-dark .toast.ok{background:var(--ok);color:#000}
.theme-dark .conn{font-size:11px;letter-spacing:.02em}
.theme-dark .conn i{width:6px;height:6px}

/* ---------- numbers ---------- */
.theme-dark .kpi .label{font-size:12px;color:var(--faint)}
.theme-dark .kpi .value{font-size:34px;letter-spacing:-.02em;line-height:1.2;margin-top:4px}
.theme-dark .price-new{color:#fff;font-size:26px;letter-spacing:-.02em}
.theme-dark .price-old{color:var(--faint)}
.theme-dark .stockbar{background:var(--line);height:3px;border-radius:0}
.theme-dark .stockbar i{background:#fff;border-radius:0}
.theme-dark .stockbar.low i{background:var(--red);animation:none}
.theme-dark .ring{background:var(--line);height:3px;border-radius:0}
.theme-dark .ring i{background:#fff;border-radius:0}
.theme-dark .ring.urgent i{background:var(--red);animation:none}
.theme-dark .hbar .track i{background:#fff;border-radius:0;height:6px;animation:grow .7s var(--ease) both;transform-origin:right}
@keyframes grow{from{transform:scaleX(0)}}

/* ---------- customer ---------- */
.theme-dark .cust .page{padding:18px 20px}
.theme-dark .bottom-nav{background:#000;border-top:1px solid var(--line)}
.theme-dark .bottom-nav button{color:var(--faint);font-size:11px;padding:10px 2px 8px;transition:color .15s}
.theme-dark .bottom-nav button[aria-current=page]{color:#fff}
.theme-dark .bottom-nav button[aria-current=page] svg{color:#fff;transform:none}
.theme-dark .bottom-nav button[aria-current=page]::before{content:"";position:absolute;top:-1px;width:22px;height:2px;background:var(--red);animation:tabin .25s var(--ease)}
@keyframes tabin{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.theme-dark .hero{position:relative;overflow:hidden;min-height:228px;padding:22px 20px;justify-content:flex-end;gap:2px;border-radius:var(--r);border:1px solid var(--line);background:#050505}
.theme-dark .hero::before,.theme-dark .hero .scan{display:none}
.theme-dark .hero .nring{width:300px;left:-118px;top:50%;margin-top:-150px}
.theme-dark .hero .count{font-size:76px;line-height:1;letter-spacing:-.03em;color:#fff;text-shadow:none;margin:4px 0 6px;animation:none}
.theme-dark .hero .count.hot{color:var(--red);animation:none}
.theme-dark .hero .count.final{animation:tick .5s ease-in-out infinite;text-shadow:none}
.theme-dark .hero.intro{min-height:0;justify-content:flex-start;gap:10px;padding:22px 20px 132px}
.theme-dark .hero.intro h1{font-size:44px;line-height:1.1;margin-top:6px}
.theme-dark .hero.intro p.muted{font-size:15px;line-height:1.9;color:#c9c9cd}
.theme-dark .hero.intro .hero-pct{position:absolute;left:-14px;bottom:-34px;font-size:190px;opacity:1}
.theme-dark .hero.intro .small.faint{position:absolute;inset-inline-start:20px;bottom:18px}
.theme-dark .boxgrid{gap:12px}
.theme-dark .boxtile{background:transparent;border:0;border-radius:0;padding:0;gap:4px;transition:opacity .2s}
.theme-dark .boxtile .art{background:var(--surface);border-radius:var(--r);border:1px solid var(--line)}
.theme-dark .boxtile.live{box-shadow:none;animation:rise .42s var(--ease) both}
.theme-dark .boxtile.live .art{border-color:var(--red)}
.theme-dark .boxtile .tier{top:0;inset-inline-start:0;border-radius:0 0 0 var(--r-sm);font-size:13px;padding:2px 9px}
.theme-dark .gone-stamp{font-size:13px;font-weight:700;letter-spacing:.04em;color:#fff;background:#000;inset:auto 0 0 0;padding:6px 0;transform:none;text-shadow:none;animation:rise .3s var(--ease) both}
.theme-dark .timeline{padding:0;border:0;border-top:1px solid var(--line-2)}
.theme-dark .tl-row{grid-template-columns:64px 1fr auto;padding:13px 0;border-bottom:1px solid var(--line)}
.theme-dark .tl-time{font-size:20px;letter-spacing:-.02em;text-shadow:none}
.theme-dark .how{background:transparent;border:0;border-block:1px solid var(--line);border-radius:0;padding:16px 0}
.theme-dark .howgrid{gap:18px 16px}
.theme-dark .howstep{background:transparent;border:0;padding:0;gap:2px;position:relative;padding-inline-start:34px}
.theme-dark .howstep::before{content:attr(data-n);position:absolute;inset-inline-start:0;top:-7px;font-size:30px;font-weight:700;color:var(--red);-webkit-text-stroke:0;line-height:1.4}
.theme-dark .howic{display:none}
.theme-dark .recard{width:164px;border-radius:var(--r);padding:14px}
.theme-dark .reveal-overlay{background:#000}
.theme-dark .reveal-overlay::before{display:none}
.theme-dark .reveal-overlay .nring{width:min(118vw,520px);top:calc(40% - min(59vw,260px));left:calc(50% - min(59vw,260px))}
.theme-dark .reveal-box.burst{animation:burst2 .8s cubic-bezier(.3,0,.2,1) forwards}
@keyframes burst2{0%{transform:scale(1)}30%{transform:scale(.86)}100%{transform:scale(5);opacity:0;filter:brightness(5)}}
.theme-dark .reveal-card{background:#0b0b0c;border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:none;max-height:92dvh;overflow:auto;animation:cardin .5s var(--ease)}
@keyframes cardin{from{transform:translateY(28px);opacity:0;clip-path:inset(0 0 100% 0)}to{transform:none;opacity:1;clip-path:inset(0)}}
.theme-dark .reveal-card h2{font-size:24px;letter-spacing:-.02em}
.theme-dark .winpass{border:1px solid var(--line-2);border-top:3px solid var(--red);border-radius:0;background:#000;padding:20px 16px;animation:rise .4s var(--ease) both}
.theme-dark .winpass::after{display:none}
.theme-dark .winpass .big{font-size:48px;letter-spacing:.02em;line-height:1.1}
.theme-dark .ladder{gap:0;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;width:max-content;margin-inline:auto 0}
.theme-dark .rung{border:0;border-radius:0;min-width:52px;padding:6px 0;background:transparent;color:var(--faint);border-inline-end:1px solid var(--line-2)}
.theme-dark .rung:last-child{border-inline-end:0}
.theme-dark .rung.on{background:var(--surface-2);color:#fff}
.theme-dark .rung.now{background:var(--red);color:#fff;box-shadow:none;animation:none}
.theme-dark .slots i{width:8px;height:8px;border-width:1px;border-color:var(--faint)}
.theme-dark .slots i.full{background:var(--red);border-color:var(--red)}
.theme-dark .codes-all{background:var(--surface-2);border-radius:var(--r-sm)}
.theme-dark .coderow.fresh b{animation:none;color:var(--red)}
.neon-frame{border-color:var(--line-2)!important;border-top:3px solid var(--red)!important;border-radius:0!important;background:#050505!important}
.theme-dark .section-title h2,.theme-dark .cust section>h2{font-size:20px}

/* ---------- entry screens ---------- */
.theme-dark .landing{position:relative;overflow:hidden;align-items:stretch;justify-content:flex-end;text-align:start;gap:12px;padding:28px 24px calc(28px + env(safe-area-inset-bottom));max-width:480px;margin:0 auto}
.theme-dark .landing>*{position:relative;animation:rise .55s var(--ease) both}
.theme-dark .landing>*:nth-child(n+5){animation-delay:.08s}.theme-dark .landing>*:nth-child(n+7){animation-delay:.16s}
.theme-dark .landing>.nring,.theme-dark .landing>.dwall{display:none}
.theme-dark .landing>img{position:absolute;top:28px;inset-inline-start:24px;width:44px;height:auto;animation:none}
.theme-dark .landing>.land-kicker{position:absolute;top:40px;inset-inline-end:24px;animation:none}
.theme-dark .landing h1{font-size:56px;line-height:1.05;letter-spacing:-.03em}
.theme-dark .landing form.card~h1,.theme-dark .landing h1:has(+form){font-size:36px}
.theme-dark .landing p.muted{font-size:16px;color:#c9c9cd;max-width:18em;margin-bottom:10px}
.theme-dark .landing .opts{max-width:none;gap:0}
.theme-dark .landing .opts .btn.primary{margin-bottom:6px}
.theme-dark .landing .opts .btn:not(.primary){border:0;border-top:1px solid var(--line);border-radius:0;justify-content:space-between;min-height:52px;font-size:15px;color:var(--muted);padding-inline:0}
.theme-dark .landing .opts .btn:not(.primary)::after{content:"←";font-size:18px;transition:transform .2s var(--ease)}
.theme-dark .landing .opts .btn:not(.primary):hover{background:transparent;color:#fff}
.theme-dark .landing .opts .btn:not(.primary):hover::after{transform:translateX(-6px)}
.theme-dark .landing .card{background:transparent;border:0;padding:0;max-width:none!important}
.theme-dark .landing>a{color:var(--faint);text-decoration:none;font-size:13px}
.theme-dark .landing>.ticker{margin-inline:-24px}
.land-mark{position:absolute!important;left:-9%;top:9vh;font-size:min(104vw,480px);animation:neonon 1.8s ease-out both!important}

/* ---------- store ---------- */
.theme-dark .bigcode{display:flex;justify-content:center;gap:min(1.4vw,10px);padding:14px 0 6px;letter-spacing:0;font-size:min(14vw,112px);line-height:1}
.theme-dark .bigcode span{min-width:.98em;padding:.14em 0 .06em;border:1px solid var(--line-2);border-radius:var(--r);background:#050505;color:#fff}
.theme-dark .winbanner{background:var(--ok);color:#000;border-radius:var(--r);animation:rise .4s var(--ease) both}
.theme-dark .pulse-row{gap:0;border:1px solid var(--line);border-radius:var(--r)}
.theme-dark .pulse-row .kpi{background:transparent;border:0;border-inline-end:1px solid var(--line);border-radius:0;text-align:start;padding:14px 18px}
.theme-dark .pulse-row .kpi:last-child{border-inline-end:0}
.theme-dark .pulse-row .value{font-size:30px}
.theme-dark .capture{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r)}
.theme-dark .capture .guide{border-color:rgba(255,255,255,.35)}
.theme-dark .flow-node,.theme-dark .fieldrow,.theme-dark .widget-ed{background:var(--surface);border-color:var(--line-2);border-radius:var(--r)}
.theme-dark .flow-node.locked{border-color:#fff}
.theme-dark .drum-digits span{background:#050505;border:1px solid var(--line-2);border-radius:var(--r);width:56px;height:72px;font-size:38px}
.theme-dark .drum-digits span.on{border-color:var(--red);color:#fff}

/* ---------- wall ---------- */
.wall{background:#000}
.wall .w-boxes{display:none}
.wall .w-top{font-size:1.5vw;color:#8b8b90;letter-spacing:.02em}
.wall .w-center{align-items:flex-start;text-align:start;padding:0 6vw 16vh;gap:1.6vh}
.wall .w-center>*{position:relative;z-index:1}
.wall .w-center>.nring{position:absolute;z-index:0;width:128vh;left:-46vh;top:-14vh}
.wall .w-center>.nring b{-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - .5vh),#000 calc(100% - .38vh));mask:radial-gradient(farthest-side,transparent calc(100% - .5vh),#000 calc(100% - .38vh))}
.wall .w-title{font-size:6.4vw;line-height:1.1;letter-spacing:-.03em;text-shadow:none}
.wall .w-sub{font-size:2vw;color:#9b9ba0}
.wall .w-count{font-size:17vw;line-height:.95;letter-spacing:-.04em;color:#fff;text-shadow:none;animation:none}
.wall .w-stats{bottom:5vh;inset-inline:6vw;border-top:1px solid #1e1e20;padding-top:2.4vh;align-items:flex-start}
.wall .w-stat b{font-size:3.4vw;color:#fff;text-shadow:none;letter-spacing:-.02em}
.wall .w-stat span{font-size:1.2vw;color:#66666b}
.wall .w-next{gap:0}
.wall .w-next div{border:0;border-inline-start:1px solid #1e1e20;border-radius:0;background:none;box-shadow:none;padding:0 2.4vw;font-size:1.25vw;color:#9b9ba0;text-align:start}
.wall .w-next b{font-size:2.6vw;color:#fff;text-shadow:none;letter-spacing:-.02em}
.wall .w-card{gap:5vw;width:88vw;animation:cardin .7s var(--ease)}
.wall .w-card img{border:0;border-radius:.6vw;background:#0b0b0c;box-shadow:none;animation:none}
.wall .w-card .d{font-size:15vw;line-height:.9;letter-spacing:-.04em;color:var(--red,#ff3333);text-shadow:none}
.wall .w-card .t{font-size:4.6vw;letter-spacing:-.02em}
.wall .w-card .s{font-size:2.1vw;color:#9b9ba0}
.wall .w-stamp{font-size:7vw;color:#fff;background:#000;inset:auto 0 0 0;padding:1.5vh 0;transform:none;text-shadow:none;animation:rise .4s var(--ease) both;letter-spacing:.02em}
.wall .w-banner{background:#ff3333;box-shadow:none;font-weight:700}
.wall .w-dwall{position:absolute;inset:0;display:grid;place-content:center end;padding-inline-end:6vw;font-size:13vw;z-index:0}
.wall .w-explode{filter:none}
.wall .w-explode.burst{animation:burst2 .8s cubic-bezier(.3,0,.2,1) forwards}
@media print{.stage{display:none}}
.theme-dark .landing>img{inset-inline-start:auto;right:24px}
.theme-dark .landing>.land-kicker{inset-inline-end:auto;left:24px;top:42px}
.theme-dark .hero .nring{width:264px;left:-74px;margin-top:-132px}
.theme-dark .reveal-card{text-align:start}
.shell>*{min-width:0}
.theme-dark .side{max-width:100vw}

/* ===== store journey (1405/08/22): dashboard with one next step, five milestones, three-step entry =====
   Same rules as the rest of the skin: hairlines, no boxes inside boxes, red only on the one thing to do now. */
.theme-dark .topbar .brand{min-width:0;flex-wrap:nowrap}
.theme-dark .topbar .brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){.theme-dark .topbar .brand .muted{display:none}}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.linkbtn{background:none;border:0;padding:0;color:#fff;text-decoration:underline;text-underline-offset:4px;font:inherit;font-size:13px;cursor:pointer}
.h-sm{font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.02em;margin:14px 0 0}
.theme-dark .small.bad{color:var(--red)}.theme-dark .small.live{color:#fff;font-weight:700}

.next{border-bottom:1px solid var(--line-2);padding:10px 0 24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.next .k{font-size:12px;color:var(--faint)}
.next h2{font-size:clamp(26px,7vw,40px);line-height:1.2;letter-spacing:-.01em;margin:0;font-variant-numeric:tabular-nums}
.next p{margin:0 0 10px;color:var(--muted);max-width:46ch}
.next .btn{min-width:200px}

.mile{list-style:none;margin:0;padding:0;display:grid}
.mile li{display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-items:baseline;padding:11px 14px 11px 0;border-inline-start:2px solid var(--line-2);color:var(--faint)}
.mile .n{grid-row:span 2;font-size:13px;font-variant-numeric:tabular-nums;text-align:center;align-self:center}
.mile b{font-weight:500;font-size:15px}
.mile .meta{grid-column:2;font-size:12.5px;min-height:1em}
.mile li[data-s=done]{border-color:#6f6f74;color:var(--muted)}
.mile li[data-s=done] .n{color:var(--ok)}
.mile li[data-s=now]{border-color:#fff;color:#fff}
.mile li[data-s=now] b{font-weight:700;font-size:17px}
.mile li[data-s=now] .meta{color:var(--muted)}
@media (min-width:760px){
  .mile{grid-template-columns:repeat(5,1fr);gap:6px}
  .mile li{display:flex;flex-direction:column;gap:4px;align-items:flex-start;border-inline-start:0;border-top:2px solid var(--line-2);padding:12px 8px 4px 0}
  .mile .n{text-align:start;align-self:flex-start}
}
.more{border-top:1px solid var(--line);margin-top:8px;padding-top:4px}
.more summary{cursor:pointer;padding:12px 0;color:var(--muted);font-size:14px}
.more[open] summary{color:#fff}
.theme-dark .kpi .value{font-size:clamp(20px,5.4vw,34px);overflow-wrap:anywhere}

.ilist{border-bottom:1px solid var(--line)}
.irow{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.irow>img,.sum>img{border-radius:var(--r-sm);object-fit:cover;background:#111}
.irow .pct{font-size:18px;font-weight:700;flex:none}
.trk{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.trk i{display:block;border-top:3px solid var(--line-2);padding-top:5px;font-style:normal;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk i.on{border-color:#6f6f74;color:var(--muted)}
.trk i.now{border-color:#fff;color:#fff}
.trk.bad i.now{border-color:var(--red);color:var(--red)}

.wz{gap:16px}
.wz-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.wz-steps button{appearance:none;background:none;border:0;border-top:2px solid var(--line-2);border-radius:0;box-sizing:border-box;display:flex;gap:8px;align-items:baseline;width:100%;padding:10px 0 2px;font:inherit;font-size:13px;color:var(--faint);white-space:nowrap;overflow:hidden;text-align:start}
.wz-steps .n{font-variant-numeric:tabular-nums;font-weight:700}
.wz-steps li[data-s=done] button{border-color:#6f6f74;color:var(--muted);cursor:pointer}
.wz-steps li[data-s=now] button{border-color:#fff;color:#fff;font-weight:700}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.seg button{min-height:58px;background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);color:#fff;font:inherit;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .12s,color .12s}
.seg button[aria-checked=true]{background:#fff;color:#000;border-color:#fff}
.stepper{display:grid;grid-template-columns:52px 1fr 52px;gap:6px}
.stepper button{min-height:48px;background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);color:#fff;font-size:22px;cursor:pointer}
.stepper .input{text-align:center;font-size:18px;font-weight:700}
.pricebox{display:flex;flex-direction:column;gap:2px;border-block:1px solid var(--line-2);padding:14px 0}
.pricebox .big{font-size:clamp(30px,9vw,44px);line-height:1.2;letter-spacing:-.02em}
.sum{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;border-block:1px solid var(--line-2);padding:14px 0}
.wz-foot{display:flex;gap:8px;margin-top:4px}
.wz-foot .btn:not(.primary){min-height:56px}
.wz-done{display:flex;flex-direction:column;gap:12px;padding:12px 0 4px}
.wz-done .k{font-size:12px;color:var(--ok)}
.wz-done h3{font-size:28px;line-height:1.2;margin:0}
.wz-done p{margin:0;color:var(--muted)}
@media (max-width:440px){.theme-dark .tabs button{padding:12px 11px}}

/* ===== mobile first (1405/08/22). The phone is the main screen; desktop comes second. =====
   Measured on a 360px Android viewport over every panel: no field under 16px (iOS zooms on focus), no tap target under
   44px, no text under 12px, nothing wider than the screen. */
.input,.select,.textarea,.theme-dark .input,.theme-dark .select,.theme-dark .textarea{font-size:16px}
.iconbtn{width:44px;height:44px}
.check,.theme-dark .check{min-height:44px;align-items:center}
.check input{width:22px;height:22px;margin-top:0}
.landing a.small,a.small.muted{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
.wz-steps button{min-height:44px}
.linkbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.theme-dark .btn.sm{min-height:40px}
.more summary{min-height:44px;display:flex;align-items:center;gap:8px}
.conn,.theme-dark .conn,.kicker,.land-kicker,.theme-dark .badge,.trk i,.theme-dark .side .grp,.theme-dark .bottom-nav button{font-size:12px}
.page>*{min-width:0;max-width:100%}
.section-title{flex-wrap:wrap}
.select{min-width:96px}
.tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs::after{content:"";flex:0 0 20px}
.navtoggle{display:none}
@media (max-width:860px){
  .navtoggle{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 16px;background:#000;border:0;border-bottom:1px solid var(--line);color:#fff;font:inherit;text-align:start;cursor:pointer}
  .navtoggle b{flex:1;font-size:16px}
  .theme-dark .side{display:none}
  .theme-dark .side.open{display:flex;flex-direction:column;position:static;height:auto;max-height:none;overflow:visible;padding:4px 0 12px;border-bottom:1px solid var(--line-2)}
  .theme-dark .side.open .grp{display:block}
  .theme-dark .side.open button{min-height:48px;box-sizing:border-box;white-space:normal;width:100%}
}
@media (max-width:520px){
  .page{padding:14px 16px}
  .row{flex-wrap:wrap}
  .btn{max-width:100%}
  .row:has(>.input.grow),.row:has(>.select){flex-wrap:wrap}
  .input.grow{min-width:140px}
  .theme-dark .btn.lg{min-height:54px}
  .sheet{padding-inline:16px}
  .theme-dark table.t th,.theme-dark table.t td{padding-inline:10px}
}

/* ===== first screens (1405/08/23): landing «/» and sign-up «/app» — guidance, prize, date picker, discount teaser =====
   Same rules as the top of this file: flat black, hairlines, start-aligned type. On these screens the ONE lit object is
   the percent sign and red is spent on the ONE primary button; step numerals and the prize are plain type.
   SLOTS for the 3D assets (produced and wired later):
     .slot-3d-percent — holds the CSS glyph (.nglyph) until the 3D percent replaces it; the slot sets position and size.
     .slot-3d-phone   — empty until the 3D phone render is put inside; while empty it takes no space. */

/* -- Jalali date picker: three native selects, one thumb -- */
.jdate{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.3fr) minmax(0,1fr);gap:8px}
.jdate .select,.theme-dark .jdate .select{min-width:0;min-height:48px;font-size:16px;padding-inline:10px 4px}

/* -- three steps -- */
.guide{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line-2)}
.guide li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px;padding:10px 0 11px;border-bottom:1px solid var(--line)}
.guide .n{grid-row:span 2;font-size:26px;font-weight:700;line-height:1.25;color:#fff;font-variant-numeric:tabular-nums}
.guide b{font-size:15px;font-weight:700;line-height:1.65}
.guide .d{grid-column:2;font-size:13px;line-height:1.75;color:var(--muted)}

/* -- prize -- */
.prize{display:flex;align-items:center;justify-content:space-between;gap:16px}
.prize-t{display:flex;flex-direction:column;min-width:0}
.prize .k{font-size:12px;color:var(--faint)}
.prize b{font-size:28px;line-height:1.35;letter-spacing:-.02em}
.prize .s{font-size:13px;color:var(--muted)}
.slot-3d-phone{flex:none;display:block;width:84px;aspect-ratio:3/4}
.slot-3d-phone:empty{display:none}
.slot-3d-phone>*{display:block;width:100%;height:100%;object-fit:contain}
.slot-3d-percent{display:block;pointer-events:none;line-height:1} /* scale = its font-size: the sign is about 1em tall and .85em wide */

/* -- sign-up screen «/app» -- */
/* the header is full-bleed and clipped, so the percent sign runs off the screen edge without making the page scroll sideways */
.ob{position:relative;display:flex;flex-direction:column;gap:2px;min-height:168px;justify-content:flex-end;max-width:none;margin:-18px -20px 0;padding:18px 20px 4px;overflow:hidden}
@supports (overflow:clip){.ob{overflow-x:clip;overflow-y:visible}}
.ob>.row{position:absolute;inset:18px 20px auto 20px;flex-wrap:nowrap}
.ob .land-kicker{letter-spacing:.2em;white-space:nowrap}
.ob h1,.theme-dark .ob h1{font-size:46px;line-height:1.15;letter-spacing:-.03em}
.ob .when{font-size:13px;line-height:1.7;color:var(--muted)}
.ob .when span{display:block}
.ob-pct{position:absolute;left:-14px;top:46px;font-size:124px}
.gate{position:relative;display:flex;flex-direction:column}
.gate>.card{position:relative;z-index:1}
/* Blurred preview of the PUBLIC discount showcase. Decoration only (aria-hidden, no pointer events, no motion); a blur
   hides nothing from the DOM, so only data that /api/public already gives everyone may be rendered here. */
.tease{position:relative;z-index:0;height:100px;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none}
.tease>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;height:100%;filter:blur(4px)}
.tz{position:relative;overflow:hidden;display:grid;place-items:center;background:var(--surface-2)}
.tz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.5)}
.tz b{color:#fff;font-size:40px;font-weight:700;line-height:1;letter-spacing:-.03em;padding-bottom:22px}
.tz img+b{position:absolute;inset-inline-start:0;top:0;padding:2px 8px 0;background:#000;font-size:26px;line-height:1.45}
.gate>.card+.tease .tz b{padding:22px 0 0}
.gate>.card+.tease .tz img+b{top:auto;bottom:0;padding:2px 8px 0}
.theme-dark .jdate .select[aria-invalid=true]{border-color:var(--red)}
.gate>.tease+.card{margin-top:-26px}
.gate>.card+.tease{margin-top:-26px}

/* -- landing «/» -- */
/* The head takes whatever height is left above the text; the percent sign hangs from the head's bottom edge, so the lit
   sign ends where the title ends and never runs under the small text — on a 568px phone as on a tall one. */
.theme-dark .landing.lv2{gap:14px;padding-bottom:0;justify-content:flex-start;overflow:hidden;overflow:clip}
.lv2-head{flex:1 0 auto;min-height:196px;display:flex;flex-direction:column;justify-content:flex-end}
.lv2-head>.land-pct{position:absolute;left:-54px;bottom:-.17em;font-size:min(56vw,26vh)}
@media (max-width:340px){.theme-dark .landing.lv2>.land-kicker{letter-spacing:.16em}}
.theme-dark .landing.lv2 h1{position:relative;font-size:52px}
.theme-dark .landing.lv2 p.muted{margin-bottom:0;max-width:19em}
.theme-dark .landing.lv2>.land-cta{position:sticky;bottom:0;z-index:2;display:grid;margin-inline:-24px;padding:10px 24px calc(6px + env(safe-area-inset-bottom));background:#000}
.land-links{display:grid;grid-template-columns:1fr 1fr}
.land-links a{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--faint);font-size:13px;text-decoration:none}
.land-links a:hover{color:#fff}

/* -- customer app: small buttons are still thumb targets -- */
.theme-dark .cust .btn.sm{min-height:44px}