/* ============================================================
   ZovianBinary — design system
   Tokens first. Light is the base palette, dark overrides.
   Indigo brand, green / red for profit and loss only. Curved edges.
   ============================================================ */

/* ---------------- page transitions ----------------
   Same-origin navigations cross-fade instead of blanking. Browsers that
   do not know this rule ignore it and navigate as before, so it is worth
   the four lines and costs nothing when unsupported.

   Kept short: a page change should feel immediate, not animated. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
  animation-timing-function: ease;
}

/* Someone who has asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

:root{
  /* neutrals — cool grey, biased slightly toward the blue accent.
     The page ground is off-white and panels are pure white, so cards,
     bars and dialogs sit *on* the page instead of dissolving into it.
     White-on-white was the whole problem with the old light mode. */
  /* The ground carries a little blue rather than being one step off
     white. Every surface above it is then a real step up, which is what
     was missing: a white card on a near-white page is not a card, and
     the whole screen read as one unlit sheet. */
  /* Light is flat and neutral: a warm near-white ground, white panels a
     hair above it, and thin grey lines doing the separating. No blue in
     the neutrals, so the brand blue is the only blue on the screen and
     reads as the brand rather than as the wallpaper. */
  --bg:#F5F6FA;
  --surface:#FFFFFF;
  --surface-2:#F4F5F9;
  --surface-3:#ECEEF4;
  --line:#E4E6EE;
  --line-soft:#EEF0F5;
  --text:#101225;
  --text-2:#464B63;
  /* Darker than it looks like it needs to be. The quiet text now sits
     on a blue ground rather than on white, and #64717F against that is
     3.9:1 — under the 4.5 small text wants. This clears it on every
     surface in the theme. */
  --muted:#676C85;                               /* 5.1:1 on white, 4.9:1 on the ground, 4.6:1 on surface-2 */

  /* brand + semantic
     Deeper than the dark theme's. A blue that reads well on a dark
     ground is thin and toy-like on a white one. */
  --accent:#4338CA;                              /* indigo text: 7.5:1 on white */
  --accent-soft:#EEF0FF;
  /* The blue a *filled* control is painted in, and the ink that goes on
     top of it. Separate from --accent because that one has to stay
     legible as text on white and so is pulled deliberately dark; this
     one never carries anything but white, so it can be the brand blue
     at full strength. A chosen toggle is the one thing on a light
     screen that should read as lit rather than merely outlined. */
  --accent-fill:#4F46E5;                         /* filled controls: white on it is 4.7:1 */
  --accent-fill-2:#4338CA;
  --accent-ink:#FFFFFF;
  --pos:#0B8A5A;
  --pos-soft:#E6F5EE;
  --neg:#D6334B;
  --neg-soft:#FDECEF;
  /* deep, saturated CTA colours - the buy / sell buttons only */
  --odd-fill:#E0405A;
  --odd-fill-2:#C52F48;
  --pos-deep:#0B8A5A;
  --neg-deep:#B0263D;
  --warn:#9C5A0B;
  --warn-soft:#FBF0DF;
  /* ---- the tick marker ----
     Its own colour, not --warn. Amber is the colour of a warning in this
     palette and it is used as one: a running contract, a practice
     account. The digit the tick just landed on is not a warning, it is
     the live figure, and orange was reading as "something is wrong with
     this number". Yellow, with near-black on top of it, because white
     on yellow is not a thing anyone can read. */
  /* ---- the scanner's own colour ----
     Rescan is not a warning, not a profit and not the primary action, so
     it can be none of the three colours that already mean those things.
     Violet is unused in this palette and reads as the machine rather
     than as money — the engine looking again. Kept for that one button,
     so it never becomes a fourth status colour by accident. */
  --again:#0E7C86;
  --again-soft:#E3F4F5;
  --tick:#4F46E5;
  --tick-line:#4F46E5;
  --tick-ink:#FFFFFF;
  /* The same yellow is illegible as small text on white, so text uses
     the dark end of it. 5.6:1 on the page ground. */
  --tick-text:#4338CA;
  --tick-soft:#EEF0FF;

  /* chart
     Its own ground, a shade off the white panels around it, so the
     trace sits in a frame rather than floating on the page. The fill
     under the line is accent-tinted, not grey: it is the one large area
     of colour on the screen and it is what stops a light trading
     terminal looking like a spreadsheet. */
  --chart-line:#5B50F0;                          /* one indigo line, fading wash under it */
  --chart-grid:#EEF0F5;
  --chart-fill:rgba(91,80,240,.16);
  --chart-axis:#676C85;
  --chart-bg:#FFFFFF;

  /* The ground a control sits on, and the slot inside it that is
     chosen. In light these carry blue, because a control drawn in white
     on a white card is an outline and nothing else — which is what made
     the tabs, the mode pill and the instrument chip disappear. In dark
     the surfaces already differ by value, so these resolve to what was
     there before. */
  --ctl:#FFFFFF;
  --ctl-line:#E4E6EE;
  --ctl-on:#FFFFFF;

  /* The banner across the top is the same dark ticket in both themes:
     it sits over the chart, it is gone in three seconds, and a white
     card flashing over a light screen is a flicker rather than a
     notice. */
  --flash-bg:#14152B;
  --flash-line:rgba(255,255,255,.08);
  --flash-muted:#A3A29D;
  --flash-name:#D6D5D0;
  --flash-win:#34D399;
  --flash-loss:#FB7185;

  --shadow:0 1px 2px rgba(17,19,48,.04), 0 8px 24px rgba(17,19,48,.06);
  --shadow-lg:0 24px 64px rgba(17,19,48,.18);

  --r-xl:20px;
  /* Square. The system is sharp-edged, and a rounded card in the middle
     of it reads as a different product. Kept as tokens rather than
     deleted so a corner can be reintroduced in one place if it is ever
     wanted — and so nothing has to be chased through the file again. */
  --r-lg:0px;
  --r:0px;
  --r-sm:0px;

  /* ---------------- type ----------------
     IBM Plex Sans, which is the same family as the IBM Plex Mono the
     figures are already set in. One family for the words and the numbers
     reads as engineered rather than assembled, which is what a terminal
     should look like.

     What it replaces: Instrument Sans, a light editorial face, paired
     with Instrument Serif for the headings. That pairing belongs on a
     magazine. A serif at weight 400 over a price chart is the single
     thing that made this look like a brochure about trading rather than
     a place to do it.

     `--display` is what the headings use now. It is the same family at a
     heavier weight with the tracking pulled in, which is where the
     weight people mean by "a trading font" actually comes from: not a
     different typeface, a heavier one, set tighter. */
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Kept pointing at the same stack so nothing that still asks for it
     falls back to Times. */
  --serif:var(--display);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --topbar-h:58px;
  /* The floating bar is 64px tall (50px slots + 6px padding either side
     + the border) and sits 10px off the bottom edge, so a page has to
     leave 74 clear. Anything less and the last row slides underneath. */
  --tabbar-h:78px;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D0E13;
    --surface:#14151C;
    --surface-2:#1B1C25;
    --surface-3:#22232E;
    --line:#262734;
    --line-soft:#1D1E28;
    --text:#ECEDF4;
    --text-2:#A3A6B8;
    --muted:#858A9E;

    --accent:#8F86FF;
    --accent-soft:#1E1C3D;
    --accent-fill:#5A4FF0;
    --odd-fill:#D63A52;
    --odd-fill-2:#BC2F46;
    --accent-fill-2:#4B40DE;
    --accent-ink:#FFFFFF;
    --pos:#22B07A;
    --pos-soft:#0F2A22;
    --neg:#F0566B;
    --neg-soft:#2E1820;
    --pos-deep:#05663F;
    --neg-deep:#93180F;
    --warn:#E0912F;
    --warn-soft:#2E2113;
    --again:#5FD3DB;
    --again-soft:#10292C;
    --tick:#FFD426;
    --tick-line:#E0B400;
    --tick-ink:#241A00;
    --tick-text:#F0CB4B;
    --tick-soft:#2E2610;

    --chart-line:#8F86FF;
    --chart-grid:#1F2029;
    --chart-fill:rgba(143,134,255,.14);
    --chart-axis:#7A7F94;
    --chart-bg:#0D0E13;

    --ctl:#181922;
    --ctl-line:#2A2B37;
    --ctl-on:#22232E;

    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 24px 64px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --bg:#0D0E13;
  --surface:#14151C;
  --surface-2:#1B1C25;
  --surface-3:#22232E;
  --line:#262734;
  --line-soft:#1D1E28;
  --text:#ECEDF4;
  --text-2:#A3A6B8;
  --muted:#858A9E;

  --accent:#8F86FF;
  --accent-soft:#1E1C3D;
  --again:#5FD3DB;
  --again-soft:#10292C;
  --accent-fill:#5A4FF0;
  --odd-fill:#D63A52;
  --odd-fill-2:#BC2F46;
  --accent-fill-2:#4B40DE;
  --accent-ink:#FFFFFF;
  --pos:#22B07A;
  --pos-soft:#0F2A22;
  --neg:#F0566B;
  --neg-soft:#2E1820;
  --pos-deep:#05663F;
  --neg-deep:#93180F;
  --warn:#E0912F;
  --warn-soft:#2E2113;
  --tick:#FFD426;
  --tick-line:#E0B400;
  --tick-ink:#241A00;
  --tick-text:#F0CB4B;
  --tick-soft:#2E2610;

  --chart-line:#8F86FF;
  --chart-grid:#1F2029;
  --chart-fill:rgba(143,134,255,.14);
  --chart-axis:#7A7F94;
  --chart-bg:#0D0E13;

  --ctl:#181922;
  --ctl-line:#2A2B37;
  --ctl-on:#22232E;

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 24px 64px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------------- base ---------------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
/* keep the gutter reserved so fixed bars never resize between pages */
html{scrollbar-gutter:stable}
/* The UA gives [hidden] display:none, but any author display rule beats
   it — .dropzone{display:flex} kept showing zones we had hidden. */
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}
svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.pos{color:var(--pos)} .neg{color:var(--neg)}
.hide{display:none!important}
.only-desk{display:none}

/* ---------------- app shell ---------------- */
.app{display:flex;flex-direction:column;min-height:100dvh}
main{flex:1;display:flex;flex-direction:column;width:100%}
body[data-chrome="app"] main{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
body.no-tabs main{padding-bottom:env(safe-area-inset-bottom)}


/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:0 12px;height:var(--topbar-h);
  background:var(--bg);border-bottom:1px solid var(--line-soft);
}
.topbar .spacer{flex:1}
.iconbtn{
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:var(--r-sm);color:var(--text-2);flex:none;
}
.iconbtn:hover{color:var(--text);background:var(--surface-3)}

/* Back is the one round control in a square system, and deliberately so:
   it is the only button whose job is "leave", and a shape nothing else
   shares is quicker to find than a label. The ring is what makes it read
   as a control rather than a stray arrow. */
.back-btn{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);color:var(--text-2);
}
.back-btn:hover{background:var(--surface-3);border-color:var(--line);color:var(--text)}
.back-btn:active{transform:scale(.94)}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto}
.brand-mark{
  width:28px;height:28px;border:1px solid var(--accent);border-radius:0;
  display:grid;place-items:center;color:var(--accent);
  font-family:var(--display);font-weight:600;font-size:15px;line-height:1;padding-bottom:2px;
}
.brand-name{font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
/* Two short lines instead of one long one: the kind sits over the
   amount, which keeps this well clear of the Deposit button. */
.acct{
  display:flex;align-items:center;gap:7px;padding:5px 8px;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:0;
}
.acct:hover{color:var(--text);background:var(--surface-3)}

/* Which account is being traded is the single most consequential thing
   on the screen, and a 6px dot is not enough to carry it — somebody
   glancing down mid-trade needs to know whether that number is money.
   Green is real, amber is practice, and the whole chip says so. */
.acct.real{
  background:color-mix(in srgb, var(--pos) 16%, transparent);
  border-color:color-mix(in srgb, var(--pos) 55%, transparent);
}
.acct.real:hover{background:color-mix(in srgb, var(--pos) 24%, transparent)}
.acct.real .acct-kind{color:var(--pos)}

.acct.demo{
  background:color-mix(in srgb, var(--warn) 16%, transparent);
  border-color:color-mix(in srgb, var(--warn) 55%, transparent);
}
.acct.demo:hover{background:color-mix(in srgb, var(--warn) 24%, transparent)}
.acct.demo .acct-kind{color:var(--warn)}

.acct-flag{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:15px;overflow:hidden;border:1px solid var(--line-soft);
}
.acct-flag svg{display:block;width:100%;height:100%}
.acct-dot{width:6px;height:6px;border-radius:50%;background:var(--pos);flex:none}
.acct.demo .acct-dot{background:var(--warn)}
.acct-dot.demo{background:var(--warn)}
.acct-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.acct-kind{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1}
.acct .bal{font-size:12.5px;color:var(--text);line-height:1.1}
.btn-primary{
  padding:9px 16px;background:var(--pos);color:#fff;border-radius:0;
  font-weight:600;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;
}
.btn-primary:hover{filter:brightness(1.07)}

/* ---------------- drawer ---------------- */
.scrim{
  position:fixed;inset:0;background:rgba(8,10,12,.55);backdrop-filter:blur(2px);
  z-index:50;opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(74vw,284px);z-index:60;
  background:var(--surface);border-right:1px solid var(--line-soft);
  border-radius:0;
  transform:translateX(-102%);transition:transform .26s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.open{transform:none}
.drawer-user{display:flex;align-items:center;gap:11px;padding:18px 14px}
.avatar{
  width:42px;height:42px;border-radius:50%;background:var(--accent-soft);
  border:1px solid var(--line);display:grid;place-items:center;
  color:var(--accent);font-family:var(--display);font-weight:600;font-size:17px;
}
.drawer-user b{display:block;font-weight:600;font-size:14px}
.drawer-user span{color:var(--muted);font-size:12px}
.drawer-sect{padding:15px 14px 6px}
.dnav{padding:0 8px 10px;display:flex;flex-direction:column;gap:2px}
.ditem{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 10px;color:var(--text-2);text-align:left;border-radius:var(--r);
}
.ditem:hover{background:var(--surface-2);color:var(--text)}
.ditem.active{background:var(--surface-3);color:var(--text)}
.ditem svg{opacity:.75;flex:none}
.ditem span{flex:1;font-size:13.5px}
.ditem .chev{opacity:.45}
.ditem.danger{color:var(--neg)}
.ditem.danger svg{opacity:.9}
.ditem.danger:hover{background:var(--neg-soft);color:var(--neg)}
.switch{
  width:38px;height:22px;border-radius:999px;background:var(--surface-3);
  border:1px solid var(--line);position:relative;flex:none;transition:background .18s ease;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--muted);transition:transform .18s ease,background .18s ease;
}
/* On means filled. The old on-state was a tinted track with a blue dot,
   which at this size is two pale shapes and a squint; solid blue with a
   white knob is the difference between reading it and checking it. */
.switch[aria-checked="true"]{
  background:var(--accent-fill);border-color:var(--accent-fill-2);
  box-shadow:0 1px 3px rgba(0,133,69,.35);
}
.switch[aria-checked="true"]::after{transform:translateX(16px);background:#fff}
.drawer-foot{margin-top:auto;padding:10px;border-top:1px solid var(--line-soft)}

/* ---------------- bottom tab bar ---------------- */
/* ---------------- the bottom bar ----------------
   A floating pill rather than a full-width shelf: icons only, with the
   active one sitting in a lit capsule. It is the one rounded thing in a
   square system, deliberately — it floats above the page instead of
   being part of it, and a shelf welded to the bottom edge reads as part
   of the page.

   The space it occupies is unchanged (--tabbar-h), so the trade dock and
   every page's bottom padding still land in the right place. */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);z-index:45;
  bottom:calc(env(safe-area-inset-bottom) + 10px);
  display:flex;align-items:center;gap:6px;
  height:auto;width:calc(100% - 24px);max-width:420px;
  padding:6px;border-radius:999px;
  background:var(--tabbar-bg);
  border:1px solid var(--tabbar-line);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(14px) saturate(1.4);
}
:root{--tabbar-bg:rgba(255,255,255,.92);--tabbar-line:rgba(31,41,51,.08)}
:root[data-theme="dark"]{--tabbar-bg:#14151C;--tabbar-line:rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--tabbar-bg:#14151C;--tabbar-line:rgba(255,255,255,.1)}
}
/* every slot is an identical box: the active state only repaints,
   it never changes a size, so the bar cannot shift between pages */
/* Every slot is the same capsule, and the active state only repaints
   inside it — the bar cannot resize between pages. */
/* The slots share the bar's width equally, so the spacing between them
   grows with the screen instead of leaving four icons huddled in the
   middle of a wide pill. */
.tabbar a{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  flex:1 1 0;min-width:0;height:50px;padding:0 4px;border-radius:999px;
  color:var(--muted);
}
/* the box is fixed so a solid glyph cannot nudge the label; the icons
   are Material Symbols on a 960 grid and carry their own optical
   padding, so 22 here matches the old 20px outline weight */
.tabbar .tb-ico{display:block;width:21px;height:21px;flex:none}
.tabbar .tb-ico svg{display:block}
/* Named. An icon alone is a guess for anyone who has not used the app
   before, and "Positions" is not a concept a receipt glyph conveys. */
.tabbar .tb-lab{
  display:block;font-style:normal;font-size:9px;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The lit capsule behind the active icon. Painted behind, at the size
   of the slot, so selecting one never changes a measurement. */
.tabbar a::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:transparent;transition:background .18s ease;
}
.tabbar a > *{position:relative;z-index:1}
/* The lit slot is filled, same as the mode toggle and the switch: on a
   near-white bar a tinted capsule is barely a state. One rule for the
   whole app — chosen things are painted blue and carry white. */
.tabbar a.active{color:var(--accent-ink)}
.tabbar a.active::before{
  background:var(--accent-fill);
  box-shadow:0 2px 8px rgba(0,133,69,.35);
}
.tabbar a.active .tb-ico{color:var(--accent-ink)}
.tabbar a:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
  .tabbar a::before{transition:none}
  .tabbar a:active{transform:none}
}

/* ---------------- terminal ---------------- */
/* The three contracts, and the app's own rule about chosen things:
   painted blue, carrying white — the same treatment as the tab bar, the
   mode toggle and the switch.

   It used to be the other way round. The strip carried blue and the
   chosen tab lifted out of it in white, which in light mode read as two
   unchosen tabs and one washed-out one: white is the page's own colour,
   so the selected tab was the one that looked least like a control. */
.ctabs{
  display:flex;overflow:hidden;
  background:var(--surface);border-bottom:1px solid var(--line-soft);
}
.ctabs::-webkit-scrollbar{display:none}
/* width:0 + flex-basis:0 + min-width:0 forces mathematically equal
   slices whatever the label length, and selecting one only changes
   colour, so the three never resize or shuffle */
.ctab{
  position:relative;
  flex:1 1 0;width:0;min-width:0;padding:9px 6px 15px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:11.5px;line-height:1.3;color:var(--muted);
  white-space:nowrap;overflow:hidden;background:none;
}
/* A hairline between them, so the three read as three choices rather
   than one run of words. Drawn short of the full height, which keeps it
   a separator and not a table. */
.ctab + .ctab::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;
  width:1px;background:var(--line-soft);
}
/* A separator drawn against a filled tab reads as a seam in it. */
.ctab.active::before,.ctab.active + .ctab::before{background:transparent}
.ctab span{overflow:hidden;text-overflow:ellipsis}
.ctab-ico{display:flex;flex:none;color:var(--muted)}
.ctab.active .ctab-ico{color:var(--accent)}
.ctab::after{
  content:"";position:absolute;left:50%;bottom:7px;
  width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:transparent;
}
.ctab:hover{color:var(--text-2)}
/* The deep fill, not the text blue: --accent is pulled dark so it stays
   legible as small text on white, and as a background it is muddy.
   --accent-fill-2 is the brand blue at full strength and never carries
   anything but white. */
.ctab.active{color:var(--accent-ink);background:var(--accent-fill-2)}
.ctab.active .ctab-ico{color:var(--accent-ink)}
.ctab.active::after{background:var(--accent-ink);opacity:.75}

.instrument{display:flex;align-items:center;gap:10px;padding:8px 14px 10px}
.inst-mark{
  width:32px;height:32px;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--line-soft);display:grid;place-items:center;color:var(--text-2);flex:none;
}
.inst-name{font-size:13.5px;font-weight:500}
.inst-price{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.inst-price .p{font-size:13px}
.inst-price .c{font-size:11.5px}
.inst-right{margin-left:auto}
.chip{
  display:inline-block;padding:5px 10px;border:1px solid var(--line);
  border-radius:999px;font-size:11px;color:var(--text-2);background:var(--surface)
}

/* ---- the pinned head ----
   On a phone the chart and the contract tabs hold their place and the
   whole of the rest of the terminal — digits, what is running, the
   ticket, the two buttons — scrolls under them as one piece. A trader
   watching a tick does not want the thing they are watching to leave
   the screen because they reached for the stake.

   Sticky rather than fixed: fixed would take it out of the flow and
   leave a hole the exact height of the chart at the top of the page,
   and every ancestor here would need a matching padding to fill it. */
.chart-pin{
  position:sticky;top:var(--topbar-h);z-index:30;background:var(--bg);
}

.chart-card{
  margin:0;border:none;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);border-radius:0;
  background:var(--chart-bg);overflow:hidden;position:relative;
}
/* The height here is the tall-phone case; the block near the foot of this
   file, "fitting a short phone", is what actually decides it. */
#chart{display:block;width:100%;height:288px;position:relative;z-index:1}

/* A world map sits behind the trace, filled in the text colour at a very
   low alpha so it reads as a watermark in either theme and never competes
   with the price line. currentColor means one asset, both themes. */
/* The map is a watermark, and at 2.5% it was one in name only: on a
   phone, and against the accent-tinted fill under the trace, it simply
   was not there. Enough to read as a map, not enough to compete with a
   price line. */
.chart-map{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:98%;height:auto;z-index:0;pointer-events:none;
  color:#1C1C1C;opacity:.05;
}
:root[data-theme="dark"] .chart-map{color:#EDECE8;opacity:.06}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .chart-map{color:#EDECE8;opacity:.06}
}
/* Lifted clear of the bottom edge. At 10px the last button sat on the
   card's border and read as half a control. */
.chart-tools{
  position:absolute;left:10px;bottom:26px;z-index:2;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface);
}
.chart-tools button{width:30px;height:30px;display:grid;place-items:center;color:var(--muted)}
.chart-tools button+button{border-top:1px solid var(--line-soft)}
.chart-tools button:hover{color:var(--text);background:var(--surface-2)}

/* all ten digits share one row - never a horizontal scroll */
.digits{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;padding:14px 10px 16px}
/* A cell is the circle plus the share under it. The share used to live
   inside the circle at 7.5px, which is smaller than anything is meant to
   be read at; outside, it has room to be legible. */
.dcell{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.digit{
  width:100%;max-width:38px;aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ctl-line);background:var(--ctl);
  font-family:var(--mono);font-size:12.5px;font-weight:500;line-height:1;
}
.dpct{font-style:normal;font-size:9.5px;color:var(--muted);font-family:var(--mono);line-height:1}
.dcell.hot .digit{border-color:var(--accent)}
.dcell.hot .dpct{color:var(--accent)}
/* ---- where the tick just landed ----
   This moves every second, and a tint was the wrong way to show
   something that only sits still for a moment: by the time the eye finds
   the shade it has gone. It lifts instead, with a triangle underneath
   pointing up at it — the arrow reads as the thing that pushed the
   digit up, which is exactly what happened.

   The amber is the arrow and the ring around the circle, nothing more.
   Filling the circle amber painted a tenth of the row a colour that
   means nothing about the trade, and it moved every second, so the row
   never settled. A border says the same thing and leaves the grid the
   one colour it should be — which also leaves green and red free to
   mean won and lost while a contract is running. */
.dcell{position:relative;transition:transform .12s ease}
.dcell.cur{transform:translateY(-5px)}
.dcell.cur .digit{
  border-color:var(--tick-line);border-width:2px;color:var(--text);font-weight:600;
}
.dcell.cur .dpct{color:var(--text);font-weight:600}
.dcell.cur::after{
  content:"";position:absolute;left:50%;translate:-50% 0;bottom:-9px;
  width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:6px solid var(--tick);
}

/* What the trader picked, which does not move on its own. */
.dcell.sel .digit{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent);
}
.dcell.sel .dpct{color:var(--accent);font-weight:600}
/* Both at once: the tick has landed on the barrier. The amber ring goes
   round the blue, rather than replacing it — two facts, two marks. */
.dcell.cur.sel .digit{
  border-color:var(--tick-line);border-width:2px;background:var(--accent-soft);color:var(--accent);
}

/* ---- while a contract is running ----
   The digit that just landed, said in the only terms that matter for
   the next few seconds: green if this tick is on the winning side of
   the open contract, red if it is not. Only ever on the live cell, and
   only while something is actually running, so the row is not a
   traffic light the rest of the time. The arrow stays amber throughout:
   it marks where the tick landed, which is true whatever the contract
   makes of it. */
/* Solid, not tinted: the whole circle turns green or red so the
   verdict reads from across the room. */
.dcell.cur.hit .digit,
.dcell.cur.sel.hit .digit{
  border-color:var(--pos);border-width:2px;background:var(--pos);color:#fff;font-weight:700;
  box-shadow:0 0 0 3px var(--pos-soft),0 4px 14px var(--pos-soft);
}
.dcell.cur.hit .dpct{color:var(--pos);font-weight:700}
.dcell.cur.hit::after{border-bottom-color:var(--pos)}
.dcell.cur.miss .digit,
.dcell.cur.sel.miss .digit{
  border-color:var(--neg);border-width:2px;background:var(--neg);color:#fff;font-weight:700;
  box-shadow:0 0 0 3px var(--neg-soft),0 4px 14px var(--neg-soft);
}
.dcell.cur.miss .dpct{color:var(--neg);font-weight:700}
.dcell.cur.miss::after{border-bottom-color:var(--neg)}

