/* ===========================================================================
   HoldOrSell — public marketing / legal surface.
   Shared stylesheet for landing.html, pricing.html, methodology.html,
   privacy.html, terms.html, account.html.

   Palette inherited from app/static/index.html (the Signal Desk terminal):
   deep slate desk, phosphor mint for HOLD LONG, amber for HOLD SHORT,
   coral for SELL NOW, violet as the analytic accent.

   Dark is the base (bare :root) because that is what the app ships. Light is
   layered on top twice — once for prefers-color-scheme, once for the explicit
   [data-theme="light"] toggle — so the toggle wins in both directions.
   Fully self-contained: system fonts only, no CDN, no external requests.
   ======================================================================== */

:root{
  /* --- surfaces --- */
  --desk:#12161d;
  --desk-2:#181e28;
  --desk-3:#1f2733;
  --raise:#232c39;
  --line:#2b3543;
  --line-soft:#222a35;

  /* --- ink --- */
  --ink:#e8edf2;
  --ink-dim:#94a3b4;
  --ink-faint:#8493a6;

  /* --- signal colours --- */
  --mint:#4fe3a3;
  --amber:#f2c14e;
  --coral:#ff6b6b;
  --violet:#9d8cff;
  --paper:#e9e2d0;

  /* --- verdict semantics --- */
  --v-long:#4fe3a3;   --v-long-bg:rgba(79,227,163,.11);  --v-long-bd:rgba(79,227,163,.34);
  --v-short:#f2c14e;  --v-short-bg:rgba(242,193,78,.11); --v-short-bd:rgba(242,193,78,.34);
  --v-sell:#ff6b6b;   --v-sell-bg:rgba(255,107,107,.11); --v-sell-bd:rgba(255,107,107,.34);
  --v-accent:#9d8cff; --v-accent-bg:rgba(157,140,255,.11);--v-accent-bd:rgba(157,140,255,.32);

  --shadow:0 8px 30px rgba(0,0,0,.45);
  --shadow-sm:0 2px 10px rgba(0,0,0,.30);

  --mono:'SFMono-Regular',ui-monospace,'Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Helvetica Neue',sans-serif;

  --r-sm:8px; --r:12px; --r-lg:18px;
  --pad:clamp(18px,4vw,26px);
}

/* ---- LIGHT: system preference (unless the toggle forced dark) ---- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --desk:#f4f6f9;
    --desk-2:#ffffff;
    --desk-3:#eef1f6;
    --raise:#e6ebf2;
    --line:#d9e0e9;
    --line-soft:#e6ebf1;

    --ink:#111823;
    --ink-dim:#4d5b70;
    --ink-faint:#66737f;

    --mint:#0a7d4f;
    --amber:#96690a;
    --coral:#cf3535;
    --violet:#5f47d6;
    --paper:#6b5f3f;

    --v-long:#076b42;   --v-long-bg:rgba(7,107,66,.10);   --v-long-bd:rgba(7,107,66,.30);
    --v-short:#8f6300;  --v-short-bg:rgba(143,99,0,.10);  --v-short-bd:rgba(143,99,0,.26);
    --v-sell:#c62f2f;   --v-sell-bg:rgba(198,47,47,.09);  --v-sell-bd:rgba(198,47,47,.26);
    --v-accent:#5f47d6; --v-accent-bg:rgba(95,71,214,.09);--v-accent-bd:rgba(95,71,214,.26);

    --shadow:0 10px 30px rgba(20,30,50,.10);
    --shadow-sm:0 2px 8px rgba(20,30,50,.07);
  }
}

/* ---- LIGHT: explicit toggle ---- */
:root[data-theme="light"]{
  --desk:#f4f6f9;
  --desk-2:#ffffff;
  --desk-3:#eef1f6;
  --raise:#e6ebf2;
  --line:#d9e0e9;
  --line-soft:#e6ebf1;

  --ink:#111823;
  --ink-dim:#4d5b70;
  --ink-faint:#66737f;

  --mint:#0a7d4f;
  --amber:#96690a;
  --coral:#cf3535;
  --violet:#5f47d6;
  --paper:#6b5f3f;

  --v-long:#076b42;   --v-long-bg:rgba(7,107,66,.10);   --v-long-bd:rgba(7,107,66,.30);
  --v-short:#8f6300;  --v-short-bg:rgba(143,99,0,.10);  --v-short-bd:rgba(143,99,0,.26);
  --v-sell:#c62f2f;   --v-sell-bg:rgba(198,47,47,.09);  --v-sell-bd:rgba(198,47,47,.26);
  --v-accent:#5f47d6; --v-accent-bg:rgba(95,71,214,.09);--v-accent-bd:rgba(95,71,214,.26);

  --shadow:0 10px 30px rgba(20,30,50,.10);
  --shadow-sm:0 2px 8px rgba(20,30,50,.07);
}

