@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Inter is loaded HERE rather than in 25 page headers so the UI font is a
   property of the design system, not of whoever copied a <head> last. CSP
   already allows fonts.googleapis.com in style-src and gstatic in font-src. */
/* ============================================================================
   Trading Bot House — v5 design system (shared).
   The "Sora" look the landing + market page use. One source of truth so every
   page matches instead of each carrying its own inline palette (that drift was
   exactly why /market looked nothing like /home & /studio).

   A page opts in with:
     <link rel="stylesheet" href="/static/_v5.css?v=YYYYMMDD">
     <script src="/static/_v5.js?v=YYYYMMDD" defer></script>   (nav/footer + theme)
     Sora + JetBrains Mono from Google Fonts (fonts stay per-page for preconnect).
   Page-specific components (cards, forms, tables) stay inline on the page, but
   ALWAYS reference the tokens below — never hardcode a hex.
   ============================================================================ */

/* ============================================================================
   v6 look (Ronas-CRM style, approved 2026-09-02): LIGHT + monochrome + airy.
   Primary action is BLACK (--accent); mint is reserved for POSITIVE/profit
   semantics only (it's a trading app — green = money). Flat: no mesh/grain.
   ============================================================================ */
/* ---- palette · dark — "Petrol & Gold" (approved 2026-09-08): muted petrol
   ink + champagne-gold primary. Gold CTA = gradient champagne→burnished with
   a lit top edge and a warm gold glow (the "unique" treatment). Profit stays
   mint-teal. ---- */
/* [hidden] is a UA rule, so it loses to ANY author rule that sets display.
   .v5burger{display:flex} beat it outright, which meant applyAudience could
   set hidden=true on the burger and it stayed on screen -- a signed-in
   reader kept both menus. This is the general case: every data-aud element
   with its own display rule had the same hole. */
[hidden]{display:none!important}

:root{
  --bg:#0d1418; --panel:#131c21; --panel2:#10181d;
  --line:#223038; --line2:#2d4049;
  --dim:#7b8f99; --txt:#becbd2; --ink:#f2f8fa;
  --mint:#38d99b; --mint2:#2bc78b; --mint-soft:rgba(56,217,155,.10);
  --blue:#6fbde0; --red:#ff6a70; --amber:#e8c15c;
  --accent:#d9ad4a; --accent-ink:#221806;         /* burnished champagne gold */
  --accent-2:#f0d182;                              /* lighter gradient stop */
  --accent-grad:linear-gradient(180deg,#f5dd94,#cfa03c);
  --accent-shadow:0 12px 28px -10px rgba(217,173,74,.38), 0 2px 6px -2px rgba(0,8,12,.5);
  --accent-inset:inset 0 1px 0 rgba(255,246,214,.6);
  /* The green action (go live, deploy, unlock): the gold button's recipe in
     emerald. Richer than the pastel --mint so white text sits on it. */
  --mint-ink:#ffffff;
  --mint-grad:linear-gradient(180deg,#33d18c,#169c63);
  --mint-edge:#1fae72;
  --mint-shadow:0 12px 28px -10px rgba(46,201,133,.45), 0 2px 6px -2px rgba(0,8,12,.5);
  --mint-inset:inset 0 1px 0 rgba(255,255,255,.28);
  --shadow-card:0 1px 2px rgba(0,8,12,.30), 0 12px 30px rgba(0,8,12,.35);
  --r:16px; --r-sm:10px; --r-lg:22px;

  /* ---- CONTROL SCALE (added 2026-10-20) --------------------------------
     The sheet had ten different border-radius values, four icon sizes, two
     stroke widths and three icon systems running side by side. A reference
     UI looks coherent because it has ONE of each; coherence is a scale, not
     a style. Everything interactive uses these from here on.
       --r-ctl   buttons, inputs, selects, chips in a toolbar
       --r-card  panels and cards
       999px     reserved for genuine pills: badges and status dots only
     Icons are one size and one stroke, outlined, inheriting currentColor —
     never filled, never emoji in chrome. */
  --r-ctl:8px; --r-card:12px;
  --h-ctl:34px;                      /* one height for every control in a row */
  --ico:15px; --ico-stroke:1.75;
  --sans-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* ---- palette · day — "Bone Paper" (approved 2026-09-08): warm cream paper
   + espresso ink/CTA. Editorial warmth instead of the generic grey #f5f6f8. ---- */
:root[data-theme="light"]{
  --bg:#f7f3ea; --panel:#fffdf7; --panel2:#fbf7ee;
  --line:#e8e0d0; --line2:#d9cfba;
  /* --dim was #97897a, which is 3.1:1 on this cream background -- under the
     4.5:1 AA floor, and it is used for 10.5px uppercase mono in the status
     rail where small text needs MORE contrast, not less. #6f6456 measures
     5.2:1 and still reads as secondary against --txt. */
  --dim:#6f6456; --txt:#4a4033; --ink:#221b12;
  --mint:#1f9d5e; --mint2:#178a51; --mint-soft:#e7f3e8;
  --blue:#3576b8; --red:#d84f3d; --amber:#b97f24;
  --accent:#2b2117; --accent-ink:#fdf9f0;          /* espresso (not pure black) */
  --accent-2:#453729;                              /* lighter gradient stop */
  --accent-grad:linear-gradient(180deg,#453729,#2b2117);
  --accent-shadow:0 10px 24px -10px rgba(43,33,23,.45), 0 2px 6px -2px rgba(43,33,23,.25);
  --accent-inset:inset 0 1px 0 rgba(255,255,255,.12);
  --mint-ink:#ffffff;
  --mint-grad:linear-gradient(180deg,#2db874,#178f55);
  --mint-edge:#1f9d5e;
  --mint-shadow:0 10px 24px -10px rgba(31,157,94,.45), 0 2px 6px -2px rgba(43,33,23,.25);
  --mint-inset:inset 0 1px 0 rgba(255,255,255,.22);
  --shadow-card:0 1px 2px rgba(60,45,20,.05), 0 8px 24px rgba(60,45,20,.06);
}

/* ---- back-compat aliases ---- pages still on the old _theme.css var names
   (--bg-2, --ink-3, --line-1, --crimson…) render with the v5 palette the moment
   they swap _theme.css → _v5.css, without rewriting their whole component CSS.
   Everything points at a v5 token so it auto-adapts to day/night. */
:root{
  --bg-0:var(--bg); --bg-1:var(--panel2); --bg-2:var(--panel); --bg-3:var(--panel2);
  --ink-2:var(--txt); --ink-3:var(--dim); --ink-mute:var(--dim);
  --line-1:var(--line); --line-2:var(--line2);
  --line-mint:color-mix(in srgb,var(--mint) 40%,transparent);
  --line-crimson:color-mix(in srgb,var(--red) 40%,transparent);
  --crimson:var(--red); --crimson-soft:color-mix(in srgb,var(--red) 12%,transparent);
  --azure:var(--blue); --gold:var(--amber); --tangerine:var(--amber);
  --glass:var(--panel); --glass-solid:var(--panel);
  --r-md:12px; --r-xl:22px;
  --sans:'Sora',system-ui,sans-serif; --serif:'Sora',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --mint-glow:0 0 40px rgba(122,255,176,.2);
  /* v3.1 vocabulary (used heavily by chat.html/Studio + landing/download): */
  --lime:var(--mint); --lime-soft:var(--mint-soft); --lime-glow:var(--mint-glow);
  --border:var(--line); --border-strong:var(--line2);
  --border-lime:var(--line-mint); --border-crimson:var(--line-crimson);
  --bg-glass:var(--panel); --bg-elevated:var(--panel); --bg-base:var(--bg);
  --bg-deep:var(--bg); --bg-code:var(--panel2); --bg-user-bubble:var(--panel2);
  --radius-sm:10px; --radius-md:12px; --radius-lg:16px;
  --shadow:var(--shadow-card); --shadow-modal:0 24px 70px rgba(15,20,40,.14);
  --mint-glow:none; --lime-glow:none;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;
  /* A gradient STOP, not a fill: _theme.css has always had this at 8%, and
     this file quietly redefined it to solid mint, so every cursor-spotlight
     drawn with it became a green lantern (bug found 2026-10-04). */
  --spot-color:color-mix(in srgb,var(--mint) 8%,transparent);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:'Sora',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;
  letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:6px}
.wrap{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;padding:0 24px;box-sizing:border-box}
p,li,dd,blockquote{overflow-wrap:break-word}

/* ---- ambient background (add <div class="mesh"></div><div class="grain"></div>) ---- */
/* v6 is FLAT — no ambient texture. Kept as no-ops so the divs pages already
   ship don't need removing. */
.mesh,.grain{display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- nav (injected by _v5.js as .v5nav) ---- */
/* Solid panel + a real bottom border so the bar is clearly delimited from the
   page in BOTH themes (it used to be transparent → invisible edges). */
/* Glass bar — translucent panel + backdrop blur (Linear/Phantom idiom) so the
   page content softly ghosts under it as you scroll. Falls back to the solid
   panel where backdrop-filter is unsupported (see @supports below). */
.v5nav{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--panel) 78%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .2s,box-shadow .2s,border-color .2s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .v5nav{background:var(--panel)}}
.v5nav.scrolled{background:color-mix(in srgb,var(--panel) 90%,transparent);
  border-bottom-color:var(--line2);box-shadow:0 6px 22px -12px rgba(15,20,40,.28)}
.v5nav-in{max-width:1180px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:14px}
.v5brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;margin-right:auto}
.mgram{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:14px;position:relative}
.mgram::after{content:'';position:absolute;right:5px;bottom:5px;width:4px;height:4px;border-radius:1px;background:var(--mint)}
/* Links — pill hover + a soft active fill instead of a bare colour swap. */
.v5nav-links{display:flex;align-items:center;gap:2px}
.v5navlink{font-family:var(--sans-ui);font-size:13.5px;font-weight:500;letter-spacing:-0.005em;
  color:var(--dim);padding:8px 12px;border-radius:var(--r-ctl);white-space:nowrap;
  transition:color .15s,background .15s}
.v5navlink:hover{color:var(--txt);background:color-mix(in srgb,var(--txt) 7%,transparent)}
.v5navlink.on{color:var(--ink);background:color-mix(in srgb,var(--txt) 9%,transparent)}
.v5nav-actions{display:flex;align-items:center;gap:12px}
.v5cta{color:var(--ink)!important;border:1px solid var(--line);height:var(--h-ctl);
  display:inline-flex;align-items:center;padding:0 15px;border-radius:var(--r-ctl);
  font-family:var(--sans-ui);font-size:13.5px;font-weight:600;letter-spacing:-0.005em;
  transition:.15s;white-space:nowrap;box-sizing:border-box}
.v5cta:hover{border-color:var(--line2);background:color-mix(in srgb,var(--txt) 6%,transparent)}
/* ---- ⌘K search trigger + command palette ----
   The nav had no way to jump anywhere by name: with a dozen strategies the
   only route to one was /my, then hunting the grid. This is the Linear move —
   one key opens a list of every destination AND every strategy you own. */
.v5search{display:flex;align-items:center;gap:7px;height:var(--h-ctl);padding:0 11px;flex:none;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-ctl);color:var(--dim);
  font-family:var(--sans-ui);font-size:13px;font-weight:500;cursor:pointer;
  transition:.15s;white-space:nowrap;box-sizing:border-box}
.v5search svg{width:var(--ico);height:var(--ico);flex:none;stroke-width:var(--ico-stroke);
  stroke-linecap:round;stroke-linejoin:round}
.v5search:hover{color:var(--txt);border-color:var(--line2)}
.v5search kbd{font:inherit;padding:1px 5px;border-radius:4px;background:var(--panel);color:var(--txt)}
@media(max-width:860px){.v5search span,.v5search kbd{display:none}.v5search{width:34px;padding:0;justify-content:center}}

.cmdk{position:fixed;inset:0;z-index:9100;display:flex;align-items:flex-start;justify-content:center;
  padding:14vh 20px 20px;background:rgba(4,10,13,.6);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .14s var(--ease)}
.cmdk.in{opacity:1}
:root[data-theme="light"] .cmdk{background:rgba(60,45,20,.28)}
.cmdk-box{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,8,12,.72);
  transform:translateY(8px) scale(.99);transition:transform .14s var(--ease)}
.cmdk.in .cmdk-box{transform:none}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmdk-in svg{flex:none;color:var(--dim)}
.cmdk-in input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);
  font-family:var(--sans);font-size:15px}
