/* "Violet night" (2026-10-31): deep purple-black backgrounds and panels, an electric violet accent
   for buttons, active pills, toggles, links and highlights; green / red stay for gains, losses,
   Up / Down and in-favour / against; amber (--warn) only for warnings. One panel style (dark diagonal gradient, faint inner outline, 16px corners,
   tinted 2px border) is shared by trade cards, alerts, the top bar, rows and stats.
   Contrast on --bg (WCAG): --text 17:1, --text-3 10:1, --muted 7:1, --muted-2 4.6:1, --accent 7.5:1,
   --gain / --up 10:1, --loss / --down 6.6:1, --warn 10:1; --accent-ink on --accent 9:1. */
:root {
  --bg: #0c0a14;
  --surface: #15111f;
  --surface-2: #1a1527;
  --raised: #221b33;
  --nav: #100d1a;
  --line: #262036;
  --line-2: #312947;
  --line-3: #3f3559;
  --text: #efebff;
  --text-2: #dcd6ef;
  --text-3: #beb5d8;
  --muted: #a098bb;
  --muted-2: #817a9c;
  --accent: #a78bfa;
  --accent-ink: #140b26;
  --heading: #a78bfa;  /* section headers and labels app-wide (= --accent, 7.5:1 on --bg) */
  --up: #4ade80;
  --up-bg: rgba(74, 222, 128, 0.14);
  --down: #f87171;
  --down-bg: rgba(248, 113, 113, 0.14);
  --accent-bg: rgba(167, 139, 250, 0.16); /* selected pill / tab / chip background */
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, 0.14);
  --gain: #4ade80;
  --loss: #f87171;
  --flip: #e9d5ff;
  --flip-line: #6d28d9;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* design tokens */
  --radius-card: 16px;
  --radius: 12px;
  --radius-sm: 9px;
  --panel-grad: linear-gradient(135deg, #1d1730 0%, #0f0b1a 48%, #1d1730 100%);
  --panel-outline: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  --panel-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 6px 18px rgba(0, 0, 0, 0.28);
  --tint-gain: #2f8a55;
  --tint-loss: #a04a4a;
  --tint-neutral: var(--line-2);
  --gain-bg: rgba(74, 222, 128, 0.12);
  --loss-bg: rgba(248, 113, 113, 0.12);
  --coin-btc: #f0a33a;
  --coin-eth: #9a9cf2;
  --coin-sol: #3fd3b4;
  --coin-xrp: #9fb6cc;
  --coin-doge: #d8b84a;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --ease: 0.18s ease;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button { cursor: pointer; font-family: inherit; font-variant-numeric: tabular-nums; transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease); }
button:disabled { cursor: default; }
button:not(:disabled):active { transform: scale(0.97); }
input::placeholder { color: var(--muted-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the shared panel */
.panel {
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card);
}

/* app shell: a phone-width column, centered on desktop */
.app {
  position: relative;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
@media (min-width: 560px) {
  .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
main { flex: 1; }

/* header */
.top {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 10px;
  background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--accent); flex: none; }
.brand h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
@media (min-width: 420px) { .brand h1 { font-size: 20px; } .top { padding: 14px 20px 12px; } }
/* follow box in the header: the bubble is the form itself, laid out as one flex row (see "header row" at the end
   of this file, which wins over the generic .search rules below) */
.btn-inline {
  flex: none; height: 30px; padding: 0 10px; border: 0; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700;
}
.btn-inline:not(:disabled):hover { filter: brightness(1.08); }
.btn-inline:disabled { opacity: 0.6; }
/* the dropdown is wider than the small header box: anchored to its right edge, spilling left */
.top-search .search-results, .top-msg { left: auto; right: 0; width: min(320px, calc(100vw - 32px)); top: 42px; }
.top-msg {
  position: absolute; z-index: 4; margin: 0; padding: 8px 12px;
  border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line-3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.top-msg.follow-error { color: var(--down); font-size: 13px; }
.live {
  flex: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px;
  border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface);
  font-size: 12px; font-weight: 600; color: var(--muted);
}
/* phones: just the dot, to leave room for the follow box */
@media (max-width: 419px) { .live { font-size: 0; width: 28px; padding: 0; justify-content: center; } }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.live.on { color: var(--gain); border-color: var(--tint-gain); }
.live.on::before { background: var(--gain); box-shadow: 0 0 8px var(--gain); }
.live.off { color: var(--down); }
.live.off::before { background: var(--down); }

/* pills: markets, views, sorts, filters */
.markets { display: flex; gap: 8px; padding: 0 20px 12px; }
.pill {
  flex: 1; height: 44px; border-radius: var(--radius);
  font-size: 15px; font-weight: 700;
  background: var(--surface); color: var(--text-3); border: 1px solid var(--line-2);
}
.pill:not(:disabled):hover { background: var(--surface-2); border-color: var(--line-3); color: var(--text); }
.pill[aria-pressed="true"], .pill[aria-pressed="true"]:hover {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(90, 169, 255, 0.18);
}
.pill:disabled { opacity: 0.5; font-size: 13px; }

/* top bar: countdown, Up/Down prices, To beat / Now and the chart in one panel */
/* The slot keeps the panel's full height in the page flow, so the feed below never moves while the
   sticky panel shrinks. --p (0 = full, 1 = compact) is set by the page from the scroll position. */
#window-slot {
  position: sticky; top: var(--top-h, 62px); z-index: 2; /* under the app header (3) and the toast (10) */
  height: var(--slot-h, auto); margin: 0 0 12px; pointer-events: none; /* the empty part below the shrunk panel lets taps through */
}
.window {
  --p: 0; pointer-events: auto;
  margin: 0 20px; padding: calc(12px - 5px * var(--p)) 14px;
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  display: flex; flex-direction: column; gap: 0;
}
.window-top { display: flex; justify-content: space-between; align-items: center; }
/* name and countdown scale down a little as the panel shrinks; the Up / Down row tucks up under them */
#window-label { font-size: 13px; color: var(--muted); transform-origin: left center; transform: scale(calc(1 - 0.08 * var(--p))); }
.window.compact #window-label { font-weight: 600; color: var(--text-2); }
#countdown { font-size: 16px; font-weight: 700; transform-origin: right center; transform: scale(calc(1 - 0.1 * var(--p))); }
.px-row { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: calc(10px - 5px * var(--p)); }
/* To beat / Now and the chart fade out, slide up and collapse */
.beat-row, .chart { opacity: calc(1 - 1.6 * var(--p)); transform: translateY(calc(-6px * var(--p))); }
.beat-row { max-height: calc(60px * (1 - var(--p))); margin-top: calc(10px * (1 - var(--p))); overflow: hidden; }
.chart { height: calc(64px * (1 - var(--p))); margin-top: calc(10px * (1 - var(--p))); }
.window.compact .beat-row, .window.compact .chart { visibility: hidden; }
.px-side { white-space: nowrap; color: var(--muted); }
.px-side strong { font-size: 14px; }
.px-side.up strong { color: var(--up); }
.px-side.down strong { color: var(--down); }
.px-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(248, 113, 113, 0.55); overflow: hidden; }
#px-up-bar { height: 100%; width: 50%; background: var(--up); transition: width 0.4s ease; }
.beat-row {
  display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted);
  padding-top: calc(10px * (1 - var(--p, 0))); border-top: 1px solid var(--line);
}
.beat-item strong { color: var(--text); font-size: 14px; }
.beat-diff { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.beat-diff.gain { color: var(--gain); }
.beat-diff.loss { color: var(--loss); }
.chart { width: 100%; display: block; } /* height comes from the --p rule above (64px when full) */
/* Kalshi / Live (Coinbase) toggle in the panel, and the Coinbase chart box (collapses with --p like the chart) */
.chart-src-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: calc(10px * (1 - var(--p, 0))); opacity: calc(1 - 1.6 * var(--p, 0)); max-height: calc(34px * (1 - var(--p, 0))); overflow: hidden; }
.chart-src-k { font-size: 12px; color: var(--muted); }
.chart-src button { height: 28px; font-size: 11px; padding: 0 8px; }
.window.compact .chart-src-row { visibility: hidden; }
.cb-box { position: relative; margin-top: calc(10px * (1 - var(--p, 0))); opacity: calc(1 - 1.6 * var(--p, 0)); max-height: calc(330px * (1 - var(--p, 0))); overflow: hidden; } /* room for the bar, chart, note and footer */
.window.compact .cb-box { visibility: hidden; }
.cb-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cb-ranges { display: flex; gap: 4px; }
.cb-ranges .pill { height: 28px; padding: 0 9px; font-size: 11px; }
/* candle size dropdown: styled like a pill, opens the phone's own picker */
.cb-select-wrap { flex: none; }
.cb-select {
  height: 28px; padding: 0 26px 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface) no-repeat right 8px center;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px; background-position: right 13px center, right 8px center;
  color: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 700; appearance: none; -webkit-appearance: none; color-scheme: dark;
}
.cb-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cb-short-note { margin: 6px 0 0; font-size: 11px; color: var(--muted-2); }
.cb-chart { width: 100%; height: 200px; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cb-foot { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; color: var(--muted-2); }
.cb-last { font-size: 13px; font-weight: 700; color: var(--text); }
.cb-note { color: var(--muted); }
.cb-info { display: inline-block; margin-left: 4px; color: var(--accent); cursor: help; }
.set-credit { margin-top: 6px; font-size: 12px; color: var(--muted-2); }
.cb-locked { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11, 15, 20, 0.55); border-radius: var(--radius); }
.cb-sample { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(4px); opacity: 0.6; }
.cb-locked-text { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; max-width: 300px; }
.cb-locked-text strong { font-size: 15px; }
.cb-locked-text span { font-size: 13px; color: var(--text-3); line-height: 1.45; }
.cb-locked-text .btn-primary { height: 40px; margin-top: 4px; padding: 0 18px; }

