/* ═══════════════════════════════════════════════════════════════════════════
   Lockstep Markets — dashboard styles
   Palette validated for dark surfaces: pos↔neg CVD ΔE 9.2, contrast ≥ 5.1:1.
   Green/red are reserved strictly for profit/loss and always ride a sign or
   a text label, never colour alone.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #0d1117;
  --bg-sunk:   #0a0e14;
  --card:      #151b23;
  --card-2:    #1b232e;
  --card-3:    #212b38;
  --line:      #232c39;
  --line-2:    #2f3b4b;

  --ink:       #e6edf3;
  --ink-2:     #9aa7b6;
  --ink-3:     #6b7889;

  /* Electric azure rather than the old royal blue, which read slightly
     violet and sat back into the page. Brighter fills mean white text on
     them fails, so --acc-ink below is what rides on the accent. */
  --acc:       #0a84ff;
  --acc-lt:    #66b2ff;
  --acc-ink:   #08121f;                    /* 5.16:1 on --acc */
  --acc-wash:  rgba(10, 132, 255, .15);

  --pos:       #35d07f;
  --pos-wash:  rgba(53, 208, 127, .12);
  --neg:       #f85149;
  --neg-wash:  rgba(248, 81, 73, .12);
  --amber:     #d9a63c;
  --amber-wash:rgba(217, 166, 60, .13);

  --r:   8px;
  --r-sm: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.4);

  /* Self-hosted; see static/fonts.css. The fallbacks matter — they are what
     renders for the ~200ms before the woff2 lands, and on the rare client
     that refuses the download. */
  --sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

/* Class-level `display` would otherwise out-specify the UA's [hidden] rule. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13.5px/1.55 var(--sans);
  font-feature-settings: "cv11", "ss01";   /* single-storey g, straighter l */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, dl, figure { margin: 0; }
ul { padding: 0; list-style: none; }
code { font-family: var(--mono); font-size: .92em; color: var(--ink); background: var(--card-2);
       padding: 1px 5px; border-radius: 4px; }

:focus-visible { outline: 2px solid var(--acc-lt); outline-offset: 2px; border-radius: 4px; }

/* ── App chrome (banner + header + tabs) — pinned to the top ────────────── */
.chrome { position: sticky; top: 0; z-index: 50; background: var(--card); }

.offline-banner, .verify-banner {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; flex-wrap: wrap; row-gap: 2px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  padding: 5px 12px;
}
.offline-banner {
  background: var(--neg-wash); color: var(--neg);
  border-bottom: 1px solid rgba(248, 81, 73, .35);
}
/* Same bar, amber — a nudge to finish signing up, not a failure. */
.verify-banner {
  background: var(--amber-wash); color: var(--amber);
  border-bottom: 1px solid rgba(217, 166, 60, .35);
}
.offline-banner svg, .verify-banner svg { flex: none; }
.verify-banner .linkbtn { color: inherit; font-weight: 700; }
.verify-banner .linkbtn:hover:not(:disabled) { color: #ecc879; }
.verify-banner .linkbtn:disabled { color: inherit; opacity: .75; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 52px; padding: 0 22px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-name { font-size: 14px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }

.statusdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3); flex: none;
}
.statusdot.is-running { background: var(--pos); animation: pulse 2s ease-out infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53, 208, 127, .55); }
  70%  { box-shadow: 0 0 0 6px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}
@media (prefers-reduced-motion: reduce) { .statusdot.is-running { animation: none; } }

.badge {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.badge-demo   { color: var(--amber); background: var(--amber-wash); border: 1px solid rgba(217,166,60,.3); }
.badge-locked { color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line-2); }
/* Live = real money. Red, and never the only signal — the word LIVE rides with it. */
.badge-live   { color: var(--neg); background: var(--neg-wash); border: 1px solid rgba(248,81,73,.45); }
.badge-plan-free { color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line-2); }
.badge-plan-pro  { color: var(--pos); background: transparent; border: 1px solid rgba(53,208,127,.5); }

