/* wyper.io Fact-Check - mobile web app.
 * Design system ported 1:1 from the browser extension overlay (verify.js CSS):
 * same palette, same radii, same result components, same wording. */
:root{
  --bg:#0a0713;      /* page (extension canvas bg) */
  --panel:#0e0918;   /* main panels (extension .card) */
  --surf:#140d24;    /* sections (extension .overall/.item/.steps) */
  --surf2:#17102a;   /* inner controls (extension .bar/.rechk/.foot buttons) */
  --inner:#0f0a1c;   /* nested blocks (extension .spec/.why) */
  --txt:#f0eaf9; --txt2:#cfc6e6; --mut:#a89dc4; --faint:#6f6590;
  --brand:#9b4dff; --lime:#d9ff1f; --teal:#37e0c8;
  --red:#f4212e; --green:#3fd17a; --amber:#f5c26b;
  --l22:rgba(155,77,255,.22); --l25:rgba(155,77,255,.25);
  --l35:rgba(155,77,255,.35); --l40:rgba(155,77,255,.4);
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --nav-h:calc(60px + env(safe-area-inset-bottom));
  color-scheme:dark;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
/* overflow-x on html+body turned body into its own (broken) scroll container on
 * Android - clip prevents sideways scroll WITHOUT creating a scroll container. */
html,body{ margin:0; }
body{ background:var(--bg); color:var(--txt); font-family:var(--f); line-height:1.5;
  padding-bottom:var(--nav-h); min-height:100dvh; overflow-x:clip;
  -webkit-font-smoothing:antialiased; }
button{ font-family:var(--f); }
a{ color:var(--brand); }
code{ font-family:var(--mono); font-size:.82em; background:var(--surf2); padding:1px 6px; border-radius:6px; word-break:break-all; }

/* ---------- header (extension .head) ---------- */
.top{ position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:calc(12px + env(safe-area-inset-top)) 14px 11px;
  background:rgba(10,7,19,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--l22); }
.brand{ display:inline-flex; align-items:center; gap:8px; font-weight:900; font-size:14px; letter-spacing:.04em; }
.bmark{ width:20px; height:20px; }
.brand em{ font-style:normal; color:var(--lime); }  /* extension .head em */
.brand .sub{ color:var(--mut); font-weight:700; font-size:12px; }
.chip{ border:0; border-radius:9999px; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 11px; cursor:pointer; }
.chip-free{ background:var(--surf2); color:var(--mut); border:1px solid var(--l35); }
.chip-pro{ background:rgba(217,255,31,.15); color:var(--lime); border:1px solid rgba(217,255,31,.5); }

/* ---------- layout ---------- */
#main{ max-width:560px; margin:0 auto; padding:14px 12px 24px; }
.view h2{ font-size:18px; font-weight:900; letter-spacing:-.01em; margin:10px 2px 4px; }
.card{ background:var(--surf); border:1px solid var(--l25); border-radius:12px; padding:13px 14px; margin:10px 0; }
.card h3{ margin:2px 0 4px; font-size:14px; font-weight:800; }
.mut{ color:var(--mut); }
.small{ font-size:12.5px; }
.tiny{ font-size:11px; }
.center{ text-align:center; }
.flex1{ flex:1; }

/* micro-label (extension steps-head / claim b) */
.microlab{ font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--mut); }

/* ---------- input (extension .card panel look) ---------- */
.input-card{ padding:12px 13px; background:var(--panel); border:1px solid var(--l40); border-radius:16px;
  box-shadow:0 12px 48px rgba(0,0,0,.6), 0 0 36px rgba(155,77,255,.16); }
.input-card:focus-within{ border-color:rgba(217,255,31,.5); }
#input{ width:100%; border:0; background:transparent; color:var(--txt); font-family:var(--f);
  font-size:15px; line-height:1.5; resize:none; outline:none; min-height:68px; }
#input::placeholder{ color:var(--faint); }
.input-actions{ display:flex; gap:8px; align-items:center; margin-top:8px; }

