/* ═══════════════════════════════════════════════════════════════
   SmartForex — dark crystal design system
   Data colours are the validated dark-band steps; identity never
   rests on colour alone (every mark carries a text label).
   ═══════════════════════════════════════════════════════════════ */

/* Inter, self-hosted. Not a CDN link: `font-src 'self'` in the Content
   Security Policy forbids third-party font origins, and a webfont fetched from
   someone else's server is a request every visitor makes to a party that has
   no business knowing they were here. Latin subsets only — the Cyrillic, Greek
   and Vietnamese cuts are 200 KB a browser would download and never draw from.
   The unicode-range on each face means latin-ext is fetched only if a glyph
   actually needs it. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --bg:          #06070b;
  --ink:         #eef1f7;
  --ink-2:       #99a2b7;
  --muted:       #626a7d;

  --glass-a:     rgba(255,255,255,.055);
  --glass-b:     rgba(255,255,255,.018);
  --glass-brd:   rgba(255,255,255,.085);
  --hairline:    rgba(255,255,255,.07);

  /* Straight off the wordmark: navy ground, cyan-to-blue chevron. Interactive
     blue is the logo's #1E6FD9 lifted for legibility on a near-black ground —
     the brand colour itself is a shade too dim to read at 13px here. */
  --brand-navy:  #0b1f3a;
  --brand-cyan:  #7ee0ff;
  --brand-blue:  #1e6fd9;

  --accent:      #4d9dfa;
  --accent-2:    #7ee0ff;
  --accent-glow: rgba(77,157,250,.45);

  /* data palette — dark steps */
  --held:        #3987e5;
  --borrowed:    #d95926;
  --good:        #22c55e;
  --critical:    #ef5350;
  --grid:        rgba(255,255,255,.06);
  --axis:        rgba(255,255,255,.16);

  --r-lg: 22px;
  --r-md: 15px;
  --r-sm: 11px;

  --shadow-glass:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 2px 6px rgba(0,0,0,.4),
    0 22px 48px -20px rgba(0,0,0,.9);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must beat any author `display` rule. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── aurora + mesh backdrop ──────────────────────────────────── */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(110px); }
.blob-a { width: 58vw; height: 58vw; top: -20vw; left: -10vw;
          background: radial-gradient(circle, rgba(75,143,245,.30), transparent 66%); }
.blob-b { width: 50vw; height: 50vw; top: 12vw; right: -16vw;
          background: radial-gradient(circle, rgba(126,224,255,.20), transparent 66%); }
.blob-c { width: 46vw; height: 46vw; bottom: -18vw; left: 26vw;
          background: radial-gradient(circle, rgba(34,197,94,.13), transparent 70%); }
.mesh {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 78%);
}

/* ── glass primitive ─────────────────────────────────────────── */
.glass {
  background: linear-gradient(160deg, var(--glass-a), var(--glass-b));
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
}


/* ── nav ─────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 12px; z-index: 50;
  margin: 12px auto 0; max-width: 1200px; width: calc(100% - 2rem);
  display: flex; align-items: center; gap: 1.5rem;
  padding: .55rem .6rem .55rem 1.1rem; border-radius: 100px;
}
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); }
/* The wordmark. Four stacked bars reading as market depth, resolving into a
   chevron — so the bars take the muted ink steps and only the chevron carries
   brand colour, exactly as the supplied artwork does. */
.brand-mark { width: 25px; height: 19px; display: block; flex: none; }
.bm-1 { fill: #8a9ab0; } .bm-2 { fill: #b6c1d0; }
.bm-3 { fill: #d7dee8; } .bm-4 { fill: #f2f4f7; }
.brand:hover .brand-mark rect { transition: fill .2s; }
.brand:hover .bm-1 { fill: #b6c1d0; } .brand:hover .bm-2 { fill: #d7dee8; }
.brand:hover .bm-3 { fill: #eaeff5; } .brand:hover .bm-4 { fill: #ffffff; }
.brand-text { font-weight: 650; letter-spacing: -.02em; font-size: 1rem; }
.brand-dim { color: var(--muted); font-weight: 500; }
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-size: .85rem; font-weight: 500;
               transition: color .18s; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.nav-links + .nav-actions { margin-left: 0; }
.nav-user { font-size: .85rem; color: var(--ink-2); font-weight: 550; padding-right: .35rem; }

/* ── buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-size: .86rem; font-weight: 560; letter-spacing: -.01em;
  padding: .56rem 1.05rem; border-radius: 100px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn-primary {
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 1px rgba(255,255,255,.09) inset, 0 8px 24px -8px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 14px 34px -8px var(--accent-glow); }
.btn-ghost { color: var(--ink-2); background: transparent; }
.btn-ghost:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.btn-glass { color: var(--ink); background: rgba(255,255,255,.05); border-color: var(--glass-brd); }
.btn-glass:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
.btn-lg { padding: .8rem 1.55rem; font-size: .93rem; }
.btn-block { width: 100%; }

/* ── layout / type ───────────────────────────────────────────── */
main { max-width: 1200px; margin: 0 auto; padding: 0 1rem 5rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 620; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: .7rem;
}
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--good);
         box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 2.2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.04em;
     font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -.03em;
     font-weight: 660; margin: 0 0 .5rem; }
h3 { font-size: .97rem; font-weight: 620; letter-spacing: -.015em; margin: 0 0 .2rem; }
p { margin: 0 0 1rem; color: var(--ink-2); }
.grad { background: linear-gradient(120deg, var(--accent), var(--accent-2) 60%, #c9a4ff);
        -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── hero ────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center;
        padding: 4.5rem 0 3rem; }
.lede { font-size: 1.06rem; line-height: 1.55; max-width: 30rem; }
.hero-cta { display: flex; gap: .65rem; flex-wrap: wrap; margin: 1.5rem 0 .85rem; }
.hero-note { font-size: .8rem; color: var(--muted); margin: 0; }

.hero-card { padding: 1.4rem 1.5rem 1.2rem; }
.hero-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
                  font-size: .8rem; font-weight: 550; color: var(--ink-2); margin-bottom: .8rem; }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--good);
            box-shadow: 0 0 10px rgba(34,197,94,.8); }
.tag { margin-left: auto; font-size: .66rem; font-weight: 600; letter-spacing: .06em;
       text-transform: uppercase; color: var(--muted);
       background: rgba(255,255,255,.06); padding: .18rem .48rem; border-radius: 100px; }
.hero-figure { font-size: clamp(2.3rem, 4.4vw, 3rem); font-weight: 700; letter-spacing: -.04em;
               line-height: 1.05; }
.hero-sub { font-size: .82rem; color: var(--muted); }
.hero-chart { margin: .6rem -.4rem .2rem; }
.hero-card-foot { display: flex; gap: 1.35rem; padding-top: .9rem; margin-top: .35rem;
                  border-top: 1px solid var(--hairline); }
.hero-card-foot > div { display: flex; flex-direction: column; }
.hero-card-foot .k { font-size: .7rem; color: var(--muted); }
.hero-card-foot .v { font-size: .9rem; font-weight: 620; }

/* ── stat grid ───────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin: 1rem 0 2rem; }
.stat { padding: 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .22rem; }
.stat-label { font-size: .74rem; color: var(--muted); font-weight: 550; }
.stat-value { font-size: 1.75rem; font-weight: 680; letter-spacing: -.035em; line-height: 1.1; }
.stat-word { font-size: 1.08rem; letter-spacing: -.02em; display: inline-flex;
             align-items: center; gap: .32rem; }
.stat-foot { font-size: .73rem; color: var(--muted); }
.status-ok { color: var(--good); }
.ico { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* ── bands ───────────────────────────────────────────────────── */
.band { padding: 3.6rem 0 1rem; }
.band-head { max-width: 42rem; margin-bottom: 2rem; }
.band-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.band-lede { font-size: 1rem; margin: 0; }

/* ── flow pipeline ───────────────────────────────────────────── */
.flow {
  display: grid; align-items: stretch;
  grid-template-columns: 1fr 46px 1fr 46px 1fr 46px 1fr;
  margin-bottom: 1rem;
}
.flow-node { padding: 1.85rem 1.15rem 1.5rem; text-align: center; position: relative;
             display: flex; flex-direction: column; align-items: center;
             transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s; }
.flow-node:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.16); }
.flow-node h3 { margin-bottom: .15rem; font-size: 1.12rem; }
.flow-node p { font-size: .82rem; color: var(--muted); margin: 0 0 .9rem; }
.flow-ico { font-size: 1.7rem; line-height: 1; margin-bottom: .7rem; }
.flow-step { position: absolute; top: .7rem; left: .9rem; font-size: .68rem;
             font-weight: 700; letter-spacing: .1em; color: var(--muted); opacity: .5; }
.flow-chip { margin-top: auto; font-size: .7rem; color: var(--ink-2); white-space: nowrap;
             padding: .32rem .72rem; border-radius: 100px;
             background: rgba(255,255,255,.05); border: 1px solid var(--glass-brd); }
.chip-ai { color: #bcd2fc; border-color: rgba(75,143,245,.38);
           background: rgba(75,143,245,.13); }