.cmdk-in input::placeholder{color:var(--dim)}
.cmdk-list{overflow-y:auto;padding:6px}
.cmdk-sec{padding:9px 10px 5px;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.cmdk-it{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;border-radius:8px;
  background:none;color:var(--txt);font-family:var(--sans);font-size:13.5px;text-align:left;cursor:pointer}
.cmdk-it .ic{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;
  background:var(--panel2);color:var(--dim)}
.cmdk-it .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-it .mt{flex:none;font-family:var(--mono);font-size:11px;color:var(--dim)}
.cmdk-it.on{background:var(--panel2);color:var(--ink)}
.cmdk-it.on .ic{color:var(--mint)}
.cmdk-none{padding:26px 12px;text-align:center;font-size:13px;color:var(--dim)}
.cmdk-foot{display:flex;align-items:center;gap:14px;padding:9px 14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.cmdk-foot b{font-weight:500;color:var(--txt)}

.tgl{background:none;border:1px solid var(--line);color:var(--dim);width:34px;height:34px;border-radius:999px;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center;transition:.15s;flex:none}
.tgl:hover{color:var(--txt);border-color:var(--line2)}
/* Burger — hidden on desktop, morphs into an X when the mobile menu is open. */
.v5burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;flex:none;
  border:1px solid var(--line);border-radius:10px;background:none;cursor:pointer;padding:0 10px}
.v5burger:hover{border-color:var(--line2)}
.v5burger span{display:block;height:2px;width:100%;background:var(--txt);border-radius:2px;
  transition:transform .2s,opacity .2s}
.v5nav.navopen .v5burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.v5nav.navopen .v5burger span:nth-child(2){opacity:0}
.v5nav.navopen .v5burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Plan pill in the bar: the tier you are on, and the fact there is a better
   one, in the place you look without being asked. Quiet by default -- it is
   a standing offer, not an alert -- and it disappears entirely once there is
   nothing left to sell. */
.v5upg{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  border:1px solid var(--line2);border-radius:999px;font-size:13px;font-weight:600;
  color:var(--txt);text-decoration:none;white-space:nowrap;flex:none;
  transition:border-color .15s,color .15s,background .15s}
.v5upg:hover{border-color:var(--accent);color:var(--ink);background:var(--panel2)}
.v5upgtier{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;padding:2px 6px;border-radius:999px;background:var(--panel2);
  color:var(--dim)}
.v5upg:hover .v5upgtier{color:var(--txt)}
/* On a phone the word goes and the tier chip carries it, so the bar keeps
   burger + brand + plan + account without crowding. */
@media(max-width:560px){.v5upg{padding:0 9px;gap:0}.v5upg .v5upgtx{display:none}}

/* ---- upsell modal (tbhUpsell in _v5.js) ----
   One card for every plan wall in the product. The CTA is a pill sized to its
   text, not a full-width bar: mint gradient, light text in both themes, a soft
   mint shadow so it sits above the card instead of lying flat on it. */
.tbhups{display:none;position:fixed;inset:0;z-index:9000;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,7,13,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
:root[data-theme="light"] .tbhups{background:rgba(43,33,23,.42)}
.tbhups-card{background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  padding:30px 28px 24px;max-width:400px;width:100%;text-align:center;font-family:inherit;
  box-shadow:var(--shadow-modal,0 30px 70px -20px rgba(0,8,12,.72))}
.tbhups-ico{font-size:30px;line-height:1;margin-bottom:12px}
.tbhups-h{margin:0 0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.tbhups-m{color:var(--txt);font-size:13.5px;line-height:1.6;margin:0 0 20px}
.tbhups-cta{display:inline-block;max-width:100%;box-sizing:border-box;
  padding:11px 22px;border-radius:12px;margin-bottom:12px;
  font-weight:700;font-size:14px;line-height:1.3;text-decoration:none;white-space:normal}
.tbhups-sub{margin:0 0 12px;color:var(--dim);font-size:12px;line-height:1.5}
.tbhups-all{display:block;color:var(--dim);font-size:12.5px;text-decoration:underline;
  text-underline-offset:3px;margin-bottom:10px}
.tbhups-all:hover{color:var(--txt)}
.tbhups-no{background:none;border:0;padding:6px 10px;border-radius:8px;
  color:var(--dim);font-size:12.5px;font-family:inherit;cursor:pointer}
.tbhups-no:hover{color:var(--txt);background:var(--panel2)}
/* A <button> in the menu has to match the anchors around it exactly, or it
   reads as a different kind of thing sitting in the same list. */
.v5acctbtn{display:block;width:100%;text-align:left;padding:9px 11px;border:0;
  background:none;border-radius:9px;font:inherit;font-size:13.5px;color:var(--txt);
  cursor:pointer;transition:background .12s}
.v5acctbtn:hover{background:var(--panel2);color:var(--ink)}
/* The theme row is the only menu entry that DOES something instead of going
   somewhere, and it looked identical to the links -- so it did not read as a
   switch. Icon on the left, current theme on the right, which also makes the
   result of clicking it predictable before you click. */
.v5themebtn{display:flex;align-items:center;gap:9px}
.v5themebtn .v5themelbl{flex:1 1 auto}
.v5themebtn .tglic{font-size:14px}
.v5themebtn .tglstate{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;flex:none}
.v5themebtn:hover .tglstate{color:var(--ink);border-color:var(--line2)}
.v5acctwrap{position:relative;flex:none}
.v5acct{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px;flex:none;cursor:pointer;padding:0;transition:.15s}
.v5acct:hover{box-shadow:0 0 0 3px var(--panel2)}
/* Placeholder held in the account slot between first paint and /me, shown
   only when the advisory tbh_authed cookie says someone is signed in. It is
   the same 34px circle the avatar will be, so the bar does not jump when the
   real one arrives -- the flash being fixed was a Sign in button, and
   replacing it with a collapsing gap would just trade one shift for another. */
.v5acctskel{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);display:inline-block}
/* ---- status rail on narrow screens ----
   Four uppercase mono items plus a 26px gap overflow a phone, so they wrapped
   ragged and .who flew off to the right on its own line via margin-left:auto.
   A fixed two-column grid lines them up instead of leaving it to whatever
   fits, and the name takes its own full-width row at the end. */
@media (max-width:560px){
  .rail{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;
    font-size:10px;letter-spacing:.08em;padding:13px 0 12px}
  .rail .who{margin-left:0;grid-column:1 / -1}
}
/* The menu is absolutely positioned inside a 34px avatar wrap, so its width
   resolves shrink-to-fit with no upper bound and the email in the header --
   white-space:nowrap -- simply stretched it past the screen. Anchored right,
   that pushes the whole panel off the LEFT edge: you see the last column and
   none of the labels. Cap it against the viewport and let the email clip. */
.v5acctmenu{position:absolute;top:calc(100% + 10px);right:0;min-width:min(236px, calc(100vw - 28px));
  max-width:calc(100vw - 28px);box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-modal);padding:7px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .15s,transform .15s;z-index:200}
.v5acctwrap.open .v5acctmenu{opacity:1;transform:none;pointer-events:auto}
/* Rows carry an icon now, so they are flex instead of block -- and the icon
   box is a fixed 17px on every row (including the theme emoji) so the labels
   line up in one column rather than each starting wherever its glyph ends. */
.v5acctmenu a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;
  font-size:13.5px;color:var(--txt);transition:background .12s}
