/* Autobot Signal for Deriv — web app, same design as the Android app (Theme.kt).
   Night Desk in dark mode, Bold Light in light mode; follows the phone's setting. */

@font-face { font-family: Geist; src: url(fonts/geist.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geist_mono.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Archivo; src: url(fonts/archivo.ttf) format("truetype"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Bold Light */
  --ground: #FFFFFF; --surface: #F3F1EC; --raised: #FFFFFF; --line: #E6E2DA;
  --ink: #1F1209; --muted: #6B6259;
  --signal: #F28C38; --sig-text: #A34C0A; --sig-soft: #FDE6D2; --on-signal: #1F1209;
  --win: #1E7F4E; --loss: #C2361F;
  --tag-win-bg: #1E7F4E; --tag-win-ink: #FFFFFF; --tag-loss-bg: #C2361F; --tag-loss-ink: #FFFFFF;
  --tag-sig-bg: #F28C38; --tag-sig-ink: #1F1209;
  --seg-bg: #1F1209; --seg-ink: #FFFFFF; --btn2-ring: #1F1209;
  --nav-bg: rgba(255, 255, 255, .94); --tab-pill: #FDE6D2; --nav-ring: #E6E2DA;
  --glass-tint: rgba(255, 255, 255, .5); --glass-edge: rgba(255, 255, 255, .95); --glass-edge-low: rgba(255, 255, 255, .4);
  --glass-shade: rgba(31, 18, 9, .12); --lens: rgba(255, 255, 255, .62); --lens-edge: rgba(255, 255, 255, 1);
  --lens-low: rgba(255, 255, 255, .7); --lens-shadow: 0 6px 18px rgba(31, 18, 9, .16), 0 1px 3px rgba(31, 18, 9, .1);
  --lens-rest: rgba(31, 18, 9, .07);
  --deriv: #FF444F;
  --shadow: rgba(0, 0, 0, .14);
  color-scheme: light;

  --r-card: 28px; --r-card-s: 24px; --r-box: 20px; --r-input: 12px;
  --gutter: 16px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Night Desk */
    --ground: #0E0F11; --surface: #1B1D20; --raised: #272A2E; --line: #2E3135;
    --ink: #F2F1EE; --muted: #A3A39E;
    --signal: #F28C38; --sig-text: #F28C38; --sig-soft: #3A2614; --on-signal: #0E0F11;
    --win: #4ADE9B; --loss: #FF7466;
    --tag-win-bg: #4ADE9B; --tag-win-ink: #0E0F11; --tag-loss-bg: #FF7466; --tag-loss-ink: #0E0F11;
    --tag-sig-bg: #F28C38; --tag-sig-ink: #0E0F11;
    --seg-bg: #F2F1EE; --seg-ink: #0E0F11; --btn2-ring: #F2F1EE;
    --nav-bg: rgba(31, 34, 38, .94); --tab-pill: #33373C; --nav-ring: #2A2D31;
    --glass-tint: rgba(38, 41, 46, .48); --glass-edge: rgba(255, 255, 255, .24); --glass-edge-low: rgba(255, 255, 255, .07);
    --glass-shade: rgba(0, 0, 0, .5); --lens: rgba(255, 255, 255, .1); --lens-edge: rgba(255, 255, 255, .55);
    --lens-low: rgba(255, 255, 255, .22); --lens-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
    --lens-rest: rgba(255, 255, 255, .09);
    --shadow: rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0E0F11; --surface: #1B1D20; --raised: #272A2E; --line: #2E3135;
  --ink: #F2F1EE; --muted: #A3A39E;
  --signal: #F28C38; --sig-text: #F28C38; --sig-soft: #3A2614; --on-signal: #0E0F11;
  --win: #4ADE9B; --loss: #FF7466;
  --tag-win-bg: #4ADE9B; --tag-win-ink: #0E0F11; --tag-loss-bg: #FF7466; --tag-loss-ink: #0E0F11;
  --tag-sig-bg: #F28C38; --tag-sig-ink: #0E0F11;
  --seg-bg: #F2F1EE; --seg-ink: #0E0F11; --btn2-ring: #F2F1EE;
  --nav-bg: rgba(31, 34, 38, .94); --tab-pill: #33373C; --nav-ring: #2A2D31;
  --glass-tint: rgba(38, 41, 46, .48); --glass-edge: rgba(255, 255, 255, .24); --glass-edge-low: rgba(255, 255, 255, .07);
  --glass-shade: rgba(0, 0, 0, .5); --lens: rgba(255, 255, 255, .1); --lens-edge: rgba(255, 255, 255, .55);
  --lens-low: rgba(255, 255, 255, .22); --lens-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
  --lens-rest: rgba(255, 255, 255, .09);
  --shadow: rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font-family: Geist, system-ui, sans-serif; font-size: 15px; line-height: 22px;
  -webkit-font-smoothing: antialiased; text-size-adjust: 100%; overflow-x: clip; }
/* clip, not hidden: iOS Safari turns overflow-x:hidden on body into a scroll box, and the
   sticky top row then sticks to the body instead of the screen (it scrolled away on iPhone). */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--sig-text); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ic { display: block; flex: none; }
[hidden] { display: none !important; }

/* ── Type (the nine styles from Foundations) ─────────────────────────────── */
.t-display { font-family: Archivo; font-weight: 900; font-stretch: 62%; font-size: 60px; line-height: 54px; text-transform: uppercase; margin: 0; }
.t-title1 { font-weight: 700; font-size: 34px; line-height: 37px; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.t-title2 { font-weight: 600; font-size: 22px; line-height: 25px; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.t-title3 { font-weight: 600; font-size: 17px; line-height: 22px; margin: 0; }
.t-body { font-size: 15px; line-height: 22px; }
.t-strong { font-weight: 600; font-size: 15px; line-height: 21px; }
.t-label { font-weight: 600; font-size: 13px; line-height: 18px; }
.t-caption { font-size: 13px; line-height: 19px; }
.t-overline { font-size: 11px; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; }
.t-tag { font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; }
.num { font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.muted { color: var(--muted); }
.sig { color: var(--sig-text); }
.win { color: var(--win); } .loss { color: var(--loss); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.app { min-height: 100dvh; }
.page { max-width: 560px; margin: 0 auto; padding: calc(var(--safe-top) + 8px) var(--gutter) calc(var(--safe-bottom) + 112px); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }

/* Wide screens: side rail + two panes (Android's foldable layout). */
@media (min-width: 600px) {
  .page { max-width: 1180px; padding-left: calc(var(--gutter) + 120px); padding-bottom: 32px; }
  .panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
}

/* ── Components ─────────────────────────────────────────────────────────── */
.card { background: var(--surface); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.list-card { padding: 16px 16px 4px; gap: 4px; }
.list-card > .head { display: flex; align-items: center; padding-bottom: 4px; }
.divider { height: 1px; background: var(--line); flex: none; }

.tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.tag.sig { background: var(--tag-sig-bg); color: var(--tag-sig-ink); }
.tag.win { background: var(--tag-win-bg); color: var(--tag-win-ink); }
.tag.loss { background: var(--tag-loss-bg); color: var(--tag-loss-ink); }
.tag.mute { background: var(--raised); color: var(--muted); }
.tag.real { background: var(--ink); color: var(--ground); }

.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; text-decoration: none;
  border-radius: 999px; padding: 0 20px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.btn.sm { height: 44px; }
.btn.primary { background: var(--signal); color: var(--on-signal); }
.btn.secondary { border: 1.5px solid var(--btn2-ring); color: var(--ink); }
.btn.deriv { background: var(--deriv); color: #fff; font-weight: 800; }
.btn.danger { background: var(--loss); color: var(--ground); }
.btn.deriv .mark { width: 13.6px; height: 17px; }
.btn:disabled { opacity: .5; cursor: default; }

.icon-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--ink);
  display: flex; align-items: center; justify-content: center; flex: none; position: relative; }
.icon-circle.active { background: var(--sig-soft); color: var(--sig-text); }
.icon-circle > .avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.icon-circle.photo { position: relative; flex: none; }
.photo-badge { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--signal); color: var(--on-signal);
  box-shadow: 0 0 0 2px var(--ground); }

.hpill { height: 40px; border-radius: 999px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--signal); color: var(--on-signal); font-weight: 700; font-size: 14px; white-space: nowrap; }
.hpill.plain { background: var(--surface); color: var(--ink); }

.seg { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ground); }
.seg > button { position: relative; z-index: 1; flex: 1; height: 36px; border-radius: 999px; color: var(--muted); font-weight: 500; font-size: 15px; white-space: nowrap; }
.seg.many > button { font-size: 14px; }
.seg > button[aria-pressed="true"] { background: var(--seg-bg); color: var(--seg-ink); font-weight: 600; }

.toggle { width: 46px; height: 28px; border-radius: 999px; display: flex; flex: none;
  background: var(--raised); border: 1.5px solid var(--line); justify-content: flex-start; padding: 1.5px; }
.toggle::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); }
.toggle[aria-checked="true"] { background: var(--signal); border-color: transparent; justify-content: flex-end; }
.toggle[aria-checked="true"]::after { background: var(--on-signal); }

