/* ─── Self-hosted Noto Serif SC ('NotoSerifSC-Local', the newsprint serif) is
   declared in /fonts/noto-serif-sc/<version>/font.css as unicode-range chunks,
   injected by app.js only in the Newsprint style. Its own family name lets the
   browser fall through to it after a locally installed "Noto Serif SC". */

/* ─── Reset & Base ─────────────────────────────────────────────────────────── */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;
  /* Shuffled accent colors (overridden by JS on load) */
  --ac1: 60, 140, 240;
  --ac2: 40, 185, 170;
  --ac3: 50, 180, 110;
  --ac4: 120, 105, 210;
  --ac5: 0, 175, 215;
  --ac6: 85, 145, 220;
  --bg: #FAF9F5;
  --card-bg: rgba(255, 255, 255, 0.42);
  --text: #1c1c1e;
  --text-secondary: #8e8e93;
  --separator: rgba(60, 60, 67, 0.1);
  --accent: #007aff;
  --accent-green: #34c759;
  --accent-orange: #ff9500;
  --accent-red: #ff3b30;
  --accent-purple: #af52de;
  --accent-teal: #5ac8fa;
  --wsb-analysis-link: #3aa7ff;
  --tab-bar-bg: rgba(255, 255, 255, 0.32);
  --card-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --card-radius: 22px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --glass-blur: blur(40px) saturate(180%);
  --glass-border: 1px solid rgba(255, 255, 255, 0.35);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 12px -5px rgba(255, 255, 255, 0.35);
  --glass-edge: 0 0 0 1px rgba(0, 0, 0, 0.06);
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.2);
}

/* ─── Reading typography tokens ────────────────────────────────────────────────
   统一调度新闻正文/标题排版,三组分开调度:电脑端(:root) / 手机 iOS(@media) /
   手机 Android(html.is-android)。改字号只动这里——所有阅读组件都引用这组变量:
   feed 卡片 / 聚合面板 / 置顶面板 / WSB 分析 / DD / Trump / Time Machine recap。 */
:root {
  --read-title-size: 17px;
  --read-body-size: 16px;
  --read-line-height: 1.55;
  --read-para-gap: 4px;
}
@media (max-width: 768px) {
  :root {                              /* 手机 iOS / 默认手机 */
    --read-body-size: 15px;
    --read-title-size: 16px;
  }
  html.is-android {                    /* 手机 Android:字体渲染偏大,整体下调一档 */
    --read-body-size: 14px;
    --read-title-size: 15px;
  }
}

/* Dark theme via data attribute or system preference */

:root[data-theme="dark"] {
  --bg: #1c1c1e;
  --card-bg: rgba(44, 44, 46, 0.55);
  --text: #f5f5f7;
  --text-secondary: #98989d;
  --separator: rgba(255, 255, 255, 0.08);
  --tab-bar-bg: rgba(30, 30, 32, 0.65);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
  --wsb-analysis-link: #7cc7ff;
  --glass-blur: blur(40px) saturate(150%);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #1c1c1e;
    --card-bg: rgba(44, 44, 46, 0.55);
    --text: #f5f5f7;
    --text-secondary: #98989d;
    --separator: rgba(255, 255, 255, 0.08);
    --tab-bar-bg: rgba(30, 30, 32, 0.65);
    --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
    --wsb-analysis-link: #7cc7ff;
    --glass-blur: blur(40px) saturate(150%);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.05);
  }
}

html {
  font-family: var(--font);
  /* Transparent root so Safari 26 (iOS 26 Liquid Glass) composites scrolling
     content behind the translucent status bar instead of sampling an opaque
     root color and painting a solid bar over it. body var(--bg) does the paint. */
  background: transparent;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100dvh;
  padding-top: 60px;
  overflow-x: hidden;
  background: var(--bg);
}

@media (max-width: 768px) {
  button,
  a,
  summary,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ─── Tab Bar ──────────────────────────────────────────────────────────────── */

.tab-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--tab-bar-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

.tab-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  overflow: visible;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-width: 0;
}

.app-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  background: linear-gradient(135deg,
    rgba(255, 80, 60, 0.82),
    rgba(255, 160, 40, 0.78),
    rgba(255, 210, 60, 0.72),
    rgba(80, 200, 100, 0.75),
    rgba(40, 140, 255, 0.78),
    rgba(175, 100, 220, 0.82)
  );
  background-size: 250% 250%;
  background-position: 0% 50%;
  animation: gradient-shift 6s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 12px -4px rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  position: relative;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .app-title,
  .app-title::after,
  .analysis-card h1,
  .live-date-label-text {
    animation: none !important;
  }
}

/* ─── Sub-view swipe transition (mobile) ───────────────────────────────────
   When a touch swipe switches the active sub-view inside Live or WSB, the
   incoming view slides in from the side opposite the finger motion. We apply
   the animation by adding `swipe-in-left` / `swipe-in-right` to the newly
   visible sub-view; CSS animation removes itself via `animationend` cleanup
   in JS. The transform is GPU-only so it's cheap even with deep DOM. */
@keyframes subview-slide-in-left {
  from { transform: translate3d(28%, 0, 0); opacity: 0.45; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes subview-slide-in-right {
  from { transform: translate3d(-28%, 0, 0); opacity: 0.45; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
.subview-swipe-in-left  { animation: subview-slide-in-left  300ms cubic-bezier(.22,.61,.36,1); }
.subview-swipe-in-right { animation: subview-slide-in-right 300ms cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .subview-swipe-in-left, .subview-swipe-in-right { animation: none !important; }
}

/* Desktop: glow halo bleeding from capsule across the title bar */
@media (min-width: 769px) {
  .tab-bar {
    overflow: visible;
  }

  .app-title {
    position: relative;
    z-index: 1;
  }

  .app-title::after {
    content: '';
    position: absolute;
    top: -30px;
    bottom: -30px;
    left: -100vw;
    right: -100vw;
    background: linear-gradient(135deg,
      rgba(255, 59, 48, 0.15),
      rgba(255, 149, 0, 0.12),
      rgba(255, 204, 0, 0.10),
      rgba(52, 199, 89, 0.08),
      rgba(0, 122, 255, 0.08),
      rgba(175, 82, 222, 0.06)
    );
    background-size: 220% 220%;
    background-position: 0% 50%;
    animation: gradient-shift 6s ease-in-out infinite;
    -webkit-mask-image: radial-gradient(ellipse 90vw 50px at center, black 0%, black 5%, transparent 100%);
    mask-image: radial-gradient(ellipse 90vw 50px at center, black 0%, black 5%, transparent 100%);
    pointer-events: none;
    z-index: -1;
  }

  .tabs {
    position: relative;
    z-index: 1;
  }
}

.tabs {
  display: flex;
  gap: 4px;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 1;
  min-width: 0;
  padding: 6px 16px 6px 8px;
  margin: -6px -16px -6px -8px;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 18px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transform: scale(1);
  position: relative;
}

.tab:hover {
  background: rgba(255, 255, 255, 0.4);
  border-color: transparent;
  color: var(--text);
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tab.active {
  background: rgba(255, 255, 255, 0.6);
  color: var(--text);
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 14px -5px rgba(255, 255, 255, 0.35);
  font-weight: 600;
}

/* Subtle neutral glow behind active tab */
.tab.active::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 22px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}


/* ─── Settings Tab ─────────────────────────────────────────────────────────── */

.settings-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow), var(--glass-highlight);
  border: var(--glass-border);
  padding: 28px 32px;
  max-width: 480px;
  margin: 0 auto;
}

.settings-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.settings-section {
  margin-bottom: 24px;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-bottom: 10px;
}

.settings-section:nth-child(2) .settings-group-label {
  color: var(--accent-purple);
}

.settings-section:nth-child(3) .settings-group-label {
  color: var(--accent-orange);
}

.settings-section:nth-child(4) .settings-group-label {
  color: var(--accent-green);
}

.settings-detail-submenu {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  margin: -8px 0 24px 14px;
  padding-left: 16px;
  opacity: 1;
  transform: translateY(0);
  transition:
    grid-template-rows 0.28s ease,
    opacity 0.22s ease,
    transform 0.28s ease,
    margin-bottom 0.28s ease;
}

.settings-detail-submenu::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 999px;
  /* Color stops align top-to-bottom with each section's active accent:
       sources (blue) → AI summary (pink) → filter (green) → cluster (indigo)
       → recency (orange).
     Each stop sits at the centre of its section's first button: app.js
     measures them into --detail-stop-N (sections differ in height — the
     source chips wrap onto two rows on phones); the literals are fallbacks.
     Update this stop list whenever a new section is added or reordered. */
  background: linear-gradient(
    180deg,
    var(--accent) var(--detail-stop-1, 0%),
    var(--accent-pink, #ff2d55) var(--detail-stop-2, 25%),
    var(--accent-green) var(--detail-stop-3, 50%),
    rgb(88, 86, 214) var(--detail-stop-4, 75%),
    var(--accent-orange) var(--detail-stop-5, 100%)
  );
  opacity: 0.7;
}

/* Search submenu has two sections: AI Summary (pink) → Content Filter (green).
   Strip gradient mirrors the feed submenu pattern — color stops align
   top-to-bottom with each section's active accent. */
.settings-detail-submenu[data-live-search-settings]::before {
  background: linear-gradient(
    180deg,
    var(--accent-pink, #ff2d55) var(--detail-stop-1, 0%),
    var(--accent-green) var(--detail-stop-2, 100%)
  );
}

.settings-detail-submenu-inner {
  min-height: 0;
  overflow: hidden;
  margin: -4px -6px -6px -8px;
  padding: 4px 6px 6px 8px;
}

.settings-detail-submenu.is-collapsed {
  grid-template-rows: 0fr;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.settings-detail-submenu .settings-section {
  margin-bottom: 18px;
}

.settings-detail-submenu .settings-section:last-child {
  margin-bottom: 0;
}

.settings-section--detail-sub .settings-group-label {
  font-size: 11px;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

/* Per-section label colors must align top-to-bottom with the left strip's
   gradient stops: blue → pink → green → purple. The `.settings-detail-submenu`
   prefix bumps specificity above the global `.settings-section:nth-child(N)`
   color rules, which would otherwise win at the same level. */
.settings-detail-submenu .settings-section--detail-sources .settings-group-label {
  color: var(--accent);
}
.settings-detail-submenu .settings-section--detail-ai .settings-group-label {
  color: var(--accent-pink, #ff2d55);
}
.settings-detail-submenu .settings-section--detail-filter .settings-group-label {
  color: var(--accent-green);
}
.settings-detail-submenu .settings-section--detail-cluster .settings-group-label {
  color: rgb(88, 86, 214);
}
.settings-detail-submenu .settings-section--detail-recency .settings-group-label {
  color: var(--accent-orange);
}

.theme-options {
  display: flex;
  gap: 8px;
}

.theme-option {
  flex: 1;
  padding: 12px 0;
  border: var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.25);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}

.theme-option:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.theme-option--auto:hover,
.theme-option--auto.active { border-color: var(--accent-purple); }
.theme-option--light:hover,
.theme-option--light.active { border-color: var(--accent-orange); }
.theme-option--dark:hover,
.theme-option--dark.active { border-color: var(--accent); }

.theme-option--auto.active {
  background: rgba(175, 82, 222, 0.12);
  color: var(--accent-purple);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(175, 82, 222, 0.15), var(--glass-highlight);
}

.theme-option--light.active {
  background: rgba(255, 149, 0, 0.12);
  color: var(--accent-orange);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.15), var(--glass-highlight);
}

.theme-option--dark.active {
  background: rgba(0, 122, 255, 0.12);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.15), var(--glass-highlight);
}

/* Card Style options */
.style-options {
  display: flex;
  gap: 8px;
}

.style-option {
  flex: 1;
  padding: 12px 0;
  border: var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.25);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}

.style-option:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.style-option--newsprint:hover,
.style-option--newsprint.active { border-color: #b8a872; }
.style-option--colorful:hover,
.style-option--colorful.active { border-color: var(--accent-pink, #ff2d55); }

.style-option--newsprint.active {
  background: rgba(184, 168, 114, 0.14);
  color: #8a7f63;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(184, 168, 114, 0.18), var(--glass-highlight);
}

.style-option--colorful.active {
  background: rgba(255, 45, 85, 0.12);
  color: var(--accent-pink, #ff2d55);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 45, 85, 0.15), var(--glass-highlight);
}

/* News Source options */
/* Chips size to their label plus padding and wrap left to right. Every row
   but the last shares out its slack (app.js marks those chips .is-row-fill);
   the last row of a wrapped list keeps natural widths, so a lone trailing
   chip isn't stretched across the card. */
.source-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-option {
  flex: 0 1 auto;
  padding: 12px 18px;
  border: var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.25);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}

.source-option.is-row-fill {
  flex-grow: 1;
}

/* Phones: at most four chips a row (five is too cramped). A min-width just
   over a fifth of the row (minus the four gaps) means five never fit. */
@media (max-width: 480px) {
  .source-option {
    min-width: calc((100% - 4 * 8px) / 5 + 1px);
    padding-inline: 20px;
  }
}
/* 360px-class phones: 20px would push FT off the first row (3 + 3). */
@media (max-width: 370px) {
  .source-option {
    padding-inline: 18px;
  }
}

/* Per-source colours: the server injects them from its source registry
   (NEWS_SOURCES in server.js) as variables on every `…--<source>` modifier
   class — --src-rgb (tint), --src-rgb2 (gradient partner), --src-color (text /
   border; WSJ/NYT/BBG point at the theme accents). Selectors keep the
   specificity of the per-source rules they replace. */
/* One colour treatment for every per-source pill, in both themes: the feed
   card's source tag, the selected settings chip and the selected search tab
   (the cluster peer tab matches it too) — ~10% tint, ~15% border, text in the
   source colour. The components below only add their own shape / weight /
   shadow; the dark-glass button rules skip the selected state. */
[class*="live-card-source--"],
[class*="source-option--"].active,
[class*="search-source-tab--"].active {
  color: var(--src-color);
  background: rgba(var(--src-rgb), 0.1);
  border-color: rgba(var(--src-rgb), 0.15);
}

[class*="source-option--"].active {
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(var(--src-rgb), 0.12), var(--glass-highlight);
}

/* Hover feedback only where a pointer really hovers: a touchscreen keeps
   :hover on the last tapped chip until the next tap elsewhere, so a chip just
   switched off stayed in dark text (and a search tab just switched on showed
   dark text instead of its source colour). The darker hover text is for
   unselected chips only; a selected one keeps its source colour. */
@media (hover: hover) and (pointer: fine) {
  .source-option:hover { transform: translateY(-1px); }
  .source-option:not(.active):hover { color: var(--text); }
  [class*="source-option--"]:hover { border-color: var(--src-color); }
}

/* AI Summary options — `.search-ai-summary-option*` mirrors the feed submenu
   styling so the search-only submenu looks identical. Two class names exist
   only so the JS click handlers can dispatch to feed vs. search state without
   crosstalk. */
.ai-summary-options,
.search-ai-summary-options {
  display: flex;
  gap: 8px;
}

.ai-summary-option,
.search-ai-summary-option {
  flex: 1 1 auto;
  padding: 12px 8px;
  border: var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.25);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}

.ai-summary-option:hover,
.search-ai-summary-option:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.ai-summary-option--on:hover,
.ai-summary-option--on.active,
.search-ai-summary-option--on:hover,
.search-ai-summary-option--on.active { border-color: var(--accent-pink, #ff2d55); }
.ai-summary-option--off:hover,
.ai-summary-option--off.active,
.search-ai-summary-option--off:hover,
.search-ai-summary-option--off.active { border-color: var(--accent-orange); }

.ai-summary-option--on.active,
.search-ai-summary-option--on.active {
  background: rgba(255, 45, 85, 0.12);
  color: var(--accent-pink, #ff2d55);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 45, 85, 0.12), var(--glass-highlight);
}

.ai-summary-option--off.active,
.search-ai-summary-option--off.active {
  background: rgba(255, 149, 0, 0.12);
  color: var(--accent-orange);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.12), var(--glass-highlight);
}

/* Notifications — master On/Off pair + horizontal multi-select board buttons.
   Reuse the glass option-button look; On=green, Off=muted, boards=green when on. */
.notify-options,
.notify-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.notify-option,
.notify-type-option {
  flex: 1 1 auto;
  padding: 12px 8px;
  border: var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.25);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}

.notify-option:hover,
.notify-type-option:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.notify-option:disabled,
.notify-type-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Master On=green / Off=orange (Off is colored only while it's the active state). */
.notify-option--on:hover,
.notify-option--on.active { border-color: var(--accent-green, #34c759); }
.notify-option--off:hover,
.notify-option--off.active { border-color: var(--accent-orange); }

.notify-option--on.active {
  background: rgba(52, 199, 89, 0.12);
  color: var(--accent-green, #34c759);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.12), var(--glass-highlight);
}

.notify-option--off.active {
  background: rgba(255, 149, 0, 0.12);
  color: var(--accent-orange);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.12), var(--glass-highlight);
}

/* Per-type colors mirror the Time Machine recap cards:
   intraday = light blue (--ac1 60,140,240), daily = beige/gold (--daily-grad),
   weekly = light purple (weekly card #5856d6 / --weekly-grad). */
.notify-type-option--intraday:hover,
.notify-type-option--intraday.active { border-color: rgba(60, 140, 240, 0.34); }
.notify-type-option--daily:hover,
.notify-type-option--daily.active { border-color: rgba(196, 158, 70, 0.5); }
.notify-type-option--weekly:hover,
.notify-type-option--weekly.active { border-color: rgba(120, 105, 210, 0.36); }

.notify-type-option--intraday.active {
  background: rgba(60, 140, 240, 0.12);
  color: rgb(60, 140, 240);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(60, 140, 240, 0.12), var(--glass-highlight);
}
.notify-type-option--daily.active {
  background: rgba(228, 196, 120, 0.18);
  color: #b08a2e;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(214, 175, 90, 0.14), var(--glass-highlight);
}
.notify-type-option--weekly.active {
  background: rgba(120, 105, 210, 0.13);
  color: #5d57c9;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(120, 105, 210, 0.12), var(--glass-highlight);
}
/* WSB = green (tendies / gains), distinct from the blue/gold/purple recap set. */
.notify-type-option--wsb:hover,
.notify-type-option--wsb.active { border-color: rgba(40, 174, 122, 0.42); }
.notify-type-option--wsb.active {
  background: rgba(40, 174, 122, 0.13);
  color: #1f9466;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(40, 174, 122, 0.12), var(--glass-highlight);
}

/* Dark mode: lift the beige/gold daily + green WSB text for contrast on dark cards. */
:root[data-theme="dark"] .notify-type-option--daily.active { color: #d8b765; }
:root[data-theme="dark"] .notify-type-option--wsb.active { color: #3bd492; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .notify-type-option--daily.active { color: #d8b765; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .notify-type-option--wsb.active { color: #3bd492; }
}

.notify-hint {
  margin: 10px 0 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* The notify submenu follows a hint/toggle (not a button row like the live
   submenu), so drop the shared negative top margin that pulled it up and
   overlapped the hint. Teal left strip + label — distinct from the green master
   above and the pink first type button below. */
.settings-detail-submenu--notify {
  margin-top: 6px;
}
.settings-detail-submenu--notify::before {
  background: var(--accent-teal, #5ac8fa);
}
.settings-detail-submenu .settings-section--detail-boards .settings-group-label {
  color: var(--accent-teal, #5ac8fa);
}

/* Cluster-dedupe submenu option — visually identical to ai-summary-option
   but its own class so the JS click handler doesn't crosstalk. */
.cluster-dedupe-options {
  display: flex;
  gap: 8px;
}
.cluster-dedupe-option {
  flex: 1 1 auto;
  padding: 12px 8px;
  border: var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.25);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}
.cluster-dedupe-option:hover { color: var(--text); transform: translateY(-1px); }
.cluster-dedupe-option--on:hover,
.cluster-dedupe-option--on.active { border-color: var(--accent-purple, #5856d6); }
.cluster-dedupe-option--off:hover,
.cluster-dedupe-option--off.active { border-color: var(--accent-orange); }
.cluster-dedupe-option--on.active {
  background: rgba(88, 86, 214, 0.14);
  color: var(--accent-purple, #5856d6);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(88, 86, 214, 0.14), var(--glass-highlight);
}
.cluster-dedupe-option--off.active {
  background: rgba(255, 149, 0, 0.12);
  color: var(--accent-orange);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.12), var(--glass-highlight);
}

/* Recency submenu — "All Articles" (orange, default) vs "Live Thread Only"
   (red, focused). Mirrors the cluster-dedupe pill style. */
.recency-options {
  display: flex;
  gap: 8px;
}
.recency-option {
  flex: 1 1 auto;
  padding: 12px 8px;
  border: var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.25);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}
.recency-option:hover { color: var(--text); transform: translateY(-1px); }
.recency-option--all:hover,
.recency-option--all.active { border-color: var(--accent-orange); }
.recency-option--live:hover,
.recency-option--live.active { border-color: var(--accent-red); }
.recency-option--all.active {
  background: rgba(255, 149, 0, 0.12);
  color: var(--accent-orange);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.12), var(--glass-highlight);
}
.recency-option--live.active {
  background: rgba(255, 59, 48, 0.12);
  color: var(--accent-red);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.12), var(--glass-highlight);
}

/* Cross-source aggregation bar — a row of N+1 equal-width pill buttons
   under the card title. Leftmost ("新闻聚合") collapses any open peer panel;
   each remaining button expands its outlet's article inline below.
   Styling mirrors .ai-summary-badge (icon + label, gradient pill) but
   tinted to each source's brand color via a CSS custom property. */
/* Cluster bar layout: leftmost "新闻聚合" is auto-width (compact label, AI-
   badge style) and stays put; the peer tabs follow at a fixed
   --cluster-peer-min — room for the longest outlet name ("Reuters") with its
   icon — so they line up from card to card, on one row that scrolls sideways
   when it doesn't fit (no wrapping; scrollbar hidden like the pinned bar's).
   (Splitting the row into one column per other outlet squeezed "Reuters" out
   of its pill once the registry reached seven outlets.) */
.live-cluster-bar {
  --cluster-peer-min: 96px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 8px;
}
.live-cluster-tab--agg {
  flex: none;
}
.live-cluster-peers {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: inherit;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* room for a pill's 1px hover lift inside the scroll box */
  padding: 2px 0;
  margin: -2px 0;
}
.live-cluster-peers::-webkit-scrollbar { display: none; }
.live-cluster-peers > .live-cluster-tab--src {
  flex: 0 0 var(--cluster-peer-min);
}

.live-cluster-tab {
  /* Default theme — each variant below overrides --c (R, G, B). */
  --c: 88, 86, 214;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  /* One line of text + the source pills' padding + border, so the "新闻聚合"
     badge (thinner padding, taller icon) matches the pills' height. */
  min-height: calc(1.2em + 14px);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "新闻聚合" — compact label badge mirroring the AI summary badge style
   (sparkle icon + multi-stop pastel gradient). Purple/pink/blue palette
   sets it apart from the green/gold AI badge while staying in the same
   "feature flag" visual register. */
.live-cluster-tab--agg {
  /* Roomier than the source pills: the sparkle icon is visually light, so the
     left looks airy while the right (Chinese label hard against the edge) read
     tight. Slightly more right padding + a wider icon-text gap to balance it. */
  padding: 4px 12px 4px 9px;
  gap: 8px;
  border: 1px solid rgba(88, 86, 214, 0.28);
  background: linear-gradient(135deg,
    rgba(255, 122, 245, 0.18),
    rgba(88, 86, 214, 0.16) 55%,
    rgba(0, 122, 255, 0.14)
  );
  color: #5856d6;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(88, 86, 214, 0.12), var(--glass-highlight);
  --c: 88, 86, 214;   /* indigo — neutral cluster-control accent */
}
/* Pointer hover only: a tapped tab would keep it until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .live-cluster-tab--agg:hover {
    border-color: rgba(88, 86, 214, 0.42);
  }
}

/* Peer source buttons — soft outlined pills that fill with the brand color
   (matching the top-right source chip's light tint) when their panel is
   open. Inactive: faint border, brand-color text. Active: ~10% bg + ~15%
   border — identical to .live-card-source--{src}. */
.live-cluster-tab--src {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(var(--c), 0.22);
  color: rgb(var(--c));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
@media (hover: hover) and (pointer: fine) {
  .live-cluster-tab--src:hover {
    transform: translateY(-1px);
    background: rgba(var(--c), 0.06);
    border-color: rgba(var(--c), 0.32);
  }
}
.live-cluster-tab--src.is-active {
  background: rgba(var(--c), 0.10);
  border-color: rgba(var(--c), 0.22);
  color: rgb(var(--c));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.live-cluster-tab-icon {
  flex: 0 0 auto;
  display: block;
}

/* Per-source colors — same palette as the top-right source chips, so users
   learn one color = one outlet. `.live-cluster-tab--<source> { --c }` is
   injected from the server's source registry. */

/* Expanded peer panel — the secondary view. Light tint with soft border so
   it feels like a sibling card embedded in the primary one. Sits between
   the cluster bar and the primary body. */
.live-cluster-panel {
  --c: 88, 86, 214;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--c), 0.14);
  background: rgba(var(--c), 0.025);
  animation: clusterPanelIn 0.22s ease-out;
}

/* .live-cluster-panel--<source> { --c } is injected from the source registry. */

@keyframes clusterPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.live-cluster-panel-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}
.live-cluster-panel-source {
  /* Inherits .live-card-source--{src} chip styling */
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}
.live-cluster-panel-time {
  color: var(--text-secondary);
  font-family: var(--font);
}
/* Title + body match the primary card's typography so the secondary view
   reads identical to a regular card (serif title 17/600, serif body 15). */
.live-cluster-panel-title {
  font-family: Georgia, 'Noto Serif SC', 'NotoSerifSC-Local', 'Songti SC', '宋体-简', '宋体', 'STSongti-SC-Regular', STSong, SimSun, NSimSun, 'Source Han Serif SC', 'Noto Serif CJK SC', 'Times New Roman', serif;
  font-size: var(--read-title-size);
  font-weight: 600;
  color: #1c1c1e;
  line-height: 1.4;
  margin-bottom: 8px;
}
.live-cluster-panel-title a { color: inherit; text-decoration: none; }
.live-cluster-panel-title a:hover { text-decoration: underline; }
.live-cluster-panel-body {
  font-family: Georgia, 'Noto Serif SC', 'NotoSerifSC-Local', 'Songti SC', '宋体-简', '宋体', 'STSongti-SC-Regular', STSong, SimSun, NSimSun, 'Source Han Serif SC', 'Noto Serif CJK SC', 'Times New Roman', serif;
  font-size: var(--read-body-size);
  line-height: var(--read-line-height);
  color: #2b2921;
}
.live-cluster-panel-body p { margin: 0 0 var(--read-para-gap); }
.live-cluster-panel-body p:last-child { margin-bottom: 0; }
.live-cluster-panel-body h1,
.live-cluster-panel-body h2,
.live-cluster-panel-body h3,
.live-cluster-panel-body h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
}
.live-cluster-panel-body strong { font-weight: 700; }

/* Mobile: tighter padding, smaller label */
@media (max-width: 640px) {
  .live-cluster-bar {
    --cluster-peer-min: 80px;
    gap: 4px;
    margin: 4px 0 8px;
  }
  .live-cluster-tab {
    padding: 5px 6px;
    min-height: calc(1.2em + 12px);
    font-size: 11px;
    gap: 4px;
  }
  /* Roomier "新闻聚合" pill on mobile too — must come AFTER the generic
     .live-cluster-tab rule above (equal specificity, source order wins) or the
     6px side padding would clobber it. */
  .live-cluster-tab--agg {
    padding: 4px 10px 4px 8px;
    gap: 6px;
  }
  .live-cluster-tab-icon { width: 12px; height: 12px; }
  .live-cluster-panel { padding: 10px 12px; }
}
/* Phones: drop the icon so more outlet names fit on a row. */
@media (max-width: 480px) {
  .live-cluster-bar { --cluster-peer-min: 68px; }
  .live-cluster-tab--src .live-cluster-tab-icon { display: none; }
}

/* News Filter options — shared by feed `.filter-option*` (data-filter) and
   search `.search-filter-option*` (data-search-filter); the two state stores
   are independent (see app.js marketOnly vs searchMarketOnly). */
.filter-options,
.search-filter-options {
  display: flex;
  gap: 8px;
}

.filter-option,
.search-filter-option {
  flex: 1 1 auto;
  padding: 12px 8px;
  border: var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.25);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}

.filter-option:hover,
.search-filter-option:hover {
  color: var(--text);
  transform: translateY(-1px);
}
.filter-option[data-filter="market"]:hover,
.search-filter-option[data-search-filter="market"]:hover { border-color: var(--accent-green); }
.filter-option[data-filter="all"]:hover,
.search-filter-option[data-search-filter="all"]:hover { border-color: var(--accent-purple); }

.filter-option[data-filter="market"].active,
.search-filter-option[data-search-filter="market"].active {
  border-color: var(--accent-green);
  background: rgba(52, 199, 89, 0.12);
  color: var(--accent-green);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.12), var(--glass-highlight);
}

.filter-option[data-filter="all"].active,
.search-filter-option[data-search-filter="all"].active {
  border-color: var(--accent-purple);
  background: rgba(175, 82, 222, 0.12);
  color: var(--accent-purple);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(175, 82, 222, 0.12), var(--glass-highlight);
}

/* About section */
.settings-about {
  border-radius: 16px;
  overflow: hidden;
  border: var(--glass-border);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: var(--glass-edge), var(--glass-highlight);
}

.about-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  padding-left: 28px;
  border-bottom: 1px solid var(--separator);
  position: relative;
}

.about-row::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary);
}

.about-row--green::before { background: var(--accent-green); }
.about-row--orange::before { background: var(--accent-orange); }
.about-row--purple::before { background: var(--accent-purple); }
.about-row--cyan::before { background: #06b6d4; }
.about-row--blue::before { background: var(--accent-teal); }

.about-row:last-child {
  border-bottom: none;
}

.about-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.about-value {
  font-size: 15px;
  color: var(--text-secondary);
}

.about-copy {
  cursor: pointer;
  user-select: all;
  transition: color 0.15s ease;
}
.about-copy:hover { color: var(--text); }
.about-copy--flash { color: var(--accent-green); user-select: none; }

/* ─── Content ──────────────────────────────────────────────────────────────── */

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ─── Meta Card ────────────────────────────────────────────────────────────── */

.meta-card {
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--card-radius);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 6px 24px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 16px -6px rgba(255, 255, 255, 0.3);
  padding: 20px;
  margin-top: 24px;
  margin-bottom: 20px;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 12px -4px rgba(255, 255, 255, 0.25);
}

.meta-item--purple { background: rgba(175, 82, 222, 0.06); border-color: rgba(175, 82, 222, 0.12); }
.meta-item--blue { background: rgba(0, 122, 255, 0.06); border-color: rgba(0, 122, 255, 0.12); }
.meta-item--green { background: rgba(52, 199, 89, 0.06); border-color: rgba(52, 199, 89, 0.12); }
.meta-item--teal { background: rgba(90, 200, 250, 0.06); border-color: rgba(90, 200, 250, 0.12); }
.meta-item--red { background: rgba(255, 59, 48, 0.06); border-color: rgba(255, 59, 48, 0.12); }
.meta-item--orange { background: rgba(255, 149, 0, 0.06); border-color: rgba(255, 149, 0, 0.12); }

.meta-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.meta-item--purple .meta-value { color: var(--accent-purple); }
.meta-item--blue .meta-value { color: var(--accent); }
.meta-item--green .meta-value { color: var(--accent-green); }
.meta-item--teal .meta-value { color: var(--accent-teal); }
.meta-item--red .meta-value { color: var(--accent-red); }
.meta-item--orange .meta-value { color: var(--accent-orange); }

.meta-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* ─── WSB History Navigation ──────────────────────────────────────────────── */

.wsb-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--card-radius);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 12px -5px rgba(255, 255, 255, 0.25);
}

.wsb-nav-btn--arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 122, 255, 0.15);
  border-radius: 14px;
  background: rgba(0, 122, 255, 0.06);
  color: var(--accent);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.wsb-nav-btn--arrow:hover:not(:disabled) {
  background: rgba(0, 122, 255, 0.12);
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.wsb-nav-btn--arrow:active:not(:disabled) {
  transform: translateY(0);
}

.wsb-nav-btn--arrow:disabled {
  opacity: 0.3;
  cursor: default;
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
}

.wsb-nav-arrow {
  font-size: 28px;
  line-height: 1;
}

.wsb-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wsb-nav-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
}

.wsb-nav-runs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.wsb-run-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.wsb-run-btn:hover {
  background: rgba(0, 122, 255, 0.08);
  border-color: rgba(0, 122, 255, 0.15);
  color: var(--accent);
}

.wsb-run-btn.active {
  background: rgba(0, 122, 255, 0.12);
  border-color: rgba(0, 122, 255, 0.25);
  color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(0, 122, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ─── Analysis Card ────────────────────────────────────────────────────────── */

.analysis-card {
  background: rgba(255, 255, 255, 0.35);
  border-radius: var(--card-radius);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 8px 40px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 20px -8px rgba(255, 255, 255, 0.3);
  padding: 32px;
  overflow-x: auto;
}

/* ─── Markdown Rendering ───────────────────────────────────────────────────── */

/* h1: 主标题 "WallStreetBets 每日分析报告" */
.analysis-card h1 {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 4px;
  text-align: center;
  background: linear-gradient(135deg, #ff3b30 0%, #ff9500 16%, #ffcc00 32%, #34c759 50%, #5ac8fa 68%, #007aff 84%, #af52de 100%);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-position: 0% 50%;
  animation: gradient-shift 6s ease-in-out infinite;
}

/* h1 后紧跟的 h3 是日期副标题，特殊处理（覆盖 h3 的玻璃样式） */
.analysis-card h1 + h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 0;
  margin-bottom: 8px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* h2: 章节标题 — 彩色液态玻璃胶囊 */
.analysis-card h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-top: 12px;
  margin-bottom: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  background: rgba(0, 122, 255, 0.06);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 16px -6px rgba(255, 255, 255, 0.3);
}

.analysis-card h2:nth-of-type(1) { background: rgba(var(--ac1), 0.07); border-color: rgba(var(--ac1), 0.12); }
.analysis-card h2:nth-of-type(2) { background: rgba(var(--ac2), 0.07); border-color: rgba(var(--ac2), 0.12); }
.analysis-card h2:nth-of-type(3) { background: rgba(var(--ac3), 0.07); border-color: rgba(var(--ac3), 0.12); }
.analysis-card h2:nth-of-type(4) { background: rgba(var(--ac4), 0.07); border-color: rgba(var(--ac4), 0.12); }
.analysis-card h2:nth-of-type(5) { background: rgba(var(--ac5), 0.07); border-color: rgba(var(--ac5), 0.12); }
.analysis-card h2:nth-of-type(6) { background: rgba(var(--ac6), 0.07); border-color: rgba(var(--ac6), 0.12); }
.analysis-card h2:nth-of-type(7) { background: rgba(var(--ac1), 0.07); border-color: rgba(var(--ac1), 0.12); }

.analysis-card h2:first-of-type {
  margin-top: 20px;
}

/* h3: 子标题 — 轻量玻璃效果 */
.analysis-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-top: 24px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.02);
  margin-bottom: 12px;
  border-bottom: none;
}

/* h4: 更细的子标题 */
.analysis-card h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-top: 20px;
  margin-bottom: 10px;
}