.is-core { border-color: rgba(75,143,245,.35);
           box-shadow: var(--shadow-glass), 0 0 40px -14px var(--accent-glow); }
.core-ring {
  width: 54px; height: 54px; margin: 0 auto .5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(75,143,245,.22), transparent 70%);
  border: 1px solid rgba(75,143,245,.32);
  animation: breathe 3.4s ease-in-out infinite;
}
.core-ring .flow-ico { margin: 0; font-size: 1.25rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes breathe {
  0%,100% { box-shadow: 0 0 0 0 rgba(75,143,245,.28); }
  50%     { box-shadow: 0 0 0 10px rgba(75,143,245,0); }
}
.flow-link { position: relative; align-self: center; height: 2px;
             background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); }
.flow-link span {
  position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: travel 2.6s linear infinite;
}
@keyframes travel {
  0%   { left: -6px; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ── AI band ─────────────────────────────────────────────────── */
.ai-band { display: flex; align-items: center; justify-content: space-around;
           padding: 1.15rem 1.5rem; gap: 1rem; flex-wrap: wrap; }
.ai-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.ai-v { font-size: 1.5rem; font-weight: 700; letter-spacing: -.035em;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-k { font-size: .74rem; color: var(--muted); }
.ai-div { width: 1px; height: 30px; background: var(--hairline); }

/* ── rate table ──────────────────────────────────────────────── */
.rate-card { padding: 1.4rem 1.5rem 1.2rem; }
.rate-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center;
               font-size: .78rem; color: var(--ink-2);
               padding-bottom: .95rem; border-bottom: 1px solid var(--hairline); }
.rate-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.rate-axis-note { margin-left: auto; color: var(--muted); font-size: .74rem; }
.rate-axis-note strong { color: var(--ink-2); margin-left: .3rem; }
.key { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.key-held { background: var(--held); }
.key-borrowed { background: var(--borrowed); }
.key-neutral { background: var(--axis); }

.rate-table { display: flex; flex-direction: column; }
.rate-row { display: grid; grid-template-columns: 1.5fr 4.4rem 1fr 5rem;
            gap: 1rem; align-items: center; padding: .62rem 0;
            border-bottom: 1px solid var(--hairline); }
.rate-row:last-child { border-bottom: none; }
.rate-name { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.rate-flag { font-size: 1.1rem; flex: none; }
.rate-label { display: flex; flex-direction: column; min-width: 0; }
.rate-code { font-weight: 600; font-size: .89rem; letter-spacing: -.012em; }
.rate-bank { font-size: .72rem; color: var(--muted); white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.rate-pct { font-variant-numeric: tabular-nums; font-weight: 620; font-size: .89rem; }
.rate-bar { position: relative; height: 20px; }
.rate-bar-track { position: absolute; inset: 0; }
.rate-bar-zero { position: absolute; top: -5px; bottom: -5px; width: 1px; background: var(--axis); }
.rate-fill { position: absolute; top: 3px; height: 14px; }
.rate-fill.held { background: var(--held); box-shadow: 0 0 14px -2px rgba(57,135,229,.6); }
.rate-fill.borrowed { background: var(--borrowed); box-shadow: 0 0 14px -2px rgba(217,89,38,.55); }
.rate-fill.neutral { background: rgba(255,255,255,.14); }
.rate-role { font-size: .66rem; font-weight: 640; letter-spacing: .07em; text-transform: uppercase;
             text-align: right; color: var(--muted); }
.rate-role.is-held { color: var(--held); }
.rate-role.is-borrowed { color: #f0834f; }

/* ── safety ──────────────────────────────────────────────────── */
.safety-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
.safety { padding: 1.5rem 1.2rem; text-align: center;
          transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s; }
.safety:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.16); }
.safety-ico { font-size: 1.5rem; margin-bottom: .6rem; }
.safety p { font-size: .8rem; color: var(--muted); margin: 0; }
.risk-note { font-size: .82rem; color: var(--muted); text-align: center;
             max-width: 40rem; margin: 1.4rem auto 0; }

/* ── the difference (old way vs engine) ──────────────────────── */
.vs { padding: .4rem 1.6rem 1rem; max-width: 52rem; margin: 0 auto; }
.vs-row { display: grid; grid-template-columns: 1fr 2.2rem 1fr; align-items: center;
          gap: .6rem; padding: .95rem 0; border-bottom: 1px solid var(--hairline); }
.vs-row:last-child { border-bottom: 0; }
.vs-a { color: var(--muted); text-align: right; font-size: .92rem; }
.vs-b { color: var(--ink); font-weight: 560; font-size: .92rem; }
.vs-mid { color: var(--muted); text-align: center; opacity: .5; font-size: .9rem; }
.vs-head { padding-top: 1.1rem; border-bottom-color: var(--glass-brd); }
.vs-head .vs-a, .vs-head .vs-b { font-size: .72rem; letter-spacing: .13em;
                                 text-transform: uppercase; font-weight: 700; }
.vs-head .vs-a { color: var(--muted); }
.vs-head .vs-b { background: linear-gradient(135deg, var(--accent), var(--accent-2));
                 -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs-head .ai-mark { -webkit-text-fill-color: var(--accent); margin-right: .25rem; }

/* ── fees ────────────────────────────────────────────────────── */
.fee-card { padding: 2.2rem 1.8rem; text-align: center; max-width: 40rem; margin: 0 auto; }
.fee-foot { font-size: .8rem; color: var(--muted); margin: 1.25rem auto 0; max-width: 30rem; }

/* ── funding quote ───────────────────────────────────────────── */
.quote { margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px;
         background: rgba(255,255,255,.04); border: 1px solid var(--glass-brd); }
.quote-row { display: flex; justify-content: space-between; align-items: baseline;
             gap: 1rem; font-size: .84rem; padding: .28rem 0; color: var(--muted); }
.quote-row strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.quote-total { border-top: 1px solid var(--hairline); margin-top: .32rem; padding-top: .5rem; }
.quote-total strong { font-size: 1.02rem; }
.quote-foot { font-size: .76rem; margin: .55rem 0 0; }
.quote-ok    { color: var(--good); }
.quote-short { color: #f5b23c; }
/* Practice-account warning on the funding screen. Amber on a dark panel — it
   has to be read BEFORE paying, not discovered after the money lands. */
.quote-warn { margin: .6rem 0 0; padding: .45rem .55rem; border-radius: 8px;
  font-size: .74rem; line-height: 1.45; color: #ffd479; text-align: left;
  background: rgba(255,212,121,.09);
  border: 1px solid rgba(255,212,121,.3); }

/* ── withdrawal allowance ────────────────────────────────────── */
.allow-strip { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
               font-size: .8rem; color: var(--ink-2); margin-bottom: .9rem;
               padding: .55rem .8rem; border-radius: 100px;
               background: rgba(255,255,255,.04); border: 1px solid var(--glass-brd); }
.allow-strip strong { color: var(--ink); }
.allow-out { border-color: rgba(239,83,80,.36); background: rgba(239,83,80,.09); }
.allow-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.allow-ok { background: var(--good); box-shadow: 0 0 8px rgba(34,197,94,.6); }
.allow-no { background: var(--critical); box-shadow: 0 0 8px rgba(239,83,80,.6); }
.modal-warn { color: #f5b23c; }

.dash-title { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.fee-figure { font-size: 3.4rem; font-weight: 720; letter-spacing: -.05em; line-height: 1;
              background: linear-gradient(135deg, var(--accent), var(--accent-2));
              -webkit-background-clip: text; background-clip: text; color: transparent; }
.fee-figure span { font-size: 2.2rem; }
.fee-line { font-size: .98rem; margin: .4rem 0 1.4rem; }
.fee-chips { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.fee-chip { font-size: .8rem; color: var(--ink-2); padding: .4rem .8rem; border-radius: 100px;
            background: rgba(255,255,255,.05); border: 1px solid var(--glass-brd); }

/* ── cta ─────────────────────────────────────────────────────── */
.cta-band { margin-top: 3.5rem; padding: 3rem 2rem; text-align: center; }
.cta-band h2 { margin-bottom: 1.3rem; }

/* ── auth ────────────────────────────────────────────────────── */
.auth-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1rem;
             max-width: 860px; margin: 3.5rem auto; align-items: start; }
.auth-wrap-narrow { grid-template-columns: 1fr; max-width: 420px; }
.auth-card { padding: 2rem 1.9rem; }
.auth-card h1 { font-size: 1.65rem; margin-bottom: .3rem; }
.auth-sub { font-size: .87rem; margin-bottom: 1.4rem; }
form label { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem;
             font-size: .8rem; font-weight: 550; color: var(--ink-2); }
input[type=text], input[type=email], input[type=password], input[type=number] {
  font: inherit; font-size: .92rem; color: var(--ink); width: 100%;
  padding: .68rem .85rem; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.07);
              box-shadow: 0 0 0 3px rgba(75,143,245,.18); }
input::placeholder { color: #4d5566; }
.form-error { font-size: .83rem; color: var(--critical); margin: -.1rem 0 .8rem;
              display: flex; align-items: center; gap: .3rem; }
.auth-alt { font-size: .85rem; text-align: center; margin: 1.1rem 0 0; }
.auth-alt a { color: var(--accent); text-decoration: none; font-weight: 550; }
.auth-alt a:hover { text-decoration: underline; }
.auth-aside { padding: 2rem 1.8rem; }
.auth-aside h2 { font-size: 1.05rem; }
.auth-aside ul { list-style: none; padding: 0; margin: 1rem 0 1.2rem;
                 display: flex; flex-direction: column; gap: .7rem; }
.auth-aside li { display: flex; gap: .55rem; font-size: .87rem; color: var(--ink-2); }
.auth-aside li span { color: var(--accent); font-size: .65rem; margin-top: .3rem; }
.aside-foot { font-size: .77rem; color: var(--muted); margin: 0; }

/* ── dashboard ───────────────────────────────────────────────── */
.dash { padding: 2rem 0 0; }
.dash-head { display: flex; justify-content: space-between; align-items: center;
             gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.dash-head h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin: 0; }
.dash-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
/* The tag rides with the button so the label stays clean without losing the
   one word that says the money isn't real. */
.fund-action { display: inline-flex; align-items: center; gap: .4rem; }

/* ── the account strip ───────────────────────────────────────────
   One band across the top that answers what am I worth, what can I take out,
   and what is it doing. A trading account is read in that order, so it is laid
   out in that order: one hero figure, then a row of equals underneath. The
   cells share one grid so every label and figure sits on the same baseline —
   a row of separately-boxed cards is what made this look assembled rather
   than designed. */
.acct { padding: 1.3rem 1.5rem 1.15rem; margin-bottom: .85rem; }
.acct-lead {
  display: flex; align-items: flex-start; gap: 1rem;
  padding-bottom: 1.05rem; margin-bottom: 1.05rem;
  border-bottom: 1px solid var(--hairline);
}
.acct-main { min-width: 0; }
.acct-hero {
  font-size: clamp(2.1rem, 4.6vw, 2.9rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.02; margin-top: .1rem;
  font-variant-numeric: tabular-nums slashed-zero;
}
.acct-delta { font-size: .86rem; font-weight: 550; margin-top: .3rem; }
.acct-flag {
  margin-left: auto; flex: none; align-self: center;
  font-size: .64rem; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px;
  white-space: nowrap;
}
.acct-flag.is-live     { color: var(--good);  background: rgba(34,197,94,.12);
                         border: 1px solid rgba(34,197,94,.28); }
.acct-flag.is-practice { color: #ffd479;      background: rgba(255,212,121,.10);
                         border: 1px solid rgba(255,212,121,.30); }

.acct-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.1rem .6rem;
}
.acct-cell { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
/* The one figure a client is really asking about gets a rule beside it, not a
   different colour — colour is already carrying profit and loss. */
.acct-cell-key { border-left: 2px solid var(--accent); padding-left: .7rem; margin-left: -.1rem; }
.acct-k {
  font-size: .63rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); line-height: 1.3;
}
.acct-v {
  font-size: 1.18rem; font-weight: 640; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums slashed-zero; line-height: 1.15;
}
.acct-v-word { font-size: .98rem; font-weight: 600; }
.acct-v.is-dim { color: var(--muted); font-weight: 500; }
.acct-f { font-size: .66rem; color: var(--muted); line-height: 1.35; }

@media (max-width: 900px) { .acct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .95rem .5rem; }
  .acct { padding: 1.1rem 1.1rem 1rem; }
}

.dash-top { display: grid; grid-template-columns: 1.9fr 1fr; gap: .85rem; margin-bottom: .85rem; }
.value-card { padding: 1.15rem 1.4rem 1.1rem; }
.card-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .2rem; }
.card-head h3 { margin: 0; font-size: .84rem; font-weight: 600; letter-spacing: -.005em; }
.card-note { margin-left: auto; font-size: .74rem; font-weight: 550; color: var(--muted); }
.value-delta { font-size: .92rem; font-weight: 570; margin-top: .1rem; }
.d-chart { margin: .9rem -.5rem 0; }
.side-stats { display: grid; grid-template-columns: 1fr; gap: .85rem; align-content: start; }

.panel { padding: 1.4rem 1.5rem; margin-bottom: .85rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between;
              gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.panel-head h2 { font-size: 1.05rem; margin: 0; }
.panel-head-sub { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); }
.panel-note { font-size: .8rem; color: var(--muted); margin: -.4rem 0 .9rem; }
.chart-caption { font-size: .74rem; color: var(--muted); text-align: center; margin-top: .5rem; }
.alloc-legend { display: flex; gap: 1rem; font-size: .76rem; color: var(--ink-2); }
.alloc-legend span { display: inline-flex; align-items: center; gap: .4rem; }

/* ── engine analysis panel ───────────────────────────────────── */
.panel-ai { border-color: rgba(75,143,245,.28);
            box-shadow: var(--shadow-glass), 0 0 46px -20px var(--accent-glow); }
.ai-mark { background: linear-gradient(135deg, var(--accent), var(--accent-2));
           -webkit-background-clip: text; background-clip: text; color: transparent;
           margin-right: .2rem; }
.live-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem;
             font-weight: 640; letter-spacing: .08em; text-transform: uppercase;
             color: var(--good); background: rgba(34,197,94,.12);
             padding: .2rem .55rem; border-radius: 100px; }
.an-head { font-size: 1.15rem; font-weight: 650; letter-spacing: -.022em; margin-bottom: .3rem; }
.an-sum { font-size: .88rem; color: var(--ink-2); margin: 0 0 1.1rem; max-width: 52rem; }
.an-metrics { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 1.1rem;
              padding-bottom: 1rem; border-bottom: 1px solid var(--hairline); }
.an-metric { display: flex; flex-direction: column; }
.an-metric b { font-size: 1.15rem; font-weight: 660; letter-spacing: -.025em; }
.an-metric span { font-size: .72rem; color: var(--muted); }
.an-legs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.an-leg { display: flex; gap: .6rem; padding: .7rem .8rem; border-radius: var(--r-md);
          background: rgba(255,255,255,.03); border: 1px solid var(--hairline); }
.an-leg-b { min-width: 0; }
.an-leg-t { font-size: .88rem; font-weight: 600; margin-bottom: .1rem; }
.an-leg-r { font-size: .8rem; color: var(--muted); margin: 0; }
@media (max-width: 780px) { .an-legs { grid-template-columns: 1fr; } }

.positions { display: flex; flex-direction: column; }
.pos { display: grid; grid-template-columns: 1.45fr 1fr 6rem 5.5rem; gap: 1rem;
       align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--hairline); }
.pos:last-child { border-bottom: none; }
.pos-id { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.pos-meta { display: flex; flex-direction: column; min-width: 0; }
.pos-name { font-weight: 600; font-size: .9rem; letter-spacing: -.012em; }
.pos-sub { font-size: .74rem; color: var(--muted); }
.pos-side { font-size: .62rem; font-weight: 660; letter-spacing: .07em; text-transform: uppercase;
            padding: .14rem .42rem; border-radius: 4px; margin-right: .35rem; }
.side-held { color: #7db4f2; background: rgba(57,135,229,.16); }
.side-borrowed { color: #f0a17a; background: rgba(217,89,38,.18); }
.pos-bar { position: relative; height: 18px; }
.pos-bar-fill { position: absolute; left: 0; top: 2px; height: 14px; border-radius: 0 3px 3px 0; }
.pos-alloc { text-align: right; font-variant-numeric: tabular-nums; font-weight: 620; font-size: .89rem; }
.pos-alloc small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted);
                   font-variant-numeric: normal; }
.pos-pnl { text-align: right; font-variant-numeric: tabular-nums; font-weight: 640; font-size: .92rem; }
.pos-pnl small { display: block; font-weight: 500; font-size: .72rem; }
.pnl-up { color: var(--good); }
.pnl-down { color: var(--critical); }

.activity { display: flex; flex-direction: column; }
.act { display: flex; gap: .75rem; align-items: baseline; padding: .6rem 0;
       border-bottom: 1px solid var(--hairline); }
.act:last-child { border-bottom: none; }
.act-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; }
.act-ok { background: var(--good); box-shadow: 0 0 8px rgba(34,197,94,.6); }
.act-up { background: var(--held); box-shadow: 0 0 8px rgba(57,135,229,.6); }
.act-neutral { background: var(--axis); }
.act-t { font-size: .86rem; font-weight: 580; }
.act-b { font-size: .82rem; color: var(--muted); }
.act-d { margin-left: auto; font-size: .72rem; color: var(--muted); white-space: nowrap; }

.exits { display: flex; flex-direction: column; }
.exit-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
            padding: .62rem 0; border-bottom: 1px solid var(--hairline); font-size: .86rem; }
.exit-row:last-child { border-bottom: none; }
.exit-amt { font-weight: 620; font-variant-numeric: tabular-nums; }
.exit-meta { font-size: .74rem; color: var(--muted); }
.pill { font-size: .64rem; font-weight: 640; letter-spacing: .06em; text-transform: uppercase;
        padding: .2rem .5rem; border-radius: 100px;
        background: rgba(250,178,25,.16); color: #f5c45e; }
.pill-done { background: rgba(34,197,94,.15); color: var(--good); }
.empty { font-size: .84rem; color: var(--muted); padding: .7rem 0; }

/* ── charts ──────────────────────────────────────────────────── */
.chart { width: 100%; display: block; overflow: visible; }
.chart-grid { stroke: var(--grid); stroke-width: 1; }
.chart-axis-text { fill: var(--muted); font-size: 11px; font-family: var(--font);
                   font-variant-numeric: tabular-nums; }
.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-hit { fill: transparent; cursor: crosshair; }
.chart-cursor { stroke: var(--axis); stroke-width: 1; }
.chart-wrap { position: relative; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 20;
  background: rgba(20,23,32,.92); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
  padding: .45rem .6rem; font-size: .78rem; line-height: 1.3;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.85); white-space: nowrap;
  transform: translate(-50%, -118%);
}
.chart-tip .tip-v { font-weight: 650; font-variant-numeric: tabular-nums; display: block; }
.chart-tip .tip-d { color: var(--muted); font-size: .72rem; }

/* ── modals ──────────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
                  background: rgba(3,4,7,.7); backdrop-filter: blur(7px);
                  -webkit-backdrop-filter: blur(7px); padding: 1rem; animation: fade .18s ease; }
/* A modal must never be taller than the screen it is shown on.
   The payment step is the tall one — QR, four detail rows, address, two copy
   buttons, a status block and a discard button — and with no height limit it
   simply overflowed the viewport in BOTH directions, because `place-items:
   center` splits the overflow above and below. The discard button was
   unreachable without zooming the browser out.
   100dvh, not 100vh: on mobile browsers vh is the height with the URL bar
   HIDDEN, so a vh-sized modal is taller than the visible page whenever the bar
   is showing — which is exactly when someone is reading it. */
.modal { position: relative; width: 100%; max-width: 410px;
         max-height: calc(100dvh - 2rem);
         display: flex; flex-direction: column;
         animation: pop .22s cubic-bezier(.2,.9,.3,1); animation-fill-mode: both; }

/* The scroll lives on the body, not on .modal, so the close button — absolutely
   positioned against .modal — stays put instead of scrolling away with the
   content. On a short modal nothing scrolls and nothing looks different. */
.modal-body { overflow-y: auto; overscroll-behavior: contain;
              padding: 1.8rem 1.7rem; }
.modal h2 { font-size: 1.25rem; margin-bottom: .25rem; }
.modal-sub { font-size: .85rem; margin-bottom: 1.2rem; }
.modal-x { position: absolute; top: .8rem; right: .9rem; border: none; background: transparent;
           font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer;
           padding: .15rem .3rem; border-radius: 7px; }
.modal-x:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.chips { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip { font: inherit; font-size: .84rem; font-weight: 550; padding: .46rem .85rem;
        border-radius: 100px; border: 1px solid rgba(255,255,255,.11);
        background: rgba(255,255,255,.04); color: var(--ink-2); cursor: pointer;
        transition: all .16s; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip-on { background: linear-gradient(135deg, var(--accent), var(--accent-2));
           border-color: transparent; color: #fff; }
.modal-label { display: flex; flex-direction: column; gap: .35rem; font-size: .8rem;
               font-weight: 550; color: var(--ink-2); margin-bottom: 1rem; }
.input-money { position: relative; display: flex; align-items: center; }
.input-money span { position: absolute; left: .85rem; color: var(--muted); font-size: .92rem; }
.input-money input { padding-left: 1.8rem; }
.modal-hint { font-size: .78rem; color: var(--muted); margin: -.4rem 0 .9rem; }

.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 200;
         padding: .75rem 1.25rem; border-radius: 100px; font-size: .86rem; font-weight: 550;
         color: var(--ink); background: rgba(20,23,32,.95);
         border: 1px solid rgba(255,255,255,.12);
         backdrop-filter: blur(12px); box-shadow: 0 14px 34px -10px rgba(0,0,0,.9);
         animation: pop .2s cubic-bezier(.2,.9,.3,1); }

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }

/* ── footer ──────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--hairline); background: rgba(255,255,255,.015); }
.footer-in { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem 2.4rem; }
.footer-brand { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.footer-disc { font-size: .78rem; max-width: 58rem; line-height: 1.55; color: var(--muted); margin: 0; }
.footer-disc strong { color: var(--ink-2); }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 3rem; }
  .stat-grid, .safety-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-wrap, .dash-top, .dash-split { grid-template-columns: 1fr; }
  /* Stacked, the two supporting stats sit side by side rather than as one
     tall column under a full-width chart. */
  .side-stats { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .flow { grid-template-columns: 1fr; gap: .7rem; }
  .flow-link { height: 26px; width: 2px; justify-self: center;
               background: linear-gradient(180deg, transparent, rgba(255,255,255,.14), transparent); }
  .flow-link span { top: 0; left: -2px !important; animation-name: travel-v; }
  @keyframes travel-v {
    0% { top: -6px; opacity: 0 } 15% { opacity: 1 } 85% { opacity: 1 } 100% { top: 100%; opacity: 0 }
  }
  .ai-div { display: none; }
}
@media (max-width: 640px) {
  .nav { width: calc(100% - 1rem); gap: .5rem; padding: .5rem .5rem .5rem .85rem; }
  .nav-actions { gap: .3rem; }
  .nav-actions .btn { padding: .5rem .8rem; font-size: .8rem; }
  .brand-text { font-size: .92rem; }

  /* iOS Safari zooms the whole page when a focused input is under 16px. */
  input[type=text], input[type=email], input[type=password], input[type=number] { font-size: 16px; }

  /* Comfortable touch targets. */
  .modal-x { min-width: 38px; min-height: 38px; display: grid; place-items: center; }
  .chip { padding: .55rem .95rem; }
  .dash-actions .btn { padding: .6rem 1rem; }

  .rate-row { grid-template-columns: 1.4fr 3.2rem; grid-template-areas: "name pct" "bar bar"; row-gap: .4rem; }
  .rate-name { grid-area: name; } .rate-pct { grid-area: pct; text-align: right; }
  .rate-bar { grid-area: bar; } .rate-role { display: none; }
  .rate-axis-note { margin-left: 0; }
  .pos { grid-template-columns: 1fr 5.2rem; grid-template-areas: "id pnl" "bar alloc"; row-gap: .45rem; }
  .pos-id { grid-area: id; } .pos-pnl { grid-area: pnl; }
  .pos-bar { grid-area: bar; } .pos-alloc { grid-area: alloc; }
  .side-stats { grid-template-columns: 1fr 1fr; }
  .btn-lg { padding: .72rem 1.2rem; }
  .fee-figure { font-size: 3.2rem; }

  /* The two-column comparison stops working once the columns are ~140px:
     stack each pair instead, keeping the old→new reading order. */
  .vs { padding: .4rem 1.1rem 1rem; }
  .vs-row { grid-template-columns: 1fr; gap: .2rem; padding: .8rem 0; }
  .vs-a { text-align: left; font-size: .84rem; text-decoration: line-through;
          text-decoration-color: rgba(255,255,255,.22); }
  .vs-b { font-size: .92rem; }
  .vs-mid { display: none; }
  .vs-head { display: none; }

  /* The banner's three columns don't survive a phone: stack, and let the
     actions go full width so they stay comfortable tap targets. */
}

/* Very small phones (SE-class): drop the secondary nav link so the header
   never overflows. Sign-in is still reachable from the register screen. */
@media (max-width: 390px) {
  .nav-actions .btn-ghost[data-public] { display: none; }
  .hero-card-foot { gap: 1rem; }
  .stat-value { font-size: 1.55rem; }
  main { padding-left: .75rem; padding-right: .75rem; }
  .panel, .value-card, .rate-card, .hero-card { padding-left: 1.1rem; padding-right: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ── payment state ──────────────────────────────────────────────────────────
   A deposit is confirmed on a chain, not by a button, so these components
   exist to show payment state honestly: what has been seen, how deep it is
   buried, and what is still outstanding. Nothing here claims a payment is
   done early. */

.sp-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.sp-bar > span { display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg,#ffc454,#7ee0a8); transition: width .6s ease; }
.btn-sm { padding: .34rem .7rem; font-size: .8rem; }
.modal-wide { max-width: 620px; }

.pay-grid { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; margin: 1rem 0; }
.pay-qr { background: #fff; padding: .5rem; border-radius: 12px; align-self: start; line-height: 0; }
.pay-qr img { width: 168px; height: 168px; display: block; image-rendering: pixelated; }
.pay-detail { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.pay-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; }
.pay-row span { color: var(--ink-2); }
.pay-row strong { font-variant-numeric: tabular-nums; }
.pay-addr-label { display: block; font-size: .76rem; color: var(--ink-2); margin-top: .35rem; }
.pay-addr {
  display: block; margin-top: .25rem; padding: .5rem .6rem; border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem;
  line-height: 1.45; word-break: break-all; color: var(--ink);
  border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.25); user-select: all;
}
.pay-copy { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }

.pay-status {
  display: flex; align-items: flex-start; gap: .65rem; padding: .75rem .9rem;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); margin-bottom: .5rem;
}
.ps-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: .35rem; flex: none;
  background: var(--ink-2); }
.ps-pending, .ps-unknown { background: #8a94a6; }
.ps-mempool, .ps-confirming { background: #ffc454; }
.ps-settled { background: #7ee0a8; }
.ps-underpaid, .ps-overpaid { background: #ff9f43; }
.ps-expired, .ps-reorged { background: #ff6b6b; }
.ps-body strong { display: block; font-size: .9rem; }
.ps-body p { margin: .15rem 0 0; font-size: .82rem; color: var(--ink-2); }
.pay-note { font-size: .78rem; color: var(--ink-2); line-height: 1.5; margin: .7rem 0 .9rem; }

@media (max-width: 560px) {
  .pay-grid { grid-template-columns: 1fr; }
  .pay-qr { justify-self: center; }
}

.pay-foot { display: flex; gap: .5rem; }
.pay-foot .btn { flex: 1; }
.btn-danger { color: #ff8b8b; border-color: rgba(255,107,107,.3); }
.btn-danger:hover { background: rgba(255,107,107,.1); border-color: rgba(255,107,107,.5); }
.pay-discard-note { font-size: .74rem; color: var(--ink-2); text-align: center; margin: .5rem 0 0; }
.ps-cancelled { background: #8a94a6; }

/* ── the segregated book ───────────────────────────────────────────────────── */
.ledger-card { padding: 1rem 1.2rem; margin-bottom: .85rem; }
.lc-head { display: flex; align-items: center; justify-content: space-between; }
.lc-head h3 { margin: 0; font-size: .95rem; }
.lc-totals { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
.lc-tot { padding: .6rem .8rem; border-radius: 10px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08); }
.lc-k { display: block; font-size: .74rem; color: var(--ink-2); }
.lc-k em { font-style: normal; color: #7ee0a8; }
.lc-v { display: block; font-size: 1.1rem; font-weight: 600; margin-top: .15rem;
  font-variant-numeric: tabular-nums; }
.lc-entries { margin-top: .9rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: .7rem; }
.lc-sec { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2); margin: .7rem 0 .35rem; font-weight: 600; }
.lc-sec:first-child { margin-top: 0; }
.lc-row { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .6rem;
  padding: .3rem 0; font-size: .82rem; align-items: baseline; }
.lc-when { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lc-memo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.lc-amt.pos { color: #7ee0a8; }
.lc-amt.neg { color: #ff8b8b; }
.st-live { font-style: normal; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .08em; color: #7ee0a8; border: 1px solid rgba(126,224,168,.4);
  border-radius: 4px; padding: .05rem .3rem; margin-left: .35rem; vertical-align: middle; }
@media (max-width: 560px) { .lc-totals { grid-template-columns: 1fr; } }

/* ── the client's own switches ──────────────────────────────────────────────
   Two controls that belong to the client: whether the engine may open anything
   new, and how much of their balance it may use. They sit above the positions
   table because they govern what appears in it, and they are styled as a plain
   settings card rather than a highlight — a control someone reaches for should
   look reachable, not urgent. */

.ctrl-card { padding: .35rem 1.15rem; margin-bottom: .85rem; }
.ctrl-row { display: flex; align-items: center; gap: 1.25rem; padding: .95rem 0; }
.ctrl-row + .ctrl-row { border-top: 1px solid var(--glass-brd); }
.ctrl-main { flex: 1; min-width: 0; }
.ctrl-label { display: flex; align-items: center; gap: .55rem; }
.ctrl-label strong { font-size: .92rem; font-weight: 600; }
.ctrl-state { font-size: .72rem; font-weight: 600; letter-spacing: .04em;
              text-transform: uppercase; padding: .16rem .5rem; border-radius: 100px;
              color: var(--ink-2); background: rgba(255,255,255,.06);
              border: 1px solid var(--glass-brd); font-variant-numeric: tabular-nums; }
.ctrl-on  { color: #7ee0a8; background: rgba(126,224,168,.12);
            border-color: rgba(126,224,168,.3); }
.ctrl-off { color: #ffc454; background: rgba(255,196,84,.12);
            border-color: rgba(255,196,84,.3); }
/* The shield actually firing is not the same as the shield being switched on,
   so it does not borrow the green "on" chip. */
.ctrl-warn { color: #ff9d7a; background: rgba(255,157,122,.14);
             border-color: rgba(255,157,122,.38); }
.ctrl-hint { font-size: .8rem; color: var(--muted); margin: .3rem 0 0; line-height: 1.45;
             max-width: 44ch; }
.ctrl-foot { font-size: .78rem; color: var(--muted); margin: 0 0 .9rem; }

.ctrl-input { display: flex; align-items: center; gap: .4rem; flex: none; }
.ctrl-cur { color: var(--muted); font-size: .88rem; }
.ctrl-input input {
  width: 7.5rem; padding: .48rem .6rem; border-radius: 10px; font: inherit;
  font-size: .88rem; font-variant-numeric: tabular-nums; text-align: right;
  color: var(--ink); background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-brd);
}
.ctrl-input input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A real switch, not a checkbox with a label. It is the single most consequential
   control on the page, so its state has to be readable at a glance and from
   across the room. */
.switch {
  flex: none; width: 46px; height: 26px; padding: 0; border-radius: 100px;
  position: relative; cursor: pointer; transition: background .2s, border-color .2s;
  background: rgba(255,255,255,.09); border: 1px solid var(--glass-brd);
}
.switch:disabled { opacity: .55; cursor: default; }
.switch-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ink-2);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), background .2s;
}
.switch.is-on { background: rgba(126,224,168,.28); border-color: rgba(126,224,168,.5); }
.switch.is-on .switch-knob { transform: translateX(20px); background: #7ee0a8; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .ctrl-row { flex-wrap: wrap; gap: .7rem; }
  .ctrl-input { width: 100%; }
  .ctrl-input input { flex: 1; width: auto; }
}

/* ── risk & control center ─────────────────────────────────────────────────
   The slider scales the engine's book onto this account. It never changes
   what the engine decides to hold, and the copy says so. */
.risk-card { padding: 1.1rem 1.25rem; margin-bottom: .85rem; }
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rc-head h3 { margin: 0; font-size: .95rem; }
.rc-sub { margin: .2rem 0 0; font-size: .8rem; color: var(--ink-2); }
.rc-eff { text-align: right; flex: none; }
.rc-k { display: block; font-size: .7rem; color: var(--ink-2); }
.rc-v { display: block; font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.rc-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; margin-top: 1rem; }
.rc-field { min-width: 0; }
.rc-label { display: flex; justify-content: space-between; align-items: baseline;
  font-size: .78rem; color: var(--ink-2); margin-bottom: .5rem; }
.rc-out { font-size: 1.05rem; font-weight: 650; color: var(--ink);
  font-variant-numeric: tabular-nums; }

.rc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 6px; background: linear-gradient(90deg,#3987e5,#7ee0a8 55%,#d95926);
  outline: none; cursor: pointer; }
.rc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 3px solid #11141c; box-shadow: 0 1px 6px rgba(0,0,0,.5); cursor: grab; }
.rc-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.rc-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid #11141c; box-shadow: 0 1px 6px rgba(0,0,0,.5);
  cursor: grab; }
.rc-slider:focus-visible { box-shadow: 0 0 0 3px rgba(57,135,229,.4); }
.rc-scale { display: flex; justify-content: space-between; font-size: .68rem;
  color: var(--ink-2); margin-top: .35rem; }
.rc-note { font-size: .74rem; color: var(--ink-2); margin: .5rem 0 0; line-height: 1.45; }
.rc-select { width: 100%; padding: .55rem .7rem; border-radius: 9px; font-size: .85rem;
  color: var(--ink); background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14); }
.rc-select:focus-visible { outline: none; border-color: #3987e5; }
.rc-apply { font-size: .74rem; color: var(--ink-2); margin: .9rem 0 0;
  padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.07); }

/* ── the client's own positions ────────────────────────────────────────── */
.book-card { padding: 1.1rem 1.25rem; margin-bottom: .85rem; }
.bk-head { display: flex; justify-content: space-between; align-items: baseline; }
.bk-head h3 { margin: 0; font-size: .95rem; }
.bk-tot { text-align: right; }
.bk-k { font-size: .7rem; color: var(--ink-2); margin-right: .4rem; }
.bk-v { font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.bk-grid { margin-top: .8rem; display: flex; flex-direction: column; gap: .4rem; }
/* Six columns: pair, four figures, and the close button. One shared template
   drives both the heading row and every position row, so a column cannot drift
   out of alignment with its own label.

   NOTE: this rule was missing its closing brace, which made the CSS parser
   swallow every rule that followed it — to the end of the file. The positions
   card, the AI reason lines, the practice banner and the close buttons were all
   rendering unstyled, which is what made the panel look like a wall of text. */
/* Every column is sized explicitly — no `auto`, no `min-content`. The heading
   row and the position rows are separate grid containers, so an intrinsically
   sized column resolves against different content in each: `auto` on the last
   column was the Close button's width in a row and zero in the heading, which
   widened every proportional column above it and slid "Profit / loss" to the
   right of the figures it labels. A fixed track resolves identically in both,
   and stops the grid reflowing when the button swaps to "…" mid-close. */
.bk-cols, .bk-row {
  display: grid;
  /* Seven tracks since the Stop column arrived. Every one is explicitly sized:
     these are two separate grid containers, so an intrinsic track would measure
     different content in each and the headings would drift off their columns.
     The numeric tracks are capped rather than open-ended — a 1fr track on a
     wide screen stretched the P&L figure until its sign and its digits sat an
     inch apart, which is how the column ended up reading "+$      3.44". */
  grid-template-columns:
    minmax(7.5rem, 1.1fr)      /* pair + side           */
    minmax(3.5rem, .6fr)       /* lots                  */
    minmax(5rem, .8fr)         /* entry                 */
    minmax(5rem, .8fr)         /* now                   */
    minmax(5.5rem, .85fr)      /* stop                  */
    minmax(7rem, 1fr)          /* profit / loss         */
    3.6rem;                    /* close                 */
  gap: .2rem .8rem; align-items: center;
}
.bk-cols { padding: 0 0 .4rem; font-size: .64rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid rgba(255,255,255,.07); margin-top: .9rem; }
.bk-col-r { text-align: right; }
/* Numeric columns read right-aligned so magnitudes line up digit-for-digit —
   with tabular figures, 0.70 sits exactly under 158.81. */
.bk-col-n { text-align: right; }
.bk-num { text-align: right; align-items: flex-end; }
.bk-sym { display: flex; align-items: center; gap: .4rem; min-width: 0; flex-wrap: wrap; }
.bk-sym strong { font-variant-numeric: tabular-nums; }
.bk-side { font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  padding: .1rem .3rem; border-radius: 4px; }
.bk-buy { color: #7ee0a8; border: 1px solid rgba(126,224,168,.4); }
.bk-sell { color: #ff9f43; border: 1px solid rgba(255,159,67,.4); }
.bk-cell { display: flex; flex-direction: column; min-width: 0; }
.bk-cell strong { font-size: .84rem; font-variant-numeric: tabular-nums; }
/* Percent move sits under the money figure — the same fact in the other unit,
   so it shares the cell instead of taking a column of its own. */
/* The P&L cell stacks the figure over its percentage move, both right-aligned
   against the same edge. Previously the percentage floated to the left of the
   cell on its own line, which read as a stray number belonging to nothing. */
.bk-pnl-cell {
  display: flex; flex-direction: column; align-items: flex-end; gap: .05rem;
  text-align: right;
}
.bk-pnl-cell strong { font-size: .9rem; }

/* Accounting alignment for every P&L figure, open and closed.
   Right alignment on its own only lines up the DECIMAL POINT: in a column of
   −$31.07 / −$22.91 / +$4.28 the profit carries one digit fewer, so its "+$"
   sat a character right of the losses' "−$". Pinning the sign+currency to a
   fixed slot and giving the digits a fixed right-aligned box lines up all
   three — sign, dollar, decimal — down the whole column. The min-width holds
   to five figures ($9,999.99); beyond that the group grows leftward and the
   right edge still holds, which is the correct way for it to degrade. */
/* inline-flex, NOT flex: a flex child of the grid track stretched to the full
   column and pushed the sign away from its digits. */
.pnl-fig { display: inline-flex; justify-content: flex-end; align-self: flex-end;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Sized to the figures this column actually holds. A slot much wider than the
   numbers reads as a gap between the sign and its digits rather than as
   alignment; these widths still line up four-figure amounts against two. */
.pnl-sig { width: 1.05em; flex: none; text-align: left; }
.pnl-amt { min-width: 3.1em; text-align: right; }
.bk-crow .pnl-sig { width: .95em; }
.bk-move { font-size: .66rem; font-variant-numeric: tabular-nums; opacity: .75; }
.pos { color: #7ee0a8; } .neg { color: #ff8b8b; }
.bk-empty { font-size: .84rem; color: var(--ink-2); margin: .9rem 0 0; }

/* Engine status strip. Deliberately plain text rather than an icon: a halt is
   information the client should be able to read, not decode. */
.bk-engine { display: flex; align-items: flex-start; gap: .55rem; margin: .9rem 0 .2rem;
  padding: .5rem .7rem; border-radius: 9px; font-size: .78rem; color: var(--ink-2);
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.bk-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none;
  background: var(--ink-2); }
.bk-dot-live { background: #7ee0a8; box-shadow: 0 0 0 3px rgba(126,224,168,.15); }
.bk-dot-hold { background: #ffd479; box-shadow: 0 0 0 3px rgba(255,212,121,.15); }
.bk-dot-warn { background: #ffb066; box-shadow: 0 0 0 3px rgba(255,176,102,.15); }
.bk-dot-stop { background: #ff8b8b; box-shadow: 0 0 0 3px rgba(255,139,139,.15); }
.bk-note { font-size: .6rem; font-weight: 640; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2); padding: .1rem .35rem;
  border: 1px solid rgba(255,255,255,.14); border-radius: 5px; cursor: help; }
.bk-foot { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: .9rem;
  padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.07);
  font-size: .78rem; color: var(--ink-2); }
.bk-foot strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.bk-closed { margin-top: .8rem; }
.bk-closed summary { font-size: .8rem; color: var(--ink-2); cursor: pointer; }
/* Closed positions: one shared template for the heading row and every data
   row — the same discipline as the open table above, and for the same reason:
   two grids can only stay aligned when they resolve identical tracks. */
.bk-ccols, .bk-crow {
  display: grid;
  grid-template-columns: 5.2rem minmax(6.6rem, 8rem) 3.4rem minmax(0, 1fr)
                         minmax(4.6rem, 6rem);
  gap: .35rem .7rem; align-items: center;
}
.bk-ccols { padding: .55rem 0 .3rem; font-size: .64rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid rgba(255,255,255,.07); }
.bk-crow { padding: .32rem 0; font-size: .78rem;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255,255,255,.04); }
/* The closed table's P&L is the last track; the figure right-aligns inside it
   with the same pinned-sign treatment as the open table above. */
.bk-crow .pnl-fig { justify-self: end; font-size: .78rem; }
.bk-crow .pnl-amt { min-width: 3.6em; }
.bk-cdate { color: var(--ink-2); font-size: .72rem; }
.bk-csym { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.bk-cpx { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* Thirty closed rows should scroll inside the card, not stretch the page. */
#bk-closed-list { max-height: 336px; overflow-y: auto; }

/* Narrow screens stack, so a heading row cannot line up with anything. It is
   hidden and each cell states its own label instead — the only place the
   captions are worth repeating. */
@media (max-width: 760px) {
  .rc-grid { grid-template-columns: 1fr; }
  .bk-cols { display: none; }
  .bk-row { grid-template-columns: 1fr 1fr 1fr; row-gap: .5rem; }
  .bk-sym { grid-column: 1 / -1; }
  .bk-cell::before { content: attr(data-k); font-size: .64rem; color: var(--ink-2); }
  .bk-pnl-cell { text-align: left; }
  .bk-close { grid-column: 3; justify-self: end; }
  /* Stacked cells read top-down on a phone; right-alignment only helps when
     numbers share a column, which they no longer do. */
  .bk-num { text-align: left; align-items: flex-start; }
  .bk-ccols { display: none; }
  .bk-crow { grid-template-columns: 1fr auto; row-gap: .15rem; }
  .bk-cdate { grid-column: 1 / -1; }
  .bk-cpx { grid-column: 1 / -1; }
}

/* Apply is explicit. An earlier build saved on every slider movement, which
   changed the account with no moment of intent and no way to back out. */
.rc-actions { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1rem; padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.07); flex-wrap: wrap; }
.rc-status { font-size: .78rem; color: var(--ink-2); }
.rc-status.rc-dirty { color: #ffc454; font-weight: 600; }
.rc-btns { display: flex; gap: .45rem; }
.rc-btns .btn:disabled { opacity: .45; cursor: not-allowed; }
.bk-sub { margin: .2rem 0 0; font-size: .78rem; color: var(--ink-2); max-width: 46ch; }
.panel-hint { font-size: .8rem; color: var(--ink-2); margin: 0 0 .6rem; line-height: 1.5; }
.panel-hint strong { color: var(--ink); }

/* ── footer nav ────────────────────────────────────────────────────────────── */
.footer-top { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.footer-links { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.footer-links a { font-size: .84rem; color: var(--ink-2); text-decoration: none;
  transition: color .15s; }
.footer-links a:hover { color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; }

/* ── content pages ────────────────────────────────────────────────────────── */
.page { max-width: 760px; margin: 0 auto; padding: 2.6rem 1.1rem 3.5rem; }
.page-narrow { max-width: 560px; }
.page h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15;
  margin: .5rem 0 .9rem; }
.page h2 { font-size: 1.05rem; margin: 2rem 0 .6rem; }
.page p { line-height: 1.7; margin: 0 0 .9rem; color: var(--ink-2); }
.page-lede { font-size: 1.05rem; color: var(--ink); }
.page a { color: #6fb0ff; }
.page-list { margin: 0 0 1rem; padding-left: 1.1rem; }
.page-list li { line-height: 1.7; margin-bottom: .5rem; color: var(--ink-2); }
.page-list strong, .page p strong { color: var(--ink); }
.page-foot { margin-top: 2rem; padding-top: 1rem; font-size: .82rem;
  border-top: 1px solid rgba(255,255,255,.08); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* Marks a section only the operator can complete. Loud on purpose — a legal
   page carrying invented details is worse than one that admits a gap. */
.page-fill { border-left: 3px solid #ffc454; background: rgba(255,196,84,.07);
  padding: .7rem .9rem; border-radius: 0 8px 8px 0; color: var(--ink) !important; }

/* ── the contact form ─────────────────────────────────────────
   These three classes are used by the contact form and were never written,
   so the card drew a border from .glass and nothing inside it had padding,
   spacing or a block-level label. The form is one column of fields; let the
   grid own the spacing rather than margins on each label. */
.card { padding: 1.5rem 1.4rem; border-radius: var(--r-lg); }
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .38rem; min-width: 0; }
.field > span { font-size: .82rem; font-weight: 550; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; box-sizing: border-box; padding: .62rem .75rem; border-radius: 9px;
  font: inherit; font-size: .92rem; color: var(--ink);
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); }
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }
.field input:focus-visible, .field select:focus-visible,
.field textarea:focus-visible { outline: none; border-color: #3987e5;
  box-shadow: 0 0 0 3px rgba(57,135,229,.22); }
.form .form-error { margin: 0; }
.form .field-note { margin: 0; }

@media (max-width: 560px) { .card { padding: 1.15rem 1rem; } }

.sent-note { padding: 1.2rem 1.4rem; border-radius: 14px; text-align: center;
  border: 1px solid rgba(126,224,168,.3); background: rgba(126,224,168,.07); }
.sent-note strong { display: block; margin-bottom: .3rem; }
.sent-note p { margin: 0; font-size: .88rem; color: var(--ink-2); }
.field-note { font-size: .76rem; color: var(--ink-2); margin: .8rem 0 0;
  text-align: center; line-height: 1.5; }
.page textarea { width: 100%; padding: .6rem .75rem; border-radius: 9px;
  font: inherit; font-size: .9rem; color: var(--ink); resize: vertical;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); }
.page textarea:focus-visible { outline: none; border-color: #3987e5; }

.bk-engine-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.bk-dot { margin-top: .35rem; }

/* Who decided, as labelled chips rather than a sentence. Each chip says what it
   is, so nothing has to be parsed out of a run-on line of model ids. */
.bk-engine-meta { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { font-size: .64rem; letter-spacing: .03em; color: var(--ink-2);
  padding: .12rem .4rem; border-radius: 5px; white-space: nowrap;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.chip b { color: var(--ink); font-weight: 620; }
/* A reviewer that changed or refused the analyst's book is the most important
   thing on this strip, so it is the one chip that is not grey. */
.chip-flag { color: #ffd479; border-color: rgba(255,212,121,.35);
  background: rgba(255,212,121,.07); }
.chip-flag b { color: #ffd479; }

/* The AI's reason for the position. This is what a client is paying for, so it
   gets a line of its own rather than being hidden in a hover tooltip. */
.bk-why { grid-column: 1 / -1; margin: .1rem 0 0; font-size: .74rem;
  line-height: 1.45; color: var(--ink-2); }
.bk-why span { display: inline-block; font-size: .6rem; font-weight: 640;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  border: 1px solid rgba(255,255,255,.14); border-radius: 5px;
  padding: 0 .3rem; margin-right: .45rem; vertical-align: 1px; }

.bk-close { justify-self: end; white-space: nowrap;
  font-size: .7rem; padding: .28rem .6rem;
  border-radius: 7px; cursor: pointer; color: var(--ink-2);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.bk-close:hover:not(:disabled) { color: #ff8b8b; border-color: rgba(255,139,139,.4); }
.bk-close:disabled { opacity: .5; cursor: default; }

/* A price that changes should be visible without being distracting. */
@keyframes tick-up   { from { background: rgba(126,224,168,.28); } to { background: transparent; } }
@keyframes tick-down { from { background: rgba(255,139,139,.28); } to { background: transparent; } }
.tick-up   { animation: tick-up   .7s ease-out; border-radius: 4px; }
.tick-down { animation: tick-down .7s ease-out; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .tick-up, .tick-down { animation: none; }
}


/* Practice-mode banner. Amber, not red: this is a state to understand, not an
   error, but it must never be mistaken for a funded account. */
.bk-practice { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: .9rem 0 .2rem; padding: .6rem .8rem; border-radius: 9px;
  font-size: .8rem; color: var(--ink-2);
  background: rgba(255,212,121,.07); border: 1px solid rgba(255,212,121,.32); }
.bk-practice strong { color: #ffd479; font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; }
.bk-practice span { flex: 1; min-width: 14rem; }

/* Practice money is kept in its own fund class, so it is shown as its own
   thing: the card is edged in amber and every panel that carries a practice
   figure says so on its face. A trial balance that looks identical to a funded
   one is how somebody comes to believe they have withdrawable money. */
.is-practice { border-color: rgba(255,212,121,.28) !important;
  box-shadow: inset 3px 0 0 rgba(255,212,121,.55); }
.bk-tag { font-size: .58rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; vertical-align: 2px; margin-left: .45rem;
  padding: .12rem .38rem; border-radius: 5px; color: #ffd479;
  background: rgba(255,212,121,.09); border: 1px solid rgba(255,212,121,.34); }
.mode-pill { font-size: .6rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: .18rem .5rem; border-radius: 999px;
  color: #ffd479; background: rgba(255,212,121,.09);
  border: 1px solid rgba(255,212,121,.34); }
.lc-tot-practice .lc-k { color: #ffd479; }

.btn-practice { border-color: rgba(255,212,121,.4); color: #ffd479; }

/* ── payment method picker ──────────────────────────────────────────────────
   Shown before an invoice exists. The choice decides the address, so it is a
   deliberate step rather than a dropdown buried in a settings panel — an
   invoice raised on the wrong chain can only be discarded and redone. */
.pay-methods { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem;
  margin: .9rem 0 .2rem; }
.pm-label { flex: 0 0 100%; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: .1rem; }
.pm { flex: 1 1 10rem; display: flex; flex-direction: column; gap: .15rem;
  text-align: left; padding: .6rem .75rem; border-radius: 10px; cursor: pointer;
  color: var(--ink-2); background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12); transition: border-color .15s,
  background .15s; font: inherit; }
.pm:hover:not(:disabled) { border-color: rgba(255,255,255,.28); }
.pm-on { border-color: #3987e5; background: rgba(57,135,229,.1); color: var(--ink); }
.pm-name { font-size: .86rem; font-weight: 620; color: var(--ink); }
.pm-on .pm-name { color: #6fb0ff; }
.pm-net, .pm-speed { font-size: .68rem; color: var(--ink-2); }
/* A rail with no key configured is shown greyed rather than hidden: someone
   expecting to pay in USDT should be told it is not accepted yet, not left
   wondering whether the page failed to load. */
.pm:disabled { opacity: .45; cursor: not-allowed; }
.pm:disabled .pm-name { color: var(--ink-2); }

/* The BIP21 QR carries the amount; a TRON QR is the bare address, so the payer
   has to type the amount. Saying so is the difference between a careful payer
   and an underpaid invoice. */
.qr-note { margin: .5rem 0 0; font-size: .68rem; line-height: 1.45;
  color: #ffd479; max-width: 12rem; }

/* Actions pinned to the bottom of a scrolling modal.
   Sticky INSIDE .modal-body rather than a sibling of it, so it belongs to its
   own step and disappears with it — no JS to keep a separate footer in sync
   with which step is showing. Content scrolls underneath, and the gradient
   makes it obvious there is more above rather than looking like a hard edge. */
.modal-stick { position: sticky; bottom: 0; z-index: 1;
  margin: .8rem -1.7rem -1.8rem; padding: .8rem 1.7rem 1rem;
  /* Keyed to --bg so it reads as the panel fading out, not a grey bar pasted
     over it. Opaque enough at the bottom that text never shows through the
     buttons — a discard control with a sentence sliding under it is worse than
     no fade at all. */
  background: linear-gradient(to bottom, rgba(6,7,11,0), rgba(6,7,11,.93) 30%,
                              rgba(6,7,11,.985)); }
.modal-stick > :last-child { margin-bottom: 0; }

/* The scrollbar sits inside the rounded corner; round it to match rather than
   letting a square track cut the corner off. */
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16);
  border-radius: 100px; border: 3px solid transparent; background-clip: content-box; }
.modal-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28);
  background-clip: content-box; border: 3px solid transparent; }

/* ── payment screen: landscape ──────────────────────────────────────────────
   Stacked, this ran ~650px tall and overflowed a 1366x768 laptop, which is
   what forced the scrollbar. Two columns put the QR beside the details rather
   than above them and cut roughly 200px of height, so it fits without
   scrolling. The max-height on .modal stays as a floor-level safety net for
   very short viewports — it should simply never be reached now. */
.modal-pay { max-width: 700px; }
.pay-wide { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 1.15rem; margin: .9rem 0 .2rem; align-items: start; }
/* Wide enough for the QR it actually contains: 168px image + .5rem padding
   each side + border. The deposit modal narrows both together below. */
.pay-col-qr { display: flex; flex-direction: column; gap: .5rem; width: 186px; }
.modal-pay .pay-col-qr { width: 154px; }
.pay-col-info { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.modal-pay .pay-qr img { width: 136px; height: 136px; }
.modal-pay .pay-status { margin: 0; }

/* The QR note lives on the dark panel, NOT inside the white QR box where it
   was amber-on-white and effectively invisible. Amber is right for a warning;
   the background was the bug. */
.qr-note { margin: 0; font-size: .68rem; line-height: 1.4; color: #ffd479;
  padding: .4rem .5rem; border-radius: 7px; text-align: left;
  background: rgba(255,212,121,.09); border: 1px solid rgba(255,212,121,.3); }

/* Discarding is a real action with a real consequence, so it looks like one.
   It was a ghost button at body-text weight, which read as a caption. */
.pay-foot-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.pay-foot-row .pay-foot { margin: 0; flex: 1; min-width: 11rem; font-size: .72rem; }
.btn-discard { font-size: .8rem; font-weight: 600; padding: .5rem 1rem;
  border-radius: 9px; cursor: pointer; white-space: nowrap;
  color: #ff9b9b; background: rgba(255,139,139,.1);
  border: 1px solid rgba(255,139,139,.42); transition: all .15s; }
.btn-discard:hover:not(:disabled) { color: #fff; background: rgba(255,107,107,.85);
  border-color: rgba(255,107,107,.9); }
.btn-discard:disabled { opacity: .5; cursor: default; }

@media (max-width: 640px) {
  .pay-wide { grid-template-columns: 1fr; }
  .pay-col-qr { width: 100%; align-items: center; }
  .qr-note { text-align: center; }
}

/* One line, not three. On the payment screen every line of prose in the taller
   column is a line closer to the modal outgrowing the viewport again. */
.modal-sub-tight { margin-bottom: .4rem; font-size: .8rem; }
.modal-pay .pay-row { padding: .22rem 0; }
.modal-pay .pay-depth { margin-top: .35rem; }
.qr-note span { display: block; }
.qr-note span + span { margin-top: .3rem; padding-top: .3rem;
  border-top: 1px solid rgba(255,212,121,.22); }

/* ── loading skeletons ───────────────────────────────────────────
   The dashboard makes four API calls before it can paint a single number.
   Until they land every figure reads "—", which on a slow connection is
   indistinguishable from a page that has failed. These say "coming" without
   words. Keyed off one class on .dash, so no markup carries a loading state
   it would have to remember to clear. */

@keyframes sk-sweep { 0% { background-position: 100% 0; }
                    100% { background-position: -100% 0; } }

.sk-row { padding: .55rem 0; border-bottom: 1px solid var(--hairline); }
.sk-row:last-child { border-bottom: 0; }

.sk-bar,
.dash.is-loading .hero-figure,
.dash.is-loading .stat-value,
.dash.is-loading .value-delta,
.dash.is-loading .stat-foot,
.dash.is-loading .d-chart {
  display: block;
  color: transparent !important;
  border-radius: 7px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.035) 0%,
      rgba(255,255,255,.10)  50%,
      rgba(255,255,255,.035) 100%);
  background-size: 220% 100%;
  animation: sk-sweep 1.5s linear infinite;
}

/* Reserve the real height, or the page jumps when the numbers arrive. */
.sk-bar                             { height: 15px; width: 78%; }
.sk-row:nth-child(2n) .sk-bar       { width: 62%; }
.sk-row:nth-child(3n) .sk-bar       { width: 70%; }
.dash.is-loading .hero-figure       { height: 2.6rem; max-width: 12rem; }
.dash.is-loading .stat-value        { height: 1.35rem; max-width: 6rem; }
.dash.is-loading .value-delta       { height: .95rem; max-width: 9rem; margin-top: .45rem; }
.dash.is-loading .stat-foot         { height: .7rem;  max-width: 5rem; margin-top: .35rem; }
.dash.is-loading .d-chart           { min-height: 132px; }

/* Anything that would flash a placeholder glyph is simply held back. */
.dash.is-loading .chart-caption,
.dash.is-loading .mode-pill { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sk-bar,
  .dash.is-loading .hero-figure,
  .dash.is-loading .stat-value,
  .dash.is-loading .value-delta,
  .dash.is-loading .stat-foot,
  .dash.is-loading .d-chart { animation: none; background-position: 50% 0; }
}

/* ── how much of the book each position is ───────────────────────
   A row of five positions all in profit does not tell a client which one is
   actually carrying the account. The bar is scaled to the position's share of
   gross notional, not its lot count: one lot of USDJPY and one lot of EURUSD
   are not the same amount of money. Colour follows the held/borrowed data
   palette, and the percentage is written out as well — identity never rests
   on colour alone. */
.bk-weight {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .5rem;
  margin: .1rem 0 .15rem;
  height: 3px;
}
.bk-weight > span {
  height: 3px; border-radius: 2px; flex: none;
  background: var(--held);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.bk-w-sell > span { background: var(--borrowed); }
.bk-weight > em {
  font-style: normal; font-size: .58rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .bk-weight > span { transition: none; } }
@media (max-width: 560px) { .bk-weight > em { display: none; } }

/* ── Inter fine tuning ───────────────────────────────────────────
   Inter is drawn on a large x-height, so display sizes need negative tracking
   to stop headlines looking loose. Money uses the tabular figures and slashed
   zero it ships with: proportional digits make a column of prices ragged even
   when the CSS says right-aligned. */
h1, h2, .hero-figure, .stat-value, .bk-v { letter-spacing: -.021em; }
.hero-figure, .stat-value, .bk-num, .bk-v, .pnl-fig, .lc-amt, .bk-crow,
input[type=number], .money {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* ── the stop control on each row ────────────────────────────────────────
   A stop is the one number on the row a client can change, so it has to look
   changeable. Everything else on the row is a fact; this is a control. */
.stop-btn {
  font: inherit; font-size: .82rem; font-variant-numeric: tabular-nums;
  color: var(--ink); background: transparent;
  border: 1px dashed var(--glass-brd); border-radius: 6px;
  padding: .15rem .4rem; cursor: pointer; width: 100%;
  transition: border-color .16s, background .16s, color .16s;
}
.stop-btn:hover { border-color: var(--accent); background: var(--glass-a); }
.stop-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A position with no stop is not a neutral state — it is the one the client
   should notice — so it is written in words and coloured as a warning. */
.stop-btn.is-off { color: #ffd479; border-style: dotted; }

/* ── what this could cost you ────────────────────────────────────────────
   The honest disclosure that makes a 20x slider defensible: the downside in
   money, at the size actually on the book, on the same screen as the profit. */
.risk-box, .perf-box {
  margin-top: 1rem; padding: .9rem 1rem;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
}
.risk-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.risk-head h4 {
  margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .01em;
}
.risk-badge {
  margin-left: auto; font-size: .64rem; letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600;
  padding: .16rem .45rem; border-radius: 999px; white-space: nowrap;
}
.risk-badge.is-ok   { color: var(--good);     background: rgba(34,197,94,.12); }
.risk-badge.is-warn { color: #ffd479;         background: rgba(255,212,121,.12); }

.risk-grid, .perf-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .7rem .9rem;
}
.risk-grid > div, .perf-grid > div { display: flex; flex-direction: column; gap: .1rem; }
.rk-k { font-size: .68rem; color: var(--muted); line-height: 1.35; }
.rk-v {
  font-size: 1.02rem; font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
}
.rk-v.pos { color: var(--good); }
.rk-v.neg { color: var(--critical); }
.risk-note, .perf-line {
  margin: .8rem 0 0; font-size: .76rem; line-height: 1.5; color: var(--ink-2);
}
.perf-line { margin: 0 0 .8rem; color: var(--ink); }

/* ── positions table, tightened ──────────────────────────────────
   The rows were nearly 90px tall with the figures floating in the middle of
   the empty space. A position is one line of data; it should read as one. */
.bk-row {
  padding: .5rem 0 .45rem;
  border-bottom: 1px solid var(--hairline);
}
.bk-row:last-child { border-bottom: 0; }
.bk-cell strong { font-weight: 600; font-size: .88rem; }
.bk-sym strong { font-size: .95rem; letter-spacing: -.01em; }

/* The stop is a control, but it was drawn as a wide dashed box that read as an
   empty text input. Size it to its content and let the dashed edge be a hint
   rather than a frame. */
.bk-stop { justify-self: stretch; }
.stop-btn {
  width: auto; min-width: 100%; padding: .1rem .35rem;
  border-radius: 5px; font-size: .8rem;
  border: 1px solid transparent; border-bottom: 1px dashed var(--glass-brd);
  text-align: right;
}
.stop-btn:hover { border-color: var(--accent); background: var(--glass-a); }
.stop-btn.is-off { border-bottom-color: rgba(255,212,121,.45); }

/* The weight bar belongs under its own row as a thin rule, not as a full-width
   band that reads as a divider between positions. */
.bk-weight { margin: .3rem 0 0; grid-column: 1 / -1; }
.bk-weight > span { height: 2px; opacity: .55; }
.bk-weight > em { font-size: .55rem; opacity: .7; }

/* The reason line is supporting text, so it should not out-weigh the numbers. */
.bk-why { grid-column: 1 / -1; margin: .3rem 0 0; font-size: .72rem; }