.iconbtn{ display:inline-flex; align-items:center; gap:7px; }
.iconbtn svg{ width:15px; height:15px; flex:none; }
/* primary = extension .foot button.primary */
.cta{ background:var(--lime); color:#000; border:1px solid var(--lime); border-radius:9px;
  font-weight:800; font-size:13px; padding:10px 16px; cursor:pointer; transition:transform .06s; }
.cta:active{ transform:scale(.97); }
.cta[disabled]{ opacity:.55; }
.cta.wide{ width:100%; padding:12px 0; justify-content:center; font-size:14px; }
/* secondary = extension .foot button / .rechk */
.ghost{ background:var(--surf2); border:1px solid var(--l35); color:var(--txt); border-radius:9px;
  padding:9px 13px; font-size:12.5px; font-weight:700; cursor:pointer; }
.ghost:active{ border-color:var(--teal); }
.wide-ghost{ width:100%; text-align:center; }
.linkbtn{ display:inline-block; text-decoration:none; text-align:center; }
.btnrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* ---------- depth selector (extension popup .dopt, ported) ---------- */
.depth{ display:flex; flex-direction:column; gap:8px; }
.dopt{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--l25);
  border-radius:13px; background:var(--surf); cursor:pointer;
  transition:border-color .14s, background .14s, transform .08s, box-shadow .14s; }
.dopt:active{ transform:scale(.99); }
.dopt .ic{ flex:none; font-size:17px; width:20px; text-align:center; }
.dopt .tx{ flex:1; min-width:0; }
.dopt .tt{ display:block; font-size:13px; font-weight:800; color:var(--txt); letter-spacing:-.01em; }
.dopt .ds{ display:block; font-size:11px; color:var(--mut); margin-top:1px; }
.dopt .meta{ flex:none; font-size:10px; color:var(--teal); font-weight:800; white-space:nowrap; text-align:right; }
.dopt.sel{ border-color:var(--teal); background:linear-gradient(180deg,rgba(55,224,200,.14),transparent);
  box-shadow:0 0 24px -8px rgba(55,224,200,.75); }
.dopt.sel .tt{ color:var(--teal); }
.dopt.pw{ border-color:rgba(217,255,31,.3); }
.dopt.pw .meta{ color:var(--lime); }
.dopt.pw.sel{ border-color:var(--lime); background:linear-gradient(180deg,rgba(217,255,31,.14),transparent);
  box-shadow:0 0 24px -8px rgba(217,255,31,.75); }
.dopt.pw.sel .tt{ color:var(--lime); }
.dopt.locked{ opacity:.72; }
.dopt.locked .meta{ color:var(--lime); }