.analysis-card p {
  font-size: var(--read-body-size);
  line-height: var(--read-line-height);
  color: var(--text);
  margin: 0 0 var(--read-para-gap);
}

.analysis-card ul, .analysis-card ol {
  padding-left: 24px;
  margin: 4px 0 8px;
}

.analysis-card li {
  font-size: var(--read-body-size);
  line-height: var(--read-line-height);
  margin-bottom: 2px;
  color: var(--text);
}

.analysis-card strong {
  font-weight: 600;
  color: var(--text);
}

.analysis-card em {
  font-style: italic;
}

#analysis-content a {
  color: var(--wsb-analysis-link);
  text-decoration: none;
}

#analysis-content a:visited {
  color: var(--wsb-analysis-link);
}

#analysis-content a:hover {
  color: var(--wsb-analysis-link);
  text-decoration: none;
}

.analysis-card blockquote {
  border: none;
  border-left: 3px solid var(--accent);
  padding: 8px 16px;
  margin: 10px 0;
  background: none;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  font-style: italic;
  color: var(--text-secondary);
  box-shadow: none;
}

.analysis-card code {
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Cascadia Code', monospace;
  font-size: 13px;
  background: rgba(0, 122, 255, 0.08);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--accent);
}

.analysis-card pre {
  background: #1c1c1e;
  color: #f5f5f7;
  padding: 16px 20px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.5;
}

.analysis-card pre code {
  background: none;
  padding: 0;
  color: inherit;
  border-radius: 0;
}

/* ─── Table ────────────────────────────────────────────────────────────────── */

.analysis-card table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0 24px;
  font-size: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 16px -6px rgba(255, 255, 255, 0.25);
}

.analysis-card thead th {
  background: rgba(0, 122, 255, 0.05);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  color: var(--text);
  border-bottom: 1px solid var(--separator);
  white-space: nowrap;
}

/* Only shrink first column for 2-column tables */
.analysis-card table:has(thead th:nth-child(2):last-child) td:first-child,
.analysis-card table:has(thead th:nth-child(2):last-child) th:first-child {
  width: 25%;
}

:root[data-theme="dark"] .analysis-card thead th {
  background: rgba(0, 122, 255, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card thead th {
    background: rgba(0, 122, 255, 0.12);
  }
}

.analysis-card tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--separator);
  color: var(--text);
}

.analysis-card tbody tr:last-child td {
  border-bottom: none;
}

.analysis-card tbody tr:hover {
  background: rgba(0, 122, 255, 0.03);
}

/* ─── Sources Section ─────────────────────────────────────────────────────── */

.sources-section {
  margin-top: 36px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  border: var(--glass-border);
  box-shadow: var(--glass-edge), var(--glass-highlight);
}

.sources-section h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-top: 0;
  margin-bottom: 12px;
}

.sources-section ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

.sources-section li {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 4px;
  padding-left: 16px;
  position: relative;
}

.sources-section li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--text-secondary);
  font-weight: 600;
}

/* WSB sources: numbered list (1. 2. 3.) in place of the › bullet. Scoped to the
   WSB tab so the Trump analysis (#tab-truth) keeps its own bullet style. */
#tab-wsb .sources-section ul { counter-reset: wsb-src; }
#tab-wsb .sources-section li { counter-increment: wsb-src; padding-left: 24px; }
#tab-wsb .sources-section li::before {
  content: counter(wsb-src) ".";
  font-variant-numeric: tabular-nums;
}

.sources-section a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.sources-section a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ─── Horizontal Rule ──────────────────────────────────────────────────────── */

/* Hide all hr by default */
.analysis-card hr {
  border: none;
  height: 0;
  background: none;
  margin: 0;
}

/* Only show hr between subtitle and first section */
.analysis-card h1 + h3 + hr {
  height: 1px;
  background: var(--separator);
  margin: 12px 0 8px;
}

/* ─── Language Toggle ─────────────────────────────────────────────────────── */

.lang-options {
  display: flex;
  gap: 8px;
}

.lang-option {
  flex: 1;
  padding: 12px 0;
  border: var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.25);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}

.lang-option:hover {
  color: var(--text);
  transform: translateY(-1px);
}
.lang-option[data-lang="en"]:hover { border-color: rgba(0, 122, 255, 0.3); }
.lang-option[data-lang="zh"]:hover { border-color: rgba(90, 200, 250, 0.3); }

.lang-option[data-lang="en"].active {
  border-color: rgba(0, 122, 255, 0.3);
  background: rgba(0, 122, 255, 0.12);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.12), var(--glass-highlight);
}

.lang-option[data-lang="zh"].active {
  border-color: rgba(90, 200, 250, 0.3);
  background: rgba(90, 200, 250, 0.12);
  color: var(--accent-teal);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(90, 200, 250, 0.12), var(--glass-highlight);
}

/* ─── Live View Style Toggle ─────────────────────────────────────────────── */

.live-view-options {
  display: flex;
  gap: 8px;
}

.live-view-option {
  flex: 1 1 auto;
  padding: 12px 8px;
  border: var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.25);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}

.live-view-option:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.live-view-option--feed:hover,
.live-view-option--feed.active {
  border-color: rgba(0, 122, 255, 0.3);
}

.live-view-option--timemachine:hover,
.live-view-option--timemachine.active {
  border-color: rgba(52, 199, 89, 0.34);
}

.live-view-option--search:hover,
.live-view-option--search.active {
  border-color: rgba(88, 86, 214, 0.34);
}

.live-view-option--feed.active {
  background: rgba(0, 122, 255, 0.12);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.12), var(--glass-highlight);
}

.live-view-option.live-view-option--timemachine.active {
  background: linear-gradient(135deg,
    rgba(255, 204, 0, 0.16),
    rgba(52, 199, 89, 0.12)
  );
  color: #3f8f2f;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.12), var(--glass-highlight);
}

.live-view-option.live-view-option--search.active {
  background: rgba(88, 86, 214, 0.12);
  color: #5856d6;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(88, 86, 214, 0.12), var(--glass-highlight);
}

/* ─── Time Machine Intro Prompt ──────────────────────────────────────────── */

body.tm-intro-open {
  overflow: hidden;
}

.tm-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(22, 24, 28, 0.22);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.tm-intro-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.tm-intro-panel {
  width: min(560px, 100%);
  border-radius: 28px;
  padding: 26px;
  background: rgba(250, 249, 245, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--text);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}

.tm-intro-overlay.visible .tm-intro-panel {
  transform: translateY(0) scale(1);
}

.tm-intro-art {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  margin-bottom: 18px;
  padding: 0 4px;
}

.tm-intro-art-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(52, 199, 89, 0.34);
  border: 2px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 3px 10px rgba(52, 199, 89, 0.16);
}

.tm-intro-art-dot.is-active {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.9), rgba(52, 199, 89, 0.9));
  box-shadow: 0 8px 22px rgba(52, 199, 89, 0.24);
}

.tm-intro-art-line {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 204, 0, 0.38), rgba(52, 199, 89, 0.38));
}

.tm-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.18), rgba(52, 199, 89, 0.14));
  border: 1px solid rgba(52, 199, 89, 0.22);
  color: #3f8f2f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tm-intro-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
}

.tm-intro-body {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.tm-intro-points {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.tm-intro-point {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
}

.tm-intro-point span {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(52, 199, 89, 0.14);
  border: 1px solid rgba(52, 199, 89, 0.28);
  position: relative;
}

.tm-intro-point span::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 5px;
  height: 8px;
  border: solid #2f8c3a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tm-intro-point p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

.tm-intro-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.tm-intro-btn {
  flex: 1 1 0;
  min-height: 46px;
  border: var(--glass-border);
  border-radius: 16px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tm-intro-btn:hover {
  transform: translateY(-1px);
}

.tm-intro-btn:focus-visible {
  outline: 3px solid rgba(52, 199, 89, 0.26);
  outline-offset: 2px;
}

.tm-intro-btn-primary {
  color: #245c18;
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.34), rgba(52, 199, 89, 0.26));
  border-color: rgba(52, 199, 89, 0.32);
  box-shadow: 0 8px 22px rgba(52, 199, 89, 0.14), var(--glass-highlight);
}

.tm-intro-btn-secondary {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: var(--glass-highlight);
}

@media (max-width: 768px) {
  .tm-intro-overlay {
    align-items: flex-end;
    padding: 16px 10px max(12px, env(safe-area-inset-bottom)) 10px;
  }

  .tm-intro-panel {
    width: 100%;
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    border-radius: 26px;
    padding: 22px 18px 18px;
  }

  .tm-intro-art {
    height: 34px;
    margin-bottom: 14px;
    gap: 8px;
  }

  .tm-intro-title {
    font-size: 24px;
  }

  .tm-intro-body {
    font-size: 15px;
  }

  .tm-intro-points {
    gap: 8px;
    margin-top: 16px;
  }

  .tm-intro-point p {
    font-size: 13.5px;
  }

  .tm-intro-actions {
    flex-direction: column;
    margin-top: 20px;
  }

  .tm-intro-btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ─── Live Timeline ───────────────────────────────────────────────────────── */

.live-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ─── Coverage (SSR landing from /coverage/:source/:slug) ─────────────────── */

.coverage-banner {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--pinned-bar-bg, rgba(0, 122, 255, 0.08));
  border: 1px solid var(--pinned-bar-border, rgba(0, 122, 255, 0.25));
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.coverage-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.coverage-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.coverage-banner-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #6e6e73);
}
.coverage-banner-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary, #1d1d1f);
}
.coverage-banner-source {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #6e6e73);
}
.coverage-banner-clear {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.12);
  color: var(--text-primary, #1d1d1f);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.coverage-banner-clear:hover {
  background: rgba(127, 127, 127, 0.2);
}
@media (prefers-color-scheme: dark) {
  .coverage-banner-clear {
    color: #f5f5f7;
  }
}
.coverage-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.coverage-timeline .live-card {
  margin-bottom: 10px;
}