.radio { width: 24px; height: 24px; border-radius: 50%; background: var(--raised); border: 1.5px solid var(--muted);
  display: flex; align-items: center; justify-content: center; flex: none; }
.radio.on { border: 2px solid var(--signal); }
.radio.on::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }

.stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat .l { color: var(--muted); }

/* Top bar: account circle with the bot's dot, the DEMO/REAL pill, then the tab's controls. */
.topbar { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
/* Phones: the top row stays put while the page scrolls under it, like the menu at the bottom.
   The page drops its own top padding and the bar carries it, so its background also covers the
   status bar. No negative top margin: WebKit (iPhone Safari) then let the bar scroll away. */
@media (max-width: 599px) {
  .page:has(> .topbar) { padding-top: 0; }
  /* Frosted glass, like the bottom menu: see-through, with the page blurred as it
     scrolls behind, fading out below the pills instead of ending in a hard edge. The
     glass is a layer behind the pills (::before) so only it fades, not them. It also
     covers the status-bar strip, so the clock stays readable. */
  .topbar { position: sticky; top: 0; z-index: 15; isolation: isolate;
    margin: 0 calc(-1 * var(--gutter)); padding: calc(var(--safe-top) + 16px) var(--gutter) 8px; }
  .topbar::before { content: ""; position: absolute; inset: 0 0 -18px 0; z-index: -1; pointer-events: none;
    background: color-mix(in srgb, var(--ground) 55%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 30px), transparent); }
}
.topbar .dot { position: absolute; top: 1px; right: 1px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ground); padding: 2px; }
.topbar .dot::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--signal); }
.topbar .dot.running::after { background: var(--win); }
.topbar .dot.needs::after { background: var(--loss); }
.acct-pill { border-radius: 999px; padding: 6px 10px; }

