/* Trader — mobile app. Dark only. Visual refresh Oct 2026 (staged): tokens, sky hero, pill tabs, pill nav. */

:root {
  color-scheme: dark;
  /* Refresh, Oct 2026: softer near-black, one calm green accent, softened gains and losses. */
  --bg: #0f1114;
  --bg-2: #13161a;
  --surface: #16191e;
  --surface-2: #1b1f25;
  --surface-3: #242a32;
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.12);
  --text: #eef1f4;
  --text-2: #a5aebb;
  --text-3: #707a87;
  --accent: #4cc38a;
  --accent-2: #4cc38a;
  --accent-soft: rgba(76, 195, 138, 0.15);
  --pos: #5ccb9b;
  --pos-soft: rgba(92, 203, 155, 0.14);
  --neg: #e57d85;
  --neg-soft: rgba(229, 125, 133, 0.14);
  --warn: #e9b96a;
  --warn-soft: rgba(233, 185, 106, 0.14);
  --info: #7fb3e6;
  --info-soft: rgba(127, 179, 230, 0.14);
  --glass: rgba(12, 14, 17, 0.72);
  --glass-border: rgba(255, 255, 255, 0.10);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 16px 34px -22px rgba(0, 0, 0, 0.85);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.32, 1.28, 0.52, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 64px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  overflow: hidden;
  touch-action: manipulation;
}

button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }

/* ---------- App frame ---------- */

.app {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(143, 125, 255, 0.10), transparent 60%),
    var(--bg);
}

.screens { position: absolute; inset: 0; }

.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;     /* no native bounce: pull-to-refresh is handled in JS */
  padding: calc(var(--safe-top) + 12px) 16px calc(var(--tabbar-h) + var(--safe-bottom) + 28px);
  will-change: transform, opacity;
}

.screen-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 4px 14px;
}

.screen-title { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.screen-sub { margin-top: 6px; font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 6px; min-height: 18px; }
.screen-actions { display: flex; gap: 8px; }

.icon-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--text-2);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.spinning svg { animation: spin 0.9s linear infinite; }

.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.6); animation: pulse 2.4s var(--ease-out) infinite; }
.live-dot.stale { background: var(--warn); animation: none; }
.live-dot.down { background: var(--neg); animation: none; }

/* ---------- Cards ---------- */

.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
}
.card-title { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; margin: 26px 4px 12px; }
.section-title .count { font-size: 14px; font-weight: 500; color: var(--text-3); }

.stack > * + * { margin-top: 12px; }

.tappable { transition: transform 0.18s var(--ease-out), filter 0.18s var(--ease-out), background-color 0.18s; user-select: none; -webkit-user-select: none; }
.tappable.pressed { transform: scale(0.975); filter: brightness(1.12); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 650; letter-spacing: 0.04em;
  background: var(--surface-3); color: var(--text-2);
  white-space: nowrap;
}
.chip.pos { background: var(--pos-soft); color: var(--pos); }
.chip.neg { background: var(--neg-soft); color: var(--neg); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.accent { background: var(--accent-soft); color: var(--accent); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Home ---------- */

.hero { padding: 20px 20px 14px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 120%;
  background: radial-gradient(closest-side, rgba(143, 125, 255, 0.18), transparent);
  pointer-events: none;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; }
.label { font-size: 13px; font-weight: 600; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; }
.hero-value { font-size: 44px; font-weight: 700; letter-spacing: -0.035em; margin-top: 8px; line-height: 1.05; transition: color 0.6s; }
.hero-sub { margin-top: 8px; font-size: 15px; font-weight: 550; display: flex; gap: 8px; align-items: center; }
.tick-up { animation: flash-up 1.1s var(--ease-out); }
.tick-down { animation: flash-down 1.1s var(--ease-out); }

.spark { margin: 14px -6px 0; height: 92px; position: relative; }
.spark svg { width: 100%; height: 84px; display: block; overflow: visible; }
.spark-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spark-line.up { stroke: var(--pos); }
.spark-line.down { stroke: var(--neg); }
.spark-base { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.6; }
.spark-stop.up { stop-color: var(--pos); }
.spark-stop.down { stop-color: var(--neg); }
.spark-dot.up { fill: var(--pos); }
.spark-dot.down { fill: var(--neg); }
.spark-ring { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring 2.4s var(--ease-out) infinite; }
.spark-ring.up { stroke: var(--pos); }
.spark-ring.down { stroke: var(--neg); }
.spark-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); padding: 0 6px; }
.spark-empty { height: 84px; display: grid; place-items: center; font-size: 13px; color: var(--text-3); border: 1px dashed var(--hairline-strong); border-radius: 12px; margin: 0 6px; }

.risk-row + .risk-row { margin-top: 18px; }
.risk-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.risk-label { font-size: 15px; font-weight: 600; }
.risk-value { font-size: 17px; font-weight: 650; }
.bar-track { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: visible; }
.bar-fill {
  position: absolute; inset: 0; border-radius: 999px; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, #8a93a3, #c3c9d4);
  transition: transform 0.9s var(--ease-out), background 0.6s;
}
.bar-fill[data-band="THROTTLE"] { background: linear-gradient(90deg, #c99a3e, var(--warn)); }
.bar-fill[data-band="HALT"], .bar-fill[data-band="BACKSTOP"] { background: linear-gradient(90deg, #c94a5c, var(--neg)); }
.bar-tick { position: absolute; top: -4px; width: 2px; height: 18px; margin-left: -1px; border-radius: 2px; background: var(--hairline-strong); }
.bar-tick[data-name="HALT"] { background: rgba(255, 107, 127, 0.55); }
.bar-tick[data-name="BACKSTOP"] { background: rgba(255, 107, 127, 0.9); }
.bar-labels { position: relative; height: 18px; margin-top: 8px; font-size: 11px; color: var(--text-3); }
.bar-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.bar-labels span:last-child { transform: translateX(-100%); }
.risk-foot { margin-top: 6px; font-size: 12px; color: var(--text-3); }

.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-main { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.providers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.alert-link { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.alert-link svg { width: 18px; height: 18px; }
.alert-link.quiet { background: var(--surface-3); color: var(--text-2); }

.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font-size: 14px; margin-bottom: 14px; }
.banner svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.banner.offline { background: var(--surface-3); color: var(--text-2); }

.pos-card { padding: 16px 16px 14px; }
.pos-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pos-name { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.pos-meta { margin-top: 4px; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); }
.pos-pnl { font-size: 20px; font-weight: 700; text-align: right; }
.pos-levels { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; color: var(--text-2); }
.range { position: relative; height: 6px; margin: 12px 0 4px; border-radius: 999px; background: linear-gradient(90deg, var(--neg-soft), var(--surface-3) 40%, var(--pos-soft)); }
.range-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: left 0.8s var(--ease-out), width 0.8s var(--ease-out); }
.range-fill.pos { background: var(--pos); }
.range-fill.neg { background: var(--neg); }
.range-entry { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; background: var(--text-2); border-radius: 2px; }
.range-now { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08); transition: left 0.8s var(--ease-out); }
.range-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }

.dir { font-size: 11px; font-weight: 750; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 7px; }
.dir.buy { background: var(--pos-soft); color: var(--pos); }
.dir.sell { background: var(--neg-soft); color: var(--neg); }

.empty { text-align: center; padding: 44px 24px; color: var(--text-3); }
.empty svg { width: 40px; height: 40px; color: var(--text-3); margin-bottom: 12px; }
.empty .title { color: var(--text-2); font-size: 17px; font-weight: 600; margin-bottom: 6px; }

/* ---------- Plans ---------- */

.plan-top { display: flex; align-items: center; gap: 10px; }
.plan-ticker { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.plan-rr { margin-left: auto; font-size: 15px; font-weight: 650; color: var(--text-2); }
.conviction { display: inline-flex; gap: 3px; }
.conviction i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); }
.conviction i.on { background: var(--accent); }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.level { background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; }
.level .k { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.level .v { margin-top: 4px; font-size: 16px; font-weight: 650; }
.plan-price { margin-top: 10px; font-size: 13px; color: var(--text-2); }
.window { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.window-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text); font-weight: 600; }
.window-row .num { font-size: 17px; }
.window-bar { margin-top: 10px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.window-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left; transition: transform 1s linear; }
.plan-foot { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.disclosure { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--text-2); border-top: 1px solid var(--hairline); padding-top: 10px; }
.disclosure svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease-out); }
.disclosure.open svg { transform: rotate(90deg); }
.details { overflow: hidden; transition: height 0.35s var(--ease-out); }
.details-inner { padding: 4px 0 6px; font-size: 15px; color: var(--text-2); }
.details-inner h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.details-inner p { margin: 0; white-space: pre-wrap; }
.claim { display: flex; gap: 8px; margin-top: 6px; }
.claim svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--pos); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 54px; border-radius: 16px;
  font-size: 17px; font-weight: 650; letter-spacing: -0.01em;
}
.btn svg { width: 20px; height: 20px; }
.btn-primary { background: linear-gradient(135deg, #9a8aff, #7462ff); color: #fff; box-shadow: 0 10px 24px -10px rgba(116, 98, 255, 0.8), 0 1px 0 rgba(255, 255, 255, 0.25) inset; }
.btn-danger { background: var(--neg-soft); color: var(--neg); border: 1px solid rgba(255, 107, 127, 0.25); }
.btn-danger.solid { background: linear-gradient(135deg, #ff7b8d, #f2546b); color: #fff; border: 0; box-shadow: 0 10px 24px -10px rgba(242, 84, 107, 0.8); }
.btn-ghost { background: var(--surface-3); color: var(--text); }
.btn[disabled] { opacity: 0.55; }
.plan-cancel { margin-top: 14px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }

.collapsing { transition: opacity 0.3s, transform 0.35s var(--ease-out), max-height 0.4s var(--ease-out), margin 0.4s, padding 0.4s; opacity: 0; transform: scale(0.96); overflow: hidden; }

/* ---------- Lists (decisions, trades, alerts) ---------- */

.filters { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 16px; padding: 2px 16px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter { flex: none; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text-2); font-size: 15px; font-weight: 600; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.filter.on { background: var(--text); color: var(--bg); border-color: var(--text); }

.day-label { font-size: 13px; font-weight: 650; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; margin: 22px 4px 10px; }
.day-label:first-child { margin-top: 4px; }

.list-card { padding: 0; overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 68px; width: 100%; text-align: left; }
.row + .row { border-top: 1px solid var(--hairline); }
.row-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.row-icon svg { width: 19px; height: 19px; }
.row-icon.pos { background: var(--pos-soft); color: var(--pos); }
.row-icon.neg { background: var(--neg-soft); color: var(--neg); }
.row-icon.warn { background: var(--warn-soft); color: var(--warn); }
.row-icon.accent { background: var(--accent-soft); color: var(--accent); }
.row-body { display: block; flex: 1; min-width: 0; }
.row-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; }
.row-sub { display: block; margin-top: 3px; font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-end { flex: none; text-align: right; font-size: 13px; color: var(--text-3); }
.row-end .big { font-size: 16px; font-weight: 650; color: var(--text); }
.row-end .big.pos { color: var(--pos); }
.row-end .big.neg { color: var(--neg); }
.pill { font-size: 11px; font-weight: 750; letter-spacing: 0.05em; padding: 3px 7px; border-radius: 7px; background: var(--surface-3); color: var(--text-2); }
.pill.pos { background: var(--pos-soft); color: var(--pos); }
.pill.neg { background: var(--neg-soft); color: var(--neg); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.info { background: var(--info-soft); color: var(--info); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.stat .k { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.stat .v { margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.stat.wide { grid-column: 1 / -1; }
.stat.wide .v { font-size: 34px; }
.stat.wide.streak .v { font-size: 20px; }

.alert-card { padding: 16px 16px 16px 20px; overflow: hidden; }
.alert-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--info); }
.alert-card.critical::before { background: var(--neg); }
.alert-card.warning::before { background: var(--warn); }
.alert-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.alert-title { font-size: 16px; font-weight: 650; }
.alert-detail { margin-top: 8px; font-size: 14.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
.alert-card.expanded .alert-detail { -webkit-line-clamp: unset; display: block; }
.alert-time { margin-top: 10px; font-size: 12px; color: var(--text-3); }

.more { margin-top: 6px; }

/* ---------- Sheets, toasts, pull to refresh ---------- */

.sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s; z-index: 50; }
.sheet-backdrop.open { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  max-height: 88vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1a1e29, #12151c);
  border-top: 1px solid var(--hairline-strong);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.9);
  transform: translateY(100%); transition: transform 0.42s var(--ease-out);
  padding-bottom: calc(var(--safe-bottom) + 12px);
}
.sheet.open { transform: translateY(0); }
.sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: var(--hairline-strong); margin: 10px auto 4px; flex: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px 12px; flex: none; }
.sheet-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sheet-body { overflow-y: auto; padding: 0 20px 8px; -webkit-overflow-scrolling: touch; }
.sheet-actions { padding: 12px 20px 0; display: grid; gap: 10px; flex: none; }
.sheet-body p { margin: 0 0 12px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.vote { padding: 14px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--hairline); margin-bottom: 10px; }
.vote-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 650; }
.vote p { margin: 0; font-size: 14.5px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; margin-bottom: 14px; }
.kv .k { color: var(--text-3); }
.kv .v { text-align: right; font-variant-numeric: tabular-nums; word-break: break-all; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; white-space: pre-wrap; word-break: break-word; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px; }

.toast {
  position: fixed; left: 50%; top: calc(var(--safe-top) + 10px); z-index: 60;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 32px);
  padding: 12px 16px; border-radius: 16px;
  background: rgba(30, 35, 48, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline-strong); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.9);
  font-size: 15px; font-weight: 600;
  transform: translate(-50%, -140%); transition: transform 0.45s var(--ease-spring);
}
.toast.show { transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; flex: none; }
.toast.ok svg { color: var(--pos); }
.toast.err svg { color: var(--neg); }

.ptr { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 6px); display: grid; place-items: center; height: 36px; pointer-events: none; z-index: 5; opacity: 0; }
.ptr .ptr-ring { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--text-3); border-right-color: transparent; }
.ptr.ready .ptr-ring { border-color: var(--accent); border-right-color: transparent; }
.ptr.loading .ptr-ring { border-color: var(--accent); border-right-color: transparent; animation: spin 0.8s linear infinite; }