/* ─── SSR ticker news list (hidden once JS stocks view hydrates) ─────────── */
.ticker-news-ssr-wrap:empty { display: none; }
.ticker-news-ssr-wrap.hydrated { display: none; }
.ticker-ssr-news {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(127, 127, 127, 0.06);
  border: 1px solid rgba(127, 127, 127, 0.18);
}
.ticker-ssr-heading { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.ticker-ssr-intro { font-size: 13px; color: var(--text-secondary, #6e6e73); margin: 0 0 10px; }
.ticker-ssr-list { list-style: decimal; padding-left: 1.3em; margin: 0; }
.ticker-ssr-item { padding: 4px 0; font-size: 13px; line-height: 1.45; }
/* Accent links so the pre-hydration / no-JS render matches the hydrated one. */
.ticker-ssr-item a { color: var(--accent); text-decoration: none; }
.ticker-ssr-item a:hover { text-decoration: underline; }
.ticker-ssr-meta { display: block; color: var(--text-secondary, #6e6e73); font-size: 11px; }
.ticker-ssr-meta-inline { color: var(--text-secondary, #6e6e73); }
.ticker-ssr-dir { list-style: none; padding-left: 0; }
.ticker-ssr-links { font-size: 13px; margin: 10px 0 0; line-height: 1.6; }
.ticker-ssr-news .ticker-ssr-intro a, .ticker-ssr-links a { color: var(--accent); text-decoration: none; }
.ticker-ssr-news .ticker-ssr-intro a:hover, .ticker-ssr-links a:hover { text-decoration: underline; }
.options-ssr-subheading { font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
.options-ssr-answer { font-size: 14px; line-height: 1.55; margin: 6px 0 10px; }
.options-ssr-table { border-collapse: collapse; font-size: 13px; margin: 0 0 6px; width: 100%; max-width: 520px; }
.options-ssr-table th, .options-ssr-table td { padding: 4px 8px 4px 0; text-align: left; border-bottom: 1px solid rgba(127, 127, 127, 0.15); }
.options-ssr-table th { font-weight: 600; color: var(--text-secondary, #6e6e73); white-space: nowrap; }
.options-ssr-insights { font-size: 13px; line-height: 1.5; margin: 0; padding-left: 1.2em; }
.options-ssr-insights li { margin: 0 0 6px; }

/* ─── SSR WSB analysis (hidden once rich analysis-card loads) ─────────────── */
.wsb-ssr-wrap:empty { display: none; }
.wsb-ssr-wrap.hydrated { display: none; }
/* /api/ unreachable (crawlers, offline): show the server-rendered snapshots
   again rather than an empty view — see noteApiReachable in app.js. */
.ssr-fallback .wsb-ssr-wrap.hydrated:not(:empty),
.ssr-fallback .ticker-news-ssr-wrap.hydrated:not(:empty) { display: block; }
.wsb-ssr-article {
  margin: 0 0 16px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(127, 127, 127, 0.05);
  border: 1px solid rgba(127, 127, 127, 0.15);
}
.wsb-ssr-heading { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.wsb-ssr-meta { font-size: 12px; color: var(--text-secondary, #6e6e73); margin: 0 0 6px; }
.wsb-ssr-tickers { font-size: 13px; margin: 0 0 12px; }
.wsb-ssr-tickers a { color: var(--accent); text-decoration: none; margin-right: 4px; }
.wsb-ssr-tickers a:hover { text-decoration: underline; }
.wsb-ssr-markdown { font-size: 14px; line-height: 1.6; }
.wsb-ssr-markdown h1, .wsb-ssr-markdown h2, .wsb-ssr-markdown h3 { margin: 1.2em 0 .5em; font-weight: 700; }
.wsb-ssr-markdown h1 { font-size: 17px; }
.wsb-ssr-markdown h2 { font-size: 15px; }
.wsb-ssr-markdown h3 { font-size: 14px; }
.wsb-ssr-markdown p { margin: .6em 0; }
.wsb-ssr-markdown ul, .wsb-ssr-markdown ol { margin: .6em 0; padding-left: 1.5em; }
.wsb-ssr-markdown a { color: var(--accent); text-decoration: none; }
.wsb-ssr-markdown a:hover { text-decoration: underline; }
.wsb-ssr-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(127, 127, 127, 0.15); font-size: 12px; color: var(--text-secondary, #6e6e73); }

#tab-live .content-inner {
  margin-top: 0; /* toggle (.live-subview-toggle) now occupies the top slot */
}

.live-date-group > .live-card:last-child {
  margin-bottom: 0;
}

.live-date-label {
  display: flex;
  justify-content: center;
  margin: 18px 0 10px;
  padding: 0;
  width: 100%;
  line-height: 1;
}

.live-date-label-text {
  display: inline-block;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: #ff9500;
  text-transform: none;
  text-shadow: 0 0 14px rgba(255, 204, 0, 0.14);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .live-date-label-text {
    background: linear-gradient(135deg, #ff3b30 0%, #ff9500 16%, #ffcc00 32%, #34c759 50%, #5ac8fa 68%, #007aff 84%, #af52de 100%);
    background-size: 220% 220%;
    background-repeat: no-repeat;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    background-position: 0% 50%;
    animation: gradient-shift 6s ease-in-out infinite;
  }
}

.live-date-group + .live-date-group > .live-date-label {
  margin-top: 32px;
}

.live-date-group:first-child .live-date-label {
  margin-top: 2px;
}

.live-card {
  background: #faf6ed;
  border-radius: var(--card-radius);
  border: 1px solid #f0e9d6;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.03),
    0 6px 20px rgba(120, 90, 30, 0.05);
  padding: 20px 24px;
  margin-bottom: 12px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Colored glass tint via ::before overlay — fixed size so expand doesn't darken */
.live-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background-size: 100% 260px;
  background-repeat: no-repeat;
}

.live-card > * {
  position: relative;
  z-index: 1;
}

.live-card--blue::before,
.live-card--teal::before,
.live-card--green::before,
.live-card--purple::before,
.live-card--cyan::before,
.live-card--indigo::before { background-image: none; }

@keyframes live-card-fadein {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.live-card-fadein {
  animation: live-card-fadein 0.4s ease-out both;
}

/* ─── Pinned Posts Bar ─────────────────────────────────────────────────── */

.pinned-bar-container {
  margin-bottom: 6px;
}

.pinned-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  background: rgba(255, 59, 48, 0.1);
  color: var(--accent-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
  border: 1.5px solid rgba(255, 59, 48, 0.2);
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.pinned-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-red);
  animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4); }
  50% { opacity: 0.4; box-shadow: 0 0 0 4px rgba(255, 59, 48, 0); }
}

.pinned-tabs-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pinned-tabs-scroll > :first-child { margin-left: auto; }
.pinned-tabs-scroll > :last-child { margin-right: auto; }

.pinned-tabs-scroll::-webkit-scrollbar { display: none; }

.pinned-tab-src {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.55;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.pinned-tab {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* Default: glass with shuffled colorful borders (nth-child offset by 1 for LIVE badge) */
.pinned-tab:nth-child(2) { border: 1.5px solid rgba(var(--ac1), 0.35); color: rgb(var(--ac1)); }
.pinned-tab:nth-child(3) { border: 1.5px solid rgba(var(--ac2), 0.35); color: rgb(var(--ac2)); }
.pinned-tab:nth-child(4) { border: 1.5px solid rgba(var(--ac3), 0.35); color: rgb(var(--ac3)); }
.pinned-tab:nth-child(5) { border: 1.5px solid rgba(var(--ac4), 0.35); color: rgb(var(--ac4)); }
.pinned-tab:nth-child(6) { border: 1.5px solid rgba(var(--ac5), 0.35); color: rgb(var(--ac5)); }
.pinned-tab:nth-child(n+7) { border: 1.5px solid rgba(var(--ac6), 0.35); color: rgb(var(--ac6)); }

.pinned-tab:hover { transform: translateY(-1px); }

/* Active: glass filled background with glow (offset by 1 for LIVE badge) */
.pinned-tab:nth-child(2).active { background: rgba(var(--ac1), 0.18); color: rgb(var(--ac1)); font-weight: 600; box-shadow: 0 2px 12px rgba(var(--ac1), 0.15), inset 0 1px 0 rgba(255,255,255,0.4); }
.pinned-tab:nth-child(3).active { background: rgba(var(--ac2), 0.18); color: rgb(var(--ac2)); font-weight: 600; box-shadow: 0 2px 12px rgba(var(--ac2), 0.15), inset 0 1px 0 rgba(255,255,255,0.4); }
.pinned-tab:nth-child(4).active { background: rgba(var(--ac3), 0.18); color: rgb(var(--ac3)); font-weight: 600; box-shadow: 0 2px 12px rgba(var(--ac3), 0.15), inset 0 1px 0 rgba(255,255,255,0.4); }
.pinned-tab:nth-child(5).active { background: rgba(var(--ac4), 0.18); color: rgb(var(--ac4)); font-weight: 600; box-shadow: 0 2px 12px rgba(var(--ac4), 0.15), inset 0 1px 0 rgba(255,255,255,0.4); }
.pinned-tab:nth-child(6).active { background: rgba(var(--ac5), 0.18); color: rgb(var(--ac5)); font-weight: 600; box-shadow: 0 2px 12px rgba(var(--ac5), 0.15), inset 0 1px 0 rgba(255,255,255,0.4); }
.pinned-tab:nth-child(n+7).active { background: rgba(var(--ac6), 0.18); color: rgb(var(--ac6)); font-weight: 600; box-shadow: 0 2px 12px rgba(var(--ac6), 0.15), inset 0 1px 0 rgba(255,255,255,0.4); }

.pinned-panel {
  background: rgba(255, 255, 255, 0.32);
  border-radius: var(--card-radius);
  border: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 6px 24px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 16px -6px rgba(255, 255, 255, 0.2);
  padding: 20px 24px;
  margin-bottom: 14px;
  animation: pinned-slide-down 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.pinned-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: none;
}

.pinned-panel > * {
  position: relative;
  z-index: 1;
}

/* Pinned panel colors match tab nth-child via --ac variables */
.pinned-panel--ac1::before { background: linear-gradient(135deg, rgba(var(--ac1), 0.06) 0%, transparent 45%); }
.pinned-panel--ac2::before { background: linear-gradient(135deg, rgba(var(--ac2), 0.06) 0%, transparent 45%); }
.pinned-panel--ac3::before { background: linear-gradient(135deg, rgba(var(--ac3), 0.06) 0%, transparent 45%); }
.pinned-panel--ac4::before { background: linear-gradient(135deg, rgba(var(--ac4), 0.06) 0%, transparent 45%); }
.pinned-panel--ac5::before { background: linear-gradient(135deg, rgba(var(--ac5), 0.06) 0%, transparent 45%); }
.pinned-panel--ac6::before { background: linear-gradient(135deg, rgba(var(--ac6), 0.06) 0%, transparent 45%); }

@keyframes pinned-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.pinned-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.pinned-panel-title {
  font-size: var(--read-title-size);
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
}

.pinned-panel-title a { color: inherit; text-decoration: none; }
.pinned-panel-title a:hover { color: var(--accent); }

.pinned-panel-source {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
[class*="pinned-panel-source--"] { background: linear-gradient(135deg, rgba(var(--src-rgb),0.12), rgba(var(--src-rgb2),0.12)); color: var(--src-color); }

.pinned-panel-body {
  font-size: var(--read-body-size);
  line-height: var(--read-line-height);
  color: var(--text);
  margin-bottom: 4px;
}

.pinned-panel-body p { margin: 0 0 var(--read-para-gap); }
.pinned-panel-body p:last-child { margin-bottom: 0; }

.pinned-panel-body a {
  color: var(--accent);
  text-decoration: none;
}
.pinned-panel-body a:hover {
  text-decoration: underline;
}

.pinned-panel-body ul, .pinned-panel-body ol {
  padding-left: 20px;
  margin: 4px 0 8px;
}

.pinned-panel-body li {
  margin-bottom: 2px;
}

.pinned-panel-body strong {
  font-weight: 600;
}

.pinned-panel-body h1, .pinned-panel-body h2, .pinned-panel-body h3, .pinned-panel-body h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
}

.pinned-panel-time {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.pinned-panel-time .live-card-time-ago {
  margin-left: 10px;
}

.pinned-panel .live-card-tickers {
  margin-top: 10px;
}

.pinned-panel-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
}

@media (max-width: 600px) {
  .pinned-tab { padding: 8px 14px; font-size: 13px; }
}

.live-card:hover,
#live-timeline .live-card.is-viewing-card {
  /* No scale() — sub-pixel scale blurs text on Safari (bitmap-scaled
     compositing layer). translateY + shadow + z-index give enough emphasis. */
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 14px 36px rgba(120, 90, 30, 0.14),
    0 2px 6px rgba(120, 90, 30, 0.08);
  z-index: 2;
}

.live-card:active {
  transform: translateY(0);
}

.live-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.live-card:has(.ai-summary-badge) .live-card-header {
  margin-bottom: 6px;
}

.live-card-title {
  font-family: Georgia, 'Noto Serif SC', 'NotoSerifSC-Local', 'Songti SC', '宋体-简', '宋体', 'STSongti-SC-Regular', STSong, SimSun, NSimSun, 'Source Han Serif SC', 'Noto Serif CJK SC', 'Times New Roman', serif;
  font-size: var(--read-title-size);
  font-weight: 600;
  color: #1c1c1e;
  line-height: 1.4;
  flex: 1;
}

.live-card-title a {
  color: inherit;
  text-decoration: none;
}

.live-card-title a:hover {
  color: var(--accent);
}

.live-card-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

[class*="live-card-source--"] {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 700;
  border-width: 1px;
  border-style: solid;
  border-radius: 8px;
}

.live-card-body {
  font-family: Georgia, 'Noto Serif SC', 'NotoSerifSC-Local', 'Songti SC', '宋体-简', '宋体', 'STSongti-SC-Regular', STSong, SimSun, NSimSun, 'Source Han Serif SC', 'Noto Serif CJK SC', 'Times New Roman', serif;
  font-size: var(--read-body-size);
  line-height: var(--read-line-height);
  color: #2b2921;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ai-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 2px 10px 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(52, 199, 89, 0.28);
  background: linear-gradient(135deg,
    rgba(255, 204, 0, 0.16),
    rgba(52, 199, 89, 0.12)
  );
  color: #3f8f2f;
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  vertical-align: top;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.12), var(--glass-highlight);
}

/* Clickable variant: the badge toggles the summary to the original article. */
.ai-summary-badge--toggle {
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.ai-summary-badge--toggle:hover {
  filter: brightness(1.04);
  box-shadow: 0 3px 12px rgba(52, 199, 89, 0.22), var(--glass-highlight);
}
.ai-summary-badge--toggle:active {
  filter: brightness(0.97);
}

.ai-summary-badge-icon {
  flex: 0 0 auto;
  display: block;
}

.live-card-body p {
  margin: 0 0 var(--read-para-gap);
}

.live-card-body p:last-child {
  margin-bottom: 0;
}

.live-card-body h1, .live-card-body h2, .live-card-body h3, .live-card-body h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
}

.live-card-body strong {
  font-weight: 600;
}

/* Inline links in prose — the canonical rule for every container that renders
   source/AI HTML. Add new body containers to this list rather than restating
   the accent color locally, or they silently fall back to the browser's
   dark-blue-underlined default (the cluster panel and Trump analysis both did).
   `.pinned-panel-body` / `.dd-section-body` keep their own copies because they
   live in self-contained blocks far from here. */
.live-card-body a,
.live-cluster-panel-body a,
.truth-analysis-body a {
  color: var(--accent);
  text-decoration: none;
}
.live-card-body a:hover,
.live-cluster-panel-body a:hover,
.truth-analysis-body a:hover {
  text-decoration: underline;
}

.live-card-body ul, .live-card-body ol,
.live-cluster-panel-body ul, .live-cluster-panel-body ol {
  padding-left: 20px;
  margin: 4px 0 8px;
}

.live-card-body li,
.live-cluster-panel-body li {
  margin-bottom: 2px;
}

.live-card-body.expanded {
  display: block;
  -webkit-line-clamp: unset;
}

.live-card-body--ai-summary {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.live-card-expand {
  display: block;
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  color: #7aafd4;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 0 2px;
  font-family: var(--font);
  margin-bottom: 0;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.live-card:has(.live-card-body.expanded) {
  cursor: pointer;
}

.live-card-expand:hover {
  text-decoration: underline;
}

.live-card-tickers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.ticker-signal-label {
  font-family: Georgia, 'Noto Serif SC', 'NotoSerifSC-Local', 'Songti SC', '宋体-简', '宋体', 'STSongti-SC-Regular', STSong, SimSun, NSimSun, 'Source Han Serif SC', 'Noto Serif CJK SC', 'Times New Roman', serif;
  font-size: 12px;
  font-style: italic;
  color: #8a7f63;
  opacity: 1;
  margin-right: 2px;
}

.ticker-signal {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  letter-spacing: 0.3px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ticker-signal--up {
  color: #1f7a38;
  background: rgba(52, 199, 89, 0.14);
  border: 1px solid rgba(52, 199, 89, 0.25);
  border-radius: 10px;
}

.ticker-signal--down {
  color: #c4261e;
  background: rgba(255, 59, 48, 0.14);
  border: 1px solid rgba(255, 59, 48, 0.25);
  border-radius: 10px;
}

.ticker-arrow {
  font-size: 10px;
}

.live-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #6b6352;
  padding-top: 10px;
  margin-top: 12px;
  border-top: 1px solid;
  border-image: repeating-linear-gradient(90deg, #b8a872 0, #b8a872 3px, transparent 3px, transparent 6px) 1;
}

.live-card-time {
  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1c1c1e;
}

.live-card-time-ago {
  font-family: Georgia, 'Noto Serif SC', 'NotoSerifSC-Local', 'Songti SC', '宋体-简', '宋体', 'STSongti-SC-Regular', STSong, SimSun, NSimSun, 'Source Han Serif SC', 'Noto Serif CJK SC', 'Times New Roman', serif;
  font-size: 12px;
  font-style: italic;
  color: #c4261e;
  opacity: 0.85;
  white-space: nowrap;
}

.live-card-coverage {
  font-family: Georgia, 'Noto Serif SC', 'NotoSerifSC-Local', 'Songti SC', '宋体-简', '宋体', 'STSongti-SC-Regular', STSong, SimSun, NSimSun, 'Source Han Serif SC', 'Noto Serif CJK SC', 'Times New Roman', serif;
  font-style: italic;
  font-size: 12px;
  color: #6b6352;
  opacity: 1;
  flex: 1;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Floating scroll shortcut for the WSB daily summary — mobile only.
   app.js gates visibility and direction (up = back to top, Android only;
   down = jump to bottom, Android + iOS). */
.wsb-scrolltop {
  position: fixed;
  right: 16px;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Colorful (default) style — light, fresh pastel glass: soft sky-blue →
     lilac → blush, low saturation + lots of translucency, with a soft indigo
     chevron (white would wash out on the pale fill). */
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(135deg,
    rgba(150, 200, 255, 0.42),
    rgba(200, 185, 250, 0.40) 52%,
    rgba(255, 196, 224, 0.42)
  );
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  color: #6b63c9;
  box-shadow: 0 6px 16px rgba(120, 110, 200, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.wsb-scrolltop[hidden] { display: none; }
.wsb-scrolltop.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Same disc, flipped chevron: "jump to bottom" mode. */
.wsb-scrolltop svg { transition: transform 0.2s ease; }
.wsb-scrolltop.is-down svg { transform: rotate(180deg); }

/* Newsprint style — warm tan/gold disc with dark-ink chevron to match the
   sepia card aesthetic (no colorful gradient). */
:root[data-style="newsprint"] .wsb-scrolltop {
  background: rgba(184, 168, 114, 0.55);
  border: 1px solid rgba(120, 90, 30, 0.3);
  color: #2b2921;
  box-shadow: 0 6px 16px rgba(120, 90, 30, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.live-load-more {
  display: block;
  width: min(480px, 100%);
  margin: 16px auto 0;
  padding: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  background: rgba(175, 82, 222, 0.06);
  color: var(--accent-purple);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow:
    0 0 0 1px rgba(175, 82, 222, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 12px -5px rgba(255, 255, 255, 0.2);
}

.live-load-more:hover {
  background: rgba(175, 82, 222, 0.12);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(175, 82, 222, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 14px -5px rgba(255, 255, 255, 0.25);
}

.live-load-more:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

/* 无限滚动：把 *-load-more 按钮变为被动的自动加载指示器（spinner） */
.infinite-auto {
  pointer-events: none;
  color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  position: relative;
  min-height: 44px;
}
.infinite-auto::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2.5px solid rgba(128, 128, 128, 0.25);
  border-top-color: rgba(128, 128, 128, 0.85);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ─── Market Ticker ───────────────────────────────────────────────────────── */

.live-date-label:has(.market-ticker) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
}

.live-date-label:has(.market-ticker) .live-date-label-text {
  flex-shrink: 0;
}

.market-ticker {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.market-ticker::-webkit-scrollbar { display: none; }
.market-ticker:empty { display: none; }

.market-ticker-item {
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.3;
}

.ticker-up {
  background: rgba(52, 199, 89, 0.1);
  color: var(--accent-green);
  border: 1px solid rgba(52, 199, 89, 0.1);
}

.ticker-down {
  background: rgba(255, 59, 48, 0.1);
  color: var(--accent-red);
  border: 1px solid rgba(255, 59, 48, 0.1);
}

/* --card / --card-border / --text-muted are defined inside .tm-live-view's
   scope. The Detailed view's ticker bar lives outside that scope, so we
   include literal fallbacks — without them var() returns an invalid value
   and the whole shorthand (e.g. `border: 1px solid …`) falls back to its
   initial value (border-width: 0), making skeleton chips 2px shorter than
   the populated chips with .ticker-up / .ticker-down borders. */
.market-ticker-item.is-skeleton {
  background: var(--card, rgba(255, 255, 255, 0.7));
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  color: var(--text-muted, #8e8e93);
  opacity: 0.65;
}

.ticker-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
}

.ticker-change {
  margin-left: 2px;
}

/* ─── Loading ──────────────────────────────────────────────────────────────── */

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 16px;
}

.loading p {
  font-size: 15px;
  color: var(--text-secondary);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--separator);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Error ────────────────────────────────────────────────────────────────── */

.error-msg {
  text-align: center;
  padding: 60px 20px;
  color: var(--accent-red);
  font-size: 15px;
}

/* ─── Search ───────────────────────────────────────────────────────────────── */

.search-container {
  padding: 0;
}

.search-input-wrap,
.stock-search-wrap {
  position: relative;
  margin-bottom: 16px;
  padding: 0 14px;
}

#live-search-view .search-input-wrap {
  margin-top: 10px;
}

.stock-search-wrap {
  padding: 0;
  margin-bottom: 8px;
}

.search-input-icon {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

.stock-search-wrap .search-input-icon {
  left: 14px;
}

.search-input,
.stock-search-input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border: var(--glass-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.35);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  outline: none;
  transition: all 0.25s;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}

/* News search box — "Search Ticker" toggle sits inside the input on the left,
   tucked between the magnifying glass and the placeholder text. */
#live-search-view .search-input { padding-left: 163px; }

.search-ticker-btn {
  position: absolute;
  left: 54px;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
  z-index: 2;
}
.search-ticker-btn:hover { background: rgba(0, 0, 0, 0.08); color: var(--text); }
.search-ticker-btn:active { transform: translateY(-50%) scale(0.96); }
.search-ticker-btn.active {
  background: rgba(0, 122, 255, 0.14);
  border-color: rgba(0, 122, 255, 0.45);
  color: var(--accent, #007aff);
}
.search-ticker-btn.active:hover { background: rgba(0, 122, 255, 0.2); }

:root[data-theme="dark"] .search-ticker-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
:root[data-theme="dark"] .search-ticker-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .search-ticker-btn.active {
  background: rgba(99, 175, 255, 0.22);
  border-color: rgba(99, 175, 255, 0.55);
  color: #6cb1ff;
}

/* Make sure the autocomplete dropdown has the same horizontal inset as the
   wrap's padding on mobile (wrap = padding: 0 14px → dropdown spans content
   area; tighten the visual gutter a touch on narrow screens). */
@media (max-width: 720px) {
  #live-search-view .search-input { padding-left: 150px; }
  .search-ticker-btn { left: 54px; padding: 0 9px; font-size: 12px; }
}

.search-input:focus,
.stock-search-input:focus {
  border-color: rgba(0, 122, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1), var(--glass-highlight);
}

.search-input::placeholder,
.stock-search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.search-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 14px;
  margin-bottom: 14px;
  gap: 10px;
}

/* Source tabs wrap onto a second row on narrow screens; the sort select keeps
   its width and stays beside the first row. */
.search-source-tabs {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
}

.search-source-tab {
  padding: 6px 14px;
  min-width: 62px;
  text-align: center;
  height: 32px;
  box-sizing: border-box;
  border: var(--glass-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
  -webkit-tap-highlight-color: transparent;
}

/* Pointer hover only, unselected tabs only (see the settings source chips). */
@media (hover: hover) and (pointer: fine) {
  .search-source-tab:not(.active):hover {
    color: var(--text);
  }
}

[class*="search-source-tab--"].active {
  box-shadow: 0 2px 8px rgba(var(--src-rgb), 0.1), inset 0 1px 0 rgba(255,255,255,0.3);
}

.search-sort-select {
  padding: 6px 14px;
  height: 32px;
  box-sizing: border-box;
  min-width: 115px;
  border: var(--glass-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.3);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  text-align-last: center;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 26px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
  flex-shrink: 0;
}

.search-sort-select:focus {
  border-color: rgba(0, 122, 255, 0.4);
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 0; /* 卡片间距靠 .stock-card 自身 margin-bottom，与 feed 的 .live-timeline 一致 */
}

.search-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 15px;
}

.search-hint {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  font-size: 15px;
  opacity: 0.7;
}

/* ─── PWA Install Banner ───────────────────────────────────────────────────── */

.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: rgba(255, 120, 40, 0.8);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255,255,255,0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  border-radius: 20px 20px 0 0;
}

.pwa-install-banner--ios {
  flex-wrap: wrap;
}

.pwa-install-banner.visible {
  transform: translateY(0);
}

.pwa-install-text {
  flex: 1;
  min-width: 0;
}

.pwa-install-hint {
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pwa-install-hint svg {
  vertical-align: middle;
  display: inline;
  flex-shrink: 0;
}

.pwa-install-btn {
  flex-shrink: 0;
  padding: 8px 20px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.pwa-install-btn:active {
  background: rgba(255, 255, 255, 0.4);
}

.pwa-install-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  html {
    /* Stay transparent on mobile too (see root html rule) — an opaque value
       here is what Safari 26 was painting as the solid status-bar strip. */
    background: transparent;
  }

  .tab-bar {
    /* Floating capsule */
    top: 8px;
    left: 10px;
    right: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(237, 236, 226, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
      0 0 0 0.5px rgba(0, 0, 0, 0.04),
      0 6px 24px rgba(0, 0, 0, 0.08),
      0 2px 6px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 0 14px -5px rgba(255, 255, 255, 0.25);
    position: fixed !important;
    /* Smooth transition for compact/expand */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .tab-bar.tab-bar--compact {
    transform: scale(0.72) translateY(-8px);
  }

  .tab-bar-inner {
    padding: 6px 10px;
    gap: 6px;
    height: 54px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tab-bar-inner::-webkit-scrollbar { display: none; }

  .tabs {
    overflow-x: visible;
    padding: 0;
    margin: 0;
    gap: 2px;
  }
  /* Extra space after last tab so active (expanded) Settings button isn't clipped */
  .tabs::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
  }

  .app-title {
    padding: 6px 14px;
    font-size: 19px;
    flex-shrink: 0;
  }

  .tab {
    padding: 6px 12px;
    font-size: 15px;
    border-radius: 999px;
    color: #6e6e73;
  }

  .tab .tab-label {
    font-size: 14px;
  }

  .tab svg {
    width: 15px;
    height: 15px;
  }

  body {
    padding-top: 65px;
  }

  .content {
    padding: 10px 0 40px;
  }

  .search-sort-select {
    min-width: 0;
    padding: 6px 24px 6px 12px;
    background-position: right 8px center;
  }

  .meta-card {
    border-radius: 18px;
    margin: 16px 8px 12px;
    padding: 16px;
  }

  .wsb-nav {
    border-radius: 18px;
    margin: 0 8px 12px;
    padding: 12px 14px;
    gap: 10px;
  }

  .wsb-nav-btn--arrow {
    width: 44px;
    height: 44px;
  }

  .analysis-card {
    padding: 20px 14px;
    border-radius: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  #tab-wsb #wsb-daily-view .analysis-card {
    padding: 0 10px 20px;
  }

  .settings-card {
    border-radius: 18px;
    margin: 0 8px;
    padding: 20px 16px;
    max-width: none;
  }

  .settings-detail-submenu {
    margin-left: 8px;
    padding-left: 14px;
  }

  .analysis-card h1 {
    font-size: 25px;
  }

  .analysis-card h2 {
    font-size: 22px;
    margin-top: 12px;
    margin-bottom: 10px;
  }

  .analysis-card h3 {
    font-size: 18px;
  }

  .meta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .analysis-card table {
    table-layout: fixed;
    font-size: 13px;
  }

  /* 2-column tables: auto layout, narrow first col */
  .analysis-card table:has(thead th:nth-child(2):last-child) {
    table-layout: auto;
  }
  .analysis-card table:has(thead th:nth-child(2):last-child) td:first-child,
  .analysis-card table:has(thead th:nth-child(2):last-child) th:first-child {
    width: 25%;
    white-space: nowrap;
  }

  /* 3+ column tables: fixed layout with specific widths */
  .analysis-card table:has(thead th:nth-child(3)) thead th:nth-child(1),
  .analysis-card table:has(thead th:nth-child(3)) tbody td:nth-child(1) { width: 80px; }
  .analysis-card table:has(thead th:nth-child(3)) thead th:nth-child(2),
  .analysis-card table:has(thead th:nth-child(3)) tbody td:nth-child(2) { width: 58px; }
  .analysis-card table:has(thead th:nth-child(3)) thead th:nth-child(3),
  .analysis-card table:has(thead th:nth-child(3)) tbody td:nth-child(3) { width: 68px; }

  .analysis-card thead th,
  .analysis-card tbody td {
    padding: 8px 6px;
    vertical-align: top;
  }

  /* English tables on mobile: English labels (e.g. "Representative Tickers",
     "Bull/Bear Sentiment") are much wider than the Chinese originals, so the
     fixed 80/58/68px columns above cause overlap. Give them natural widths
     and let the wrapper scroll horizontally when the table overflows. */
  html[lang="en"] .analysis-card .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0 24px;
    border-radius: 18px;
  }
  html[lang="en"] .analysis-card .table-scroll > table {
    table-layout: auto;
    margin: 0;
    border-radius: 0;
  }
  html[lang="en"] .analysis-card .table-scroll table:has(thead th:nth-child(3)) thead th,
  html[lang="en"] .analysis-card .table-scroll table:has(thead th:nth-child(3)) tbody td {
    width: auto;
  }
  html[lang="en"] .analysis-card .table-scroll thead th {
    white-space: nowrap;
    padding: 10px 14px;
  }
  html[lang="en"] .analysis-card .table-scroll tbody td {
    padding: 10px 14px;
  }
  /* The last (text-heavy) column can wrap so scroll width stays reasonable. */
  html[lang="en"] .analysis-card .table-scroll table:has(thead th:nth-child(4)) tbody td:last-child,
  html[lang="en"] .analysis-card .table-scroll table:has(thead th:nth-child(5)) tbody td:last-child {
    white-space: normal;
    min-width: 180px;
  }

  .live-card {
    border-radius: 18px;
    margin-left: 8px;
    margin-right: 8px;
    padding: 16px;
    cursor: pointer;
  }

  .live-card-title,
  .live-cluster-panel-title {
    font-size: var(--read-title-size);
  }
  .live-date-label {
    margin-left: 12px;
    margin-top: 16px;
  }

  #tab-live .content-inner {
    margin-top: 0;
  }

  .live-date-label-text {
    font-size: 22px;
  }

  .pinned-tabs-scroll {
    padding-left: 8px;
    padding-right: 8px;
  }

  .pinned-panel {
    padding: 16px;
    margin-left: 8px;
    margin-right: 8px;
  }

  .live-load-more {
    width: auto;
    margin-left: 8px;
    margin-right: 8px;
  }


  .live-date-label:has(.market-ticker) {
    justify-content: flex-start;
    margin-right: 8px;
    margin-top: 1px;
    margin-bottom: 6px;
    gap: 36px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .live-date-label:has(.market-ticker)::-webkit-scrollbar { display: none; }

  .market-ticker {
    overflow-x: visible;
  }

  .marquee-track {
    display: flex;
    align-items: center;
    gap: 36px;
    width: max-content;
  }

  .search-container {
    padding: 0;
  }

  .search-input {
    font-size: 16px;
    padding: 12px 12px 12px 40px;
  }

  .stock-card {
    margin-left: 14px;
    margin-right: 14px;
  }

  .stock-ticker-bar {
    margin: 0 14px;
  }

  .stock-view-toggle {
    margin-left: 14px;
    margin-right: 14px;
  }

  .stock-search-wrap {
    padding: 0 14px;
  }

  .stock-search-wrap .search-input-icon {
    left: 28px;
  }
}

/* ─── Stocks Tab ──────────────────────────────────────────────────────── */

.stock-ticker-bar {
  position: relative;
  padding: 12px 0;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.stock-marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  will-change: transform;
}
.stock-marquee-set {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 8px; /* gap between original and clone */
}

.stock-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  border: var(--glass-border);
  background: rgba(255, 255, 255, 0.3);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}
.stock-chip:hover { border-color: rgba(0, 122, 255, 0.3); color: var(--accent); }
.stock-chip.active {
  background: rgba(0, 122, 255, 0.85);
  color: #fff;
  border-color: rgba(0, 122, 255, 0.6);
  box-shadow: 0 2px 12px rgba(0, 122, 255, 0.2), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Autocomplete dropdown */
.stock-ac-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
  border-radius: 16px;
  border: var(--glass-border);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), var(--glass-highlight);
}

/* The two news/stock search wraps add 14px horizontal padding so the input
   looks insets from its container edges. The dropdown needs to mirror that
   so it aligns with the input — without this it sticks out 14px on each side
   and on mobile (where the wrap spans the viewport) touches the screen edge. */
.search-input-wrap .stock-ac-dropdown,
.stock-search-wrap .stock-ac-dropdown {
  left: 14px;
  right: 14px;
}
.stock-ac-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
}
.stock-ac-item:hover,
.stock-ac-item.active {
  background: var(--hover-bg, rgba(128,128,128,0.1));
}
.stock-ac-item + .stock-ac-item {
  border-top: 1px solid var(--separator);
}
.stock-ac-ticker {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  min-width: 60px;
  font-family: var(--font);
}
.stock-ac-name {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font);
}

.stock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 12px;
}
.stock-ticker-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.stock-count {
  font-size: 13px;
  color: var(--text-secondary);
}

.stock-card {
  display: block;
  position: relative;
  padding: 14px 16px 15px;
  margin-bottom: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.035),
    0 6px 24px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 18px -7px rgba(255, 255, 255, 0.3);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stock-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 30%);
  opacity: 0.6;
}
.stock-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03),
    0 12px 40px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 20px -7px rgba(255, 255, 255, 0.35);
}

.stock-load-more {
  display: block;
  width: min(480px, 100%);
  margin: 16px auto 0;
  padding: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  background: rgba(0, 122, 255, 0.06);
  color: var(--accent);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow:
    0 0 0 1px rgba(0, 122, 255, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 12px -5px rgba(255, 255, 255, 0.2);
}

.stock-load-more:hover {
  background: rgba(0, 122, 255, 0.12);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(0, 122, 255, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 14px -5px rgba(255, 255, 255, 0.25);
}

.stock-load-more:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}
@media (max-width: 768px) {
  .stock-load-more {
    width: calc(100% - 28px);
    margin: 16px 14px 0;
  }
}

.stock-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  position: relative;
  z-index: 1;
}
.stock-card-publisher {
  color: var(--accent);
  font-weight: 600;
}
.stock-card-time {
  color: var(--text-secondary);
}
.stock-card-score {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.stock-card-title {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text);
}

:root[data-theme="dark"] .stock-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 14px -6px rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .stock-card:hover {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
:root[data-theme="dark"] .stock-card::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stock-card:hover {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }
}
.stock-score--high { background: #e8f5e9; color: #2e7d32; }
.stock-score--good { background: #e0f7f4; color: #00796b; }
.stock-score--neutral { background: #e8f0fe; color: #2457c5; }
.stock-score--low { background: #fff1d6; color: #9a5a00; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stock-score--high { background: rgba(46,125,50,0.2); color: #81c784; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stock-score--good { background: rgba(0,121,107,0.22); color: #7be0d3; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stock-score--neutral { background: rgba(36,87,197,0.22); color: #9ab6ff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stock-score--low { background: rgba(154,90,0,0.26); color: #ffd38a; }
}
:root[data-theme="dark"] .stock-score--high { background: rgba(46,125,50,0.2); color: #81c784; }
:root[data-theme="dark"] .stock-score--good { background: rgba(0,121,107,0.22); color: #7be0d3; }
:root[data-theme="dark"] .stock-score--neutral { background: rgba(36,87,197,0.22); color: #9ab6ff; }
:root[data-theme="dark"] .stock-score--low { background: rgba(154,90,0,0.26); color: #ffd38a; }

.stock-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}
.stock-error,
.stock-inline-error {
  color: #c62828;
  background: rgba(255, 59, 48, 0.08);
  border: 1px solid rgba(255, 59, 48, 0.22);
}
.stock-error {
  margin: 18px auto;
  max-width: 680px;
  padding: 14px 18px;
  border-radius: 14px;
  text-align: center;
  font-size: 14px;
}
.stock-inline-error {
  margin: 8px 4px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

/* ─── Stock View Toggle (News / Options) ─────────────────────────────────── */
@media (min-width: 769px) {
  #tab-stocks .content-inner,
  #tab-wsb .content-inner {
    margin-top: -12px;
  }
}
/* Reduce bottom padding when options dashboard is visible (desktop only) */
@media (min-width: 801px) {
  .content:has(.sod-grid) {
    padding-bottom: 0;
  }
}
.stock-view-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 2px;
  border-radius: 14px;
  overflow: hidden;
  border: var(--glass-border);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}
/* `.stock-view-btn` shares styles with `.wsb-view-btn` — see the consolidated
   rule below. Keeping the class on the markup so existing JS selectors don't
   break, but the typography/spacing/active styles all come from the unified
   `.wsb-view-btn, .stock-view-btn { ... }` block. */

/* ─── Options Dashboard ─────────────────────────────────────────────────── */

/* Compact top bar (SCHWAB-style) */
.sod-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  flex-wrap: wrap;
  padding: 4px 4px;
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}
.sod-topbar-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sod-topbar-row--bottom {
  margin-left: auto;
}
.sod-ticker-input-wrap {
  position: relative;
  display: inline-block;
}
.sod-ticker-input-wrap .stock-ac-dropdown {
  min-width: 260px;
}
.sod-ticker-input-wrap .stock-ac-item {
  padding: 6px 10px;
  gap: 8px;
}
.sod-ticker-input-wrap .stock-ac-ticker {
  font-size: 12px;
  min-width: 44px;
}
.sod-ticker-input-wrap .stock-ac-name {
  font-size: 11px;
}
.sod-ticker-input {
  width: 100px;
  padding: 5px 10px;
  border-radius: 10px;
  border: var(--glass-border);
  background: rgba(255, 255, 255, 0.35);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}
.sod-ticker-input:focus {
  outline: none;
  border-color: rgba(0, 122, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.12), var(--glass-highlight);
}
.sod-topbar-sep {
  width: 1px;
  height: 22px;
  background: var(--separator);
  flex-shrink: 0;
}
.sod-controls-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.sod-exp-select,
.sod-strikes-select {
  padding: 5px 8px;
  border-radius: 10px;
  border: var(--glass-border);
  background: rgba(255, 255, 255, 0.35);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.sod-exp-select:focus,
.sod-strikes-select:focus {
  outline: none;
  border-color: rgba(0, 122, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.12), var(--glass-highlight);
}
.sod-controls-updated {
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.55;
}
.sod-btn--load,
.sod-btn--refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
  white-space: nowrap;
  height: 30px;
  -webkit-tap-highlight-color: transparent;
}
.sod-btn--load {
  background: rgba(52, 199, 89, 0.85);
  color: #fff;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}
.sod-btn--refresh {
  background: rgba(255, 255, 255, 0.3);
  color: var(--text);
  border: var(--glass-border-subtle);
  box-shadow: var(--glass-edge), var(--glass-highlight);
}
.sod-btn--load:hover,
.sod-btn--refresh:hover {
  filter: brightness(0.92);
}
.sod-btn--loading {
  opacity: 0.5;
  pointer-events: none;
}
.sod-btn--loading svg {
  animation: sod-spin 0.8s linear infinite;
}
@keyframes sod-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sod-btn--news {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 12px;
  border: none;
  background: rgba(90, 200, 250, 0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(90,200,250,0.2), inset 0 1px 0 rgba(255,255,255,0.25);
  -webkit-tap-highlight-color: transparent;
}
.sod-btn--news:hover {
  opacity: 0.8;
}

/* Stats bar — matches SCHWAB reference (lines above and below) */
.sod-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 4px 0;
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
  font-size: 11px;
  flex-shrink: 0;
  overflow-x: auto;
  margin-bottom: 6px;
  scrollbar-width: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
.sod-stats::-webkit-scrollbar { display: none; }
.sod-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.sod-stat-label {
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sod-stat-value {
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
  color: var(--text);
  white-space: nowrap;
}

/* Full-width override when options dashboard is active (desktop only) */
@media (min-width: 801px) {
  .content:has(.tab-content.active .sod-grid) {
    max-width: none;
    padding: 16px 12px 10px;
    height: calc(100dvh - 60px); /* 60px tab bar */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }
  #tab-stocks.active:has(.sod-grid) {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    min-height: 0;
  }
  #tab-stocks.active:has(.sod-grid) .content-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #tab-stocks.active:has(.sod-grid) #stock-results {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
}

/* 2x3 Grid — fills remaining viewport height on desktop */
.sod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  min-height: 0;
}
/* Unified panel order across desktop (left→right, top→bottom) AND mobile (top→
   bottom): Score History sits right under Insights, Option Prices right after Key
   Levels; the last three are Volume, Cumulative GEX, Profit Probability. On desktop
   Score History is pinned to column 1 / row 2 (below Insights) and the rest flow
   around it — 3 columns make a full 3×3. */
#sod-panel-insights  { order: 1; }
#sod-panel-scorehist { order: 2; }
#sod-panel-keylevels { order: 3; }
#sod-panel-prices    { order: 4; }
#sod-panel-dealergex { order: 5; }
#sod-panel-greeks    { order: 6; }
#sod-panel-volume    { order: 7; }
#sod-panel-cumgex    { order: 8; }
#sod-panel-prob      { order: 9; }
/* Desktop/tablet: each row is exactly half the visible grid height, so the
   first two rows always fill the viewport (the original "2×3 fills the screen"
   behavior, scale-invariant). A 7th card spills onto a 3rd row the user reaches
   by scrolling — same cell size as the rows above, with the last 2 cells empty. */
@media (min-width: 801px) {
  .sod-grid {
    flex: 1;
    grid-template-rows: none;
    grid-auto-rows: calc((100% - 10px) / 2);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #sod-panel-scorehist {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Card */
.sod-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--card-shadow), var(--glass-highlight);
  border: var(--glass-border);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Hide scrollbar but allow scrolling */
  scrollbar-width: none;
}
.sod-card::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.sod-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  flex-shrink: 0;
  letter-spacing: -0.2px;
}
/* After-hours / overnight move badge in the Option Prices title — smaller and
   lighter than the title so it reads as a secondary tag. */
.sod-ah-badge {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}
.sod-card-subtitle {
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Chart wrapper */
.sod-chart-wrap {
  flex: 1;
  min-height: 200px;
  position: relative;
}
.sod-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Legend */
.sod-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  margin-bottom: 8px;
  flex-shrink: 0;
  color: var(--text);
}

/* Insights panel */
.sod-insights-label {
  font-size: 13px;
  font-weight: 700;
}
.sod-insights-meter {
  height: 6px;
  border-radius: 3px;
  margin: 12px 0 10px;
  background: linear-gradient(90deg, #FF3B30, #FF9500, #FFCC00, #34C759, #5AC8FA);
  position: relative;
  flex-shrink: 0;
}
/* Marker pill on the meter, showing the score (−100…+100) at its position. */
.sod-insights-dot {
  min-width: 32px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #fff;
  border: 2px solid var(--text);
  color: #1c1c1e;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  position: absolute;
  top: -7px;
  transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: left 0.4s ease;
}
.sod-insight-item {
  padding: 6px 10px;
  border-radius: 12px;
  margin-bottom: 5px;
  background: var(--card-bg);
  border: var(--glass-border) !important;
  border-left: none !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), var(--glass-highlight);
}
.sod-insight-type {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.sod-insight-title {
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 1px;
}
.sod-insight-text {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Key Levels panel */
.sod-key-levels-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.sod-key-card {
  flex: 1;
  min-width: 70px;
  padding: 5px 8px;
  border-radius: 12px;
  text-align: center;
  color: #fff;
  font-size: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255,255,255,0.2);
}
.sod-key-card-label {
  opacity: 0.85;
  font-size: 8px;
  font-weight: 500;
}
.sod-key-card-value {
  font-size: 14px;
  font-weight: 800;
}
.sod-key-card-sub {
  font-size: 8px;
  opacity: 0.7;
}
.sod-price-row {
  display: flex;
  gap: 12px;
  justify-content: space-around;
  margin-bottom: 6px;
  text-align: center;
  flex-shrink: 0;
}
.sod-price-label {
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 600;
}
.sod-price-value {
  font-size: 14px;
  font-weight: 800;
}

/* Greek tabs */
.sod-greek-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.sod-greek-tab {
  padding: 6px 14px;
  border-radius: 10px;
  border: var(--glass-border-subtle);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-secondary);
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.sod-greek-tab.active {
  background: rgba(0, 122, 255, 0.85);
  color: #fff;
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Score history: range tabs + legend share one row (wraps on narrow cards) */
.sod-scorehist-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.sod-scorehist-bar .sod-legend {
  margin-bottom: 0;
}
.sod-range-tabs {
  display: flex;
  gap: 3px;
}
.sod-range-tab {
  padding: 5px 12px;
  border-radius: 10px;
  border: var(--glass-border-subtle);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-secondary);
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.sod-range-tab.active {
  background: rgba(0, 122, 255, 0.85);
  color: #fff;
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}
.sod-swatch-line {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
/* Centered status text over a chart (loading / collecting / error) */
.sod-chart-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  pointer-events: none;
}
.sod-chart-msg:empty {
  display: none;
}


/* Dark mode for options dashboard */
:root[data-theme="dark"] .sod-card {
  background: rgba(44, 44, 46, 0.6);
}
:root[data-theme="dark"] .sod-btn--news {
  background: rgba(90, 200, 250, 0.85);
  color: #fff;
}
:root[data-theme="dark"] .sod-stats {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sod-card {
    background: rgba(44, 44, 46, 0.6);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sod-btn--news {
    background: rgba(90, 200, 250, 0.85);
    color: #fff;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sod-stats {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
  }
}

/* Responsive: tablet → 2 columns */
@media (max-width: 1200px) {
  /* 2 columns; row height still comes from the half-viewport grid-auto-rows
     rule above (min-width:801px also matches here), so 8 cells flow into 4
     rows the user can scroll through. */
  .sod-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: mobile → 1 column */
@media (max-width: 800px) {
  .content:has(.sod-grid) {
    padding-bottom: 10px;
  }
  .sod-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
    overflow-y: auto;
    padding: 0 10px 10px;
  }
  .sod-chart-wrap {
    min-height: 220px;
  }
  .sod-chart-wrap canvas {
    touch-action: pan-y;
  }
  .sod-card {
    overflow-y: visible;
    overflow-x: hidden;
  }
  .sod-key-levels-row {
    flex-wrap: wrap;
  }
  .sod-key-card {
    min-width: calc(50% - 6px);
  }
  /* viewport meta has maximum-scale=1 so smaller font is safe */
  .sod-ticker-input {
    font-size: 16px;
  }
  /* Mobile topbar: 3 rows (ticker+btns | exp+strikes | updated+news) */
  .sod-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 10px;
  }
  .sod-topbar-sep {
    display: none;
  }
  .sod-topbar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .sod-topbar-row--bottom {
    justify-content: space-between;
    margin-left: 0;
  }
  .sod-btn--news {
    margin-left: 0;
  }
  /* Compact controls on mobile */
  .sod-controls-label {
    font-size: 12px;
  }
  .sod-controls-updated {
    font-size: 13px;
  }
  .sod-exp-select,
  .sod-strikes-select {
    padding: 3px 5px;
    border-radius: 6px;
    border-width: 1px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    height: 28px;
    font-size: 13px;
  }
  .sod-exp-select {
    min-width: 130px;
  }
  .sod-strikes-select {
    max-width: 60px;
  }
  /* Stats bar: compact on mobile, one row horizontal scroll */
  .sod-stats {
    margin-left: 10px;
    margin-right: 10px;
    gap: 6px;
  }
  .sod-stat {
    padding: 2px 6px;
  }
  .sod-stat-label {
    font-size: 9px;
    letter-spacing: 0.3px;
  }
  .sod-stat-value {
    font-size: 14px;
  }
}

/* ─── Dark Mode Glass Overrides ───────────────────────────────────────────── */

:root[data-theme="dark"] .tab:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}
:root[data-theme="dark"] .tab.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f5f5f7;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 12px -4px rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .tab.active::before {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
}
/* Dark glass cards — subtle translucent panels, not bright gray */
:root[data-theme="dark"] .live-card,
:root[data-theme="dark"] .pinned-panel {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 14px -6px rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .live-card-title { color: #f2efe6; }
:root[data-theme="dark"] .live-card-body { color: #d9d4c6; }
:root[data-theme="dark"] .live-card-meta { color: #a69e88; }
:root[data-theme="dark"] .live-card-time { color: #f2efe6; }
:root[data-theme="dark"] .live-card-time-ago { color: #ff6b60; opacity: 0.9; }
:root[data-theme="dark"] .live-card-coverage { color: #a69e88; }
:root[data-theme="dark"] .ticker-signal-label { color: #a69e88; }
:root[data-theme="dark"] .live-card:hover,
:root[data-theme="dark"] #live-timeline .live-card.is-viewing-card {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
:root[data-theme="dark"] .analysis-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 6px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 16px -6px rgba(255, 255, 255, 0.03);
}
:root[data-theme="dark"] .analysis-card h2 {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Colored tints for dark mode h2 */
:root[data-theme="dark"] .analysis-card h2:nth-of-type(1) { background: rgba(var(--ac1), 0.08); border-color: rgba(var(--ac1), 0.15); }
:root[data-theme="dark"] .analysis-card h2:nth-of-type(2) { background: rgba(var(--ac2), 0.08); border-color: rgba(var(--ac2), 0.15); }
:root[data-theme="dark"] .analysis-card h2:nth-of-type(3) { background: rgba(var(--ac3), 0.08); border-color: rgba(var(--ac3), 0.15); }
:root[data-theme="dark"] .analysis-card h2:nth-of-type(4) { background: rgba(var(--ac4), 0.08); border-color: rgba(var(--ac4), 0.15); }
:root[data-theme="dark"] .analysis-card h2:nth-of-type(5) { background: rgba(var(--ac5), 0.08); border-color: rgba(var(--ac5), 0.15); }
:root[data-theme="dark"] .analysis-card h2:nth-of-type(6) { background: rgba(var(--ac6), 0.08); border-color: rgba(var(--ac6), 0.15); }
:root[data-theme="dark"] .analysis-card h2:nth-of-type(7) { background: rgba(var(--ac1), 0.08); border-color: rgba(var(--ac1), 0.15); }
:root[data-theme="dark"] .analysis-card h3 {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Colored meta items in dark mode */
:root[data-theme="dark"] .meta-item--purple { background: rgba(175, 82, 222, 0.1); border-color: rgba(175, 82, 222, 0.18); }
:root[data-theme="dark"] .meta-item--blue { background: rgba(0, 122, 255, 0.1); border-color: rgba(0, 122, 255, 0.18); }
:root[data-theme="dark"] .meta-item--green { background: rgba(52, 199, 89, 0.1); border-color: rgba(52, 199, 89, 0.18); }
:root[data-theme="dark"] .meta-item--teal { background: rgba(90, 200, 250, 0.1); border-color: rgba(90, 200, 250, 0.18); }
:root[data-theme="dark"] .meta-item--red { background: rgba(255, 59, 48, 0.1); border-color: rgba(255, 59, 48, 0.18); }
:root[data-theme="dark"] .meta-item--orange { background: rgba(255, 149, 0, 0.1); border-color: rgba(255, 149, 0, 0.18); }
:root[data-theme="dark"] .analysis-card table {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .analysis-card blockquote {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  border-left-color: var(--accent);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .wsb-nav {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .wsb-nav-btn--arrow {
  background: rgba(0, 122, 255, 0.1);
  border-color: rgba(0, 122, 255, 0.18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .wsb-nav-btn--arrow:hover:not(:disabled) {
  background: rgba(0, 122, 255, 0.18);
}
:root[data-theme="dark"] .wsb-nav-btn--arrow:disabled {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .wsb-run-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .wsb-run-btn:hover {
  background: rgba(0, 122, 255, 0.12);
  border-color: rgba(0, 122, 255, 0.2);
}
:root[data-theme="dark"] .wsb-run-btn.active {
  background: rgba(0, 122, 255, 0.18);
  border-color: rgba(0, 122, 255, 0.3);
}
:root[data-theme="dark"] .meta-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .meta-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .settings-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .settings-about {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .about-row {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
:root[data-theme="dark"] .live-card-meta {
  border-top-color: rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .sources-section {
  background: rgba(255, 255, 255, 0.03);
  border: var(--glass-border);
  border-color: rgba(255, 255, 255, 0.06);
}
/* Dark glass buttons */
:root[data-theme="dark"] .theme-option,
:root[data-theme="dark"] .style-option,
:root[data-theme="dark"] .source-option:not(.active),
:root[data-theme="dark"] .ai-summary-option,
:root[data-theme="dark"] .search-ai-summary-option,
:root[data-theme="dark"] .cluster-dedupe-option,
:root[data-theme="dark"] .recency-option,
:root[data-theme="dark"] .filter-option,
:root[data-theme="dark"] .search-filter-option,
:root[data-theme="dark"] .lang-option,
:root[data-theme="dark"] .live-view-option,
:root[data-theme="dark"] .truth-filter-option {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .ai-summary-badge {
  background: linear-gradient(135deg,
    rgba(255, 204, 0, 0.18),
    rgba(52, 199, 89, 0.16)
  );
  border-color: rgba(52, 199, 89, 0.38);
  color: #7ed957;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .live-view-option.live-view-option--timemachine.active {
  background: linear-gradient(135deg,
    rgba(255, 204, 0, 0.18),
    rgba(52, 199, 89, 0.16)
  );
  color: #7ed957;
  border-color: rgba(52, 199, 89, 0.38);
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .live-view-option.live-view-option--search.active {
  background: rgba(88, 86, 214, 0.22);
  color: #a29bfe;
  border-color: rgba(88, 86, 214, 0.45);
  box-shadow: 0 2px 8px rgba(88, 86, 214, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .tm-intro-overlay {
  background: rgba(0, 0, 0, 0.34);
}
:root[data-theme="dark"] .tm-intro-panel {
  background: rgba(34, 34, 36, 0.86);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42),
    0 8px 24px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .tm-intro-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #c7c7cc;
}
:root[data-theme="dark"] .tm-intro-point span {
  background: rgba(52, 199, 89, 0.16);
  border-color: rgba(52, 199, 89, 0.34);
}
:root[data-theme="dark"] .tm-intro-point span::after {
  border-color: #7ed957;
}
:root[data-theme="dark"] .style-option--newsprint.active {
  background: rgba(212, 201, 159, 0.14);
  border-color: rgba(212, 201, 159, 0.45);
  color: #d4c99f;
  box-shadow: 0 2px 8px rgba(212, 201, 159, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .style-option--colorful.active {
  background: rgba(255, 45, 85, 0.18);
  border-color: rgba(255, 45, 85, 0.55);
  color: #ff6b8a;
  box-shadow: 0 2px 8px rgba(255, 45, 85, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .ai-summary-option--on.active,
:root[data-theme="dark"] .search-ai-summary-option--on.active {
  background: rgba(255, 45, 85, 0.18);
  border-color: rgba(255, 45, 85, 0.55);
  color: #ff6b8a;
  box-shadow: 0 2px 8px rgba(255, 45, 85, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .ai-summary-option--off.active,
:root[data-theme="dark"] .search-ai-summary-option--off.active,
:root[data-theme="dark"] .cluster-dedupe-option--off.active,
:root[data-theme="dark"] .recency-option--all.active {
  background: rgba(255, 149, 0, 0.18);
  border-color: rgba(255, 149, 0, 0.48);
  color: #ffb547;
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .cluster-dedupe-option--on.active {
  background: rgba(88, 86, 214, 0.22);
  border-color: rgba(88, 86, 214, 0.55);
  color: #a29bfe;
  box-shadow: 0 2px 8px rgba(88, 86, 214, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .recency-option--live.active {
  background: rgba(255, 59, 48, 0.20);
  border-color: rgba(255, 59, 48, 0.55);
  color: #ff7a73;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .live-cluster-panel {
  background: rgba(var(--c), 0.06);
  border-color: rgba(var(--c), 0.22);
}
:root[data-theme="dark"] .live-cluster-panel-title { color: #f2efe6; }
:root[data-theme="dark"] .live-cluster-panel-body { color: #d9d4c6; }
:root[data-theme="dark"] .live-cluster-tab--src {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(var(--c), 0.30);
}
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .live-cluster-tab--src:hover {
    background: rgba(var(--c), 0.10);
  }
}
:root[data-theme="dark"] .live-cluster-tab--src.is-active {
  background: rgba(var(--c), 0.18);
  border-color: rgba(var(--c), 0.45);
}
:root[data-theme="dark"] .search-input,
:root[data-theme="dark"] .stock-search-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .search-source-tab:not(.active) {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .search-sort-select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .stock-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .stock-view-toggle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .stock-ac-dropdown {
  background: rgba(28, 28, 30, 0.88);
  border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .pinned-tab {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08) !important;
}
:root[data-theme="dark"] .pinned-live-badge {
  background: rgba(255, 59, 48, 0.12);
  border-color: rgba(255, 59, 48, 0.15);
}
:root[data-theme="dark"] .sod-ticker-input,
:root[data-theme="dark"] .sod-exp-select,
:root[data-theme="dark"] .sod-strikes-select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* Render the native <select> dropdown popup (and its <option>s) in dark so the
     menu isn't light-bg-with-light-text. */
  color-scheme: dark;
}
:root[data-theme="dark"] .sod-insight-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
:root[data-theme="dark"] .live-load-more {
  background: rgba(175, 82, 222, 0.1);
  border-color: rgba(175, 82, 222, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .stock-load-more,
:root[data-theme="dark"] .search-load-more {
  background: rgba(0, 122, 255, 0.1);
  border-color: rgba(0, 122, 255, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .loading-spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tab:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: transparent;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tab.active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f5f5f7;
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.15),
      0 1px 3px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -1px 0 rgba(255, 255, 255, 0.04),
      inset 0 0 12px -4px rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tab.active::before {
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  }
  /* Auto dark — mirror all data-theme=dark card overrides */
  :root:not([data-theme="light"]):not([data-theme="dark"]) .live-card,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pinned-panel {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.07);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 6px 30px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h2 {
    background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h2:nth-of-type(1) { background: rgba(var(--ac1),0.08); border-color: rgba(var(--ac1),0.15); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h2:nth-of-type(2) { background: rgba(var(--ac2),0.08); border-color: rgba(var(--ac2),0.15); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h2:nth-of-type(3) { background: rgba(var(--ac3),0.08); border-color: rgba(var(--ac3),0.15); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h2:nth-of-type(4) { background: rgba(var(--ac4),0.08); border-color: rgba(var(--ac4),0.15); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h2:nth-of-type(5) { background: rgba(var(--ac5),0.08); border-color: rgba(var(--ac5),0.15); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h2:nth-of-type(6) { background: rgba(var(--ac6),0.08); border-color: rgba(var(--ac6),0.15); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h2:nth-of-type(7) { background: rgba(var(--ac1),0.08); border-color: rgba(var(--ac1),0.15); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h3 {
    background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .meta-item--purple { background: rgba(175,82,222,0.1); border-color: rgba(175,82,222,0.18); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .meta-item--blue { background: rgba(0,122,255,0.1); border-color: rgba(0,122,255,0.18); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .meta-item--green { background: rgba(52,199,89,0.1); border-color: rgba(52,199,89,0.18); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .meta-item--teal { background: rgba(90,200,250,0.1); border-color: rgba(90,200,250,0.18); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .meta-item--red { background: rgba(255,59,48,0.1); border-color: rgba(255,59,48,0.18); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .meta-item--orange { background: rgba(255,149,0,0.1); border-color: rgba(255,149,0,0.18); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stock-card {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.07);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stock-card::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card table {
    background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card blockquote {
    background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06);
    border-left-color: var(--accent);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .wsb-nav {
    background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .wsb-nav-btn--arrow {
    background: rgba(0, 122, 255, 0.1); border-color: rgba(0, 122, 255, 0.18);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .wsb-nav-btn--arrow:disabled {
    background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .wsb-run-btn {
    background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .wsb-run-btn.active {
    background: rgba(0, 122, 255, 0.18); border-color: rgba(0, 122, 255, 0.3);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .meta-card {
    background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .meta-item {
    background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .settings-card {
    background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .settings-about {
    background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .about-row { border-bottom-color: rgba(255,255,255,0.05); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .live-card-meta { border-top-color: rgba(255,255,255,0.06); color: #a69e88; }
  /* Auto-dark text colors — mirror [data-theme="dark"] rules so text stays readable
     when user keeps theme=auto and their OS is in dark mode */
  :root:not([data-theme="light"]):not([data-theme="dark"]) .live-card-title { color: #f2efe6; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .live-card-body { color: #d9d4c6; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .live-card-time { color: #f2efe6; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .live-card-time-ago { color: #ff6b60; opacity: 0.9; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .live-card-coverage { color: #a69e88; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ticker-signal-label { color: #a69e88; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sources-section { background: rgba(255,255,255,0.03); border: var(--glass-border); border-color: rgba(255,255,255,0.06); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-option,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .style-option,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .source-option:not(.active),
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ai-summary-option,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .search-ai-summary-option,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .filter-option,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .lang-option,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .live-view-option,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .truth-filter-option,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .search-source-tab:not(.active),
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stock-chip,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stock-view-toggle,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pinned-tab {
    background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ai-summary-badge {
    background: linear-gradient(135deg,
      rgba(255, 204, 0, 0.18),
      rgba(52, 199, 89, 0.16)
    );
    border-color: rgba(52, 199, 89, 0.38);
    color: #7ed957;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ai-summary-option--on.active,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .search-ai-summary-option--on.active {
    background: rgba(255, 45, 85, 0.18);
    border-color: rgba(255, 45, 85, 0.55);
    color: #ff6b8a;
    box-shadow: 0 2px 8px rgba(255, 45, 85, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .live-view-option.live-view-option--timemachine.active {
    background: linear-gradient(135deg,
      rgba(255, 204, 0, 0.18),
      rgba(52, 199, 89, 0.16)
    );
    color: #7ed957;
    border-color: rgba(52, 199, 89, 0.38);
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .live-view-option.live-view-option--search.active {
    background: rgba(88, 86, 214, 0.22);
    color: #a29bfe;
    border-color: rgba(88, 86, 214, 0.45);
    box-shadow: 0 2px 8px rgba(88, 86, 214, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tm-intro-overlay {
    background: rgba(0, 0, 0, 0.34);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tm-intro-panel {
    background: rgba(34, 34, 36, 0.86);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
      0 28px 80px rgba(0, 0, 0, 0.42),
      0 8px 24px rgba(0, 0, 0, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tm-intro-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #c7c7cc;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tm-intro-point span {
    background: rgba(52, 199, 89, 0.16);
    border-color: rgba(52, 199, 89, 0.34);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tm-intro-point span::after {
    border-color: #7ed957;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .search-input,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stock-search-input,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .search-sort-select,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sod-ticker-input,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sod-exp-select,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sod-strikes-select {
    background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sod-insight-item {
    background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .loading-spinner {
    border-color: rgba(255, 255, 255, 0.1); border-top-color: var(--accent);
  }
}

/* Dark mode mobile floating capsule (blur comes from the GPU optimization block) */
@media (max-width: 768px) {
  :root[data-theme="dark"] .tab-bar {
    background: rgba(30, 30, 32, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
      0 6px 24px rgba(0, 0, 0, 0.25),
      0 2px 6px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 14px -5px rgba(255, 255, 255, 0.04);
  }
}
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tab-bar {
    background: rgba(30, 30, 32, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
      0 6px 24px rgba(0, 0, 0, 0.25),
      0 2px 6px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 14px -5px rgba(255, 255, 255, 0.04);
  }
}

/* ─── Trump Truth Social Cards ─────────────────────────────────────────── */

/* Settings: Truth Social filter toggle — uses same layout as .filter-options */
.truth-filter-option {
  flex: 1 1 auto;
  padding: 12px 8px;
  border: var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}
.truth-filter-option:hover {
  color: var(--text);
  transform: translateY(-1px);
}
/* Trump filter — "impact" was orange but visually collided with the live
   submenu's Recency section (also orange-active) right above it. Switched
   to teal so the two adjacent sections read as distinct settings. */
.truth-filter-option[data-truth-filter="impact"]:hover { border-color: var(--accent-teal); }
.truth-filter-option[data-truth-filter="all"]:hover { border-color: var(--accent-purple); }
.truth-filter-option[data-truth-filter="impact"].active {
  border-color: var(--accent-teal);
  background: rgba(90, 200, 250, 0.14);
  color: var(--accent-teal);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(90, 200, 250, 0.14), var(--glass-highlight);
}
.truth-filter-option[data-truth-filter="all"].active {
  border-color: var(--accent-purple);
  background: rgba(175, 82, 222, 0.1);
  color: var(--accent-purple);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(175, 82, 222, 0.12), var(--glass-highlight);
}

.truth-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.truth-card {
  background: rgba(255, 255, 255, 0.35);
  border-radius: var(--card-radius);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 8px 40px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 20px -8px rgba(255, 255, 255, 0.3);
  padding: 20px 24px;
  animation: live-card-fadein 0.4s ease-out both;
}

.truth-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.truth-impact-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
}

.truth-impact--yes {
  background: linear-gradient(135deg, rgba(255, 59, 48, 0.15), rgba(255, 149, 0, 0.15));
  color: var(--accent-red);
  border: 1px solid rgba(255, 59, 48, 0.25);
}

.truth-impact--no {
  background: rgba(142, 142, 147, 0.1);
  color: var(--text-secondary);
  border: 1px solid rgba(142, 142, 147, 0.15);
}

.truth-card-time {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.truth-card-text {
  font-size: var(--read-body-size);
  line-height: var(--read-line-height);
  color: var(--text);
  margin-bottom: 4px;
  word-break: break-word;
}
.truth-card-text p:last-child { margin-bottom: 0; }
.truth-card .live-card-expand { padding: 2px 0; margin-bottom: 2px; }

.truth-tickers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.truth-analysis-details {
  margin: 10px 0;
}

.truth-analysis-toggle {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  padding: 8px 14px;
  background: rgba(0, 122, 255, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(0, 122, 255, 0.12);
  list-style: none;
  user-select: none;
  transition: background 0.2s;
}

.truth-analysis-toggle:hover {
  background: rgba(0, 122, 255, 0.12);
}

.truth-analysis-toggle::-webkit-details-marker { display: none; }

.truth-analysis-body {
  font-size: var(--read-body-size);
  line-height: var(--read-line-height);
  color: var(--text);
  margin-top: 10px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.truth-analysis-body p { margin: 0 0 var(--read-para-gap); }
.truth-analysis-body p:last-child { margin-bottom: 0; }
.truth-analysis-body strong { font-weight: 600; }
.truth-analysis-body ul, .truth-analysis-body ol { margin: 6px 0; padding-left: 20px; }
.truth-analysis-body li { margin-bottom: 4px; }
.truth-analysis-body blockquote {
  border: none;
  border-left: 3px solid var(--accent);
  padding: 8px 16px;
  margin: 10px 0;
  background: none;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  font-style: italic;
  color: var(--text-secondary);
  box-shadow: none;
}
.truth-analysis-body code {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 13px;
  background: rgba(0, 122, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Hide hr before sources in Trump analysis (same as .analysis-card hr) */
.truth-analysis-body hr { border: none; height: 0; background: none; margin: 0; }

/* Sources section inside Trump analysis — match WSB .analysis-card .sources-section style */
.truth-analysis-body .sources-section {
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 14px;
  border: 1px solid var(--separator);
}
.truth-analysis-body .sources-section h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-top: 0;
  margin-bottom: 10px;
}
.truth-analysis-body .sources-section ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}
.truth-analysis-body .sources-section li {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 4px;
  padding-left: 16px;
  position: relative;
}
.truth-analysis-body .sources-section li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--text-secondary);
  font-weight: 600;
}
.truth-analysis-body .sources-section a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.truth-analysis-body .sources-section a:hover {
  color: var(--accent);
  text-decoration: underline;
}
:root[data-theme="dark"] .truth-analysis-body .sources-section {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .truth-analysis-body .sources-section {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
  }
}

.truth-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--separator);
}

.truth-card-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.15px;
}

.truth-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.truth-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.9;
}

.truth-stat-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.truth-card-link {
  font-size: 12px;
  font-weight: 600;
  color: #5448EE;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(84, 72, 238, 0.08);
  border: 1px solid rgba(84, 72, 238, 0.15);
  transition: background 0.2s;
}

.truth-card-link:hover {
  background: rgba(84, 72, 238, 0.18);
}

/* Prevent details[open] from changing card appearance */
.truth-analysis-details[open] {
  background: none;
}

/* Mobile padding — apply to cards, not timeline (so load-more button stays full-width like live tab) */
@media (max-width: 768px) {
  .truth-card {
    padding: 16px 18px;
    margin-left: 8px;
    margin-right: 8px;
  }

  .truth-tickers {
    padding-left: 0;
    padding-right: 0;
  }

  .truth-timeline .live-load-more {
    margin-left: 8px;
    margin-right: 8px;
  }
}

/* Dark mode — match .analysis-card dark */
:root[data-theme="dark"] .truth-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 6px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 16px -6px rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .truth-analysis-body blockquote {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: var(--accent);
}

:root[data-theme="dark"] .truth-tickers {
  background: transparent;
  border-color: transparent;
}

:root[data-theme="dark"] .truth-analysis-body {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .truth-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 6px 30px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .truth-tickers {
    background: transparent;
    border-color: transparent;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .truth-analysis-body {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .truth-analysis-body blockquote {
    background: rgba(255, 255, 255, 0.03);
    border-left-color: var(--accent);
  }
}

/* ─── GPU optimization ────────────────────────────────────────────────────────
   backdrop-filter blurs the content behind an element.  Since the page
   background is a solid color, blurring it produces the exact same solid
   color — the effect is purely decorative waste.  Each layer costs GPU VRAM
   and on mobile Safari causes iOS to kill the tab after 1-2 minutes.

   Keep backdrop-filter ONLY on .tab-bar (content scrolls behind it, so the
   blur is actually visible).  Remove from everything else globally.
   ──────────────────────────────────────────────────────────────────────────── */
.app-title,
.tab.active,
.live-card,
.analysis-card,
.truth-card,
.pinned-panel,
.meta-card,
.meta-item,
.market-ticker-item,
.pinned-tab,
.pinned-live-badge,
.live-card-source,
.live-load-more,
.stock-card,
.stock-view-toggle,
.search-input,
.search-source-tab,
.search-sort-select,
.settings-card,
.theme-option,
.style-option,
.lang-option,
.live-view-option,
.source-option,
.truth-filter-option,
.filter-option,
.settings-about,
.pwa-install-banner,
.search-results .live-card,
.wsb-nav-btn--arrow,
.wsb-run-btn,
.analysis-card h2,
.analysis-card table,
.sources-section,
.stock-chip,
.stock-chip.active,
.stock-ac-dropdown,
.stock-load-more,
.sod-ticker-input,
.sod-exp-select,
.sod-strikes-select,
.sod-btn--load,
.sod-btn--refresh,
.sod-card,
.sod-insight-item,
.sod-greek-tab,
.sod-range-tab,
.sod-btn--news,
.truth-impact-badge {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Mobile: reduce tab-bar blur, remove will-change, and cap marquee layers */
@media (max-width: 768px) {
  .tab-bar {
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    will-change: auto !important;
  }
  .marquee-track,
  .stock-marquee-track {
    will-change: auto;
  }
}

/* ─── Newsprint style — apply to non-Live news surfaces ──────────────────── */
:root[data-style="newsprint"] .pinned-panel-title,
:root[data-style="newsprint"] .pinned-panel-body,
:root[data-style="newsprint"] .pinned-panel-body p,
:root[data-style="newsprint"] .pinned-panel-body li,
:root[data-style="newsprint"] .pinned-panel-body h1,
:root[data-style="newsprint"] .pinned-panel-body h2,
:root[data-style="newsprint"] .pinned-panel-body h3,
:root[data-style="newsprint"] .pinned-panel-body h4,
:root[data-style="newsprint"] .stock-card-title,
:root[data-style="newsprint"] .truth-card-text,
:root[data-style="newsprint"] .truth-card-text p,
:root[data-style="newsprint"] .truth-analysis-body,
:root[data-style="newsprint"] .truth-analysis-body p,
:root[data-style="newsprint"] .truth-analysis-body li,
:root[data-style="newsprint"] .truth-analysis-body blockquote,
:root[data-style="newsprint"] .truth-analysis-body h4,
:root[data-style="newsprint"] .analysis-card h2,
:root[data-style="newsprint"] .analysis-card h3,
:root[data-style="newsprint"] .analysis-card h4,
:root[data-style="newsprint"] .analysis-card p,
:root[data-style="newsprint"] .analysis-card li,
:root[data-style="newsprint"] .analysis-card blockquote {
  font-family: Georgia, 'Noto Serif SC', 'NotoSerifSC-Local', 'Songti SC', '宋体-简', '宋体', 'STSongti-SC-Regular', STSong, SimSun, NSimSun, 'Source Han Serif SC', 'Noto Serif CJK SC', 'Times New Roman', serif;
}

/* Bump title weight to 700 — Android serif fonts (Noto Serif CJK) often ship
   only Regular/Bold faces, so weight 600 falls back to Regular and looks unbold. */
:root[data-style="newsprint"] .live-card-title,
:root[data-style="newsprint"] .pinned-panel-title {
  font-weight: 700;
}

/* Light-mode warm ink for prose surfaces */
:root[data-style="newsprint"]:not([data-theme="dark"]) .pinned-panel-title,
:root[data-style="newsprint"]:not([data-theme="dark"]) .stock-card-title,
:root[data-style="newsprint"]:not([data-theme="dark"]) .analysis-card h2,
:root[data-style="newsprint"]:not([data-theme="dark"]) .analysis-card h3,
:root[data-style="newsprint"]:not([data-theme="dark"]) .analysis-card h4 {
  color: #1c1c1e;
}
:root[data-style="newsprint"]:not([data-theme="dark"]) .pinned-panel-body,
:root[data-style="newsprint"]:not([data-theme="dark"]) .truth-card-text,
:root[data-style="newsprint"]:not([data-theme="dark"]) .truth-analysis-body,
:root[data-style="newsprint"]:not([data-theme="dark"]) .truth-analysis-body p,
:root[data-style="newsprint"]:not([data-theme="dark"]) .analysis-card p,
:root[data-style="newsprint"]:not([data-theme="dark"]) .analysis-card li {
  color: #2b2921;
}
:root[data-style="newsprint"]:not([data-theme="dark"]) .stock-card,
:root[data-style="newsprint"]:not([data-theme="dark"]) .pinned-panel,
:root[data-style="newsprint"]:not([data-theme="dark"]) .analysis-card,
:root[data-style="newsprint"]:not([data-theme="dark"]) .truth-card {
  background: #faf6ed;
  border: 1px solid #f0e9d6;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.03),
    0 6px 20px rgba(120, 90, 30, 0.05);
}
/* Strip colored gradient overlays from pinned-panel + stock-card in newsprint */
:root[data-style="newsprint"] .pinned-panel--ac1::before,
:root[data-style="newsprint"] .pinned-panel--ac2::before,
:root[data-style="newsprint"] .pinned-panel--ac3::before,
:root[data-style="newsprint"] .pinned-panel--ac4::before,
:root[data-style="newsprint"] .pinned-panel--ac5::before,
:root[data-style="newsprint"] .pinned-panel--ac6::before,
:root[data-style="newsprint"] .stock-card::after {
  background: none;
  background-image: none;
}

/* ─── Dark-mode Newsprint — keep default dark card surfaces; only restore text
   colors so warm sepia tint doesn't dominate the design. ─────────────────── */
/* Explicit data-theme="dark" + newsprint: undo the `:not([data-theme="dark"])`
   light-cream overrides above so cards stay on the default dark glass bg. */
:root[data-style="newsprint"][data-theme="dark"] .live-card,
:root[data-style="newsprint"][data-theme="dark"] .pinned-panel,
:root[data-style="newsprint"][data-theme="dark"] .stock-card,
:root[data-style="newsprint"][data-theme="dark"] .analysis-card,
:root[data-style="newsprint"][data-theme="dark"] .truth-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 14px -6px rgba(255, 255, 255, 0.04);
}
:root[data-style="newsprint"][data-theme="dark"] .pinned-panel-title,
:root[data-style="newsprint"][data-theme="dark"] .stock-card-title,
:root[data-style="newsprint"][data-theme="dark"] .analysis-card h2,
:root[data-style="newsprint"][data-theme="dark"] .analysis-card h3,
:root[data-style="newsprint"][data-theme="dark"] .analysis-card h4 {
  color: #f2efe6;
}
:root[data-style="newsprint"][data-theme="dark"] .pinned-panel-body,
:root[data-style="newsprint"][data-theme="dark"] .truth-card-text,
:root[data-style="newsprint"][data-theme="dark"] .truth-analysis-body,
:root[data-style="newsprint"][data-theme="dark"] .truth-analysis-body p,
:root[data-style="newsprint"][data-theme="dark"] .analysis-card p,
:root[data-style="newsprint"][data-theme="dark"] .analysis-card li {
  color: #d9d4c6;
}

/* Auto-dark (theme=auto + system prefers-color-scheme:dark) + newsprint */
@media (prefers-color-scheme: dark) {
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .live-card,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .pinned-panel,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .stock-card,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .truth-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.2),
      0 1px 3px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      inset 0 0 14px -6px rgba(255, 255, 255, 0.04);
  }
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .live-card-title,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .pinned-panel-title,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .stock-card-title,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h2,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h3,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card h4 {
    color: #f2efe6;
  }
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .live-card-body,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .pinned-panel-body,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .truth-card-text,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .truth-analysis-body,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .truth-analysis-body p,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card p,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .analysis-card li {
    color: #d9d4c6;
  }
}

/* ─── Colorful style override (pre-newsprint look) ───────────────────────── */
:root[data-style="colorful"]:not([data-theme="dark"]) .live-card {
  /* Opaque neutral base. The card has no backdrop blur, so a translucent
     background only let the warm page (#FAF9F5, R>B) bleed through and read
     warm/pink at the untinted bottom-right. Going opaque kills the bleed at
     the source — declared color = rendered color. The `::before` accent tint
     still layers on top for the colored top-left wash. */
  background: #f9f9f9;
  border: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 6px 24px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 16px -6px rgba(255, 255, 255, 0.2);
}
:root[data-style="colorful"]:not([data-theme="dark"]) .live-card:hover,
:root[data-style="colorful"]:not([data-theme="dark"]) #live-timeline .live-card.is-viewing-card {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03),
    0 12px 40px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 20px -7px rgba(255, 255, 255, 0.35);
}
/* Auto-dark (theme=auto + system prefers-color-scheme:dark) + colorful: the
   `:not([data-theme="dark"])` light-card override above also matches auto-dark
   (data-theme is absent, not "dark"), so without this twin the card stays light
   #f9f9f9 on a dark page. Restore the default dark glass surface; the extra
   `:not([data-theme="light"])` outscopes the light rule. Mirrors the newsprint
   auto-dark block above. */
@media (prefers-color-scheme: dark) {
  :root[data-style="colorful"]:not([data-theme="light"]):not([data-theme="dark"]) .live-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.2),
      0 1px 3px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      inset 0 0 14px -6px rgba(255, 255, 255, 0.04);
  }
  :root[data-style="colorful"]:not([data-theme="light"]):not([data-theme="dark"]) .live-card:hover,
  :root[data-style="colorful"]:not([data-theme="light"]):not([data-theme="dark"]) #live-timeline .live-card.is-viewing-card {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }
}
:root[data-style="colorful"] .live-card--blue::before { background-image: linear-gradient(135deg, rgba(var(--ac1), 0.06) 0%, transparent 45%); }
:root[data-style="colorful"] .live-card--teal::before { background-image: linear-gradient(135deg, rgba(var(--ac2), 0.07) 0%, transparent 45%); }
:root[data-style="colorful"] .live-card--green::before { background-image: linear-gradient(135deg, rgba(var(--ac3), 0.07) 0%, transparent 45%); }
:root[data-style="colorful"] .live-card--purple::before { background-image: linear-gradient(135deg, rgba(var(--ac4), 0.06) 0%, transparent 45%); }
:root[data-style="colorful"] .live-card--cyan::before { background-image: linear-gradient(135deg, rgba(var(--ac5), 0.07) 0%, transparent 45%); }
:root[data-style="colorful"] .live-card--indigo::before { background-image: linear-gradient(135deg, rgba(var(--ac6), 0.07) 0%, transparent 45%); }
:root[data-style="colorful"] .live-card-title {
  font-family: var(--font);
  color: var(--text);
}
:root[data-style="colorful"] .live-card-body {
  font-family: var(--font);
  color: var(--text);
}
/* Secondary cluster panel mirrors the primary card's typography under the
   active card style — sans-serif in colorful, weight 700 title in newsprint. */
:root[data-style="colorful"] .live-cluster-panel-title,
:root[data-style="colorful"] .live-cluster-panel-body {
  font-family: var(--font);
  color: var(--text);
}
:root[data-style="newsprint"] .live-cluster-panel-title {
  font-weight: 700;
}
:root[data-style="colorful"] .ticker-signal-label {
  font-family: var(--font);
  font-style: normal;
  color: var(--text-secondary);
  opacity: 0.7;
}
:root[data-style="colorful"] .tm-live-view .ticker-signal-label {
  color: #8e8e93;
}
:root[data-theme="dark"][data-style="colorful"] .tm-live-view .ticker-signal-label {
  color: #98989d;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="colorful"]:not([data-theme="light"]):not([data-theme="dark"]) .tm-live-view .ticker-signal-label {
    color: #98989d;
  }
}
:root[data-style="colorful"] .ticker-signal--up {
  color: #34c759;
  background: rgba(52, 199, 89, 0.1);
  border-color: rgba(52, 199, 89, 0.12);
}
:root[data-style="colorful"] .ticker-signal--down {
  color: #ff3b30;
  background: rgba(255, 59, 48, 0.1);
  border-color: rgba(255, 59, 48, 0.12);
}
:root[data-style="colorful"] .live-card-meta {
  color: var(--text-secondary);
  border-top: 1px solid var(--separator);
  border-image: none;
  margin-top: 4px;
}
:root[data-style="colorful"] .live-card-time {
  font-family: var(--font);
  color: inherit;
}
:root[data-style="colorful"] .live-card-time-ago {
  font-family: var(--font);
  font-style: normal;
  color: var(--accent-red);
  opacity: 0.65;
}
:root[data-style="colorful"] .live-card-coverage {
  font-family: var(--font);
  font-style: normal;
  color: var(--text-secondary);
  opacity: 0.8;
}

/* ─── Live Subview Toggle (详细 / Time Machine / 搜索) ────────────────────── */
/* Match the WSB view toggle exactly: same pill shape, same metrics, same spacing. */

.live-subview-toggle {
  display: flex;
  gap: 0;
  margin: 0 0 8px;
  border-radius: 14px;
  overflow: hidden;
  border: var(--glass-border);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}
@media (min-width: 769px) {
  .live-subview-toggle {
    margin-top: -12px;
    margin-bottom: 14px;
  }
  /* Detail view below the toggle no longer needs its own negative pull. */
  #tab-live .content-inner {
    margin-top: 0;
  }
}
:root[data-theme="dark"] .live-subview-toggle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .live-subview-toggle {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  }
}

/* ─── WSB DD Analysis Subview ─────────────────────────────────────────── */

.wsb-view-toggle {
  display: flex;
  gap: 0;
  margin: 0 0 12px;
  border-radius: 14px;
  overflow: hidden;
  border: var(--glass-border);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--glass-highlight);
}
@media (min-width: 769px) {
  .wsb-view-toggle {
    margin-bottom: 2px;
  }
  #wsb-daily-view {
    margin-top: 12px;
  }
}
.wsb-view-btn,
.stock-view-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.wsb-view-btn.active,
.stock-view-btn.active {
  background: rgba(0, 122, 255, 0.85);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}
.wsb-view-btn:not(.active):hover,
.stock-view-btn:not(.active):hover { background: rgba(255, 255, 255, 0.2); }
:root[data-theme="dark"] .wsb-view-toggle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .wsb-view-toggle {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  }
}

.dd-search-wrap { position: relative; margin: 12px 0; }
.dd-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.5);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border 0.15s, box-shadow 0.15s;
}
.dd-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}
.dd-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-secondary); pointer-events: none; opacity: 0.7;
}
.dd-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: var(--text-secondary);
  cursor: pointer; padding: 4px 8px; font-size: 12px;
  display: none; font-family: inherit;
}
.dd-search-clear.show { display: block; }
:root[data-theme="dark"] .dd-search-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-search-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

.dd-list { display: flex; flex-direction: column; gap: 8px; }
.dd-row {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
  transition: border-color 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
/* No blue accent on expanded — keep base border so it visually matches collapsed rows */
:root[data-theme="dark"] .dd-row {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

.dd-row-summary {
  padding: 12px 14px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  user-select: none;
  transition: background 0.15s;
}
.dd-row-summary:hover { background: rgba(0, 0, 0, 0.02); }
:root[data-theme="dark"] .dd-row-summary:hover {
  background: rgba(255, 255, 255, 0.04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-row-summary:hover {
    background: rgba(255, 255, 255, 0.04);
  }
}
.dd-row-title-line { display: flex; align-items: flex-start; gap: 8px; }
.dd-row-chevron {
  flex-shrink: 0; margin-top: 2px;
  transition: transform 0.2s;
  color: var(--text-secondary); opacity: 0.6;
}
.dd-row.expanded .dd-row-chevron { transform: rotate(90deg); }
.dd-row-title {
  flex: 1; font-weight: 600; font-size: 16px; color: var(--text);
  line-height: 1.4;
}
.dd-row-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 11px; padding-left: 26px;
}
.dd-meta-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 8px;
  font-size: 11px; font-weight: 600;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.dd-meta-chip--score    { background: rgba(52, 199, 89, 0.10);  border-color: rgba(52, 199, 89, 0.22);  color: #1f9d4f; }
.dd-meta-chip--comments { background: rgba(0, 122, 255, 0.10);  border-color: rgba(0, 122, 255, 0.22);  color: #006edc; }
.dd-meta-chip--time     { background: rgba(255, 149, 0, 0.10);  border-color: rgba(255, 149, 0, 0.24);  color: #c47000; }
:root[data-theme="dark"] .dd-meta-chip { box-shadow: none; }
:root[data-theme="dark"] .dd-meta-chip--score    { background: rgba(52, 199, 89, 0.18);  border-color: rgba(52, 199, 89, 0.30);  color: #5fd680; }
:root[data-theme="dark"] .dd-meta-chip--comments { background: rgba(0, 122, 255, 0.20);  border-color: rgba(0, 122, 255, 0.34);  color: #6ab1ff; }
:root[data-theme="dark"] .dd-meta-chip--time     { background: rgba(255, 149, 0, 0.18);  border-color: rgba(255, 149, 0, 0.32);  color: #ffb547; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-meta-chip { box-shadow: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-meta-chip--score    { background: rgba(52, 199, 89, 0.18);  border-color: rgba(52, 199, 89, 0.30);  color: #5fd680; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-meta-chip--comments { background: rgba(0, 122, 255, 0.20);  border-color: rgba(0, 122, 255, 0.34);  color: #6ab1ff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-meta-chip--time     { background: rgba(255, 149, 0, 0.18);  border-color: rgba(255, 149, 0, 0.32);  color: #ffb547; }
}

.dd-row-detail {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.dd-row.expanded .dd-row-detail { display: block; }
:root[data-theme="dark"] .dd-row.expanded .dd-row-detail { border-top-color: rgba(255, 255, 255, 0.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-row.expanded .dd-row-detail { border-top-color: rgba(255, 255, 255, 0.08); }
}

.dd-detail-loading {
  padding: 24px 0; text-align: center;
  color: var(--text-secondary); font-size: 13px;
}
.dd-section { margin-top: 14px; }
.dd-section-title {
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px;
  opacity: 0.7;
}
.dd-section-body {
  font-size: var(--read-body-size); line-height: var(--read-line-height); color: var(--text);
}
.dd-section-body p { margin: 0 0 var(--read-para-gap); }
.dd-section-body p:last-child { margin-bottom: 0; }
.dd-section-body a { color: var(--accent); text-decoration: none; }
.dd-section-body a:hover { text-decoration: underline; }
.dd-section-body img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
.dd-selftext .dd-section-body h1,
.dd-selftext .dd-section-body h2,
.dd-selftext .dd-section-body h3,
.dd-selftext .dd-section-body h4,
.dd-selftext .dd-section-body h5,
.dd-selftext .dd-section-body h6 {
  color: var(--text);
  font-weight: 700;
  line-height: 1.35;
  margin: 12px 0 8px;
}
.dd-selftext .dd-section-body h1:first-child,
.dd-selftext .dd-section-body h2:first-child,
.dd-selftext .dd-section-body h3:first-child {
  margin-top: 0;
}
.dd-selftext .dd-section-body h1 { font-size: 18px; }
.dd-selftext .dd-section-body h2 { font-size: 16.5px; }
.dd-selftext .dd-section-body h3 { font-size: 15.5px; }
.dd-selftext .dd-section-body h4,
.dd-selftext .dd-section-body h5,
.dd-selftext .dd-section-body h6 { font-size: 15px; }
.dd-selftext .dd-section-body ul,
.dd-selftext .dd-section-body ol {
  margin: 8px 0 12px;
  padding-left: 1.45em;
}
.dd-selftext .dd-section-body li {
  margin: 4px 0;
  padding-left: 0.15em;
}
.dd-selftext .dd-section-body li > p {
  margin: 0 0 6px;
}
.dd-section-body code {
  background: rgba(0, 0, 0, 0.05); padding: 1px 4px;
  border-radius: 4px; font-size: 12.5px;
}
:root[data-theme="dark"] .dd-section-body code {
  background: rgba(255, 255, 255, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-section-body code {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Selftext: truth-card-style glass */
.dd-selftext {
  background: rgba(255, 255, 255, 0.35);
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 8px 40px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}
:root[data-theme="dark"] .dd-selftext {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 6px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-selftext {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow:
      0 6px 30px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}
.dd-selftext-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 13px; font-weight: 600;
  margin: 0; font-family: inherit;
  list-style: none;
}
.dd-selftext-toggle::-webkit-details-marker { display: none; }

/* Affected tickers chips inside detail */
.ticker-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 9px; border-radius: 8px;
  font-weight: 700; font-size: 11px;
  text-decoration: none;
  border: 1px solid transparent;
}
.ticker-chip[data-sentiment="bullish"] { background: rgba(52, 199, 89, 0.15);  border-color: rgba(52, 199, 89, 0.28);  color: #1f9d4f; }
.ticker-chip[data-sentiment="bearish"] { background: rgba(255, 59, 48, 0.15);  border-color: rgba(255, 59, 48, 0.28);  color: #d63027; }
.ticker-chip[data-sentiment="mixed"]   { background: rgba(255, 149, 0, 0.15);  border-color: rgba(255, 149, 0, 0.28);  color: #c47000; }
.ticker-chip[data-sentiment="neutral"] { background: rgba(142, 142, 147, 0.15); border-color: rgba(142, 142, 147, 0.28); color: #6b6b6f; }
:root[data-theme="dark"] .ticker-chip[data-sentiment="bullish"] { background: rgba(52, 199, 89, 0.22);  color: #5fd680; }
:root[data-theme="dark"] .ticker-chip[data-sentiment="bearish"] { background: rgba(255, 59, 48, 0.22);  color: #ff7569; }
:root[data-theme="dark"] .ticker-chip[data-sentiment="mixed"]   { background: rgba(255, 149, 0, 0.22);  color: #ffb547; }
:root[data-theme="dark"] .ticker-chip[data-sentiment="neutral"] { background: rgba(142, 142, 147, 0.22); color: #b0b0b5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ticker-chip[data-sentiment="bullish"] { background: rgba(52, 199, 89, 0.22);  color: #5fd680; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ticker-chip[data-sentiment="bearish"] { background: rgba(255, 59, 48, 0.22);  color: #ff7569; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ticker-chip[data-sentiment="mixed"]   { background: rgba(255, 149, 0, 0.22);  color: #ffb547; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ticker-chip[data-sentiment="neutral"] { background: rgba(142, 142, 147, 0.22); color: #b0b0b5; }
}

/* Fact-check list */
.dd-fact-list { display: flex; flex-direction: column; gap: 8px; }
.dd-fact-item {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
}
:root[data-theme="dark"] .dd-fact-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-fact-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
  }
}
.dd-fact-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.dd-fact-status {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px; text-transform: uppercase;
  letter-spacing: 0.04em; margin-top: 2px;
}
.dd-fact-status.supported    { background: rgba(52, 199, 89, 0.2);  color: #1f9d4f; }
.dd-fact-status.questionable { background: rgba(255, 149, 0, 0.2);  color: #c47000; }
.dd-fact-status.unsupported  { background: rgba(255, 59, 48, 0.2);  color: #d63027; }
.dd-fact-status.unclear      { background: rgba(142, 142, 147, 0.2); color: #6b6b6f; }
:root[data-theme="dark"] .dd-fact-status.supported    { color: #5fd680; }
:root[data-theme="dark"] .dd-fact-status.questionable { color: #ffb547; }
:root[data-theme="dark"] .dd-fact-status.unsupported  { color: #ff7569; }
:root[data-theme="dark"] .dd-fact-status.unclear      { color: #b0b0b5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-fact-status.supported    { color: #5fd680; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-fact-status.questionable { color: #ffb547; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-fact-status.unsupported  { color: #ff7569; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-fact-status.unclear      { color: #b0b0b5; }
}
.dd-fact-claim { flex: 1; font-weight: 600; font-size: 13.5px; line-height: 1.4; }
.dd-fact-note { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-top: 4px; }
.dd-fact-sources {
  margin-top: 6px; font-size: 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.dd-fact-sources a {
  color: var(--accent); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dd-detail-footer {
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 11.5px; color: var(--text-secondary);
}
:root[data-theme="dark"] .dd-detail-footer { border-top-color: rgba(255, 255, 255, 0.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .dd-detail-footer { border-top-color: rgba(255, 255, 255, 0.08); }
}
.dd-detail-footer a { color: var(--accent); text-decoration: none; font-weight: 600; }

/* DD load-more — mirrors live-load-more colorful style */
.dd-load-more {
  display: block;
  width: min(480px, 100%);
  margin: 16px auto 0;
  padding: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  background: rgba(175, 82, 222, 0.06);
  color: var(--accent-purple);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow:
    0 0 0 1px rgba(175, 82, 222, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 12px -5px rgba(255, 255, 255, 0.2);
}
.dd-load-more:hover {
  background: rgba(175, 82, 222, 0.12);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(175, 82, 222, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 14px -5px rgba(255, 255, 255, 0.25);
}
.dd-load-more:disabled { opacity: 0.5; cursor: default; transform: none; }

/* Mobile padding — mirror live-card / live-load-more breathing room */
@media (max-width: 768px) {
  .wsb-view-toggle,
  .live-subview-toggle {
    margin-left: 14px;
    margin-right: 14px;
  }
  .dd-search-wrap,
  .dd-list {
    margin-left: 8px;
    margin-right: 8px;
  }
  .dd-load-more {
    width: auto;
    margin-left: 8px;
    margin-right: 8px;
  }
}

@media (max-width: 480px) {
  .dd-row-title { font-size: 15px; }
}

/* ─── DD subview — newsprint adaptation ─────────────────────────────────── */
/* Serif font on prose surfaces */
:root[data-style="newsprint"] .dd-row-title,
:root[data-style="newsprint"] .dd-section-title,
:root[data-style="newsprint"] .dd-section-body,
:root[data-style="newsprint"] .dd-section-body p,
:root[data-style="newsprint"] .dd-section-body li,
:root[data-style="newsprint"] .dd-fact-claim,
:root[data-style="newsprint"] .dd-fact-note {
  font-family: Georgia, 'Noto Serif SC', 'NotoSerifSC-Local', 'Songti SC', '宋体-简', '宋体', 'STSongti-SC-Regular', STSong, SimSun, NSimSun, 'Source Han Serif SC', 'Noto Serif CJK SC', 'Times New Roman', serif;
}
:root[data-style="newsprint"] .dd-row-title { font-weight: 700; }

/* Light-mode cream surfaces (matches .truth-card / .live-card newsprint) */
:root[data-style="newsprint"]:not([data-theme="dark"]) .dd-row,
:root[data-style="newsprint"]:not([data-theme="dark"]) .dd-selftext {
  background: #faf6ed;
  border: 1px solid #f0e9d6;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.03),
    0 6px 20px rgba(120, 90, 30, 0.05);
}
:root[data-style="newsprint"]:not([data-theme="dark"]) .dd-row-title {
  color: #1c1c1e;
}
:root[data-style="newsprint"]:not([data-theme="dark"]) .dd-section-body,
:root[data-style="newsprint"]:not([data-theme="dark"]) .dd-section-body p,
:root[data-style="newsprint"]:not([data-theme="dark"]) .dd-section-body li,
:root[data-style="newsprint"]:not([data-theme="dark"]) .dd-fact-claim,
:root[data-style="newsprint"]:not([data-theme="dark"]) .dd-fact-note {
  color: #2b2921;
}
:root[data-style="newsprint"]:not([data-theme="dark"]) .dd-fact-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(120, 90, 30, 0.12);
}

/* Dark-mode newsprint: keep glass surface, only restore prose color */
:root[data-style="newsprint"][data-theme="dark"] .dd-row,
:root[data-style="newsprint"][data-theme="dark"] .dd-selftext {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
:root[data-style="newsprint"][data-theme="dark"] .dd-row-title {
  color: #f2efe6;
}
:root[data-style="newsprint"][data-theme="dark"] .dd-section-body,
:root[data-style="newsprint"][data-theme="dark"] .dd-section-body p,
:root[data-style="newsprint"][data-theme="dark"] .dd-section-body li,
:root[data-style="newsprint"][data-theme="dark"] .dd-fact-claim,
:root[data-style="newsprint"][data-theme="dark"] .dd-fact-note {
  color: #d9d4c6;
}

/* Auto theme + system dark + newsprint */
@media (prefers-color-scheme: dark) {
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .dd-row,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .dd-selftext {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.2),
      0 1px 3px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .dd-row-title {
    color: #f2efe6;
  }
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .dd-section-body,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .dd-section-body p,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .dd-section-body li,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .dd-fact-claim,
  :root[data-style="newsprint"]:not([data-theme="light"]):not([data-theme="dark"]) .dd-fact-note {
    color: #d9d4c6;
  }
}

/* ─── Integrated Time Machine View ─────────────────────────────────────── */
#tm-live-view[hidden], #live-detail-view[hidden], #live-search-view[hidden] { display: none !important; }
body.tm-live-active #tab-live .content-inner { margin-top: 0; }

  /* ─── Theme tokens ─────────────────────────────────────────────────────── */
  .tm-live-view {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    --font-serif: Georgia, 'Noto Serif SC', 'NotoSerifSC-Local', 'Songti SC', '宋体-简', '宋体', STSong, SimSun, 'Times New Roman', serif;
    --ac1: 60, 140, 240;
    --ac2: 40, 185, 170;
    --ac3: 50, 180, 110;
    --ac4: 120, 105, 210;
    --ac5: 0, 175, 215;
    --ac6: 85, 145, 220;
    --bg: #EDECE2;
    --card: rgba(255, 255, 255, 0.7);
    --card-strong: rgba(255, 255, 255, 0.92);
    --card-border: rgba(0, 0, 0, 0.08);
    --text: #1d1d1f;
    --text-secondary: #5e5e63;
    --text-muted: #8e8e93;
    --accent: #007aff;
    --accent-soft: rgba(0, 122, 255, 0.12);
    --up: #34c759;
    --down: #ff3b30;
    --daily-grad: linear-gradient(135deg, rgba(255, 149, 0, 0.06), rgba(255, 204, 0, 0.04));
    --weekly-grad: linear-gradient(135deg, rgba(88, 86, 214, 0.08), rgba(175, 82, 222, 0.055));
    /* Opaque neutral — the TM page bg (#EDECE2) is warm, so a translucent card
       bled it through and read warm/pink (same issue as the live feed). Going
       opaque kills the bleed and skips alpha compositing. */
    --tm-card-bg: #f9f9f9;
    --tm-card-border: none;
    --tm-card-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.04),
      0 6px 24px rgba(0, 0, 0, 0.05),
      0 1px 4px rgba(0, 0, 0, 0.03),
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 0 16px -6px rgba(255, 255, 255, 0.2);
	    --glass-shadow:
	      0 0 0 1px rgba(0, 0, 0, 0.04),
	      0 18px 40px rgba(0, 0, 0, 0.06),
	      0 4px 10px rgba(0, 0, 0, 0.03),
	      inset 0 1px 0 rgba(255, 255, 255, 0.6);
	  }
  @media (prefers-color-scheme: dark) {
    .tm-live-view[data-tm-theme="auto"] {
      --bg: #1d1d1f;
      --card: rgba(40, 40, 44, 0.7);
      --card-strong: rgba(40, 40, 44, 0.92);
      --card-border: rgba(255, 255, 255, 0.08);
      --text: #f5f5f7;
      --text-secondary: #b0b0b5;
      --text-muted: #707075;
      --accent: #0a84ff;
      --accent-soft: rgba(10, 132, 255, 0.18);
      --daily-grad: linear-gradient(135deg, rgba(255, 159, 10, 0.10), rgba(255, 214, 10, 0.06));
      --weekly-grad: linear-gradient(135deg, rgba(94, 92, 230, 0.16), rgba(191, 90, 242, 0.10));
      --tm-card-bg: #2b2b2c; /* opaque equiv of rgba(255,255,255,0.06) over #1d1d1f */
      --tm-card-border: 1px solid rgba(255, 255, 255, 0.08);
      --tm-card-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 14px -6px rgba(255, 255, 255, 0.04);
	      --glass-shadow:
	        0 8px 30px rgba(0, 0, 0, 0.35),
	        inset 0 1px 0 rgba(255, 255, 255, 0.05);
	    }
	  }
  .tm-live-view[data-tm-theme="dark"] {
    --bg: #1d1d1f;
    --card: rgba(40, 40, 44, 0.7);
    --card-strong: rgba(40, 40, 44, 0.92);
    --card-border: rgba(255, 255, 255, 0.08);
    --text: #f5f5f7;
    --text-secondary: #b0b0b5;
    --text-muted: #707075;
    --accent: #0a84ff;
    --accent-soft: rgba(10, 132, 255, 0.18);
    --daily-grad: linear-gradient(135deg, rgba(255, 159, 10, 0.10), rgba(255, 214, 10, 0.06));
    --weekly-grad: linear-gradient(135deg, rgba(94, 92, 230, 0.16), rgba(191, 90, 242, 0.10));
    --tm-card-bg: #2b2b2c; /* opaque equiv of rgba(255,255,255,0.06) over #1d1d1f */
    --tm-card-border: 1px solid rgba(255, 255, 255, 0.08);
    --tm-card-shadow:
      0 4px 20px rgba(0, 0, 0, 0.2),
      0 1px 3px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      inset 0 0 14px -6px rgba(255, 255, 255, 0.04);
	    --glass-shadow:
	      0 8px 30px rgba(0, 0, 0, 0.35),
	      inset 0 1px 0 rgba(255, 255, 255, 0.05);
	  }

	  .tm-live-view, .tm-live-view * { box-sizing: border-box; }
	  .tm-live-view { margin: 0;
	    font-family: var(--font-sans);
    font-size: 16px; line-height: 1.55; min-height: 100vh;
	    -webkit-font-smoothing: antialiased; }
	  .tm-live-view::before { display: none; }

  /* Match the Detailed view's .live-date-label / .market-ticker visual treatment.
     Sizes here mirror .live-date-label-text (25px) and .market-ticker-item (13px / 11px).
     Top gap is provided by #tm-live-view's padding-top — strip margin-top is 0. */
  .tm-live-view .market-strip {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 12px; width: auto; line-height: 1;
    overflow: visible;
  }
  .tm-live-view .date-display {
    display: flex; align-items: baseline; gap: 8px;
    font-weight: 800; color: var(--text);
    flex-shrink: 0;
    line-height: 1.05;
  }
  .tm-live-view .date-primary-text {
    display: inline-block;
    font-size: 25px; font-weight: 800; line-height: 1.05;
    letter-spacing: -0.05em;
    color: #ff9500;
    text-shadow: 0 0 14px rgba(255, 204, 0, 0.14);
  }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .tm-live-view .date-primary-text {
      background: linear-gradient(135deg, #ff3b30 0%, #ff9500 16%, #ffcc00 32%, #34c759 50%, #5ac8fa 68%, #007aff 84%, #af52de 100%);
      background-size: 220% 220%;
      background-repeat: no-repeat;
      color: transparent;
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      text-shadow: none;
      background-position: 0% 50%;
      animation: gradient-shift 6s ease-in-out infinite;
    }
  }
  .tm-live-view .market-quotes {
    display: flex; gap: 6px; flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tm-live-view .market-quotes::-webkit-scrollbar { display: none; }
  .tm-live-view .market-quote {
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 13px; font-weight: 600;
    white-space: nowrap; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    text-align: center; line-height: 1.3;
  }
  .tm-live-view .market-quote.up {
    background: rgba(52, 199, 89, 0.1);
    color: var(--up);
    border: 1px solid rgba(52, 199, 89, 0.1);
  }
  .tm-live-view .market-quote.down {
    background: rgba(255, 59, 48, 0.1);
    color: var(--down);
    border: 1px solid rgba(255, 59, 48, 0.1);
  }
  .tm-live-view .market-quote .mq-label {
    display: block;
    color: inherit; font-weight: 500; font-size: 11px;
    letter-spacing: 0;
  }
  .tm-live-view .market-quote .mq-price {
    font-variant-numeric: tabular-nums;
  }
  .tm-live-view .market-quote .mq-change { margin-left: 2px; }
.tm-live-view .market-quote.is-skeleton,
  .tm-live-view .market-quote.error {
    background: var(--card);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    opacity: 0.65;
  }
  .tm-live-view .market-strip-track {
    display: flex; align-items: center; gap: 12px;
    width: max-content;
  }

  /* ─── Layout grid ──────────────────────────────────────────────────────── */
  .tm-live-view .layout {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) 168px;
    gap: 24px; padding: 10px 20px 80px;
  }
  .tm-live-view .content { min-width: 0; }
  .tm-live-view .day-section {
    scroll-margin-top: 120px;
  }
  .tm-live-view .day-section + .day-section {
    margin-top: 18px;
  }
  .tm-live-view .timeline-rail {
    /* Sticky offset accounts for the tab bar (60px) plus the
       .live-subview-toggle band so the rail never visually overlaps it. */
    position: sticky; top: 116px;
    align-self: start;
    max-height: calc(100vh - 136px);
    overflow-y: auto; overflow-x: hidden;
    /* padding-top 16px pushes the rail's first entry safely below the
       .market-strip when scroll is at 0 (so the right column doesn't visually
       crowd the strip). */
    padding: 16px 6px 8px 12px;
    scrollbar-width: thin;
    border-left: 1px solid var(--card-border);
  }
  .tm-live-view .timeline-rail::-webkit-scrollbar { width: 4px; }
  .tm-live-view .timeline-rail::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 2px; }
  .tm-live-view .timeline-rail::-webkit-scrollbar-track { background: transparent; }

  /* ─── Cards (weekly / daily / intraday) ────────────────────────────────── */
  .tm-live-view .card {
    background: var(--tm-card-bg);
    border: var(--tm-card-border);
    border-radius: 22px;
    padding: 18px 22px;
    box-shadow: var(--tm-card-shadow);
    margin-bottom: 14px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
  }
  .tm-live-view .card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: none;
    background-size: 100% 260px;
    background-repeat: no-repeat;
  }
  .tm-live-view .card > * {
    position: relative;
    z-index: 1;
  }
  .tm-live-view .card:hover,
  .tm-live-view .card.is-viewing-card {
    /* No scale() — blurs text on Safari (see .live-card rule above). */
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.06),
      0 14px 36px rgba(120, 90, 30, 0.14),
      0 2px 6px rgba(120, 90, 30, 0.08);
    z-index: 2;
  }
  .tm-live-view .card:active {
    transform: translateY(0);
  }
  .tm-live-view .card-section-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
  }
  .tm-live-view .card-section-label .label-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
  }

  .tm-live-view .weekly-card::before { background-image: linear-gradient(135deg, rgba(var(--ac4), 0.06) 0%, transparent 45%); }
  .tm-live-view .weekly-card .card-section-label .label-dot { background: #5856d6; }

  .tm-live-view[data-tm-style="colorful"] .weekly-card,
  .tm-live-view[data-tm-style="colorful"] .daily-card {
    /* Opaque base (no page bleed-through) but KEEP the gold (daily) / purple
       (weekly) --recap-card-grad accent layered on top — that color-coding is
       intentional. */
    background: var(--recap-card-grad), var(--tm-card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--glass-shadow);
  }
  .tm-live-view[data-tm-style="colorful"] .weekly-card { --recap-card-grad: var(--weekly-grad); }
  .tm-live-view[data-tm-style="colorful"] .daily-card { --recap-card-grad: var(--daily-grad); }
  .tm-live-view[data-tm-style="colorful"]:not([data-tm-theme="dark"]) .card:hover,
  .tm-live-view[data-tm-style="colorful"]:not([data-tm-theme="dark"]) .card.is-viewing-card {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.03),
      0 12px 40px rgba(0, 0, 0, 0.08),
      0 2px 6px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 0 20px -7px rgba(255, 255, 255, 0.35);
  }
  .tm-live-view[data-tm-style="colorful"] .weekly-card::before,
  .tm-live-view[data-tm-style="colorful"] .daily-card::before { background-image: none; }
  .tm-live-view .daily-card { padding-top: 18px; }
  .tm-live-view .daily-card .card-section-label .label-dot { background: #ff9500; }

  .tm-live-view .recap-headline {
    font-weight: 600; font-size: var(--read-title-size); line-height: 1.4;
    color: var(--text); margin: 0 0 10px;
    letter-spacing: 0;
  }
  .tm-live-view .recap-narrative {
    font-weight: 400;
    font-size: var(--read-body-size); line-height: var(--read-line-height); color: var(--text);
    margin: 0 0 var(--read-para-gap);
    word-wrap: break-word;
    white-space: pre-line;
  }
  .tm-live-view .recap-line {
    display: block;
  }
  .tm-live-view .recap-line + .recap-line {
    margin-top: 5px;
  }
  .tm-live-view .recap-bullet-label {
    font-weight: 620;
  }
  .tm-live-view .recap-bullet-marker {
    font-weight: 990;
  }
  /* Compact recap cards */
  .tm-live-view .weekly-card .recap-headline,
  .tm-live-view .daily-card .recap-headline,
  .tm-live-view .intraday-card .recap-headline { font-size: var(--read-title-size); margin-bottom: 6px; }
  .tm-live-view .weekly-card .recap-narrative,
  .tm-live-view .daily-card .recap-narrative,
  .tm-live-view .intraday-card .recap-narrative { font-size: var(--read-body-size); line-height: var(--read-line-height); margin-bottom: var(--read-para-gap); }

  .tm-live-view .live-card-tickers {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--separator);
    border-image: none;
  }

  /* Intraday card — more compact */
  .tm-live-view .intraday-card { padding: 14px 18px; }
  .tm-live-view .intraday-card::before { background-image: linear-gradient(135deg, rgba(var(--ac1), 0.06) 0%, transparent 45%); }
  .tm-live-view .intraday-card:nth-child(6n+3)::before { background-image: linear-gradient(135deg, rgba(var(--ac3), 0.07) 0%, transparent 45%); }
  .tm-live-view .intraday-card:nth-child(6n+4)::before { background-image: linear-gradient(135deg, rgba(var(--ac5), 0.07) 0%, transparent 45%); }
  .tm-live-view .intraday-card:nth-child(6n+5)::before { background-image: linear-gradient(135deg, rgba(var(--ac6), 0.07) 0%, transparent 45%); }
  .tm-live-view .intraday-card:nth-child(6n+6)::before { background-image: linear-gradient(135deg, rgba(var(--ac2), 0.07) 0%, transparent 45%); }
  .tm-live-view .intraday-card:nth-child(6n+7)::before { background-image: linear-gradient(135deg, rgba(var(--ac4), 0.06) 0%, transparent 45%); }
  .tm-live-view .intraday-time {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
  }
  .tm-live-view .intraday-time .time-clock { color: var(--accent); font-weight: 700; }
  .tm-live-view .intraday-time .news-count {
    padding: 1px 6px; border-radius: 5px;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: 12px;
  }
  .tm-live-view .intraday-cards-container { display: flex; flex-direction: column; gap: 10px; }

  .tm-live-view[data-tm-style="newsprint"]:not([data-tm-theme="dark"]) .card {
    background: #faf6ed;
    border: 1px solid #f0e9d6;
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.03),
      0 6px 20px rgba(120, 90, 30, 0.05);
  }
  .tm-live-view[data-tm-style="newsprint"] .card::before {
    background: none;
    background-image: none;
  }
  .tm-live-view[data-tm-style="newsprint"] .recap-headline,
  .tm-live-view[data-tm-style="newsprint"] .recap-narrative {
    font-family: var(--font-serif);
  }
  .tm-live-view[data-tm-theme="dark"] .card:hover,
  .tm-live-view[data-tm-theme="dark"] .card.is-viewing-card {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }
  .tm-live-view[data-tm-style="newsprint"] .recap-headline {
    font-weight: 700;
  }
  .tm-live-view[data-tm-style="newsprint"]:not([data-tm-theme="dark"]) .recap-headline {
    color: #1c1c1e;
  }
  .tm-live-view[data-tm-style="newsprint"]:not([data-tm-theme="dark"]) .recap-narrative {
    color: #2b2921;
  }
  .tm-live-view[data-tm-style="newsprint"][data-tm-theme="dark"] .recap-headline {
    color: #f2efe6;
  }
  .tm-live-view[data-tm-style="newsprint"][data-tm-theme="dark"] .recap-narrative {
    color: #d9d4c6;
  }
  @media (prefers-color-scheme: dark) {
    .tm-live-view[data-tm-style="newsprint"][data-tm-theme="auto"] .card {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 14px -6px rgba(255, 255, 255, 0.04);
    }
    .tm-live-view[data-tm-style="newsprint"][data-tm-theme="auto"] .recap-headline {
      color: #f2efe6;
    }
    .tm-live-view[data-tm-style="newsprint"][data-tm-theme="auto"] .recap-narrative {
      color: #d9d4c6;
    }
  }

  .tm-live-view[data-tm-style="colorful"] .recap-headline,
  .tm-live-view[data-tm-style="colorful"] .recap-narrative {
    font-family: var(--font-sans);
    color: var(--text);
  }

  .tm-live-view .empty-day {
    padding: 60px 16px; text-align: center;
    color: var(--text-muted); font-size: 16px;
  }

  /* ─── Loading / spinner ────────────────────────────────────────────────── */
  .tm-live-view .loading-row {
    display: flex; align-items: center; gap: 10px;
    padding: 30px 16px; color: var(--text-muted); justify-content: center;
    font-size: 15px;
  }
  .tm-live-view .spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--card-border); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ─── Desktop right-rail timeline ─────────────────────────────────────── */
  .tm-live-view .tl-week-header {
    font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin: 12px 0 6px 12px;
    position: relative;
  }
  .tm-live-view .tl-week-header:first-child { margin-top: 0; }
  .tm-live-view .tl-week-badge {
    display: inline-block; padding: 1px 5px; border-radius: 4px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
    margin-left: 5px;
  }
  .tm-live-view .tl-day {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px 4px 18px;
    margin: 0;
    cursor: pointer; user-select: none;
    border-radius: 6px;
    transition: background 0.12s;
    font-size: 14px;
    color: var(--text-secondary);
  }
  .tm-live-view .tl-day:hover { background: var(--card); color: var(--text); }
  .tm-live-view .tl-day::before {
    /* the dot */
    content: ""; position: absolute;
    left: 6px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-muted); opacity: 0.5;
    transition: background 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
  }
  .tm-live-view .tl-day:hover::before { opacity: 0.9; }
  .tm-live-view .tl-day::after {
    /* connecting line on left, drawn behind dots */
    content: ""; position: absolute;
    left: 8.5px; top: -2px; bottom: -2px; width: 1px;
    background: var(--card-border);
    z-index: -1;
  }
  .tm-live-view .tl-day.is-week-start::after { top: 0; }
  .tm-live-view .tl-day .tl-date-label {
    flex: 1; min-width: 0;
    font-weight: 600; letter-spacing: -0.005em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tm-live-view .tl-day .tl-mini-chip {
    flex-shrink: 0; font-size: 11.5px; font-weight: 700;
    padding: 1px 5px; border-radius: 4px;
    background: var(--card-border); color: var(--text-muted);
    line-height: 1.5;
  }
  .tm-live-view .tl-day .tl-mini-chip.has-weekly {
    background: rgba(88, 86, 214, 0.2); color: #5856d6;
  }
  .tm-live-view .tl-day.selected { background: var(--accent-soft); color: var(--accent); }
  .tm-live-view .tl-day.selected::before {
    background: var(--accent); opacity: 1; transform: translateY(-50%) scale(1.4);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .tm-live-view .tl-day.selected .tl-date-label { font-weight: 800; }
  .tm-live-view[data-tm-theme="dark"] .tl-day .tl-mini-chip,
  .tm-live-view[data-tm-theme="auto"] .tl-day .tl-mini-chip { background: rgba(255, 255, 255, 0.08); }
  .tm-live-view[data-tm-theme="dark"] .tl-day .tl-mini-chip.has-weekly,
  .tm-live-view[data-tm-theme="auto"] .tl-day .tl-mini-chip.has-weekly {
    background: rgba(94, 92, 230, 0.25); color: #a8a4ff;
  }

  /* ─── Mobile floating timeline ─────────────────────────────────────────── */
  .tm-live-view .mobile-rail { display: none; }
  .tm-live-view .mobile-tooltip { display: none; }

		  @media (max-width: 760px) {
		    body.tm-live-active {
		      --tm-mobile-market-height: 42px;
		    }
	    .tm-live-view .market-strip {
	      justify-content: flex-start;
	      /* Top 0 / bottom 6 — mirrors Detailed's .live-date-label
	         margin-top: 2px (provided by #tm-live-view padding-top) and
	         margin-bottom: 6px. Right margin is only 14px because the mobile
	         rail starts below the strip and reserves no right gutter there. */
	      margin: 0 14px 6px 14px;
	      max-width: none;
	      width: auto;
	      height: var(--tm-mobile-market-height);
	      min-height: var(--tm-mobile-market-height);
	      gap: 36px;
	      overflow: hidden;
	      scrollbar-width: none;
	      -webkit-overflow-scrolling: touch;
	    }
    .tm-live-view .market-strip::-webkit-scrollbar { display: none; }
    .tm-live-view .market-strip-track {
      gap: 36px;
      will-change: transform;
    }
    /* Match Detailed mobile sizes: .live-date-label-text 22px; .market-ticker-item 13px / 11px label */
    .tm-live-view .date-primary-text { font-size: 22px; }
    .tm-live-view .market-quotes {
      overflow-x: visible;
      gap: 6px;
    }
    .tm-live-view .market-quote {
      font-size: 13px;
      padding: 4px 10px;
    }
    .tm-live-view .market-quote .mq-label { font-size: 11px; }

	    .tm-live-view .layout {
	      grid-template-columns: minmax(0, 1fr);
	      padding: 0 38px 100px 8px;
	      gap: 0;
	    }
	    .tm-live-view .day-section {
	      scroll-margin-top: 120px;
	    }
	    .tm-live-view .timeline-rail { display: none; }

    .tm-live-view .card { padding: 14px 10px; border-radius: 16px; margin-bottom: 12px; }
    .tm-live-view .daily-card { padding-top: 14px; }
    .tm-live-view .day-section:first-child > .daily-card:first-child,
    .tm-live-view .day-section:first-child > .weekly-card:first-child {
      margin-top: 8px;
    }
    .tm-live-view .intraday-cards-container { gap: 0; }
    .tm-live-view .intraday-cards-container > .card:last-child,
    .tm-live-view .day-section > .card:last-child { margin-bottom: 0; }
    .tm-live-view .intraday-card { padding: 12px 10px; }

	    .tm-live-view .mobile-rail {
	      display: block;
	      position: fixed;
	      right: max(4px, env(safe-area-inset-right));
	      /* Start below the tab bar (60px), live-subview-toggle (~48px) and
	         market-strip (~50px) so the rail doesn't overlap them.
	         Total ≈ 158px; round to 165 for breathing room. */
	      top: 165px; bottom: 24px;
	      width: 32px; z-index: 70;
      touch-action: none;
      -webkit-user-select: none; user-select: none;
      cursor: grab;
    }
    .tm-live-view .mobile-rail::before {
      content: "";
      position: absolute; inset: 0 2px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.58);
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
    }
    .tm-live-view .mobile-rail.expanded::before,
    .tm-live-view .mobile-rail.pressed::before,
    .tm-live-view .mobile-rail.peek::before {
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
      transform: scaleX(1.08);
    }
    .tm-live-view .mobile-rail-track {
      position: absolute; left: 50%; top: 10px; bottom: 10px;
      width: 2px; border-radius: 999px;
      transform: translateX(-50%);
      background: rgba(29, 29, 31, 0.26);
    }
    .tm-live-view .mobile-rail-ticks {
      position: absolute; inset: 10px 0;
      pointer-events: none;
    }
    .tm-live-view .mobile-rail-tick {
      position: absolute; left: 50%;
      width: 7px; height: 1.5px;
      border-radius: 999px;
      background: rgba(29, 29, 31, 0.42);
      transform: translate(-50%, -50%);
      transition: width 0.12s, height 0.12s, background 0.12s, opacity 0.12s;
      opacity: 0.72;
    }
    .tm-live-view .mobile-rail-tick.has-daily { width: 10px; opacity: 0.85; }
    .tm-live-view .mobile-rail-tick.has-weekly {
      width: 15px; height: 2px;
      background: rgba(88, 86, 214, 0.58);
      opacity: 1;
    }
    .tm-live-view .mobile-rail-tick.is-week-start {
      width: 10px; height: 1.5px;
      background: rgba(29, 29, 31, 0.48);
      opacity: 0.82;
    }
    .tm-live-view .mobile-rail-tick.preview,
    .tm-live-view .mobile-rail-tick.selected {
      width: 18px; height: 3px;
      background: var(--accent);
      opacity: 1;
    }
    .tm-live-view[data-tm-theme="dark"] .mobile-rail::before {
      background: rgba(28, 28, 30, 0.72);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    }
    .tm-live-view[data-tm-theme="dark"] .mobile-rail.expanded::before,
    .tm-live-view[data-tm-theme="dark"] .mobile-rail.pressed::before,
    .tm-live-view[data-tm-theme="dark"] .mobile-rail.peek::before {
      background: rgba(36, 36, 38, 0.9);
    }
    .tm-live-view[data-tm-theme="dark"] .mobile-rail-track { background: rgba(255, 255, 255, 0.22); }
    .tm-live-view[data-tm-theme="dark"] .mobile-rail-tick { background: rgba(255, 255, 255, 0.45); }
    .tm-live-view[data-tm-theme="dark"] .mobile-rail-tick.has-weekly {
      background: rgba(94, 92, 230, 0.72);
    }
    .tm-live-view[data-tm-theme="dark"] .mobile-rail-tick.is-week-start {
      background: rgba(255, 255, 255, 0.5);
    }
    @media (prefers-color-scheme: dark) {
      .tm-live-view[data-tm-theme="auto"] .mobile-rail::before {
        background: rgba(28, 28, 30, 0.72);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
      }
      .tm-live-view[data-tm-theme="auto"] .mobile-rail.expanded::before,
      .tm-live-view[data-tm-theme="auto"] .mobile-rail.pressed::before,
      .tm-live-view[data-tm-theme="auto"] .mobile-rail.peek::before {
        background: rgba(36, 36, 38, 0.9);
      }
      .tm-live-view[data-tm-theme="auto"] .mobile-rail-track { background: rgba(255, 255, 255, 0.16); }
      .tm-live-view[data-tm-theme="auto"] .mobile-rail-tick { background: rgba(255, 255, 255, 0.45); }
      .tm-live-view[data-tm-theme="auto"] .mobile-rail-tick.has-weekly {
        background: rgba(94, 92, 230, 0.72);
      }
      .tm-live-view[data-tm-theme="auto"] .mobile-rail-tick.is-week-start {
        background: rgba(255, 255, 255, 0.5);
      }
    }
    .tm-live-view .mobile-rail-thumb {
      position: absolute; left: 50%; top: 10px;
      width: 12px; height: 32px;
      background: var(--accent); border-radius: 999px;
      transform: translateX(-50%);
      border: 2px solid rgba(255, 255, 255, 0.78);
      box-shadow: 0 6px 16px rgba(0, 122, 255, 0.34);
      transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                  transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                  height 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .tm-live-view .mobile-rail.expanded .mobile-rail-thumb,
    .tm-live-view .mobile-rail.peek .mobile-rail-thumb {
      width: 22px; height: 40px;
      transform: translateX(-50%) scale(1.02);
    }
    .tm-live-view .mobile-tooltip {
      display: flex; align-items: center; gap: 8px;
      position: fixed; right: 50px;
      transform: translateY(-50%);
      background: var(--card-strong);
      border: 1px solid var(--card-border);
      border-radius: 12px; padding: 10px 14px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 71;
      opacity: 0; pointer-events: none;
      transition: opacity 0.18s, transform 0.18s;
      font-size: 15px; font-weight: 600; color: var(--text);
      white-space: nowrap;
    }
    .tm-live-view .mobile-tooltip.visible { opacity: 1; }
    .tm-live-view .mobile-tooltip-week {
      font-size: 12px; font-weight: 700; color: var(--text-muted);
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .tm-live-view .mobile-tooltip-date { font-weight: 800; font-size: 16px; }
  }

	/* Layout: TM view starts flush under the .live-subview-toggle. We use
	   padding-top (not margin-top) so the toggle's margin-bottom doesn't collapse
	   with the strip's. The 2px mirrors .live-date-group:first-child .live-date-label
	   { margin-top: 2px } in the Detailed view, so both views show an identical
	   gap below the toggle. */
	.tm-live-view { margin-top: 0; padding: 2px 0 0; background: transparent; color: var(--text); }
	.tm-live-view .content { max-width: none; padding: 0 0 40px; }
		@media (max-width: 760px) {
		  .tm-live-view .content { padding-bottom: 96px; }
		}

/* ─── Android mobile font tuning ─────────────────────────────────────────── */
@media (max-width: 768px) {
  html.is-android #tab-live .live-date-label-text { font-size: 21px; }
  html.is-android #tab-live .live-card-source { font-size: 10px; }
  /* live-card / cluster / pinned 的正文与标题字号统一走 --read-* 变量
     (Android: 见顶部 html.is-android token 块);此处只保留正文内 markdown 子标题。 */
  html.is-android #tab-live .live-card-body h1,
  html.is-android #tab-live .live-card-body h2,
  html.is-android #tab-live .live-card-body h3,
  html.is-android #tab-live .live-card-body h4 { font-size: 14px; }
  html.is-android #tab-live .pinned-panel-body h1,
  html.is-android #tab-live .pinned-panel-body h2,
  html.is-android #tab-live .pinned-panel-body h3,
  html.is-android #tab-live .pinned-panel-body h4 { font-size: 14px; }
  html.is-android #tab-live .live-card-expand { font-size: 12px; }
  html.is-android #tab-live .ticker-signal-label,
  html.is-android #tab-live .ticker-signal { font-size: 11px; }
  html.is-android #tab-live .ticker-arrow { font-size: 9px; }
  html.is-android #tab-live .live-card-meta { font-size: 12px; }
  html.is-android #tab-live .live-card-time-ago,
  html.is-android #tab-live .live-card-coverage { font-size: 11px; }

  html.is-android #tab-wsb .meta-label { font-size: 11px; }
  html.is-android #tab-wsb .meta-value { font-size: 14px; }
  html.is-android #tab-wsb .wsb-nav-label { font-size: 13px; }
  html.is-android #tab-wsb .wsb-run-btn { font-size: 12px; }
  html.is-android #tab-wsb .analysis-card h1 { font-size: 24px; }
  html.is-android #tab-wsb .analysis-card h1 + h3 { font-size: 14px; }
  html.is-android #tab-wsb .analysis-card h2 { font-size: 21px; }
  html.is-android #tab-wsb .analysis-card h3 { font-size: 17px; }
  html.is-android #tab-wsb .analysis-card h4 { font-size: 16px; }
  html.is-android #tab-wsb .analysis-card blockquote { font-size: 13px; }
  html.is-android #tab-wsb .analysis-card code,
  html.is-android #tab-wsb .analysis-card pre { font-size: 12px; }
  html.is-android #tab-wsb .analysis-card table,
  html.is-android #tab-wsb .analysis-card thead th,
  html.is-android #tab-wsb .analysis-card tbody td { font-size: 12px; }
  html.is-android #tab-wsb .sources-section h4,
  html.is-android #tab-wsb .sources-section li { font-size: 12px; }
  html.is-android #tab-wsb .dd-search-input { font-size: 13px; }
  html.is-android #tab-wsb .dd-search-clear { font-size: 11px; }
  html.is-android #tab-wsb .dd-row-title { font-size: 14px; }
  html.is-android #tab-wsb .dd-row-meta,
  html.is-android #tab-wsb .dd-meta-chip { font-size: 10px; }
  html.is-android #tab-wsb .dd-detail-loading { font-size: 12px; }
  html.is-android #tab-wsb .dd-section-title { font-size: 10px; }
  html.is-android #tab-wsb .dd-selftext .dd-section-body h1 { font-size: 17px; }
  html.is-android #tab-wsb .dd-selftext .dd-section-body h2 { font-size: 15.5px; }
  html.is-android #tab-wsb .dd-selftext .dd-section-body h3 { font-size: 14.5px; }
  html.is-android #tab-wsb .dd-selftext .dd-section-body h4,
  html.is-android #tab-wsb .dd-selftext .dd-section-body h5,
  html.is-android #tab-wsb .dd-selftext .dd-section-body h6 { font-size: 14px; }
  html.is-android #tab-wsb .dd-section-body code { font-size: 11.5px; }
  html.is-android #tab-wsb .dd-selftext-toggle { font-size: 12px; }
  html.is-android #tab-wsb .ticker-chip { font-size: 10px; }
  html.is-android #tab-wsb .dd-fact-status { font-size: 9px; }
  html.is-android #tab-wsb .dd-fact-claim { font-size: 12.5px; }
  html.is-android #tab-wsb .dd-fact-note { font-size: 12px; }
  html.is-android #tab-wsb .dd-fact-sources { font-size: 11px; }
  html.is-android #tab-wsb .dd-detail-footer { font-size: 10.5px; }
  html.is-android #tab-wsb .dd-load-more { font-size: 14px; }

  html.is-android .tm-live-view { font-size: 15px; }
  html.is-android .tm-live-view .date-primary-text { font-size: 23px; }
  html.is-android .tm-live-view .market-quote { font-size: 13px; }
  html.is-android .tm-live-view .market-quote .mq-label { font-size: 11px; }
  html.is-android .tm-live-view .card-section-label { font-size: 11.5px; }
  html.is-android .tm-live-view .intraday-time { font-size: 12px; }
  html.is-android .tm-live-view .intraday-time .news-count { font-size: 11px; }
  html.is-android .tm-live-view .mobile-tooltip { font-size: 14px; }
  html.is-android .tm-live-view .mobile-tooltip-week { font-size: 11px; }
  html.is-android .tm-live-view .mobile-tooltip-date { font-size: 15px; }
}
/* ─── End Integrated Time Machine View ─────────────────────────────────── */

/* ─── Pull-to-refresh (iOS standalone PWA — see initPullToRefresh in app.js) ── */
.pull-refresh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;            /* above the fixed tab-bar (z-index: 100) so it stays visible */
  display: flex;
  justify-content: center;
  pointer-events: none;    /* purely a visual indicator — never intercept taps/scroll */
}
.pull-refresh-spinner {
  margin-top: calc(env(safe-area-inset-top, 0px) + 8px);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #007aff);
  background: var(--card-bg, rgba(255, 255, 255, 0.9));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  backdrop-filter: var(--glass-blur, blur(20px));
  -webkit-backdrop-filter: var(--glass-blur, blur(20px));
  opacity: 0;
  /* transform is driven by JS during the drag (translateY + scale + rotate) */
  transform: translateY(-10px) scale(0.7);
  will-change: transform, opacity;
}
.pull-refresh-spinner svg {
  width: 18px;
  height: 18px;
  display: block;
}
.pull-refresh-spinner.is-refreshing svg {
  animation: pull-refresh-spin 0.7s linear infinite;
}
@keyframes pull-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}