/* ---------- entry grid ---------- */
.entryhead{ margin:20px 4px 8px; font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.entrygrid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.entry{ background:var(--surf); border:1px solid var(--l25); border-radius:12px; padding:13px;
  color:var(--txt); text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.entry:active{ border-color:rgba(217,255,31,.5); }
.entry .eicon{ width:20px; height:20px; color:var(--teal); margin-bottom:6px; }
.entry b{ font-size:13.5px; }
.entry span{ color:var(--mut); font-size:11.5px; line-height:1.35; }

/* ---------- install card ---------- */
.installcard{ display:flex; align-items:center; gap:12px; margin-top:12px; border-color:rgba(217,255,31,.4); }
.installcard img{ border-radius:9px; flex:none; width:40px; height:40px; }
.installcard b{ display:block; font-size:13.5px; }
.installcard span{ display:block; line-height:1.35; font-size:11.5px; }
.installcard .cta{ flex:none; }

/* ---------- AudioCheck recording ---------- */
.recpanel{ border-color:rgba(244,33,46,.5); }
.recrow{ display:flex; align-items:center; gap:12px; }
.recdot{ width:11px; height:11px; border-radius:50%; background:var(--red); flex:none;
  box-shadow:0 0 0 0 rgba(244,33,46,.5); animation:pulse 1.4s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(244,33,46,.5);} 70%{ box-shadow:0 0 0 13px rgba(244,33,46,0);} 100%{ box-shadow:0 0 0 0 rgba(244,33,46,0);} }
.rectime{ font-family:var(--mono); font-weight:700; font-size:16px; min-width:48px; font-variant-numeric:tabular-nums; }
.recbars{ display:flex; gap:5px; align-items:flex-end; height:24px; margin:12px 0 13px; justify-content:center; }
.recbars i{ width:5px; border-radius:3px; background:var(--red); opacity:.85; animation:bars 1s ease-in-out infinite; }
.recbars i:nth-child(1){ height:30%; animation-delay:0s; }
.recbars i:nth-child(2){ height:75%; animation-delay:.15s; }
.recbars i:nth-child(3){ height:100%; animation-delay:.3s; }
.recbars i:nth-child(4){ height:60%; animation-delay:.45s; }
.recbars i:nth-child(5){ height:40%; animation-delay:.6s; }
@keyframes bars{ 0%,100%{ transform:scaleY(.5);} 50%{ transform:scaleY(1);} }
.recpanel .cta.wide{ margin-bottom:8px; }
@media (prefers-reduced-motion: reduce){ .recdot,.recbars i{ animation:none; } }

/* ---------- progress (extension .bar + .steps) ---------- */
.progress{ margin:10px 0; }
.pbar{ height:4px; background:var(--surf2); border-radius:4px; overflow:hidden; }
.pbar > i{ display:block; height:100%; width:30%; background:var(--lime); animation:ind 1.1s ease-in-out infinite; }
@keyframes ind{ 0%{ margin-left:-30%; } 100%{ margin-left:100%; } }
@media (prefers-reduced-motion: reduce){ .pbar > i{ animation-duration:2.4s; } }
/* determinate mode while a check runs: width driven by the ETA ticker (extension .bar.det) */
.pbar.det > i{ animation:none; margin-left:0; width:0; transition:width .45s ease; }
.steps{ margin-top:8px; padding:10px 12px; background:var(--surf); border:1px solid var(--l25); border-radius:12px; }
.steps-head{ display:flex; align-items:center; font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--mut); margin-bottom:6px; font-weight:800; }
.steps-head .eta{ margin-left:auto; color:var(--lime); font-weight:800; letter-spacing:0;
  text-transform:none; font-variant-numeric:tabular-nums; }
[dir="rtl"] .steps-head .eta{ margin-left:0; margin-right:auto; }
/* games while you wait (extension .game-wrap) */
.game-wrap{ margin-top:10px; }
.game-head{ display:flex; align-items:center; gap:8px; margin:6px 0 8px; }
.game-head .lbl{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); font-weight:800; }
.game-head select{ margin-left:auto; background:var(--surf2); color:var(--txt); border:1px solid var(--l35);
  border-radius:8px; padding:4px 8px; font-size:12px; cursor:pointer; font-family:var(--f); }
[dir="rtl"] .game-head select{ margin-left:0; margin-right:auto; }
#gameCanvas{ border:1px solid var(--l22); border-radius:10px; background:#0a0713;
  display:block; margin:0 auto; max-width:100%; touch-action:none; }
.step{ font-size:12.5px; color:var(--faint); padding:3px 0; display:flex; gap:8px; align-items:center; }
.step .tick{ width:14px; text-align:center; flex:none; }
.step.cur{ color:var(--txt); }
.step.cur .tick{ color:var(--lime); animation:stepPulse 1s ease-in-out infinite; }
.step.done{ color:var(--mut); }
.step.done .tick{ color:var(--green); }
@keyframes stepPulse{ 50%{ opacity:.3; } }

/* ---------- result (ported 1:1 from extension) ---------- */
.result{ margin-top:12px; }
.overall{ padding:14px; border-radius:12px; background:var(--surf);
  border:1px solid var(--l25); display:flex; align-items:center; gap:14px; margin-bottom:4px; }
.gauge{ position:relative; width:66px; height:66px; flex:none; border-radius:50%; display:grid; place-items:center; }
.gauge .core{ width:52px; height:52px; border-radius:50%; background:var(--surf); display:grid;
  place-items:center; text-align:center; }
