/* ============================================================
   Nexas — design system
   Tokens first. Light is the base palette, dark overrides.
   No gradients anywhere. Curved edges. Trading green / red CTAs.
   ============================================================ */

/* ---------------- 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. */
  --bg:#F4F6F8;
  --surface:#FFFFFF;
  --surface-2:#EDEFF3;
  --surface-3:#E1E5EB;
  --line:#D3D9E0;
  --line-soft:#E2E6EB;
  --text:#101519;
  --text-2:#434A52;
  --muted:#6B737C;

  /* brand + semantic */
  --accent:#007FFA;
  --accent-soft:#EAF3FF;
  --pos:#0E8F58;
  --pos-soft:#E7F4ED;
  --neg:#C3352C;
  --neg-soft:#FBEBEA;
  /* deep, saturated CTA colours - the buy / sell buttons only */
  --pos-deep:#046340;
  --neg-deep:#8C1710;
  --warn:#B4690E;
  --warn-soft:#FDF1E3;

  /* chart */
  --chart-line:#101519;
  --chart-grid:#E7EAEE;
  --chart-fill:rgba(16,21,25,.05);
  --chart-axis:#828A93;
  --chart-bg:#FFFFFF;

  --shadow:0 1px 2px rgba(16,24,34,.05), 0 10px 28px rgba(16,24,34,.07);
  --shadow-lg:0 24px 64px rgba(12,18,26,.2);

  --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;

  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex 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:#0A1420;
    --surface:#0F1D2D;
    --surface-2:#152639;
    --surface-3:#1C3047;
    --line:#24384F;
    --line-soft:#1A2B3E;
    --text:#E6EDF5;
    --text-2:#A8B7C7;
    --muted:#7488A0;

    --accent:#3D9BFF;
    --accent-soft:#122C45;
    --pos:#17A06A;
    --pos-soft:#0E2B26;
    --neg:#D9483F;
    --neg-soft:#2E1A1C;
    --pos-deep:#05663F;
    --neg-deep:#93180F;
    --warn:#E0912F;
    --warn-soft:#2E2113;

    --chart-line:#E6EDF5;
    --chart-grid:#17293C;
    --chart-fill:rgba(230,237,245,.05);
    --chart-axis:#6B809A;
    --chart-bg:#0A1420;

    --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:#0A1420;
  --surface:#0F1D2D;
  --surface-2:#152639;
  --surface-3:#1C3047;
  --line:#24384F;
  --line-soft:#1A2B3E;
  --text:#E6EDF5;
  --text-2:#A8B7C7;
  --muted:#7488A0;

  --accent:#3D9BFF;
  --accent-soft:#122C45;
  --pos:#17A06A;
  --pos-soft:#0E2B26;
  --neg:#D9483F;
  --neg-soft:#2E1A1C;
  --pos-deep:#05663F;
  --neg-deep:#93180F;
  --warn:#E0912F;
  --warn-soft:#2E2113;

  --chart-line:#E6EDF5;
  --chart-grid:#17293C;
  --chart-fill:rgba(230,237,245,.05);
  --chart-axis:#6B809A;
  --chart-bg:#0A1420;

  --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)}
body[data-chrome="app"].has-sticky main{padding-bottom:calc(var(--tabbar-h) + 74px + 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(--serif);font-size:16px;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-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(--serif);font-size:18px;
}
.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;
}
.switch[aria-checked="true"]{background:var(--accent-soft);border-color:var(--accent)}
.switch[aria-checked="true"]::after{transform:translateX(16px);background:var(--accent)}
.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,.82);--tabbar-line:rgba(0,0,0,.09)}
:root[data-theme="dark"]{--tabbar-bg:rgba(20,29,40,.86);--tabbar-line:rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--tabbar-bg:rgba(20,29,40,.86);--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}
.tabbar a.active{color:var(--text)}
.tabbar a.active::before{background:var(--accent-soft)}
.tabbar a.active .tb-ico{color:var(--accent)}
.tabbar a:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
  .tabbar a::before{transition:none}
  .tabbar a:active{transform:none}
}

/* ---------------- terminal ---------------- */
.ctabs{display:flex;border-bottom:1px solid var(--line-soft);overflow:hidden}
.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;text-align:center;padding:11px 6px 16px;
  font-size:11.5px;line-height:1.3;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;
}
.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)}
.ctab.active{color:var(--text)}
.ctab.active::after{background:var(--pos)}

.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)
}

