/* Zilem Method — black Apple-inspired interface */
/* SF Pro Display - self-hosted, so the name in --font below actually resolves.
   The stack has always NAMED "SF Pro Display", but the site shipped no @font-face
   and no CDN link, so that name only matched on machines that already had the font
   installed. macOS and iOS got real SF Pro; everyone else fell past it to Segoe UI
   (Windows) or Roboto (Android). That is why the type looked right for some people
   and wrong for others.

   local() is listed first on purpose. Anyone who has SF Pro Display installed keeps
   rendering from the local file: no download, and none of the swap flicker the
   typography layer further down was written to avoid. The woff2 is fetched only by
   the people who were previously getting a substitute.

   Weights: the supplied set has upright Regular, Medium and Bold only - its other
   weights are italics. The site leans hardest on 600 (116 declarations), 700 (95),
   650 (72) and 800 (23), so the bold file is declared against 600, 700 and 800
   rather than letting the most common text on the page fall back. Italics are left
   for the browser to synthesise: the set has no Regular or Bold italic to serve.
   Non-standard weights in use (550/620/650/680/750) resolve into these by the
   standard font-matching rules, all landing on bold. */
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:400;font-display:swap;src:local("SF Pro Display Regular"),local("SFProDisplay-Regular"),url("/fonts/sf-pro-display-400.woff2") format("woff2")}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:500;font-display:swap;src:local("SF Pro Display Medium"),local("SFProDisplay-Medium"),url("/fonts/sf-pro-display-500.woff2") format("woff2")}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:600;font-display:swap;src:local("SF Pro Display Bold"),local("SFProDisplay-Bold"),url("/fonts/sf-pro-display-700.woff2") format("woff2")}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:700;font-display:swap;src:local("SF Pro Display Bold"),local("SFProDisplay-Bold"),url("/fonts/sf-pro-display-700.woff2") format("woff2")}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:800;font-display:swap;src:local("SF Pro Display Bold"),local("SFProDisplay-Bold"),url("/fonts/sf-pro-display-700.woff2") format("woff2")}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* The `hidden` attribute only works because the browser's own stylesheet ships a
   low-priority `[hidden]{display:none}`. Any author rule that sets `display` on
   the same element wins on specificity/order, so the attribute stays in the DOM
   and does nothing — the element is on screen permanently. That is exactly what
   happened to `.up-lock` (display:flex) and `.hz-btn` (display:inline-flex), so
   the rule is re-stated here with !important to make the attribute authoritative
   site-wide. Never rely on `display` alone to reveal a `hidden` element: clear
   the attribute (el.hidden = false) instead. tools/audit-hidden.py guards both
   directions of this trap — run it after touching either. */
[hidden]{display:none!important}
:root{--bg:#000;--bg-elevated:#0a0a0c;--bg-surface:rgba(255,255,255,.045);--bg-surface-hi:rgba(255,255,255,.075);--bg-surface-2:rgba(255,255,255,.1);--border:rgba(255,255,255,.09);--border-hi:rgba(255,255,255,.16);--border-bright:rgba(255,255,255,.25);--text:#f5f5f7;--text-1:#f5f5f7;--text-2:#a1a1a6;--text-3:#6e6e73;--text-4:#48484a;--glow:#fff;--glow-dim:rgba(255,255,255,.06);--glow-border:rgba(255,255,255,.18);--glow-glow:rgba(255,255,255,.14);--green:#2997ff;--green-dim:rgba(10,132,255,.1);--amber:#ffd60a;--red:#ff453a;--r:12px;--r2:16px;--r3:22px;--r4:30px;--pill:999px;--glass-bg:rgba(18,18,20,.72);--glass-blur:blur(28px) saturate(1.35);--glass-blur-sm:blur(18px) saturate(1.2);--glass-shine:linear-gradient(140deg,rgba(255,255,255,.06),rgba(255,255,255,0) 42%);--glass-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 70px rgba(0,0,0,.48);--ease-spring:cubic-bezier(.16,1,.3,1);--ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-apple:cubic-bezier(.32,.72,0,1);--dur-1:.15s;--dur-2:.22s;--dur-3:.32s;--dur-4:.5s;--dur-5:.75s;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;}
html{scroll-behavior:smooth;background:#000}body{background:#000;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;text-decoration:none}button{font-family:inherit;cursor:pointer;border:0;outline:0;background:none}input,select{font-family:inherit}::selection{background:rgba(255,255,255,.18)}
/* Dark autofill — prevents browser from overriding dark input backgrounds */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px #1a1a1f inset!important;-webkit-text-fill-color:#fff!important;caret-color:#fff;border-color:var(--border-hi)!important;transition:background-color 5000s ease-in-out 0s}
@keyframes pageEnter{from{opacity:0;transform:translateY(18px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}@keyframes floatSoft{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.42;transform:scale(.72)}}@keyframes borderSweep{0%{transform:translateX(-110%)}100%{transform:translateX(210%)}}@keyframes shimmer{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.page{position:relative;z-index:2;animation:pageEnter var(--dur-5) var(--ease-out) both}
nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;width:calc(100% - 40px);max-width:1060px;height:54px;padding:0 8px 0 20px;display:flex;align-items:center;justify-content:space-between;background:rgba(12,12,14,.68);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:0;border-radius:var(--pill);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 14px 42px rgba(0,0,0,.55);transition:border-color var(--dur-3),background var(--dur-3),box-shadow var(--dur-3) var(--ease-out)}nav:hover{border-color:var(--border-hi);background:rgba(16,16,18,.78);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 18px 48px rgba(0,0,0,.62)}.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:650;font-size:15px;letter-spacing:-.3px;flex-shrink:0}.nav-logo-dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.07),0 0 18px rgba(255,255,255,.42);animation:pulseDot 2.4s ease-in-out infinite}.nav-logo-text{font-weight:650;color:#fff}.nav-links{display:flex;align-items:center;gap:3px}.nav-link{padding:7px 12px;border-radius:var(--pill);font-size:13px;font-weight:500;color:var(--text-3);transition:color var(--dur-2),background var(--dur-2),transform var(--dur-2) var(--ease-out)}.nav-link:hover{color:var(--text);background:rgba(255,255,255,.07);transform:translateY(-1px)}.nav-link.active{color:#fff;background:rgba(255,255,255,.1)}#nav-key-btn{display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--pill);font-size:12px;font-weight:600;color:#000;background:#f5f5f7;box-shadow:0 3px 14px rgba(0,0,0,.3);transition:transform var(--dur-2) var(--ease-out),background var(--dur-2),box-shadow var(--dur-2);white-space:nowrap;flex-shrink:0}#nav-key-btn:hover{background:#fff;transform:translateY(-1px) scale(1.02);box-shadow:0 7px 20px rgba(0,0,0,.4)}#nav-key-btn:active{transform:scale(.96)}#nav-key-btn.active{background:rgba(255,255,255,.09);color:#fff;border:0;box-shadow:none}#nav-usage-pill{display:none;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--pill);background:var(--bg-surface);border:0;font-size:10px;font-weight:600;color:var(--text-3);box-shadow:var(--zshade)}
.container{max-width:960px;margin:0 auto;padding:0 24px}section{padding:90px 0 0}.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:132px 24px 76px}.hero::before{content:"";position:absolute;width:min(760px,92vw);height:420px;top:18%;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(255,255,255,.05),transparent 67%);filter:blur(12px);pointer-events:none;animation:heroAura 7s ease-in-out infinite}@keyframes heroAura{0%,100%{opacity:.6;transform:translateX(-50%) scale(.94)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}.hero>*{position:relative}.hero-badge-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:30px;animation:fadeSlideUp var(--dur-5) .05s var(--ease-out) both}.hero-badge,.section-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--pill);background:rgba(255,255,255,.055);border:0;font-size:11px;font-weight:600;letter-spacing:.3px;color:var(--text-2);backdrop-filter:blur(12px);box-shadow:var(--zshade)}.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 12px var(--glow-glow);animation:pulseDot 2s ease-in-out infinite}.hero h1{font-family:var(--font-display);font-size:clamp(50px,8.5vw,94px);font-weight:700;letter-spacing:-4.8px;line-height:.97;color:#f5f5f7;margin-bottom:25px;animation:heroTitle .9s var(--dur-1) var(--ease-out) both}@keyframes heroTitle{from{opacity:0;transform:translateY(24px) scale(.98);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}.hero h1 span{background:linear-gradient(100deg,#fff 10%,#e5e5e7 52%,#fff 92%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleShine 6s ease-in-out infinite}@keyframes titleShine{0%,100%{background-position:0 center}50%{background-position:100% center}}.hero-sub{font-size:clamp(15px,2vw,18px);color:var(--text-2);max-width:580px;line-height:1.6;margin-bottom:40px;font-weight:400;animation:fadeSlideUp .8s var(--dur-3) var(--ease-out) both}.hero-cta-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:center;margin-bottom:62px;animation:fadeSlideUp .8s var(--dur-3) var(--ease-out) both}
.btn-primary,.btn-run,.btn-tt-analyze{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:var(--pill);font-size:14px;font-weight:600;color:#000;background:#f5f5f7;box-shadow:0 5px 22px rgba(0,0,0,.38);transition:transform var(--dur-2) var(--ease-out),background var(--dur-2),box-shadow var(--dur-2)}.btn-primary::after,.btn-run::after,.btn-tt-analyze::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-130%)}.btn-primary:hover::after,.btn-run:hover:not(:disabled)::after,.btn-tt-analyze:hover::after{animation:borderSweep .8s ease}.btn-primary:hover,.btn-run:hover:not(:disabled),.btn-tt-analyze:hover{background:#fff;transform:translateY(-2px) scale(1.015);box-shadow:0 10px 30px rgba(0,0,0,.48)}.btn-primary:active,.btn-run:active:not(:disabled),.btn-tt-analyze:active{transform:scale(.96)}.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--pill);font-size:14px;font-weight:600;color:var(--text);background:rgba(255,255,255,.055);border:0;backdrop-filter:blur(14px);transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--border-bright);transform:translateY(-2px)}.btn-discord{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--pill);font-size:14px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:0;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.btn-discord:hover{background:rgba(255,255,255,.15);transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,255,255,.06)}
.hero-stats{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center;padding:18px 30px;border-radius:var(--r2);background:rgba(255,255,255,.035);border:0;backdrop-filter:var(--glass-blur-sm);box-shadow:0 18px 50px rgba(0,0,0,.35);animation:fadeSlideUp .9s .46s var(--ease-out) both}.stat-item{text-align:center;transition:transform var(--dur-3) var(--ease-out)}.stat-item:hover{transform:translateY(-3px)}.stat-val{font-family:var(--font-display);font-size:21px;font-weight:650;color:#fff}.stat-lbl{font-size:10px;font-weight:600;color:var(--text-3);letter-spacing:.35px;margin-top:3px}.stat-divider{width:1px;height:27px;background:var(--border)}
.section-header{text-align:center;margin-bottom:36px}.section-badge{margin-bottom:14px}.section-title{font-family:var(--font-display);font-size:clamp(29px,4.5vw,46px);font-weight:650;letter-spacing:-1.9px;color:#f5f5f7;margin-bottom:10px}.section-title span{color:var(--glow)}.section-sub{font-size:15px;color:var(--text-2);max-width:540px;margin:0 auto;line-height:1.65}.patcher-wrap{max-width:800px;margin:0 auto}.engine-panel{display:none}.engine-panel.active{display:block;animation:fadeSlideUp var(--dur-4) var(--ease-out)}
.drop-card,.void-v6-card,.tier-card,.dash-card,.dash-profile{border-radius:var(--r3);background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:0;box-shadow:var(--glass-shadow);position:relative;overflow:hidden;transition:transform var(--dur-3) var(--ease-out),border-color var(--dur-3),box-shadow var(--dur-3),background var(--dur-3)}.drop-card{padding:28px}.drop-card::before,.void-v6-card::before,.tier-card::before,.dash-card::before{content:"";position:absolute;left:-40%;top:0;width:35%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);opacity:0}.drop-card:hover::before,.void-v6-card:hover::before,.tier-card:hover::before,.dash-card:hover::before{opacity:1;animation:borderSweep 1.1s ease}.drop-card:hover,.void-v6-card:hover,.tier-card:hover,.dash-card:hover,.dash-profile:hover{border-color:var(--border-hi);background:rgba(22,22,25,.78);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 28px 80px rgba(0,0,0,.6)}.drop-card::after,.void-v6-card::after,.tier-card::after,.dash-card::after,.dash-profile::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--glass-shine)}
.drop-zone{border:0;border-radius:var(--r2);padding:60px 24px;text-align:center;background:rgba(255,255,255,.018);cursor:pointer;transition:var(--dur-3) var(--ease-out);box-shadow:var(--zshade)}.drop-zone:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.025);transform:translateY(-2px)}.drop-zone.drag-over{border-color:var(--glow);border-style:solid;background:var(--glow-dim);box-shadow:0 0 0 4px rgba(255,255,255,.025),0 0 44px rgba(255,255,255,.04)}.drop-zone.has-file{border-style:solid;border-color:rgba(10,132,255,.38);background:rgba(10,132,255,.025)}.drop-icon{width:54px;height:54px;border-radius:20px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:var(--glow-dim);border:0;color:var(--glow);box-shadow:0 10px 28px rgba(255,255,255,.04);animation:floatSoft 5s ease-in-out infinite}#dropTitle{font-size:16px;font-weight:600;color:#fff;margin-bottom:6px}#dropSub{font-size:12px;color:var(--text-3)}
.scan-view{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}.sv-item{padding:12px;border-radius:var(--r);background:var(--bg-surface);border:0;text-align:center;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.sv-item:hover{background:var(--bg-surface-hi);border-color:var(--border-hi);transform:translateY(-2px)}.sv-lbl,.tt-tech-lbl{font-size:9px;font-weight:650;color:var(--text-3);letter-spacing:.55px;margin-bottom:5px}.sv-val,.tt-tech-val{font-size:14px;font-weight:600;color:#fff}#limitWrap{display:none;margin-top:12px}.limit-bar-track,.progress-track,.dash-progress-track{height:4px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}.limit-bar-fill,.progress-fill,.dash-progress-fill{position:relative;height:100%;border-radius:4px;background:rgba(255,255,255,.55);transition:width var(--dur-4) var(--ease-out);overflow:hidden}.limit-bar-fill::after,.progress-fill::after,.dash-progress-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:shimmer 2.2s ease-in-out infinite}.limit-bar-fill.warn{background:var(--amber)}#limitText{font-size:10px;color:var(--text-3);margin-top:6px}.tier-unlock-bar{display:none;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:12px 15px;border-radius:var(--r);background:rgba(255,69,58,.065);border:0;box-shadow:var(--zshade)}.tier-unlock-bar.show{display:flex;animation:fadeSlideUp var(--dur-3) var(--ease-out)}.tier-unlock-text{font-size:12px;color:var(--text-2);line-height:1.5}.btn-key-unlock{padding:7px 13px;border-radius:var(--pill);font-size:11px;font-weight:600;color:#000;background:#f5f5f7;white-space:nowrap;transition:var(--dur-2) var(--ease-out)}.btn-key-unlock:hover{background:#fff;transform:translateY(-1px)}
.action-row{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}.btn-run{flex:1;min-width:120px}.btn-run:disabled{opacity:.25;cursor:not-allowed}.btn-dl{display:none;align-items:center;gap:7px;padding:13px 21px;border-radius:var(--pill);font-size:13px;font-weight:600;color:#001a06;background:var(--green);box-shadow:0 8px 22px rgba(10,132,255,.14);transition:var(--dur-2) var(--ease-out)}.btn-dl.show{display:flex;animation:fadeSlideUp var(--dur-3) var(--ease-out)}.btn-dl:hover{filter:brightness(1.07);transform:translateY(-2px)}.btn-clear{display:none;align-items:center;gap:6px;padding:11px 16px;border-radius:var(--pill);font-size:12px;font-weight:600;color:var(--text-3);border:0;background:var(--bg-surface);transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.btn-clear:hover{color:var(--red);border-color:rgba(255,69,58,.28);background:rgba(255,69,58,.055)}
#usage-bar{display:none;margin-top:14px;padding:13px 15px;border-radius:var(--r);background:var(--bg-surface)!important;border:0;box-shadow:var(--zshade)}.usage-row{display:flex;align-items:center;gap:10px}.usage-info{flex:1}.usage-label{font-size:12px;font-weight:600;color:var(--text-2)}
.processing-view{display:none;padding:28px}.processing-view.show{display:block}.proc-terminal{border-radius:var(--r2);overflow:hidden;background:#050506;border:0;box-shadow:0 16px 46px rgba(0,0,0,.45)}.proc-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#111113;border-bottom:0;box-shadow:var(--zshade)}.proc-dots{display:flex;gap:6px}.proc-dot{width:9px;height:9px;border-radius:50%}.proc-dot-r{background:#ff5f57}.proc-dot-y{background:#febc2e}.proc-dot-g{background:#28c840}.proc-path{font-family:var(--font-mono);font-size:11px;color:var(--text-3)}.proc-status{font-size:10px;font-weight:600;padding:3px 8px;border-radius:var(--pill);background:var(--bg-surface-hi);color:var(--text-2)}.proc-log{min-height:180px;max-height:220px;overflow-y:auto;padding:14px 16px;font-family:var(--font-mono);font-size:11px;line-height:1.85}.log-line{color:#66666c;animation:logIn var(--dur-2) ease both}@keyframes logIn{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}.log-line.hi{color:#64d2ff}.log-line.pur{color:#d1d1d6}.log-line.ok{color:#2997ff}.log-line.err{color:#ff6961}.log-line.warn{color:#e8e8ed}.progress-wrap{margin-top:14px}.progress-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.progress-pct{font-size:13px;font-weight:650;color:#fff}.progress-stage{font-size:11px;color:var(--text-3)}
.void-v6-card{padding:28px}.void-v6-engine-label{display:flex;align-items:center;gap:8px;margin-bottom:20px}.void-v6-engine-dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 13px var(--glow-glow);animation:pulseDot 2.2s ease-in-out infinite}.void-v6-engine-name{font-size:11px;font-weight:650;color:var(--text-2);letter-spacing:.5px}.void-v6-engine-ver{font-size:10px;font-weight:600;padding:3px 7px;border-radius:var(--pill);background:var(--glow-dim);color:#fff;border:0;box-shadow:var(--zshade)}.tt-input-row{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.tt-input-wrap{flex:1;min-width:200px}.tt-input,.key-input,.notify-input{width:100%;padding:13px 16px;border-radius:var(--pill);font-size:14px;color:#fff;background:rgba(255,255,255,.055);border:0;outline:none;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.tt-input:focus,.key-input:focus,.notify-input:focus{border-color:var(--glow);box-shadow:0 0 0 4px rgba(255,255,255,.05);background:rgba(255,255,255,.075)}.tt-input::placeholder,.key-input::placeholder,.notify-input::placeholder{color:var(--text-3)}
.tt-result{display:none;animation:fadeSlideUp .46s var(--ease-out)}.tt-result.show{display:block}.tt-profile-row{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding:14px 16px;border-radius:var(--r2);background:var(--bg-surface);border:0;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.tt-profile-row:hover{background:var(--bg-surface-hi);border-color:var(--border-hi)}.tt-thumb{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid var(--border-hi)}.tt-author-info{flex:1;min-width:0}.tt-author-name{font-size:15px;font-weight:650;color:#fff}.tt-author-handle{font-size:12px;color:var(--text-3);margin-top:2px}.tt-verified{font-size:10px;font-weight:600;color:#a1a1a6;background:var(--glow-dim);border:0;padding:2px 8px;border-radius:var(--pill);box-shadow:var(--zshade)}.tt-account-badge{font-size:10px;font-weight:650;padding:3px 9px;border-radius:var(--pill)}.tt-account-badge.public{background:var(--green-dim);color:var(--green);border:0;box-shadow:var(--zshade)}.tt-account-badge.private{background:rgba(255,69,58,.07);color:var(--red);border:0;box-shadow:var(--zshade)}.tt-meta-row{display:flex;gap:16px;margin-bottom:16px;font-size:12px;color:var(--text-3);flex-wrap:wrap}.tt-meta-item{display:flex;align-items:center;gap:5px}.tt-title-box{padding:12px 14px;border-radius:var(--r);background:var(--bg-surface);border:0;margin-bottom:16px;box-shadow:var(--zshade)}.tt-title-text{font-size:13px;color:var(--text-2);line-height:1.55}.tt-hashtags{font-size:12px;color:var(--glow);margin-top:6px;font-weight:550}.tt-tech-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tt-tech{padding:10px 12px;border-radius:var(--r);background:var(--bg-surface);border:0;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.tt-tech:hover{background:var(--bg-surface-hi);transform:translateY(-1px)}.tt-loading{display:none;padding:44px;text-align:center}.tt-loading.show{display:block}.tt-spinner{width:30px;height:30px;border-radius:50%;border:0;border-top-color:var(--glow);animation:spin var(--dur-5) linear infinite;margin:0 auto 12px;box-shadow:var(--zshade)}.tt-loading-text{font-size:13px;color:var(--text-3)}.tt-error{display:none;padding:14px;border-radius:var(--r);background:rgba(255,69,58,.065);border:0;font-size:13px;color:var(--red);box-shadow:var(--zshade)}.tt-error.show{display:block;animation:fadeSlideUp var(--dur-3) var(--ease-out)}.tt-video-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;border-radius:var(--r2);font-size:13px;font-weight:600;color:#000;background:#f5f5f7;width:100%;transition:var(--dur-2) var(--ease-out)}.tt-video-btn:hover{background:#fff;transform:translateY(-2px)}
#tiers{padding:80px 0 0}.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.tiers-fixed{grid-template-columns:repeat(3,1fr)}@media(max-width:900px){.tiers-fixed{grid-template-columns:1fr;max-width:420px;margin:0 auto}}@media(max-width:640px){.tiers-fixed{max-width:100%}}.tier-card{padding:28px}.tier-card:hover{transform:translateY(-7px)}.tier-card.featured{border-color:rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(16,16,18,.76) 45%);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 22px 65px rgba(0,0,0,.42)}.tier-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:var(--bg-surface-hi);border:0;color:#fff;transition:var(--dur-3) var(--ease-out);box-shadow:var(--zshade)}.tier-card:hover .tier-icon{transform:translateY(-3px) rotate(-3deg) scale(1.05)}.tier-icon.member{background:var(--bg-surface-hi)}.tier-icon.booster{background:var(--glow-dim);border-color:var(--glow-border)}.tier-icon.donor{background:var(--glow-dim);border-color:var(--glow-border)}.tier-badge{display:inline-flex;padding:4px 9px;border-radius:var(--pill);font-size:9px;font-weight:650;letter-spacing:.4px;text-transform:uppercase;background:var(--bg-surface-hi);color:var(--text-2);border:0;margin-bottom:10px;box-shadow:var(--zshade)}.tier-name{font-size:16px;font-weight:650;color:#fff;margin-bottom:4px}.tier-sub{font-size:11px;color:var(--text-3);margin-bottom:16px}.tier-limit{font-size:31px;font-weight:650;color:#fff;letter-spacing:-1.5px;margin-bottom:20px}.tier-limit span{font-size:14px;font-weight:500;color:var(--text-3);letter-spacing:0}.tier-features{list-style:none;display:flex;flex-direction:column;gap:9px}.tier-features li{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-2)}.tier-feat-icon{width:20px;height:20px;border-radius:6px;background:var(--green-dim);border:0;display:flex;align-items:center;justify-content:center;color:var(--green);flex-shrink:0;box-shadow:var(--zshade)}
#faq{padding:80px 0 0}.faq-list{max-width:680px;margin:0 auto}.faq-item{border-radius:var(--r2);margin-bottom:8px;overflow:hidden;background:rgba(255,255,255,.035);border:0;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.faq-item:hover{background:rgba(255,255,255,.055);border-color:var(--border-hi);transform:translateY(-1px)}.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:17px 20px;font-size:14px;font-weight:550;color:var(--text-2);text-align:left}.faq-q:hover,.faq-item.open .faq-q{color:#fff}.faq-arrow{font-size:14px;color:var(--text-3);transition:var(--dur-3) var(--ease-out)}.faq-item.open .faq-arrow{transform:rotate(180deg);color:#fff}.faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-4) var(--ease-out)}.faq-item.open .faq-a{max-height:240px}.faq-a-inner{padding:0 20px 18px;font-size:13px;color:var(--text-3);line-height:1.72}
.page-hero{padding:142px 24px 60px;text-align:center}.page-hero-title{font-size:clamp(36px,5.5vw,60px);font-weight:700;letter-spacing:-2.9px;color:#f5f5f7;margin-bottom:10px;animation:heroTitle .8s .08s var(--ease-out) both}.page-hero-sub{font-size:15px;color:var(--text-2);max-width:520px;margin:0 auto;line-height:1.58;animation:fadeSlideUp var(--dur-5) var(--dur-2) var(--ease-out) both}.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:24px}.dash-card{padding:23px}.dash-card:hover{transform:translateY(-5px)}.dash-card-icon{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--glow-dim);border:0;margin-bottom:14px;color:var(--glow);transition:var(--dur-3) var(--ease-out);box-shadow:var(--zshade)}.dash-card:hover .dash-card-icon{transform:scale(1.08) rotate(-3deg)}.dash-card-lbl{font-size:10px;font-weight:650;letter-spacing:.45px;color:var(--text-3);margin-bottom:10px}.dash-card-val{font-size:clamp(26px,4vw,36px);font-weight:650;letter-spacing:-1px;color:#fff}.dash-card-sub{font-size:12px;color:var(--text-3);margin-top:4px}.dash-progress-track{margin-top:16px}.dash-profile{display:flex;align-items:center;gap:16px;padding:20px 24px;margin-bottom:20px}.dash-avatar,.dash-avatar-placeholder{width:52px;height:52px;border-radius:50%;border:0;flex-shrink:0;object-fit:cover;box-shadow:var(--zshade)}.dash-avatar-placeholder{background:var(--bg-surface-hi);display:flex;align-items:center;justify-content:center}.dash-tier-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--pill);font-size:10px;font-weight:650;background:var(--glow-dim);color:#a1a1a6;border:0;box-shadow:var(--zshade)}.dash-tier-badge.guest{background:var(--bg-surface);color:var(--text-3);border-color:var(--border)}.dash-locked{display:flex;flex-direction:column;align-items:center;gap:16px;padding:80px 24px;text-align:center}.dash-locked-icon{width:60px;height:60px;border-radius:50%;background:var(--glass-bg);border:0;display:flex;align-items:center;justify-content:center;color:var(--text-3);box-shadow:var(--glass-shadow);animation:floatSoft 5s ease-in-out infinite}.dash-section-title{font-size:14px;font-weight:650;color:var(--text-2);margin-bottom:14px;display:flex;align-items:center;gap:8px}.dash-history-item{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:var(--r2);background:var(--glass-bg);border:0;margin-bottom:8px;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.dash-history-item:hover{background:var(--bg-surface-hi);border-color:var(--border-hi);transform:translateX(3px)}.analytics-section{padding:0 0 80px}.coming-soon-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:120px 24px 60px;flex-direction:column;gap:24px;text-align:center}.coming-soon-badge,.cs-feat{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--pill);background:var(--glass-bg);border:0;font-size:12px;color:var(--text-2);box-shadow:var(--zshade)}.coming-soon-icon{width:80px;height:80px;border-radius:28px;background:var(--glass-bg);border:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--glass-shadow);animation:floatSoft 5s ease-in-out infinite}.coming-soon-title{font-size:clamp(38px,6vw,68px);font-weight:700;letter-spacing:-3.2px;color:#fff}.coming-soon-sub{font-size:16px;color:var(--text-2);max-width:440px;line-height:1.65}.coming-soon-features{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}.cs-feat{transition:var(--dur-2) var(--ease-out)}.cs-feat:hover{background:var(--bg-surface-hi);transform:translateY(-2px)}.cs-feat svg{color:var(--green)}.notify-form{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;justify-content:center}.notify-input{min-width:220px}
#key-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.76);backdrop-filter:blur(22px);opacity:0;pointer-events:none;transition:opacity var(--dur-3) var(--ease-out)}#key-modal.show{opacity:1;pointer-events:all}.key-modal-card{width:min(460px,92vw);border-radius:var(--r3);overflow:hidden;background:rgba(18,18,20,.88);backdrop-filter:var(--glass-blur);border:0;box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 32px 100px rgba(0,0,0,.78);transform:scale(.94) translateY(18px);filter:blur(5px);transition:transform var(--dur-3) var(--ease-out),filter var(--dur-3)}#key-modal.show .key-modal-card{transform:none;filter:none}.key-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:0;box-shadow:var(--zshade)}.key-modal-logo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:#fff}.key-modal-logo-dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.42)}.modal-close-btn{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);background:var(--bg-surface);border:0;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.modal-close-btn:hover{color:#fff;background:var(--bg-surface-hi);transform:rotate(90deg)}.key-modal-body{padding:24px}.key-modal-title{font-size:20px;font-weight:650;color:#fff;margin-bottom:5px}.key-modal-sub{font-size:13px;color:var(--text-3);line-height:1.6;margin-bottom:20px}.key-input-wrap{position:relative;margin-bottom:12px}.key-input{border-radius:var(--r2)}.btn-verify,.btn-discord-modal{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:var(--pill);font-size:14px;font-weight:600;color:#000;background:#f5f5f7;transition:var(--dur-2) var(--ease-out);margin-bottom:12px}.btn-verify:hover{background:#fff;transform:translateY(-1px)}.btn-verify:disabled{opacity:.3}.btn-discord-modal{color:#fff;background:rgba(255,255,255,.25)}.btn-discord-modal:hover{background:#6975f5;transform:translateY(-1px)}.key-status{font-size:12px;font-weight:600;padding:10px 14px;border-radius:14px;display:none;margin-bottom:12px}.key-status.show{display:block;animation:fadeSlideUp var(--dur-3) var(--ease-out)}.key-status.ok{background:var(--green-dim);color:var(--green);border:0;box-shadow:var(--zshade)}.key-status.err{background:rgba(255,69,58,.07);color:var(--red);border:0;box-shadow:var(--zshade)}.key-modal-note{font-size:11px;color:var(--text-3);line-height:1.65;padding:12px 14px;border-radius:14px;background:var(--bg-surface);border:0;box-shadow:var(--zshade)}#discord-profile-card{display:none}
footer{margin-top:80px;padding:44px 24px;border-top:0;text-align:left}.footer-logo{font-size:15px;font-weight:650;color:var(--text-2);margin-bottom:8px}.footer-sub{font-size:11px;color:var(--text-4);margin-bottom:16px}.footer-links{display:flex;align-items:center;gap:22px;justify-content:center;flex-wrap:wrap}.footer-links a{font-size:12px;color:var(--text-3);transition:var(--dur-2) var(--ease-out)}.footer-links a:hover{color:#fff;transform:translateY(-1px)}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(18px) scale(.97);z-index:500;padding:11px 20px;border-radius:var(--pill);font-size:13px;font-weight:550;color:#fff;background:rgba(24,24,26,.94);backdrop-filter:blur(18px);border:0;box-shadow:0 12px 42px rgba(0,0,0,.55);pointer-events:none;opacity:0;transition:var(--dur-3) var(--ease-out);white-space:nowrap}#toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}#toast.ok{border-color:rgba(10,132,255,.35)}#toast.err,#toast.error{border-color:rgba(255,69,58,.35)}#toast.warn{border-color:rgba(232,232,237,.35)}.spinner{display:inline-block;width:14px;height:14px;border-radius:50%;border:0;border-top-color:#000;animation:spin var(--dur-5) linear infinite;box-shadow:var(--zshade)}.fade-in{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity var(--dur-5),transform var(--dur-5) var(--ease-out),filter var(--dur-5)}.fade-in.visible{opacity:1;transform:none;filter:none}
.dash-history-item{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:var(--r2);background:var(--glass-bg);border:0;margin-bottom:8px;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.dash-section-title{font-size:14px;font-weight:650;color:var(--text-2);margin-bottom:14px;display:flex;align-items:center;gap:8px}.dash-locked-icon{width:60px;height:60px;border-radius:50%;background:var(--glass-bg);border:0;display:flex;align-items:center;justify-content:center;color:var(--text-3);box-shadow:var(--glass-shadow);animation:floatSoft 5s ease-in-out infinite}.analytics-section{padding:0 0 80px}.tt-video-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;border-radius:var(--r2);font-size:13px;font-weight:600;color:#000;background:#f5f5f7;width:100%;transition:var(--dur-2) var(--ease-out)}.tt-video-btn:hover{background:#fff;transform:translateY(-1px)}.tt-error{display:none;padding:14px;border-radius:var(--r);background:rgba(255,69,58,.065);border:0;font-size:13px;color:var(--red);box-shadow:var(--zshade)}.tt-error.show{display:block}.tt-loading-text{font-size:13px;color:var(--text-3)}.coming-soon-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:120px 24px 60px;flex-direction:column;gap:24px;text-align:center}.coming-soon-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--pill);background:var(--glass-bg);border:0;font-size:12px;color:var(--text-2);box-shadow:var(--zshade)}.coming-soon-icon{width:80px;height:80px;border-radius:28px;background:var(--glass-bg);border:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--glass-shadow);animation:floatSoft 5s ease-in-out infinite}.coming-soon-title{font-size:clamp(38px,6vw,68px);font-weight:700;letter-spacing:-3.2px;color:#fff}.coming-soon-sub{font-size:16px;color:var(--text-2);max-width:440px;line-height:1.65}.coming-soon-features{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}.cs-feat{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--pill);background:var(--glass-bg);border:0;font-size:12px;color:var(--text-2);transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.hero-sub{font-size:clamp(15px,2vw,18px);color:var(--text-2);max-width:580px;line-height:1.6;margin-bottom:40px;font-weight:400;animation:fadeSlideUp .8s var(--dur-3) var(--ease-out) both}.hero-cta-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:center;margin-bottom:62px;animation:fadeSlideUp .8s var(--dur-3) var(--ease-out) both}.tier-badge-row{margin-bottom:12px}.key-modal-note{font-size:11px;color:var(--text-3);line-height:1.65;padding:12px 14px;border-radius:14px;background:var(--bg-surface);border:0;box-shadow:var(--zshade)}#nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:36px;height:36px;border-radius:50%;background:var(--bg-surface);border:0;box-shadow:var(--zshade)}#nav-hamburger span{display:block;width:15px;height:1.5px;background:#fff;transition:var(--dur-3) var(--ease-out)}#nav-hamburger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}#nav-hamburger.open span:nth-child(2){opacity:0}#nav-hamburger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}#mobile-nav-overlay{display:none;position:fixed;inset:0;z-index:190;background:rgba(0,0,0,.68);backdrop-filter:blur(7px);opacity:0;transition:opacity var(--dur-3) var(--ease-out)}#mobile-nav-overlay.show{display:block;opacity:1}#mobile-nav-menu{display:none;position:fixed;top:0;right:0;bottom:0;z-index:195;width:min(300px,88vw);background:rgba(8,8,10,.96);border-left:0;transform:translateX(100%);transition:transform var(--dur-3) var(--ease-out);flex-direction:column;box-shadow:-24px 0 80px rgba(0,0,0,.72)}#mobile-nav-menu.show{display:flex;transform:none}.mobile-nav-header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 16px;border-bottom:0;box-shadow:var(--zshade)}.mobile-nav-logo{display:flex;align-items:center;gap:9px;font-weight:650;color:#fff}.mobile-nav-close{width:32px;height:32px;border-radius:50%;background:var(--bg-surface);border:0;color:var(--text-2);box-shadow:var(--zshade)}.mobile-nav-links{display:flex;flex-direction:column;padding:14px 12px;gap:4px;flex:1}.mobile-nav-link{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r2);font-size:14px;font-weight:550;color:var(--text-2);transition:var(--dur-2) var(--ease-out)}.mobile-nav-link:hover,.mobile-nav-link.active{background:var(--bg-surface-hi);color:#fff;transform:translateX(3px)}.mobile-nav-footer{padding:16px 22px;border-top:0;box-shadow:var(--zshade)}.mobile-key-btn{width:100%;padding:13px;border-radius:var(--pill);font-size:13px;font-weight:600;color:#000;background:#f5f5f7}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:640px){nav{display:none}.hero{padding:112px 16px 52px}.hero h1{letter-spacing:-2.8px}.container{padding:0 16px}.scan-view{grid-template-columns:repeat(2,1fr)}.tt-tech-row{grid-template-columns:repeat(2,1fr)}.tier-grid,.dash-grid{grid-template-columns:1fr}.tt-input-row{flex-direction:column}.btn-tt-analyze{width:100%}.footer-links{gap:12px}.hero-stats{gap:16px;padding:14px 20px}.action-row{flex-wrap:wrap}.key-modal-card{max-height:calc(100vh - 24px);overflow-y:auto}.tier-unlock-bar{align-items:flex-start;flex-direction:column}.btn-key-unlock{width:100%}}@media(max-width:400px){.hero h1{font-size:40px;letter-spacing:-2px}}
/* ── Mobile bottom taskbar — redesigned ─────────────────────────────────── */
#mobile-taskbar {
  display: none;
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 300;
  height: 64px;
  padding: 0 4px;
  background: rgba(18,18,20,.96);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);border:0;
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(255,255,255,.04) inset,
    0 8px 32px rgba(0,0,0,.55),
    0 2px 8px rgba(0,0,0,.4);
  align-items: center;
  justify-content: space-around;
}

#mobile-taskbar .tb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  height: 100%;
  padding: 0 4px;
  border-radius: 16px;
  color: rgba(255,255,255,.38);
  transition: color var(--dur-2), background var(--dur-2) var(--ease-out);
  text-decoration: none;
  position: relative;
  cursor: pointer;border:0;
  background: none;
  font-family: inherit;;box-shadow:var(--zshade)}

#mobile-taskbar .tb-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  transition: transform var(--dur-2) var(--ease-out);
}

#mobile-taskbar .tb-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

#mobile-taskbar .tb-item:hover { color: rgba(255,255,255,.7); }
#mobile-taskbar .tb-item:active svg { transform: scale(.88); }

#mobile-taskbar .tb-item.active {
  color: #fff;
}

/* Active indicator — small pill above icon */
#mobile-taskbar .tb-item.active::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2.5px;
  background: #fff;
  border-radius: 99px;
  box-shadow: 0 0 8px rgba(255,255,255,.4);
}

/* "More" tray — slides up from bottom bar */
#mobile-more-tray {
  display: none;
  position: fixed;
  bottom: 88px;
  left: 12px;
  right: 12px;
  z-index: 299;
  background: rgba(18,18,20,.97);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);border:0;
  border-radius: 20px;
  padding: 16px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  animation: trayIn var(--dur-2) var(--ease-out);
}
@keyframes trayIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
#mobile-more-tray.open { display: block; }

.tb-tray-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tb-tray-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);border:0;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-2), color var(--dur-2) var(--ease-out);
  cursor: pointer;border:0;
  font-family: inherit;border:0;;box-shadow:var(--zshade)}
.tb-tray-item:hover, .tb-tray-item:active {
  background: rgba(255,255,255,.09);
  color: #fff;
}
.tb-tray-item svg {
  flex-shrink: 0;
  color: rgba(255,255,255,.5);
}

/* Tray backdrop — tap outside to close */
#mobile-more-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 298;
}
#mobile-more-backdrop.open { display: block; }

@media (max-width: 640px) {
  #mobile-taskbar { display: flex; }
  nav { display: none !important; }
  #nav-hamburger { display: none !important; }
  #mobile-nav-overlay { display: none !important; }
  #mobile-nav-menu { display: none !important; }
  body { padding-bottom: 88px; }
}
@media (min-width: 641px) {
  #mobile-taskbar { display: none !important; }
  #mobile-more-tray { display: none !important; }
}

/* ── Donation modal ── */
#donate-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.76);backdrop-filter:blur(22px);opacity:0;pointer-events:none;transition:opacity var(--dur-3) var(--ease-out)}#donate-modal.show{opacity:1;pointer-events:all}#donate-modal.show .donate-card{transform:none;filter:none}.donate-card{width:min(500px,94vw);max-height:90vh;overflow-y:auto;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(18,18,20,.96)!important;transform:scale(.94) translateY(18px);filter:blur(5px);transition:transform var(--dur-3) var(--ease-out),filter var(--dur-3)}.donate-body{padding:20px 24px}.donate-amount-section{margin:18px 0}.donate-amount-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--text-2)}.donate-amount-display{font-size:20px;font-weight:700;color:#fff}.donate-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:rgba(255,255,255,.1);outline:none;margin-bottom:12px}.donate-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 10px rgba(255,255,255,.4)}.donate-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.donate-preset{padding:6px 14px;border-radius:var(--pill);font-size:12px;font-weight:600;color:var(--text-2);background:rgba(255,255,255,.05);border:0;cursor:pointer;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.donate-preset:hover{background:rgba(255,255,255,.1);color:#fff}.donate-preset.active{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);color:#fff}.donate-months{font-size:12px;color:var(--text-3);margin-top:4px}.donate-months strong{color:#fff}.donate-tabs{display:flex;gap:4px;padding:4px;border-radius:var(--pill);background:rgba(255,255,255,.04);border:0;margin:16px 0;box-shadow:var(--zshade)}.donate-tab{flex:1;padding:9px 12px;border-radius:var(--pill);font-size:12px;font-weight:600;color:var(--text-3);text-align:center;cursor:pointer;transition:var(--dur-2) var(--ease-out)}.donate-tab:hover{color:var(--text-2)}.donate-tab.active{color:#000;background:#f5f5f7}.donate-tab-content{display:none}.donate-tab-content.active{display:block}.donate-crypto-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:0;margin-bottom:6px;cursor:pointer;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.donate-crypto-item:hover{background:rgba(255,255,255,.06);border-color:var(--border-hi)}.donate-crypto-coin{font-size:13px;font-weight:600;color:var(--text);min-width:100px}.donate-crypto-addr{font-size:11px;color:var(--text-3);font-family:var(--font-mono);flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis}.donate-crypto-copy{font-size:10px;font-weight:600;color:var(--text-3);padding:3px 10px;border-radius:var(--pill);background:rgba(255,255,255,.06);border:0;margin-left:8px;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.donate-crypto-item:hover .donate-crypto-copy{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}.donate-crypto-loading{font-size:12px;color:var(--text-3);text-align:center;padding:14px}.donate-crypto-note{font-size:10px;color:var(--text-4);margin:8px 0 4px}.donate-ticket-note{display:flex;align-items:flex-start;gap:10px;padding:14px;border-radius:14px;background:rgba(232,232,237,.06);border:0;font-size:12px;color:var(--text-2);line-height:1.6;margin-bottom:4px;box-shadow:var(--zshade)}.donate-ticket-note svg{flex-shrink:0;margin-top:1px;color:#e8e8ed}#donate-submit-btn:disabled{opacity:.4;cursor:not-allowed}.tier-unlock-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}.donate-btn{white-space:nowrap}

/* ── Tier card donation buttons ── */
.tier-donate-section{position:relative;z-index:2;margin-top:18px}.tier-donate-label{font-size:16px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:-.4px;text-shadow:0 1px 2px rgba(0,0,0,.5)}.tier-donate-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:11px;border-radius:var(--pill);font-size:13px;font-weight:600;cursor:pointer;transition:var(--dur-2) var(--ease-out);margin-bottom:7px;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--zshade)}.tier-donate-btn.crypto{color:#000;background:#f5f5f7;box-shadow:0 2px 8px rgba(0,0,0,.3)}.tier-donate-btn.crypto:hover{background:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.4)}.tier-donate-btn.paypal{color:#e5e5ea;background:rgba(255,255,255,.08);border:0;box-shadow:var(--zshade)}.tier-donate-btn.paypal:hover{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);transform:translateY(-1px)}.tier-donate-note{font-size:10px;color:var(--text-3);text-align:center;margin-top:6px}

/* ── Crypto auto-payment invoice ── */
.donate-crypto-auto-note{display:flex;align-items:flex-start;gap:10px;padding:14px;border-radius:14px;background:rgba(10,132,255,.06);border:0;font-size:12px;color:var(--text-2);line-height:1.6;margin-bottom:14px;box-shadow:var(--zshade)}.donate-crypto-auto-note svg{flex-shrink:0;margin-top:1px}.donate-coin-picker{display:flex;align-items:center;gap:10px;margin-bottom:14px}.donate-coin-label{font-size:12px;color:var(--text-3);white-space:nowrap}.donate-coin-select{padding:8px 12px;border-radius:var(--pill);font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.05);border:0;outline:none;cursor:pointer;min-width:140px;box-shadow:var(--zshade)}.donate-coin-select:focus{border-color:#fff}.donate-coin-select option{background:#1a1a1f;color:#fff}.donate-invoice-card{padding:18px;border-radius:var(--r2);background:rgba(255,255,255,.06);border:0;text-align:center;margin-bottom:14px;box-shadow:var(--zshade)}.donate-invoice-header{font-size:10px;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}.donate-invoice-amount{font-size:28px;font-weight:700;color:#fff;font-family:var(--font-display);letter-spacing:-1px}.donate-invoice-currency{font-size:12px;color:var(--text-3);margin-bottom:14px}.donate-invoice-addr-wrap{padding:12px;border-radius:14px;background:rgba(0,0,0,.2);border:0;box-shadow:var(--zshade)}.donate-invoice-addr-label{font-size:9px;font-weight:650;color:var(--text-4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.donate-invoice-addr{font-size:11px;font-family:var(--font-mono);color:var(--text-2);word-break:break-all;margin-bottom:10px;line-height:1.5;user-select:all}.donate-invoice-copy{padding:6px 16px;border-radius:var(--pill);font-size:11px;font-weight:650;color:#fff;background:rgba(255,255,255,.1);border:0;cursor:pointer;transition:var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}.donate-invoice-copy:hover{background:rgba(255,255,255,.2)}.donate-invoice-expires{font-size:10px;color:var(--text-4);margin-top:8px}.donate-invoice-waiting{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;font-size:12px;color:var(--text-3)}.donate-spinner{width:16px;height:16px;border-radius:50%;border:0;border-top-color:#fff;animation:spin .8s linear infinite;box-shadow:var(--zshade)}


/* ═══════════════════════════════════════════════════════════════
   ZILEM GLOW REDESIGN — appended overrides (cascade-safe)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. New design tokens ──────────────────────────────────────── */
:root {
  /* Monochrome accent — replaces all violet/purple */
  --violet:          #fff;
  --violet-dim:      rgba(255,255,255,.06);
  --violet-border:   rgba(255,255,255,.18);
  --violet-glow:     rgba(255,255,255,.10);
  --violet-strong:   rgba(255,255,255,.28);

  /* Green accent (patched, good, download) */
  --green-glow:      rgba(10,132,255,.22);
  --green-border-hi: rgba(10,132,255,.45);

  /* Ambient page radial sources */
  --aura-top:    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(255,255,255,.10), transparent);
  --aura-mid:    radial-gradient(ellipse 55% 40% at 50% 48%,  rgba(255,255,255,.04), transparent);

  /* Enhanced glass */
  --glass-bg-hi:     rgba(20,20,23,.82);
  --glass-shadow-hi: 0 1px 0 rgba(255,255,255,.08) inset, 0 32px 90px rgba(0,0,0,.65);
}

/* ── Ambient page glow layers (behind everything) ─────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--aura-top), var(--aura-mid);
  pointer-events: none;
  z-index: 0;
}

/* ── 2. Nav upgrades ───────────────────────────────────────────── */
nav {
  box-shadow:
    0 1px 0 rgba(255,255,255,.09) inset,
    0 -1px 0 rgba(255,255,255,.1) inset,
    0 14px 42px rgba(0,0,0,.55),
    0 0 60px rgba(255,255,255,.04);
}
nav:hover {
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.11) inset,
    0 18px 52px rgba(0,0,0,.62),
    0 0 80px rgba(255,255,255,.07);
}

/* Logo dot — white pulse */
.nav-logo-dot {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 18px rgba(255,255,255,.35);
}

/* Active login button — white */
#nav-key-btn.active {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}
#nav-key-btn:not(.active):hover {
  box-shadow: 0 7px 24px rgba(0,0,0,.42), 0 0 30px rgba(255,255,255,.08);
}

/* Usage pill — colour on pressure */
#nav-usage-pill {
  transition: border-color var(--dur-3), box-shadow var(--dur-3) var(--ease-out);
}

/* ── 3. Hero upgrades ──────────────────────────────────────────── */
.hero::before {
  background:
    radial-gradient(ellipse 70% 45% at 50% 20%, rgba(255,255,255,.08), transparent 65%),
    radial-gradient(ellipse 90% 55% at 50% 22%, rgba(255,255,255,.04), transparent 68%);
  filter: blur(18px);
  animation: heroAura 8s ease-in-out infinite;
}

/* Title gradient — violet tint */
.hero h1 span {
  background: linear-gradient(110deg, #fff 8%, #d8b4fe 38%, #fff 58%, #e9d5ff 82%, #fff 95%);
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleShine 7s ease-in-out infinite;
}

/* Hero stats bar — violet top glow */
.hero-stats {
  border-color: rgba(255,255,255,.12);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 18px 55px rgba(0,0,0,.38),
    0 0 50px rgba(255,255,255,.05);
}
.hero-stats:hover {
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 22px 65px rgba(0,0,0,.44),
    0 0 70px rgba(255,255,255,.08);
}

/* ── 4. Drop card, drop zone, scan-view ────────────────────────── */
.drop-card,
.void-v6-card {
  background: var(--glass-bg-hi);
  box-shadow: var(--glass-shadow-hi);
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-3), box-shadow var(--dur-3), background var(--dur-3);
}
.drop-card:hover,
.void-v6-card:hover {
  border-color: rgba(255,255,255,.20);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 32px 90px rgba(0,0,0,.65),
    0 0 70px rgba(255,255,255,.07);
}

/* Drop zone — violet on drag-over, green when file loaded */
.drop-zone {
  border-color: rgba(255,255,255,.11);
  transition: border-color var(--dur-3), background var(--dur-3), transform var(--dur-3), box-shadow var(--dur-3) var(--ease-out);
}
.drop-zone:hover {
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 40px rgba(255,255,255,.05);
}
.drop-zone.drag-over {
  border-color: var(--violet);
  background: var(--violet-dim);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.06),
    0 0 55px rgba(255,255,255,.1);
}
.drop-zone.has-file {
  border-color: var(--green-border-hi);
  background: rgba(10,132,255,.03);
  box-shadow: 0 0 40px rgba(10,132,255,.06);
}

/* Drop icon — violet glow */
.drop-icon {
  background: var(--violet-dim);
  border-color: var(--violet-border);
  color: var(--violet);
  box-shadow: 0 0 28px var(--violet-glow);
}

/* Scan-view items — violet hover glow */
.sv-item {
  transition: background var(--dur-2), border-color var(--dur-2), transform var(--dur-2), box-shadow var(--dur-2) var(--ease-out);
}
.sv-item:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--violet-border);
  box-shadow: 0 0 18px var(--violet-dim);
  transform: translateY(-3px);
}

/* ── 5. Progress bar, proc terminal, usage bar ─────────────────── */

/* Progress fill — violet → green gradient + stronger shimmer */
.progress-fill {
  background: linear-gradient(90deg, #f5f5f7, #ffffff 62%, #2997ff);
  box-shadow: 0 0 14px rgba(255,255,255,.38);
}
.progress-fill::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
}

/* Limit-bar fill green glow */
.limit-bar-fill {
  background: linear-gradient(90deg, rgba(10,132,255,.6), var(--green));
  box-shadow: 0 0 10px var(--green-glow);
}
.limit-bar-fill.warn {
  background: linear-gradient(90deg, #e8e8ed, var(--amber));
  box-shadow: 0 0 10px rgba(232,232,237,.35);
}

/* Proc terminal — darker, richer border */
.proc-terminal {
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 55px rgba(0,0,0,.55), 0 0 40px rgba(255,255,255,.06);
}
.proc-bar {
  background: #0d0d10;
  border-bottom-color: rgba(255,255,255,.1);
}

/* Usage progress bar fill — driven by JS inline style but override track */
#usage-progress-fill {
  box-shadow: 0 0 8px var(--green-glow);
}

/* Tier unlock bar — violet version for limit reason */
.tier-unlock-bar {
  border-color: rgba(255,69,58,.18);
}
.tier-unlock-bar.show {
  box-shadow: 0 4px 20px rgba(255,69,58,.06);
}

/* ── 6. Tier cards ─────────────────────────────────────────────── */

/* All tier cards — subtle violet shimmer on hover */
.tier-card {
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-3), box-shadow var(--dur-3), background var(--dur-3);
}
.tier-card:hover {
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 28px 80px rgba(0,0,0,.60),
    0 0 60px rgba(255,255,255,.08);
  transform: translateY(-8px);
}

/* Featured (Booster) card — white/silver glow */
.tier-card.featured {
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 24px 70px rgba(0,0,0,.48),
    0 0 80px rgba(255,255,255,.04);
}
.tier-card.featured:hover {
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 32px 90px rgba(0,0,0,.60),
    0 0 100px rgba(255,255,255,.07);
}

/* Donor card — violet aura */
.tier-card:has(.tier-icon.donor) {
  border-color: var(--violet-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(16,16,20,.78) 50%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 22px 65px rgba(0,0,0,.45),
    0 0 80px rgba(255,255,255,.10);
}
.tier-card:has(.tier-icon.donor):hover {
  border-color: var(--violet-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 32px 90px rgba(0,0,0,.60),
    0 0 120px rgba(255,255,255,.15);
}

/* Tier icons */
.tier-icon.booster {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 0 20px rgba(255,255,255,.08);
}
.tier-icon.donor {
  background: var(--violet-dim);
  border-color: var(--violet-border);
  box-shadow: 0 0 22px var(--violet-glow);
  color: var(--violet);
}
.tier-card:hover .tier-icon {
  transform: translateY(-4px) rotate(-4deg) scale(1.08);
  box-shadow: 0 6px 22px rgba(255,255,255,.15);
}

/* Tier feature icons — violet for donor card */
.tier-card:has(.tier-icon.donor) .tier-feat-icon {
  background: var(--violet-dim);
  border-color: var(--violet-border);
  color: var(--violet);
}

/* ── 7. Button upgrades ────────────────────────────────────────── */

/* btn-run (Patch button) — violet shimmer + glow */
.btn-run {
  background: #f5f5f7;
  box-shadow: 0 5px 22px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.12);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2), box-shadow var(--dur-3);
}
.btn-run:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 10px 32px rgba(0,0,0,.48),
    0 0 50px rgba(255,255,255,.10);
}

/* btn-dl (Download) — green glow */
.btn-dl {
  background: var(--green);
  box-shadow: 0 8px 26px var(--green-glow);
  transition: transform var(--dur-2) var(--ease-out), filter var(--dur-2), box-shadow var(--dur-3);
}
.btn-dl:hover {
  filter: brightness(1.1);
  box-shadow: 0 12px 36px rgba(10,132,255,.38);
  transform: translateY(-2px);
}

/* Donate button in unlock bar — violet gradient glow */
.btn-key-unlock.donate-btn {
  background: linear-gradient(135deg, #f5f5f7, #ffffff);
  color: #000;border:0;
  box-shadow: 0 4px 18px rgba(255,255,255,.3);
  transition: transform var(--dur-2), box-shadow var(--dur-2), filter var(--dur-2) var(--ease-out);}
.btn-key-unlock.donate-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 28px rgba(255,255,255,.50);
  transform: translateY(-2px);
}

/* btn-primary / btn-secondary — subtle violet accent on hover */
.btn-secondary:hover {
  border-color: var(--violet-border);
  box-shadow: 0 0 24px var(--violet-dim);
}

/* Discord modal button — actual Discord blue/violet */
.btn-discord-modal {
  background: linear-gradient(135deg, rgba(88,101,242,.35), rgba(88,101,242,.20));border:0;;box-shadow:var(--zshade)}
.btn-discord-modal:hover {
  background: linear-gradient(135deg, rgba(88,101,242,.55), rgba(88,101,242,.38));
  border-color: rgba(88,101,242,.65);
  box-shadow: 0 6px 24px rgba(88,101,242,.28);
  transform: translateY(-1px);
}

/* Tier donate crypto button — shimmer */
.tier-donate-btn.crypto {
  box-shadow: 0 2px 12px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.08);
}
.tier-donate-btn.crypto:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,.44), 0 0 30px rgba(255,255,255,.07);
}

/* ── Extra: section badge violet tint ──────────────────────────── */
.section-badge {
  background: var(--violet-dim);
  border-color: var(--violet-border);
  color: var(--violet);
}

/* ── Extra: FAQ item hover — violet left accent ────────────────── */
.faq-item {
  transition: background var(--dur-2), border-color var(--dur-2), transform var(--dur-2), box-shadow var(--dur-2) var(--ease-out);
}
.faq-item:hover {
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 0 28px rgba(255,255,255,.05);
}
.faq-item.open {
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 36px rgba(255,255,255,.07);
}

/* ── Extra: modal card violet shimmer ──────────────────────────── */
.key-modal-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,.09) inset,
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 32px 100px rgba(0,0,0,.80),
    0 0 80px rgba(255,255,255,.08);
}

/* ── Extra: footer top border violet glow ──────────────────────── */
/* the 40px white glow that used to sit above every footer is gone — it read as a wash
   over the last section. Separation is handled once, by the footer block at the bottom
   of this file, with a rule that fades at both ends. */

/* ── Extra: toast violet border for ok ─────────────────────────── */
#toast.ok {
  border-color: var(--green-border-hi);
  box-shadow: 0 12px 42px rgba(0,0,0,.55), 0 0 24px var(--green-glow);
}
#toast.err,
#toast.error {
  box-shadow: 0 12px 42px rgba(0,0,0,.55), 0 0 24px rgba(255,69,58,.18);
}

/* ── Extra: nav usage pill — amber/red pressure states ─────────── */
#nav-usage-pill.near  { border-color: rgba(232,232,237,.35); color: #e8e8ed; }
#nav-usage-pill.limit { border-color: rgba(255,69,58,.35);  color: var(--red); box-shadow: 0 0 14px rgba(255,69,58,.15); }

/* ── Extra: page background noise texture overlay ──────────────── */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZILEM DESIGN OVERHAUL — Inter font · sharp shapes · nav · tier cards · SVG
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inter font ──────────────────────────────────────────────────────────── */
/* ── SF Pro system font (no import needed — system font) ── */

:root {
  --font:         -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;

  /* ── Revised radius system — sharper, more architectural ── */
  --r:   8px;
  --r2:  10px;
  --r3:  14px;
  --r4:  18px;
  --pill: 999px;

  /* ── Nav ── */
  --nav-h: 56px;
  --nav-r: 14px;
}

/* ── Body tracking ───────────────────────────────────────────────────────── */
body {
  font-feature-settings: "cv02","cv03","cv04","cv11";
  letter-spacing: -.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV — completely redesigned
   ─ Wider inner content area, tighter height, left logo / center links / right actions
   ─ Sharp 14px radius replaces the full pill
   ─ Active link gets a bottom line indicator instead of background fill
   ─ Usage pill sits between links and login button
   ═══════════════════════════════════════════════════════════════════════════ */
nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: calc(100% - 32px);
  max-width: 1080px;
  height: var(--nav-h);
  padding: 0 6px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  background: rgba(10,10,12,.82);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--nav-r);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 16px 48px rgba(0,0,0,.55),
    0 0 80px rgba(255,255,255,.04);
  transition: border-color var(--dur-3), box-shadow var(--dur-3) var(--ease-out);
}
nav:hover {
  border-color: rgba(255,255,255,.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 20px 56px rgba(0,0,0,.62),
    0 0 100px rgba(255,255,255,.07);
}

/* Logo — SF Pro, clean weight */
.nav-logo {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.4px;
  color: #fff;
  flex-shrink: 0;
  text-decoration: none;
}
/* nav-logo-mark hidden — not used */
.nav-logo-mark { display: none; }
/* Keep old dot hidden too */
.nav-logo-dot { display: none; }

/* Center nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1;
  justify-content: center;
}
.nav-link {
  position: relative;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  transition: color var(--dur-2), background var(--dur-2) var(--ease-out);
  text-decoration: none;
  letter-spacing: -.01em;
}
.nav-link:hover {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.055);
  transform: none; /* remove bounce */
}
.nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.08);
  font-weight: 600;
}
/* Active underline indicator */
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 1.5px;
  background: var(--violet, #fff);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,255,255,.5);
}

/* Right-side nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Usage pill — redesigned */
#nav-usage-pill {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);border:0;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;;box-shadow:var(--zshade)}
#nav-usage-pill svg { opacity: .55; }

/* Login button — sharp, premium */
#nav-key-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.10);border:0;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  transition: background var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -.01em;
}
#nav-key-btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 4px 14px rgba(0,0,0,.3);
  transform: translateY(-1px);
}
#nav-key-btn:active { transform: scale(.97); }
#nav-key-btn.active {
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.12));
  border-color: rgba(255,255,255,.3);
  color: var(--violet, #fff);
  box-shadow: 0 0 0 1px rgba(255,255,255,.17) inset, 0 0 18px rgba(255,255,255,.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS — sharper radius system
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-primary, .btn-run, .btn-tt-analyze {
  border-radius: 10px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.btn-secondary {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.btn-discord {
  border-radius: 10px;
}
.btn-dl {
  border-radius: 10px;
  font-weight: 650;
}
.btn-clear, .btn-run {
  border-radius: 10px;
}
/* Verify/discord modal buttons */
.btn-verify, .btn-discord-modal {
  border-radius: 10px;
}
/* Unlock bar buttons */
.btn-key-unlock {
  border-radius: 8px;
  font-weight: 650;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS — sharper radii
   ═══════════════════════════════════════════════════════════════════════════ */
.drop-card, .void-v6-card, .dash-card, .dash-profile {
  border-radius: 14px;
}
.key-modal-card {
  border-radius: 16px;
}
#key-modal, #donate-modal {
  /* modal backdrop sharper too */
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER CARDS — full redesign
   Three-level depth system: Member (flat), Booster (raised), Donor (glow)
   ═══════════════════════════════════════════════════════════════════════════ */
.tier-card {
  border-radius: 16px;
  padding: 28px 26px 26px;
  position: relative;
  overflow: hidden;
  background: rgba(14,14,17,.88);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 40px rgba(0,0,0,.45);
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-3), box-shadow var(--dur-3);
}

/* Top edge highlight line — unique per tier */
.tier-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  border-radius: 0 0 2px 2px;
}
.tier-card:has(.tier-icon.donor)::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
}
.tier-card.featured::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}

.tier-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.13);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 24px 64px rgba(0,0,0,.55);
}

/* Booster — featured */
.tier-card.featured {
  background: rgba(18,18,22,.92);
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 55px rgba(0,0,0,.50);
}
.tier-card.featured:hover {
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.11) inset,
    0 28px 72px rgba(0,0,0,.60);
}

/* Donor */
.tier-card:has(.tier-icon.donor) {
  background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(14,14,17,.92) 55%);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 18px 55px rgba(0,0,0,.48),
    0 0 80px rgba(255,255,255,.08);
}
.tier-card:has(.tier-icon.donor):hover {
  border-color: rgba(255,255,255,.36);
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 28px 72px rgba(0,0,0,.58),
    0 0 120px rgba(255,255,255,.16);
}

/* Tier icon — circle instead of rounded square */
.tier-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3);
}
.tier-icon.member {
  background: rgba(255,255,255,.06);border:0;
  color: rgba(255,255,255,.6);;box-shadow:var(--zshade)}
.tier-icon.booster {
  background: rgba(255,255,255,.09);border:0;
  color: #fff;
  box-shadow: 0 0 20px rgba(255,255,255,.06);
}
.tier-icon.donor {
  background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.12));border:0;
  color: var(--violet, #fff);
  box-shadow: 0 0 22px rgba(255,255,255,.2);
}
.tier-card:hover .tier-icon {
  transform: translateY(-3px) scale(1.06);
}
.tier-card:has(.tier-icon.donor):hover .tier-icon {
  box-shadow: 0 4px 24px rgba(255,255,255,.3);
}

/* Tier badge */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.4);border:0;
  margin-bottom: 12px;;box-shadow:var(--zshade)}

/* Tier name/limit */
.tier-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: #fff;
  margin-bottom: 3px;
}
.tier-sub {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  margin-bottom: 18px;
  letter-spacing: -.01em;
}
.tier-limit {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -2px;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1;
}
.tier-limit span {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.35);
  letter-spacing: 0;
  margin-left: 2px;
}

/* Feature list — circle check icons */
.tier-features { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.tier-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,.6);
  letter-spacing: -.01em;
}
.tier-feat-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(10,132,255,.1);border:0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  flex-shrink: 0;;box-shadow:var(--zshade)}
.tier-card:has(.tier-icon.donor) .tier-feat-icon {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: var(--violet, #fff);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION BADGES — sharper, with left SVG icon slot
   ═══════════════════════════════════════════════════════════════════════════ */
.section-badge, .hero-badge {
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .3px;
  padding: 5px 11px;
  gap: 6px;
}
.hero-badge-dot { display: none; } /* remove dot, icon takes over */

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ — sharper, cleaner arrow replaced by CSS chevron via SVG in HTML
   ═══════════════════════════════════════════════════════════════════════════ */
.faq-item {
  border-radius: 10px;
  margin-bottom: 6px;
}
.faq-q {
  font-size: 13.5px;
  font-weight: 550;
  letter-spacing: -.01em;
  padding: 16px 18px;
}
.faq-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);border:0;
  color: rgba(255,255,255,.4);
  flex-shrink: 0;
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-3) var(--ease-out);;box-shadow:var(--zshade)}
.faq-item.open .faq-arrow {
  transform: rotate(180deg);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: var(--violet, #fff);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUTS — sharper
   ═══════════════════════════════════════════════════════════════════════════ */
.tt-input, .key-input, .notify-input {
  border-radius: 10px;
}
.tt-input:focus, .key-input:focus, .notify-input:focus {
  border-color: var(--violet, #fff);
  box-shadow: 0 0 0 3px rgba(255,255,255,.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCAN VIEW tiles — sharper
   ═══════════════════════════════════════════════════════════════════════════ */
.sv-item { border-radius: 8px; }
.sv-lbl {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.sv-val { font-size: 13px; font-weight: 650; }

/* ═══════════════════════════════════════════════════════════════════════════
   DROP ZONE — sharper
   ═══════════════════════════════════════════════════════════════════════════ */
.drop-zone { border-radius: 10px; }
.drop-icon { border-radius: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL CARD — sharper
   ═══════════════════════════════════════════════════════════════════════════ */
.key-modal-card, .donate-card { border-radius: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROC TERMINAL — tighter
   ═══════════════════════════════════════════════════════════════════════════ */
.proc-terminal { border-radius: 10px; }
.proc-bar { border-radius: 10px 10px 0 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO TITLE — Inter tighter tracking
   ═══════════════════════════════════════════════════════════════════════════ */
.hero h1 {
  letter-spacing: -5.5px;
  font-weight: 800;
  line-height: .95;
}
.hero h1 span {
  background: linear-gradient(115deg, #fff 5%, #c4b5fd 35%, #fff 55%, #ddd6fe 78%, #fff 95%);
  background-size: 280% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-title {
  letter-spacing: -2.2px;
  font-weight: 750;
}
.page-hero-title {
  letter-spacing: -3.2px;
  font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — sharper separator
   ═══════════════════════════════════════════════════════════════════════════ */
/* (dead border-top-colour on a zero-width border removed) */
.footer-logo {
  font-weight: 700;
  letter-spacing: -.3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST — sharper
   ═══════════════════════════════════════════════════════════════════════════ */
#toast {
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE NAV — update to match new nav radius
   ═══════════════════════════════════════════════════════════════════════════ */
#mobile-nav-menu {border-left:0;;box-shadow:var(--zshade)}
.mobile-nav-link {
  border-radius: 8px;
  font-size: 13.5px;
}
.mobile-key-btn { border-radius: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE TASKBAR — sharper items
   ═══════════════════════════════════════════════════════════════════════════ */
#mobile-taskbar .tb-item { border-radius: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TIER UNLOCK BAR — sharper
   ═══════════════════════════════════════════════════════════════════════════ */
.tier-unlock-bar { border-radius: 10px; }
.tier-unlock-bar.show { animation: fadeSlideUp var(--dur-3) var(--ease-out); }

/* ═══════════════════════════════════════════════════════════════════════════
   USAGE BAR — sharper
   ═══════════════════════════════════════════════════════════════════════════ */
#usage-bar { border-radius: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DONATE TICKET NOTE — violet tint
   ═══════════════════════════════════════════════════════════════════════════ */
.donate-ticket-note {
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
}
.donate-ticket-note svg { color: var(--violet, #fff); }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPARISON TABLE — sharper container
   ═══════════════════════════════════════════════════════════════════════════ */
.tier-grid + * table,
section table {
  font-size: 12.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE TEXT COMFORT — appended (cascade-safe, wins all earlier overrides)
   Fixes "squeezed" text on phones: the redesign block's extreme negative
   letter-spacing and tiny label sizes are softened on small screens.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Reset global tight tracking on small screens */
  body { letter-spacing: 0; }

  /* Headings — un-squeeze (redesign set -5.5px / -2.2px / -3.2px) */
  .hero h1 { letter-spacing: -1.5px; line-height: 1.05; }
  .section-title { letter-spacing: -.5px; }
  .page-hero-title { letter-spacing: -1px; }
  .coming-soon-title { letter-spacing: -1px; }
  .tier-limit { letter-spacing: -1px; }
  .dash-card-val { letter-spacing: -.5px; }

  /* Body copy — breathing room */
  .hero-sub,
  .section-sub,
  .page-hero-sub,
  .coming-soon-sub,
  .faq-a-inner { letter-spacing: 0; line-height: 1.7; }

  /* Small labels — readable minimum sizes */
  .sv-lbl, .tt-tech-lbl { font-size: 10px; letter-spacing: .5px; }
  .sv-val, .tt-tech-val { font-size: 14px; }
  .stat-lbl { font-size: 11px; letter-spacing: .3px; }
  .section-badge, .hero-badge { font-size: 11px; }
  .tier-badge { font-size: 10px; }
  .dash-card-lbl { font-size: 11px; }
  #limitText { font-size: 11px; }
  .tier-unlock-text { font-size: 13px; line-height: 1.55; }
  .tier-donate-note { font-size: 11px; line-height: 1.5; }

  /* Prevent long words from overflowing the viewport */
  .hero-sub, .section-sub, .page-hero-sub,
  .tier-unlock-text, .faq-a-inner,
  #dropSub { overflow-wrap: break-word; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 40px; letter-spacing: -1px; }
  .sv-val { font-size: 13px; }
}

/* ── Engine tabs (Zeta v8 / Void v6) ── */
.engine-tab {
  flex: 1; max-width: 150px; padding: 8px 14px; border-radius: 100px;border:0; background: var(--bg-2, #141417);
  color: var(--text-2, #a0a0ab); font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: .06em; cursor: pointer; transition: all var(--dur-2) var(--ease-out);;box-shadow:var(--zshade)}
.engine-tab:hover { border-color: #333; color: #fff; }
.engine-tab.active {
  background: linear-gradient(135deg, #ffffff, #9a9aa2); border-color: transparent;
  color: #0b0b0e; box-shadow: 0 2px 12px rgba(255, 255, 255, .25);
}


/* ══ Extra animations (2026-09-01) ═══════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* Scroll-reveal — armed by JS via <html class="js-anim"> */
  .js-anim [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out);
    transition-delay: var(--rd, 0s);
    will-change: opacity, transform;
  }
  .js-anim [data-reveal].in-view { opacity: 1; transform: none; }

  /* Hero: second drifting glow layer (the static aura already pulses) */
  .hero::after {
    content: "";
    position: absolute; width: min(520px, 70vw); height: 340px; top: 62%; left: 12%;
    background: radial-gradient(ellipse, rgba(255,255,255,.045), transparent 66%);
    filter: blur(14px); pointer-events: none;
    animation: heroDrift 14s ease-in-out infinite alternate;
  }
  @keyframes heroDrift {
    from { transform: translate3d(-4%, 0, 0) scale(1); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.15); }
  }

  /* Buttons: hover glow lift + press snap */
  .btn-run:hover, .btn-primary:hover, .btn-dl:hover, .btn-discord:hover, .btn-verify:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08), 0 0 22px rgba(255,255,255,.16);
  }
  .btn-run:active, .btn-primary:active, .btn-dl:active, .btn-discord:active, .btn-verify:active,
  .btn-secondary:active, .btn-key:active, .btn-clear:active { transform: translateY(0) scale(.96); }

  /* Cards: hover lift (on top of the existing border sweep) */
  .tier-card:hover, .dash-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.07);
  }

  /* Drop zone: gentle breathing border while idle */
  .drop-card { animation: dropBreath 3.6s ease-in-out infinite; }
  @keyframes dropBreath {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
    50%      { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 26px rgba(255,255,255,.05); }
  }

  /* Nav links: underline grow */
  .nav-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size var(--dur-3) ease, color var(--dur-2) ease;
  }
  .nav-link:hover { background-size: 100% 1px; }

  /* Stat items: pop on hover */
  .stat-item { transition: transform var(--dur-3) var(--ease-out); }
  .stat-item:hover { transform: translateY(-4px); }

  /* Toast: slide-in */
  #toast.show { animation: toastIn .38s cubic-bezier(.22,.61,.36,1); }
  @keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.96); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  }

  /* Logo glow (when the mark is visible) */
  .nav-logo-mark { animation: logoGlow 4.6s ease-in-out infinite; }
  @keyframes logoGlow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50%      { filter: drop-shadow(0 0 12px rgba(255,255,255,.35)); }
  }
}
/* ══════════════════════════════════════════════════════════════════════
   Apple-HIG compliance + polish layer (2026-09) — audit via
   apple-design-skill (HIG refs: color, typography, dark-mode,
   accessibility, liquid-glass).
   Keeps the existing black/white + glow identity; fixes the gaps the
   guidelines flag. Safe to delete this whole block to revert.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Keyboard focus must always be visible (HIG: Accessibility/Focus).
   Apple-style soft white focus ring, never removed. */
:where(a, button, input, select, textarea, summary, [tabindex], [role='button']):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.45), 0 0 0 6px rgba(255,255,255,.12);
  border-radius: inherit;
}
.nav-link:focus-visible, .tb-item:focus-visible, .faq-q:focus-visible { border-radius: var(--pill); }
input:focus-visible, select:focus-visible, textarea:focus-visible { caret-color: #fff; }

/* 2) Generous tap/click targets (HIG: Interaction/min 44pt mobile,
   ~30pt+ desktop for low-frequency controls). Enlarges hit area without
   changing visuals. */
.modal-close-btn, .nav-close-btn, .drop-zone, .faq-q, .tb-item { position: relative; }
.modal-close-btn::before, .nav-close-btn::before {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
}
.nav-link, .nav-actions > * { min-height: 30px; display: inline-flex; align-items: center; }

/* 3) Legibility/contrast (HIG: Color — dark appearance, secondary text).
   Footer 11px caption and faint labels were below comfortable contrast. */
:root {
  --text-4: #6e6e73;                       /* was 2.2:1 → now ~4.9:1 on #000 */
  --text-3-bump: rgba(235,235,240,.72);
}
footer .footer-sub { color: #6e6e73; }
.tt-title-text, .faq-a-inner, .donate-ticket-note, .dash-history-empty { color: #9b9ba1; }

/* 4) Tabular numerals so counters/prices/progress don't jitter (HIG: data legibility). */
.stat-val, .dash-card-val, .tier-limit, .progress-pct,
.dash-progress-fill, .limit-bar-fill, #usage-count,
.modal-patch-count, #nav-usage-count, #dash-patch-fill,
.usage-reset, #usage-reset-note, #modal-patch-reset, #dash-reset-note {
  font-variant-numeric: tabular-nums;
}

/* 5) Increased-Contrast appearance (HIG: Color/accessibility settings). */
@media (prefers-contrast: more) {
  :root {
    --text-2: #b8b8c0; --text-3: #8e8e93; --text-4: #8e8e93;
    --border: rgba(255,255,255,.16); --border-hi: rgba(255,255,255,.28);
  }
  .nav-link { color: #b8b8c0; }
}

/* 6) Motion — keep existing reduce-motion, add gentle entrance guard for
   users who prefer less animation but didn't set reduce globally. */
@media (prefers-reduced-motion: no-preference) {
  .drop-zone:hover, .btn-primary:hover, .btn-run:hover:not(:disabled) { transition-duration: .18s; }
}

/* 7) Dark materials — slightly higher-elevation glass for modals/sheets so
   content separates cleanly from the page (HIG: Materials/level hierarchy). */
#key-modal .key-modal-card, .donate-card, .donate-invoice-card {
  background: rgba(20,20,23,.92);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
}
/* ══════════════════════════════════════════════════════════════════════
   Premium black/white/glow detail layer (2026-09)
   Whole-site system-font consistency (no webfont swap = no font flicker),
   refined micro-details & small visual upgrades. Delete to revert.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Typography hardening — single system stack everywhere, no swapping. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji",
          "Noto Color Emoji", sans-serif;
  /* One monospace stack for the whole site. Three different ones were in use before
     — `ui-monospace,SFMono-Regular,Menlo,monospace`, a bare `monospace`, and
     `'SF Mono',ui-monospace,monospace`. SF Mono exists only on macOS and a bare
     `monospace` resolves to Courier New on Windows, so the same code block, terminal
     log and wallet address rendered in three different typefaces depending on the
     visitor's OS. Consolas/Liberation Mono give Windows and Linux a comparable face. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}
/* Italic synthesis stays ON. `font-synthesis: none` also suppressed STYLE synthesis,
   so <em>/<i> — 27 of them across this site — rendered upright on any platform whose
   resolved family has no real italic face. Weight synthesis stays off, which was the
   block's original intent: the design asks for weights these system families do not
   ship (550/620/650/750), and with synthesis off the browser weight-matches to the
   nearest REAL face instead of faking one.
   `text-rendering: optimizeLegibility` is dropped — in Chrome it force-enables
   kerning and ligatures, which visibly distorts the tight negative tracking this
   design uses (-4.8px on the hero) and made glyph spacing differ between browsers. */
body { font-synthesis: style; }
h1, h2, h3, .hero h1, .section-title, .page-hero-title,
.coming-soon-title, .dash-card-val, .tier-limit { text-wrap: balance; }
.hero-sub, .section-sub, .page-hero-sub, .faq-a-inner, .tt-title-text { text-wrap: pretty; }
::selection { background: #fff; color: #000; }

/* 2) Custom scrollbars — hairline, on-theme, subtle glow on hover. */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; border: 2px solid #000; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); box-shadow: 0 0 12px rgba(255,255,255,.25); }
::-webkit-scrollbar-track { background: transparent; }

/* 3) Drop zone — crisp corner brackets that glow on hover/drag (premium cue). */
.drop-zone { position: relative; }
.drop-zone::before, .drop-zone::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 0 solid rgba(255,255,255,.22); transition: border-color var(--dur-3), opacity var(--dur-3) var(--ease-out);
  pointer-events: none; opacity: .75; z-index: 2;
}
.drop-zone::before { top: 10px; left: 10px; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 6px; }
.drop-zone::after  { bottom: 10px; right: 10px; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 6px; }
.drop-zone:hover::before, .drop-zone:hover::after { border-color: rgba(255,255,255,.55); opacity: 1; }
.drop-zone.drag-over::before, .drop-zone.drag-over::after { border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,.35); }
.drop-zone.has-file::before, .drop-zone.has-file::after { border-color: rgba(10,132,255,.6); }

/* 4) Nav active state — soft white glow pill instead of flat fill. */
.nav-link.active {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 4px 14px rgba(0,0,0,.35), 0 0 16px rgba(255,255,255,.06);
}
#mobile-taskbar .tb-item.active { text-shadow: 0 0 14px rgba(255,255,255,.35); }

/* 5) Buttons — quieter shine + haptic-style press already present; unify radius feel. */
.btn-primary, .btn-run, .btn-tt-analyze, .btn-verify, .btn-dl { letter-spacing: -.01em; }
.btn-primary:disabled, .btn-run:disabled { cursor: not-allowed; }

/* 6) Icon crispness + consistent sizing for inline glyphs. */
svg { shape-rendering: geometricPrecision; }
.hero-badge svg, .section-badge svg, .dash-card-icon svg { width: 14px; height: 14px; }

/* 7) Premium gloss on hero elements & featured tier (very subtle). */
.tier-card.featured { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 0 0 1px rgba(255,255,255,.08), 0 26px 70px rgba(0,0,0,.5), 0 0 42px rgba(255,255,255,.05); }
.hero-badge, .section-badge { box-shadow: 0 0 18px rgba(255,255,255,.04) inset; }

/* 8) Image/avatar polish. */
img { -webkit-user-drag: none; }
.dash-avatar, .dash-avatar-placeholder, .tt-thumb { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }

/* 9) Reduce decorative blur-on-text entrance (was the other "font changes"
      source — text looked blurred then sharp while animating). */
@keyframes pageEnter  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes heroTitle  { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fade-in { filter: none; }
.fade-in.visible { filter: none; }
/* ══════════════════════════════════════════════════════════════════════
   Monochrome finish — Discord brand hover, premium tier icons (2026-09)
   Remove all accent purple; white-glow identity; Discord blurple on hover
   for login/server buttons. Delete block to revert.
   ══════════════════════════════════════════════════════════════════════ */

/* Login with Discord → Discord blurple glow on hover */
.btn-discord-modal { color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.btn-discord-modal:hover { background: #5865f2; border-color: #5865f2; box-shadow: 0 8px 28px rgba(88,101,242,.5); transform: translateY(-1px); }
.btn-discord:hover { background: #5865f2; border-color: #5865f2; color: #fff; box-shadow: 0 8px 28px rgba(88,101,242,.42); }
#hero-login-btn:hover { background: #5865f2; border-color: #5865f2; color: #fff; box-shadow: 0 8px 28px rgba(88,101,242,.45); }
#hero-login-btn svg { transition: filter var(--dur-2) var(--ease-out); }
#hero-login-btn:hover svg { filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); }

/* Premium feature chips — refined glass + glow checkmarks */
.tier-feat-icon { width: 22px; height: 22px; min-width: 22px; border-radius: 7px;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.tier-feat-icon svg { width: 12px; height: 12px; }
.tier-feat-item { align-items: center; }
.tier-card:has(.tier-icon.donor) .tier-feat-icon { background: rgba(255,255,255,.11);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 12px rgba(255,255,255,.1); }
.tier-icon.donor { background: rgba(255,255,255,.1);
  box-shadow: 0 0 26px rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.22); }
.tier-icon.donor svg { filter: drop-shadow(0 0 6px rgba(255,255,255,.85)); }
/* ══════════════════════════════════════════════════════════════════════
   ZILEM 2.0 — "Black & Blue" glass theme (2026-09)
   Whole-site layer: blue identity on black glass. No purple, no green
   accents. Delete block to revert to the previous theme.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --acc:#f5f5f7; --acc-hi:#ffffff; --acc-deep:#0060df;
  --acc-glow:rgba(10,132,255,.55); --acc-soft:rgba(10,132,255,.14); --acc-line:rgba(10,132,255,.32);
  --bg:#000; --bg-elevated:#05070c; --bg-surface:rgba(10,16,26,.66);
  --text-3:#a6b3c4; --text-4:#7b8798;
}
body{background:radial-gradient(1200px 600px at 50% -12%,rgba(10,132,255,.08),transparent 60%),var(--bg);}
::selection{background:var(--acc);color:#fff}

/* Blue identity on key surfaces */
.nav-link.active{background:linear-gradient(180deg,rgba(10,132,255,.22),rgba(10,132,255,.1));box-shadow:inset 0 0 0 1px var(--acc-line),0 0 22px var(--acc-glow)}
.nav-link:hover{color:#fff}
.progress-fill,.limit-bar-fill{background:linear-gradient(90deg,#f5f5f7,#fff 30%,var(--acc-hi));box-shadow:0 0 16px var(--acc-glow)}
.dash-progress-fill{background:linear-gradient(90deg,#f5f5f7,var(--acc-hi));box-shadow:0 0 14px var(--acc-glow)}

/* Headline shimmer in blue */
.hero h1 span,.hero-sub, .page-hero-title{background:linear-gradient(120deg,#fff,#9cc8ff 55%,#0a84ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-sub,.page-hero-sub{-webkit-text-fill-color:rgba(255,255,255,.72);color:rgba(255,255,255,.72)}

/* CTAs — blue glow primary, glass secondary */
.btn-primary,.btn-run,.btn-tt-analyze,.btn-dl,.tier-donate-btn,.donate-btn{background:linear-gradient(180deg,var(--acc-hi),var(--acc));border:0;color:#fff;box-shadow:0 6px 24px var(--acc-glow),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover,.btn-run:hover:not(:disabled),.btn-dl:hover{background:linear-gradient(180deg,#3b9dff,var(--acc-hi));box-shadow:0 10px 32px var(--acc-glow)}

/* Drop zone corners + drag ring in blue */
.drop-zone::before,.drop-zone::after{border-color:rgba(120,180,255,.5)}
.drop-zone:hover::before,.drop-zone:hover::after{border-color:#6cb4ff;box-shadow:0 0 12px var(--acc-glow)}
.drop-zone.drag-over{border-color:var(--acc-line)!important;box-shadow:0 0 40px var(--acc-glow),inset 0 0 24px rgba(10,132,255,.06)}
.drop-zone.has-file::before,.drop-zone.has-file::after{border-color:var(--acc-hi)}

/* Cards: glass with faint blue hairline */
.drop-card,.key-modal-card,.donate-card,.donate-invoice-card,.tier-card,.faq-q,.tt-card,.dash-card{
  background:linear-gradient(180deg,rgba(14,22,34,.55),rgba(5,8,14,.72));
  box-shadow:0 1px 0 rgba(120,180,255,.14) inset,0 24px 70px rgba(0,0,0,.55);
}
.tier-card.featured{box-shadow:0 1px 0 rgba(120,180,255,.2) inset,0 0 0 1px var(--acc-line),0 26px 70px rgba(0,0,0,.55),0 0 46px var(--acc-glow)}
.tier-card.featured .tier-price,.tier-card.featured .tier-feat-icon{color:var(--acc-hi)}

/* Focus ring → blue */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{box-shadow:0 0 0 3px rgba(10,132,255,.5),0 0 0 6px rgba(10,132,255,.15)}

/* FAQ open state + icon chips in blue */
.faq-q.open{border-color:var(--acc-line)}
.faq-icon-wrap,.feat-icon-wrap,.tier-feat-icon,.tier-icon.donor{background:rgba(10,132,255,.12);box-shadow:inset 0 0 0 1px rgba(10,132,255,.25),0 0 14px rgba(10,132,255,.18)}
.faq-q.open .faq-icon-wrap,.tier-icon.donor{box-shadow:0 0 18px var(--acc-glow),inset 0 0 0 1px rgba(10,132,255,.4)}

/* Buttons that stayed white pills now carry blue text glow accents; links */
a,.donate-link,.faq-q .q,.tier-donate-link{color:#9cc8ff}
a:hover{color:#fff}

/* Usage/auth hints */
.usage-reset-note,#usage-reset-note,#modal-patch-reset,#dash-reset-note{color:#8fb6e8}

/* Keep error red distinct; drop green success tint toward blue-glow white */
.toast.ok{background:rgba(10,132,255,.92)}
.dash-verified,.verify-badge{color:#6cb4ff}

/* Modals/sheets elevated blue-black glass */
#key-modal .key-modal-card,.donate-card{background:linear-gradient(180deg,rgba(16,26,40,.92),rgba(5,8,14,.96));backdrop-filter:blur(40px) saturate(1.4)}

/* Scrollbar + selection blue-glow */
::-webkit-scrollbar-thumb{background:rgba(10,132,255,.4)}
::-webkit-scrollbar-thumb:hover{background:var(--acc-hi);box-shadow:0 0 12px var(--acc-glow)}
/* ══════════════════════════════════════════════════════════════════════
   ZILEM 2.0 rev2 — reference-style top bar + Apple flat colours (no glow)
   ══════════════════════════════════════════════════════════════════════ */

/* --- Top bar: mirror the reference material-thin fixed bar --- */
nav{
  height:56px;
  background:rgba(12,14,20,.62);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:none;
  border-bottom:1px solid rgba(84,84,88,.35);
  box-shadow:none !important;
}
nav:hover{box-shadow:none !important;border-color:rgba(84,84,88,.45)}
nav .nav-logo{height:56px;display:flex;align-items:center}
nav .nav-logo-text{font-size:15px;font-weight:600;letter-spacing:-.01em}
/* links = ghost pills */
nav .nav-links{display:flex;align-items:center;gap:2px}
nav .nav-link{
  position:static;
  font-size:13px;font-weight:500;color:#d8dde5;
  padding:7px 12px;border-radius:999px;
  transition:background var(--dur-2),color var(--dur-2) var(--ease-out);
}
nav .nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
nav .nav-link.active{background:rgba(10,132,255,.16);color:#fff;box-shadow:none}
nav .nav-link.active::after{display:none}
nav .nav-actions{gap:8px}
#nav-key-btn{background:rgba(255,255,255,.08);border:0;
  border-radius:999px;padding:7px 14px;height:34px;color:#fff;box-shadow:var(--zshade)}
#nav-key-btn:hover{background:rgba(255,255,255,.14)}
#nav-usage-pill{background:rgba(255,255,255,.06);border:0;border-radius:999px;box-shadow:var(--zshade)}
#nav-usage-pill span{color:#cfd6df}

/* --- Apple flat colour pass: kill glows, keep hairline definition --- */
:root{
  --acc:#f5f5f7; --acc-hi:#3b9dff; --acc-deep:#0060df;
  --label-1:#fff; --label-2:rgba(235,235,245,.85); --label-3:#9aa0aa;
  --separator:rgba(84,84,88,.4);
}
.btn-primary,.btn-run,.btn-tt-analyze,.btn-dl,.btn-verify,.tier-donate-btn,.donate-btn,
.btn-key-unlock.donate-btn{
  background:var(--acc);border:0;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;border-radius:14px;
}
.btn-primary:hover,.btn-run:hover:not(:disabled),.btn-dl:hover,.btn-verify:hover{
  background:var(--acc-hi);box-shadow:none !important;
}
.progress-fill,.limit-bar-fill,.dash-progress-fill{
  background:linear-gradient(90deg,#f5f5f7,#0a84ff);box-shadow:none !important;
}
.drop-zone::before,.drop-zone::after{border-color:rgba(150,190,255,.4);box-shadow:none}
.drop-zone.drag-over{border-color:rgba(10,132,255,.5);box-shadow:0 0 0 1px rgba(10,132,255,.25) inset !important}
.tier-card.featured{box-shadow:0 0 0 1px rgba(10,132,255,.4) !important;background:linear-gradient(180deg,rgba(10,60,120,.18),rgba(5,8,14,.8))}
.tier-card.featured .tier-feat-icon,.tier-icon.donor,.faq-icon-wrap{background:rgba(10,132,255,.14);box-shadow:none}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid #0a84ff;outline-offset:2px;box-shadow:none !important}
::-webkit-scrollbar-thumb{background:rgba(10,132,255,.35);box-shadow:none}
::-webkit-scrollbar-thumb:hover{background:var(--acc-hi);box-shadow:none}
.drop-card,.key-modal-card,.donate-card,.tier-card,.faq-q,.tt-card,.dash-card{
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 50px rgba(0,0,0,.5) !important;
}
.toast.ok{background:rgba(10,132,255,.95);box-shadow:none}
a,.donate-link{color:#7db8ff}
a:hover{color:#fff}
/* ── 2.0 rev3 — long full-width top bar + Discord-iconic colour ── */
nav{
  position:fixed !important; left:0 !important; right:0 !important; top:0 !important;
  width:100% !important; max-width:100% !important; margin:0 !important;
  transform:none !important; border-radius:0 !important;
  padding:0 clamp(16px,3vw,40px);
}
nav .nav-logo{flex:none}
nav .nav-links{margin-inline:auto}
nav .nav-actions{margin-left:auto;flex:none}

/* Discord blurple — iconic colour, not hover-only */
#nav-key-btn.sign-in,
#hero-login-btn,
.btn-discord,
.btn-discord-modal{
  background:#5865f2 !important;border:0; color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}
#nav-key-btn.sign-in:hover,
#hero-login-btn:hover,
.btn-discord:hover,
.btn-discord-modal:hover{background:#6776f4 !important;border-color:#6776f4 !important}
#nav-key-btn.sign-in svg,#hero-login-btn svg,.btn-discord svg,.btn-discord-modal svg{
  filter:drop-shadow(0 0 0 #fff);
}
/* ── 2.0 rev4 — professional top bar ── */
nav{height:56px;display:flex;align-items:center;gap:12px}
nav .nav-logo{display:flex;align-items:center;gap:9px;margin:0;padding:0;flex:none}
nav .nav-logo-dot{width:9px;height:9px;box-shadow:none;background:var(--acc)}
nav .nav-logo-text{font-size:15.5px;font-weight:650;letter-spacing:-.015em;color:#fff;white-space:nowrap}
nav .nav-logo-sub{display:none}
nav .nav-links{flex:1;display:flex;align-items:center;justify-content:center;gap:4px}
nav .nav-link{
  position:relative;padding:8px 13px;font-size:13px;font-weight:500;
  color:#aab2be;border-radius:14px;background:transparent;
  transition:color var(--dur-1) var(--ease-out);
}
nav .nav-link:hover{color:#fff;background:rgba(255,255,255,.05)}
nav .nav-link.active{color:#fff;background:transparent}
nav .nav-link.active::after{
  content:'';display:block;position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);width:18px;height:2.5px;border-radius:2px;background:var(--acc);
}
nav .nav-actions{flex:none;display:flex;align-items:center;gap:8px;margin-left:0}
#nav-key-btn,#nav-usage-pill{height:34px;display:inline-flex;align-items:center;justify-content:center}
#nav-usage-pill{margin-right:2px}
/* ── 2.0 rev5 — high-fidelity top bar + Zilem Method mark ── */
nav .nav-logo-mark{width:20px;height:20px;border-radius:6px;object-fit:contain;display:block}
nav .nav-logo-text{font-size:15.5px}
nav .nav-link{padding:7px 12px;color:#9aa3af}
nav .nav-link:hover{color:#fff;background:rgba(255,255,255,.06)}
nav .nav-link.active{color:#fff}
nav .nav-link.active::after{width:auto;left:12px;right:12px;bottom:3px;height:2px;border-radius:1px;transform:none;background:var(--acc)}
/* ── 2.0 rev6 — centered nav + More dropdown ── */
.nav-more{position:relative;display:flex}
.nav-more-btn{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:transparent;border:0;font:inherit}
.nav-more-btn svg{transition:transform var(--dur-2) var(--ease-out)}
.nav-more-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-more-panel{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  min-width:216px;padding:6px;border-radius:20px;z-index:60;
  background:rgba(15,17,24,.94);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:0;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  display:none;flex-direction:column;gap:2px;
}
.nav-more-panel.open{display:flex}
.nav-more-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;
  font-size:13.5px;font-weight:500;color:#b6bdc8;
}
.nav-more-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-more-item.active{color:#fff;background:rgba(10,132,255,.14)}
.nav-more:has(.nav-more-item.active) .nav-more-btn{color:#fff}
/* ── 2.0 rev7 — centered glass dock, SVG icons, translucent ── */
nav{
  height:56px;display:flex;align-items:center;justify-content:center;padding:0;
  /* was rgba(255,255,255,.05) — a 5% white wash. 95% of the bar was whatever sat behind
     it, so the rounded "Verified in the wild" video tiles read straight through it as
     dark shapes crossing the nav. A frosted bar still needs its own opacity: blur
     softens edges, it cannot resolve a 95% contrast difference. */
  background:rgba(9,10,13,.78) !important;
  backdrop-filter:blur(26px) saturate(1.7) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.7) !important;
  border-bottom:0;box-shadow:0 1px 0 rgba(255,255,255,.055) inset}
.nav-inner{display:flex;align-items:center;gap:12px;width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(14px,2vw,26px)}
.nav-logo{flex:none;display:flex;align-items:center;gap:9px}
.nav-logo-mark{width:19px;height:19px;border-radius:5.5px}
.nav-logo-text{font-size:15.5px;font-weight:650;letter-spacing:-.015em;color:#fff}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:8px}
.nav-link{display:inline-flex !important;align-items:center;gap:7px;padding:7px 11px !important;
  font-size:13px;font-weight:500;color:#aab3bf;border-radius:14px;background:transparent;
}
.nav-link svg{display:block;flex:none;opacity:.85}
.nav-link span{line-height:1}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-link.active{color:#fff;background:rgba(10,132,255,.12)}
.nav-link.active::after{left:11px;right:11px;bottom:1px}
.nav-actions{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px}
.nav-more-btn{gap:2px}
.more-chev{transition:transform var(--dur-2) var(--ease-out)}
.nav-more-btn[aria-expanded="true"] .more-chev{transform:rotate(180deg)}
.nav-more-panel{background:rgba(16,18,26,.55) !important;backdrop-filter:blur(36px) saturate(1.9);-webkit-backdrop-filter:blur(36px) saturate(1.9);border:0;box-shadow:0 22px 60px rgba(0,0,0,.55)}
.nav-more-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;font-size:13.5px;color:#b6bdc8}
.nav-more-item svg{width:15px;height:15px;opacity:.85}
.nav-more-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-more-item.active{background:rgba(10,132,255,.14);color:#fff}
/* 2.0 — instant dark paint (no white flash between pages) */
html{background:#05070c}
/* ═══ Zilem Method v3.5 — Mission-deck dashboard ═══ */
.deck{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;max-width:1120px;margin:0 auto;padding:34px 20px 10px}
.deck-hero,.deck-card,.deck-locked,.deck-verified,.deck-history{
  background:linear-gradient(180deg,rgba(16,30,58,.5),rgba(4,8,18,.86));border:0;border-radius:28px;padding:26px;
  backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(160,200,255,.08) inset,0 24px 60px rgba(0,0,0,.5)}
.deck-hero{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}
.deck-kicker{font-size:11px;font-weight:700;letter-spacing:.22em;color:#6da4ff;margin-bottom:12px}
.deck-title{font-size:clamp(30px,4.4vw,46px);line-height:1.04;letter-spacing:-.025em;color:#fff;font-weight:700}
.deck-sub{margin-top:12px;color:#9db2cf;font-size:14.5px;max-width:480px}
.deck-greet{display:flex;align-items:center;gap:10px;margin-top:18px;color:#c6d3e8;font-size:13px}
.deck-avatar{width:30px;height:30px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:rgba(110,164,255,.18);border:0;box-shadow:var(--zshade)}
.deck-avatar img{width:100%;height:100%;object-fit:cover}
.deck-quick{display:flex;flex-direction:column;gap:10px;min-width:230px}
.deck-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:14px;font-size:14px;font-weight:600}
.btn-ghost{background:rgba(255,255,255,.06);border:0;color:#fff;box-shadow:var(--zshade)}
.btn-ghost:hover{background:rgba(255,255,255,.11)}
.engine-pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:11.5px;color:#8fb1de;background:rgba(10,60,140,.25);border:0;padding:6px 11px;border-radius:999px;box-shadow:var(--zshade)}
.engine-dot{width:7px;height:7px;border-radius:50%;background:#2f9bff;box-shadow:0 0 8px #2f9bff;animation:ep 2.2s infinite}
@keyframes ep{0%,100%{opacity:1}50%{opacity:.4}}
.deck-card-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7fa3d6;margin-bottom:14px}
.deck-big{display:flex;align-items:baseline;gap:10px;font-size:44px;font-weight:750;color:#fff;letter-spacing:-.02em}
.deck-big-of{font-size:13px;color:#8fa8c9;font-weight:500}
.deck-track{height:8px;border-radius:99px;background:rgba(255,255,255,.07);margin:12px 0 6px;overflow:hidden}
.deck-track.thin{height:5px;margin:8px 0 14px}
.deck-track.blue{margin-top:-6px}
.deck-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#3b9dff,#0a84ff);transition:width var(--dur-4) var(--ease-out)}
.deck-track.blue .deck-fill{background:rgba(150,200,255,.5)}
.deck-meta{display:flex;justify-content:space-between;font-size:11.5px;color:#8fa3bd;margin:4px 0 10px}
.deck-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#c0cfe4;padding:7px 0;border-top:0;box-shadow:var(--zshade)}
.deck-row strong{color:#fff}
.deck-action{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:0;color:#e6edf7;margin-bottom:8px;transition:background var(--dur-1),border-color var(--dur-1) var(--ease-out);box-shadow:var(--zshade)}
.deck-action:hover{background:rgba(90,150,255,.1);border-color:rgba(110,160,255,.35)}
.da-ic{width:34px;height:34px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#7fb2ff;background:rgba(40,90,180,.25);flex:none}
.da-ic svg{width:16px;height:16px}
.deck-action small{display:block;color:#7e93b5;font-size:12px;margin-top:1px}
.deck-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ds{background:rgba(255,255,255,.03);border:0;border-radius:20px;padding:12px 10px;text-align:center;box-shadow:var(--zshade)}
.ds-v{display:block;font-size:21px;font-weight:750;color:#fff;font-variant-numeric:tabular-nums}
.ds-l{font-size:10.5px;color:#7e93b5;letter-spacing:.04em;text-transform:uppercase}
.deck-locked{max-width:1120px;margin:30px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px}
.deck-locked h3{color:#fff;font-size:22px}
.deck-locked p{color:#9db2cf;max-width:420px}
.deck-verified{max-width:1120px;margin:18px auto 0;display:block}
.deck-verified-sub{color:#7e93b5;font-size:13px;margin-top:-6px;margin-bottom:16px}
.deck-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.vg-empty{border:0;border-radius:20px;padding:28px;color:#8fa3bd;font-size:13px;text-align:center;grid-column:1/-1;box-shadow:var(--zshade)}
.deck-history{max-width:1120px;margin:18px auto 40px}
.deck-history .dash-history-item{background:rgba(255,255,255,.03);border:0;border-radius:14px;padding:12px 14px;margin-bottom:8px;font-size:13px;color:#c9d6ea;box-shadow:var(--zshade)}
/* footer v3.5 */
footer{padding:48px 0 24px;border-top:0;background:linear-gradient(180deg,transparent,rgba(6,14,28,.55));box-shadow:var(--zshade)}
.ft-grid{max-width:1120px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:26px}
.footer-logo{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em}
.ft-sub{margin:10px 0 12px;color:#7e93b5;font-size:12.5px;line-height:1.55}
.ft-badges{display:flex;gap:8px}
.ft-chip{font-size:10.5px;font-weight:700;color:#8fb6e8;background:rgba(40,90,180,.25);border:0;padding:4px 9px;border-radius:999px;box-shadow:var(--zshade)}
.ft-h{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8fa3bd;margin-bottom:12px}
.ft-col{display:flex;flex-direction:column;gap:9px}
.ft-col a{color:#b9c9e2;font-size:13.5px;width:fit-content}
.ft-col a:hover{color:#fff}
.ft-foot{max-width:1120px;margin:34px auto 0;padding:18px 20px 0;border-top:0;color:#5f7799;font-size:12px;text-align:center;box-shadow:var(--zshade)}
/* More button: icons only, never underline */
.nav-more-btn::after{display:none !important}
.nav-more-btn svg{display:block}
@media(max-width:920px){
 .deck{grid-template-columns:1fr}.deck-hero{flex-direction:column;align-items:flex-start}.deck-stats{grid-template-columns:1fr 1fr 1fr}
 .ft-grid{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}
}
/* ═══ Dashboard v2 — product view, high-contrast, minimal dark blue ═══ */
.d2{max-width:1080px;margin:0 auto;padding:36px 20px 20px;display:block}
.d2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.d2-title{font-size:30px;font-weight:700;letter-spacing:-.02em;color:#fff;margin:0}
.d2-sub{color:#9aa7bb;font-size:14px;margin-top:4px}
.d2-act{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:14px;
  background:linear-gradient(180deg,#3b9dff,#0a84ff);color:#fff;font-size:14px;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
.d2-act:hover{background:linear-gradient(180deg,#4aa6ff,#1a8dff)}
.d2-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
.d2-card{background:rgba(255,255,255,.035);border:0;border-radius:20px;padding:20px;box-shadow:var(--zshade)}
.d2-card-h{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9fb3d1;margin-bottom:12px}
.d2-list .dash-history-item{background:rgba(255,255,255,.04);border:0;border-radius:14px;padding:11px 13px;margin-bottom:8px;font-size:13px;color:#dfe6f0;box-shadow:var(--zshade)}
.d2-history-empty{color:#8a99b0;font-size:13px;padding:18px 0;border:0;border-radius:14px;text-align:center;box-shadow:var(--zshade)}
.d2-week-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.d2-ava{width:34px;height:34px;border-radius:50%;overflow:hidden;background:rgba(90,150,255,.2);border:0;display:inline-flex;box-shadow:var(--zshade)}
.d2-ava img{width:100%;height:100%;object-fit:cover}
.d2-who strong{display:block;color:#fff;font-size:14px}
.d2-badge{font-size:10px;color:#9fc1ee}
.d2-big{font-size:40px;font-weight:750;color:#fff;letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px}
.d2-of{font-size:13px;color:#93a4bd;font-weight:500}
.d2-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.09);margin:14px 0 8px;overflow:hidden}
.d2-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3b9dff,#0a84ff)}
.d2-meta{display:flex;justify-content:space-between;font-size:11.5px;color:#8296b4;margin-bottom:12px}
.d2-lims{display:flex;justify-content:space-between;font-size:12.5px;color:#b9c6da;border-top:0;padding-top:10px;margin-bottom:8px;box-shadow:var(--zshade)}
.d2-lims b{color:#fff}
.d2-barslim{height:4px;border-radius:99px;background:rgba(255,255,255,.07);display:flex;gap:6px;overflow:hidden}
.d2-barslim i{display:block;height:100%;border-radius:99px}
.d2-barslim i:first-child{background:rgba(140,190,255,.65);flex:1}
.d2-barslim i:last-child{background:rgba(255,255,255,.35);flex:1}
.d2-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.d2-stat{background:rgba(255,255,255,.035);border:0;border-radius:20px;padding:18px;text-align:center;box-shadow:var(--zshade)}
.d2-v{display:block;font-size:26px;font-weight:750;color:#fff;font-variant-numeric:tabular-nums}
.d2-l{font-size:11.5px;color:#8d9cb4;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;display:block}
.d2-verified{margin-top:20px}
.d2-verified-sub{color:#8d9cb4;font-size:13px;margin:-6px 0 14px}
.d2-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.d2-gempty{grid-column:1/-1;border:0;border-radius:20px;padding:26px;text-align:center;color:#8a99b0;font-size:13px;box-shadow:var(--zshade)}
.d2-locked{max-width:640px;margin:70px auto 90px;text-align:center;padding:44px;background:rgba(255,255,255,.035);border:0;border-radius:28px;box-shadow:var(--zshade)}
.d2-locked h2{color:#fff;font-size:26px;letter-spacing:-.02em}
.d2-locked p{color:#9aa7bb;margin:10px 0 22px}
@media(max-width:900px){.d2-grid{grid-template-columns:1fr}.d2-stats{grid-template-columns:1fr 1fr}}
/* ═══ Dashboard v3 — landing (blue) ═══ */
.hz{max-width:880px;margin:0 auto;padding:70px 20px 40px;text-align:center}
.hz-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(40,90,180,.18);border:0;
  padding:6px 13px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.14em;color:#9fc4ff;margin-bottom:26px;box-shadow:var(--zshade)}
.hz-pill-logo{width:13px;height:13px;border-radius:4px}
.hz-title{font-size:clamp(38px,6vw,60px);line-height:1.02;letter-spacing:-.03em;color:#fff;font-weight:750;margin:0 0 18px}
.hz-sub{font-size:16px;line-height:1.6;color:#a4b1c6;max-width:640px;margin:0 auto 30px}
.hz-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hz-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:14px;
  font-size:15px;font-weight:650;letter-spacing:-.01em;transition:transform var(--dur-1),background var(--dur-1) var(--ease-out)}
.hz-btn:hover{transform:translateY(-1px)}
/* White, not blue: this is the same primary button as the rest of the product. */
.hz-btn-main{background:#fff;color:#0a0a0a;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.hz-btn-main:hover{background:#e8e8ed}
.hz-btn-outline{background:transparent;border:1px solid rgba(255,255,255,.22);color:#fff}
.hz-btn-outline:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.32)}
.hz-btn-discord{background:transparent;border:1px solid rgba(255,255,255,.22);color:#fff}
.hz-btn-discord:hover{background:rgba(255,255,255,.07)}
.hz-btn-ghost{background:rgba(255,255,255,.07);border:0;color:#fff;box-shadow:var(--zshade)}
.hz-btn-ghost:hover{background:rgba(255,255,255,.12)}
.hz-free{margin-top:16px;font-size:13.5px;color:#8d9cb4}
.hz-free a{color:#bfd6ff;text-decoration:underline;text-underline-offset:3px}
.hz-free a:hover{color:#fff}
.hz-feats{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:0;box-shadow:var(--zshade)}
.hz-f{display:flex;align-items:center;gap:9px;font-size:14px;color:#dbe4f1}
.hz-f svg{color:#5ea9ff;flex:none}
.hz-verified{max-width:1080px;margin:26px auto 60px}
/* v3.1 — bigger, rounder, Apple-clean */
.hz{padding:86px 20px 46px}
.hz-pill{padding:8px 16px;font-size:12.5px;border-radius:999px;margin-bottom:30px}
.hz-pill-logo{width:16px;height:16px;border-radius:5px}
.hz-title{font-size:clamp(44px,7vw,72px);line-height:1.0;letter-spacing:-.035em;margin-bottom:22px}
.hz-sub{font-size:18px;line-height:1.65;max-width:680px;margin-bottom:34px}
.hz-btn{height:50px;padding:0 28px;border-radius:14px;font-size:16px;letter-spacing:-.01em}
.hz-free{margin-top:18px;font-size:15px}
.hz-free a{color:#e6eefc;text-decoration:none;border-bottom:0;text-underline-offset:0;box-shadow:var(--zshade)}
.hz-free a:hover{color:#fff;border-bottom-color:#fff}
.hz-feats{gap:32px;margin-top:52px;padding-top:32px}
.hz-f{font-size:15.5px;gap:10px}
.hz-f svg{width:19px;height:19px}
.hz-verified{max-width:1120px}
.d2-gempty{border-radius:28px}
/* kill underlines site-wide; underline only where a link is genuinely inline copy */
a{text-decoration:none}
.hz a,footer a{text-decoration:none}
/* v3.2 — bigger hero */
.hz{padding:96px 20px 50px}
.hz-title{font-size:clamp(50px,8vw,88px)}
.hz-sub{font-size:20px;max-width:720px}
.hz-pill{margin-bottom:34px}
.hz-ctas{flex-wrap:wrap}
/* ═══ v3.3 — monochrome accents + balanced type + clean footer ═══ */
/* hero typography: one scale, no extremes */
.hz{padding:84px 20px 46px}
.hz-title{font-size:clamp(44px,6.5vw,64px);line-height:1.02;letter-spacing:-.03em}
.hz-sub{font-size:17px;line-height:1.6;max-width:660px}
.hz-pill{font-size:11.5px;letter-spacing:.12em}
.hz-btn{height:48px;padding:0 22px;border-radius:14px;font-size:15px}
.hz-free{font-size:13.5px}
.hz-f{font-size:14.5px}
/* accent → white/black (Sign-in Discord blurple stays) */
.hz-pill,.engine-pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#e4e4ea}
.hz-pill-logo{filter:grayscale(1) brightness(2)}
.hz-title{color:#fff}
.hz-sub,.hz-free{color:#b3b3ba}
.hz-free a{color:#e8e8ee;border-bottom:0;box-shadow:var(--zshade)}
.hz-btn-main{background:#fff;color:#000;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.hz-btn-main:hover{background:#e8e8ed}
.hz-btn-ghost{background:rgba(255,255,255,.06);border:0;color:#fff;box-shadow:var(--zshade)}
.hz-btn-ghost:hover{background:rgba(255,255,255,.12)}
.hz-f svg{color:#e8e8ee}
.hz-f{color:#e4e4ea}
.d2-gempty,.vg-empty{border-color:rgba(255,255,255,.22);color:#9a9aa2}
/* other page CTAs */
.btn-primary,.btn-run,.btn-dl,.btn-verify,.btn-tt-analyze,.d2-act{
  background:#fff;color:#000;border:0;border-radius:20px;
}
.btn-primary:hover,.btn-run:hover:not(:disabled),.btn-dl:hover,.d2-act:hover{background:#e8e8ed;color:#000}
/* nav active & focus monochrome */
nav .nav-link.active{background:rgba(255,255,255,.12);color:#fff}
nav .nav-link.active::after{background:#fff}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none !important}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}
/* footer */
footer{padding:36px 0 22px;background:transparent;border-top:0;box-shadow:var(--zshade)}
.footer-row1{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-logo{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em}
.footer-chips{display:flex;gap:8px}
.ft-chip{font-size:10.5px;font-weight:600;color:#c7c7cf;background:rgba(255,255,255,.06);border:0;padding:3px 9px;border-radius:999px;box-shadow:var(--zshade)}
.footer-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer-group{display:flex;gap:16px}
.footer-group a{color:#c2c2c9;font-size:13.5px}
.footer-group a:hover{color:#fff}
.footer-sep{width:1px;height:14px;background:rgba(255,255,255,.15)}
.footer-row2{max-width:1120px;margin:22px auto 0;padding:16px 20px 0;border-top:0;color:#a3a3ad;font-size:12px;text-align:center;box-shadow:var(--zshade)}
@media(max-width:860px){.footer-row1{flex-direction:column;align-items:flex-start}.footer-links{flex-direction:column;align-items:flex-start;gap:10px}.footer-sep{display:none}}
/* v3.4 — footer cleanup */
footer{padding:30px 0 20px;border-top:0;background:transparent;box-shadow:var(--zshade)}
.footer-in{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-logo{font-size:16px;font-weight:700;color:#fff}
.footer-chip{font-size:10.5px;font-weight:600;color:#cfcfd6;background:rgba(255,255,255,.06);border:0;padding:3px 9px;border-radius:999px;box-shadow:var(--zshade)}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{color:#c9c9d0;font-size:13.5px}
.footer-links a:hover{color:#fff}
.footer-legal{max-width:1120px;margin:20px auto 0;padding:14px 20px 0;border-top:0;color:#9c9ca5;font-size:12px;box-shadow:var(--zshade)}
@media(max-width:820px){.footer-in{flex-direction:column;align-items:flex-start;gap:14px}.footer-links{gap:12px}}
/* ═══ v3.5 — Apple-like footer + uniform corner radii ═══ */
:root{--r-btn:14px;--r-card:18px;--r-input:12px}
/* footer */
footer.af{padding:56px 0 28px;border-top:0;background:transparent;text-align:left;box-shadow:none}
.af-in{max-width:1120px;margin:0 auto;padding:0 20px}
.af-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
.af-col{display:flex;flex-direction:column;gap:9px}
.af-brandcol .af-logo{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em;margin-bottom:2px}
.af-chips{display:flex;gap:8px;margin:6px 0 10px}
.af-chip{font-size:10.5px;font-weight:600;color:#c0c0c8;background:rgba(255,255,255,.06);border:0;padding:2px 9px;border-radius:999px;box-shadow:var(--zshade)}
.af-tag{color:#9c9ca5;font-size:12.5px;line-height:1.5;max-width:220px}
.af-col a{color:#a6a6ae;font-size:12.5px;width:fit-content}
.af-col a:hover{color:#fff}
.af-legal{margin-top:30px;padding-top:18px;border-top:0;display:flex;gap:10px;flex-wrap:wrap;color:#94949e;font-size:11.5px;box-shadow:var(--zshade)}
.af-dot{color:#555}
@media(max-width:860px){.af-cols{grid-template-columns:1fr 1fr}.af-brandcol{grid-column:1/-1}}
/* uniform radii */
.hz-btn,.btn-primary,.btn-run,.btn-dl,.btn-verify,.btn-tt-analyze,.btn-discord,.btn-ghost,.btn-secondary,#nav-key-btn{border-radius:var(--r-btn)}
.d2-card,.hz-card,.deck-card,.legal-card,.tier-card,.drop-card,.key-modal-card,.donate-card{border-radius:var(--r-card)}
input,select,textarea{border-radius:var(--r-input)}
/* v3.6 — rounder everywhere */
:root{--r-btn:18px;--r-card:24px;--r-input:14px;--r-chip:999px}
.hz-btn,.btn-primary,.btn-run,.btn-dl,.btn-verify,.btn-tt-analyze,.btn-discord,.btn-ghost,.btn-secondary,#nav-key-btn{border-radius:var(--r-btn)}
.d2-card,.hz-card,.deck-card,.legal-card,.tier-card,.drop-card,.key-modal-card,.donate-card,
.d2-stat,.d2-verified,.hz-verified,.d2-gempty,.vg-empty,.deck-gallery,.d2-gallery{border-radius:var(--r-card)}
input,select,textarea{border-radius:var(--r-input)}
.d2-act,.footer-chip,.af-chip,.ft-chip,.nav-more-btn{border-radius:var(--r-chip)}
nav .nav-link{border-radius:20px}
/* ═══ v4 — comparison, live data, Zilem Verified, FAQ ═══ */
.sec-h{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c9c9d0;text-align:center;margin-bottom:10px}
.sec-sub{color:#9a9aa2;font-size:14px;text-align:center;max-width:560px;margin:0 auto 22px}
.cmp,.ld,.zv,.qa{max-width:1080px;margin:0 auto;padding:34px 20px 8px}
.cmp-grid{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap}
.cmp-card{flex:1;min-width:280px;max-width:420px;background:rgba(255,255,255,.035);border:0;border-radius:28px;padding:22px;box-shadow:var(--zshade)}
.cmp-tag{font-size:12px;font-weight:600;color:#a6a6ae;margin-bottom:16px}
.cmp-tag-on{color:#fff}
.cmp-art{display:flex;flex-direction:column;gap:7px;height:96px;justify-content:center;margin-bottom:14px}
.cmp-art i{height:12px;border-radius:7px;background:#fff;display:block}
.cmp-art i:nth-child(1){width:100%}.cmp-art i:nth-child(2){width:82%}
.cmp-art i:nth-child(3){width:64%}.cmp-art i:nth-child(4){width:48%}
.cmp-art-blur i{filter:blur(3px);opacity:.35}
.cmp-card p{color:#a6a6ae;font-size:13.5px;line-height:1.6}
.cmp-arrow{color:#c9c9d0}
.ld-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ld-tile{background:rgba(255,255,255,.035);border:0;border-radius:28px;padding:26px 18px;text-align:center;box-shadow:var(--zshade)}
.ld-v{display:block;font-size:34px;font-weight:750;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ld-l{color:#9a9aa2;font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-top:6px;display:block}
.zv{padding-top:40px}
.zv .sec-h{margin-bottom:6px}
.zv .sec-sub{margin-bottom:20px}
.d2-gempty{border-radius:28px}
.qa{max-width:760px;padding-bottom:80px}
.qa-item{border:0;border-radius:20px;background:rgba(255,255,255,.03);margin-bottom:10px;overflow:hidden;box-shadow:var(--zshade)}
.qa-item summary{list-style:none;cursor:pointer;padding:16px 18px;color:#e4e4ea;font-size:14.5px;font-weight:500;display:flex;justify-content:space-between;align-items:center}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary::after{content:'';width:9px;height:9px;border-right:2px solid #a6a6ae;border-bottom:2px solid #a6a6ae;transform:rotate(45deg);transition:transform var(--dur-2) var(--ease-out);flex:none}
.qa-item[open] summary::after{transform:rotate(225deg)}
.qa-item p{padding:0 18px 16px;color:#9a9aa2;font-size:13.5px;line-height:1.65}
@media(max-width:700px){.ld-grid{grid-template-columns:1fr}.cmp-arrow{transform:rotate(90deg)}}
/* v4.1 — video slider + honest live data */
.vid{position:relative;aspect-ratio:16/9;max-width:880px;margin:18px auto 0;border:0;border-radius:28px;overflow:hidden;background:#000;cursor:ew-resize;user-select:none;touch-action:none;box-shadow:var(--zshade)}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.vid-b,.vid-a{position:absolute;inset:0}
.vid-a{width:50%;border-right:0;overflow:hidden;z-index:2;box-shadow:var(--zshade)}
.vid-a video{width:var(--cmp-w,880px);max-width:none}
/* Compare-slider divider line. The knob and its arrow are defined once, in the
   .cmp block further down — the three triangle pseudo-element rules that used
   to live here were the bug: ::after had no .cmp override, so a leftover black
   border-triangle rendered next to the newer unicode arrow. */
.vid-h{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:3;transform:translateX(-1px)}
.vid-cap{position:absolute;top:12px;padding:4px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.1em;background:rgba(0,0,0,.6);z-index:3}
.cap-a{left:12px;color:#fff;border:0;box-shadow:var(--zshade)}
.cap-b{right:12px;color:#cfcfd6;border:0;box-shadow:var(--zshade)}
.vid-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9a9aa2;font-size:14px;background:rgba(5,5,8,.7);z-index:4;text-align:center;padding:0 20px}
.vid-empty.hide{display:none}
.vid-pick{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.vp{display:inline-flex;flex-direction:column;gap:6px;font-size:12.5px;color:#c9c9d0}
.vp input{font-size:12px;color:#fff;background:rgba(255,255,255,.05);border:0;border-radius:14px;padding:8px 10px;width:230px;box-shadow:var(--zshade)}
.ld2{max-width:1080px;margin:0 auto;padding:40px 20px 6px}
.ld2-head{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ld2-head .sec-h{margin:0}
.ld2-pulse{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:#c9c9d0;background:rgba(255,255,255,.05);border:0;padding:5px 11px;border-radius:999px;box-shadow:var(--zshade)}
.ld2-pulse i{width:7px;height:7px;border-radius:50%;background:#fff;animation:ep 2.4s infinite}
.ld2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ld2-tile{background:rgba(255,255,255,.035);border:0;border-radius:28px;padding:30px 18px;text-align:center;box-shadow:var(--zshade)}
.ld2-v{display:block;font-size:38px;font-weight:750;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-height:1.2em}
.ld2-l{color:#9a9aa2;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;margin-top:8px;display:block}
.ld2-note{text-align:center;color:#9c9ca5;font-size:12px;margin-top:14px}
@media(max-width:700px){.ld2-grid{grid-template-columns:1fr}}
/* v4.2 — gaps, 9:16 slider, live activity, verified rail */
.af-mark{width:18px;height:18px;border-radius:5px}
.hz{padding-top:128px;padding-bottom:56px}
.hz-btn{border-radius:999px}
.vid{aspect-ratio:9/16;max-width:430px;border-radius:34px;margin:22px auto 0}
.vid video{object-fit:cover}
.vid-cap{top:16px}
.act{max-width:1080px;margin:0 auto;padding:42px 20px 8px}
.act-feed{display:flex;flex-direction:column;gap:8px;max-width:640px;margin:0 auto}
.act-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);border:0;border-radius:20px;padding:10px 14px;box-shadow:var(--zshade)}
.act-pfp{width:34px;height:34px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.08);flex:none}
.act-pfp img{width:100%;height:100%;object-fit:cover}
.act-txt{flex:1;min-width:0}
.act-name{color:#fff;font-size:13.5px;font-weight:600}
.act-what{color:#9a9aa2;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-time{color:#9c9ca5;font-size:12px;flex:none}
.act-empty{color:#a3a3ad;font-size:13px;text-align:center;padding:18px;border:0;border-radius:20px;box-shadow:var(--zshade)}
.zv{padding-top:40px}
.zv-rail{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.zv-tile{flex:0 0 150px;aspect-ratio:9/16;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:0;scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--zshade)}
.zv-tile video,.zv-tile img{width:100%;height:100%;object-fit:cover;display:block}
.zv-cap{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(0,0,0,.5);margin-top:auto;font-size:11px;color:#e9e9ef}
.zv-cap img{width:16px;height:16px;border-radius:50%}
.zv-empty{flex:0 0 260px;align-self:stretch;display:flex;align-items:center;justify-content:center;border:0;border-radius:28px;color:#a3a3ad;font-size:13px;text-align:center;padding:20px;box-shadow:var(--zshade)}

/* ═══ v5 — bold "See the difference", compact phone viewer, Verified in the wild ═══ */
.cmp{padding-top:10px}
.cmp-title{font-family:var(--font-display);font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.035em;font-weight:800;color:#fff;text-align:center;margin:0 0 14px}
.cmp .sec-sub{font-size:16px;margin-bottom:4px;color:#9a9aa2}
/* compact phone-frame viewer */
.vid{width:min(312px,100%);max-width:none;aspect-ratio:9/16;border-radius:34px;margin:8px auto 0;background:#050508;border:0;box-shadow:0 26px 70px rgba(0,0,0,.55)}
.vid video{display:none}
.vid.live video{display:block}
.vid-demo{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.vid-b{z-index:1}
.vid-a{z-index:2}
.vid-a video,.vid-a .vid-demo{width:var(--cmp-w,312px);max-width:none}
.vid-a .vid-demo{filter:blur(2.5px) saturate(.72) contrast(.95) brightness(.85)}
.vid-cap{top:12px;padding:5px 12px;font-size:10px;font-weight:800;letter-spacing:.13em;z-index:4;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vid .cap-before{left:12px;color:#e9eef6;background:rgba(8,10,16,.55);border:0;box-shadow:var(--zshade)}
.vid .cap-after{right:12px;color:#041d38;background:linear-gradient(180deg,#6dbdff,#2f95f0);border:0;box-shadow:0 2px 16px rgba(61,165,255,.45)}
.vid-pick{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.vp-btn{display:inline-flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:600;color:#dce7f5;background:rgba(255,255,255,.05);border:0;border-radius:999px;padding:9px 16px;transition:background var(--dur-1),border-color var(--dur-1),transform var(--dur-1) var(--ease-out);box-shadow:var(--zshade)}
.vp-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.vp-btn svg{color:#6dbdff;flex:none}
.vid-note{text-align:center;font-size:11.5px;color:#7c7c86;margin-top:10px;max-width:460px;margin-left:auto;margin-right:auto}
/* Verified in the wild */
.zv{padding-top:56px;max-width:1180px}
.zv-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.zv-kick{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#59b2ff;margin-bottom:10px}
.zv-kick svg{width:13px;height:13px;flex:none}
.zv-title{font-family:var(--font-display);font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.03;color:#fff;margin:0 0 10px}
.zv-sub{margin:0;font-size:15px;color:#9a9aa2;max-width:520px}
.zv-cta{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.06);border:0;color:#fff;font-size:13.5px;font-weight:600;text-decoration:none;flex:none;transition:background var(--dur-1),border-color var(--dur-1) var(--ease-out);box-shadow:var(--zshade)}
.zv-cta:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.zv-cta svg{color:#59b2ff;flex:none}
@media(max-width:720px){.zv-head{align-items:flex-start}.zv-cta{margin-left:auto}}
.zv-rail{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.zv-tile{flex:0 0 198px;background:#101116;border:0;border-radius:28px;overflow:hidden;scroll-snap-align:start;display:flex;flex-direction:column;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.zv-media{position:relative;aspect-ratio:9/16;background:#000;overflow:hidden}
.zv-art{position:absolute;inset:0}
.zv-art svg{width:100%;height:100%;display:block}
.zv-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.zv-badge{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:700;color:#7cc9ff;background:rgba(6,10,18,.62);border:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--zshade)}
.zv-badge svg{width:11px;height:11px;flex:none}
.zv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 4px 18px rgba(0,0,0,.45);transition:transform var(--dur-1),background var(--dur-1) var(--ease-out);padding:0}
.zv-play:hover{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.zv-play .ic-play{width:14px;height:14px;margin-left:2px;color:#05070c}
.zv-play .ic-pause{width:13px;height:13px;color:#05070c;display:none}
.zv-tile.playing .zv-play .ic-play{display:none}
.zv-tile.playing .zv-play .ic-pause{display:block}
.zv-cap{display:flex;align-items:center;gap:9px;padding:10px 12px;background:transparent;margin-top:auto}
.zv-cap img{width:26px;height:26px;border-radius:50%;flex:none}
.zv-captx{min-width:0;flex:1}
.zv-user{display:block;font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zv-caption{display:block;font-size:10.5px;color:#8b8b94;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Views / likes / comments on a Verified card. Tabular figures so the three
   columns do not jitter as counts swap in, and they stay on one line inside a
   150px-wide card. */
.zv-stats{display:flex;align-items:center;gap:9px;margin-top:5px;font-size:10.5px;color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums;white-space:nowrap}
.zv-stats .zv-stat{display:inline-flex;align-items:center;gap:3.5px;min-width:0}
.zv-stats svg{width:11px;height:11px;flex:none;opacity:.7}
.zv-stats b{font-weight:600;color:rgba(255,255,255,.82)}
/* Letter chip, shown if the signed avatar URL has expired. */
.zv-ava-fb{width:26px;height:26px;border-radius:50%;flex:none;display:none;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b3b46,#212129);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase}
.zv-empty{flex:0 0 260px;align-self:stretch;display:flex;align-items:center;justify-content:center;border:0;border-radius:28px;color:#8b8b94;font-size:13px;text-align:center;padding:20px;box-shadow:var(--zshade)}
@media(max-width:560px){.zv-tile{flex-basis:164px}}

.zv-ava{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover}

/* v5.1 — neutral chips + "without/with Zilem" explainer cards */
.vid-cap{font-size:9.5px;letter-spacing:.08em;padding:5px 11px}
.vid .cap-before{color:#e4e7ee;background:rgba(8,10,16,.6);border:0;box-shadow:var(--zshade)}
.vid .cap-after{right:12px;color:#0a0d13;background:rgba(255,255,255,.94);border:0;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.cmp-sides{max-width:680px;margin:28px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
.cmp-side{background:rgba(255,255,255,.035);border:0;border-radius:20px;padding:16px 18px;box-shadow:var(--zshade)}
.cmp-side.cs-good{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24)}
.cs-kick{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8d8d96;margin-bottom:7px}
.cs-good .cs-kick{color:#ccd5e2}
.cs-name{font-size:17px;font-weight:750;color:#fff;letter-spacing:-.01em;margin-bottom:7px}
.cs-meta{font-size:11.5px;color:#9a9aa2;margin-bottom:8px;font-variant-numeric:tabular-nums}
.cs-txt{margin:0;font-size:12.5px;line-height:1.6;color:#9a9aa2}
.cs-good .cs-txt{color:#bcc4d0}
@media(max-width:700px){.cmp-sides{grid-template-columns:1fr}}

/* v5.2 — footer brand lockup (icon + wordmark side by side) + nav icon sizing */
.af-brandrow{display:flex;align-items:center;gap:9px;margin-bottom:2px}
.af-brandcol .af-logo{margin-bottom:0}
.nav-link svg,.nav-more-item svg{width:15px;height:15px}

/* v5.3 — Verified in the wild: real data, bigger tiles, scroll controls */
.zv-scroll{position:relative}
.zv-rail{gap:16px;padding:4px 42px 20px}
.zv-tile{flex:0 0 240px;border-radius:28px;border:0;box-shadow:var(--zshade)}
.zv-ava{width:30px;height:30px}
.zv-user{font-size:13px}
.zv-caption{font-size:11px;margin-top:3px}
.zv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:0;background:rgba(14,14,18,.82);color:#fff;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(0,0,0,.45);transition:background var(--dur-1),transform var(--dur-1),border-color var(--dur-1) var(--ease-out);padding:0}
.zv-nav:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)}
.zv-nav:active{transform:translateY(-50%) scale(.94)}
.zv-nav:disabled{opacity:.22;pointer-events:none}
.zv-prev{left:0}
.zv-next{right:0}
.zv-empty a{color:#59b2ff;text-decoration:none;border-bottom:0;box-shadow:var(--zshade)}
.zv-empty a:hover{color:#7cc9ff;border-bottom-color:#7cc9ff}
@media(max-width:700px){.zv-rail{padding:4px 30px 18px}.zv-tile{flex-basis:206px}.zv-nav{width:30px;height:30px}.zv-prev{left:0}.zv-next{right:0}}
.zv-cap .zv-ava{width:30px;height:30px;border-radius:50%;object-fit:cover}

/* v6.3 — slot boxes (zero gap) for Verified rail + Live activity */
.zv-rail{gap:0}
.zv-tile,.zv-slot{border-radius:0}
.zv-rail>:first-child{border-top-left-radius:20px;border-bottom-left-radius:20px}
.zv-rail>:last-child{border-top-right-radius:20px;border-bottom-right-radius:20px}
.zv-slot{flex:0 0 240px;display:flex;flex-direction:column;background:rgba(255,255,255,.015);border:0;box-shadow:var(--zshade)}
.zv-slot-media{aspect-ratio:9/16;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));border-bottom:0;box-shadow:var(--zshade)}
.zv-slot-cap{height:58px}
.act-feed{gap:0;border:0;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.02);box-shadow:var(--zshade)}
.act-row{border-radius:0;border:0;border-bottom:0;margin:0;background:transparent;box-shadow:var(--zshade)}
.act-row:last-child{border-bottom:0}
.act-row:hover{background:rgba(255,255,255,.035)}
.act-slot .act-pfp{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06)}
.act-bar{display:block;height:10px;border-radius:6px;background:rgba(255,255,255,.07)}
.act-bar-n{width:110px;margin-bottom:7px}
.act-bar-w{width:190px;max-width:100%}
.act-bar-t{width:34px;height:8px;align-self:center}
.act-slot{min-height:62px;align-items:center}
@media(max-width:700px){.zv-slot{flex-basis:206px}}
@media(max-width:560px){.zv-slot{flex-basis:164px}}

/* v7 — optimizer / analytics / tiers redesign polish (visual layer only) */
.page-hero{padding:150px 24px 54px}
.page-hero-title{font-weight:800;letter-spacing:-.03em;font-size:clamp(38px,5.4vw,62px);line-height:1.03;margin-bottom:16px;background:linear-gradient(180deg,#fff 55%,#b9c8de);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.page-hero-sub{color:#9a9aa2;-webkit-text-fill-color:#9a9aa2;max-width:620px;font-size:16px;line-height:1.62}
.page-hero .section-badge,.hero-badge{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#c6d2e2;padding:7px 15px}
.hero h1{font-size:clamp(46px,7vw,82px);font-weight:800;letter-spacing:-.035em;line-height:1.0}
.hero-sub,.page-hero-sub{-webkit-text-fill-color:#9a9aa2;color:#9a9aa2;max-width:600px}
.section-title{font-weight:800;letter-spacing:-.025em;line-height:1.06;font-size:clamp(28px,3.9vw,44px)}
.section-title span{-webkit-text-fill-color:#59b2ff;color:#59b2ff}
.section-sub{color:#9a9aa2}
.section-header{margin-bottom:44px}
.section-badge svg,.hero-badge svg{color:#59b2ff}
.hero-stats{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.hero-stats .stat-val{font-weight:750}

/* v7.1 — optimizer tool-only page (hero removed) */
.hero.hero-slim{min-height:0;padding:118px 24px 6px;justify-content:flex-start}
.hero.hero-slim::before{display:none}
.hero.hero-slim h1{font-size:clamp(34px,5.2vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.03;margin-bottom:14px}
.hero.hero-slim .hero-sub{margin-bottom:0;max-width:560px}

/* v8 — tiers page: monochrome black & white, name-led cards */
.page-tiers .page-hero-title{background:linear-gradient(180deg,#fff 55%,#e3e5ea);-webkit-text-fill-color:transparent;color:transparent}
.page-tiers .section-title span{color:#fff;-webkit-text-fill-color:#fff}
.page-tiers .tier-limit{font-size:clamp(30px,3vw,44px);font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-bottom:16px}
.page-tiers .tier-card.featured{border-color:rgba(255,255,255,.24);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(16,16,18,.7) 45%)}
.page-tiers .tier-card.featured .tier-price,
.page-tiers .tier-card.featured .tier-feat-icon{color:#fff}
.page-tiers .tier-icon.donor,
.page-tiers .tier-icon.booster,
.page-tiers .tier-feat-icon{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff}
.page-tiers .tier-feat-icon svg{stroke:#fff}
.page-tiers .tier-feat-icon{color:#e9e9ee}
.page-tiers .btn-primary{background:#fff;color:#000;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.page-tiers .btn-primary:hover{background:#e8e8ec;color:#000;transform:translateY(-1px)}
.page-tiers .tier-cmp svg{stroke:#fff}

/* v9 — mobile "Menu" hub (Android/iPhone) */
.zm-menu-btn{display:none;align-items:center;gap:7px;padding:12px 17px;border-radius:999px;min-height:42px;box-sizing:border-box;font-size:12.5px;font-weight:600;color:#dce6f2;background:rgba(255,255,255,.06);border:1px solid rgba(190,255,60,.45);cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1) var(--ease-out)}
.zm-menu-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.zm-hub{display:none;position:fixed;inset:0;z-index:400;background:rgba(4,4,6,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.zm-hub.open{display:flex}
.zm-hub-inner{position:absolute;right:0;top:0;bottom:0;width:min(360px,92vw);background:linear-gradient(180deg,#0b0b0e,#070709);border-left:0;box-shadow:-30px 0 80px rgba(0,0,0,.6);display:flex;flex-direction:column;animation:zmSlide var(--dur-3) var(--ease-out)}
@keyframes zmSlide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.zm-hub-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:0;box-shadow:var(--zshade)}
.zm-hub-logo{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:#fff}
.zm-hub-logo img{width:20px;height:20px;border-radius:6px}
.zm-hub-close{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#cfd6e0;background:rgba(255,255,255,.06);border:0;cursor:pointer;box-shadow:var(--zshade)}
.zm-hub-body{padding:18px 16px 26px;overflow-y:auto;flex:1}
.zm-kick{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#7f8b99;margin:14px 0 10px}
.zm-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zm-card{display:flex;flex-direction:column;gap:5px;padding:16px 15px;border-radius:20px;background:rgba(255,255,255,.035);border:0;color:#fff;text-decoration:none;transition:background var(--dur-1),border-color var(--dur-1),transform var(--dur-1) var(--ease-out);box-shadow:var(--zshade)}
.zm-card:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.zm-card svg{width:19px;height:19px;color:#c9ff5e;margin-bottom:7px}
.zm-card.on{background:rgba(190,255,60,.09);box-shadow:0 0 0 1px rgba(190,255,60,.4) inset}
.zm-card.on svg{color:#c9ff5e}
.zm-ct{font-size:14px;font-weight:700;color:#fff}
.zm-cs{font-size:10.5px;color:#9aa4b2}
.zm-more{display:flex;flex-direction:column;gap:6px}
.zm-item{display:flex;align-items:center;gap:13px;padding:15px 14px;border-radius:20px;color:#dbe2ec;text-decoration:none;font-size:14px;font-weight:600;background:rgba(255,255,255,.03);border:0;margin-bottom:6px;box-shadow:var(--zshade)}
.zm-item:hover{background:rgba(255,255,255,.08)}
.zm-item svg{width:18px;height:18px;color:#c9ff5e;flex:none}
.zm-item > span{flex:1}
.zm-chev{width:14px!important;height:14px!important;color:#6b7480!important}
.zm-foot{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 4px 0;border-top:0;box-shadow:var(--zshade)}
.zm-sign{font-size:13px;font-weight:700;color:#fff;background:#fff;color:#000;padding:8px 18px;border-radius:999px;cursor:pointer}
@media(max-width:820px){
  .nav-links,.nav-more{display:none}
  .zm-menu-btn{display:inline-flex}
  nav .nav-inner{justify-content:space-between}
}
@media(min-width:821px){
  .zm-menu-btn{display:none}
  .zm-hub{display:none!important}
}

/* v9.1 — remove Android blue tap-highlight / focus flash on touch */
html{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}
a,button,input,select,textarea,label,summary,div[onclick]{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}
button:focus,a:focus,input:focus,select:focus,textarea:focus,.zm-card:focus,.zm-item:focus{outline:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}

/* v9.2 — Android fixes: no white overscroll flash, nav visible/solid, no white login blob */
html{background:#000}
html,body{overscroll-behavior-y:none;-webkit-overflow-scrolling:touch}
body{background:#000}
nav{background:rgba(12,12,14,.92)}
@media(max-width:820px){
  nav{top:calc(8px + env(safe-area-inset-top));width:calc(100% - 20px);height:auto;min-height:52px;padding:8px 10px 8px 14px;border-radius:28px}
  #nav-key-btn{background:rgba(255,255,255,.1);color:#fff;border:0;box-shadow:none}
  #nav-key-btn:hover{background:rgba(255,255,255,.18)}
}

/* v9.3 — Android/iPhone top bar exactly like the reference strip */
@media(max-width:820px){
  nav{top:0;left:0;right:0;width:100%;max-width:none;border-radius:0;padding:calc(8px + env(safe-area-inset-top)) 14px 10px;border:0;border-bottom:0;box-shadow:none;background:rgba(8,9,11,.94)}
  nav .nav-inner{width:100%;justify-content:space-between}
  #nav-key-btn{display:none}
  #nav-usage-pill{display:none!important}
  .zm-menu-btn{background:rgba(255,255,255,.06);border:0;color:#fff;box-shadow:var(--zshade)}
  .zm-menu-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
  .zm-menu-btn svg{color:#c9ff5e}
  .nav-logo-text{font-size:14.5px}
}

/* v9.4 — fix white-bar bug on Android: no gradient/background-clip text, solid colors */
.page-hero-title,.hero h1 span{
  background:none!important;
  background-clip:initial!important;
  -webkit-background-clip:initial!important;
  -webkit-text-fill-color:#fff!important;
  color:#fff!important
}
.hero-sub,.page-hero-sub{
  background:none!important;
  background-clip:initial!important;
  -webkit-background-clip:initial!important;
  -webkit-text-fill-color:#9a9aa2!important;
  color:#9a9aa2!important
}
.page-tiers .page-hero-title{
  background:none!important;
  -webkit-text-fill-color:#fff!important;
  color:#fff!important
}

/* v9.5 — real mobile-bar fix: clear inherited translateX(-50%) + hide dead actions */
@media(max-width:820px){
  nav{top:0;left:0;right:0;transform:none;width:100%;max-width:none;border-radius:0;border:0;border-bottom:0;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:rgba(8,9,11,.94);box-shadow:var(--zshade)}
  nav .nav-actions{display:none!important}
  .zm-menu-btn{margin-left:auto}
}
.zm-account{padding:4px 2px 0;margin-top:6px;border-top:0;box-shadow:var(--zshade)}
.zm-acc-load{font-size:12px;color:#8b95a3;padding:10px 4px}
.zm-acc-title{font-size:14px;font-weight:700;color:#fff}
.zm-acc-sub{font-size:12px;color:#9aa4b2;margin-top:3px;line-height:1.5}
.zm-acc.guest,.zm-acc.user{background:rgba(255,255,255,.035);border:0;border-radius:20px;padding:13px;box-shadow:var(--zshade)}
.zm-acc.user{display:flex;gap:11px;align-items:center}
.zm-acc-ava{flex:none}
.zm-acc-ava img{width:40px;height:40px;border-radius:14px;object-fit:cover;display:block}
.zm-acc-id{min-width:0;flex:1}
.zm-acc-tag{font-size:11px;font-weight:600;color:#c9ff5e;margin-top:1px}
/* Account panel additions. Hierarchy is carried by surface brightness and a
   single small bar, so the two numbers read at a glance without a second accent
   colour. The over state brightens rather than turning red, matching how the
   rest of this UI signals a limit. */
.zm-acc-tagline{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.zm-acc-badge{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#0b0e14;background:#d5dae2;border-radius:6px;padding:3px 7px}
.zm-acc-chip{font-size:10.5px;font-weight:700;letter-spacing:.03em;color:#9aa4b2;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:2px 7px}
.zm-acc-chip.over{color:#ffab70;border-color:rgba(255,171,112,.34)}
.zm-acc-reset{font-size:11px;color:#7f8b99;margin-top:10px;text-align:center;letter-spacing:.01em}
.zm-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.zm-stat{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
.zm-stat-k{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#7f8b99}
.zm-stat-v{font-size:17px;font-weight:750;color:#fff;letter-spacing:-.01em;line-height:1.1}
.zm-stat-v.over{color:#ffab70}
.zm-stat-n{font-size:10.5px;font-weight:600;color:#7f8b99}
.zm-bar{display:block;height:4px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.zm-bar i{display:block;height:100%;border-radius:999px;background:#d5dae2}
.zm-acc-actions{display:flex;gap:8px;margin-top:10px}
.zm-acc-btn{flex:1;padding:12px;border-radius:999px;border:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:rgba(255,255,255,.07);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);box-shadow:var(--zshade)}
.zm-acc-btn.ghost{background:transparent;color:#cfd6e0}
/* One prominent primary action in the signed-out panel — a single full-width
   call to action reads better than two buttons competing for the same tap. */
.zm-acc-btn.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#5865f2;border-color:transparent;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.zm-acc-btn.primary:hover{background:#4752c4}
.zm-acc-btn.full{width:100%;flex:0 0 auto;padding:14px 16px;font-size:14.5px;margin-top:4px;min-height:48px}
.zm-acc-btn:active{transform:scale(.985)}
.zm-acc-btn.ghost:active{background:rgba(255,255,255,.11)}
.zm-acc-btn.primary:active{background:#3c45a5}
.zm-acc-link{display:flex;align-items:center;justify-content:center;width:100%;margin-top:6px;padding:12px 8px;min-height:44px;background:none;border:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  color:#9aa4b2;font-size:12.5px;font-weight:600;cursor:pointer;text-align:center;
  transition:color var(--dur-2) var(--ease-out)}
.zm-acc-link:hover{color:#c9d3e0}
.zm-acc-btn.warn{color:#ff8f8f;border-color:rgba(255,120,120,.3)}

/* v9.6 — account usage state */
.zm-acc-sub.over{color:#ffab70;font-weight:600}

/* v10 — Portrait devices: top bar only (logo + Menu), full B/W, no extras */
@media (orientation: portrait), (max-width: 820px) {
  nav{top:0;left:0;right:0;transform:none;width:100%;max-width:none;border-radius:0;border:0;border-bottom:0;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:rgba(8,9,11,.96);box-shadow:var(--zshade)}
  nav .nav-inner{width:100%;justify-content:space-between}
  nav .nav-links,nav .nav-more,nav .nav-actions{display:none!important}
  .zm-menu-btn{margin-left:auto;display:inline-flex;background:rgba(255,255,255,.07);border:0;color:#fff;box-shadow:var(--zshade)}
  .zm-menu-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
  .zm-menu-btn svg{color:#fff}
}
/* Monochrome hub (no green) */
.zm-card svg,.zm-item svg{color:#cdd4de}
.zm-card.on{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.zm-card.on svg{color:#fff}
.zm-card.on .zm-ct{color:#fff}
.zm-acc-tag{color:#d5dae2}
.zm-acc-sub.over{color:#e8e8ec;font-weight:600}
.zm-chev{color:#8b93a0!important}

/* v10.1 — compare viewer: real clips always visible, no demo art */
.vid video{display:block}
.vid-demo{display:none!important}

/* v10.2 — top bar guaranteed on EVERY mobile mode (portrait, landscape, "desktop site" toggle, touch) */
@media (pointer: coarse), (orientation: portrait), (max-width: 900px) {
  nav{top:0;left:0;right:0;transform:none;width:100%!important;max-width:none!important;border-radius:0;border:0;border-bottom:0;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:rgba(8,9,11,.96);display:flex!important;visibility:visible!important;opacity:1!important;box-shadow:var(--zshade)}
  nav .nav-inner{width:100%;justify-content:space-between;display:flex;align-items:center;gap:10px}
  nav .nav-links,nav .nav-more,nav .nav-actions{display:none!important}
  .zm-menu-btn{display:inline-flex!important;margin-left:auto;align-items:center;gap:7px;padding:12px 17px;border-radius:999px;min-height:42px;box-sizing:border-box;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.07);border:0;cursor:pointer;box-shadow:var(--zshade)}
  .zm-menu-btn svg{color:#fff}
  nav .nav-logo{flex:none}
}
@media (pointer: fine) and (min-width: 901px){
  nav{display:flex}
  .zm-menu-btn{display:none}
}

/* v10.3 — nothing fixed at the bottom on phones: toast moves to top */
@media (pointer: coarse), (orientation: portrait), (max-width: 900px){
  #toast{top:calc(70px + env(safe-area-inset-top));bottom:auto;left:50%;transform:translateX(-50%) translateY(-18px) scale(.97)}
  #toast.show{transform:translateX(-50%) translateY(0) scale(1)}
}

/* v10.4 — tier info notes */
.tier-note{display:flex;gap:9px;margin:16px 8px 0;padding:11px 12px;border:0;border-radius:14px;background:rgba(255,255,255,.02);color:#aab3bf;font-size:11px;line-height:1.55;text-align:left;box-shadow:var(--zshade)}
.tier-note span{flex:none;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:9px;padding-top:2px}

/* v10.5 — tier info note boxes (below the cards, icon style) */
.tier-notes{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:1120px;margin:22px auto 0;padding:0 24px}
.tn-box{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.03);border:0;border-radius:20px;padding:14px 16px;text-align:left;box-shadow:var(--zshade)}
.tn-ic{flex:none;width:28px;height:28px;border-radius:14px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:#d5dae2}
.tn-ic svg{width:15px;height:15px}
.tn-body{font-size:12.5px;line-height:1.6;color:#b9c0ca}
.tn-body b{display:block;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
@media(max-width:700px){.tier-notes{grid-template-columns:1fr;padding:0 18px}}


/* ── v1.6 — 'Join Discord' entry points ───────────────────────────────────
   Desktop nav pill, homepage hero CTA and the secondary button in the sign-in
   modal. Colours are Discord blurple (#5865f2) so the affordance reads as
   "Discord" at a glance. */
#nav-discord-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 15px;border-radius:var(--pill);font-size:12px;font-weight:600;color:#fff;background:rgba(88,101,242,.18);border:1px solid rgba(88,101,242,.55);white-space:nowrap;flex-shrink:0;transition:background var(--dur-2),border-color var(--dur-2),transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2)}
#nav-discord-btn:hover{background:#5865f2;border-color:#5865f2;transform:translateY(-1px);box-shadow:0 7px 20px rgba(88,101,242,.42)}
#nav-discord-btn:active{transform:scale(.97)}
#nav-discord-btn svg{flex:none}
/* Narrow desktop: drop the label before the nav can crowd. */
@media(max-width:1200px){#nav-discord-btn .nd-label{display:none}#nav-discord-btn{padding:0 11px}}
.hz-btn-discord{display:inline-flex;align-items:center;gap:9px;background:rgba(88,101,242,.18);border:0;color:#fff;box-shadow:var(--zshade)}
.hz-btn-discord:hover{background:#5865f2;border-color:#5865f2;transform:translateY(-2px);box-shadow:0 12px 30px rgba(88,101,242,.4)}
.btn-discord-modal.secondary{margin-top:10px;margin-bottom:0;background:rgba(88,101,242,.16);border:0;color:#fff;box-shadow:var(--zshade)}
.btn-discord-modal.secondary:hover{background:#5865f2;border-color:#5865f2;box-shadow:0 8px 28px rgba(88,101,242,.5);transform:translateY(-1px)}

/* ── v1.6.1 — keep the modal's secondary button visually distinct ─────────
   A later block in this file sets `.btn-discord-modal{background:#5865f2
   !important;border:1px solid #5865f2!important}`, which flattened the
   "Join the Discord server" button into an exact copy of "Continue with
   Discord". #key-modal raises specificity so the outline style wins. */
#key-modal .btn-discord-modal.secondary{background:transparent!important;border:1px solid rgba(88,101,242,.65)!important;color:#fff!important;box-shadow:none}
#key-modal .btn-discord-modal.secondary:hover{background:#5865f2!important;border-color:#5865f2!important;box-shadow:0 8px 28px rgba(88,101,242,.45)}

/* ── v1.7 — Verified-in-the-wild card chrome ─────────────────────────────
   The audio control used to sit bottom-left, hidden until hover, with a lime
   (accent-color:#c9ff5e) volume bar. It now sits top-right in the site blue
   and is revealed on hover, on focus, and while a card is playing (so touch
   users can reach it after tapping to play). */
.zv-audio{position:absolute;top:8px;right:8px;z-index:4;display:inline-flex;align-items:center;gap:6px;width:96px;padding:4px 9px;border-radius:999px;background:rgba(6,10,18,.66);border:1px solid rgba(89,178,255,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:translateY(-3px);transition:opacity var(--dur-2),transform var(--dur-2) var(--ease-out);pointer-events:none}
.zv-tile:hover .zv-audio,.zv-tile:focus-within .zv-audio,.zv-tile.playing .zv-audio{opacity:1;transform:none;pointer-events:auto}
.zv-mute-btn{display:flex;align-items:center;justify-content:center;flex:none;background:none;border:0;padding:1px;cursor:pointer;color:#8ec5ff}
.zv-mute-btn:hover{color:#fff}
.zv-vol-slider{flex:1;min-width:0;height:3px;margin:0;cursor:pointer;accent-color:#3b9dff;background:transparent}
.zv-vol-slider::-webkit-slider-thumb{background:#3b9dff}
.zv-vol-slider::-moz-range-thumb{background:#3b9dff;border:0}
/* Resolving state — a small spinner over the cover art */
.zv-loading{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.zv-tile.zv-resolving .zv-loading{display:flex}
.zv-tile.zv-resolving .zv-play-overlay{opacity:.22}
.zv-spin{width:22px;height:22px;border-radius:50%;border:0;border-top-color:#3b9dff;animation:zvSpin var(--dur-5) linear infinite;box-shadow:var(--zshade)}
@keyframes zvSpin{to{transform:rotate(360deg)}}
/* Badge confirms itself as the card scrolls into view */
.zv-tile.zv-in .zv-badge{animation:zvBadgeIn var(--dur-4) cubic-bezier(.16,1,.3,1) both;animation-delay:var(--zv-delay,0ms)}
@keyframes zvBadgeIn{0%{opacity:0;transform:translateY(-5px) scale(.94)}60%{opacity:1;transform:translateY(0) scale(1.05)}100%{opacity:1;transform:none}}
/* Narrow cards: keep the badge from colliding with the top-right audio pill */
@media(max-width:820px){.zv-badge{padding:5px 7px}.zv-badge .zv-badge-tx{display:none}}
/* Analyzer: our own verification chip, distinct from TikTok's author badge */
.tt-zilem-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:650;padding:3px 9px;border-radius:var(--pill);color:#7cc9ff;background:rgba(59,157,255,.1);border:1px solid rgba(89,178,255,.35)}
.tt-zilem-badge svg{width:9px;height:9px;flex:none}

/* ── v1.8 — the Verified-in-the-wild gate ────────────────────────────────
   A card is only ever *badged* once its stamp check passes, and there is an
   honest empty state for when nothing verifies. Without that the rail could show
   unverifiable posts under a "Zilem verified" badge.

   ── v1.10 — but a pending card is SHOWN, not hidden ─────────────────────
   These used to be opacity:0 until the check passed. Honest, but the rail then
   displayed nothing at all while the check ran, so a slow or unanswered check was
   indistinguishable from "the row is gone" — and with the empty state as the
   fallback the section read as broken.

   A card whose verdict is unknown is not a lie if it is visibly still loading:
   cover art visible but dimmed, the existing spinner over it, play/expand controls
   removed, and NO badge. The badge is still earned only by a passing check, which
   is the part that must not change. */
/* v1.11 — an unverified card is ABSENT, not a loading card.
   Showing it dimmed with a spinner read as "the video is loading" for cards that
   were never going to be allowed in — which is not a state this row should have.
   The row is a list of verified posts, so an unconfirmed candidate simply is not
   in it yet. It appears the moment it is confirmed, and is removed outright if the
   stamp check says no. The neutral .zv-slot skeletons (vSlots) cover the row while
   it is still empty and being worked through. */
.zv-tile.zv-verifying{display:none}
.zv-none{flex:1 1 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:26px 18px;border-radius:20px;border:0;background:rgba(255,255,255,.02);text-align:center;box-shadow:var(--zshade)}
.zv-none-t{font-size:13px;font-weight:650;color:#fff}
.zv-none-s{font-size:11.5px;color:rgba(255,255,255,.5);max-width:290px;line-height:1.5}

/* ── v1.9 — brand mark on the verification sign ──────────────────────────
   favicon.png is the Zilem mark as a DARK glyph on full transparency (palette
   index 0 is alpha 0; every visible pixel is rgb(27-113)). It is shown as-is —
   no tile behind it — with a soft white glow so the mark reads against the dark
   card. The glow is a drop-shadow, which follows the glyph's alpha silhouette,
   and the wrapper must NOT clip (no overflow:hidden) or it would be cut off. */
.zv-logo-chip,.tt-logo-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;background:transparent;overflow:visible}
.zv-logo-chip{width:15px;height:15px}
.zv-logo-chip img{display:block;width:11px;height:11px;object-fit:contain;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 4px rgba(255,255,255,.55))}
.tt-logo-chip{width:12px;height:12px}
.tt-logo-chip img{display:block;width:9px;height:9px;object-fit:contain;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 4px rgba(255,255,255,.55))}

/* ══ "Verified in the wild" gallery — premium 9:16 tiles ══════════════════
   Appended so it overrides the two earlier .zv-rail/.zv-tile blocks (the
   later of which painted a flat #101116 box). Uses the existing token set:
   --r4 is 30px, #3b9dff is the site accent. */
.zv-rail{
  gap:16px;padding:6px 4px 20px;
  scroll-snap-type:x proximity;         /* proximity, not mandatory: wheel scrolling
                                           would fight a hard snap */
  /* NO scroll-behavior:smooth here, deliberately. The rail's wheel handler adds one
     increment per event, and a smooth assignment is restarted by the next event
     ~16ms later — each one re-targeting a scroll that had barely started, computed
     from a position that had barely moved. So the rail crept forward while the
     proximity snap pulled it back toward the tile it had never left, which reads as
     a wheel that does nothing. The prev/next buttons ask for smoothness per call
     (scrollBy({behavior:'smooth'})), which is where animation belongs. */
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
}
.zv-rail::-webkit-scrollbar{display:none}
.zv-tile,.zv-slot{
  flex:0 0 188px;
  border-radius:var(--r4);              /* 30px — Apple-style squircle */
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 55%,rgba(0,0,0,.18)),var(--glass-bg,#101116);border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 44px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4);
  overflow:hidden;scroll-snap-align:center;
  transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),border-color var(--dur-3) ease;
  will-change:transform;
}
.zv-tile:hover,.zv-slot:hover{
  transform:translateY(-6px) scale(1.03);
  border-color:rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(59,157,255,.25),0 10px 40px rgba(59,157,255,.18);
}
@media(max-width:720px){
  .zv-rail{gap:12px}
  .zv-tile,.zv-slot{flex:0 0 152px;border-radius:28px}
}
@media(prefers-reduced-motion:reduce){
  .zv-tile,.zv-slot{transition:none}
  .zv-tile:hover,.zv-slot:hover{transform:none}
}

/* ── Gallery alignment + size (supersedes the block above) ────────────────
   1. scroll-snap-align was CENTER, so after any scroll a tile rested in the
      middle of the viewport while at rest the row sat at the left edge — the
      "sometimes middle, sometimes side" jumping. Tiles now always snap flush
      to the start edge.
   2. The mask-image faded the FIRST tile too, which read as the row being
      misaligned rather than as a deliberate edge treatment. Removed; the
      right-hand edge is signalled by the row simply being cut off.
   3. Tiles are bigger: 256px wide (9:16 -> 455px tall) at desktop. */
.zv-rail{
  -webkit-mask-image:none;
          mask-image:none;
  scroll-snap-type:x proximity;
  scroll-padding-left:12px;
  padding:6px 12px 22px;
}
.zv-tile,.zv-slot{
  scroll-snap-align:start;
  flex:0 0 256px;
  border-radius:34px;
}
@media(max-width:1180px){ .zv-tile,.zv-slot{flex:0 0 224px} }
@media(max-width:900px){  .zv-tile,.zv-slot{flex:0 0 196px;border-radius:28px} }
@media(max-width:720px){  .zv-rail{gap:12px;padding:6px 10px 18px}
                          .zv-tile,.zv-slot{flex:0 0 178px;border-radius:28px} }

/* ── Play/pause + full-screen buttons ─────────────────────────────────────
   Hover-to-play does not exist on touch, so Android had no way to start or
   stop a preview. 44px = the minimum comfortable touch target. */
.zv-toggle,.zv-expand{
  position:absolute;z-index:4;display:grid;place-items:center;
  width:44px;height:44px;padding:0;cursor:pointer;
  color:#fff;border-radius:999px;
  background:rgba(12,12,16,.55);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  touch-action:manipulation;
  transition:opacity var(--dur-2) ease,transform var(--dur-2) ease,background var(--dur-2) ease;
}
.zv-toggle{left:10px;bottom:10px}
.zv-expand{right:10px;bottom:10px;width:38px;height:38px}
.zv-toggle:hover,.zv-expand:hover{background:rgba(59,157,255,.9);border-color:transparent}
/* icon swap: pause shows while playing */
.zv-toggle .zv-ic-play,.zv-toggle .zv-ic-pause{grid-area:1/1;display:grid;place-items:center}
.zv-toggle .zv-ic-pause{display:none}
.zv-toggle.is-playing .zv-ic-play{display:none}
.zv-toggle.is-playing .zv-ic-pause{display:grid}
/* On touch the buttons are always visible; with a mouse they fade in on hover. */
@media(hover:hover) and (pointer:fine){
  .zv-toggle,.zv-expand{opacity:0}
  .zv-tile:hover .zv-toggle,.zv-tile:hover .zv-expand,
  .zv-tile:focus-within .zv-toggle,.zv-tile:focus-within .zv-expand,
  .zv-toggle.is-paused{opacity:1}
}
@media(hover:none){ .zv-toggle,.zv-expand{opacity:1} }

/* ── Full-screen TikTok-style viewer (rail stays a rail) ────────────────── */
#zvViewer{position:fixed;inset:0;z-index:9999;display:none;flex-direction:column;
  overscroll-behavior:contain;
  background:radial-gradient(120% 80% at 50% 0%,#16162a 0%,#08080c 62%,#050508 100%);}
#zvViewer.open{display:flex}
#zvViewer .zv-v-bar{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));color:#fff}
#zvViewer .zv-v-title{font-weight:600;font-size:14px;letter-spacing:.2px;opacity:.92}
#zvViewer .zv-v-close{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
  color:#fff;cursor:pointer;background:rgba(255,255,255,.08);border:0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);;box-shadow:var(--zshade)}
#zvViewer .zv-v-close:hover{background:rgba(255,255,255,.2)}
#zvViewer .zv-v-scroll{position:relative;flex:1;overflow-y:auto;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;overscroll-behavior:contain;}
#zvViewer .zv-v-scroll::-webkit-scrollbar{display:none}
#zvViewer .zv-v-item{scroll-snap-align:center;scroll-snap-stop:always;min-height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:8px 14px max(18px,env(safe-area-inset-bottom));}
#zvViewer .zv-v-frame{position:relative;width:min(100%,430px);aspect-ratio:9/16;
  max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);
  border-radius:28px;overflow:hidden;background:#000;
  box-shadow:0 30px 90px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);}
#zvViewer .zv-v-video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
#zvViewer .zv-v-loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
#zvViewer .zv-v-loading.hide{display:none}
#zvViewer .zv-v-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.9);font-size:12px;letter-spacing:.3px;pointer-events:none;
  background:rgba(0,0,0,.48);padding:7px 14px;border-radius:999px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
#zvViewer .zv-v-frame.playing .zv-v-hint{display:none}
#zvViewer .zv-v-cap{width:min(100%,430px);display:flex;gap:8px;align-items:baseline;
  color:rgba(255,255,255,.82);font-size:12.5px;line-height:1.45;}
#zvViewer .zv-v-cap b{color:#fff;font-weight:600;flex:0 0 auto}
#zvViewer .zv-v-mute{position:absolute;right:12px;top:12px;width:40px;height:40px;
  border-radius:999px;display:grid;place-items:center;color:#fff;cursor:pointer;
  background:rgba(12,12,16,.55);border:0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);touch-action:manipulation;;box-shadow:var(--zshade)}
#zvViewer .zv-ic-vol,#zvViewer .zv-ic-mute{grid-area:1/1;display:grid;place-items:center}
#zvViewer .zv-ic-mute{display:none}
/* the viewer's own toggle sits bottom-left of the frame, like the tile's */
#zvViewer .zv-toggle{opacity:1}
body.zv-viewer-open{overflow:hidden}

/* ── Why a hovered tile had its top cut ───────────────────────────────────
   .zv-rail sets overflow-x:auto. CSS does not allow one axis to scroll while
   the other is `visible`, so the browser computes overflow-y as auto too — the
   rail clips anything drawn outside its own padding box. The hover state lifts
   the tile and scales it up, which pushes ~10px above the tile's top edge,
   while the rail only had 6px of top padding. Hence the clipped top.
   Fix: enough vertical padding to contain the transform (and the shadow), plus
   a slightly gentler hover. The negative margins move only the rail's box, so
   the tiles stay exactly where they were on the page. */
.zv-rail{
  padding:20px 12px 34px;
  margin-top:-14px;
  margin-bottom:-12px;
}
.zv-tile:hover,.zv-slot:hover{
  transform:translateY(-4px) scale(1.025);
  /* shallower shadow: a soft blur is far less noticeable when a scroll
     container clips its outermost edge than a deep one */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 14px 34px rgba(0,0,0,.55),
             0 0 0 1px rgba(59,157,255,.28),
             0 8px 26px rgba(59,157,255,.20);
}

/* Re-assert reduced motion AFTER the hover rules above: they share the same
   specificity, so the later declaration wins — appending the hover fix after
   the original media query had silently re-enabled the lift for users who ask
   for no animation. */
@media(prefers-reduced-motion:reduce){
  .zv-tile:hover,.zv-slot:hover{transform:none}
}

/* ── Kill the page-level entrance animation ───────────────────────────────
   .page used `animation:pageEnter var(--dur-5) both`, and  pageEnter starts at
   opacity:0 (the earlier variant at the top of this file also added an 8px
   blur). That made the ENTIRE document invisible on load, so every visit
   opened on a black screen — the body background — and the content then faded
   and slid up over three quarters of a second. "See the difference" and the
   "Verified in the wild" tiles were not slow: they were part of a page that
   had not been painted yet.

   An entrance animation on the page ROOT can only ever cause a flash of empty
   screen, because it gates the first paint. Removed. The scoped animations are
   untouched — fadeSlideUp on panels and the tile badge reveal both fire on
   state changes (a class being added), not on page load, so they still work
   and no longer delay anything.
   Equal specificity to the original rule, later in the cascade, so this wins
   without needing !important. */
.page{animation:none}

/* ── "See how to use Zilem" walkthrough ───────────────────────────────────
   A start-here guide block: a lazy YouTube walkthrough plus the four steps.
   The player is a CLICK-TO-LOAD thumbnail: no YouTube iframe, script or
   cookie until someone asks for it, so it costs nothing on page load. */
.gd{margin:0 auto;padding:clamp(48px,7vw,86px) 20px;max-width:1080px;text-align:center}
.gd-eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#9a9aa2;margin-bottom:14px}
.gd-dot{width:7px;height:7px;border-radius:999px;background:#3b9dff;
  box-shadow:0 0 0 4px rgba(59,157,255,.16)}
.gd-title{font-family:var(--font-display);font-size:clamp(32px,4.6vw,54px);
  font-weight:800;letter-spacing:-.035em;line-height:1.03;color:#fff;margin:0 0 12px}
.gd-sub{margin:0 auto 30px;font-size:16px;line-height:1.55;color:#9a9aa2;max-width:560px}

/* the player */
.gd-player{position:relative;margin:0 auto 12px;max-width:820px;aspect-ratio:16/9;
  border-radius:var(--r4);overflow:hidden;background:#0b0b0f;
  border:1px solid var(--border-hi,rgba(255,255,255,.14));
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.gd-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.gd-poster{position:absolute;inset:0;display:block;width:100%;height:100%;
  padding:0;border:0;cursor:pointer;background:#0b0b0f}
.gd-poster img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.82;transition:opacity var(--dur-3) ease,transform var(--dur-4) ease}
.gd-poster:hover img{opacity:.95;transform:scale(1.02)}
.gd-playwrap{position:absolute;inset:0;display:grid;place-items:center}
.gd-play{width:74px;height:74px;border-radius:999px;display:grid;place-items:center;
  color:#fff;background:rgba(12,12,16,.55);border:0;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform var(--dur-2) ease,background var(--dur-2) ease}
.gd-poster:hover .gd-play{transform:scale(1.08);background:rgba(59,157,255,.9);border-color:transparent}
.gd-badge{position:absolute;left:14px;bottom:14px;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.5);padding:6px 12px;border-radius:999px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gd-novid{margin:0 auto 18px;font-size:14px;color:#8a8a92;max-width:560px}
.gd-alt{margin:10px 0 34px;font-size:13.5px;color:#8a8a92}
.gd-alt a{color:#3b9dff;text-decoration:none}
.gd-alt a:hover{text-decoration:underline}

/* the four steps */
.gd-steps{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);
  margin:0;padding:0;list-style:none;text-align:left}
.gd-steps li{position:relative;display:flex;flex-direction:column;gap:9px;
  padding:20px 18px 20px;border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02) 60%,rgba(0,0,0,.16));border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.35)}
.gd-n{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:#0b0b0f;background:#3b9dff;
  box-shadow:0 0 0 4px rgba(59,157,255,.14)}
.gd-steps b{font-size:14.5px;font-weight:650;color:#fff;line-height:1.35}
.gd-steps span{font-size:13px;line-height:1.5;color:#9a9aa2}
@media(max-width:900px){ .gd-steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){
  .gd-steps{grid-template-columns:1fr}
  .gd-play{width:60px;height:60px}
}
@media(prefers-reduced-motion:reduce){
  .gd-poster img,.gd-play{transition:none}
  .gd-poster:hover img{transform:none}
}

/* ── Skeleton slots: the "hahaha" empty-void refresh state ────────────────
   The placeholder tiles were almost invisible: .zv-slot used a 1.5% white
   background with a 6% border, and .zv-slot-media faded a 3% white to nothing.
   Against the near-black page that reads as a void, so refreshing showed one or
   two real tiles floating in empty space while the rest of the row loaded.
   They now use the tile's same glass surface plus a diagonal shimmer sweep, so
   the loading state is obviously a loading state. */
.zv-slot-media{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  border-bottom:1px solid rgba(255,255,255,.07);
}
.zv-slot-media::after{
  content:"";position:absolute;inset:-20% -40%;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);
  animation:zvSlotSweep 1.5s linear infinite;
}
@keyframes zvSlotSweep{ from{transform:translateX(-60%)} to{transform:translateX(60%)} }
.zv-slot-cap{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 11px}
.zv-slot-cap::before,.zv-slot-cap::after{
  content:"";display:block;height:8px;border-radius:5px;background:rgba(255,255,255,.08);
}
.zv-slot-cap::before{width:64%}
.zv-slot-cap::after{width:36%}
@media(prefers-reduced-motion:reduce){ .zv-slot-media::after{animation:none;opacity:.55} }

/* ══ Guide: numbered walkthrough ═══════════════════════════════════════════
   Structure borrowed from a walkthrough we liked: each step is a two-column
   row — prose on the left (number badge, label chip, heading, detail) and a
   panel on the right showing what the screen looks like at that point. The
   panels are built from HTML/CSS rather than screenshots so they stay sharp,
   themeable and cheap to load. Accent stays the site's blue, not the
   reference's green. */
.gs{max-width:1120px;margin:0 auto;padding:0 20px 10px}
.gs-intro{max-width:660px;margin:0 auto 26px;text-align:center;
  font-size:15.5px;line-height:1.6;color:var(--text-2)}
.gs-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 clamp(38px,6vw,64px)}

.gs-step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);
  align-items:start;padding:clamp(26px,4vw,44px) 0;border-top:0;box-shadow:var(--zshade)}
.gs-step:first-of-type{border-top:0}
.gs-left{max-width:470px}
.gs-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.gs-num{flex:0 0 auto;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  font-size:13.5px;font-weight:700;color:var(--green);
  background:rgba(41,151,255,.09);border:0;
  box-shadow:0 0 0 4px rgba(41,151,255,.06)}
.gs-label{font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-4);padding:4px 10px;border-radius:999px;
  background:var(--zs-2);border:0;box-shadow:var(--zshade)}
.gs-h{font-family:var(--font-display);font-size:clamp(23px,2.6vw,31px);font-weight:750;
  letter-spacing:-.025em;line-height:1.14;color:var(--text-1);margin:0 0 12px}
.gs-p{margin:0;font-size:14.5px;line-height:1.62;color:var(--text-2)}
.gs-p + .gs-p{margin-top:10px}
.gs-p a{color:var(--green);text-decoration:none}
.gs-p a:hover{text-decoration:underline}
.gs-facts{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.gs-facts li{position:relative;padding-left:14px;font-size:12.5px;line-height:1.5;color:var(--text-4)}
.gs-facts li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:999px;background:rgba(41,151,255,.65)}
.gs-note{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--text-4)}

/* right-hand panels */
.gs-panel{position:relative;border-radius:28px;padding:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.017) 62%,rgba(0,0,0,.14));border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 46px rgba(0,0,0,.42)}
.gs-panel-title{font-size:14.5px;font-weight:650;color:var(--text-1);margin:0 0 4px}
.gs-panel-sub{font-size:12.5px;line-height:1.5;color:var(--text-4);margin:0 0 16px}
.gs-btnrow{display:flex;flex-direction:column;gap:9px}
.gs-fake{display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:13.5px;font-weight:600;padding:13px 18px;border-radius:var(--zr-ctl);cursor:default;
  color:var(--text-1);background:rgba(255,255,255,.07);border:0;box-shadow:var(--zshade)}
.gs-fake--primary{background:var(--green);border-color:transparent;color:#06121f}
.gs-fake svg{flex:0 0 auto}
.gs-kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:0;font-size:12.5px;box-shadow:var(--zshade)}
.gs-kv:last-child{border-bottom:0}
.gs-kv span{color:var(--text-4)}
.gs-kv b{color:var(--text-1);font-weight:600}
.gs-ok{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.gs-bar{height:7px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin:14px 0 10px}
.gs-bar i{display:block;height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--green))}
.gs-log{font-family:var(--font-mono);font-size:11.5px;
  line-height:1.75;color:var(--text-4);margin:0}
.gs-log b{color:var(--green);font-weight:600}
.gs-drop{border:0;border-radius:var(--zr-inset);
  padding:30px 18px;text-align:center;background:var(--zs-2);box-shadow:var(--zshade)}
.gs-drop svg{opacity:.75}
.gs-drop b{display:block;margin:11px 0 5px;font-size:13.5px;color:var(--text-1);font-weight:600}
.gs-drop span{font-size:12px;line-height:1.5;color:var(--text-4)}

/* step 5: the desktop / mobile two-up */
.gs-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gs-mini{border-radius:var(--zr-inset);padding:16px;background:var(--zs-1);border:0;box-shadow:var(--zshade)}
.gs-mini h4{display:flex;align-items:center;gap:8px;margin:0 0 3px;font-size:13.5px;color:var(--text-1);font-weight:650}
.gs-mini h4 svg{opacity:.8}
.gs-mini em{display:block;font-style:normal;font-size:11.5px;color:var(--text-4);margin-bottom:11px}
.gs-mini ol{margin:0;padding:0;list-style:none;counter-reset:mi;display:flex;flex-direction:column;gap:8px}
.gs-mini li{counter-increment:mi;position:relative;padding-left:22px;font-size:12px;line-height:1.5;color:var(--text-2)}
.gs-mini li::before{content:counter(mi);position:absolute;left:0;top:1px;width:15px;height:15px;
  border-radius:999px;display:grid;place-items:center;font-size:9.5px;font-weight:700;
  color:var(--green);background:rgba(41,151,255,.12);border:0;box-shadow:0 0 0 .5px rgba(41,151,255,.38)}
.gs-mini b{color:var(--text-1);font-weight:600}

/* closing callout */
.gs-callout{display:flex;flex-direction:column;gap:12px;margin:clamp(30px,5vw,52px) auto 0;max-width:1120px;
  border-radius:28px;padding:22px 24px;
  background:linear-gradient(180deg,rgba(41,151,255,.10),rgba(41,151,255,.03));border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.gs-callout h3{margin:0;font-size:15.5px;font-weight:700;color:var(--text-1);display:flex;align-items:center;gap:10px}
.gs-callout p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-2);max-width:760px}
.gs-callout .gs-fake{align-self:flex-start;background:rgba(255,255,255,.08)}
.gs-callout a{color:var(--green)}

@media(max-width:900px){
  .gs-two{grid-template-columns:1fr}
}
@media(max-width:860px){
  .gs-step{grid-template-columns:1fr;gap:22px}
  .gs-left{max-width:none}
}
@media(prefers-reduced-motion:reduce){ .gs-bar i{background:var(--green)} }

.gs-mini a{color:var(--green);text-decoration:none}
.gs-mini a:hover{text-decoration:underline}

/* tier table block + the callout's button row */
.gs-tier{max-width:1120px;margin:0 auto;padding:clamp(26px,4vw,44px) 20px 0}
.gs-tier .gs-kv{padding:12px 0}
.gs-tier .gs-kv span{font-size:13px;font-weight:600;color:var(--text-1);min-width:90px}
.gs-tier .gs-kv b{font-size:13px;color:var(--text-2);font-weight:500}
.gs-tier-cta{margin-top:18px}
.gs-callout-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* One FAQ pattern site-wide. The homepage and dashboard already used native
   <details class="qa-item">; the optimizer and the guide had a JS accordion
   with its own .faq-* styling, which is why the same section looked different
   on different pages. Both now use the details/summary version — no JS needed
   to open it, and it works with a keyboard and with JS disabled. */
.qa-list{max-width:760px;margin:0 auto}
.qa-item{text-align:left}

/* ── "See the difference": two columns on desktop, portrait card ──────────
   Desktop now matches the layout we were shown: copy on the left, a 9:16
   comparison card on the right with Before/After pills and the drag handle.
   The clip <video>s keep preload="none" and only fetch when the card nears the
   viewport; the poster frames paint instantly so the card is never black.
   (They used to be two ~11 MB clips on a free host that the code itself notes
   sits on DNS blocklists. They are now self-hosted at 0.8 MB and 1.8 MB.) */
.cmp{padding:clamp(46px,7vw,86px) 20px}
.cmp-wrap{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-areas:"copy card" "notes card";
  gap:clamp(20px,3vw,34px) clamp(28px,5vw,64px);align-items:center}
.cmp-copy{grid-area:copy}
/* `.cmp-notes` is a grid AREA, not a grid container, so its children were
   plain blocks with no spacing at all — the "Standard compression" and
   "Zilem optimized" cards sat flush against each other with their borders
   touching. It has to be made a flex column before `gap` does anything. */
.cmp-notes{grid-area:notes;align-self:start;
  display:flex;flex-direction:column;gap:14px}
.cmp-card{grid-area:card;display:flex;justify-content:center}
.cmp-kick{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#9a9aa2}
.cmp-dot{width:7px;height:7px;border-radius:999px;background:#3b9dff;
  box-shadow:0 0 0 4px rgba(59,157,255,.16)}
.cmp .cmp-title{margin-bottom:10px}
.cmp .sec-sub{margin:0}
.cmp-notes .cmp-side{text-align:left}
.cmp-notes .cs-txt{margin-bottom:0}
.cmp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* the portrait comparison card */
.cmp .vid{aspect-ratio:9/16;width:min(410px,100%);max-width:410px;margin:0;
  border-radius:28px;border:1px solid rgba(255,255,255,.13);background:#08080b;
  box-shadow:0 34px 84px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.cmp-pill{position:absolute;top:14px;z-index:4;padding:6px 12px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.04em;color:#e8e8ee;
  background:rgba(0,0,0,.55);border:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--zshade)}
.cmp-pill-before{left:14px}
.cmp-pill-after{right:14px;color:#fff;border-color:rgba(59,157,255,.5);
  background:rgba(59,157,255,.2)}
/* A grip people can actually see and grab — the single definition of the knob.
   The arrow itself is an inline SVG in the markup, not a pseudo-element: a
   `content` glyph renders differently in every font and cannot be sized or
   aligned reliably, which is what made the old handle look broken. */
.cmp .vid-h span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.97);
  color:#0b0b0f;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.07);
  transition:transform var(--dur-2) var(--ease-out)}
.cmp .vid-h span svg{display:block;width:17px;height:17px}
.cmp .vid-h:hover span{transform:translate(-50%,-50%) scale(1.07)}
.cmp .vid-h:active span{transform:translate(-50%,-50%) scale(1.02)}
@media(prefers-reduced-motion:reduce){
  .cmp .vid-h span{transition:none}
  .cmp .vid-h:hover span,.cmp .vid-h:active span{transform:translate(-50%,-50%)}
}

@media(max-width:900px){
  .cmp-wrap{grid-template-columns:1fr;grid-template-areas:"copy" "card" "notes";text-align:center}
  .cmp-kick{justify-content:center}
  .cmp .sec-sub{margin:0 auto}
  .cmp-notes .cmp-side{text-align:left}
  .cmp-actions{justify-content:center}
  .cmp .vid{width:min(340px,100%);max-width:340px}
}

/* ── v5.6 — FAQ block on /guide ────────────────────────────────────────────
   The guide declares a FAQPage schema, but none of those questions were visible
   on the page (a structured-data violation — the markup has to describe content
   the reader can see). They are now rendered with the global .qa-item components,
   wrapped to the same measure and rhythm as .gs-callout above so it reads as part
   of the walkthrough. */
.gs-faq{max-width:760px;margin:clamp(30px,5vw,52px) auto 0}
.gs-faq .sec-h{text-align:left;margin-bottom:14px}

/* ── v5.7 — long-form pages in the /guide cluster ─────────────────────────────
   Measure and type scale for the article pages, so they match the site instead
   of falling back to browser defaults inside the dark theme. */
.art{max-width:760px;margin:0 auto;padding:0 24px}
.art h2{font-weight:800;letter-spacing:-.02em;font-size:clamp(21px,2.5vw,29px);line-height:1.16;margin:clamp(34px,4.6vw,52px) 0 12px;color:#fff}
.art h3{font-weight:700;font-size:17px;margin:26px 0 8px;color:#e8e8ee}
.art p{color:#a9a9b2;font-size:15.5px;line-height:1.72;margin:0 0 14px}
.art ul,.art ol{color:#a9a9b2;font-size:15.5px;line-height:1.72;margin:0 0 16px;padding-left:22px}
.art li{margin:0 0 7px}
.art strong{color:#fff}
.art em{color:#c9c9d0}
.art a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.art a:hover{text-decoration-color:#fff}
.art-cta{margin:clamp(28px,4vw,42px) 0 0}

/* ── Compressor tool (/compressor) ──────────────────────────────────────────────
   Apple HIG applied to the web. The references this block was built from:
   · typography.md › Ensuring legibility — Regular/Medium/Semibold, never light
   · typography.md › Conveying hierarchy — one typeface; hierarchy from size,
     weight and colour rather than weight alone
   · color.md › Best practices — one colour means one thing
   · accessibility.md › Vision — 4.5:1 for body text, 3:1 for non-text indicators
   · accessibility.md › Mobility — a 44px hit region, and spacing between controls
     treated as being as important as the size of the controls
   · materials.md — no Liquid Glass in the content layer, so these are plain surfaces
   · icons.md › Best practices — one stroke weight, matched to the weight of the
     text beside it
   · progress-indicators.md › Best practices — determinate, and never a bare bar
   · dark-mode.md › Dark Mode colors — semantic roles, brighter foreground

   ── WHY EVERY VALUE HERE IS LOCAL ─────────────────────────────────────────────
   This page used to read its colours out of the global cascade, and the global
   cascade declares the same token several times over. `--r4` is 30px at line 13
   and 18px at line 626. `--text-3` and `--text-4` are each declared three or four
   times. `.hz-btn-main` is a blue gradient at line 1881 and flat white at line
   1930. Which one an element ends up with is decided by source position, not by
   intent — so the card was drawn against a 30px corner and rendered at 18px, the
   file name was drawn against #48484a (2.2:1 against the card, effectively
   invisible) and rendered at #7b8798, and the primary button came out flat white
   while the progress fill, the result panel and the result link all stayed accent
   blue. Three colour systems and two radius systems inside one card is what "the
   colours are mixing" looks like from the outside.

   So every value this page paints with is declared here, on `.cz-wrap`, under a
   `--cz-` prefix. Nothing outside this block can repaint it, and the page no
   longer changes appearance when an unrelated section of the site is edited.
   ───────────────────────────────────────────────────────────────────────────── */
.cz-wrap{
  /* Surfaces: samples of white over the page's #000, not opaque greys, so they
     keep working if the page background ever stops being black. */
  --cz-card:rgba(255,255,255,.030);--cz-inset:rgba(255,255,255,.016);
  --cz-inset-hi:rgba(255,255,255,.038);--cz-inset-drag:rgba(10,132,255,.055);
  /* STROKE IS A HAIRLINE, AND THERE ARE ONLY THREE. The tool paints exactly
     three 1px lines in total: the card edge, the drop-zone edge, and the ghost
     button. Everything that used to add a fourth and a fifth — a top border on
     the action row, a top border on the log — is gone; the spacing already said
     what those lines were saying. The record separator in the bar below is a
     hairline too, and it is load-bearing: it marks where uploading stops. */
  --cz-line:rgba(255,255,255,.085);--cz-line-hi:rgba(255,255,255,.16);
  /* The highlight. One specular hairline along the top edge of a surface is the
     whole of the treatment: it is what tells you a rounded rectangle is lit from
     above rather than just outlined. Half a pixel, because at 1px it reads as a
     border and the surface looks like it has a lid. */
  --cz-hi:rgba(255,255,255,.055);
  /* Content. Brighter than the global --text-3/--text-4 this page used to
     inherit, and the small mono metadata comes up from 11px to 12px, which is
     above the 10pt desktop floor. */
  --cz-label-1:#f5f5f7;--cz-label-2:#a8a8ae;--cz-label-3:#9298a1;
  /* Accent. It means two things and only two: work in progress, and your file
     is ready. That is why the primary button is deliberately NOT accent — a
     neutral action next to a coloured progress fill is one colour meaning one
     thing; two blues meaning "press me" and "working" is not. */
  --cz-accent:#0a84ff;--cz-accent-hi:#2997ff;
  --cz-ok:#30d158;--cz-err:#ff453a;
  /* Radii, concentric: a nested surface is always tighter than its container.
     The card matches the rest of the site's cards at 24px so this page stops
     being the odd one out. */
  --cz-r:var(--zr-card);--cz-r-in:var(--zr-inset);--cz-r-ctl:var(--zr-ctl);
  --cz-dur:.2s;--cz-ease:cubic-bezier(.22,1,.36,1);
  max-width:620px;margin:0 auto;padding:0 20px}

/* One surface definition, applied to every rounded rectangle in the tool. This
   is the "highlight" treatment, in one place, so the three surfaces cannot drift
   apart again. */
.cz-card,.cz-drop,.cz-result{
  border:1px solid var(--cz-line);
  box-shadow:inset 0 .5px 0 var(--cz-hi)}

.cz-card{background:var(--cz-card);border-radius:var(--cz-r);padding:24px}
.cz-title{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--cz-label-1);margin:0 0 6px}
.cz-sub{font-size:13.5px;font-weight:400;line-height:1.55;color:var(--cz-label-2);margin:0 0 20px}

/* ── The drop zone, built in CSS ───────────────────────────────────────────────
   This used to be a nested SVG plus a <b> inside a sentence — presentational
   markup carrying decoration. The glyph is now two pseudo-elements: a 1px shaft
   and a 6px box with two hairlines on it, rotated 45deg. There is no path data,
   no second element to keep in sync, and it inherits the hairline weight by
   construction because the only thing it can be drawn with is a 1px border. */
.cz-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;min-height:172px;padding:28px 20px;border-radius:var(--cz-r-in);
  background:var(--cz-inset);text-align:center;cursor:pointer;
  transition:background var(--cz-dur) var(--cz-ease),border-color var(--cz-dur) var(--cz-ease)}
.cz-drop:hover{background:var(--cz-inset-hi);border-color:var(--cz-line-hi)}
/* The focus ring is the one place this page refuses to be quiet. It used to be
   rgba(10,132,255,.20), which composites to #09223a over the card — 1.23:1
   against the surface it sits on, against the 3:1 that accessibility.md › Vision
   asks of a non-text indicator. Keyboard users could not see it at all. At full
   opacity the same hue measures 6.64:1, so the ring stays the accent and simply
   stops being transparent. */
.cz-drop:focus-visible{outline:none;border-color:var(--cz-accent-hi);
  box-shadow:inset 0 .5px 0 var(--cz-hi),0 0 0 2px var(--cz-accent-hi)}
.cz-drop.is-drag{background:var(--cz-inset-drag);border-color:var(--cz-accent)}

/* The box hugs the ink. Drawn in a 24x24 box the ink measures 8.49 x 11.24 and
   sits 2px from the top, so two thirds of the element was empty and the flex gap
   was really gap + 9.75px of dead space — the arrow read as floating well above
   the line it labels. icons.md › Best practices: pad a custom icon so a
   geometric centre is an optical centre. 10x12 leaves 0.76px. */
.cz-glyph{position:relative;display:block;width:10px;height:12px;flex:none}
.cz-glyph::before{content:"";position:absolute;left:50%;top:0;width:1px;height:8px;margin-left:-.5px;
  background:var(--cz-label-3);transition:background var(--cz-dur) var(--cz-ease)}
.cz-glyph::after{content:"";position:absolute;left:50%;top:4px;width:6px;height:6px;
  transform:translateX(-50%) rotate(45deg);
  border-right:1px solid var(--cz-label-3);border-bottom:1px solid var(--cz-label-3);
  transition:border-color var(--cz-dur) var(--cz-ease)}
.cz-drop:hover .cz-glyph::before,.cz-drop.is-drag .cz-glyph::before{background:var(--cz-accent-hi)}
.cz-drop:hover .cz-glyph::after,.cz-drop.is-drag .cz-glyph::after{border-color:var(--cz-accent-hi)}

.cz-drop-main{font-size:14.5px;font-weight:500;color:var(--cz-label-1);margin:0}
.cz-drop-hint{font-size:13px;color:var(--cz-label-3);margin:0}
/* "choose a file" is the one phrase in the zone that acts, so it is the one
   phrase that is underlined. It is not accent-coloured: the accent is reserved
   for progress and output, and a third use would make it mean nothing. */
.cz-drop-pick{color:var(--cz-label-1);font-weight:500;
  border-bottom:1px solid var(--cz-line-hi);padding-bottom:1px}
.cz-drop:hover .cz-drop-pick{border-bottom-color:var(--cz-label-2)}
.cz-file{margin:2px 0 0;font-family:var(--font-mono);font-size:12px;line-height:1.5;
  color:var(--cz-label-2);word-break:break-all}
.cz-file:empty{display:none}

/* ── Progress ─────────────────────────────────────────────────────────────────
   Determinate at 4px, always accompanied by a percentage in the status line —
   progress-indicators.md › Best practices. The hairline at 45% is the boundary
   between the upload phase (bar 6→40) and the encode phase (bar 45→95), so the
   bar encodes which of the two waits you are actually in. */
.cz-bar-wrap{margin-top:24px}
.cz-bar{position:relative;height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.cz-bar::after{content:"";position:absolute;left:45%;top:0;bottom:0;width:1px;
  background:rgba(0,0,0,.55)}
.cz-bar-fill{height:100%;width:0;border-radius:999px;background:var(--cz-accent);
  transition:width var(--cz-dur) var(--cz-ease)}
.cz-status{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--cz-label-2);min-height:19px}

/* ── Actions ──────────────────────────────────────────────────────────────────
   The tool's own buttons. It used to borrow `.hz-btn`, whose radius is set to
   999px at line 2064 and whose primary fill is set to white at line 1930 — so
   the page's primary action was a white pill sitting next to accent-blue
   progress. Both controls are now round rectangles at the same radius as the
   zone they sit under, and both carry a press state. */
.cz-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.cz-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;border:0;border-radius:var(--cz-r-ctl);
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;transition:background var(--cz-dur) var(--cz-ease),
  border-color var(--cz-dur) var(--cz-ease),transform var(--cz-dur) var(--cz-ease);box-shadow:var(--zshade)}
.cz-btn:active:not(:disabled){transform:translateY(.5px)}
.cz-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--cz-accent-hi)}
.cz-btn[disabled]{cursor:not-allowed;opacity:.4}
.cz-btn-main{background:var(--cz-label-1);color:#0a0a0c;box-shadow:inset 0 .5px 0 rgba(255,255,255,.5)}
.cz-btn-main:hover:not([disabled]){background:#e8e8ed}
.cz-btn-ghost{background:transparent;color:var(--cz-label-1);border-color:var(--cz-line-hi)}
.cz-btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
.cz-limit{margin-left:auto;font-size:12px;color:var(--cz-label-3)}

/* ── Result ───────────────────────────────────────────────────────────────────
   A plain raised surface, not a blue panel. The accent appears here exactly
   once, on the link, which is the one thing on the surface you can act on. */
.cz-result{margin-top:20px;padding:16px;border-radius:var(--cz-r-in);background:var(--cz-inset-hi)}
.cz-result a{display:inline-block;font-size:14.5px;font-weight:600;color:var(--cz-accent-hi);
  text-decoration:none;border-bottom:0;padding-bottom:1px;box-shadow:var(--zshade)}
.cz-result a:hover{color:#fff;border-bottom-color:#fff}
.cz-result-url{margin-top:10px;font-family:var(--font-mono);font-size:12px;line-height:1.5;
  color:var(--cz-label-3);word-break:break-all}

/* The log. No top border — the 24px above it already separates it, and the line
   was the fifth stroke in a tool that should have three. */
.cz-log{list-style:none;margin:24px 0 0;padding:0;font-family:var(--font-mono);
  font-size:12px;line-height:1.8;color:var(--cz-label-3)}
.cz-log:empty{display:none}
.cz-log li::before{content:"› ";color:var(--cz-label-3)}
/* State is carried by the words the status line already writes — "Done." and
   "Failed — <reason>" — so colour is a reinforcement here, never the carrier.
   accessibility.md › Vision: convey information with more than colour alone. */
.cz-err{color:var(--cz-err)}
.cz-ok{color:var(--cz-ok)}
.cz-hidden{display:none!important}

/* Motion is optional everywhere it appears here. */
@media (prefers-reduced-motion:reduce){
  .cz-drop,.cz-glyph::before,.cz-glyph::after,.cz-bar-fill,.cz-btn{transition:none}
  .cz-btn:active:not(:disabled){transform:none}
}
/* accessibility.md › Vision — when Increase Contrast is on, the hairlines and
   the muted labels are what need to move, not the accent. */
@media (prefers-contrast:more){
  .cz-wrap{--cz-line:rgba(255,255,255,.20);--cz-line-hi:rgba(255,255,255,.34);
    --cz-label-2:#d2d2d8;--cz-label-3:#c2c2ca;--cz-card:rgba(255,255,255,.05);
    --cz-inset:rgba(255,255,255,.035);--cz-inset-hi:rgba(255,255,255,.06)}
}

/* ── Verified rail: media placeholders ──────────────────────────────────────────
   `.zv-media` was `background:#000`, so a card whose frame had not arrived yet was a BLACK
   HOLE sitting next to cards that had one. Thumbnails are deliberately lazy (`loading=lazy`)
   and previews use `preload=none`, so that state is normal on a slow connection — it just
   has to look like "loading", not like "broken".

   A single surface on the box does the whole job: it is the right size immediately, it is
   covered the moment the frame paints, and it needs no JS state to stay in sync. Only the
   still-hidden (.zv-verifying) tiles animate; a card that is already on screen gets a static
   surface, so a rail of 60 tiles is not running 60 animations. */
.zv-media{background:#111217}
.zv-tile.zv-verifying .zv-media{
  background-image:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 70%);
  background-size:220% 100%;
  animation:zvShimmer 2s linear infinite}
@keyframes zvShimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}
@media (prefers-reduced-motion:reduce){.zv-tile.zv-verifying .zv-media{animation:none}}

/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN LAYER — one definition per component
   ══════════════════════════════════════════════════════════════════════════════

   WHY THIS BLOCK EXISTS, AND WHY IT IS AT THE BOTTOM
   Everything above this line accumulated by append: `.hz-btn` alone is declared
   at least seven times, `.drop-zone` six, and `:root` eight. Where they disagree,
   source position decides — which is how the Discord button on the tier gate ended
   up white-on-white (below), how buttons became 999px pills while the cards beside
   them were 18px rectangles, and how the same blue got used for both "press me"
   and "this is working".

   This block does not add another generation. It states the system once — tokens
   for radius, surface and signal — and then restyles each component from those
   tokens, so a change here is the only place a change is needed. It sits last on
   purpose: at equal specificity the last declaration wins, and rewriting the
   3,200 lines above would mean re-deciding every page at once with no way to see
   what moved.

   WHAT IT REMOVES
   · Outlines. A 1px border on every surface reads as a wireframe, and on a dark
     page the border is what you notice instead of the content. Edges are now
     shading: one hairline of light along the top, one of shadow along the bottom,
     plus a soft drop shadow for elevation. No strokes on cards, zones or buttons.
   · Borders on buttons of every kind, including the 1.5px dashed drop zone and the
     decorative corner brackets that were drawn over it with ::before/::after.
   · The glows. Blue halos on hover (`0 12px 36px rgba(10,132,255,.38)` and six
     others) plus coloured focus rings. A glow is not a state; the fill is.
   · The float animation on the upload icon. It moved for no reason.
   · Pills on controls. `--pill` stays for things that are genuinely round — status
     dots, progress rails, count badges — and is gone from every button.
   · Discord blue used as a generic accent. #5865F2 belongs to Discord and to the
     Discord buttons; the rest of the site uses the white primary or the accent.

   WHAT IT KEEPS
   · Focus rings, at 3:1 or better against what they ring. Removing an outline is
     fine; removing the focus indicator is not.
   · prefers-reduced-motion and prefers-contrast.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── radius, concentric: a nested surface is tighter than its container ── */
  --zr-card:24px;
  --zr-inset:16px;
  --zr-ctl:12px;
  --zr-pill:999px;          /* status dots, rails, count badges — never a button */

  /* ── surfaces. Samples of white over the page, so they survive a background
        change. There are three, and they mean depth, not colour. ── */
  --zs-1:rgba(255,255,255,.030);
  --zs-2:rgba(255,255,255,.048);
  --zs-3:rgba(255,255,255,.072);

  /* ── the edge. Half a pixel of light on top, half of shadow below: this is
        what replaces the border, and it is why a surface still reads as raised
        without being outlined. ── */
  --zshade:inset 0 .5px 0 rgba(255,255,255,.055), inset 0 -.5px 0 rgba(0,0,0,.55);
  /* ── elevation, for things that float above the page rather than sit in it ── */
  --zelev:0 1px 2px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.42);

  /* ── ink ── */
  --z-ink:#f5f5f7;
  --z-ink-2:#a8a8ae;
  --z-ink-3:#8e8e96;

  /* ── signal. One colour, one meaning. ── */
  --z-acc:#0a84ff;          /* measured, in progress, yours to act on */
  --z-acc-hi:#2997ff;
  --z-discord:#5865f2;      /* the brand's blurple, for the brand's buttons only */
  --z-discord-hi:#4752c4;   /* Discord's own hover value */
  --z-ok:#30d158;
  --z-err:#ff453a;
}

/* ── SURFACES: no outlines, shading instead ───────────────────────────────────
   One list, so a card is a card is a card. `border:0` is stated rather than
   implied because most of these carried one from an earlier block. */
.hz-card,.void-v6-card,.art,.proc-terminal,.tier-card,.up-drop,.drop-zone,
.up-lib,.up-picked,.up-textarea,.sv-item,.dash-history-item,.tb-item{
  border:0;
  box-shadow:var(--zshade)}

.hz-card,.void-v6-card,.tier-card{border-radius:var(--zr-card);background:var(--zs-1)}
.up-drop,.drop-zone,.proc-terminal,.up-lib,.up-picked,.up-textarea,.sv-item,.tb-item{
  border-radius:var(--zr-inset);background:var(--zs-1)}
.up-textarea:focus,.up-textarea:focus-visible{border:0;background:var(--zs-2);
  box-shadow:var(--zshade),0 0 0 2px var(--z-acc-hi)}

/* ── BUTTONS ─────────────────────────────────────────────────────────────────
   Three kinds and no more. Round rectangles at one radius, no border of any
   kind, a press state each, and no glow on any of them: the fill is the state.
   Listed by class rather than relying on a variable so the old declarations
   cannot win on specificity alone. */
.hz-btn,.btn-primary,.btn-run,.btn-dl,.btn-verify,.btn-tt-analyze,.btn-ghost,
.btn-secondary,.up-btn,#nav-key-btn,.zm-menu-btn,.zm-sign,.vp-btn,.zv-cta,.gd-cta{
  border:0;
  border-radius:var(--zr-ctl);
  transition:background var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             transform var(--dur-2) var(--ease-out)}
.hz-btn:active,.btn-primary:active,.btn-run:active,.btn-dl:active,
.btn-verify:active,.btn-tt-analyze:active,.btn-ghost:active,.btn-secondary:active,
.up-btn:active,#nav-key-btn:active,.zm-menu-btn:active,.zm-sign:active,
.vp-btn:active,.zv-cta:active{transform:translateY(.5px)}

/* Primary — white on the dark page. The one prominent button per view. */
.hz-btn-main,.btn-primary,.btn-run,.btn-dl,.btn-verify,.btn-tt-analyze,.zm-sign{
  background:var(--z-ink);
  color:#0a0a0c;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.55),0 1px 2px rgba(0,0,0,.5)}
.hz-btn-main:hover,.btn-primary:hover,.btn-run:hover:not(:disabled),
.btn-dl:hover,.btn-verify:hover:not(:disabled),.btn-tt-analyze:hover:not(:disabled),
.zm-sign:hover{background:#e8e8ed;box-shadow:inset 0 .5px 0 rgba(255,255,255,.55),0 2px 6px rgba(0,0,0,.55)}

/* Secondary — quieter, for the second action in a row. */
.hz-btn-ghost,.btn-ghost,.btn-secondary{
  background:var(--zs-2);color:var(--z-ink);box-shadow:var(--zshade)}
.hz-btn-ghost:hover,.btn-ghost:hover,.btn-secondary:hover{background:var(--zs-3)}

/* Discord. The brand colour, flat, and the brand's own hover value — not a
   blue glow that happens to sit on a Discord button. */
.hz-btn-discord,.btn-discord,.btn-discord-modal,#nav-discord-btn,#hero-login-btn{
  background:var(--z-discord);
  color:#fff;
  border:0;
  border-radius:var(--zr-ctl);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.45)}
.hz-btn-discord:hover,.btn-discord:hover,.btn-discord-modal:hover,
#nav-discord-btn:hover,#hero-login-btn:hover{
  background:var(--z-discord-hi);
  border:0;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.5);
  transform:translateY(.5px)}

/* Chips, counters and badges: smaller radius than a button, same logic. */
.engine-pill,.hz-pill,.up-chip,.ft-chip,.footer-chip,.af-chip,.ld2-pulse,.zv-badge,
.vid-cap,.cmp-pill{border:0;box-shadow:var(--zshade)}
.engine-pill,.hz-pill,.up-chip,.ft-chip,.footer-chip,.af-chip,.ld2-pulse{
  border-radius:var(--zr-pill);background:var(--zs-2);color:var(--z-ink-2)}
.zv-badge,.vid-cap,.cmp-pill{border-radius:var(--zr-ctl);background:rgba(0,0,0,.62);color:var(--z-ink)}

/* ── THE DROP ZONES ──────────────────────────────────────────────────────────
   `.drop-zone` is the legacy zone still on several pages and `.up-drop` is the
   upload page's. Both carried decoration that said "interface" rather than
   "put a file here": a 1.5px dashed outline, and — drawn over that — a pair of
   1.5px corner brackets via ::before/::after, which is the detail that made the
   zone look like a targeting reticle. All of it goes. A tinted surface, one
   hairline of light along the top, and the word for what it does.

   The zone is also no longer allowed to move. It had `transform:translateY(-2px)`
   on hover AND a 5s float animation on the icon, so the target drifted while you
   aimed at it. */
.drop-zone::before,.drop-zone::after{content:none}
.drop-zone,.up-drop{
  border:0;
  border-radius:var(--zr-inset);
  background:var(--zs-1);
  box-shadow:var(--zshade);
  transition:background var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out)}
.drop-zone:hover,.up-drop:hover{background:var(--zs-2);transform:none}
.drop-zone.drag-over,.up-drop.drag-over,.up-drop.is-drag,.up-drop.is-over{
  background:var(--zs-3);
  border:0;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.10),inset 0 0 0 2px var(--z-acc-hi)}
.drop-zone.has-file,.up-drop.has-file{
  border:0;
  background:var(--zs-2);
  box-shadow:var(--zshade)}
.drop-zone:focus-visible,.up-drop:focus-visible{
  outline:none;border:0;
  box-shadow:var(--zshade),0 0 0 2px var(--z-acc-hi)}

/* The icon tile is gone with it — a 54px bordered box with a float animation,
   holding a 24px glyph. The glyph is now drawn in CSS at the size it is used. */
.drop-icon,.up-ico{
  width:auto;height:auto;margin:0 0 14px;
  background:none;border:0;box-shadow:none;
  animation:none;
  display:inline-flex;align-items:center;justify-content:center;color:var(--z-ink-3)}
#dropTitle,.up-drop-title{font-weight:500;color:var(--z-ink)}
#dropSub,.up-drop-sub{color:var(--z-ink-3)}
.up-drop-title{display:block;font-size:14px;line-height:1.4;margin-bottom:5px}
.up-drop-sub{display:block;font-size:12px;line-height:1.5}

/* ── THE GLYPH ───────────────────────────────────────────────────────────────
   A 1px shaft and a 6px box with two hairlines on it, rotated 45°. No path data,
   no second element to keep in sync, and it cannot be drawn at anything other
   than a hairline weight because the only thing available to draw it with is a
   1px border. `.zg--up` flips it rather than re-deriving the geometry, so the
   two directions cannot drift apart.

   icons.md › Best practices: one consistent stroke thickness, matched to the
   weight of the text beside it, and optically centred rather than geometrically
   centred — the box is 10x12 because that is what the ink measures. */
.zg{position:relative;display:block;width:10px;height:12px;flex:none;color:inherit}
.zg::before{content:"";position:absolute;left:50%;top:0;width:1px;height:8px;margin-left:-.5px;background:currentColor}
.zg::after{content:"";position:absolute;left:50%;top:4px;width:6px;height:6px;
  transform:translateX(-50%) rotate(45deg);
  border-right:1px solid currentColor;border-bottom:1px solid currentColor}
.zg--up{transform:scaleY(-1)}
.zg--lg{width:14px;height:17px}
.zg--lg::before{top:0;height:11px}
.zg--lg::after{top:6px;width:8px;height:8px}

/* ── FOCUS ───────────────────────────────────────────────────────────────────
   Every coloured focus ring on the page was translucent: three of them at 15–50%
   alpha, which composites to between 1.2:1 and 2.4:1 against the surface they
   sit on. A non-text indicator needs 3:1. They are now opaque. */
:where(a,button,summary,label,div[onclick],[tabindex]):focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--z-acc-hi)}

/* ── PROSE LINKS vs BUTTON LINKS ─────────────────────────────────────────────
   THE BUG THIS FIXES. The tier gate renders its action as
   `<a class="hz-btn hz-btn-main">Sign in with Discord</a>` inside `.art`, and the
   page had `.art a{color:#fff}` — specificity (0,1,1) — against
   `.hz-btn-main{color:#000}` — specificity (0,1,0). The prose rule won, so the
   label was painted #fff on a #fff button: a white pill with invisible text,
   which is what the screenshot shows.

   `.art a` was written to style links inside running text and had no business
   reaching a component. Scoping it to the elements prose actually lives in fixes
   it at the source, and the reset below is the belt as well as the braces. */
.art a{color:inherit;text-decoration:none;text-decoration-color:inherit}
.art p a,.art li a,.art td a,.art blockquote a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.35)}
.art p a:hover,.art li a:hover,.art td a:hover,.art blockquote a:hover{text-decoration-color:#fff}
/* a component's colour is its own, whatever it is nested in */
.art .hz-btn-main,.art .btn-primary,.art .zm-sign{color:#0a0a0c}
.art .hz-btn-ghost,.art .btn-ghost,.art .btn-secondary{color:var(--z-ink)}
.art .hz-btn-discord,.art .btn-discord{color:#fff}
.art .hz-btn,.art .btn-primary,.art .btn-ghost,.art .btn-secondary,.art .hz-btn-discord{
  text-decoration:none;box-shadow:var(--zshade)}

/* ── ICONS ───────────────────────────────────────────────────────────────────
   The inline icons arrived at 1.5, 1.7, 1.8, 2.0, 2.2, 2.4 and 2.5 across 11px
   to 26px renders, so two icons at the same optical size carried different
   weights. `stroke-width` is normalised to 1.5 on the 24 grid; the small
   variants at 11–14px get 2, which is the same weight on screen once the
   viewBox is scaled down. Filled brand marks are left alone. */
[class*="-ic"] svg,[class*="-icon"] svg,.up-lib-ic svg,.nd-label + svg{
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ── MOTION ──────────────────────────────────────────────────────────────────
   The shimmer on a loading rail is information; a floating icon is not, and it
   is already off above. Everything else here is a state change and may be
   dropped. */
@media (prefers-reduced-motion:reduce){
  .hz-btn,.btn-primary,.btn-run,.btn-dl,.btn-verify,.btn-tt-analyze,.btn-ghost,
  .btn-secondary,.up-btn,.zm-menu-btn,.drop-zone,.up-drop,.hz-btn-discord,
  #nav-discord-btn,#hero-login-btn{transition:none}
  .hz-btn:active,.btn-primary:active,.btn-ghost:active,.up-btn:active,
  .hz-btn-discord:hover,#nav-discord-btn:hover{transform:none}
}

/* ── INCREASE CONTRAST ───────────────────────────────────────────────────────
   What moves is the ink and the surface separation, not the accent. */
@media (prefers-contrast:more){
  :root{
    --zs-1:rgba(255,255,255,.06);--zs-2:rgba(255,255,255,.09);--zs-3:rgba(255,255,255,.13);
    --z-ink-2:#d2d2d8;--z-ink-3:#c2c2ca;
    --zshade:inset 0 .5px 0 rgba(255,255,255,.16), inset 0 -.5px 0 rgba(0,0,0,.7)}
}

/* ── THE TIER GATE ───────────────────────────────────────────────────────────
   `lockedPage()` in api/serve.ts used to render into `.hero hero-slim` + `.art` —
   the article layout — which is why a one-sentence page left-aligned itself
   across a screen with the button stranded under it. A gate is a single decision
   with a single action, so it is a card: one centred column, the reason, one
   button.

   It also had no lock or any other mark, so the page's only visual was the
   button that could not be read. The icon is the point of the page in one
   glyph. */
.gate{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:96px 24px}
.gate-inner{
  width:100%;max-width:520px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center}
.gate-lock{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin-bottom:22px;
  border-radius:var(--zr-inset);
  background:var(--zs-2);
  box-shadow:var(--zshade);
  color:var(--z-ink-3)}
.gate-title{
  font-size:clamp(26px,4.6vw,38px);line-height:1.1;letter-spacing:-.026em;
  font-weight:650;color:var(--z-ink);margin:0 0 12px}
.gate-state{font-size:15px;line-height:1.5;color:var(--z-ink-2);margin:0 0 6px}
.gate-state strong{color:var(--z-ink)}
.gate-hint{font-size:13.5px;line-height:1.6;color:var(--z-ink-3);margin:0 0 26px;
  max-width:44ch}
.gate-cta{margin:0 0 30px}
.gate-cta .hz-btn{height:48px;padding:0 22px;font-size:15px;gap:10px}
.gate-alt{font-size:13px;line-height:1.7;color:var(--z-ink-3);margin:0;max-width:46ch}
.gate-alt a{color:var(--z-ink-2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.28)}
.gate-alt a:hover{color:var(--z-ink);text-decoration-color:var(--z-ink)}
@media (max-width:520px){
  .gate{padding:72px 20px}
  .gate-hint,.gate-alt{max-width:none}
}

/* ══════════════════════════════════════════════════════════════════════════════
   THE VERIFIED RAIL — card size as arithmetic, and no crop
   ══════════════════════════════════════════════════════════════════════════════

   WHY THIS IS HERE, LAST
   `.zv-tile` was declared six times above this line — 150px, 198px, 240px, and
   164px and 206px inside two media queries. The media queries were written to
   make the card smaller on small screens and the later unconditional 240px
   overrode both of them, because at equal specificity the last declaration wins
   and no one had noticed that 240px came after. So the card was 240px on a 360px
   phone: one and a half cards across a row that is supposed to read as a strip.

   THE MATHS
   A card's width is not a taste decision, it is the answer to one question: how
   many should be visible? With that as the input:

       one card = (rail width - (visible - 1) x gap) / visible

   written once in terms of two variables, so changing how many cards show is
   changing one number rather than adding a breakpoint that a later rule will
   silently beat. The fractions are deliberate — 6.4 cards visible means a card
   and a bit peeking past the right edge, which is the only thing on the page
   that says the row scrolls.

   AND NO CROP
   `.zv-media` is a hard-coded 9:16 and the media inside it was `object-fit:cover`.
   Measured across seven cards on the live rail that box held three 9:16
   verticals, one 1080x1080 SQUARE with its top and bottom cut off, and two
   3840x2160 LANDSCAPES — one of them a verified card — showing only the middle
   third of every frame. Nothing was the wrong size; the box was the wrong shape
   for everything that was not vertical.

   The server now reads each video's display size out of the `tkhd` box in the
   MP4 header and the card is built to it, so nothing is resized or cropped. 9:16
   stays here as the default for the moment before the first resolve lands, and
   as the fallback if a header cannot be read. `contain` means that even in that
   window nothing is cut off — a mismatch letterboxes rather than crops.
   ══════════════════════════════════════════════════════════════════════════════ */

.zv-rail{--zv-n:7.2;--zv-gap:16px;gap:var(--zv-gap)}
.zv-tile{flex:0 0 calc((100% - (var(--zv-n) - 1) * var(--zv-gap)) / var(--zv-n))}
@media(max-width:1400px){.zv-rail{--zv-n:6.2}}
@media(max-width:1150px){.zv-rail{--zv-n:5.2}}
@media(max-width:900px){ .zv-rail{--zv-n:4.2;--zv-gap:14px}}
@media(max-width:700px){ .zv-rail{--zv-n:3.2;--zv-gap:12px}}
@media(max-width:480px){ .zv-rail{--zv-n:2.2;--zv-gap:10px}}

/* The card is a surface, like every other one on the site: no outline, shading
   for the edge. It carried a 1px border and its own radius in three places. */
.zv-tile{border:0;border-radius:var(--zr-card);background:#0f1014;
  box-shadow:var(--zshade),0 12px 30px rgba(0,0,0,.4)}
.zv-media{border-radius:0}          /* the tile parent rounds it */

/* Nothing inside a card is cropped, at any ratio. */
.zv-vid,.zv-thumb,.zv-media video,.zv-media img{object-fit:contain}

/* ── the engagement row ──────────────────────────────────────────────────────
   Views, likes and comments are already in the markup and already filled by
   paintMeta; they were set at 10.5px in 66% white, which is smaller and dimmer
   than the same numbers on TikTok and than everything else on this card.
   typography.md › Ensuring legibility — 11px is the floor for anything carrying
   information, and 12px is where a number stops being a texture. */
.zv-stats{font-size:12px;gap:11px;margin-top:6px;color:rgba(255,255,255,.72)}
.zv-stats svg{width:12px;height:12px;opacity:.78}
.zv-stats b{font-weight:600;color:rgba(255,255,255,.94);font-variant-numeric:tabular-nums}
.zv-cap{padding:11px 12px 13px}
.zv-user{font-size:12px;font-weight:600;color:#fff}
.zv-caption{font-size:11px;color:rgba(255,255,255,.5)}

/* The first and last cards were given 20px on their outer corners by a rule
   higher up, while every other corner of the same card is 24px. Two radius
   values on one card is the exact inconsistency this pass exists to remove. */
.zv-rail>:first-child,.zv-rail>:last-child{border-radius:var(--zr-card)}

/* ══════════════════════════════════════════════════════════════════════════════
   ROUNDER CORNERS, AND SURFACES THAT SEPARATE WITHOUT OUTLINES
   ══════════════════════════════════════════════════════════════════════════════

   TWO CORRECTIONS TO THE DESIGN LAYER ABOVE.

   1. THE CORNERS WERE TOO TIGHT.
   The scale was 24 / 16 / 12. Measured against the cards they sit on, that reads
   as a boxed rectangle rather than a card — the corner is barely distinguishable
   from a right angle at the sizes these elements actually render. The scale is now
   28 / 20 / 14, and every hard-coded radius in the project has been mapped onto
   it: 102 declarations across 16 stylesheets, which were 8, 9, 10, 11, 12, 13, 14,
   15, 16, 18, 20, 22, 24, 26, 28, 30, 32 and 34 before. Four values now, and the
   whole project got rounder rather than one page at a time:

       8-13px  -> 14px      (controls, chips, inputs)
       14-19px -> 20px      (insets, nested surfaces)
       20-30px -> 28px      (cards, panels)
       31-44px -> 34px      (sheets, large containers)

   `999px` and `50%` are untouched: a status dot and a count badge are meant to be
   round, and a pill is a shape rather than a radius.

   2. TAKING THE OUTLINES OFF WENT TOO FAR.
   The layer above replaced every border with `inset 0 .5px 0 rgba(255,255,255,.055)`
   — half a pixel at 5.5% white. On a near-black page that is invisible in practice,
   so with the borders gone the surfaces stopped separating at all: the Upload page
   became a two-column smudge with no edges, which is what "completely messed up"
   was looking at. Structure had been carried by the outlines and nothing replaced
   them.

   Shading now does the job properly. A surface is lifted off the page rather than
   drawn on it:
     · the fill steps up — 5% / 7.5% / 11% white instead of 3% / 4.8% / 7.2%
     · the top highlight is 11%, which actually catches the eye at 1x
     · every card carries a real drop shadow, so it sits above the page rather
       than being a slightly different shade of it
   Still no borders. The edge is light and shadow, which is the thing a border was
   only ever imitating.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  --zr-card:28px;
  --zr-inset:20px;
  --zr-ctl:14px;

  --zs-1:rgba(255,255,255,.050);
  --zs-2:rgba(255,255,255,.075);
  --zs-3:rgba(255,255,255,.110);

  --zshade:inset 0 .5px 0 rgba(255,255,255,.11), inset 0 -.5px 0 rgba(0,0,0,.60);
  --zelev:0 1px 2px rgba(0,0,0,.55), 0 20px 48px rgba(0,0,0,.50);
}

/* Cards and panels: one look, everywhere, and they sit above the page. */
.hz-card,.void-v6-card,.tier-card,.gs-panel,.proc-terminal,.art,.up-lock,.up-lib,
.up-picked,.up-step,.up-note,.up-empty,.up-post,.up-gate,.up-acct,.up-check,
.up-dd-panel,.sv-item,.tb-item,.zv-tile,.gate-lock{
  border-radius:var(--zr-card);
  background:var(--zs-1);
  box-shadow:var(--zshade),var(--zelev)}

/* Insets and controls: a step tighter than the surface holding them, which is the
   only thing that makes nesting read as nesting. */
.up-drop,.drop-zone,.up-textarea,.up-input,.up-dd-opt,.up-post-ic,.up-post-del,
.up-lock-ic,.up-eye,.up-lib-ic{
  border-radius:var(--zr-inset)}
.cz-card{border-radius:var(--zr-card)}
.cz-drop,.cz-result{border-radius:var(--zr-inset)}

/* The rail's cards keep the shaded-edge treatment and lose their border. */
.zv-tile{border:0;border-radius:var(--zr-card)}
.zv-rail>:first-child,.zv-rail>:last-child{border-radius:var(--zr-card)}

/* ══════════════════════════════════════════════════════════════════════════════
   THE RAIL, AGAIN — correcting my own last pass
   ══════════════════════════════════════════════════════════════════════════════

   Three things were wrong, all of them mine, and all of them measurable.

   1. THE CARDS WERE TINY.
   I set `--zv-n:7.2` — seven and a fifth cards across. On a 1440px screen that is
   a **167px card**, down from the 240px it had been. Seven cards across a row of
   thumbnails reads as a filmstrip, not a feed. It is 4.6 now and the tile carries a
   floor and a ceiling:

       1440px -> 270px      1150px -> 235px      700px -> 215px

   `clamp()` on the result rather than only on the count, so no future change to
   `--zv-n` can make the card unusably small again.

   2. THE CAPTION AND THE NUMBERS WERE BEING PUSHED OUT.
   At 167px wide the caption wrapped to two or three lines and pushed the view /
   like / comment row out of the card. It is the caption's job to give way, not the
   numbers': one line, ellipsis, and the counts never wrap or shrink.

   3. THE FULL-VIEW FRAME WAS LOCKED TO 9:16 AND CROPPED.
   `#zvViewer .zv-v-frame` was `width:min(100%,430px); aspect-ratio:9/16` with the
   video `object-fit:cover`. For a landscape that crops the sides off in the one
   place a viewer has gone specifically to see the whole frame. The frame now takes
   the opened video's shape (`--zv-fr`, set from the card that launched it), is
   bounded by the viewport rather than by a fixed 430px, and the video is `contain`,
   so nothing is cropped and a landscape uses the full width of the screen.
   ══════════════════════════════════════════════════════════════════════════════ */

.zv-rail{--zv-n:4.6;--zv-gap:16px}
.zv-tile{flex:0 0 clamp(196px, calc((100% - (var(--zv-n) - 1) * var(--zv-gap)) / var(--zv-n)), 300px)}
@media(max-width:1400px){.zv-rail{--zv-n:4.2}}
@media(max-width:1150px){.zv-rail{--zv-n:3.6}}
@media(max-width:900px){ .zv-rail{--zv-n:2.8;--zv-gap:14px}}
@media(max-width:700px){ .zv-rail{--zv-n:2.2;--zv-gap:12px}}
@media(max-width:480px){ .zv-rail{--zv-n:1.8;--zv-gap:10px}}

/* The media box is the video's shape; the card width no longer dictates it. */
.zv-media{aspect-ratio:var(--zv-ar,9/16);background:#000}

/* Caption gives way; the numbers do not. */
.zv-cap{padding:12px 13px 14px;min-width:0}
.zv-user{display:block;font-size:12px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zv-caption{display:block;font-size:11.5px;color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zv-stats{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin-top:7px;
  font-size:11.5px;color:rgba(255,255,255,.72);overflow:hidden}
.zv-stats>*,.zv-stats span,.zv-stats b{white-space:nowrap;flex:none}
.zv-stats svg{width:11px;height:11px;opacity:.8}

/* ── full view: the whole frame, bounded by the screen ─────────────────────── */
/* `width:auto` was not enough on its own: with no explicit dimension the frame
   falls back to the video element's intrinsic 300x150, so a full-view vertical was
   300px wide on a 1440px screen — the frame has to be told which axis is the
   constraint. Whichever runs out first decides, and the ratio gives the other:

     portrait   height = min(screen height - chrome, (screen width - gutter) / ar)
     landscape  width  = min(1180px, screen width - gutter, (screen height - chrome) x ar)

   Both are pure CSS in `dvh`/`vw`, so a resize or a rotation re-solves them with no
   listener and no JS sizing. `contain` on the video means that even if the ratio is
   a fraction out, a bar appears rather than a crop. */
#zvViewer .zv-v-frame{
  aspect-ratio:var(--zv-fr,9/16);
  border-radius:var(--zr-inset);
  overflow:hidden;
  background:#000;
  width:auto;
  height:auto}
#zvViewer .zv-v-item.is-portrait .zv-v-frame{
  height:min(calc(100dvh - 168px), calc((100vw - 64px) / var(--zv-fr)))}
#zvViewer .zv-v-item.is-landscape .zv-v-frame{
  width:min(1180px, calc(100vw - 64px), calc((100dvh - 168px) * var(--zv-fr)))}
@media(max-width:560px){
  #zvViewer .zv-v-item.is-portrait .zv-v-frame{
    height:min(calc(100dvh - 148px), calc((100vw - 24px) / var(--zv-fr)))}
  #zvViewer .zv-v-item.is-landscape .zv-v-frame{
    width:min(calc(100vw - 24px), calc((100dvh - 148px) * var(--zv-fr)))}
}
#zvViewer .zv-v-video{width:100%;height:100%;object-fit:contain;background:#000}
#zvViewer .zv-v-cap{width:auto;max-width:min(100%,1180px)}
/* The play affordance sits on the frame, so it has to follow the frame's shape
   rather than a fixed 430x764 box. */
#zvViewer .zv-toggle,#zvViewer .zv-v-mute,#zvViewer .zv-v-hint,#zvViewer .zv-v-loading{
  position:absolute}

/* ══════════════════════════════════════════════════════════════════════════════
   THE RAIL CARD — rebuilt to the reference, and a rounder scale site-wide
   ══════════════════════════════════════════════════════════════════════════════

   WHY THE CARDS WERE BLACK
   Not a CSS fault at all. Every stored thumbnail returned **403** — TikTok signs
   its image URLs and the six on the rail had expired on the 18th, 19th and 20th.
   So each card was an empty box with a play button on it, and the caption strip
   underneath had no picture above it. The server now re-resolves a fresh cover on
   every pass (the 45-minute rotation keeps them alive, since the tokens last days)
   and emits it in place of the stored one.

   THE CARD, TO THE REFERENCE
   One uniform 9:16 tile per card — the row reads as a row rather than as five
   different shapes. The video sits *inside* that tile uncropped, and the same
   picture, blurred, fills whatever the video does not cover. That is what makes the
   card full-bleed like the reference without cropping a single frame: a vertical
   fills it exactly, and a landscape gets a soft fill behind it instead of black
   bars on one side and a chopped-off frame on the other.

   The caption is now *on* the picture, over a scrim, instead of in a strip below
   it — avatar and name, then views, likes and comments on the line under, which is
   the arrangement in the reference. Nothing is added to the markup for this: the
   caption was already a flex row of avatar + stacked text, so it only needed to be
   positioned absolutely over the media.

   ROUNDER
   Buttons go from 14 to 20, insets from 20 to 24, cards from 28 to 32. The nav's
   pill-shaped controls keep `999px` — they were already the roundest thing on the
   site and a pill cannot get rounder.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  --zr-card:32px;
  --zr-inset:24px;
  --zr-ctl:20px;
}

/* ── the tile ─────────────────────────────────────────────────────────────── */
.zv-tile{
  position:relative;
  border:0;
  border-radius:var(--zr-inset);
  overflow:hidden;
  background:#0b0b0d;
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45);
  aspect-ratio:auto}
.zv-rail>:first-child,.zv-rail>:last-child{border-radius:var(--zr-inset)}

.zv-media{
  position:relative;
  aspect-ratio:9/16;
  height:auto;
  background:#0b0b0d;
  overflow:hidden}

/* The blurred fill. Same picture, pushed out past the edges so no blur edge shows. */
.zv-media::before{
  content:"";
  position:absolute;
  inset:-8%;
  background-image:var(--zv-thumb,none);
  background-size:cover;
  background-position:center;
  filter:blur(26px) saturate(1.25) brightness(.5);
  z-index:0}

/* Whatever the video does not cover, the fill shows through — so the frame is never
   cropped and the card is never black. */
.zv-vid,.zv-thumb,.zv-media video,.zv-media img{
  position:relative;
  z-index:1;
  object-fit:contain;
  background:transparent}

/* The scrim that makes the caption legible over an arbitrary picture. */
.zv-media::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:62%;
  background:linear-gradient(to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.55) 42%,
    rgba(0,0,0,0) 100%);
  z-index:2;
  pointer-events:none}

/* ── the caption, on the picture ──────────────────────────────────────────── */
.zv-cap{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:3;
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:12px;
  min-width:0}
.zv-ava{
  width:27px;height:27px;flex:none;
  border-radius:999px;
  object-fit:cover;
  border:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
  background:rgba(255,255,255,.12)}
.zv-ava-fb{display:none}
.zv-captx{min-width:0;flex:1}
.zv-user{
  display:block;
  font-size:12.5px;font-weight:650;letter-spacing:-.005em;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zv-caption{
  display:block;
  font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:1px}
.zv-stats{
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:11px;
  margin-top:5px;
  font-size:11.5px;
  color:rgba(255,255,255,.9);
  overflow:hidden}
.zv-stats>*{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.zv-stats svg{width:11px;height:11px;opacity:.85}
.zv-stats b{font-weight:650;color:#fff;font-variant-numeric:tabular-nums}
.zv-open-link{
  display:block;
  margin-top:5px;
  font-size:10.5px;
  font-weight:500;
  color:rgba(255,255,255,.55);
  text-decoration:none}
.zv-open-link:hover{color:#fff}

/* The badge already reads; it just has to sit above the scrim. */
.zv-badge,.zv-verifying .zv-badge{position:relative;z-index:3}

/* ── rounder controls, everywhere ─────────────────────────────────────────── */
.hz-btn,.btn-primary,.btn-run,.btn-dl,.btn-verify,.btn-tt-analyze,.btn-ghost,
.btn-secondary,.up-btn,.zm-menu-btn,.zm-sign,.vp-btn,.zv-cta,.gd-cta,.cz-btn,
.up-dd-btn,.up-input,.up-textarea,.up-tagfind{
  border-radius:var(--zr-ctl)}
.cz-btn{border-radius:var(--zr-ctl)}
.gate-cta .hz-btn{border-radius:var(--zr-ctl)}

/* Pills stay pills — a pill is already as round as a shape gets. */
#nav-key-btn,#nav-usage-pill,.hz-pill,.up-chip,.up-tag,.ft-chip,.footer-chip,
.af-chip,.ld2-pulse,.zv-badge,.vid-cap,.cmp-pill,.gate-lock,.zm-menu-btn{
  border-radius:999px}
.zm-menu-btn{border-radius:var(--zr-ctl)}

/* ── the last borders, on the pages the first pass never reached ──────────────
   The audit found 34 `border: 1px` declarations still drawing outlines on
   components: 16 on admin, 14 on upload, 3 on optimizer, 1 each on the two legal
   pages. They are all killed here rather than in four separate page stylesheets, so
   there is one list to check. Status badges go with them — their state is carried by
   the fill, which is why `color` and `background` move and the outline does not.

   A table's cell borders and the rule under a heading are not listed: those are
   content, not chrome. */
.admin-login-card,.admin-stat,.admin-secret-input,.mini-modal-card,.cfg-row,
.badge,.lib-goto,.lib-item,.lib-item-ic,.legal-card,.up-dd-ic,.up-dd-opt-ic,
.up-check,.up-empty,.up-post,.up-post-ic,.up-post-del,.up-step,.up-step-n,
.up-note,.up-gate,.up-lock-ic,.inp-sm,.search-input,.btn-sm,.tab-bar{
  border:0;
  box-shadow:var(--zshade)}
.admin-login-card,.admin-stat,.mini-modal-card,.legal-card,.lib-item,
.up-empty,.up-post,.up-step,.up-gate{border-radius:var(--zr-inset)}
.admin-secret-input,.search-input,.up-check,.up-note,.lib-goto,.lib-item-ic,
.up-post-ic,.up-post-del,.cfg-row,.inp-sm,.up-input,.up-textarea{
  border-radius:var(--zr-ctl);
  box-shadow:var(--zshade)}
.up-step-n,.up-post-tag,.up-dd-ic,.up-dd-opt-ic,.up-lock-ic,.tab-bar,.btn-sm{
  border-radius:999px}
.tab-bar{background:var(--zs-2);padding:4px}

/* ══════════════════════════════════════════════════════════════════════════════
   ROUNDER AGAIN, THE WHOLE DASHBOARD, AND THE COMMENT COUNT
   ══════════════════════════════════════════════════════════════════════════════

   1. THE COMMENT COUNT WAS BEING CLIPPED, NOT MISSING.
   `.zv-stats` is a nowrap row with `overflow:hidden`, and `.zv-stats>*` is
   `flex:none` — the first two figures could never shrink or wrap, so at the widths
   the cards actually render the third one was simply cut off the end of the row.
   Views and likes showed; comments did not. The row wraps now and nothing clips, so
   all three are always present: a figure that falls to a second line is visible,
   and a figure past the edge of a clipped box is not.

   2. ROUNDER, EVERYWHERE.
       controls 20 -> 22      insets 24 -> 28      cards 32 -> 36

   3. THE DASHBOARD AND LIVE DATA GET THE SAME TREATMENT AS EVERYTHING ELSE.
   `/dashboard` is `index.html`, so this is the hero, Live data (`ld2-*`), the Live
   activity feed (`act-*`), the case studies (`cs-*`), the FAQ (`qa-*`), the metric
   chips (`d2-*`), the verified rail and the footer. None of them had been through a
   pass: each was carrying its own radius, and several still had an outline. They are
   all on the same two rules now — no stroke, one hairline of light along the top and
   one of shadow along the bottom, and a lift so a surface sits *above* the page.

   The rule for anything new: a surface is `--zs-1` + `--zshade` + `--zelev` +
   `--zr-inset`. A control is `--zs-2` + `--zr-ctl`. There is no third look.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  --zr-card:36px;
  --zr-inset:28px;
  --zr-ctl:22px;
}

/* ── 1. all three figures, always ─────────────────────────────────────────── */
.zv-stats{
  flex-wrap:wrap;
  row-gap:3px;
  overflow:visible;
  font-size:11.5px}
.zv-stats>*{flex:none}

/* ── 2. every control, one look ───────────────────────────────────────────── */
.hz-btn,.hz-btn-main,.hz-btn-ghost,.hz-btn-discord,.nav-discord-btn,#nav-key-btn,
.zm-menu-btn,.zv-cta,.zv-nav,.up-btn,.up-btn--primary,.up-btn--sm,.up-dd-btn,
.up-eye,.nav-link,.nav-more-btn,.nav-more-item,.qa-q,.btn,.btn-primary,.btn-ghost{
  border:0;
  border-radius:var(--zr-ctl)}

/* ── 3. the dashboard, and Live data ──────────────────────────────────────── */
.ld2,.ld2-tile,.ld2-grid,.cmp-card,.cmp-notes,.cmp-side,.hz-card,.hz-feats,.hz-f,
.act-feed,.act-empty,.qa-item,.qa,.cs-meta,.vid,.vid-a,.vid-b,.d2-week,
.dash-history-item,.tier-card,.legal-card,.admin-stat,.mini-modal-card,
.up-lock,.up-lib,.up-picked,.up-empty,.up-step,.up-gate{
  border:0;
  border-radius:var(--zr-inset);
  background:var(--zs-1);
  box-shadow:var(--zshade),var(--zelev)}

/* the small metric chips read as insets, a step tighter than their card */
.d2-week,.vid-h,.cmp-pill,.ld2-pulse,.cs-meta,.up-chip,.hz-pill,.af-chip,
.footer-chip,.ft-chip{
  border:0;
  border-radius:999px;
  background:var(--zs-2);
  box-shadow:var(--zshade)}

/* figures never jitter as they tick */
.ld2-v,.ld2-note,.d2-week,.hz-hd b,.zv-stats b,.cmp-kick,.cs-name{
  font-variant-numeric:tabular-nums}

/* a headline number is the one thing on a tile allowed to be large */
.ld2-v{font-weight:700;letter-spacing:-.02em;color:var(--z-ink)}
.ld2-l,.ld2-d,.ld2-head{color:var(--z-ink-2)}
.ld2-note{font-size:11.5px;color:var(--z-ink-3);line-height:1.5}

/* ── the per-editor cheat sheet on the export-settings page ───────────────── */
.ed-list{display:grid;gap:10px;margin:18px 0 0}
.ed{display:flex;align-items:flex-start;gap:13px;
  padding:15px 16px;border:0;border-radius:var(--zr-inset);
  background:var(--zs-1);box-shadow:var(--zshade)}
.ed-ic{flex:none;width:38px;height:38px;border-radius:var(--zr-ctl);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--zs-2);box-shadow:var(--zshade);color:var(--z-ink-2)}
.ed-ic svg{width:19px;height:19px;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  fill:none;stroke:currentColor}
.ed b{display:block;font-size:13.5px;font-weight:650;color:var(--z-ink);margin-bottom:2px}
.ed span{display:block;font-size:12.5px;line-height:1.55;color:var(--z-ink-3)}
.ed a{color:var(--z-acc-hi);text-decoration:none}
.ed a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){
  .ed{padding:13px 14px;gap:11px}
  .ed-ic{width:34px;height:34px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   THE LAST STROKES
   ══════════════════════════════════════════════════════════════════════════════

   The sweep above removed 201 outline declarations from this file at the source.
   These are the ones it could not reach — a nav bar, a tier card, three Discord
   buttons, a lime-green menu button, an audio badge, the player frame, a
   compressor surface. They are listed rather than pattern-matched because what is
   left is a list of exceptions, not a rule.

   Deliberately NOT removed: a text underline (`.cz-drop-pick`, prose links) and the
   focus ring. An underline on a link is an affordance, not a box outline, and a focus
   ring is the one indication a keyboard user has. Those are the two places a line is
   still doing a job.
   ══════════════════════════════════════════════════════════════════════════════ */
nav,.tier-card,.btn-discord-modal,#nav-discord-btn,.zm-menu-btn,.zv-audio,
.tt-zilem-badge,.zv-toggle,.zv-expand,.gd-player,.cz-card,.cz-drop,.cz-result,
.cmp .vid,#key-modal .btn-discord-modal.secondary{
  border:0}
.zv-slot-media{border-bottom:0}
.zm-menu-btn{background:var(--zs-2);color:var(--z-ink);box-shadow:var(--zshade)}
#nav-discord-btn,.btn-discord-modal{box-shadow:var(--zshade)}
.gd-player,.cz-card,.cz-drop,.cz-result{box-shadow:var(--zshade)}
.zv-toggle,.zv-expand{background:rgba(0,0,0,.55);box-shadow:var(--zshade)}

/* § FINAL — small badges and pills on the scale.
   `.hero-badge` was still 8px, which is off it, and the badge family had an inset
   glow rather than the corner-light every other surface uses. */
.hero-badge,.section-badge,.engine-pill,.hz-pill,.up-chip,.ft-chip,.footer-chip,
.af-chip,.ld2-pulse,.vid-cap,.cmp-pill,.zv-badge,.tt-zilem-badge,.up-tag,.hdr-chip,
.pill,.tag,.chip{
  border:0;
  border-radius:999px;
  background:var(--zs-2);
  box-shadow:var(--zshade)}

/* ══════════════════════════════════════════════════════════════════════════════
   THE FOOTER — one footer, at last
   ══════════════════════════════════════════════════════════════════════════════

   Three footer systems had piled up in this file over three separate "cleanups":
   `.ft-*` (v1.5), `.footer-*` (v3.3 → v3.4) and `.af-*` (v3.5). Eleven pages render
   `.af`; terms, privacy and admin still rendered the old centred `.footer-*` one; the
   404 had none at all. They disagreed on alignment, link size (12.5px vs 13.5px) and
   link colour (#a6a6ae vs #c9c9d0), so the same site had two different footers. Those
   three pages now use this one, and this block is the single authority for all of it.

   What was actually broken:

   • `.af-in` — the footer's own 1120px container — had been caught by the card sweep
     higher up this file and given `border-radius:28px`, a `--zs-1` background and
     elevation. The whole footer was sitting inside a rounded translucent slab.
   • `footer` was `text-align:center`, inherited from the old centred footer, and
     nothing un-set it. The left-aligned brand column's tagline rendered centred.
   • `footer` carried two competing shadows — a `--zshade` inset hairline and a
     `0 -1px 40px rgba(255,255,255,.04)` glow — against `border-top:0`. So there was a
     white wash above the footer and no legible edge at its top.
   • `.af-legal` had its divider removed but kept the 30px/18px spacing around it, and
     the `·` between the two sentences was `#555` on black — about 2.4:1, invisible.
   • Every colour in the footer was an ad-hoc hex (#a6a6ae, #9c9ca5, #94949e, #c0c0c8,
     #6e6e73, #a3a3ad, #cfcfd6, #c9c9d0, #c2c2c9) rather than the site's text tokens.
   ══════════════════════════════════════════════════════════════════════════════ */

footer.af{
  position:relative;
  padding:56px 0 28px;
  background:transparent;
  text-align:left;                 /* the brand column is left-aligned; nothing centres */
  box-shadow:none}

/* The top edge. A footer has to read as its own region — but a rectangular box outline
   is exactly what this design pass removed everywhere else. So it separates by surface,
   with a single rule that fades out at both ends instead of a border.

   The OLD divider (.footer-sep) was a 1px stroke element: width:1px;height:14px;
   background:rgba(255,255,255,.15). This replaces that idea entirely. */
footer.af::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.10) 16%,
    rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.10) 84%,
    transparent 100%)}

/* ── the container, restored to being a container ─────────────────────────── */
.af-in{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none}

.af-cols{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:30px 26px}

/* ── brand ───────────────────────────────────────────────────────────────── */
.af-brandrow{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.af-mark{width:19px;height:19px;border-radius:6px;flex:none}
.af-logo,.af-brandcol .af-logo{
  margin-bottom:0;
  font-size:15px;
  font-weight:700;
  color:var(--text-1);
  letter-spacing:-.01em}

.af-chips{display:flex;gap:7px;margin:0 0 13px;flex-wrap:wrap}
.af-chip{
  border:0;
  border-radius:var(--zr-pill);
  background:var(--zs-2);
  box-shadow:var(--zshade);
  padding:3px 10px;
  font-size:10.5px;
  font-weight:600;
  color:var(--text-3)}

.af-tag{
  margin:0;
  max-width:230px;
  color:var(--text-4);
  font-size:12.5px;
  line-height:1.55;
  text-align:left}                 /* was inheriting the footer's old centring */

/* ── link columns ────────────────────────────────────────────────────────── */
.af-col{display:flex;flex-direction:column;gap:10px}
.af-col a{
  width:fit-content;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.45;
  text-align:left;
  transition:var(--dur-2) var(--ease-out)}
.af-col a:hover{color:var(--text-1);transform:translateY(-1px)}

/* ── the legal row: a divider you can actually see, and a visible separator ─ */
.af-legal{
  position:relative;
  margin-top:34px;
  padding-top:20px;
  border-top:0;
  box-shadow:none;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  color:var(--text-4);
  font-size:12px;
  text-align:left}
.af-legal::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.09) 0%,
    rgba(255,255,255,.05) 55%,
    transparent 100%)}
.af-dot{color:var(--text-4);opacity:.7}   /* was #555 — 2.4:1, effectively invisible */

/* the slide-out nav bar is not a footer, but shares the name */
.mobile-nav-footer{padding:16px 22px;border-top:0;box-shadow:var(--zshade)}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media(max-width:980px){
  .af-cols{grid-template-columns:1.4fr 1fr 1fr;gap:28px 22px}
  .af-brandcol{grid-column:1/-1}
}
@media(max-width:700px){
  footer.af{padding:42px 0 24px}
  .af-in{padding:0 18px}
  .af-cols{grid-template-columns:1fr 1fr;gap:24px 20px}
  .af-legal{margin-top:26px;padding-top:16px;font-size:11.5px}
}
@media(max-width:400px){
  .af-tag{max-width:none}
}

/* the nav bar's surface is set on the `nav` rule itself (search "was rgba(255,255,255,.05)").
   It is deliberately not overridden from here — two competing !important rules for the
   same property is what let a 5% wash beat a correct 62% surface in the first place. */

/* ══════════════════════════════════════════════════════════════════════════════
   CONTAINERS THAT WERE WEARING A CARD
   ══════════════════════════════════════════════════════════════════════════════

   The card sweep higher up this file matches on long comma-separated lists of class
   names, and long lists pick up the wrong things. These six are layout containers, not
   surfaces, and each had been given a `--zr-*` radius, a `--zs-1` background, a
   `--zshade` highlight and `--zelev` elevation.

   What that produced:

   • `.qa` — the FAQ `<section>`: `max-width:760px; margin:0 auto`. Its own
            `padding-bottom:80px` is spacing for the section, but inside a card it read
            as 80px of empty panel below the last question against 34px at the top.
            That asymmetry is the visible hole under the accordion.
   • `.ld2` AND `.ld2-grid` — the Live-data `<section>` and its grid. With `.ld2-tile`
            also in the same list, one widget was wearing three stacked card surfaces.
   • `.art` — an article wrapper with `padding:0 24px` and no vertical padding at all,
            so as a card its text sat flush against the rounded edge.
   • `.vid-a`, `.vid-b` — the two absolutely-positioned layers of the before/after
            comparison slider (`position:absolute; inset:0` inside `.vid`). They are
            video layers: the `--zs-1` background laid a white wash over the footage and
            the `--zshade` inset highlight drew a hairline across it.

   The things that genuinely are cards — `.qa-item`, `.ld2-tile`, `.vid`, `.tier-card`,
   `.hz-card` and the rest — are untouched. Only the wrappers are cleared.
   ══════════════════════════════════════════════════════════════════════════════ */
.qa,.ld2,.ld2-grid,.art,.vid-a,.vid-b{
  border-radius:0;
  background:none;
  box-shadow:none}

/* the FAQ panel used to absorb this padding; with the panel gone, 80px here plus the
   footer's own 80px margin left a 160px void under the last question */
.qa{padding-bottom:48px}

/* ══════════════════════════════════════════════════════════════════════════════
   THE DIVIDER ABOVE THE COPYRIGHT — it was one-sided
   ══════════════════════════════════════════════════════════════════════════════

   `.af-legal::before` ran `rgba(255,255,255,.09)` at 0% → `.05` at 55% → `transparent`
   at 100%: full strength on the left, gone by the right. A rule that fades out on only
   one side reads as a line someone forgot to finish rather than as a design. Now it
   fades symmetrically, like the footer's own top edge.
   ══════════════════════════════════════════════════════════════════════════════ */
.af-legal::before{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.09) 14%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.09) 86%,
    transparent 100%)}

/* ══════════════════════════════════════════════════════════════════════════════
   THE HERO FEATURE STRIP — "HD · No re-encode · Ready in seconds · ..."
   ══════════════════════════════════════════════════════════════════════════════

   Measured on the real page before this block:

     .hz-feats   840x51   padding 32px/0/0/0   radius 28px   bg rgba(255,255,255,.05)
                          → 32px of empty panel above the items, 0px below
     .hz-f  x3   230x19   142x19   164x19      radius 28px   bg rgba(255,255,255,.05)
                                              padding 0

   Three faults, all from the same sweep:

   1. The ROW (`.hz-feats`) is a flex container, but it had been given a card surface:
      a 28px radius, a 5% white fill and a shadow on an 840px-wide element. That is the
      wide rounded panel sitting under the hero buttons.
   2. Each ITEM (`.hz-f`) was given the same surface — and an item is only 19px tall, so
      a 28px radius makes it a full capsule, and `--zelev` (which ends
      `0 20px 48px rgba(0,0,0,.50)`) casts a 48px-blur shadow from a 19px box. Three
      grey capsules with dark halos, inside a grey panel. With `padding:0` the fill had
      no room either side of the text, so each one read as a smear behind the words.
   3. The row carried `padding-top:32px` with no `padding-bottom`, so the items were
      jammed against the bottom edge of the panel.

   Neither the row nor the item is a surface — they are a centred inline row. Both are
   cleared; the row keeps its alignment and spacing, and `column-gap:32px` /
   `row-gap:14px` so it still wraps cleanly on a phone.
   ══════════════════════════════════════════════════════════════════════════════ */
.hz-feats{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px 32px;
  margin-top:44px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none}

.hz-feats .hz-f{
  display:flex;
  align-items:center;
  gap:9px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-size:13.5px;
  line-height:1.2;
  color:var(--text-2)}

/* "HD" was a bare <span> with no rule of its own, so it inherited the label's 14.5px
   and read as the first word of the sentence rather than as a label. It now occupies the
   same 16px slot as the two line icons beside it, as a badge. */
.hz-hd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  height:16px;
  min-width:25px;
  padding:0 5px;
  border-radius:5px;
  background:var(--zs-2);
  box-shadow:var(--zshade);
  color:var(--text-1);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.05em;
  line-height:1}

/* ── the icons in that row were 19px, the HD badge 16px ─────────────────────
   `.hz-f svg{width:19px;height:19px}` overrode the `width="16" height="16"` on the
   markup, so the two line icons were three pixels taller than the badge beside them and
   the three items sat at slightly different heights (measured item tops: 656, 655, 655).

   The 19px also skewed the stroke. The markup carries `stroke-width="1.8"` against a
   `0 0 24 24` viewBox, which is 1.8 x 16/24 = 1.20px when drawn at 16px — the weight
   every other icon on the site now uses. At 19px it drew at 1.43px, so these two read
   heavier than the rest. Pinning them back to 16px fixes the size, the alignment and the
   weight in one line. */
.hz-feats .hz-f svg{
  width:16px;
  height:16px;
  flex:none}

/* ══════════════════════════════════════════════════════════════════════════════
   "SEE THE DIFFERENCE" — the before/after slider
   ══════════════════════════════════════════════════════════════════════════════

   One "make every chip look the same" rule further up this file —

     .d2-week,.vid-h,.cmp-pill,.ld2-pulse,.cs-meta,.up-chip,.hz-pill,.af-chip,
     .footer-chip,.ft-chip{ border:0; border-radius:999px;
                            background:var(--zs-2); box-shadow:var(--zshade) }

   — was written for chips that sit on the page. Two of the classes it swept up sit
   *on top of video* instead, where a translucent theme surface is the one thing that
   cannot work: `--zs-2` is 7.5% white, and over a bright clip 7.5% white is invisible.

   Measured before this block:

     .vid-h    2x668   bg rgba(255,255,255,.075)   (its own rule says #fff)
     .cmp-pill 61x24   bg rgba(255,255,255,.075)   (its own rule says rgba(0,0,0,.62))

   So the divider line of the comparison slider had no colour, and the Before / After
   labels had no fill. The 44px knob survived — it is `.cmp .vid-h span`, spelled with
   enough specificity to escape the sweep — so what you were left with was a white
   circle floating over the video with no line through it, and two unreadable labels.

   `.cs-meta` is the third casualty but for a different reason: it is the text line
   "Usually 540–720p · 30 FPS", not a chip, so it was rendering as a 476x12 pill with a
   999px radius and no padding.
   ══════════════════════════════════════════════════════════════════════════════ */

/* the divider. Back to white, with a dark hairline either side so it still reads over a
   bright clip (the clip is white-walled, so a plain white line would vanish into it). */
.vid-h{
  width:2px;
  background:#fff;
  border:0;
  border-radius:999px;
  box-shadow:0 0 0 1px rgba(0,0,0,.30)}

/* the labels sit on the footage, so they get a dark base rather than a theme wash */
.cmp-pill{
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.62);
  color:#e8e8ee;
  box-shadow:var(--zshade);
  backdrop-filter:blur(8px) saturate(1.2);
  -webkit-backdrop-filter:blur(8px) saturate(1.2)}

/* "After · Zilem" carries the accent, as it did before the sweep flattened it */
.cmp-pill.cmp-pill-after{
  background:rgba(59,157,255,.95);
  color:#fff;
  box-shadow:0 1px 10px rgba(59,157,255,.35)}

/* ── two more containers wearing a surface ────────────────────────────────── */

/* `.cmp-notes` is the grid column that HOLDS the two `.cmp-side` cards, so a surface on
   it meant a card inside a card. It is layout. */
.cmp-notes{
  border-radius:0;
  background:none;
  box-shadow:none}

/* `.cs-meta` is a line of text, not a chip */
.cs-meta{
  border-radius:0;
  background:none;
  box-shadow:none}

/* ══════════════════════════════════════════════════════════════════════════════
   LIVE ACTIVITY
   ══════════════════════════════════════════════════════════════════════════════

   Measured before this block:

     .act          1080x542   pad 42px/20px
     .act-feed      640x432   radius 28px   bg 5% white
     .act-row       640x54    pad 10px/14px
     .act-pfp        34px     bg 8% white
     .act-name      13.5px/600   rgb(255,255,255)
     .act-what      12.5px       rgb(154,154,162)
     .act-time        12px       rgb(156,156,165)
     rows = 8    avatars with NO image = 2
     live pulse indicator? NO     CTA or closing line? NO

   Four things were wrong or missing:

   1. TWO OF THE EIGHT AVATARS WERE BLANK GREY DISCS. The API returns `avatar:""` for
      members with no Discord avatar, and paintFeed emitted nothing inside `.act-pfp` —
      so you got an empty 34px circle sitting next to seven real photos. Fixed in
      shared2.js with an initial-letter fallback; the styling for it is here.
   2. THE SECTION CALLED "LIVE" HAD NO LIVE INDICATOR. Its sibling directly above,
      "Live data", carries a pulsing pill (`.ld2-pulse`). This one had a bare heading,
      so nothing signalled that the list was updating. It now has the same pill and the
      same pulse — deliberately the same component, not a new one.
   3. THE COLORS WERE THREE NEARLY-IDENTICAL AD-HOC GREYS — #fff, #9a9aa2, #9c9ca5.
      The last two are two points apart and neither is a token, so what/what and time
      had no real hierarchy. Now: name `--text-1`, action `--text-3`, time `--text-4`.
   4. THE PRE-JS EMPTY STATE WAS A DEVELOPER NOTE. It read "Live feed connects when this
      preview is wired to your bot/Supabase" — visible to any visitor for the moment
      before the fetch resolves. It is now "Connecting to the live feed…".

   Plus rows now arrive in sequence rather than all at once, so the list reads as a
   feed instead of a table.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── header: the same heading + status-pill row the Live data section uses ──── */
.act-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px}
.act-head .sec-h{margin-bottom:0}

.act-pulse{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 11px;
  border:0;
  border-radius:var(--zr-pill);
  background:var(--zs-2);
  box-shadow:var(--zshade);
  font-size:11.5px;
  color:var(--z-ink-2)}
/* the same 7px dot and the same `ep` keyframes as `.ld2-pulse i` */
.act-pulse i{
  width:7px;height:7px;border-radius:50%;
  background:#fff;animation:ep 2.4s infinite}

/* ── the feed ─────────────────────────────────────────────────────────────── */
.act-feed{
  display:flex;
  flex-direction:column;
  max-width:640px;
  margin:0 auto;
  overflow:hidden;
  border:0;
  border-radius:var(--zr-inset);
  background:var(--zs-1);
  box-shadow:var(--zshade),var(--zelev)}

.act-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:11px 16px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:var(--zshade);          /* the hairline pair that separates the rows */
  transition:background var(--dur-2) var(--ease-out)}
.act-row:hover{background:rgba(255,255,255,.04)}

/* ── the avatar, and what it shows when there is no avatar ────────────────── */
.act-pfp{
  display:grid;
  place-items:center;
  flex:none;
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  background:var(--zs-2);
  box-shadow:var(--zshade)}
.act-pfp img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover}
.act-initial{
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--text-2);
  user-select:none}

/* ── the three lines of text ──────────────────────────────────────────────── */
.act-txt{flex:1;min-width:0}
.act-name{
  display:block;
  color:var(--text-1);
  font-size:13.5px;
  font-weight:650;
  letter-spacing:-.01em;
  line-height:1.35}
.act-what{
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.45;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}
.act-time{
  flex:none;
  color:var(--text-4);
  font-size:11.5px;
  letter-spacing:.01em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums}   /* times never jitter as they tick */

/* ── the pre-JS state, and any future "nothing happened yet" state ─────────── */
/* `.act-empty` is a message INSIDE the feed card, so it does not need a surface of
   its own — it had been given one, making a card inside a card. */
.act-empty{
  margin:0;
  padding:24px 20px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:var(--text-4);
  font-size:13px;
  text-align:center}

/* ── rows arrive in sequence ──────────────────────────────────────────────── */
@keyframes actIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}}
.act-row{animation:actIn .44s var(--ease-out) both}
.act-row:nth-child(1){animation-delay:.00s}
.act-row:nth-child(2){animation-delay:.045s}
.act-row:nth-child(3){animation-delay:.09s}
.act-row:nth-child(4){animation-delay:.135s}
.act-row:nth-child(5){animation-delay:.18s}
.act-row:nth-child(6){animation-delay:.225s}
.act-row:nth-child(7){animation-delay:.27s}
.act-row:nth-child(8){animation-delay:.315s}

@media(prefers-reduced-motion:reduce){
  .act-row{animation:none}
  .act-pulse i{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════════
   TIKTOK ANALYZER — the result panel
   ══════════════════════════════════════════════════════════════════════════════

   The API already returned four things the panel never used:

     thumbnail       a real 9:16 cover for the video — the card had no image at all
     bookmarks       a fifth engagement signal, returned and dropped
     phone_quality   what the app serves, separate from web_quality
     video_id        the canonical watch URL, so no need to trust the pasted one

   ...and two things that were only ever printed raw, never derived:

     bit rate         file_size_mb and duration were both on screen, side by side,
                      but never divided. (size_mb x 8) / seconds is the number a
                      creator actually needs, and it is the one that decides whether
                      a 1080p60 upload survives TikTok's re-encode.
     engagement rate  views/likes/comments/shares were four separate tiles with no
                      relationship drawn between them.

   So this block styles a poster, a verdict, an engagement grid, a delivery
   comparison and an action row. Everything shown is computed from the API payload —
   nothing is invented, and every threshold is printed next to the check it belongs
   to so you can disagree with it.

   Note: `--green` in this codebase is #2997ff, a blue. It is the site's positive
   token (`.tt-tech-val` for Public uses it). Passing checks therefore render blue and
   failing checks red, rather than introducing a green this palette does not have.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── hero: cover on the left, identity and copy on the right ──────────────── */
.tt-hero{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:18px;
  align-items:start;
  margin-bottom:4px}

.tt-poster{
  position:relative;
  width:132px;
  aspect-ratio:9/16;
  overflow:hidden;
  border-radius:var(--zr-ctl);
  background:var(--zs-2);
  box-shadow:var(--zshade)}
.tt-poster-img{
  display:block;
  width:100%;height:100%;
  object-fit:cover}
.tt-poster-scrim{
  position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(0,0,0,.74),transparent);
  pointer-events:none}
.tt-poster-dur,
.tt-poster-q{
  position:absolute;
  padding:2px 6px;
  border-radius:7px;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff;
  font-size:10.5px;
  font-weight:650;
  line-height:1.35;
  font-variant-numeric:tabular-nums}
.tt-poster-dur{left:8px;bottom:8px}
.tt-poster-q{right:8px;bottom:8px;font-size:9.5px;letter-spacing:.02em}

.tt-hero-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0}

/* the profile row and title box were cards sitting inside the card. Inside the hero
   they are just structure. */
.tt-hero .tt-profile-row{
  margin:0;padding:0;
  border-radius:0;background:none;box-shadow:none}
.tt-hero .tt-thumb{border:0;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.tt-hero .tt-title-box{
  margin:0;padding:0;
  border-radius:0;background:none;box-shadow:none}
.tt-hero .tt-meta-row{margin:0}

.tt-badges{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.tt-region{font-size:10px;font-weight:600;color:var(--text-3)}

/* ── section headings inside the panel ───────────────────────────────────── */
.tt-sec{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0 10px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-3)}
.tt-sec::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.10),transparent)}

/* ── the verdict ─────────────────────────────────────────────────────────── */
.tt-verdict{
  margin-top:20px;
  padding:16px 18px;
  border-radius:var(--zr-inset);
  background:var(--zs-1);
  box-shadow:var(--zshade),var(--zelev)}
.tt-verdict.is-ok {background:linear-gradient(180deg,rgba(41,151,255,.09),var(--zs-1))}
.tt-verdict.is-bad{background:linear-gradient(180deg,rgba(255,69,58,.09),var(--zs-1))}

.tt-verdict-head{display:flex;align-items:center;gap:9px;margin-bottom:13px;flex-wrap:wrap}
.tt-verdict-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--text-2)}
.tt-verdict-dot.is-ok {background:var(--green);box-shadow:0 0 10px var(--green)}
.tt-verdict-dot.is-bad{background:var(--red);box-shadow:0 0 10px var(--red)}
.tt-verdict-state{font-size:13.5px;font-weight:650;color:var(--text-1)}
.tt-verdict-count{
  margin-left:auto;
  font-size:11.5px;
  color:var(--text-4);
  font-variant-numeric:tabular-nums}

/* Two columns. This is the base rule; the verdict block further down restates the
   columns to add the bleed and the row dividers. It said `repeat(3,1fr)` for the
   third check — Bit rate — and a stale 3 overridden by a live 2 is a trap: whoever
   adds or removes a check next edits one of the two and is silently overruled by
   the other. Both now say two. */
.tt-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tt-check{
  position:relative;
  padding:10px 12px 10px 34px;
  border-radius:14px;
  background:rgba(255,255,255,.032)}
.tt-check-ic{position:absolute;left:12px;top:11px;display:inline-flex}
.tt-check.is-ok  .tt-check-ic{color:var(--green)}
.tt-check.is-bad .tt-check-ic{color:var(--red)}
.tt-check-lbl{
  display:block;margin-bottom:3px;
  font-size:9px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3)}
.tt-check-got{display:block;font-size:13.5px;font-weight:650;color:var(--text-1);line-height:1.2}
.tt-check-want{display:block;margin-top:2px;font-size:10.5px;color:var(--text-4)}

/* ── engagement: six tiles, the last one computed ────────────────────────── */
.tt-stats6{grid-template-columns:repeat(6,1fr)}
.tt-stat-key{background:var(--zs-2) !important}
.sv-note{
  margin-top:4px;
  font-size:8.5px;
  line-height:1.3;
  color:var(--text-4)}

/* These two cell types used to be given their own surface here, scoped to this page's
   grid because `.sv-item` is shared with /optimizer. They are plain cells inside a
   `.tt-panel` now, so that rule is gone — and it had to go rather than merely be
   overridden: `#ttStats .sv-item` is (1,1,0), which outranks `.tt-panel > *` (0,1,0)
   and would have kept re-painting a fill and a shadow on every engagement cell. */

/* ── what viewers actually receive ───────────────────────────────────────── */
.tt-deliver{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tt-deliver-card{
  padding:11px 13px;
  border-radius:14px;
  background:rgba(255,255,255,.032)}
.tt-deliver-k{
  display:block;margin-bottom:4px;
  font-size:9px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3)}
.tt-deliver-v{
  display:block;
  font-size:13px;font-weight:600;
  color:var(--text-1);
  font-variant-numeric:tabular-nums}
.tt-deliver-note{
  grid-column:1/-1;
  padding:0 2px;
  font-size:11.5px;
  color:var(--text-4)}
.tt-deliver-note.is-warn{color:var(--red)}

/* NOTE: this used to be `#ttTechRow{grid-template-columns:repeat(4,1fr)}`. That id
   selector is (1,0,0) and outranks every `.tt-panel.tt-spec` rule (0,2,0), so it silently
   pinned the panel to four columns and defeated the two-column layout the pair needs —
   the cells measured 104.5px each inside a 418px panel. The columns are set on
   `.tt-panel.tt-spec` now; only the margin belongs here. */
#ttTechRow{margin-bottom:0}

/* ── actions ─────────────────────────────────────────────────────────────── */
.tt-actions{
  display:flex;
  gap:9px;
  margin-top:20px;
  flex-wrap:wrap}
.tt-actions .tt-video-btn{flex:1 1 220px}
.tt-act{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 18px;
  border:0;
  border-radius:var(--zr-ctl);
  background:var(--zs-2);
  box-shadow:var(--zshade);
  color:var(--text-1);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.tt-act:hover{background:rgba(255,255,255,.11);transform:translateY(-1px)}
.tt-act:active{transform:none}

/* ── the two download buttons ─────────────────────────────────────────────── */
/* Every state is restated here rather than left to inherit.
 *
 * "Download served" is a white pill with BLACK text. Its rule set the background and
 * the colour once, on the base state only — so any `a:hover` colour arriving from
 * anywhere else turned the label white against that white pill the moment a pointer
 * touched it, and the text disappeared into the button. A hover state that changes only
 * the background is one inherited rule away from being unreadable.
 *
 * Specificity, not order alone: two classes plus the pseudo-class (0,3,0) beats the
 * original's (0,2,0), so this holds whichever way the earlier block is edited later. */
.tt-actions .tt-video-btn{color:#000;background:#f5f5f7}
.tt-actions .tt-video-btn:hover{background:#fff;color:#000;transform:translateY(-1px)}
.tt-actions .tt-video-btn:active{background:#fff;color:#000;transform:none}
/* The secondary button keeps its own colour on hover too — it sits on a lighter
   surface when hovered, and a light label on a light surface is the same fault. */
.tt-actions .tt-act{color:var(--text-1)}
.tt-actions .tt-act:hover{background:rgba(255,255,255,.13);color:var(--text-1)}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  #ttTechRow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .tt-stats6{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .tt-checks{grid-template-columns:1fr}
}
@media(max-width:640px){
  .tt-hero{grid-template-columns:1fr;gap:14px}
  .tt-poster{width:132px;margin:0 auto}
  .tt-stats6{grid-template-columns:repeat(2,1fr)}
  .tt-deliver{grid-template-columns:1fr}
  .tt-actions{flex-direction:column}
  .tt-actions .tt-video-btn{flex:1 1 auto}
  .tt-act{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .tt-act{transition:none}
  .tt-act:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════════
   RECENT OPTIMIZATIONS — the kept-file preview
   ══════════════════════════════════════════════════════════════════════════════

   `#libSection` lists the patched files this browser is holding in IndexedDB. It was
   a row of text with Download / Post / Remove, so the only way to see what you were
   about to post was to download it first.

   The row icon is now a play control and the file name is a second target for the
   same popup; the popup plays the kept blob directly via an object URL. Nothing is
   fetched — the bytes never leave the device.
   ══════════════════════════════════════════════════════════════════════════════ */

/* the icon became a <button>, so it needs the reset a span never did */
button.lib-item-ic{
  padding:0;
  font:inherit;
  cursor:pointer;
  color:var(--text-2);
  transition:background var(--dur-2) var(--ease-out),
             color var(--dur-2) var(--ease-out),
             transform var(--dur-2) var(--ease-out)}
button.lib-item-ic:hover{
  background:rgba(255,255,255,.14);
  color:var(--text-1);
  transform:scale(1.07)}

.lib-item-tx b[data-lib-pv]{cursor:pointer;transition:color var(--dur-2) var(--ease-out)}
.lib-item-tx b[data-lib-pv]:hover{color:var(--green)}

/* ── the popup ───────────────────────────────────────────────────────────── */
.libpv{
  position:fixed;
  inset:0;
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px}
/* `display:flex` above would otherwise beat the `hidden` attribute */
.libpv[hidden]{display:none}

.libpv-bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15)}

.libpv-card{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(560px,94vw);
  max-height:calc(100vh - 40px);
  overflow:hidden;
  border-radius:var(--zr-card);
  background:rgba(18,18,20,.93);
  box-shadow:var(--zshade),0 30px 90px rgba(0,0,0,.70);
  animation:libpvIn .26s var(--ease-out) both}
@keyframes libpvIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}}

.libpv-top{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 12px}
.libpv-id{flex:1;min-width:0}
.libpv-id b{
  display:block;
  font-size:13.5px;
  font-weight:650;
  color:var(--text-1);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}
.libpv-id span{
  display:block;
  margin-top:4px;
  font-size:11.5px;
  color:var(--text-4);
  font-variant-numeric:tabular-nums}

.libpv-x{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:0;
  border-radius:var(--zr-ctl);
  background:var(--zs-2);
  box-shadow:var(--zshade);
  color:var(--text-2);
  cursor:pointer;
  transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.libpv-x:hover{background:rgba(255,255,255,.12);color:var(--text-1)}

.libpv-stage{display:flex;align-items:center;justify-content:center;padding:0 18px;min-height:0}
.libpv-stage video{
  display:block;
  width:100%;
  max-height:min(62vh,560px);
  border-radius:var(--zr-inset);
  background:#000;
  box-shadow:var(--zshade)}

.libpv-foot{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px 18px}
.libpv-foot .lib-mini{flex:1 1 auto;justify-content:center}

@media(max-width:640px){
  .libpv{padding:12px;align-items:flex-end}
  .libpv-card{width:100%;max-height:calc(100vh - 24px)}
  .libpv-stage video{max-height:52vh}
}
@media(prefers-reduced-motion:reduce){
  .libpv-card{animation:none}
  button.lib-item-ic:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════════
   TIKTOK ANALYZER — fewer boxes
   ══════════════════════════════════════════════════════════════════════════════

   The panel had twenty separate surfaces: 6 engagement tiles, 2 delivery cards,
   8 spec tiles, and 3 filled check cells inside the verdict. Twenty rounded
   rectangles at three radii, each carrying its own fill and its own inset highlight,
   is a lot of furniture for sixteen numbers — and it was the reason the card read as
   a wall of pills rather than a spec sheet.

   Now there are four surfaces. Each group is ONE surface, and the items inside it are
   plain cells divided by a hairline. The divider is drawn with an inset box-shadow so
   it is a 1px line at 7% white, not a border — the same technique the footer and the
   activity rows already use.

   Radii stay on the scale: the panel is `--zr-inset`, inside the card's `--zr-card`.
   ══════════════════════════════════════════════════════════════════════════════ */

.tt-panel{
  --hair:rgba(255,255,255,.07);
  display:grid;
  overflow:hidden;
  border-radius:var(--zr-inset);
  background:var(--zs-1);
  box-shadow:var(--zshade),var(--zelev)}

/* every direct child is a plain cell — the panel is the only surface in the group */
.tt-panel > *{
  min-width:0;
  padding:14px 16px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:inset 1px 0 0 var(--hair)}
.tt-panel > :first-child{box-shadow:none}

/* ── the pair: specifications beside engagement ──────────────────────────
   These two groups used to stack, which gave the card a long single column of
   panels down the middle. Paired, each is a short block and the two read in one
   pass — the arrangement the reference page uses, and it is the right one. */
.tt-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.tt-two-col{min-width:0}

/* ── specs: two across, three rows ────────────────────────────────────────
   Half the card is ~446px, so four across would leave ~110px a cell and the
   1920x1080 values would not fit. Two across holds them. Same divider rule as
   everywhere else: the first cell of each row drops the left rule, rows 2+
   gain a top rule.

   Six cells now: Resolution, Dimensions, Codec, Frame rate, File size, Audio.
   Bit rate was the sixth and is gone — see the note in analytics.html. The
   count still has to be EVEN, which is why Audio replaced it rather than the
   cell simply being deleted: at five cells the last row holds one lonely cell
   and `:nth-child(2n+1)`, which assumes pairs, drops the wrong hairline. */
.tt-panel.tt-spec{grid-template-columns:repeat(2,1fr)}
.tt-panel.tt-spec > *{box-shadow:inset 1px 0 0 var(--hair)}
.tt-panel.tt-spec > :nth-child(2n+1){box-shadow:none}
.tt-panel.tt-spec > :nth-child(n+3){box-shadow:inset 0 1px 0 var(--hair)}
.tt-panel.tt-spec > :nth-child(n+3):not(:nth-child(2n+1)){
  box-shadow:inset 1px 0 0 var(--hair),inset 0 1px 0 var(--hair)}

/* ── engagement: three across, two rows ────────────────────────────────── */
.tt-panel.tt-eng{grid-template-columns:repeat(3,1fr)}
.tt-panel.tt-eng > *{box-shadow:inset 1px 0 0 var(--hair)}
.tt-panel.tt-eng > :nth-child(3n+1){box-shadow:none}
.tt-panel.tt-eng > :nth-child(n+4){box-shadow:inset 0 1px 0 var(--hair)}
/* The sound name is a sentence where every other cell in this panel is a number.
   Clamped rather than allowed to wrap freely: a long licensed track would otherwise
   make its row taller than the two beside it and break the grid it sits in. */
#hd-sound{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden}

.tt-panel.tt-eng > :nth-child(n+4):not(:nth-child(3n+1)){
  box-shadow:inset 1px 0 0 var(--hair),inset 0 1px 0 var(--hair)}

/* Whole counts, not abbreviated ones. The values are exact integers now
   ("242,270" rather than "242.3K"), so the digit groups have to line up from
   cell to cell — tabular figures do that, and the slight tracking trim buys
   back the width a six-digit number needs without shrinking the type. `nowrap`
   because a grouped number broken over two lines ("242,2" / "70") is worse
   than either abbreviation. */
#ttStats .sv-val{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis}

/* ── the rate gets a bar, not a seventh cell ─────────────────────────────
   It is the only ratio on the card, and a bar is what shows whether it is
   high. The width is set from the value in renderTT. */
.tt-rate{
  margin-top:10px;
  padding:13px 16px 15px;
  border-radius:var(--zr-inset);
  background:var(--zs-1);
  box-shadow:var(--zshade)}
.tt-rate-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tt-rate-head span{font-size:11.5px;font-weight:600;color:var(--text-3)}
.tt-rate-head b{font-size:16px;font-weight:700;color:var(--text-1);font-variant-numeric:tabular-nums}
.tt-rate-track{
  margin-top:10px;
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07)}
.tt-rate-track i{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:var(--green);
  transition:width .5s var(--ease-out)}
.tt-rate-note{margin-top:8px;font-size:10.5px;color:var(--text-4)}

/* ── the verdict's two checks ────────────────────────────────────────────
   They bleed to the verdict panel's edges so the dividers land on the same
   boundary as the panel itself, rather than stopping 18px short inside it.

   Two columns because there are two checks. This was `repeat(3,1fr)` for the
   three that included Bit rate, and leaving it at three would have held the
   row open for a check that no longer exists — two cells each a third wide,
   with a third of the row empty. `auto-fit` would scale to whatever count
   renderTT emits, which is the tempting generalisation, but it also lets a
   single check stretch to full width and read as a headline. The count is
   known here, so it is stated here. */
.tt-verdict{padding:16px 18px 0}
.tt-checks{
  grid-template-columns:repeat(2,1fr);
  margin:14px -18px 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.tt-panel > .tt-check,
.tt-check{
  padding:13px 16px 15px 36px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.07)}
.tt-check:first-child{box-shadow:none}
.tt-check-ic{left:16px;top:14px}

/* ── quality delivered: two cells and a footnote, one surface ──────────── */
.tt-deliver{
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border-radius:var(--zr-inset);
  background:var(--zs-1);
  box-shadow:var(--zshade),var(--zelev)}
.tt-deliver > .tt-deliver-card{
  padding:14px 16px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.07)}
.tt-deliver > .tt-deliver-card:first-child{box-shadow:none}
.tt-deliver > .tt-deliver-note{
  grid-column:1/-1;
  padding:12px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}

/* NOTE: an earlier revision reset these two cell types here with
   `#ttStats .sv-item, .tt-tech{border:0;background:none;box-shadow:none}`. That had to
   go. `.tt-panel > *` already clears the old per-tile surface, and the id-qualified
   selector (1,1,0) outranked the new panel dividers — engagement cells 2..6 and spec
   cells 2..4 silently lost their left hairline, leaving only the cells that were
   targeted by the higher-specificity `:nth-child` rules. */

/* ── responsive ────────────────────────────────────────────────────────────
   The pair stacks at 760px: below that the two columns fall under ~350px each and
   the four spec rows start wrapping their values. */
@media(max-width:900px){
  .tt-two{gap:16px}
}
@media(max-width:760px){
  .tt-two{grid-template-columns:1fr;gap:0}
  .tt-two-col + .tt-two-col{margin-top:24px}
  .tt-checks{grid-template-columns:1fr;margin:14px -18px 0}
  .tt-check{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
  .tt-check:first-child{box-shadow:none}
}
@media(max-width:520px){
  .tt-panel.tt-eng{grid-template-columns:repeat(2,1fr)}
  .tt-panel.tt-eng > :nth-child(3n+1){box-shadow:inset 1px 0 0 var(--hair)}
  .tt-panel.tt-eng > :nth-child(2n+1){box-shadow:none}
  .tt-panel.tt-eng > :nth-child(n+3){box-shadow:inset 0 1px 0 var(--hair)}
  .tt-panel.tt-eng > :nth-child(n+3):not(:nth-child(2n+1)){
    box-shadow:inset 1px 0 0 var(--hair),inset 0 1px 0 var(--hair)}
  .tt-deliver{grid-template-columns:1fr}
  .tt-deliver > .tt-deliver-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
  .tt-deliver > .tt-deliver-card:first-child{box-shadow:none}
}


/* ===================================================================
   Upload to TikTok — /upload
   Page styles, kept in the stylesheet rather than inline in the
   markup, matching how the rest of the site is organised.
   =================================================================== */
.zp-file-input{display:none}
  /* Upload tool — built on Zilem's own language: filled surfaces, soft depth,
     no outlined boxes and no dashed strokes. Radii and weights match .hz-btn. */
  .zp{
    --w:1060px;
    --acc:#f5f5f7;
    --acc-hi:#ffffff;
    --tt:#f5f5f7;
    --fill:rgba(255,255,255,.055);
    --fill-hi:rgba(255,255,255,.085);
    --fill-2:rgba(255,255,255,.11);
    --shade:0 18px 48px rgba(0,0,0,.42);
    --seam:rgba(255,255,255,.05);
    width:100%;max-width:var(--w);margin:0 auto;
    /* Clears the fixed nav (top:16px + 54px tall = 70px) and the fixed mobile
       menu button. Matches the .hz convention used elsewhere on the site. */
    padding:clamp(96px,9vw,128px) clamp(16px,3.4vw,26px) 96px;
  }

  /* ── Header ───────────────────────────────────────────────────────────── */
  .zp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:clamp(18px,2.6vw,26px)}
  .zp-title{font-family:var(--font-display);margin:0;font-size:clamp(30px,5.2vw,44px);line-height:1;letter-spacing:-.03em;font-weight:700;text-transform:uppercase;color:var(--text,#f5f5f7)}
  .zp-title span{font-weight:400;letter-spacing:.02em;text-transform:none;font-size:.62em;color:var(--text-3,#6e6e73);margin-left:10px;vertical-align:2px}
  .zp-lede{margin:9px 0 0;font-size:14px;line-height:1.55;color:var(--text-2,#a1a1a6)}
  .zp-who{display:flex;align-items:center;gap:12px;flex:none;padding:8px 14px 8px 8px;border-radius:999px;background:var(--fill);box-shadow:var(--shade)}
  .zp-who-av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--fill-2);color:var(--text-2,#a1a1a6)}
  .zp-who-av.on{background:rgba(255,255,255,.11);color:var(--text,#f5f5f7)}
  .zp-who-tx{min-width:0}
  .zp-who-tx b{display:block;font-size:13.5px;font-weight:620;letter-spacing:-.01em;color:var(--text,#f5f5f7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
  .zp-who-tx span{display:block;font-size:11.5px;color:var(--text-3,#6e6e73);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
  .zp-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.1);font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--text,#f5f5f7)}
  .zp-badge i{width:6px;height:6px;border-radius:50%;background:var(--tt)}
  .zp-badge.off{background:var(--fill);color:var(--text-3,#6e6e73)}
  .zp-badge.off i{background:var(--text-4,#48484a)}

  /* ── Cards ────────────────────────────────────────────────────────────── */
  .zp-card{padding:clamp(18px,2.4vw,24px);border-radius:var(--r4,30px);background:var(--fill);box-shadow:var(--shade);margin-bottom:16px}
  .zp-card--quiet{background:rgba(255,255,255,.025);box-shadow:none}
  .zp-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
  .zp-head h2{margin:0;font-family:var(--font-display);font-size:16px;font-weight:650;letter-spacing:-.014em;color:var(--text,#f5f5f7)}
  .zp-head p{margin:4px 0 0;font-size:12.5px;color:var(--text-3,#6e6e73)}

  /* ── Two-up uploader ──────────────────────────────────────────────────── */
  .zp-up{display:grid;grid-template-columns:minmax(0,296px) minmax(0,1fr);gap:clamp(18px,2.4vw,26px);align-items:start}
  @media (max-width:760px){ .zp-up{grid-template-columns:1fr} }

  /* Left: the video surface. Filled, never outlined. */
  .zp-stage{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:11px;aspect-ratio:9/16;padding:22px 18px;border-radius:var(--r3,22px);background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.055),rgba(255,255,255,.015) 62%),#0b0b0d;text-align:center;cursor:pointer;overflow:hidden;transition:box-shadow var(--dur-2,.22s) var(--ease-out),transform var(--dur-2,.22s) var(--ease-out)}
  .zp-stage:hover,.zp-stage:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.2),var(--shade);transform:translateY(-1px);outline:none}
  .zp-stage.drag{box-shadow:0 0 0 3px rgba(255,255,255,.34),var(--shade)}
  .zp-stage.has-file{cursor:pointer;padding:0;background:#000}
  .zp-stage.has-file:hover{transform:none;box-shadow:var(--shade)}
  /* Chosen video on a phone: the surface takes the clip's own shape (set as
     --zp-ar from S.meta) instead of the fixed 9/16, and is capped to a slice of
     the viewport so the caption, privacy list and Publish stay reachable.
     Same pattern the full-view player already uses (--zv-ar / --zv-fr). */
  @media (max-width:760px){
    .zp-stage.has-file{aspect-ratio:var(--zp-ar,9/16);max-height:62vh;max-height:min(62dvh,560px)}
  }
  .zp-stage-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:999px;background:var(--fill-2);color:var(--text,#f5f5f7)}
  .zp-stage b{font-size:14.5px;font-weight:620;letter-spacing:-.01em;color:var(--text,#f5f5f7)}
  .zp-stage span{font-size:12px;line-height:1.5;color:var(--text-3,#6e6e73);max-width:24ch}
  .zp-vid{width:100%;height:100%;object-fit:contain;background:#000;display:block}
  .zp-overlay{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;justify-content:center;opacity:0;transition:opacity var(--dur-2,.22s)}
  .zp-stage.has-file:hover .zp-overlay{opacity:1}
  .zp-below{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}

  /* ── Form controls ────────────────────────────────────────────────────── */
  .zp-fld{display:block;margin-bottom:18px}
  .zp-fld-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
  .zp-fld-h b{font-size:13px;font-weight:600;color:var(--text,#f5f5f7)}
  .zp-fld-h i{font-style:normal;font-size:11.5px;color:var(--text-3,#6e6e73);font-variant-numeric:tabular-nums}
  .zp-in,.zp-ta{width:100%;box-sizing:border-box;padding:13px 15px;border:0;border-radius:16px;background:rgba(255,255,255,.06);color:var(--text,#f5f5f7);font:inherit;font-size:14px;line-height:1.5;transition:background var(--dur-1,.15s),box-shadow var(--dur-1,.15s)}
  .zp-ta{min-height:96px;resize:vertical}
  .zp-in:focus,.zp-ta:focus{outline:none;background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(255,255,255,.2)}
  .zp-in::placeholder,.zp-ta::placeholder{color:var(--text-4,#48484a)}
  select.zp-in{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;cursor:pointer}
  select.zp-in option{background:#141416;color:#f5f5f7}
  .zp-link{align-self:flex-start;margin:-8px 0 18px;padding:0;border:0;background:none;color:var(--text-3,#6e6e73);font:inherit;font-size:12.5px;cursor:pointer;transition:color var(--dur-1,.15s)}
  .zp-link:hover{color:var(--acc-hi)}

  /* ── Grouped settings ─────────────────────────────────────────────────── */
  .zp-label{display:block;margin:0 0 9px;font-size:13px;font-weight:600;color:var(--text,#f5f5f7)}
  .zp-group{border-radius:18px;background:rgba(255,255,255,.05);overflow:hidden;margin-bottom:18px}
  .zp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;cursor:pointer;box-shadow:0 -1px 0 var(--seam) inset;transition:background var(--dur-1,.15s)}
  .zp-row:first-child{box-shadow:none}
  .zp-row:hover{background:rgba(255,255,255,.035)}
  .zp-row.off{opacity:.42;cursor:not-allowed}
  .zp-row-tx{min-width:0}
  .zp-row-tx b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.008em;color:var(--text,#f5f5f7)}
  .zp-row-tx span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--text-3,#6e6e73)}
  .zp-sub{padding:2px 15px 14px;background:rgba(0,0,0,.16)}
  .zp-chk{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:13px;line-height:1.5;color:var(--text-2,#a1a1a6);cursor:pointer}
  .zp-chk input{flex:none;margin:3px 0 0;width:16px;height:16px;accent-color:var(--acc)}
  .zp-chk b{color:var(--text,#f5f5f7);font-weight:620}
  .zp-note{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-3,#6e6e73)}

  /* Switch */
  .zp-sw{position:relative;flex:none;width:46px;height:27px}
  .zp-sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
  .zp-sw i{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.16);transition:background var(--dur-2,.22s);pointer-events:none}
  .zp-sw i:after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform var(--dur-2,.22s) var(--ease-spring)}
  .zp-sw input:checked + i{background:#f5f5f7}
  .zp-sw input:checked + i:after{background:#0a0a0c;transform:translateX(19px)}
  .zp-sw input:disabled + i{opacity:.35}

  /* ── Buttons ──────────────────────────────────────────────────────────── */
  .zp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 26px;border:0;border-radius:20px;background:#f5f5f7;color:#000;font:inherit;font-size:15px;font-weight:600;letter-spacing:-.008em;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform var(--dur-1,.15s),box-shadow var(--dur-1,.15s),background var(--dur-1,.15s)}
  .zp-btn:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.5)}
  .zp-btn:active:not([disabled]){transform:translateY(0)}
  .zp-btn[disabled]{background:rgba(255,255,255,.06);color:var(--text-3,#6e6e73);box-shadow:none;cursor:not-allowed;transform:none}
  .zp-btn--tt{background:#f5f5f7;color:#000;box-shadow:0 1px 2px rgba(0,0,0,.4)}
  .zp-btn--tt:hover:not([disabled]){box-shadow:0 2px 8px rgba(0,0,0,.5)}
  .zp-btn--soft{background:var(--fill-2);color:var(--text,#f5f5f7);box-shadow:none}
  .zp-btn--soft:hover:not([disabled]){background:rgba(255,255,255,.16);transform:translateY(-1px)}
  .zp-btn--full{display:flex;width:100%}
  .zp-btn--sm{min-height:38px;padding:0 16px;font-size:13px;border-radius:12px}
  .zp-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

  /* ── Consent ──────────────────────────────────────────────────────────── */
  .zp-consent{display:flex;align-items:flex-start;gap:11px;margin:16px 0 18px;font-size:12.5px;line-height:1.55;color:var(--text-2,#a1a1a6);cursor:pointer}
  .zp-consent input{flex:none;margin:2px 0 0;width:16px;height:16px;accent-color:var(--acc)}
  .zp-consent a{color:var(--acc-hi);text-decoration:none}
  .zp-consent a:hover{text-decoration:underline}

  /* ── Progress ─────────────────────────────────────────────────────────── */
  .zp-prog{margin-top:16px}
  .zp-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
  .zp-bar > i{display:block;height:100%;width:0;border-radius:999px;background:#f5f5f7;transition:width var(--dur-3,.32s) var(--ease-out)}
  .zp-meta{display:flex;justify-content:space-between;gap:12px;margin-top:9px;font-size:12px;color:var(--text-3,#6e6e73);font-variant-numeric:tabular-nums}
  .zp-msg{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--text-2,#a1a1a6)}
  .zp-msg:empty{display:none}
  .zp-msg.err{color:var(--red,#ff453a)}.zp-msg.ok{color:var(--text,#f5f5f7)}.zp-msg.warn{color:var(--amber,#e8e8ed)}

  /* ── Summary + chips ──────────────────────────────────────────────────── */
  .zp-sum{padding:15px 17px;border-radius:18px;background:rgba(0,0,0,.2);margin-bottom:16px}
  .zp-sum dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0;font-size:13px}
  .zp-sum dt{color:var(--text-3,#6e6e73);white-space:nowrap}
  .zp-sum dd{margin:0;color:var(--text,#f5f5f7);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .zp-sum dd.dim{color:var(--text-3,#6e6e73)}
  .zp-sum p{margin:0;font-size:13px;color:var(--text-3,#6e6e73)}
  .zp-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:var(--fill-hi);font-size:11.5px;font-weight:600;color:var(--text-2,#a1a1a6);font-variant-numeric:tabular-nums}
  .zp-chip.on{background:rgba(255,255,255,.12);color:var(--text,#f5f5f7)}
  .zp-chip.warn{background:rgba(255,255,255,.1);color:var(--amber,#e8e8ed)}

  /* ── Post status ──────────────────────────────────────────────────────── */
  .zp-posts{display:flex;flex-direction:column;gap:8px}
  .zp-post{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:16px;background:rgba(255,255,255,.05)}
  .zp-post-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--fill-2);color:var(--text-2,#a1a1a6)}
  .zp-post-tx{min-width:0;flex:1}
  .zp-post-tx b{display:block;font-size:13.5px;font-weight:600;color:var(--text,#f5f5f7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .zp-post-tx span{display:block;margin-top:2px;font-size:11.5px;color:var(--text-3,#6e6e73)}
  .zp-empty{padding:26px 18px;border-radius:18px;background:rgba(255,255,255,.03);text-align:center}
  .zp-empty b{display:block;font-size:13.5px;font-weight:620;color:var(--text,#f5f5f7)}
  .zp-empty span{display:block;margin-top:5px;font-size:12px;color:var(--text-3,#6e6e73)}

  .zp-log{margin:0;font-family:var(--font-code,ui-monospace,"SF Mono",Menlo,Consolas,monospace);font-size:11.5px;line-height:1.68;color:var(--text-3,#6e6e73);white-space:pre-wrap;word-break:break-word}
  .zp-foot{margin:clamp(28px,4vw,44px) 0 0;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;font-size:12.5px;color:var(--text-3,#6e6e73)}
  .zp-foot a{color:var(--text-2,#a1a1a6);text-decoration:none}
  .zp-foot a:hover{color:var(--text,#f5f5f7)}
  .zp-foot .sp{flex:1}
  .hide{display:none !important}
  @media (prefers-reduced-motion:reduce){ .zp-btn,.zp-stage,.zp-sw i,.zp-sw i:after,.zp-bar > i{transition:none} }


/* ── Upload: chosen-video state (frame tag, cover strip) ───────────────── */
.zp-mt{margin-top:12px}
.zp-link--plain{margin:10px 2px 0}
.zp-stage-tag{position:absolute;left:11px;right:11px;bottom:11px;display:flex;flex-direction:column;gap:3px;padding:9px 12px;border-radius:12px;background:rgba(0,0,0,.64);text-align:left;pointer-events:none}
.zp-stage-tag b{font-size:12.5px;font-weight:600;color:#f5f5f7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zp-stage-tag span{font-size:11px;color:#a1a1a6;font-variant-numeric:tabular-nums}
.zp-cover-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:14px 2px 8px;font-size:12.5px;font-weight:600;color:var(--text,#f5f5f7)}
.zp-cover-head span:last-child{font-weight:500;color:var(--text-3,#6e6e73);font-variant-numeric:tabular-nums}
.zp-cover{display:flex;gap:6px;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin}
.zp-cover-i{flex:none;width:54px;height:96px;padding:0;border:0;border-radius:11px;overflow:hidden;background:rgba(255,255,255,.06);cursor:pointer;opacity:.6;transition:opacity var(--dur-1,.15s),box-shadow var(--dur-1,.15s)}
.zp-cover-i:hover{opacity:.92}
.zp-cover-i img{width:100%;height:100%;object-fit:cover;display:block}
.zp-cover-i.sel{opacity:1;box-shadow:0 0 0 2px #f5f5f7}
.zp-hint{margin:8px 2px 0;font-size:11.5px;line-height:1.5;color:var(--text-3,#6e6e73)}

/* ── Upload: account chip becomes a button with a Disconnect menu ──────── */
.zp-user{position:relative;flex:none}
.zp-who{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border:0;border-radius:999px;background:var(--fill,rgba(255,255,255,.055));box-shadow:var(--shade);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background var(--dur-1,.15s)}
.zp-who:hover{background:var(--fill-hi,rgba(255,255,255,.085))}
.zp-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:168px;padding:6px;border-radius:14px;background:#141416;box-shadow:0 18px 48px rgba(0,0,0,.55);z-index:20}
.zp-menu-item{display:block;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--text,#f5f5f7);font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:background var(--dur-1,.15s)}
.zp-menu-item:hover{background:rgba(255,255,255,.07)}

/* ── Upload: creator avatar + account menu + cover selection ───────────── */
.zp-who-av{overflow:hidden}
.zp-who-av img{width:100%;height:100%;object-fit:cover;display:block}
.zp-user .zp-menu{min-width:212px}

.zp-menu-head{padding:8px 12px 7px;font-size:10.5px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--text-3,#6e6e73)}
.zp-menu-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.06)}
.zp-menu-av{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.1);color:var(--text-3,#6e6e73)}
.zp-menu-av img{width:100%;height:100%;object-fit:cover;display:block}
.zp-menu-name{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text,#f5f5f7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zp-menu-tick{flex:none;font-size:12px;line-height:1;color:var(--text,#f5f5f7)}
.zp-menu .zp-menu-item{margin-top:4px;color:var(--text-2,#a1a1a6)}
.zp-menu .zp-menu-item:hover{color:var(--text,#f5f5f7)}

.zp-cover-i{position:relative}
.zp-cover-i.sel{opacity:1;box-shadow:0 0 0 2px #f5f5f7}
.zp-cover-i.sel:after{content:"\2713";position:absolute;top:3px;right:3px;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#f5f5f7;color:#000;font-size:9px;font-weight:800;line-height:1}

/* ── Upload: account list, add row, tier gate ──────────────────────────────
   Avatars put the picture over the neutral glyph inside one grid cell, so a
   failed image reveals the glyph instead of shifting the row. */
.zp-who-av,.zp-menu-av{position:relative}
.zp-who-av img,.zp-menu-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.zp-menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zp-menu-count{font-weight:700;letter-spacing:.04em;color:var(--text-3,#6e6e73)}

.zp-menu-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:rgba(255,255,255,.06);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background var(--dur-1,.15s)}
.zp-menu-row:hover{background:rgba(255,255,255,.1)}
.zp-menu-row.on{background:rgba(255,255,255,.11)}
.zp-menu-row.on:hover{background:rgba(255,255,255,.14)}

.zp-menu-add{display:flex;align-items:center;gap:10px;margin-top:4px;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:600;color:var(--text,#f5f5f7);text-decoration:none;cursor:pointer;transition:background var(--dur-1,.15s)}
.zp-menu-add:hover{background:rgba(255,255,255,.07)}
.zp-menu-add.is-locked{cursor:default;color:var(--text-2,#a1a1a6)}
.zp-menu-add.is-locked:hover{background:transparent}
.zp-menu-add-ico{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.06);font-size:15px;font-weight:600;line-height:1}
.zp-menu-add.is-locked .zp-menu-add-ico{background:rgba(255,255,255,.04);color:var(--text-3,#6e6e73)}
.zp-menu-plan{flex:none;margin-left:auto;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.1);font-size:10px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;color:var(--text-2,#a1a1a6)}

.zp-menu-hint{margin:2px 2px 0;padding:0 10px;font-size:11.5px;line-height:1.45;color:var(--text-3,#6e6e73)}

/* The active account is the only fully-bright row, so which account a publish
   goes to is readable at a glance without relying on the tick alone. */
.zp-menu-row .zp-menu-name{color:var(--text-2,#a1a1a6)}
.zp-menu-row:hover .zp-menu-name{color:var(--text,#f5f5f7)}
.zp-menu-row.on{background:rgba(255,255,255,.12)}
.zp-menu-row.on .zp-menu-name{color:var(--text,#f5f5f7)}

/* ── Upload: Disconnect adopts the site's red ──────────────────────────────
   Matches how the rest of the site marks a destructive action (.btn-clear,
   .tt-error): the --red token, a soft red wash for state, no border stroke. */
.zp-menu .zp-menu-item.danger{color:var(--red,#ff453a)}
.zp-menu .zp-menu-item.danger:hover{background:rgba(255,69,58,.1);color:var(--red,#ff453a)}
.zp-menu .zp-menu-item.danger:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,69,58,.25)}

/* ── Upload: centre play button ────────────────────────────────────────────
   The native controls only appear on hover, so a paused preview looked like a
   still image with no way to play it. This sits centred on the frame and gets
   out of the way the moment playback starts. No border stroke: fill + shadow. */
.zp-play{position:absolute;top:50%;left:50%;z-index:3;display:grid;place-items:center;width:64px;height:64px;padding:0;border:0;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.55);transition:background var(--dur-1,.15s),transform var(--dur-1,.15s)}
.zp-play:hover{background:rgba(0,0,0,.68);transform:translate(-50%,-50%) scale(1.05)}
.zp-play:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.28),0 8px 26px rgba(0,0,0,.5)}
.zp-play{transform:translate(-50%,-50%)}
.zp-play .zp-ic{display:block}
.zp-play .zp-ic-play{margin-left:3px}
.zp-play .zp-ic-pause{display:none}
.zp-play.is-playing .zp-ic-play{display:none}
.zp-play.is-playing .zp-ic-pause{display:block;margin-left:0}
.zp-play.hide{display:none}

/* ── Upload: cover preview + scrub slider ──────────────────────────────────
   The selected frame is shown large above the strip so the choice is visible
   rather than implied by a tiny thumbnail, and the slider scrubs the same
   timeline the strip samples. */
.zp-cover-prev{display:flex;justify-content:center;margin:2px 2px 10px}
.zp-cover-row{position:relative}
.zp-cover-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:999px;background:rgba(0,0,0,.74);color:#f5f5f7;cursor:pointer;transform:translateY(-50%);box-shadow:0 4px 14px rgba(0,0,0,.5);transition:background var(--dur-1,.15s)}
.zp-cover-nav:hover{background:rgba(0,0,0,.9)}
.zp-cover-nav.prev{left:-2px}
.zp-cover-nav.next{right:-2px}
.zp-cover-nav:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.28),0 4px 14px rgba(0,0,0,.5)}
.zp-cover-prev canvas{width:126px;height:224px;border-radius:14px;background:#0b0b0d;box-shadow:var(--shade);display:block}

.zp-range{display:block;width:100%;height:20px;margin:8px 0 0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.zp-range:focus-visible{outline:none}
.zp-range::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,#f5f5f7 0 var(--fill,0%),rgba(255,255,255,.14) var(--fill,0%) 100%)}
.zp-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:999px;background:#f5f5f7;box-shadow:0 1px 4px rgba(0,0,0,.55)}
.zp-range::-moz-range-track{height:4px;border-radius:999px;background:rgba(255,255,255,.14)}
.zp-range::-moz-range-progress{height:4px;border-radius:999px;background:#f5f5f7}
.zp-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:999px;background:#f5f5f7;box-shadow:0 1px 4px rgba(0,0,0,.55)}
.zp-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(255,255,255,.24)}

/* ── Upload: maintenance notice ─────────────────────────────────────────────
   Warning yellow and red, taken from the theme's own tokens (--amber #ffd60a,
   --red #ff453a). No border strokes — the tint and the shadow carry it, the same
   way every other surface on the site does. */
.zp-maint{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px;padding:16px 18px;border-radius:var(--r2,16px);background:rgba(255,214,10,.085);box-shadow:0 20px 52px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.05)}
.zp-maint-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:rgba(255,214,10,.14);color:var(--amber,#ffd60a)}
.zp-maint-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.zp-maint-tx b{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--amber,#ffd60a)}
.zp-maint-tx span{font-size:13.5px;line-height:1.5;color:var(--text-2,#a1a1a6)}
.zp-maint-tx strong{font-weight:700;color:var(--red,#ff453a)}

/* While the notice is up the tool is inert, so nobody queues up work that cannot
   be sent. The notice itself stays fully visible and interactive. */
.zp.is-maint .zp-card,.zp.is-maint .zp-stage{opacity:.5;pointer-events:none;filter:saturate(.55)}
.zp.is-maint .zp-maint{opacity:1;pointer-events:auto;filter:none}

/* ── Upload: visibility listbox ─────────────────────────────────────────────
   Replaces the native <select>, whose popup is drawn by the OS and cannot be
   themed. Fills and shadows only — no border strokes, matching the account menu
   and the rest of the site. */
.zp-sel{position:relative}
.zp-sel-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 15px;border:0;border-radius:var(--r,12px);background:var(--fill,rgba(255,255,255,.055));box-shadow:var(--shade);font:inherit;font-size:14px;letter-spacing:-.005em;color:var(--text,#f5f5f7);text-align:left;cursor:pointer;transition:background var(--dur-1,.15s)}
.zp-sel-btn:hover{background:var(--fill-hi,rgba(255,255,255,.085))}
.zp-sel-btn[disabled]{opacity:.5;cursor:not-allowed}
.zp-sel-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.2),var(--shade)}
.zp-sel-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zp-sel-val.ph{color:var(--text-3,#6e6e73)}
.zp-sel-care{flex:none;color:var(--text-3,#6e6e73);transition:transform var(--dur-1,.15s)}
.zp-sel.open .zp-sel-care{transform:rotate(180deg)}
.zp-sel-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;max-height:268px;overflow-y:auto;padding:6px;border-radius:14px;background:#141416;box-shadow:0 20px 54px rgba(0,0,0,.6)}
.zp-sel-opt{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:13.5px;color:var(--text,#f5f5f7);text-align:left;cursor:pointer;transition:background var(--dur-1,.15s)}
.zp-sel-opt:hover,.zp-sel-opt:focus-visible{background:rgba(255,255,255,.075);outline:none}
.zp-sel-opt-tx{flex:1;min-width:0}
.zp-sel-opt-note{flex:none;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.07);font-size:10px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;color:var(--text-3,#6e6e73)}
.zp-sel-tick{flex:none;font-size:12px;line-height:1;color:var(--text,#f5f5f7);opacity:0}
.zp-sel-opt.on .zp-sel-tick{opacity:1}
.zp-sel-opt.locked{opacity:.42;cursor:not-allowed}
.zp-sel-opt.locked:hover{background:transparent}


/* ── Brand mark ─────────────────────────────────────────────────────────────
   logo-mark.png is a transparent monogram, so the rounded-square clip that
   suited the old icon would slice the corners off its strokes. The modal
   variants of .nav-logo-mark carry their own inline width/radius and are
   unaffected by these. */
.nav-logo-mark,.af-mark{border-radius:0}
.nav-logo-mark{width:22px;height:22px}
.af-mark{width:20px;height:20px}
/* ══ SHOP (credits) ══════════════════════════════════════════════════════════
   The shop replaces the tiers page. Credits are bought in free-form amounts at
   a flat rate (default 10 credits per $1, $5–$100, env-driven server-side) and
   never expire, so there is no tier ladder to render — just an amount picker, a
   live credit preview and a PayPal button.

   Same house rules as the rest of the sheet: no border strokes anywhere, fills
   and tints and soft shadows only, monochrome. The hero/primary-button accents
   mirror .page-tiers so the two pages read as one product. */
/* These three used to sit here and made the shop GREY: a white/grey hero-title
   gradient overriding the theme's blue one, and a flat black shadow replacing the
   brand glow on primary buttons. Removed so the theme's own rules apply — the
   house .btn-primary is white WITH a --acc-glow halo, which is where the blue
   lives on a CTA. Deleting them is what actually makes the shop read as ours. */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.shop-card{border-radius:var(--r3);background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);box-shadow:var(--glass-shadow);padding:28px;position:relative;overflow:hidden}
.shop-card-featured{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(16,16,18,.72) 45%);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 22px 65px rgba(0,0,0,.42)}
.shop-label{font-size:10px;font-weight:650;letter-spacing:.45px;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.shop-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.shop-preset{display:inline-flex;align-items:center;justify-content:center;min-width:62px;padding:10px 16px;border-radius:var(--pill);font-size:13px;font-weight:600;color:var(--text-2);background:var(--bg-surface);border:0;cursor:pointer;box-shadow:var(--zshade);transition:var(--dur-2) var(--ease-out);font-family:inherit}
.shop-preset:hover{background:var(--bg-surface-hi);color:#fff;transform:translateY(-1px)}
.shop-preset.sel{background:#f5f5f7;color:#000;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.shop-amount{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.shop-amount-cur{font-size:22px;font-weight:650;color:var(--text-3);line-height:1}
.shop-amount-val{font-size:36px;font-weight:700;letter-spacing:-1.8px;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.shop-amount input{flex:1;min-width:0;padding:14px 16px;border-radius:var(--r-input,14px);font-size:22px;font-weight:650;letter-spacing:-.5px;color:#fff;background:rgba(255,255,255,.055);border:0;outline:none;box-shadow:var(--zshade);transition:var(--dur-2) var(--ease-out);font-family:inherit}
.shop-amount input:focus{background:rgba(255,255,255,.075);box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.shop-amount input::-webkit-outer-spin-button,.shop-amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.shop-amount input[type=number]{-moz-appearance:textfield;appearance:textfield}
.shop-preview{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 20px;border-radius:var(--r2);background:var(--bg-surface);box-shadow:var(--zshade);margin-bottom:18px}
.shop-preview-lbl{font-size:11px;font-weight:600;letter-spacing:.3px;color:var(--text-3)}
.shop-preview-val{font-size:30px;font-weight:700;letter-spacing:-1.4px;color:#fff}
.shop-preview-val span{font-size:13px;font-weight:600;color:var(--text-3);letter-spacing:0;margin-left:6px}
.shop-buy{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;border-radius:var(--pill);font-size:15px;font-weight:700;color:#000;background:#f5f5f7;border:0;cursor:pointer;box-shadow:0 6px 26px rgba(0,0,0,.42);transition:var(--dur-2) var(--ease-out);font-family:inherit}
.shop-buy:hover:not(:disabled){background:#fff;transform:translateY(-2px) scale(1.01)}
.shop-buy:active:not(:disabled){transform:scale(.97)}
.shop-buy:disabled{opacity:.45;cursor:not-allowed}
.shop-hint{font-size:11.5px;color:var(--text-3);text-align:center;margin-top:11px;line-height:1.55}
.shop-msg{margin-top:14px;padding:13px 15px;border-radius:var(--r2);font-size:12.5px;line-height:1.6;background:var(--bg-surface);color:var(--text-2);box-shadow:var(--zshade)}
.shop-msg.ok{background:rgba(255,255,255,.1);color:#fff}
.shop-msg.warn{background:rgba(255,214,10,.08);color:var(--amber)}
.shop-msg.err{background:rgba(255,69,58,.08);color:var(--red)}
.shop-signin{margin-top:12px;display:flex}
.shop-feature{display:flex;align-items:flex-start;gap:11px;font-size:12.5px;color:var(--text-2);padding:9px 0;line-height:1.55}
.shop-feature-ic{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.07);color:#fff;box-shadow:var(--zshade)}
.shop-feature-ic svg{stroke:currentColor}
.shop-feature b{color:#fff;font-weight:650}
.shop-hide{display:none!important}
@media(max-width:640px){.shop-grid{grid-template-columns:1fr}.shop-preview-val{font-size:26px}.shop-card{padding:22px}}

/* ── Shop · Plans ─────────────────────────────────────────────────────────────
   Layout follows the reference: a four-cell spec strip, then three cards, each
   reading label → chip / big title / summary / rule / metric / rule / checklist /
   CTA / note.

   ALL of this is CSS. The markup carries content only — no wrapper divs, no inline
   styles, nothing presentational. The in-card rules are 1px background hairlines on
   ::before, not borders.

   Rules honoured here: no boxes or rings around chips and tick marks (the reference
   has rules but no boxes), no coloured glows, and shadow comes only from the house
   --glass-shadow. The blue lives in the separate "Shop · tint" block below. */
.plan-head{text-align:center;max-width:780px;margin:0 auto 30px}
.plan-kicker{font-size:11px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.plan-intro{font-size:14.5px;line-height:1.65;color:var(--text-2);margin:12px auto 0}
.plan-intro strong{color:#fff;font-weight:650}

/* Spec strip */
.plan-spec{display:grid;grid-template-columns:repeat(4,1fr);border-radius:var(--r3);background:var(--glass-bg);box-shadow:var(--glass-shadow);padding:22px 8px;margin-bottom:20px}
.plan-spec-cell{position:relative;display:flex;align-items:center;gap:13px;justify-content:center;padding:0 14px}
.plan-spec-cell+.plan-spec-cell::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:38px;background:rgba(255,255,255,.085)}
.plan-spec-badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:24px;padding:0 9px;border-radius:8px;background:rgba(255,255,255,.07);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.4px;flex-shrink:0}
.plan-spec-num{font-size:17px;font-weight:700;letter-spacing:-.45px;color:#fff;line-height:1.25}
.plan-spec-sub{font-size:11.5px;color:var(--text-3);margin-top:1px}

/* Cards */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;align-items:stretch}
.plan-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r3);background:var(--glass-bg);box-shadow:var(--glass-shadow);padding:26px 24px 22px;overflow:hidden;transition:transform var(--dur-3) var(--ease-out)}
.plan-card:hover{transform:translateY(-3px)}
.plan-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.plan-name{font-size:12.5px;font-weight:600;color:var(--text-3);letter-spacing:.2px;margin-bottom:6px}
.plan-title{font-size:27px;font-weight:700;letter-spacing:-1.1px;color:#fff;line-height:1.12}
.plan-chip{font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--text-2);white-space:nowrap;flex-shrink:0}
.plan-summary{font-size:12.5px;line-height:1.6;color:var(--text-3);margin:0 0 20px;min-height:42px}

/* In-card rules: 1px background hairlines on ::before, never a border. */
.plan-metric,.plan-list{position:relative;padding-top:20px}
.plan-metric::before,.plan-list::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.075)}
.plan-metric{display:flex;align-items:baseline;gap:11px;padding-bottom:20px}
.plan-metric-num{font-size:46px;font-weight:700;letter-spacing:-2.2px;color:#fff;line-height:.95;font-variant-numeric:tabular-nums}
.plan-metric-sub{font-size:11.5px;line-height:1.4;color:var(--text-3)}
.plan-list{list-style:none;margin:0;padding-bottom:22px;display:flex;flex-direction:column;gap:10px}
.plan-list li{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.plan-list b{color:#fff;font-weight:650}
/* Bare tick. No box, no ring — the reference draws plain marks. */
.plan-check{flex-shrink:0;display:inline-flex;justify-content:center;width:14px;color:var(--text-3);font-size:12px;font-weight:700;line-height:1.5}
.plan-foot{margin-top:auto}
.plan-foot .btn-primary,.plan-foot .btn-secondary{display:flex;width:100%;justify-content:center;padding:13px;border-radius:14px;font-size:13.5px}
.plan-note{font-size:10.5px;color:var(--text-3);text-align:center;margin-top:11px}
.plan-footnote{font-size:12px;color:var(--text-3);text-align:center;line-height:1.6;max-width:640px;margin:0 auto}

/* ── Shop · Buy credits ───────────────────────────────────────────────────────
   The amount is chosen with a slider. The range input is restyled from scratch in
   CSS — track, fill and thumb — with no vendor markup and no extra elements: the
   accent fill is a background gradient on the track, so the element stays a plain
   <input type="range">. */
.shop-slider{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;margin:6px 0 4px}
.shop-slider::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#0a84ff var(--fill,28%),rgba(255,255,255,.12) var(--fill,28%))}
.shop-slider::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.12)}
.shop-slider::-moz-range-progress{height:6px;border-radius:999px;background:#0a84ff}
.shop-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.shop-slider::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.shop-slider:focus-visible{outline:2px solid rgba(10,132,255,.45);outline-offset:6px;border-radius:999px}
.shop-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);margin-bottom:18px}

@media(max-width:900px){
  .plan-spec{grid-template-columns:1fr 1fr;row-gap:16px}
  .plan-spec-cell+.plan-spec-cell::before{display:none}
  .plan-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
  .plan-summary{min-height:0}
}
/* ── Shop · tint ──────────────────────────────────────────────────────────────
   BLUE, AND ONLY ON THE FEATURED CARD.

   Green is gone: it was the competitor's Donator colour, borrowed from their
   palette, and the owner rejected it. The blue now sits on the featured plan
   alone, and the other two cards stay NEUTRAL — three coloured cards compete for
   the eye, one does not.

   Still enforced from the last pass: NO glows (no blurred box-shadow, no radial
   bloom) and NO strokes (no `inset 0 0 0 1px` rings). Every surface is a flat wash.

   The blue is the house accent from the "ZILEM 2.0 — Black & Blue" theme above:
   #0a84ff, with #9cc8ff for text marks. (The inherited handover §9.6 claims "no
   blue, no cyan" — it contradicts the deployed theme, so it is treated as stale;
   the owner confirmed the blue is ours.)

   Page-level elements (kicker, section title, the spec bar) keep a whisper of blue
   — they are not plan cards. Everything card-specific is declared under
   `.plan-card.is-featured` so nothing bleeds onto Free or Plus. */
.plans .plan-kicker{color:#9cc8ff}
.page-shop .section-title span{background:linear-gradient(120deg,#fff,#9cc8ff 55%,#0a84ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* The spec bar is an info strip, not a plan card: a whisper of blue. */
.plans .plan-spec{background:linear-gradient(180deg,rgba(10,132,255,.07),rgba(10,132,255,.015) 70%),var(--glass-bg)}
.plans .plan-spec-badge{background:rgba(10,132,255,.14);box-shadow:none;color:#9cc8ff}

/* Free and Plus: deliberately NO colour. The base card styling applies untouched,
   so they read as neutral glass and the blue card is the only one that stands out. */

/* Premium — the one coloured card, in our blue. */
.plans .plan-card.is-featured{background:linear-gradient(180deg,rgba(10,132,255,.13),rgba(10,132,255,.035) 58%),var(--glass-bg)}
.plans .plan-card.is-featured .plan-name{color:#9cc8ff;text-shadow:0 0 16px rgba(10,132,255,.55)}
.plans .plan-card.is-featured .plan-title{color:#fff;text-shadow:0 0 26px rgba(10,132,255,.42)}
.plans .plan-card.is-featured .plan-chip{background:rgba(10,132,255,.16);box-shadow:none;color:#cfe4ff}
.plans .plan-card.is-featured .plan-chip.is-hot{background:#0a84ff;color:#fff;box-shadow:0 0 18px rgba(10,132,255,.5)}
.plans .plan-card.is-featured .plan-check{color:#9cc8ff}
.plans .plan-card.is-featured .plan-metric-num{color:#9cc8ff}

/* Shop . the featured card, lit (2026-10-16) ---------------------------------
   #shop-access is the shop's own section, not .plans, so the blue featured
   treatment above stopped at the dashboard: the Premium card the dashboard tints
   arrived on the shop as flat glass, and "Most popular" as a grey chip. The card
   is declared for the shop here, and it carries the glow the dashboard's has -
   the blue wash, a soft bloom under the card, and a tighter one on the chip - so
   "Premium / Unlimited / Most popular" reads as the lit one. Free and Plus stay
   neutral: one lit card is a highlight, three are a competition. The dashboard's
   own card is untouched by this block. The bloom rides on top of the card's
   existing --glass-shadow, so the dark depth under it is unchanged, and z-index
   lifts the card so its halo paints over its neighbours instead of under them.
   Tune the glow with the rgba() pairs: the first pair is the depth shadow under
   the card, the second the wide halo, and hover widens and brightens both. */
#shop-access .plan-card.is-featured{
  position:relative;z-index:1;
  background:linear-gradient(180deg,rgba(10,132,255,.13),rgba(10,132,255,.035) 58%),var(--glass-bg);
  box-shadow:var(--glass-shadow),0 10px 34px rgba(10,132,255,.22),0 0 78px rgba(10,132,255,.15)}
#shop-access .plan-card.is-featured:hover{
  box-shadow:var(--glass-shadow),0 16px 48px rgba(10,132,255,.30),0 0 108px rgba(10,132,255,.24)}
#shop-access .plan-card.is-featured .plan-name{color:#9cc8ff;text-shadow:0 0 16px rgba(10,132,255,.55)}
#shop-access .plan-card.is-featured .plan-title{color:#fff;text-shadow:0 0 26px rgba(10,132,255,.42)}
#shop-access .plan-card.is-featured .plan-chip{background:rgba(10,132,255,.16);box-shadow:none;color:#cfe4ff}
#shop-access .plan-card.is-featured .plan-chip.is-hot{background:#0a84ff;color:#fff;box-shadow:0 0 18px rgba(10,132,255,.5)}
#shop-access .plan-card.is-featured .plan-check{color:#9cc8ff}
#shop-access .plan-card.is-featured .plan-metric-num{color:#9cc8ff}

/* ── Shop · the buy panel ─────────────────────────────────────────────────────
   Structure follows the reference shop: eyebrow → title → plain-language sub →
   a price→credits readout → quick amounts → a custom row (slider AND a number
   box, kept in step) → the rate note → a rough video estimate → an order summary
   → the buy button.

   Flat tinting only: no glows, no rings, and no border strokes — every rule is a
   background, a gradient or a hairline drawn with `background` on ::before. Blue
   is the house accent (#0a84ff); it is the only colour on the page. */
.shop-panel{position:relative;border-radius:var(--r3);background:var(--glass-bg);box-shadow:var(--glass-shadow);padding:28px 26px}
.shop-panel-quiet{background:rgba(255,255,255,.025)}
.shop-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#9cc8ff;margin-bottom:10px}
.shop-panel-title{font-size:23px;font-weight:700;letter-spacing:-.8px;color:#fff;line-height:1.2;margin:0 0 8px}
.shop-panel-sub{font-size:12.5px;line-height:1.6;color:var(--text-3);margin:0 0 22px}

/* price → credits */
.shop-amount-display{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px;border-radius:18px;background:linear-gradient(180deg,rgba(10,132,255,.10),rgba(10,132,255,.025) 70%);margin-bottom:18px}
.shop-amount-display-price{font-size:38px;font-weight:700;letter-spacing:-2px;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.shop-amount-display-arrow{font-size:20px;color:#9cc8ff;opacity:.85}
.shop-amount-display-credits{font-size:26px;font-weight:700;letter-spacing:-1.1px;color:#9cc8ff;line-height:1}
.shop-amount-display-credits small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.3px;color:var(--text-3);margin-top:3px}

/* custom row: slider + number box */
.shop-custom{margin:20px 0 0}
.shop-custom-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px;color:var(--text-2);margin-bottom:10px}
.shop-custom-head span{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.shop-custom-row{display:flex;align-items:center;gap:16px}
.shop-custom-row .shop-slider{flex:1;margin:0}
.shop-custom-input-row{display:flex;align-items:center;gap:6px;flex-shrink:0;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.05)}
.shop-custom-input-row .shop-amount-cur{font-size:14px;font-weight:650;color:var(--text-3)}
.shop-input{width:64px;border:0;outline:none;background:transparent;color:#fff;font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;text-align:right}
.shop-input::-webkit-outer-spin-button,.shop-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.shop-input[type=number]{-moz-appearance:textfield}

.shop-note{font-size:11.5px;color:var(--text-3);margin:18px 0 0;line-height:1.6}
.shop-estimate{font-size:12.5px;color:var(--text-2);margin:8px 0 0;line-height:1.6}
.shop-estimate b{color:#9cc8ff;font-weight:650}
.shop-estimate.shop-hide{display:none}

/* order summary */
.shop-order{position:relative;margin:22px 0 0;padding-top:16px}
.shop-order::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.08)}
.shop-order-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--text-3);padding:5px 0}
.shop-order-row b{color:#fff;font-weight:650;font-variant-numeric:tabular-nums}
.shop-order-total{font-size:13px}
.shop-order-total b{font-size:16px;letter-spacing:-.4px}

/* ── Shop · "Estimate a video" ────────────────────────────────────────────────
   A native <details> accordion: it opens, closes and stays keyboard-operable
   with no script, and the summary carries only the chevron. Each chip prices one
   dimension and the readout below adds them — the page mirrors the server's
   additive equation rather than re-deriving it, so the two cannot disagree about
   what is being added. Flat tinting only, as above: backgrounds and hairlines,
   no strokes, no glows. Blue remains the page's only accent. */
.shop-vcalc{margin:16px 0 0;border-radius:14px;background:rgba(255,255,255,.025);overflow:hidden}
.shop-vcalc>summary{display:flex;align-items:center;gap:9px;padding:12px 14px;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer;list-style:none;transition:var(--dur-2) var(--ease-out)}
.shop-vcalc>summary::-webkit-details-marker{display:none}
.shop-vcalc>summary:hover{background:rgba(255,255,255,.03);color:#fff}
.shop-vcalc>summary:focus-visible{outline:2px solid rgba(10,132,255,.45);outline-offset:-2px}
.shop-vcalc-ic{flex-shrink:0;display:inline-flex;color:#9cc8ff}
/* The chevron is drawn, not an icon font: two edges rotated 45deg read as a
   caret at any size, and the open state is the same shape flipped. */
.shop-vcalc>summary::after{content:"";flex-shrink:0;width:7px;height:7px;margin-left:auto;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);opacity:.6;transition:transform var(--dur-2) var(--ease-out)}
.shop-vcalc[open]>summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.shop-vcalc-body{padding:2px 14px 16px}
.shop-vcalc-title{font-size:14.5px;font-weight:700;letter-spacing:-.2px;color:#fff;margin:0 0 6px}
.shop-vcalc-sub{font-size:11.5px;line-height:1.6;color:var(--text-3);margin:0 0 16px}
.shop-vcalc-group{margin:0 0 14px}
.shop-vcalc-label{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.shop-vcalc-opts{display:flex;flex-wrap:wrap;gap:7px}
.shop-vcalc-opt{display:inline-flex;align-items:baseline;gap:6px;padding:8px 12px;border-radius:var(--pill);border:0;font-size:12px;font-weight:600;color:var(--text-2);background:var(--bg-surface);box-shadow:var(--zshade);cursor:pointer;font-family:inherit;transition:var(--dur-2) var(--ease-out)}
.shop-vcalc-opt:hover{background:var(--bg-surface-hi);color:#fff}
.shop-vcalc-opt.sel{background:#f5f5f7;color:#000;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.shop-vcalc-opt:focus-visible{outline:2px solid rgba(10,132,255,.45);outline-offset:2px}
.shop-vcalc-opt-add{font-size:10.5px;font-weight:650;opacity:.6;font-variant-numeric:tabular-nums;white-space:nowrap}
.shop-vcalc-out{margin:18px 0 0;padding:20px 16px 16px;border-radius:16px;background:linear-gradient(180deg,rgba(10,132,255,.10),rgba(10,132,255,.02) 70%);text-align:center}
.shop-vcalc-credits{font-size:46px;font-weight:700;letter-spacing:-2.5px;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.shop-vcalc-credits-lbl{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#9cc8ff;margin-top:7px}
.shop-vcalc-eq{font-size:11.5px;line-height:1.6;color:var(--text-3);margin-top:9px;font-variant-numeric:tabular-nums}
.shop-vcalc-eq b{color:var(--text-2);font-weight:650}
.shop-vcalc-cover{font-size:11.5px;line-height:1.6;color:var(--text-3);text-align:center;margin:11px 0 0}
.shop-vcalc-cover b{color:#9cc8ff;font-weight:650}

/* ── Shop · agreement gate ────────────────────────────────────────────────────
   The refund terms only bind if the buyer was shown them and said yes, so this
   sits directly above the buy button and the button stays disabled until it is
   ticked. The input stays in the tab order — only its paint is replaced, by a
   sibling box — because `display:none` would make it unreachable by keyboard
   and the gate would be enforceable only with a mouse. */
.shop-agree{display:flex;align-items:flex-start;gap:10px;margin:16px 0;font-size:11.5px;line-height:1.6;color:var(--text-3);text-align:left;cursor:pointer}
.shop-agree input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.shop-agree-box{flex-shrink:0;width:16px;height:16px;margin-top:1px;border-radius:5px;background:rgba(255,255,255,.09);display:inline-flex;align-items:center;justify-content:center;transition:var(--dur-2) var(--ease-out)}
.shop-agree-box::after{content:"";width:4px;height:8px;margin-top:-2px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) scale(0);transition:transform var(--dur-2) var(--ease-out)}
.shop-agree input:checked+.shop-agree-box{background:#0a84ff}
.shop-agree input:checked+.shop-agree-box::after{transform:rotate(45deg) scale(1)}
.shop-agree input:focus-visible+.shop-agree-box{outline:2px solid rgba(10,132,255,.45);outline-offset:2px}
.shop-agree:hover .shop-agree-box{background:rgba(255,255,255,.14)}
.shop-agree input:checked+.shop-agree-box,.shop-agree:hover input:checked+.shop-agree-box{background:#0a84ff}
.shop-agree-text a{color:#9cc8ff;text-decoration:none}
.shop-agree-text a:hover{text-decoration:underline}
/* The plan panels put the same gate inside a footer that is pushed to the bottom
   by margin-top:auto — without this the box would ride up against the list. */
.plan-foot .shop-agree{margin:0 0 12px}

@media(max-width:640px){
  .shop-custom-row{flex-direction:column;align-items:stretch;gap:12px}
  .shop-custom-input-row{justify-content:flex-end}
  .shop-vcalc-opt{padding:7px 10px;font-size:11.5px}
  .shop-vcalc-credits{font-size:40px;letter-spacing:-2px}
}

/* ── Shop · head + section switcher ───────────────────────────────────────────
   Structure follows the reference shop: the title and its one-line explainer sit
   on the left, and the section switcher (Credits / Plus / Premium) sits on the
   right of the same row, with the whole group wrapping on narrow screens.

   The switcher is a segmented track with a light pill on the active option — the
   reference does the same. Flat tinting only: no border strokes, no glows. Blue
   is the house accent and appears on the active pill's trial chip and the focus
   ring; the rest is the theme's own glass. */
/* Width and padding come from .container, which the head now sits inside — an
   independent max-width here was what pushed the title left of the panels
   below it and the switcher right of them. */
.shop-head{display:flex;align-items:center;justify-content:space-between;gap:24px 32px;flex-wrap:wrap;margin:0 0 30px}
.shop-head-main{flex:1 1 360px;min-width:0}
.shop-tabs{flex:0 0 auto}
.shop-title{font-size:clamp(34px,5vw,46px);font-weight:700;letter-spacing:-2px;line-height:1;margin:0 0 12px;background:linear-gradient(120deg,#fff,#9cc8ff 55%,#0a84ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.shop-sub{font-size:13.5px;line-height:1.6;color:var(--text-3);margin:0;max-width:560px}

.shop-tabs{display:inline-flex;gap:3px;padding:4px;border-radius:999px;background:rgba(255,255,255,.055);flex-shrink:0}
.shop-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text-2);background:transparent;border:0;cursor:pointer;white-space:nowrap;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.shop-tab:hover{color:#fff;background:rgba(255,255,255,.06)}
.shop-tab.is-active{background:#f5f5f7;color:#0a0a0b}
.shop-tab.is-active:hover{background:#fff}
.shop-tab:focus-visible{outline:2px solid rgba(10,132,255,.5);outline-offset:2px}
.shop-tab-trial{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:rgba(10,132,255,.18);color:#cfe4ff}
.shop-tab.is-active .shop-tab-trial{background:#0a84ff;color:#fff}

@media(max-width:720px){
  .shop-head{align-items:flex-start}
  .shop-tabs{width:100%;justify-content:space-between}
  .shop-tab{flex:1;justify-content:center;padding:9px 10px}
}

/* The plan CTA. A real button, not a link out to Discord: it posts to the tier
   checkout and completes at PayPal. */
/* ── Plan panels · buy button ─────────────────────────────────────────────────
   One white CTA shared by Plus and Premium.

   This used to be a blue tint with a separate .is-primary override for Premium,
   and the two rules disagreed about hover: .is-primary:hover won `background`
   on specificity but never declared `color`, so the shared hover rule's #fff
   still applied and the label rendered white on a white button. The variant is
   gone rather than patched — a single rule that names its own hover colour
   cannot be half-overridden by another.

   `background` and `color` are both set on the hover rule on purpose. Leaving
   either to inherit is what produced the bug: a hover state that changes only
   the surface under the text has to say so explicitly. */
.plan-buy{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:14px;border:0;cursor:pointer;font-size:13.5px;font-weight:650;background:#f5f5f7;color:#0a0a0b;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.plan-buy:hover:not(:disabled){background:#fff;color:#0a0a0b}
.plan-buy:disabled{opacity:.55;cursor:default}
.plan-buy:focus-visible{outline:2px solid rgba(10,132,255,.5);outline-offset:2px}

/* ── Shop · page offset ───────────────────────────────────────────────────────
   The shop no longer has a .page-hero — the head row replaced it — and
   .page-hero was what held the page clear of the fixed nav (padding:150px).
   Without it the entire page sat UNDER the header. This puts the offset back,
   on the page wrapper so the head, the switcher and the panels all shift
   together. Scoped to .page-shop: every other page still has its hero. */
.page-shop{padding-top:150px}
@media(max-width:640px){.page-shop{padding-top:112px}}

/* ── Account · identity rows ──────────────────────────────────────────────────
   Username / Google / Discord, as three label–value rows rather than three
   separate cards. Discord is deliberately the plain one and Google the one with
   a button: the account is keyed on discord_id, so Discord is not something you
   connect or disconnect, it is what you are. Flat tinting and hairlines only,
   matching the shop panels — no strokes, no glows, blue as the only accent. */
.zm-rows{margin:14px 0 2px;border-radius:14px;background:rgba(255,255,255,.025);overflow:hidden}
.zm-row{display:flex;align-items:center;gap:10px;padding:11px 13px;font-size:12.5px}
/* Hairline between rows drawn as a gradient rather than border-top, so the line
   fades at the edges and the stack does not read as a boxed table. */
.zm-row+.zm-row{position:relative}
.zm-row+.zm-row::before{content:"";position:absolute;left:13px;right:13px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 12%,rgba(255,255,255,.08) 88%,transparent)}
.zm-row-k{flex-shrink:0;color:var(--text-3);font-weight:600;letter-spacing:.2px}
.zm-row-v{flex:1;min-width:0;color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zm-row-v.dim{color:var(--text-3);font-weight:500}
/* Small enough to sit inside a row without turning it into a form. */
.zm-row-btn{flex-shrink:0;padding:5px 11px;border-radius:var(--pill);border:0;font-family:inherit;font-size:11px;font-weight:650;color:#e6e6ea;background:rgba(255,255,255,.08);cursor:pointer;transition:var(--dur-2) var(--ease-out)}
.zm-row-btn:hover:not(:disabled){background:rgba(255,255,255,.14);color:#fff}
.zm-row-btn:disabled{opacity:.5;cursor:default}
.zm-row-btn:focus-visible{outline:2px solid rgba(10,132,255,.5);outline-offset:2px}
/* A tag, not a button: nothing happens when you click "Connected". */
.zm-row-tag{flex-shrink:0;padding:4px 10px;border-radius:var(--pill);font-size:10.5px;font-weight:650;color:#9cc8ff;background:rgba(10,132,255,.13)}
/* The same rows, inside the sign-in modal, where the backdrop is the card. */
.zm-modal-handle{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.03);font-size:12.5px}

/* ── Google sign-in ──────────────────────────────────────────────────────────
   The slot stays empty and takes no space until GSI has actually rendered, so
   a deployment with no client id shows nothing at all. */
.zm-gsi-slot{display:flex;justify-content:center;margin:10px 0 0}
.zm-gsi-slot:empty{display:none}
.zm-gsi-needs{margin:10px 0 0;padding:10px 12px;border-radius:12px;font-size:11.5px;line-height:1.6;color:var(--text-2);background:rgba(255,255,255,.03)}
.zm-gsi-needs b{color:#fff}

#zilemGsiLink,#zilemHandle{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#zilemGsiLink.show,#zilemHandle.show{display:flex}
.zm-gsi-card{width:100%;max-width:360px;padding:20px;border-radius:18px;background:#0e0e10;box-shadow:0 24px 70px rgba(0,0,0,.62)}
.zm-gsi-head{display:flex;align-items:center;justify-content:space-between;font-size:14.5px;font-weight:700;color:#fff;letter-spacing:-.2px}
.zm-gsi-x{border:0;background:transparent;color:var(--text-3);font-size:14px;cursor:pointer;padding:2px 4px;border-radius:6px}
.zm-gsi-x:hover{color:#fff;background:rgba(255,255,255,.07)}
.zm-gsi-sub{margin:10px 0 16px;font-size:12px;line-height:1.65;color:var(--text-3)}
.zm-gsi-sub b{color:var(--text-2);font-weight:650}
.zm-gsi-host{display:flex;justify-content:center;min-height:0}
.zm-gsi-busy{display:none;margin-top:12px;text-align:center;font-size:12px;color:var(--text-3)}
.zm-gsi-input{width:100%;box-sizing:border-box;padding:12px 13px;border-radius:12px;border:0;font-family:inherit;font-size:13.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.06);outline:none}
.zm-gsi-input:focus{background:rgba(255,255,255,.09);box-shadow:0 0 0 2px rgba(10,132,255,.45)}
.zm-gsi-input::placeholder{color:rgba(255,255,255,.28);font-weight:500}
.zm-gsi-msg{margin-top:9px;font-size:11.5px;line-height:1.55;color:var(--text-3);min-height:0}
.zm-gsi-msg.err{color:#fca5a5}
.zm-gsi-msg.ok{color:#9cc8ff}
.zm-gsi-actions{display:flex;gap:9px;margin-top:16px}
.zm-gsi-btn{flex:1;padding:11px;border-radius:12px;border:0;font-family:inherit;font-size:12.5px;font-weight:650;cursor:pointer;color:#0a0a0b;background:#f5f5f7;transition:var(--dur-2) var(--ease-out)}
.zm-gsi-btn:hover:not(:disabled){background:#fff}
.zm-gsi-btn:disabled{opacity:.55;cursor:default}
.zm-gsi-btn.ghost{color:var(--text-2);background:rgba(255,255,255,.07)}
.zm-gsi-btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}
@media(max-width:520px){.zm-gsi-card{padding:17px}.zm-row{font-size:12px;padding:10px 12px}}

/* ── Top-bar account menu ──────────────────────────────────────────────────────
   Opens from the avatar button in the nav.

   WHY A MENU AND NOT THE MODAL: the avatar used to open the same centred dialog for
   everybody, signed in or not, so a member clicking their own face got a "Sign in"
   card they had already completed. Signed-in now opens this panel; signed-out still
   gets the sign-in modal, which is the only thing useful to them.

   `position:absolute` inside a relatively-positioned wrapper, so it hangs off the
   button and reads as a menu. Top-right transform-origin matches where it grows from.
   ------------------------------------------------------------------------------ */
.nav-user-wrap{ position: relative; display: flex; align-items: center; }

.zm-usermenu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 336px;
  max-width: calc(100vw - 20px);
  background: linear-gradient(180deg, #101318, #0a0c10);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.66), var(--zshade);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.985);
  transform-origin: top right;
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out), visibility .16s;
  z-index: 500;
  overflow: hidden;
}
.zm-usermenu.open{ opacity: 1; visibility: visible; transform: none; }

/* ── Identity ── */
.zm-um-id{ display: flex; align-items: center; gap: 11px; padding: 14px 15px 13px; }
.zm-um-av{
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); object-fit: cover;
}
.zm-um-names{ flex: 1; min-width: 0; }
.zm-um-name{
  font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zm-um-sub{ font-size: 10.5px; font-weight: 600; color: var(--text-3); margin-top: 2px; }
.zm-um-badge{
  flex-shrink: 0; padding: 4px 9px; border-radius: 100px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #cfd8e6; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
}
/* Tiers that outrank the free one get the accent, so the badge reads as an upgrade
   rather than a label. `data-tier` carries the tier key; the mapping lives in JS. */
.zm-um-badge[data-paid="1"]{ color: #cfe6ff; background: rgba(10,132,255,.14); border-color: rgba(10,132,255,.34); }

/* ── Credits ── */
.zm-um-sec{ padding: 12px 15px 14px; border-top: 1px solid rgba(255,255,255,.07); }
.zm-um-seclabel{
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 9px;
}
.zm-um-note{ font-size: 10px; font-weight: 500; color: var(--text-4); text-transform: none; letter-spacing: 0; }
.zm-um-tiles{ display: flex; gap: 9px; }
.zm-um-tile{
  flex: 1; min-width: 0; padding: 11px 12px; border-radius: 11px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.zm-um-tile-k{
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-4);
}
.zm-um-tile-v{ font-size: 22px; font-weight: 800; color: #fff; margin-top: 4px; line-height: 1; letter-spacing: -.02em; }
.zm-um-tile-v[data-inf="1"]{ color: var(--green); }
.zm-um-reset{ font-size: 10px; font-weight: 600; color: var(--text-4); margin-top: 9px; }

/* ── Rows ── */
.zm-um-rows{ border-top: 1px solid rgba(255,255,255,.07); padding: 6px 0; }
.zm-um-row{
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 15px; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none;
  transition: background .13s var(--ease-out), color .13s var(--ease-out);
}
.zm-um-row:hover{ background: rgba(255,255,255,.05); color: #fff; }
.zm-um-row svg{ flex-shrink: 0; opacity: .75; }
.zm-um-row-go{ margin-left: auto; opacity: .4; }

/* ── Footer ── */
.zm-um-foot{ display: flex; align-items: center; gap: 8px; padding: 10px 15px 13px; border-top: 1px solid rgba(255,255,255,.07); }
.zm-um-cta{
  flex: 1; padding: 10px 14px; border-radius: 100px; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 800; letter-spacing: -.01em;
  color: #fff; background: var(--green);
  transition: filter .13s var(--ease-out), transform .13s var(--ease-out);
}
.zm-um-cta:hover{ filter: brightness(1.1); }
.zm-um-cta:active{ transform: scale(.985); }
.zm-um-icon{
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-2); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  transition: background .13s var(--ease-out), color .13s var(--ease-out);
}
.zm-um-icon:hover{ background: rgba(255,255,255,.1); color: #fff; }
.zm-um-icon.danger:hover{ background: rgba(248,113,113,.14); color: #f87171; border-color: rgba(248,113,113,.28); }
.zm-um-icon[disabled]{ opacity: .5; cursor: default; }
.zm-um-spin{ animation: zmUmSpin .7s linear infinite; }
@keyframes zmUmSpin{ to{ transform: rotate(360deg); } }

/* Under 520px the panel would rather hang off the screen edge than the button. */
@media (max-width: 520px){
  .zm-usermenu{ position: fixed; top: 62px; right: 10px; left: 10px; width: auto; max-width: none; }
}

/* ── Combined credits + account pill in the top bar ───────────────────────────────
   The credits chip and the avatar used to be two separate controls with the Join Discord
   link wedged between them. They are now one bordered pill:

       ( ● 30 credits │ (avatar) ⌄ )

   Both children keep their original ids and remain the same DOM elements, because
   updateUsageBar() and applyTier() look them up by id — so this only strips their own
   chrome and lets the wrapper be the single visible container.

   `!important` on the children is deliberate: earlier theme layers in this file set the
   same properties at equal-or-higher specificity, and losing that race would leave a second
   box inside the pill.

   DESKTOP ONLY. At <=820px `nav .nav-actions{display:none!important}` hides this entire
   group and the mobile account button takes over, so no mobile branch is needed here. */
.nav-account{
  display: flex; align-items: center;
  height: 38px; padding: 0 6px 0 4px;
  border-radius: var(--pill);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: var(--zshade);
  transition: background var(--dur-2), border-color var(--dur-2);
}
.nav-account:hover{ background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.16); }

.nav-account #nav-usage-pill{
  display: none; align-items: center; gap: 6px;
  height: auto; padding: 0 9px 0 10px; margin: 0;
  background: none !important; border: 0 !important; box-shadow: none !important;
}
.nav-account #nav-usage-pill svg{ display: none; }   /* the old bag icon, replaced by the dot */
.nav-account #nav-usage-count{
  font-size: 13.5px; font-weight: 800; color: #fff; letter-spacing: -.015em;
}
.nav-account .nup-dot{
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #35d07f; box-shadow: 0 0 8px rgba(53,208,127,.55);
  transition: background var(--dur-2), box-shadow var(--dur-2);
}
.nav-account .nup-word{ font-size: 12px; font-weight: 600; color: var(--text-3); }
/* The chip already carries .near / .limit classes for a low or empty balance. The dot
   takes that colour so the warning survives the restyle. */
.nav-account #nav-usage-pill.near  .nup-dot{ background: #ffd60a; box-shadow: 0 0 8px rgba(255,214,10,.5); }
.nav-account #nav-usage-pill.limit .nup-dot{ background: var(--red); box-shadow: 0 0 8px rgba(255,69,58,.55); }

.nav-account .nacc-div{
  width: 1px; height: 20px; flex-shrink: 0; background: rgba(255,255,255,.13);
}
/* Nothing to divide when the balance is not being shown — signed out, or the count has
   not arrived. JS hides the chip with an inline style, so match on that rather than
   leaving a bare rule floating at the pill's left edge. */
.nav-account #nav-usage-pill[style*="display: none"] + .nacc-div{ display: none; }

.nav-account #nav-key-btn{
  height: 30px; padding: 0 2px; margin-left: 2px; gap: 0;
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: #fff;
}
.nav-account #nav-key-btn:hover,
.nav-account #nav-key-btn.active{ background: none !important; box-shadow: none !important; }
.nav-account #nav-key-btn:hover,
.nav-account #nav-key-btn:active{ transform: none; }
/* Signed out: the person icon gets its own circle so the button still reads as a control. */
.nav-account #nav-key-btn > svg{
  width: 30px; height: 30px; padding: 7px; border-radius: 50%;
  background: rgba(255,255,255,.09);
}
/* Signed in: the real avatar replaces the icon. Set as an <img src> by applyTier, never
   interpolated into markup — the URL comes from Discord and must not become HTML. */
.nav-account img.nacc-av{
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block;
  background: rgba(255,255,255,.09);
}
/* Signed IN only: the display name lives in the dropdown, which is what keeps the pill a
   fixed compact width. Signed OUT keeps the word, because an icon alone does not say
   "sign in" — `.active` is exactly the class applyTier adds when there is an account. */
.nav-account #nav-key-btn.active .key-btn-label{ display: none; }

.nav-account .nacc-chev{
  display: flex; align-items: center; justify-content: center;
  width: 17px; margin-left: 1px; color: var(--text-3);
  transition: transform var(--dur-2) var(--ease-out);
}
.nav-account.open .nacc-chev{ transform: rotate(180deg); }

/* ── Signed-out nav: the free-trial call to action ─────────────────────────────
   A first-time visitor decides whether this is worth an account in about four
   seconds. The trial is the strongest thing on offer, so it sits in the nav next to
   Sign in rather than only on the shop page — which they have no reason to visit yet.

   Injected by shared2.js and hidden unless signed out: see injectPremiumCta(). */
#nav-premium-cta{
  display: none;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s var(--ease-out), color .16s var(--ease-out),
              border-color .16s var(--ease-out);
}
#nav-premium-cta.show{ display: inline-flex; }
#nav-premium-cta:hover{
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
/* The bolt carries the accent so the offer reads as a perk, not a second grey button. */
#nav-premium-cta svg{ color: var(--green); flex-shrink: 0; }

/* The signed-out button is deliberately NOT restyled here.
   It already carries an accent — `#nav-key-btn.sign-in` is Discord blurple, set with
   !important — and inside the combined .nav-account pill its background is flattened
   to `none !important` on purpose, so credits + avatar + chevron read as ONE control
   rather than three. A colour rule added here would either be overridden outright or
   need its own !important to fight that, which is how a design ends up with two
   owners. The accent is left where it already lives; only the offer beside it is new. */

/* Under this width the nav runs out of room and the offer moves to the page body,
   which already carries it — a wrapped nav bar is worse than a missing pill. */
@media (max-width: 560px){
  #nav-premium-cta{ display: none !important; }
}

/* ── Signed out, the PILL is the button — not the button inside it ─────────────────
   Colouring `#nav-key-btn` was wrong, and this is why: the cluster deliberately
   flattens that button (`.nav-account #nav-key-btn{ background: none !important }`) so
   credits + avatar + chevron read as ONE control. Painting the inner button turns it
   into a bright pill nested inside a dark one, which is the odd look this replaces.

   Signed out the cluster holds nothing else anyway — no credits chip, no avatar — so
   making the pill itself indigo gives a single clean control, and that is what the
   reference shows: one indigo "Sign in" pill with a person on it.

   The chevron is hidden in the same state, because it is not true: signed out, the
   button does not open a menu, it goes straight to Discord. A chevron that promises a
   dropdown and delivers a page load is worse than no chevron.

   CSS ONLY, keyed off `.sign-in` on the button — which the static markup already carries
   from the first paint. No JS, so this needs no help from shared2.js and cannot be
   broken by an edit to it.

   Plain selectors, no !important — specificity already favours these over the base
   `.nav-account` and its `:hover`, so nothing needs to fight. `.nav-account` plus the
   `:has()` argument comes to (1,2,0), which outranks both.

   `:has()` is a progressive enhancement, not a requirement: a browser without it drops
   the rule and the cluster simply stays neutral rather than breaking. */
.nav-account:has(#nav-key-btn.sign-in){
  background: #5b5bd6;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(91,91,214,.32);
}
.nav-account:has(#nav-key-btn.sign-in):hover{
  background: #6b6be0;
  border-color: transparent;
}
.nav-account:has(#nav-key-btn.sign-in) .nacc-chev{ display: none; }

/* ── Signed out, the icon sits FLAT in the pill ───────────────────────────────────
   The icon normally gets a 30px translucent circle behind it (the
   `.nav-account #nav-key-btn > svg` rule above). That circle exists to FRAME THE AVATAR
   once signed in, where it holds a photo — around a plain glyph it reads as a second,
   smaller pill nested inside the first, which is what made the button look wrong.

   Higher specificity than that rule and no !important, so the signed-in avatar keeps its
   circle while the signed-out icon does not. */
.nav-account #nav-key-btn.sign-in > svg{
  width: 15px; height: 15px;
  padding: 0;
  border-radius: 0;
  background: none;
}

/* ── Shop: one uniform card shape, with the billing toggle ──────────────────────────────
   Added 2026-10-14 with the shop rebuild. The page used to be three tab panels of uneven
   length; it is now stacked cards that share ONE shape — a wide description column and a
   narrower summary column, divided by a hairline, with the same rounded surface as every
   other panel on the site. Nothing here is a new design language: the tokens, radii and
   glass surface all come from :root above. */

.shop-card{padding:26px 26px 24px}
.shop-card-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(248px,1fr);gap:28px;align-items:start}
.shop-card-main{min-width:0}
.shop-card-side{position:relative;padding-left:28px;min-width:0}
/* The divider between a plan and its summary. A border would sit inside the padding box
   and make the two columns look misaligned, so it is drawn as a line down the gap. */
.shop-card-side::before{content:"";position:absolute;top:2px;bottom:2px;left:0;width:1px;background:rgba(255,255,255,.08)}
.shop-side-eyebrow{font-size:9.5px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}

/* The credits facts used to be a second full panel of five rows. Same information, one
   compact strip — the page is a shop, not an essay. */
.shop-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.shop-fact{font-size:11.5px;color:var(--text-3);background:var(--bg-surface);border-radius:var(--pill);padding:7px 14px}
.shop-fact b{color:var(--text-2);font-weight:650}

/* ── Zilem access ────────────────────────────────────────────────────────────────────── */
#shop-access{margin-top:8px}
.access-head{margin:26px 0 16px}
.access-title{font-size:26px;font-weight:700;letter-spacing:-1.1px;color:#fff;line-height:1.15;margin:0 0 6px}
.access-sub{font-size:12.5px;color:var(--text-3);margin:0}
.access-card{margin-top:16px}
.access-card:first-of-type{margin-top:0}
.access-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(248px,1fr);gap:28px;align-items:start}
.access-main{min-width:0}
.access-headline{font-size:27px;font-weight:700;letter-spacing:-1.2px;color:#fff;line-height:1.15;margin:0 0 8px}
.access-sub2{font-size:12.5px;line-height:1.6;color:var(--text-3);margin:0 0 22px}

/* Billing toggle. `Best value` rides above the Yearly segment, deliberately outside the
   pill so it cannot be mistaken for a fourth option. */
.access-toggle-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.access-toggle{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:var(--pill);background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.access-seg{padding:9px 16px;border-radius:var(--pill);border:0;background:transparent;color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.access-seg:hover:not(.is-active):not([disabled]){color:var(--text-1)}
.access-seg.is-active{background:#f5f5f7;color:#0a0a0b}
.access-seg[disabled]{opacity:.4;cursor:not-allowed}
.access-badge{position:absolute;top:-11px;right:6px;padding:3px 9px;border-radius:var(--pill);background:#f5f5f7;color:#0a0a0b;font-size:9px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;white-space:nowrap}
.access-save{padding:4px 11px;border-radius:var(--pill);background:rgba(10,132,255,.16);color:#cfe4ff;font-size:11.5px;font-weight:700;white-space:nowrap}

.access-price-row{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}
.access-price{font-size:44px;font-weight:700;letter-spacing:-2.4px;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.access-per{font-size:15px;color:var(--text-2);font-weight:500}
.access-billed{font-size:11.5px;color:var(--text-3);margin:0 0 20px}
.access-trial{display:inline-flex;align-items:center;gap:7px;margin:-10px 0 20px;
  padding:4px 11px;border-radius:var(--pill);background:rgba(48,209,88,.12);color:#8be8a6;
  font-size:11.5px;font-weight:650;letter-spacing:-.01em}
.access-trial[hidden]{display:none}
.access-trial::before{content:"";width:5px;height:5px;border-radius:50%;background:#30d158;flex:0 0 auto}

.access-list{list-style:none;margin:0;padding:20px 0 0;position:relative}
.access-list::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.075)}
.access-list li{display:flex;gap:10px;font-size:12.5px;color:var(--text-2);line-height:1.55;padding:7px 0}
.access-list li b{color:var(--text-1);font-weight:650}
.access-tick{flex-shrink:0;color:#9cc8ff;font-weight:800;font-size:12px;line-height:1.6}
.access-foot{margin:16px 0 0;font-size:10.5px;color:var(--text-3)}

/* Summary column */
.access-sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--text-3);padding:5px 0}
.access-sum b{color:var(--text-1);font-weight:600}
.access-due{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:14px 0 0;padding-top:14px;position:relative}
.access-due::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.09)}
.access-due span{font-size:13px;font-weight:650;color:var(--text-1)}
.access-due b{font-size:30px;font-weight:700;letter-spacing:-1.4px;color:#fff;font-variant-numeric:tabular-nums}
.access-buy{margin-top:4px}
.access-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.07);font-size:10.5px;color:var(--text-3)}
.access-lock{display:inline-flex;align-items:center;gap:6px}
.access-pays{display:flex;gap:4px;align-items:center}
.access-pay{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 6px;border-radius:5px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.access-pay img{display:block;width:auto}
.pay-ap{height:12px}.pay-gp{height:11px}.pay-visa{height:10px}.pay-mc{height:12px}
/* The heights differ so the MARK reads the same in every chip: Visa is a wide, short
   wordmark, both Pay marks are taller, Mastercard is its two circles. Each file is
   cropped to its own artwork box, so one scale rule then applies to all four. */
.access-local{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;padding-top:13px;border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;color:var(--text-2)}

/* Landing on a deep-linked card: outline it briefly so the link visibly answered. */
.access-flash{box-shadow:0 0 0 1.5px rgba(255,255,255,.22),var(--glass-shadow)}

@media (max-width:880px){
  .shop-card{padding:22px 18px}
  .shop-card-grid,.access-grid{grid-template-columns:1fr;gap:22px}
  /* The vertical divider becomes a horizontal one, so the two halves still read as
     halves rather than as a pile. */
  .shop-card-side{padding-left:0;padding-top:22px}
  .shop-card-side::before{top:0;bottom:auto;left:0;right:0;width:auto;height:1px}
  .access-headline{font-size:23px}
  .access-price{font-size:38px}
  .access-badge{right:26px}
}

/* Nothing here overrides .plan-grid: it lays out the dashboard's three original plan
   cards side by side, and that is the layout it must keep. */


/* The period row inside the dashboard's plan cards. Tighter than the shop's, because a card
   is already a bounded box with its own rhythm — and a 287px column cannot hold the shop's
   roomier segments, which used to overhang the card's content box by ~14px and push the
   "Save" pill onto a line of its own. */
.plan-card .access-toggle-row{margin:16px 0 18px;gap:8px;min-height:70px;align-content:flex-start;align-items:flex-start}
.plan-card .access-toggle{background:rgba(255,255,255,.05);max-width:100%}
.plan-card .access-seg{padding:8px 12px;font-size:11.5px}
.plan-card .access-badge{right:20px}


/* The price inside a purchase card's foot: the amount the period toggle is currently showing,
   at display size, with its period beside it. Kept out of the metric block so the card still
   reads "what you get" (the metric) separately from "what it costs" (here). */
.plan-price-line{display:flex;align-items:baseline;gap:8px;margin:0 0 14px}
.plan-price{font-size:30px;font-weight:700;letter-spacing:-1.4px;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.plan-per{font-size:13px;color:var(--text-2);font-weight:500}

/* --- Tabs back on the shop (2026-10-16) -------------------------------------------------
   The plans are reachable from the shop header again. Credits and the plan section swap with
   the `hidden` attribute, and both plans share one section so its intro, spec strip and
   footnote are written once. The tab names the plan in `data-plan`; these two rules decide
   which card belongs on it. */

/* One card in a grid built for three: the Free card sits on its own under the credits card,
   and stretching a 380px card across the whole container would look nothing like the grid it
   came from. Cap it instead. */
.plan-grid.is-one{grid-template-columns:minmax(0,1fr);max-width:620px}

/* Which half of the section a tab shows. Credits is the dashboard section as it is -
   head, spec strip, the three cards, the footnote. Plus and Premium replace all of that
   with the checkout rectangle, because a tab that names one plan should offer that plan
   rather than a grid with two thirds of it removed. Everything keys off the `data-plan`
   attribute the tab sets, so a visitor whose scripts never ran still gets the full,
   correct cards. */
#shop-access .pay-panel{display:none}
#shop-access[data-plan] .plan-head,
#shop-access[data-plan] .plan-spec,
#shop-access[data-plan] .plan-grid,
#shop-access[data-plan] .plan-footnote{display:none}
#shop-access[data-plan] .pay-panel{display:grid}

/* One plan on screen at a time inside the rectangle. Both plans' hooks stay in the DOM,
   so this is what hides the other one. */
#shop-access[data-plan="plus"] .pay-view[data-view="donor"],
#shop-access[data-plan="premium"] .pay-view[data-view="plus"],
#shop-access[data-plan="plus"] .pay-for[data-for="donor"],
#shop-access[data-plan="premium"] .pay-for[data-for="plus"],
#shop-access[data-plan="plus"] .pay-agree[for="premiumAgree"],
#shop-access[data-plan="premium"] .pay-agree[for="plusAgree"],
#shop-access[data-plan="plus"] .pay-buy[data-tier="donor"],
#shop-access[data-plan="premium"] .pay-buy[data-tier="plus"]{display:none}

/* --- Payment panel (2026-10-16) ----------------------------------------------------------
   The plan and period are picked in one rectangle under the plan cards, not inside them. It
   reuses the shop's .access-* pieces — the segmented toggle, the Save pill, the summary rows
   and the white logo chips — so this only has to define the rectangle and the plan picker. */
.pay-panel{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);gap:28px;
           margin-top:18px;padding:26px;border-radius:22px;background:var(--bg-surface,#141416);
           box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pay-panel-main{min-width:0}
.pay-panel-title{font-size:24px;font-weight:700;letter-spacing:-1px;color:#fff;margin:0 0 8px}
.pay-panel-sub{font-size:12.5px;color:var(--text-3);margin:0 0 20px}
.pay-panel-side{position:relative;padding-left:28px}
.pay-panel-side::before{content:"";position:absolute;top:4px;bottom:4px;left:0;width:1px;
                        background:rgba(255,255,255,.08)}
.pay-picks{display:inline-flex;gap:4px;padding:4px;border-radius:var(--pill);
           background:rgba(255,255,255,.05);margin-bottom:18px}
.pay-pick{padding:8px 18px;border:0;border-radius:var(--pill);background:transparent;color:var(--text-2);
          font:inherit;font-size:12.5px;font-weight:650;cursor:pointer}
.pay-pick.is-active{background:#f5f5f7;color:#0a0a0b}
.access-billed{font-size:11.5px;color:var(--text-3);margin:12px 0 0}
.pay-trust{margin-top:22px}
.pay-agree{margin:16px 0 0}
.pay-buy{width:100%;margin-top:16px}
.pay-local{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;
           padding-top:14px;border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;color:var(--text-2)}
/* The rectangle reads top to bottom - eyebrow, headline, the period row, the price, what
   it includes, when it renews - and the summary column says what is being paid without
   repeating any of it. */
.pay-panel .access-toggle-row{margin:22px 0 20px}
/* The label rides the Yearly segment, which is the last one in the row: anchored to its right
   edge it centres on that segment (77px label over a 67px segment), instead of drifting onto
   the boundary with Half-yearly, which is where a fixed right offset left it. */
.pay-panel .access-badge{right:0}
.pay-panel .access-price-row{margin:0 0 4px}
.pay-panel .access-billed{margin:10px 0 0}
.pay-panel .access-list{padding-top:22px}
.pay-panel .access-foot{margin-top:16px}
@media (max-width:860px){
  .pay-panel{grid-template-columns:1fr;gap:20px}
  .pay-panel-side{padding-left:0;padding-top:22px}
  .pay-panel-side::before{top:0;bottom:auto;left:0;right:0;width:auto;height:1px}
}

/* ── Zilem verified eyebrow: the mark, tinted to the label colour ───────── */
.zv-kick .zv-mark{
  width:17px;height:14px;flex:0 0 auto;display:block;
  background:currentColor;
  -webkit-mask:url(/logo-mark.png) center/contain no-repeat;
          mask:url(/logo-mark.png) center/contain no-repeat;
}

/* Discord row reads "Not linked" for an account with no Discord identity (Google-only
   sign-in). Muted rather than removed: the row still tells you what Discord would add,
   which matters because tier sync depends on it. */
.zm-row-tag.is-off{color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}

/* ── Nav actions, one system ──────────────────────────────────────────────────────
   Apple's pattern is a short ladder: one filled button, one bordered, everything else
   plain text. Before this, three buttons sat side by side with three different heights,
   two blurple fills and two font sizes, which read as three separate products.
   Sign In is the primary action, so it is the only filled button — and white, not
   Discord blurple: it is not a Discord sign-in, it is the way into the account. */
#nav-key-btn.sign-in,
#nav-discord-btn,
#nav-premium-cta{
  height:34px; border-radius:980px; padding:0 14px;
  font-size:13px; font-weight:600; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:7px; line-height:1;
  transition:background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
  white-space:nowrap;
}
#nav-key-btn.sign-in{
  background:#fff !important; color:#0a0a0a !important;
  border:1px solid #fff !important; box-shadow:none !important;
}
#nav-key-btn.sign-in:hover{background:#e9e9ee !important; border-color:#e9e9ee !important}
#nav-key-btn.sign-in:active{transform:scale(.98)}
#nav-key-btn.sign-in svg{color:#0a0a0a !important; stroke:#0a0a0a !important; filter:none !important}

#nav-discord-btn{
  background:transparent !important; border:1px solid rgba(255,255,255,.16) !important;
  color:#e8e8ea !important;
}
#nav-discord-btn:hover{background:rgba(255,255,255,.07) !important; border-color:rgba(255,255,255,.26) !important; color:#fff !important}
#nav-discord-btn svg{color:#8b95f6 !important}

#nav-premium-cta{
  background:transparent !important; border:1px solid transparent !important;
  color:#aab2be !important; padding:0 12px !important;
}
#nav-premium-cta:hover{background:rgba(255,255,255,.06) !important; color:#fff !important}