.gauge .num{ font-size:22px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1; }
.gauge .den{ font-size:10px; color:var(--mut); }
.overall .meta{ flex:1; }
.overall .lab{ font-weight:800; font-size:15px; }
.overall .sub{ font-size:11px; color:var(--mut); margin-top:2px; }

.alt-note{ margin:10px 0 0; padding:7px 11px; border-radius:8px; font-size:11px; font-weight:700;
  color:var(--teal); background:rgba(55,224,200,.12); border:1px solid rgba(55,224,200,.3); }

.item{ border-left:4px solid var(--brand); padding:10px 12px; margin:9px 0; background:var(--surf);
  border-radius:0 8px 8px 0; font-size:13.5px; line-height:1.5; }
.item .badge{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:9999px;
  margin-bottom:6px; background:rgba(255,255,255,.08); }
.item .badge.bs{ background:var(--red); color:#fff; font-weight:900; letter-spacing:.04em; }
.qualif{ margin-left:7px; font-size:11px; font-style:italic; color:var(--mut); }
.item .claimq{ color:var(--txt2); font-style:italic; margin-bottom:6px; padding-left:9px;
  border-left:2px solid var(--l40); }
.item .claimq b{ color:var(--mut); font-style:normal; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; display:block; margin-bottom:2px; }
.item .finding{ color:var(--txt); }
.item .src{ display:block; margin-top:6px; font-size:11px; }
.item .src a{ color:var(--brand); }
.item .xcheck{ margin-top:7px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:6px; display:inline-block; }
.item .xcheck.ok{ background:rgba(63,209,122,.15); color:var(--green); }
.item .xcheck.warn{ background:rgba(245,194,107,.15); color:var(--amber); }

/* "Why this score" (extension .why) */
.why{ margin-top:9px; border:1px solid var(--l22); border-radius:8px; background:var(--inner); padding:0 10px; }
.why summary{ cursor:pointer; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mut); font-weight:800; padding:8px 0; list-style:none; }
.why summary::-webkit-details-marker{ display:none; }
.why summary::after{ content:' ▾'; color:var(--faint); }
.why[open] summary::after{ content:' ▴'; }
.why .wy{ font-size:12px; color:var(--txt2); padding:3px 0; display:flex; gap:7px; line-height:1.4; }
.why .wy:last-child{ padding-bottom:9px; }
.why .wy span{ font-weight:900; flex:none; }

/* Full Spectrum (extension .spec*) */
.spec{ margin-top:9px; padding:9px 11px; border-radius:8px; background:var(--inner);
  border:1px solid rgba(155,77,255,.3); font-size:12px; line-height:1.5; }
.spec-head{ font-size:10px; font-weight:900; letter-spacing:.14em; color:var(--brand); margin-bottom:6px;
  display:flex; align-items:center; gap:8px; }
.spec-type{ font-size:9px; font-weight:800; letter-spacing:.08em; padding:2px 7px;
  border:1px solid; border-radius:9999px; }