.v5mi{width:17px;height:17px;flex:none;opacity:.72;font-size:13px;line-height:1;text-align:center}
.v5acctmenu a:hover .v5mi,.v5acctbtn:hover .v5mi{opacity:1}
/* The one row that offers something rather than administering something. */
.v5acctup .v5mi{color:var(--mint);opacity:.95}
.v5acctup:hover{color:var(--ink)}
.v5acctmenu a:hover{background:var(--panel2);color:var(--ink)}
/* Where you are now. The bar marks its own active link; without the same
   mark here the menu is a flat list that never tells you where you are --
   and since this is now the ONLY menu on a phone, that matters more. */
.v5acctmenu a.on{background:color-mix(in srgb,var(--mint) 12%,transparent);
  color:var(--ink);font-weight:650;box-shadow:inset 2px 0 0 var(--mint)}
.v5accthead{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 10px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.v5acctav{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;flex:none}
.v5acctid{min-width:0;flex:1 1 0;overflow:hidden}
.v5acctid b{display:block;font-size:13.5px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v5acctid span{display:block;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v5accttier{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.05em;padding:3px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--dim);flex:none;align-self:flex-start}
.v5acctsep{height:1px;background:var(--line);margin:6px 4px}
.v5acctout{color:var(--red)!important}
.v5acctout:hover{background:color-mix(in srgb,var(--red) 12%,transparent)!important}
@media(max-width:940px){
  .v5nav-in{padding:12px 16px;gap:10px}
  .v5nav-actions{gap:8px}
  .v5burger{display:flex}
  /* Thumb geography: the menu opens from the left, the account from the
     right. The burger was the LAST item in the actions group, so both the
     menu and the profile lived in the same right-hand corner and neither
     was findable. order:-1 on the bar itself pulls it ahead of the brand. */
  .v5nav-actions{margin-left:auto}
  /* Links drop into a full-bleed panel under the bar, toggled by the burger. */
  .v5nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    padding:8px;background:var(--panel);border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px -14px rgba(0,0,0,.35);
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:transform .18s ease,opacity .18s ease}
  .v5nav.navopen .v5nav-links{transform:none;opacity:1;pointer-events:auto}
  .v5navlink{padding:12px 14px;font-size:15px;border-radius:10px}
}
@media(max-width:460px){.v5brandtx{display:none}}

/* ---- hero bits ---- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.eyebrow::before{content:'//';color:var(--dim)}
.h1,h1.v5{font-size:clamp(32px,5vw,48px);line-height:1.04;letter-spacing:-.03em;color:var(--ink);font-weight:700}
/* v6 is monochrome — the emphasis word stays ink (no coloured gradient). Mint is
   for profit numbers only. */
.grad{color:var(--ink)}
.sec-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:30px 0 14px;display:flex;align-items:center;gap:10px}
.sec-label::before{content:'//';color:var(--dim)}

