/* ============================================================
   TRADEPILOT — prop-firm evaluation simulator
   Design tokens
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --p-darkest:  #0F2A1D;
  --p-dark:     #375534;
  --p-mid:      #6B9071;
  --p-light:    #AEC3B0;
  --p-lightest: #E3EED4;

  /* Surfaces — black. Neutral chrome keeps the green meaningful: if the
     whole interface is green, green stops signalling anything. */
  --bg-deep:    #000000;
  --bg:         #070707;
  --panel:      #0C0D0C;
  --panel-hi:   #151715;
  --line:       #222522;
  --line-soft:  #171917;

  /* Type — primary is pure white; the three below stay muted so a static
     label never competes with a moving number. */
  --ink:        #FFFFFF;
  --ink-mid:    #9AA69B;
  --ink-dim:    #67736A;
  --ink-faint:  #434C45;

  /* Brand — the palette, used only where something is active, selected,
     or wearing the product's name. */
  --brass:      #AEC3B0;   /* active / selected */
  --brass-hi:   #E3EED4;   /* hover, brightest brand note */
  --brass-dim:  #375534;   /* brand borders on black */
  --brand-deep: #0F2A1D;   /* tinted fills and glows */

  /* Semantic — P&L only. Pushed brighter than the brand sage so a moving
     number never reads as chrome. */
  --long:       #4ADE80;
  --long-dim:   #17603A;
  --short:      #F2555F;
  --warn:       #E3A857;

  --long-glow:  rgba(74, 222, 128, 0.14);
  --short-glow: rgba(242, 85, 95, 0.14);

  /* Type stacks */
  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Every number in a trading UI must be tabular or the eye can't scan a column */
.num, input[type="number"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: #333834; }

/* ============================================================
   Screen plumbing
   ============================================================ */

.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: flex; }

/* ============================================================
   LANDING
   ============================================================ */

#landing {
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-deep);
  position: fixed;
}

/* The hero backdrop is the product's own material — a tape drifting past.
   A gradient would say nothing about what this is. */
#heroTape {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  width: 100%;
  z-index: 0;
  /* The scrim above is now a flat wash rather than a rightward fade, so the
     tape needs more of its own presence to read through it. */
  opacity: .78;
  pointer-events: none;
}

.lp-top {
  position: relative; z-index: 3;
  flex: 0 0 auto;
  display: flex; align-items: center;
  padding: 22px 34px;
  gap: 22px;
}
.lp-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.lp-link {
  font-size: 13.5px; color: var(--ink-mid); text-decoration: none;
  transition: color .14s;
}
.lp-link:hover { color: var(--ink); }

.lp-login {
  border: 1px solid var(--brass-dim);
  color: var(--brass);
  border-radius: var(--r);
  padding: 8px 20px;
  font-size: 13.5px; font-weight: 600;
  transition: background .14s, border-color .14s, color .14s;
}
.lp-login:hover { background: rgba(174,195,176,.1); border-color: var(--brass); color: var(--brass-hi); }

/* Hero */
.hero {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  min-height: calc(100vh - 78px);
  display: flex; align-items: center;
  padding: 0 34px 60px;
}
/* The tape should read as texture behind the words, never compete with them */
.hero::before {
  content: "";
  position: absolute; inset: -80px 0;
  background: rgba(0,0,0,.66);
  pointer-events: none;
}
.hero-inner { max-width: 680px; position: relative; }

.hero-eyebrow {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--p-mid); margin-bottom: 22px;
  display: flex; align-items: center; gap: 11px;
}
.hero-eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--brass-dim);
}

.hero-h1 {
  font-size: clamp(46px, 7.4vw, 88px);
  line-height: .96;
  letter-spacing: -0.045em;
  font-weight: 700;
  margin-bottom: 26px;
  color: #fff;
}
/* "future" keeps the brand green — it is the one accent in the headline */
.hero-h1 em { font-style: normal; color: var(--brass); }

.hero-sub {
  font-size: 16.5px; line-height: 1.62;
  color: #fff;
  max-width: 560px;
  margin-bottom: 34px;
}

.hero-cta { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }

.btn-primary {
  background: var(--brass-hi);
  color: #0C0D0C;
  font-weight: 700; font-size: 14.5px;
  padding: 14px 32px;
  border-radius: var(--r);
  transition: background .14s, transform .1s;
}
.btn-primary:hover { background: #fff; }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  color: var(--ink-mid); font-size: 14px; text-decoration: none;
  padding: 14px 6px;
  border-bottom: 1px solid transparent;
  transition: color .14s, border-color .14s;
}
.btn-secondary:hover { color: var(--ink); border-color: var(--brass-dim); }

/* "Try it without an account" is a button, not a link, so it needs resetting */
button.btn-secondary { background: none; }

.hero-fineprint { font-size: 12.5px; color: var(--ink-dim); margin-top: 14px; }

.hero-proof {
  display: flex; flex-wrap: wrap; gap: 34px;
  margin-top: 54px; padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ---- Usage meter ---- */
.usage-chip {
  margin-left: auto;
  font-size: 12px; color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 7px 15px;
  white-space: nowrap;
}
.usage-chip.low { color: var(--warn); border-color: rgba(227,168,87,.4); }
.usage-chip.out { color: var(--short); border-color: rgba(242,85,95,.45); }
.usage-chip.premium { color: var(--brass); border-color: var(--brass-dim); }

/* ============================================================
   HOME — dashboard
   ============================================================ */

#home { flex-direction: column; overflow-y: auto; background: var(--bg-deep); }
.home-inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: 20px 28px 70px; }

.home-top {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 0 26px;
}
.home-plan {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px;
}
.home-plan.premium { color: var(--brass); border-color: var(--brass-dim); }
.home-new { margin-left: auto; padding: 11px 22px; font-size: 13.5px; }

/* Stat row — the old Performance tab, folded in */
.stat-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: 26px;
}
.stat {
  background: var(--panel);
  padding: 16px 18px 17px;
  display: flex; flex-direction: column; gap: 6px;
}
.stat-k {
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-dim);
}
.stat-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
}
.stat-v.up { color: var(--long); }
.stat-v.dn { color: var(--short); }
.stat-s { font-size: 11px; color: var(--ink-faint); }

/* Calendar */
.cal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px 22px;
  margin-bottom: 22px;
}
.cal-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.cal-title { font-size: 19px; letter-spacing: -0.02em; font-weight: 700; }

.cal-modes {
  display: flex; gap: 2px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r); padding: 2px;
}
.cal-mode {
  padding: 6px 16px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-mid);
  transition: background .13s, color .13s;
}
.cal-mode:hover { color: var(--ink); }
.cal-mode.on { background: var(--long); color: #04230f; font-weight: 600; }

.cal-nav { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.cal-arrow {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink-mid); font-size: 14px;
  transition: border-color .13s, color .13s;
}
.cal-arrow:hover { border-color: var(--brass-dim); color: var(--ink); }
.cal-arrow:disabled { opacity: .3; cursor: not-allowed; }
.cal-month { font-size: 15px; font-weight: 600; min-width: 148px; text-align: center; }

.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.cal-dow { margin-bottom: 7px; }
.cal-dow span {
  text-align: center; padding: 9px 0;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--panel-hi); border-radius: var(--r);
}

.cal-cell {
  position: relative;
  min-height: 82px;
  border-radius: var(--r);
  background: var(--bg);
  border: 1px solid transparent;
  padding: 9px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: border-color .13s, background .13s;
}
.cal-cell.blank { background: transparent; }
.cal-cell.today { border-color: var(--brass-dim); }
.cal-cell.has { background: var(--panel-hi); cursor: pointer; }
.cal-cell.has:hover { border-color: var(--brass-dim); }
.cal-cell.sel { border-color: var(--brass); }