/* =========================== base =========================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--desk);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

a{color:inherit;text-decoration:none}
a.link{color:var(--v-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a.link:hover{opacity:.8}
img{max-width:100%;display:block}
h1,h2,h3,h4{letter-spacing:-.022em;line-height:1.12;font-weight:660}
strong{font-weight:650;color:var(--ink)}
code,.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--v-accent);outline-offset:2px;border-radius:4px}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:820px}

/* =========================== top bar =========================== */
.topbar{
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--line);
  background:var(--desk);  /* fallback for engines without color-mix() */
  background:color-mix(in srgb, var(--desk) 86%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.topbar-in{display:flex;align-items:center;gap:14px;padding:12px 0;max-width:1120px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand .mark{
  font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--desk);background:var(--mint);
  padding:4px 8px;border-radius:6px;letter-spacing:.06em;
}
:root[data-theme="light"] .brand .mark, :root:not([data-theme="dark"]) .brand .mark{color:#ffffff}
:root[data-theme="dark"] .brand .mark{color:#12161d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand .mark{color:#12161d}}
.brand b{font-size:16px;font-weight:680;letter-spacing:-.02em}
.brand .dom{font-family:var(--mono);font-size:11px;color:var(--ink-faint);display:none}
@media(min-width:720px){.brand .dom{display:inline}}

.nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{
  font-size:13.5px;color:var(--ink-dim);padding:7px 10px;border-radius:8px;
  transition:color .15s,background .15s;white-space:nowrap;
}
.nav a:hover{color:var(--ink);background:var(--desk-3)}
.nav a.on{color:var(--ink);background:var(--desk-3)}
.nav .cta{
  background:var(--mint);color:#0d1219;font-weight:640;
  padding:8px 14px;border-radius:9px;
}
:root[data-theme="light"] .nav .cta{color:#fff}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .nav .cta{color:#fff}}
.nav .cta:hover{background:var(--mint);opacity:.88;color:#0d1219}
:root[data-theme="light"] .nav .cta:hover{color:#fff}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .nav .cta:hover{color:#fff}}

.themebtn{
  background:transparent;border:1px solid var(--line);color:var(--ink-dim);
  width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.themebtn:hover{color:var(--ink);border-color:var(--ink-faint)}
@media(max-width:640px){
  .topbar-in{flex-wrap:wrap;gap:8px}
  .nav{width:100%;margin-left:0;gap:2px}
  .nav a{padding:6px 8px;font-size:13px}
}

/* =========================== typography blocks =========================== */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--v-accent);
}
.eyebrow.mint{color:var(--mint)}
h1.display{font-size:clamp(30px,5.6vw,52px);line-height:1.03;font-weight:680;letter-spacing:-.032em}
h1.display .accent{color:var(--mint)}
.lede{font-size:clamp(15px,2.1vw,18px);color:var(--ink-dim);max-width:60ch}
h2.sec{font-size:clamp(22px,3.4vw,30px);margin-bottom:10px}
h3.sub{font-size:17px;margin-bottom:6px}
.muted{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}
.tiny{font-size:12.5px}
.small{font-size:14px}
section.band{padding:clamp(48px,7vw,84px) 0;border-top:1px solid var(--line-soft)}
section.band:first-of-type{border-top:none}
.stack>*+*{margin-top:14px}
.stack-lg>*+*{margin-top:26px}

/* =========================== panels =========================== */
.panel{
  background:var(--desk-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--pad);box-shadow:var(--shadow-sm);
}
.panel.flat{box-shadow:none}
.panel.raised{background:var(--desk-3)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--desk-2);color:var(--ink-dim);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:0 0 auto}
.dot.live{background:var(--mint);box-shadow:0 0 8px var(--mint)}
.dot.off{background:var(--ink-faint);box-shadow:none}

/* =========================== verdict semantics =========================== */
.vbadge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-weight:700;letter-spacing:.05em;
  font-size:13px;text-transform:uppercase;
  padding:8px 14px;border-radius:10px;border:1px solid;
}
.vbadge.lg{font-size:clamp(15px,2.4vw,20px);padding:11px 18px;letter-spacing:.06em}
.vbadge .sq{width:9px;height:9px;border-radius:2px;background:currentColor;flex:0 0 auto}
.v-long  {color:var(--v-long); background:var(--v-long-bg); border-color:var(--v-long-bd)}
.v-short {color:var(--v-short);background:var(--v-short-bg);border-color:var(--v-short-bd)}
.v-sell  {color:var(--v-sell); background:var(--v-sell-bg); border-color:var(--v-sell-bd)}
.v-none  {color:var(--ink-faint);background:var(--desk-3);border-color:var(--line)}

.chip{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto}
.chip.hl{background:var(--v-long)} .chip.hs{background:var(--v-short)} .chip.sn{background:var(--v-sell)}

/* confidence meter — 5 discrete pips, because the model emits 5 labels */
.conf{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.conf-pips{display:flex;gap:3px}
.conf-pip{width:16px;height:6px;border-radius:2px;background:var(--line)}
.conf-pip.on{background:var(--v-accent)}
.conf-label{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);letter-spacing:.02em}

/* signal bars */
.sigrow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.sigrow+.sigrow{margin-top:11px}
.sig-name{font-size:13px;color:var(--ink)}
.sig-name .w{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-left:6px}
.sig-val{font-family:var(--mono);font-size:12.5px;color:var(--ink-dim)}
.sig-track{grid-column:1/-1;height:6px;border-radius:3px;background:var(--desk-3);position:relative;overflow:hidden}
.sig-fill{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--ink-faint)}
.sig-fill.up{background:var(--v-long)}
.sig-fill.down{background:var(--v-sell)}
.sig-fill.mid{background:var(--v-short)}
/* the 45 / 55 gates the classifier actually uses */
.sig-track::before,.sig-track::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--desk);opacity:.75;
}
.sig-track::before{left:45%} .sig-track::after{left:55%}