@media (prefers-reduced-motion:reduce){
  .dcell{transition:none}
  .dcell.cur{transform:none}
}

.panel{padding:2px 14px 12px;display:flex;flex-direction:column;gap:10px}
/* Auto / Manual, built like the bottom bar: a rounded track with a
   frosted capsule that slides under whichever one is chosen. It is the
   same gesture in the same shape, so the two read as one idea used
   twice rather than two different controls that happen to switch
   between things.

   The capsule is painted behind at the size of the slot, so choosing
   one never changes a measurement and nothing reflows.

   Curved here and square everywhere else is deliberate: the pill is the
   shape this app uses for "which of these", and cards stay sharp. */
.seg{
  display:flex;align-items:center;gap:4px;padding:4px;margin:6px 0 2px;
  border-radius:999px;
  background:var(--seg-bg);border:1px solid var(--seg-line);
  backdrop-filter:blur(14px) saturate(1.4);
}
/* The pill reads off the shared control tokens, so the mode switch, the
   contract tabs and the instrument chip all sit on one ground. */
/* The chosen slot is filled, not frosted. A white capsule on a pale
   blue track is legible but inert — on a light screen it reads as a
   raised edge and nothing more, and "which mode am I in" is the one
   question this control exists to answer. Filled in the brand blue with
   white ink, it answers it from across the room. */
:root{--seg-bg:var(--ctl);--seg-line:var(--ctl-line);--seg-on:var(--accent-fill);--seg-ink:var(--accent-ink)}
.seg button{
  position:relative;
  flex:1 1 0;width:0;min-width:0;text-align:center;padding:9px 0;
  font-size:12.5px;color:var(--muted);border-radius:999px;
}
/* The frosted capsule. Behind the label, never around it. */
.seg button::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:transparent;border:1px solid transparent;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.seg button > span{position:relative;z-index:1}
.seg button:hover{color:var(--text-2)}
.seg button.active{color:var(--seg-ink);font-weight:500}
.seg button.active::before{
  background:var(--seg-on);
  border-color:var(--accent-fill-2);
  /* The glow is the blue's own colour, so the capsule looks lit rather
     than dropped on top of the track. */
  box-shadow:0 1px 2px rgba(40,30,140,.24), 0 6px 16px rgba(79,70,229,.28);
}
@media (prefers-reduced-motion:reduce){ .seg button::before{transition:none} }
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cell{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:11px 8px;text-align:center;
}
.cell .label{display:block;margin-bottom:6px;font-size:9px}
.cell .v{font-family:var(--mono);font-size:15px}
.cell .v small{color:var(--muted);font-size:11px;margin-right:2px}

/* The one control on the terminal that is touched every trade, so it
   gets the ground the plain inputs get and the accent on its figure. */
.stake{
  display:flex;align-items:center;border:1px solid var(--line);
  border-radius:0;background:var(--surface-2);overflow:hidden;
}
:root[data-theme="dark"] .stake{background:var(--surface)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .stake{background:var(--surface)}
}
.stake:focus-within{border-color:var(--accent)}
.stake button{width:44px;height:44px;display:grid;place-items:center;color:var(--text-2)}
.stake button:hover{background:var(--surface-2);color:var(--text)}
.stake .f{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px}
.stake input{
  width:88px;background:none;border:none;outline:none;color:var(--text);
  text-align:right;font-family:var(--mono);font-size:17px;
}
.stake .cur{color:var(--muted);font-size:11px;letter-spacing:.1em}
/* The stake and the five top-ups are one control in two parts, and they
   were welded: the chip row started on the pixel the field ended on, so
   the whole thing read as one tall box with a number trapped at the top
   of it. A gap here, and a wider one between the chips. */
.stake-block{display:flex;flex-direction:column;gap:9px}
.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.quick button{
  padding:9px 0;border:1px solid var(--ctl-line);border-radius:0;
  background:var(--ctl);color:var(--text-2);font-family:var(--mono);font-size:12px;
}
.quick button:hover{border-color:var(--line);color:var(--text)}
.session{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);padding:0 2px}
.session .num{color:var(--text-2)}

/* sticky trade CTAs, above the tab bar */
/* Inset, with air between them. Edge to edge they read as one striped
   bar cut in half — a single control with two colours — when they are
   two opposite decisions, and at desktop width a full-bleed slab of
   saturated green is a lot of colour for a button. The gap is what says
   these are two things. */
.trade-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tbtn{
  /* The one other curved thing in a square system, with the bottom bar
     and the mode pill. These are pressed more than anything else on the
     screen and a softened corner reads as a key rather than a panel. */
  padding:11px 10px;border-radius:10px;text-align:center;color:#fff;
  box-shadow:0 1px 2px rgba(6,20,14,.18), 0 6px 16px rgba(6,20,14,.14);
  transition:transform .16s ease, box-shadow .16s ease;
}
.tbtn .t{font-size:14.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.tbtn .s{font-size:10px;margin-top:2px;font-family:var(--mono);opacity:.88}
/* Idle, the sub-line is two things at opposite ends of the button: what
   it pays, and the rate that is. Justified apart rather than centred,
   so the money starts where the eye already is and the percentage never
   drifts around as the figure changes width. */
.tbtn .s.payout{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:11px;opacity:1;padding:0 1px;margin-top:4px;
}
.tbtn .s .s-k{font-family:var(--sans);font-weight:500;opacity:.92;white-space:nowrap}
.tbtn .s .s-k b{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.tbtn .s .s-p{font-weight:600;font-variant-numeric:tabular-nums;opacity:.8;white-space:nowrap}
/* Narrow phones: the rate is the first thing to go. The payout is the
   figure somebody is actually reading. */
@media (max-width:359px){
  .tbtn .s .s-p{display:none}
  .tbtn .s.payout{justify-content:center}
}
.tbtn.even{background:var(--pos-deep)}
.tbtn.odd{background:var(--neg-deep)}
.tbtn:active{filter:brightness(1.08);transform:translateY(1px)}

/* The two buttons sit at the foot of the ticket and travel with it.
   They used to float above the tab bar, pinned, which meant the one
   part of the screen that is always the same was also the part
   covering whatever you had scrolled to. Now the top of the terminal
   is what holds still and everything below it, these included, moves
   together. */
.trade-dock{padding:12px 12px 2px;background:none}

/* ---------------- lists / settings rows ---------------- */
.list{
  margin:0 14px;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);overflow:hidden;
}
.list + .list{margin-top:14px}
.row{display:flex;align-items:center;gap:14px;padding:15px 16px;width:100%;text-align:left;color:inherit}
.row + .row{border-top:1px solid var(--line-soft)}
.row:hover{background:var(--surface-2)}
.row .ico{
  width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid var(--line-soft);display:grid;place-items:center;color:var(--text-2);flex:none;
}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-weight:500;font-size:13.5px}
.row .t span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.row .chev{color:var(--muted);flex:none}
.row.danger .t b{color:var(--neg)}
.row.danger .ico{color:var(--neg);background:var(--neg-soft);border-color:transparent}
.badge{
  font-size:10.5px;padding:4px 9px;border-radius:999px;letter-spacing:.04em;
  background:var(--surface-3);color:var(--text-2);
}
.badge.ok{background:var(--pos-soft);color:var(--pos)}
.badge.warn{background:var(--accent-soft);color:var(--accent)}
.badge.neg{background:var(--neg-soft);color:var(--neg)}

/* ---------------- markets ---------------- */
.mkt{display:flex;align-items:center;gap:14px;padding:14px 16px;width:100%}
.mkt + .mkt{border-top:1px solid var(--line-soft)}
.mkt .n{flex:1;min-width:0}
.mkt .n b{display:block;font-weight:500;font-size:13.5px}
.mkt .n span{font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.mkt .p{text-align:right;font-family:var(--mono);font-size:13px}
.mkt .p span{display:block;font-size:11px;margin-top:3px}

/* ---------------- page type ---------------- */
.page{padding:28px 20px 44px;width:100%;max-width:760px;margin:0 auto}
.page-kicker{color:var(--accent);margin-bottom:14px;display:block}
.page h1{
  font-family:var(--display);font-weight:600;font-size:31px;line-height:1.15;letter-spacing:-.022em;
  margin:0 0 16px;letter-spacing:-.01em;text-wrap:balance;
}
/* A section heading needs air above it far more than below: the gap is
   what tells you a new idea has started. */
.page h2{
  font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:46px 0 16px;
}
.page p{color:var(--text-2);margin:0 0 18px;max-width:64ch;line-height:1.78}
/* a paragraph that answers the block above it still needs a gap */
.stats + p,.cards + p{margin-top:24px}
.lede{font-size:16px;line-height:1.8;margin-bottom:6px!important}
.rule{height:1px;background:var(--line-soft);margin:36px 0 0}
.cards{display:flex;flex-direction:column;gap:14px}
.card{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:22px;
}
.card h3{margin:0 0 9px;font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.78;max-width:58ch}
.tool{display:flex;align-items:flex-start;gap:16px}
/* The icon gets a soft tile so the cards line up on a strong left edge
   instead of on ragged glyph shapes. */
.tool > svg{
  width:38px;height:38px;flex:none;padding:9px;box-sizing:border-box;
  border-radius:var(--r);background:var(--accent-soft);color:var(--accent);
}
.tool b{display:block;font-weight:600;font-size:14.5px;margin-bottom:7px;letter-spacing:-.005em}
.tool p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.78;max-width:56ch}
.tool .chip{margin-top:13px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:20px 18px;
}
.stat b{
  display:block;font-family:var(--mono);font-size:26px;font-weight:500;
  margin-bottom:10px;color:var(--text);letter-spacing:-.02em;
}
.stat span{font-size:12px;color:var(--muted);line-height:1.66;display:block}
.empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:64px 20px;text-align:center;
}
.empty svg{color:var(--line);margin-bottom:4px}
.empty b{font-weight:600;font-size:14px}
.empty span{color:var(--muted);font-size:12.5px}
/* Centred. A page title pinned to the left edge reads as the first item
   in the list below it; centred, it reads as the name of the screen. */
.page-head{padding:20px 18px 12px;text-align:center}
.page-head h1{font-family:var(--display);font-weight:600;font-size:25px;margin:0 0 5px;letter-spacing:-.022em}
.page-head p{color:var(--muted);font-size:13px;margin:0 auto;max-width:44ch}

/* ---------------- forms / auth ---------------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:12px;color:var(--text-2);font-weight:500}
/* A white input on a white card is an outline and nothing else. The
   field carries its own ground, one step down from the card, so it reads
   as somewhere to type before it is read at all. Dark mode keeps the
   panel colour, where the contrast already exists. */
.input{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);color:var(--text);outline:none;
}
:root[data-theme="dark"] .input{background:var(--surface)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .input{background:var(--surface)}
}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:var(--accent);background:var(--surface)}
:root[data-theme="dark"] .input:focus{background:var(--surface)}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .input{padding-right:44px}
.input-wrap button{position:absolute;right:6px;width:34px;height:34px;display:grid;place-items:center;color:var(--muted);border-radius:var(--r-sm)}
.hint{font-size:11.5px;color:var(--muted)}
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:14px;border-radius:var(--r);font-weight:600;font-size:14px;
}
.btn-fill{background:var(--accent);color:#fff}
:root[data-theme="dark"] .btn-fill{color:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-fill{color:#FFFFFF}}
.btn-fill:hover{filter:brightness(1.07)}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-pos{background:var(--pos);color:#fff}
.btn-neg,.btn-danger{background:var(--neg);color:#fff}
.btn-danger:hover{background:var(--neg-deep)}
.btn-danger[disabled]{opacity:.6}

.auth{
  min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:32px 20px 40px;max-width:420px;margin:0 auto;width:100%;
}
.auth .brand{margin:0 0 26px;justify-content:flex-start}
.auth h1{font-family:var(--display);font-weight:600;font-size:27px;margin:0 0 8px;letter-spacing:-.022em}
.auth > p{color:var(--muted);margin:0 0 24px;font-size:13.5px}
.auth form{display:flex;flex-direction:column;gap:16px}
.auth-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:0;padding:24px 22px;
}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11.5px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.auth-foot{text-align:center;margin-top:22px;font-size:13px;color:var(--muted)}
.auth-foot a{color:var(--accent);font-weight:500}
.link{color:var(--accent);font-size:12.5px;font-weight:500}
.checkline{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--muted);line-height:1.55}
.checkline input{margin-top:2px;accent-color:var(--accent);width:16px;height:16px}

.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp input{
  aspect-ratio:1;text-align:center;font-family:var(--mono);font-size:18px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  color:var(--text);outline:none;min-width:0;
}
.otp input:focus{border-color:var(--accent)}
.meter{display:flex;gap:5px;margin-top:2px}
.meter i{flex:1;height:3px;border-radius:2px;background:var(--surface-3)}
.meter i.on{background:var(--pos)}

/* ---------------- modal / sheet ---------------- */
.modal{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:18px;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.modal.open{opacity:1;pointer-events:auto}
.modal-bg{position:absolute;inset:0;background:rgba(8,10,12,.55);backdrop-filter:blur(2px)}
.modal-box{
  position:relative;width:100%;max-width:420px;background:var(--surface);
  border:1px solid var(--line);border-radius:0;
  padding:18px 18px 20px;
  transform:translateY(10px) scale(.985);transition:transform .24s cubic-bezier(.32,.72,0,1);
  box-shadow:var(--shadow-lg);max-height:86dvh;overflow-y:auto;
}
.modal.open .modal-box{transform:none}
.grabber{display:none}
.grabber{width:38px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 14px}
.modal-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding:0 2px}
.modal-head h2{font-size:16px;font-weight:600;margin:0}
.modal-head p{font-size:12.5px;color:var(--muted);margin:3px 0 0}
.modal-head .iconbtn{margin-left:auto}
.method{
  display:flex;align-items:center;gap:14px;width:100%;padding:14px;text-align:left;
  border:1px solid var(--line-soft);border-radius:0;background:var(--surface);
}
.method + .method{margin-top:8px}
.method:hover{border-color:var(--line);background:var(--surface-2)}
.method .ico{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);border:none;flex:none;color:var(--accent);
}
.method .t{flex:1}
.method .t b{display:block;font-size:13.5px;font-weight:600}
.method .t span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---------------- support ----------------
   The chat window that used to live here is gone, and so is everything
   that dressed it: the agent's face, the speech bubbles, the composer.
   A photograph and a name at the top of a form is a promise about who is
   reading it, and what comes back is a ticket rather than a person
   typing. See the note in app.js. */

/* ---------------- misc ---------------- */
.summary{
  margin:14px;padding:18px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line-soft);
}
.summary .label{display:block;margin-bottom:6px}
.summary .big{font-family:var(--mono);font-size:28px;font-variant-numeric:tabular-nums}
.summary .sub{font-size:12px;color:var(--muted);margin-top:6px}
.kv{display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:9px 0}
.kv + .kv{border-top:1px solid var(--line-soft)}
.kv span{color:var(--muted)}
.kv b{font-weight:500;font-family:var(--mono)}
.stack{display:flex;flex-direction:column;gap:14px;padding:14px}
/* ---------------- a number, mostly hidden ----------------
   The saved deposit number, on the deposit sheet and in Account. It
   reads as a filled field rather than an input, because it is not one:
   there is nothing to type and nothing here to select, since the page
   was never given the digits. */
.saved-num{display:flex;align-items:center;gap:10px}
.saved-num b{flex:1;min-width:0;font-weight:500;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis}
.saved-num svg{color:var(--muted);flex:none}
.saved-swap{
  flex:none;font-size:12px;font-weight:500;color:var(--accent);
  padding:4px 2px;background:none;
}
.saved-swap:hover{text-decoration:underline}

/* ---------------- no pull to refresh ----------------
   Dragging down from the top of the page scrolls, nothing else. The app
   had its own pull-to-refresh, and it caught the gesture when somebody
   scrolled back down from the run targets; the browser's own one is
   turned off here for the same reason. */
html,body{overscroll-behavior-y:none}

.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 26px);transform:translate(-50%,10px);
  z-index:90;background:var(--text);color:var(--bg);padding:11px 18px;border-radius:999px;
  font-size:12.5px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.toast.open{opacity:1;transform:translate(-50%,0)}

/* ---- outcome flash ----
   Across the top, not the foot: a contract settling is the thing the
   trader is waiting for, and the toast rail at the bottom is where the
   app puts asides. Green won, red lost, and it clears itself. */
.flash{
  position:fixed;left:50%;top:calc(var(--topbar-h) + 12px);transform:translate(-50%,-12px);
  z-index:95;display:block;text-align:left;
  width:min(420px, calc(100vw - 28px));
  padding:14px 18px 15px;border-radius:14px;
  background:var(--flash-bg);border:1px solid var(--flash-line);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 14px 38px rgba(0,0,0,.34);
}
.flash.open{opacity:1;transform:translate(-50%,0)}
/* What happened, in the small type over it. Uppercase and tracked out,
   so it reads as a stamp on the ticket rather than as a sentence. */
.flash .flash-k{
  display:block;font-style:normal;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--flash-muted);
}
/* The instrument. Quiet, because it is the one line somebody already
   knows — it is the series they are watching. */