/* consensus panel */
.consensus {
  margin: 0 20px 12px; padding: 12px 14px;
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card);
}
.con-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.con-title { font-size: 14px; color: var(--muted); }
.con-title strong { font-size: 16px; color: var(--text); }
.con-title strong.up { color: var(--up); }
.con-title strong.down { color: var(--down); }
.con-counts { font-size: 13px; color: var(--muted); }
.con-bar { height: 8px; border-radius: 4px; background: rgba(245, 165, 36, 0.6); overflow: hidden; }
#con-up { height: 100%; width: 50%; background: var(--accent); transition: width 0.4s ease; }
.con-sides { display: flex; gap: 12px; margin-top: 10px; }
.con-col { flex: 1; min-width: 0; }
.con-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.con-k.up { color: var(--up); }
.con-k.down { color: var(--down); }
.con-chips { gap: 4px; }
.con-chip { height: 28px; padding: 0 10px; font-size: 13px; gap: 6px; }
.con-chip .chip-name { font-size: 13px; }
.con-chip.call { border-style: dashed; }
.con-call { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); cursor: help; }
.con-note { margin: 10px 0 0; font-size: 11px; color: var(--muted-2); line-height: 1.4; }

/* feed items (consensus, recap, early call) */
.item-title { font-size: 14px; color: var(--text-2); min-width: 0; }
.item-title strong.up { color: var(--up); }
.item-title strong.down { color: var(--down); }
.item-kind {
  display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted);
}
.item-consensus .item-kind { color: var(--accent); border-color: #4c3d7a; }
.item-early_call .item-kind { color: var(--flip); border-color: var(--flip-line); }
.item-user { min-height: 0; font-size: 14px; }
.item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 8px; font-size: 12px; color: var(--muted); }
.item-recap-btn {
  border: 0; background: none; padding: 0; min-height: 32px; text-align: left; color: var(--text-2); font-size: 14px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px;
}
.item-recap-btn:hover { color: var(--text); }
.item-chev { margin-left: 4px; color: var(--muted-2); }
.item-recap { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.item-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--text-2); }
.item-k { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); min-width: 44px; }
.item-k.gain { color: var(--gain); }
.item-k.loss { color: var(--loss); }
.item-note { margin: 0; font-size: 11px; color: var(--muted-2); line-height: 1.4; }