.cal-d { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cal-cell.blank .cal-d { display: none; }
.cal-cell:not(.has) .cal-d { color: var(--ink-mid); font-weight: 600; }

.cal-pnl { font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.cal-pnl.up { color: var(--long); }
.cal-pnl.dn { color: var(--short); }
.cal-sub { font-size: 10px; color: var(--ink-faint); }

.cal-dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; }
.cal-dot.pass { background: var(--long); }
.cal-dot.fail { background: var(--short); }
.cal-dot.ended { background: var(--brass); }

.cal-foot { margin-top: 16px; font-size: 11.5px; color: var(--ink-faint); }

/* Detail columns */
.home-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.home-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px 20px;
}
.home-panel-h { font-size: 14px; font-weight: 600; margin-bottom: 14px; }

.sess-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.sess-row:last-child { border-bottom: none; }
.sess-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; flex: 0 0 auto;
}
.sess-badge.pass  { background: rgba(74,222,128,.16); color: var(--long); }
.sess-badge.fail  { background: rgba(242,85,95,.16); color: var(--short); }
.sess-badge.ended { background: rgba(174,195,176,.14); color: var(--brass); }
.sess-when { font-family: var(--mono); color: var(--ink-mid); }
.sess-meta { color: var(--ink-dim); font-size: 11.5px; }
.sess-pnl { margin-left: auto; font-family: var(--mono); font-weight: 600; }
.sess-pnl.up { color: var(--long); }
.sess-pnl.dn { color: var(--short); }

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-size: 12px; }
.bar-k { width: 74px; color: var(--ink-dim); flex: 0 0 auto; }
.bar-track { flex: 1; height: 6px; background: var(--bg-deep); border-radius: 3px; overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 3px; }
.bar-track i.up { background: var(--long); }
.bar-track i.dn { background: var(--short); }
.bar-v { font-family: var(--mono); font-size: 11.5px; width: 76px; text-align: right; flex: 0 0 auto; }

.home-empty {
  padding: 26px 4px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.6;
}

/* Back to Home on the setup screen */
.setup-home {
  position: absolute; top: 22px; right: 30px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 17px; font-size: 13px; color: var(--ink-mid);
  transition: border-color .13s, color .13s;
  z-index: 5;
}
.setup-home:hover { border-color: var(--brass-dim); color: var(--ink); }

@media (max-width: 980px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .home-cols { grid-template-columns: 1fr; }
}

/* ---- Limit reached ---- */
#limit {
  align-items: center; justify-content: center;
  overflow-y: auto;
  background: var(--bg-deep);
}
.limit-inner { max-width: 520px; padding: 40px 32px; text-align: center; }