/* KPI tiles */
.kpi{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--desk-2)}
.kpi .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.kpi .v{font-size:clamp(19px,3vw,24px);font-weight:660;margin-top:5px;letter-spacing:-.02em}
.kpi .v.up{color:var(--v-long)} .kpi .v.down{color:var(--v-sell)}
.kpi .n{font-size:12px;color:var(--ink-dim);margin-top:3px}

/* evidence list */
.evidence{list-style:none;display:flex;flex-direction:column;gap:9px}
.evidence li{
  position:relative;padding:10px 12px 10px 34px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--desk-3);font-size:13.5px;color:var(--ink);
}
.evidence li::before{
  content:"";position:absolute;left:13px;top:16px;
  width:8px;height:8px;border-radius:2px;background:var(--ink-faint);
}
.evidence li.pro::before{background:var(--v-long)}
.evidence li.con::before{background:var(--v-sell)}
.evidence li.note::before{background:var(--v-accent)}
.evidence li.warn::before{background:var(--v-short)}

/* =========================== verdict card =========================== */
.vcard{
  background:var(--desk-2);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.vcard.is-long{border-color:var(--v-long-bd)}
.vcard.is-short{border-color:var(--v-short-bd)}
.vcard.is-sell{border-color:var(--v-sell-bd)}
.vcard-top{display:flex;gap:14px;padding:18px;align-items:flex-start;border-bottom:1px solid var(--line-soft)}
.vcard-art{
  width:74px;height:103px;flex:0 0 74px;border-radius:7px;border:1px solid var(--line);
  background:var(--desk-3);object-fit:cover;
}
.vcard-art.ph{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;color:var(--ink-faint);text-align:center;padding:4px}
.vcard-id{min-width:0;flex:1}
.vcard-id h3{font-size:17px;line-height:1.2;margin-bottom:4px;overflow-wrap:anywhere}
.vcard-id .meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);display:flex;gap:8px;flex-wrap:wrap}
.vcard-id .meta .rar{color:var(--v-accent)}
.vcard-body{padding:18px;display:flex;flex-direction:column;gap:16px}
.vcard-verdictrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vcard-regime{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:var(--desk-3);
}
.vcard-foot{
  padding:12px 18px;border-top:1px solid var(--line-soft);background:var(--desk-3);
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}