.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;
}
#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. */
.chart-map{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:96%;height:auto;z-index:0;pointer-events:none;
  color:var(--text);opacity:.025;
}
:root[data-theme="dark"] .chart-map{opacity:.04}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .chart-map{opacity:.04}
}
.chart-tools{
  position:absolute;left:10px;bottom:10px;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:10px 10px 12px}
.digit{
  width:100%;max-width:38px;aspect-ratio:1;margin:0 auto;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid var(--line-soft);background:var(--surface);
}
.digit b{font-family:var(--mono);font-size:12px;font-weight:500;line-height:1}
.digit i{font-style:normal;font-size:7.5px;color:var(--muted);margin-top:2px;font-family:var(--mono);line-height:1}
.digit.hot{border-color:var(--accent)}
.digit.hot i{color:var(--accent)}
.digit.cur{background:var(--surface-3)}

.panel{padding:2px 14px 12px;display:flex;flex-direction:column;gap:10px}
.seg{display:flex;border-bottom:1px solid var(--line-soft)}
.seg button{
  position:relative;
  flex:1 1 0;width:0;min-width:0;text-align:center;padding:9px 0 16px;
  font-size:12.5px;color:var(--muted);
}
.seg button::after{
  content:"";position:absolute;left:50%;bottom:7px;
  width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:transparent;
}
.seg button:hover{color:var(--text-2)}
.seg button.active{color:var(--text)}
.seg button.active::after{background:var(--pos)}
.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}

.stake{
  display:flex;align-items:center;border:1px solid var(--line);
  border-radius:0;background:var(--surface);overflow:hidden;
}
.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}
.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.quick button{
  padding:8px 0;border:1px solid var(--line-soft);border-radius:0;
  background:var(--surface);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 */
.trade-actions{display:grid;grid-template-columns:1fr 1fr;gap:0}
.tbtn{
  padding:13px 10px;border-radius:0;text-align:center;color:#fff;
}
.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}
.tbtn.even{background:var(--pos-deep)}
.tbtn.odd{background:var(--neg-deep)}
.tbtn:active{filter:brightness(1.08)}
.trade-dock{
  position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index:44;padding:0;background:var(--bg);
}

/* ---------------- 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)}

/* ---------------- 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(--serif);font-weight:400;font-size:33px;line-height:1.16;
  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(--serif);font-weight:400;font-size:28px;margin:0 0 5px;letter-spacing:-.01em}
.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}
.input{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--text);outline:none;
}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:var(--accent)}
.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:#06182B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-fill{color:#06182B}}
.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{background:var(--neg);color:#fff}

.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(--serif);font-weight:400;font-size:30px;margin:0 0 8px;letter-spacing:-.01em}
.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}

/* ---------------- chat ---------------- */
.chat{display:flex;flex-direction:column;flex:1;min-height:0}
/* Centred, like every other page heading: this names the screen rather
   than labelling the first thing in it. */
.chat-head{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 16px 14px;text-align:center;
  border-bottom:1px solid var(--line-soft);background:var(--bg);
}
/* The supplied file was black line art on an opaque white square, which
   no amount of CSS can sit on a dark ground — it renders as a white
   tile. assets/support-mark.png is the same artwork rebuilt with a real
   alpha channel and trimmed to the ink.

   It is used as a mask rather than an image, so the glyph takes a colour
   from the palette instead of being black in one theme and a stark white
   silhouette in the other. One file, both themes, no filter. */