.limit-mark {
  font-family: var(--mono);
  font-size: 44px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--short);
  margin-bottom: 20px;
}
.limit-h { font-size: 27px; letter-spacing: -0.035em; line-height: 1.18; margin-bottom: 14px; }
.limit-sub { font-size: 14.5px; line-height: 1.65; color: var(--ink-mid); margin-bottom: 30px; }
.limit-cta { display: flex; gap: 14px; justify-content: center; align-items: center; }
.limit-note { font-size: 12px; color: var(--ink-faint); margin-top: 24px; }
.hero-proof div { display: flex; flex-direction: column; gap: 4px; }
.hero-proof b { font-size: 13px; color: var(--ink); font-weight: 600; }
.hero-proof span { font-size: 12px; color: #fff; }

/* Three steps */
.lp-steps {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  padding: 86px 34px 92px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.lp-steps-inner { max-width: 1080px; margin: 0 auto; }
.lp-steps-head { margin-bottom: 40px; }
.lp-steps-lede { font-size: 15px; color: #fff; margin-top: 10px; }

.step-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.step-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column;
  transition: border-color .16s, transform .16s;
}
.step-card:hover { border-color: var(--brass-dim); transform: translateY(-2px); }

/* Numbered because this genuinely is a sequence — you cannot do 03 first */
.sc-n {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: 3px;
  padding: 3px 7px;
  align-self: flex-start;
  margin-bottom: 16px;
}
.sc-t { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 10px; }
.sc-b { font-size: 13.5px; line-height: 1.62; color: #fff; }

/* Each card closes on a scrap of the product's own vocabulary rather than an icon */
.sc-art {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  min-height: 54px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}

.sc-chip {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 4px 8px;
}
.sc-chip.on { color: var(--brass); border-color: var(--brass-dim); }

.sc-bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; width: 100%; }
.sc-bars i {
  flex: 1; display: block; border-radius: 1.5px;
  background: var(--long); opacity: .8;
}
.sc-bars i.dn { background: var(--short); }

.sc-stamp {
  font-size: 13px; font-weight: 800; letter-spacing: .12em;
  color: var(--long);
  border: 1.5px solid var(--long);
  border-radius: 4px;
  padding: 4px 12px;
}
.sc-stamp-note { font-size: 11px; color: var(--ink-faint); }

@media (max-width: 860px) {
  .step-cards { grid-template-columns: 1fr; }
}

/* How it works */
.lp-how {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  padding: 90px 34px 100px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.lp-how-inner { max-width: 780px; margin: 0 auto; }

.lp-h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.035em; line-height: 1.1;
  margin-bottom: 18px;
}
.lp-body { font-size: 15.5px; line-height: 1.68; color: #fff; margin-bottom: 40px; }

.lp-gauges {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.lp-gauge {
  background: var(--panel);
  padding: 15px 18px;
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center; gap: 18px;
}
.lpg-k { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim); }
.lpg-track { height: 4px; background: var(--bg-deep); border-radius: 2px; overflow: hidden; }
.lpg-track i { display: block; height: 100%; border-radius: 2px; background: var(--long); }
.lpg-v { font-family: var(--mono); font-size: 12px; color: var(--ink-mid); }

.lp-gauge.warn .lpg-track i { background: var(--warn); }
.lp-gauge.danger { background: var(--panel); }
.lp-gauge.danger .lpg-track i { background: var(--short); }
.lp-gauge.danger .lpg-k { color: var(--short); }

.lp-caption { font-size: 12.5px; color: var(--ink-faint); margin-top: 14px; }

.lp-foot {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  padding: 26px 34px 40px;
  font-size: 11.5px; color: var(--ink-faint); line-height: 1.6;
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
}

/* ============================================================
   AUTH
   ============================================================ */

#auth {
  flex-direction: row;
  background: var(--bg-deep);
  overflow: hidden;
}

/* ---- Left: live tape ---- */
.auth-art {
  position: relative;
  flex: 0 0 46%;
  min-width: 0;
  overflow: hidden;
  background: var(--p-darkest);
}
#authTape { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Keeps the copy legible over whatever the tape is doing behind it */
.auth-art-veil {
  position: absolute; inset: 0;
  background: rgba(5,11,8,.62);
  pointer-events: none;
}

.auth-art-body {
  position: relative; z-index: 2;
  height: 100%;
  padding: 42px 46px;
  display: flex; flex-direction: column;
}
.auth-mark { font-size: 20px; }

.auth-art-copy { margin-top: auto; }
.auth-art-copy h2 {
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.042em;
  margin-bottom: 18px;
}
.auth-art-copy p {
  font-size: 14.5px; line-height: 1.65;
  color: #fff; max-width: 380px;
}

/* ---- Right: form ---- */
.auth-pane {
  flex: 1 1 auto;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px;
  overflow-y: auto;
  background: var(--bg);
}

.auth-back {
  position: absolute; top: 26px; left: 30px;
  font-size: 13px; color: var(--ink-dim);
  padding: 6px 2px; transition: color .14s;
}
.auth-back:hover { color: var(--ink); }

.auth-card { width: 100%; max-width: 396px; }

.auth-head { margin-bottom: 26px; }
.auth-head h1 {
  font-size: 27px; letter-spacing: -0.035em; margin-bottom: 7px;
  transition: opacity .18s;
}
.auth-head p { font-size: 13.5px; color: #fff; line-height: 1.55; }

.auth-tabs {
  position: relative;
  display: flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 3px;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1; padding: 9px 0; border-radius: 3px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-dim);
  position: relative; z-index: 2;
  transition: color .18s;
}
.auth-tab.on { color: #0C0D0C; }
.auth-tab-ind {
  position: absolute; z-index: 1;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  background: var(--brass-hi);
  border-radius: 3px;
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}

.auth-form { display: flex; flex-direction: column; }

.af-field { margin-bottom: 15px; }
.af-field.hide { display: none; }
.af-field > label {
  display: block;
  font-size: 11.5px; color: var(--ink-mid);
  margin-bottom: 6px; font-weight: 500;
}

.af-input {
  display: flex; align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 12px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.af-input:focus-within {
  border-color: var(--brass);
  background: var(--panel-hi);
  box-shadow: 0 0 0 3px rgba(174,195,176,.1);
}
.af-input input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  padding: 11px 0; font-size: 14px;
}
.af-input input::placeholder { color: var(--ink-faint); }
.af-field.bad .af-input { border-color: var(--short); }
.af-field.bad .af-input:focus-within { box-shadow: 0 0 0 3px rgba(242,85,95,.1); }

.af-eye {
  font-size: 11.5px; color: var(--ink-dim);
  padding: 4px 2px 4px 10px;
  transition: color .14s;
}
.af-eye:hover { color: var(--brass); }

.af-err {
  font-size: 11.5px; color: var(--short);
  max-height: 0; overflow: hidden;
  transition: max-height .2s, margin .2s;
}
.af-err.on { max-height: 34px; margin-top: 5px; }

/* Password strength */
.af-meter {
  display: none; gap: 4px; margin-top: 8px;
}
.af-meter.on { display: flex; }
.af-meter i {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--line);
  transition: background .22s;
}
.af-meter.s1 i:nth-child(1) { background: var(--short); }
.af-meter.s2 i:nth-child(-n+2) { background: var(--warn); }
.af-meter.s3 i:nth-child(-n+3) { background: #B9D468; }
.af-meter.s4 i { background: var(--long); }

.af-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 20px;
}
.af-row.hide { display: none; }
.af-terms { margin-top: 2px; }

.af-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.af-check input {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--panel);
  transition: background .14s, border-color .14s;
  position: relative; cursor: pointer;
}
.af-check input:checked { background: var(--brass-hi); border-color: var(--brass-hi); }
.af-check input:checked::after {
  content: "✓"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #0C0D0C;
}
.af-check span { font-size: 12.5px; color: var(--ink-mid); line-height: 1.45; }

.af-link {
  font-size: 12.5px; color: var(--ink-dim); white-space: nowrap;
  transition: color .14s;
}
.af-link:hover { color: var(--brass); }

.af-submit {
  position: relative;
  background: var(--brass-hi);
  color: #0C0D0C;
  font-weight: 700; font-size: 14.5px;
  padding: 13px; border-radius: var(--r);
  transition: background .14s, transform .1s, opacity .14s;
}
.af-submit:hover:not(:disabled) { background: #fff; }
.af-submit:active:not(:disabled) { transform: translateY(1px); }
.af-submit:disabled { opacity: .6; cursor: progress; }
.af-submit.busy .af-submit-t { opacity: 0; }
.af-spin {
  position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(12,13,12,.28);
  border-top-color: #0C0D0C;
  opacity: 0;
  animation: spin .7s linear infinite;
}
.af-submit.busy .af-spin { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.af-or {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 16px;
  color: var(--ink-faint); font-size: 11.5px;
}
.af-or::before, .af-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.af-social { display: grid; grid-template-columns: 1fr; gap: 10px; }
.af-soc {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px; font-size: 13px; color: var(--ink-mid);
  transition: border-color .14s, background .14s, color .14s;
}
.af-soc:hover { border-color: #333834; background: var(--panel); color: var(--ink); }

.af-switch {
  margin-top: 20px; text-align: center;
  font-size: 13px; color: var(--ink-dim);
}
.af-switch b {
  color: var(--brass); font-weight: 600; cursor: pointer;
  border-bottom: 1px solid transparent; transition: border-color .14s;
}
.af-switch b:hover { border-color: var(--brass); }

.af-note {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px; line-height: 1.55; color: var(--ink-faint);
}

/* ---- Mode switching ----
   The card is vertically centred, so anything that changes its height moves
   every other element on the pane. Both regions are locked to the taller
   mode's measured height (see lockAuthHeights) and the content cross-fades
   inside that reserved space. Nothing reflows; only the fields change. */
.auth-head, .auth-form {
  transition: opacity .16s ease, transform .16s ease;
}
.auth-head.swapping, .auth-form.swapping {
  opacity: 0;
  transform: translateY(5px);
}

/* Fields stack from the top of the reserved box; everything from the submit
   button down is pinned to the bottom of it. So the only thing that moves
   between modes is the field being added or removed — the button, the divider,
   the Google row and the switch link never budge. */
.auth-form { justify-content: flex-start; }
.af-submit { margin-top: auto; }

@keyframes afIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 940px) {
  #auth { flex-direction: column; overflow-y: auto; }
  .auth-art { flex: 0 0 240px; }
  .auth-art-body { padding: 26px 28px; }
  .auth-art-copy h2 { font-size: 25px; }
  .auth-art-copy p { display: none; }
  .auth-pane { padding: 34px 24px 56px; }
  .auth-back { top: 14px; left: 20px; }
}

/* ============================================================
   PLANS
   ============================================================ */

#plans {
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  background: var(--bg-deep);
}
.plans-inner { width: 100%; max-width: 880px; padding: 40px 32px 80px; }

.plans-back {
  font-size: 13px; color: var(--ink-dim); padding: 6px 0; margin-bottom: 34px;
  transition: color .14s;
}
.plans-back:hover { color: var(--ink); }

.plans-h { font-size: 34px; letter-spacing: -0.04em; margin-bottom: 8px; }
.plans-sub { font-size: 14.5px; color: #fff; margin-bottom: 38px; }

.plans-resume {
  display: none;
  background: rgba(174,195,176,.09);
  border: 1px solid var(--brass-dim);
  border-radius: var(--r);
  padding: 11px 15px;
  font-size: 13px; color: var(--brass-hi);
  margin-bottom: 22px;
  animation: afIn .3s ease-out;
}
.plans-resume.on { display: block; }

.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* The plan they were reaching for before signing in */
.plan.pending {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(174,195,176,.12);
}

.plan {
  position: relative;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column;
  /* Card no longer lifts on hover; border still animates for the
     pending-plan highlight after signing in. */
  transition: border-color .16s, box-shadow .16s;
}
.plan.feature {
  border-color: var(--brass-dim);
  background: var(--panel-hi);
}

.plan-tag {
  position: absolute; top: -1px; right: 18px;
  background: var(--brass); color: #0C0D0C;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 0 0 4px 4px;
}

.plan-name { font-size: 15px; font-weight: 600; color: var(--ink-mid); margin-bottom: 6px; }
.plan-price {
  font-size: 40px; font-weight: 700; letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.plan-price span { font-size: 14px; font-weight: 400; color: var(--ink-dim); letter-spacing: 0; }

/* Anchor price. Muted and struck so the eye lands on the real number, not
   this one — it is context, not the offer. */
.plan-was {
  font-size: 24px; font-weight: 600;
  color: var(--ink-faint);
  text-decoration-thickness: 2px;
  margin-right: 10px;
  letter-spacing: -0.03em;
}

.promo {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: -12px 0 22px;
}
.promo-code {
  font-family: var(--mono);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: var(--brass-hi);
  border: 1px dashed var(--brass-dim);
  border-radius: var(--r-sm);
  padding: 4px 9px;
}
.promo-note { font-size: 12px; color: #fff; }

.plan-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.plan-list li {
  font-size: 13px; color: var(--ink-mid);
  padding-left: 22px; position: relative; line-height: 1.45;
}
.plan-list li::before {
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 12px;
}
.plan-list li.yes::before { content: "✓"; color: var(--long); }
.plan-list li.no { color: var(--ink-faint); }
.plan-list li.no::before { content: "·"; color: var(--ink-faint); }

.plan-pick {
  margin-top: auto;
  display: block; text-align: center;
  border-radius: var(--r); padding: 11px;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background .14s, border-color .14s;
}
.plan-pick:hover { border-color: var(--brass); color: var(--brass-hi); }
.plan.feature .plan-pick { background: var(--brass-hi); color: #0C0D0C; border-color: var(--brass-hi); }
.plan.feature .plan-pick:hover { background: #fff; color: #0C0D0C; }

.plans-note { font-size: 12px; color: var(--ink-faint); margin-top: 26px; }

@media (max-width: 720px) {
  .plan-grid { grid-template-columns: 1fr; }
  .hero-proof { gap: 20px; }
  .lp-gauge { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   SETUP — the evaluation brief
   ============================================================ */

#setup {
  overflow-y: auto;
  flex-direction: column;
  align-items: center;
  background: var(--bg-deep);
}

.setup-inner { width: 100%; max-width: 1080px; padding: 52px 32px 96px; }

.brandline { display: flex; align-items: baseline; gap: 13px; margin-bottom: 6px; }

.wordmark {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.wordmark em {
  font-style: normal;
  color: var(--brass);
}

.brand-tag {
  font-size: 10px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-left: 1px solid var(--line);
  padding-left: 13px;
}

.setup-lede {
  color: var(--ink-mid);
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 620px;
  margin-bottom: 46px;
}
.setup-lede strong { color: var(--ink); font-weight: 600; }

/* Step blocks */
.step { margin-bottom: 40px; }

.step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line-soft);
}

/* Numbered markers are honest here: this genuinely is an ordered setup sequence */
.step-n {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
  padding: 2.5px 6px;
  line-height: 1;
}

.step-title { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.step-note { font-size: 12px; color: var(--ink-dim); margin-left: auto; }

/* Date row */
.date-row { display: flex; gap: 11px; flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-dim);
}

/* Fixed width so the mask does not reflow as digits are cleared */
.ctl-time { min-width: 108px; width: 108px; letter-spacing: .06em; text-align: center; }

select.ctl, input.ctl {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 12px;
  font-size: 13.5px;
  min-width: 128px;
  transition: border-color .14s;
}
select.ctl:hover, input.ctl:hover { border-color: #333834; }
select.ctl:focus, input.ctl:focus { outline: none; border-color: var(--brass-dim); }

/* Card grids */
.cards { display: grid; gap: 11px; }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 17px;
  text-align: left;
  position: relative;
  transition: border-color .15s, background .15s, transform .15s;
}
.card:hover { border-color: #333834; background: var(--panel-hi); transform: translateY(-1px); }

.card.sel {
  border-color: var(--brass);
  background: var(--panel-hi);
}
.card.sel::after {
  content: "";
  position: absolute; top: 11px; right: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 3px rgba(174,195,176,.16);
}

.card-t { font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.card-s { font-size: 11.5px; color: var(--ink-dim); font-family: var(--mono); }
.card-d { font-size: 12px; color: var(--ink-mid); margin-top: 9px; line-height: 1.5; }

.card-rules {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 5px;
}
.rule-line { display: flex; justify-content: space-between; font-size: 11.5px; }
.rule-line span:first-child { color: var(--ink-dim); }
.rule-line span:last-child { font-family: var(--mono); color: var(--ink-mid); }

/* ---- Account rule sheet ---- */
.rulesheet {
  margin-top: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.rs-title {
  font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
  text-align: center; padding: 17px 18px;
  border-bottom: 1px solid var(--line);
  color: #fff;
}

.rs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line-soft);
  min-height: 56px;
}
.rs-row:last-of-type { border-bottom: none; }

.rs-k { font-size: 15px; color: var(--ink-mid); }
.rs-v { font-size: 17px; font-weight: 700; color: #fff; }
.rs-right { display: flex; align-items: center; gap: 10px; }

/* Says where a derived value came from, so an automatic number does not look
   like an arbitrary one */
.rs-derived { font-size: 11.5px; color: var(--ink-dim); }

/* Segmented control */
.seg {
  display: flex; gap: 2px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px;
}
.seg-b {
  padding: 7px 14px; border-radius: 5px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-mid);
  white-space: nowrap;
  transition: background .14s, color .14s;
}
.seg-b:hover:not(.on) { color: var(--ink); }
.seg-b.on { background: var(--long); color: #04230f; }
.seg-b b { font-weight: 800; }


.rs-num {
  width: 62px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 14px; font-weight: 600;
  text-align: right;
  transition: border-color .14s, opacity .14s;
}
.rs-num:focus { outline: none; border-color: var(--brass); }
.rs-num::-webkit-outer-spin-button,
.rs-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rs-num.off { opacity: .3; pointer-events: none; }
.rs-pct { font-size: 14px; color: var(--ink-dim); margin-left: -4px; }
.rs-pct.off { opacity: .3; }

.rs-note {
  padding: 12px 20px 15px;
  font-size: 12px; line-height: 1.55; color: var(--ink-dim);
  border-top: 1px solid var(--line-soft);
}

.lbl-hint { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }

@media (max-width: 720px) {
  .rs-row { flex-direction: column; align-items: flex-start; gap: 9px; }
}

/* Launch */
.launch-bar {
  display: flex; align-items: center; gap: 20px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

.btn-launch {
  background: var(--brass);
  color: #0C0D0C;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 13px 34px;
  border-radius: var(--r);
  transition: background .14s, transform .1s;
}
.btn-launch:hover { background: var(--brass-hi); }
.btn-launch:active { transform: translateY(1px); }
.btn-launch:disabled { background: var(--line); color: var(--ink-dim); cursor: not-allowed; }

.launch-summary { font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; }
.launch-summary b { color: var(--ink-mid); font-weight: 500; font-family: var(--mono); }

/* ============================================================
   TERMINAL
   ============================================================ */

#terminal { flex-direction: column; background: var(--bg); }

.topbar {
  height: 50px;
  flex: 0 0 50px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 13px;
  gap: 13px;
  z-index: 60;
}

.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r);
  color: var(--ink-mid);
  transition: background .13s, color .13s;
}
.icon-btn:hover { background: var(--panel-hi); color: var(--ink); }

.tb-brand { font-size: 14.5px; font-weight: 700; letter-spacing: -0.03em; }
.tb-brand em { font-style: normal; color: var(--brass); }

.tb-instr {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-mid);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px 9px;
}

.tb-sep { width: 1px; height: 24px; background: var(--line); }

/* Whether the tape is real is the single most important thing to be honest
   about, so it lives permanently in the chrome rather than in a tooltip. */
.data-badge {
  font-size: 9px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.data-badge.real {
  color: var(--long);
  border-color: rgba(74,222,128,.35);
  background: rgba(74,222,128,.10);
}
.data-badge.sim {
  color: var(--warn);
  border-color: rgba(227,168,87,.35);
  background: rgba(227,168,87,.10);
}
.data-badge.loading { color: var(--ink-dim); border-color: var(--line); }

/* Live account readout */
.readout { display: flex; flex-direction: column; gap: 1px; }
.readout-k {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--ink-dim);
}
.readout-v { font-size: 14.5px; font-weight: 600; }
.readout-v.up { color: var(--long); }
.readout-v.dn { color: var(--short); }

.tb-right { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* Replay transport */
.transport {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 2px;
}
.tp-btn {
  padding: 5px 9px; border-radius: var(--r-sm);
  color: var(--ink-mid); font-size: 12px;
  transition: background .12s, color .12s;
}
.tp-btn:hover { background: var(--panel-hi); color: var(--ink); }
.tp-btn.on { background: var(--brass); color: #0C0D0C; font-weight: 600; }

.clock {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 11px;
}
.clock .cl-sess { color: var(--brass); font-size: 10px; margin-left: 7px; }

.btn-ghost {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 7px 13px;
  font-size: 12.5px;
  color: var(--ink-mid);
  transition: all .13s;
}
.btn-ghost:hover { border-color: #333834; color: var(--ink); }
.btn-ghost.on { border-color: var(--brass); color: var(--brass); background: rgba(174,195,176,.07); }

/* ---- Timeframe hot bar + picker ---- */
.tf-wrap { position: relative; display: flex; align-items: center; gap: 3px; }

.tf-hot {
  display: flex; align-items: center; gap: 1px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r) 0 0 var(--r);
  padding: 2px;
}
.tf-chip {
  padding: 5px 9px; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-mid);
  transition: background .12s, color .12s;
}
.tf-chip:hover { background: var(--panel-hi); color: var(--ink); }
.tf-chip.on { background: var(--brass); color: #0C0D0C; font-weight: 700; }
.tf-hot-empty { padding: 5px 9px; font-size: 11px; color: var(--ink-faint); }

.tf-more {
  height: 29px; padding: 0 8px;
  background: var(--bg-deep);
  border: 1px solid var(--line); border-left: none;
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--ink-dim); font-size: 11px;
  transition: color .12s, background .12s;
}
.tf-more:hover { color: var(--ink); background: var(--panel-hi); }
.tf-more.on { color: var(--brass); }

.tf-menu {
  position: absolute; top: 36px; right: 0;
  width: 268px;
  max-height: min(560px, calc(100vh - 90px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 44px rgba(0,0,0,.62);
  display: none; flex-direction: column;
  z-index: 120;
  overflow: hidden;
}
.tf-menu.on { display: flex; }

.tf-menu-scroll { overflow-y: auto; flex: 1; padding: 5px 0; }

.tf-group-head {
  display: flex; align-items: baseline; gap: 7px;
  padding: 10px 13px 5px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-faint);
  border-top: 1px solid var(--line-soft);
}
.tf-menu-scroll > .tf-group-head:first-child { border-top: none; }
.tf-group-why {
  text-transform: none; letter-spacing: 0;
  font-size: 9.5px; color: var(--ink-faint);
  padding: 0 13px 6px; line-height: 1.45;
}

.tf-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 13px;
  font-size: 13px; color: var(--ink-mid);
  transition: background .1s, color .1s;
  text-align: left;
}
.tf-row:hover { background: var(--panel-hi); color: var(--ink); }
.tf-row.on { color: var(--brass); background: rgba(174,195,176,.09); }
.tf-row.off { color: var(--ink-faint); cursor: not-allowed; }
.tf-row.off:hover { background: none; color: var(--ink-faint); }

.tf-star {
  margin-left: auto; flex: 0 0 auto;
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink-faint); font-size: 13px; line-height: 1;
  transition: color .12s, background .12s;
}
.tf-star:hover { background: var(--line); color: var(--brass-hi); }
.tf-star.on { color: var(--brass); }
.tf-tag {
  font-family: var(--mono); font-size: 9.5px;
  color: var(--ink-faint); border: 1px solid var(--line);
  border-radius: 2px; padding: 1px 4px;
}

.tf-custom {
  border-top: 1px solid var(--line);
  padding: 11px 13px 13px;
  background: var(--panel-hi);
}
.tf-custom > label {
  display: block;
  font-size: 9px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-dim); margin-bottom: 7px;
}
.tf-custom-row { display: flex; gap: 6px; }
.tf-custom-row input, .tf-custom-row select {
  background: var(--bg-deep); border: 1px solid var(--line);
  border-radius: var(--r); padding: 6px 8px; font-size: 12px;
}
.tf-custom-row input { width: 58px; }
.tf-custom-row select { flex: 1; }
.tf-custom-row input:focus, .tf-custom-row select:focus { outline: none; border-color: var(--brass-dim); }
.tf-custom-row button {
  background: var(--brass); color: #0C0D0C;
  border-radius: var(--r); padding: 6px 13px;
  font-size: 12px; font-weight: 700;
}
.tf-custom-row button:hover { background: var(--brass-hi); }
.tf-custom-note { font-size: 10.5px; color: var(--ink-faint); margin-top: 7px; line-height: 1.45; min-height: 14px; }
.tf-custom-note.warn { color: var(--warn); }

/* Ending a session is deliberate, so it reads quiet until you reach for it */
.btn-end {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 7px 13px;
  font-size: 12.5px;
  color: var(--ink-dim);
  transition: all .13s;
}
.btn-end:hover {
  border-color: var(--short);
  color: var(--short);
  background: rgba(242,85,95,.08);
}
.btn-end:disabled { opacity: .35; cursor: not-allowed; }
.btn-end:disabled:hover { border-color: var(--line); color: var(--ink-dim); background: none; }

/* ---- Confirm dialog ---- */
.confirm {
  position: fixed; inset: 0;
  display: none; place-items: center;
  background: rgba(4,6,10,.72);
  backdrop-filter: blur(3px);
  z-index: 190;
}
.confirm.on { display: grid; animation: verdictIn .16s ease-out; }

.confirm-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  width: 400px; max-width: calc(100vw - 40px);
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  animation: verdictPop .22s cubic-bezier(.2,1.1,.4,1);
}
.confirm-card h3 { font-size: 16.5px; letter-spacing: -.02em; margin-bottom: 9px; }
.confirm-card p { font-size: 13px; color: var(--ink-mid); line-height: 1.6; }

.confirm-acts { display: flex; gap: 9px; margin-top: 20px; justify-content: flex-end; }
.confirm-acts button { padding: 10px 18px; border-radius: var(--r); font-size: 13px; font-weight: 600; }
.c-cancel { border: 1px solid var(--line); color: var(--ink-mid); }
.c-cancel:hover { border-color: #333834; color: var(--ink); }
.c-go { background: var(--short); color: #3A0A0E; }
.c-go:hover { filter: brightness(1.12); }

/* ------------------------------------------------------------
   SIGNATURE ELEMENT — the three rule gauges.
   The whole thesis of the product is that passing is about the
   rules, not the chart. So the rules get the persistent real estate.
   ------------------------------------------------------------ */

.gauges {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.gauge { background: var(--panel); padding: 9px 15px 11px; position: relative; }

.gauge-top {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px;
}
.gauge-name {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-dim);
}
.gauge-val {
  margin-left: auto;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 600;
}
.gauge-lim { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }

.gauge-track {
  height: 4px; background: var(--bg-deep);
  border-radius: 2px; overflow: hidden; position: relative;
}
.gauge-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  border-radius: 2px;
  transition: width .28s cubic-bezier(.3,.9,.4,1), background .28s;
}
.g-target .gauge-fill { background: var(--long); }
.g-daily  .gauge-fill { background: var(--short); }
.g-trail  .gauge-fill { background: var(--short); }

.gauge.danger { background: rgba(242,85,95,.07); }
.gauge.danger .gauge-name { color: var(--short); }
.gauge.near   { background: rgba(227,168,87,.06); }

/* ------------------------------------------------------------
   Workspace — free-form panel canvas (customizable)
   ------------------------------------------------------------ */

.workspace { flex: 1; position: relative; overflow: hidden; }

.panel {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 190px;
  min-height: 110px;
}

.panel-head {
  flex: 0 0 30px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 11px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel-hi);
  user-select: none;
}
.panel-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-dim); font-weight: 600;
}
.panel-badge {
  margin-left: auto;
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-faint);
}
.panel-body { flex: 1; overflow: auto; position: relative; }

/* Customize mode */
body.customizing .panel { border-color: var(--brass-dim); }
body.customizing .panel-head { cursor: grab; background: rgba(174,195,176,.1); }
body.customizing .panel-head:active { cursor: grabbing; }
body.customizing .panel-title { color: var(--brass); }
body.customizing .resize-grip { display: block; }

.resize-grip {
  display: none;
  position: absolute; right: 0; bottom: 0;
  width: 15px; height: 15px;
  cursor: nwse-resize;
  background: var(--brass);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: .75;
}

.customize-hint {
  position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
  background: var(--brass); color: #0C0D0C;
  font-size: 12px; font-weight: 600;
  padding: 8px 17px; border-radius: 20px;
  display: none; z-index: 40;
  box-shadow: 0 5px 22px rgba(0,0,0,.45);
}
body.customizing .customize-hint { display: block; }

/* Chart panel */
#chartCanvas { display: block; width: 100%; height: 100%; }
.chart-wrap { position: absolute; inset: 0; }

.chart-legend {
  position: absolute; top: 9px; left: 11px;
  display: flex; gap: 13px; align-items: center;
  font-family: var(--mono); font-size: 11px;
  pointer-events: none; z-index: 2;
}
.leg-ohlc span { margin-right: 9px; }
.leg-k { color: var(--ink-faint); }

/* ---------------- Order ticket ---------------- */
.ticket { padding: 11px; display: flex; flex-direction: column; gap: 10px; }

/* Bid / ask strip — doubles as the side selector */
.bidask {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; position: relative;
  background: var(--bg-deep);
}
.ba-side {
  flex: 1; padding: 8px 11px;
  display: flex; flex-direction: column; gap: 1px;
  transition: background .14s;
}
.ba-sell { text-align: left; align-items: flex-start; }
.ba-buy  { text-align: right; align-items: flex-end; }
.ba-lbl { font-size: 11.5px; color: var(--ink-dim); font-weight: 600; }
.ba-px  { font-size: 15px; font-weight: 600; color: var(--ink-mid); }

.ba-sell.on { background: rgba(242,85,95,.14); }
.ba-sell.on .ba-lbl, .ba-sell.on .ba-px { color: var(--short); }
.ba-buy.on  { background: rgba(74,222,128,.13); }
.ba-buy.on .ba-lbl, .ba-buy.on .ba-px { color: var(--long); }
.ba-side:hover:not(.on) { background: var(--panel-hi); }

.ba-spread {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: var(--panel-hi); border: 1px solid var(--line);
  border-radius: 3px; padding: 2px 6px;
  font-size: 10.5px; color: var(--ink-mid);
  pointer-events: none; z-index: 2;
}

/* Order-type tabs */
.otabs {
  display: flex; position: relative;
  border-bottom: 2px solid var(--line);
}
.otab {
  flex: 1; padding: 8px 2px 9px;
  font-size: 12px; color: var(--ink-dim);
  transition: color .13s; white-space: nowrap;
}
.otab:hover { color: var(--ink-mid); }
.otab.on { color: var(--ink); font-weight: 600; }
.otab-ind {
  position: absolute; bottom: -2px; left: 0;
  height: 2px; width: 25%;
  background: var(--brass);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}

/* Fields */
.ofield { display: flex; flex-direction: column; gap: 5px; }
.ofield.hide { display: none; }
.ofield > label {
  font-size: 11.5px; color: var(--ink-dim);
}

.oinput {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 9px;
  transition: border-color .14s;
}
.oinput:focus-within { border-color: var(--brass-dim); }
.oinput.bad { border-color: var(--short); }
/* Valid, but it will cross the spread on arrival rather than rest */
.oinput.cross { border-color: var(--warn); }
.oinput.cross .ohint { color: var(--warn); }
.oinput.off { opacity: .4; pointer-events: none; }
.oinput input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  padding: 9px 0; font-size: 14px;
}
.oinput input::-webkit-outer-spin-button,
.oinput input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.oswap {
  flex: 0 0 auto; width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--ink-faint); font-size: 12px; border-radius: 3px;
  transition: color .12s, background .12s;
}
.oswap:hover { color: var(--brass); background: var(--panel-hi); }
.ohint {
  flex: 0 0 auto; font-size: 11px; color: var(--ink-dim);
  white-space: nowrap;
}