/* honesty tag */
.pf-tag.honesty.gain { color: var(--gain); border-color: var(--tint-gain); }
.pf-tag.honesty.warn { color: var(--warn); border-color: #5c4a1c; }
.pf-honesty { display: flex; flex-direction: column; gap: 6px; justify-content: center; }

/* settings switch */
.switch { position: relative; flex: none; width: 52px; height: 32px; cursor: pointer; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch .knob {
  position: absolute; inset: 0; border-radius: 16px; background: var(--line-2); transition: background var(--ease);
}
.switch .knob::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; transition: transform var(--ease);
}
.switch input:checked + .knob { background: var(--accent); }
.switch input:checked + .knob::after { transform: translateX(20px); }
.switch input:focus-visible + .knob { outline: 2px solid var(--accent); outline-offset: 2px; }

/* inputs and primary button */
/* who you follow: a collapsed row at the top of the Alerts page */
.follow { padding: 0 20px 8px; }
.follows-toggle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; width: 100%; min-height: 36px; padding: 2px 0;
  border: 0; background: none; color: var(--text-2); text-align: left; font-size: 14px; font-weight: 600;
}
.follows-toggle:disabled { color: var(--muted-2); }
.follows-toggle[aria-expanded="true"] { margin-bottom: 8px; }
.follows-preview { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.chip.mini { height: 26px; padding: 0 9px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.follows-more { font-size: 12px; color: var(--muted); align-self: center; }
.follow input, .search input {
  width: 100%; height: 44px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface);
  color: var(--text); font-size: 15px; font-family: inherit;
  transition: border-color var(--ease);
}
.follow input { flex: 1; min-width: 0; width: auto; }
.follow input:hover, .search input:hover { border-color: var(--line-3); }
.follow input:focus, .search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.btn-primary {
  height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15px;
}
.btn-primary:not(:disabled):hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: 0.6; }
.follow-error { margin: 0; font-size: 13px; color: var(--down); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0 4px 0 12px; height: 34px; border-radius: 17px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-size: 14px; font-weight: 500;
}
.chip-name { border: 0; background: none; padding: 0; color: var(--text); font-size: 14px; font-weight: 500; }
.chip-x {
  width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.chip-x:hover { background: var(--line-2); color: var(--text); }

/* feed */
.feed { padding: 14px 20px 20px; }
.feed-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.feed-head h2, .section-label {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--heading);
}
#feed-count { font-size: 12px; color: var(--muted-2); }
.feed-empty { margin: 40px 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* an alert: name + time, the chat message as a bubble, the trade card attached under it,
   then the position line as one compact row */
.alert {
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 14px; margin-bottom: 10px;
}
.alert.new { animation: fade-in 0.45s ease-out, arrive 1.8s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes arrive { from { border-color: var(--accent); box-shadow: var(--panel-outline), 0 0 0 3px rgba(90, 169, 255, 0.18); } }
.alert-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.alert-user {
  border: 0; background: none; padding: 0; min-height: 32px;
  color: var(--text); font-weight: 700; font-size: 15px; text-align: left;
  overflow-wrap: anywhere;
}
.alert-user:hover { color: var(--accent); }
.alert-time { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.alert-msg {
  display: inline-block; max-width: 100%; margin: 0 0 10px; padding: 9px 12px;
  border-radius: 14px 14px 14px 4px; background: var(--raised); box-shadow: var(--panel-outline);
  font-size: 15px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere;
}
.alert-msg + .trade { margin-top: -4px; }
.alert-meta {
  display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap;
  margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line);
}
.alert-msg:last-child, .trade:last-child { margin-bottom: 0; }

.pos { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.pos.up { background: var(--up-bg); color: var(--up); }
.pos.down { background: var(--down-bg); color: var(--down); }
.entry { font-family: var(--mono); font-size: 13px; color: var(--muted); cursor: help; }
.entry strong { color: var(--text); }
.entry.unknown { font-family: inherit; font-size: 12px; color: var(--muted-2); }
.move { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.move.gain { color: var(--gain); }
.move.loss { color: var(--loss); }
.added { font-size: 12px; color: var(--gain); padding: 3px 8px; border-radius: 8px; border: 1px solid var(--tint-gain); }
.ev { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line-3); color: var(--muted); margin-left: auto; }
.ev-open { color: var(--up); border-color: #4c3d7a; }
.ev-add { color: var(--gain); border-color: var(--tint-gain); }
.ev-flip { color: var(--flip); border-color: var(--flip-line); }
.ev-close { color: var(--muted); border-color: var(--line-3); }

/* trade card: 2px border tinted by profit, inner gradient panel with a faint outline */
.trade {
  max-width: 320px; margin: 0 0 12px; padding: 2px;
  border: 2px solid var(--tint-neutral); border-radius: var(--radius-card);
  background: var(--bg);
}
.trade.gain { border-color: var(--tint-gain); }
.trade.loss { border-color: var(--tint-loss); }
.trade-panel {
  padding: 12px 14px; border-radius: 12px;
  background: var(--panel-grad); box-shadow: var(--panel-outline);
}
.trade-top { display: flex; align-items: flex-start; gap: 12px; }
.coin { flex: none; width: 36px; height: 36px; display: block; }
.trade-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trade-side { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); }
.trade-side.up { color: var(--up); }
.trade-side.down { color: var(--down); }
.trade-side.inferred { align-self: flex-start; padding: 0 6px; margin-left: -6px; border-radius: 6px; outline: 1px dashed currentColor; outline-offset: -1px; } /* side from chat badge */
.trade-odds { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.trade-cols { display: flex; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.trade-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trade-k { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.trade-v { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.trade-v.gain { color: var(--gain); }
.trade-v.loss { color: var(--loss); }
/* estimated card: dashed gray border, a label on top, muted numbers, never the profit tint */
.trade.est { border: 2px dashed var(--line-3); background: transparent; cursor: help; }
.trade.est .trade-panel { background: var(--surface); box-shadow: var(--panel-outline); }
.trade-label {
  display: inline-block; margin-bottom: 10px; padding: 2px 8px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted);
}
.trade.est .trade-side { color: var(--text-3); font-size: 20px; }
.trade-move { margin-top: 6px; }
.trade.est .trade-odds strong { color: var(--text-3); font-family: var(--mono); }
.trade.est .trade-v { color: var(--text-3); }
.trade.est .trade-v.gain, .trade.est .trade-profit.gain { color: var(--gain); opacity: 0.8; }
.trade.est .trade-v.loss, .trade.est .trade-profit.loss { color: var(--loss); opacity: 0.8; }
.trade-foot { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
.trade-entry { font-family: var(--mono); color: var(--muted); cursor: help; }
.trade-entry strong { color: var(--text-2); }
.trade-profit { margin-left: auto; font-family: var(--mono); font-weight: 700; color: var(--muted); }
.trade-profit.gain { color: var(--gain); }
.trade-profit.loss { color: var(--loss); }
.trade-more { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.trade-more span { font-size: 12px; color: var(--text-3); padding: 2px 8px; border-radius: 8px; border: 1px solid var(--line-2); }

/* traders tab */
.board { padding: 0 20px 20px; }
.page-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.page-note { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.sorts { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.sorts .pill { flex: none; padding: 0 14px; font-size: 14px; }
.lb-markets { gap: 6px; }
.lb-markets .pill { height: 34px; padding: 0 9px; font-size: 13px; border-radius: 10px; }
.markets .pill { min-width: 0; padding: 0 4px; }
.lb-scope { margin: 0 0 12px; font-size: 12px; color: var(--muted-2); }
.lb-row {
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px;
  transition: border-color var(--ease);
}
.lb-row:hover { border-color: var(--line-3); }
/* Traders tab loading state: a thin violet progress bar and six skeleton rows (same height as real rows) */
.lb-progress { height: 3px; border-radius: 2px; margin: 0 0 10px; background: var(--accent-bg); overflow: hidden; position: relative; }
.lb-progress::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 2px; background: var(--accent); animation: lb-slide 1.1s ease-in-out infinite; }
@keyframes lb-slide { 0% { left: -40%; } 100% { left: 100%; } }
.lb-skel { pointer-events: none; }
.lb-skel-line, .lb-skel-rank, .lb-skel-btn { border-radius: 6px; background: linear-gradient(90deg, var(--line) 0%, var(--line-2) 40%, var(--line) 80%); background-size: 240% 100%; animation: lb-shimmer 1.4s linear infinite; }
.lb-skel-rank { width: 18px; height: 18px; flex: none; }
.lb-skel-name { width: 46%; height: 16px; margin-bottom: 8px; }
.lb-skel-sub { width: 78%; height: 12px; margin-bottom: 10px; }
.lb-skel-bar { width: 100%; height: 6px; border-radius: 3px; }
.lb-skel-btn { width: 72px; height: 34px; border-radius: 10px; flex: none; }
@keyframes lb-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.lb-retry { display: block; width: 100%; padding: 18px 14px; border-radius: var(--radius-card); border: 1px dashed var(--tint-loss); background: var(--loss-bg); color: var(--text); font-size: 14px; font-weight: 600; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .lb-progress::after { animation: none; left: 0; width: 100%; opacity: 0.6; }
  .lb-skel-line, .lb-skel-rank, .lb-skel-btn { animation: none; background: var(--line); }
}
.lb-row.pl { border-width: 2px; border-color: var(--tint-neutral); padding: 13px; }
.lb-row.pl.gain { border-color: var(--tint-gain); }
.lb-row.pl.loss { border-color: var(--tint-loss); }
.lb-rank { flex: none; width: 22px; font-family: var(--mono); font-size: 14px; color: var(--muted-2); }
.lb-mid { flex: 1; min-width: 0; }
.lb-name {
  border: 0; background: none; padding: 0; color: var(--text); font-weight: 700; font-size: 15px;
  text-align: left; overflow-wrap: anywhere;
}
.lb-name:hover { color: var(--accent); }
.lb-sub, .lb-cards { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lb-early {
  display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.3;
  padding: 1px 6px; border-radius: 6px; border: 1px solid #5c4a1c; color: var(--warn); white-space: nowrap;
}
.lb-cards .gain { color: var(--gain); font-weight: 700; }
.lb-cards .loss { color: var(--loss); font-weight: 700; }
.lb-bar { height: 6px; border-radius: 3px; background: var(--line); margin-top: 8px; overflow: hidden; }
.lb-bar div { height: 100%; background: var(--accent); border-radius: 3px; }
.lb-follow {
  flex: none; height: 40px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 700;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
}
.lb-follow:not(:disabled):hover { filter: brightness(1.08); }
.lb-follow.on { background: transparent; color: var(--text-3); border-color: var(--line-3); }
.lb-follow.on:not(:disabled):hover { filter: none; background: var(--surface-2); color: var(--text); }
.lb-follow:disabled { opacity: 0.6; }
.lb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 2px 8px; flex-wrap: wrap; }
.lb-top .lb-name { flex: 1 1 140px; min-width: 0; overflow-wrap: break-word; } /* profit drops below a long name instead of splitting it */
.lb-profit { flex: none; font-size: 16px; font-weight: 700; color: var(--muted); }
.lb-edge { font-weight: 600; color: var(--text-3); cursor: help; }
.lb-edge.gain { color: var(--gain); } .lb-edge.loss { color: var(--loss); }
.lb-near { cursor: help; }
.lb-profit.gain, .lb-sub .gain { color: var(--gain); }
.lb-profit.loss, .lb-sub .loss { color: var(--loss); }
.pl-note { margin: 0 0 8px; font-size: 12px; color: var(--warn); line-height: 1.4; }

/* user search */
.search { position: relative; margin-bottom: 12px; }
.search-results {
  position: absolute; z-index: 4; left: 0; right: 0; top: 48px;
  background: var(--panel-grad); box-shadow: var(--panel-outline), 0 14px 36px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line-3); border-radius: var(--radius-card);
  padding: 4px; max-height: 60vh; overflow-y: auto;
}
.search-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; padding: 8px 10px;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--text); text-align: left;
}
.search-item:hover, .search-item:focus-visible { background: var(--line-2); outline: none; }
.search-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.search-tag { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--gain); }
.search-sub { font-size: 12px; color: var(--muted); }
.search-msg { margin: 6px 2px 0; font-size: 13px; color: var(--muted); }

/* views + filters */
.views { gap: 6px; }
.views .pill { flex: 1 1 40%; min-width: 0; height: 40px; padding: 0 6px; font-size: 13px; white-space: nowrap; }
.filters { margin-bottom: 10px; }
.filters-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filters-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-3);
  font-size: 13px; font-weight: 700;
}
.filters-toggle:hover { border-color: var(--line-3); color: var(--text); }
.filters-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--text); }
.filter-chips .chip { height: 30px; padding-left: 10px; font-size: 13px; }
.filter-chips .chip-name { font-size: 13px; }
.filter-chips .chip-x { width: 26px; height: 26px; }
.filters-panel {
  margin-top: 8px; padding: 12px;
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  display: flex; flex-direction: column; gap: 12px;
}
.f-group { display: flex; flex-direction: column; gap: 6px; }
.f-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.f-pills { margin-bottom: 0; }
.f-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; font-size: 14px; color: var(--text-2); }
.f-switch input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.f-clear {
  align-self: flex-start; height: 36px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line-3); background: transparent; color: var(--text-3); font-size: 13px; font-weight: 700;
}
.f-clear:not(:disabled):hover { background: var(--surface-2); color: var(--text); }
.f-clear:disabled { opacity: 0.45; }