.spec-row{ margin:6px 0; color:#e6dff5; }
.spec-row b{ display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:2px; }
.spec-view{ margin:7px 0; padding:7px 9px; border-left:3px solid var(--amber); background:rgba(245,194,107,.06); border-radius:0 6px 6px 0; }
.spec-vhead{ font-weight:700; color:var(--txt); }
.spec-sub{ font-size:11.5px; color:var(--txt2); margin-top:3px; }
.spec-assess{ color:var(--mut); font-style:italic; }
.spec-research{ padding:8px 10px; border-left:3px solid var(--teal); background:rgba(55,224,200,.07); border-radius:0 6px 6px 0; }
.spec-research b{ color:var(--teal); }
.spec-cta{ margin:10px 0 2px; padding:11px 12px; border:1px solid var(--l40); border-radius:11px; background:var(--surf); }
.spec-cta .lab{ font-size:11.5px; color:var(--txt2); margin-bottom:9px; }
.spec-cta .lab b{ color:var(--txt); }
.spec-cta button{ width:100%; padding:9px; border-radius:9px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; font-size:12px; font-weight:800; cursor:pointer; }
.spec-cta .xopt{ display:flex; align-items:flex-start; gap:8px; margin-top:9px; font-size:11px;
  color:var(--mut); cursor:pointer; }
.spec-cta .xopt input{ margin-top:2px; flex:none; accent-color:var(--brand); }
/* re-check with a different source set (extension .rechk) */
.rechk{ width:100%; margin-top:10px; padding:9px; border-radius:9px; cursor:pointer;
  border:1px solid var(--l35); background:var(--surf2); color:var(--txt2); font-size:12px;
  font-weight:700; font-family:var(--f); }
.rechk:active{ border-color:var(--teal); color:var(--txt); }

.meta-note{ background:var(--surf); border:1px solid var(--l25); border-radius:12px; padding:10px 12px;
  font-size:11.5px; color:var(--mut); margin:10px 0; }
.meta-note b{ color:var(--lime); }
/* foot (extension .foot) */
.resactions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.resactions button{ flex:1; min-width:84px; }
.err{ background:rgba(244,33,46,.1); border:1px solid rgba(244,33,46,.5); color:#ff8791;
  border-radius:12px; padding:12px 14px; font-size:13px; }

/* ---------- camera ---------- */
.camwrap{ position:relative; border-radius:16px; overflow:hidden; background:#000;
  border:1px solid var(--l25); aspect-ratio:3/4; }
#cam{ width:100%; height:100%; object-fit:cover; display:block; }
.camframe{ position:absolute; inset:12% 7%; border:2px solid rgba(217,255,31,.65); border-radius:12px;
  pointer-events:none; box-shadow:0 0 0 200vmax rgba(0,0,0,.35); }
/* shutter feedback: quick white flash when the still is taken */
.camflash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.camflash.go{ animation:shutter .28s ease-out; }
@keyframes shutter{ 0%{ opacity:.85; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .camflash.go{ animation:none; } }
.camcontrols{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.denied{ border-color:rgba(244,33,46,.5); }
.denied b{ color:#ff8791; }
.denied .ghost{ margin-top:8px; }

/* ---------- history / library ---------- */
.hitem{ width:100%; text-align:left; background:var(--surf); border:1px solid var(--l25); color:var(--txt);
  border-radius:12px; padding:11px 13px; margin:8px 0; cursor:pointer; font-size:13px; }
.hitem:active{ border-color:rgba(217,255,31,.5); }
.hitem .t{ font-weight:700; overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.hitem .m{ color:var(--mut); font-size:11px; margin-top:4px; display:flex; gap:8px; align-items:center; }
.hicons{ font-size:12px; letter-spacing:.12em; color:var(--txt2); }
.tag{ display:inline-block; border-radius:9999px; font-size:10px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; background:rgba(255,255,255,.08); }
.t-true{ color:var(--green); }
.t-false{ color:#ff8791; }
.t-mixed{ color:var(--amber); }
.t-unverified{ color:var(--mut); }
.empty{ color:var(--mut); text-align:center; padding:30px 10px; font-size:13px; }

/* ---------- settings ---------- */
.langsel{ width:100%; margin-top:6px; background:var(--surf2); color:var(--txt); border:1px solid var(--l35);
  border-radius:9px; padding:10px 12px; font-size:13px; font-family:var(--f); cursor:pointer; }
.keyrow{ display:flex; gap:8px; margin-top:8px; }
.keyrow input{ flex:1; background:var(--surf2); border:1px solid var(--l35); color:var(--txt);
  border-radius:9px; padding:10px 12px; font-family:var(--mono); font-size:13px; min-width:0; }
.keyrow input.masked{ -webkit-text-security:disc; }
.keyeye{ flex:none; padding:9px 11px; display:inline-flex; align-items:center; }
.keyeye svg{ width:17px; height:17px; }
#keyStatus{ margin-top:8px; }
.ok{ color:var(--green); } .bad{ color:#ff8791; }

/* ---------- plan hero (Buy page) ---------- */
.planname{ font-size:28px; font-weight:900; letter-spacing:.02em; margin:2px 0 12px; line-height:1; }
.planname.free{ color:var(--mut); }
.planname.pro{ color:var(--lime); text-shadow:0 0 24px rgba(217,255,31,.35); }
.statrow{ margin:11px 0; }
.statlab{ display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--txt2); margin-bottom:5px; }
.statlab b{ font-variant-numeric:tabular-nums; color:var(--txt); white-space:nowrap; }
.statbar{ height:7px; border-radius:7px; background:var(--surf2); overflow:hidden; }
.statbar i{ display:block; height:100%; border-radius:7px; }
.tastechip{ margin-top:11px; font-size:11.5px; font-weight:700; color:var(--lime);
  background:rgba(217,255,31,.09); border:1px solid rgba(217,255,31,.35); border-radius:10px; padding:8px 11px; }

/* ---------- upsell (conversion rows on More) ---------- */
.upitem{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--l22); }
.upitem:first-child{ border-top:0; }
.upitem b{ display:block; font-size:13px; font-weight:800; letter-spacing:-.01em; }
.upitem span{ display:block; font-size:11px; color:var(--mut); margin-top:1px; line-height:1.4; }
.upitem .cta{ flex:none; padding:8px 13px; font-size:12px; }

/* ---------- tabs ---------- */
.tabs{ position:fixed; bottom:0; left:0; right:0; z-index:10; display:flex;
  background:rgba(10,7,19,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--l22); padding-bottom:env(safe-area-inset-bottom); }
.tab{ flex:1; position:relative; background:transparent; border:0; color:var(--faint);
  font-size:10px; font-weight:800; letter-spacing:.04em; padding:9px 0 8px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; }
.ticon{ width:21px; height:21px; }
.tab.active{ color:var(--lime); }
.tab.active::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--lime); }

/* ---------- modal (extension .sharebox/.sharecard) ---------- */
.modal{ position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background:rgba(5,3,10,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  padding:18px 14px calc(var(--nav-h) + 10px); }
.modal-card{ width:100%; max-width:440px; background:var(--panel); border:1px solid rgba(155,77,255,.45);
  border-radius:16px; padding:18px; box-shadow:0 20px 70px rgba(0,0,0,.6), 0 0 40px rgba(155,77,255,.18); }
.modal-card h3{ margin:0 0 6px; font-size:15px; font-weight:900; }
.modal-card p{ margin:6px 0; font-size:12.5px; }
.modal-card .cta.wide{ margin:12px 0 8px; }

/* ---------- cleanup cross-sell ---------- */
.xsell{ border-color:rgba(217,255,31,.35);
  background:linear-gradient(180deg, rgba(217,255,31,.05), rgba(155,77,255,.04) 70%), var(--surf); }
.xsell .cta{ margin-top:4px; }

/* ---------- socials / spread ---------- */
.socialrow{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.socialrow .ghost{ flex:1; justify-content:center; text-decoration:none; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xmark{ font-size:15px; font-weight:900; line-height:1; }

/* ---------- update banner ---------- */
.updatebar{ position:fixed; bottom:calc(var(--nav-h) + 10px); left:50%; transform:translateX(-50%);
  z-index:25; display:flex; align-items:center; gap:12px; padding:10px 12px 10px 16px;
  background:var(--panel); border:1px solid rgba(217,255,31,.5); border-radius:13px;
  font-size:13px; font-weight:700; box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 26px rgba(217,255,31,.2);
  max-width:92vw; white-space:nowrap; }
.updatebar .cta{ padding:8px 14px; font-size:12px; }

/* ---------- toast ---------- */
.toast{ position:fixed; bottom:calc(var(--nav-h) + 12px); left:50%; transform:translateX(-50%);
  background:var(--surf2); border:1px solid var(--l35); color:var(--txt); border-radius:10px;
  padding:11px 15px; font-size:12.5px; z-index:40; max-width:88vw; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5); }

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; }