/* ---- buttons ---- */
/* v6 primary = solid black (reference). Mint is NOT a button colour anymore. */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:14.5px;padding:13px 24px;border-radius:12px;
  box-shadow:none;border:1px solid var(--accent);cursor:pointer;transition:transform .15s,opacity .15s}
.btn-primary:hover{transform:translateY(-1px);opacity:.9}
/* Secondary. It used to be `background:transparent` + a flat border, which is
   exactly the "unstyled default" look — a rectangle with an outline and no
   craft in it. A real secondary still has a surface: a faint top-lit gradient,
   a hairline of light on the top edge, and a shadow that seats it on the page.
   It reads as a BUTTON that happens to be quiet, not as an afterthought.
   Radius matches .btn-primary (12px) — pills were making every CTA look like
   a template. */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--ink) 9%,transparent),
      color-mix(in srgb,var(--ink) 3%,transparent));
  color:var(--txt);border:1px solid var(--line2);font-weight:600;font-size:14.5px;
  padding:13px 24px;border-radius:12px;cursor:pointer;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 12%,transparent),
             0 6px 16px -10px rgba(0,0,0,.55);
  transition:transform .16s var(--ease),box-shadow .2s var(--ease),
             border-color .16s,color .16s}
.btn-ghost:hover{border-color:var(--dim);color:var(--ink);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 18%,transparent),
             0 10px 22px -12px rgba(0,0,0,.6)}
.btn-ghost:active,.btn-primary:active{transform:translateY(0);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}

/* ---- toolbar buttons ------------------------------------------------------
   A COMPACT, FLAT action row — the Cloudflare/Linear register, in our gold.

   Why a second button style rather than editing .btn-primary: they answer
   different questions. .btn-primary is a page's one big decision ("Upgrade",
   "Run backtest") and earns its gradient, glow and lift. A toolbar is six
   equal-weight verbs sitting next to a search field; give each of those the
   same treatment and the row turns into a fairground.

   The rules that make a row like this read as ONE object, all of which the
   reference gets right and our old .fbtn did not:
     * one height for every control in the row (34px), one radius (9px)
     * flat surfaces — no gradient, no glow, no translate on hover. Hover is a
       border and a text colour, nothing that moves.
     * EXACTLY ONE filled element: the primary action. Everything else quiet.
     * icons outlined at 15px with a 1.9 stroke, 7px from the label, never
       filled and never a different size per button.
   Gold is already our --accent (#d9ad4a burnished champagne), so the primary
   needed no new colour — only the restraint around it. */
.v5bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v5btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:var(--h-ctl);padding:0 13px;border-radius:var(--r-ctl);box-sizing:border-box;
  font-family:var(--sans-ui);font-size:13.5px;font-weight:600;line-height:1;
  letter-spacing:-0.005em;
  color:var(--txt);background:var(--panel);border:1px solid var(--line2);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:border-color .15s,color .15s,background .15s}
.v5btn:hover{color:var(--ink);border-color:var(--dim)}
.v5btn:active{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.v5btn svg,.v5ico{width:var(--ico);height:var(--ico);flex:none;
  stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round;
  fill:none;stroke:currentColor}
.v5btn[disabled],.v5btn.is-off{opacity:.5;pointer-events:none}
/* selected/toggled — still quiet, just unmistakably on */
.v5btn.on{color:var(--ink);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* the one filled control in the row */
.v5btn.pri{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);font-weight:700}
.v5btn.pri:hover{filter:brightness(1.06);border-color:var(--accent)}
/* a search / text input that lines up with the buttons exactly */
.v5field{height:var(--h-ctl);padding:0 12px;border-radius:var(--r-ctl);box-sizing:border-box;
  font-family:var(--sans-ui);font-size:13.5px;color:var(--ink);
  background:var(--panel);border:1px solid var(--line2);min-width:190px;
  transition:border-color .15s}
.v5field::placeholder{color:var(--dim)}
.v5field:focus{outline:none;border-color:var(--dim)}
/* a <select> that matches, chevron drawn rather than native */
select.v5btn{-webkit-appearance:none;appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}

/* ---- generic surfaces / chips (opt-in) ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-card)}
.chip{font-family:'JetBrains Mono',monospace;background:var(--panel);border:1px solid var(--line);color:var(--dim);
  font-size:12px;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.chip:hover{color:var(--txt);border-color:var(--line2)}
.chip.on{background:var(--mint-soft);border-color:color-mix(in srgb,var(--mint) 45%,transparent);color:var(--mint)}
.pos{color:var(--mint)} .neg{color:var(--red)}

/* ---- numbers ----
   This is a trading product: the numbers ARE the content, and the system had
   no scale for them. Every page sized its own, so a balance, a win rate and a
   nav label all landed within a few px of each other and nothing led. Tabular
   figures so columns line up, tight tracking so big numerals don't sprawl, and
   a slashed-zero-friendly mono for the small ones. */
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);font-weight:700;
  line-height:1.05}
.num-xl{font-size:clamp(28px,3.6vw,40px)}
.num-lg{font-size:clamp(22px,2.4vw,28px)}
.num-md{font-size:18px;letter-spacing:-.01em}
.num-sm{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;letter-spacing:0}
.num .unit{font-size:.52em;font-weight:600;color:var(--dim);letter-spacing:0;margin-left:3px}

/* ---- stat strip ----
   Four equal boxes with a hairline round each, a 10px label and a number
   barely larger than the label: present on home, the paper dashboard and the
   live page, hand-rolled three times, inert in all three. One component. The
   accent rule is deliberate — a stat tile is not profit, so the tick is ink,
   and only the VALUE goes mint/red when it represents money made or lost. */
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.statstrip > *{background:var(--panel);padding:16px 18px 15px;position:relative;
  display:flex;flex-direction:column;gap:7px;text-decoration:none;transition:background .15s}
a.statcell:hover{background:var(--panel2)}
.statcell .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:6px}
.statcell .k::before{content:'';width:5px;height:5px;border-radius:1px;background:var(--line2);flex:none}
.statcell.lead .k::before{background:var(--accent)}
.statcell .v{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:700;
  font-size:clamp(21px,2.3vw,27px);line-height:1;color:var(--ink)}
.statcell .s{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);
  margin-top:-1px;font-variant-numeric:tabular-nums}
:root[data-theme="light"] .statstrip{box-shadow:var(--shadow-card)}

/* ---- footer (injected by _v5.js as .v5foot) ---- */
/* Sticky footer: on short pages it sits at the BOTTOM of the viewport, not
   floating mid-page. Scoped via :has so only footered pages become flex. */