/* Exits */
.exits { border-top: 1px solid var(--line-soft); padding-top: 9px; }
.exits-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 2px 0 8px;
}
.exits-t { font-size: 13px; font-weight: 600; }
.exits-rr { font-size: 11.5px; color: var(--ink-dim); }
.exits-chev { margin-left: auto; color: var(--ink-dim); font-size: 11px; transition: transform .2s; }
.exits.closed .exits-chev { transform: rotate(-90deg); }
.exits.closed .exits-body { display: none; }

.exits-body { display: flex; flex-direction: column; gap: 6px; }
.exit-row { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.exit-row label { font-size: 11.5px; color: var(--ink-dim); }
.exit-mode {
  background: none; border: none; outline: none;
  font-size: 11.5px; color: var(--ink-mid);
  padding: 0 2px; cursor: pointer;
}

/* Toggle */
.toggle {
  margin-left: auto; flex: 0 0 auto;
  width: 34px; height: 19px; border-radius: 10px;
  background: var(--line); position: relative;
  transition: background .16s;
}
.toggle span {
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--ink-faint);
  transition: transform .16s, background .16s;
}
.toggle.on { background: var(--brass-dim); }
.toggle.on span { transform: translateX(15px); background: var(--brass-hi); }

/* Order info */
.oinfo {
  border-top: 1px solid var(--line-soft);
  padding-top: 9px;
  display: flex; flex-direction: column; gap: 5px;
}
.oinfo-t { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.oinfo-row { display: flex; justify-content: space-between; font-size: 11.5px; }
.oinfo-row > span:first-child { color: var(--ink-dim); }
.oinfo-row.hide { display: none; }

.oerr { font-size: 11px; color: var(--short); line-height: 1.45; min-height: 0; }
.oerr:empty { display: none; }

/* Submit */
.osubmit {
  padding: 11px; border-radius: var(--r);
  display: flex; flex-direction: column; gap: 1px; align-items: center;
  transition: filter .13s, transform .08s;
}
.osubmit.buy  { background: var(--long);  color: #04230f; }
.osubmit.sell { background: var(--short); color: #33060a; }
.osubmit:hover:not(:disabled) { filter: brightness(1.1); }
.osubmit:active:not(:disabled) { transform: translateY(1px); }
.osubmit:disabled {
  background: var(--panel-hi); color: var(--ink-faint);
  cursor: not-allowed; filter: none;
}
.os-main { font-size: 14.5px; font-weight: 700; }
.os-sub  { font-size: 10.5px; opacity: .82; }

/* Working orders */
.working { border-top: 1px solid var(--line-soft); padding-top: 9px; }
.working.hide { display: none; }
.working-t {
  font-size: 9px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--ink-dim); margin-bottom: 6px;
}
.wo {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-deep); border: 1px solid var(--line);
  border-radius: var(--r); padding: 6px 8px; margin-bottom: 5px;
  font-size: 11.5px;
}
.wo-side { font-weight: 700; letter-spacing: .03em; }
.wo-side.long { color: var(--long); }
.wo-side.short { color: var(--short); }
.wo-desc { font-family: var(--mono); color: var(--ink-mid); }
.wo-x {
  margin-left: auto; color: var(--ink-faint);
  width: 18px; height: 18px; border-radius: 3px;
  display: grid; place-items: center; font-size: 13px;
}
.wo-x:hover { color: var(--short); background: var(--panel-hi); }

.qty-row { display: flex; align-items: center; gap: 8px; }
.qty-row label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-dim); flex: 1;
}
.stepper { display: flex; align-items: center; gap: 1px; }
.stepper button {
  width: 26px; height: 27px;
  background: var(--bg-deep); border: 1px solid var(--line);
  color: var(--ink-mid); font-size: 15px; line-height: 1;
}
.stepper button:first-child { border-radius: var(--r) 0 0 var(--r); }
.stepper button:last-child  { border-radius: 0 var(--r) var(--r) 0; }
.stepper button:hover { background: var(--panel-hi); color: var(--ink); }
.stepper input {
  width: 46px; height: 27px; text-align: center;
  background: var(--bg-deep); border: 1px solid var(--line);
  border-left: none; border-right: none;
  font-size: 13px; font-weight: 600;
}
.stepper input:focus { outline: none; }