.flash .flash-n{
  display:block;font-style:normal;font-size:13px;margin-top:5px;
  color:var(--flash-name);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The money. Everything above it is context for this line. */
.flash .flash-v{
  display:block;margin-top:6px;font-size:17px;font-weight:600;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.flash .flash-n:empty,.flash .flash-v:empty{display:none}
.flash.win .flash-v{color:var(--flash-win)}
.flash.loss .flash-v{color:var(--flash-loss)}
@media (prefers-reduced-motion:reduce){
  .flash{transition:opacity .2s ease}
  .flash,.flash.open{transform:translate(-50%,0)}
}
/* The per-tick call wears the banner's design (it carries the .flash
   class too) and takes the banner's place at the top. Only the timing
   is its own: it changes several times in ten seconds, so it comes in
   quicker. One layer under the banner, so a mid-run result still
   covers the last tick. */
.flash.tickpop{z-index:94;transition:opacity .28s ease,transform .28s ease}
@media (prefers-reduced-motion:reduce){
  .flash.tickpop{transition:opacity .14s ease}
}

footer{border-top:1px solid var(--line-soft);padding:24px 18px 32px;color:var(--muted);font-size:11.5px}
footer .fl{display:flex;flex-wrap:wrap;gap:14px 20px;margin-bottom:16px}
footer a:hover{color:var(--text-2)}

/* ---------------- support tickets ---------------- */
.ticket-new{padding:4px 16px 16px}
.ticket-new .btn{width:100%}
.ticket-text{resize:vertical;min-height:120px;line-height:1.55;font-family:inherit}
.ticket-sect{padding:6px 18px 8px}
.ticket{border-top:1px solid var(--line-soft);padding:15px 16px}
.ticket-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ticket-top b{font-size:13.5px;font-weight:500;flex:1;min-width:0}
/* Their own words, kept as they typed them: somebody writing at midnight
   about a missing deposit uses line breaks, and flattening them into one
   paragraph makes the ticket harder to read at both ends. */
.ticket-said{
  margin:0;font-size:13px;line-height:1.6;color:var(--text-2);white-space:pre-wrap;
  word-break:break-word;
}
.ticket-reply{
  margin-top:10px;padding:11px 12px;border-left:2px solid var(--accent);
  background:var(--surface-2);
}
.ticket-reply b{display:block;font-size:11.5px;color:var(--accent);margin-bottom:4px}
.ticket-reply p{margin:0;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ticket-wait{margin-top:10px;font-size:12px;color:var(--muted)}
.ticket-when{margin-top:9px;font-size:11px;color:var(--muted);font-family:var(--mono)}

/* ---------------- copy trading ----------------
   Three stacked sections: whether the account can copy anyone, whether
   it can be copied, and who there is to copy. They are all cards on the
   page ground, so the page reads as a stack of decisions rather than as
   one long form. */
.cp{display:flex;flex-direction:column;gap:14px;padding:0 14px 18px}
.cp-lede{
  font-family:var(--display);font-weight:600;font-size:25px;
  margin:6px 0 6px;letter-spacing:-.022em;
}
.cp .card{padding:18px}
/* ---- activation ---- */
.cp-bal{
  margin-top:10px;font-size:31px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.cp-min{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:12px;font-size:12.5px;color:var(--muted);
}
.cp-min b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
/* How far off the minimum is, drawn rather than worked out. It fills
   green the moment the balance clears it, which is the one state change
   this card exists to report. */
.cp-bar{height:4px;margin-top:8px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.cp-bar i{display:block;height:100%;background:var(--accent);transition:width .3s ease}
.cp-act.ok .cp-bar i{background:var(--pos)}
.cp-note{margin:12px 0 14px!important;font-size:12.5px;line-height:1.6;color:var(--muted)}
/* The key an admin issues, under the deposit button. Once redeemed it
   becomes a line saying so. */
.cp-act .btn{width:100%}
.cp-key,.cp-dep{margin-top:10px}
.cp-act-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cp-state{
  display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);font-size:11.5px;font-weight:600
}
.cp-state.ready{background:var(--pos-soft);color:var(--pos)}
.cp-act.ready{border-color:var(--pos-soft)}
/* ---- a VIP's own keys ----
   A header with the one control that matters on a shared screen (Show /
   Hide), each key on one line with an icon to copy it, and a quiet foot
   with the way to make another. */
.cp-vip{border-color:var(--accent-soft)}
.cp-vip-head{display:flex;align-items:center;gap:12px}
.cp-vip-ico{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent)
}
.cp-vip-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-vip-t b{font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.cp-vip-t span{font-size:12px;color:var(--muted)}
.cp-eye{
  flex:none;height:30px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--text);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer
}
.cp-eye:hover{border-color:var(--accent);color:var(--accent)}
.cp-eye[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.cp-keys{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.cp-keyrow{
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:6px 6px 6px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2,var(--surface))
}
.cp-keytext{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:15px;font-weight:600;letter-spacing:.08em
}
.cp-iconbtn{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:9px;
  background:transparent;color:var(--muted);cursor:pointer;transition:background .15s ease,color .15s ease
}
.cp-iconbtn:hover{background:var(--accent-soft);color:var(--accent)}
.cp-iconbtn.done-copy{background:var(--pos-soft);color:var(--pos)}
.cp-iconbtn.danger:hover{background:var(--neg-soft);color:var(--neg)}
.cp-iconbtn[disabled]{opacity:.45;cursor:default}
.cp-keyrow.busy .cp-keytext{opacity:.5}
.cp-keyrow.confirm{padding-left:14px;border-color:var(--neg-soft);background:var(--neg-soft)}
.cp-keyask{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--neg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-textbtn{
  flex:none;height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;
  color:var(--text);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer
}
.cp-textbtn:hover{background:var(--surface)}
.cp-textbtn.danger{background:var(--neg);color:#fff}
.cp-textbtn.danger:hover{background:var(--neg-deep)}
.cp-textbtn[disabled]{opacity:.6;cursor:default}
@media (max-width:380px){
  .cp-keyrow{gap:2px;padding-left:10px}
  .cp-keytext{font-size:13.5px;letter-spacing:.04em}
  .cp-iconbtn{width:30px;height:30px}
}
.cp-keyempty{padding:12px 14px;border:1px dashed var(--line);border-radius:12px;font-size:12.5px;color:var(--muted)}
.cp-iconbtn:focus-visible,.cp-eye:focus-visible,.cp-newkey:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cp-vip-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;font-size:12px;color:var(--muted);line-height:1.45
}
.cp-newkey{
  flex:none;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;
  border:0;border-radius:8px;background:transparent;color:var(--accent);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer
}
.cp-newkey:hover{background:var(--accent-soft)}
.cp-newkey[disabled]{opacity:.5;cursor:default}
.cp-dep[disabled]{opacity:.55;cursor:not-allowed}
.cp-keyed{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:10px;padding:11px 12px;border-radius:12px;
  background:var(--pos-soft);color:var(--pos);font-size:13.5px;font-weight:600;
}
/* ---- becoming a provider ---- */
.cp-prov h3{margin:9px 0 7px}
.cp-prov > p{margin-bottom:14px}
.cp-reqs{
  display:flex;flex-direction:column;
  border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--surface-2);margin-bottom:14px;
}
.cp-req{display:flex;align-items:center;gap:11px;padding:11px 13px;font-size:12.5px}
.cp-req + .cp-req{border-top:1px solid var(--line-soft)}
.cp-req i{
  flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--neg-soft);color:var(--neg);
}
.cp-req.met i{background:var(--pos-soft);color:var(--pos)}
.cp-req span{flex:1;min-width:0;color:var(--text-2)}
.cp-req b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-req.met b{color:var(--pos)}
.cp-prov .btn[disabled]{opacity:.5;cursor:not-allowed}
/* ---- the marketplace ---- */
.cp-market{padding-top:4px}
.cp-sub{margin:7px 0 13px;font-size:12.5px;color:var(--muted);line-height:1.6}
.cp-search{position:relative;display:flex;align-items:center;margin-bottom:12px}
.cp-search svg{position:absolute;left:13px;color:var(--muted);pointer-events:none}
.cp-search .input{padding-left:38px}
.cp-list{display:flex;flex-direction:column;gap:12px}
.cp-card{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:16px;
}
.cp-head{display:flex;align-items:center;gap:12px}
.cp-av{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
  font-size:13px;font-weight:700;letter-spacing:.02em;
}
.cp-who{flex:1;min-width:0;display:block}
.cp-who b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-follow{
  flex:none;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 11px;
  border:1px solid var(--accent);border-radius:999px;background:transparent;color:var(--accent);
  font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,color .15s ease
}
.cp-follow:hover{background:var(--accent-soft)}
.cp-follow.on{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink)}
.cp-follow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:380px){
  .cp-head{gap:8px}
  .cp-risk{padding:4px 7px;font-size:9.5px}
  .cp-follow{padding:0 9px}
}
.cp-ver{
  display:inline-flex;align-items:center;gap:4px;margin-top:2px;
  font-size:11.5px;color:var(--pos);
}
.cp-ver.off{color:var(--muted)}
.cp-risk{
  flex:none;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.cp-risk.low{background:var(--pos-soft);color:var(--pos)}
.cp-risk.mid{background:var(--warn-soft);color:var(--warn)}
.cp-risk.high{background:var(--neg-soft);color:var(--neg)}
/* Four figures on one row on a phone would be four columns two
   characters wide. Two by two, so each one keeps its label. */
.cp-figs{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:14px 0;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;
}
.cp-figs > div{background:var(--surface-2);padding:10px 12px;min-width:0}
.cp-figs span{
  display:block;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.cp-figs b{
  display:block;margin-top:4px;font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cp-figs b.pos{color:var(--pos)}
.cp-figs b.neg{color:var(--neg)}
.cp-go{padding:12px}
.cp-none{
  padding:26px 18px;text-align:center;font-size:12.5px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
}
@media (min-width:760px){
  .cp{max-width:680px;margin:0 auto;width:100%}
  .cp-figs{grid-template-columns:repeat(4,1fr)}
}

/* The one thing left from the page that came before: the two links at
   its foot, which the new one still ends on. */
.copy-foot{display:flex;flex-direction:column;gap:10px;padding:0 16px}

/* ---------------- light: depth ----------------
   Dark mode separates surfaces by value: a panel is lighter than the
   page and that is enough. Light mode has almost no value range to work
   with, so it separates them the way paper does, with a shadow. Without
   this every card was an outline on a flat sheet, which is what "looks
   unplanned" actually means.

   Scoped to the light theme on purpose: the same shadows under a dark
   panel are invisible at best and grubby at worst. */
:root:not([data-theme="dark"]) .panel,
:root:not([data-theme="dark"]) .chart-card,
:root:not([data-theme="dark"]) .auth-card,
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .modal-box,
:root:not([data-theme="dark"]) .drawer{
  box-shadow:none;              /* flat: the line around it is the separation */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) .chart-card,
  :root:not([data-theme="light"]) .auth-card,
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .modal-box,
  :root:not([data-theme="light"]) .drawer{box-shadow:none}
}
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .chart-card,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-box{box-shadow:none}

/* The bar is a surface, not the page. In light it was the same colour as
   the ground behind it, so it floated with nothing under it. */
:root:not([data-theme="dark"]) .topbar{
  background:var(--surface);
  box-shadow:0 1px 0 var(--line);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .topbar{background:var(--bg);box-shadow:none}
}

/* The active contract reads as the chosen one rather than as a dot. */
.ctab.active::after{
  width:16px;height:2px;margin-left:-8px;border-radius:0;background:var(--accent-ink);
}
.ctab.active{font-weight:600}
.seg button.active{font-weight:600}

/* ---------------- desktop ---------------- */
@media (min-width:900px){
  .only-desk{display:flex}
  .only-mob{display:none!important}
  body[data-chrome="app"] main{padding-bottom:0}
  .tabbar{display:none}
  /* In the rail the column already provides the inset, so the dock only
     needs the gap between the two buttons. */
  .trade-dock{position:static;padding:0;border:none;background:none;margin-top:14px;transform:none}
  .topbar{padding:0 22px;height:64px;gap:20px}
  .brand{margin-right:0}
  /* Everything sits to the right of the rail. The rail is fixed, so the
     shell has to leave its width clear; it widens over the page on
     hover rather than pushing, which is why this is the collapsed width
     and not the open one. */
  body[data-chrome="app"] main{padding-left:var(--rail-w)}
  /* Two panels, one either side of the chart: the links on the left, the
     stake and the two buttons on the right. The trade side is where a
     hand rests, and on a right-handed desk that is the right edge — it
     was on the left only because there was nothing else to put there.
     Fixed width, same place on every tab, so it never moves with
     whatever the middle column is doing. */
  .terminal{
    display:grid;grid-template-columns:minmax(0,1fr) 344px;
    /* Two rows in the left column: the chart takes what is going, the
       digits take what they need. No row gap, because the two are one
       panel on this screen and a seam between them would say otherwise. */
    grid-template-rows:minmax(0,1fr) auto;
    gap:0 16px;padding:16px;align-items:stretch;
    /* A height, not a minimum. As a minimum the row grew to whatever the
       digits needed and then the page scrolled, which on a laptop put
       the two trade buttons below the fold. Fixed, the chart gives up
       the space instead. */
    height:calc(100vh - 64px);min-height:520px;
  }
  /* The chart takes the height that is there rather than a fixed 420
     and a band of empty page under it: the column is as tall as the
     rail beside it, the digits sit at its foot, and the canvas has the
     rest. */
  /* Nothing is pinned here — the rail beside it is already the height of
     the screen — so the head is simply the top row of the left column. */
  .terminal .chart-pin{
    grid-column:1;grid-row:1;position:static;top:auto;background:none;
    min-width:0;min-height:0;display:flex;flex-direction:column;
  }
  .terminal .col-mid{grid-column:1;grid-row:2;min-width:0}
  .terminal .chart-pin .chart-card{flex:1;min-height:0;display:flex;flex-direction:column}
  .terminal .chart-pin #chart{flex:1;height:auto;min-height:260px}
  /* Source order already puts the chart first, which is what a phone
     wants and what the second column wants here, so nothing is
     reordered. */
  .terminal .col-right{
    grid-column:2;grid-row:1 / span 2;
    display:flex;flex-direction:column;gap:14px;
    position:sticky;top:calc(64px + 16px);
    height:calc(100vh - 64px - 32px);
  }
  /* The panel fills the rail and scrolls inside itself, so the two trade
     buttons stay on the screen however long the panel gets. */
  .terminal .col-right .panel{
    flex:1;min-height:0;overflow-y:auto;position:static;top:auto;
  }
  .terminal .col-right .trade-dock{flex:none;margin-top:0}
  /* The day's tally sits at the foot of the rail rather than floating in
     the middle of it with empty panel underneath. */
  .terminal .col-right .panel .session{margin-top:auto}
  #chart{height:min(50vh,420px)}
  .digits{gap:8px;padding:14px 0}
  .digit{max-width:46px}
  .ctab{font-size:13px;padding:13px 8px 18px}
  .panel{
    background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
    padding:16px;position:sticky;top:calc(64px + 16px);
  }
  .page{padding:44px 32px 56px}
  .page h1{font-size:44px}
  .cards{flex-direction:row}
  .cards .card{flex:1}
  .stats{grid-template-columns:repeat(4,1fr)}
  .list,.summary,.chart-card{margin-left:0;margin-right:0}
  .shell{max-width:760px;margin:0 auto;width:100%;padding:0 20px}
  .modal{align-items:center;padding:20px}
  .modal-box{border-radius:var(--r-xl);padding-bottom:20px}
  .grabber{display:none}
}

/* ---------------- the desktop rail ----------------
   A phone has a drawer for the long list of links and a bottom bar for
   the four places you actually go. A desktop had neither: five links in
   the top bar, and Deposit, Withdraw, Verify identity and the theme
   reachable only by making the window narrow. So the rail, which is
   both of those controls at once — thin enough to leave the work
   surface alone, and complete.

   It is open, always, with the names beside the glyphs. It started out
   64px of icons that widened on hover, and a menu you have to touch to
   read is a menu you have to learn: on a laptop there is room for the
   words, so the words are there. `.only-desk` keeps it off phones
   entirely, where the drawer and the bottom bar already do this job. */
:root{--rail-w:212px}
.rail{
  position:fixed;left:0;top:64px;bottom:0;width:var(--rail-w);z-index:44;
  flex-direction:column;
  background:var(--surface);border-right:1px solid var(--line-soft);
  padding:8px 0 6px;overflow:hidden;
}
/* The list scrolls inside the rail on a short window rather than
   pushing the foot off the bottom. No visible bar: it is a narrow
   column and a scrollbar in it is most of a glyph wide. */
.rail-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.rail-body::-webkit-scrollbar{display:none}
.rail-foot{flex:none;margin-top:6px;padding-top:6px;border-top:1px solid var(--line-soft)}
.rnav{
  display:flex;align-items:center;width:100%;height:40px;
  color:var(--text-2);text-align:left;white-space:nowrap;
}
/* A fixed glyph box, so the icons sit on one axis down the rail however
   long the names beside them are. */
.rnav-ico{
  position:relative;flex:none;width:50px;height:40px;
  display:grid;place-items:center;
}
.rnav-ico svg{position:relative;z-index:1}
.rnav-lab{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  font-size:13px;padding-right:12px;
}
.rnav:hover{background:var(--surface-2);color:var(--text)}
/* Where you are is painted, like every other chosen thing in the app.
   Behind the glyph rather than across the row, so it reads the same at
   64px as it does open. */
.rnav.on{color:var(--text)}
.rnav.on .rnav-ico{color:var(--accent-ink)}
.rnav.on .rnav-ico::before{
  content:"";position:absolute;width:36px;height:36px;border-radius:var(--r);
  background:var(--accent-fill);box-shadow:0 2px 8px rgba(0,133,69,.3);
}
.rnav.on .rnav-lab{font-weight:500}
.rnav.danger{color:var(--neg)}
.rnav.danger:hover{background:var(--neg-soft);color:var(--neg)}
.rnav .switch{flex:none;margin-right:14px}
/* A hairline between the groups: pages, funds, records, account, help.
   Short of the edges, so it separates rather than ruling the panel off. */
.rail-sep{height:1px;margin:7px 16px;background:var(--line-soft)}

/* ---------------- the ticket, on a laptop ----------------
   Three changes, all of them about the right-hand card being the place a
   trade is set up rather than a strip of controls.

   The contract chooser moves into it (trade.js does the moving) and
   becomes a list of three rather than three tabs squeezed across the top
   of the chart. The two trade buttons stop sharing a line: there is a
   whole column of height here and a pair of half-width buttons was the
   phone layout surviving into a place it did not have to. And the card
   says what the ticket actually is.

   The heading on the chooser only exists in this arrangement, which is
   why it is hidden by default rather than shown by it. */
.ctabs-h{display:none}
.tdetail{display:none}
.td-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 0;font-size:12px;
}
.td-row + .td-row{border-top:1px solid var(--line-soft)}
.td-row span{color:var(--muted);flex:none}
.td-row b{
  font-weight:500;color:var(--text-2);text-align:right;
  font-family:var(--mono);font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media (min-width:900px){
  /* The chooser, in the card: a list, left-aligned, with the chosen one
     marked down its left edge. Three labels side by side in a 344px
     column is how "Matches / Differs" becomes "Matches / Di…". */
  .terminal .col-right .ctabs{
    flex-direction:column;flex:none;
    background:var(--surface);border:1px solid var(--line-soft);
    padding:10px 0 2px;
  }
  .terminal .col-right .ctabs-h{display:block;padding:0 14px 8px}
  .terminal .col-right .ctab{
    flex:none;width:100%;justify-content:flex-start;gap:11px;
    padding:11px 14px;font-size:13px;
  }
  /* A hairline between the rows, not down the side of them. */
  .terminal .col-right .ctab + .ctab::before{
    left:14px;right:14px;top:0;bottom:auto;width:auto;height:1px;
  }
  /* And the mark moves with the list: a bar down the left edge of the
     chosen row instead of an underline beneath a tab. */
  .terminal .col-right .ctab::after{
    left:0;top:0;bottom:0;width:3px;height:auto;margin:0;border-radius:0;
  }
  /* The rail keeps the tint-and-bar treatment: a filled row in a list of
     three would read as a button among labels, and the bar down its edge
     is what marks a chosen row in every other list in the app. So the
     ink goes back to blue, since the ground here is pale. */
  .terminal .col-right .ctab.active{background:var(--accent-soft);color:var(--accent)}
  .terminal .col-right .ctab.active .ctab-ico{color:var(--accent)}
  .terminal .col-right .ctab.active::after{
    width:3px;height:auto;margin:0;background:var(--accent);opacity:1;
  }

  /* One button per line, and taller. The column has the room, and a
     trade button is the last thing that should be sharing space. */
  .terminal .col-right .trade-actions{grid-template-columns:1fr;gap:10px}
  .terminal .col-right .tbtn{padding:13px 12px}
  .terminal .col-right .tbtn .t{font-size:15px}
  .terminal .col-right .tbtn .s{font-size:11px;margin-top:2px}
  .terminal .col-right .tbtn .s.payout{font-size:11.5px;margin-top:5px}

  /* The four facts, above the day's tally. */
  .terminal .col-right .tdetail{
    display:block;margin-top:4px;padding-top:6px;border-top:1px solid var(--line-soft);
  }
}

/* ---------------- drawer disclosure groups ---------------- */
.dgroup{display:flex;flex-direction:column}
.dgroup-head .caret{transition:transform .2s ease}
.dgroup.open > .dgroup-head{color:var(--text)}
.dgroup.open > .dgroup-head .caret{transform:rotate(180deg)}
.dgroup-body{display:none;flex-direction:column;gap:2px;padding:2px 0 6px 10px;margin-left:8px;border-left:1px solid var(--line-soft)}
.dgroup.open > .dgroup-body{display:flex}
.dgroup-body .ditem{padding:10px 12px}
.dgroup-body .ditem span{font-size:13px}
.ditem .chev{display:flex;opacity:.45}
.drawer-user{color:inherit}
.drawer-user > svg{margin-left:auto;color:var(--muted)}

/* ---------------- modal internals ---------------- */
.modal-form{display:flex;flex-direction:column;gap:15px;padding:2px 2px 4px}
.modal-form .quick{grid-template-columns:repeat(5,1fr);margin-top:2px}
.modal-form .list{margin:0}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.input-wrap .suffix{position:absolute;right:14px;color:var(--muted);font-size:12px;pointer-events:none}
.address{display:flex;align-items:center;gap:10px;word-break:break-all;font-size:12px}
.address button{margin-left:auto;color:var(--accent);font-size:12px;font-family:var(--sans);flex:none}
.totals{border-top:1px solid var(--line-soft);padding-top:4px}
.balance-strip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 14px;margin-bottom:12px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line-soft);
}
.balance-strip b{font-size:15px}
.notice{
  display:flex;gap:11px;padding:12px 13px;border-radius:var(--r);
  background:var(--accent-soft);color:var(--text-2);font-size:12.5px;line-height:1.55;
}
.notice svg{color:var(--accent);flex:none;margin-top:1px}
.notice .link{background:none;padding:0;font-family:inherit}
.dropzone{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:26px 18px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface-2);
}
.dropzone > svg{color:var(--accent);margin-bottom:2px}
.dropzone b{font-size:14px}
.dropzone span{color:var(--muted);font-size:12.5px;max-width:34ch}
.dropzone .btn{width:auto;padding:10px 18px;margin-top:6px}

/* ---------------- top bar zones ---------------- */
.topbar-title{
  flex:1;text-align:center;font-size:15px;font-weight:600;letter-spacing:-.01em;
}
/* The name is two words and reads as two: ZOVIAN over BINARY, at the
   height of one line of ordinary text, with the monogram beside it. A
   single line of "ZOVIANBINARY" is a word nobody can parse at a glance,
   and the two-line lockup is what makes the second word readable at the
   size a top bar allows. */
/* The name is the logo. There was a blue "NB" tile in front of it, which
   is a monogram standing in for a name written immediately next to it —
   the same thing said twice, and the tile was doing the work the type
   should be doing.

   So one line, mixed case, and the split carries the mark: ZovianBinary heavy in
   the text colour, Binary light in the brand blue. Weight and colour are
   what make two words read as one lockup; the old one used size and
   stacked them, which is a bar of small caps and not a logo. Mixed case
   on purpose, too — every label in this app is tracked uppercase, and a
   logo set the same way is just another label.

   Sized in em off the anchor, so the landing nav, the footer and the
   sign-in pages scale the whole thing with one font-size. */
.wordmark{
  display:inline-flex;align-items:baseline;flex:none;
  font-family:var(--display);font-size:16.5px;line-height:1;
  padding-right:6px;white-space:nowrap;
}
.wm-name{display:inline-flex;align-items:baseline;gap:.2em}
.wm-name b,.wm-name i{
  font-style:normal;font-size:1em;line-height:1;letter-spacing:-.018em;
}
.wm-name b{font-weight:700;color:currentColor}
/* The second word is the quiet half: the same size, two steps lighter,
   in the accent. It is the only place the brand blue is used as type. */
.wm-name i{font-weight:400;color:var(--accent)}
/* The landing footer is dark in both themes, so the light theme's blue —
   which is pulled dark to work on white — would disappear into it. */
.lfoot .wm-name i{color:var(--accent)}

/* On a phone the bar carries the menu, the name, the balance, Deposit
   and the bell. The name is the first thing to give ground: the
   monogram stays, the words shrink, and the balance never wraps. */
/* The bar on a phone carries the menu, the mark, the balance, Deposit
   and the bell, and at 390px that is 412px of content in 375px of room.
   Every item gives a little rather than one of them being dropped: the
   gaps close, the name loses its wide tracking, and Deposit keeps its
   word but not its generous padding. Measured at 360, 390 and 414. */
@media (max-width:899px){
  /* Three labels and three icons across a phone. A few tenths off the
     type and the gap is the difference between "Matches / Differs" and
     "Matches / Diff...". */
  .ctab{gap:5px;padding:9px 4px 15px;font-size:11px}
  .ctab-ico svg{width:15px;height:15px}

  .topbar{gap:5px;padding:0 7px}
  .topbar .wordmark{padding-right:0;margin-left:-1px;font-size:15px}
  .topbar .btn-primary{padding:9px 11px}
  .topbar .acct{padding:5px 6px;gap:5px}
  .topbar .iconbtn{width:30px}
}
/* Below this the sums stop working however hard everything is squeezed,
   so the bar keeps the first word and drops the second. There is no
   monogram to fall back on any more, and "ZovianBinary" is still the name —
   half a lockup reads better than a pair of initials did. Only in the
   bar: a sign-in page has a whole column to itself and no reason to
   drop any of its own name. */
@media (max-width:383px){
  .topbar .wm-name i{display:none}
  .topbar .wordmark{font-size:14.5px}
}
/* Narrower still and the bar was already over its width before any of
   this, so the balance gives up a point of type rather than the row
   scrolling sideways. */
/* Under 360 the bar was over its width before any mark was put in it,
   so the mark is the thing that goes rather than being the reason the
   row scrolls. */
@media (max-width:359px){
  .topbar .wordmark{display:none}
}
@media (max-width:374px){
  .topbar .acct .bal{font-size:11.5px}
  .topbar .acct-kind{font-size:7.5px}
  .topbar .acct-flag{width:18px;height:12px}
  .topbar .btn-primary{padding:9px 9px;font-size:13px}
}
/* Centred on the sign-in pages, where it is the heading rather than an
   item in a row. */
.auth-head .wordmark,.auth .wordmark{justify-content:center;margin:0 auto 18px;padding:0}
.topbar .acct{flex:none}
.topbar .iconbtn[aria-hidden="true"]{pointer-events:none}

/* ---------------- sign-in transition ---------------- */
.splash{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s ease;
}
.splash.open{opacity:1}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px}
.pulse{position:relative;width:56px;height:56px}
.pulse i{
  position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);
  opacity:0;animation:ring 1.9s cubic-bezier(.2,.6,.3,1) infinite;
}
.pulse i:nth-child(2){animation-delay:.28s}
.pulse i:nth-child(3){animation-delay:.56s}
.pulse::after{
  content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--accent);
}
@keyframes ring{
  0%{transform:scale(.2);opacity:0}
  35%{opacity:.9}
  100%{transform:scale(1);opacity:0}
}
.splash-word{
  font-size:17px;letter-spacing:.42em;text-transform:uppercase;font-weight:600;
  padding-left:.42em;animation:rise .5s ease both;
}
.splash-msg{color:var(--muted);font-size:13px;animation:rise .5s .1s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pulse i{animation:none;opacity:.5;transform:scale(1)}}

/* ---------------- auth header ---------------- */
.auth-head{text-align:center;margin-bottom:26px}
.auth-head .wordmark{
  display:inline-flex;font-size:20px;padding-right:0;margin-bottom:20px;
}
.auth-head h1{font-family:var(--display);font-weight:600;font-size:28px;margin:0 0 8px;letter-spacing:-.022em}
.auth-head p{color:var(--muted);margin:0;font-size:13.5px}
.auth .auth-foot{margin-top:20px}

/* ---------------- account switcher ---------------- */
.choices{display:flex;flex-direction:column}
.choice{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:15px 2px;color:var(--text-2);
}
.choice + .choice{border-top:1px solid var(--line-soft)}
.choice:hover{color:var(--text)}
.choice .dot{
  width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);
  flex:none;position:relative;
}
.choice.selected .dot{border-color:var(--accent)}
.choice.selected .dot::after{
  content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--accent);
}
.choice .c-flag{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:28px;height:20px;border:1px solid var(--line-soft);overflow:hidden;
}
.choice .c-flag svg{display:block;width:100%;height:100%}
.choice .c-t{flex:1;min-width:0}
.choice .c-t b{display:block;font-size:14px;font-weight:600;color:var(--text)}
.choice .c-t span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.choice .c-v{font-size:14px;color:var(--text)}

/* ---------------- notification bell ---------------- */
.iconbtn.bell{position:relative}
.iconbtn.bell i{
  position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:50%;
  background:var(--neg);border:1.5px solid var(--bg);
}

/* ============================================================
   Pro terminal surfaces
   ============================================================ */

/* ---------------- skeletons ---------------- */
.sk{position:relative;overflow:hidden;background:var(--surface-2)}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(127,127,127,.12),transparent);
  animation:shimmer 1.3s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-tabs{height:44px}
.sk-inst{height:52px;margin:10px 14px}
.sk-panel{height:280px;margin:10px 0}
.sk-summary{height:96px;margin:14px}
.sk-list{height:220px;margin:14px}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none}}

/* ---------------- instrument header ---------------- */
.inst-main{min-width:0}
.inst-name{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--text)}
.inst-name svg{color:var(--muted)}
.feed{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-family:var(--mono)}
.feed i{width:6px;height:6px;border-radius:50%;background:var(--pos)}
.feed.reconnecting i,.feed.booting i{background:var(--warn);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}

#chart{touch-action:none;cursor:crosshair}

/* ---------------- digits ---------------- */
/* Named `sel`, not `picked`: the document picker further down owns
   `.picked` and gives it a 168px minimum height, which turned the chosen
   barrier digit into a tall blue slab and stretched the whole row with
   it. The rule itself lives with the other .dcell states above. */

/* ---------------- panel rows ---------------- */
.stack-row{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Where the panel's numbers came from, when they came from the
   scanner rather than from the person looking at it. */
.scan-note{
  display:flex;align-items:flex-start;gap:9px;padding:10px 11px;
  border:1px solid var(--accent);background:var(--accent-soft);
  font-size:12px;line-height:1.5;color:var(--text-2);
}
.scan-note > svg{flex:none;color:var(--accent);margin-top:1px}
.scan-note span{flex:1;min-width:0}
.scan-note b{color:var(--text);font-weight:600}
.scan-x{flex:none;color:var(--muted);padding:0 2px}
.scan-x:hover{color:var(--text)}

/* The barrier digit, as ten choices rather than a spinner. */
.barrier{display:flex;flex-direction:column;gap:8px}
/* Room above the row for the chosen digit to stand up into. */
.numline{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;padding:5px 0 9px}
.nb{
  position:relative;
  height:34px;display:grid;place-items:center;min-width:0;
  border:1px solid var(--ctl-line);background:var(--ctl);
  font-family:var(--mono);font-size:12.5px;color:var(--text-2);
  transition:transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}
.nb:hover{color:var(--text);border-color:var(--accent);transform:translateY(-2px)}

/* The chosen digit stands out of the row rather than being tinted in
   place — but in blue, because amber is now the tick landing and one
   colour has to mean one thing. */
.nb.on{
  border-color:var(--accent);color:var(--accent);background:var(--accent-soft);
  font-weight:600;transform:translateY(-4px);
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 24%, transparent);
}
.nb.on::after{
  content:"";position:absolute;left:50%;bottom:-7px;translate:-50% 0;
  width:14px;height:2px;background:var(--accent);
}
@media (prefers-reduced-motion:reduce){
  .nb{transition:none}
  .nb:hover,.nb.on{transform:none}
}
.field-error{color:var(--neg);font-size:12px;margin-top:7px}
.stake.invalid{border-color:var(--neg)}
.tbtn[disabled]{opacity:.45;cursor:not-allowed}

/* The run bar that lived here is gone with the panel row it styled:
   the trade button is the whole progress display now. .btn-mini stays,
   it is used by the consent bar, positions and history. */
.btn-mini{
  display:inline-flex;align-items:center;gap:6px;padding:7px 11px;font-size:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);
}
.btn-mini:hover{color:var(--text);border-color:var(--muted)}
.btn-mini.solid{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------------- open positions ---------------- */
.active-wrap{display:flex;gap:10px;padding:0 12px 14px;overflow-x:auto;scrollbar-width:none}
.active-wrap::-webkit-scrollbar{display:none}
/* the open-position card. NOTE: this class must never be a bare .active -
   every selected tab in the app also carries class="active", and a bare
   rule here silently resizes them. */
.open-card{flex:0 0 auto;width:min(82vw,260px);padding:12px;border:1px solid var(--line);background:var(--surface)}
.active-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.active-top b{font-size:13.5px}
.active-meta{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted);margin-top:3px}
.bar{height:3px;background:var(--surface-3);margin:10px 0 8px}
.bar i{display:block;height:100%;background:var(--accent);transition:width .3s ease}
.active-foot{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted)}

/* ---------------- positions page ---------------- */
.pnl-head{
  display:flex;gap:18px;flex-wrap:wrap;margin:14px;padding:16px;
  border:1px solid var(--line-soft);background:var(--surface);
}
.pnl-head .big{font-family:var(--mono);font-size:30px;margin:4px 0 2px}
.pnl-head .sub{font-size:11.5px;color:var(--muted)}
.pnl-side{flex:1;min-width:190px;display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-content:center}
.pnl-side .kv{padding:6px 0;border:none;font-size:12.5px}
.filters{display:flex;align-items:center;gap:10px;padding:0 14px 14px;flex-wrap:wrap}

