/* ==========================================================================
   obisflow, design tokens
   Flat single-surface UI (no shouting cards), light + dark themes,
   square corners everywhere except avatars and asset badges.
   ========================================================================== */
:root{
  color-scheme: light;

  /* one background, panels barely lifted off it */
  --bg:        #FAFAF9;
  --panel:     #FFFFFF;
  --panel-2:   #F3F2EF;
  --line:      #E8E6E1;
  --line-soft: #F0EFEB;
  --line-strong:#C9C6BF;
  --surface:   #F4F3F0;   /* the tinted band a section sits on */

  --ink:   #1C1C1C;
  --ink-2: #5E5E59;
  --ink-3: #93928C;

  --brand:        #00BF63;   /* logo green, accents, rising prices */
  --brand-strong: #00994F;   /* button fills, so white text stays readable */
  --brand-tint:   #E6F7EE;

  --up:   #00A861;
  --down: #E0413F;
  --warn: #B8860B;

  /* chart */
  --chart-bg:   #FFFFFF;
  --chart-grid: #EDEBE6;
  --chart-axis: #93928C;
  --sky-opacity: .04;
  --chart-line: #00994F;                 /* the line chart, one steady colour */
  --chart-fill: rgba(28,28,28,.055);     /* the wash under it */

  /* fixed dark surfaces used by the marketing hero */
  --black:      #1C1C1C;
  --black-2:    #232322;
  --black-3:    #2C2C2A;
  --black-line: #383836;
  --on-black:   #F2F1ED;
  --on-black-2: #A3A29D;

  --nav-h: 58px;
  --tab-h: 62px;
  --rail-w: 84px;
  --maxw: 1520px;
}

:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:        #171716;
  --panel:     #1E1E1D;
  --panel-2:   #272725;
  --line:      #2E2E2C;
  --line-soft: #262625;
  --line-strong:#474743;
  --surface:   #1C1C1B;

  --ink:   #EDECE8;
  --ink-2: #A5A49E;
  --ink-3: #78776F;

  --brand-tint: #14312A;

  --up:   #00C26F;
  --down: #F0514E;
  --warn: #D6A034;

  --chart-bg:   #1E1E1D;
  --chart-grid: #2C2C2A;
  --chart-axis: #78776F;
  --sky-opacity: .05;
  --chart-line: #00BF63;
  --chart-fill: rgba(255,255,255,.055);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--bg); }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.55; letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-0.025em; line-height:1.15; }
h1{ font-size:clamp(30px,4.4vw,52px); }
h2{ font-size:clamp(23px,2.8vw,34px); }
h3{ font-size:19px; }
h4{ font-size:15px; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }

.mono{ font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
.num{ font-variant-numeric:tabular-nums; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:16px; }
@media(min-width:900px){ .wrap{ padding-inline:28px; } }

.muted{ color:var(--ink-2); }
.dim{ color:var(--ink-3); }
.up{ color:var(--up); }
.down{ color:var(--down); }
.brandtxt{ color:var(--brand); }
.center{ text-align:center; }
@media(min-width:900px){ .hide-desk{ display:none !important; } }

.i{ width:19px; height:19px; stroke-width:1.75; flex:none; }
.i-sm{ width:16px; height:16px; stroke-width:1.9; flex:none; }
.i-lg{ width:22px; height:22px; stroke-width:1.6; flex:none; }

/* ============================================================== logo ==== */
.logo{ display:inline-flex; align-items:baseline; }
.logo-word{
  font-family:'Poppins','Inter',sans-serif; font-weight:700; font-size:20px;
  letter-spacing:-0.035em; color:var(--ink); line-height:1;
}
.logo-word .flow{ border-bottom:2.5px solid var(--brand); padding-bottom:2px; }
.logo-word.on-dark{ color:var(--on-black); }
.logo-lg .logo-word{ font-size:26px; }

/* ============================================================ header ==== */
.hdr{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  background:var(--bg); border-bottom:1px solid var(--line);
}
.hdr-in{ height:100%; display:flex; align-items:center; gap:22px; }
.hdr-nav{ display:none; align-items:center; gap:24px; margin-right:auto; }
.hdr-nav a{ font-size:14px; color:var(--ink-2); font-weight:500; }
.hdr-nav a:hover{ color:var(--ink); }
.hdr-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
@media(min-width:900px){ .hdr-nav{ display:flex; } .hdr-right{ margin-left:0; } }

/* the active account, in a card, the chevron says it opens */
.acct-card{
  display:flex; align-items:center; gap:10px; height:38px; padding:0 10px;
  background:var(--panel); border:1px solid var(--line); cursor:pointer;
}
.acct-card:hover{ border-color:var(--line-strong); }
.acct-card-tx{ text-align:left; line-height:1.2; }
.acct-card small{ display:block; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.acct-card b{ display:block; font-size:13.5px; font-weight:600; white-space:nowrap; }
.acct-card .i-sm{ color:var(--ink-3); }

.icon-btn{
  width:40px; height:40px; display:grid; place-items:center;
  background:transparent; border:1px solid transparent; cursor:pointer; color:var(--ink-2);
}
.icon-btn .i-lg{ width:24px; height:24px; stroke-width:2; }
.icon-btn:hover{ background:var(--panel-2); color:var(--ink); }

/* avatars stay round, not everything is square */
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--bg);
  display:grid; place-items:center; font-size:12px; font-weight:600; cursor:pointer; flex:none;
}

/* =========================================================== buttons ==== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 17px; border:1px solid transparent; cursor:pointer;
  font-size:14px; font-weight:600; letter-spacing:-0.01em;
  background:var(--panel-2); color:var(--ink); white-space:nowrap;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.btn:hover{ background:var(--line); }
.btn-primary{ background:var(--brand-strong); color:#fff; }
.btn-primary:hover{ background:#008545; }
.btn-dark{ background:var(--ink); color:var(--bg); }
/* without this, .btn:hover wins on specificity and turns it near-white */
.btn-dark:hover{ background:var(--ink); filter:brightness(1.35); color:var(--bg); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--panel-2); }
.btn-quiet{ background:transparent; color:var(--ink-2); }
.btn-quiet:hover{ background:var(--panel-2); color:var(--ink); }
.btn-lg{ height:48px; padding:0 24px; font-size:15px; }
.btn-sm{ height:34px; padding:0 12px; font-size:13px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-google{ background:var(--panel); border-color:var(--line-strong); color:var(--ink); font-weight:500; }
.btn-google:hover{ background:var(--panel-2); }
.btn-google img{ width:18px; height:18px; }

/* ============================================================= cards ==== */
/* deliberately quiet: same family as the page, separated by hairlines only */
.card{ background:var(--panel); border:1px solid var(--line); }
.card-pad{ padding:18px; }
@media(min-width:900px){ .card-pad{ padding:22px; } }
.card-hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--line);
}
.card-hd h3{ font-size:14.5px; font-weight:600; }

.grid{ display:grid; gap:12px; }
.g2{ grid-template-columns:1fr; }
.g3{ grid-template-columns:1fr; }
.g4{ grid-template-columns:repeat(2,1fr); }
@media(min-width:760px){ .g2{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1000px){ .g4{ grid-template-columns:repeat(4,1fr); } }
.grid > *{ min-width:0; }
.stack{ display:grid; gap:12px; }
.stack > *{ min-width:0; }
.stack-sm{ display:grid; gap:8px; }

.sec{ padding:52px 0; }
@media(min-width:900px){ .sec{ padding:84px 0; } }
.sec-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:14px; }
.sec-lead{ color:var(--ink-2); font-size:16px; max-width:58ch; margin-top:14px; }

/* ============================================================= forms ==== */
.field{ margin-bottom:15px; }
.label{ display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.input,.select{
  width:100%; height:46px; padding:0 13px;
  background:var(--panel); border:1px solid var(--line-strong); color:var(--ink);
  outline:none; transition:border-color .14s ease;
}
textarea.input{ height:auto; padding:11px 13px; resize:vertical; }
.input:focus,.select:focus{ border-color:var(--ink); }
.input::placeholder{ color:var(--ink-3); }
.select{ appearance:none; cursor:pointer; }
.input-wrap{ position:relative; }
/* only reserve the trailing gutter when something actually sits there */
.input-wrap:has(> .input-affix) .input{ padding-right:44px; }
.input-affix{
  position:absolute; right:0; top:0; height:46px; width:44px; display:grid; place-items:center;
  color:var(--ink-3); background:none; border:0; cursor:pointer;
}
.input-prefix{
  position:absolute; left:13px; top:0; height:46px; display:flex; align-items:center;
  color:var(--ink-3); font-weight:500; pointer-events:none; z-index:1;
}
.input-prefix ~ .input{ padding-left:34px; }
.hint{ font-size:12px; color:var(--ink-3); margin-top:6px; }
.check{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-2); cursor:pointer; }
.check input{ width:16px; height:16px; margin:2px 0 0; accent-color:var(--brand-strong); flex:none; }
.check a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

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

/* ============================================================== auth ==== */
.auth{ min-height:100vh; display:grid; grid-template-columns:1fr; background:var(--bg); }
.auth-aside{ display:none; }
@media(min-width:1040px){
  .auth{ grid-template-columns:1fr 1fr; }
  .auth-aside{
    display:flex; flex-direction:column; justify-content:space-between;
    background:var(--black); color:var(--on-black); padding:42px; position:relative; overflow:hidden;
  }
}
.auth-main{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 16px 44px; }
.auth-card{ width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line); padding:28px 24px; }
@media(min-width:520px){ .auth-card{ padding:34px 32px; } }
.auth-card h1{ font-size:24px; margin-bottom:22px; }
.auth-top{ width:100%; max-width:400px; display:flex; justify-content:center; margin-bottom:24px; }
.auth-foot{ margin-top:20px; font-size:13.5px; color:var(--ink-2); text-align:center; }
.auth-foot a{ color:var(--ink); font-weight:600; }
.auth-legal{ max-width:400px; margin-top:18px; font-size:11.5px; color:var(--ink-3); text-align:center; }
.auth-quote{ font-size:26px; font-weight:600; letter-spacing:-0.03em; line-height:1.3; max-width:16ch; position:relative; z-index:2; }
.auth-stats{ display:flex; gap:32px; position:relative; z-index:2; }
.auth-stats b{ display:block; font-size:23px; font-weight:600; }
.auth-stats span{ font-size:12.5px; color:var(--on-black-2); }
.auth-skyline{ position:absolute; left:0; right:0; bottom:0; width:100%; height:32%; object-fit:fill; opacity:.10; pointer-events:none; z-index:1; }

/* =========================================================== app shell == */
body.app-shell{ padding-bottom:var(--tab-h); }
body.app-shell .wrap{ max-width:none; padding-inline:14px; }
@media(min-width:900px){
  body.app-shell{ padding-left:var(--rail-w); padding-bottom:0; }
  body.app-shell .wrap{ padding-inline:20px; }
}
@media(min-width:1600px){ body.app-shell .wrap{ padding-inline:28px; } }
body.app-shell .hdr-in{ padding-inline:8px; gap:10px; }
@media(min-width:900px){ body.app-shell .hdr-in{ padding-inline:20px; } }
@media(min-width:1600px){ body.app-shell .hdr-in{ padding-inline:28px; } }
.hdr-page{ display:none; font-size:15px; font-weight:600; letter-spacing:-0.02em; }
@media(min-width:900px){ .hdr-page{ display:block; } }
@media(max-width:559px){ .hdr-right .lbl{ display:none; } .hdr-right .btn{ padding-inline:11px; } }

/* --------------------------------------------------------------- rail -- */
.rail{ display:none; }
@media(min-width:900px){
  .rail{
    position:fixed; inset:0 auto 0 0; z-index:80; width:var(--rail-w);
    background:var(--panel); border-right:1px solid var(--line);
    display:flex; flex-direction:column;
  }
}
.rail-logo{ display:grid; place-items:center; height:var(--nav-h); border-bottom:1px solid var(--line); }
.rail-logo .logo-word{ font-size:19px; letter-spacing:-0.04em; }
.rail-items{ display:grid; gap:3px; padding:10px 8px; }
.rail-foot{ margin-top:auto; display:grid; gap:3px; padding:10px 8px; border-top:1px solid var(--line); }
.rail-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:10px 2px; color:var(--ink-3); background:transparent; border:1px solid transparent;
  cursor:pointer; font-size:10px; font-weight:600; text-align:center;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.rail-item:hover{ background:var(--panel-2); color:var(--ink); }
/* active state: a quiet grey frame, never a colour wash */
.rail-item.active{ color:var(--ink); }
.rail-item.active::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brand); }

/* ------------------------------------------------------------- drawer -- */
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90; }
.drawer{
  position:fixed; inset:0 auto 0 0; z-index:95; width:min(280px,55vw);
  background:var(--panel); border-right:1px solid var(--line);
  transform:translateX(-100%); transition:transform .22s ease;
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.drawer-hd{ display:flex; align-items:center; justify-content:space-between; padding:11px 10px 11px 16px; border-bottom:1px solid var(--line); }
.drawer-acct{ display:flex; align-items:center; gap:11px; padding:15px 16px; border-bottom:1px solid var(--line); }
.drawer-acct b{ display:block; font-size:14px; font-weight:600; }
.drawer-acct > div span{ font-size:12.5px; color:var(--ink-3); }
.drawer-grp{ padding:14px 0 6px; border-bottom:1px solid var(--line-soft); }
.drawer-grp:last-of-type{ border-bottom:0; }
.drawer-grp h4{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  padding:0 16px; margin-bottom:6px; font-weight:600;
}
.drawer-grp a{ display:flex; align-items:center; gap:12px; padding:10px 16px; font-size:14px; color:var(--ink-2); }
.drawer-grp a:hover{ background:var(--panel-2); color:var(--ink); }
.drawer-grp a .soon{
  margin-left:auto; font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); padding:1px 5px;
}