/* sparkline */
.spark{width:100%;height:66px;display:block;overflow:visible}
.spark-wrap{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--desk-3)}
.spark-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.spark-head .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.spark-head .d{font-family:var(--mono);font-size:12px}
.d.up{color:var(--v-long)} .d.down{color:var(--v-sell)}

/* skeleton loading — never fake numbers, just bones */
.sk{background:linear-gradient(90deg,var(--desk-3),var(--raise),var(--desk-3));
    background-size:200% 100%;animation:shimmer 1.5s linear infinite;border-radius:6px;color:transparent}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk.line{height:12px;margin:8px 0}
.sk.line.w60{width:60%} .sk.line.w40{width:40%} .sk.line.w80{width:80%}
.sk.block{height:120px}

.errbox{
  border:1px dashed var(--v-short-bd);background:var(--v-short-bg);
  border-radius:var(--r);padding:16px;font-size:13.5px;color:var(--ink-dim);
}
.errbox b{color:var(--v-short);display:block;margin-bottom:4px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}

/* =========================== buttons =========================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:14.5px;font-weight:620;
  padding:11px 20px;border-radius:10px;border:1px solid var(--line);
  background:var(--desk-3);color:var(--ink);cursor:pointer;
  transition:transform .12s,opacity .15s,background .15s;
}
.btn:hover{opacity:.9}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--mint);border-color:transparent;color:#0d1219}
:root[data-theme="light"] .btn.primary{color:#fff}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn.primary{color:#fff}}
.btn.ghost{background:transparent}
.btn.danger{background:transparent;border-color:var(--v-sell-bd);color:var(--v-sell)}
.btn.danger:hover{background:var(--v-sell-bg)}
.btn[disabled],.btn.disabled{opacity:.55;cursor:not-allowed}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}

/* =========================== pricing =========================== */
.plans{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:start}
.plan{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--desk-2);
  padding:var(--pad);display:flex;flex-direction:column;gap:16px;position:relative;
}
.plan.featured{border-color:var(--v-long-bd);box-shadow:var(--shadow)}
.plan .tag{
  position:absolute;top:-11px;left:var(--pad);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--mint);color:#0d1219;padding:4px 10px;border-radius:999px;
}
:root[data-theme="light"] .plan .tag{color:#fff}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .plan .tag{color:#fff}}
.plan h3{font-size:20px}
.price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.price .amt{font-size:clamp(30px,5vw,40px);font-weight:680;letter-spacing:-.035em}
.price .per{font-size:13.5px;color:var(--ink-dim)}
.price .alt{font-size:12.5px;color:var(--ink-faint);font-family:var(--mono);width:100%}
.feat{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.feat li{display:flex;gap:10px;align-items:flex-start;color:var(--ink)}
.feat li .m{flex:0 0 16px;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--v-long)}
.feat li.no{color:var(--ink-faint)}
.feat li.no .m{color:var(--ink-faint)}
.feat li em{font-style:normal;color:var(--ink-dim);font-size:12.5px;display:block;margin-top:1px}

/* comparison table — scrolls inside itself, never the page */
.tablescroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--desk-2)}
table.cmp{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
table.cmp th,table.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.cmp thead th{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);background:var(--desk-3)}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp td.y{color:var(--v-long)}
table.cmp td.n{color:var(--ink-faint)}
table.cmp th[scope="row"]{font-weight:560;color:var(--ink)}