/* Floating tab bar (phones) / rail (wide). */
/* ── Tab bar: Liquid Glass (Apple HIG, iOS 26+) ─────────────────────────────
   Floats over the page as glass: what scrolls behind is blurred and brightened, with
   light catching the top edge. A glass lens marks the current tab and slides between
   tabs on a spring; pressing swells it, dragging along the bar carries it with the
   finger. Scrolling down shrinks the bar to icons, scrolling up brings the labels back.
   The bar is drawn once and kept (main.js syncNav), so all of this can animate. */
.nav { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); isolation: isolate;
  /* Low, inside the home-indicator zone like iOS 26's own tab bars (about 18pt from the
     bottom on a Face ID iPhone); 12px on phones without a home indicator. */
  bottom: max(12px, calc(var(--safe-bottom) - 16px)); width: min(528px, calc(100% - 2 * var(--gutter)));
  display: flex; padding: 6px; border-radius: 999px; background: var(--glass-tint);
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 var(--glass-edge-low), inset 0 0 0 1px var(--glass-edge-low),
    0 12px 32px var(--glass-shade);
  touch-action: none; -webkit-user-select: none; user-select: none; }
.nav[hidden] { display: none; }
.nav::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, var(--glass-edge-low), transparent 55%); }
.nav > button { position: relative; z-index: 1; flex: 1; height: 56px; border-radius: 999px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; color: var(--ink); font-weight: 600; font-size: 12px;
  transition: height .35s cubic-bezier(.3, 1.3, .5, 1), color .2s; }