.chat-face{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line-soft);
}
.chat-face::after{
  content:"";width:24px;height:24px;background:var(--text-2);
  -webkit-mask:url(../support-mark.png) center/contain no-repeat;
  mask:url(../support-mark.png) center/contain no-repeat;
}
.chat-head b{display:block;font-size:14px;font-weight:600}
.chat-head span{
  font-size:11.5px;color:var(--pos);display:inline-flex;align-items:center;gap:6px;
}
.chat-head span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pos)}
.chat-log{flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.msg{max-width:78%;padding:11px 14px;border-radius:var(--r-lg);font-size:13.5px;line-height:1.6}
.msg.them{background:var(--surface);border:1px solid var(--line-soft);border-bottom-left-radius:4px;align-self:flex-start}
.msg.me{background:var(--accent);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
:root[data-theme="dark"] .msg.me{color:#06182B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .msg.me{color:#06182B}}
.msg .time{display:block;font-size:10px;opacity:.6;margin-top:5px;font-family:var(--mono)}
.chat-day{text-align:center;font-size:11px;color:var(--muted);margin:4px 0}
.chat-bar{
  position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);background:var(--bg);
}
.chat-bar .input{border-radius:999px}
.chat-send{
  width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;flex:none;
}
:root[data-theme="dark"] .chat-send{color:#06182B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chat-send{color:#06182B}}

/* ---------------- 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}
.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)}
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)}

/* ---------------- desktop ---------------- */
@media (min-width:900px){
  .only-desk{display:flex}
  .only-mob{display:none!important}
  body[data-chrome="app"] main,
  body[data-chrome="app"].has-sticky main{padding-bottom:0}
  .tabbar{display:none}
  .trade-dock{position:static;padding:0;border:none;background:none;margin-top:14px}
  .topbar{padding:0 22px;height:64px;gap:20px}
  .deskmenu{display:flex;gap:2px;margin-right:auto}
  .deskmenu a{padding:8px 13px;border-radius:999px;color:var(--text-2);font-size:13px}
  .deskmenu a:hover{background:var(--surface-2);color:var(--text)}
  .deskmenu a.active{background:var(--surface-3);color:var(--text)}
  .brand{margin-right:0}
  .terminal{display:grid;grid-template-columns:1fr 360px;gap:16px;padding:16px;flex:1;align-items:start}
  .terminal .col-mid{min-width:0}
  #chart{height:min(50vh,420px)}
  .digits{gap:8px;padding:14px 0}
  .digit{max-width:48px}
  .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}
  .chat-log{padding:24px}
}

/* ---------------- 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;
}
.wordmark{
  font-size:14px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  padding-right:6px;
}
.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-block;font-size:15px;letter-spacing:.34em;padding-left:.34em;margin-bottom:20px;
}
.auth-head h1{font-family:var(--serif);font-weight:400;font-size:31px;margin:0 0 8px;letter-spacing:-.01em}
.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-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 ---------------- */
.digit.picked{border-color:var(--accent);background:var(--accent-soft)}
.digit.picked i{color:var(--accent)}

/* ---------------- panel rows ---------------- */
.stack-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pickline{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:3px}
.pickline b{min-width:22px;text-align:center;font-size:15px;font-weight:500}
.pickline .unit{font-size:11px;color:var(--muted);margin-left:-4px}
.stepbtn{width:30px;height:30px;display:grid;place-items:center;color:var(--text-2);background:var(--surface-2)}
.stepbtn:hover{background:var(--surface-3);color:var(--text)}
.field-error{color:var(--neg);font-size:12px;margin-top:7px}
.stake.invalid{border-color:var(--neg)}
.tbtn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------------- automated run ---------------- */
.runbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;border:1px solid var(--line-soft);background:var(--surface-2);
}
.runbar.active{border-color:var(--pos);background:var(--pos-soft)}
.runbar-t{font-size:13px;font-weight:500;margin-top:2px}
.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}
.btn-stop{padding:7px 13px;font-size:12px;font-weight:600;background:var(--neg);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)}
.fchip.on{border-color:var(--text);color:var(--text)}
.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(--text)}
  .seg button:hover{color:var(--muted)}
  .seg button.active:hover{color:var(--text)}
  .row:hover,button.trow:hover,.mkt:hover,.ditem:hover{background:none;color:inherit}
  .stake button:hover{background:none;color:var(--text-2)}
  .stepbtn:hover{background:var(--surface-2);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}
.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}
.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}

.ai-ticket{
  margin:0 14px;padding:14px;display:flex;flex-direction:column;gap:12px;
  border:1px solid var(--line-soft);background:var(--surface);
}
.ai-tline{display:flex;flex-direction:column;gap:4px}
.ai-tline b{font-size:14px;font-weight:500}
.ai-auto{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}
.ai-auto b{display:block;font-size:13px;font-weight:500}
.ai-auto span span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.ai-dock{margin:12px 14px 0}
.ai-dock .tbtn{width:100%;padding:15px 12px}

@media (min-width:900px){
  .ai-hero,.ai-ticket,.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;
}
.tgt.pos .tgt-l,.tgt.pos .tgt-v i{color:var(--pos)}
.tgt.neg .tgt-l,.tgt.neg .tgt-v i{color:var(--neg)}
.tgt.warn .tgt-l,.tgt.warn .tgt-v i{color:var(--warn)}