.topbar-right { display: flex; align-items: center; gap: 18px; }
.topstats { display: flex; align-items: center; gap: 10px; }
.topstat { display: flex; align-items: baseline; gap: 6px; }
.topstat-k { font-size: 11px; color: var(--ink-3); }
.topstat-v { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.topstat-sep { color: var(--line-2); }

/* ── Header account cluster ─────────────────────────────────────────────── */
.acct-cluster {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding-left: 16px; border-left: 1px solid var(--line);
}
.acct-email {
  font-size: 11.5px; color: var(--ink-2); max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; background: none; border: 0; padding: 5px;
  color: var(--ink-3); border-radius: var(--r-sm); cursor: pointer;
  transition: color .12s, background .12s; flex: none;
}
.icon-btn:hover { color: var(--ink); background: var(--card-2); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 12.5px/1 var(--sans); color: var(--ink);
  background: var(--card-2); border: 1px solid var(--line-2);
  padding: 7px 13px; border-radius: var(--r-sm); cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--card-3); border-color: #3b485a; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn-primary:hover:not(:disabled) { background: #2b90ff; border-color: #2b90ff; }

.btn-stop { background: transparent; border-color: rgba(248,81,73,.5); color: var(--neg); }
.btn-stop:hover:not(:disabled) { background: var(--neg-wash); border-color: var(--neg); }

.btn-danger { background: transparent; border-color: rgba(248,81,73,.45); color: var(--neg); }
.btn-danger:hover:not(:disabled) { background: var(--neg-wash); border-color: var(--neg); }
.btn-danger.is-arming { background: var(--neg); border-color: var(--neg); color: #fff; }

.btn-ghost { background: transparent; }
.btn-upgrade { background: var(--acc-wash); border-color: rgba(10,132,255,.6); color: var(--acc-lt); }
.btn-upgrade:hover:not(:disabled) { background: rgba(10,132,255,.26); border-color: var(--acc-lt); }
.btn-sm { padding: 5px 9px; font-size: 11.5px; }
.btn-xs { padding: 3px 7px; font-size: 11px; border-radius: 5px; }

/* A link, not a button — for controls that must not compete with a .btn. */
.linkbtn {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--acc-lt); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.linkbtn:hover:not(:disabled) { color: #8aa5ff; }
.linkbtn:disabled { color: var(--ink-3); cursor: default; text-decoration: none; }
.linkbtn-sm { font-size: 11px; font-weight: 500; }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 2px; padding: 0 18px;
  background: var(--card); border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

/* Narrow windows: wrap the header instead of overlapping */
@media (max-width: 880px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 8px 16px; row-gap: 6px; }
  .topbar-right { flex: 1 1 100%; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; gap: 12px; }
  .acct-cluster { padding-left: 0; border-left: 0; }
}
.tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: 600 12.5px/1 var(--sans); color: var(--ink-2);
  padding: 10px 13px 9px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--acc-lt); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap { max-width: 1560px; margin: 0 auto; padding: 18px 22px 48px; }
.panel { display: flex; flex-direction: column; gap: 14px; }
.panel[hidden] { display: none; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.card-title { font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.card-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.head-controls { display: flex; align-items: center; gap: 8px; flex: none; }
.pill-count {
  font: 600 11px/1 var(--mono); color: var(--ink-2);
  background: var(--card-2); border: 1px solid var(--line);
  padding: 3px 7px; border-radius: 20px; flex: none;
}

.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 1180px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ── Stat cards ───────────────────────────────────────────────────────────
   One headline figure and a rail of supporting ones, rather than a row of
   equals. Figures stay in the sans: the serif is the voice this product
   speaks in, and a balance is not the product talking, it is the product
   measuring.
   ------------------------------------------------------------------------ */
/* The default: equal cards, which is right where the figures really are
   peers (backtest summary, admin totals). */
.statrow { display: grid; gap: 14px;
           grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* The dashboard is not that case — equity leads and the rest support it. */
.statrow-lead { grid-template-columns: minmax(230px, 1fr) minmax(0, 2.5fr); }
.stat { padding: 12px 14px 11px; }
.stat-k { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.stat-v {
  font-size: 24px; font-weight: 640; letter-spacing: -.02em; margin-top: 4px; line-height: 1.1;
  font-variant-numeric: proportional-nums; /* hero-ish figures: never tabular */
}
.stat-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; font-family: var(--mono); }

.stat-hero { display: flex; flex-direction: column; justify-content: center;
             padding: 18px 20px 19px; }
.stat-hero .stat-k { font-size: 12px; }
.stat-hero .stat-v { font-size: clamp(30px, 3.2vw, 40px); margin-top: 6px; }

.statrail { display: flex; flex-wrap: wrap; align-items: stretch; }
.statrail .stat { flex: 1 1 128px; border-left: 1px solid var(--line);
                  display: flex; flex-direction: column; justify-content: center;
                  padding: 14px 16px 13px; }
.statrail .stat:first-child { border-left: 0; }
.statrail .stat-v { font-size: 19px; font-weight: 600; }

@media (max-width: 900px) {
  .statrow-lead { grid-template-columns: minmax(0, 1fr); }
  .statrail .stat { flex: 1 1 46%; }
  .statrail .stat:nth-child(3) { border-left: 0; }
  .statrail .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

.pos { color: var(--pos); }
.neg { color: var(--neg); }
.flat { color: var(--ink-2); }

/* ── Charts ─────────────────────────────────────────────────────────────── */
.chart-card { padding-bottom: 4px; }
.chart-host { padding: 10px 8px 6px; }
canvas { display: block; width: 100%; height: 250px; }
canvas:focus-visible { outline: 2px solid var(--acc-lt); outline-offset: -2px; }

.chart-tip {
  position: fixed; z-index: 80; pointer-events: none;
  background: var(--card-3); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 7px 9px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  min-width: 118px;
}
.chart-tip .tip-v { font: 640 14px/1.2 var(--mono); color: var(--ink); }
.chart-tip .tip-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.chart-tip .tip-key { width: 10px; height: 2px; border-radius: 1px; flex: none; }
.chart-tip .tip-t { font-size: 11px; color: var(--ink-2); }

.chart-table { max-height: 210px; overflow: auto; border-top: 1px solid var(--line); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-host { max-height: 420px; overflow: auto; }
.table-host.tall { max-height: 620px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--card); color: var(--ink-3);
  font-size: 11px; font-weight: 600; text-align: left; letter-spacing: .02em;
  padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 8px 12px; border-bottom: 1px solid rgba(35, 44, 57, .65); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: rgba(255,255,255,.022); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .ctr { text-align: center; }
.tbl td.num, .tbl td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl .dim { color: var(--ink-2); }
.tbl .mute { color: var(--ink-3); }

.title-cell {
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wide-title { max-width: 420px; }

/* ── Chips ──────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 10.5px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 4px; white-space: nowrap;
  background: var(--card-2); color: var(--ink-2); border: 1px solid var(--line-2);
}
.chip-buy  { color: var(--pos); background: var(--pos-wash); border-color: rgba(53,208,127,.28); }
.chip-sell { color: var(--neg); background: var(--neg-wash); border-color: rgba(248,81,73,.28); }
.chip-won  { color: var(--pos); background: var(--pos-wash); border-color: rgba(53,208,127,.28); }
.chip-lost { color: var(--neg); background: var(--neg-wash); border-color: rgba(248,81,73,.28); }
.chip-open { color: var(--ink-2); }
.chip-outcome { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px; color: var(--ink); }
.chip-kind { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 10.5px;
             background: transparent; color: var(--ink-3); border-color: var(--line); }
.chip-admin { color: var(--acc-lt); background: var(--acc-wash); border-color: rgba(10,132,255,.45); }

.decision-copied { color: var(--pos); font-family: var(--mono); font-weight: 600; font-size: 12px; }
.decision-skipped { color: var(--ink-3); font-size: 12px; }

/* ── Addresses / copy ───────────────────────────────────────────────────── */
.addr {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  background: none; border: 0; padding: 2px 4px; margin-left: -4px;
  border-radius: 4px; cursor: pointer;
}
.addr:hover { background: var(--card-2); color: var(--ink); }
.addr svg { opacity: 0; transition: opacity .12s; flex: none; }
.addr:hover svg, .addr:focus-visible svg { opacity: .65; }
.addr.copied { color: var(--pos); }
.addr.copied svg { opacity: 1; }

.rel { cursor: help; border-bottom: 1px dotted transparent; }
.rel:hover { border-bottom-color: var(--line-2); }

/* ── Feed (recent activity) ─────────────────────────────────────────────── */
.feed-host { max-height: 420px; overflow: auto; }
.feed-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 9px; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid rgba(35, 44, 57, .65);
}
.feed-item:last-child { border-bottom: 0; }
.feed-item:hover { background: rgba(255,255,255,.022); }
.feed-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.feed-time { font-size: 11px; color: var(--ink-3); font-family: var(--mono); white-space: nowrap; }
.feed-meta {
  grid-column: 2 / 4; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-3); font-family: var(--mono);
}
.feed-amt { color: var(--ink-2); }

/* ── Empty states ───────────────────────────────────────────────────────── */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 34px 20px; text-align: center;
}
.empty svg { color: var(--line-2); margin-bottom: 2px; }
.empty-title { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.empty-hint { font-size: 11.5px; color: var(--ink-3); max-width: 320px; }
td.empty-cell { padding: 0; border-bottom: 0 !important; }
td.empty-cell:hover { background: none !important; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.grow { flex: 1 1 320px; }
.field > label, .field > .label-row > label,
.toggle-label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
/* Label with a trailing link — "Password … Forgot password?" */
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field .opt { font-weight: 400; color: var(--ink-3); }
.help { font-size: 11px; color: var(--ink-3); line-height: 1.45; }

input[type="text"], input[type="number"], input[type="email"], input[type="password"], select {
  font: 13px/1 var(--sans); color: var(--ink);
  background: var(--bg-sunk); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 7px 9px; width: 100%;
  transition: border-color .12s;
}
input[type="text"] { font-family: var(--mono); font-size: 12.5px; }
input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
input[type="password"] { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; }
input:hover:not(:disabled), select:hover:not(:disabled) { border-color: #3b485a; }
input:focus, select:focus { outline: none; border-color: var(--acc-lt); }
input:disabled, select:disabled { opacity: .45; cursor: not-allowed; }
input.is-invalid { border-color: var(--neg); }
select { appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 51%, calc(100% - 9px) 51%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.input-sm { padding: 5px 8px; font-size: 12px; width: auto; }

.addform { display: flex; align-items: flex-end; gap: 12px; padding: 14px; flex-wrap: wrap; }
.addform .field { flex: 0 1 240px; }
.inline-error {
  display: flex; align-items: center; gap: 6px;
  margin: -4px 14px 12px; font-size: 11.5px; color: var(--neg);
}

.grid2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px; padding: 14px;
}
/* Keep inputs to a readable measure instead of stretching across the grid. */
.grid2 input, .grid2 select { max-width: 250px; }
.toggles { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
.toggle-row { display: flex; align-items: flex-start; gap: 10px; }

.switch { position: relative; display: inline-block; width: 32px; height: 18px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0; background: var(--card-3); border: 1px solid var(--line-2);
  border-radius: 20px; transition: background .14s, border-color .14s;
}
.switch .track::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px;
  background: var(--ink-2); border-radius: 50%; transition: transform .14s, background .14s;
}
.switch input:checked + .track { background: var(--acc); border-color: var(--acc); }
.switch input:checked + .track::after { transform: translateX(14px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--acc-lt); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .5; }

.radio { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.radio input { accent-color: var(--acc); margin: 0; }
.field-group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.field-group legend { font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 0 0 3px; }
.indent { margin-left: 22px; width: 260px; }

.btform { display: flex; align-items: flex-end; gap: 20px; padding: 14px; flex-wrap: wrap; }
.btform .field { flex: 0 0 auto; width: 150px; }

.disclaimer {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 0 14px 14px; padding: 8px 10px;
  background: var(--amber-wash); border: 1px solid rgba(217,166,60,.22); border-radius: var(--r-sm);
  font-size: 11.5px; color: var(--amber); line-height: 1.45;
}
.disclaimer svg { flex: none; margin-top: 1px; }
/* Icons built in JS come wrapped in a span — keep the wrapper from shrinking. */
.disclaimer > span:first-child { display: flex; flex: none; margin-top: 1px; }

.save-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 2px 2px 0;
}
#settings-form { display: flex; flex-direction: column; gap: 14px; }
.mono-dim { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

.acct-meta { display: flex; gap: 34px; padding: 14px 14px 0; }
.acct-meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct-meta-wrap { flex-wrap: wrap; row-gap: 12px; }
.meta-k { font-size: 11.5px; color: var(--ink-3); }
.meta-v { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.meta-v-sm { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.acct-actions { display: flex; align-items: center; gap: 10px; padding: 14px; }

.danger-zone {
  display: flex; align-items: flex-start; gap: 16px; margin: 14px;
  padding: 12px; border: 1px solid rgba(248,81,73,.22); border-radius: var(--r-sm);
  background: rgba(248,81,73,.04);
}
.danger-zone .field { width: 170px; flex: none; }
.danger-zone .help { max-width: 380px; margin-top: 6px; }

.locked-card { opacity: .82; }
.locked-copy { padding: 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; max-width: 760px; }

/* ── Auth screen ────────────────────────────────────────────────────────── */
.auth-screen {
  min-height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.auth-inner { width: 100%; max-width: 380px; display: flex; flex-direction: column;
              align-items: center; gap: 16px; }
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-card { width: 100%; }

.auth-tabs { display: flex; border-bottom: 1px solid var(--line); }
.auth-tab {
  flex: 1 1 50%; appearance: none; background: none; border: 0; cursor: pointer;
  font: 600 12.5px/1 var(--sans); color: var(--ink-2);
  padding: 13px 10px 11px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--acc-lt); }

.auth-form { display: flex; flex-direction: column; gap: 13px; padding: 16px 16px 18px; }
.auth-form .inline-error { margin: -3px 0 0; }
.auth-submit { width: 100%; padding: 9px 13px; margin-top: 2px; }
.auth-note { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.auth-foot { font-size: 11px; color: var(--ink-3); text-align: center; }
/* Forgot / sent / reset views — same card, no tabs above them. */
.auth-head { font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.auth-msg { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.auth-alt { display: flex; justify-content: center; gap: 16px; font-size: 11.5px; }

/* ── Live trading / key vault ───────────────────────────────────────────── */
.live-block { display: flex; flex-direction: column; }
.live-copy { padding: 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; max-width: 720px; }
.live-copy + .vault-form { padding-top: 0; }
.live-block .disclaimer { margin: 14px 14px 0; }
.live-block .disclaimer + .live-copy { padding-top: 12px; }

.upgrade-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 0 14px 14px; padding: 12px 14px;
  background: var(--card-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.price-line { font: 600 13px/1.3 var(--mono); color: var(--ink); }
.vault-note { padding: 0 14px 14px; }

.vault-form { display: flex; flex-direction: column; gap: 14px; padding: 14px; max-width: 560px; }
.vault-form .inline-error { margin: -4px 0 0; }
.vault-form .btn { align-self: flex-start; }

.vault-meta { padding: 14px 14px 0; }
.meta-v-addr { display: flex; align-items: center; min-height: 21px; }

/* Unverified email: the amber stand-in that replaces the key form entirely. */
.verify-notice {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  margin: 14px; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid rgba(217,166,60,.25); background: var(--amber-wash);
}
.verify-notice > span:first-child { display: flex; flex: none; margin-top: 1px; color: var(--amber); }
.verify-notice .btn { flex: none; align-self: center; }
.verify-copy { flex: 1 1 300px; }
.verify-title { font-size: 12.5px; font-weight: 600; color: var(--amber); line-height: 1.5; }
.verify-copy .help { margin-top: 4px; max-width: 520px; }

/* Arming is the one control that turns paper into money — give it a frame. */
.arm-zone {
  margin: 14px; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid rgba(217,166,60,.25); background: var(--amber-wash);
}
.arm-zone.is-armed { border-color: rgba(248,81,73,.4); background: rgba(248,81,73,.07); }
.arm-row { display: flex; align-items: flex-start; gap: 10px; }
.arm-copy { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; margin-top: 5px; max-width: 640px; }
.arm-zone .switch input:checked + .track { background: var(--neg); border-color: var(--neg); }
.arm-prompt {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07);
}
.arm-prompt .field { width: 132px; flex: none; }
.arm-prompt .arm-hint { flex: 1 1 220px; font-size: 11.5px; color: var(--neg); line-height: 1.5; }

/* ── Pills (filters) ────────────────────────────────────────────────────── */
.pills { display: inline-flex; gap: 2px; background: var(--bg-sunk);
         border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; }
.pill {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: 600 11.5px/1 var(--sans); color: var(--ink-3);
  padding: 5px 11px; border-radius: 4px;
}
.pill:hover { color: var(--ink); }
.pill.is-on { background: var(--card-3); color: var(--ink); }

/* ── Progress ───────────────────────────────────────────────────────────── */
.progress { height: 5px; margin: 14px; background: var(--bg-sunk);
            border-radius: 3px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--acc); border-radius: 3px; transition: width .3s ease; }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  background: var(--card-3); border: 1px solid var(--line-2);
  border-left: 3px solid var(--acc-lt);
  border-radius: var(--r-sm); padding: 9px 13px; font-size: 12.5px;
  box-shadow: 0 8px 22px rgba(0,0,0,.45); max-width: 380px;
  animation: toast-in .16s ease-out;
}
.toast.ok  { border-left-color: var(--pos); }
.toast.err { border-left-color: var(--neg); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ── Refetch: hold the frame, never a skeleton flash ────────────────────── */
.is-stale { opacity: .55; transition: opacity .2s; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 2px solid var(--card); }
::-webkit-scrollbar-thumb:hover { background: #3d4b5e; }

/* ── Signup disclosure modal ────────────────────────────────────────────── */
.modal-scrim {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 12, .78); padding: 20px;
}
.modal {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  width: min(680px, 100%); max-height: min(88vh, 860px);
}

.disclosure-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--line); }
.disclosure-head h1 { font-size: 17px; letter-spacing: -.01em; }
.disclosure-head p { color: var(--ink-2); font-size: 12.5px; margin-top: 5px; }

/* Scrolls independently so the acknowledgements stay visible. */
.disclosure-body { overflow-y: auto; padding: 18px 24px 22px; }
.disclosure-body h2 {
  font-size: 13px; margin: 20px 0 7px; color: var(--ink);
  text-transform: uppercase; letter-spacing: .06em;
}
.disclosure-body h2:first-child { margin-top: 0; }
.disclosure-body p, .disclosure-body li {
  color: var(--ink-2); font-size: 13px; line-height: 1.65;
}
.disclosure-body p + p { margin-top: 9px; }
.disclosure-body ul { padding-left: 19px; list-style: disc; margin-top: 7px; }
.disclosure-body li + li { margin-top: 5px; }
.disclosure-body strong { color: var(--ink); }
.disclosure-punch {
  background: var(--amber-wash); border: 1px solid rgba(217,166,60,.3);
  border-radius: var(--r-sm); padding: 11px 13px;
  color: var(--amber) !important; font-weight: 600;
}

.disclosure-foot {
  border-top: 1px solid var(--line); padding: 16px 24px 20px;
  background: var(--bg-sunk); border-radius: 0 0 var(--r) var(--r);
}
.ack {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
  padding: 5px 0; cursor: pointer;
}
.ack input { margin: 2px 0 0; flex: none; width: 15px; height: 15px; accent-color: var(--acc); cursor: pointer; }
.ack:hover span { color: var(--ink); }
.ack a { color: var(--acc-lt); }

.disclosure-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px;
}

@media (max-width: 620px) {
  .modal { max-height: 94vh; }
  .disclosure-head, .disclosure-body, .disclosure-foot { padding-left: 16px; padding-right: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Landing / pitch — shown beside the auth card to logged-out visitors.
   Two columns on desktop, stacked on narrow screens with the form first.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The auth screen is now a scrollable page rather than one centred card. */
.auth-screen { display: block; padding: 0; overflow-y: auto; }

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 56px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 28px 80px;
}

/* Three children now: the lead, the long-form pitch under it, and the form
   spanning both on the right. */
.pitch-lead { grid-column: 1; grid-row: 1; min-width: 0; }
.pitch      { grid-column: 1; grid-row: 2; min-width: 0; }
.auth-layout .auth-inner { grid-column: 2; grid-row: 1 / span 2; }

/* The auth card rides along as you read the pitch. */
.auth-layout .auth-inner { position: sticky; top: 40px; align-self: start; }

/* The upgrade prompt. Deliberately not styled as an error: nothing has gone
   wrong, they have just reached the edge of the free plan. */
.upgrade-card {
  width: min(430px, calc(100vw - 32px));
  background: linear-gradient(165deg, #1b2532 0%, var(--card) 58%);
  border: 1px solid #33415a; border-radius: 12px;
  padding: 24px 24px 20px; position: relative;
  box-shadow: 0 26px 60px -22px rgba(0,0,0,.9),
              0 0 48px -12px rgba(10,132,255,.3);
}
.upgrade-x { position: absolute; top: 10px; right: 12px; background: none;
             border: 0; color: var(--ink-3); font-size: 22px; line-height: 1;
             cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); }
.upgrade-x:hover { color: var(--ink); background: var(--card-2); }
.up-eyebrow { font-size: 11.5px; font-weight: 650; letter-spacing: .05em;
              text-transform: uppercase; color: var(--acc-lt); margin: 0; }
.up-title { font-family: var(--display); font-weight: 400; font-size: 30px;
            line-height: 1.15; letter-spacing: -.01em; color: var(--ink);
            margin: 6px 0 10px; }
.up-title small { font-family: var(--sans); font-size: 13px; color: var(--ink-3); }
.up-message { font-size: 13.5px; line-height: 1.65; color: var(--ink-2);
              margin: 0 0 14px; }
.up-perks { list-style: none; padding: 0; margin: 0 0 12px; }
.up-perks li { position: relative; padding-left: 18px; font-size: 13px;
               line-height: 1.6; color: var(--ink-2); }
.up-perks li + li { margin-top: 5px; }
.up-perks li::before { content: ""; position: absolute; left: 0; top: 8px;
                       width: 6px; height: 6px; border-radius: 50%;
                       background: var(--acc); }
.up-note { font-size: 12px; color: var(--ink-3); margin: 0 0 14px; }
.up-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.up-small { font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
            margin: 14px 0 0; }

/* A setting that changes what happens to real money gets a visible border,
   not the same quiet row as "copy sells". */
.toggle-row-warn { border-left: 3px solid var(--amber);
                   background: var(--amber-wash); border-radius: var(--r-sm);
                   padding: 11px 13px; margin-top: 4px; }
.toggle-row-warn .help b { color: var(--amber); }

/* Verdict list on the landing page. The five real labels, not a simplified
   three — a page that promises three and an app that shows five is a bad
   first impression and, on the "worse than their prices" one, a misleading
   omission. */
.verdicts { list-style: none; padding: 0; margin: 14px 0 0; }
.verdicts li { position: relative; padding-left: 22px; font-size: 14px;
               line-height: 1.65; color: var(--ink-2); }
.verdicts li + li { margin-top: 9px; }
.verdicts b { color: var(--ink); }
.verdicts + p { margin-top: 14px; }
.vdot { position: absolute; left: 0; top: 8px; width: 9px; height: 9px;
        border-radius: 50%; }
.vdot.v-good    { background: var(--pos); }
.vdot.v-fair    { background: var(--amber); }
.vdot.v-neutral { background: var(--ink-3); }
.vdot.v-bad     { background: var(--neg); }
.vdot.v-unknown { background: var(--line-2); }

/* The question the whole product turns on, given room to be read. */
.pitch-pull {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3;
  color: var(--ink); margin: 14px 0; padding-left: 15px;
  border-left: 3px solid var(--acc);
}
.pitch-sub-tight { font-size: 13.5px; color: var(--ink-3); margin-top: -18px; }

/* Pricing. People kept reading the whole page and never learning what it
   cost or what was free, which is the one thing they needed to decide. */
.tiers { display: grid; gap: 12px; margin: 16px 0 12px;
         grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }
.tier { background: var(--card); border: 1px solid var(--line);
        border-radius: var(--r); padding: 18px 18px 16px; }
.tier-pro { border-color: rgba(10,132,255,.45);
            background: linear-gradient(160deg, rgba(10,132,255,.07), var(--card) 55%); }
.tier-max { border-color: rgba(53,208,127,.4);
            background: linear-gradient(160deg, rgba(53,208,127,.07), var(--card) 55%); }
.tier-max .tier-name { color: var(--pos); }
.tier-name { display: block; font-size: 11.5px; font-weight: 700;
             letter-spacing: .07em; text-transform: uppercase;
             color: var(--ink-3); }
.tier-pro .tier-name { color: var(--acc-lt); }
.tier-price { display: block; font-family: var(--display); font-weight: 400;
              font-size: 34px; line-height: 1.1; color: var(--ink);
              margin: 4px 0 12px; }
.tier-price small { font-family: var(--sans); font-size: 13px;
                    color: var(--ink-3); }
.tier ul { list-style: none; padding: 0; margin: 0; }
.tier li { position: relative; padding-left: 17px; font-size: 13px;
           line-height: 1.6; color: var(--ink-2); }
.tier li + li { margin-top: 6px; }
.tier li::before { content: ""; position: absolute; left: 0; top: 8px;
                   width: 6px; height: 6px; border-radius: 50%;
                   background: var(--line-2); }
.tier-pro li::before { background: var(--acc); }
.tier-max li::before { background: var(--pos); }
.tier li b { color: var(--ink); }
.tier-note { font-size: 12px; color: var(--ink-3); margin-top: 11px;
             line-height: 1.5; }

/* ── The self-running demo ────────────────────────────────────────────────
   Nobody believes "profit does not mean skill" on being told it. They
   believe it after watching $412,000 resolve to "no detectable edge".
   ------------------------------------------------------------------------ */
.demo {
  position: relative; margin: 26px 0 10px; border-radius: 12px;
  background: linear-gradient(180deg, #1b2532 0%, #141b24 64%);
  border: 1px solid #33415a;
  box-shadow: 0 26px 60px -22px rgba(0,0,0,.9),
              0 0 46px -12px rgba(10,132,255,.34),
              0 0 0 1px rgba(255,255,255,.035) inset;
  overflow: hidden;
}
/* The card takes the accent when it has found something, and the warning
   colour when it has not. Slow, so it registers as a change of mind. */
.demo.v-good { box-shadow: 0 26px 60px -22px rgba(0,0,0,.9),
                           0 0 54px -10px rgba(53,208,127,.34),
                           0 0 0 1px rgba(255,255,255,.035) inset;
               border-color: rgba(53,208,127,.36); }
.demo.v-bad  { border-color: rgba(248,81,73,.32); }
.demo { transition: box-shadow .7s ease, border-color .7s ease; }
/* A slow sheen across the top edge, so the card reads as live rather than
   as a screenshot someone pasted in. */
.demo::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc-lt), transparent);
  opacity: .55; animation: sheen 5.5s ease-in-out infinite;
}
@keyframes sheen { 0%,100% { transform: translateX(-60%); }
                   50%     { transform: translateX(60%); } }

.demo-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: rgba(10,14,20,.5);
}
.demo-dots { display: inline-flex; gap: 5px; }
.demo-dots i { width: 8px; height: 8px; border-radius: 50%;
               background: var(--line-2); display: block; }
/* The middle light goes live while the analysis is running. */
.demo.is-scanning .demo-dots i:nth-child(2) {
  background: var(--acc-lt); box-shadow: 0 0 8px rgba(102,178,255,.85);
}
.demo.is-judged .demo-dots i:nth-child(2) { background: var(--pos); }
.demo-label { font-size: 11px; font-weight: 650; letter-spacing: .07em;
              text-transform: uppercase; color: var(--ink-3); }
.demo-tick { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--ink-3); }

.demo-body { padding: 20px 22px 22px; }

.demo-who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
            min-height: 18px; }
.demo-name { font-size: 14px; font-weight: 650; color: var(--ink); }
.demo-rank { font: 500 11.5px/1 var(--mono); color: var(--ink-3); }

.demo-profit { margin-top: 12px; }
.demo-k { display: block; font-size: 11px; letter-spacing: .05em;
          text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.demo-v {
  display: block; font-size: clamp(38px, 6vw, 56px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1; color: var(--pos);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(53,208,127,.34);
  transition: color .5s ease, text-shadow .5s ease, opacity .5s ease;
}
/* Once the verdict lands, the money stops being the headline. That demotion
   is the whole argument, so it is animated rather than instant. */
.demo.is-judged .demo-v { color: var(--ink-3); text-shadow: none; opacity: .62; }

.demo-scan { height: 2px; margin: 18px 0 0; border-radius: 2px;
             background: var(--line); overflow: hidden; opacity: 0;
             transition: opacity .25s; }
.demo.is-scanning .demo-scan { opacity: 1; }
.demo-scan i { display: block; height: 100%; width: 38%; border-radius: 2px;
               background: linear-gradient(90deg, transparent, var(--acc-lt), transparent);
               transform: translateX(-100%); }
.demo.is-scanning .demo-scan i { animation: scan 1s linear infinite; }
@keyframes scan { to { transform: translateX(360%); } }

.demo-out { margin-top: 16px; min-height: 92px; }
.demo-verdict {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(27px, 3.6vw, 36px); line-height: 1.12;
  letter-spacing: -.01em; color: var(--ink-3);
  opacity: 0; transform: translateY(9px);
  transition: opacity .45s cubic-bezier(.2,.7,.3,1),
              transform .45s cubic-bezier(.2,.7,.3,1);
}
.demo-detail { font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
               margin-top: 7px; max-width: 52ch;
               opacity: 0; transform: translateY(9px);
               transition: opacity .45s .09s cubic-bezier(.2,.7,.3,1),
                           transform .45s .09s cubic-bezier(.2,.7,.3,1); }
.demo.is-judged .demo-verdict,
.demo.is-judged .demo-detail { opacity: 1; transform: none; }
.demo.v-good    .demo-verdict { color: var(--pos); }
.demo.v-bad     .demo-verdict { color: var(--neg); }
.demo.v-fair    .demo-verdict { color: var(--amber); }
.demo.v-neutral .demo-verdict { color: var(--ink); }

.demo-foot { padding: 10px 14px; border-top: 1px solid var(--line);
             background: rgba(10,14,20,.4);
             font-size: 11.5px; color: var(--ink-3); }
.demo-cap { font-size: 12px; color: var(--ink-3); line-height: 1.55;
            margin: 0 0 30px; max-width: 56ch; }

@media (prefers-reduced-motion: reduce) {
  .demo::before, .demo-scan i { animation: none; }
  .demo-verdict, .demo-detail, .demo-v { transition: none; }
}

/* The field, on every page. Drawn by field.js; see the note there on why it
   is canvas and not a gradient. */
.site-field {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* On a scrolling page the field has to be anchored to the DOCUMENT, not the
   viewport. Fixed, its "fades out by 72%" is 72% of the screen — so however
   far you scroll there are always dots drifting over whatever text happens to
   be at the top of it. Absolute, it decorates the hero and is genuinely gone
   by the time you are reading. */
.site-field.is-hero, .site-field.is-doc {
  position: absolute; top: 0; left: 0; height: 1100px; inset: auto;
  width: 100%;
}
body { position: relative; }
/* Strongest behind the headline, gone before the reading starts. A field that
   runs the full height crawls over body copy and makes a page feel noisy
   rather than alive — so only the signed-in shell, whose cards are opaque,
   goes unmasked. field.js picks the mode; see the note there. */
.site-field.is-hero {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 88%);
          mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 88%);
}
/* A document has a short title and then solid prose, so it clears sooner. */
.site-field.is-doc {
  height: 620px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 85%);
          mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 85%);
}

/* Everything else has to sit above it. The app shell and the long documents
   have no stacking context of their own, so they need one here. */
.auth-screen > .auth-layout,
#app, .doc { position: relative; z-index: 1; }

/* ── Pitch column ───────────────────────────────────────────────────────── */
.pitch { min-width: 0; }

.pitch-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .04em;
  color: var(--ink-2); text-transform: uppercase;
  background: var(--card); border: 1px solid var(--line-2);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 22px;
}
.livedot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pos);
  box-shadow: 0 0 0 0 rgba(53,208,127,.5); animation: pulse 2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { .livedot { animation: none; } }

/* The one place the product raises its voice. Instrument Serif ships a single
   weight, so size and colour carry the emphasis — never a synthesised bold,
   which on a high-contrast serif looks like a printing fault. */
.pitch-h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(40px, 6vw, 62px); line-height: 1.0;
  letter-spacing: -.015em; margin-bottom: 20px;
}
/* Gradient carries the emphasis; the sentence still reads without colour. */
.grad {
  background: linear-gradient(96deg, var(--acc-lt) 0%, #8ecbff 38%, var(--pos) 115%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--acc-lt);
}

.pitch-sub {
  font-size: 15.5px; line-height: 1.6; color: var(--ink-2);
  max-width: 56ch; margin-bottom: 30px;
}

/* A rail, not three more cards. Two of these three values are words rather
   than figures, so they take the display face; and the page already has
   enough bordered boxes without giving the headline claims their own. */
.pitch-stats {
  display: flex; flex-wrap: wrap; margin-bottom: 44px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pstat { flex: 1 1 148px; padding: 15px 0 16px 18px; border-left: 1px solid var(--line); }
.pstat:first-child { border-left: 0; padding-left: 0; }
.pstat b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: 30px; line-height: 1.05; color: var(--ink);
  letter-spacing: -.01em; margin-bottom: 5px;
}
.pstat span { font-size: 11.5px; line-height: 1.45; color: var(--ink-3);
              display: block; max-width: 22ch; }
@media (max-width: 620px) {
  .pstat { flex: 1 1 100%; border-left: 0; padding-left: 0;
           border-top: 1px solid var(--line); }
  .pstat:first-child { border-top: 0; }
}

.pitch-block { margin-bottom: 40px; }
.pitch-block h2, .pitch-honest h2, .pitch-how h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 27px; letter-spacing: -.005em; line-height: 1.18;
  margin-bottom: 13px; max-width: 26ch;
}
.pitch-block p, .pitch-honest p {
  font-size: 14px; line-height: 1.68; color: var(--ink-2); max-width: 58ch;
}
.pitch-block p + p, .pitch-honest p + p { margin-top: 11px; }
.pitch-block strong, .pitch-honest strong { color: var(--ink); }

.pitch-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px; margin-bottom: 42px;
}
.pcard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 17px 17px 18px;
  transition: border-color .15s, transform .15s;
}
.pcard:hover { border-color: var(--line-2); transform: translateY(-1px); }
.picon {
  color: var(--acc-lt); margin-bottom: 10px; line-height: 0;
  display: inline-flex;
}
.pcard h3 { font-size: 13.5px; margin-bottom: 5px; letter-spacing: -.01em; }
.pcard p { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }

/* The honesty block is the differentiator — give it real presence. */
.pitch-honest {
  background: var(--card); border: 1px solid var(--line-2);
  border-left: 3px solid var(--amber);
  border-radius: var(--r); padding: 22px 24px; margin-bottom: 42px;
}

.pitch-how ol { list-style: none; counter-reset: step; padding: 0; }
.pitch-how li {
  counter-increment: step; position: relative; padding-left: 38px;
  font-size: 14px; line-height: 1.6; color: var(--ink-2);
}
.pitch-how li + li { margin-top: 13px; }
.pitch-how li b { color: var(--ink); font-weight: 650; }
.pitch-how li::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  font: 650 12px/1 var(--mono); color: var(--acc-lt);
  background: var(--acc-wash); border: 1px solid rgba(10,132,255,.45);
}

/* ── Stacked layout: the form comes first, the pitch reads underneath ───── */
@media (max-width: 940px) {
  .auth-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px; padding: 32px 20px 64px;
    max-width: 620px;
  }
  /* One column: the argument, then the form, then the detail. A stranger
     should see what this is before being asked to sign up for it. */
  .pitch-lead, .pitch, .auth-layout .auth-inner {
    grid-column: 1; grid-row: auto;
  }
  .auth-layout .auth-inner { position: static; order: 2; }
  .pitch-lead { order: 1; }
  .pitch { order: 3; }
  .pitch-h1 { font-size: clamp(32px, 9vw, 44px); }
}