/* The period chips scroll sideways rather than wrapping. Wrapping left
   a ragged second row that pushed the type filter and the export button
   around depending on how many chips fitted — the controls moved every
   time the tab changed, which is the one thing a control row must not
   do. */
.chipline{
  display:flex;gap:6px;flex:1 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
}
.chipline::-webkit-scrollbar{display:none}
.filter-tail{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}

/* Narrow: the chips take the first line, the controls the second, with
   the export still hard right. */
@media (max-width:539px){
  .chipline{flex:1 0 100%}
  .filter-tail{flex:1 0 100%;margin-left:0}
  .filter-tail .input.sm{flex:1;min-width:0}
  .filter-tail #exportBtn{margin-left:auto;flex:none}
}
.fchip{padding:6px 11px;font-size:12px;border:1px solid var(--line-soft);color:var(--muted);background:var(--surface)}
/* The chosen filter is filled, like every other chosen thing. It used to
   be a dark outline on white, which on a row of white chips is a border
   weight and not a state. */
.fchip.on{
  background:var(--accent-fill);border-color:var(--accent-fill-2);
  color:var(--accent-ink);font-weight:500;
}
.input.sm{width:auto;padding:7px 10px;font-size:12.5px}
.trow{display:flex;align-items:center;gap:13px;padding:13px 14px;width:100%;text-align:left;color:inherit}
.trow + .trow{border-top:1px solid var(--line-soft)}
button.trow:hover{background:var(--surface-2)}
.trow .ico{
  width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-2);color:var(--text-2);flex:none;
}
.trow .ico.pos{background:var(--pos-soft);color:var(--pos)}
.trow .ico.neg{background:var(--neg-soft);color:var(--neg)}
.trow .ico.live{background:var(--accent-soft);color:var(--accent)}
.trow .t{flex:1;min-width:0}
.trow .t b{display:block;font-size:13.5px;font-weight:500}
.trow .t span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.trow .p{text-align:right;font-size:13.5px}
.trow .p .sub{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.detail-pl{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px;border:1px solid var(--line-soft);background:var(--surface-2);
}
.detail-pl b{font-size:20px}
.detail-pl.pos b{color:var(--pos)}
.detail-pl.neg b{color:var(--neg)}
kbd{font-family:var(--mono);font-size:11px;padding:3px 7px;border:1px solid var(--line);background:var(--surface-2)}

/* ---------------- connection, consent, risk ---------------- */
/* Amber, not red. A feed that is reconnecting is a wait, not a loss —
   red here says "your money is in trouble" for something that resolves
   itself in two seconds. */
.conn-banner{
  position:fixed;left:50%;top:-60px;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:9px;padding:9px 16px;font-size:12.5px;
  background:var(--warn);color:#fff;transition:top .25s ease;white-space:nowrap;
}
.conn-banner.show{top:calc(var(--topbar-h) + 8px)}
.spin{
  width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
body.feed-down .tbtn{opacity:.5;pointer-events:none}

.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:85;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line);
}
.consent p{margin:0;flex:1;min-width:200px;font-size:12.5px;color:var(--text-2)}
.consent-btns{display:flex;gap:8px}

.risk-strip{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--surface-2);border-bottom:1px solid var(--line-soft);
  font-size:11.5px;color:var(--text-2);
}
.risk-strip span{display:flex;align-items:center;gap:8px;flex:1;line-height:1.45}
.risk-strip svg{color:var(--accent);flex:none}
.risk-strip .iconbtn{width:26px;height:26px}

body.locked{overflow:hidden}

/* ---------------- desktop refinements ---------------- */
@media (min-width:900px){
  .active-wrap{padding:0 0 14px}
  .open-card{width:260px}
  .pnl-head{margin:16px 0}
  .filters{padding:0 0 12px}
  .consent{left:auto;right:20px;bottom:20px;max-width:420px;border:1px solid var(--line)}
}


/* ---------------- clean press ----------------
   Touch devices have no real hover, so a :hover rule fires on tap and
   stays painted until you touch elsewhere. Here every hover repaint is
   folded back to its resting value, leaving the press itself clean. */
@media (hover:none){
  .ctab:hover{color:var(--muted)}
  .ctab.active:hover{color:var(--accent)}
  .seg button:hover{color:var(--muted)}
  .seg button.active:hover{color:var(--accent)}
  .row:hover,button.trow:hover,.mkt:hover,.ditem:hover{background:none;color:inherit}
  .stake button:hover{background:none;color:var(--text-2)}
  .quick button:hover{border-color:var(--line-soft);color:var(--text-2)}
  .chart-tools button:hover{background:none;color:var(--muted)}
  .btn-mini:hover{color:var(--text-2);border-color:var(--line)}
  .tabbar a:hover{color:var(--muted)}
  .tabbar a.active:hover{color:var(--text)}
  footer a:hover{color:var(--muted)}
}


/* ---------------- AI scanner ---------------- */
.ai-sect{margin:18px 14px 8px}
/* ---------------- what the scan landed on ----------------
   The two facts a finished scan produces, side by side above the
   ranking: the instrument and the call on it. Sized like a headline
   rather than like a table row, because everything else on this screen
   is working and these two are the answer. */
.ai-ready{
  margin:14px;padding:16px 16px 14px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line-soft);
}
.ai-ready-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.ai-ready-cell{
  padding:12px 13px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line-soft);min-width:0;
}
.ai-ready-cell span{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.ai-ready-cell b{
  display:block;margin-top:5px;font-size:15px;font-weight:600;line-height:1.3;
}
.ai-ready-cell b.pred{font-family:var(--mono);color:var(--accent)}
.ai-ready-note{margin:11px 2px 0;font-size:11.5px;color:var(--muted);line-height:1.5}
@media (max-width:359px){.ai-ready-grid{grid-template-columns:1fr}}
.ai-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  margin:14px;padding:22px 18px;border:1px solid var(--line-soft);background:var(--surface);
}
.ai-hero b{font-size:17px;font-weight:600}
.ai-hero .ai-headline{font-size:26px;font-family:var(--mono);letter-spacing:-.02em}
.ai-hero .ai-sub{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:44ch}
/* The result card is smaller than the two that precede it, and
   deliberately: "Scan the market" is an invitation and has a screen to
   fill, while this is one line of answer with the ranked list and the
   two buttons underneath it that somebody is on their way to. It was
   taking a third of a phone to say four words. */
.ai-hero.done{padding:14px 16px;gap:5px}
.ai-hero.done .ai-headline{font-size:19px}
.ai-hero.done .ai-sub{font-size:11.5px}
.ai-hero.done .ai-go{margin-top:9px;padding:8px 14px;font-size:12.5px}
.ai-orb{display:flex;align-items:center;gap:5px;height:22px}
.ai-orb i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.35}
.ai-hero.scanning .ai-orb i{animation:aipulse 1s infinite}
.ai-hero.scanning .ai-orb i:nth-child(2){animation-delay:.15s}
.ai-hero.scanning .ai-orb i:nth-child(3){animation-delay:.3s}
@keyframes aipulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.ai-progress{width:100%;max-width:260px;height:2px;background:var(--surface-3);margin-top:6px}
.ai-progress i{display:block;height:100%;background:var(--accent);transition:width .25s ease}
.ai-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  padding:11px 18px;background:var(--text);color:var(--bg);font-size:13px;font-weight:500;
}
.ai-go.ghost{background:none;color:var(--text-2);border:1px solid var(--line);padding:9px 15px}

.ai-row{display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;text-align:left;color:inherit}
.ai-row + .ai-row{border-top:1px solid var(--line-soft)}
.ai-row.on{background:var(--accent-soft)}
.ai-badge{
  width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-2);color:var(--muted);
}
.ai-badge.pos{background:var(--pos-soft);color:var(--pos)}
.ai-badge.neg{background:var(--neg-soft);color:var(--muted)}
.ai-t{flex:1;min-width:0}
.ai-t b{display:block;font-size:13.5px;font-weight:500}
.ai-t > span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.ai-meter{display:block;height:3px;background:var(--surface-3);margin-top:7px}
.ai-meter i{display:block;height:100%;background:var(--accent)}
.ai-p{text-align:right;flex:none}
.ai-p b{display:block;font-size:13.5px;font-weight:500}
.ai-p span{display:block;font-size:10.5px;margin-top:2px}

/* Two ways on from a scan, and neither of them takes money.

   Rounded like the tab bar, because these two are the same kind of
   thing it is: the way off this screen. Everything square on the page
   is something being read, and these are not. */
.ai-dock{display:flex;flex-direction:column;gap:9px;margin:12px 14px 0}
.ai-dock .btn{width:100%;border-radius:999px}

/* Looking again is not the primary action and not a warning either, so
   it wears the scanner's own violet rather than borrowing the blue of
   the button above it or the amber that means something is wrong. */
.btn-again{
  background:var(--again-soft);color:var(--again);
  border:1px solid color-mix(in srgb, var(--again) 26%, transparent);
}
.btn-again:hover{background:color-mix(in srgb, var(--again) 16%, var(--again-soft))}
/* No color-mix: the border still has to be there, just flatter. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .btn-again{border-color:var(--again)}
}

@media (min-width:900px){
  .ai-hero,.ai-dock{margin-left:0;margin-right:0}
  .ai-sect{margin-left:0;margin-right:0}
}


/* ---------------- tab focus ----------------
   A 2px offset outline around a tab reads as a box drawn round one
   cell. These controls drop it and light their dot instead, which
   keeps a visible keyboard cue without any rectangle. */
.tabbar a:focus-visible,.ctab:focus-visible,.seg button:focus-visible{outline:none}
.tabbar a:focus-visible::after,
.ctab:focus-visible::after,
.seg button:focus-visible::after{background:var(--accent)}


/* ---------------- run targets ----------------
   Three equal cells under Auto / Manual: profit green, loss red, the
   loss multiplier orange. Equal thirds by the same width:0 trick used
   on the tabs, so a long number never steals a neighbour's space. */
.targets{
  display:flex;border:1px solid var(--line-soft);background:var(--surface);
}
.tgt{
  flex:1 1 0;width:0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 9px;
}
.tgt + .tgt{border-left:1px solid var(--line-soft)}
.tgt-l{
  font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.tgt-v{display:flex;align-items:baseline;gap:4px;max-width:100%}
.tgt-v i{font-style:normal;font-size:11px;font-weight:600;flex:none}
.tgt-v input{
  width:100%;min-width:0;background:none;border:none;outline:none;padding:0;
  color:var(--text);text-align:center;font-size:14.5px;font-weight:600;
}
/* Each cell is the colour of what it does: green stops a run because it
   made money, red because it lost it, yellow is the multiplier in
   between. The label and the currency mark carried the colour and the
   figure — the only part anybody reads — was plain text on white, which
   is three-quarters of a colour-coded control. Now the cell has a
   ground and the number has the colour. */
.tgt.pos{background:var(--pos-soft)}
.tgt.neg{background:var(--neg-soft)}
.tgt.warn{background:var(--tick-soft)}
.tgt.pos .tgt-l,.tgt.pos .tgt-v i,.tgt.pos .tgt-v input{color:var(--pos)}
.tgt.neg .tgt-l,.tgt.neg .tgt-v i,.tgt.neg .tgt-v input{color:var(--neg)}
.tgt.warn .tgt-l,.tgt.warn .tgt-v i,.tgt.warn .tgt-v input{color:var(--tick-text)}


/* ---------------- phone number field ----------------
   The dialling code is furniture, not content: it sits in its own cell
   with the flag, and the input beside it starts empty and holds only
   the local number. */
.phone{
  display:flex;align-items:stretch;border:1px solid var(--line);
  background:var(--surface-2);
  /* Not hidden: the country list hangs out of the bottom of this row,
     and positioned so the list can align to the row rather than to the
     little chip at its left, which on a narrow screen put a third of the
     list off the edge. */
  overflow:visible;position:relative;
}
/* The picker inside a phone row does not position its own popover: the
   row does, so the list is the width of the field instead of the width
   of the little flag chip at its left. */
.phone .cc{position:static}
.phone .cc-pop{left:0;right:0;width:auto;max-width:none}
:root[data-theme="dark"] .phone{background:var(--surface)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .phone{background:var(--surface)}
}
.phone:focus-within{border-color:var(--accent)}
.phone-cc{
  display:flex;align-items:center;gap:7px;flex:none;padding:0 12px;
  background:var(--surface-2);border-right:1px solid var(--line-soft);
}
.phone-cc .flag{display:flex;flex:none}
.flagsvg{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.14) inset}
.phone-cc b{font-size:13.5px;font-weight:500;color:var(--text-2)}
.phone-cc{position:relative}
.phone-cc svg{color:var(--muted);flex:none;margin-left:-2px}

/* ---------------- dropdowns we drew ourselves ----------------
   A native select menu is the operating system's rectangle in the
   operating system's colours, dropped into the middle of a dark trading
   screen. This is the same control in ours, and it can carry a second
   line, which a native option cannot. */
.sel{position:relative;display:inline-flex}
.sel-btn{
  display:inline-flex;align-items:center;gap:5px;padding:6px 8px;
  color:var(--text-2);font-size:12.5px;cursor:pointer;
  border:1px solid transparent;background:none;max-width:100%;
}
.sel-btn:hover{color:var(--text);border-color:var(--line-soft);background:var(--surface-2)}
.sel.open .sel-btn{color:var(--text);border-color:var(--line);background:var(--surface-2)}
.sel-btn svg{flex:none;color:var(--muted)}
.sel-now{display:inline-flex;align-items:center;gap:6px;min-width:0}
.sel-now span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-ico{display:flex;flex:none;color:var(--accent)}
.sel-row .sel-ico{color:var(--muted)}
.sel-row.on .sel-ico,.sel-row:hover .sel-ico{color:var(--accent)}
.sel-pop{
  position:absolute;z-index:70;top:calc(100% + 6px);left:0;min-width:236px;
  max-width:min(92vw,320px);max-height:300px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
}
.sel-right .sel-pop{left:auto;right:0}
.sel-pop[hidden]{display:none}
.sel-group{
  padding:9px 12px 5px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.sel-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 12px;color:var(--text-2);
}
.sel-row:hover{background:var(--surface-2);color:var(--text)}
.sel-row.on{background:var(--accent-soft);color:var(--text)}
.sel-row svg{flex:none;color:var(--accent)}
.sel-t{flex:1;min-width:0}
.sel-t b{display:block;font-size:13px;font-weight:500}
.sel-t span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}

/* ---------------- the instrument marks ----------------
   A pair wears both its flags, the second tucked behind the first and
   shifted left. Overlapping rather than side by side is what makes two
   flags read as one mark: set apart they are two countries, set into
   each other they are a rate between them. */
.pairflags{display:inline-flex;align-items:center;flex:none;padding-right:4px}
/* A round window with an oversized flag behind it. The drawing is 24x16
   and the window is square, so the flag is scaled to the window's height
   and the sides are cropped — object-fit does nothing to an inline SVG,
   and this is the one way to get a round flag without a second asset. */
.pairflags i{
  display:grid;place-items:center;overflow:hidden;flex:none;
  width:19px;height:19px;border-radius:50%;
  background:var(--surface);box-shadow:0 0 0 1.5px var(--surface);
}
.pairflags i + i{margin-left:-7px}
.pairflags .flagsvg{width:29px;height:19px;max-width:none;flex:none}
/* A coin is its own disc with its own colour, so BTC is orange and ETH
   is indigo without a picture file for either. */
.coin{
  display:grid;place-items:center;flex:none;
  width:22px;height:22px;border-radius:50%;
  color:#fff;font-size:12px;font-weight:700;line-height:1;
}

/* What the series is doing, on the right of its row. */
.sel-tail{
  flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font-family:var(--mono);line-height:1.1;
}
.sel-tail .p{font-size:12px;font-weight:500;color:var(--text)}
.sel-tail .c{font-size:10.5px;color:var(--muted)}
.sel-tail .c.pos{color:var(--pos)}
.sel-tail .c.neg{color:var(--neg)}
/* The tick is the last thing in the row, after the figures. */
.sel-row.on svg{margin-left:2px}

/* A dropdown used as a form field fills the row and looks like one. */
.field .sel{display:flex;width:100%}
.field .sel-btn{
  flex:1;justify-content:space-between;padding:13px 14px;font-size:14px;
  border-color:var(--line);background:var(--surface-2);color:var(--text);
}
:root[data-theme="dark"] .field .sel-btn{background:var(--surface)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .field .sel-btn{background:var(--surface)}
}
.field .sel-pop{width:100%;min-width:0}

/* ---------------- the country picker ----------------
   Ours, not the operating system's: flags, dialling codes, and a filter
   that matches either the name or the number. */
.cc{padding:0;position:relative}
.cc-btn{
  display:flex;align-items:center;gap:7px;height:100%;padding:0 12px;
  color:var(--text-2);cursor:pointer;
}
.cc-btn:hover{color:var(--text)}
.cc-btn b{font-size:13.5px;font-weight:500}
.cc.open .cc-btn{color:var(--text)}
.cc-pop{
  position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:min(88vw,320px);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;
}
/* `display:flex` above outranks the browser's [hidden] rule, so the
   popover has to be told to stay shut. */
.cc-pop[hidden]{display:none}
.cc-find{padding:8px;border-bottom:1px solid var(--line-soft)}
.cc-search{
  width:100%;padding:9px 10px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--text);outline:none;font-size:13px;
}
.cc-search:focus{border-color:var(--accent)}
.cc-list{max-height:278px;overflow-y:auto;overscroll-behavior:contain}
.cc-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 11px;color:var(--text-2);
}
.cc-row:hover{background:var(--surface-2);color:var(--text)}
.cc-row.on{background:var(--accent-soft);color:var(--text)}
.cc-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-dial{font-size:12px;color:var(--muted);flex:none}
.cc-none{padding:16px 12px;font-size:12.5px;color:var(--muted);text-align:center}
.phone .input{
  flex:1;min-width:0;border:none;background:none;border-radius:0;
  letter-spacing:.06em;font-size:15px;
}
.phone .input:focus{border:none;box-shadow:none}
.phone .input::placeholder{letter-spacing:.06em;color:var(--muted);opacity:.7}

/* the USDT address row, now that the text and the button are separate */
.input.address{display:flex;align-items:center;gap:10px}
.input.address span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.input.address button{
  flex:none;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);font-weight:500;
}

/* ---------------- refer and earn ---------------- */
.ref-hero{
  display:flex;border:1px solid var(--line-soft);background:var(--surface-2);
  margin-bottom:4px;
}
.ref-stat{
  flex:1 1 0;width:0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 6px;
}
.ref-stat + .ref-stat{border-left:1px solid var(--line-soft)}
.ref-stat b{font-size:19px;font-weight:500}
.reflink{
  display:flex;align-items:center;gap:10px;padding:0 4px 0 12px;
  border:1px solid var(--line);background:var(--surface);
}
.reflink > i{display:flex;color:var(--muted);flex:none}
.reflink span{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;padding:13px 0;
}
.reflink button{
  flex:none;width:42px;height:42px;display:grid;place-items:center;
  color:var(--accent);border-left:1px solid var(--line-soft);
}
.ref-all{border:1px solid var(--line-soft);background:var(--surface)}


/* ---------------- password rules ---------------- */
.rules{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.rules li{
  position:relative;padding-left:20px;font-size:12px;color:var(--muted);line-height:1.5;
}
.rules li::before{
  content:"";position:absolute;left:3px;top:6px;width:6px;height:6px;border-radius:50%;
  border:1px solid var(--line);
}
.rules li.ok{color:var(--text-2)}
.rules li.ok::before{background:var(--pos);border-color:var(--pos)}
.field.bad .input,.field.bad .phone,.field.bad .input-wrap .input{border-color:var(--neg)}

/* ---------------- document pickers ---------------- */
.picker{display:flex;flex-direction:column;gap:10px}
.dropzone{cursor:pointer}
.dropzone .btn{pointer-events:none}
.picked{
  position:relative;display:flex;align-items:flex-end;min-height:168px;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2);
}
.picked-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.picked-doc{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);
}
/* A solid scrim, not a gradient: the file name has to stay readable over
   whatever the photo happens to be. */
.picked-bar{
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 8px 10px 13px;
}
.picked.shot .picked-bar{background:rgba(9,13,18,.74);color:#fff}
.picked-t{flex:1;min-width:0}
.picked-t b{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picked-t span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.picked.shot .picked-t span{color:rgba(255,255,255,.72)}
.picked-x{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  border-radius:var(--r-sm);color:var(--text-2);
}
.picked.shot .picked-x{color:#fff;background:rgba(255,255,255,.14)}

/* ---------------- awaiting payment ---------------- */
.await{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:30px 22px 26px;
}
.await b{font-size:16px;font-weight:600}
.await span{font-size:13px;color:var(--muted);line-height:1.6;max-width:36ch}
.await .btn{width:auto;padding:10px 20px;margin-top:10px}
.await .btn[hidden]{display:none}
.await-orb{display:flex;gap:7px;height:26px;align-items:center;margin-bottom:2px}
.await-orb i{
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  animation:awaitpulse 1.1s infinite;
}
.await-orb i:nth-child(2){animation-delay:.16s}
.await-orb i:nth-child(3){animation-delay:.32s}
@keyframes awaitpulse{
  0%,100%{opacity:.22;transform:translateY(0) scale(.85)}
  50%{opacity:1;transform:translateY(-6px) scale(1)}
}

/* ---------------- payment confirmed ---------------- */
.done{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:26px 22px 6px;
}
.done b{font-size:17px;font-weight:600}
/* :not() keeps this off the mark, which is also a direct child span and
   was losing its green to this rule. */
.done > span:not(.done-mark){font-size:13px;color:var(--muted);line-height:1.6;max-width:36ch}
.done-mark{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--pos-soft);color:var(--pos);margin-bottom:4px;
  animation:donepop .42s cubic-bezier(.22,1.2,.36,1) both;
}
/* The same mark, for the other ending. Amber rather than red: the money
   is safe, which is the first thing the reader needs to believe, and a
   red disc says "something has gone badly wrong with your funds". */
.done-mark.bad{background:var(--warn-soft);color:var(--warn)}
.done-mark.bad svg{stroke-width:1.8}

@keyframes donepop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------------- boost tiers ---------------- */
.tier-next{
  display:flex;flex-direction:column;gap:7px;padding:12px 14px;
  border:1px solid var(--line-soft);border-top:none;background:var(--surface);
}
.tier-next span{font-size:12px;color:var(--muted)}
.tier-bar{height:4px;background:var(--surface-3)}
.tier-bar i{display:block;height:100%;background:var(--pos)}
.trow.on{background:var(--accent-soft)}
.trow .ico{font-family:var(--mono);font-size:12.5px;font-weight:500}


/* The dialog box is focused programmatically when a step has no field,
   so a screen reader lands inside it. That is not keyboard navigation,
   so it must not paint the 2px ring around the whole dialog. */
.modal-box:focus,.modal-box:focus-visible{outline:none}

/* A disabled action has to look disabled, or people press it and
   wonder why nothing happened. */
.btn:disabled{opacity:.42;cursor:not-allowed;filter:none}
.btn:disabled:hover{filter:none}

/* check() draws at 1.5 like every other icon; at 30px it needs weight */
.done-mark svg{stroke-width:2.4}


/* ---------------- top bar tiles ----------------
   The menu and bell sat as bare glyphs next to two bordered controls,
   so they read as a different class of thing. Same box, same height,
   same surface — only inside the top bar, so modal and chat icon
   buttons keep their bare treatment. */
.topbar .iconbtn{
  width:38px;height:38px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:0;
}
.topbar .iconbtn:hover{background:var(--surface-3);color:var(--text)}
.topbar .acct{height:38px}
.topbar .btn-primary{height:38px;display:flex;align-items:center;padding:0 16px}
/* the invisible spacer opposite a back button must stay invisible */
.topbar .iconbtn[aria-hidden="true"]{background:none;border:none}
/* Back keeps its circle inside the top bar too — this block sets a
   square on every icon button in here, and would otherwise win on
   specificity. */
.topbar .back-btn{width:36px;height:36px;border-radius:50%}


/* ============================================================
   Landing page
   One idea per section, centred heads, and a lot of air. Sections
   alternate white / blue / white / purple so the eye gets a beat
   between them instead of one continuous wall.
   ============================================================ */
:root{
  --lpad:22px;
  --lsec-y:76px;
  --tint-blue:#C6EBD6;
  --tint-blue-fg:#0B2A1A;
  --tint-purple:#B7ACE8;
  --tint-purple-fg:#171233;
  --lhero-bg:#F1F2F5;
  --lnav-h:72px;
  --lfoot-bg:#101820;
  --lfoot-fg:#E7EDF4;
  --lfoot-muted:#A3A29D;
}
:root[data-theme="dark"]{
  --tint-blue:#14312A;
  --tint-blue-fg:#E3ECF8;
  --tint-purple:#241D3F;
  --tint-purple-fg:#EAE4F8;
  --lhero-bg:#1C1C1C;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --tint-blue:#14312A;
    --tint-blue-fg:#E3ECF8;
    --tint-purple:#241D3F;
    --tint-purple-fg:#EAE4F8;
    --lhero-bg:#1C1C1C;
  }
}

/* every section is full-bleed; the inner rail holds the content */
.lsec,.lnav,.lfoot{width:100%}
.lsec-in,.lnav-in{width:100%;max-width:1080px;margin:0 auto;padding-left:var(--lpad);padding-right:var(--lpad)}

/* ---- nav ---- */
.lnav{
  position:sticky;top:0;z-index:40;background:var(--bg);
  border-bottom:1px solid var(--line-soft);
}
.lnav-in{display:flex;align-items:center;gap:18px;padding-top:15px;padding-bottom:15px}
.lnav .wordmark{margin-right:auto;font-size:17px}
.lnav-links{display:none;gap:6px;margin-right:auto}
.lnav-links a{padding:8px 13px;border-radius:999px;color:var(--text-2);font-size:13.5px}
.lnav-links a:hover{background:var(--surface-2);color:var(--text)}
.lnav-cta{display:flex;align-items:center;gap:8px}
.btn-ghost-sm,.btn-solid-sm{padding:10px 16px;font-size:13px;font-weight:500;white-space:nowrap}
.btn-ghost-sm{border:1px solid var(--line);background:var(--surface);color:var(--text)}
.btn-ghost-sm:hover{background:var(--surface-2)}
.btn-solid-sm{background:var(--pos);color:#fff;font-weight:600}
.btn-solid-sm:hover{filter:brightness(1.07)}

/* ---- section frame ---- */
.lsec{padding-top:var(--lsec-y);padding-bottom:var(--lsec-y)}
.lsec.tint{background:var(--tint);color:var(--tint-fg)}
.lsec.blue{--tint:var(--tint-blue);--tint-fg:var(--tint-blue-fg)}
.lsec.purple{--tint:var(--tint-purple);--tint-fg:var(--tint-purple-fg)}

/* A centred head, then a wide block under it — the reference rhythm. */
.lsec-head{text-align:center;max-width:56ch;margin:0 auto 52px}
.lkicker{display:block;color:var(--accent);margin-bottom:18px}
.lsec.tint .lkicker{color:inherit;opacity:.58}
.lsec h2,.lhero h1{
  font-family:var(--display);font-weight:600;letter-spacing:-.024em;
  margin:0 0 18px;text-wrap:balance;
}
.lsec h2{font-size:31px;line-height:1.16}
.lsec-head p{margin:0;font-size:15.5px;line-height:1.8;color:var(--text-2)}
.lsec.tint .lsec-head p{color:inherit;opacity:.76}

/* ---- hero ---- */
/* A shade off white, so the hero reads as its own panel against the
   plain white sections below it rather than running into them.

   On a phone it fills what is left of the screen under the bar and
   centres its content in that space, so there is no dead strip between
   the last button and the section below. svh, not vh, so the address
   bar sliding away does not leave a gap. The extra top padding sits the
   block a touch below true centre, which reads as centred. */
.lhero{
  text-align:center;
  background:var(--lhero-bg);border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;
  min-height:calc(100vh - var(--lnav-h));
  min-height:calc(100svh - var(--lnav-h));
  padding-top:56px;padding-bottom:40px;
}
.lhero > .lsec-in{width:100%}
.lhero h1{font-size:40px;line-height:1.1}
.lhero-p{
  margin:0 auto 34px;max-width:58ch;font-size:16.5px;line-height:1.8;color:var(--text-2);
}
.lcta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.lcta .btn{width:auto;padding:15px 26px}


/* ---- live chart card ---- */
.lshot{
  border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow);
  color:var(--text);
}
.lshot-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line-soft);
}
.lshot-name{font-size:13.5px;font-weight:500}
.lshot-live{
  display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);
  font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
}
.lshot-live i{width:6px;height:6px;border-radius:50%;background:var(--pos)}
.lshot-chart{position:relative;background:var(--chart-bg)}
#landingChart{display:block;width:100%;height:270px;position:relative;z-index:1}
.lshot-digits{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;padding:18px 16px 6px}
.lsd{
  display:grid;place-items:center;aspect-ratio:1;max-width:36px;width:100%;margin:0 auto;
  border-radius:50%;border:1px solid var(--line-soft);background:var(--surface);
  font-family:var(--mono);font-size:12px;color:var(--text-2);
}
.lsd.on{border-color:var(--accent);color:var(--accent)}
.lshot-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px 18px;font-size:11.5px;color:var(--muted);
}
.lshot-foot .num{font-size:14px;color:var(--text)}