body:has(footer.v5foot){min-height:100vh;display:flex;flex-direction:column}
body:has(footer.v5foot) > .v5foot{margin-top:auto}
.v5foot{border-top:1px solid var(--line);margin-top:60px;background:var(--panel)}
.v5foot-in{max-width:1180px;margin:0 auto;padding:26px 24px 44px;color:var(--dim);font-size:12.5px;
  display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.v5foot-in .mono{color:var(--mint)}
.v5foot-in a{transition:color .15s}
.v5foot-in a:hover{color:var(--txt)}
.v5foot-in .sp{flex:1}

/* ---- Login modal (injected by _v5.js on any /login click) ---- */
.v5lm{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,10,16,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.v5lm.open{display:flex;animation:v5lm-fade .18s ease}
@keyframes v5lm-fade{from{opacity:0}to{opacity:1}}
.v5lm-sheet{position:relative;width:100%;max-width:384px;background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:34px 30px 28px;text-align:center;
  box-shadow:var(--shadow-modal);animation:v5lm-rise .2s cubic-bezier(.2,.7,.3,1)}
@keyframes v5lm-rise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.v5lm-x{position:absolute;top:12px;right:14px;width:32px;height:32px;border:none;background:none;
  color:var(--dim);font-size:22px;line-height:1;cursor:pointer;border-radius:8px;transition:.15s}
.v5lm-x:hover{color:var(--ink);background:var(--panel2)}
.v5lm-mark{width:46px;height:46px;margin:0 auto 18px;border-radius:13px;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:21px}
.v5lm-sheet h3{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.v5lm-sheet p{color:var(--dim);font-size:13.5px;margin:8px 0 22px;line-height:1.5}
.v5lm-provider{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  padding:13px 16px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);
  color:var(--ink);font-weight:600;font-size:14.5px;cursor:pointer;transition:.15s}
.v5lm-provider:hover{border-color:var(--dim);background:var(--panel2)}
.v5lm-provider svg{flex:none}
.v5lm-note{color:var(--dim);font-size:12px;margin-top:15px}
.v5lm-or{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12px;margin:16px 0 12px}
.v5lm-or:before,.v5lm-or:after{content:"";flex:1;height:1px;background:var(--line)}
.v5auth{text-align:left}
.v5auth-f{display:block;margin-bottom:10px}
.v5auth-f span{display:block;font-size:12px;color:var(--dim);margin-bottom:5px}
.v5auth-f input{width:100%;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--ink);font:inherit;font-size:14px;outline:none}
.v5auth-f input:focus{border-color:var(--accent)}
.v5auth-c{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--dim);line-height:1.45;margin:10px 0}
.v5auth-c input{margin-top:3px;flex:none}
.v5auth-c a{color:var(--ink);text-decoration:underline}
.v5auth-btn{display:block;width:100%;height:44px;border-radius:12px;border:none;margin-top:12px;
  background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;font-size:14.5px;cursor:pointer}
.v5auth-btn[disabled]{opacity:.45;cursor:not-allowed}
.v5auth-links{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--dim);margin-top:12px}
.v5auth-links button{background:none;border:none;color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline;padding:0}
.v5auth-msg{font-size:12.5px;color:var(--dim);margin-top:10px;min-height:16px}
.v5auth-msg.err{color:#e5484d}
.v5auth-msg.ok{color:var(--accent)}

/* ============================================================================
   v6 monochrome overrides — pages hardcoded mint (green) buttons/accents in
   their own inline CSS. Force every PRIMARY ACTION to the black accent so the
   whole site reads monochrome; mint survives ONLY as a positive/profit signal
   (.pos, gains) and small brand marks. Scoped to clear action-class names.
   ============================================================================ */
.btn-primary, .btn.primary, .btn-main, .nav-cta, .appnav-cta,
.cta-btn:not(.ghost):not(.current), button.pri, .btn.pri, .v5btn.pri{
  background:var(--accent-grad)!important; color:var(--accent-ink)!important;
  border:1px solid var(--accent)!important; text-shadow:none;
  box-shadow:var(--accent-shadow), var(--accent-inset)!important;
  transition:transform .16s var(--ease), box-shadow .2s var(--ease), filter .16s!important;
}
.btn-primary:hover, .btn.primary:hover, .btn-main:hover, .nav-cta:hover, .appnav-cta:hover,
.cta-btn:not(.ghost):not(.current):hover, button.pri:hover, .btn.pri:hover, .v5btn.pri:hover{
  transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 16px 34px -12px color-mix(in srgb,var(--accent) 45%,transparent), var(--accent-inset)!important;
}
/* ---- the GREEN action: same recipe as the gold button, in emerald ----
   One rule for every "go live / deploy / unlock" control in the product, so
   they all get the gradient, the lit top edge, the shadow and the lift on
   hover. Scoped to action-class names, like the gold rule above. */
.btn-mint, .btn.golive, .btn.deploylive, .scard .acts a.go, .pstart .acts a.go, .cmptray .go,
.cxbtn.primary, .tbhups-cta, .studio-lock-cta{
  background:var(--mint-grad)!important; color:var(--mint-ink)!important;
  border:1px solid var(--mint-edge)!important; text-shadow:0 1px 0 rgba(0,0,0,.12);
  box-shadow:var(--mint-shadow), var(--mint-inset)!important;
  transition:transform .16s var(--ease), box-shadow .2s var(--ease), filter .16s!important;
}
.btn-mint:hover, .btn.golive:hover, .btn.deploylive:hover, .scard .acts a.go:hover, .pstart .acts a.go:hover,
.cmptray .go:hover, .cxbtn.primary:hover, .tbhups-cta:hover, .studio-lock-cta:hover{
  transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 16px 34px -12px color-mix(in srgb,var(--mint) 55%,transparent), var(--mint-inset)!important;
}
.btn-mint:active, .btn.golive:active, .tbhups-cta:active, .studio-lock-cta:active{transform:none}
/* One GEOMETRY for every go-live control too (owner, 2026-11-01: "make all
   Go Live buttons the same: center the text, same size, on all pages").
   /my, /paper and the strategy report each sized theirs by hand. */
.btn.golive, .btn.deploylive, .pstart .acts a.go, .scard .acts a.go{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  height:32px!important;min-width:112px;padding:0 14px!important;box-sizing:border-box;
  border-radius:9px!important;font-size:13px!important;font-weight:700!important;line-height:1!important;
  letter-spacing:0!important;white-space:nowrap;text-decoration:none!important;text-align:center}
.btn.golive svg, .btn.deploylive svg, .pstart .acts a.go svg, .scard .acts a.go svg{
  width:15px!important;height:15px!important;flex:none}

/* featured / "most popular" mint framing → neutral ink, not green */
.tier.featured, .card.featured, .featured.grad-ring{
  border-color:var(--line2)!important; box-shadow:var(--shadow-card)!important;
}
.tier .badge, .badge.popular, .save-pill{
  background:var(--accent)!important; color:var(--accent-ink)!important;
  border-color:var(--accent)!important;
}
/* mint pill/segment ON-states that are really UI selection (not profit) → ink */
.chip.on, .fbtn.on, .lab-seg button.on{
  background:var(--accent)!important; color:var(--accent-ink)!important;
  border-color:var(--accent)!important;
}
/* hero emphasis words were mint on many pages → monochrome ink (reference look) */
.hero h1 em, .hero h2 em, .cta-band h2 em, h1 .grad, h1 em.accent{ color:var(--ink)!important; }
/* keep the profit-green semantics explicit */
.pos, .up, .gain{ color:var(--mint); }

/* ---- Help bot ("Ask the Trading Bot House bot") — draggable launcher + panel,
   injected by _v5.js on every page except the Studio. Theme-aware via tokens. */
#tbhHelp{position:fixed;right:20px;bottom:20px;z-index:400;font-family:var(--sans)}
#tbhHelp.dragging{user-select:none}
/* Gradient pill with layered shadows + a lit top edge so the launcher reads as
   a real, tappable button and pops off the page (both themes). */
.tbhhelp-fab{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:12px 18px 12px 14px;border-radius:999px;border:none;
  background:linear-gradient(135deg,#5b8cff 0%,#8b5cf6 55%,#a855f7 100%);
  color:#fff;font-size:13.5px;font-weight:600;font-family:inherit;letter-spacing:.01em;
  box-shadow:0 10px 30px -8px rgba(109,90,246,.55),0 2px 6px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.28);
  touch-action:none;transition:transform .16s,box-shadow .16s,filter .16s}
.tbhhelp-fab:hover{transform:translateY(-2px);filter:saturate(1.08) brightness(1.06);
  box-shadow:0 16px 42px -8px rgba(109,90,246,.72),0 4px 10px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.34)}