/* ── Product preview: a still of the Activity feed ──────────────────────── */
.shot {
  margin: 0 0 42px; border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden; background: var(--bg-sunk);
  box-shadow: 0 10px 34px rgba(0,0,0,.4);
}
.shot-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 13px; background: var(--card-2);
  border-bottom: 1px solid var(--line);
}
.shot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
.shot-title {
  margin-left: 8px; font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.shot-body { padding: 4px 0; }
.shotrow {
  display: grid;
  grid-template-columns: 44px 46px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 8px 14px; font-size: 12px;
  border-bottom: 1px solid rgba(35,44,57,.5);
}
.shotrow:last-child { border-bottom: 0; }
.shot-time { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.shot-mkt {
  color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Skipped is the quiet default; copied earns the colour. */
.shot-verdict {
  font-size: 11px; color: var(--ink-3); text-align: right; white-space: nowrap;
}
.shot-verdict.copied {
  font-family: var(--mono); font-weight: 650; color: var(--pos);
}
.chip-buy  { color: var(--pos); background: var(--pos-wash); border: 1px solid rgba(53,208,127,.3); }
.chip-sell { color: var(--neg); background: var(--neg-wash); border: 1px solid rgba(248,81,73,.3); }
.shotrow .chip {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 5px; border-radius: 4px; text-align: center;
}

.shot figcaption {
  padding: 11px 14px; font-size: 11.5px; color: var(--ink-3);
  background: var(--card); border-top: 1px solid var(--line);
}

@media (max-width: 560px) {
  .shotrow { grid-template-columns: 40px minmax(0,1fr) auto; }
  .shotrow .chip { display: none; }
}

/* ── Balance the two columns ────────────────────────────────────────────────
   The auth card's 380px cap was inherited from the old centred layout, which
   left dead space in its grid cell. Inside the landing layout it fills the
   column instead, and scales up to match the weight of the pitch beside it.
   ------------------------------------------------------------------------ */
.auth-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); }

.auth-layout .auth-inner { max-width: 100%; gap: 20px; }

/* A heavier card: more presence, larger touch targets, calmer rhythm. */
.auth-layout .auth-card {
  box-shadow: 0 12px 40px rgba(0,0,0,.38);
  border-color: var(--line-2);
}
.auth-layout .auth-brand { font-size: 14.5px; }
.auth-layout .auth-tab { padding: 14px 12px; font-size: 13.5px; }
.auth-layout .auth-form { padding: 22px 24px 24px; gap: 15px; }
.auth-layout .auth-form label { font-size: 12.5px; }
.auth-layout .auth-form input[type="email"],
.auth-layout .auth-form input[type="password"] {
  padding: 11px 13px; font-size: 14px;
}
.auth-layout .auth-submit { padding: 12px 16px; font-size: 13.5px; }
.auth-layout .auth-head {
    font-family: var(--display); font-weight: 400; font-size: 23px;
    letter-spacing: -.005em;
  }
.auth-layout .auth-note { font-size: 12px; line-height: 1.55; }

/* Re-assert the stacked layout: the balance rules above are unconditional and
   would otherwise keep two columns on narrow screens. Must stay last. */
@media (max-width: 940px) {
  .auth-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
  }
  .pitch-lead, .pitch, .auth-layout .auth-inner { grid-column: 1; grid-row: auto; }
  .pitch-lead { order: 1; }
  .auth-layout .auth-inner { position: static; order: 2; max-width: 100%; }
  .pitch { order: 3; }
}