.bracket-row { display: flex; gap: 8px; }
.bracket-row .field { flex: 1; gap: 4px; }
.bracket-row input {
  background: var(--bg-deep); border: 1px solid var(--line);
  border-radius: var(--r); padding: 7px 9px; font-size: 12.5px; width: 100%;
}
.bracket-row input:focus { outline: none; border-color: var(--brass-dim); }

.trade-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-long, .btn-short {
  padding: 12px; border-radius: var(--r);
  font-weight: 700; font-size: 13px; letter-spacing: 0.03em;
  transition: filter .13s, transform .08s;
}
.btn-long  { background: var(--long);  color: #06251A; }
.btn-short { background: var(--short); color: #3A0A0E; }
.btn-long:hover, .btn-short:hover { filter: brightness(1.12); }
.btn-long:active, .btn-short:active { transform: translateY(1px); }
.btn-long:disabled, .btn-short:disabled {
  background: var(--line); color: var(--ink-faint); cursor: not-allowed; filter: none;
}

.btn-flat {
  width: 100%; padding: 9px; border-radius: var(--r);
  border: 1px solid var(--line); color: var(--ink-mid); font-size: 12.5px;
}
.btn-flat:hover:not(:disabled) { border-color: var(--short); color: var(--short); }
.btn-flat:disabled { opacity: .32; cursor: not-allowed; }

/* Position readout */
.pos-box {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 11px;
}
.pos-empty { color: var(--ink-faint); font-size: 12px; text-align: center; padding: 5px 0; }
.pos-line { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.pos-line:last-child { margin-bottom: 0; }
.pos-line span:first-child { color: var(--ink-dim); }
.pos-line span:last-child { font-family: var(--mono); }
.pos-side { font-weight: 700; letter-spacing: .04em; }
.pos-side.long { color: var(--long); }
.pos-side.short { color: var(--short); }

/* ---------------- News ---------------- */
.news-list { display: flex; flex-direction: column; }

.news-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  animation: slideIn .3s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(11px); }
  to   { opacity: 1; transform: none; }
}

.news-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.news-time { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.news-imp {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em;
  padding: 2px 5px; border-radius: 2px; font-weight: 700;
}
.imp-high { background: rgba(242,85,95,.16); color: var(--short); }
.imp-med  { background: rgba(227,168,87,.16); color: var(--warn); }
.imp-low  { background: var(--line); color: var(--ink-dim); }

.news-title { font-size: 12.5px; line-height: 1.45; margin-bottom: 5px; }
.news-data { display: flex; gap: 13px; font-family: var(--mono); font-size: 10.5px; }
.news-data div span { color: var(--ink-faint); }
.news-data .act { color: var(--ink); font-weight: 600; }

.news-empty { padding: 22px 14px; text-align: center; color: var(--ink-faint); font-size: 12px; line-height: 1.6; }

/* ---------------- Notes ---------------- */
#notesArea {
  width: 100%; height: 100%;
  background: transparent; border: none; resize: none;
  padding: 12px; font-size: 13px; line-height: 1.65;
  color: var(--ink);
}
#notesArea:focus { outline: none; }
#notesArea::placeholder { color: var(--ink-faint); }

/* ---------------- Trade log ---------------- */
table.log { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.log th {
  position: sticky; top: 0;
  background: var(--panel-hi);
  text-align: left; padding: 7px 11px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-dim); font-weight: 600;
  border-bottom: 1px solid var(--line);
}
table.log td {
  padding: 7px 11px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
}
table.log tr:hover td { background: var(--panel-hi); }
td.win  { color: var(--long); }
td.loss { color: var(--short); }
.log-empty { padding: 26px; text-align: center; color: var(--ink-faint); font-size: 12px; }

/* ============================================================
   Nav drawer
   ============================================================ */

.scrim {
  position: fixed; inset: 0;
  background: rgba(4,6,10,.66);
  opacity: 0; pointer-events: none;
  transition: opacity .2s; z-index: 90;
}
.scrim.on { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 274px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
  z-index: 100;
  display: flex; flex-direction: column;
}
.drawer.on { transform: none; }

.drawer-head {
  padding: 16px 17px;
  border-bottom: 1px solid var(--line);
}
.drawer-head .wordmark { font-size: 18px; }
.drawer-sub { font-size: 10.5px; color: var(--ink-dim); margin-top: 3px; letter-spacing: .04em; }

.nav-group { padding: 13px 0 5px; }
.nav-group-t {
  font-size: 9px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-faint); padding: 0 17px 7px;
}