/* ---------------- 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);overflow:hidden;
}
.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 .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-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:#AECBF0;
  --tint-blue-fg:#0D1A2B;
  --tint-purple:#B7ACE8;
  --tint-purple-fg:#171233;
  --lhero-bg:#F1F2F5;
  --lnav-h:72px;
  --lfoot-bg:#101820;
  --lfoot-fg:#E7EDF4;
  --lfoot-muted:#8FA0B2;
}
:root[data-theme="dark"]{
  --tint-blue:#152740;
  --tint-blue-fg:#E3ECF8;
  --tint-purple:#241D3F;
  --tint-purple-fg:#EAE4F8;
  --lhero-bg:#0E1A28;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --tint-blue:#152740;
    --tint-blue-fg:#E3ECF8;
    --tint-purple:#241D3F;
    --tint-purple-fg:#EAE4F8;
    --lhero-bg:#0E1A28;
  }
}

/* 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(--serif);font-weight:400;letter-spacing:-.015em;
  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,.ctabs{background:var(--surface)}
.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 */
@media (min-width:900px){
  .terminal .col-mid{
    background:var(--surface);border:1px solid var(--line-soft);
    border-radius:var(--r-lg);overflow:hidden;
  }
}


/* ---------------- 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}

/* ---------------- 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 drawer is always dark ----------------
   A dark rail against a light page is the point: it separates
   navigation from the work surface instead of being another white
   sheet next to a white sheet. These are fixed values, not tokens,
   because the panel does not follow the theme. */
.drawer{
  --d-bg:#111A24;
  --d-surface:#1A2632;
  --d-line:rgba(255,255,255,.09);
  --d-text:#E9EFF6;
  --d-text-2:#B3C1D0;
  --d-muted:#7F8FA1;
  background:var(--d-bg);color:var(--d-text);
  border-right:1px solid var(--d-line);
}
.drawer .drawer-user b{color:var(--d-text)}
.drawer .drawer-user span{color:var(--d-muted)}
.drawer .avatar{
  background:rgba(61,155,255,.16);border-color:rgba(61,155,255,.32);color:#6FB6FF;
}
.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)}
.drawer .ditem.active{background:var(--d-surface);color:var(--d-text)}
.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)}
.drawer .ditem.danger{color:#FF8478}
.drawer .ditem.danger:hover{background:rgba(255,132,120,.12);color:#FF9B90}
.drawer .switch{background:var(--d-surface);border-color:var(--d-line)}
.drawer .switch::after{background:var(--d-muted)}
.drawer .switch[aria-checked="true"]{background:rgba(61,155,255,.2);border-color:#3D9BFF}
.drawer .switch[aria-checked="true"]::after{background:#6FB6FF}
@media (hover:none){
  .drawer .ditem:hover{background:none;color:var(--d-text-2)}
}


/* ---------------- loader ----------------
   react-spinners' ScaleLoader, rebuilt in CSS because this app is plain
   JS with no React runtime: five 4x35 bars, 2px apart, scaling on a
   staggered delay, in the same indigo. Everything that waits uses this
   one, so a spinner never means two different things. */
:root{--loader:#6366F1}
.scaleloader{display:inline-flex;align-items:center;gap:4px;height:35px}
.scaleloader i{
  display:block;width:4px;height:35px;border-radius:2px;
  background:var(--loader);transform-origin:center;
  animation:scaleload 1s ease-in-out infinite;
}
.scaleloader i:nth-child(1){animation-delay:-.08s}
.scaleloader i:nth-child(2){animation-delay:-.16s}
.scaleloader i:nth-child(3){animation-delay:-.24s}
.scaleloader i:nth-child(4){animation-delay:-.32s}
.scaleloader i:nth-child(5){animation-delay:-.40s}
.scaleloader.sm{height:22px}
.scaleloader.sm i{height:22px;width:3px}
@keyframes scaleload{
  0%,80%,100%{transform:scaleY(.38)}
  40%{transform:scaleY(1)}
}
/* Without motion the bars would sit frozen at 38% and read as broken, so
   they hold full height and the label carries the meaning instead. */
@media (prefers-reduced-motion:reduce){
  .scaleloader i{transform:scaleY(1)}
}

/* 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(--serif);font-size:26px;letter-spacing:.02em;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 ----------------
   On a tall handset the chart keeps its full height. On a short one it
   gives height back so the stake box still lands above the fold —
   scrolling to find the amount you are about to risk is the one thing
   this screen must never make you do.

   455px is what sits around the chart and must be accounted for: the
   top bar and contract tabs above it, the digits, mode switch, targets
   and stake row below it, and the fixed dock and tab bar at the foot. */
#chart{height:clamp(150px, calc(100dvh - 455px), 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}
.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. */
.chart-inst{
  position:absolute;top:8px;left:12px;z-index:2;pointer-events:none;
  font-size:11px;letter-spacing:.04em;color:var(--muted);
  max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------------- 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(--serif);font-weight:400;font-size:clamp(30px,8vw,44px);
  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}