/* ── Feature list ───────────────────────────────────────────────────────── */
.featlist {
  list-style: none; padding: 0; margin: 0 0 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 2px 26px;
}
.featlist li {
  position: relative; padding: 7px 0 7px 20px;
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
}
.featlist li b { color: var(--ink); font-weight: 650; }
.featlist li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--acc-lt); opacity: .75;
}

/* ── Dashboard still: a table rather than a feed ────────────────────────── */
.shotrow-head, .shotrow-pos {
  grid-template-columns: minmax(0, 1fr) auto 54px 54px;
}
/* Outcome chips size to their text but never crowd out the market name. */
.shotrow-pos .chip-outcome { max-width: 110px; }
.shotrow-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); padding-top: 10px; padding-bottom: 8px;
}
.shotrow .num { font-family: var(--mono); font-size: 11px; text-align: right; color: var(--ink-2); }
.shotrow-head .num { font-family: var(--sans); color: var(--ink-3); }
.chip-outcome {
  font-size: 10px; color: var(--ink-2); background: var(--card-2);
  border: 1px solid var(--line-2); padding: 2px 6px; border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Backtest still ─────────────────────────────────────────────────────── */
.bt-summary {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line); margin-bottom: 1px;
}
.btstat { background: var(--bg-sunk); padding: 13px 12px; text-align: center; }
.btstat b {
  display: block; font-family: var(--mono); font-size: 17px;
  font-weight: 650; color: var(--ink);
}
.btstat span { font-size: 10.5px; color: var(--ink-3); }
.bt-note {
  padding: 13px 15px; font-size: 12px; line-height: 1.6; color: var(--ink-2);
  background: var(--bg-sunk);
}
.bt-note b { color: var(--ink); }