/* ------------------------------------------------------------ tab bar -- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--panel); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.tabbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10px; font-weight:500; color:var(--ink-3);
  border:1px solid transparent; margin:5px 3px; padding:2px 0;
}
.tabbar a.active{ color:var(--ink); }
.tabbar a.active::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brand); }
.tabbar .i{ width:20px; height:20px; }
@media(min-width:900px){ .tabbar{ display:none; } }

/* ========================================================== page head == */
.page-hd{ padding:20px 0 16px; border-bottom:1px solid var(--line); }
.page-hd h1{ font-size:23px; }
.page-hd p{ color:var(--ink-2); font-size:13.5px; margin-top:4px; max-width:60ch; }
.page-hd-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-body{ padding:20px 0 40px; }

/* ============================================================= chart === */
.terminal{ display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width:1040px){ .terminal{ grid-template-columns:1fr 330px; align-items:start; } }
@media(min-width:1440px){ .terminal{ grid-template-columns:1fr 360px; } }
.terminal > *{ min-width:0; }

.chart-panel{ background:var(--chart-bg); border:1px solid var(--line); color:var(--ink); }
.chart-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 13px; border-bottom:1px solid var(--line); }
.sym{ display:flex; align-items:center; gap:10px; min-width:0; }
.sym b{ font-size:14.5px; font-weight:600; display:block; letter-spacing:-0.01em; }
.sym span{ font-size:11.5px; color:var(--ink-3); }
.sym-price{ margin-left:auto; text-align:right; }
.sym-price b{ font-size:21px; font-weight:600; letter-spacing:-0.02em; }
.sym-price span{ display:block; font-size:12px; }

/* asset badge: round, holds a flag / coin mark */
.asset{
  width:34px; height:34px; border-radius:50%; flex:none; position:relative;
  background:var(--panel-2); display:grid; place-items:center; overflow:hidden;
  font-size:10.5px; font-weight:700; color:var(--ink-2);
}
.asset img{ width:100%; height:100%; object-fit:cover; }
.asset .i,.asset .i-sm{ color:var(--ink-2); }
/* currency pairs show both sides */
.asset-pair{ overflow:visible; background:none; }
.asset-pair img{
  position:absolute; width:23px; height:23px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--panel); background:var(--panel);
}
.asset-pair img:first-child{ left:0; top:0; }
.asset-pair img:last-child{ right:0; bottom:0; }