/* ---- cards ---- */
.lgrid{display:grid;grid-template-columns:1fr;gap:16px}
.lcard{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:28px;color:var(--text);
}
.lsec.tint .lcard{border-color:transparent}
.lnum{
  display:block;font-family:var(--mono);font-size:11px;color:var(--accent);
  letter-spacing:.16em;margin-bottom:18px;
}
.lcard h3{margin:0 0 11px;font-size:16.5px;font-weight:600;letter-spacing:-.005em}
.lcard p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.8}
.lcard .chip{margin-top:20px}

/* ---- contract table ---- */
.ltable{
  border:1px solid var(--line-soft);background:var(--surface);
  border-radius:var(--r-lg);overflow:hidden;color:var(--text);
}
.lsec.tint .ltable{border-color:transparent}
.ltrow{
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline;
  padding:18px 20px;font-size:14px;
}
.ltrow + .ltrow{border-top:1px solid var(--line-soft)}
.ltrow > span:first-child{font-weight:500}
.ltrow > span:nth-child(2){grid-column:1;color:var(--muted);font-size:13px;line-height:1.6}
.ltrow > span:last-child{grid-column:2;grid-row:1/span 2;align-self:center;text-align:right}
.lthead{display:none}

/* ---- ai panel ---- */
.lpanel{
  border:1px solid var(--line-soft);background:var(--surface);
  border-radius:var(--r-lg);overflow:hidden;color:var(--text);
}
.lsig{
  display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-items:baseline;
  padding:17px 18px;font-size:13.5px;
}
.lsig + .lsig{border-top:1px solid var(--line-soft)}
.lsig-b{font-weight:500}
.lsig > span:nth-child(2){grid-column:1;color:var(--muted);font-size:12.5px}
.lsig b{grid-column:2;grid-row:1/span 2;align-self:center;font-size:13px}

.lsmall{font-size:13px;color:var(--muted);line-height:1.8;margin:26px 0 0;max-width:62ch}
.lsec.tint .lsmall{color:inherit;opacity:.72}
.lsmall.centered{margin-left:auto;margin-right:auto;text-align:center}
.lsmall a{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.lsec.tint .lsmall a{color:inherit}

/* ---- faq ---- */
.lfaq{
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface);
}
.lfaq details + details{border-top:1px solid var(--line-soft)}
.lfaq summary{
  display:flex;align-items:center;gap:16px;padding:21px 22px;cursor:pointer;
  font-size:15px;font-weight:500;list-style:none;
}
.lfaq summary::-webkit-details-marker{display:none}
.lfaq summary::after{
  content:"";margin-left:auto;flex:none;width:9px;height:9px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;
}
.lfaq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.lfaq summary:hover{background:var(--surface-2)}
.lfaq p{
  margin:0;padding:0 22px 24px;color:var(--muted);font-size:13.5px;
  line-height:1.85;max-width:66ch;
}

/* ---- closing cta ---- */
.lclose{text-align:center}
.lclose h2{margin-bottom:14px}
.lclose p{font-size:16px;margin:0 auto 32px;line-height:1.75;max-width:52ch;opacity:.8;text-wrap:balance}
/* An accent-blue button on the purple panel is a clash. On a tinted
   section the primary button borrows the section's own ink instead, so
   it stays the strongest thing there without introducing a third hue. */
.lsec.tint .btn-fill{background:var(--tint-fg);color:var(--tint)}
.lsec.tint .btn-ghost{background:transparent;border-color:currentColor;color:inherit}
.lsec.tint .btn-ghost:hover{background:rgba(127,127,127,.16)}

/* ---- footer ---- */
.lfoot{background:var(--lfoot-bg);color:var(--lfoot-fg)}
.lfoot .wordmark{color:var(--lfoot-fg)}
.lfoot-top{display:flex;flex-direction:column;gap:40px;padding:60px 0 40px}
.lfoot-brand .wordmark{font-size:17px;display:inline-block;margin-bottom:14px}
.lfoot-brand p{margin:0;color:var(--lfoot-muted);font-size:13px;line-height:1.8;max-width:38ch}
.lfoot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 28px}
.lfoot-cols div{display:flex;flex-direction:column;gap:13px}
.lfoot-cols b{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.lfoot-cols a{color:var(--lfoot-muted);font-size:13.5px}
.lfoot-cols a:hover{color:var(--lfoot-fg)}
.lfoot-risk{padding:30px 0;border-top:1px solid rgba(255,255,255,.1)}
.lfoot-risk b{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:11px}
.lfoot-risk p{margin:0;color:var(--lfoot-muted);font-size:12px;line-height:1.85;max-width:88ch}
.lfoot-bar{
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  padding:20px 0 30px;border-top:1px solid rgba(255,255,255,.1);
  color:var(--lfoot-muted);font-size:11.5px;
}

/* ---- wider screens ---- */
@media (min-width:720px){
  :root{--lpad:32px;--lsec-y:100px}
  .lgrid{grid-template-columns:repeat(3,1fr)}
  .lfoot-cols{grid-template-columns:repeat(3,1fr)}
  .lfoot-top{flex-direction:row;justify-content:space-between;gap:60px}
  .lfoot-cols{flex:1;max-width:580px}
  .ltrow{grid-template-columns:1.1fr 2fr .7fr;align-items:center;padding:18px 24px}
  .ltrow > span:nth-child(2){grid-column:2;font-size:13.5px}
  .ltrow > span:last-child{grid-column:3;grid-row:1}
  .lthead{
    display:grid;background:var(--surface-2);padding:13px 24px;
    font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  }
  .lthead > span{font-weight:500!important;color:var(--muted)!important;font-size:10px!important}
  .lsig{grid-template-columns:auto 1fr auto;align-items:center;padding:18px 20px}
  .lsig > span:nth-child(2){grid-column:2}
  .lsig b{grid-column:3;grid-row:1}
}
@media (min-width:1000px){
  :root{--lsec-y:124px}
  .lnav-links{display:flex}
  .lhero{
    min-height:0;display:block;
    padding-top:104px;padding-bottom:112px;
  }
  .lhero h1{font-size:56px}
  .lsec h2{font-size:38px}
  .lsec-head{margin-bottom:64px}
  #landingChart{height:340px}
  .lcard{padding:32px}
}

/* anchors should not land under the sticky bar */
[id]{scroll-margin-top:88px}
@media (prefers-reduced-motion:no-preference){
  html:has(.lnav){scroll-behavior:smooth}
}

/* ---------------- Paystack handoff ----------------
   Not a .notice: this is the whole content of the card step, so it gets
   a heading and room to explain why there is no card field here. */
.handoff{
  display:flex;gap:14px;align-items:flex-start;padding:16px;
  border:1px solid var(--line-soft);border-radius:0;background:var(--surface-2);
}
.handoff-mark{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:0;background:var(--pos-soft);color:var(--pos);
}
.handoff-t{min-width:0}
.handoff-t b{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.handoff-t p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.7}
.handoff-marks{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.handoff-marks span{
  padding:5px 10px;border:1px solid var(--line-soft);border-radius:0;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  background:var(--surface);
}


/* ---------------- landing: square corners ----------------
   Every panel and control on this page is square. Stated once here
   rather than zeroed on each rule, so a new card cannot arrive with a
   stray radius. The digit pips stay round — they are pips, not cards. */
.lsec .lcard,
.lsec .lshot,
.lsec .ltable,
.lsec .lpanel,
.lsec .lfaq,
.lsec .btn,
.lsec .chip,
.lnav .btn-ghost-sm,
.lnav .btn-solid-sm,
.lnav-links a{border-radius:0}

/* ---------------- FAQ plus control ----------------
   Two bars: the upright one collapses on open, so + becomes −. */
.lfaq summary::after{content:none}
.lplus{
  position:relative;margin-left:auto;flex:none;width:18px;height:18px;
  color:var(--muted);
}
.lplus::before,.lplus::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .22s ease,opacity .22s ease;
}
.lplus::before{width:15px;height:1.7px}
.lplus::after{width:1.7px;height:15px}
.lfaq details[open] .lplus{color:var(--text)}
.lfaq details[open] .lplus::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}


/* ---------------- payment buttons ----------------
   Anything that moves money is green, so the action that costs
   something never wears the same colour as an ordinary form submit. */
.btn-pos{background:var(--pos);color:#fff}
.btn-pos:hover{filter:brightness(1.07)}
.btn-pos:disabled{filter:none}


/* ---------------- light mode depth ----------------
   With an off-white ground these need to be explicitly white, or they
   read as a hole in the page rather than a surface on it. */
.chart-card{background:var(--surface)}
.digits,.panel,.trade-dock,.instrument{background:var(--surface)}
/* Not .ctabs. It is painted on the control ground a few hundred lines up
   so that the chosen contract, which is white, lifts out of it — and
   this rule was quietly repainting the ground white too, which left the
   selected tab white on white. In light mode the only thing saying which
   contract you were on was the colour of the label. */
.topbar{background:var(--surface)}

body[data-chrome="app"] main{background:var(--bg)}
.list,.summary,.pnl-head,.ltable,.lpanel,.lfaq{box-shadow:var(--shadow)}
.lsec:not(.tint):not(.lhero){background:var(--surface)}

/* the terminal column reads as one continuous panel — two elements
   since the chart was split out, so the border is drawn once around
   the pair rather than twice, once around each */
@media (min-width:900px){
  .terminal .chart-pin,
  .terminal .col-mid{
    background:var(--surface);border:1px solid var(--line-soft);overflow:hidden;
  }
  .terminal .chart-pin{border-bottom:none;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .terminal .col-mid{border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg)}
}


/* ---------------- a running side ----------------
   Amber, and the progress is a bar along the foot of the button, so a
   live contract needs no extra panel anywhere on the page. */
.tbtn.stop{position:relative;background:var(--warn);color:#fff;overflow:hidden}
.tbtn.stop .s{font-variant-numeric:tabular-nums}
.tbtn-bar{
  position:absolute;left:0;bottom:0;height:3px;background:rgba(255,255,255,.85);
  transition:width .3s ease;
}
.tbtn[disabled]{opacity:.34}

/* ---------------- the result card ----------------
   The dialog that ends a contract or an automated run. It draws its own
   head, so .modal-hero drops the padding the standard box carries and
   the card fills it edge to edge.

   Mint rather than the app's blue: this is the one surface that is
   purely a result, and the blue on every other dialog is the colour of
   something to press. It has its own pair of tokens so the card reads
   the same in both themes without either one borrowing a semantic
   colour that means something else. */
:root{
  --hero-bg:var(--surface);
  --hero-panel:var(--surface);
  --hero-good:var(--pos);
  --hero-good-ink:#FFFFFF;
  --hero-bad:var(--neg);
  --hero-text:var(--text-2);
  --hero-muted:var(--muted);
  --hero-line:var(--line-soft);
}
.modal-box.modal-hero{
  padding:0;border:none;background:transparent;box-shadow:none;
  max-width:400px;overflow:visible;
}
.hero-card{
  background:var(--hero-bg);color:var(--hero-text);
  border-radius:22px;padding:34px 24px 26px;text-align:center;
  box-shadow:var(--shadow-lg);
}
/* The ring, and the glow behind it. One element: the border is the ring
   and the box-shadow is the halo, so there is nothing to keep centred
   against anything else. */
.hero-mark{
  width:92px;height:92px;margin:0 auto 22px;border-radius:50%;
  display:grid;place-items:center;
  border:2px solid var(--hero-good);color:var(--hero-good);
  box-shadow:0 0 0 6px rgba(63,207,180,.10), 0 0 34px rgba(63,207,180,.34);
}
.hero-card.bad .hero-mark{
  border-color:var(--hero-bad);color:var(--hero-bad);
  box-shadow:0 0 0 6px rgba(224,100,90,.10), 0 0 34px rgba(224,100,90,.30);
}
.hero-mark svg{stroke-width:2.6}
.hero-title{
  margin:0;font-size:23px;font-weight:700;letter-spacing:-.01em;
  color:var(--hero-good);
}
.hero-card.bad .hero-title{color:var(--hero-bad)}
.hero-amount{
  margin-top:12px;font-size:34px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--hero-good);
}
.hero-card.bad .hero-amount{color:var(--hero-bad)}
/* The figures sit in a well a shade darker than the card, which is what
   separates them from the headline without a rule across the card. */
.hero-rows{
  margin:24px 0 22px;padding:16px 18px;border-radius:12px;
  background:var(--hero-panel);text-align:left;
}
.hero-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:7px 0}
.hero-row + .hero-row{border-top:1px solid var(--hero-line)}
.hero-row > span{font-size:14px;color:var(--hero-text)}
.hero-row b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.hero-w{color:var(--hero-good)}
.hero-l{color:var(--hero-bad)}
.hero-close{
  display:block;width:100%;padding:15px 18px;border-radius:12px;
  background:var(--hero-good);color:var(--hero-good-ink);
  font-size:15px;font-weight:700;
}
.hero-card.bad .hero-close{background:var(--hero-bad);color:#fff}
.hero-close:active{filter:brightness(1.06)}
@media (max-width:420px){
  .hero-card{padding:30px 20px 22px}
  .hero-mark{width:82px;height:82px;margin-bottom:18px}
  .hero-title{font-size:21px}
  .hero-amount{font-size:30px}
}

/* ---------------- outcome header ---------------- */
.outcome{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:26px 22px 22px;text-align:center;
}
.outcome b{font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1}
.outcome.pos b{color:var(--pos)}
.outcome.neg b{color:var(--neg)}
.outcome-sub{font-size:12.5px;color:var(--muted)}


/* ---------------- the rail ----------------
   The drawer keeps its own small palette rather than reading the page
   tokens, because it is a different kind of surface: navigation, not
   work. But it does follow the theme now. It used to be pinned dark in
   both, and a black rail against a light app is not premium, it is two
   products in one window.

   In light it is white with warm grey steps for the header and hovers,
   the same neutrals as the page, with the brand blue only on the item
   that is chosen. */
.drawer{
  --d-bg:#FFFFFF;
  --d-surface:#F2F4F7;
  --d-line:#E5E7EB;
  --d-line-soft:#EEF0F3;
  --d-text:#14152B;
  --d-text-2:#475467;
  --d-muted:#667085;
  --d-accent:#4338CA;
  --d-accent-bg:#EEF0FF;
  --d-accent-line:#B5E5CF;
  --d-danger:#D6334B;
  --d-danger-2:#B42A31;
  --d-danger-bg:#FDECED;
  background:var(--d-bg);color:var(--d-text);
  border-right:1px solid var(--d-line);
}
:root[data-theme="dark"] .drawer{
  --d-bg:#0D0E13;
  --d-surface:#1B1C25;
  --d-line:rgba(255,255,255,.09);
  --d-line-soft:rgba(255,255,255,.07);
  --d-text:#ECEDF4;
  --d-text-2:#A3A6B8;
  --d-muted:#858A9E;
  --d-accent:#8F86FF;
  --d-accent-bg:rgba(143,134,255,.14);
  --d-accent-line:rgba(143,134,255,.3);
  --d-danger:#FF8478;
  --d-danger-2:#FF9B90;
  --d-danger-bg:rgba(255,132,120,.12);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .drawer{
    --d-bg:#0D0E13;
    --d-surface:#1B1C25;
    --d-line:rgba(255,255,255,.09);
    --d-line-soft:rgba(255,255,255,.07);
    --d-text:#ECEDF4;
    --d-text-2:#A3A6B8;
    --d-muted:#858A9E;
    --d-accent:#8F86FF;
    --d-accent-bg:rgba(143,134,255,.14);
    --d-accent-line:rgba(143,134,255,.3);
    --d-danger:#FF8478;
    --d-danger-2:#FF9B90;
    --d-danger-bg:rgba(255,132,120,.12);
  }
}
/* The person's own row sits on the one raised band in the panel, which
   gives the rail a head instead of starting cold with a list. */
.drawer .drawer-user{
  background:var(--d-surface);border-bottom:1px solid var(--d-line-soft);
  margin-bottom:6px;
}
.drawer .drawer-user b{color:var(--d-text)}
.drawer .drawer-user span{color:var(--d-muted)}
.drawer .drawer-user > svg{color:var(--d-muted)}
.drawer .avatar{
  background:var(--d-accent-bg);border-color:var(--d-accent-line);color:var(--d-accent);
}
.drawer .drawer-sect{color:var(--d-muted)}
.drawer .ditem{color:var(--d-text-2)}
.drawer .ditem:hover{background:var(--d-surface);color:var(--d-text)}
/* Where you are, marked: the accent ground plus a blue edge on the
   left. A change of background alone reads as a hover on a pale panel,
   and the bar is what makes it a position. */
.drawer .ditem.active{
  background:var(--d-accent-bg);color:var(--d-text);
  box-shadow:inset 2px 0 0 var(--d-accent);
}
.drawer .ditem.active svg{color:var(--d-accent);opacity:1}
.drawer .dgroup.open > .dgroup-head{color:var(--d-text)}
.drawer .dgroup-body{border-left-color:var(--d-line)}
.drawer .drawer-foot{border-top-color:var(--d-line-soft)}
.drawer .ditem.danger{color:var(--d-danger)}
.drawer .ditem.danger:hover{background:var(--d-danger-bg);color:var(--d-danger-2)}
.drawer .switch{background:var(--d-surface);border-color:var(--d-line)}
.drawer .switch::after{background:var(--d-muted)}
/* Same lit blue as everywhere else — the rail's palette is its own, but
   "on" is not something it should say differently. */
.drawer .switch[aria-checked="true"]{
  background:var(--accent-fill);border-color:var(--accent-fill-2);
}
.drawer .switch[aria-checked="true"]::after{background:#fff}
@media (hover:none){
  .drawer .ditem:hover{background:none;color:var(--d-text-2)}
  .drawer .ditem.active:hover{background:var(--d-accent-bg);color:var(--d-text)}
}


/* ---------------- loader ----------------
   Two shapes, one meaning. A page or panel that is waiting gets the
   orbit: a hairline track with a brand arc sweeping round it and a small
   core breathing in the middle. A button that is waiting gets three
   dots in a wave, drawn in the button's own ink so they sit on any fill. */
:root{--loader:var(--accent-fill)}
.nloader{position:relative;display:inline-grid;place-items:center;width:34px;height:34px;flex:none}
.nloader::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2.5px solid color-mix(in srgb, var(--loader) 14%, transparent);
  border-top-color:var(--loader);border-right-color:color-mix(in srgb, var(--loader) 55%, transparent);
  animation:norbit .9s cubic-bezier(.55,.15,.45,.85) infinite;
}
.nloader::after{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--loader);
  animation:ncore 1.8s ease-in-out infinite;
}
.nloader i{display:none}
@keyframes norbit{to{transform:rotate(360deg)}}
@keyframes ncore{0%,100%{transform:scale(.6);opacity:.45}50%{transform:scale(1);opacity:1}}

.nloader.sm{display:inline-flex;align-items:center;gap:4px;width:auto;height:14px;margin-right:8px;vertical-align:middle}
.nloader.sm::before,.nloader.sm::after{display:none}
.nloader.sm i{
  display:block;width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:ndots 1s ease-in-out infinite;
}
.nloader.sm i:nth-child(2){animation-delay:.14s}
.nloader.sm i:nth-child(3){animation-delay:.28s}
@keyframes ndots{0%,70%,100%{transform:translateY(0);opacity:.35}35%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .nloader::before{border-color:var(--loader)}
  .nloader::after,.nloader.sm i{opacity:1;transform:none}
}

/* the reconnect banner's spinner, in the same orbit language */
.spin{
  width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-right-color:rgba(255,255,255,.65);
  animation:norbit .8s cubic-bezier(.55,.15,.45,.85) infinite;
}

/* a centred block for a whole page or panel */
.loading-block{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:64px 20px;text-align:center;
}
.loading-block span{font-size:12.5px;color:var(--muted);letter-spacing:.04em}

/* the boot veil, over the app until the feed answers */
.boot{
  position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  background:var(--bg);opacity:1;transition:opacity .28s ease;
}
.boot.gone{opacity:0;pointer-events:none}
.boot-word{
  font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:.14em;color:var(--text);
}
.boot span{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}


/* ---------------- Learn: the landing page's rhythm ----------------
   Same idea as the marketing page: air above a heading is what tells
   you a new idea has started, and the body gets a readable measure
   rather than filling the column. */
.page{padding:36px 22px 64px;max-width:820px}
.page h1{font-size:36px;line-height:1.14;margin:0 0 20px}
.page .lede{font-size:17px;line-height:1.85;margin-bottom:8px!important}
.page h2{
  font-size:12px;letter-spacing:.13em;margin:64px 0 22px;
  padding-top:0;border:none;
}
.page p{font-size:14.5px;line-height:1.85;margin:0 0 20px}
.page .rule{margin:48px 0 0}
.cards{gap:18px}
.card{padding:26px}
.card h3{font-size:15.5px;margin-bottom:12px}
.card p{font-size:14px;line-height:1.85}
.tool{gap:18px}
.tool > svg{width:42px;height:42px;padding:10px}
.tool b{font-size:15.5px;margin-bottom:9px}
.tool p{font-size:14px;line-height:1.85}
.stats{gap:18px;margin-top:4px}
.stat{padding:24px 22px}
.stat b{font-size:28px;margin-bottom:12px}
.stat span{font-size:12.5px;line-height:1.7}
.stats + p,.cards + p{margin-top:32px}

@media (min-width:900px){
  .page{padding:56px 32px 88px}
  .page h1{font-size:42px}
  .page h2{margin-top:80px}
}


/* ---------------- Learn: minimal ----------------
   Square corners like the rest of the site, and far less furniture:
   flat panels with one hairline instead of bordered, shadowed, rounded
   boxes. The type does the work; the boxes just hold it apart. */
.card,.stat{border-radius:0;box-shadow:none}
.page .card{
  background:var(--surface);border:1px solid var(--line-soft);
  padding:24px 22px;
}
.page .cards{gap:0;border:1px solid var(--line-soft);background:var(--surface)}
.page .cards > .card{border:none;border-top:1px solid var(--line-soft)}
.page .cards > .card:first-child{border-top:none}

.page .stats{
  gap:0;border:1px solid var(--line-soft);background:var(--surface);
  grid-template-columns:1fr 1fr;
}
.page .stat{
  border:none;border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);
  padding:22px 20px;
}
.page .stat:nth-child(-n+2){border-top:none}
.page .stat:nth-child(2n+1){border-left:none}