.tbhhelp-fab:active{transform:translateY(0);filter:brightness(.98)}
.tbhhelp-fab-ic{font-size:14px;line-height:1;flex:none;display:inline-grid;place-items:center;
  width:23px;height:23px;border-radius:50%;background:rgba(255,255,255,.2)}
#tbhHelp.open .tbhhelp-fab{opacity:0;pointer-events:none}
@media(max-width:520px){.tbhhelp-fab-tx{display:none}
  .tbhhelp-fab{padding:11px}.tbhhelp-fab-ic{width:26px;height:26px;font-size:16px}}

.tbhhelp-panel{position:absolute;right:0;bottom:0;width:min(360px,calc(100vw - 32px));
  height:min(520px,calc(100vh - 100px));display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(15,20,40,.5);
  opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;transform-origin:bottom right;
  transition:opacity .18s ease,transform .18s ease}
#tbhHelp.open .tbhhelp-panel{opacity:1;transform:none;pointer-events:auto}
.tbhhelp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
.tbhhelp-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--ink)}
.tbhhelp-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)}
.tbhhelp-x{background:none;border:none;color:var(--dim);font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
.tbhhelp-x:hover{color:var(--ink)}
.tbhhelp-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.tbhhelp-msg{max-width:88%;padding:10px 12px;border-radius:12px;font-size:13.5px;line-height:1.5;
  word-wrap:break-word}
.tbhhelp-msg.bot{align-self:flex-start;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-bottom-left-radius:4px}
.tbhhelp-msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px;font-weight:500}
.tbhhelp-msg a{color:var(--mint);text-decoration:underline;text-underline-offset:2px}
.tbhhelp-msg.user a{color:var(--accent-ink)}
.tbhhelp-msg.typing{display:flex;gap:4px;align-items:center}
.tbhhelp-msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--dim);opacity:.5;
  animation:tbhhelpblink 1.2s infinite}
.tbhhelp-msg.typing span:nth-child(2){animation-delay:.2s}
.tbhhelp-msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes tbhhelpblink{0%,60%,100%{opacity:.25}30%{opacity:.9}}
.tbhhelp-chips{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.tbhhelp-chip{text-align:left;background:none;border:1px solid var(--line2);color:var(--txt);
  border-radius:10px;padding:9px 11px;font-size:12.5px;font-family:inherit;cursor:pointer;transition:.14s}
.tbhhelp-chip:hover{border-color:var(--accent);color:var(--ink);background:var(--panel2)}
.tbhhelp-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--panel)}
.tbhhelp-input input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line2);border-radius:999px;
  padding:10px 14px;color:var(--ink);font-family:inherit;font-size:14px}
.tbhhelp-input input:focus{outline:none;border-color:var(--accent)}
.tbhhelp-send{flex:none;width:38px;height:38px;border-radius:999px;border:none;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-size:17px;font-weight:700;line-height:1;
  display:grid;place-items:center;transition:.14s}
.tbhhelp-send:hover{filter:brightness(1.05)}
@media(max-width:520px){
  .tbhhelp-panel{width:calc(100vw - 24px);height:min(70vh,540px)}}

/* ============================================================================
   READOUT — the shared layer (adopted 2026-10-16).

   The app pages were four variations on "cards in a grid", which read as four
   products with one logo. This is the common vocabulary instead: mono is the
   STRUCTURE (labels, state, every numeral), hairlines replace panels, and the
   figure that matters is the size of a headline. Status wording is lifted from
   /lab so every page sounds like the same machine.

   Lives here, not inline on a page, so adopting it on the next page is adding
   a class rather than copying 200 lines of CSS that then drift apart.
   ============================================================================ */

:root{ --surface2:#0c1317 }
:root[data-theme="light"]{ --surface2:#faf6ec }

/* ---- status rail ---- */
.rail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);padding:16px 0 15px;border-bottom:1px solid var(--line)}
.rail b{color:var(--ink);font-weight:500;letter-spacing:.1em}
.rail .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);display:inline-block;
  margin-right:8px;vertical-align:1px;box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 55%,transparent);
  animation:railPulse 2.6s ease-out infinite}
@keyframes railPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 50%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.rail .dot{animation:none}}
.rail .who{margin-left:auto;color:var(--dim)}
/* The rail wrapped badly on every phone (owner, 2026-10-30, three separate
   reports: /paper, /my and the home hub). Cause: .who carries
   margin-left:auto, so when the items stop fitting it is the ONE that drops
   to a second line -- and it lands right-aligned and alone under three full
   items, which reads as a layout bug rather than a wrap.
   Two changes. Each item gets nowrap so a phrase never breaks mid-word; and
   below 560px .who gives up margin-left:auto, so if a wrap is still
   unavoidable (the /real rail is 63 characters) the items flow and wrap as
   one balanced group instead of orphaning the last one. The type tightens in
   two steps so the shorter rails -- 38 chars on the home hub, 42 on /my --
   fit a single line at 400px, which is what they were asked to do. */
.rail > span{white-space:nowrap}
@media (max-width:560px){
  .rail{gap:5px 13px;font-size:9.5px;letter-spacing:.05em;padding:13px 0 12px}
  .rail .who{margin-left:0}
  .rail b{letter-spacing:.04em}
}
@media (max-width:400px){
  .rail{gap:4px 10px;font-size:9px;letter-spacing:.03em}
}
.rail .who b{color:var(--ink)}

/* ---- hero readout: one figure, its true split, and a key/value column ---- */
.readout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;
  align-items:end;padding:44px 0 30px;border-bottom:1px solid var(--line)}