@media (max-width: 560px) {
  .shotrow-head, .shotrow-pos { grid-template-columns: minmax(0,1fr) 60px 50px; }
  .shotrow-head span:nth-child(3), .shotrow-pos span:nth-child(3),
  .shotrow-head span:nth-child(5), .shotrow-pos span:nth-child(5) { display: none; }
  .bt-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ── Admin funnel ───────────────────────────────────────────────────────── */
.funnel { padding: 6px 16px 16px; }
.fstep + .fstep { margin-top: 13px; }
.fstep-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 5px;
}
.fstep-label { font-size: 12.5px; color: var(--ink-2); }
.fstep-n { display: flex; align-items: baseline; gap: 7px; }
.fstep-n b { font-family: var(--mono); font-size: 13px; color: var(--ink); }
/* Drop-off is the number that matters, so it gets the colour. */
.fstep-drop { font-size: 11px; color: var(--neg); font-family: var(--mono); }
.fbar { height: 7px; background: var(--card-2); border-radius: 4px; overflow: hidden; }
.fbar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--acc) 0%, var(--acc-lt) 100%);
  transition: width .35s ease;
}
@media (prefers-reduced-motion: reduce) { .fbar-fill { transition: none; } }

/* ── Referral panel ─────────────────────────────────────────────────────── */
.reflink { display: flex; gap: 8px; margin: 12px 0 14px; }
.reflink input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--mono); font-size: 12px;
  background: var(--bg-sunk); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 9px 11px;
}
.reflink .btn { flex: none; }