/* the icon tile loses its fill — a rule and a colour is enough */
.page .tool > svg{
  width:auto;height:auto;padding:0;background:none;
  min-width:20px;min-height:20px;max-width:20px;max-height:20px;margin-top:3px;
}
.page .tool{gap:16px}

.page .rule{display:none}
.page .lede{color:var(--text-2)}
.page h2{margin-top:56px;padding-top:0}
.page h2:first-of-type{margin-top:48px}

@media (min-width:900px){
  .page .stats{grid-template-columns:repeat(4,1fr)}
  .page .stat:nth-child(-n+4){border-top:none}
  .page .stat:nth-child(2n+1){border-left:1px solid var(--line-soft)}
  .page .stat:nth-child(4n+1){border-left:none}
  .page .cards{display:grid;grid-template-columns:repeat(3,1fr)}
  .page .cards > .card{border-top:none;border-left:1px solid var(--line-soft)}
  .page .cards > .card:first-child{border-left:none}
}


/* ---------------- payment brand mark ----------------
   Always on white: these logos are drawn for a light ground and would
   lose their edges against the dark theme. */
/* No plate: the marks were rebuilt with transparent backgrounds and
   light ink so they sit straight on the panel. The card lockup carries
   a dark-ink twin for when the page is light, since a white VISA would
   disappear there. */
.paylogo{
  display:flex;justify-content:center;align-items:center;
  background:none;border:none;padding:2px 0 0;
}
.paylogo img{display:block;width:auto;height:22px;object-fit:contain}
.paylogo .on-light{display:none}
:root[data-theme="light"] .paylogo .on-dark{display:none}
:root[data-theme="light"] .paylogo .on-light{display:block}

/* a rail that is listed but not live */
.method.off{opacity:.5;cursor:default;pointer-events:none}
.method.off .badge{
  background:var(--surface-3);color:var(--muted);
}


/* ---------------- fitting a short phone ----------------
   The chart is pinned now, so its height is height the page can never
   scroll back: whatever it takes, the digits and the ticket share what
   is left for the whole session. On a tall handset it keeps its full
   288 and there is plenty under it. On a short one it gives height back,
   or the scrolling half of the screen is a letterbox.

   The sum: the pinned head is the top bar (58), the contract tabs (~40)
   and the digit row (~80) plus the chart, and it is held to about three
   fifths of the viewport so the rest is content that moves. */
#chart{height:clamp(140px, calc(60dvh - 178px), 288px)}

/* a little more air recovered from the panel itself */
.panel{gap:9px;padding-top:0}
.seg button{padding:8px 0 9px}
.tgt{padding:7px 4px 8px}
.quick button{padding:7px 0}
.session{font-size:11px}

@media (min-width:900px){
  #chart{height:min(50vh,420px)}
}

/* ---------------- markets: the instrument picker ----------------
   No card. The rows sit directly on the page ground, separated by a
   hairline, so the page reads as a list of choices rather than a panel
   of data to study. */
.mkt-group{margin:0 14px 22px}
.mkt-group-label{
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);padding:0 2px 8px;
}
.mkt-pick{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:15px 2px;text-align:left;color:var(--text-2);
  border-bottom:1px solid var(--line-soft);border-radius:0;background:none;
}
.mkt-pick .n{flex:1;min-width:0;font-size:14px;font-weight:500}
/* A pair carries its long name under its short one, the way it does in
   the terminal's picker. */
.mkt-pick .n i{
  display:block;font-style:normal;font-size:11.5px;font-weight:400;
  color:var(--muted);margin-top:2px;
}
.mkt-pick.on{color:var(--text)}
/* The one in play is named, not just tinted: colour alone is not a label. */
.mkt-on{
  font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);flex:none;
}
.mkt-pick:active{opacity:.7}

/* ---------------- history ----------------
   Grouped by day, on the page ground like the markets list. A settled
   trade is a fact, not a control, so none of it is a card or a button. */
.hist-day{margin:0 14px 16px}
.hist-day:first-child{margin-top:14px}
.hist-day-label{
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);padding:0 2px 8px;
}
/* Tight rows: a history is scanned, not read. Everything about one
   trade fits on a single line, so ten of them fit on a screen. */