.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 17px;
  font-size: 13px; color: var(--ink-mid);
  transition: background .12s, color .12s;
  text-align: left;
}
.nav-item:hover { background: var(--panel-hi); color: var(--ink); }
.nav-item.on { color: var(--brass); background: rgba(174,195,176,.08); box-shadow: inset 2px 0 0 var(--brass); }
.nav-ico { width: 15px; text-align: center; opacity: .8; flex: 0 0 15px; }
.nav-tag {
  margin-left: auto; font-size: 8.5px; letter-spacing: .08em;
  color: var(--ink-faint); border: 1px solid var(--line); border-radius: 2px;
  padding: 1.5px 4px; text-transform: uppercase;
}

.drawer-foot {
  margin-top: auto; padding: 14px 17px;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-faint); line-height: 1.55;
}

/* ============================================================
   Verdict overlay
   ============================================================ */

.verdict {
  position: fixed; inset: 0;
  display: none; place-items: center;
  z-index: 200;
  backdrop-filter: blur(2.5px);
  animation: verdictIn .42s ease-out;
}
.verdict.on { display: grid; }
.verdict.pass  { background: rgba(74,222,128,.19); }
.verdict.fail  { background: rgba(242,85,95,.19); }
/* Ending early is neither a pass nor a blow-up, so it gets its own neutral read */
.verdict.ended { background: rgba(174,195,176,.17); }
/* Running out of tape uses the same card and motion as a pass, but is not
   dressed in green — nothing was passed. */