.nav > button svg { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.nav > button > span { transition: opacity .2s, max-height .3s; line-height: 16px; max-height: 18px; overflow: hidden; }
.nav > button[aria-current="page"] { color: var(--sig-text); font-weight: 700; }
.nav > button:focus-visible { outline: 2px solid var(--sig-text); outline-offset: -2px; }
/* The lens: at rest a quiet pill inside the bar behind the current tab. While a finger
   is on the bar it swells into a raised glass capsule that stands proud of the bar,
   with a bright top rim, a softer bottom rim, a thin refractive edge (warm top-left,
   cool bottom-right), a specular highlight and a shadow; on release it settles back. */
.nav .lens { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: var(--lw, 0px);
  border-radius: 999px; pointer-events: none; background: var(--lens-rest);
  transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(var(--ls, 1));
  transition: transform .55s cubic-bezier(.3, 1.35, .5, 1), width .35s cubic-bezier(.3, 1.2, .5, 1), height .35s,
    background .25s, box-shadow .25s; }
.nav .lens::before, .nav .lens::after { content: ""; position: absolute; border-radius: 999px; opacity: 0; transition: opacity .2s; }
.nav .lens::before { inset: 0; padding: 1.5px;
  background: linear-gradient(125deg, rgba(255, 170, 90, .75), rgba(255, 255, 255, .15) 28%, transparent 50%,
    rgba(255, 255, 255, .12) 72%, rgba(110, 180, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.nav .lens::after { left: 14%; right: 14%; top: 3px; height: 38%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); }
.nav.still .lens { transition: none; }
.nav.pressing .lens { --ls: 1.22;
  background: linear-gradient(180deg, var(--lens-low), transparent 45%, transparent 70%, var(--glass-edge-low)), var(--lens);
  box-shadow: inset 0 1.5px 1px var(--lens-edge), inset 0 -1.5px 1.5px var(--lens-low), inset 0 0 0 .5px var(--lens-low), var(--lens-shadow); }
.nav.pressing .lens::before { opacity: 1; }
.nav.pressing .lens::after { opacity: .55; }
.nav.dragging .lens { transition: transform .1s ease-out, width .2s; }
.nav.pressing > button:active svg { transform: scale(.9); }
/* Scrolled down: icons only, a shorter bar. */
.nav.mini > button { height: 42px; }
.nav.mini > button > span { opacity: 0; max-height: 0; }
.nav.mini > button { gap: 0; }
@media (min-width: 600px) {
  /* Concentric corners: the selected lens's radius (32) plus the 6px padding and 1px edge. */
  .nav { left: 24px; top: 50%; bottom: auto; transform: translateY(-50%); width: auto; flex-direction: column; gap: 4px; border-radius: 39px; }
  .nav > button { width: 72px; height: 64px; flex: none; }
  .nav .lens { top: 0; bottom: auto; left: 6px; right: 6px; width: auto; height: var(--lh, 0px);
    transform: translate(0, var(--ly, 0px)) scale(var(--ls, 1)); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--nav-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav > button, .nav > button svg, .nav > button > span, .nav .lens { transition: none; }
}

/* AI markets on phones: chips plus a dashed "Add market". */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; border-radius: 999px;
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; }
.chip:not(:has(.chip-x)) { padding-right: 12px; }
.chip-x { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.chip-add { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border: 1.5px dashed var(--line);
  border-radius: 999px; color: var(--sig-text); font-weight: 600; font-size: 13px; }

/* Sheets (account, resume) — bottom sheet on phones, side sheet on wide screens. */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .5); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 560px; background: var(--ground); border-radius: 28px 28px 0 0;
  padding: 16px 20px calc(var(--safe-bottom) + 20px); display: flex; flex-direction: column; gap: 14px;
  max-height: 92dvh; overflow: auto; }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); align-self: center; }