.hist-row{
  display:flex;align-items:baseline;gap:10px;padding:8px 2px;
  border-bottom:1px solid var(--line-soft);
}
.hist-what{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.hist-what b{font-size:13px;font-weight:500;flex:none}
.hist-what span{
  font-size:11px;color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hist-num{font-size:12.5px;flex:none}

/* The instrument, over the chart rather than above it — the terminal is
   short on height and this is a label, not a panel. */
/* The instrument name is the control that changes it. It reads as a
   label until you go near it, which is the right weight for something
   that sits on top of the chart. */
/* The instrument name is the control that changes it. It reads as a
   label until you go near it, which is the right weight for something
   sitting on top of a chart. */
/* The card in the corner of the chart: the instrument on top, what it is
   doing right now underneath. The name alone said which series you were
   watching and nothing about it — the price was only ever on the axis,
   and how far it had moved was nowhere at all. The figure moves on every
   tick, which is the point: it is the one number on the screen that
   proves the feed is live.

   Wide enough that the longest instrument name fits without being cut,
   since the list below it is this same width and a picker that truncates
   the thing being picked is no use. */
.chart-head{position:absolute;top:6px;left:8px;z-index:3;width:min(244px,66%)}
.chart-inst{position:relative;display:flex;width:100%}
.inst-live{
  display:flex;align-items:baseline;gap:8px;padding:5px 9px;
  background:var(--ctl);border:1px solid var(--ctl-line);border-top:none;
  font-family:var(--mono);font-size:11.5px;line-height:1.25;
}
.inst-live .p{color:var(--text);font-weight:500}
.inst-live .c{margin-left:auto;font-size:10.5px;color:var(--muted)}
.inst-live .c.pos{color:var(--pos)}
.inst-live .c.neg{color:var(--neg)}
.chart-inst .sel{flex:1;min-width:0}
.chart-inst .sel-btn{
  flex:1;justify-content:space-between;
  font-size:11.5px;letter-spacing:.04em;color:var(--text-2);
  /* A ground and a border. Over a light chart it was grey text floating
     on the trace, which reads as a caption rather than something to
     press. */
  background:var(--ctl);border-color:var(--ctl-line);
}
/* The list is the width of the control that opened it. It was up to
   320px wide hanging off an chip half that size, which reads as a panel
   that has escaped rather than a menu belonging to the thing above it. */
.chart-inst .sel-pop{left:0;right:0;width:auto;min-width:0;max-width:none}
.chart-inst .sel-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-inst .sel-btn:hover,.chart-inst.open .sel-btn{
  color:var(--text);background:var(--ctl-on);border-color:var(--accent);
}

/* ---------------- learn: one idea per screen ----------------
   The page was a single long column that asked to be read all at once.
   Split into sections that fill the screen and snap, so a phone shows
   one idea at a time and a swipe moves to the next.

   Snapping lives on the scroller, and the scroller here is the page
   itself. Sections stay at least a screen tall but are allowed to grow:
   a section that overflows still scrolls normally, it just does not snap
   in the middle. */
body[data-page="learn"] main.lrn-flow{background:var(--bg)}

.lrn{
  padding:var(--lsec-y) var(--lpad);
  display:flex;flex-direction:column;justify-content:center;
}
.lrn-in{width:100%;max-width:860px;margin:0 auto}
.lrn + .lrn{border-top:1px solid var(--line-soft)}

/* Tinted sections carry their own foreground so body text, headings and
   muted copy all stay legible against the colour rather than inheriting
   a palette built for the dark ground. */
.lrn-tint{color:var(--tint-fg);background:var(--tint);border-top:none}
.lrn-blue{--tint:var(--tint-blue);--tint-fg:var(--tint-blue-fg)}
.lrn-purple{--tint:var(--tint-purple);--tint-fg:var(--tint-purple-fg)}
.lrn-tint h1,.lrn-tint h2,.lrn-tint h3,.lrn-tint b{color:inherit}
.lrn-tint p,.lrn-tint span,.lrn-tint .lede{color:inherit;opacity:.82}
.lrn-tint .card,.lrn-tint .stat{
  background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.08);color:var(--tint-fg);
}
.lrn-tint .card p,.lrn-tint .tool p{color:inherit;opacity:.76}
.lrn-tint .card svg,.lrn-tint .tool svg{color:inherit;opacity:.7}

/* The centred sections: the hero and the two that are a single thought. */
.lrn-center{text-align:center}
.lrn-center .lrn-in{max-width:34ch}
.lrn-center .lede,.lrn-center p{margin-left:auto;margin-right:auto}
.lrn-center .page-kicker{display:block;margin-bottom:16px}
.lrn-center h1{
  font-family:var(--display);font-weight:600;font-size:clamp(28px,7.4vw,40px);
  line-height:1.12;letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance;
}
.lrn-center h2{margin-top:0}
.lrn-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.lrn-more{
  display:block;margin-top:34px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}

/* The odds cards, stacked. Side by side they read as a comparison
   table and invite scanning for the biggest number; one per row, each
   is read as its own statement. */
.stats{grid-template-columns:1fr}

@media (max-width:899px){
  html{scroll-snap-type:y proximity}
  .lrn{
    min-height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
    padding-top:calc(var(--topbar-h) + 28px);
    padding-bottom:calc(var(--tabbar-h) + 28px);
  }
  .lrn-flow footer{scroll-snap-align:start}
}

/* Wide enough for more than one idea at once: no snapping, and the odds
   can sit two across again. */
@media (min-width:900px){
  .stats{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-snap-type:none}
}

/* The auth pages have no top bar, so their back control sits above the
   wordmark. The header centres its text; this one thing stays left,
   where a back control belongs on every other screen. */
.auth-head{position:relative}
.auth-back{margin:0 auto 18px 0}

/* A sub-page has no tab bar, so the sections should not reserve room
   for one. */
body.no-tabs .lrn{padding-bottom:var(--lsec-y)}

.hist-more{display:flex;justify-content:center;padding:18px 14px 6px}

/* Where a list came from, when there is more than one possible answer. */
.hist-source{
  display:flex;align-items:center;gap:12px;
  margin:14px 14px 18px;padding:11px 12px;
  background:var(--surface);border:1px solid var(--line-soft);
}
.hist-source span{flex:1;min-width:0;font-size:11.5px;color:var(--muted);line-height:1.5}
.hist-source .btn-mini{flex:none}

/* ---------------- returning from Google ----------------
   The page under the redirect is the sign-in form the customer has just
   finished with, and the session takes a round trip to adopt. Hiding the
   form for that moment is the difference between a welcome and an app
   that appears to have bounced you back to where you started.

   The ground is painted immediately so there is no white frame, and the
   splash that app.js raises sits outside .app, so it stays visible. */
html[data-oauth] .app{visibility:hidden}
html[data-oauth],html[data-oauth] body{background:var(--bg)}

/* A mark on screen from the first paint, drawn in CSS because the real
   splash cannot exist until app.js has loaded, and the second of dark
   nothing before it does reads as a page that failed rather than one
   that is working. Same dot and expanding ring the splash uses, so when
   the real one takes over (z-index 100, above this) nothing jumps. */
html[data-oauth]::before{
  content:"";position:fixed;inset:0;background:var(--bg);z-index:90;
}
html[data-oauth]::after{
  content:"";position:fixed;top:50%;left:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--accent);z-index:91;
  animation:oauthping 1.9s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes oauthping{
  0%{box-shadow:0 0 0 0 var(--accent-soft)}
  70%{box-shadow:0 0 0 30px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
@media (prefers-reduced-motion:reduce){
  html[data-oauth]::after{animation:none}
}

/* ---------------- the presentation marker ----------------
   On screen whenever VIP demo mode is on. Amber rather than accent
   coloured: it is a state that needs noticing, not a feature being
   advertised, and it has to survive being watched on a phone camera in a
   bright room. */
.demo-badge{
  flex:none;margin-left:8px;padding:4px 8px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;
  color:#fff;background:var(--warn);white-space:nowrap;
}
@media (max-width:420px){
  .demo-badge{margin-left:6px;padding:3px 6px;font-size:9px}
}

/* A row that is listed but not available yet. Dimmed rather than hidden:
   an option that vanishes and comes back looks like the rules changed. */
.row.is-off{opacity:.45;pointer-events:none}
.row.is-off .badge{color:var(--muted);border-color:var(--line)}



/* ================================================================
   Trading screen, in the orbis manner
   Appended last on purpose: it restates a handful of components
   (bottom bar, contract tabs, instrument chip, trade buttons) rather
   than editing each of the layers above, so the whole look lives in
   one place and can be read, or reverted, as a unit.
   ================================================================ */

/* ---- bottom bar: a shelf fixed to the bottom edge, edge to edge ---- */
:root{--tabbar-h:58px}
.tabbar{
  left:0;right:0;bottom:0;transform:none;
  width:auto;max-width:none;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding:0 0 env(safe-area-inset-bottom);gap:0;border-radius:0;
  background:var(--surface);border:0;border-top:1px solid var(--line);
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.tabbar a{height:var(--tabbar-h);border-radius:0;gap:4px;padding:0 2px 6px;color:var(--muted)}
.tabbar a::before{display:none}
.tabbar .tb-lab{font-size:10px;letter-spacing:0;text-transform:none;font-weight:500}
/* Set apart from the page by a faint tint and a soft lift, rather than
   a hairline that disappears against a white screen. */
.tabbar{background:var(--surface-2);box-shadow:0 -2px 10px rgba(0,0,0,.06)}
/* Larger glyphs: 21px read as small at arm's length on a phone. */
.tabbar .tb-ico{width:26px;height:26px}
.tabbar .tb-ico svg{width:26px;height:26px}
.tabbar a.active{color:var(--text)}
.tabbar a.active .tb-lab{font-weight:600}
/* The chosen tab: its icon sits in a small green-tinted pill, so it
   is found at a glance without a filled block shouting about it. */
.tabbar a.active .tb-ico{color:var(--accent)}
.tabbar a.active .tb-ico::before{
  content:"";position:absolute;left:50%;top:50%;width:52px;height:30px;
  transform:translate(-50%,-50%);border-radius:999px;background:var(--accent-soft);z-index:-1;
}
.tabbar .tb-ico{position:relative;z-index:0}
.tabbar a:active{transform:none;opacity:.7}

/* ---- the three contracts: plain labels, a green underline for the chosen one ---- */
.ctabs{background:var(--surface);border-bottom:1px solid var(--line)}
.ctab{padding:10px 6px 11px;font-size:12px;font-weight:500;color:var(--muted);gap:6px}
.ctab + .ctab::before{display:none}
.ctab-ico{color:var(--muted)}
.ctab:hover{color:var(--text)}
.ctab.active{background:none;color:var(--text);font-weight:600}
.ctab.active .ctab-ico{color:var(--accent-fill)}
.ctab::after,.ctab.active::after{
  left:22%;right:22%;bottom:0;width:auto;height:2px;margin:0;border-radius:0;opacity:1;
}
.ctab.active::after{background:var(--accent-fill)}
@media (max-width:899px){
  .ctab{padding:10px 4px 11px;font-size:11.5px}
}
@media (min-width:900px){
  .terminal .col-right .ctabs{border:1px solid var(--line);padding:10px 0 4px}
  .terminal .col-right .ctab{padding:10px 14px;font-size:13px;font-weight:500}
  .terminal .col-right .ctab.active{background:var(--surface-2);color:var(--text);font-weight:600}
  .terminal .col-right .ctab.active .ctab-ico{color:var(--accent-fill)}
  .terminal .col-right .ctab.active::after{left:0;right:auto;top:0;bottom:0;width:2px;height:auto;background:var(--accent-fill)}
}

/* ---- the instrument chip over the chart: one compact line and a quiet figure ---- */
.chart-head{top:8px;left:8px;width:min(212px,60%)}
.chart-inst .sel-btn{
  padding:4px 8px;font-size:11px;letter-spacing:.01em;color:var(--text);
  background:var(--surface);border-color:var(--line);
}
.chart-inst .sel-btn svg{width:13px;height:13px}
.chart-inst .sel-btn:hover,.chart-inst.open .sel-btn{background:var(--surface);border-color:var(--text-2)}
.inst-live{padding:3px 8px;font-size:10.5px;background:var(--surface);border-color:var(--line)}
.inst-live .c{font-size:10px}

/* ---- trade buttons: shorter, flat, square, green and red ---- */
.trade-actions{gap:8px}
.tbtn{
  padding:6px 10px 7px;border-radius:0;box-shadow:none;
  transition:background .15s ease, opacity .15s ease;
}
.tbtn .t{font-size:13.5px;letter-spacing:.04em}
.tbtn .s.payout{font-size:10.5px;margin-top:1px}
.tbtn.even{background:var(--accent-fill)}
.tbtn.even:hover{background:var(--accent-fill-2)}
.tbtn.odd{background:var(--odd-fill)}
.tbtn.odd:hover{background:var(--odd-fill-2)}
.tbtn:active{filter:none;transform:none;opacity:.9}
@media (min-width:900px){
  .terminal .col-right .trade-actions{gap:8px}
  .terminal .col-right .tbtn{padding:7px 12px 8px}
  .terminal .col-right .tbtn .t{font-size:14px}
  .terminal .col-right .tbtn .s.payout{font-size:11px;margin-top:1px}
}
/* the chosen side of a toggle is a flat green fill, no glow */
.seg button.active::before{box-shadow:none}

/* On a phone the two buttons stay on screen: fixed just above the
   bottom bar, on their own white shelf, with the ticket scrolling
   under them. The terminal leaves their height clear at its foot. */
@media (max-width:899px){
  .trade-dock{
    position:fixed;left:0;right:0;z-index:44;
    bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding:8px 10px;background:var(--surface);border-top:1px solid var(--line);
  }
  .terminal{padding-bottom:64px}
}



/* ================================================================
   Trading pop-ups and the result card, in the orbis manner
   Same words and figures as before; only how they are drawn changes.
   ================================================================ */

/* ---- the banner a settled contract raises, and the per-tick call ----
   A small card under the top bar in the page's own colours: a coloured
   edge says won or lost, the stamp and the instrument sit on the left,
   the money on the right. */
.flash{
  top:calc(var(--topbar-h) + 10px);
  width:min(360px, calc(100vw - 24px));
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:14px;
  padding:10px 14px 10px 16px;border-radius:0;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.12);
}
.flash.win{border-left-color:var(--pos)}
.flash.loss{border-left-color:var(--neg)}
.flash.order{border-left-color:var(--text-2)}
.flash .flash-k{
  grid-column:1;font-size:10px;letter-spacing:.1em;color:var(--muted);
}
.flash .flash-n{
  grid-column:1;margin-top:2px;font-size:12.5px;color:var(--text);
}
.flash .flash-v{
  grid-column:2;grid-row:1 / span 2;margin:0;font-size:15px;color:var(--text);text-align:right;
}
.flash.win .flash-v{color:var(--pos)}
.flash.loss .flash-v{color:var(--neg)}
/* the tick call is the quieter of the two: tighter, lighter shadow */
.flash.tickpop{
  width:min(320px, calc(100vw - 24px));padding:7px 12px 7px 14px;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.08);
}
.flash.tickpop .flash-n{font-size:12px}
.flash.tickpop .flash-v{font-size:14px}
:root[data-theme="dark"] .flash{box-shadow:0 12px 32px rgba(0,0,0,.45)}

/* ---- a running side: near-black, with the time left drawn in green ---- */
.tbtn.stop{background:var(--text);color:var(--bg)}
.tbtn.stop:hover{background:var(--text)}
.tbtn-bar{height:3px;background:var(--accent-fill)}

/* ---- the result card ----
   A plain panel: a tinted disc with the mark, the headline, the money
   in green or red, the figures as rows, and one button. */
.modal-box.modal-hero{max-width:380px}
.hero-card{
  border-radius:0;padding:28px 22px 20px;border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.hero-mark{
  width:60px;height:60px;margin:0 auto 16px;border:none;box-shadow:none;
  background:var(--pos-soft);color:var(--pos);
}
.hero-card.bad .hero-mark{border:none;box-shadow:none;background:var(--neg-soft);color:var(--neg)}
.hero-mark svg{width:28px;height:28px;stroke-width:2.2}
.hero-title,.hero-card.bad .hero-title{font-size:17px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.hero-amount{margin-top:8px;font-size:28px;font-weight:600;font-family:var(--mono)}
.hero-rows{margin:20px 0 18px;padding:0;border-radius:0;background:none;border-top:1px solid var(--line-soft)}
.hero-row{padding:10px 0}
.hero-row + .hero-row{border-top:1px solid var(--line-soft)}
.hero-row > span{font-size:13px;color:var(--muted)}
.hero-row b{font-size:13.5px;font-weight:600;color:var(--text);font-family:var(--mono)}
.hero-close{
  padding:13px 18px;border-radius:0;font-size:14px;font-weight:600;
  background:var(--accent-fill);color:#fff;
}
.hero-close:hover{background:var(--accent-fill-2)}
.hero-card.bad .hero-close{background:var(--text);color:var(--bg)}
.hero-card.bad .hero-close:hover{background:var(--text);opacity:.9}
@media (max-width:420px){
  .hero-card{padding:24px 18px 18px}
  .hero-mark{width:56px;height:56px;margin-bottom:14px}
  .hero-title{font-size:16.5px}
  .hero-amount{font-size:26px}
}

/* ---------------- first-run tour ----------------
   A dimmed screen with a hole cut over the real control, and one card
   beside it. The hole is a box with a shadow the size of the viewport,
   so the dimming follows the control without a mask or a canvas. */
.tour{position:fixed;inset:0;z-index:90;opacity:0;transition:opacity .2s ease}
.tour.open{opacity:1}
.tour-hole{
  position:fixed;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(8,10,12,.62),0 0 0 2px var(--accent-fill);
  transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease;
}
.tour.centred .tour-hole{top:50%;left:50%;width:0;height:0;box-shadow:0 0 0 9999px rgba(8,10,12,.62)}
.tour-card{
  position:fixed;width:min(340px,calc(100vw - 32px));
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:16px 16px 14px;box-shadow:0 18px 50px rgba(0,0,0,.28);outline:none;
  transition:top .25s ease,left .25s ease;
}
.tour.centred .tour-card{top:50%;left:50%;transform:translate(-50%,-50%)}
.tour-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tour-ico{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--accent-soft);color:var(--accent)
}
.tour-count{flex:1;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tour-x{
  display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;
  background:transparent;color:var(--muted);cursor:pointer
}
.tour-x:hover{background:var(--accent-soft);color:var(--text)}
.tour-title{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.tour-body{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.tour-dots{display:flex;gap:5px;margin:14px 0 12px}
.tour-dot{display:block;height:4px;flex:1 1 0;min-width:0;padding:0;margin:0;border-radius:2px;background:var(--line);transition:background .2s ease}
.tour-dot.is-done{background:var(--accent-soft)}
.tour-dot.is-on{background:var(--accent-fill)}
.tour-btns{display:flex;align-items:center;gap:8px}
.tour-btns button{
  height:38px;padding:0 14px;border-radius:10px;font:inherit;font-size:13.5px;
  font-weight:600;cursor:pointer
}
.tour-skip{margin-right:auto;border:0;background:transparent;color:var(--muted)}
.tour-skip:hover{color:var(--text)}
.tour-back{border:1px solid var(--line);background:transparent;color:var(--text)}
.tour-next{border:0;background:var(--accent-fill);color:var(--accent-ink)}
.tour-btns [hidden]{display:none}
.tour-btns .tour-back[hidden] + .tour-next{margin-left:auto}
@media (prefers-reduced-motion:reduce){
  .tour,.tour-hole,.tour-card{transition:none}
}

/* ---- light theme, matched to the reference screen ----
   White controls on the cool grey ground, thin grey borders, green for
   what is chosen. The real-account chip goes white like the reference,
   keeping its green label; the practice chip keeps its amber, which is
   what tells somebody the money is not real. */
:root[data-theme="light"] .acct.real{background:var(--surface);border-color:var(--line)}
:root[data-theme="light"] .acct.real:hover{background:var(--surface-2)}
:root[data-theme="light"] .stake{background:var(--surface)}
:root[data-theme="light"] .quick button{background:var(--surface);border-color:var(--line);color:var(--text)}
:root[data-theme="light"] .quick button:hover{border-color:var(--accent-fill);color:var(--accent)}

/* ---- no accidental zoom on phones ----
   Two taps in quick succession on a button (the stake steps, the trade
   buttons) made the browser double-tap zoom, and a zoomed page scrolls
   sideways, which reads as the bottom bar and the trade buttons coming
   loose. manipulation turns double-tap zoom off and leaves pinch zoom
   alone, so anybody who needs the text larger can still have it.

   iPhones also zoom in on any field under 16px the moment it is tapped:
   the target, stop and multiple boxes are 14.5px and the forms 12.5px.
   On touch screens they are 16px. */
html{touch-action:manipulation;overflow-x:clip}
@media (pointer:coarse){
  .tgt-v input,.input,.input.sm,textarea,select{font-size:16px}
}


/* ================================================================
   Light theme: softened corners, the contract tabs, the account chip
   The client's light screen has rounded cards and controls; the dark
   theme keeps its square edges. Appended last so it wins over the
   square rules above without editing each of them.
   ================================================================ */
:root[data-theme="light"]{--r-lg:14px;--r:10px;--r-sm:8px}

/* ---- the three contracts: green words, a light green slot, short rules between ---- */
:root[data-theme="light"] .ctab + .ctab::before{
  display:block;content:"";position:absolute;left:0;top:28%;bottom:28%;
  width:1px;background:var(--line);
}
:root[data-theme="light"] .ctab.active{color:var(--accent-fill);background:var(--accent-soft)}
:root[data-theme="light"] .ctab.active .ctab-ico{color:var(--accent-fill)}
@media (min-width:900px){
  :root[data-theme="light"] .terminal .col-right .ctab.active{background:var(--accent-soft);color:var(--accent-fill)}
}

/* ---- cards and controls with rounded corners ---- */
:root[data-theme="light"] .chart-card{
  margin:8px 10px 0;border:1px solid var(--line);border-radius:14px;
}
:root[data-theme="light"] .stake,
:root[data-theme="light"] .quick button,
:root[data-theme="light"] .method,
:root[data-theme="light"] .mkt-pick,
:root[data-theme="light"] .tbtn{border-radius:10px}
:root[data-theme="light"] .card,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .modal-box:not(.modal-hero),
:root[data-theme="light"] .flash{border-radius:14px}
:root[data-theme="light"] .hero-card{border-radius:18px}
:root[data-theme="light"] .hero-close{border-radius:10px}

/* ---- the top bar: rounded balance box and Deposit, a round menu button ---- */
:root[data-theme="light"] .topbar .acct,
:root[data-theme="light"] .topbar .btn-primary{border-radius:12px}
:root[data-theme="light"] .topbar .iconbtn{border-radius:12px}
:root[data-theme="light"] .topbar #menuBtn{border-radius:50%}

/* The flag in a circle, cropped from the middle of the rectangle. */
.acct-flag,
.topbar .acct-flag{
  width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
}
.acct-flag svg{width:auto;height:100%;max-width:none;flex:none}
@media (max-width:420px){
  .topbar .acct-flag{width:20px;height:20px}
}


/* ================================================================
   Withdraw: the available balance, the rail as tabs, the form on its
   own card, and a confirmation card with a green head.
   ================================================================ */
.wd{display:flex;flex-direction:column;gap:12px}
.wd-avail{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
}
.wd-avail-ico{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-fill);font-weight:600;font-size:17px;
}
.wd-avail-l{flex:1;min-width:0;font-size:13px;color:var(--text-2)}
.wd-avail b{font-size:20px;font-weight:700;color:var(--text);white-space:nowrap}
.wd-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wd-tab{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 6px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--text-2);font-size:13px;font-weight:600;
}
.wd-tab:hover{border-color:var(--accent-fill);color:var(--text)}
.wd-tab.active{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.wd-card{
  padding:16px 14px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
}
.wd-card label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.wd-card .input,.wd-card .saved-num{border-radius:10px}
.wd-amount{position:relative}
.wd-amount span{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-weight:600;font-size:16px;pointer-events:none;
}
.wd-amount .input{padding-left:32px;font-size:18px}
.wd-limits{display:flex;justify-content:space-between;margin-top:7px;font-size:12px;color:var(--muted)}
.wd-go{border-radius:10px;padding:15px;font-size:15px}
.wd-foot{margin:0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}

.wd-ok{
  overflow:hidden;border-radius:20px;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.22);
}
.wd-ok-head{
  position:relative;padding:30px 20px 22px;text-align:center;
  background:var(--accent-soft);border-bottom:1px solid color-mix(in srgb, var(--accent-fill) 22%, transparent);
}
.wd-ok-x{
  position:absolute;top:14px;right:14px;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;background:var(--text);color:var(--bg);
}
.wd-ok-mark{
  display:grid;place-items:center;width:84px;height:84px;margin:0 auto 16px;border-radius:50%;
  background:color-mix(in srgb, var(--accent-fill) 12%, transparent);
}
.wd-ok-mark i{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:color-mix(in srgb, var(--accent-fill) 18%, transparent);color:var(--accent-fill);
  border:2px solid color-mix(in srgb, var(--accent-fill) 45%, transparent);
}
.wd-ok-k{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-fill)}
.wd-ok-v{margin-top:6px;font-size:34px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.wd-ok-local{margin-top:4px;font-size:14px;color:var(--text-2)}
.wd-ok-body{display:flex;flex-direction:column;gap:10px;padding:18px 18px 20px}
.wd-ok-row{
  display:flex;align-items:center;gap:14px;padding:13px 14px;
  border-radius:12px;background:var(--surface-2);
}
.wd-ok-row > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.wd-ok-row small{font-size:12.5px;color:var(--muted)}
.wd-ok-row b{font-size:15px;font-weight:700;color:var(--text)}
.wd-ok-ico{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-fill);
}
.wd-ok-ico.time{background:var(--warn-soft);color:var(--warn)}
.wd-ok-note{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
  background:color-mix(in srgb, var(--accent-soft) 60%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-fill) 22%, transparent);
  font-size:13px;color:var(--text-2);
}
.wd-ok-note svg{flex:none;color:var(--accent-fill)}
.wd-ok .wd-go{margin-top:4px}


/* ---- withdraw: tighter, so the sheet fits without scrolling ---- */
.wd{gap:10px}
.wd-avail{padding:10px 14px}
.wd-avail-ico{width:34px;height:34px;font-size:16px}
.wd-avail b{font-size:18px}
.wd-tab{padding:9px 6px}
.wd-card.modal-form{gap:12px;padding:14px 14px 14px}
.wd-card .saved-num{padding-top:12px;padding-bottom:12px}
.wd-card .saved-num b{white-space:nowrap}
.wd-card .input{padding-top:11px;padding-bottom:11px}
.wd-limits{margin-top:6px}
.wd-go{padding:13px}
.modal-box:has(.wd){padding-top:14px;padding-bottom:14px}
.modal-box:has(.wd) .modal-head{margin-bottom:12px}

/* ---- the instrument mark: a green tile with the glyph in white ---- */
.sel-ico.inst-mark,
.sel-row .sel-ico.inst-mark,
.sel-row.on .sel-ico.inst-mark,
.sel-row:hover .sel-ico.inst-mark{
  display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:6px;
  background:var(--accent-fill);color:#fff;
}
.chart-inst .sel-btn .sel-ico.inst-mark{width:20px;height:20px;border-radius:5px}
.sel-ico.inst-mark svg,.sel-btn .sel-ico.inst-mark svg{width:14px;height:14px;color:#fff}

/* ---- light theme: the pop-ups in a dark slate so they stand out ---- */
:root[data-theme="light"] .flash{
  background:#14152B;border-color:#14152B;color:#fff;
  box-shadow:0 2px 6px rgba(16,24,40,.18), 0 16px 40px rgba(16,24,40,.32);
}
:root[data-theme="light"] .flash .flash-k{color:#A5A8C4}
:root[data-theme="light"] .flash .flash-n,
:root[data-theme="light"] .flash .flash-v{color:#fff}
:root[data-theme="light"] .flash.win{border-left-color:#34D399}
:root[data-theme="light"] .flash.loss{border-left-color:#FB7185}
:root[data-theme="light"] .flash.win .flash-v{color:#34D399}
:root[data-theme="light"] .flash.loss .flash-v{color:#FB7185}

:root[data-theme="light"]{
  --hero-bg:#14152B;
  --hero-panel:rgba(255,255,255,.06);
  --hero-good:#34D399;
  --hero-good-ink:#062A1C;
  --hero-bad:#FB7185;
  --hero-text:#C9CCE0;
  --hero-muted:#9396B3;
  --hero-line:rgba(255,255,255,.1);
}
:root[data-theme="light"] .hero-card{border-color:#14152B;box-shadow:0 24px 64px rgba(16,24,40,.45)}
:root[data-theme="light"] .hero-title,
:root[data-theme="light"] .hero-card.bad .hero-title{color:#fff}
:root[data-theme="light"] .hero-amount{color:var(--hero-good)}
:root[data-theme="light"] .hero-card.bad .hero-amount{color:var(--hero-bad)}
:root[data-theme="light"] .hero-mark{background:rgba(52,211,153,.14);color:var(--hero-good)}
:root[data-theme="light"] .hero-card.bad .hero-mark{background:rgba(251,113,133,.14);color:var(--hero-bad)}
:root[data-theme="light"] .hero-rows{background:var(--hero-panel);border-top:0;padding:4px 14px;border-radius:12px}
:root[data-theme="light"] .hero-row + .hero-row{border-top-color:var(--hero-line)}
:root[data-theme="light"] .hero-row > span{color:var(--hero-text)}
:root[data-theme="light"] .hero-row b{color:#fff}
:root[data-theme="light"] .hero-close{background:var(--hero-good);color:var(--hero-good-ink)}
:root[data-theme="light"] .hero-close:hover{background:var(--hero-good);filter:brightness(1.06)}
:root[data-theme="light"] .hero-card.bad .hero-close,
:root[data-theme="light"] .hero-card.bad .hero-close:hover{background:var(--hero-bad);color:#fff;opacity:1}

/* ---- light theme: digit circles with terminal contrast ----
   Neutral circles get a firmer grey ring and near-black figures; the
   most frequent digit is green, the least frequent red, and where the
   tick has landed is a green ring with its figure, share and arrow in
   green. Won and lost still fill the whole circle. */
:root[data-theme="light"] .digit{
  border:1.5px solid #D5D8E3;background:#fff;color:#101225;font-weight:600;
}
:root[data-theme="light"] .dpct{color:#4A4F68;font-weight:500}
:root[data-theme="light"] .dcell.hot .digit{border-color:#0B8A5A;color:#0B8A5A}
:root[data-theme="light"] .dcell.hot .dpct{color:#0B8A5A;font-weight:600}
:root[data-theme="light"] .dcell.cold .digit{border-color:#D6334B;color:#C52F48}
:root[data-theme="light"] .dcell.cold .dpct{color:#C52F48;font-weight:600}
:root[data-theme="light"] .dcell.cur .digit,
:root[data-theme="light"] .dcell.cur.sel .digit{
  border:2.5px solid #4F46E5;color:#4338CA;font-weight:700;background:#EEF0FF;
  box-shadow:0 0 0 3px rgba(79,70,229,.14);
}
:root[data-theme="light"] .dcell.cur .dpct{color:#4338CA;font-weight:700}
:root[data-theme="light"] .dcell.cur::after{border-bottom-color:#4F46E5}
:root[data-theme="light"] .dcell.sel .digit{border-color:#4F46E5;background:#EEF0FF;color:#4338CA}
:root[data-theme="light"] .dcell.cur.hit .digit,
:root[data-theme="light"] .dcell.cur.sel.hit .digit{
  border-color:var(--pos);background:var(--pos);color:#fff;
}
:root[data-theme="light"] .dcell.cur.miss .digit,
:root[data-theme="light"] .dcell.cur.sel.miss .digit{
  border-color:var(--neg);background:var(--neg);color:#fff;
  box-shadow:0 0 0 3px var(--neg-soft);
}
:root[data-theme="light"] .dcell.cur.miss .dpct{color:var(--neg)}
:root[data-theme="light"] .dcell.cur.miss::after{border-bottom-color:var(--neg)}


/* ================================================================
   ZovianBinary design layer
   Monochrome and flat. Neutral greys carry the whole interface; indigo
   is kept for the primary action and the price line, green and red for
   money won and lost, and nothing else is coloured, icons included.
   No shadows on anything that sits in the page. Corners are small and
   the same everywhere. Appended last so it wins as one unit.
   ================================================================ */

/* ---- palette ---- */
:root,:root[data-theme="light"]{
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F7F7F8;--surface-3:#EFEFF1;
  --line:#E7E7EA;--line-soft:#F0F0F2;
  --text:#0A0A0B;--text-2:#4B4B52;--muted:#737380;
  --accent:#4338CA;--accent-soft:#F1F1FD;--accent-fill:#4F46E5;--accent-fill-2:#4338CA;--accent-ink:#FFFFFF;
  --chart-bg:#FFFFFF;--chart-grid:#F2F2F4;--chart-axis:#8A8A96;
  --ctl:#F7F7F8;--ctl-line:#E7E7EA;--ctl-on:#FFFFFF;
  --tabbar-bg:#FFFFFF;--tabbar-line:#EDEDF0;
  --shadow:none;--shadow-lg:none;
  --r-lg:10px;--r:8px;--r-sm:6px;--tabbar-h:60px;
}
:root[data-theme="dark"]{
  --bg:#09090B;--surface:#111113;--surface-2:#17171A;--surface-3:#1E1E22;
  --line:#232327;--line-soft:#1A1A1E;
  --text:#F4F4F5;--text-2:#A1A1AA;--muted:#7C7C87;
  --accent:#A5A0FF;--accent-soft:#17162B;--accent-fill:#5B52F0;--accent-fill-2:#4F46E5;
  --chart-bg:#09090B;--chart-grid:#18181B;--chart-axis:#6B6B76;
  --ctl:#111113;--ctl-line:#232327;--ctl-on:#1E1E22;
  --tabbar-bg:#09090B;--tabbar-line:#1A1A1E;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#09090B;--surface:#111113;--surface-2:#17171A;--surface-3:#1E1E22;
    --line:#232327;--line-soft:#1A1A1E;
    --text:#F4F4F5;--text-2:#A1A1AA;--muted:#7C7C87;
    --accent:#A5A0FF;--accent-soft:#17162B;--accent-fill:#5B52F0;--accent-fill-2:#4F46E5;
    --chart-bg:#09090B;--chart-grid:#18181B;--chart-axis:#6B6B76;
    --ctl:#111113;--ctl-line:#232327;--ctl-on:#1E1E22;
    --tabbar-bg:#09090B;--tabbar-line:#1A1A1E;
  }
}

/* ---- type: Geist, set tight ---- */
:root{
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
body{letter-spacing:-.011em}
.num{letter-spacing:-.02em}
.label{letter-spacing:.06em;font-size:10.5px}
.page-head h1,.auth h1{font-weight:600;letter-spacing:-.035em}

/* ---- flat: nothing in the page casts a shadow ---- */
body *{box-shadow:none!important}
.tour-hole{box-shadow:0 0 0 9999px rgba(0,0,0,.6),0 0 0 1.5px var(--text)!important}
.tour.centred .tour-hole{box-shadow:0 0 0 9999px rgba(0,0,0,.6)!important}
.modal-bg,.scrim{background:rgba(0,0,0,.5);backdrop-filter:none;-webkit-backdrop-filter:none}
.btn,.btn-primary,.btn-fill,.tbtn{filter:none!important}


/* ---- top bar: plain ground and a hairline ---- */
.topbar{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line-soft)}
.brand-mark{border:1px solid var(--text);border-radius:6px;background:none;color:var(--text)}
.boot-word{font-weight:600;letter-spacing:-.02em;font-size:22px;color:var(--text)}
.wordmark .wm-name i{color:var(--muted)}
.acct,.acct.real,:root[data-theme="light"] .acct.real{background:var(--surface);border:1px solid var(--line)}
.acct:hover,.acct.real:hover{background:var(--surface-2)}
.acct.real .acct-kind{color:var(--muted)}

/* ---- buttons: flat fills, a hairline for the quiet ones ---- */
.btn-primary,.btn-fill{background:var(--accent-fill);color:#fff;border:0}
.btn-primary:hover,.btn-fill:hover{background:var(--accent-fill-2)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2)}
.btn:active,.btn-primary:active,.tbtn:active{transform:none;opacity:.85}
.tbtn{padding:9px 10px 10px}
.tbtn .t{letter-spacing:.01em;font-weight:600}

/* ---- surfaces: hairlines only ---- */
.card,.stat,.auth-card,.wd-card,.wd-avail,.method,.cell,
:root[data-theme="light"] .card,:root[data-theme="light"] .stat,:root[data-theme="light"] .auth-card{
  background:var(--surface);border:1px solid var(--line);
}
.chart-card,:root[data-theme="light"] .chart-card{
  margin:0;border:0;border-bottom:1px solid var(--line-soft);border-radius:0!important;
}
.modal-box,:root[data-theme="light"] .modal-box{border:1px solid var(--line)}
.method:hover,:root[data-theme="light"] .method:hover{background:var(--surface-2);border-color:var(--line)}

/* ---- fields ---- */
.input,:root[data-theme="light"] .input{background:var(--surface);border:1px solid var(--line)}
.input:focus,.otp input:focus,:root[data-theme="light"] .input:focus{border-color:var(--text);background:var(--surface)}

/* ---- toggles: a raised slot in the track, not a coloured pill ---- */
.seg{border-radius:var(--r);padding:3px;background:var(--surface-2);border:1px solid var(--line-soft);backdrop-filter:none}
.seg button,.seg button::before{border-radius:6px}
.seg button.active{color:var(--text);font-weight:600}
.seg button.active::before{background:var(--surface);border-color:var(--line)}
:root[data-theme="dark"] .seg button.active::before{background:var(--surface-3)}

/* ---- contract tabs: text and a thin rule under the chosen one ---- */
.ctabs,:root[data-theme="light"] .ctabs{background:var(--bg);border-bottom:1px solid var(--line-soft)}
.ctab + .ctab::before,:root[data-theme="light"] .ctab + .ctab::before{display:none}
.ctab.active,:root[data-theme="light"] .ctab.active{background:none;color:var(--text);font-weight:600;border-radius:0}
.ctab.active::after{background:var(--text)!important}
@media (min-width:900px){
  .terminal .col-right .ctabs{border:1px solid var(--line);border-radius:var(--r-lg)}
  .terminal .col-right .ctab.active,
  :root[data-theme="light"] .terminal .col-right .ctab.active{background:var(--surface-2);color:var(--text)}
}

/* ---- icons are never coloured ---- */
.ctab-ico,.sel-ico,.sel-row.on .sel-ico,.sel-row:hover .sel-ico,.sel-row svg,
.notice svg,.dropzone > svg,.scan-note > svg,.risk-strip svg,.wd-ok-note svg,
.rnav.on .rnav-ico,.drawer .ditem.active svg{color:currentColor}
.ctab.active .ctab-ico,.terminal .col-right .ctab.active .ctab-ico,
:root[data-theme="light"] .ctab.active .ctab-ico{color:var(--text)}
.tool > svg,.tour-ico,.trow .ico.live,.wd-avail-ico,.wd-ok-ico,.avatar{background:var(--surface-2);color:var(--text-2)}
.cp-iconbtn:hover{background:var(--surface-2);color:var(--text)}
.sel-ico.inst-mark,.sel-row .sel-ico.inst-mark,.sel-row.on .sel-ico.inst-mark,.sel-row:hover .sel-ico.inst-mark{
  background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:6px;
}
.sel-ico.inst-mark svg,.sel-btn .sel-ico.inst-mark svg{color:var(--text)}
.wd-ok-mark{background:var(--surface-2)}
.wd-ok-mark i{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.wd-ok-head{background:var(--surface-2);border-bottom:1px solid var(--line)}
.wd-ok-k{color:var(--text-2)}
.wd-tab.active{background:var(--text);border-color:var(--text);color:var(--bg)}
.wd-tab:hover{border-color:var(--text)}
.drawer{--d-accent:var(--text);--d-accent-bg:var(--surface-2);--d-accent-line:var(--line)}

/* ---- bottom bar: Material Symbols, outline at rest, filled when chosen ---- */
.msym{
  font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;
  font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;
  display:inline-block;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24;
  width:1em;height:1em;overflow:hidden;
}
.tabbar{
  background:var(--tabbar-bg);border-top:1px solid var(--tabbar-line);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.tabbar a{gap:3px;padding:0 2px 4px;color:var(--muted)}
.tabbar a::after,.tabbar a.active::after{display:none}
.tabbar .tb-ico{width:26px;height:26px;display:grid;place-items:center}
.tabbar .tb-ico::before,.tabbar a.active .tb-ico::before{display:none!important}
.tabbar .msym{font-size:26px}
.tabbar .tb-lab{font-size:10.5px;font-weight:500;letter-spacing:0}
.tabbar a.active,.tabbar a.active .tb-ico{color:var(--text)}
.tabbar a.active .tb-lab{color:var(--text);font-weight:600}
.tabbar a.active .msym,.rnav.on .msym{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
.rnav-ico .msym{font-size:22px}
.tabbar a:active{opacity:.6}

@media (max-width:899px){
  .trade-dock{background:var(--bg);border-top:1px solid var(--line-soft);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---- pop-ups in light: ink on white, the inverse of the page ---- */
:root[data-theme="light"] .flash{background:var(--text);border-color:var(--text)}

/* ---- loaders in the neutral ink, so nothing waiting is coloured ---- */
:root{--loader:var(--text)}
.nloader::before{border-width:2px}

/* ---- the chart is the line and nothing behind it ---- */
.chart-map{display:none}

/* ---- run settings: neutral cells, only the figure carries meaning ---- */
.tgt.pos,.tgt.neg,.tgt.warn{background:var(--surface)}
.targets{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tgt + .tgt{border-left:1px solid var(--line)}
.tgt.pos .tgt-l,.tgt.neg .tgt-l,.tgt.warn .tgt-l{color:var(--muted)}
.tgt.warn .tgt-v i,.tgt.warn .tgt-v input{color:var(--text)}

/* ---- the live digit in the brand, not a yellow ring ---- */
:root[data-theme="dark"]{--tick:#A5A0FF;--tick-line:#A5A0FF;--tick-ink:#09090B;--tick-text:#A5A0FF;--tick-soft:#17162B}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--tick:#A5A0FF;--tick-line:#A5A0FF;--tick-ink:#09090B;--tick-text:#A5A0FF;--tick-soft:#17162B}
}


/* ================================================================
   Monochrome pass
   Square corners, Inter, warm neutrals, and one colour. Indigo is the
   brand and appears on the primary action and the price line. Green and
   red survive only as the colour of a figure that is money won or lost:
   never as a background, a ring, a border or a button. Amber, yellow and
   violet are gone; what they marked is now said in grey and in words.
   ================================================================ */

/* ---- palette: warm stone greys, as in the reference ---- */
:root,:root[data-theme="light"]{
  --bg:#FAFAF9;--surface:#FFFFFF;--surface-2:#F5F5F3;--surface-3:#ECECE9;
  --line:#E4E4E0;--line-soft:#EDEDEA;
  --text:#1C1C1C;--text-2:#5E5E59;--muted:#93928C;
  --chart-bg:#FAFAF9;--chart-grid:#EFEFEC;--chart-axis:#93928C;
  --chart-fill:rgba(79,70,229,.08);
  --ctl:#FFFFFF;--ctl-line:#E4E4E0;--ctl-on:#F5F5F3;
  --tabbar-bg:#FFFFFF;--tabbar-line:#E4E4E0;
  --pos:#15803D;--neg:#C2410C;
}
:root[data-theme="dark"]{
  --bg:#111110;--surface:#161615;--surface-2:#1C1C1B;--surface-3:#232322;
  --line:#2A2A28;--line-soft:#1F1F1E;
  --text:#F2F1ED;--text-2:#A8A7A0;--muted:#7B7A74;
  --chart-bg:#111110;--chart-grid:#1C1C1B;--chart-axis:#6E6D68;
  --chart-fill:rgba(165,160,255,.07);
  --ctl:#161615;--ctl-line:#2A2A28;--ctl-on:#232322;
  --tabbar-bg:#111110;--tabbar-line:#232322;
  --pos:#4ADE80;--neg:#F87171;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111110;--surface:#161615;--surface-2:#1C1C1B;--surface-3:#232322;
    --line:#2A2A28;--line-soft:#1F1F1E;
    --text:#F2F1ED;--text-2:#A8A7A0;--muted:#7B7A74;
    --chart-bg:#111110;--chart-grid:#1C1C1B;--chart-axis:#6E6D68;
    --chart-fill:rgba(165,160,255,.07);
    --ctl:#161615;--ctl-line:#2A2A28;--ctl-on:#232322;
    --tabbar-bg:#111110;--tabbar-line:#232322;
    --pos:#4ADE80;--neg:#F87171;
  }
}
/* No tints, no amber, no violet, no yellow: every one of these now
   resolves to a neutral. */
:root,:root[data-theme]{
  --pos-soft:var(--surface-2);--neg-soft:var(--surface-2);
  --warn:var(--text-2);--warn-soft:var(--surface-2);
  --again:var(--text);--again-soft:var(--surface-2);
  --tick:var(--text);--tick-line:var(--text);--tick-ink:var(--bg);
  --tick-text:var(--text);--tick-soft:var(--surface-2);
  --pos-deep:var(--text);--neg-deep:var(--text);
  --flash-win:var(--pos);--flash-loss:var(--neg);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --pos-soft:var(--surface-2);--neg-soft:var(--surface-2);
    --warn:var(--text-2);--warn-soft:var(--surface-2);
    --again:var(--text);--again-soft:var(--surface-2);
    --tick:var(--text);--tick-line:var(--text);--tick-ink:var(--bg);
    --tick-text:var(--text);--tick-soft:var(--surface-2);
  }
}

/* ---- type: Inter ---- */
:root{
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
.num,.mono,[class*="num"]{font-variant-numeric:tabular-nums}
body{letter-spacing:-.006em}

/* ---- square, everywhere ---- */
:root,:root[data-theme]{--r-lg:0px;--r:0px;--r-sm:0px}
body *,body *::before,body *::after{border-radius:0!important}
.nloader::before,.nloader::after{border-radius:50%!important}
.digit,.acct-flag,.avatar,.coin,.feed i,.acct-dot,.spin,.switch::after{border-radius:50%!important}
.switch{border-radius:999px!important}

/* ---- the only filled buttons: brand for go, ink for the other side ---- */
.btn-primary,.btn-fill,.wd-go,.hero-close,.tour-next{background:var(--accent-fill)!important;color:#fff!important}
.tbtn.even{background:var(--accent-fill)}
.tbtn.even:hover{background:var(--accent-fill-2)}
.tbtn.odd,.tbtn.odd:hover{background:var(--text);color:var(--bg)}
.tbtn.odd *{color:var(--bg)}
.tbtn.stop,.tbtn.stop:hover{background:var(--surface-3);color:var(--text)}
.tbtn.stop *{color:var(--text)}
.tbtn-bar{background:var(--text)}
.hero-card.bad .hero-close,.hero-card.bad .hero-close:hover,
:root[data-theme="light"] .hero-card.bad .hero-close{background:var(--text)!important;color:var(--bg)!important}

/* ---- the account chip: one neutral box whatever the account ---- */
.acct,.acct.real,.acct.demo,:root[data-theme="light"] .acct.real{background:var(--surface);border:1px solid var(--line)}
.acct .acct-kind,.acct.real .acct-kind,.acct.demo .acct-kind{color:var(--muted)}
.acct-dot,.acct.demo .acct-dot{background:var(--text)}

/* ---- digits: grey circles, ink for the live one ---- */
.digit,:root[data-theme="light"] .digit{border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:500}
.dpct,:root[data-theme="light"] .dpct{color:var(--muted);font-weight:400}
.dcell.hot .digit,.dcell.cold .digit,
:root[data-theme="light"] .dcell.hot .digit,:root[data-theme="light"] .dcell.cold .digit{border-color:var(--line);color:var(--text)}
.dcell.hot .dpct,:root[data-theme="light"] .dcell.hot .dpct{color:var(--text);font-weight:600}
.dcell.cold .dpct,:root[data-theme="light"] .dcell.cold .dpct{color:var(--muted);font-weight:400}
.dcell.cur .digit,.dcell.cur.sel .digit,
:root[data-theme="light"] .dcell.cur .digit,:root[data-theme="light"] .dcell.cur.sel .digit{
  border:1.5px solid var(--text);background:var(--surface);color:var(--text);font-weight:700;
}
.dcell.cur .dpct,:root[data-theme="light"] .dcell.cur .dpct{color:var(--text);font-weight:600}
.dcell.cur::after,:root[data-theme="light"] .dcell.cur::after{border-bottom-color:var(--text)}
.dcell.sel .digit,:root[data-theme="light"] .dcell.sel .digit{border-color:var(--accent-fill);background:var(--surface);color:var(--accent)}
.dcell.sel .dpct{color:var(--accent)}
.dcell.cur.hit .digit,.dcell.cur.sel.hit .digit,
:root[data-theme="light"] .dcell.cur.hit .digit,:root[data-theme="light"] .dcell.cur.sel.hit .digit{background:var(--text);border-color:var(--text);color:var(--bg)}
.dcell.cur.miss .digit,.dcell.cur.sel.miss .digit,
:root[data-theme="light"] .dcell.cur.miss .digit,:root[data-theme="light"] .dcell.cur.sel.miss .digit{background:var(--surface);border-color:var(--muted);color:var(--muted)}
.dcell.cur.miss .dpct,:root[data-theme="light"] .dcell.cur.miss .dpct{color:var(--muted)}
.dcell.cur.miss::after,:root[data-theme="light"] .dcell.cur.miss::after{border-bottom-color:var(--muted)}

/* ---- run settings: labels in grey, figures in ink ---- */
.tgt .tgt-l,.tgt.pos .tgt-l,.tgt.neg .tgt-l,.tgt.warn .tgt-l{color:var(--muted)}
.tgt .tgt-v i,.tgt .tgt-v input,
.tgt.pos .tgt-v i,.tgt.pos .tgt-v input,.tgt.neg .tgt-v i,.tgt.neg .tgt-v input,
.tgt.warn .tgt-v i,.tgt.warn .tgt-v input{color:var(--text)}
.tgt .tgt-v i{color:var(--muted)}

/* ---- toggles and tabs in ink ---- */
.seg button.active::before{background:var(--text)!important;border-color:var(--text)!important}
.seg button.active{color:var(--bg)!important}
.wd-tab.active{background:var(--text);color:var(--bg)}

/* ---- coins: a grey disc, the letter in ink ---- */
.coin{background:var(--surface-3)!important;color:var(--text)!important}

/* ---- notices: grey, never amber ---- */
.conn-banner{background:var(--text);color:var(--bg)}
.conn-banner .spin{border-color:color-mix(in srgb, var(--bg) 30%, transparent);border-top-color:var(--bg);border-right-color:var(--bg)}

/* ---- the result card and the banner: the page's own surface ---- */
:root[data-theme="light"]{
  --hero-bg:var(--surface);--hero-panel:var(--surface-2);--hero-good:var(--pos);--hero-good-ink:#fff;
  --hero-bad:var(--neg);--hero-text:var(--text-2);--hero-muted:var(--muted);--hero-line:var(--line);
}
:root[data-theme="light"] .hero-card{background:var(--surface);border-color:var(--line)}
:root[data-theme="light"] .hero-title,:root[data-theme="light"] .hero-card.bad .hero-title,
:root[data-theme="light"] .hero-row b{color:var(--text)}
.hero-mark,.hero-card.bad .hero-mark,
:root[data-theme="light"] .hero-mark,:root[data-theme="light"] .hero-card.bad .hero-mark{background:var(--surface-2);color:var(--text)}
.flash,:root[data-theme="light"] .flash{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--text);color:var(--text)}
.flash.win,.flash.loss,:root[data-theme="light"] .flash.win,:root[data-theme="light"] .flash.loss{border-left-color:var(--text)}
:root[data-theme="light"] .flash .flash-k{color:var(--muted)}
:root[data-theme="light"] .flash .flash-n,:root[data-theme="light"] .flash .flash-v{color:var(--text)}
.flash.win .flash-v,:root[data-theme="light"] .flash.win .flash-v{color:var(--pos)}
.flash.loss .flash-v,:root[data-theme="light"] .flash.loss .flash-v{color:var(--neg)}

/* ---- the price tag on the axis in ink, the line keeps the brand ---- */
.wordmark .wm-name b{font-weight:700;letter-spacing:-.03em}
.wordmark .wm-name i{font-style:normal;font-weight:400;color:var(--muted)}

/* ---- drawer: the page's own greys, nothing tinted ---- */
.drawer,:root[data-theme] .drawer{
  --d-bg:var(--bg);--d-surface:var(--surface-2);--d-line:var(--line);--d-line-soft:var(--line-soft);
  --d-text:var(--text);--d-text-2:var(--text-2);--d-muted:var(--muted);
  --d-accent:var(--text);--d-accent-bg:var(--surface-2);--d-accent-line:var(--line);
  --d-danger:var(--text-2);--d-danger-2:var(--text);--d-danger-bg:var(--surface-2);
  background:var(--bg);
}
.drawer .avatar,.avatar{background:var(--surface-3);border:1px solid var(--line);color:var(--text)}
.ditem.danger,.ditem.danger:hover{color:var(--text-2)}

/* ---- switches: ink when on ---- */
.switch[aria-checked="true"],.drawer .switch[aria-checked="true"]{background:var(--text);border-color:var(--text)}
.switch[aria-checked="true"]::after,.drawer .switch[aria-checked="true"]::after{background:var(--bg)}

/* ---- method rows: a plain square for the icon ---- */
.method .ico{background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:0!important}

/* ---- the digit to match / barrier: ten circles, like the digit row ---- */
.numline{gap:6px;justify-items:center;padding:4px 0 8px}
.nb{
  width:100%;max-width:32px;height:auto;aspect-ratio:1;border-radius:50%!important;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);font-family:var(--sans);
}
.nb:hover{transform:none;border-color:var(--text);color:var(--text)}
.nb.on{transform:none;background:var(--surface);border:1.5px solid var(--accent-fill);color:var(--accent);font-weight:600}
.nb.on::after{display:none}

/* ---- no boxes or rules where a plain icon will do ---- */
.topbar .iconbtn,.back-btn,.auth-back{background:none;border:0}
.topbar .iconbtn:hover,.back-btn:hover{background:var(--surface-2)}
.dgroup-body{border-left:0;margin-left:0;padding-left:18px}
.drawer-user,.drawer .drawer-user{border-bottom:0;background:none}
.drawer-foot,.drawer .drawer-foot{border-top:0}
.chart-tools{border:0;background:none}
.chart-tools button+button{border-top:0}

/* ---- the contract switch: a pane of frosted glass ----
   A translucent track with a bright top edge, and the chosen contract a
   lighter pane lifted inside it. The glass is drawn with translucency,
   a blur and inset highlights, never with colour. */
:root,:root[data-theme="light"]{
  --glass-track:linear-gradient(180deg, rgba(255,255,255,.75), rgba(244,244,241,.55));
  --glass-line:rgba(28,28,28,.08);
  --glass-hi:rgba(255,255,255,.95);
  --glass-on:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.7));
  --glass-on-line:rgba(28,28,28,.10);
  --glass-drop:rgba(28,28,28,.06);
}
:root[data-theme="dark"]{
  --glass-track:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --glass-line:rgba(255,255,255,.08);
  --glass-hi:rgba(255,255,255,.10);
  --glass-on:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  --glass-on-line:rgba(255,255,255,.14);
  --glass-drop:rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --glass-track:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    --glass-line:rgba(255,255,255,.08);
    --glass-hi:rgba(255,255,255,.10);
    --glass-on:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
    --glass-on-line:rgba(255,255,255,.14);
    --glass-drop:rgba(0,0,0,.35);
  }
}
@media (max-width:899px){
  body .ctabs,:root[data-theme] body .ctabs{
    margin:8px 10px 6px;padding:4px;gap:4px;
    background:var(--glass-track);border:1px solid var(--glass-line);
    border-radius:14px!important;
    backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
    box-shadow:inset 0 1px 0 var(--glass-hi)!important;
  }
  body .ctab,:root[data-theme] body .ctab{
    padding:8px 4px;border-radius:10px!important;font-size:11.5px;font-weight:500;color:var(--muted);
    transition:background .2s ease,color .2s ease;
  }
  body .ctab::after,body .ctab.active::after,body .ctab + .ctab::before{display:none}
  body .ctab.active,:root[data-theme] body .ctab.active{
    background:var(--glass-on);color:var(--text);font-weight:600;
    border:1px solid var(--glass-on-line);
    box-shadow:inset 0 1px 0 var(--glass-hi),0 2px 8px var(--glass-drop)!important;
  }
  body .ctab:not(.active){border:1px solid transparent}
  body .ctab .ctab-ico{display:none}
  body .ctabs,:root[data-theme] body .ctabs{margin:6px 10px 4px}
}

/* ---- trade buttons: green for the first side, red for the second ---- */
:root,:root[data-theme]{--buy:#16A34A;--buy-2:#15803D;--sell:#DC2626;--sell-2:#B91C1C}
.tbtn.even,.tbtn.even:hover{background:var(--buy);color:#fff}
.tbtn.even:hover{background:var(--buy-2)}
.tbtn.odd,.tbtn.odd:hover{background:var(--sell);color:#fff}
.tbtn.odd:hover{background:var(--sell-2)}
.tbtn.even *,.tbtn.odd *{color:#fff}

/* ---- badges and danger rows in grey: the words carry the meaning ---- */
.badge,.badge.ok,.badge.warn,.badge.bad,.badge.info{background:var(--surface-2);color:var(--text-2);border:1px solid var(--line)}
.row.danger,.row.danger .t b,.row.danger .ico{color:var(--text-2)}
.row.danger:hover{background:var(--surface-2)}

/* ---- document pages: one plain column that reads top to bottom ----
   No full-screen snapping panels and no tinted bands; the sections are
   ordinary blocks on the page ground, separated by a hairline. */
html{scroll-snap-type:none}
.lrn,.lrn-tint,.lrn-blue,.lrn-purple{
  min-height:0!important;scroll-snap-align:none;scroll-snap-stop:normal;
  background:var(--bg)!important;color:var(--text);
  padding:28px 20px!important;justify-content:flex-start;
}
.lrn:first-of-type{padding-top:20px!important}
.lrn + .lrn,.lrn-tint + .lrn,.lrn + .lrn-tint{border-top:1px solid var(--line-soft)!important}
.lrn-tint h1,.lrn-tint h2,.lrn-tint h3,.lrn-tint b{color:var(--text)}
.lrn-tint p,.lrn-tint span,.lrn-tint .lede,.lrn-tint .card p,.lrn-tint .tool p{color:var(--text-2);opacity:1}
.lrn-tint .card svg,.lrn-tint .tool svg{color:var(--text-2);opacity:1}
.lrn-tint .card,.lrn-tint .stat{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.lrn-center{text-align:left}
.lrn-center .lrn-in{max-width:860px}
.lrn h2{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.lrn p{color:var(--text-2);line-height:1.65}

/* ---- the chart's backdrop: a faint Manhattan skyline on the floor ---- */
.chart-sky{
  position:absolute;left:0;right:0;bottom:22px;width:100%;height:62%;
  z-index:0;pointer-events:none;color:var(--text);opacity:.032;
}
:root[data-theme="dark"] .chart-sky{opacity:.04}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chart-sky{opacity:.04}}

/* ---- a taller chart, paid for by tightening what sits around it ---- */
#chart{height:clamp(170px, calc(64dvh - 168px), 330px)}
@media (max-width:899px){
  body .ctabs,:root[data-theme] body .ctabs{margin:4px 10px 2px}
  body .ctab,:root[data-theme] body .ctab{padding:7px 4px}
  .digits{padding:10px 10px 12px}
  .panel{gap:7px}
  .seg{margin:4px 0 0}
  .seg button{padding:7px 0 8px}
  .quick button{padding:6px 0}
  .tgt{padding:6px 4px 7px}
}

/* ---- top bar on inner pages: just the way back ---- */
.topbar-title{display:none}

/* ---- bottom bar: no pane behind the chosen tab; the solid icon and
   the heavier label say "you are here" ---- */
.tabbar a::before,.tabbar a.active::before{display:none!important}

/* ---- the mark beside the name ---- */
.wordmark{display:inline-flex;align-items:center;gap:7px}
.wordmark .wm-mark{width:1.45em;height:1.45em;flex:none;display:block;color:var(--text)}
.wordmark .wm-name{gap:0}

/* ---- digits in colour ----
   Green for the digit appearing most, red for the one appearing least,
   the brand indigo on the live digit, and the hit or miss in green or
   red as each tick lands. Every other digit stays neutral. */
:root,:root[data-theme]{--d-hot:#16A34A;--d-cold:#DC2626;--d-live:#4F46E5}
:root[data-theme="dark"]{--d-hot:#4ADE80;--d-cold:#F87171;--d-live:#8F86FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--d-hot:#4ADE80;--d-cold:#F87171;--d-live:#8F86FF}}
.dcell.hot .digit,:root[data-theme="light"] .dcell.hot .digit{border-color:var(--d-hot);color:var(--d-hot);background:color-mix(in srgb,var(--d-hot) 9%,var(--surface))}
.dcell.hot .dpct,:root[data-theme="light"] .dcell.hot .dpct{color:var(--d-hot);font-weight:600}
.dcell.cold .digit,:root[data-theme="light"] .dcell.cold .digit{border-color:var(--d-cold);color:var(--d-cold);background:color-mix(in srgb,var(--d-cold) 9%,var(--surface))}
.dcell.cold .dpct,:root[data-theme="light"] .dcell.cold .dpct{color:var(--d-cold);font-weight:600}
.dcell.cur .digit,.dcell.cur.sel .digit,
:root[data-theme="light"] .dcell.cur .digit,:root[data-theme="light"] .dcell.cur.sel .digit{border:1.5px solid var(--d-live);background:var(--d-live);color:#fff}
.dcell.cur .dpct,:root[data-theme="light"] .dcell.cur .dpct{color:var(--d-live)}
.dcell.cur::after,:root[data-theme="light"] .dcell.cur::after{border-bottom-color:var(--d-live)}
.dcell.cur.hit .digit,.dcell.cur.sel.hit .digit,
:root[data-theme="light"] .dcell.cur.hit .digit,:root[data-theme="light"] .dcell.cur.sel.hit .digit{background:var(--d-hot);border-color:var(--d-hot);color:#fff}
.dcell.cur.hit .dpct,:root[data-theme="light"] .dcell.cur.hit .dpct{color:var(--d-hot)}
.dcell.cur.hit::after,:root[data-theme="light"] .dcell.cur.hit::after{border-bottom-color:var(--d-hot)}
.dcell.cur.miss .digit,.dcell.cur.sel.miss .digit,
:root[data-theme="light"] .dcell.cur.miss .digit,:root[data-theme="light"] .dcell.cur.sel.miss .digit{background:var(--d-cold);border-color:var(--d-cold);color:#fff}
.dcell.cur.miss .dpct,:root[data-theme="light"] .dcell.cur.miss .dpct{color:var(--d-cold)}
.dcell.cur.miss::after,:root[data-theme="light"] .dcell.cur.miss::after{border-bottom-color:var(--d-cold)}
:root[data-theme="dark"] .dcell.cur .digit,:root[data-theme="dark"] .dcell.cur.hit .digit,:root[data-theme="dark"] .dcell.cur.miss .digit{color:#111110}


/* ================================================================
   ZovianBinary: the Orbis look
   Warm stone greys, one green, square corners, hairline panels, and
   monospace figures. The chart is a single line, never candles.
   Everything above is the shared base; this layer re-skins it.
   ================================================================ */
:root,:root[data-theme="light"]{
  --bg:#FAFAF9;--surface:#FFFFFF;--surface-2:#F3F2EF;--surface-3:#ECEAE5;
  --line:#E8E6E1;--line-soft:#F0EFEB;--line-strong:#C9C6BF;
  --text:#1C1C1C;--text-2:#5E5E59;--muted:#93928C;
  --accent:#00994F;--accent-soft:#E6F7EE;--accent-fill:#00994F;--accent-fill-2:#008545;--accent-ink:#FFFFFF;
  --pos:#00A861;--neg:#E0413F;
  --chart-bg:#FFFFFF;--chart-grid:#EDEBE6;--chart-axis:#93928C;
  --chart-line:#00994F;--chart-fill:rgba(0,153,79,.07);
  --ctl:#FFFFFF;--ctl-line:#E8E6E1;--ctl-on:#F3F2EF;
  --tabbar-bg:#FFFFFF;--tabbar-line:#E8E6E1;
  --buy:#00994F;--buy-2:#008545;--sell:#C93B39;--sell-2:#B13230;
  --d-hot:#00A861;--d-cold:#E0413F;--d-live:#1C1C1C;
}
:root[data-theme="dark"]{
  --bg:#171716;--surface:#1E1E1D;--surface-2:#272725;--surface-3:#2E2E2C;
  --line:#2E2E2C;--line-soft:#262625;--line-strong:#474743;
  --text:#EDECE8;--text-2:#A5A49E;--muted:#78776F;
  --accent:#00BF63;--accent-soft:#14312A;--accent-fill:#00994F;--accent-fill-2:#008545;--accent-ink:#FFFFFF;
  --pos:#00C26F;--neg:#F0514E;
  --chart-bg:#1E1E1D;--chart-grid:#2C2C2A;--chart-axis:#78776F;
  --chart-line:#00BF63;--chart-fill:rgba(0,191,99,.08);
  --ctl:#1E1E1D;--ctl-line:#2E2E2C;--ctl-on:#272725;
  --tabbar-bg:#1E1E1D;--tabbar-line:#2E2E2C;
  --buy:#00994F;--buy-2:#008545;--sell:#C93B39;--sell-2:#B13230;
  --d-hot:#00C26F;--d-cold:#F0514E;--d-live:#EDECE8;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#171716;--surface:#1E1E1D;--surface-2:#272725;--surface-3:#2E2E2C;
    --line:#2E2E2C;--line-soft:#262625;--line-strong:#474743;
    --text:#EDECE8;--text-2:#A5A49E;--muted:#78776F;
    --accent:#00BF63;--accent-soft:#14312A;--accent-fill:#00994F;--accent-fill-2:#008545;--accent-ink:#FFFFFF;
    --pos:#00C26F;--neg:#F0514E;
    --chart-bg:#1E1E1D;--chart-grid:#2C2C2A;--chart-axis:#78776F;
    --chart-line:#00BF63;--chart-fill:rgba(0,191,99,.08);
    --ctl:#1E1E1D;--ctl-line:#2E2E2C;--ctl-on:#272725;
    --tabbar-bg:#1E1E1D;--tabbar-line:#2E2E2C;
    --d-hot:#00C26F;--d-cold:#F0514E;--d-live:#EDECE8;
  }
}
:root{--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.num,.mono,.digit,.dpct{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---- the wordmark: lowercase Poppins, the second half underlined green ---- */
.wordmark .wm-name b,.wordmark .wm-name i{
  font-family:"Poppins","Inter",sans-serif;font-weight:700;font-style:normal;
  letter-spacing:-.035em;color:var(--text);
}
.wordmark .wm-name i{border-bottom:2.5px solid var(--accent);padding-bottom:2px}
.wordmark{font-size:19px}

/* ---- the contract switch: plain tabs, the chosen one outlined ---- */
@media (max-width:899px){
  body .ctabs,:root[data-theme] body .ctabs{
    margin:8px 10px 0;padding:6px 8px;gap:2px;background:var(--surface);
    border:1px solid var(--line);border-bottom:0;border-radius:0!important;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  body .ctab,:root[data-theme] body .ctab{
    padding:7px 4px;border:1px solid transparent;background:transparent;border-radius:0!important;
    font-size:12px;font-weight:600;color:var(--muted);
  }
  body .ctab.active,:root[data-theme] body .ctab.active{
    background:transparent;color:var(--text);border:1px solid var(--line-strong);
  }
}

/* ---- the chart: a bordered panel, green line on the stone ground ---- */
@media (max-width:899px){
  .chart-card,:root[data-theme="light"] .chart-card{
    margin:0 10px;border:1px solid var(--line);background:var(--chart-bg);
  }
}

/* ---- the digit row and the ticket sit in panels like the chart ---- */
@media (max-width:899px){
  .digits{margin:8px 10px 0;border:1px solid var(--line);background:var(--surface)}
  .panel{margin:8px 10px 0;border:1px solid var(--line);background:var(--surface);padding:10px}
}

/* ---- Auto / Manual: the chosen side on a grey ground, not inverted ---- */
.seg button.active::before{background:var(--surface-2)!important;border-color:var(--line)!important}
.seg button.active{color:var(--text)!important;font-weight:600}

/* ---- buttons: square, green ---- */
.btn-primary,.btn-fill,.wd-go,.hero-close,.tour-next{background:var(--accent-fill)!important;color:#fff!important}

/* ---- bottom bar: line icons, the active tab marked by a green dot ---- */
.tabbar{background:var(--tabbar-bg);border-top:1px solid var(--line)}
.tabbar .tb-ico{width:22px;height:22px}
.tabbar .tb-ico svg{width:20px;height:20px}
.tabbar a{color:var(--muted);position:relative}
.tabbar a.active,.tabbar a.active .tb-ico,.tabbar a.active .tb-lab{color:var(--text)}
.tabbar a.active::after{
  content:"";display:block!important;position:absolute;bottom:3px;left:50%;
  width:5px;height:5px;margin-left:-2.5px;background:var(--accent);border-radius:50%!important;
}
.tabbar .tb-lab{font-size:10.5px}


/* ================================================================
   Novi parity
   The pieces that carry meaning are coloured the way Novi colours
   them: the chosen contract is tinted in the brand colour, the
   instrument has a filled brand mark, and the three run limits read
   green, red and amber. Everything else keeps this site's own look.
   ================================================================ */
:root,:root[data-theme="light"]{
  --nv-pos:#007A50;--nv-pos-soft:#E8F7F0;--nv-neg:#D9363E;--nv-neg-soft:#FDECED;--nv-warn:#B45309;--nv-warn-soft:#FEF3C7;
}
:root[data-theme="dark"]{
  --nv-pos:#17A06A;--nv-pos-soft:#0E2B26;--nv-neg:#D9483F;--nv-neg-soft:#2E1A1C;--nv-warn:#F0CB4B;--nv-warn-soft:#2E2610;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --nv-pos:#17A06A;--nv-pos-soft:#0E2B26;--nv-neg:#D9483F;--nv-neg-soft:#2E1A1C;--nv-warn:#F0CB4B;--nv-warn-soft:#2E2610;
}}

/* ---- the contract switch: a flat bar, the chosen one tinted and underlined ---- */
html body .ctabs,html:root[data-theme] body .ctabs{
  margin:0!important;padding:0!important;gap:0!important;
  background:var(--surface)!important;border:0!important;border-bottom:1px solid var(--line)!important;
  border-radius:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;
}
html body .ctab,html:root[data-theme] body .ctab{
  position:relative;padding:11px 4px 12px!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;color:var(--muted)!important;font-weight:500;gap:6px;
}
html body .ctab .ctab-ico{display:flex!important;color:var(--muted)!important}
html body .ctab.active,html:root[data-theme] body .ctab.active{
  background:var(--accent-soft)!important;color:var(--accent)!important;font-weight:600;
}
html body .ctab.active .ctab-ico{color:var(--accent)!important}
html body .ctab.active::after,html:root[data-theme] body .ctab.active::after{
  content:""!important;display:block!important;position:absolute;left:22%;right:22%;bottom:0;top:auto;
  width:auto;height:2px;background:var(--accent)!important;opacity:1!important;border-radius:0!important;
}
html body .ctab + .ctab::before{display:none!important}

/* ---- the instrument: a filled brand square with a white line ---- */
.sel-ico.inst-mark,.sel-row .sel-ico.inst-mark,.sel-row.on .sel-ico.inst-mark,.sel-row:hover .sel-ico.inst-mark{
  background:var(--accent-fill)!important;border:0!important;color:#fff!important;
  width:20px;height:20px;align-items:center;justify-content:center;border-radius:4px!important;
}
.sel-ico.inst-mark svg,.sel-btn .sel-ico.inst-mark svg{color:#fff!important;width:14px;height:14px}

/* ---- the run limits: profit green, stop red, multiple amber ---- */
.targets .tgt.pos{background:var(--nv-pos-soft)!important}
.targets .tgt.neg{background:var(--nv-neg-soft)!important}
.targets .tgt.warn{background:var(--nv-warn-soft)!important}
.targets .tgt.pos .tgt-l,.targets .tgt.pos .tgt-v i,.targets .tgt.pos .tgt-v input{color:var(--nv-pos)!important;font-weight:600}
.targets .tgt.neg .tgt-l,.targets .tgt.neg .tgt-v i,.targets .tgt.neg .tgt-v input{color:var(--nv-neg)!important;font-weight:600}
.targets .tgt.warn .tgt-l,.targets .tgt.warn .tgt-v i,.targets .tgt.warn .tgt-v input{color:var(--nv-warn)!important;font-weight:600}
.targets .tgt + .tgt{border-left:1px solid var(--surface)!important}

/* ---- Auto / Manual: the chosen side filled in the brand colour, as on Novi ---- */
.seg button.active::before{background:var(--accent-fill)!important;border-color:var(--accent-fill)!important}
.seg button.active{color:#fff!important;font-weight:600}