.refstats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.refstat { background: var(--card); padding: 12px 13px; }
.refstat b {
  display: block; font-family: var(--mono); font-size: 17px;
  font-weight: 650; color: var(--ink);
}
.refstat span { font-size: 11px; color: var(--ink-3); }

/* Plan picker: monthly subscription alongside prepaid periods (incl. crypto). */
.plan-grid { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 10px; }
.plan-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card-2);
}
.plan-row .price-line { font-size: 14px; margin: 0 0 2px; }
.plan-row .help { margin: 0; }
.warn-note { color: var(--warn, #d08b2c); }

/* One-off approvals, shown only for a wallet with no Polymarket proxy. */
.approve-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; margin: 14px 0; border: 1px solid var(--line);
  border-radius: 9px; background: var(--card-2);
}
.approve-row .price-line { font-size: 13.5px; margin: 0 0 3px; }
.approve-row .help { margin: 0; max-width: 62ch; }

/* Setup-guide link in the header cluster. */
.acct-help {
  font-size: 12.5px; color: var(--ink-3); text-decoration: none;
  white-space: nowrap; padding: 4px 2px;
}
.acct-help:hover { color: var(--acc-lt); text-decoration: underline; }
.disclosure-next { font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; }
.disclosure-next a { color: var(--acc-lt); }
@media (max-width: 900px) { .acct-help { display: none; } }

/* ── Brand lockup ─────────────────────────────────────────────────────────
   The mark is two identical staircases a step apart: the follower tracks the
   leader's shape exactly. Sized in em so it scales with whatever it sits in.
   ------------------------------------------------------------------------ */
.logo-mark { width: 1.85em; height: 1.64em; flex: none; display: block; }

.brand-name {
  display: inline-flex; align-items: baseline; gap: .34em;
  font-size: 14px; font-weight: 650; letter-spacing: -.015em; white-space: nowrap;
}
.brand-name b { font-weight: 700; color: var(--ink); }
.brand-sub { color: var(--ink-3); font-weight: 600; letter-spacing: -.005em; }

/* Standalone pages (terms, setup) get the lockup as a link home. */
.doc-brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; margin-bottom: 26px;
}
.doc-brand .brand-name { font-size: 15px; }
.doc-brand:hover .brand-sub { color: var(--ink-2); }

/* The auth screen's lockup is the first thing a visitor sees — give it room. */
.auth-brand .logo-mark { width: 1.75em; height: 1.55em; }
.auth-brand .brand-name { font-size: 17px; }

@media (max-width: 640px) { .brand-sub { display: none; } }

/* A setting that spans the grid — used for live bankroll, which needs the
   explanation to sit at full width rather than squeezed into a column. */
.field-wide { margin-bottom: 14px; }
.field-wide .help { max-width: 68ch; }

/* ── Who to copy ──────────────────────────────────────────────────────────
   Ranked on evidence of skill, never on profit. The layout deliberately gives
   the verdict and the caveats as much room as the numbers.
   ------------------------------------------------------------------------ */
.lb-summary { display: flex; flex-wrap: wrap; gap: 26px; padding-top: 4px; }
.lb-sumrow { display: flex; flex-wrap: wrap; gap: 26px; }
.lb-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-stat-k { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase;
             letter-spacing: .05em; white-space: nowrap; }
/* Deliberately quiet. These are the working behind the verdict, not the
   verdict — when they were the loudest thing on the card, people read the
   z-score and ignored the sentence that explains what it means. */
.lb-stat-v { font-family: var(--mono); font-size: 13px; font-weight: 500;
             color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lb-stat-v.pos { color: var(--pos); }
.lb-stat-v.neg { color: var(--neg); }

/* .card carries no padding of its own — every variant sets its own. These
   were stacking flush against each other and against their own borders. */
#lb-list { display: flex; flex-direction: column; gap: 14px; }
#analyse-result > .card { margin-bottom: 14px; }
.lb-card, .lb-none, .analyse-pending { padding: 16px 18px 18px; }

.lb-card { border-left: 3px solid var(--line-2); }
.lb-card.v-good { border-left-color: var(--pos); }
.lb-card.v-bad  { border-left-color: var(--neg); }
.lb-card.v-fair { border-left-color: var(--amber); }
/* "Edge detected" and "clears the copying bar" are not the same thing — a
   wallet can beat its prices in markets that resolve too fast to follow. Only
   the ones that clear the bar get the lift. */
.lb-card.is-qualified {
  border-left-color: var(--pos);
  background:
    linear-gradient(96deg, rgba(53,208,127,.055) 0%, transparent 42%),
    var(--card);
}

.lb-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lb-rank { font-size: 17px; font-weight: 700; color: var(--ink-3);
           font-variant-numeric: tabular-nums; min-width: 22px; }
.lb-id { flex: 1 1 220px; min-width: 0; }
.lb-name { display: flex; align-items: center; gap: 8px; font-size: 13px;
           font-weight: 650; color: var(--ink-2); }
.lb-addr { font-size: 11.5px; color: var(--ink-3); overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
/* The answer the user came for. Its own line, the display face, and the only
   thing on the card allowed to be this size. */
.lb-verdict-label {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 3.2vw, 31px); line-height: 1.1;
  letter-spacing: -.01em; margin: 15px 0 0; color: var(--ink);
}
.v-good    .lb-verdict-label { color: var(--pos); }
.v-bad     .lb-verdict-label { color: var(--neg); }
.v-fair    .lb-verdict-label { color: var(--amber); }
.v-neutral .lb-verdict-label { color: var(--ink); }

.lb-detail { font-size: 14px; color: var(--ink-2); line-height: 1.7;
             margin: 9px 0 0; max-width: 62ch; }
.lb-stats { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 16px;
            padding-top: 13px; border-top: 1px solid var(--line); }

.lb-warns { list-style: none; margin: 12px 0 0; padding: 0; }
.lb-warn { font-size: 12.5px; color: var(--amber); line-height: 1.55;
           padding-left: 16px; position: relative; }
.lb-warn + .lb-warn { margin-top: 5px; }
.lb-warn::before { content: "!"; position: absolute; left: 3px; font-weight: 700; }

.lb-none h3 { font-family: var(--display); font-weight: 400; font-size: 22px;
              letter-spacing: -.005em; margin: 0 0 8px; color: var(--ink); }
.lb-none p { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin: 0; }
.lb-none p + p { margin-top: 9px; }

.lb-method p, .lb-method li { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.lb-method p + p { margin-top: 10px; }
.lb-method ul { margin: 8px 0 0; padding-left: 20px; list-style: disc; }
.lb-method li + li { margin-top: 6px; }
.lb-method b { color: var(--ink); }
.lb-caveat { border-left: 2px solid var(--amber); padding-left: 11px;
             margin-top: 14px !important; color: var(--amber) !important; }

/* Shown above the disclosure when it is a re-acceptance rather than a first
   read, so a returning user knows why they are seeing it again. */
.disc-notice {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--acc-wash); border: 1px solid rgba(10,132,255,.35);
  color: var(--acc-lt); font-size: 12.5px; font-weight: 600;
}

/* Admin: whether money can actually arrive. */
.pay-body { padding: 14px 16px 16px; }
.pay-rows { display: flex; flex-direction: column; gap: 10px; }
.pay-row { display: flex; align-items: flex-start; gap: 10px; }
.pay-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px;
           flex: none; }