@media (min-width: 600px) {
  .scrim { justify-content: flex-end; align-items: stretch; }
  .sheet { max-width: 440px; border-radius: 28px 0 0 28px; padding-top: 24px; }
  .sheet .grab { display: none; }
}

.notice { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--r-box); padding: 12px 14px;
  background: var(--sig-soft); color: var(--ink); }
.notice.cool { background: var(--surface); }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--safe-bottom) + 96px); transform: translateX(-50%);
  background: var(--ink); color: var(--ground); border-radius: 999px; padding: 10px 16px; font-weight: 600; font-size: 13px;
  max-width: calc(100% - 32px); text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: rise .22s ease-out; }
  @keyframes rise { from { transform: translateY(24px); } to { transform: none; } }
}

/* ── Screen pieces ──────────────────────────────────────────────────────── */
.center { text-align: center; }
.ink { color: var(--ink); }
.launch { min-height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px;
  padding: calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 24px); }
.launch .hero .sub { font-size: 30px; line-height: 27px; }
.launch .points { gap: 18px; }
.launch .signin { margin-top: auto; }
@media (max-width: 379px) { .launch .t-display { font-size: 48px; line-height: 43px; } }
@media (min-width: 600px) {
  .launch { max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 22px 24px; padding: 24px; }
  .launch .hero { grid-row: 1 / 4; background: var(--signal); color: var(--on-signal); border-radius: var(--r-card); padding: 28px;
    display: flex; flex-direction: column; justify-content: flex-end; }
  .launch .hero .sub, .launch .hero p { color: var(--on-signal); }
  .launch .hero .t-display { font-size: 66px; line-height: 59px; }
  .launch .points { align-self: center; }
}
.pricebox { background: var(--ground); border-radius: var(--r-box); padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--win); flex: none; }
.acct-row { flex-direction: row; align-items: center; gap: 12px; border-radius: var(--r-card-s); padding: 12px 16px; width: 100%; text-align: left; }
.deriv-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--deriv); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.deriv-dot .mark { width: 9.5px; height: 12px; }
.way { background: var(--surface); border-radius: var(--r-card-s); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.card .way { background: var(--ground); }
.way.hi { box-shadow: inset 0 0 0 2px var(--signal); }
.numdot { width: 24px; height: 24px; border-radius: 50%; background: var(--raised); color: var(--ink); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.numdot.on { background: var(--signal); color: var(--on-signal); }
.choice { flex-direction: row; align-items: center; gap: 12px; border-radius: var(--r-card-s); padding: 14px; width: 100%; }
.choice.on { box-shadow: inset 0 0 0 2px var(--signal); }
.menu-row { display: flex; align-items: center; gap: 16px; padding: 6px 0; width: 100%; text-decoration: none; color: var(--ink); }
.faq { padding: 10px 0; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq[open] summary .ic { transform: rotate(180deg); }
.faq .t-caption { margin-top: 6px; }
.install { flex-direction: row; align-items: center; gap: 12px; width: 100%; border-radius: var(--r-card-s); padding: 12px 16px; }
.scrim.center { align-items: flex-end; }
@media (min-width: 600px) { .scrim.center { align-items: center; justify-content: center; } .scrim.center .sheet { border-radius: 28px; max-width: 460px; } }
.list-card .head .t-label { padding: 4px 0; }

/* ── Signals + News ─────────────────────────────────────────────────────── */
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mono { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; line-height: 19px; }
pre.mono { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; }
.source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.source-tile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-card-s); background: var(--surface); width: 100%; min-width: 0; }
.source-tile.on { box-shadow: inset 0 0 0 2px var(--signal); }
.source-tile .t-strong { overflow-wrap: anywhere; }
.small-btn { height: 34px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--btn2-ring); flex: none; white-space: nowrap; }
.following { padding: 8px 12px; border-radius: 999px; background: var(--sig-soft); color: var(--sig-text); flex: none; }
.copy-line { display: flex; align-items: center; gap: 8px; background: var(--ground); border-radius: var(--r-input); padding: 6px 6px 6px 12px; min-width: 0; }
.copy-line > .mono:not(pre) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-line.top { align-items: flex-start; padding: 12px; }
.input { width: 100%; height: 48px; border-radius: var(--r-input); border: 1.5px solid var(--line); background: var(--raised);
  color: var(--ink); font: inherit; font-size: 16px; padding: 0 14px; }