/* ---------- Tab bar ---------- */

.tabbar {
  position: fixed; z-index: 40;
  left: 12px; right: 12px; bottom: calc(var(--safe-bottom) + 8px);
  height: var(--tabbar-h);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px;
  border-radius: 24px;
  background: rgba(22, 26, 35, 0.72);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.9);
}
.tab-indicator {
  position: absolute; top: 6px; bottom: 6px; left: 6px;
  width: calc((100% - 12px) / 5);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  transition: transform 0.5s var(--ease-spring);
}
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-3); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; transition: color 0.25s; }
.tab svg { width: 23px; height: 23px; transition: transform 0.35s var(--ease-spring); }
.tab.on { color: var(--text); }
.tab.on svg { transform: translateY(-1px) scale(1.06); color: var(--accent); }
.tab .badge { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--neg); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }

/* ---------- Login ---------- */

.login {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px);
  background: var(--bg); overflow-y: auto;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.login.leaving { opacity: 0; transform: scale(1.04); pointer-events: none; }
.login-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.login-glow i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: drift 14s ease-in-out infinite alternate; }
.login-glow i:nth-child(1) { width: 360px; height: 360px; background: #5b47ff; top: -120px; left: -110px; }
.login-glow i:nth-child(2) { width: 300px; height: 300px; background: #1fb5aa; bottom: -120px; right: -100px; opacity: 0.35; animation-delay: -6s; }
.login-inner { position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
.login-mark { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(145deg, #23263a, #12141d); border: 1px solid var(--hairline-strong); box-shadow: 0 20px 40px -18px rgba(91, 71, 255, 0.8); margin-bottom: 22px; }
.login-mark svg { width: 44px; height: 44px; }
.login h1 { margin: 0; font-size: 34px; font-weight: 750; letter-spacing: -0.035em; }
.login .lede { margin: 8px 0 28px; color: var(--text-2); font-size: 16px; }
.field { position: relative; margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-3); margin: 0 0 8px 4px; letter-spacing: 0.02em; }
.input {
  width: 100%; height: 56px; padding: 0 52px 0 16px;
  border-radius: 16px; border: 1px solid var(--hairline-strong);
  background: rgba(18, 21, 28, 0.85); font-size: 17px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus { border-color: rgba(143, 125, 255, 0.7); box-shadow: 0 0 0 4px rgba(143, 125, 255, 0.18); }
.reveal { position: absolute; right: 6px; bottom: 6px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-3); }
.reveal svg { width: 20px; height: 20px; }
.code { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.code-cell { height: 58px; border-radius: 14px; border: 1px solid var(--hairline-strong); background: rgba(18, 21, 28, 0.85); display: grid; place-items: center; font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease-spring); }
.code-cell.filled { transform: scale(1.03); }
.code.focused .code-cell.active { border-color: rgba(143, 125, 255, 0.7); box-shadow: 0 0 0 4px rgba(143, 125, 255, 0.18); }
.code.focused .code-cell.active:empty::after { content: ""; width: 2px; height: 26px; background: var(--accent); animation: blink 1s step-end infinite; }
.code-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.01; font-size: 16px; border: 0; background: transparent; color: transparent; caret-color: transparent; letter-spacing: 3em; }
.login .btn { margin-top: 22px; }
.login-error { min-height: 22px; margin-top: 14px; color: var(--neg); font-size: 14.5px; text-align: center; }
.login-foot { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.login-foot svg { width: 15px; height: 15px; }
.shake { animation: shake 0.45s var(--ease-out); }
.haptic-proxy { position: fixed; left: -200px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Motion ---------- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } }
@keyframes ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes flash-up { 0% { text-shadow: 0 0 22px rgba(61, 220, 151, 0.75); } 100% { text-shadow: none; } }
@keyframes flash-down { 0% { text-shadow: 0 0 22px rgba(255, 107, 127, 0.75); } 100% { text-shadow: none; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 30px) scale(1.15); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.5s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- v2: stack navigation (More) ---------- */

.screen-stack { position: absolute; inset: 0; overflow: hidden; }
.back { display: inline-flex; align-items: center; gap: 2px; height: 40px; margin: 0 0 2px -10px; padding: 0 10px; color: var(--accent); font-size: 17px; font-weight: 500; }
.back svg { width: 22px; height: 22px; transform: rotate(180deg); }

.group-label { font-size: 13px; font-weight: 650; color: var(--text-3); letter-spacing: 0.05em; text-transform: uppercase; margin: 22px 6px 8px; }
.group-label:first-of-type { margin-top: 6px; }
.menu { padding: 0; overflow: hidden; }
.menu-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 16px; text-align: left; font-size: 17px; font-weight: 550; }
.menu-row + .menu-row { border-top: 1px solid var(--hairline); }
.menu-row .sub { display: block; font-size: 13px; font-weight: 500; color: var(--text-3); margin-top: 2px; }
.menu-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.menu-icon svg { width: 19px; height: 19px; }
.menu-icon.violet { background: var(--accent-soft); color: var(--accent); }
.menu-icon.teal { background: rgba(90, 209, 201, 0.14); color: var(--accent-2); }
.menu-icon.amber { background: var(--warn-soft); color: var(--warn); }
.menu-icon.rose { background: var(--neg-soft); color: var(--neg); }
.menu-icon.green { background: var(--pos-soft); color: var(--pos); }
.menu-icon.blue { background: var(--info-soft); color: var(--info); }
.menu-icon.grey { background: var(--surface-3); color: var(--text-2); }
.menu-end { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.menu-end svg { width: 18px; height: 18px; }
.menu-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--neg); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }

/* ---------- v2: meters, segmented control, bars ---------- */

.meter { position: relative; height: 8px; border-radius: 999px; background: var(--surface-3); }
.meter > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.9s var(--ease-out); }
.meter.warn > i { background: linear-gradient(90deg, #c99a3e, var(--warn)); }
.meter.neg > i { background: linear-gradient(90deg, #c94a5c, var(--neg)); }
.meter.pos > i { background: linear-gradient(90deg, #2bb07a, var(--pos)); }
.meter > b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); opacity: 0.7; }
.meter-legend { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-3); margin-top: 8px; }

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hairline); margin-bottom: 14px; }
.segmented button { height: 38px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--text-2); transition: background 0.25s, color 0.25s; }
.segmented button.on { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 12px -6px rgba(0, 0, 0, 0.8); }

.bar-list .bar-item + .bar-item { margin-top: 14px; }
.bar-item .bar-top { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-bottom: 7px; }
.bar-item .bar-top .num { color: var(--text-2); }
.bar-item .meter { height: 6px; }

.big-figure { font-size: 38px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; }
.figure-sub { margin-top: 6px; font-size: 14px; color: var(--text-2); }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.mini-stats .stat .v { font-size: 17px; }

/* ---------- v2: status rows, loops ---------- */

.srow { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.srow + .srow { border-top: 1px solid var(--hairline); }
.srow .body { flex: 1; min-width: 0; }
.srow .title { font-size: 15.5px; font-weight: 600; }
.srow .sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.srow .end { text-align: right; font-size: 13px; color: var(--text-2); flex: none; }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.dot.pos { background: var(--pos); box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.15); }
.dot.neg { background: var(--neg); box-shadow: 0 0 0 3px rgba(255, 107, 127, 0.15); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(255, 193, 94, 0.15); }
.loop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.loop { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--hairline); font-size: 13.5px; color: var(--text-2); min-width: 0; }
.loop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-state { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pause-note { font-size: 14px; color: var(--text-2); margin: 0 0 14px; }

/* ---------- v2: activity ---------- */

.act { display: flex; gap: 12px; padding: 14px 16px; width: 100%; text-align: left; }
.act + .act { border-top: 1px solid var(--hairline); }
.act .row-icon { width: 34px; height: 34px; border-radius: 11px; }
.act-body { flex: 1; min-width: 0; }
.act-text { font-size: 14.5px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.act.expanded .act-text { -webkit-line-clamp: unset; display: block; white-space: pre-wrap; }
.act-time { font-size: 12px; color: var(--text-3); margin-top: 5px; }

/* ---------- v2: charts, settings, profile ---------- */

.chart { display: block; width: 100%; height: 150px; overflow: visible; }
.chart .bar-pos { fill: var(--pos); }
.chart .bar-neg { fill: var(--neg); }
.chart .axis { stroke: var(--hairline-strong); stroke-width: 1; }
.chart .eq { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .eq-dot { fill: var(--accent); }
.chart text { fill: var(--text-3); font-size: 10px; font-family: var(--font); }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-3); margin-top: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.rule { padding: 12px 0; }
.rule + .rule { border-top: 1px solid var(--hairline); }
.rule-top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.rule-label { font-size: 15px; color: var(--text-2); flex: none; max-width: 45%; }
.rule-value { font-size: 15px; font-weight: 600; text-align: right; }
.rule-note { font-size: 13px; color: var(--text-3); margin-top: 4px; text-align: right; }
.model-name { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--accent); text-align: right; }

.profile-head { display: flex; align-items: center; gap: 16px; }
.avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 750; color: #0b0d12; background: linear-gradient(135deg, #b0a3ff, #5ad1c9); box-shadow: 0 10px 24px -12px rgba(143, 125, 255, 0.9); }
.profile-name { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.profile-email { font-size: 14.5px; color: var(--text-2); margin-top: 3px; word-break: break-all; }
.qr { display: block; width: 210px; height: 210px; margin: 6px auto 14px; background: #fff; border-radius: 18px; padding: 12px; }
.secret { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; letter-spacing: 0.06em; text-align: center; word-break: break-all; padding: 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--hairline); margin-bottom: 10px; }
.sheet .field { margin-bottom: 12px; }
.sheet .input { padding-right: 16px; }
.sheet-error { min-height: 20px; color: var(--neg); font-size: 14px; margin: 4px 0 2px; }
.note { font-size: 13px; color: var(--text-3); margin: 10px 2px 0; }
.link-btn { color: var(--accent); font-weight: 600; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Notifications: switches ---------- */

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; }
.switch-row + .switch-row { border-top: 1px solid var(--hairline); }
.switch-row .label-text { font-size: 15.5px; font-weight: 550; }
.switch { position: relative; flex: none; width: 51px; height: 31px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); transition: background 0.25s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); transition: transform 0.32s var(--ease-spring); }
.switch input:checked + i { background: var(--pos); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:disabled + i { opacity: 0.5; }
.notif-actions { display: grid; gap: 10px; margin-top: 14px; }

/* ---------- v3: shared text ---------- */

.body-text { font-size: 15px; color: var(--text-2); margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; }
.small { font-size: 12.5px; }
.sheet-h { margin: 16px 0 6px; font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.bullets { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); font-size: 14.5px; }
.bullets li + li { margin-top: 5px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fold { margin: 8px 0 0; font-size: 15px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: var(--lines, 5); -webkit-box-orient: vertical; overflow: hidden; }
.fold.open { display: block; -webkit-line-clamp: unset; }
.fold-btn { min-height: 36px; font-size: 14px; }

/* ---------- v3: price charts ---------- */

.pc-box { position: relative; margin: 6px -4px 0; }
.pchart { display: block; width: 100%; height: 220px; overflow: visible; touch-action: pan-y; }
.pchart.mini { height: 56px; touch-action: auto; pointer-events: none; }
.pc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-line.up { stroke: var(--pos); }
.pc-line.down { stroke: var(--neg); }
.pchart.mini .pc-line { stroke-width: 1.7; }
.pc-grid { stroke: var(--hairline); stroke-width: 1; }
.pc-shade { fill: rgba(143, 125, 255, 0.08); }
.pc-level { stroke-width: 1.3; stroke-dasharray: 5 4; opacity: 0.95; }
.pc-level.trigger { stroke: var(--accent); }
.pc-level.stop { stroke: var(--neg); }
.pc-level.target { stroke: var(--pos); }
.pc-level.entry { stroke: var(--text-2); stroke-dasharray: 2 3; }
.pc-tag { stroke-width: 1; }
.pc-tag.trigger { fill: var(--accent-soft); stroke: rgba(143, 125, 255, 0.5); }
.pc-tag.stop { fill: var(--neg-soft); stroke: rgba(255, 107, 127, 0.5); }
.pc-tag.target { fill: var(--pos-soft); stroke: rgba(61, 220, 151, 0.5); }
.pc-tag.entry { fill: var(--surface-3); stroke: var(--hairline-strong); }
.pc-tag-text { font-size: 9.5px; font-weight: 650; font-family: var(--font); font-variant-numeric: tabular-nums; }
.pc-tag-text.trigger { fill: var(--accent); }
.pc-tag-text.stop { fill: var(--neg); }
.pc-tag-text.target { fill: var(--pos); }
.pc-tag-text.entry { fill: var(--text-2); }
.pc-arrow.trigger { fill: var(--accent); }
.pc-arrow.stop { fill: var(--neg); }
.pc-arrow.target { fill: var(--pos); }
.pc-arrow.entry { fill: var(--text-2); }
.pc-marker { stroke: var(--bg); stroke-width: 2; }
.pc-marker.entry { fill: var(--info); }
.pc-marker.exit { fill: var(--warn); }
.pc-marker-text { fill: #0b0d12; font-size: 7px; font-weight: 800; font-family: var(--font); }
.pc-axis { fill: var(--text-3); font-size: 10px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.pc-scrub { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 2 3; }
.pc-scrub-dot { fill: var(--text); stroke: var(--bg); stroke-width: 2; }
.pc-tip { position: absolute; top: -6px; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 10px; background: rgba(30, 35, 48, 0.94); border: 1px solid var(--hairline-strong); font-size: 11.5px; color: var(--text-2); white-space: nowrap; pointer-events: none; z-index: 2; }
.pc-tip b { font-size: 14px; color: var(--text); }
.pc-empty { height: 160px; display: grid; place-items: center; font-size: 13px; color: var(--text-3); border: 1px dashed var(--hairline-strong); border-radius: 12px; text-align: center; padding: 0 16px; }
.pc-empty.mini { height: 56px; }
.pc-keys { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.pc-key { display: inline-flex; align-items: center; gap: 6px; }
.pc-key b { color: var(--text-2); font-weight: 650; }
.pc-key i { width: 14px; height: 0; border-top: 2px dashed currentColor; }
.pc-key i.round { width: 9px; height: 9px; border: 0; border-radius: 50%; background: currentColor; }
.pc-key.trigger { color: var(--accent); }
.pc-key.stop { color: var(--neg); }
.pc-key.target { color: var(--pos); }
.pc-key.entry { color: var(--info); }
.pc-key.exit { color: var(--warn); }

/* ---------- v3: market ---------- */

.tile { display: block; width: 100%; text-align: left; padding: 16px 16px 12px; margin-bottom: 0; }
.tile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tile-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile-ticker { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.tile-class { font-size: 12.5px; color: var(--text-3); }
.tile-price { text-align: right; }
.tile-last { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tile-change { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.tile-chart { margin: 10px -2px 4px; height: 56px; }
.tile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tile-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.tile-foot span:last-child { display: inline-flex; align-items: center; gap: 5px; text-align: right; }
.tile-foot svg { width: 13px; height: 13px; flex: none; }
.tile-foot .warn { color: var(--warn); }
.tile-foot .neg { color: var(--neg); }
.market-note { text-align: center; margin-top: 18px; }
.quote-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; color: var(--text-3); }
.quote-row b { color: var(--text-2); font-weight: 600; }
.pos-mini { display: block; width: 100%; text-align: left; }
.watch-line { margin-top: 4px; }
.brief-head { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* ---------- v3: trade story ---------- */

.story { position: relative; }
.story-step { display: grid; grid-template-columns: 34px 1fr; gap: 10px; position: relative; }
.story-step + .story-step { margin-top: 2px; }
.story-rail { position: relative; display: flex; justify-content: center; }
.story-rail::before { content: ""; position: absolute; top: 34px; bottom: -16px; width: 2px; background: var(--hairline-strong); border-radius: 1px; }
.story-step:last-child .story-rail::before { display: none; }
.story-dot { position: relative; z-index: 1; width: 30px; height: 30px; margin-top: 14px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.story-dot svg { width: 16px; height: 16px; }
.story-dot.research { background: rgba(90, 209, 201, 0.14); color: var(--accent-2); }
.story-dot.plan { background: var(--accent-soft); color: var(--accent); }
.story-dot.final_check { background: var(--info-soft); color: var(--info); }
.story-dot.entry { background: var(--pos-soft); color: var(--pos); }
.story-dot.managed { background: var(--warn-soft); color: var(--warn); }
.story-dot.close { background: var(--surface-3); color: var(--text); }
.story-card { min-width: 0; padding: 14px 16px; }
.story-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 650; }
.story-sub { font-size: 12.5px; font-weight: 500; color: var(--text-3); text-align: right; }
.story-card .levels { margin-top: 12px; }
.story-card .vote { margin-bottom: 8px; }

/* ---------- v3: calendar ---------- */

.ev-card { padding: 14px 16px; margin-bottom: 0; }
.ev-card.mine { border-color: rgba(143, 125, 255, 0.35); }
.ev-top { display: flex; align-items: flex-start; gap: 12px; }
.ev-body { flex: 1; min-width: 0; }
.ev-title { font-size: 15.5px; font-weight: 650; }
.ev-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ev-meta .chip { height: 22px; font-size: 11px; }
.ev-time { font-size: 15px; font-weight: 700; color: var(--text-2); }
.ev-windows { margin-top: 12px; display: grid; gap: 5px; font-size: 13px; color: var(--text-2); }
.ev-windows > div { display: flex; align-items: center; gap: 8px; }
.ev-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.ev-dot.warn { background: var(--warn); }
.ev-dot.neg { background: var(--neg); }
.ev-affects { margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.now-card { border-color: rgba(255, 193, 94, 0.3); }

/* ---------- v3: research ---------- */

.research-date { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin-top: 8px; }
.theme { font-size: 14.5px; color: var(--text-2); padding: 10px 0; }
.theme + .theme { border-top: 1px solid var(--hairline); }
.theme b { color: var(--text); font-weight: 650; margin-right: 4px; }
.data-cal { display: grid; gap: 7px; }
.data-row { display: grid; grid-template-columns: 82px 1fr; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.watch-card { display: block; width: 100%; text-align: left; margin-bottom: 0; }
.claims { margin-top: 10px; font-size: 13.5px; color: var(--text-2); }

/* ---------- v3: risk ---------- */

.margin-row { display: block; width: 100%; text-align: left; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.margin-row .bar-top { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.margin-row .meter-legend { align-items: center; }
.margin-row .meter-legend svg { width: 15px; height: 15px; }
.ccy-row { display: grid; grid-template-columns: 44px 1fr 92px; align-items: center; gap: 10px; min-height: 36px; }
.ccy-name { font-weight: 650; font-size: 14px; }
.ccy-bar { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ccy-bar b { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--hairline-strong); }
.ccy-bar i { position: absolute; top: 0; bottom: 0; }
.ccy-bar i.short { right: 50%; background: var(--neg); border-radius: 999px 0 0 999px; }
.ccy-bar i.long { left: 50%; background: var(--pos); border-radius: 0 999px 999px 0; }
.ccy-net { text-align: right; font-size: 13px; color: var(--text-2); }
.corr-card .plan-top svg { width: 20px; height: 20px; color: var(--warn); flex: none; }
.corr-card.offsetting .plan-top svg { color: var(--info); }
.corr-pair { font-size: 16px; font-weight: 650; flex: 1; min-width: 0; }

/* ---------- v3: reports ---------- */

.lesson { display: grid; grid-template-columns: 30px 1fr; gap: 12px; margin-bottom: 0; }
.lesson-n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 750; font-size: 14px; }
.lesson-title { font-size: 16px; font-weight: 650; }

/* ---------- v3: people ---------- */

.user-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin-bottom: 0; }
.user-card > svg { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.user-body { flex: 1; min-width: 0; }
.user-name { font-size: 16.5px; font-weight: 650; }
.user-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.avatar.small { width: 46px; height: 46px; font-size: 17px; }
.avatar.tiny { flex: none; width: 38px; height: 38px; font-size: 14px; box-shadow: none; }
.link-text { font-size: 12.5px; letter-spacing: 0; text-align: left; user-select: all; -webkit-user-select: all; }
.audit-row .end { font-size: 12px; color: var(--text-3); }
.row-sub.unread { color: var(--text); font-weight: 600; }

/* A conversation: the screen itself doesn't scroll; the message list does, with the
   composer below it, above the tab bar. */
.thread-screen { display: flex; flex-direction: column; overflow: hidden; padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 20px); }
.thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; display: flex; flex-direction: column; gap: 6px; padding: 0 2px 8px; }
.thread > :first-child { margin-top: auto; }
.thread-day { align-self: center; margin: 14px 0 6px; font-size: 12px; font-weight: 650; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; }
.bubble-row { display: flex; flex-direction: column; max-width: 82%; }
.bubble-row.mine { align-self: flex-end; align-items: flex-end; }
.bubble-row.theirs { align-self: flex-start; align-items: flex-start; }
.bubble { position: relative; padding: 9px 13px 7px; border-radius: 19px; font-size: 16px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.bubble-row.mine .bubble { background: linear-gradient(135deg, #9a8aff, #7462ff); color: #fff; border-bottom-right-radius: 6px; }
.bubble-row.theirs .bubble { background: var(--surface-3); color: var(--text); border-bottom-left-radius: 6px; }
.bubble-time { display: inline-block; margin-left: 8px; font-size: 10.5px; opacity: 0.65; vertical-align: -1px; }
.seen { font-size: 11.5px; color: var(--text-3); margin: 3px 4px 0; }
.composer { position: relative; margin-top: 10px; flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 6px; border-radius: 24px; background: rgba(22, 26, 35, 0.86); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--hairline-strong); }
.composer-input { flex: 1; min-height: 40px; max-height: 140px; resize: none; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; line-height: 1.35; padding: 9px 10px; }
.composer-send { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #9a8aff, #7462ff); color: #fff; transition: opacity 0.2s, transform 0.2s; }
.composer-send svg { width: 19px; height: 19px; }
.composer-send[disabled] { opacity: 0.35; }

/* ---------- Help & legal ---------- */

.term { display: inline; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted rgba(169, 177, 191, 0.7); text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: help; }
.term.pressed { transform: none; filter: brightness(1.3); }
.info-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; vertical-align: -5px; color: var(--text-3); border-radius: 50%; }
.info-btn svg { width: 17px; height: 17px; }
.card-title.with-info { display: flex; align-items: center; gap: 2px; }
.card-title.with-info .info-btn { margin-left: 2px; vertical-align: 0; }
.search-box { position: relative; margin: 0 0 6px; }
.search-box > svg { position: absolute; left: 16px; top: 18px; width: 20px; height: 20px; color: var(--text-3); pointer-events: none; }
.input.search { padding-left: 46px; padding-right: 16px; }
.step-n { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 750; font-size: 14px; }
.glossary-open { width: 100%; margin-bottom: 0; }
.faqs { padding: 0 16px; }
.faq + .faq { border-top: 1px solid var(--hairline); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; text-align: left; font-size: 15.5px; font-weight: 600; }
.faq-q svg { flex: none; width: 18px; height: 18px; color: var(--text-3); transition: transform 0.25s var(--ease-out); }
.faq-q.open svg { transform: rotate(90deg); }
.faq-a { margin: 0 0 14px; font-size: 15px; color: var(--text-2); }
.lead { font-size: 17px; color: var(--text); margin: 0 0 6px; font-weight: 550; }
.term-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.glossary { padding: 4px 16px; }
.gl-item { padding: 14px 0; scroll-margin-top: 90px; transition: background 0.6s; border-radius: 10px; }
.gl-item + .gl-item { border-top: 1px solid var(--hairline); }
.gl-item.flash { animation: glow 1.8s var(--ease-out); }
.gl-term { font-size: 16px; font-weight: 700; }
.gl-def { margin: 6px 0 0; font-size: 15px; color: var(--text-2); }
@keyframes glow { 0% { background: var(--accent-soft); } 100% { background: transparent; } }

.diagram { padding: 18px 16px; }
.dg-flow { display: flex; flex-direction: column; align-items: stretch; }
.dg-node { padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--hairline-strong); }
.dg-node b { display: block; font-size: 15px; }
.dg-node span { display: block; font-size: 13px; color: var(--text-3); margin-top: 2px; }
.dg-node.go { border-color: rgba(61, 220, 151, 0.45); }
.dg-node.go b { color: var(--pos); }
.dg-node.skip { border-color: rgba(255, 193, 94, 0.45); }
.dg-node.skip b { color: var(--warn); }
.dg-arrow { position: relative; height: 22px; }
.dg-arrow::before { content: ""; position: absolute; left: 24px; top: 2px; bottom: 6px; width: 2px; background: var(--accent); opacity: 0.6; }
.dg-arrow::after { content: ""; position: absolute; left: 20px; bottom: 2px; border: 5px solid transparent; border-top: 6px solid var(--accent); opacity: 0.8; }
.dg-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; position: relative; }
.dg-fork::before { content: ""; position: absolute; left: 25%; right: 25%; top: -14px; height: 2px; background: var(--accent); opacity: 0.5; }
.dg-timeline { display: grid; gap: 0; }
.dg-row { display: grid; grid-template-columns: 112px 14px 1fr; gap: 10px; align-items: start; padding: 8px 0; position: relative; }
.dg-row i { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dg-row:not(:last-child) i::after { content: ""; display: block; width: 2px; height: 34px; margin: 12px 0 0 4px; background: var(--hairline-strong); }
.dg-when { font-size: 12.5px; font-weight: 650; color: var(--text-3); text-align: right; }
.dg-what { font-size: 14.5px; }
.dg-window .dg-bar { display: grid; grid-template-columns: 1fr 2fr; gap: 4px; }
.dg-seg { padding: 12px; border-radius: 12px; }
.dg-seg b { display: block; font-size: 14px; }
.dg-seg span { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.dg-seg.win { background: var(--accent-soft); }
.dg-seg.live { background: var(--pos-soft); }
.dg-ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--text-3); }
.dg-bands { display: grid; gap: 14px; }
.dg-band-row { display: grid; grid-template-columns: 44px 1fr; gap: 4px 10px; align-items: center; }
.dg-band-label { font-size: 13px; font-weight: 650; color: var(--text-2); grid-row: span 2; }
.dg-band { display: grid; grid-template-columns: 3fr 2fr 3fr 2fr; height: 12px; border-radius: 999px; overflow: hidden; }
.dg-band i, .dg-band-key i { display: block; }
.dg-band .n, .dg-band-key .n { background: #3a8f6b; }
.dg-band .t, .dg-band-key .t { background: #c99a3e; }
.dg-band .h, .dg-band-key .h { background: #c9665c; }
.dg-band .b, .dg-band-key .b { background: #8e2f45; }
.dg-band-marks { display: grid; grid-template-columns: 3fr 2fr 3fr 2fr; font-size: 11px; color: var(--text-3); }
.dg-band-key { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12.5px; color: var(--text-2); }
.dg-band-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.legal .card { margin-bottom: 12px; }
.legal-section h2 { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.legal-section p, .gate .legal-section p { margin: 8px 0 0; font-size: 15px; color: var(--text-2); }
.key-points { border-color: rgba(255, 193, 94, 0.35); }
.key-points .claim svg { color: var(--warn); }
.banner.ok { background: var(--pos-soft); color: var(--pos); }
.legal-links { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; color: var(--text-3); font-size: 13px; }
.legal-links .link-btn { font-size: 13.5px; min-height: 36px; color: var(--text-2); }
.note.center { text-align: center; }

.gate { position: fixed; inset: 0; z-index: 75; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); padding: calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 32px); transition: opacity 0.4s var(--ease-out); }
.gate.leaving { opacity: 0; pointer-events: none; }
.gate-inner { max-width: 560px; margin: 0 auto; }
.gate h1 { margin: 0; font-size: 30px; font-weight: 750; letter-spacing: -0.03em; }
.gate .lede { margin: 8px 0 18px; color: var(--text-2); font-size: 16px; }
.gate-checks { display: grid; gap: 10px; margin: 18px 0 16px; }
.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hairline-strong); font-size: 15px; cursor: pointer; }
.check-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--hairline-strong); display: grid; place-items: center; color: transparent; transition: background 0.2s, border-color 0.2s; }
.check-box svg { width: 16px; height: 16px; }
.check-row input:checked + .check-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.check-row input:focus-visible + .check-box { box-shadow: 0 0 0 4px rgba(143, 125, 255, 0.25); }
.gate-signout { display: flex; margin: 10px auto 0; color: var(--text-3); }
.reader-close { position: sticky; top: 0; float: right; z-index: 2; }

.doc-intro { font-size: 15.5px; color: var(--text-2); margin: 0 4px 14px; }

/* Memory screen (lessons memory) */
.memory-intro { font-size: 15px; color: var(--text-2); margin: 0 0 12px; }
.memory-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.memory-summary { font-size: 15px; margin: 14px 0 0; }
.memory-lesson { padding: 14px 0; }
.memory-lesson + .memory-lesson { border-top: 1px solid var(--hairline); }
.memory-lesson-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.memory-statement { font-size: 16px; line-height: 1.45; margin: 0 0 6px; }
.memory-meta { font-size: 13px; color: var(--text-3); margin-bottom: 4px; }
.memory-meta.neg { color: var(--neg); }
.memory-meta.pos { color: var(--pos); }
.memory-trades { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.memory-history { font-size: 14px; color: var(--text-2); margin: 6px 0; }
.memory-h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.memory-subhead { padding: 14px 16px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.memory-prompt { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.5; color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 12px; margin: 0; max-height: 420px; overflow: auto; }
#screen-memory .list-card > .card-title, #screen-shadow .list-card > .card-title { padding: 18px 16px 0; margin-bottom: 4px; }
#screen-memory .list-card > .note, #screen-shadow .list-card > .note { padding: 6px 16px 16px; margin: 0; }
#screen-memory .row-sub, #screen-shadow .row-sub { white-space: normal; overflow: visible; text-overflow: clip; }
.memory-meta.cf { color: var(--info); }
/* Agents (24 Oct 2026): list-card titles and notes padded like Memory and Shadow tests. */
.agents-screen .list-card > .card-title { padding: 18px 16px 0; margin-bottom: 4px; }
.agents-screen .list-card > .note { padding: 6px 16px 16px; margin: 0; }
.agents-screen .row.static .row-sub { white-space: normal; overflow: visible; text-overflow: clip; }

/* Home: Today at a glance */
.glance .glance-sec + .glance-sec { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.glance-head { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.glance-row { display: block; width: 100%; text-align: left; padding: 6px 0; background: none; border: 0; color: inherit; font: inherit; }
.glance-row.tap { cursor: pointer; }
.glance-main { display: block; font-size: 15px; font-weight: 600; }
.glance-main.warn { color: var(--warn); }
.glance-extra { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); }

/* Performance: P&L calendar */
.pnl-head { display: flex; align-items: center; gap: 8px; }
.pnl-title { flex: 1; min-width: 0; text-align: center; }
.pnl-title .card-title { margin-bottom: 2px; }
.pnl-total { font-size: 14px; color: var(--text-2); }
.pnl-total.pos { color: var(--pos); }
.pnl-total.neg { color: var(--neg); }
.pnl-head .icon-btn[disabled] { opacity: 0.3; }
.pnl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.pnl-wd { font-size: 11px; color: var(--text-3); text-align: center; padding-bottom: 2px; }
.pnl-cell { min-height: 44px; border-radius: 8px; background: var(--surface-2, var(--surface-3)); padding: 4px 3px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border: 0; color: inherit; font: inherit; overflow: hidden; }
.pnl-cell.empty { background: none; }
.pnl-day { font-size: 11px; color: var(--text-3); }
.pnl-amt { font-size: 10.5px; font-weight: 650; margin-top: 3px; white-space: nowrap; }
.pnl-cell.has { cursor: pointer; }
.pnl-cell.pos { background: var(--pos-soft); color: var(--pos); }
.pnl-cell.neg { background: var(--neg-soft); color: var(--neg); }
.pnl-cell.pos .pnl-day, .pnl-cell.neg .pnl-day { color: inherit; opacity: 0.75; }

/* Profile: notification quiet hours */
.quiet-hours { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.quiet-times { display: flex; gap: 12px; margin: 6px 0 2px; }
.quiet-times[hidden] { display: none; }
.quiet-times label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.quiet-time { font: inherit; font-size: 16px; color: var(--text); background: var(--surface-3); border: 1px solid var(--hairline); border-radius: 10px; padding: 8px 10px; }

/* Reactive playbooks (2026-10-15) */
.scenario { padding: 10px 0; border-top: 1px solid var(--hairline); }
.scenario .row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---------- World (owner, 2026-10-17; preview) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.world-score { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 2px 0; }
.world-chart { margin-top: 14px; }
.world-chart svg { width: 100%; height: 96px; display: block; }
.world-select { width: 100%; height: 44px; margin-top: 12px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); border: 1px solid var(--hairline); font-size: 15px; }
.world-tabs { margin: 0 0 4px; }
.world-pad { margin: 0 4px 12px; }

/* ---------- Changes: markdown (owner, 2026-10-17) ---------- */
.md { font-size: 14.5px; line-height: 1.5; color: var(--text); margin-top: 8px; overflow-wrap: anywhere; }
.md .md-h { font-size: 16px; font-weight: 700; margin: 18px 0 6px; }
.md h2.md-h { font-size: 18px; }
.md .md-p { margin: 8px 0; }
.md .md-list { margin: 6px 0 10px; padding-left: 18px; }
.md .md-list li { margin: 6px 0; }
.md .md-list li.md-sub { margin-left: 16px; }
.md .md-list li.md-task { list-style: none; margin-left: -18px; display: flex; gap: 8px; }
.md .md-box { flex: 0 0 18px; height: 18px; margin-top: 2px; border-radius: 5px; border: 1.5px solid var(--hairline-strong); display: grid; place-items: center; font-size: 12px; color: var(--pos); }
.md .md-box.done { background: var(--pos-soft); border-color: transparent; }
.md code, .md .md-pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--surface-2); border-radius: 6px; padding: 1px 5px; }
.md .md-pre { display: block; padding: 10px; white-space: pre-wrap; margin: 8px 0; }
.md .md-table { overflow-x: auto; margin: 8px 0; }
.md table { border-collapse: collapse; font-size: 13px; }
.md th, .md td { border: 1px solid var(--hairline); padding: 4px 6px; text-align: left; vertical-align: top; }
.md th { color: var(--text-2); }


/* ---------- Refresh, Oct 2026: shared components ---------- */

.card { background: var(--surface); border-color: var(--hairline); }
.card-title { color: var(--text-3); letter-spacing: 0.05em; }
.num, .hero-value, .pos-pnl { font-variant-numeric: tabular-nums; }
.chip { border-radius: 999px; }
.chip.pos { background: var(--pos-soft); color: var(--pos); }
.chip.neg { background: var(--neg-soft); color: var(--neg); }
.chip.accent { background: var(--accent-soft); color: var(--accent); }

/* Floating pill navigation */
.tabbar { left: 14px; right: 14px; border-radius: 999px; padding: 6px 8px; background: rgba(20, 23, 28, 0.78);
  border-color: var(--glass-border); box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.85); }
.tab-indicator { border-radius: 999px; background: var(--accent-soft); left: 8px; width: calc((100% - 16px) / 5); }
.tab.on { color: var(--text); }
.tab.on svg { color: var(--accent); }

/* Pill tabs (segmented) */
.segmented { border-radius: 999px; padding: 4px; background: var(--surface); }
.segmented button { border-radius: 999px; height: 36px; font-size: 14px; }
.segmented button.on { background: var(--accent-soft); color: var(--text); box-shadow: none; }

/* Percentage chips */
.pct-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px;
  font-weight: 650; font-variant-numeric: tabular-nums; background: var(--surface-3); color: var(--text-2); }
.pct-chip.pos { background: var(--pos-soft); color: var(--pos); }
.pct-chip.neg { background: var(--neg-soft); color: var(--neg); }

/* Small inline sparkline */
.mini-spark { width: 72px; height: 28px; flex: 0 0 72px; }
.mini-spark path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mini-spark path.up { stroke: var(--pos); }
.mini-spark path.down { stroke: var(--neg); }

/* ---------- Refresh: Home sky hero (all text inside dark glass boxes) ---------- */

.sky-hero { position: relative; margin: calc(-1 * (var(--safe-top) + 12px)) -16px 4px;
  padding: calc(var(--safe-top) + 10px) 16px 22px; background: #1b2740 url(../img/sky.jpg) center top / cover no-repeat; }
.sky-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 17, 20, 0), var(--bg)); }
.glass { position: relative; z-index: 1; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.sky-hero .screen-header { padding: 10px 10px 10px 16px; margin-bottom: 70px; align-items: center; }
.sky-hero .screen-title { font-size: 26px; }
.sky-hero .icon-btn { background: rgba(255, 255, 255, 0.06); }
.sky-box { padding: 18px 18px 14px; }
.sky-box .hero-top { display: flex; align-items: center; justify-content: space-between; }
.sky-box .label { font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: 0.02em; }
.sky-box .hero-value { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; line-height: 1.05; }
.sky-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 650; background: rgba(255, 255, 255, 0.07); color: var(--text); font-variant-numeric: tabular-nums; }
.pill.pos { background: var(--pos-soft); color: var(--pos); }
.pill.neg { background: var(--neg-soft); color: var(--neg); }
.sky-box .spark { margin-top: 10px; }
.home-tabs { margin: 6px 0 14px; }
.home-pane[hidden] { display: none; }

/* Position cards */
.pos-card .pos-name { font-size: 16px; font-weight: 650; }
.pos-card .pos-pnl { font-size: 20px; font-weight: 700; }
.pos-card .dir { border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; }
.pos-card .dir.buy { background: var(--pos-soft); color: var(--pos); }
.pos-card .dir.sell { background: var(--neg-soft); color: var(--neg); }

/* Plan and alert rows on Home */
.plan-row, .alert-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.plan-row + .plan-row, .alert-row + .alert-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.plan-row .body, .alert-row .body { flex: 1; min-width: 0; }
.plan-row .title, .alert-row .title { font-size: 15px; font-weight: 600; }
.plan-row .sub, .alert-row .sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.see-all { margin-top: 12px; }
.pct-chip.warn { background: var(--warn-soft); color: var(--warn); }

/* Refresh tweaks: a tighter hero */
.sky-hero .screen-header { margin-bottom: 44px; }
.sky-box .hero-value { font-size: 40px; }
.sky-pills { gap: 6px; }
.sky-pills .pill { height: 28px; font-size: 13px; padding: 0 11px; }
.sky-box .spark svg { height: 52px; }
.sky-box .spark-axis { display: none; }
.plan-top .mini-spark { margin-left: auto; flex-basis: 56px; width: 56px; height: 24px; }
.tile-change { margin-top: 4px; text-align: right; }
.sky-box .spark { height: 58px; margin-top: 10px; }

/* ---------- Refresh: background on every screen (owner, 18 Oct) ----------
   The chosen sky sits at the top of each screen and scrolls away with it; every screen header is a
   dark glass box, so no text sits on the image. "Plain" shows no image. */
.app { --sky-img: none; }
.app[data-sky="dusk"] { --sky-img: url(../img/sky.jpg); }
.app[data-sky="dawn"] { --sky-img: url(../img/sky-dawn.jpg); }
.app[data-sky="night"] { --sky-img: url(../img/sky-night.jpg); }
.app[data-sky="storm"] { --sky-img: url(../img/sky-storm.jpg); }
.app[data-sky]:not([data-sky="plain"]) .screen { background: var(--sky-img) center top / max(100%, 560px) auto no-repeat, var(--bg); }
.app[data-sky]:not([data-sky="plain"]) .screen-header { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  padding: 12px 12px 12px 16px; margin-bottom: 14px; align-items: center; }
.app[data-sky]:not([data-sky="plain"]) .screen-header .screen-title { font-size: 28px; }
/* Home's hero uses the same screen background now, and sits higher with tighter spacing */
.sky-hero { background: none; margin-top: calc(-1 * (var(--safe-top) + 12px)); padding-top: calc(var(--safe-top) + 4px); }
.sky-hero::after { display: none; }
.sky-hero .screen-header { margin-bottom: 22px; }
.app[data-sky="plain"] .sky-hero .screen-header { margin-bottom: 14px; }

/* Profile: background picker */
.bg-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 4px; }
.bg-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.bg-opt .sw { width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; border: 2px solid transparent;
  background: var(--bg) center bottom / cover no-repeat; box-shadow: inset 0 0 0 1px var(--glass-border); }
.bg-opt[aria-pressed="true"] .sw { border-color: var(--accent); }
.bg-opt[aria-pressed="true"] { color: var(--text); font-weight: 650; }
/* Headings between cards sit in their own dark box too when a sky is shown */
.app[data-sky]:not([data-sky="plain"]) .section-title { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 8px 14px; margin: 20px 0 12px; align-items: center; }
.app[data-sky]:not([data-sky="plain"]) .group-label { display: table; background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 999px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 4px 12px; margin: 18px 0 8px; }
.app[data-sky]:not([data-sky="plain"]) .group-label:first-of-type { margin-top: 4px; }

/* World: Companies and Data tabs (owner, 18 Oct 2026). Six tabs scroll sideways on a phone. */
.world-tabs .segmented { grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.world-tabs .segmented::-webkit-scrollbar { display: none; }
.world-tabs .segmented button { padding: 0 14px; white-space: nowrap; }
.dossier-row .title { white-space: normal; line-height: 1.35; }
.dossier-row .sub { white-space: normal; }
.dossier-src { display: inline-block; margin-top: 3px; font-size: 11.5px; color: var(--text-3); text-decoration: none; overflow-wrap: anywhere; }
a.dossier-src:hover, a.dossier-src:focus-visible { color: var(--accent); }
.bar-item .dossier-src { margin-top: 5px; }
.dossier-fill { background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }
.dossier-big { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 0; }
.wd-row { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 0; }
.wd-row + .wd-row { border-top: 1px solid var(--hairline); }
.wd-t { font-size: 15px; font-weight: 600; line-height: 1.3; }
.wd-v { font-size: 15.5px; font-weight: 650; text-align: right; white-space: nowrap; }
.wd-s { font-size: 12.5px; color: var(--text-3); }
.wd-row .mini-spark { width: 72px; height: 24px; flex: none; justify-self: end; }
.wd-row .mini-spark path { stroke: var(--accent); }
.wd-n { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-3); }

/* ==========================================================================================
   Midnight (owner, 25 Oct 2026): deep navy, frosted-glass cards, one electric-blue accent.
   Every rule below is scoped to [data-sky="midnight"]: on .app for the app itself, and on the
   page root (set only while Midnight is on) for the sign-in screen, sheets and toasts, which
   live outside .app. The other looks render exactly as before. The only unscoped rules are in
   the first block: new component base classes, hidden or neutral outside Midnight.
   Contrast: text tokens are at least 4.5:1 on the brightest card fill and on the background.
   ========================================================================================== */

/* --- New component base classes (hidden or neutral outside Midnight) --- */
.seg-ind { display: none; }
/* Profile's picker offers Midnight in every look: a wide row under the five skies. */
.bg-opt.bg-look { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; padding: 4px 2px; text-align: left; }
.bg-opt.bg-look .sw { width: 52px; flex: 0 0 52px; aspect-ratio: 1 / 1; }
.bg-opt .sw.sw-midnight { background:
  radial-gradient(70% 55% at 80% 12%, rgba(47, 140, 255, 0.55), transparent 70%),
  linear-gradient(165deg, #050a18 0%, #0a1733 55%, #0f2a5e 100%); }
.bg-look-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bg-look-text b { font-size: 15px; font-weight: 650; color: var(--text); }
.bg-look-text span { font-size: 12.5px; font-weight: 500; color: var(--text-3); }

/* --- Tokens --- */
:root[data-sky="midnight"], .app[data-sky="midnight"] {
  color-scheme: dark;
  --bg: #050a18;
  --bg-2: rgba(3, 9, 24, 0.55);
  --surface: rgba(13, 27, 58, 0.66);
  --surface-2: rgba(24, 44, 88, 0.52);
  --surface-3: rgba(120, 160, 240, 0.12);
  --hairline: rgba(150, 185, 255, 0.10);
  --hairline-strong: rgba(150, 185, 255, 0.18);
  --text: #eef3ff;
  --text-2: #bcc8e2;
  --text-3: #94a3c4;
  --accent: #4da3ff;
  --accent-2: #2f8cff;
  --accent-soft: rgba(47, 140, 255, 0.16);
  --pos: #4cc79a;
  --pos-soft: rgba(76, 199, 154, 0.14);
  --neg: #f4939d;
  --neg-soft: rgba(244, 147, 157, 0.14);
  --warn: #e9bd6e;
  --warn-soft: rgba(233, 189, 110, 0.14);
  --info: #8fb8f2;
  --info-soft: rgba(143, 184, 242, 0.14);
  --glass: rgba(9, 19, 44, 0.74);
  --glass-border: rgba(150, 185, 255, 0.14);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --tabbar-h: 66px;
  /* Accent fills carry white text: dark enough for 4.5:1. Accent text on dark uses --accent. */
  --mn-fill: linear-gradient(135deg, #2370e6 0%, #1858c8 100%);
  --mn-glow: 0 0 20px -4px rgba(47, 140, 255, 0.6);
  --mn-card: linear-gradient(180deg, rgba(20, 38, 80, 0.64) 0%, rgba(10, 21, 48, 0.74) 100%);
  --mn-box: rgba(8, 17, 40, 0.72);
}

/* --- Background: static navy gradient with two soft glows --- */
:root[data-sky="midnight"] body { background: #050a18; }
.app[data-sky="midnight"] {
  background:
    radial-gradient(85% 50% at 92% -6%, rgba(47, 140, 255, 0.20), transparent 64%),
    radial-gradient(75% 45% at -8% 104%, rgba(77, 163, 255, 0.08), transparent 62%),
    linear-gradient(180deg, #050a18 0%, #0a1733 52%, #0f2a5e 100%);
}
.app[data-sky="midnight"]:not([data-sky="plain"]) .screen { background: transparent; }

/* --- Text boxes over the background (dark, no blur: the background behind them is static) --- */
.app[data-sky="midnight"]:not([data-sky="plain"]) .screen-header {
  background: var(--mn-box); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px -22px rgba(0, 0, 0, 0.9);
}
.app[data-sky="midnight"]:not([data-sky="plain"]) .section-title,
.app[data-sky="midnight"]:not([data-sky="plain"]) .group-label {
  background: rgba(8, 17, 40, 0.66); border-color: var(--glass-border);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.app[data-sky="midnight"]:not([data-sky="plain"]) .group-label { color: var(--text-2); }

/* --- Frosted-glass cards. Blur on top-level cards only; nothing nested blurs again, and the long
       lists of small repeated cards skip it (iPhone memory and scrolling). --- */
.app[data-sky="midnight"] .card,
.app[data-sky="midnight"] .sky-box {
  background: var(--mn-card);
  border: 1px solid rgba(150, 185, 255, 0.13);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -26px rgba(0, 0, 0, 0.95), 0 0 34px -24px rgba(47, 140, 255, 0.5);
}
.app[data-sky="midnight"] .card .card,
.app[data-sky="midnight"] .card .glass,
.app[data-sky="midnight"] .sky-box .card,
.app[data-sky="midnight"] .card.tile,
.app[data-sky="midnight"] .card.ev-card,
.app[data-sky="midnight"] .card.story-card,
.app[data-sky="midnight"] .card.watch-card,
.app[data-sky="midnight"] .card.user-card,
.app[data-sky="midnight"] .card.lesson { -webkit-backdrop-filter: none; backdrop-filter: none; }
.app[data-sky="midnight"] .card.tile,
.app[data-sky="midnight"] .card.ev-card,
.app[data-sky="midnight"] .card.story-card,
.app[data-sky="midnight"] .card.watch-card,
.app[data-sky="midnight"] .card.user-card,
.app[data-sky="midnight"] .card.lesson { background: linear-gradient(180deg, rgba(18, 35, 74, 0.80) 0%, rgba(10, 21, 48, 0.86) 100%); }
.app[data-sky="midnight"] .hero::before { background: radial-gradient(closest-side, rgba(47, 140, 255, 0.24), transparent); }
.app[data-sky="midnight"] .ev-card.mine { border-color: rgba(77, 163, 255, 0.45); }
.app[data-sky="midnight"] .card.now-card { border-color: rgba(233, 189, 110, 0.35); }
.app[data-sky="midnight"] .level,
.app[data-sky="midnight"] .loop { background: var(--bg-2); border-color: var(--hairline); }
.app[data-sky="midnight"] .dg-node { background: var(--bg-2); }
/* Terms gate and legal reader sit outside .app: the same cards, without blur (static background). */
:root[data-sky="midnight"] .gate .card { background: var(--mn-card); border: 1px solid rgba(150, 185, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -26px rgba(0, 0, 0, 0.95); }
:root[data-sky="midnight"] .card.key-points { border-color: rgba(233, 189, 110, 0.38); }

/* --- Headline numbers --- */
.app[data-sky="midnight"] .hero-value,
.app[data-sky="midnight"] .sky-box .hero-value { font-size: 44px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.app[data-sky="midnight"] .big-figure { font-size: 40px; font-variant-numeric: tabular-nums; }
.app[data-sky="midnight"] .mn-headline .big-figure { font-size: 36px; margin-top: 0; }
.app[data-sky="midnight"] .sky-box .label { color: var(--text-2); }
.app[data-sky="midnight"] .sky-box .spark { height: 84px; margin: 12px -4px 0; }
.app[data-sky="midnight"] .sky-box .spark svg { height: 84px; }
.app[data-sky="midnight"] .spark-line { stroke-width: 2.4; }
.app[data-sky="midnight"] .spark-empty { border-color: var(--hairline-strong); }
.app[data-sky="midnight"] .pill { background: rgba(120, 160, 240, 0.10); }
.app[data-sky="midnight"] .pill.pos { background: var(--pos-soft); }
.app[data-sky="midnight"] .pill.neg { background: var(--neg-soft); }
.app[data-sky="midnight"] .mn-figure { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.app[data-sky="midnight"] .mn-figure .hero-value { margin-top: 0; min-width: 0; }
.app[data-sky="midnight"] .mn-figure .mini-spark { width: 104px; height: 40px; flex: 0 0 104px; }
.app[data-sky="midnight"] .mn-headline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.app[data-sky="midnight"] .mn-headline-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.app[data-sky="midnight"] .mn-headline .mini-spark { width: 140px; height: 40px; flex: none; }

/* --- Pill time filters: an accent capsule slides to the chosen pill (44 px tap targets) --- */
.app[data-sky="midnight"] .mn-pills { position: relative; display: flex; gap: 2px; margin: 10px -6px 0; }
.app[data-sky="midnight"] .mn-pills button { position: relative; z-index: 1; flex: 1 1 0; min-width: 44px; height: 44px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em; color: var(--text-3); font-variant-numeric: tabular-nums; transition: color 0.25s; }
.app[data-sky="midnight"] .mn-pills button.on { color: #fff; }
.app[data-sky="midnight"] .mn-pills:not(.placed) button.on { background: var(--mn-fill); }
.app[data-sky="midnight"] .mn-pill-ind { position: absolute; left: 0; top: 6px; bottom: 6px; width: 0; border-radius: 999px; pointer-events: none;
  background: var(--mn-fill); box-shadow: var(--mn-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.app[data-sky="midnight"] .mn-pills.placed .mn-pill-ind { transition: transform 0.45s var(--ease-spring), width 0.45s var(--ease-spring), opacity 0.2s; }
.app[data-sky="midnight"] .mn-range-note { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--text-2); text-align: center; }
.app[data-sky="midnight"] .mn-range-note.pos { color: var(--pos); }
.app[data-sky="midnight"] .mn-range-note.neg { color: var(--neg); }

/* --- Segmented controls: the chosen option's capsule slides --- */
:root[data-sky="midnight"] .segmented { position: relative; background: rgba(8, 17, 40, 0.68); border: 1px solid var(--glass-border); }
:root[data-sky="midnight"] .segmented button { position: relative; z-index: 1; color: var(--text-3); font-weight: 650; }
:root[data-sky="midnight"] .segmented button.on { background: var(--mn-fill); color: #fff; box-shadow: none; }
:root[data-sky="midnight"] .segmented.has-ind > .seg-ind { display: block; position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px;
  background: var(--mn-fill); box-shadow: var(--mn-glow), inset 0 1px 0 rgba(255, 255, 255, 0.16); pointer-events: none; }
:root[data-sky="midnight"] .segmented.placed button.on { background: transparent; }
:root[data-sky="midnight"] .segmented.placed > .seg-ind { transition: transform 0.45s var(--ease-spring), width 0.45s var(--ease-spring); }
.app[data-sky="midnight"] .filter { background: rgba(8, 17, 40, 0.68); border-color: var(--glass-border); color: var(--text-2); }
.app[data-sky="midnight"] .filter.on { background: var(--mn-fill); border-color: transparent; color: #fff; box-shadow: var(--mn-glow); }

/* --- Home: the one-time "Back to previous look" chip and the headline tiles --- */
.app[data-sky="midnight"] .mn-back-chip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 34px;
  padding: 0 14px 0 12px; margin: -8px 0 12px 2px; border-radius: 999px; background: var(--mn-box); border: 1px solid rgba(77, 163, 255, 0.38);
  color: var(--text); font-size: 13.5px; font-weight: 600; box-shadow: 0 0 22px -10px rgba(47, 140, 255, 0.7); }
.app[data-sky="midnight"] .mn-back-chip::before { content: ""; position: absolute; inset: -5px -4px; }
.app[data-sky="midnight"] .mn-back-chip svg { width: 16px; height: 16px; color: var(--accent); }
.app[data-sky="midnight"] .mn-tiles { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.app[data-sky="midnight"] .mn-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; min-height: 128px; padding: 12px 8px; border-radius: 20px; text-align: center; color: var(--text);
  background: linear-gradient(180deg, rgba(20, 38, 80, 0.74) 0%, rgba(10, 21, 48, 0.84) 100%); border: 1px solid rgba(150, 185, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px -22px rgba(0, 0, 0, 0.9); }
.app[data-sky="midnight"] .mn-tile-label { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.app[data-sky="midnight"] .mn-tile-value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.app[data-sky="midnight"] .mn-tile-sub { font-size: 12px; line-height: 1.3; color: var(--text-3); }

/* --- Circular gauges --- */
.app[data-sky="midnight"] .gauge { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; flex: none; }
.app[data-sky="midnight"] .gauge-dial { position: relative; display: block; width: 76px; height: 76px; }
.app[data-sky="midnight"] .gauge.sm .gauge-dial { width: 64px; height: 64px; }
.app[data-sky="midnight"] .gauge.lg .gauge-dial { width: 112px; height: 112px; }
.app[data-sky="midnight"] .gauge-ring { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(47, 140, 255, 0.35)); }
.app[data-sky="midnight"] .gauge-track { fill: none; stroke: rgba(120, 160, 240, 0.15); stroke-width: 8; }
.app[data-sky="midnight"] .gauge-arc { fill: none; stroke: var(--accent-2); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease-out), stroke 0.4s; }
.app[data-sky="midnight"] .gauge.pos .gauge-arc { stroke: var(--pos); }
.app[data-sky="midnight"] .gauge.warn .gauge-arc { stroke: var(--warn); }
.app[data-sky="midnight"] .gauge.neg .gauge-arc { stroke: var(--neg); }
.app[data-sky="midnight"] .gauge-mark { stroke: rgba(238, 243, 255, 0.9); stroke-width: 3; stroke-linecap: round; }
.app[data-sky="midnight"] .gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.app[data-sky="midnight"] .gauge-value { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; color: var(--text); }
.app[data-sky="midnight"] .gauge.sm .gauge-value { font-size: 16px; }
.app[data-sky="midnight"] .gauge.lg .gauge-value { font-size: 30px; }
.app[data-sky="midnight"] .gauge-sub { margin-top: 2px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.app[data-sky="midnight"] .gauge-label { font-size: 12.5px; font-weight: 650; color: var(--text-2); text-align: center; line-height: 1.25; }
.app[data-sky="midnight"] .mn-live { display: flex; align-items: center; gap: 18px; }
.app[data-sky="midnight"] .mn-live-text { min-width: 0; flex: 1; }
.app[data-sky="midnight"] .mn-live-text .card-title { margin-bottom: 6px; }
.app[data-sky="midnight"] .mn-live-figure { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.app[data-sky="midnight"] .mn-live-text .note { margin: 6px 0 0; }
.app[data-sky="midnight"] .mn-score-top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.app[data-sky="midnight"] .mn-score-copy { min-width: 0; flex: 1; }
.app[data-sky="midnight"] .mn-score-copy .memory-intro { margin: 0; font-size: 14.5px; }
.app[data-sky="midnight"] .mn-crit { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app[data-sky="midnight"] .mn-gauge-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-items: center; padding: 4px 0 2px; }

/* --- Buttons, inputs and controls (also in sheets and on the sign-in screen) --- */
:root[data-sky="midnight"] .btn-primary { background: var(--mn-fill); color: #fff; box-shadow: 0 10px 26px -12px rgba(47, 140, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
:root[data-sky="midnight"] .btn-danger.solid { background: linear-gradient(135deg, #c94a5c 0%, #b23a4f 100%); box-shadow: 0 10px 24px -12px rgba(201, 74, 92, 0.8); }
:root[data-sky="midnight"] .icon-btn { background: rgba(120, 160, 240, 0.10); border-color: rgba(150, 185, 255, 0.16); color: var(--text-2); }
:root[data-sky="midnight"] .input,
:root[data-sky="midnight"] .code-cell { background: rgba(5, 12, 30, 0.84); border-color: rgba(150, 185, 255, 0.22); }
:root[data-sky="midnight"] .input:focus,
:root[data-sky="midnight"] .code.focused .code-cell.active { border-color: rgba(77, 163, 255, 0.85); box-shadow: 0 0 0 4px rgba(47, 140, 255, 0.22); }
:root[data-sky="midnight"] .check-row input:checked + .check-box { background: #2370e6; border-color: #2370e6; }
:root[data-sky="midnight"] .check-row input:focus-visible + .check-box { box-shadow: 0 0 0 4px rgba(47, 140, 255, 0.28); }
:root[data-sky="midnight"] .switch input:checked + i { background: #2370e6; }
:root[data-sky="midnight"] .chip.accent { color: #8ec8ff; }
:root[data-sky="midnight"] .lesson-n,
:root[data-sky="midnight"] .step-n { color: #8ec8ff; }
:root[data-sky="midnight"] .avatar { color: #04122e; background: linear-gradient(135deg, #8ec8ff, #2f8cff); box-shadow: 0 10px 24px -12px rgba(47, 140, 255, 0.9); }
.app[data-sky="midnight"] .menu-icon { background: var(--accent-soft); color: #8ec8ff; box-shadow: inset 0 0 0 1px rgba(77, 163, 255, 0.18); }
.app[data-sky="midnight"] .menu-icon.grey { background: var(--surface-3); color: var(--text-2); box-shadow: none; }
.app[data-sky="midnight"] .story-dot.research { background: var(--accent-soft); color: #8ec8ff; }
.app[data-sky="midnight"] .bar-fill[data-band="NORMAL"] { background: linear-gradient(90deg, #2370e6, var(--accent)); }
.app[data-sky="midnight"] .range-now { box-shadow: 0 0 0 4px rgba(77, 163, 255, 0.18), 0 0 14px rgba(77, 163, 255, 0.45); }

/* --- Messages --- */
.app[data-sky="midnight"] .bubble-row.mine .bubble { background: linear-gradient(135deg, #1f66dc 0%, #174fb4 100%); }
.app[data-sky="midnight"] .bubble-row.mine .bubble-time { opacity: 0.9; }
.app[data-sky="midnight"] .composer { background: rgba(8, 17, 40, 0.88); border-color: var(--glass-border); }
.app[data-sky="midnight"] .composer-send { background: var(--mn-fill); }

/* --- Floating pill navigation: inset glass pill, the active tab lit by the accent --- */
.app[data-sky="midnight"] .tabbar {
  left: 16px; right: 16px; bottom: calc(var(--safe-bottom) + 10px); height: var(--tabbar-h); padding: 6px; border-radius: 999px;
  background: rgba(8, 17, 40, 0.74); border: 1px solid rgba(150, 185, 255, 0.16);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 32px -18px rgba(47, 140, 255, 0.55);
}
.app[data-sky="midnight"] .tab-indicator { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); border-radius: 999px;
  background: linear-gradient(180deg, rgba(47, 140, 255, 0.32) 0%, rgba(35, 112, 230, 0.20) 100%);
  box-shadow: 0 0 22px -4px rgba(47, 140, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(77, 163, 255, 0.36); }
.app[data-sky="midnight"] .tab { min-height: 44px; color: var(--text-3); font-size: 12px; }
.app[data-sky="midnight"] .tab.on { color: #fff; }
.app[data-sky="midnight"] .tab.on svg { color: #8ec8ff; filter: drop-shadow(0 0 6px rgba(77, 163, 255, 0.8)); }
.app[data-sky="midnight"] .tab .badge { top: 4px; font-size: 11px; }

/* --- Charts: line and candles --- */
.app[data-sky="midnight"] .pc-grid { stroke: rgba(150, 185, 255, 0.08); }
.app[data-sky="midnight"] .pc-axis { font-size: 11.5px; fill: var(--text-3); }
.app[data-sky="midnight"] .pc-tag-text { font-size: 12px; }
.app[data-sky="midnight"] .pc-line { stroke-width: 2.2; }
.app[data-sky="midnight"] .pc-shade { fill: rgba(47, 140, 255, 0.10); }
.app[data-sky="midnight"] .pc-level.trigger { stroke: var(--accent); }
.app[data-sky="midnight"] .pc-tag.trigger { fill: rgba(47, 140, 255, 0.18); stroke: rgba(77, 163, 255, 0.55); }
.app[data-sky="midnight"] .pc-tag-text.trigger { fill: #8ec8ff; }
.app[data-sky="midnight"] .pc-tag.stop { stroke: rgba(244, 147, 157, 0.5); }
.app[data-sky="midnight"] .pc-tag.target { stroke: rgba(76, 199, 154, 0.5); }
.app[data-sky="midnight"] .pc-tag.last { fill: #2370e6; stroke: rgba(142, 200, 255, 0.7); }
.app[data-sky="midnight"] .pc-tag-text.last { fill: #fff; }
.app[data-sky="midnight"] .pc-glow { fill: rgba(77, 163, 255, 0.24); }
.app[data-sky="midnight"] .pc-scrub { stroke: rgba(142, 200, 255, 0.8); }
.app[data-sky="midnight"] .pc-scrub-dot { fill: #fff; stroke: #2f8cff; stroke-width: 2.5; }
.app[data-sky="midnight"] .pc-tip { background: rgba(8, 18, 42, 0.96); border-color: rgba(77, 163, 255, 0.35); font-size: 12px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.9); }
.app[data-sky="midnight"] .cc-wick { stroke-width: 1.2; }
.app[data-sky="midnight"] .cc-wick.up { stroke: var(--pos); }
.app[data-sky="midnight"] .cc-wick.down { stroke: var(--neg); }
.app[data-sky="midnight"] .cc-body.up { fill: var(--pos); }
.app[data-sky="midnight"] .cc-body.down { fill: var(--neg); }
.app[data-sky="midnight"] .cc-vol.up { fill: rgba(76, 199, 154, 0.36); }
.app[data-sky="midnight"] .cc-vol.down { fill: rgba(244, 147, 157, 0.32); }
.app[data-sky="midnight"] .cc-last { stroke: rgba(77, 163, 255, 0.6); stroke-width: 1; stroke-dasharray: 3 4; }
.app[data-sky="midnight"] .cc-cross { stroke-dasharray: 2 3; }
.app[data-sky="midnight"] .cc-dot { fill: #8ec8ff; stroke: #050a18; stroke-width: 1.5; }
.app[data-sky="midnight"] .chart text { font-size: 11.5px; }
.app[data-sky="midnight"] .mini-spark path.mn-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mn-draw 0.9s var(--ease-out) forwards; }

/* --- Readability on iPhone: nothing under 12 px except chart tags --- */
.app[data-sky="midnight"] .level .k,
.app[data-sky="midnight"] .range-legend,
.app[data-sky="midnight"] .bar-labels,
.app[data-sky="midnight"] .spark-axis,
.app[data-sky="midnight"] .pnl-wd,
.app[data-sky="midnight"] .pnl-day,
.app[data-sky="midnight"] .dg-ticks,
.app[data-sky="midnight"] .dg-band-marks,
.app[data-sky="midnight"] .tile-foot,
.app[data-sky="midnight"] .act-time,
.app[data-sky="midnight"] .alert-time,
.app[data-sky="midnight"] .seen,
.app[data-sky="midnight"] .dossier-src,
.app[data-sky="midnight"] .bubble-time,
.app[data-sky="midnight"] .dir,
.app[data-sky="midnight"] .pos-card .dir { font-size: 12px; }
.app[data-sky="midnight"] .ev-meta .chip { height: 24px; font-size: 12px; }
.app[data-sky="midnight"] .pnl-amt { font-size: 12px; letter-spacing: -0.03em; }

/* --- Sheets and toasts (outside .app: scoped on the page root) --- */
:root[data-sky="midnight"] .sheet { background: linear-gradient(180deg, #0f1f45 0%, #08132d 100%); border-top-color: rgba(150, 185, 255, 0.22);
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.95), 0 -1px 0 rgba(77, 163, 255, 0.2); }
:root[data-sky="midnight"] .sheet-backdrop { background: rgba(2, 6, 18, 0.62); }
:root[data-sky="midnight"] .toast { background: rgba(10, 22, 50, 0.95); border-color: rgba(150, 185, 255, 0.2); }

/* --- Sign-in, invite and terms screens: navy, with a very slow glow drift (static under reduced motion) --- */
:root[data-sky="midnight"] .login,
:root[data-sky="midnight"] .gate { background:
  radial-gradient(85% 50% at 92% -6%, rgba(47, 140, 255, 0.18), transparent 64%),
  linear-gradient(180deg, #050a18 0%, #0a1733 55%, #0f2a5e 100%); }
:root[data-sky="midnight"] .login-glow i { opacity: 0.38; filter: blur(70px); animation-duration: 28s; }
:root[data-sky="midnight"] .login-glow i:nth-child(1) { background: #1f6fe0; }
:root[data-sky="midnight"] .login-glow i:nth-child(2) { background: #2f8cff; opacity: 0.2; }
:root[data-sky="midnight"] .login-mark { background: linear-gradient(145deg, rgba(20, 38, 80, 0.92), rgba(8, 17, 40, 0.96)); border-color: rgba(150, 185, 255, 0.2);
  box-shadow: 0 20px 44px -18px rgba(47, 140, 255, 0.75); }
:root[data-sky="midnight"] .login-mark stop:first-child { stop-color: #8ec8ff; }
:root[data-sky="midnight"] .login-mark stop:last-child { stop-color: #2f8cff; }
:root[data-sky="midnight"] .login-mark circle { fill: #4da3ff; }

/* --- Motion: cards rise, figures tint briefly as they change, lines draw in --- */
.app[data-sky="midnight"] .rise { animation: mn-rise 0.6s var(--ease-out) both; }
.app[data-sky="midnight"] .tick-up { animation: mn-tint-up 1.2s var(--ease-out); }
.app[data-sky="midnight"] .tick-down { animation: mn-tint-down 1.2s var(--ease-out); }
@keyframes mn-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes mn-tint-up { from { color: var(--pos); text-shadow: 0 0 18px rgba(76, 199, 154, 0.55); } }
@keyframes mn-tint-down { from { color: var(--neg); text-shadow: 0 0 18px rgba(244, 147, 157, 0.55); } }
@keyframes mn-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .app[data-sky="midnight"] .rise,
  .app[data-sky="midnight"] .tick-up,
  .app[data-sky="midnight"] .tick-down,
  :root[data-sky="midnight"] .login-glow i { animation: none !important; }
  .app[data-sky="midnight"] .mini-spark path.mn-draw { animation: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .app[data-sky="midnight"] .gauge-arc,
  .app[data-sky="midnight"] .mn-pill-ind,
  :root[data-sky="midnight"] .segmented > .seg-ind,
  .app[data-sky="midnight"] .tab-indicator { transition: none !important; }
}