/* =========================== methodology =========================== */
.fork{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.forkcard{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--desk-2)}
.forkcard.trough{border-color:var(--v-long-bd);background:var(--v-long-bg)}
.forkcard.decline{border-color:var(--v-sell-bd);background:var(--v-sell-bg)}
.forkcard h4{font-size:15px;margin-bottom:8px}
.rule{
  font-family:var(--mono);font-size:12.5px;color:var(--ink);
  background:var(--desk-3);border:1px solid var(--line);border-left:3px solid var(--v-accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:11px 13px;overflow-x:auto;white-space:pre-wrap;
}
.termcard{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--desk-2)}
.termcard h4{font-size:14.5px;margin-bottom:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.termcard p{font-size:13.5px;color:var(--ink-dim);margin-top:6px}
.termcard p b{color:var(--ink);font-weight:600}
.termcard .watch{border-top:1px dashed var(--line);margin-top:10px;padding-top:9px;font-size:12.5px;color:var(--ink-faint)}

details.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--desk-2);overflow:hidden}
details.faq+details.faq{margin-top:10px}
details.faq summary{
  padding:15px 18px;cursor:pointer;font-weight:600;font-size:15px;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:var(--mono);color:var(--ink-faint);font-size:18px;flex:0 0 auto}
details.faq[open] summary::after{content:"\2212"}
details.faq summary:hover{background:var(--desk-3)}
details.faq .ans{padding:0 18px 16px;font-size:14px;color:var(--ink-dim)}
details.faq .ans>*+*{margin-top:10px}

/* =========================== legal / prose =========================== */
.prose{font-size:15px;color:var(--ink-dim);max-width:74ch}
.prose h2{font-size:20px;color:var(--ink);margin:30px 0 10px}
.prose h3{font-size:16px;color:var(--ink);margin:22px 0 8px}
.prose p+p{margin-top:12px}
.prose ul,.prose ol{margin:10px 0 10px 22px}
.prose li+li{margin-top:7px}
.prose strong{color:var(--ink)}
pre.legal{
  font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--ink-dim);
  background:var(--desk-2);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;white-space:pre-wrap;overflow-wrap:anywhere;
}
.callout{
  border:1px solid var(--v-short-bd);background:var(--v-short-bg);
  border-radius:var(--r);padding:16px 18px;font-size:14px;color:var(--ink-dim);
}
.callout b{color:var(--v-short);display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.callout.info{border-color:var(--v-accent-bd);background:var(--v-accent-bg)}
.callout.info b{color:var(--v-accent)}
.callout.stop{border-color:var(--v-sell-bd);background:var(--v-sell-bg)}
.callout.stop b{color:var(--v-sell)}

/* =========================== account =========================== */
.setrow{
  display:grid;gap:6px 20px;grid-template-columns:1fr;
  padding:16px 0;border-bottom:1px solid var(--line-soft);
}
@media(min-width:680px){.setrow{grid-template-columns:230px 1fr;align-items:start}}
.setrow:last-child{border-bottom:none}
.setrow .lbl{font-size:14px;font-weight:600}
.setrow .lbl em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-faint);font-weight:400;margin-top:2px}
.setrow .ctl{font-size:14px;color:var(--ink-dim);display:flex;flex-direction:column;gap:10px;min-width:0}
.field{
  width:100%;max-width:420px;background:var(--desk-3);border:1px solid var(--line);
  border-radius:9px;padding:10px 13px;color:var(--ink);font-family:var(--mono);font-size:13px;
}
.field[readonly],.field[disabled]{color:var(--ink-faint)}
.danger-zone{border:1px solid var(--v-sell-bd);border-radius:var(--r-lg);padding:var(--pad);background:var(--v-sell-bg)}
.notwired{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--v-short);border:1px solid var(--v-short-bd);background:var(--v-short-bg);
  padding:3px 9px;border-radius:999px;
}
dialog.sheet{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--desk-2);
  color:var(--ink);padding:0;max-width:520px;width:calc(100% - 32px);box-shadow:var(--shadow);
}
dialog.sheet::backdrop{background:rgba(4,7,12,.62);backdrop-filter:blur(3px)}
dialog.sheet .dh{padding:18px var(--pad) 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
dialog.sheet .db{padding:14px var(--pad);font-size:14px;color:var(--ink-dim)}
dialog.sheet .db>*+*{margin-top:12px}
dialog.sheet .df{padding:0 var(--pad) 20px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* =========================== footer =========================== */
footer.site{border-top:1px solid var(--line);margin-top:40px;padding:34px 0 46px;color:var(--ink-faint);font-size:13px}
footer.site .cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
footer.site h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
footer.site a{display:block;color:var(--ink-dim);padding:3px 0}
footer.site a:hover{color:var(--ink)}
footer.site .fine{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-soft);max-width:70ch;line-height:1.6}