@media (max-width:860px){.readout{grid-template-columns:1fr;gap:28px;align-items:start;padding-top:34px}}
.klabel{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.bignum{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(46px,8.4vw,96px);
  line-height:.92;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;
  margin-top:12px;display:flex;align-items:baseline;gap:2px}
.bignum .sign{color:var(--dim);font-weight:500}
.bignum.up{color:var(--mint)} .bignum.down{color:var(--red)}
/* Drawn to the real proportion — the shape is information, not decoration. */
.splitbar{display:flex;height:4px;margin-top:22px;background:var(--line);overflow:hidden}
.splitbar i{display:block;height:100%}
.splitbar .r{background:var(--mint)}
.splitbar .u{background:color-mix(in srgb,var(--mint) 38%,transparent)}
.splitleg{display:flex;gap:22px;margin-top:11px;font-family:'JetBrains Mono',monospace;
  font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.splitleg b{color:var(--txt);font-weight:500}
.kv{display:flex;flex-direction:column}
.kv a,.kv div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:border-color .15s}
.kv a:hover{border-bottom-color:var(--accent)}
.kv a:hover .n{color:var(--ink)}
.kv .k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.kv .n{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;color:var(--txt);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:color .15s}

/* ---- section head ---- */
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:44px 0 0;padding-bottom:12px;border-bottom:1px solid var(--line2)}
.shead h2{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);font-weight:500;margin:0}
.shead a,.shead .rt{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);text-decoration:none}
.shead a:hover{color:var(--ink)}

/* ---- ladder: the bar behind a row IS its result ---- */
.ladder{display:flex;flex-direction:column}
.lrow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;
  align-items:center;gap:18px;padding:15px 14px;border-bottom:1px solid var(--line);
  text-decoration:none;isolation:isolate;transition:background .15s}
.lrow::before{content:'';position:absolute;left:0;top:0;bottom:0;z-index:-1;width:var(--w,0%);
  background:color-mix(in srgb,var(--mint) 9%,transparent);
  transition:width .5s cubic-bezier(.2,.7,.2,1)}
.lrow.neg::before{background:color-mix(in srgb,var(--red) 9%,transparent)}
.lrow:hover{background:var(--surface2)}
.lrow .nm{font-size:14.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;letter-spacing:-.01em}
/* Each row is its own grid, so auto tracks do not line up down the list —
   fixed widths make the right-hand columns into real columns. */
.lrow .mk{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);
  letter-spacing:.05em;white-space:nowrap;min-width:104px;text-align:right}
.lrow .pl{font-family:'JetBrains Mono',monospace;font-size:14.5px;font-weight:700;
  font-variant-numeric:tabular-nums;min-width:96px;text-align:right;white-space:nowrap}
.lrow .st{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);min-width:44px;text-align:right}
.lrow .st.on{color:var(--mint)}
@media (max-width:680px){
  .lrow{grid-template-columns:minmax(0,1fr) auto;row-gap:7px;padding:13px 12px}
  .lrow .mk{grid-row:2;grid-column:1;min-width:0;text-align:left}
  .lrow .pl{grid-row:2;grid-column:2;text-align:right}
  .lrow .st{grid-row:1;grid-column:2}
}

/* ---- index: destinations as type, each row carrying live state ---- */
.index{display:flex;flex-direction:column}
.irow{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;align-items:baseline;
  gap:20px;padding:17px 14px;border-bottom:1px solid var(--line);text-decoration:none;
  transition:background .15s,padding-left .18s}
.irow:hover{background:var(--surface2);padding-left:20px}
.irow .t{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.015em;white-space:nowrap}
.irow .d{font-size:13px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.irow .s{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.irow:hover .s{color:var(--accent)}
@media (max-width:680px){
  .irow{grid-template-columns:minmax(0,1fr) auto;row-gap:5px}
  .irow .d{grid-row:2;grid-column:1/-1}
}

/* ---- Shared settings modal (_settings.js) --------------------------------
   Opened from the account menu on every page, so a setting no longer means a
   trip into the Studio. */
.tbhset-shell{background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  width:min(560px,100%);max-height:min(86vh,680px);display:flex;flex-direction:column;overflow:hidden}
.tbhset-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line2)}
.tbhset-head h3{margin:0;font-size:16px;font-weight:600}
.tbhset-x{margin-left:auto;background:none;border:0;color:var(--dim);font-size:26px;
  line-height:1;cursor:pointer;padding:0 4px}
.tbhset-x:hover{color:var(--ink)}
.tbhset-tabs{display:flex;gap:4px;padding:10px 14px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.tbhset-tabs button{background:none;border:1px solid transparent;border-radius:8px;padding:7px 12px;
  color:var(--dim);font:inherit;font-size:13px;cursor:pointer}
.tbhset-tabs button.on{background:var(--panel2);border-color:var(--line2);color:var(--ink)}
.tbhset-body{padding:16px 18px;overflow-y:auto}
.tbhset-load{padding:40px 0;text-align:center;color:var(--dim);font-size:13px}
.tbhset-id{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.tbhset-id b{font-size:16px}
.tbhset-id span{font-size:13px;color:var(--dim)}
.tbhset-tier{align-self:flex-start;margin-top:6px;font-size:11px;letter-spacing:.1em;
  border:1px solid var(--line2);border-radius:999px;padding:2px 9px}
.tbhset-sec{margin-top:16px}
.tbhset-sec p{font-size:12.5px;color:var(--dim);line-height:1.5;margin:4px 0 10px}
.tbhset-form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.tbhset-form input{height:38px;padding:0 11px;border-radius:9px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--ink);font:inherit;font-size:13.5px;outline:none}
.tbhset-form input:focus{border-color:var(--accent)}
.tbhset-msg{font-size:12.5px;color:var(--dim);min-height:14px}
.tbhset-link{background:none;border:none;padding:0;color:var(--ink);font:inherit;font-size:inherit;text-decoration:underline;cursor:pointer}
.tbhset-danger{border:1px solid rgba(229,72,77,.45);border-radius:12px;padding:12px 14px;margin-top:20px}
.tbhset-danger h4{color:#e5484d}
.tbhset-btn.danger{border-color:rgba(229,72,77,.6);color:#e5484d}
.tbhset-btn.danger:hover{background:rgba(229,72,77,.12)}
.tbhset-sec h4{margin:0 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.tbhset-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.tbhset-row span{color:var(--dim)}
.tbhset-note{margin:10px 0 0;font-size:12px;color:var(--dim);line-height:1.5}
.tbhset-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.tbhset-btn{display:inline-block;padding:9px 14px;border-radius:9px;border:1px solid var(--line2);
  color:var(--ink);font-size:13px;text-decoration:none;cursor:pointer;background:none;font-family:inherit}
.tbhset-btn:hover{border-color:var(--dim)}
.tbhset-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.tbhset-btn[disabled]{opacity:.6;cursor:default}
.tbhset-pill{font-size:11px;border-radius:999px;padding:2px 9px;border:1px solid var(--line2)}
.tbhset-pill.live{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 45%,transparent)}
.tbhset-pill.testnet,.tbhset-pill.demo{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.tbhset-pill.off{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
@media (max-width:520px){ .tbhset-shell{width:100%} .tbhset-body{padding:14px} }


/* ============================================================================
   v7 · ONE SYSTEM (2026-11-01). Audit found 45 button selectors, 5 input
   styles in the Studio alone, 6 greens, 2 token vocabularies, 19 fixed
   overlays and no bottom bar on phones. This block is the single source for
   every control, field, dialog, empty state and the phone tab bar. Pages
   migrate onto these names; until they do, the alias rules at the end give
   the old names the same metrics so the product already reads as one.
   Brand stays: dark petrol, champagne-gold accent, mono eyebrows, mint only
   for profit, red only for loss.
   ============================================================================ */
:root{
  /* type scale — the only sizes UI chrome may use */
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:13.5px; --fs-lg:15px; --fs-xl:20px; --fs-2xl:26px;
  /* z-index ladder — one place, ascending */
  --z-bar:300; --z-fab:400; --z-sheet:700; --z-modal:800; --z-toast:900; --z-top:950;
  /* tokens pages used without ever defining them */
  --green:var(--mint); --danger:var(--red); --azure-soft:color-mix(in srgb,var(--blue) 12%,transparent);
  --line-gold:color-mix(in srgb,var(--accent) 45%,transparent); --line-tangerine:var(--line-gold);
  --shadow-lg:var(--shadow-modal); --ac:var(--accent); --cc:var(--accent-ink);
  --tabbar-h:0px;
}

/* ---- fields: label / control / hint ------------------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
select, textarea{
  font-family:inherit; font-size:var(--fs-md); color:var(--ink);
  background:var(--panel2); border:1px solid var(--line2); border-radius:var(--r-ctl);
  padding:0 12px; min-height:var(--h-ctl); outline:none; transition:border-color .15s}
textarea{padding:9px 12px; line-height:1.5; min-height:72px; resize:vertical}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus{border-color:var(--accent)}
input::placeholder, textarea::placeholder{color:var(--dim)}
select{-webkit-appearance:none;appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.v5f{display:block;margin-bottom:12px}
.v5f>span,.v5f>label{display:block;font-size:var(--fs-sm);color:var(--dim);margin-bottom:5px}
.v5f input,.v5f select,.v5f textarea{width:100%}
.v5f .hint{display:block;font-size:var(--fs-xs);color:var(--dim);margin-top:5px;line-height:1.4}
.v5f .req{color:var(--red);margin-left:3px}
.v5check{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-sm);color:var(--dim);line-height:1.45;margin:10px 0;cursor:pointer}
.v5check input{margin-top:3px;flex:none;accent-color:var(--accent)}
.v5check a{color:var(--ink);text-decoration:underline}

/* ---- buttons: size + role modifiers on .v5btn ----------------------------- */
.v5btn.sm{height:28px;padding:0 10px;font-size:var(--fs-sm)}
.v5btn.lg{height:44px;padding:0 20px;font-size:var(--fs-lg);border-radius:12px}
.v5btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 55%,transparent)}
.v5btn.danger:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}
.v5btn.ghost{background:transparent;border-color:transparent;color:var(--txt)}
.v5btn.ghost:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.v5btn.ico{width:var(--h-ctl);padding:0}
.v5btn.block{display:flex;width:100%}
/* segmented control: one row of .v5btn that reads as one object */
.v5seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-ctl);overflow:hidden;background:var(--panel)}
.v5seg .v5btn{border:0;border-radius:0;height:32px}
.v5seg .v5btn+.v5btn{border-left:1px solid var(--line2)}
.v5seg .v5btn.on{background:var(--accent);color:var(--accent-ink)}