.tf{ display:flex; gap:2px; padding:7px 11px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tf::-webkit-scrollbar{ display:none; }
.tf button{
  background:transparent; border:1px solid transparent; color:var(--ink-3);
  height:28px; padding:0 11px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.tf button:hover{ color:var(--ink); background:var(--panel-2); }
.tf button.active{ color:var(--ink); border-color:var(--line-strong); }
.tf-sep{ width:1px; background:var(--line); margin:4px 8px; flex:none; }

.chart-stage{ position:relative; height:340px; }
@media(min-width:900px){ .chart-stage{ height:440px; } }
@media(min-width:1440px){ .chart-stage{ height:552px; } }
.chart-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
.chart-skyline{
  position:absolute; left:0; bottom:24px; width:calc(100% - 58px); height:50%;
  opacity:var(--sky-opacity); pointer-events:none; object-fit:fill;
}
.chart-foot{
  display:flex; align-items:center; gap:15px; flex-wrap:wrap;
  padding:8px 13px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-3);
}
.dotlive{ width:6px; height:6px; background:var(--up); border-radius:50%; display:inline-block; margin-right:6px; }

/* ------------------------------------------------------------- ticket -- */
.ticket{ background:var(--panel); border:1px solid var(--line); }
.ticket-seg{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.ticket-seg button{
  background:transparent; border:0; border-right:1px solid var(--line); height:44px;
  font-size:13.5px; font-weight:600; color:var(--ink-3); cursor:pointer;
}
.ticket-seg button:last-child{ border-right:0; }
.ticket-seg button:hover{ color:var(--ink); }
.ticket-seg button.active{ color:var(--ink); background:var(--panel-2); }
.ticket-body{ padding:14px; }
.stake-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
.chip{
  height:32px; border:1px solid var(--line); background:transparent; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--ink-3);
}
.chip:hover{ color:var(--ink); }
.chip.active{ color:var(--ink); border-color:var(--ink-3); }
.payout{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 13px; border:1px solid var(--line); margin:14px 0;
}
.payout span{ display:block; font-size:12px; color:var(--ink-3); margin-bottom:2px; }
.payout b{ display:block; font-size:17px; font-weight:600; }
.trade-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.btn-up,.btn-down{
  height:52px; border:0; cursor:pointer; color:#fff; font-weight:600; font-size:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-up{ background:var(--brand-strong); } .btn-up:hover{ background:#008545; }
.btn-down{ background:#C93B39; } .btn-down:hover{ background:#B13230; }

/* ============================================================ tables === */
.tbl-scroll{ overflow-x:auto; max-width:100%; }
table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:620px; }
table.tbl th{
  text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.tbl td{ padding:12px 14px; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
table.tbl tbody tr:last-child td{ border-bottom:0; }
table.tbl tbody tr:hover{ background:var(--panel-2); }
.tbl .r{ text-align:right; }

.tag{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:3px 7px; border:1px solid var(--line); color:var(--ink-2); background:transparent;
}
.tag-up{ color:var(--up); }
.tag-down{ color:var(--down); }
.tag-wait{ color:var(--warn); }

/* ============================================================= stats === */
.stat{ background:transparent; border:0; padding:6px 0; }
.stat span{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-3); font-weight:500; }
.stat b{ display:block; font-size:21px; font-weight:600; margin-top:6px; letter-spacing:-0.025em; }
.stat em{ font-style:normal; font-size:12px; }

.kv{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.kv:last-child{ border-bottom:0; }
.kv span{ color:var(--ink-2); }
.kv b{ font-weight:600; }

/* =========================================================== markets === */
.mkt-row{
  display:grid; align-items:center; gap:16px; padding:11px 16px;
  grid-template-columns:34px minmax(0,1.4fr) minmax(70px,1fr) 128px 58px 16px;
  border-bottom:1px solid var(--line-soft); cursor:pointer;
}
.mkt-row:hover{ background:var(--panel-2); }
.mkt-row:last-child{ border-bottom:0; }
.mkt-name{ min-width:0; overflow:hidden; }
.mkt-name b{ display:block; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mkt-name span{ display:block; font-size:11.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mkt-val{ text-align:right; }
.mkt-payout{ justify-self:end; }
/* the spark absorbs the slack, but capped and centred so the row does not
   end up with one dead zone */
.mkt-row canvas.spark{ width:100%; max-width:260px; height:28px; justify-self:center; }
.mkt-val b{ display:block; font-size:14px; font-weight:600; }
.mkt-val span{ font-size:12px; }
@media(max-width:719px){
  .mkt-row{ grid-template-columns:34px minmax(0,1fr) auto 16px; gap:12px; }
  .mkt-row canvas.spark{ display:none; }
  .mkt-row .tag{ display:none; }
}

.pills{ display:flex; gap:6px; overflow-x:auto; padding:12px 0; scrollbar-width:none; }
.pills::-webkit-scrollbar{ display:none; }
.pill{
  height:34px; padding:0 13px; border:1px solid var(--line); background:transparent;
  font-size:13px; font-weight:500; color:var(--ink-3); cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.pill:hover{ color:var(--ink); }
.pill.active{ color:var(--ink); border-color:var(--ink-3); font-weight:600; }

/* =========================================================== cashier === */
.seg{ display:inline-flex; gap:6px; }
.seg button{
  height:38px; padding:0 16px; background:transparent; border:1px solid transparent; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--ink-3);
}
.seg button:hover{ color:var(--ink); }
.seg button.active{ color:var(--ink); }
.seg button.active::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); display:inline-block; margin-right:8px; vertical-align:middle; }
.method{
  display:flex; align-items:center; gap:12px; padding:14px;
  border:1px solid var(--line); background:var(--panel); cursor:pointer; width:100%; text-align:left;
}
.method:hover{ border-color:var(--line-strong); }
.method.active{ border-color:var(--ink-3); }
.method-ic{ width:36px; height:36px; background:var(--panel-2); display:grid; place-items:center; flex:none; }
.method.active .method-ic{ background:var(--panel); }
.method b{ display:block; font-size:14px; font-weight:600; }
.method span{ font-size:12px; color:var(--ink-3); }

/* ========================================================== referral === */
.ref-hero{ background:var(--panel); border:1px solid var(--line); padding:26px 20px; position:relative; overflow:hidden; }
@media(min-width:900px){ .ref-hero{ padding:38px 34px; } }
.ref-hero h2{ max-width:18ch; position:relative; z-index:2; }
.ref-hero p{ color:var(--ink-2); margin-top:10px; max-width:52ch; font-size:14.5px; position:relative; z-index:2; }
.copybox{ display:flex; border:1px solid var(--line-strong); background:var(--panel); }
.copybox input{ flex:1; min-width:0; height:46px; padding:0 13px; border:0; background:transparent; font-size:13.5px; color:var(--ink-2); outline:none; }
.copybox button{ height:46px; padding:0 15px; border:0; border-left:1px solid var(--line); background:var(--panel-2); cursor:pointer; font-size:13px; font-weight:600; display:flex; align-items:center; gap:7px; }
.share-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.share-btn{ width:42px; height:42px; border:1px solid var(--line); background:var(--panel); display:grid; place-items:center; cursor:pointer; color:var(--ink-2); }
.share-btn:hover{ border-color:var(--line-strong); }
.step{ display:flex; gap:13px; }
.step-n{ width:28px; height:28px; border:1px solid var(--line-strong); display:grid; place-items:center; font-size:12.5px; font-weight:600; flex:none; }
.step b{ display:block; font-size:14.5px; font-weight:600; margin-bottom:2px; }
.step p{ font-size:13.5px; color:var(--ink-2); }
.tierbar{ height:5px; background:var(--panel-2); margin:12px 0 8px; }
.tierbar i{ display:block; height:100%; background:var(--brand); }

/* =========================================================== account === */
.acct{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:900px){ .acct{ grid-template-columns:220px 1fr; align-items:start; } }
.acct > *{ min-width:0; }
.sidenav a{ display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13.5px; color:var(--ink-2); border:1px solid transparent; font-weight:500; }
.sidenav a:hover{ color:var(--ink); }
.sidenav a.active{ color:var(--ink); font-weight:600; }
.row-line{ display:flex; align-items:center; gap:14px; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
.row-line:last-child{ border-bottom:0; }
.row-line b{ display:block; font-size:14px; font-weight:600; }
.row-line span{ font-size:12.5px; color:var(--ink-3); }
.switch{ width:42px; height:24px; background:var(--line); position:relative; cursor:pointer; flex:none; border:0; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--panel); transition:left .16s ease; }
.switch.on{ background:var(--brand-strong); }
.switch.on::after{ left:21px; }

/* ============================================================== hero === */
.hero{ background:var(--black); color:var(--on-black); position:relative; overflow:hidden; }
.hero-in{ padding-block:56px 0; position:relative; z-index:2; }
@media(min-width:900px){ .hero-in{ padding-block:76px 0; } }
.hero-grid{ display:grid; gap:28px; grid-template-columns:1fr; }
@media(min-width:1040px){ .hero-grid{ grid-template-columns:1.02fr 1fr; align-items:center; gap:46px; } }
.hero-grid > *{ min-width:0; }
.hero h1{ max-width:15ch; }
.hero .lead{ color:var(--on-black-2); font-size:16.5px; margin-top:16px; max-width:50ch; }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.hero-trust{ display:flex; gap:26px; flex-wrap:wrap; margin-top:32px; padding-bottom:38px; }
.hero-trust b{ display:block; font-size:20px; font-weight:600; }
.hero-trust span{ font-size:12.5px; color:var(--on-black-2); }
.hero-skyline{ position:absolute; left:0; right:0; bottom:0; width:100%; height:30%; object-fit:fill; opacity:.07; z-index:1; pointer-events:none; }
.hero-chart{ border:1px solid var(--black-line); background:var(--black-2); position:relative; z-index:2; margin-bottom:38px; color:var(--on-black); }
.hero-chart .chart-top,.hero-chart .chart-foot{ border-color:var(--black-line); }
.hero-chart .sym span,.hero-chart .chart-foot{ color:var(--on-black-2); }
.hero-chart .asset{ background:var(--black-3); color:var(--on-black-2); }
.hero-chart .asset-pair img{ border-color:var(--black-2); background:var(--black-2); }
@media(max-width:1039px){ .hero-chart{ margin-bottom:0; } .hero-trust{ padding-bottom:26px; } }

.split{ display:grid; gap:28px; grid-template-columns:1fr; }
@media(min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:52px; } }
.split > *{ min-width:0; }
.row2{ display:grid; grid-template-columns:1fr; gap:0 13px; }
@media(min-width:520px){ .row2{ grid-template-columns:1fr 1fr; } }

.ticker{ border-block:1px solid var(--line); background:var(--bg); overflow:hidden; }
.ticker-track{ display:flex; gap:32px; padding:10px 0; white-space:nowrap; animation:slide 44s linear infinite; }
.ticker-item{ display:inline-flex; align-items:center; gap:8px; font-size:13px; flex:none; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .ticker-track{ animation:none; } }

.feat{ padding:20px; border:1px solid var(--line); background:var(--panel); height:100%; }
.feat-ic{ width:38px; height:38px; border:1px solid var(--line-strong); display:grid; place-items:center; margin-bottom:14px; }
.feat h3{ font-size:16px; margin-bottom:7px; }
.feat p{ font-size:14px; color:var(--ink-2); }

.cta{ background:var(--ink); color:var(--bg); padding:42px 20px; text-align:center; }
@media(min-width:900px){ .cta{ padding:58px; } }
.cta h2{ max-width:20ch; margin-inline:auto; }
.cta p{ margin:12px auto 24px; max-width:46ch; opacity:.72; }
.cta .btn{ background:var(--bg); color:var(--ink); }

.empty{ padding:40px 20px; text-align:center; color:var(--ink-3); }
.empty i{ margin-inline:auto; margin-bottom:10px; }
.empty b{ display:block; color:var(--ink); font-size:15px; margin-bottom:3px; }
.empty p{ font-size:13.5px; max-width:40ch; margin-inline:auto; }

/* ============================================================ footer === */
/* phones first: brand, a full-width call to action, the links as a 2x2 grid
   of 48px tiles, then the warning and the small print, clear of the home bar */
.ftr{ background:var(--panel); border-top:1px solid var(--line); color:var(--ink-2); padding:32px 0 0; }
.ftr a{ color:var(--ink-2); }
.ftr a:hover{ color:var(--ink); }
.ftr-top{ display:flex; flex-direction:column; gap:18px; }
.ftr-about p{ font-size:14px; line-height:1.55; margin:10px 0 0; max-width:36ch; }
.ftr .ftr-cta{ color:#fff; width:100%; justify-content:center; gap:8px; min-height:48px; font-size:15px; }
.ftr .ftr-cta:hover{ color:#fff; }
.ftr-links{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:24px;
  background:var(--line); border:1px solid var(--line); }
.ftr-links a{ display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px;
  background:var(--panel); font-size:14px; font-weight:500; color:var(--ink); }
.ftr-links a .i-sm{ color:var(--ink-3); }
.ftr-links a:active{ background:var(--line); }
.ftr-risk{ display:flex; gap:10px; align-items:flex-start; margin:20px 0 0; padding:14px;
  background:var(--bg); border:1px solid var(--line); font-size:12.5px; line-height:1.6; color:var(--ink-3); }
.ftr-risk .i-sm{ flex:none; margin-top:2px; color:var(--ink-2); }
.ftr-risk b{ color:var(--ink); }
.ftr-bottom{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:20px 0 calc(24px + env(safe-area-inset-bottom)); font-size:12.5px; color:var(--ink-3); }
.ftr-bottom a{ font-size:12.5px; }
@media(min-width:900px){
  .ftr{ padding-top:44px; }
  .ftr-top{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:24px; }
  .ftr .ftr-cta{ width:auto; min-height:0; font-size:14px; }
  .ftr-links{ display:flex; gap:24px; background:none; border:0; border-top:1px solid var(--line);
    margin-top:32px; padding-top:16px; }
  .ftr-links a{ min-height:0; padding:0; background:none; font-size:13.5px; color:var(--ink-2); }
  .ftr-links a:hover{ color:var(--ink); }
  .ftr-risk{ background:none; border:0; border-top:1px solid var(--line); padding:16px 0; margin-top:16px; font-size:12px; }
  .ftr-bottom{ flex-direction:row; justify-content:space-between; border-top:1px solid var(--line); padding:14px 0 24px; }
}
.ftr-social{ display:flex; gap:8px; }
.ftr-social a{ width:34px; height:34px; border:1px solid var(--line); display:grid; place-items:center; }
.ftr-social a:hover{ border-color:var(--line-strong); }

/* brand marks pulled from Simple Icons */
.brand-ic{ width:16px; height:16px; flex:none; opacity:.85; }
.ftr-social a:hover .brand-ic,.share-btn:hover .brand-ic{ opacity:1; }
.method-ic .brand-ic{ width:18px; height:18px; }

/* ============================================================= toast === */
.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(20px);
  bottom:calc(var(--tab-h) + 16px); z-index:200;
  background:var(--ink); color:var(--bg); padding:11px 16px; font-size:13.5px;
  display:flex; align-items:center; gap:9px; opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; max-width:calc(100vw - 32px);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media(min-width:900px){ .toast{ bottom:24px; } }

.mockbar{ background:var(--ink); color:var(--bg); font-size:12px; padding:6px 0; text-align:center; }

/* ==================================== section-by-section scroll (laptop) */
@media(min-width:1040px) and (prefers-reduced-motion:no-preference){
  html.snap{ scroll-snap-type:y proximity; scroll-behavior:smooth; }
  .snap-section{ min-height:100vh; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:center; }
  .snap-section.sec{ padding-block:0; }
}
.snap-cue{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:5;
  display:none; align-items:center; gap:7px; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(242,241,237,.6);
}
@media(min-width:1040px){ .snap-cue{ display:flex; } }
.snap-cue .i-sm{ animation:nudge 1.9s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@media(prefers-reduced-motion:reduce){ .snap-cue .i-sm{ animation:none; } }

/* small-screen trims */
@media(max-width:599px){
  .card-hd > span.dim{ display:none; }
  .page-hd-row .seg{ width:100%; }
  .page-hd-row .seg button{ flex:1; }
}
/* the phone trade screen keeps only what a trade actually needs */
@media(max-width:1039px){ .trade-extra{ display:none !important; } }

/* the skyline needs ink on light panels, paper on dark ones */
:root[data-theme="dark"] .sky-on-light{ display:none; }
:root:not([data-theme="dark"]) .sky-on-dark{ display:none; }

/* the marketing hero keeps a dark chart in both themes, so it re-declares
   the surface tokens for everything inside it */
.hero-chart{
  --panel:      var(--black-2);
  --panel-2:    var(--black-3);
  --line:       var(--black-line);
  --line-soft:  var(--black-line);
  --line-strong:var(--black-line);
  --ink:        var(--on-black);
  --ink-2:      var(--on-black-2);
  --ink-3:      var(--on-black-2);
  --chart-bg:   var(--black-2);
  --chart-grid: var(--black-line);
  --chart-axis: var(--on-black-2);
  color:var(--on-black);
}

/* in dark mode the auth panel and the page are nearly the same value */
:root[data-theme="dark"] .auth-aside{ border-right:1px solid var(--line); }

/* login: no stat row, tagline centred in the panel */
.auth-aside-center .auth-quote{
  position:absolute; inset:0; margin:auto; height:max-content;
  display:grid; place-items:center; text-align:center;
  max-width:none; padding-inline:42px; font-size:30px; line-height:1.28;
}


/* ==========================================================================
   Header: balance + deposit sit beside the title, utilities hug the edge
   ========================================================================== */
.hdr-mid{ display:flex; align-items:center; gap:8px; }
body.app-shell .hdr-right{ margin-left:auto; }
@media(max-width:899px){ .hdr-mid{ margin-left:auto; } }

/* ==========================================================================
   Custom market picker (replaces the native select)
   ========================================================================== */
.mkt-picker{ position:relative; min-width:0; }
.mkt-trigger{
  display:flex; align-items:center; gap:10px; width:100%;
  background:transparent; border:1px solid var(--line); padding:5px 9px;
  cursor:pointer; text-align:left;
}
.mkt-trigger:hover{ border-color:var(--line-strong); }
.mkt-trigger .nm{ min-width:0; }
.mkt-trigger .nm b{ display:block; font-size:14.5px; font-weight:600; letter-spacing:-0.01em; }
.mkt-trigger .nm span{ display:block; font-size:11px; color:var(--ink-3); }
.mkt-trigger .i-sm{ margin-left:auto; color:var(--ink-3); }

.mkt-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:90;
  width:min(330px,calc(100vw - 32px)); max-height:min(64vh,430px); overflow-y:auto;
  background:var(--panel); border:1px solid var(--line-strong);
  box-shadow:0 16px 44px rgba(0,0,0,.13);
}
:root[data-theme="dark"] .mkt-menu{ box-shadow:0 16px 44px rgba(0,0,0,.55); }
.mkt-menu-search{ position:sticky; top:0; z-index:2; padding:8px; background:var(--panel); border-bottom:1px solid var(--line); }
.mkt-menu-search .input{ height:38px; font-size:13.5px; }
.mkt-menu h5{
  margin:0; padding:10px 12px 4px; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.mkt-opt{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 12px;
  background:transparent; border:0; cursor:pointer; text-align:left;
}
.mkt-opt:hover{ background:var(--panel-2); }
.mkt-opt[aria-selected="true"] .nm b::after{ content:""; display:inline-block; width:5px; height:5px;
  border-radius:50%; background:var(--brand); margin-left:7px; vertical-align:middle; }
.mkt-opt .nm{ flex:1; min-width:0; }
.mkt-opt .nm b{ display:block; font-size:13.5px; font-weight:600; }
.mkt-opt .nm span{ display:block; font-size:11px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mkt-opt .px{ text-align:right; }
.mkt-opt .px b{ display:block; font-size:12.5px; font-weight:600; }
.mkt-opt .px span{ display:block; font-size:11px; }

/* ==========================================================================
   Phone: the trade buttons ride just above the tab bar
   ========================================================================== */
@media(max-width:1039px){
  .trade-btns,
  .auto-btns{
    position:fixed; left:0; right:0; z-index:66;
    bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
    padding:8px 12px; background:var(--panel); border-top:1px solid var(--line);
  }
  /* the fixed CTA bar must never sit over a control, a mistap here is a trade */
  body[data-page="trade"]{ padding-bottom:calc(var(--tab-h) + 118px); }
  .ticket-body{ padding-bottom:4px; }
  .ticket-body .field:last-of-type{ margin-bottom:0; }
  .stake-row,.stepper{ scroll-margin-bottom:150px; }
}

/* ==========================================================================
   Link rows, the account hub is a menu, not a wall of settings
   ========================================================================== */
.link-row{
  display:flex; align-items:center; gap:12px; padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
}
.link-row:last-child{ border-bottom:0; }
.link-row:hover{ background:var(--panel-2); }
.link-row .lr-ic{ width:36px; height:36px; border:1px solid var(--line); display:grid; place-items:center; flex:none; color:var(--ink-2); }
.link-row .lr-tx{ flex:1; min-width:0; }
.lr-tx > b{ display:block; font-size:14px; font-weight:600; }
.lr-tx > span{ display:block; font-size:12.5px; color:var(--ink-3); }

.back-link{
  display:inline-flex; align-items:center; gap:6px; font-size:13px;
  color:var(--ink-3); font-weight:500; margin-bottom:8px;
}
.back-link:hover{ color:var(--ink); }

/* ==========================================================================
   AI page
   ========================================================================== */
.ai-ask{ display:flex; gap:8px; }
.ai-ask .input{ flex:1; }
.ai-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.signal{ background:var(--panel); border:1px solid var(--line); padding:15px; }
.signal-hd{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.signal-hd .nm{ flex:1; min-width:0; }
.signal-hd b{ display:block; font-size:14px; font-weight:600; }
.signal-hd span{ display:block; font-size:11.5px; color:var(--ink-3); }
.conf{ height:5px; background:var(--panel-2); margin:8px 0 6px; }
.conf i{ display:block; height:100%; }
.signal p{ font-size:13px; color:var(--ink-2); margin-top:10px; }
.ai-note{
  display:flex; gap:10px; padding:13px 15px; border:1px solid var(--line);
  background:var(--panel); font-size:12.5px; color:var(--ink-3);
}


/* ==========================================================================
   Modals, short flows happen in place, not on their own page
   ========================================================================== */
.modal-scrim{
  position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.5);
  display:grid; place-items:center; padding:16px;
}
/* the class sets display:grid, which would otherwise beat the UA [hidden] rule
   and leave a closed modal sitting invisibly over the page */
.modal-scrim[hidden]{ display:none; }
.modal{
  background:var(--panel); border:1px solid var(--line-strong);
  width:min(430px,100%); max-height:86vh; overflow-y:auto;
}
@media(max-width:559px){
  .modal{ max-height:88vh; }
}
.modal-hd{ display:flex; align-items:center; gap:8px; padding:12px 12px 12px 16px; border-bottom:1px solid var(--line); }
.modal-hd b{ flex:1; font-size:15px; font-weight:600; }
.modal-hd .icon-btn{ width:32px; height:32px; }
.modal-hd [data-back]{ margin-left:-8px; }
.modal-bd{ padding:16px; }
.modal-ft{ padding:0 16px 16px; }
.modal .kv:first-of-type{ border-top:1px solid var(--line-soft); padding-top:10px; }

/* the saved-destination strip inside deposit / withdraw */
.saved{ display:flex; align-items:center; gap:11px; padding:12px; border:1px solid var(--line); }
.saved-tx{ flex:1; min-width:0; }
.saved-tx b{ display:block; font-size:13.5px; font-weight:600; }
.saved-tx span{ display:block; font-size:12.5px; color:var(--ink-3); }
.linkish{
  background:none; border:0; cursor:pointer; padding:0;
  font-size:12.5px; font-weight:600; color:var(--ink-2); text-decoration:underline;
  text-underline-offset:2px; white-space:nowrap;
}
.linkish:hover{ color:var(--ink); }

/* sub-pages put their name in the header instead of repeating it on the page */
.hdr-page-always{ display:block; }

/* a slim toolbar replaces the old page headers */
.toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.toolbar .grow{ flex:1; min-width:0; }

/* ==========================================================================
   Drawer: scrolling body, pinned footer
   ========================================================================== */
.drawer-scroll{ flex:1; overflow-y:auto; }
.drawer-foot{
  position:sticky; bottom:0; background:var(--panel);
  border-top:1px solid var(--line); padding:6px 0 max(6px, env(safe-area-inset-bottom));
}
.drawer-act{
  display:flex; align-items:center; gap:12px; width:100%; padding:11px 16px;
  background:transparent; border:0; cursor:pointer; font-size:14px; color:var(--ink-2);
  font-family:inherit; text-align:left;
}
.drawer-act:hover{ background:var(--panel-2); color:var(--ink); }
.drawer-act > span:nth-child(2){ flex:1; }
.drawer-act .switch{ pointer-events:none; }

/* visibility helpers for the top bar */
@media(max-width:899px){
  .hide-mobile{ display:none !important; }
  .hide-mobile-logo{ display:none !important; }
}

/* ==========================================================================
   Fewer boxes: list and table blocks are hairlines, not cards
   ========================================================================== */
.list{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.list + .list{ border-top:0; margin-top:18px; }
.card-flat{ background:transparent; border-width:1px 0; }

/* ==========================================================================
   Clean taps, no blue flash, no lingering highlight after a click
   ========================================================================== */
*{ -webkit-tap-highlight-color:transparent; }
a,button{ -webkit-tap-highlight-color:transparent; }
a:focus:not(:focus-visible),
button:focus:not(:focus-visible){ outline:none; }
a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }

/* the dot markers need their rows to lay out around them */
.rail-item{ position:relative; }
.rail-item.active::after{ position:absolute; bottom:5px; left:50%; transform:translateX(-50%); }
.tabbar a{ position:relative; }
.tabbar a.active::after{ position:absolute; bottom:1px; left:50%; transform:translateX(-50%); }

/* a crisp round US flag, so a balance reads as dollars at a glance */
.acct-flag{
  width:18px; height:18px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--line);
}
.acct-row .acct-flag{ width:22px; height:22px; }


/* ==========================================================================
   Trade ticket: manual / auto, and CTAs that state what they pay
   ========================================================================== */
.btn-up,.btn-down{
  flex-direction:column; gap:1px; height:62px; line-height:1.2;
}
.btn-up .tb-main,.btn-down .tb-main{
  display:flex; align-items:center; gap:7px; font-size:15px; font-weight:600;
}
.btn-up .tb-sub,.btn-down .tb-sub{
  font-size:11.5px; font-weight:500; opacity:.82; font-variant-numeric:tabular-nums;
}

/* the panel is narrower now, so its rows tighten up */
@media(max-width:899px){
  .drawer-grp a{ padding-inline:14px; gap:10px; font-size:13.5px; }
  .drawer-grp h4{ padding-inline:14px; }
  .drawer-acct{ padding:13px 14px; }
  .drawer-act{ padding-inline:14px; }
}




/* log out is the one destructive-feeling action in the panel */
.drawer-act-danger{ color:var(--down); }
.drawer-act-danger:hover{ color:var(--down); background:var(--down-soft, rgba(224,65,63,.08)); }

/* ==========================================================================
   Chart zoom, so the candles scale without zooming the whole page
   ========================================================================== */
.chart-zoom{
  position:absolute; left:8px; bottom:30px; z-index:3;
  display:flex; flex-direction:column; gap:4px;
}
.chart-zoom button{
  width:28px; height:28px; display:grid; place-items:center; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); color:var(--ink-2);
}
.chart-zoom button:hover{ border-color:var(--line-strong); color:var(--ink); }
.chart-zoom button[disabled]{ opacity:.4; cursor:not-allowed; }
.rail-item-danger{ color:var(--down); }
.rail-item-danger:hover{ color:var(--down); background:rgba(224,65,63,.08); }


/* ==========================================================================
   Stake stepper, minus, centred amount, plus
   ========================================================================== */
.stepper{
  display:grid; grid-template-columns:46px 1fr 46px; align-items:stretch;
  border:1px solid var(--line-strong); background:var(--panel); height:46px;
}
.step-btn{
  display:grid; place-items:center; background:transparent; border:0; cursor:pointer;
  color:var(--ink-2);
}
.step-btn:hover{ background:var(--panel-2); color:var(--ink); }
.step-btn:first-child{ border-right:1px solid var(--line); }
.step-btn:last-child{ border-left:1px solid var(--line); }
.stepper-val{
  display:flex; align-items:center; justify-content:center; gap:1px; min-width:0;
}
.stepper-val .cur{ font-size:15px; font-weight:500; color:var(--ink-3); }
.stepper-val input{
  width:6ch; padding:0; border:0; background:transparent; outline:none;
  font-size:16px; font-weight:600; color:var(--ink); text-align:left;
  font-variant-numeric:tabular-nums;
}
/* no spinner arrows, the buttons are the control */
.stepper-val input::-webkit-outer-spin-button,
.stepper-val input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper-val input[type=number]{ -moz-appearance:textfield; }

/* The CTA bar is fixed and opaque, so controls scroll under it rather than
   hide behind it. What matters is that the page reserves enough room for every
   control to be scrolled clear of the bar, see the padding-bottom above. */
@media(max-width:1039px){
  .ticket-seg{ padding:8px; }
  .ticket-body{ padding:12px 14px 4px; }
}


/* the direction an AI signal suggested, once handed to the ticket */
.btn-up.suggested,.btn-down.suggested{ outline:2px solid var(--ink); outline-offset:2px; }

/* the scan readings are a header strip, not four loose tiles */
.scan-strip{ padding-bottom:16px; border-bottom:1px solid var(--line); }

/* ==========================================================================
   Phones: the chart header earns its vertical space back
   One line for market + price, a tighter duration row.
   ========================================================================== */
@media(max-width:1039px){
  .chart-top{ padding:5px 9px; gap:8px; flex-wrap:nowrap; }
  .chart-top .mkt-trigger{ padding:3px 7px; gap:8px; }
  .chart-top .mkt-trigger .nm span{ display:none; }   /* the asset class line */
  .chart-top .mkt-trigger .nm b{ font-size:14px; }
  .chart-top .asset{ width:26px; height:26px; }
  .chart-top .asset-pair img{ width:17px; height:17px; border-width:1.2px; }

  /* price and change sit side by side instead of stacked */
  .sym-price{ display:flex; align-items:baseline; gap:7px; }
  .sym-price b{ font-size:17px; }
  .sym-price span{ font-size:11.5px; }

  .tf{ padding:4px 7px; }
  .tf button{ height:26px; padding:0 9px; font-size:11.5px; }
  .tf-sep{ margin:4px 5px; }
}


/* pages opened from the panel are dead ends, not tab destinations */
body.app-shell.no-tabbar{ padding-bottom:0; }

/* a centred primary action under a list */
.center-action{ display:flex; justify-content:center; padding:20px 0 4px; }

/* news list */
.news-row{
  display:flex; align-items:center; gap:12px; padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
}
.news-row:last-child{ border-bottom:0; }
.news-row:hover{ background:var(--panel-2); }
.news-tx{ flex:1; min-width:0; }
.news-tx b{ display:block; font-size:14px; font-weight:600; }
.news-tx span{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px; }

/* market-read modal rows */
.read-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.read-row:last-of-type{ border-bottom:0; }
.read-val{ font-size:14px; font-weight:600; white-space:nowrap; }

/* live chat */
.chat{ display:flex; flex-direction:column; max-width:640px; margin-inline:auto; }
/* room at the foot so the last bubble clears the floating composer */
.chat-log{ padding:20px 0 calc(96px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:8px; }
.bubble p{ white-space:pre-wrap; }
.typing{ display:flex; gap:4px; padding:13px 14px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:typing 1s infinite ease-in-out; }
.typing i:nth-child(2){ animation-delay:.15s; }
.typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typing{ 0%,60%,100%{ opacity:.3; transform:none; } 30%{ opacity:1; transform:translateY(-3px); } }
/* the conversation is the page, so the bubbles stay quiet: two tints of the
   panel, told apart by side and a faint green on the reader's own */
.bubble{ max-width:78%; padding:9px 13px; font-size:14px; line-height:1.5; border-radius:12px; }
.bubble p{ margin:0; }
.bubble time{ display:block; font-size:10.5px; margin-top:3px; color:var(--ink-3); }
.bubble-in{ align-self:flex-start; background:var(--panel-2); color:var(--ink); border-bottom-left-radius:4px; }
.bubble-out{
  align-self:flex-end; color:var(--ink); border-bottom-right-radius:4px;
  background:color-mix(in srgb, var(--brand) 12%, var(--panel));
}
.bubble-out time{ text-align:right; }
/* the composer floats over the page, a rounded pill pinned to the bottom */
.composer{
  position:fixed; z-index:60; left:50%; transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom)); width:min(640px, calc(100% - 32px));
  display:flex; gap:8px; padding:6px; border-radius:999px;
  background:var(--panel); border:1px solid var(--line); box-shadow:0 8px 28px rgba(0,0,0,.12);
}
.composer .input{ flex:1; border:0; background:transparent; border-radius:999px; padding-inline:16px; box-shadow:none; }
.composer .input:focus{ outline:none; box-shadow:none; }
.composer .btn{ flex:none; width:44px; height:44px; padding:0; border-radius:50%; justify-content:center; }
.composer .btn:disabled{ opacity:.55; }
@media(min-width:900px){ body.app-shell .composer{ left:calc(50% + var(--rail-w) / 2); width:min(640px, calc(100% - var(--rail-w) - 40px)); } }

/* legal prose */
.prose{ max-width:68ch; }
.prose h2{ font-size:16px; margin:26px 0 8px; }
.prose h2:first-of-type{ margin-top:18px; }
.prose p{ font-size:14.5px; color:var(--ink-2); margin-bottom:10px; line-height:1.65; }

/* flags sit inline inside table cells */
.tbl .acct-flag{ display:inline-block; vertical-align:-4px; margin-right:6px; }

/* ==========================================================================
   Copy trading, one row per provider, stats on the baseline
   ========================================================================== */
.prov{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--line-soft); flex-wrap:wrap;
}
.prov:last-child{ border-bottom:0; }
.prov:hover{ background:var(--panel-2); }
.prov-id{ min-width:0; flex:1; }
.prov-id b{ display:block; font-size:14px; font-weight:600; }
.prov-id > span{ display:block; font-size:12.5px; color:var(--ink-3); }
.prov-stats{ display:flex; }
.prov-stats > span{
  display:block; min-width:104px; padding:2px 0 2px 18px;
  border-left:1px solid var(--line-soft);
}
.prov-stats > span:first-child{ border-left:0; padding-left:0; }
.prov-stats small{ display:block; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.prov-stats b{ display:block; font-size:13.5px; font-weight:600; margin-top:2px; }
.prov-cta{ margin-left:8px; }
@media(max-width:899px){
  .prov{ gap:10px; }
  .prov-stats{ order:3; width:100%; justify-content:space-between; }
  .prov-stats > span{ min-width:0; padding-left:12px; flex:1; }
  .prov-cta{ margin-left:auto; }
}


/* ==========================================================================
   Filter dropdown, replaces rows of pills
   ========================================================================== */
.fdrop{ position:relative; }
.fdrop-btn{
  display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 12px;
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.fdrop-btn:hover{ background:var(--panel-2); }
.fdrop-btn .chev{ color:var(--ink-3); margin-left:2px; }
.fdrop-val{ display:inline-flex; align-items:center; gap:8px; }
.fdrop-lbl{ color:var(--ink-3); font-weight:500; }

.fdrop-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:90;
  min-width:220px; max-height:min(60vh,360px); overflow-y:auto;
  background:var(--panel); border:1px solid var(--line-strong);
  box-shadow:0 16px 44px rgba(0,0,0,.13);
}
:root[data-theme="dark"] .fdrop-menu{ box-shadow:0 16px 44px rgba(0,0,0,.55); }
.fdrop-opt{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 13px;
  background:transparent; border:0; cursor:pointer; text-align:left;
  font-size:13.5px; color:var(--ink-2); font-family:inherit;
}
.fdrop-opt:hover{ background:var(--panel-2); color:var(--ink); }
.fdrop-opt .fdrop-tx{ display:inline-flex; align-items:center; gap:9px; flex:1; min-width:0; }
.fdrop-opt[aria-selected="true"]{ color:var(--ink); font-weight:600; }
.fdrop-opt[aria-selected="true"]::after{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none;
}


/* the chart's duration row sits right, where the space was going spare */
@media(min-width:1040px){ .tf{ justify-content:flex-end; } }

/* top-right: a deposit action, since Profile lives in the tab bar and panel */
.hdr-deposit{
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer; flex:none;
  background:var(--brand-strong); color:#fff; display:grid; place-items:center;
}
.hdr-deposit:hover{ background:#008545; }
.hdr-deposit .i{ width:18px; height:18px; stroke-width:2; }

/* impact reads as colour, not as another boxed tag */
.imp{ font-weight:600; font-size:13px; }
.imp-high{ color:var(--down); }
.imp-med{ color:var(--warn); }
.imp-low{ color:var(--ink-3); }
/* forecast is the reference figure the actual is judged against */
.fc{ color:var(--ink); }


/* ==========================================================================
   A contract you can watch: placed, running, settled
   ========================================================================== */
.run-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.run-dir{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; flex:none;
}
.run-dir.up{ background:var(--brand-strong); }
.run-dir.down{ background:#C93B39; }

.run-bar{ height:4px; background:var(--panel-2); overflow:hidden; }
.run-bar i{ display:block; height:100%; width:0; background:var(--brand); transition:width 1s linear; }
.run-meta{
  display:flex; justify-content:space-between; gap:12px;
  margin:8px 0 16px; font-size:12.5px; color:var(--ink-3);
}
.run-meta b{ color:var(--ink); font-weight:600; }

.result{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  margin:6px auto 0; color:#fff;
}
.result-won{ background:var(--brand-strong); }
.result-lost{ background:#C93B39; }
.run-amount{ font-size:26px; font-weight:600; margin-top:6px; letter-spacing:-0.02em; }


/* a search field you can actually see */
.input-lg{ height:52px; font-size:15px; }
.input-wrap .input-lg + .input-affix,
.input-wrap .input-lg ~ .input-affix{ height:52px; }
.fdrop-lg{ height:52px; padding:0 16px; }
.mkt-bar{ gap:12px; align-items:stretch; }
.mkt-bar .grow{ max-width:none; }

/* ==========================================================================
   Page transitions, settle in, and only show a bar when the wait is real
   ========================================================================== */
/* opacity only, animating transform here makes <main> a containing block,
   which silently breaks position:fixed for the phone trade buttons inside it */
main{ animation:pageIn .18s ease both; }
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }

.nav-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:300;
  background:var(--brand); pointer-events:none; opacity:0;
}
/* the 150ms delay is what keeps quick switches clean: nothing paints */
.nav-progress.go{ animation:navGrow 2s .15s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes navGrow{ from{ width:0; opacity:1; } to{ width:88%; opacity:1; } }

@media(prefers-reduced-motion:reduce){
  main{ animation:none; }
  .nav-progress{ display:none; }
}


/* ==========================================================================
   A running contract: a strip at the top, not a modal over the chart
   ========================================================================== */
.run-pop{
  position:fixed; top:10px; left:50%; transform:translate(-50%,-14px); z-index:210;
  display:flex; align-items:center; gap:11px; min-width:270px; max-width:calc(100vw - 24px);
  padding:9px 13px; background:var(--panel); border:1px solid var(--line-strong);
  box-shadow:0 10px 30px rgba(0,0,0,.12); opacity:0;
  transition:opacity .18s ease, transform .18s ease; overflow:hidden;
}
:root[data-theme="dark"] .run-pop{ box-shadow:0 10px 30px rgba(0,0,0,.5); }
.run-pop.in{ opacity:1; transform:translate(-50%,0); }
.run-dot{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; flex:none; }
.run-dot.up{ background:var(--brand-strong); }
.run-dot.down{ background:#C93B39; }
.run-tx{ flex:1; min-width:0; line-height:1.25; }
.run-tx b{ display:block; font-size:13px; font-weight:600; }
.run-tx span{ display:block; font-size:11.5px; color:var(--ink-3); }
.run-clock{ font-size:13.5px; font-weight:600; }
.run-line{
  position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--brand); transition:width 1s linear;
}

/* the ticket button says what it is doing */
.btn-up.busy,.btn-down.busy{ background:var(--ink); }
.btn-up[disabled],.btn-down[disabled]{ opacity:.35; cursor:not-allowed; }

/* ==========================================================================
   Auto trading
   ========================================================================== */
.auto-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line-soft);
}
/* :last-of-type counts divs, not .auto-rows, so target the one before the
   payout box instead */
.auto-row:has(+ .payout){ border-bottom:0; }
.auto-row .lr-tx b{ font-size:13.5px; }
.auto-amt{ width:120px; }
.auto-amt .input{ height:38px; text-align:right; }

/* a form that fits the screen it is on */
.form-actions{ display:flex; justify-content:center; padding-top:4px; }
.row2-tight{ display:grid; grid-template-columns:1fr 1fr; gap:0 13px; }


/* ==========================================================================
   Landing page
   ========================================================================== */
/* seven links need room: below 1100px the public header keeps the menu
   button; up to 1240px the links sit after the logo, tighter; wider, centred */
@media(min-width:900px) and (max-width:1099px){
  body[data-shell="public"] .hdr-nav{ display:none; }
  body[data-shell="public"] .hdr .hide-desk{ display:inline-flex !important; }
}
@media(min-width:1100px){
  body[data-shell="public"] .hdr-nav{ gap:18px; margin-left:28px; }
  body[data-shell="public"] .hdr-nav a{ font-size:13.5px; }
  body[data-shell="public"] .hdr-right{ margin-left:auto; }
}
@media(min-width:1240px){
  body[data-shell="public"] .hdr-in{ position:relative; }
  body[data-shell="public"] .hdr-nav{ position:absolute; left:50%; transform:translateX(-50%); margin:0; gap:24px; }
  body[data-shell="public"] .hdr-nav a{ font-size:14px; }
}
@media(max-width:899px){ .hide-mobile{ display:none !important; } }

/* hero: copy centred down the page, ragged right */
/* the hero is copy only now, the block centres, the text stays left-aligned */
.hero-copy{
  display:flex; flex-direction:column; justify-content:center; text-align:left;
  max-width:58ch; margin-inline:auto; width:100%;
}
.hero-copy h1{ max-width:16ch; }
.hero-copy .lead{ max-width:46ch; }
.hero-cta{ display:grid; grid-template-columns:repeat(2,minmax(0,200px)); gap:10px; margin-top:26px; }
.hero-cta .btn{ width:100%; }
@media(max-width:559px){ .hero-cta{ grid-template-columns:1fr 1fr; } }

/* a ghost button that stays legible on the dark hero */
.btn-onblack{
  background:transparent; border-color:var(--black-line); color:var(--on-black);
}
.btn-onblack:hover{ background:var(--black-3); border-color:#4A4A47; color:#fff; }

/* referral tiers, light cards, so the figures read */
.tiers{ position:relative; z-index:2; }
.tier{ border:1px solid var(--line); background:var(--bg); padding:15px; }
.tier b{ display:block; font-size:24px; font-weight:600; color:var(--ink); }
.tier span{ display:block; font-size:12.5px; color:var(--ink-3); }
.tier-top{ border-color:var(--brand); }
.tier-top b{ color:var(--brand-strong); }

/* every section owns a screen, phones included */
@media(prefers-reduced-motion:no-preference){
  html.snap{ scroll-snap-type:y proximity; scroll-behavior:smooth; }
  .snap-section{
    min-height:100vh; min-height:100svh;
    scroll-snap-align:start; display:flex; flex-direction:column; justify-content:center;
  }
  .snap-section.sec{ padding-block:48px; }
}
@media(min-width:900px){ .snap-section.sec{ padding-block:0; } }
@media(max-width:899px){ .snap-cue{ display:none; } }


/* ==========================================================================
   Country picker
   ========================================================================== */
.ctry-trigger{
  display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer;
  font-size:15px; color:var(--ink);
}
.ctry-trigger .ctry-flag{ width:20px; height:20px; border-radius:50%; object-fit:cover; flex:none; }
.ctry-trigger .ctry-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctry-trigger .i-sm{ color:var(--ink-3); }

.modal-search{ padding:12px 16px; border-bottom:1px solid var(--line); }
.ctry-list{ max-height:min(52vh,420px); overflow-y:auto; }
.ctry{
  display:flex; align-items:center; gap:11px; width:100%; padding:10px 16px;
  background:transparent; border:0; cursor:pointer; text-align:left;
  font-size:14px; color:var(--ink-2); font-family:inherit;
}
.ctry:hover{ background:var(--panel-2); color:var(--ink); }
.ctry img{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; }
.ctry span{ flex:1; min-width:0; }


/* ==========================================================================
   Hero tagline, public mobile menu, simple page hero
   ========================================================================== */
.hero-title{ line-height:1.05; }
.rotator{
  display:inline-block; color:var(--brand);
  transition:opacity .2s ease, transform .2s ease;
}
.rotator.out{ opacity:0; transform:translateY(-6px); }
@media(prefers-reduced-motion:reduce){ .rotator{ transition:none; } }

.drawer-cta{ display:grid; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line); }

/* the signed-out phone menu: a full-screen dark sheet, the same in both themes */
.drawer-full{
  width:100%; border-right:0; background:var(--black); color:var(--on-black);
  --ink:var(--on-black); --ink-2:var(--on-black-2); --line:var(--black-line);
}
.drawer-full .drawer-hd{ padding:18px 14px 18px 24px; }
.drawer-full .icon-btn{ color:var(--on-black); }
.drawer-full .icon-btn:hover{ background:var(--black-3); }
.drawer-big{ display:flex; flex-direction:column; padding:28px 24px 0; }
.drawer-big a{
  padding:20px 0; border-bottom:1px solid var(--black-line);
  font-size:30px; font-weight:400; letter-spacing:-.02em; line-height:1.15; color:var(--on-black-2);
  transition:color .15s ease;
}
.drawer-big a:hover, .drawer-big a.active{ color:var(--on-black); }
.drawer-end{
  margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:40px 24px calc(32px + env(safe-area-inset-bottom));
}
.drawer-pill{
  display:flex; align-items:center; justify-content:center; width:100%; height:56px;
  border-radius:999px; background:var(--on-black); color:var(--black);
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.drawer-pill:hover{ background:#fff; }
.drawer-link{ font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--on-black); }
.drawer-link:hover{ color:var(--brand); }

/* the plain top of a content page */
.page-hero{ padding:44px 0 8px; }
/* the academy opens on a wash of colour rather than a flat panel: soft blobs
   of the brand green with a teal and a warm amber, blurred into each other */
.academy-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 70% at 12% 20%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 70%),
    radial-gradient(50% 60% at 88% 18%, rgba(34,184,207,.30), transparent 70%),
    radial-gradient(55% 65% at 70% 95%, rgba(255,176,59,.26), transparent 70%),
    radial-gradient(45% 55% at 30% 100%, rgba(124,92,255,.18), transparent 70%),
    var(--bg);
}
.academy-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 50% at 50% 45%, color-mix(in srgb, var(--bg) 55%, transparent), transparent 75%);
}
.academy-hero .wrap{ position:relative; }
.page-hero h1{ font-size:clamp(28px,4vw,42px); }
.page-hero .sec-lead{ margin-top:12px; }
@media(min-width:900px){ .page-hero{ padding:64px 0 8px; } }


/* a person in the top bar, with their presence */
.hdr-person{ display:flex; align-items:center; gap:9px; }
.hdr-person .avatar{ background:var(--brand-strong); color:#fff; }
.hdr-person-tx{ display:none; line-height:1.2; }
.hdr-person-tx b{ display:block; font-size:13px; font-weight:600; }
.hdr-person-tx > span{ display:block; font-size:11.5px; color:var(--ink-3); }
@media(min-width:560px){ .hdr-person-tx{ display:block; } }

/* a scan in progress */
.scanning{ opacity:.45; pointer-events:none; transition:opacity .2s ease; }
.spin{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .spin{ animation:none; } }


/* the stop control on a running session popup */
.run-stop{
  width:28px; height:28px; display:grid; place-items:center; flex:none; cursor:pointer;
  background:transparent; border:1px solid var(--line-strong); color:var(--ink-2);
}
.run-stop:hover{ color:var(--down); border-color:var(--down); }


/* ==========================================================================
   Charts. Two categorical slots, validated against both surfaces for
   colour-vision separation (green/indigo, not green/gold).
   ========================================================================== */
:root{ --viz-1:#00994F; --viz-2:#5F3DC4; }
:root[data-theme="dark"]{ --viz-1:#00A861; --viz-2:#845EF7; }

.viz{ margin:0; border:1px solid var(--line); background:var(--panel); padding:20px; }
.viz-hd{ display:block; }
.viz-label{ display:block; font-size:12px; color:var(--ink-3); font-weight:500; }
.viz-hero{ display:block; font-size:clamp(28px,4vw,34px); font-weight:600; letter-spacing:-0.03em; margin-top:2px; }

/* stacked bar: 2px surface gap between fills, rounded outer ends only */
.sbar{ display:flex; gap:2px; height:14px; margin:20px 0 16px; }
.sbar-seg{ display:block; height:100%; min-width:3px; cursor:default; }
.sbar-seg:first-child{ border-radius:4px 0 0 4px; }
.sbar-seg:last-child{ border-radius:0 4px 4px 0; }
.seg-1{ background:var(--viz-1); }
.seg-2{ background:var(--viz-2); }

.viz-legend{ display:flex; flex-wrap:wrap; gap:8px 26px; }
.viz-key{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.viz-key b{ color:var(--ink); font-weight:600; }
.sw{ width:10px; height:10px; border-radius:3px; flex:none; }
.sw-1{ background:var(--viz-1); }
.sw-2{ background:var(--viz-2); }

.viz-tip{
  position:absolute; z-index:150; transform:translate(-50%,-100%);
  background:var(--ink); color:var(--bg); font-size:12px; padding:6px 9px;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s ease;
}
.viz-tip.show{ opacity:1; }

/* share row and QR inside the refer modal */
.share-row{ justify-content:center; }
.qr-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:18px; }
.qr-wrap canvas{ border:1px solid var(--line); padding:8px; background:#FFFFFF; border-radius:2px; }


/* the support agent, with presence */
.agent{ position:relative; display:inline-grid; place-items:center; flex:none; width:52px; height:52px; }
.agent img{ width:100%; height:100%; object-fit:contain; }
.agent-dot{
  position:absolute; right:2px; bottom:2px; width:11px; height:11px; border-radius:50%;
  background:var(--up); border:2px solid var(--panel);
}
.agent-sm{ width:38px; height:38px; }
.agent-sm .agent-dot{ width:9px; height:9px; right:0; bottom:0; }


/* the chart tools were too small to aim at */
.tf button.tf-tool{ width:36px; height:32px; padding:0; display:grid; place-items:center; }
.tf button.tf-tool .i{ width:20px; height:20px; stroke-width:1.9; }
@media(max-width:980px){ .tf button.tf-tool{ width:34px; height:30px; } }

/* the chart, taking the whole screen */
.chart-panel.chart-full{
  position:fixed; inset:0; z-index:110;   /* over the rail and tab bar, under a modal */
  border:0; background:var(--panel); display:flex; flex-direction:column;
}
.chart-panel.chart-full .chart-stage{ flex:1; height:auto; min-height:0; }
/* main carries its own stacking context, so it has to be lifted with the
   panel, or the sticky header paints straight over a fullscreen chart */
body:has(.chart-full) main{ position:relative; z-index:110; }

/* nothing else competes for the screen while the chart owns it */
body:has(.chart-full) .trade-btns,
body:has(.chart-full) .tabbar{ display:none; }

.modal-sub{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin:0 0 8px;
}


/* a line chart washes the lower half, so the skyline has to come up to meet it */
.chart-panel.chart-as-line{ --sky-opacity:.10; }
:root[data-theme="dark"] .chart-panel.chart-as-line{ --sky-opacity:.12; }


/* the one warning that has to stop someone: wrong network, money gone */
.note-warn{
  display:flex; gap:9px; margin:16px 0 4px; padding:11px 12px;
  background:var(--panel-2); border-left:2px solid var(--warn);
  font-size:12.5px; line-height:1.45; color:var(--ink-2);
}
.note-warn svg{ color:var(--warn); margin-top:1px; }
/* a deposit address: read it whole, or copy it */
.addr{ border:1px solid var(--line-strong); background:var(--panel); }
.addr code{
  display:block; padding:13px; text-align:center; color:var(--ink);
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:13px;
  line-height:1.6; word-break:break-all; letter-spacing:.01em;
}
.addr button{
  width:100%; height:42px; border:0; border-top:1px solid var(--line);
  background:var(--panel-2); color:var(--ink); cursor:pointer;
  font-size:13px; font-weight:600; display:flex; align-items:center;
  justify-content:center; gap:8px;
}
.addr button:hover{ background:var(--line); }


/* the deposit-address modal has to be read in one screen on a small phone,
   scrolling past an address is how people paste half of one */
@media(max-height:820px){
  .modal .addr code{ padding:10px 12px; font-size:12.5px; line-height:1.5; }
  .modal .addr button{ height:38px; }
  .modal .qr-wrap{ margin-top:13px; gap:6px; }
  .modal .note-warn{ margin:13px 0 0; padding:9px 11px; font-size:12px; }
  .modal .saved{ padding:10px 12px; }
}


/* ============================================================ Academy == */
.course{
  border:1px solid var(--line); background:var(--panel-2);
  display:flex; flex-direction:column;
}

/* the middle course is the one most people should take, so it is the dark
   island in a row of grey ones. Same trick as the marketing hero chart: the
   surface tokens are re-declared inside it rather than every rule overridden */
.course-dark{
  --panel:      var(--black-2);
  --panel-2:    var(--black-3);
  --line:       var(--black-line);
  --line-soft:  var(--black-line);
  --line-strong:var(--black-line);
  --ink:        var(--on-black);
  --ink-2:      var(--on-black-2);
  --ink-3:      var(--on-black-2);
  background:var(--black); color:var(--on-black); border-color:var(--black-line);
}
.course-dark .tag{ border-color:var(--black-line); color:var(--on-black-2); }
.course-dark .ticks svg{ color:var(--brand); }
.course-dark .btn-primary{ background:var(--brand); color:#0B0B0A; }
.course-dark .btn-primary:hover{ background:var(--brand-strong); color:#fff; }
.course-dark .btn-file{ border-color:var(--black-line); color:var(--on-black-2); }
.course-dark .btn-file:hover{ background:var(--black-3); color:var(--on-black); border-color:var(--on-black-2); }
/* on a dark page the island has to go the other way to still read as one */
:root[data-theme="dark"] .course-dark{ background:#0D0D0C; border-color:#3D3D3A; }
.course-in{ padding:28px 26px 26px; display:flex; flex-direction:column; flex:1; }
@media(max-width:599px){ .course-in{ padding:24px 20px 20px; } }

.course-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; }
.course h3{ font-size:22px; letter-spacing:-.02em; margin-bottom:8px; }
.course-price{
  display:flex; align-items:baseline; gap:6px; margin-bottom:14px;
  font-size:34px; font-weight:600; letter-spacing:-.03em; line-height:1;
}
.course-price small{ font-family:Inter,sans-serif; font-size:12.5px; font-weight:500; letter-spacing:0; color:var(--ink-3); }
.course-lead{ color:var(--ink-2); font-size:14px; line-height:1.6; margin-bottom:20px; }
.course .ticks{ padding-top:20px; border-top:1px solid var(--line-soft); }
.course-meta{
  display:flex; align-items:center; gap:7px;
  margin-top:22px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-3);
}
.course-ft{ margin-top:18px; display:grid; gap:10px; }
.course-ft .btn{ height:46px; }
.course-ft .btn-file{ height:auto; min-height:42px; padding-block:8px; white-space:normal; text-align:center; }
/* the three cards carry different numbers of benefits, so the footers are
   pushed down to a common line rather than floating at three heights */
@media(min-width:760px){ .course-meta{ margin-top:auto; } .course .ticks{ margin-bottom:24px; } }

.course-pop{
  font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand);
}

.course-h{ margin-bottom:18px; }
.course-grid{ gap:16px; align-items:stretch; }
@media(min-width:760px){ .course-grid{ gap:18px; } }

/* a benefit list, ticked */
.ticks{ list-style:none; display:grid; gap:9px; }
.ticks li{
  display:flex; gap:9px; align-items:flex-start;
  font-size:13.5px; line-height:1.5; color:var(--ink-2);
}
.ticks svg{ color:var(--up); margin-top:2px; flex:none; }

/* the free download reads as a file, not as a second call to action */
.btn-file{
  border:1px solid var(--line); font-size:12.5px; font-weight:500;
  color:var(--ink-2); gap:8px; padding-inline:10px;
}
.btn-file:hover{ border-color:var(--line-strong); color:var(--ink); background:var(--panel-2); }

/* ========================================================== the loader ==
   cssloaders.github.io diamond, re-coloured onto our own tokens: the source
   ships a pure lime (#20DE00) on near-black, which is neither our green nor
   readable on a light panel. --color-2 is the well, so it has to match
   whatever sits behind the loader or the middle stops reading as a hole. */
.loader{
  --color-1: var(--line-strong);      /* the track */
  --color-2: var(--bg);               /* the well, matched to the veil */
  --color-3: var(--brand-strong);     /* the sweep */
  --size: 1px;

  position:relative;
  width:calc(64 * var(--size)); height:calc(64 * var(--size));
  background-color:var(--color-1);
  transform:rotate(45deg);
  overflow:hidden;
}
.loader::after{
  content:''; position:absolute; inset:calc(8 * var(--size));
  margin:auto; background:var(--color-2);
}
.loader::before{
  content:''; position:absolute; inset:calc(-15 * var(--size));
  margin:auto; background:var(--color-3);
  animation:diamondLoader 2s linear infinite;
}
@keyframes diamondLoader{
  0%, 10%{ transform:translate(calc(-64 * var(--size)), calc(-64 * var(--size))) rotate(-45deg); }
  90%, 100%{ transform:translate(0,0) rotate(-45deg); }
}
/* a moving block this large is exactly what reduced motion is asking about */
@media(prefers-reduced-motion:reduce){
  .loader::before{ animation:none; transform:translate(0,0) rotate(-45deg); }
}

/* the screen a pending action takes over */
.veil{
  position:fixed; inset:0; z-index:400; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  opacity:0; animation:veilIn .18s ease forwards;
}
.veil-tx{ font-size:13.5px; color:var(--ink-2); letter-spacing:.01em; }
.veil-tx::after{ content:'\2026'; }
@keyframes veilIn{ to{ opacity:1; } }
@media(prefers-reduced-motion:reduce){ .veil{ animation:none; opacity:1; } }

/* the darker brand green holds up on paper; on a dark page the lighter one
   is the one that reads */
:root[data-theme="dark"] .loader{ --color-3: var(--brand); }

/* on a dark panel the well is the panel, not the page */
.modal .loader{ --color-2: var(--panel); }


/* four feature tiles have to share one phone screen with a heading, so they
   run compact below 600px rather than pushing the section past the fold */
@media(max-width:599px){
  .g4 .feat{ padding:14px 15px; }
  .g4 .feat-ic{ width:32px; height:32px; margin-bottom:10px; }
  .g4 .feat h3{ font-size:15px; }
  .g4 .feat p{ font-size:13px; line-height:1.5; }
  .g4{ gap:8px; }
}


/* prose that owns a whole screen carries a section heading, not a run-in one:
   the 16px of a terms page looks lost in the middle of a phone screen */
.snap-section .prose{ max-width:60ch; }
.snap-section .prose h2{
  font-size:clamp(23px,6vw,32px); letter-spacing:-.025em; line-height:1.15;
  margin:0 0 16px;
}
.snap-section .prose p{ font-size:15.5px; margin-bottom:14px; }
@media(min-width:900px){ .snap-section .prose p{ font-size:16px; } }


/* a coin mark carries its own brand colour, and half of those are near-black
   or navy. The chip stays light in both themes so every one of them reads,
   which is also how an exchange draws a coin list. */
.asset-coin{ background:#F1F0EC; }


/* how enrolment works, said once on the page and again in the modal */
.note-info{
  display:flex; gap:10px; align-items:flex-start;
  padding:13px 15px; background:var(--panel-2); border-left:2px solid var(--brand);
  font-size:13px; line-height:1.55; color:var(--ink-2); margin-bottom:22px;
}
.note-info svg{ color:var(--brand-strong); margin-top:2px; flex:none; }
.note-info b{ color:var(--ink); font-weight:600; }
:root[data-theme="dark"] .note-info svg{ color:var(--brand); }

/* the enrolment steps */
.enrol-row{ display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.enrol-row:last-of-type{ border-bottom:0; }
.enrol-ic{ width:34px; height:34px; background:var(--panel-2); display:grid; place-items:center; flex:none; }
.enrol-tx b{ display:block; font-size:13.5px; font-weight:600; margin-bottom:2px; }
.enrol-tx span{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.enrol-sum{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:var(--panel-2); margin-bottom:4px;
}
.enrol-sum b{ font-size:14px; }
.enrol-sum .mono{ font-size:17px; font-weight:600; }
.enrol-done{ text-align:center; padding:8px 0 4px; }
.enrol-done .enrol-ic{ width:46px; height:46px; margin:0 auto 14px; background:var(--brand-tint); }
.enrol-done .enrol-ic svg{ color:var(--brand-strong); width:22px; height:22px; }
.enrol-done h4{ font-size:17px; margin-bottom:6px; }
.enrol-done p{ font-size:13.5px; color:var(--ink-2); line-height:1.6; max-width:38ch; margin-inline:auto; }


/* which payment method is chosen, marked the way the rest of the site marks
   a choice: a small dot, never a coloured fill */
.pick-dot{
  width:16px; height:16px; border:1px solid var(--line-strong); border-radius:50%;
  flex:none; display:grid; place-items:center;
}
.method.active .pick-dot{ border-color:var(--brand-strong); }
.method.active .pick-dot::after{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--brand-strong);
}
:root[data-theme="dark"] .method.active .pick-dot{ border-color:var(--brand); }
:root[data-theme="dark"] .method.active .pick-dot::after{ background:var(--brand); }


/* ==================================================== active nav dot == */
/* the page you are on is lit, with a green dot under its name */
.hdr-nav a{ position:relative; }
.hdr-nav a.active{ color:var(--ink); }
.hdr-nav a.active::after{
  content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--brand);
}
.drawer-grp a.active{ color:var(--ink); font-weight:600; }
.drawer-grp a.active::after{
  content:""; margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--brand);
}


/* ================================================ academy: how, faq == */
.how-hd{ max-width:62ch; margin-bottom:34px; }
.how-hd .sec-eyebrow{ margin-bottom:10px; }
.how-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:760px){ .how-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
.how-item{
  display:flex; gap:16px; align-items:flex-start;
  padding:24px 22px; border:1px solid var(--line); background:var(--panel);
}
.how-item .feat-ic{ margin:0; flex:none; color:var(--brand-strong); }
:root[data-theme="dark"] .how-item .feat-ic{ color:var(--brand); }
.how-item h3{ font-size:17px; margin-bottom:7px; }
.how-item p{ font-size:14px; line-height:1.6; color:var(--ink-2); }

.faq-wrap{ display:grid; gap:26px; grid-template-columns:1fr; }
@media(min-width:900px){ .faq-wrap{ grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:56px; } }
.faq-hd .sec-eyebrow{ margin-bottom:10px; }
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:19px 0; font-size:15.5px; font-weight:600; letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--brand-strong); }
:root[data-theme="dark"] .faq summary:hover{ color:var(--brand); }
/* the + turns into a × by rotating its two bars */
.faq-plus{
  position:relative; flex:none; width:30px; height:30px; border:1px solid var(--line-strong);
  border-radius:50%; color:var(--ink); transition:transform .25s ease, background .2s, border-color .2s;
}
.faq-plus::before,.faq-plus::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:1.6px;
  background:currentColor; transform:translate(-50%,-50%);
}
.faq-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq details[open] .faq-plus{
  transform:rotate(45deg); background:var(--brand-strong); border-color:var(--brand-strong); color:#fff;
}
.faq-a{ padding:0 48px 20px 0; }
.faq-a p{ font-size:14.5px; line-height:1.65; color:var(--ink-2); }
.faq details[open] .faq-a{ animation:faqIn .25s ease; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .faq-plus{ transition:none; } .faq details[open] .faq-a{ animation:none; } }


/* ============================================ about: alternating rows == */
.about-band{ background:var(--surface); border-block:1px solid var(--line); }
.about-row{ display:grid; gap:30px; grid-template-columns:1fr; align-items:center; }
@media(min-width:900px){
  .about-row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:72px; }
  /* every other row puts the picture first, so the page zig-zags */
  .about-flip .about-tx{ order:2; }
}
.about-tx{ max-width:56ch; }
.about-tx .sec-eyebrow{ margin-bottom:10px; }
.about-tx h2{ margin-bottom:16px; }
.about-tx p{ font-size:15.5px; line-height:1.7; color:var(--ink-2); margin-bottom:14px; }
@media(min-width:900px){ .snap-section .about-row{ padding-block:40px; } }

.about-vis{ min-width:0; }
.six{
  list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(2,1fr);
}
@media(min-width:600px){ .six{ grid-template-columns:repeat(3,1fr); } }
.six li{
  display:flex; flex-direction:column; gap:22px; padding:18px;
  border:1px solid var(--line); background:var(--panel);
}
.six b{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--brand-strong); }
:root[data-theme="dark"] .six b{ color:var(--brand); }
.six span{ font-size:17px; font-weight:600; letter-spacing:-.02em; }