/* settings: each row a panel with label + description left, control right */
.settings { padding: 0 20px 20px; }
.settings .page-title { margin-bottom: 14px; }
.settings .section-label { margin: 0 0 8px; }
.settings .section-label.pf-gap { margin-top: 24px; }
.set-row {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card);
}
.set-row + .set-row { margin-top: 8px; }
.set-text { flex: 1; min-width: 0; }
.set-label { font-size: 15px; font-weight: 600; }
.set-desc { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.set-note { margin: 8px 0 0; font-size: 12px; color: var(--muted-2); }
.set-soon { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* two-option toggle */
.seg { flex: none; display: flex; padding: 3px; gap: 3px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-2); }
.seg button {
  min-width: 52px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-3); font-family: var(--mono); font-size: 14px; font-weight: 700;
}
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }

.soon { padding: 60px 32px; text-align: center; color: var(--muted-2); }
.soon h2 { margin: 16px 0 8px; font-size: 20px; font-weight: 700; color: var(--text); }
.soon p { margin: 0 auto; max-width: 300px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* bottom tab bar */
.tabbar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; gap: 4px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #161126, var(--nav));
  padding: 6px 8px calc(14px + env(safe-area-inset-bottom));
}
.tabbar button {
  flex: 1; height: 56px; border: 0; border-radius: var(--radius); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: #8e86a8;
}
.tabbar button:hover { background: var(--surface); color: var(--text-3); }
.tabbar button[aria-current="page"] { color: var(--accent); background: var(--accent-bg); }
.tabbar button:not(:disabled):active { transform: none; }