.input:focus { outline: none; border-color: var(--signal); }
.check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--muted); display: flex; align-items: center; justify-content: center; flex: none; }
.check.on { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.channel { width: 100%; padding: 10px 0; gap: 12px; }
.numdot.sm { width: 22px; height: 22px; font-size: 11px; }
.numdot.done { background: var(--win); color: var(--ground); }
.back-bar { display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; color: var(--ink); }
.pause-track { position: relative; height: 40px; }
.pause-track .rail { position: absolute; left: 0; right: 0; top: 14px; height: 12px; border-radius: 6px; background: var(--raised); }
.pause-block { position: absolute; top: 8px; height: 24px; border-radius: 6px; background: var(--loss); }
.pause-track .now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--signal); }

/* ── Settings, Router, History ──────────────────────────────────────────── */
.numfield { display: flex; align-items: center; gap: 6px; height: 48px; border-radius: var(--r-input); background: var(--ground); padding: 0 14px; }
.numfield input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; outline: none; padding: 0; }
.numfield:focus-within { box-shadow: inset 0 0 0 1.5px var(--signal); }
.pick { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: var(--r-box); background: var(--ground); }
.leg { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: var(--r-card-s); background: var(--surface); }
.split-box { height: 44px; border-radius: 999px; background: var(--ground); display: flex; align-items: center; justify-content: center; }
.crossing { gap: 8px; padding: 6px 0; }
.crossing .grow { height: 1px; background: var(--signal); }
.settings-nav { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--r-card-s); }
.settings-nav.on { background: var(--surface); }
.trade-pick { display: block; width: 100%; text-align: left; border-radius: var(--r-card-s); }
.trade-pick.on { background: var(--raised); padding: 0 10px; }
.trade-line { width: 100%; height: 160px; }
.trade-line .base { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.trade-line .up, .trade-line .down { stroke-width: 3; vector-effect: non-scaling-stroke; }
.trade-line .up { stroke: var(--win); } .trade-line .down { stroke: var(--loss); }
@media (min-width: 600px) { .sticky { position: sticky; top: 16px; } }
section[id^="sec-"] { scroll-margin-top: 16px; }

/* ── Setup + token ──────────────────────────────────────────────────────── */
.onboard { padding-bottom: calc(var(--safe-bottom) + 24px); }
.onboard.wide { padding-left: var(--gutter); }
.steps { display: flex; gap: 6px; padding: 4px 0 8px; }
.steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.steps span.on { background: var(--signal); }
.source-opt { width: 100%; padding: 16px; border-radius: var(--r-card-s); }
.source-opt.on { box-shadow: inset 0 0 0 2px var(--signal); }
.source-grid.tall { gap: 12px; }
.token-box { display: flex; align-items: center; height: 48px; border-radius: var(--r-input); background: var(--ground); padding: 0 6px 0 14px; border: 1.5px solid var(--line); }
.token-box.bad { border: 2px solid var(--loss); }
.token-box:focus-within { border-color: var(--signal); }
.token-box input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; outline: none; }
.can { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.can.yes { background: var(--tag-win-bg); color: var(--tag-win-ink); }
.can.no { background: var(--raised); color: var(--muted); }

/* ── Liquid Glass press (every tappable element) ─────────────────────────────
   While a finger is on it, a control swells and turns to glass: light on its top rim,
   a softer bottom rim, a thin refractive edge (warm top-left, cool bottom-right). It
   springs back on release. main.js (pressGlass) adds .glass-press; the tab bar has
   its own lens. Segmented controls go further, like iOS 26 and Wise: the touched
   option becomes a glass capsule that stands proud of the track, and the selected pill
   then slides to it (.seg-slide). */
.btn, .icon-circle, .hpill, .chip, .chip-add, .small-btn, .toggle, .source-tile, .acct-row, .menu-row,
.settings-nav, .pick, .seg > button, .acct-pill {
  transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s, background-color .2s, color .2s; }
.glass-press { position: relative; transform: scale(1.06);
  box-shadow: inset 0 1.5px 1px var(--lens-edge), inset 0 -1.5px 1.5px var(--lens-low), var(--lens-shadow) !important;
  transition-duration: .3s, .12s, .12s, .12s; }
.glass-press::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 170, 90, .75), rgba(255, 255, 255, .15) 28%, transparent 50%,
    rgba(255, 255, 255, .12) 72%, rgba(110, 180, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* Big surfaces swell less, or they'd jostle their neighbours. */
.source-tile.glass-press, .acct-row.glass-press, .menu-row.glass-press, .settings-nav.glass-press, .pick.glass-press, .btn.glass-press { transform: scale(1.025); }
.menu-row.glass-press { border-radius: var(--r-box); }
/* Segmented control: the touched option is a raised glass capsule over the track. */
.seg > button.glass-press { z-index: 3; transform: scale(1.18); color: var(--ink);
  background: linear-gradient(180deg, var(--lens-low), transparent 45%, transparent 70%, var(--glass-edge-low)), var(--lens) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.6); backdrop-filter: blur(6px) saturate(1.6); }