.about-facts{ display:grid; gap:10px; }
.about-facts > div{
  display:flex; align-items:center; gap:20px; padding:20px 22px;
  border:1px solid var(--line); background:var(--panel);
}
.about-facts b{ font-size:40px; font-weight:600; line-height:1; letter-spacing:-.03em; min-width:34px; color:var(--brand-strong); }
:root[data-theme="dark"] .about-facts b{ color:var(--brand); }
.about-facts span{ font-size:14.5px; color:var(--ink-2); }

.about-checks{ list-style:none; margin:0; padding:0; border:1px solid var(--line); background:var(--panel); }
.about-checks li{ display:flex; gap:14px; align-items:flex-start; padding:20px 22px; border-bottom:1px solid var(--line); }
.about-checks li:last-child{ border-bottom:0; }
.about-checks .lr-ic{
  width:38px; height:38px; border:1px solid var(--line); display:grid; place-items:center; flex:none;
  color:var(--brand-strong);
}
:root[data-theme="dark"] .about-checks .lr-ic{ color:var(--brand); }
.about-checks b{ display:block; font-size:15px; margin-bottom:3px; }
.about-checks li > span:last-child{ font-size:13.5px; color:var(--ink-3); }

.about-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.about-stats > div{ padding:22px; border:1px solid var(--line); background:var(--panel); }
.about-stats span{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-3); margin-bottom:12px; }
.about-stats b{ display:block; font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.about-note{ margin-top:12px; font-size:13px; color:var(--ink-3); }
.about-vis .list{ background:var(--panel); border:1px solid var(--line); }


/* ============================================================ newsroom == */
.news-hero{ padding-bottom:28px; }
.news-sec{ padding-top:20px; }
.news-meta{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:12.5px; color:var(--ink-3); }
.news-feature{
  display:grid; grid-template-columns:1fr; border:1px solid var(--line); background:var(--panel);
}
@media(min-width:900px){ .news-feature{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); } }
.news-feature-vis{
  min-height:220px; display:grid; place-items:center; color:#fff;
  background:
    radial-gradient(60% 70% at 20% 25%, color-mix(in srgb, var(--brand) 70%, transparent), transparent 70%),
    radial-gradient(55% 65% at 85% 30%, rgba(34,184,207,.55), transparent 70%),
    radial-gradient(60% 70% at 60% 100%, rgba(255,176,59,.5), transparent 70%),
    #111110;
}
.news-feature-vis .i{ width:64px; height:64px; stroke-width:1.4; }
.news-feature-tx{ padding:30px 26px; }
@media(min-width:900px){ .news-feature-tx{ padding:44px 42px; } }
.news-feature-tx h2{ margin-bottom:12px; }
.news-feature-tx p{ font-size:15.5px; line-height:1.7; color:var(--ink-2); }
.news-feature-act{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

.news-list-hd{ margin:56px 0 18px; }
.news-list-hd h2{ font-size:22px; }
.news-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:700px){ .news-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media(min-width:1100px){ .news-grid{ grid-template-columns:repeat(3,1fr); } }
.news-card{
  display:flex; flex-direction:column; padding:24px 22px;
  border:1px solid var(--line); background:var(--panel); transition:border-color .2s;
}
.news-card:hover{ border-color:var(--line-strong); }
.news-card h3{ font-size:17.5px; margin-bottom:9px; }
.news-card p{ font-size:14px; line-height:1.6; color:var(--ink-2); margin-bottom:18px; }
.news-more{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:600; color:var(--brand-strong);
}
:root[data-theme="dark"] .news-more{ color:var(--brand); }
.news-more:hover{ gap:9px; }


/* =============================================================== legal ==
   one column of numbered sections, "01 / Heading", with the short version
   first. Nothing boxed but the summary; the text does the work */
.legal-wrap{ max-width:880px; }
.legal-hero{ padding:48px 0 34px; border-bottom:1px solid var(--line); }
@media(min-width:900px){ .legal-hero{ padding:72px 0 44px; } }
.legal-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:30px; }
.legal-tabs a{
  font-size:12.5px; font-weight:500; color:var(--ink-2);
  padding:6px 11px; border:1px solid var(--line); border-radius:999px;
}
.legal-tabs a:hover{ color:var(--ink); border-color:var(--line-strong); }
.legal-tabs a.active{ color:#fff; background:var(--brand-strong); border-color:var(--brand-strong); }
.legal-hero h1{ font-size:clamp(32px,5vw,50px); letter-spacing:-.035em; }
.legal-lead{ margin-top:16px; max-width:62ch; font-size:17px; line-height:1.6; color:var(--ink-2); }
.legal-date{ margin-top:18px; font-size:13px; color:var(--ink-3); }

.legal{ padding-bottom:72px; }
.legal-sec{ display:grid; gap:12px; padding:34px 0; border-bottom:1px solid var(--line-soft); }
@media(min-width:760px){ .legal-sec{ grid-template-columns:220px minmax(0,1fr); gap:32px; padding:40px 0; } }
.legal-n{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:500; letter-spacing:.02em;
  color:var(--ink-3); padding-top:3px;
}
@media(min-width:760px){ .legal-n{ position:sticky; top:calc(var(--nav-h) + 20px); align-self:start; } }
.legal-body h2{ font-size:22px; margin-bottom:12px; }
.legal-body h3{ font-size:15.5px; margin:20px 0 6px; }
.legal-body h3:first-child{ margin-top:0; }
.legal-body p{ font-size:15.5px; line-height:1.75; color:var(--ink-2); margin-bottom:12px; }
.legal-body p:last-child{ margin-bottom:0; }
.legal-body ul{ margin:0 0 12px; padding:0; list-style:none; display:grid; gap:9px; }
.legal-body ul:last-child{ margin-bottom:0; }
.legal-body li{ position:relative; padding-left:20px; font-size:15.5px; line-height:1.65; color:var(--ink-2); }
.legal-body li::before{
  content:""; position:absolute; left:3px; top:.72em; width:6px; height:6px;
  border-radius:50%; background:var(--brand);
}
.legal-body a{ color:var(--brand-strong); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
:root[data-theme="dark"] .legal-body a{ color:var(--brand); }

/* the summary is the one thing set apart */
.legal-short .legal-n{ color:var(--brand-strong); }
:root[data-theme="dark"] .legal-short .legal-n{ color:var(--brand); }
.legal-short .legal-body{ padding:22px 24px; background:var(--surface); border-left:2px solid var(--brand); }
.legal-short li{ color:var(--ink); }

.legal-contact{ border-bottom:0; }
.legal-contact-list{ margin-top:18px !important; border-top:1px solid var(--line); gap:0 !important; }
.legal-contact-list li{
  display:flex; align-items:center; gap:12px; padding:13px 0 !important;
  border-bottom:1px solid var(--line); font-size:14.5px;
}
.legal-contact-list li::before{ display:none; }
.legal-contact-list svg{ color:var(--ink-3); flex:none; }
.legal-contact-list span{ width:70px; color:var(--ink-3); font-size:13px; }
.legal-contact-list b{ font-weight:500; color:var(--ink); }


/* ========================================================== contact us == */
.contact-sec{ padding-top:24px; }
.contact-grid{ display:grid; gap:28px; grid-template-columns:1fr; align-items:start; }
@media(min-width:900px){ .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:56px; } }
.contact-ways{ display:grid; gap:10px; }
.contact-way{
  display:flex; gap:16px; align-items:flex-start; padding:20px 22px;
  border:1px solid var(--line); background:var(--panel); transition:border-color .2s;
}
a.contact-way:hover{ border-color:var(--line-strong); }
.contact-way .lr-ic{
  width:40px; height:40px; border:1px solid var(--line); display:grid; place-items:center; flex:none;
  color:var(--brand-strong);
}
:root[data-theme="dark"] .contact-way .lr-ic{ color:var(--brand); }
.contact-way b{ display:block; font-size:15px; margin-bottom:3px; }
.contact-way > span:last-child > span{ display:block; font-size:14px; color:var(--ink); }
.contact-way small{ display:block; margin-top:3px; font-size:12.5px; color:var(--ink-3); }

.contact-form{ padding:28px 24px; border:1px solid var(--line); background:var(--panel); }
@media(min-width:900px){ .contact-form{ padding:36px 34px; } }
.contact-form h2{ font-size:22px; margin-bottom:22px; }
.contact-row{ display:grid; gap:0 14px; grid-template-columns:1fr; }
@media(min-width:600px){ .contact-row{ grid-template-columns:1fr 1fr; } }
.contact-fine{ font-size:12.5px; color:var(--ink-3); margin:4px 0 16px; }
.contact-fine a, .auth-legal a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }


/* ============================================== referrals: how it works == */
.ref-how{
  display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px;
  font-size:13px; font-weight:500; color:var(--ink-2);
}
.ref-how:hover{ color:var(--ink); gap:9px; }

.rh{ max-width:640px; }
.rh-intro{ padding:6px 0 26px; border-bottom:1px solid var(--line); }
.rh-intro h2{ font-size:clamp(21px,3vw,26px); letter-spacing:-.025em; line-height:1.25; }
.rh-intro p{ margin-top:10px; font-size:14.5px; color:var(--ink-2); }
.rh-block{ padding:26px 0; border-bottom:1px solid var(--line-soft); }
.rh-block h3{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:16px;
}
.rh-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rh-tiers > div{ padding:16px 14px; border:1px solid var(--line); }
.rh-tiers b{ display:block; font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1; margin-bottom:10px; }
.rh-tiers span{ display:block; font-size:13.5px; font-weight:600; }
.rh-tiers small{ display:block; margin-top:3px; font-size:12px; color:var(--ink-3); line-height:1.4; }
.rh-tiers .rh-top b{ color:var(--brand-strong); }
:root[data-theme="dark"] .rh-tiers .rh-top b{ color:var(--brand); }
.rh-note{ margin-top:14px; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.rh-ex{ border-top:1px solid var(--line-soft); }
.rh-ex .kv b.up{ color:var(--up); }

.rh-steps{ list-style:none; margin:0; padding:0; }
.rh-steps li{ position:relative; display:flex; gap:16px; padding-bottom:20px; }
.rh-steps li:last-child{ padding-bottom:0; }
.rh-steps li:not(:last-child)::before{
  content:""; position:absolute; left:5px; top:16px; bottom:0; width:1px; background:var(--line);
}
.rh-dot{
  width:11px; height:11px; margin-top:4px; border-radius:50%; flex:none;
  border:1.5px solid var(--ink-3); background:var(--bg); position:relative; z-index:1;
}
.rh-dot-on{ border-color:var(--brand); background:var(--brand); }
.rh-steps b{ display:block; font-size:14.5px; margin-bottom:3px; }
.rh-steps p{ font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.rh-steps em{ font-style:normal; font-weight:600; color:var(--ink); }
.rh-rules{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rh-rules li{ position:relative; padding-left:18px; font-size:14px; line-height:1.55; color:var(--ink-2); }
.rh-rules li::before{
  content:""; position:absolute; left:2px; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--brand);
}
.rh-act{ display:flex; flex-wrap:wrap; gap:10px; padding:26px 0 8px; }
@media(max-width:480px){ .rh-tiers{ grid-template-columns:1fr; } .rh-tiers > div{ display:flex; align-items:baseline; gap:12px; } .rh-tiers b{ margin:0; min-width:62px; } }


/* ======================================================= verification == */
.vf-lead{ font-size:13.5px; line-height:1.6; color:var(--ink-2); max-width:62ch; }
.vf-item{ border-bottom:1px solid var(--line-soft); }
.vf-item:last-child{ border-bottom:0; }
.vf-item .row-line{ border-bottom:0; }
.vf-state{ display:flex; align-items:center; gap:6px; flex:none; }
.vf-open{ background:var(--panel); }
.vf-panel{ padding:4px 16px 18px; }
.vf-fine{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-3); }
.vf-fine a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }

.vf-types{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.vf-type{
  height:32px; padding:0 13px; border:1px solid var(--line); border-radius:999px; background:transparent;
  font-size:12.5px; font-weight:500; color:var(--ink-2); cursor:pointer;
}
.vf-type:hover{ color:var(--ink); border-color:var(--line-strong); }
.vf-type.active{ color:var(--ink); border-color:var(--ink-3); font-weight:600; }
.vf-type.active::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:7px; vertical-align:middle;
  border-radius:50%; background:var(--brand);
}

.vf-slots{ display:grid; gap:10px; grid-template-columns:1fr; }
@media(min-width:600px){ .vf-slots:has(.vf-slot:nth-child(2)){ grid-template-columns:1fr 1fr; } }
.vf-slot{ border:1px dashed var(--line-strong); padding:14px; min-width:0; transition:border-color .15s, background .15s; }
.vf-over{ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 6%, transparent); }
.vf-slot-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:12px; }
.vf-slot-hd b{ font-size:13.5px; }
.vf-slot-hd span{ font-size:12px; color:var(--ink-3); }
.vf-picks{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vf-pick{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:78px; padding:10px 6px; border:1px solid var(--line); background:var(--panel-2);
  font-size:12.5px; font-weight:500; color:var(--ink-2); text-align:center; cursor:pointer;
}
.vf-pick:hover{ color:var(--ink); border-color:var(--line-strong); }
.vf-pick svg{ width:20px; height:20px; color:var(--ink); }
.vf-pick:focus-within{ outline:2px solid var(--brand); outline-offset:1px; }
.vf-drop{ margin-top:9px; font-size:11.5px; color:var(--ink-3); text-align:center; }
@media(hover:none){ .vf-drop{ display:none; } }
.vf-err{ display:flex; gap:6px; align-items:flex-start; margin-top:9px; font-size:12.5px; color:var(--down); }
.vf-err svg{ flex:none; margin-top:1px; }

.vf-full{ display:flex; gap:12px; align-items:center; border-style:solid; }
.vf-thumb{
  width:64px; height:64px; flex:none; overflow:hidden; display:grid; place-items:center;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink-3);
}
.vf-thumb img{ width:100%; height:100%; object-fit:cover; }
.vf-file{ flex:1; min-width:0; }
.vf-file-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vf-file-hd b{ font-size:13.5px; }
.vf-x{
  width:26px; height:26px; display:grid; place-items:center; border:0; background:transparent;
  color:var(--ink-3); cursor:pointer;
}
.vf-x:hover{ color:var(--ink); background:var(--panel-2); }
.vf-name{ display:block; font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vf-bar{ height:3px; margin:8px 0 6px; background:var(--line); overflow:hidden; }
.vf-bar i{ display:block; height:100%; background:var(--brand); transition:width .1s linear; }
.vf-meta{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.vf-done .vf-meta{ color:var(--up); }
.vf-done .vf-bar{ display:none; }
.vf-done .vf-meta{ margin-top:6px; }

.vf-ft{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
@keyframes vfspin{ to{ transform:rotate(360deg); } }


/* =============================================== financial assessment == */
.fa-prog{ height:3px; background:var(--line); margin-bottom:16px; overflow:hidden; }
.fa-prog i{ display:block; height:100%; background:var(--brand); transition:width .3s ease; }
.fa-count{ font-size:11.5px; color:var(--ink-3); letter-spacing:.02em; margin-bottom:6px; }
.fa-q{ font-size:16px; line-height:1.4; letter-spacing:-.015em; margin-bottom:14px; }
.fa-opts{ display:grid; gap:8px; }
.fa-opts .method{ width:100%; text-align:left; }
.fa-opts .method b{ font-weight:500; }
.fa-working{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:44px 16px 48px; }
.fa-working p{ font-size:13.5px; color:var(--ink-2); }
.fa-working p::after{ content:'\2026'; }
.fa-result{ text-align:center; padding:28px 20px 10px; }
.fa-badge{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px; }
.fa-ok{ background:color-mix(in srgb, var(--up) 14%, transparent); color:var(--up); }
.fa-warn{ background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
.fa-result h4{ font-size:17px; margin-bottom:8px; }
.fa-result p{ font-size:13.5px; line-height:1.6; color:var(--ink-2); max-width:40ch; margin:0 auto 10px; }
.fa-result a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.fa-flags{ text-align:left; list-style:none; margin:4px 0 14px; padding:0; display:grid; gap:8px; }
.fa-flags li{
  position:relative; padding:10px 12px 10px 28px; background:var(--panel-2);
  font-size:13px; line-height:1.5; color:var(--ink-2);
}
.fa-flags li::before{
  content:""; position:absolute; left:12px; top:17px; width:6px; height:6px; border-radius:50%; background:var(--warn);
}


/* ================================================== trade confirmations == */
.conf-row > div:first-child{ flex:1; min-width:0; }
.conf-pl{ font-size:13px; font-weight:600; flex:none; }

/* the button is its own progress: a ring fills around the arrow, then a tick */
.conf-dl{
  position:relative; width:38px; height:38px; flex:none; display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:var(--ink-2); cursor:pointer;
}
.conf-dl:hover{ background:var(--panel-2); color:var(--ink); }
/* one download at a time: the others step back until it lands */
.conf-dl:disabled{ opacity:.35; cursor:not-allowed; background:transparent; }
.conf-dl > span{ grid-area:1/1; display:grid; place-items:center; transition:opacity .15s, transform .2s; }
.conf-ok{ opacity:0; transform:scale(.6); color:var(--up); }
.conf-ring{ grid-area:1/1; position:absolute; inset:1px; width:36px; height:36px; transform:rotate(-90deg); pointer-events:none; }
.conf-ring circle{
  fill:none; stroke:var(--brand); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:94.25; stroke-dashoffset:94.25; transition:stroke-dashoffset .12s linear, opacity .2s;
}
.conf-dl.is-busy{ pointer-events:none; color:var(--ink); }
.conf-dl.is-busy .conf-ic{ animation:confNudge 1s ease-in-out infinite; }
/* preparing: a short arc that spins, before the real progress starts */
.conf-dl.is-prep .conf-ring{ animation:vfspin .8s linear infinite; }
.conf-dl.is-prep .conf-ring circle{ stroke-dashoffset:70 !important; }
.conf-dl.is-done .conf-ic{ opacity:0; transform:scale(.6); }
.conf-dl.is-done .conf-ok{ opacity:1; transform:none; }
.conf-dl.is-done .conf-ring circle{ opacity:0; }
@keyframes confNudge{ 0%,100%{ transform:translateY(-1px); } 50%{ transform:translateY(2px); } }
@media(prefers-reduced-motion:reduce){
  .conf-dl.is-busy .conf-ic, .conf-dl.is-prep .conf-ring{ animation:none; }
}


/* ================================================= auto session result == */
.auto-sum{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.auto-sum > div{ padding:12px 8px; background:var(--panel-2); }
.auto-sum b{ display:block; font-size:20px; font-weight:600; line-height:1.1; }
.auto-sum span{ display:block; margin-top:4px; font-size:11.5px; color:var(--ink-3); }


/* ================================================================= 404 == */
.nf-page{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
.nf{
  --nf-grey:#b3b3b3;
  flex:1; display:grid; place-items:center; padding:40px 16px 64px;
}
:root[data-theme="dark"] .nf{ --nf-grey:#5c5c58; }
.nf-in{ width:100%; max-width:520px; text-align:center; }
.nf-art{ display:block; width:min(250px, 62vw); height:auto; margin:0 auto 26px; }
.nf-code{ font-size:12px; font-weight:600; letter-spacing:.2em; color:var(--brand-strong); margin-bottom:10px; }
:root[data-theme="dark"] .nf-code{ color:var(--brand); }
.nf h1{ font-size:clamp(26px,4vw,36px); letter-spacing:-.03em; }
.nf-lead{ margin:12px auto 0; max-width:40ch; font-size:15.5px; line-height:1.6; color:var(--ink-2); }
.nf-act{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }


/* ============================================================== status == */
/* status colours are reserved for status, and always sit beside an icon
   and a word, never alone */
:root{ --st-good:#0ca30c; --st-warn:#fab219; --st-serious:#ec835a; --st-crit:#d03b3b; }
.st-wrap{ max-width:900px; }
.st-hero{ padding-bottom:10px; }
.st-banner{
  display:flex; align-items:center; gap:14px; margin-top:24px; padding:18px 20px;
  border:1px solid var(--line); border-left:3px solid var(--st-good); background:var(--panel);
}
.st-banner-ic{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--st-good); color:#fff;
}
.st-banner-ic .i{ width:18px; height:18px; stroke-width:2.4; }
.st-banner.st-idle{ border-left-color:var(--line-strong); }
.st-banner.st-idle .st-banner-ic{ background:var(--panel-2); color:var(--ink-3); }
.st-banner.st-b-warn{ border-left-color:var(--st-warn); } .st-b-warn .st-banner-ic{ background:var(--st-warn); }
.st-banner.st-b-serious{ border-left-color:var(--st-serious); } .st-b-serious .st-banner-ic{ background:var(--st-serious); }
.st-banner.st-b-crit{ border-left-color:var(--st-crit); } .st-b-crit .st-banner-ic{ background:var(--st-crit); }
.st-now.st-none svg{ color:var(--ink-3); }
.st-banner b{ display:block; font-size:16.5px; letter-spacing:-.01em; }
.st-banner span{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-3); }

.st-sec{ padding-top:30px; }
.st-bar-hd{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.st-bar-hd h2{ font-size:20px; }
.st-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:14px 0 16px; font-size:12px; color:var(--ink-2); }
.st-legend span{ display:inline-flex; align-items:center; gap:6px; }
.st-sw{ width:10px; height:10px; border-radius:2px; display:inline-block; flex:none; }
.st-sw.st-good, .st-b.st-good{ background:var(--st-good); }
.st-sw.st-warn, .st-b.st-warn{ background:var(--st-warn); }
.st-sw.st-serious, .st-b.st-serious{ background:var(--st-serious); }
.st-sw.st-crit, .st-b.st-crit{ background:var(--st-crit); }
.st-sw.st-none, .st-b.st-none{ background:var(--line); }

.st-list{ border:1px solid var(--line); background:var(--panel); }
.st-row{ padding:18px 20px 14px; border-bottom:1px solid var(--line-soft); }
.st-row:last-child{ border-bottom:0; }
.st-row-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.st-row-hd b{ display:block; font-size:14.5px; }
.st-row-hd div span{ display:block; margin-top:1px; font-size:12px; color:var(--ink-3); }
.st-now{ display:inline-flex; align-items:center; gap:5px; flex:none; font-size:12.5px; font-weight:500; color:var(--ink-2); }
.st-now.st-good svg{ color:var(--st-good); }
.st-now.st-warn svg{ color:var(--st-warn); }
.st-now.st-serious svg{ color:var(--st-serious); }
.st-now.st-crit svg{ color:var(--st-crit); }

/* thin bars with a 2px gap; the day under the pointer lifts and the rest dim */
.st-bars{ display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:2px; height:34px; align-items:stretch; }
.st-b{ border-radius:2px; cursor:pointer; transition:opacity .12s, transform .12s; outline:none; }
.st-bars:hover .st-b{ opacity:.55; }
.st-bars .st-b:hover, .st-bars .st-b.on{ opacity:1; transform:scaleY(1.12); }
.st-axis{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; font-size:11.5px; color:var(--ink-3); }
.st-axis b{ font-size:11.5px; font-weight:500; color:var(--ink-2); }
@media(max-width:640px){ .st-bars{ gap:1.5px; } .st-row{ padding-inline:16px; } }

.st-tip{
  position:fixed; z-index:90; min-width:190px; max-width:260px; padding:11px 13px;
  background:var(--panel); border:1px solid var(--line-strong); box-shadow:0 8px 24px rgba(0,0,0,.12);
  font-size:12.5px; pointer-events:none;
}
.st-tip[hidden]{ display:none; }
.st-tip b{ display:block; font-size:12.5px; margin-bottom:7px; }
.st-tip-row{ display:flex; align-items:center; gap:7px; color:var(--ink); }
.st-tip-row em{ margin-left:auto; font-style:normal; color:var(--ink-2); }
.st-tip-inc{ display:block; margin-top:6px; padding-top:6px; border-top:1px solid var(--line-soft); color:var(--ink-3); line-height:1.45; }



/* ======================================================== empty states ==
   what a page shows before it has anything of yours: an icon, one line
   that names the gap, one that says what will fill it, and the next step */
.es{ padding:52px 20px 56px; text-align:center; }
.es-ic{
  width:48px; height:48px; margin:0 auto 16px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; background:var(--panel-2); color:var(--ink-3);
}
.es-ic .i{ width:21px; height:21px; }
.es b{ display:block; font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.es p{ max-width:44ch; margin:6px auto 0; font-size:13.5px; line-height:1.6; color:var(--ink-3); }
.es-act{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; }
.es-err .es-ic{ color:var(--down); }
.grid > .es, #signals > .es{ border:1px solid var(--line); background:var(--panel); }

/* loading: a few quiet bars, not a spinner, so the page keeps its shape */
.es-skel{ display:grid; gap:12px; padding:22px 16px; }
.es-skel span{
  display:block; height:12px; border-radius:3px;
  background:linear-gradient(90deg, var(--panel-2) 0%, var(--line) 50%, var(--panel-2) 100%);
  background-size:200% 100%; animation:esShimmer 1.3s ease-in-out infinite;
}
@keyframes esShimmer{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
@media(prefers-reduced-motion:reduce){ .es-skel span{ animation:none; } }

/* live chat: the empty conversation still fills the card */
.chat-log .es{ padding-block:64px; }
.chat-note{ align-self:center; font-size:12px; color:var(--ink-3); margin-top:4px; }

.sbar:empty{ background:var(--line); border-radius:4px; }
.drawer-acct .avatar svg{ width:16px; height:16px; }


/* an amount under the minimum: the hint turns red instead of a new message appearing */
.hint-err{ color:var(--down) !important; }


/* the ticket when the stake is more than the account holds */
.fund-note{
  display:flex; align-items:center; gap:8px; margin-top:10px; padding:9px 11px;
  background:color-mix(in srgb, var(--down) 8%, transparent); border-left:2px solid var(--down);
  font-size:12.5px; line-height:1.4; color:var(--ink-2);
}
.fund-note[hidden]{ display:none; }
.fund-note svg{ color:var(--down); flex:none; }
.fund-note span{ flex:1; }
.fund-note .linkish{ flex:none; font-weight:600; color:var(--ink); }
#aRun:disabled{ opacity:.55; cursor:not-allowed; }


/* AI scan: when it last ran, and the cards arriving one after another */
.scan-at{ font-size:12px; color:var(--ink-3); margin-right:10px; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media(max-width:520px){ .scan-at{ display:none; } }
.sig-in{ animation:sigIn .35s ease both; }
@keyframes sigIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .sig-in{ animation:none; } }


/* ============================================================ auth, live ==
   messages from the API, a busy button, and the screens the forms turn into */
.auth-msg{
  display:flex; gap:9px; align-items:flex-start; margin:-6px 0 16px; padding:10px 12px;
  font-size:13px; line-height:1.5; border-left:2px solid;
}
.auth-msg[hidden]{ display:none; }
.auth-msg svg{ flex:none; margin-top:2px; }
.auth-err{ color:var(--ink); background:color-mix(in srgb, var(--down) 8%, transparent); border-color:var(--down); }
.auth-err svg{ color:var(--down); }
.auth-ok{ color:var(--ink); background:color-mix(in srgb, var(--up) 9%, transparent); border-color:var(--up); }
.auth-ok svg{ color:var(--up); }
.input-err{ border-color:var(--down) !important; }
.auth-wait{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:30px 0; color:var(--ink-2); font-size:14px; }
.auth-done{ text-align:center; }
.auth-done-ic{
  width:52px; height:52px; margin:4px auto 16px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-strong);
}
.auth-done h1{ margin-bottom:10px; }
.auth-done p{ font-size:14px; line-height:1.6; color:var(--ink-2); margin-bottom:10px; }
.auth-done .btn{ margin-top:12px; }


/* ============================================================ live money ==
   waiting on a phone, and methods that cannot be picked yet */
.pay-wait{ padding-top:26px; }
.pay-phone{
  width:60px; height:60px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-strong); animation:payPulse 1.6s ease-in-out infinite;
}
.pay-left{ margin-top:16px; font-size:22px; font-weight:600; color:var(--ink); }
@keyframes payPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 35%, transparent); } 50%{ box-shadow:0 0 0 12px transparent; } }
@media(prefers-reduced-motion:reduce){ .pay-phone{ animation:none; } }
.method:disabled{ opacity:.6; cursor:not-allowed; }
.method:disabled:hover{ border-color:var(--line); }
#mNums .method{ width:100%; }


/* USDT: the exact amount is the thing to get right, so it is the biggest thing on the screen */
.usdt-exact{ display:flex; align-items:baseline; gap:8px; padding:12px 14px; border:1px solid var(--line); background:var(--panel-2); }
.usdt-exact b{ font-size:26px; font-weight:600; letter-spacing:-.02em; }
.usdt-exact span{ font-size:13px; color:var(--ink-3); }
.usdt-exact button{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink); }
.usdt-wait{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.usdt-wait b{ display:block; margin-top:2px; color:var(--ink); }


/* the one-time code box: large, spaced digits */
.otp-input{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:24px; letter-spacing:.5em; text-align:center; height:54px; }
.auth-sub{ margin:-12px 0 18px; font-size:13.5px; line-height:1.55; color:var(--ink-2); }


/* the loader at the size of a line of text, for a wait that runs while you
   carry on (a USDT transfer on its way) rather than one that holds the screen */
.loader-sm{ --size:.3px; flex:none; margin-top:4px; }
.modal .loader-sm{ --color-2: var(--panel); }