/* toast */
.toast {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10;
  width: min(456px, calc(100% - 24px));
  background: var(--panel-grad); box-shadow: var(--panel-outline), 0 12px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line-3); border-radius: var(--radius-card);
  padding: 12px 14px; display: flex; gap: 12px; align-items: center;
  color: var(--accent); cursor: pointer;
  animation: drop 0.25s ease-out;
}
@keyframes drop { from { opacity: 0; transform: translate(-50%, -8px); } }
.toast-text { flex: 1; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 700; color: var(--text); }
.toast-body { font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* trader profile */
.profile {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 6;
  width: min(480px, 100%);
  background: var(--bg); display: flex; flex-direction: column;
}
@media (min-width: 560px) {
  .profile { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
.profile-bar { display: flex; align-items: center; gap: 4px; padding: 14px 10px 6px; font-size: 14px; color: var(--muted); }
.icon-btn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; border-radius: var(--radius); }
.icon-btn:hover { background: var(--surface); }
.profile-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 24px; }
.pf-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 14px;
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card);
}
.pf-avatar {
  flex: none; width: 56px; height: 56px; border-radius: 14px;
  background: var(--accent-bg); border: 1px solid #4c3d7a;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--accent);
}
.pf-head h2 { margin: 0; font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
.pf-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pf-follow {
  width: 100%; height: 44px; margin-bottom: 20px; border-radius: var(--radius); font-size: 15px; font-weight: 700;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
}
.pf-follow:not(:disabled):hover { filter: brightness(1.08); }
.pf-follow.on { background: var(--surface); color: var(--text-2); border-color: var(--line-3); }
.pf-follow.on:not(:disabled):hover { filter: none; background: var(--surface-2); }
.pf-follow:disabled { opacity: 0.6; }
.profile .section-label { margin: 0 0 10px; }
.profile .section-label.pf-gap { margin-top: 24px; }
/* where the stats come from, and small-sample warnings */
.pf-sample { margin-top: 6px; white-space: normal; max-width: 100%; text-align: left; } /* wraps inside the tile instead of running under the next one */
.pf-stat-v.long { font-size: 14px; line-height: 1.3; padding-top: 3px; } /* "100% · 6 markets" fits on one line */
.pf-source { margin: 0 0 10px; font-size: 12px; color: var(--muted); cursor: help; }
.pf-source strong { color: var(--text-3); font-weight: 600; }
.pnl-est-tag {
  display: inline-block; margin: -2px 0 10px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700;
  border: 1px dashed #5c4a1c; color: var(--warn); cursor: help;
}

/* collapsible lists on the profile: a header button, then a rounded panel with its own scroll */
.fold-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px; padding: 0 14px; margin: 0 0 8px;
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card); color: var(--text); font-size: 15px; font-weight: 600; text-align: left;
}
.fold-btn:hover { border-color: var(--line-3); }
.fold-btn .item-chev { font-size: 14px; color: var(--muted); transition: transform var(--ease); }
.fold-btn[aria-expanded="true"] .item-chev { transform: rotate(180deg); }
.fold-panel {
  position: relative; max-height: 360px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 0 8px; padding: 8px 8px 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
}
@media (min-width: 560px) { .fold-panel { max-height: 480px; } }
.fold-panel::after {
  content: ""; position: sticky; bottom: 0; display: block; height: 28px; margin-top: -28px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface)); transition: opacity var(--ease);
}
.fold-panel.at-end::after { opacity: 0; }
.fold-panel > div > :last-child { margin-bottom: 8px; }