.seg-slide { position: absolute; z-index: 0; border-radius: 999px; background: var(--seg-bg); pointer-events: none;
  transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), width .5s cubic-bezier(.3, 1.3, .5, 1); }
.seg > button.arriving { background: transparent !important; }
/* With a mouse (computers): a soft glass rim on hover, as macOS does; the press still swells. */
@media (hover: hover) and (pointer: fine) {
  :is(.btn, .icon-circle, .hpill, .chip, .chip-add, .small-btn, .source-tile, .acct-row, .settings-nav, .pick, .seg > button, .acct-pill):hover:not(.glass-press):not(:disabled) {
    box-shadow: inset 0 1px 0 var(--lens-edge), inset 0 0 0 1px var(--glass-edge-low); }
  .source-tile.on:hover:not(.glass-press) { box-shadow: inset 0 0 0 2px var(--signal), inset 0 1px 0 var(--lens-edge); }
  .nav > button:hover:not([aria-current]) { background: var(--lens-rest); }
}
@media (prefers-reduced-motion: reduce) {
  .glass-press, .seg > button.glass-press, .source-tile.glass-press, .acct-row.glass-press, .menu-row.glass-press,
  .settings-nav.glass-press, .pick.glass-press, .btn.glass-press { transform: none; }
  .seg-slide { transition: none; }
}

/* History filter: the strip that says what's showing, and the picked market chip. */
.filter-line { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--sig-soft); color: var(--sig-text); }
.small-btn[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: transparent; }
/* A tappable trade row (opens its details); the details pop-up scrolls if it's taller than the screen. */
.trade-row { text-align: left; border-radius: var(--r-card-s); }
.trade-sheet { max-height: 90vh; overflow-y: auto; gap: 14px; }
.trade-sheet .trade-line { height: 120px; }
/* A trade's real price line (priceChart): dots are HTML so they stay round when the SVG stretches. */
.price-chart { position: relative; width: 100%; height: 150px; }
.price-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.price-chart polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.price-chart .pre { stroke: var(--muted); stroke-width: 2; }
.price-chart .up { stroke: var(--win); stroke-width: 3; } .price-chart .down { stroke: var(--loss); stroke-width: 3; } .price-chart .flat { stroke: var(--ink); stroke-width: 3; }
.price-chart .band.up { fill: var(--win); opacity: .08; } .price-chart .band.down { fill: var(--loss); opacity: .08; } .price-chart .band.flat { fill: var(--ink); opacity: .05; }
.price-chart .base { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.tick-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--ground); }
.tick-dot.exit.up { background: var(--win); } .tick-dot.exit.down { background: var(--loss); }