/* ---- empty + loading --------------------------------------------------- */
.v5empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:36px 20px;border:1px dashed var(--line2);border-radius:var(--r-card);color:var(--dim);font-size:var(--fs-md);line-height:1.5}
.v5empty svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;opacity:.8}
.v5empty b{color:var(--ink);font-weight:600}
.v5empty .v5btn{margin-top:4px}
.v5skel{position:relative;overflow:hidden;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:8px;min-height:14px}
.v5skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 7%,transparent),transparent);animation:v5shimmer 1.3s infinite}
@keyframes v5shimmer{to{transform:translateX(100%)}}
.v5skel-rows>*{margin-bottom:10px}

/* ---- dialog: one modal, bottom sheet on phones --------------------------- */
.v5dlg{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,10,16,.58);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .16s ease}
.v5dlg.in{opacity:1}
:root[data-theme="light"] .v5dlg{background:rgba(60,45,20,.3)}
.v5dlg-panel{position:relative;width:100%;max-width:520px;max-height:min(88vh,900px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-modal);
  transform:translateY(8px) scale(.985);transition:transform .18s var(--ease)}
.v5dlg.in .v5dlg-panel{transform:none}
.v5dlg-panel.wide{max-width:760px} .v5dlg-panel.narrow{max-width:400px}
.v5dlg-head{display:flex;align-items:center;gap:10px;padding:18px 20px 12px}
.v5dlg-head h3{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;flex:1;min-width:0}
.v5dlg-x{width:32px;height:32px;border:0;background:none;color:var(--dim);border-radius:8px;cursor:pointer;display:grid;place-items:center;flex:none}
.v5dlg-x:hover{color:var(--ink);background:var(--panel2)}
.v5dlg-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.v5dlg-body{padding:0 20px 18px;overflow:auto;color:var(--txt);font-size:var(--fs-md);line-height:1.55}
.v5dlg-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 18px;border-top:1px solid var(--line)}
.v5dlg-grab{display:none;width:38px;height:4px;border-radius:999px;background:var(--line2);margin:8px auto 0}
@media(max-width:560px){
  .v5dlg{padding:0;align-items:flex-end}
  .v5dlg-panel{max-width:none;border-radius:18px 18px 0 0;border-bottom:0;max-height:92vh;transform:translateY(24px)}
  .v5dlg-grab{display:block}
  .v5dlg-foot{flex-direction:column-reverse}
  .v5dlg-foot .v5btn{width:100%;height:44px}
}
body.v5-locked{overflow:hidden}

/* ---- phone tab bar (injected by _v5.js under 940px) ----------------------- */
.v5tabbar{display:none}
@media(max-width:940px){
  :root{--tabbar-h:calc(56px + env(safe-area-inset-bottom,0px))}
  .v5tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:flex;
    height:var(--tabbar-h);padding-bottom:env(safe-area-inset-bottom,0px);
    background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line)}
  .v5tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:10.5px;font-weight:600;color:var(--dim);text-decoration:none;background:none;border:0;font-family:inherit;cursor:pointer}
  .v5tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75}
  .v5tab.on{color:var(--accent)}
  body.has-tabbar{padding-bottom:var(--tabbar-h)}
  body.has-tabbar #tbhHelp{bottom:calc(var(--tabbar-h) + 12px)}
  body.has-tabbar footer.v5foot{margin-bottom:8px}
}

/* ---- alias layer: old names, same metrics (pages migrate progressively) --
   Metrics only: height, radius, font. Colour roles stay with the page so a
   primary stays primary and a danger stays red. Hero CTAs keep their size. */
.tbtn,.cxbtn,.wbtn,.shbtn,.exbtn,.hzbtn,.mt-btn,.cebtn,.fbtn,.iconbtn,.szbtn,.tfbtn,.mcbtn,.pinebtn,
.run-btn,.set-btn-primary,.set-btn-ghost,.tour-btn,.toast-btn,.chat-act-btn,.mkt-tab-btn,.mc-tab,.tbhset-btn,
.fsel,.fq,.fb{
  font-family:inherit;font-size:var(--fs-md);font-weight:600;line-height:1;
  min-height:var(--h-ctl);border-radius:var(--r-ctl);letter-spacing:-.005em}
.tbtn{min-height:40px}

/* backdrops of the shared modals follow the theme (they were a fixed dark rgba) */
#tbhSetModal,#tbhUpsellModal{background:rgba(8,10,16,.58)!important}
:root[data-theme="light"] #tbhSetModal,:root[data-theme="light"] #tbhUpsellModal{background:rgba(60,45,20,.3)!important}