/* profit over time: one panel with the total, line/estimate toggles, range pills and the chart */
.pf-pnl {
  margin: 4px 0 20px; padding: 12px 14px 12px;
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card);
}
.pf-pnl.gain { border-color: var(--tint-gain); }
.pf-pnl.loss { border-color: var(--tint-loss); }
.pnl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pnl-title { min-width: 0; }
.pf-pnl .section-label { margin: 0 0 2px; }
.pnl-total { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pnl-total-v { font-size: 22px; font-weight: 700; color: var(--text); }
.pnl-total-v.gain { color: var(--gain); }
.pnl-total-v.loss { color: var(--loss); }
.pnl-count { font-size: 12px; color: var(--muted); }
.pnl-seg button { min-width: 0; height: 32px; padding: 0 10px; font-family: inherit; font-size: 12px; white-space: nowrap; }
.pnl-ranges { display: flex; gap: 6px; margin-bottom: 8px; }
.pnl-ranges .pill { flex: 1 1 0; min-width: 0; height: 32px; padding: 0 6px; font-size: 12px; }
.pnl-chart { width: 100%; height: 160px; display: block; touch-action: pan-y; cursor: crosshair; }
.pnl-tip { display: flex; flex-wrap: wrap; gap: 4px 8px; min-height: 18px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.pnl-tip strong { color: var(--text-2); font-weight: 600; }
.pnl-tip .gain { color: var(--gain); font-weight: 700; }
.pnl-tip .loss { color: var(--loss); font-weight: 700; }
.pf-pnl .pf-note { margin: 8px 0 0; }
.pf-pnl .pf-empty { padding: 44px 0; text-align: center; }
.pnl-since { margin: 6px 0 0; font-size: 11px; color: var(--muted-2); }

.pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
@media (min-width: 420px) { .pf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-stat {
  background: var(--panel-grad); box-shadow: var(--panel-outline);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0;
}
.pf-stat-v { font-family: var(--mono); font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.pf-stat-v.gain { color: var(--gain); }
.pf-stat-v.loss { color: var(--loss); }
.pf-stat-k { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pf-tiers { display: flex; gap: 0; padding: 12px 6px; cursor: help; }
.pf-tier { flex: 1; min-width: 0; padding: 0 3px; text-align: center; }
.pf-tier .pf-stat-v { overflow-wrap: normal; }
.pf-tier .pf-stat-k { font-size: 10px; }
/* four across on wider screens would squeeze the three columns: give that box two of five slots */
@media (min-width: 420px) {
  #pf-call-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #pf-call-stats .pf-tiers { grid-column: span 2; }
}
.pf-tier + .pf-tier { border-left: 1px solid var(--line); }
.pf-tier .pf-stat-k { font-size: 11px; }
.pf-note { margin: 0 0 14px; font-size: 12px; color: var(--muted-2); line-height: 1.45; }
.pf-mkt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px;
  background: var(--surface); box-shadow: var(--panel-outline);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px;
}
.pf-mkt-name { flex: none; font-weight: 700; color: var(--text-2); }
.pf-mkt-sides { flex: 1; min-width: 0; color: var(--muted); }
.pf-mkt-sides .up { color: var(--up); }
.pf-mkt-sides .down { color: var(--down); }
.pf-wl { flex: none; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; border: 1px solid; }
.pf-wl.win { color: var(--gain); border-color: var(--tint-gain); background: var(--gain-bg); }
.pf-wl.loss { color: var(--loss); border-color: var(--tint-loss); background: var(--loss-bg); }
.pf-private {
  margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--surface); border: 1px dashed var(--line-3); font-size: 13px; color: var(--text-3);
}
/* chat calls list */
.pf-call {
  padding: 10px 12px; margin-bottom: 6px;
  background: var(--surface); box-shadow: var(--panel-outline);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px;
}
.pf-call-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pf-call-msg {
  display: inline-block; max-width: 100%; margin: 8px 0; padding: 7px 10px;
  border-radius: 12px 12px 12px 4px; background: var(--raised); box-shadow: var(--panel-outline);
  font-size: 14px; line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere;
}
.pf-call-meta { color: var(--muted); font-size: 12px; line-height: 1.6; }
.pf-call-meta .up { color: var(--up); }
.pf-call-meta .down { color: var(--down); }
.pf-who { font-size: 14px; }
.pf-call-right { display: inline-flex; align-items: center; gap: 8px; }
.pf-tone .pf-stat-v { font-family: inherit; font-size: 16px; }
.pf-tone.gain { border-color: var(--tint-gain); background: var(--gain-bg); }
.pf-tone.loss { border-color: var(--tint-loss); background: var(--loss-bg); }
.pf-call.tone-good { border-left: 3px solid var(--gain); }
.pf-call.tone-bad { border-left: 3px solid var(--loss); }
.pf-tag {
  display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.3; padding: 1px 6px;
  border-radius: 6px; border: 1px solid var(--line-3); color: var(--muted); cursor: help;
}
.pf-tag.gain { color: var(--gain); border-color: var(--tint-gain); }
.pf-more {
  width: 100%; min-height: 44px; margin-top: 4px; border-radius: var(--radius);
  border: 1px dashed var(--line-3); background: transparent; color: var(--text-3); font-size: 14px; font-weight: 600;
}
.pf-more:not(:disabled):hover { background: var(--surface); color: var(--text); }
.pf-more:disabled { opacity: 0.6; }
.pf-empty { margin: 0; font-size: 14px; color: var(--muted); }
.pf-post {
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 14px; margin-bottom: 8px;
}
.pf-post-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.pf-post-top strong { color: var(--text-2); }
.pf-reposts {
  font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 4px;
  padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-3);
}
.pf-post p {
  display: inline-block; max-width: 100%; margin: 0 0 8px; padding: 8px 11px;
  border-radius: 14px 14px 14px 4px; background: var(--raised); box-shadow: var(--panel-outline);
  font-size: 14px; line-height: 1.4; overflow-wrap: anywhere;
}
.pf-post .trade:last-child { margin-bottom: 0; }
.pf-line { display: inline-block; font-size: 13px; font-weight: 700; color: var(--muted); }
.pf-line.up { color: var(--up); }
.pf-line.down { color: var(--down); }

/* motion off when asked */
/* header logo as a button */
button.brand { border: 0; background: transparent; padding: 0; border-radius: var(--radius); }
button.brand:hover { background: var(--surface); }
.set-btn {
  flex: none; height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line-3); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700;
}
.set-btn:hover { background: var(--surface-2); }
.btn-secondary {
  height: 44px; padding: 0 16px; border-radius: var(--radius);
  border: 1px solid var(--line-3); background: var(--surface); color: var(--text); font-weight: 700; font-size: 15px;
}
.btn-secondary:not(:disabled):hover { background: var(--surface-2); }
.w-link { border: 0; background: transparent; padding: 6px 8px; color: var(--accent); font-size: 14px; font-weight: 600; border-radius: 8px; }
.w-link:hover { background: var(--surface); }
a.w-link { padding: 0 2px; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; } /* inline Terms / Privacy links in small print */

/* full-screen screens (welcome, account): same frame as the profile overlay */
.screen {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 7;
  width: min(480px, 100%); background: var(--bg); display: flex; flex-direction: column;
}
@media (min-width: 560px) { .screen { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
.screen-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 32px; }

/* welcome */
.w-bar { display: flex; align-items: center; gap: 8px; padding: 14px 0 6px; }
.brand-static { flex: 1; }
.w-brand { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.w-hero { padding: 24px 0 20px; text-align: center; }
.w-hero h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.w-pitch { margin: 0 auto 20px; max-width: 360px; font-size: 16px; line-height: 1.5; color: var(--text-3); }
.w-actions { display: flex; flex-direction: column; gap: 10px; }
.w-actions button { width: 100%; height: 48px; font-size: 16px; }
@media (min-width: 420px) { .w-actions { flex-direction: row; } .w-actions button { flex: 1; } .w-hero h1 { font-size: 34px; } }
.w-coins { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; }
.w-coins span { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); }
.w-section { padding: 18px 0 4px; }
.w-section .section-label { margin: 0 0 12px; }
.w-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.w-steps li {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card);
}
.w-steps strong { display: block; font-size: 15px; }
.w-steps p { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.w-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent-bg); color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: 13px;
}
.w-features { display: flex; flex-direction: column; gap: 10px; }
.w-feat {
  padding: 14px; background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card);
}
.w-feat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.w-feat-top strong { font-size: 15px; }
.w-feat > p { margin: 4px 0 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.w-sample { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); border: 1px dashed var(--line-3); border-radius: 6px; padding: 2px 6px; }
.w-prev { padding: 10px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-2); font-size: 13px; }
.w-prev-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.w-prev-user { font-weight: 700; color: var(--accent); }
.w-prev-time { font-size: 12px; color: var(--muted); }
.w-prev-msg { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.w-prev-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--tint-gain); background: var(--gain-bg); font-family: var(--mono); font-size: 12px; }
.w-prev-side { font-weight: 700; }
.w-prev-meta { margin-top: 4px; font-size: 12px; color: var(--muted); }
.w-prev .up { color: var(--up); } .w-prev .down { color: var(--down); }
.w-prev .gain { color: var(--gain); white-space: nowrap; } .w-prev .loss { color: var(--loss); white-space: nowrap; }
.w-prev-bar { height: 8px; margin-top: 8px; border-radius: 4px; background: var(--down-bg); overflow: hidden; }
.w-prev-bar div { height: 100%; background: var(--up); border-radius: 4px; }
.w-prev-fill { width: 80%; } /* sample consensus bar (a class, not an inline style, for the CSP) */
.w-prev-stats { display: flex; gap: 8px; margin-bottom: 8px; }
.w-prev-stats span { flex: 1; min-width: 0; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; }
.w-prev-stats strong { font-family: var(--mono); font-size: 15px; color: var(--text); }
.w-prev-chart { width: 100%; height: 56px; display: block; }
.w-tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-3); color: var(--muted); }
.w-soon { margin: -6px 0 12px; font-size: 13px; color: var(--muted); }
.w-plans { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 420px) { .w-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.w-plan {
  padding: 14px; background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow);
  border: 1px solid var(--line); border-radius: var(--radius-card); min-width: 0;
}
.w-plan.featured { border-color: var(--accent); }
.w-plan h3 { margin: 0; font-size: 15px; }
.w-price { font-family: var(--mono); font-size: 22px; font-weight: 700; margin: 4px 0 8px; }
.w-price span { font-size: 12px; color: var(--muted); font-weight: 500; }
.w-plan ul { margin: 0; padding: 0 0 0 16px; font-size: 13px; color: var(--text-3); line-height: 1.55; }
/* plans, locks and the Pro tag (app.js renderPlans / lockRow). Locked things stay visible with the tag. */
.pro-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 6px; background: var(--accent-bg); color: var(--accent); border: 1px solid #4c3d7a; vertical-align: 2px; line-height: 1.4; }
.pill.locked { color: var(--muted); }
.pill.locked .pro-tag { margin-left: 4px; font-size: 9px; padding: 0 4px; vertical-align: 1px; }
.lock-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 8px 0; border-radius: var(--radius); background: var(--panel-grad); box-shadow: var(--panel-outline); border: 1px dashed #4c3d7a; font-size: 13px; color: var(--text-3); line-height: 1.4; }
.lock-row .lock-text { flex: 1; min-width: 0; }
.lock-row .set-btn { flex: none; }
.plan-banner { display: flex; align-items: center; gap: 10px; margin: 8px 16px 0; padding: 10px 12px; border-radius: var(--radius); background: var(--warn-bg); border: 1px solid #5c4a1c; font-size: 13px; color: var(--text); line-height: 1.4; }
.plan-banner span { flex: 1; min-width: 0; }
.plan-banner .set-btn { flex: none; }
.follows-note { margin: 6px 20px 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.follows-note .lb-name, .follow-error .lb-name { font-size: inherit; }
.plans-status { margin: 0 0 12px; font-size: 14px; color: var(--text-3); line-height: 1.45; }
.plans { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan-card { padding: 14px; background: var(--panel-grad); box-shadow: var(--panel-outline), var(--panel-shadow); border: 1px solid var(--line); border-radius: var(--radius-card); min-width: 0; display: flex; flex-direction: column; }
.plan-card.featured { border-color: var(--accent); }
.plan-card h3 { margin: 0; font-size: 16px; }
.plan-card ul { margin: 0 0 12px; padding: 0 0 0 16px; font-size: 13px; color: var(--text-3); line-height: 1.55; flex: 1; }
.plan-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plan-act .btn-primary { width: auto; padding: 0 16px; height: 40px; }
.plan-current { font-size: 12px; font-weight: 700; color: var(--muted); }
.plan-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); width: 100%; }
.plan-check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.set-status.pro { color: var(--accent); border-color: #4c3d7a; }
/* Pro preview (15-minute trial): header pill with the live countdown, and the welcome line */
.trial-pill { flex: none; height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--accent); background: var(--accent-bg); color: var(--accent); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trial-pill.ending { background: var(--warn-bg); border-color: #5c4a1c; color: var(--warn); }
/* phones: the pill shows only the time ("12:34 left") and the brand word steps aside for it */
@media (max-width: 479px) { .trial-pill { font-size: 11px; padding: 0 8px; } .top:has(.trial-pill:not([hidden])) .brand h1 { display: none; } }
/* welcome cards: the trial offer (the loudest thing after the headline) and the install card */
.w-card {
  margin: 0 auto 14px; max-width: 420px; padding: 14px 16px; text-align: left;
  border-radius: var(--radius-card); border: 1px solid var(--accent);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0.05));
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.22), 0 0 26px rgba(167, 139, 250, 0.2);
}
.w-offer { margin-top: 2px; text-align: center; }
.w-offer-h { margin: 0 0 6px; font-size: 23px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; color: var(--accent); }
.w-offer-line { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: var(--text); }
.w-offer-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.w-install-card { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; }
.w-install-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-bg); color: var(--accent); }
.w-install-text { flex: 1; min-width: 0; }
.w-install-h { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--accent); }
.w-install-line { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.w-install-btn { margin-top: 10px; }
/* Free plan: quiet follows, the blurred Traders preview, the locked search, the Free vs Pro table */
.chip.quiet { opacity: 0.75; border-style: dashed; gap: 6px; }
.chip.quiet .chip-name { color: var(--text-3); }
.chip-make { border: 1px solid #4c3d7a; background: var(--accent-bg); color: var(--accent); border-radius: 10px; padding: 0 8px; height: 24px; font-size: 12px; font-weight: 700; }
.lb-blur { filter: blur(7px); pointer-events: none; user-select: none; max-height: 70vh; overflow: hidden; opacity: 0.85; }
.lb-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 14px; border-radius: var(--radius-card); background: linear-gradient(135deg, #2a1f4a 0%, #1a1330 100%); border: 1px solid var(--accent); box-shadow: 0 10px 30px rgba(109, 40, 217, 0.25); cursor: pointer; position: sticky; top: 72px; z-index: 3; }
.lb-banner-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.lb-banner-text strong { color: var(--text); }
.lb-banner .set-btn { flex: none; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.search.locked input { color: var(--muted); cursor: pointer; padding-right: 54px; }
.search-protag { position: absolute; right: 12px; top: 13px; }
.plans-cmp { margin: 0 0 12px; }
.plan-cmp { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel-grad); box-shadow: var(--panel-outline); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.plan-cmp th, .plan-cmp td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.plan-cmp thead th { font-size: 12px; color: var(--muted); font-weight: 700; }
.plan-cmp thead th:nth-child(3) { color: var(--accent); }
.plan-cmp tbody th { font-weight: 500; color: var(--text-3); width: 46%; }
.plan-cmp td { color: var(--text-2); font-weight: 600; }
.plan-cmp td.no { color: var(--muted-2); }
.plan-cmp td.yes { color: var(--text); }
.plan-cmp tr:last-child th, .plan-cmp tr:last-child td { border-bottom: 0; }
.w-foot { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.w-foot p { margin: 0 0 6px; font-size: 12px; color: var(--muted-2); line-height: 1.45; }

/* tour: dimmed app, the part being explained raised and outlined, a sheet docked above the tab bar.
   The wrapper is display: contents so it makes no stacking context: the backdrop (5) and the sheet (30) are
   root-level fixed layers of their own. Outlined parts sit at 6: above the dim, always under the sheet. */
.tour:not([hidden]) { display: contents; }
.tour-backdrop { position: fixed; inset: 0; z-index: 5; background: rgba(4, 7, 11, 0.62); }
.tour-sheet {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 30; width: min(480px, 100%);
  padding: 14px 20px 18px; /* the tab bar below it already pads for the home bar */
  background: var(--panel-grad); box-shadow: var(--panel-outline), 0 -12px 36px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line-3); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0;
  touch-action: pan-y;
}
.tour-top { display: flex; align-items: center; justify-content: space-between; }
.tour-count { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.tour-sheet h2 { margin: 4px 0 6px; font-size: 19px; }
.tour-sheet p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.tour-nav { display: flex; align-items: center; gap: 10px; }
.tour-nav button { height: 42px; min-width: 84px; }
.tour-dots { flex: 1; display: flex; justify-content: center; gap: 6px; }
.tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-3); }
.tour-dots span.on { background: var(--accent); }
.tour-focus { position: relative; z-index: 6; outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.tour-raise { z-index: 6 !important; }
.touring .feed { padding-bottom: 70vh; } /* room to scroll the first card (or the empty state) up under the panel */

/* account */
.auth-body { padding-top: 8px; }
.auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; font-size: 15px; margin-top: 8px; }
.auth-or { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--muted-2); }
.set-btn.danger { border-color: var(--tint-loss); color: var(--loss); }
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.field textarea { min-height: 140px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 400; line-height: 1.45; resize: vertical; }
.field textarea:focus { outline: none; border-color: var(--accent); }
.field .seg { align-self: flex-start; }
.field-hint.loss { color: var(--loss); }
.field input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text); font-size: 16px; font-family: inherit; transition: border-color var(--ease);
}
.field input:focus { border-color: var(--accent); outline: none; }
.field-hint { font-weight: 400; color: var(--muted-2); margin-left: 6px; font-size: 12px; }
.field input[aria-invalid="true"] { border-color: var(--loss); }
.auth-remember { margin: 2px 0; }
.auth-form .btn-primary { height: 48px; font-size: 16px; margin-top: 4px; }
.auth-soon { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius); background: var(--accent-bg); border: 1px solid #4c3d7a; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.auth-switch { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.auth-fine { margin: 24px 0 0; text-align: center; font-size: 12px; color: var(--muted-2); }