.verdict.tape  { background: rgba(174,195,176,.17); }

@keyframes verdictIn { from { opacity: 0; } to { opacity: 1; } }

.verdict-card { text-align: center; animation: verdictPop .5s cubic-bezier(.2,1.1,.4,1); }
@keyframes verdictPop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

.verdict-word {
  font-size: clamp(72px, 15vw, 172px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: .92;
}
.pass .verdict-word  { color: #d6ffee; }
.fail .verdict-word  { color: #ffdfe1; }
.ended .verdict-word { color: #fdefd2; font-size: clamp(52px, 10vw, 118px); }
.tape  .verdict-word { color: #eef6e8; font-size: clamp(52px, 10vw, 118px); }

.verdict-reason {
  font-size: 15px; margin-top: 12px; color: rgba(255,255,255,.9);
  letter-spacing: .01em;
}

.verdict-stats {
  display: flex; justify-content: center; gap: 34px;
  margin-top: 30px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.vs-k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .15em; color: rgba(255,255,255,.55); }
.vs-v { font-family: var(--mono); font-size: 21px; font-weight: 600; margin-top: 4px; color: #fff; }

.verdict-acts { margin-top: 34px; display: flex; gap: 11px; justify-content: center; }
.verdict-acts button {
  padding: 11px 24px; border-radius: var(--r);
  font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  backdrop-filter: blur(9px);
}
.verdict-acts button:hover { background: rgba(255,255,255,.22); }
.verdict-acts button.primary { background: #fff; color: #070707; border-color: #fff; }

/* ============================================================
   Toast
   ============================================================ */
.toasts {
  position: fixed; bottom: 17px; right: 17px;
  display: flex; flex-direction: column-reverse; gap: 8px;
  z-index: 150;
}
.toast {
  background: var(--panel-hi);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
  border-radius: var(--r);
  padding: 10px 15px; font-size: 12.5px;
  box-shadow: 0 5px 20px rgba(0,0,0,.42);
  animation: slideIn .22s ease-out;
  max-width: 310px;
}
.toast.good { border-left-color: var(--long); }
.toast.bad  { border-left-color: var(--short); }

/* ============================================================
   Placeholder views (nav destinations not yet built)
   ============================================================ */
.stub {
  position: absolute; inset: 0;
  display: none; place-items: center;
  background: var(--bg); z-index: 30;
  padding: 40px;
}
.stub.on { display: grid; }
.stub-inner { max-width: 480px; text-align: center; }
.stub-ico { font-size: 34px; opacity: .3; margin-bottom: 14px; }
.stub h2 { font-size: 19px; margin-bottom: 9px; letter-spacing: -.02em; }
.stub p { color: var(--ink-dim); font-size: 13.5px; line-height: 1.68; }

@media (max-width: 900px) {
  .cards.c4, .cards.c3 { grid-template-columns: 1fr 1fr; }
  .gauges { grid-template-columns: 1fr; }
}

/* A rule that is switched off should read as absent, not as satisfied */
.gauge.muted { opacity: .38; }
.gauge.muted .gauge-fill { background: var(--line); }

/* ============================================================
   LEGAL + SETTINGS (shared document shell)
   ============================================================ */
#legal, #settings { overflow-y: auto; background: var(--bg-deep); flex-direction: column; }
.doc-wrap, .set-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 28px 80px; }

.doc-top {
  display: flex; align-items: center; gap: 20px;
  padding: 26px 0 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}
.doc-back { font-size: 13px; color: var(--ink-dim); transition: color .14s; }
.doc-back:hover { color: var(--ink); }
.doc-top .wordmark { font-size: 17px; margin-left: auto; }

.doc-body { display: grid; grid-template-columns: 210px 1fr; gap: 40px; align-items: start; }

.doc-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 24px; }
.doc-link {
  text-align: left; padding: 9px 12px; border-radius: var(--r);
  font-size: 13.5px; color: var(--ink-mid);
  transition: background .13s, color .13s;
}
.doc-link:hover { background: var(--panel); color: var(--ink); }
.doc-link.on { background: var(--panel-hi); color: #fff; box-shadow: inset 2px 0 0 var(--brass); }
.doc-link.danger { color: var(--short); }
.doc-link.danger.on { box-shadow: inset 2px 0 0 var(--short); }

.doc-main { min-width: 0; }
.doc-h1 { font-size: 30px; letter-spacing: -0.035em; margin-bottom: 8px; }
.doc-eff { font-size: 12.5px; color: var(--ink-dim); margin-bottom: 26px; }

.doc-warn {
  background: rgba(227,168,87,.09);
  border: 1px solid rgba(227,168,87,.34);
  border-radius: var(--r);
  padding: 11px 14px; margin-bottom: 22px;
  font-size: 12.5px; color: var(--warn); line-height: 1.55;
}

.doc-sec { margin-bottom: 26px; }
.doc-sec h2 { font-size: 16px; margin-bottom: 8px; letter-spacing: -.01em; color: #fff; }
.doc-sec p { font-size: 14px; line-height: 1.72; color: #fff; }
.doc-sec mark { background: rgba(227,168,87,.18); color: var(--warn); padding: 0 3px; border-radius: 2px; }

/* ---- Settings cards ---- */
.set-pane { display: none; }
.set-pane.on { display: block; animation: afIn .24s ease-out; }

.card-set {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.cs-h { font-size: 15px; margin-bottom: 16px; color: #fff; }
.cs-lede { font-size: 13.5px; line-height: 1.65; color: #fff; margin-bottom: 16px; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.cs-note { font-size: 12px; color: var(--ink-dim); }

.kv-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.kv-row:last-child { border-bottom: none; }
.kv-row span { color: var(--ink-mid); }
.kv-row b { color: #fff; font-weight: 600; }
.kv-row.hide { display: none; }
.kv-row b.good { color: var(--long); }
.kv-row b.warn { color: var(--warn); }

.danger-card { border-color: rgba(242,85,95,.4); }
.btn-danger {
  background: var(--short); color: #fff;
  padding: 11px 22px; border-radius: var(--r);
  font-size: 13.5px; font-weight: 700;
  transition: filter .13s;
}
.btn-danger:hover { filter: brightness(1.1); }

.notif-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.notif-row:last-child { border-bottom: none; }
.notif-row b { color: #fff; font-weight: 500; flex: 1; }
.notif-tag {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 3px;
  padding: 3px 7px; color: var(--ink-dim);
}

/* ---- Site footer ---- */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 26px 28px 40px;
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
}
.site-foot a, .site-foot button {
  font-size: 12.5px; color: var(--ink-mid); text-decoration: none;
  transition: color .14s; background: none; padding: 0;
}
.site-foot a:hover, .site-foot button:hover { color: #fff; }
.site-foot .sf-legal { color: var(--ink-faint); flex-basis: 100%; font-size: 11.5px; line-height: 1.6; }

/* ---- Simulator disclaimer ---- */
.sim-disclaimer {
  flex: 0 0 auto;
  padding: 5px 14px;
  font-size: 10.5px; line-height: 1.4;
  color: var(--ink-dim);
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}

/* ---- Checkout consent ---- */
.sub-terms {
  background: var(--panel-hi);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 20px 0 0;
}
.sub-terms h4 { font-size: 13px; margin-bottom: 8px; color: #fff; }
.sub-terms p { font-size: 12.5px; line-height: 1.6; color: #fff; margin-bottom: 10px; }
.sub-terms .af-check span { font-size: 12.5px; color: #fff; }
.sub-terms .af-err { font-size: 11.5px; }

@media (max-width: 820px) {
  .doc-body { grid-template-columns: 1fr; gap: 22px; }
  .doc-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .cs-grid { grid-template-columns: 1fr; }
}