.pay-dot.is-ok  { background: var(--pos); }
.pay-dot.is-bad { background: var(--neg); }
.pay-k { display: block; font-size: 13px; font-weight: 650; color: var(--ink); }
.pay-d { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.pay-blockers { list-style: none; margin: 14px 0 0; padding: 12px 14px;
                background: var(--amber-wash); border-radius: var(--r-sm);
                border: 1px solid rgba(217,166,60,.3); }
.pay-blockers li { font-size: 12.5px; line-height: 1.6; color: var(--amber); }
.pay-blockers li + li { margin-top: 5px; }

/* Closing an account. Plain and quiet — a destructive control that shouts is
   a control people click to see what it does. */
.danger-card { border-color: rgba(248,81,73,.28); }
.danger-body { padding: 14px 16px 16px; }
.danger-body .help { max-width: 66ch; }
.danger-body .help + .help { margin-top: 8px; }
.danger-fields { display: grid; gap: 12px; margin: 14px 0 10px;
                 grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.acct-note { font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
             margin: 10px 14px 14px; max-width: 62ch; }

/* Verdict chip in the tracked-wallets table. Small, because the table is a
   management view — but coloured, because which wallets clear the bar is the
   thing a user is actually deciding about. */
.wv { font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.wv.v-good    { color: var(--pos); }
.wv.v-bad     { color: var(--neg); }
.wv.v-fair    { color: var(--amber); }
.wv.v-neutral { color: var(--ink-2); }
.wv-pending   { color: var(--ink-3); font-weight: 500; font-style: italic; }

/* ── "Is this luck?" — sits directly under every backtest headline ────────
   A currency P&L from a binary-payoff market is frequently one trade in
   disguise. This panel is not collapsible and not dismissible.
   ------------------------------------------------------------------------ */
.luck-card { border-left: 3px solid var(--amber); }
.luck-head { display: flex; align-items: baseline; justify-content: space-between;
             gap: 12px; margin-bottom: 12px; }
.luck-title { font-size: 14.5px; font-weight: 650; color: var(--ink); margin: 0; }
.luck-n { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.luck-rows { display: flex; flex-direction: column; gap: 7px; }
.luck-row { display: flex; align-items: baseline; justify-content: space-between;
            gap: 16px; font-size: 13px; }
.luck-k { color: var(--ink-2); }
.luck-v { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.luck-v.pos { color: var(--pos); } .luck-v.neg { color: var(--neg); }
.luck-verdict { font-size: 13px; line-height: 1.65; margin: 14px 0 0;
                padding-left: 11px; border-left: 2px solid var(--line-2); }
.luck-verdict.luck-bad  { color: var(--neg);   border-left-color: var(--neg); }
.luck-verdict.luck-warn { color: var(--amber); border-left-color: var(--amber); }
.luck-verdict.luck-ok   { color: var(--ink-2); border-left-color: var(--pos); }
.luck-note { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin: 11px 0 0; }

/* Paper evidence, shown inside the arm-live confirmation. */
.arm-evidence { border: 1px solid var(--line); background: var(--bg-sunk);
                border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 14px; }
.arm-ev-head { font-size: 12px; font-weight: 700; color: var(--ink-3);
               text-transform: uppercase; letter-spacing: .04em; margin-bottom: 9px; }
.arm-ev-rows { display: flex; flex-direction: column; gap: 6px; }
.arm-ev-msg { font-size: 12.8px; line-height: 1.6; margin: 11px 0 0;
              padding-left: 10px; border-left: 2px solid var(--line-2); }
.arm-ev-ok   { color: var(--ink-2); border-left-color: var(--pos); }
.arm-ev-warn { color: var(--amber); border-left-color: var(--amber); }
.arm-ev-bad  { color: var(--neg);   border-left-color: var(--neg); }

/* Wallet analysis — the product's front door. */
.analyse-form { display: flex; gap: 10px; margin: 16px 0 8px; }
.analyse-form input {
  flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 13px;
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--bg-sunk); color: var(--ink);
}
.analyse-form input:focus { outline: none; border-color: var(--acc-lt); }
.analyse-form button { flex: none; }
.analyse-help { margin: 0 0 4px; max-width: 68ch; }
.analyse-pending p { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.6; }
#analyse-result:not(:empty) { margin: 14px 0 4px; }
@media (max-width: 560px) { .analyse-form { flex-direction: column; } }

/* Running out of free analyses is a decision point, not a failure. It gets a
   card and a way forward rather than the red inline error every other
   rejected input gets. */
.quota-card { padding: 13px 16px; border-left: 3px solid var(--acc);
              display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.quota-p { font-size: 13px; line-height: 1.6; color: var(--ink-2);
           margin: 0; flex: 1 1 300px; }
.quota-actions { flex: none; }
.quota-note { font-size: 12px; color: var(--ink-3); margin: 10px 0 0;
              font-family: var(--mono); }

/* The evidence gate on real-money copying. */
.gate { border-radius: var(--r-sm); padding: 13px 15px; margin-bottom: 16px;
        border: 1px solid var(--line); }
.gate-k { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
          letter-spacing: .05em; margin-bottom: 7px; }
.gate p { font-size: 13px; line-height: 1.65; margin: 0; color: var(--ink-2); }
.gate p + p { margin-top: 9px; }
.gate-open { background: var(--pos-wash); border-color: rgba(53,208,127,.35); }
.gate-open .gate-k { color: var(--pos); }
.gate-shut { background: var(--amber-wash); border-color: rgba(217,166,60,.35); }
.gate-shut .gate-k { color: var(--amber); }
.gate-do { color: var(--ink) !important; font-weight: 600; }

/* ── The calibration plot ─────────────────────────────────────────────────
   The one picture in the product. Given room to breathe, because it is the
   argument rather than an ornament hung beside it.
   ------------------------------------------------------------------------ */
.calib-host { margin: 18px 0 4px; }
.calib { position: relative; width: 100%; }
.calib-canvas { display: block; width: 100%; cursor: crosshair; }
.calib-tip {
  position: absolute; top: 4px; pointer-events: none; white-space: nowrap;
  background: var(--card-3); border: 1px solid var(--line-2); color: var(--ink);
  font-size: 11.5px; padding: 4px 8px; border-radius: var(--r-sm);
  box-shadow: var(--shadow);
}
.calib-legend {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px;
}
.calib-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calib-legend i { width: 14px; height: 2px; border-radius: 2px; display: inline-block; }
.dot-fair { background: rgba(154,167,182,.6);
            background-image: repeating-linear-gradient(90deg,
              rgba(154,167,182,.85) 0 4px, transparent 4px 8px); }
.dot-them { background: var(--acc-lt); height: 3px !important; }
.calib-hint { margin-left: auto; font-style: italic; }
@media (max-width: 560px) { .calib-hint { margin-left: 0; width: 100%; } }

/* ── Public footer ──────────────────────────────────────────────────────────
   Lives inside #auth-screen, so it is shown to logged-out visitors only; the
   signed-in app has its own chrome. Carries the things a stranger needs to
   see before they will hand over a card: what we sell, what it costs, how to
   stop paying, and a way to reach a human. */
.site-foot {
  border-top: 1px solid var(--line);
  background: var(--bg-sunk);
  padding: 40px 28px 32px;
}
.site-foot-in {
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  align-items: start;
}
.site-foot h3 {
  font: 600 11px/1 var(--sans);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}
.site-foot p {
  margin: 0 0 8px;
  font-size: 12px; line-height: 1.65; color: var(--ink-2);
}
.site-foot a { color: var(--acc-lt); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-brand .brand-name { margin-bottom: 10px; display: inline-flex; }
.foot-brand p { max-width: 42ch; color: var(--ink-3); }
.foot-risk {
  max-width: 1180px; margin: 28px auto 0;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.6; color: var(--ink-3);
}

@media (max-width: 900px) {
  .site-foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .site-foot { padding: 32px 20px 28px; }
  .site-foot-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}