/* installed app: keep the header, overlays and toast clear of the notch / status bar (the tab bar
   and tour sheet already pad for the home bar) */
.top { padding-top: calc(12px + env(safe-area-inset-top)); }
@media (min-width: 420px) { .top { padding-top: calc(14px + env(safe-area-inset-top)); } }
.profile-bar, .w-bar { padding-top: calc(14px + env(safe-area-inset-top)); }
.toast { top: calc(12px + env(safe-area-inset-top)); }
.screen-body, .profile-body { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
/* the install / notifications nudge at the top of the Alerts page (in flow, above the market panel) */
.nudge { margin: 0 20px 12px; padding: 12px 8px 12px 14px; border-radius: var(--radius-card); background: linear-gradient(135deg, #2a1f4a 0%, #1a1330 100%); border: 1px solid var(--accent); box-shadow: 0 8px 24px rgba(109, 40, 217, 0.22); }
.nudge-main { display: flex; align-items: center; gap: 10px; }
.nudge-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.nudge-text strong { font-size: 15px; color: var(--text); line-height: 1.3; }
.nudge-btn { width: auto; height: 40px; padding: 0 14px; font-size: 14px; flex: none; }
.nudge-x { width: 36px; height: 36px; color: var(--muted); flex: none; }
.nudge-steps { margin: 10px 0 0; padding: 0 0 0 20px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.nudge-steps li { margin-bottom: 4px; }
/* iPhone install sheet */
.ios-sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.ios-sheet-back { position: absolute; inset: 0; background: rgba(4, 3, 8, 0.7); }
.ios-sheet-box { position: relative; width: min(520px, 100%); padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--panel-grad); box-shadow: var(--panel-outline), 0 -16px 40px rgba(0, 0, 0, 0.6); border: 1px solid var(--line-3); border-bottom: 0; }
.ios-sheet-box h2 { margin: 0 0 10px; font-size: 19px; }
.ios-sheet-note { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--warn-bg); border: 1px solid #5c4a1c; font-size: 14px; color: var(--text); line-height: 1.45; }
.ios-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ios-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.ios-steps strong { color: var(--text); }
.ios-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-bg); color: var(--accent); border: 1px solid #4c3d7a; }
/* (the old .w-install line became the install card above) */
.set-status { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line-3); color: var(--muted); vertical-align: 2px; margin-left: 6px; }
.set-btns { display: flex; flex-direction: column; gap: 6px; flex: none; }
.seg-text button { font-family: inherit; font-size: 12px; min-width: 0; padding: 0 9px; white-space: nowrap; }
/* "Not seeing pop-up banners?" help under Notifications */
.set-help-btn { margin-top: 8px; min-height: 42px; font-size: 14px; }
.set-help { padding: 4px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); margin-bottom: 8px; }
.set-help .set-desc { margin: 8px 0 10px; }
.set-help-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.set-help-other { margin-top: 14px; }
.set-help-steps { margin: 0 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.set-help-steps li { margin-bottom: 4px; }
.set-help-steps b { color: var(--text); font-weight: 600; }
.set-help-other-block { margin-top: 8px; }
.set-help-other-block .set-help-steps { margin-bottom: 4px; }
.toast.hint { cursor: pointer; border-color: var(--accent); }
.set-times { display: flex; align-items: center; gap: 6px; flex: none; }
.set-time { height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-family: var(--mono); font-size: 13px; color-scheme: dark; }
.set-dash { color: var(--muted); }
#set-push-opts .set-row { margin-top: 8px; }
.set-status.on { color: var(--gain); border-color: var(--tint-gain); }
.set-status.off { color: var(--warn); border-color: #5c4a1c; }
.toast.update { cursor: pointer; border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  button:not(:disabled):active { transform: none; }
}

/* header row: brand, follow bubble, preview pill and Live badge on ONE line, all centred on the same line.
   These rules come last on purpose: the generic .search / .search input rules above (margin-bottom, 44px input)
   used to win over .top-search by order and pushed the box up out of line. */
.top { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.top .brand { flex: none; min-width: 0; }
.top .brand h1 { white-space: nowrap; }
.top .top-search {
  position: relative; display: flex; flex-wrap: nowrap; align-items: center; flex: 1 1 130px; min-width: 130px;
  height: 38px; margin: 0; padding: 0 4px 0 0;
  border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); transition: border-color var(--ease);
}
.top .top-search:hover { border-color: var(--line-3); }
.top .top-search:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -1px; }
.top .top-search input { flex: 1 1 auto; min-width: 0; width: auto; height: 36px; padding: 0 8px 0 12px; border: 0; background: transparent; font-size: 14px; }
.top .top-search input:hover, .top .top-search input:focus { border: 0; outline: none; }
.top .top-search .btn-inline { position: static; }
/* the dropdown and the messages hang from the header (the sticky .top is their containing block), right-aligned to
   its padding, so they never spill off the left edge of a 320px phone even though the box itself is narrow */
.top .top-search { position: static; }
.top .top-search .search-results, .top .top-search .top-msg { left: auto; right: 16px; top: calc(100% - 4px); width: min(320px, calc(100% - 32px)); }
@media (min-width: 420px) { .top .top-search .search-results, .top .top-search .top-msg { right: 20px; width: min(320px, calc(100% - 40px)); } }
.top .trial-pill, .top .live { flex: none; height: 30px; margin: 0; box-sizing: border-box; }
.top .live { border-radius: 15px; }
@media (max-width: 419px) { .top .brand h1 { font-size: 16px; } .top .live { width: 30px; } }
@media (max-width: 359px) { .top .brand h1 { display: none; } } /* 320px phones: icon only, the box keeps its 130px */

/* headings and labels app-wide: vibrant violet and bold, so selling points and sections stand out; helper text,
   timestamps, disclaimers and footers keep their muted greys (.set-desc, .pf-note, .page-note, .w-foot, times) */
.follows-toggle { color: var(--heading); font-weight: 700; }
.con-title { color: var(--heading); font-weight: 700; }
.fold-btn .fold-label { color: var(--heading); font-weight: 700; }
.set-label { color: var(--heading); font-weight: 700; }
.w-plan h3, .plan-card h3 { color: var(--heading); }
.w-plan.featured ul, .plan-card.featured ul { color: var(--text); }
.w-feat-top strong, .w-steps strong { color: var(--text); }
.follows-toggle:disabled { color: var(--heading); opacity: 0.75; } /* "Following (0)": still the violet label, just quieter */

/* "From ChatterTape" cards at the top of the Alerts feed (Admin → Messages) */
.ct-msgs:empty { display: none; }
.ct-msg { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--radius-card); background: linear-gradient(135deg, #2a1f4a 0%, #1a1330 100%); border: 1px solid var(--accent); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.18); }
.ct-msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ct-msg-from { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.ct-msg-time { flex: 1; font-size: 12px; color: var(--muted-2); }
.ct-msg-x { width: 32px; height: 32px; font-size: 20px; line-height: 1; color: var(--muted); }
.ct-msg-title { display: block; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.ct-msg-body { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ct-msg-go { margin-top: 10px; }