/* ============================================================================
   Compounder — App styles.  Design tokens (color, theme, fonts, spacing) live
   in css/tokens.css (single source). Link tokens.css BEFORE this file.
   ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
  background:
    radial-gradient(circle at 16% -8%, rgba(139, 125, 255, 0.12), transparent 32%),
    radial-gradient(circle at 88% 4%, rgba(167, 139, 250, 0.10), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, #102033 6%), var(--bg) 42%, var(--bg));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.trading-view-active {
  overflow: hidden;
}

button,
input,
table,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: var(--accent-ring);
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 3px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }

.app-shell {
  min-height: 100vh;
  display: flex;
  background: transparent;
}

/* ============================================================================
   Sidebar
   ========================================================================== */
.side-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 12px 16px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: width 160ms ease, padding 160ms ease;
  overflow: hidden;
}

.side-nav.open {
  width: 248px;
}

.side-nav.closed {
  width: 78px;
  padding: 16px 10px;
}

.side-nav-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;   /* centre the logo horizontally */
  gap: 0;
  padding: 10px 4px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;    /* transparent PNGs — no box, no divider */
  color: var(--text);
  cursor: pointer;
}

/* Brand / nav toggle: full logo when expanded (large, centred), compact icon when collapsed */
.brand-full {
  height: auto;
  width: auto;
  max-height: 72px;      /* hard cap — the logo block never grows past this, whatever the image size */
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.brand-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  object-fit: contain;
  display: none;
}
.side-nav-head { transition: opacity 120ms ease; }
.side-nav-head:hover { opacity: 0.82; }

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-group {
  display: grid;
  gap: 3px;
}

/* `.nav-item{display:flex}` would otherwise override the [hidden] attribute's display:none,
   leaving admin-only items visible to non-admins. This more-specific rule re-hides them. */
.nav-item[hidden] { display: none !important; }

/* Fear & Greed section styles live in css/fear-greed.css (feature-specific presentation). */
.nav-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
}

.nav-item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity 120ms ease;
}

.nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

.nav-item.active::before {
  opacity: 1;
}

.nav-icon-wrap {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: transparent;
  flex: 0 0 auto;
}

.nav-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-label {
  white-space: nowrap;
}

.side-nav.closed .brand-full,
.side-nav.closed .nav-label {
  display: none;
}
.side-nav.closed .brand-icon { display: block; }

.side-nav.closed .side-nav-head,
.side-nav.closed .nav-item {
  justify-content: center;
  gap: 0;
}

.side-nav.closed .nav-item {
  padding: 9px;
}

.side-nav.closed .side-nav-head { padding-left: 0; padding-right: 0; }

/* ============================================================================
   Main stage + topbar
   ========================================================================== */
.main-stage {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  background: transparent;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-start;
  gap: 0;
  align-items: center;
  width: 100%;
  min-height: 60px;
  margin: 0 0 22px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.topbar-copy {
  display: grid;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.topbar-heading-row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  width: 100%;
}

.topbar h1 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 1.06rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.topbar h1::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.topbar.has-subnav {
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.topbar.has-subnav h1 {
  flex: 0 0 auto;
}

.topbar.has-subnav .topbar-heading-row {
  align-items: center;
  gap: 20px;
}

.topbar.has-subnav .topbar-subnav {
  justify-content: flex-start;
  gap: 6px;
}

.topbar.has-subnav .subnav-tabs.topbar-subnav > .subnav-tab,
.topbar.has-subnav .subnav-tabs.topbar-subnav > .subnav-tab:hover,
.topbar.has-subnav .subnav-tabs.topbar-subnav > .subnav-tab:focus,
.topbar.has-subnav .subnav-tabs.topbar-subnav > .subnav-tab:focus-visible,
.topbar.has-subnav .subnav-tabs.topbar-subnav > .subnav-tab:active {
  min-height: 32px;
  padding: 7px 4px 8px;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: transparent;
  border: 0;
}

.subnav-tabs.topbar-subnav > .subnav-tab.active,
.subnav-tabs.topbar-subnav > .subnav-tab.active:hover,
.subnav-tabs.topbar-subnav > .subnav-tab.active:focus,
.subnav-tabs.topbar-subnav > .subnav-tab.active:focus-visible,
.subnav-tabs.topbar-subnav > .subnav-tab.active:active {
  border: 0 !important;
  border-bottom: 2px solid var(--accent) !important;
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.topbar p {
  display: none;
}

.topbar-actions,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topbar-actions {
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

/* ============================================================================
   Buttons
   ========================================================================== */
.primary-btn,
.secondary-btn {
  border-radius: var(--r-sm);
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.primary-btn {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.primary-btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.secondary-btn {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
}

.secondary-btn:hover {
  background: var(--surface-2);
  border-color: var(--muted-2);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

/* ============================================================================
   Toasts — transient app feedback, top-right, self-dismissing
   ========================================================================== */
/* Above modals (60) and the mobile nav island (1400): a save confirmation or an error
   has to be readable even while a dialog is open. */
.app-toasts {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1500;
  display: grid;
  gap: 10px;
  justify-items: end;
  width: min(380px, calc(100vw - 36px));
  pointer-events: none;   /* the strip never blocks the page... */
}

.app-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted-2);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;   /* ...but each card is hoverable and dismissable */
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.app-toast.is-in { opacity: 1; transform: none; }
.app-toast.is-leaving { opacity: 0; transform: translateX(12px); }

/* The tone lives in the edge bar. `.positive`/`.negative` are global utilities that colour
   text, and a whole paragraph in solid green reads as shouting — so the body colour is set
   explicitly here rather than inherited. Errors keep red text, as the old banner did. */
.app-toast.positive { border-left-color: var(--positive); }
.app-toast.negative { border-left-color: var(--negative); }
.app-toast.positive .app-toast-text { color: var(--text-2); }
.app-toast.negative .app-toast-text { color: var(--negative); }

.app-toast-text { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }

/* Chrome-less, like the onboarding dismiss: the card is small enough already. */
.app-toast-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--muted-2);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color 120ms ease;
}
.app-toast-close:hover { color: var(--text); }
.app-toast-close:focus-visible { color: var(--text); outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 560px) {
  .app-toasts { top: 12px; right: 12px; left: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .app-toast { transition: none; transform: none; }
  .app-toast.is-leaving { transform: none; }
}

.hidden-page {
  display: none !important;
}

.content-page {
  padding: 0 28px;
}

#symbol-detail-page {
  padding-top: 8px;
  padding-bottom: 0;
  overflow: hidden;   /* the two inner columns own the scroll; the page itself never scrolls */
}

/* ============================================================================
   Symbol detail: left rail + tabbed main column
   ========================================================================== */
.symbol-detail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 324px) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  height: calc(100dvh - 118px);   /* fill the viewport below the topbar; columns scroll internally */
}

.symbol-detail-aside {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 72%, var(--surface)) 0, var(--surface) 180px);
  box-shadow: var(--shadow-sm);
}

/* Right column: pinned tabs + independently-scrolling panel area. */
.symbol-detail-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Left column: Back/Full-trading actions + the rail — its OWN scroll, decoupled from the right. */
.symbol-detail-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
}
.symbol-detail-left::-webkit-scrollbar, .symbol-tab-panels::-webkit-scrollbar { width: 7px; }
.symbol-detail-left::-webkit-scrollbar-thumb, .symbol-tab-panels::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); }

/* Compact 1W sparkline in the left rail (opens the full Timeline tab on click) */
.symbol-aside-spark {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.symbol-aside-spark:hover { border-color: var(--accent-ring); background: var(--surface-raised, var(--surface)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.symbol-aside-spark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.symbol-aside-spark .spark-head,
.symbol-aside-spark .spark-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.symbol-aside-spark .spark-head > div { display: grid; gap: 2px; }
.symbol-aside-spark .spark-head > div > span { color: var(--text); font-size: 0.76rem; font-weight: 750; letter-spacing: 0.02em; }
.symbol-aside-spark .spark-head small,
.symbol-aside-spark .spark-foot span { color: var(--muted-2); font-size: 0.65rem; }
.symbol-aside-spark .spark-head > span { font-size: 0.84rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.symbol-aside-spark .spark-svg { width: 100%; height: 48px; display: block; }
.symbol-aside-spark .spark-foot { font-size: 0.68rem; }
.symbol-aside-spark .spark-foot strong { color: var(--accent-strong); font-size: 0.68rem; font-weight: 700; }

.symbol-aside-actions {
  display: flex;
  gap: 8px;
}

.symbol-aside-actions .symbol-aside-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
}

.symbol-aside-actions .symbol-back-btn {
  flex: 0 0 auto;
}

.symbol-aside-actions .symbol-fulltrading-btn {
  flex: 1 1 auto;
}

.symbol-aside-actions .symbol-aside-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.symbol-aside-header {
  display: grid;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--hairline);
}
.symbol-aside-identity { padding: 0; border: 0; }
.symbol-aside-identity .symbol-profile-logo { width: 58px; height: 58px; flex-basis: 58px; border-radius: 16px; }
.symbol-aside-identity .symbol-profile-copy strong { font-size: 1.28rem; }
.symbol-aside-market-meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.symbol-aside-market-meta > span { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); }
.symbol-market-state::before { width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--muted-2); content: ""; }
.symbol-market-state.is-open::before { background: var(--positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 14%, transparent); }
.symbol-market-state.is-extended::before { background: var(--warn); }
.symbol-market-state.is-closed::before { background: var(--muted); }
.symbol-aside-quote { display: grid; gap: 5px; }
.symbol-aside-label { color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; }
.symbol-aside-price { display: flex; flex-direction: column; gap: 4px; }
.symbol-aside-price span { font-size: clamp(2.15rem, 3vw, 2.65rem); font-weight: 760; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.symbol-aside-price-context { color: var(--muted-2); font-size: 0.68rem; line-height: 1.35; }
.symbol-aside-performance { display: grid; gap: 8px; }
.symbol-aside-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.symbol-aside-section-head > span { color: var(--text); font-size: 0.76rem; font-weight: 750; }
.symbol-aside-section-head small { color: var(--muted-2); font-size: 0.65rem; }
.symbol-aside-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.symbol-aside-chips .symbol-hero-chip { position: relative; min-width: 0; min-height: 72px; padding: 10px 9px; gap: 7px; overflow: hidden; }
.symbol-aside-chips .symbol-hero-chip > span { color: var(--muted); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: none; }
.symbol-aside-chips .symbol-hero-chip > strong { font-size: 0.9rem; letter-spacing: -0.02em; }
.symbol-aside-chips .symbol-hero-chip > small { position: absolute; right: 7px; bottom: 6px; color: var(--muted-2); font-size: 0.57rem; font-weight: 750; letter-spacing: 0.08em; }

.symbol-aside-section {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

/* Glossary tooltip */
[data-tip] {
  cursor: help;
}

.metric-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.42;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

/* Hero (legacy / fallback) */
.symbol-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-bottom: 16px;
  padding: 18px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.symbol-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.symbol-hero-chip {
  display: grid;
  gap: 5px;
  min-width: 72px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.symbol-hero-chip span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.symbol-hero-chip strong {
  font-size: 1.0rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Tabs — segmented control */
.symbol-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 0 0 auto;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

/* Scrollable panel area — the pinned tabs stay, only this scrolls (independent of the left rail). */
.symbol-tab-panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
}

.symbol-tab {
  flex: 1 1 auto;
  min-width: 96px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.symbol-tab:hover {
  color: var(--text);
}

.symbol-tab.active {
  color: var(--accent-strong);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

.symbol-tab-panel {
  display: grid;
  gap: 16px;
  animation: symbol-tab-fade 160ms ease;
}

.symbol-tab-panel.hidden-page {
  display: none;
}

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

.symbol-verdict-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.symbol-verdict-row strong {
  color: var(--text);
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.symbol-verdict-row span {
  color: var(--muted);
  font-size: 0.84rem;
}

.symbol-section-card {
  gap: 14px;
}

.symbol-section-body {
  display: grid;
  gap: 14px;
}

/* Valuation & Fundamentals: decision-first workspace */
.symbol-tab-panel[data-panel="analysis"] {
  max-width: 1240px;
  margin-inline: auto;
}
.analysis-workspace-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 2px 2px 6px;
}
.analysis-workspace-head > div { display: grid; gap: 4px; }
.analysis-eyebrow,
.analysis-topic-heading span {
  color: var(--accent-strong);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.analysis-workspace-head h2,
.analysis-topic-heading h3 { margin: 0; color: var(--text); letter-spacing: -0.025em; }
.analysis-workspace-head h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.analysis-workspace-head p,
.analysis-topic-heading p { margin: 0; color: var(--muted); line-height: 1.5; }
.analysis-workspace-head p { font-size: 0.88rem; }
.analysis-workspace-note {
  max-width: 250px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}
.analysis-data-trust {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--positive) 34%, var(--border));
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--positive) 5%, var(--surface));
}
.analysis-data-trust.is-pending {
  border-color: color-mix(in srgb, #d7922f 48%, var(--border));
  background: color-mix(in srgb, #d7922f 7%, var(--surface));
}
.analysis-data-trust-loading { color: var(--muted); font-size: 0.78rem; }
.analysis-trust-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.analysis-trust-head > div { display: flex; align-items: center; gap: 8px; }
.analysis-trust-head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--positive) 14%, transparent);
}
.analysis-data-trust.is-pending .analysis-trust-head i {
  background: #d7922f;
  box-shadow: 0 0 0 4px color-mix(in srgb, #d7922f 16%, transparent);
}
.analysis-trust-head strong { color: var(--text); font-size: 0.78rem; }
.analysis-trust-head > span {
  color: var(--positive);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.analysis-data-trust.is-pending .analysis-trust-head > span { color: #d7922f; }
.analysis-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.analysis-trust-chip {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}
.analysis-trust-chip > span {
  color: var(--muted-2);
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.analysis-trust-chip strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analysis-trust-chip small { color: var(--muted); font-size: 0.65rem; line-height: 1.3; }
.analysis-data-trust > p { margin: 0; color: var(--muted); font-size: 0.68rem; line-height: 1.45; }
.analysis-subnav {
  position: sticky;
  top: 8px;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}
.analysis-subtab {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  text-align: left;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.analysis-subtab span { font-size: 0.82rem; font-weight: 750; }
.analysis-subtab small { color: var(--muted-2); font-size: 0.66rem; font-weight: 500; }
.analysis-subtab:hover { color: var(--text); background: var(--surface); }
.analysis-subtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.analysis-subtab.active {
  color: var(--accent-strong);
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.analysis-subtab.active small { color: var(--muted); }
.analysis-topic { display: grid; gap: 14px; }
.analysis-topic-heading {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: end;
  padding: 8px 2px 2px;
}
.analysis-topic-heading > div { display: grid; gap: 4px; }
.analysis-topic-heading h3 { font-size: 1.08rem; }
.analysis-topic-heading p { max-width: 580px; font-size: 0.82rem; }
.analysis-primary-panel { border-color: var(--border-strong); }
.analysis-topic-intro { margin: 0 2px; color: var(--muted); font-size: 0.84rem; line-height: 1.45; }
@media (max-width: 760px) {
  .analysis-workspace-head { align-items: start; }
  .analysis-workspace-note { display: none; }
  .analysis-subnav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .analysis-subnav::-webkit-scrollbar { display: none; }
  .analysis-subtab { flex: 0 0 148px; }
  .analysis-topic-heading { grid-template-columns: 1fr; gap: 6px; }
  .analysis-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .analysis-trust-grid { grid-template-columns: 1fr; }
  .analysis-trust-head { align-items: flex-start; }
}

/* Panels / cards */
.symbol-profile-card,
.symbol-metric-card,
.symbol-info-panel {
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.symbol-profile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.symbol-profile-logo {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}

.symbol-profile-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.symbol-profile-copy strong {
  font-size: 1.22rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.symbol-profile-copy span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.symbol-metric-card span,
.symbol-info-title,
.symbol-info-list span,
.symbol-recent-item em {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.15;
}

.symbol-metric-card span,
.symbol-info-title {
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
}

.symbol-info-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-lg);
}

.symbol-info-list {
  display: grid;
  gap: 9px;
}

.symbol-info-list div {
  display: grid;
  grid-template-columns: minmax(90px, 0.72fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.symbol-info-list strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.symbol-fundamentals-panel .symbol-info-title {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.symbol-fundamentals-title-row .symbol-info-title {
  grid-column: auto;
}

.symbol-fundamentals-panel.fundamentals-collapsed .symbol-info-title {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

.symbol-fundamentals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
}

.symbol-fundamentals-grid.hidden-page {
  display: none;
}

.symbol-fundamental-card {
  display: grid;
  gap: 3px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.symbol-fundamental-card span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.symbol-fundamental-card strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.neutral {
  color: var(--muted);
}

.symbol-trading-panel,
.symbol-fundamentals-panel,
#symbol-price-panel,
.timeline-meta,
.timeline-stats,
.timeline-filters,
.timeline-control-row,
.timeline-chart-shell,
.timeline-axis,
.symbol-detail-chart-panel > .timeline-hover-tooltip {
  grid-column: 1 / -1;
}

/* ============================================================================
   Trading View panel
   ========================================================================== */
.symbol-trading-panel {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-bottom: 26px;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.symbol-trading-panel.hidden-page {
  display: none;
}

body.trading-view-active .symbol-trading-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 16px 18px 12px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

body.trading-view-active .symbol-trading-head {
  align-items: center;
}

body.trading-view-active .symbol-trading-chart {
  height: auto;
  min-height: 0;
}

body.trading-view-active .symbol-trading-foot {
  min-height: 22px;
}

.symbol-trading-head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.symbol-trading-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Back sits on the left; the range switcher is pushed to the right edge. */
.symbol-trading-head .symbol-trading-ranges {
  margin-left: auto;
}

.symbol-trading-meta,
.symbol-trading-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.symbol-trading-ranges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.symbol-trading-ranges .timeline-filter-btn {
  padding: 6px 10px;
}

.symbol-trading-predict-btn:hover,
.symbol-trading-predict-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.symbol-trading-close-btn {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  padding: 7px 14px;
  font-weight: 600;
}

.symbol-trading-close-btn:hover {
  border-color: var(--negative);
  color: var(--negative);
}

/* Full trading view uses the same arrow "Back" button as the symbol detail view. */
.symbol-trading-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  flex: 0 0 auto;
}

.symbol-trading-back-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* Shared loading visual (breathing Compounder logo) — reused by the qualitative AI panel and the
   trading view. Keyframes ql-breathe / ql-halo / ql-breathe-fade are defined with the qualitative styles. */
.app-loading-orb { position: relative; display: flex; align-items: center; justify-content: center; width: 108px; height: 108px; }
.app-loading-orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 68%); animation: ql-halo 2.6s ease-in-out infinite; }
.app-loading-logo { position: relative; width: 84px; height: 84px; object-fit: contain; animation: ql-breathe 2.4s ease-in-out infinite; }
.app-loading-title { font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.app-loading-sub { font-size: 0.85rem; line-height: 1.55; color: var(--muted); max-width: 440px; text-align: center; }
/* Full-screen boot loader shown from page load until the first data render. */
.app-boot-loading {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
  transition: opacity 0.4s ease;
}
.app-boot-loading.is-hidden { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .app-loading-logo { animation: ql-breathe-fade 2.4s ease-in-out infinite; }
  .app-loading-orb::before { animation: none; opacity: 0.4; }
}

/* Full-panel loading overlay for the trading view while candles load. */
.symbol-trading-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--surface);
}
.symbol-trading-loading.hidden-page { display: none; }

/* ============================================================================
   Trading View — standalone section (chart + side symbol table)
   ========================================================================== */
.tv-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: 16px;
  height: calc(100dvh - 150px);
  min-height: 460px;
}
@media (min-width: 901px) {
  /* The header consumes 64px while the chart layout leaves 86px of viewport
     room. Split that breathing room around the panel instead of leaving it all
     below it. */
  #trading-view-page { padding-top: clamp(28px, 4vh, 44px); }
}
/* Collapsible right-hand symbol list. */
.tv-page-layout.side-hidden { grid-template-columns: 1fr; }
.tv-page-layout.side-hidden .tv-page-side { display: none; }
.tv-side-toggle { flex: none; padding: 6px 10px; display: inline-flex; align-items: center; }
.tv-side-toggle[aria-pressed="false"] { opacity: 0.6; }
.tv-page-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.tv-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tv-page-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tv-page-symbol { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.tv-page-name { font-size: 0.9rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-page-head .symbol-trading-ranges { margin-left: auto; }
.tv-page-chart-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.tv-page-chart { position: absolute; inset: 0; }
/* --- Trading View drawing tools ------------------------------------------- */
/* A compact bar between the OHLC readout and the chart: tool picker, a live
   contextual hint, and the destructive actions pushed to the far edge. */
.tv-ann-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tv-ann-tools,
.tv-ann-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.tv-ann-tools {
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.tv-ann-actions { margin-left: auto; }
.tv-ann-tool,
.tv-ann-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  padding: 4px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.tv-ann-tool svg,
.tv-ann-action svg { flex: none; }
.tv-ann-tool:hover,
.tv-ann-action:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.tv-ann-tool.active {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.tv-ann-action { border-color: var(--border); background: var(--surface); }
.tv-ann-action:disabled { opacity: 0.45; cursor: default; }
.tv-ann-tool:focus-visible,
.tv-ann-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tv-ann-hint {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Annotation overlay. It is sized to the chart's pane (plot area only, so it
   never paints over the price or time axes) and stays click-through: every
   interaction is routed through the chart's own click/crosshair events, which
   keeps panning and zooming untouched. */
.tv-ann-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
/* The chart writes its cursor inline on the pane, so the drawing affordance
   has to outrank it. */
.tv-page-chart-wrap.tv-ann-drawing,
.tv-page-chart-wrap.tv-ann-drawing canvas,
.tv-page-chart-wrap.tv-ann-drawing .tv-page-chart > div {
  cursor: crosshair !important;
  touch-action: none;
}

.tv-ann-line { fill: none; stroke: var(--accent); stroke-width: 1.75; }
.tv-ann-line-h { stroke-dasharray: 6 4; }
.tv-ann-handle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; opacity: 0; }
.tv-ann.is-active .tv-ann-handle,
.tv-ann.is-ghost .tv-ann-handle { opacity: 1; }
.tv-ann.is-active .tv-ann-line { stroke-width: 2.5; }
.tv-ann.is-ghost .tv-ann-line { stroke-dasharray: 5 4; opacity: 0.85; }
.tv-ann-arrowhead { fill: var(--accent); stroke: none; }
.tv-ann-band { fill: var(--accent-soft); stroke: none; }
.tv-ann.is-up .tv-ann-line,
.tv-ann.is-up .tv-ann-handle { stroke: var(--positive); }
.tv-ann.is-up .tv-ann-arrowhead { fill: var(--positive); }
.tv-ann.is-down .tv-ann-line,
.tv-ann.is-down .tv-ann-handle { stroke: var(--negative); }
.tv-ann.is-down .tv-ann-arrowhead { fill: var(--negative); }
.tv-ann-label {
  fill: var(--text);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
}
.tv-ann-label-bg { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.tv-ann.is-up .tv-ann-label-bg { stroke: var(--positive); }
.tv-ann.is-down .tv-ann-label-bg { stroke: var(--negative); }
.tv-ann-label-bg-level { stroke: var(--accent); }
.tv-page-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: transparent;
}
.tv-side-title { padding: 14px 14px 10px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.tv-side-table-wrap { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.tv-page-side table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tv-page-side col.tv-col-sym { width: auto; }
.tv-page-side thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); text-align: right; padding: 8px 8px; border-bottom: 1px solid var(--border); }
.tv-page-side thead th:first-child { text-align: left; padding-left: 14px; }
.tv-page-side thead th:not(:first-child) { width: 62px; }
.tv-side-row { cursor: pointer; transition: background 120ms ease; }
.tv-side-row td { padding: 8px 8px; border-bottom: 1px solid var(--hairline, var(--border)); font-size: 0.82rem; text-align: right; font-variant-numeric: tabular-nums; }
.tv-side-row td:first-child { text-align: left; padding-left: 14px; }
.tv-side-row:hover { background: var(--surface-2); }
.tv-side-row-active { background: var(--accent-soft); }
.tv-side-row-active:hover { background: var(--accent-soft); }
.tv-side-ident { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.tv-side-ident .asset-symbol-copy { display: flex; flex-direction: column; min-width: 0; }
.tv-side-ident .asset-symbol-copy strong { font-size: 0.86rem; color: var(--text); }
.tv-side-ident .asset-symbol-copy em { font-style: normal; font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; }
.tv-side-row .positive { color: var(--positive); }
.tv-side-row .negative { color: var(--negative); }
.tv-side-na { color: var(--muted-2); }
@media (max-width: 900px) {
  .tv-page-layout { grid-template-columns: 1fr; height: auto; }
  .tv-page-chart-wrap { height: 380px; flex: none; }
  .tv-page-side { max-height: 60vh; }
}
/* Phones: compact, standardized header — symbol + toggle on one line, ranges on a single
   horizontal-scroll row (no wrap, no scrollbar), and a tighter OHLC readout. */
@media (max-width: 700px) {
  .tv-page-main { padding: 14px; gap: 10px; }
  .tv-page-head { gap: 10px; }
  .tv-page-title { flex: 1 1 auto; }
  .tv-page-symbol { font-size: 1.15rem; }
  .tv-page-name { font-size: 0.82rem; }
  .tv-side-toggle { order: 2; margin-left: auto; }
  .tv-page-head .symbol-trading-ranges {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .tv-page-head .symbol-trading-ranges::-webkit-scrollbar { display: none; }
  .tv-page-head .symbol-trading-ranges .timeline-filter-btn { flex: 0 0 auto; }
  .tv-page-chart-wrap { height: 340px; }
  #trading-view-page .symbol-trading-readout { gap: 6px 14px; font-size: 0.8rem; }
  #trading-view-page .symbol-trading-foot { font-size: 0.72rem; }
  /* Tools and actions share one scrollable row; the hint drops to its own line
     so neither the picker nor the chart loses height. */
  .tv-ann-bar { gap: 8px; }
  .tv-ann-tools,
  .tv-ann-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .tv-ann-tools::-webkit-scrollbar,
  .tv-ann-actions::-webkit-scrollbar { display: none; }
  .tv-ann-tool,
  .tv-ann-action { flex: 0 0 auto; }
  /* Full width on its own line, but still a single ellipsised line: a hint that
     grew to two lines would reflow the bar and shove the chart down mid-draw. */
  .tv-ann-hint { flex: 1 1 100%; order: 3; }
}
/* Very narrow phones: icon-only buttons, labels stay for screen readers via
   aria-label/title. */
@media (max-width: 540px) {
  .tv-ann-tool span,
  .tv-ann-action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tv-ann-tool,
  .tv-ann-action { padding: 6px; }
}

.symbol-trading-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  min-height: 24px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.symbol-trading-readout span {
  white-space: nowrap;
}

.symbol-trading-chart {
  min-width: 0;
  width: 100%;
  height: clamp(420px, 50vh, 620px);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}

body.trading-view-active .symbol-trading-chart {
  border: 0;
}

.symbol-trading-empty {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
  padding: 18px;
}

.symbol-trading-foot {
  justify-content: space-between;
  align-items: center;
}

.symbol-trading-foot a {
  color: var(--accent);
  text-decoration: none;
}

.symbol-trading-foot a:hover {
  text-decoration: underline;
}

/* Generic panel */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}

.positive {
  color: var(--positive);
}

.negative {
  color: var(--negative);
}

.panel.wide {
  grid-column: span 2;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.panel-head h3 {
  margin: 0;
  font-size: 1.0rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.market-add-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 120ms ease, border-color 120ms ease;
}

.market-add-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.panel-badge {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.panel-badge.neutral {
  background: var(--accent-2-soft);
  color: var(--accent-2);
}

.ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
}

.ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--surface);
}

.ring span {
  position: relative;
  z-index: 1;
  font-weight: 700;
}

/* ============================================================================
   Tables
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.market-data-shell {
  display: grid;
  gap: 12px;
}

/* Row 1: quick value filters. They grow to fill the row evenly so there are no ragged gaps. */
.market-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.market-filter-chips { display: contents; }   /* chips become direct flex items of the row */
.market-filter-chip {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.market-filter-chip:hover { color: var(--text); border-color: var(--accent); }
.market-filter-chip.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Row 2: search (left, grows) + interval + sync + add (right) — always one line. */
.market-controls-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

.market-watchlist-summary {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-watchlist-summary .summary-sep { color: var(--muted-2); margin: 0 2px; }

.market-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  justify-content: flex-end;
}

.market-search-field {
  flex: 1 1 auto;      /* search grows to fill the row, pushing interval/sync/add to the right */
  min-width: 0;
}

.market-search-field input {
  width: 100%;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  padding: 9px 13px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.market-search-field input::placeholder {
  color: var(--muted-2);
}

.market-search-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.market-sync-field {
  flex: 0 0 auto;
}

.market-table-floating {
  background: var(--surface);
}

/* Market Data table: full set of columns with horizontal overflow when needed.
   The Symbol column becomes sticky only at tablet/mobile widths (see the scoped
   responsive rule below), so desktop rows can share one continuous interaction state. */
#market-data-page .market-table-floating { overflow-x: auto; }
#market-data-page .market-table-floating table { min-width: max-content; }

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}

tbody tr:last-child td {
  border-bottom: 0;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 1;
}

th {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}

tbody tr {
  transition: background 100ms ease;
}

tbody tr:hover {
  background: var(--surface-2);
}

.symbol-link {
  appearance: none;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.symbol-link:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.metric-link-secondary.positive {
  color: var(--positive);
}

.metric-link-secondary.negative {
  color: var(--negative);
}

.asset-symbol-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.asset-symbol-copy strong {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.asset-symbol-copy em {
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-price-value,
.market-change-link {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

.market-price-value {
  font-weight: 600;
}

.market-symbol-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.market-change-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.market-change-value {
  color: var(--text);
  font-size: 1.04rem;
  line-height: 1.1;
  font-weight: 500;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.market-change-cell em {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.market-change-cell em.positive {
  color: var(--positive);
}

.market-change-cell em.negative {
  color: var(--negative);
}

/* Company marks are rounded squares across every surface — Market Data, Portfolio,
   Overview, Market Calendar and symbol detail — matching the public landing. Size
   variants scale their radius proportionally rather than inheriting a flat value. */
.asset-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: none;
}

.asset-logo-img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  display: block;
  opacity: 0;
  transition: opacity 120ms ease;
}

.asset-logo-fallback {
  grid-area: 1 / 1;
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.asset-logo.logo-loaded .asset-logo-img {
  opacity: 1;
}

.asset-logo.logo-loaded .asset-logo-fallback {
  display: none;
}

tr.market-row-muted td {
  opacity: 0.55;
}

tr.market-row-muted .table-link-btn:hover {
  color: var(--text);
}

/* Realtime price flash — colors only the number text, never the cell box */
.price-flash-up {
  animation: priceFlashUp 5.6s ease-out;
}

.price-flash-down {
  animation: priceFlashDown 5.6s ease-out;
}

@keyframes priceFlashUp {
  0%   { color: var(--positive); }
  55%  { color: var(--positive); }
  100% { color: inherit; }
}

@keyframes priceFlashDown {
  0%   { color: var(--negative); }
  55%  { color: var(--negative); }
  100% { color: inherit; }
}

/* ============================================================================
   Forms / modal / selects
   ========================================================================== */
.market-watch-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 220px) auto;
  gap: 16px;
  margin: 0 0 20px;
}

.market-watch-form-modal {
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 22, 27, 0.4);
  backdrop-filter: blur(3px);
}

.modal-overlay.hidden-page {
  display: none;
}

.modal-card {
  width: min(560px, 100%);
  padding: 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.modal-head {
  margin-bottom: 18px;
}

.modal-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.market-provision-card {
  width: min(680px, 100%);
}

.market-provision-card .modal-head {
  align-items: flex-start;
}

#market-provision-help {
  max-width: 46ch;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.market-provision-status {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.market-watch-form textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
}

.market-provision-preview {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.market-provision-summary {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.market-provision-list {
  display: grid;
  gap: 10px;
  max-height: min(52vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.market-provision-item {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.market-provision-item .market-provision-status-head > span:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.market-provision-item .market-provision-status-head small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.market-provision-item .form-actions {
  margin-top: 1px;
}

.market-provision-status[hidden] {
  display: none;
}

.market-provision-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.market-provision-status-head strong {
  color: var(--text);
  font-size: 0.94rem;
}

.market-provision-status-head span,
.market-provision-status p {
  color: var(--muted);
  font-size: 0.84rem;
}

.market-provision-status p {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.market-provision-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.market-provision-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 180ms ease;
}

.modal-close-btn {
  line-height: 1;
}

.market-add-btn-floating {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
}

.market-watch-form label {
  display: grid;
  gap: 7px;
}

.select-field {
  position: relative;
  display: block;
  width: 100%;
}

.select-field::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.select-field-compact {
  min-width: 96px;
}

.app-select {
  width: 100%;
  appearance: none;
  min-height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  padding: 9px 38px 9px 13px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.app-select:hover {
  border-color: var(--muted-2);
}

.app-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.app-select:invalid {
  color: var(--muted);
}

.app-select option {
  color: var(--text);
  background: var(--surface);
}

.market-watch-form label span {
  color: var(--muted);
  font-size: 0.86rem;
}

.market-watch-form input,
.market-watch-form .app-select {
  width: 100%;
  outline: none;
}

.market-watch-form input {
  min-height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  padding: 9px 13px;
}

.market-watch-form input:focus,
.market-watch-form .app-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ============================================================================
   Price timeline chart
   ========================================================================== */
.symbol-chart-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.symbol-chart-title {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.chart-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.intrinsic-toggle {
  min-height: 32px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.intrinsic-toggle:not(.active) {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--muted);
}

/* Expand icon (top-right of the timeline) — shortcut into the full trading view. */
.timeline-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  width: 36px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.timeline-expand-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.timeline-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 0.86rem;
}

.timeline-axis-title {
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
}

.timeline-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.88rem;
}

.timeline-stats-values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.timeline-stats .chart-toggles {
  align-items: center;
}

.timeline-stats span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.timeline-stats .positive {
  color: var(--positive);
}

.timeline-stats .negative {
  color: var(--negative);
}

.timeline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.timeline-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin: 14px 0 4px;
}

.timeline-filter-btn {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}

.timeline-filter-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.timeline-filter-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.timeline-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.timeline-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.timeline-chart-legend span::before {
  content: "";
  width: 20px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--chart-line);
}

.timeline-chart-legend .value-line::before {
  background: repeating-linear-gradient(90deg, var(--chart-line-2) 0 8px, transparent 8px 13px);
}

.timeline-chart-legend .extended-line::before {
  background: repeating-linear-gradient(90deg, var(--warn) 0 5px, transparent 5px 9px);
}

.timeline-extended-line {
  stroke: var(--warn);
  stroke-width: 3.2;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

#symbol-price-panel {
  position: relative;
}

.timeline-chart {
  width: 100%;
  height: 320px;
  display: block;
  overflow: visible;
  cursor: crosshair;
}

.timeline-chart-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 12px;
  align-items: stretch;
  margin: 14px 0;
}

.timeline-y-axis {
  position: relative;
  display: block;
  min-height: 320px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: left;
  padding: 0;
}

.timeline-y-axis > .timeline-axis-title {
  position: absolute;
  top: -18px;
  left: 0;
}

.timeline-y-labels {
  --timeline-plot-pad: 20px;
  position: relative;
  display: block;
  height: 100%;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
}

.timeline-y-labels span {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
}

.timeline-y-labels span:nth-child(1) { top: var(--timeline-plot-pad); }
.timeline-y-labels span:nth-child(2) { top: calc(25% + (var(--timeline-plot-pad) / 2)); }
.timeline-y-labels span:nth-child(3) { top: 50%; }
.timeline-y-labels span:nth-child(4) { top: calc(75% - (var(--timeline-plot-pad) / 2)); }
.timeline-y-labels span:nth-child(5) { top: calc(100% - var(--timeline-plot-pad)); }

.timeline-y-axis span,
.timeline-axis span,
.timeline-x-labels span {
  white-space: nowrap;
}

.timeline-y-axis span:not(.timeline-axis-title),
.timeline-axis span:not(.timeline-axis-title),
.timeline-x-labels span {
  font-variant-numeric: tabular-nums;
}

.timeline-axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 12px;
  align-items: start;
  justify-content: stretch;
  color: var(--muted);
  font-size: 0.86rem;
}

.timeline-axis > .timeline-axis-title {
  grid-column: 1 / -1;
}

.timeline-x-labels {
  --timeline-plot-x-pad: 1.6667%;
  grid-column: 1;
  position: relative;
  min-height: 18px;
}

.timeline-x-labels span {
  position: absolute;
  top: 0;
  max-width: 22%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  transform: translateX(-50%);
}

.timeline-x-labels span:first-child { left: var(--timeline-plot-x-pad); text-align: left; transform: none; }
.timeline-x-labels span:nth-child(2) { left: calc(25% + (var(--timeline-plot-x-pad) / 2)); }
.timeline-x-labels span:nth-child(3) { left: 50%; }
.timeline-x-labels span:nth-child(4) { left: calc(75% - (var(--timeline-plot-x-pad) / 2)); }
.timeline-x-labels span:last-child { left: calc(100% - var(--timeline-plot-x-pad)); text-align: right; transform: translateX(-100%); }

.timeline-axis-spacer {
  grid-column: 2;
}

.timeline-hover-surface {
  fill: transparent;
}

.timeline-chart,
.symbol-timing-chart {
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none;
}

.timeline-chart.is-scrubbing,
.symbol-timing-chart.is-scrubbing {
  touch-action: none;
  cursor: ew-resize;
}

.timeline-hover-guide {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  opacity: 0.5;
  pointer-events: none;
}

.timeline-hover-dot {
  fill: var(--chart-line);
  stroke: var(--surface);
  stroke-width: 2;
  pointer-events: none;
}

.timeline-hover-dot-intrinsic {
  fill: var(--chart-line-2);
}

.timeline-hover-tooltip {
  position: fixed;
  z-index: 30;
  min-width: 170px;
  max-width: min(260px, calc(100% - 16px));
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  white-space: nowrap;
}

.timeline-hover-tooltip[aria-hidden="true"] {
  display: none !important;
}

.timeline-hover-tooltip span {
  color: var(--muted);
  font-size: 0.78rem;
}

.symbol-chart-card .timeline-chart {
  height: clamp(390px, calc(100vh - 560px), 620px);
}

.symbol-chart-card .timeline-y-axis {
  min-height: clamp(390px, calc(100vh - 560px), 620px);
}

.symbol-chart-card .timeline-y-labels {
  --timeline-plot-pad: clamp(24px, calc(6.25vh - 35px), 39px);
}

.timeline-hover-tooltip strong {
  color: var(--text);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
}

.form-span-2 {
  grid-column: span 2;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.empty-cell {
  color: var(--muted);
  text-align: center;
}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .hero-grid,
  .dashboard-grid,
  .market-stat-grid,
  .roadmap-grid,
  .symbol-detail-layout {
    grid-template-columns: 1fr;
  }

  .panel.wide { grid-column: span 1; }
  .symbol-detail-side { grid-template-columns: 1fr; }
  .symbol-overview-grid { grid-template-columns: 1fr; }
  .symbol-detail-layout { grid-template-columns: 1fr; height: auto; }
  .symbol-detail-left { position: static; max-height: none; overflow: visible; padding-right: 0; }
  /* Stacked single column → let the page scroll normally instead of the desktop dual-scroll. */
  .symbol-detail-main { display: block; }
  .symbol-tab-panels { overflow-y: visible; padding-right: 0; }
  /* Timeline tab: no full-height fill on mobile (the page flows) — give the chart a fixed height. */
  .symbol-tab-panel[data-panel="timeline"],
  .symbol-tab-panel[data-panel="timeline"] .symbol-chart-card { height: auto; }
  .symbol-tab-panel[data-panel="timeline"] .timeline-chart-shell { flex: none; min-height: 0; }
  .symbol-tab-panel[data-panel="timeline"] .timeline-chart { height: 300px; }
  .symbol-aside-chips { grid-template-columns: repeat(3, minmax(78px, 1fr)); }
  .symbol-fundamentals-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
}

/* Phones: tidy the individual-symbol page — one-row scrollable tabs and a compact glance rail. */
@media (max-width: 700px) {
  .symbol-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 2px;
  }
  .symbol-tabs::-webkit-scrollbar { display: none; }
  .symbol-tab { flex: 0 0 auto; min-width: 0; padding: 9px 14px; white-space: nowrap; }
  /* The desktop dual-scroll clips with overflow:hidden — let the page flow so sticky tabs work. */
  #symbol-detail-page { overflow: visible; }
  /* Pin the tab bar just under the (sticky) topbar so navigation is always reachable. */
  #symbol-detail-page .symbol-tabs { position: sticky; top: 64px; z-index: 30; margin-bottom: 12px; }
  /* Heavy glance sections (moved below the tabs on mobile by JS) get a little top spacing. */
  #symbol-detail-page .symbol-detail-main > .symbol-aside-signals,
  #symbol-detail-page .symbol-detail-main > .symbol-aside-section { margin-top: 14px; }

  /* Compact the left rail so the tabs and content are reachable without a huge scroll. */
  .symbol-detail-aside { padding: 14px; gap: 10px; }
  .symbol-aside-spark { display: none; }            /* redundant with the Timeline tab */
  .symbol-aside-actions .symbol-aside-btn { min-height: 36px; }
  .symbol-aside-section { padding-top: 10px; }
  .symbol-detail-left { gap: 10px; }
  #symbol-detail-page .symbol-tab-panels { padding-top: 2px; }
}

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }

  /* Mobile: the sidebar becomes a floating bottom island — icons only (no brand, no labels). */
  .side-nav,
  .side-nav.open,
  .side-nav.closed {
    position: fixed;
    left: 12px;
    right: 74px;                 /* fill the left space; small gap to the chat button on the right */
    bottom: 16px;
    top: auto;
    width: auto;
    height: 56px;                /* same height as the chat FAB → centers line up exactly */
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
    z-index: 60;
  }

  .side-nav .side-nav-head { display: none; }            /* no brand in the icon dock */

  /* The dock scrolls horizontally when the icons don't fit (e.g. admin's 8 sections),
     with the scrollbar hidden. When they DO fit, they spread evenly across the island. */
  .side-nav .nav-list {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;                 /* Firefox: no scrollbar */
    -ms-overflow-style: none;              /* old Edge */
    -webkit-overflow-scrolling: touch;     /* momentum scroll on iOS */
    overscroll-behavior-x: contain;        /* don't chain the scroll to the page */
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
  }
  .side-nav .nav-list::-webkit-scrollbar { display: none; }   /* Chrome/Safari: no scrollbar */
  .side-nav .nav-group {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: max-content;                     /* grow past the island → items keep full size and scroll */
    min-width: 100%;                        /* but fill it (and spread) when there's room */
    justify-content: space-evenly;
    padding: 0 2px;
  }
  .side-nav .nav-item { scroll-snap-align: center; }
  .side-nav .nav-item,
  .side-nav.closed .nav-item {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    padding: 0; gap: 0; border-radius: 50%;   /* round highlight, not a square, to suit the island */
    justify-content: center; align-items: center;
  }
  .side-nav .nav-item::before { display: none; }
  .side-nav .nav-icon-wrap { width: 23px; height: 23px; }
  .side-nav .nav-label,
  .side-nav.closed .nav-label {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Selected section: the original simple, elegant accent-soft — now a round highlight. */
  .side-nav .nav-item { color: var(--muted); transition: background 140ms ease, color 140ms ease; }
  .side-nav .nav-item.active,
  .side-nav .nav-item.active:hover { background: var(--accent-soft); color: var(--accent-strong); }
  /* No hover fill on the touch island (avoids the sticky square/circle highlight after tapping). */
  .side-nav .nav-item:not(.active):hover { background: transparent; color: var(--muted); }
  .side-nav .nav-item:not(.active):active { background: var(--surface-3); }

  /* Keep content clear of the floating dock. (Chat button alignment is set after the .cie-chat
     base rule — see the trailing media query — so it wins the cascade.) */
  .main-stage { padding: 0 0 84px; }

  .content-page,
  .topbar { padding-left: 18px; padding-right: 18px; }

  .symbol-tabs { top: 0; }
}

@media (max-width: 720px) {
  .scenario-readout {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Header stays on ONE line — section · theme · profile — shrinking to fit, never wrapping. */
  .topbar {
    min-height: auto;
    padding: 10px 16px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .topbar-copy { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .topbar p { display: none; }                         /* drop the secondary description on phones */
  .topbar-heading-row { gap: 0; min-width: 0; }
  .topbar h1 { font-size: 0.98rem; display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar h1::before { display: none; }                /* the accent bar would block ellipsis; hide on mobile */
  .topbar-user { flex: 0 0 auto; gap: 6px; }
  .topbar-theme { flex: 0 0 auto; }
  .theme-switch { width: 50px; height: 30px; }
  .theme-switch-track { width: 48px; height: 28px; }
  .theme-switch-thumb { width: 20px; height: 20px; }
  :root[data-theme="light"] .theme-switch-thumb { transform: translateX(22px); }
  .topbar-profile-btn { width: 44px; height: 44px; padding: 0; }
  .notification-bell { width: 44px; height: 44px; }
  .notification-bell svg { width: 17px; height: 17px; }
  .notifications-panel { position: fixed; top: 62px; right: 12px; left: 12px; width: auto; max-height: calc(100dvh - 74px); }
  .notifications-list { max-height: min(440px, calc(100dvh - 190px)); }
  .topbar-avatar { width: auto; height: auto; }
  .topbar-avatar svg { width: 17px; height: 17px; }
  .topbar-user-name { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-chevron { margin-left: 0; }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  /* Row 2 stays on one line even on phones: search shrinks, interval/sync/add keep their size. */
  .market-search-field { flex: 1 1 auto; min-width: 0; }
  .market-watchlist-summary { white-space: normal; }

  /* Full table with horizontal scroll; the Symbol column stays frozen (sticky rule above).
     Keep the frozen Symbol compact (logo + ticker) so there's room to scroll the rest. */
  #market-data-page .market-table-floating th,
  #market-data-page .market-table-floating td { padding: 11px 10px; }
  #market-data-page .market-table-floating th:first-child,
  #market-data-page .market-table-floating td:first-child { padding-left: 14px; }
  #market-data-page .asset-symbol-copy em { display: none; }   /* company name → symbol detail */
  #market-data-page .asset-logo { width: 26px; height: 26px; border-radius: 8px; }
  #market-data-page .th-full { display: none; }                /* "Actual Price" → "Price" */

  .hero-card-grid,
  .market-watch-form,
  .market-watch-form-modal {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .form-span-2 { grid-column: span 1; }

  th,
  td { padding: 11px 12px; }

  .timeline-chart-shell {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .timeline-y-axis {
    display: grid;
    grid-template-rows: auto auto;
    min-height: auto;
    text-align: left;
  }

  .timeline-y-axis > .timeline-axis-title { position: static; }

  .timeline-y-labels {
    display: flex;
    height: auto;
    flex-direction: row;
    gap: 10px;
    padding: 0;
    overflow: auto;
  }

  .timeline-y-labels span { position: static; transform: none; }

  .timeline-axis { grid-template-columns: 1fr; }

  .timeline-axis > .timeline-axis-title,
  .timeline-x-labels { grid-column: 1; padding: 0; }

  .symbol-metric-grid { grid-template-columns: 1fr; }

  .symbol-profile-price { align-items: flex-start; flex-direction: column; }

  .symbol-trading-head,
  .symbol-trading-foot { align-items: flex-start; flex-direction: column; }

  .symbol-trading-ranges { justify-content: flex-start; }

  .symbol-trading-chart { height: 380px; }

  .symbol-chart-card .timeline-chart,
  .symbol-chart-card .timeline-y-axis { min-height: 280px; height: clamp(280px, 48dvh, 420px); }
  .timeline-hover-tooltip { max-width: calc(100vw - 24px); white-space: normal; }

  .symbol-profile-price span { font-size: 1.65rem; }

  .symbol-info-list div,
  .symbol-recent-item { grid-template-columns: 1fr; }

  .symbol-info-list strong,
  .symbol-recent-item span:last-child { text-align: left; }

  .symbol-detail-chart-panel { grid-template-columns: 1fr; }

  .symbol-fundamentals-panel { grid-column: 1; grid-template-columns: 1fr; }

  .symbol-fundamentals-grid { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; }
}

/* ============================================================================
   Fundamentals groups, red flags, valuation multiples
   ========================================================================== */
.symbol-fundamentals-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fundamentals-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fundamentals-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fundamentals-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.fundamentals-section-head > span {
  color: var(--muted-2);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
}

.symbol-fundamentals-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
}

.symbol-fundamental-card.positive strong { color: var(--positive); }
.symbol-fundamental-card.negative strong { color: var(--negative); }

/* Analysis information architecture: reveal the conclusion first, then drill down. */
#symbol-valuation-grid { gap: 18px; }
.valuation-group {
  display: grid;
  grid-template-columns: minmax(150px, 0.22fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.valuation-group:first-child { padding-top: 0; border-top: 0; }
.valuation-group-head { display: flex; gap: 10px; align-items: baseline; padding: 5px 2px; }
.valuation-group-head span { color: var(--accent); font-size: 0.62rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.valuation-group-head h4 { margin: 0; color: var(--text); font-size: 0.78rem; line-height: 1.35; }
.valuation-group-1 .symbol-fundamentals-grid-inner { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
.valuation-group-1 .symbol-fundamental-card {
  min-height: 76px;
  justify-content: center;
  padding: 13px 14px;
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  border-color: var(--border-strong);
}
.valuation-group-1 .symbol-fundamental-card strong { font-size: 1.05rem; font-weight: 750; }
.valuation-group-2 .symbol-fundamentals-grid-inner,
.valuation-group-3 .symbol-fundamentals-grid-inner { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.valuation-group-4 .symbol-fundamentals-grid-inner,
.valuation-group-5 .symbol-fundamentals-grid-inner,
.valuation-group-6 .symbol-fundamentals-grid-inner { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.valuation-disclosure {
  border-top: 1px solid var(--hairline);
}
.valuation-disclosure summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 2px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.valuation-disclosure summary::-webkit-details-marker { display: none; }
.valuation-disclosure summary > span {
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.valuation-disclosure summary strong { font-size: 0.78rem; }
.valuation-disclosure summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.66rem;
}
.valuation-disclosure summary::after {
  content: "+";
  color: var(--muted);
  font-size: 1rem;
}
.valuation-disclosure[open] summary::after { content: "−"; }
.valuation-disclosure[open] summary small { display: none; }
.valuation-disclosure-body { padding: 0 0 14px 24px; }
.valuation-basis { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.fundamentals-section {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}
.fundamentals-section-title { padding-bottom: 2px; }
#symbol-fundamentals-grid > .fundamentals-section,
#symbol-health-grid > .fundamentals-section { background: var(--surface-2); }
@media (max-width: 820px) {
  .valuation-group { grid-template-columns: 1fr; gap: 8px; }
  .valuation-group-head { padding-bottom: 0; }
  .valuation-group-1 .symbol-fundamentals-grid-inner { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}
@media (max-width: 480px) {
  .valuation-group-1 .symbol-fundamentals-grid-inner { grid-template-columns: 1fr; }
  .symbol-fundamentals-grid-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .symbol-fundamental-card { min-width: 0; }
}

.red-flag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.red-flag {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.red-flag-badge {
  flex: none;
  min-width: 52px;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 6px;
  border-radius: var(--r-xs);
  color: var(--on-accent);
  background: var(--muted);
}

.red-flag-high { border-color: rgba(220, 38, 38, 0.35); }
.red-flag-high .red-flag-badge { background: var(--negative); }
.red-flag-medium .red-flag-badge { background: var(--accent-2); }
.red-flag-low .red-flag-badge { background: var(--muted); }
.red-flag-none { border-color: rgba(14, 159, 110, 0.35); }
.red-flag-none .red-flag-badge { background: var(--positive); }

.red-flag-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.red-flag-copy strong {
  font-size: 0.8rem;
  color: var(--text);
}

.red-flag-copy em {
  font-size: 0.72rem;
  font-style: normal;
  color: var(--muted);
}

.valuation-multiples-wrap {
  overflow-x: auto;
}

.valuation-multiples {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}

.valuation-multiples th,
.valuation-multiples td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--hairline);
}

.valuation-multiples th {
  position: static;
  background: transparent;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.valuation-multiples td {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ============================================================================
   Integrations
   ========================================================================== */
/* The 760px cap left most of a desktop viewport empty. The shell now fills the workspace with
   only a readability ceiling, and each group lays its panels out responsively so small
   integrations pair up on wide screens instead of stacking into one long column. */
.integrations-shell { display: grid; gap: 18px; width: 100%; padding-bottom: 30px; }
.integrations-group {
  display: grid; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
}
.integrations-group > .integrations-group-title,
.integrations-group > .integrations-group-note { grid-column: 1 / -1; }
/* A group with a single panel spans every track instead of leaving the rest of the row empty.
   :only-of-type works because the title is an h3 and the note a p, so a lone panel is the only
   div in the group; the AI group has two and they share the row. */
.integrations-group > .symbol-info-panel:only-of-type { grid-column: 1 / -1; }
/* Content-heavy panels stay full width; a two-column form inside a half-width column is cramped. */
#google-oauth-panel, #stripe-sandbox-panel { grid-column: 1 / -1; }
/* Panels are their own containers, so the inner two-column form collapses on panel width rather
   than viewport width — a half-width panel on a wide screen needs one column, not two. */
.integration-form-panel { container-type: inline-size; }
@container (max-width: 560px) {
  .integration-form { grid-template-columns: 1fr; }
}
/* Status tiles: the state of all five providers before any scrolling, each a jump target. */
.integrations-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.integrations-tile {
  display: grid; gap: 4px; justify-items: start; text-align: left;
  padding: 12px 14px; min-height: 62px;
  border: 1px solid var(--ui-border-soft, var(--border)); border-radius: 12px;
  background: var(--panel); color: inherit; cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}
.integrations-tile:hover { border-color: var(--ui-border-strong, var(--border-strong)); transform: translateY(-1px); }
.integrations-tile:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.integrations-tile-name {
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 800; letter-spacing: .01em; color: var(--text);
}
.integrations-tile-name::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--muted-2);
}
.integrations-tile.is-on .integrations-tile-name::before {
  background: var(--positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 14%, transparent);
}
.integrations-tile.is-off .integrations-tile-name::before {
  background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 14%, transparent);
}
/* min-width:0 plus a break opportunity: a long sending address overflowed the tile otherwise,
   because grid items default to min-content width and an email address has no break points. */
.integrations-tile { min-width: 0; }
.integrations-tile-name, .integrations-tile-state { max-width: 100%; overflow-wrap: anywhere; }
.integrations-tile-state { font-size: .72rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 520px) {
  .integrations-overview { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

.integrations-intro-copy { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.integration-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.integration-form label { display: grid; gap: 7px; }
.integration-form label span { color: var(--muted); font-size: 0.86rem; }
.integration-form-span { grid-column: 1 / -1; }
.integration-form input {
  width: 100%; min-height: 42px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); padding: 9px 13px; outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.integration-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.integration-field-hint { color: var(--muted); font-size: 0.78rem; font-style: normal; line-height: 1.35; margin: 0; }
.integration-field-optional { font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); margin-left: 6px; }

/* Integrations page: hero matches the Market Calendar / Fear & Greed contract, then the
   providers are grouped so a five-integration page reads as sections instead of a flat stack. */
.integrations-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 8px 2px; }
.integrations-kicker { color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.integrations-hero h2 { margin: 5px 0 0; font-family: var(--font-display); font-size: clamp(1.65rem, 2.6vw, 2.35rem); letter-spacing: -.035em; }
.integrations-hero p { max-width: 720px; margin: 8px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.integrations-group { display: grid; gap: 14px; padding-top: 10px; }
.integrations-group + .integrations-group { margin-top: 14px; border-top: 1px solid var(--hairline); padding-top: 26px; }
.integrations-group-title { margin: 0; font-size: 1.05rem; font-weight: 850; letter-spacing: -.02em; color: var(--text); }
.integrations-group-note { max-width: 760px; margin: -8px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }

/* What the shared OAuth client powers. Two rows because the flows are genuinely separate:
   sign-in needs only the client, sending needs a one-time mailbox authorization. */
.google-uses { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.google-use-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.google-use-copy { display: grid; gap: 3px; min-width: 0; }
.google-use-copy strong { font-size: .86rem; font-weight: 800; color: var(--text); }
.google-use-copy span { font-size: .77rem; line-height: 1.4; color: var(--muted); }
.google-use-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.google-use-state {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  font-size: .72rem; font-weight: 800; white-space: nowrap;
}
.google-use-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
.google-use-state.is-on {
  border-color: color-mix(in srgb, var(--positive) 38%, var(--border));
  color: var(--positive);
}
.google-use-state.is-on::before { background: var(--positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 14%, transparent); }
@media (max-width: 640px) {
  .integrations-hero { flex-direction: column; align-items: flex-start; }
  .google-use-row { flex-direction: column; align-items: stretch; }
  .google-use-actions > .primary-btn, .google-use-actions > .secondary-btn { flex: 1 1 auto; }
}

.google-prereqs { padding: 9px 11px; border-left: 2px solid color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 7%, transparent); border-radius: 0 8px 8px 0; }

/* Each integration is a closed card you open. Collapsed by default so the page is a short
   index of providers rather than five stacked forms; <details> so keyboard and screen-reader
   behaviour is the platform's, not ours. */
/* .symbol-info-panel is display:grid, which turned the summary and body into grid cells and
   laid the header out in the middle of the card. A details element must lay out as a block. */
.integration-panel { display: block; padding: 0; overflow: hidden; }
.integration-panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; cursor: pointer; list-style: none;
}
.integration-panel-head::-webkit-details-marker { display: none; }
/* Same +/- disclosure indicator the app already uses for .valuation-disclosure. A rotated
   border-corner chevron was ambiguous to read at 8px and easy to get 90 degrees wrong. */
.integration-panel-head::after {
  content: "+"; flex: 0 0 auto; margin-left: auto;
  color: var(--muted); font-size: 1.15rem; line-height: 1; font-weight: 600;
}
.integration-panel[open] > .integration-panel-head::after { content: "−"; }
.integration-panel-head:hover::after { border-color: var(--text-2); }
.integration-panel-head:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; border-radius: 12px; }
.integration-panel-head h3 { margin: 0; }
/* The badge sits next to the title, not pushed to the far edge, so the chevron owns the right. */
.integration-panel-head .panel-badge { margin-left: 4px; }
.integration-panel[open] > .integration-panel-head { border-bottom: 1px solid var(--hairline); }
.integration-panel-body { padding: 18px 20px 20px; display: grid; gap: 14px; }
/* A wide screen should show more panels, not wider inputs. */
.integration-panel-body > .integration-form,
.google-config-cols > .integration-form { max-width: 760px; }

/* Reference material and the form side by side on wide screens: the URIs are what you paste into
   Google Cloud while filling this in, and a single stretched column of 1400px-wide inputs is
   worse to use than a narrow one. */
.google-config-cols { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1100px) {
  .google-config-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* One short field: stretching it across the page would look like a mistake. */
#alpha-vantage-panel { max-width: 760px; }

/* Optional dedicated sending client: collapsed by default so the common case stays simple. */
.google-advanced { margin-top: 4px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.google-advanced > summary { cursor: pointer; font-size: .82rem; font-weight: 750; color: var(--text-2); }
.google-advanced > summary span { font-weight: 650; color: var(--muted-2); }
.google-advanced > summary:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: 6px; }
.google-advanced[open] > summary { margin-bottom: 10px; }
.google-advanced label { display: grid; gap: 5px; margin-top: 10px; }

/* Redirect URIs to copy into Google Cloud. Long, exact strings: they must wrap and stay
   selectable rather than being truncated, because a single wrong character fails silently. */
.google-redirect-list { display: grid; gap: 8px; margin-bottom: 16px; }
.google-redirect-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.google-redirect-row > span { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.google-redirect-row code {
  font-size: .76rem; color: var(--text-2); word-break: break-all; line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.google-redirect-row .secondary-btn { padding: 5px 12px; font-size: .72rem; min-height: 32px; }
@media (max-width: 640px) {
  .google-redirect-row { grid-template-columns: 1fr auto; }
  .google-redirect-row code { grid-column: 1 / -1; }
}

/* Gmail OAuth connection state: the active credential when an account is connected. */
.email-oauth-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 14px 16px;
  border: 1px solid var(--hairline); border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 66%, transparent);
}
.email-oauth-state { display: grid; gap: 3px; min-width: 0; }
.email-oauth-state strong { font-size: .9rem; font-weight: 800; color: var(--text); }
.email-oauth-state span { font-size: .78rem; line-height: 1.4; color: var(--muted); }
.email-oauth-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .email-oauth-panel { flex-direction: column; align-items: stretch; }
  .email-oauth-actions { flex-wrap: wrap; }
  .email-oauth-actions > * { flex: 1 1 auto; }
}
.integration-form-status {
  padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--border);
  border-left: 3px solid var(--muted-2); background: var(--surface-2); color: var(--text-2); font-size: 0.86rem;
}
.integration-form-status.positive { border-left-color: var(--positive); color: var(--positive); }
.integration-form-status.negative { border-left-color: var(--negative); color: var(--negative); }
.integrations-list { display: grid; gap: 12px; }
.integration-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
}
.integration-card-main { display: grid; gap: 6px; min-width: 0; }
.integration-card-main strong { font-size: 1.0rem; font-weight: 700; }
.integration-card-meta { color: var(--muted); font-size: 0.82rem; }
.integration-card-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.integration-pill {
  padding: 4px 10px; border-radius: var(--r-pill); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.integration-pill.positive { background: var(--positive-soft); border-color: rgba(14,159,110,0.3); color: var(--positive); }
.integration-pill.negative { background: var(--negative-soft); border-color: rgba(220,38,38,0.3); color: var(--negative); }
.integration-card-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.integration-card-actions .secondary-btn { padding: 7px 13px; font-size: 0.84rem; }
.integration-card-actions .integration-danger { border-color: rgba(220,38,38,0.4); color: var(--negative); }
.integration-card-actions .integration-danger:hover { background: var(--negative-soft); }
.integration-card-actions .integration-connect {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600;
}
.integration-card-result { grid-column: 1 / -1; font-size: 0.84rem; color: var(--muted); overflow-wrap: anywhere; }
.integration-card-result.positive { color: var(--positive); }
.integration-card-result.negative { color: var(--negative); }
.integration-empty { border-radius: var(--r-md); }

/* ============================================================================
   AI explanation + news
   ========================================================================== */
.symbol-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.symbol-ai-btn { padding: 8px 15px; font-size: 0.85rem; white-space: nowrap; }
.symbol-ai-meta { color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
/* Moved below the analysis: a centered footnote explaining what data was analyzed. */
.ql-meta-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.ql-meta-foot:empty { display: none; }
.symbol-ai-body { display: grid; gap: 8px; font-size: 0.92rem; line-height: 1.55; color: var(--text-2); }
.symbol-ai-body h3, .symbol-ai-body h4, .symbol-ai-body h5, .symbol-ai-body h6 {
  margin: 8px 0 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent);
}
.symbol-ai-body p { margin: 0; }
.symbol-ai-body ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.symbol-ai-body code { font-family: var(--font-mono); font-size: 0.86em; background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-xs); }
.symbol-news-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.symbol-news-item { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.symbol-news-item:last-child { border-bottom: none; padding-bottom: 0; }
.symbol-news-thumb { flex: none; width: 76px; height: 76px; border-radius: var(--r-md); object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); }
.symbol-news-item-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 5px; }
.symbol-news-item-title { font-size: 0.9rem; line-height: 1.4; }
.symbol-news-item-title a { color: var(--text); text-decoration: none; font-weight: 600; }
.symbol-news-item-title a:hover { color: var(--accent); text-decoration: underline; }
.symbol-news-item-meta { color: var(--muted); font-size: 0.76rem; }
.symbol-news-item-score { flex: 0 0 clamp(170px, 36%, 290px); display: grid; gap: 6px; align-content: start; }
.news-rating { text-align: left; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.news-rating-good { color: var(--positive); }
.news-rating-moderate { color: var(--accent-2); }
.news-rating-bad { color: var(--negative); }
.symbol-news-item-reason { text-align: right; color: var(--text-2); font-size: 0.77rem; line-height: 1.45; }
.symbol-news-item-reason .ai-mark { margin-right: 5px; }
.ai-mark { display: inline-block; padding: 0 5px; border-radius: var(--r-xs); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; color: var(--accent-strong); border: 1px solid var(--accent); background: var(--accent-soft); text-transform: uppercase; vertical-align: 1px; }
.symbol-news-empty { color: var(--muted); font-size: 0.85rem; list-style: none; }
.symbol-news-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.news-pager-label { color: var(--muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.news-pager-btn { padding: 6px 12px; font-size: 0.78rem; }
.news-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Timeline news pins */
.timeline-news-pin { cursor: pointer; }
.timeline-news-stem { stroke: var(--muted-2); stroke-width: 1.4; }
.timeline-news-anchor { fill: var(--chart-ink); }
.timeline-news-hit { fill: transparent; pointer-events: all; }
.timeline-news-dot { stroke: var(--surface); stroke-width: 2; transition: r 0.12s ease; }
.timeline-news-count { fill: #fff; font-size: 9px; font-weight: 800; pointer-events: none; }
.timeline-news-good .timeline-news-dot { fill: var(--positive); }
.timeline-news-good .timeline-news-stem { stroke: rgba(14,159,110,0.6); }
.timeline-news-moderate .timeline-news-dot { fill: var(--accent-2); }
.timeline-news-moderate .timeline-news-stem { stroke: rgba(183,121,31,0.6); }
.timeline-news-bad .timeline-news-dot { fill: var(--negative); }
.timeline-news-bad .timeline-news-stem { stroke: rgba(220,38,38,0.6); }
.timeline-news-unrated .timeline-news-dot { fill: var(--muted); }
.timeline-news-pin:hover .timeline-news-dot { stroke: var(--accent); }

/* Timeline news popup */
.timeline-news-popup { position: fixed; z-index: 1000; width: 300px; max-width: 92vw; padding: 11px; display: grid; gap: 8px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); box-shadow: var(--shadow-lg); pointer-events: auto; }
.tnp-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tnp-close { flex: none; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: color 120ms ease; }
.tnp-close:hover { color: var(--negative); }
.tnp-scroll { display: grid; gap: 11px; max-height: 264px; overflow-y: auto; padding-right: 4px; }
.tnp-scroll::-webkit-scrollbar { width: 8px; }
.tnp-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
.tnp-item { display: flex; gap: 10px; align-items: flex-start; }
.tnp-item + .tnp-item { padding-top: 12px; border-top: 1px solid var(--hairline); }
.tnp-thumb { flex: none; width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--border); }
.tnp-body { min-width: 0; display: grid; gap: 4px; }
.tnp-head { display: flex; align-items: center; gap: 8px; }
.tnp-meta { color: var(--muted); font-size: 0.72rem; }
.tnp-title { color: var(--text); font-size: 0.82rem; line-height: 1.35; text-decoration: none; font-weight: 600; }
a.tnp-title:hover { color: var(--accent); text-decoration: underline; }
.tnp-reason { display: flex; align-items: baseline; gap: 6px; color: var(--text-2); font-size: 0.74rem; line-height: 1.35; }

/* ============================================================================
   Buy / sell timing band
   ========================================================================== */
.symbol-timing-panel { display: grid; gap: 16px; }
.symbol-timing-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.timing-ranges { display: flex; justify-content: flex-start; gap: 6px; flex-wrap: wrap; margin: 2px 0 4px; }
.symbol-timing-sub { color: var(--muted); font-size: 0.78rem; }
.symbol-timing-verdict { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.timing-badge {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: var(--r-pill); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em;
}
.timing-badge.timing-buy { background: var(--positive-soft); border: 1px solid rgba(14,159,110,0.4); color: var(--positive); }
.timing-badge.timing-sell { background: var(--negative-soft); border: 1px solid rgba(220,38,38,0.4); color: var(--negative); }
.timing-badge.timing-fair { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--muted); }
.timing-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(14,159,110,0.16); }
.timing-signals { margin: 0; padding: 0; display: grid; gap: 7px; min-width: 240px; flex: 1; list-style: none; }
.timing-signals li { display: flex; gap: 9px; align-items: baseline; font-size: 0.9rem; line-height: 1.4; color: var(--text-2); }
.timing-signals strong { font-variant-numeric: tabular-nums; color: var(--text); }
.timing-tick { flex: none; font-weight: 800; color: var(--muted); }
.timing-tick.timing-buy-tick { color: var(--positive); }
.timing-tick.timing-sell-tick { color: var(--negative); }
.symbol-timing-chart svg { display: block; width: 100%; height: auto; }
#symbol-timing-hover-surface { touch-action: inherit; cursor: crosshair; }
.symbol-timing-calib { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.timing-chip {
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px;
  background: var(--surface-2); display: grid; gap: 4px;
}
.timing-chip span { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.timing-chip strong { font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.timing-chip-good strong { color: var(--positive); }
.timing-chip-warn strong { color: var(--accent-2); }
.symbol-timing-note { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.timing-empty { color: var(--muted); font-size: 0.9rem; padding: 6px 0; }

/* ============================================================================
   Year-by-year table
   ========================================================================== */
.yearly-table-wrap { overflow-x: auto; }
.yearly-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.yearly-table th, .yearly-table td {
  padding: 7px 10px; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--hairline);
}
.yearly-table thead th {
  position: sticky; top: 0; color: var(--muted); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.05em; text-transform: uppercase; background: var(--surface-2); z-index: 1;
}
.yearly-table th.yt-metric, .yearly-table td.yt-metric { text-align: left; color: var(--text); font-weight: 600; }
.yearly-table th.yt-spark, .yearly-table td.yt-spark { text-align: center; width: 90px; }
.yearly-table td.positive { color: var(--positive); }
.yearly-table td.negative { color: var(--negative); }
.yearly-table tr.yt-group td {
  text-align: left; color: var(--accent); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; padding-top: 13px; border-bottom: none; background: transparent;
}
.yt-sparkline { width: 82px; height: 24px; display: inline-block; vertical-align: middle; }
.quarterly-sub { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.03em; color: var(--muted-2); text-transform: none; margin-left: 8px; }
.yearly-table th.q-pending { color: var(--accent-strong); }
.yearly-table th.q-pending sup { color: var(--accent); font-size: 0.7em; margin-left: 2px; }
.est-range { color: var(--muted-2); font-size: 0.72rem; margin-left: 4px; white-space: nowrap; }
.est-end { color: var(--muted-2); font-size: 0.68rem; font-weight: 400; }
.estimates-table td.yt-metric { white-space: normal; }

/* ============================================================================
   Decision scorecard (left rail)
   ========================================================================== */
.symbol-decision-card { display: grid; gap: 10px; }
.decision-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; user-select: none; }
.decision-toggle { margin-left: auto; color: var(--muted-2); font-size: 0.8rem; }
.decision-body { display: grid; gap: 10px; }
.decision-badge { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; }
.decision-buy .decision-badge { color: var(--positive); }
.decision-sell .decision-badge { color: var(--negative); }
.decision-hold .decision-badge { color: var(--muted); }
.decision-conf { color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
.decision-tagline { color: var(--text-2); font-size: 0.84rem; line-height: 1.35; }
.decision-rows { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.decision-row { display: grid; grid-template-columns: 16px 72px 1fr; gap: 7px; align-items: baseline; font-size: 0.84rem; }
.decision-ic { font-weight: 800; text-align: center; color: var(--muted); }
.decision-good .decision-ic { color: var(--positive); }
.decision-bad .decision-ic { color: var(--negative); }
.decision-mid .decision-ic { color: var(--accent-2); }
.decision-k { color: var(--muted); }
.decision-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.decision-note { color: var(--muted); font-size: 0.72rem; margin-left: 6px; }
.decision-levels {
  display: grid; gap: 4px; padding-top: 8px; margin-top: 2px;
  border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--muted);
}
.decision-levels strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* Why the verdict is held back: server risk gates + concrete high-risk reasons. */
.decision-gates {
  display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px; margin-top: 2px;
  border-top: 1px solid var(--border);
}
.decision-gate {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 0.7rem; font-weight: 600; color: var(--negative);
  background: var(--negative-soft, rgba(198,75,75,0.1)); border: 1px solid rgba(198,75,75,0.3);
}

/* ============================================================================
   Market Data: result (verdict) pill
   ========================================================================== */
.result-pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
  border: 1px solid transparent;
}
.result-pill.result-buy { color: var(--positive); background: var(--positive-soft); border-color: rgba(14,159,110,0.35); }
.result-pill.result-sell { color: #d97706; background: rgba(217,119,6,0.10); border-color: rgba(217,119,6,0.35); }
.result-pill.result-avoid { color: var(--negative); background: var(--negative-soft); border-color: rgba(220,38,38,0.35); }
.result-pill.result-watch { color: #ca8a04; background: rgba(202,138,4,0.10); border-color: rgba(202,138,4,0.35); }
.result-pill.result-hold { color: var(--muted); background: var(--surface-2); border-color: var(--border-strong); }
.result-pill.result-pending { color: var(--muted-2); background: transparent; border-color: var(--border-strong); }
.result-v2 { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 3px 6px; min-width: 150px; text-align: left; }
.result-v2 small, .result-v2 em { grid-column: 1 / -1; display: block; white-space: nowrap; font-size: 0.66rem; line-height: 1.25; font-style: normal; color: var(--muted); }
.result-v2 em { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.result-v2-stale { padding: 2px 5px; border-radius: var(--r-pill); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; color: #d97706; background: rgba(217,119,6,0.10); border: 1px solid rgba(217,119,6,0.30); }
.result-v2.is-stale .result-pill { opacity: 0.82; }
.result-v2-error small { color: var(--negative); }

/* Market Data: concise Qualitative AI verdict + score. */
.qualitative-table-result {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 2px 10px; min-width: 150px; padding-left: 10px; border-left: 3px solid var(--border-strong);
  text-align: left;
}
.qualitative-table-result strong { font-size: 0.78rem; line-height: 1.2; color: var(--text); white-space: nowrap; }
.qualitative-table-score { display: inline-flex; align-items: baseline; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.qualitative-table-score b { font-size: 1.05rem; line-height: 1; color: var(--text); }
.qualitative-table-score em { font-size: 0.65rem; color: var(--muted); font-style: normal; }
.qualitative-table-result small { grid-column: 1 / -1; color: var(--muted); font-size: 0.64rem; line-height: 1.2; }
.qualitative-table-strong { border-left-color: var(--positive); }
.qualitative-table-promising { border-left-color: var(--accent); }
.qualitative-table-mixed { border-left-color: var(--accent-2, #d6a23a); }
.qualitative-table-weak, .qualitative-table-high-risk { border-left-color: var(--negative); }
.qualitative-table-high-risk strong, .qualitative-table-weak strong { color: var(--negative); }
.qualitative-table-empty { grid-template-columns: 1fr; border-left-color: var(--border-strong); }
.qualitative-table-empty strong { color: var(--muted); }

/* Market Data: 3Y timing uses the same concise verdict hierarchy as Qualitative. */
.timing3y-cell {
  display: grid; grid-template-columns: 1fr; align-items: baseline;
  gap: 2px; min-width: 150px; padding-left: 10px; border-left: 3px solid var(--border-strong);
  text-align: left;
}
.timing3y-cell strong { font-size: 0.78rem; line-height: 1.2; font-weight: 800; color: var(--text); white-space: nowrap; }
.timing3y-cell small { color: var(--muted); font-size: 0.64rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.timing3y-cheap { border-left-color: var(--positive); }
.timing3y-rich { border-left-color: var(--negative); }
.timing3y-rich strong { color: var(--negative); }
.timing3y-fair { border-left-color: var(--accent-2, #d6a23a); }
.timing3y-empty strong { color: var(--muted); }

/* ============================================================================
   Discover (opportunity scanner)
   ========================================================================== */
.discover-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.discover-intro-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.discover-intro-copy { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin: 8px 0 0; max-width: 70ch; }
.discover-scan-btn { white-space: nowrap; flex: none; }
.discover-segments { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.discover-status { font-size: 0.85rem; color: var(--muted); margin-top: 14px; }
.discover-status.positive { color: var(--positive); }
.discover-status.negative { color: var(--negative); }
.discover-add-btn { padding: 6px 12px; font-size: 0.8rem; white-space: nowrap; }
.discover-empty { color: var(--muted); font-size: 0.9rem; padding: 18px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.discover-table-wrap td.positive { color: var(--positive); }
.discover-table-wrap td.negative { color: var(--negative); }
.discover-search { display: grid; gap: 10px; }
.discover-search-form { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.discover-search-form input { flex: 1 1 280px; min-width: 200px; min-height: 42px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 9px 13px; outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; }
.discover-search-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.discover-search-form input::placeholder { color: var(--muted-2); text-transform: none; }
.discover-search-form button { flex: 0 0 auto; }
.discover-search-status { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.discover-search-status.positive { color: var(--positive); }
.discover-search-status.negative { color: var(--negative); }

/* Discover: market overview (movers + browse) */
.discover-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.discover-asof { color: var(--muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.discover-movers, .discover-browser { display: block; }
.movers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.movers-col { display: grid; gap: 6px; min-width: 0; }
.movers-col-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid var(--hairline); }
.movers-col-title.pos { color: var(--positive); }
.movers-col-title.neg { color: var(--negative); }
.movers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.movers-empty { color: var(--muted); font-size: 0.82rem; padding: 6px 2px; }
.mover-row { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: baseline; gap: 8px; padding: 6px 6px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; cursor: pointer; transition: background 100ms ease; }
.mover-row:hover { background: var(--surface-2); }
.mover-sym { font-weight: 700; font-size: 0.86rem; }
.mover-name { color: var(--muted); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mover-price { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--text-2); }
.mover-chg { font-variant-numeric: tabular-nums; font-size: 0.82rem; font-weight: 700; min-width: 56px; text-align: right; }
.browser-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.browser-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.browser-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.browser-controls input { min-height: 38px; min-width: 200px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 8px 12px; outline: none; }
.browser-controls input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.browser-controls .app-select { min-height: 38px; }
.browser-tags { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.browser-tag { padding: 2px 7px; border-radius: var(--r-pill); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) { .movers-grid { grid-template-columns: 1fr; } }
/* Discover tables on phones: scroll horizontally with the Symbol column frozen (like Market Data). */
@media (max-width: 700px) {
  #discover-page .table-wrap thead th:first-child,
  #discover-page .table-wrap tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
  #discover-page .table-wrap thead th:first-child { z-index: 3; }
  #discover-page .asset-symbol-copy em { display: none; }
  #discover-page .browser-toolbar { gap: 8px; }
  #discover-page .browser-controls { width: 100%; }
  #discover-page .browser-controls .select-field { flex: 1 1 auto; }
}

/* Market Data row actions are personal tracking controls. Destructive global
   universe management is intentionally absent from the authenticated user table. */
.market-action-cell { text-align: right; width: 116px; }

/* ============================================================================
   Overview summary panel
   ========================================================================== */
.symbol-overview-panel { display: grid; gap: 12px; }

/* Symbol Overview: versioned investment-evidence snapshot. */
.investment-snapshot {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.investment-hero,
.investment-valuation,
.investment-evidence,
.investment-change,
.investment-methodology {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.investment-hero {
  padding: clamp(15px, 2vw, 20px);
  border-left: 4px solid var(--border-strong);
}
.investment-hero.investment-status-supported { border-left-color: var(--positive); }
.investment-hero.investment-status-contradicted { border-left-color: var(--negative); }
.investment-hero.investment-status-insufficient { border-left-style: dashed; }
.investment-eyebrow,
.investment-section-head span {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.investment-hero-copy { min-width: 0; }
.investment-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.investment-hero-meta .investment-eyebrow { margin: 0; }
.investment-hero-meta small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.investment-hero-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.investment-hero h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.28rem, 2.3vw, 1.72rem);
  line-height: 1.15;
}
.investment-hero p {
  max-width: 920px;
  margin: 7px 0 0 44px;
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.45;
}
.investment-overall-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 900;
}
.investment-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.investment-pillar {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}
.investment-pillar.investment-status-strong,
.investment-pillar.investment-status-discount { border-top-color: var(--positive); }
.investment-pillar.investment-status-premium,
.investment-pillar.investment-status-weak { border-top-color: var(--negative); }
.investment-pillar.investment-status-mixed,
.investment-pillar.investment-status-near-range { border-top-color: var(--accent-2, #d6a23a); }
.investment-pillar.investment-status-insufficient { border-top-style: dashed; }
.investment-pillar-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.investment-status-icon {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text);
  font-weight: 900;
}
.investment-pillar-top div { min-width: 0; }
.investment-pillar-top span:not(.investment-status-icon) {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.investment-pillar-top strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.25;
}
.investment-pillar-context {
  min-width: 0;
  padding-left: 32px;
}
.investment-pillar-context p {
  margin: 0 0 2px;
  color: var(--text-2);
  font-size: 0.72rem;
  line-height: 1.3;
}
.investment-pillar-context small {
  display: block;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.3;
}
.investment-valuation,
.investment-evidence,
.investment-change {
  padding: clamp(18px, 2.6vw, 26px);
}
.investment-valuation { padding: clamp(14px, 1.8vw, 18px); }
.investment-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.investment-section-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
}
.investment-section-head > small {
  max-width: 44%;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: right;
}
.investment-valuation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 12px 0 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--border);
}
.investment-valuation-metric {
  min-width: 0;
  padding: 9px 11px;
  background: var(--surface-2);
}
.investment-valuation-metric dt {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.investment-valuation-metric dd {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.investment-valuation-metric-current dd { color: var(--accent); }
.investment-value-axis {
  position: relative;
  height: 38px;
  margin: 10px 4px 0;
}
.investment-value-track {
  position: absolute;
  top: 15px;
  right: 0;
  left: 0;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--positive) 35%, transparent), var(--surface-2), color-mix(in srgb, var(--negative) 35%, transparent));
}
.investment-value-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 2px solid var(--text);
  border-left: 2px solid var(--text);
  background: color-mix(in srgb, var(--accent) 34%, transparent);
}
.investment-value-marker {
  position: absolute;
  top: 4px;
  width: 1px;
  transform: translateX(-50%);
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
}
.investment-value-marker i {
  display: block;
  width: 2px;
  height: 30px;
  margin: 0 auto;
  background: currentColor;
}
.investment-value-marker b,
.investment-value-marker em { display: none; }
.investment-value-marker.current { z-index: 3; color: var(--accent); }
.investment-value-marker.current i { width: 4px; }
.investment-value-marker.current b,
.investment-value-marker.current em { color: var(--accent); }
.investment-value-marker.threshold { color: var(--positive); }
.investment-value-legend,
.investment-value-facts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.investment-value-legend {
  color: var(--muted);
  font-size: 0.66rem;
}
.investment-value-facts {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
}
.investment-value-facts span {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.7rem;
}
.investment-method-note,
.investment-valuation-empty > p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}
.investment-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.investment-ledger-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.investment-ledger-card h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 0.82rem;
}
.investment-ledger-card ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.investment-ledger-card li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
}
.investment-ledger-mark {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 900;
}
.investment-ledger-card li strong,
.investment-ledger-card li small {
  display: block;
}
.investment-ledger-card li strong {
  color: var(--text-2);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.4;
}
.investment-ledger-card li small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.35;
}
.investment-ledger-supports { border-top: 3px solid var(--positive); }
.investment-ledger-challenges { border-top: 3px solid var(--negative); }
.investment-ledger-unknowns { border-top: 3px dashed var(--border-strong); }
.investment-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
.investment-change ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 16px 0 0;
  padding: 0;
  counter-reset: investment-change;
  list-style: none;
}
.investment-change li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  counter-increment: investment-change;
}
.investment-change li::before {
  content: counter(investment-change);
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 800;
}
.investment-change li span,
.investment-change li small { grid-column: 2; }
.investment-change li span {
  color: var(--text-2);
  font-size: 0.76rem;
  line-height: 1.4;
}
.investment-change li small {
  color: var(--muted);
  font-size: 0.62rem;
}
.investment-methodology {
  padding: 0;
  overflow: hidden;
}
.investment-methodology summary {
  min-height: 48px;
  padding: 14px 18px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 750;
}
.investment-methodology summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.investment-methodology[open] summary { border-bottom: 1px solid var(--border); }
.investment-methodology-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 18px;
}
.investment-methodology-grid h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 0.8rem;
}
.investment-methodology-grid ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.investment-methodology-grid li {
  display: grid;
  gap: 2px;
  color: var(--text-2);
  font-size: 0.72rem;
}
.investment-methodology-grid li span,
.investment-methodology-grid li small { color: var(--muted); }
.investment-methodology > p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}
.narrative-check,
.qual-provenance {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.narrative-check > p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.84rem;
  line-height: 1.55;
}
.qp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.qp-facts {
  margin: 0;
  min-width: 0;
  color: var(--text-2);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}
.qp-action { flex: none; }
.qp-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}
.qp-warnings {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent-2, #d6a23a);
  border-radius: var(--r-sm, 8px);
  background: var(--surface-2);
  font-size: 0.76rem;
  color: var(--text-2);
}
.qp-warnings strong { color: var(--text); }
@media (max-width: 700px) {
  .qp-row { align-items: stretch; }
  .qp-action { width: 100%; }
}
.question-board {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.question-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.question-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}
.question-card.investment-status-strong { border-left-color: var(--positive); }
.question-card.investment-status-weak { border-left-color: var(--negative); }
.question-card.investment-status-mixed { border-left-color: var(--accent-2, #d6a23a); }
.question-card.investment-status-insufficient { border-left-style: dashed; }
.question-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
}
.question-index {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.question-head h4 {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}
.question-status {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.question-status i {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: 0.62rem;
  font-style: normal;
}
.investment-status-strong > .question-head .question-status i { border-color: var(--positive); color: var(--positive); }
.investment-status-weak > .question-head .question-status i { border-color: var(--negative); color: var(--negative); }
.question-headline {
  margin: 0;
  color: var(--text-2);
  font-size: 0.84rem;
  line-height: 1.5;
}
.question-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin: 0;
}
.question-metric {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm, 8px);
  background: var(--surface-2);
}
.question-metric dt {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.question-metric dd {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.question-tone-positive dd { color: var(--positive); }
.question-tone-negative dd { color: var(--negative); }
.question-detail > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.question-detail > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.question-notes,
.question-citations {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.question-notes li {
  position: relative;
  padding-left: 14px;
  color: var(--text-2);
  font-size: 0.78rem;
  line-height: 1.45;
}
.question-notes li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
}
.question-citations blockquote {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-2);
  font-size: 0.76rem;
  font-style: italic;
  line-height: 1.45;
}
.question-citations cite {
  display: block;
  margin-top: 4px;
  padding-left: 10px;
  color: var(--muted);
  font-size: 0.66rem;
  font-style: normal;
  overflow-wrap: anywhere;
}
.question-detail small,
.question-foot {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.66rem;
}
@media (max-width: 1050px) {
  .question-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1050px) {
  .investment-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .investment-ledger { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .investment-hero-meta { align-items: flex-start; }
  .investment-hero-meta small { max-width: 48%; }
  .investment-hero p { margin-left: 0; }
  .investment-change ol,
  .investment-methodology-grid { grid-template-columns: 1fr; }
  .investment-section-head { display: grid; }
  .investment-section-head > small { max-width: none; text-align: left; }
  .investment-valuation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .investment-value-legend { gap: 6px; font-size: 0.6rem; }
}
@media (max-width: 520px) {
  .investment-pillars { grid-template-columns: 1fr; }
}
.overview-verdict-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.overview-tagline { color: var(--text-2); font-size: 0.9rem; }
.overview-hint { margin: 2px 0 0; color: var(--muted); font-size: 0.8rem; }
.fundamentals-provenance {
  margin-top: 8px;
  line-height: 1.45;
}
.fundamentals-provenance.is-stale {
  color: var(--warning, #b7791f);
}

/* ============================================================================
   ML / model-routing surfacing
   ========================================================================== */
.ml-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); display: grid; gap: 10px; }
.ml-block .symbol-info-title { display: flex; align-items: center; gap: 8px; }
.ml-tag { display: inline-block; padding: 1px 7px; border-radius: var(--r-pill); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent); }
.model-note { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.biz-chip { flex: none; padding: 2px 9px; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); }
.biz-chip.biz-cyclical { color: var(--accent-2); background: var(--accent-2-soft); border-color: rgba(183,121,31,0.4); }
.biz-chip.biz-financial { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent); }
.biz-chip.biz-high_growth { color: var(--positive); background: var(--positive-soft); border-color: rgba(14,159,110,0.4); }

/* ============================================================================
   Financial health panel
   ========================================================================== */
.health-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.health-checks { display: grid; gap: 4px; }
.health-check { display: grid; grid-template-columns: 18px minmax(0,1.4fr) minmax(0,1fr) auto; gap: 8px; align-items: baseline; font-size: 0.82rem; padding: 5px 0; border-bottom: 1px solid var(--hairline); }
.health-check .hc-icon { font-weight: 800; }
.health-check.pass .hc-icon { color: var(--positive); }
.health-check.fail .hc-icon { color: var(--negative); }
.health-check .hc-label { color: var(--text); }
.health-check .hc-thresh { color: var(--muted); font-size: 0.76rem; }
.health-check .hc-actual { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.fid { font-style: normal; font-size: 0.62rem; color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid rgba(183,121,31,0.4); border-radius: var(--r-xs); padding: 0 4px; margin-left: 4px; }

/* ============================================================================
   Trust-first verdict block (fair value bar, bulls/bears)
   ========================================================================== */
.result-pill.result-lg { font-size: 0.92rem; padding: 5px 14px; }
.fvb-wrap { display: grid; gap: 6px; margin: 4px 0 6px; }
.fvb-track { position: relative; height: 26px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); overflow: hidden; }
.fvb-band { position: absolute; top: 0; bottom: 0; background: var(--accent-soft); border-left: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.fvb-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; transform: translateX(-1px); }
.fvb-tick.fvb-fair { background: var(--accent); width: 2px; }
.fvb-tick.fvb-scen { background: var(--muted-2); }
.fvb-price { position: absolute; top: 50%; transform: translate(-50%, -50%); color: var(--text); font-size: 0.8rem; font-weight: 700; }
.fvb-labels { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fvb-labels span:nth-child(2) { color: var(--accent); }
.fvb-pricelabel { font-size: 0.8rem; color: var(--text); font-variant-numeric: tabular-nums; }
.bulls-bears { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.bb-col { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface-2); }
.bb-title { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 6px; }
.bb-bull .bb-title { color: var(--positive); }
.bb-bear .bb-title { color: var(--negative); }
.bb-col ul { margin: 0; padding-left: 16px; display: grid; gap: 4px; }
.bb-col li { font-size: 0.82rem; line-height: 1.35; color: var(--text-2); }
.bb-none { color: var(--muted); margin: 0; }
@media (max-width: 640px) { .bulls-bears { grid-template-columns: 1fr; } }

/* ============================================================================
   Email alerts form
   ========================================================================== */
.integration-form label.email-check,
.email-check { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text); }
.integration-form label.email-check span { color: var(--text); }
.email-check input { width: 16px; height: 16px; accent-color: var(--accent); }


/* ============================================================================
   Signals v2 — personal opt-in center
   ========================================================================== */
.signals-shell { display: grid; gap: 18px; }
.signals-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--ui-border-soft, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(139, 125, 255, 0.16), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 90%, transparent), color-mix(in srgb, var(--surface) 94%, transparent));
  box-shadow: var(--ui-shadow-premium, var(--shadow-md));
  overflow: hidden;
}
.signals-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 42%, rgba(255,255,255,.03)); }
.signals-hero > * { position: relative; z-index: 1; }
.signals-kicker { display: inline-flex; margin-bottom: 8px; color: var(--accent); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.signals-hero h2 { margin: 0; font-size: clamp(1.45rem, 2.8vw, 2.15rem); line-height: 1.04; letter-spacing: -0.045em; }
.signals-hero p { max-width: 620px; margin: 9px 0 0; color: var(--text-2); font-size: .95rem; line-height: 1.5; }
.signals-stats { display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 10px; min-width: 230px; }
.signals-stats div { display: grid; align-content: center; gap: 4px; min-height: 92px; padding: 14px; border: 1px solid var(--hairline); border-radius: 18px; background: color-mix(in srgb, var(--surface) 78%, transparent); }
.signals-stats strong { font-size: 2rem; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); }
.signals-stats span { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.signals-grid { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr); gap: 16px; align-items: start; }
.signals-panel { border: 1px solid var(--border); border-radius: 20px; padding: 18px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow-xs); }
.signals-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.signals-panel h3, .signals-toolbar h3 { margin: 0; color: var(--text); font-size: 1rem; font-weight: 900; letter-spacing: -0.02em; }
.signals-panel p, .signals-toolbar p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.signals-search-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.signals-search-input { width: 100%; min-height: 42px; padding: 0 13px; color: var(--text); border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); outline: none; }
.signals-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.signals-symbol-results { display: grid; gap: 7px; margin-top: 10px; max-height: 300px; overflow: auto; }
.signal-symbol-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--hairline); border-radius: 14px; color: var(--text); text-align: left; background: var(--surface); transition: border-color 150ms ease, transform 150ms ease, background-color 150ms ease; }
.signal-symbol-row:hover:not(:disabled), .signal-symbol-row:focus-visible { border-color: var(--accent); transform: translateY(-1px); outline: none; }
.signal-symbol-row:disabled { cursor: default; opacity: .72; }
.signal-symbol-row span:first-child { display: grid; gap: 2px; }
.signal-symbol-row strong { font-size: .9rem; letter-spacing: .02em; }
.signal-symbol-row em { max-width: 270px; overflow: hidden; color: var(--muted); font-size: .76rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.signal-tracker-label { width: max-content; color: var(--accent); font-size: .64rem; font-style: normal; font-weight: 800; letter-spacing: .02em; }
.signal-symbol-meta { display: grid; justify-items: end; gap: 2px; flex: 0 0 auto; }
.signal-symbol-meta b { font-size: .78rem; font-variant-numeric: tabular-nums; }
.signal-symbol-meta small { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.signals-subscriptions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.signal-sub-chip { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.signal-sub-main { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 12px; border: 0; color: var(--text); background: transparent; }
.signal-sub-main strong { font-size: .8rem; }
.signal-sub-main span { max-width: 160px; overflow: hidden; color: var(--muted); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.signal-sub-remove { width: 42px; min-height: 42px; border: 0; border-left: 1px solid var(--hairline); color: var(--muted); background: transparent; font-size: 1.1rem; }
.signal-sub-remove:hover, .signal-sub-remove:focus-visible { color: var(--negative); background: var(--negative-soft); outline: none; }
.signals-preferences-form { display: grid; gap: 12px; }
.signals-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.signal-toggle { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 11px; border: 1px solid var(--hairline); border-radius: 14px; color: var(--text-2); background: var(--surface-2); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.signal-toggle:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.signal-toggle > span { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; font-size: .83rem; font-weight: 750; }
.signal-toggle span em { color: var(--muted); font-size: .74rem; font-style: normal; font-weight: 500; }
.signal-toggle input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; pointer-events: none; }
.signal-switch { position: relative; display: inline-block; flex: 0 0 auto; width: 42px; height: 24px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); transition: border-color 160ms ease, background-color 160ms ease; }
.signal-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); box-shadow: 0 2px 5px rgba(0, 0, 0, .28); transition: transform 180ms cubic-bezier(.2,.8,.2,1), background-color 160ms ease; }
.signal-toggle input:checked + .signal-switch { border-color: color-mix(in srgb, var(--accent) 72%, var(--border)); background: var(--accent); }
.signal-toggle input:checked + .signal-switch::after { transform: translateX(18px); background: #fff; }
.signal-toggle input:focus-visible + .signal-switch { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.signal-toggle:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface-2)); }
.signal-toggle-master { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); }
@media (prefers-reduced-motion: reduce) { .signal-toggle, .signal-switch, .signal-switch::after { transition: none; } }
.signals-threshold-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-2); color: var(--text-2); font-size: .84rem; font-weight: 750; }
.signals-threshold-label input { width: 96px; min-height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface); }
.signals-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.signals-prefs-status { color: var(--muted); font-size: .8rem; }
.signals-prefs-status.positive { color: var(--positive); }
.signals-prefs-status.negative { color: var(--negative); }
.signals-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.signals-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.signal-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.signals-list { display: grid; gap: 10px; }
.signal-card { border: 1px solid var(--border); border-radius: 18px; padding: 14px 15px; background: var(--surface); box-shadow: var(--shadow-xs); }
.signal-card.is-unread { border-color: color-mix(in srgb, var(--accent) 44%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }
.signal-card.is-read { opacity: .78; }
.signal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.signal-pill { font-size: .68rem; letter-spacing: .04em; }
.signal-symbol { border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 8px; color: var(--text); background: var(--surface-2); font-size: .72rem; font-weight: 900; }
.signal-symbol:hover, .signal-symbol:focus-visible { border-color: var(--accent); outline: none; }
.signal-title { font-weight: 800; font-size: 0.94rem; }
.signal-time { margin-left: auto; color: var(--muted); font-size: 0.76rem; white-space: nowrap; }
.signal-detail { margin-top: 8px; color: var(--text-2); font-size: 0.84rem; line-height: 1.5; }
.signal-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--muted); font-size: .75rem; }
.signal-mark-read { border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; color: var(--text-2); background: var(--surface-2); font-size: .74rem; font-weight: 800; }
.signal-mark-read:hover, .signal-mark-read:focus-visible { border-color: var(--accent); color: var(--text); outline: none; }
.signals-empty { display: grid; gap: 6px; color: var(--muted); font-size: 0.9rem; padding: 28px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); }
.signals-empty strong { color: var(--text); }
.signals-empty span { max-width: 560px; justify-self: center; line-height: 1.45; }
.signals-empty-inline { width: 100%; color: var(--muted); font-size: .82rem; line-height: 1.45; padding: 12px; border: 1px dashed var(--border); border-radius: 14px; background: var(--surface-2); }
.signals-more-btn { justify-self: center; margin-top: 4px; }
@media (max-width: 1020px) {
  .signals-hero, .signals-toolbar { flex-direction: column; }
  .signals-stats, .signals-grid { width: 100%; grid-template-columns: 1fr; }
  .signals-toolbar-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .signals-hero, .signals-panel { padding: 15px; border-radius: 18px; }
  .signals-toggle-grid { grid-template-columns: 1fr; }
  .signals-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
  .signal-symbol-row { min-height: 52px; }
  .signal-sub-main, .signal-sub-remove { min-height: 44px; }
  .signal-time { width: 100%; margin-left: 0; }
}

/* --- Compounder Intelligence Engine (CIE) scorecard ------------------------------ */
.cie-tag { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-ring);
  padding: 2px 7px; border-radius: var(--r-pill); margin-left: 8px; vertical-align: middle; }
.cie-empty { color: var(--muted); font-size: 0.9rem; padding: 20px; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
/* class tones */
.cie-great { --cie: var(--positive); --cie-soft: var(--positive-soft); }
.cie-good  { --cie: #2f9e44; --cie-soft: rgba(47,158,68,0.10); }
.cie-neutral { --cie: var(--muted); --cie-soft: var(--surface-3); }
.cie-watch { --cie: var(--accent-2); --cie-soft: var(--accent-2-soft); }
.cie-bad   { --cie: var(--negative); --cie-soft: var(--negative-soft); }

.cie-class-head { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  border: 1px solid var(--border); border-left: 4px solid var(--cie, var(--border-strong));
  background: var(--cie-soft, var(--surface-2)); border-radius: var(--r-md); margin-bottom: 14px; }
.cie-class-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cie-class-pill { font-weight: 800; font-size: 0.98rem; color: var(--cie); }
.cie-class-action { font-size: 0.85rem; color: var(--text-2); font-weight: 600; }
.cie-class-meta { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.01em; }

.cie-heroes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.cie-hero { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.cie-hero-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.cie-hero-val { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--cie, var(--text)); font-variant-numeric: tabular-nums; }
.cie-hero-val em { font-size: 0.85rem; font-weight: 600; color: var(--muted); font-style: normal; margin-left: 2px; }
.cie-hero-sub { font-size: 0.72rem; color: var(--muted-2); }

.cie-bars { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px 24px; margin-bottom: 14px; }
.cie-bars-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.cie-bar-row { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 8px; margin-bottom: 7px; }
.cie-bar-label { font-size: 0.8rem; color: var(--text-2); }
.cie-bar-track { height: 7px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.cie-bar-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--cie, var(--accent)); transition: width 0.4s ease; }
.cie-bar-val { font-size: 0.82rem; font-weight: 700; text-align: right; color: var(--cie, var(--text)); font-variant-numeric: tabular-nums; }

.cie-valline { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 14px; margin-bottom: 12px;
  background: var(--surface-2); border-radius: var(--r-md); font-size: 0.82rem; color: var(--muted); }
.cie-valline strong { color: var(--text); font-weight: 700; margin-left: 4px; font-variant-numeric: tabular-nums; }
.cie-valline strong.positive { color: var(--positive); }
.cie-valline strong.negative { color: var(--negative); }

.cie-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 6px; }
.cie-metric { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface); }
.cie-metric span { font-size: 0.76rem; color: var(--muted); }
.cie-metric strong { font-size: 0.85rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .cie-heroes, .cie-bars { grid-template-columns: 1fr; }
}

/* Compounder ranking table — compact score chips */
.cie-score-chip { display: inline-block; min-width: 30px; text-align: center; padding: 2px 7px;
  border-radius: var(--r-pill); font-weight: 700; font-size: 0.82rem; font-variant-numeric: tabular-nums;
  color: var(--cie, var(--text)); background: var(--cie-soft, var(--surface-3)); }
#compounder-table-body .cie-class-pill { font-size: 0.78rem; font-weight: 700; }
#compounder-table-body td { vertical-align: middle; }

/* Unified Overview: verdict + CIE classification headline */
.overview-verdict-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.overview-class-action { font-size: 0.82rem; color: var(--text-2); font-weight: 600; }
.overview-tagline-row { margin: 8px 0 12px; color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
.cie-note { color: var(--muted); font-style: italic; }

/* --- Historical DNA (CIE MVP 2) --------------------------------------------------- */
.dna-intro { font-size: 0.85rem; color: var(--text-2); line-height: 1.5; margin-bottom: 12px; }
.dna-matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
.dna-match { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--border); border-left: 3px solid var(--cie, var(--border-strong));
  border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.dna-match:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dna-match-head { display: flex; align-items: baseline; gap: 6px; }
.dna-match-head strong { font-size: 0.95rem; font-weight: 800; color: var(--text); }
.dna-match-head em { font-size: 0.8rem; color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; }
.dna-sim { margin-left: auto; font-size: 0.9rem; font-weight: 800; color: var(--cie, var(--text)); font-variant-numeric: tabular-nums; }
.dna-bar { height: 6px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.dna-bar-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--cie, var(--accent)); }
.dna-traits { font-size: 0.72rem; color: var(--muted); line-height: 1.4; }

/* --- LLM Qualitative Analysis panel (CIE MVP 3) ---------------------------------- */
.ql-summary { font-size: 0.95rem; line-height: 1.6; color: var(--text); margin-bottom: 14px;
  padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-md); border-left: 3px solid var(--accent); }
.ql-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.ql-chip { font-size: 0.78rem; padding: 4px 10px; border-radius: var(--r-pill);
  color: var(--cie, var(--text-2)); background: var(--cie-soft, var(--surface-3)); }
.ql-chip strong { font-weight: 700; }
.ql-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ql-nvn { font-size: 0.86rem; line-height: 1.5; color: var(--text-2); margin: 4px 0 14px;
  padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); }
/* AI qualitative loading status — the Compounder logo breathing in opacity. */
.ql-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; min-height: 340px; padding: 44px 20px; }
.ql-loading-orb { position: relative; display: flex; align-items: center; justify-content: center; width: 108px; height: 108px; margin-bottom: 4px; }
.ql-loading-orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 68%); animation: ql-halo 2.6s ease-in-out infinite; }
.ql-loading-logo { position: relative; width: 84px; height: 84px; object-fit: contain; animation: ql-breathe 2.4s ease-in-out infinite; }
.ql-loading-title { font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.ql-loading-step { font-size: 0.9rem; font-weight: 600; color: var(--accent); min-height: 1.3em; transition: opacity 220ms ease; }
.ql-loading-sub { font-size: 0.85rem; line-height: 1.55; color: var(--muted); max-width: 440px; }
@keyframes ql-breathe { 0%, 100% { opacity: 0.3; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes ql-halo { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 0.7; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .ql-loading-logo { animation: ql-breathe-fade 2.4s ease-in-out infinite; }
  .ql-loading-orb::before { animation: none; opacity: 0.4; }
}
@keyframes ql-breathe-fade { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.ql-business { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2, var(--surface)); display: grid; gap: 10px; }
.ql-business .ql-list-title { margin-bottom: 2px; }
.ql-biz-row { display: grid; grid-template-columns: 148px 1fr; gap: 12px; align-items: baseline; }
.ql-biz-label { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.ql-biz-text { font-size: 0.86rem; line-height: 1.5; color: var(--text-2); }
@media (max-width: 640px) { .ql-biz-row { grid-template-columns: 1fr; gap: 2px; } }
.ql-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 12px; }
.ql-list-title { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.ql-list ul { margin: 0; padding-left: 18px; }
.ql-list li { font-size: 0.85rem; line-height: 1.5; color: var(--text-2); margin-bottom: 5px; }
.ql-list.ql-good .ql-list-title { color: var(--positive); }
.ql-list.ql-bad .ql-list-title { color: var(--negative); }
.ql-flags { margin-bottom: 12px; }
.ql-flags li { list-style: none; margin-left: -18px; margin-bottom: 7px; }
.ql-sev { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  padding: 1px 7px; border-radius: var(--r-pill); margin-right: 6px;
  color: var(--cie, var(--text)); background: var(--cie-soft, var(--surface-3)); }

/* --- Global floating AI assistant ------------------------------------------------ */
.cie-chat { position: fixed; right: 22px; bottom: 22px; z-index: 1200; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
/* CompAI launcher — modern blue→violet gradient with a glassy sheen and a glowing sparkle */
.cie-chat-fab {
  width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer; display: grid; place-items: center; color: var(--on-accent);
  background:
    radial-gradient(130% 110% at 28% 22%, rgba(255,255,255,0.42), rgba(255,255,255,0) 46%),
    linear-gradient(140deg, #4b57ff 0%, var(--accent) 44%, #8b5cf6 100%);
  box-shadow: 0 10px 24px rgba(80,70,230,0.40), inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -4px 9px rgba(20,10,60,0.16);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.cie-chat-fab:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.05); box-shadow: 0 15px 32px rgba(80,70,230,0.5), inset 0 1px 1px rgba(255,255,255,0.5); }
.cie-chat-fab:active { transform: scale(0.96); }
.cie-chat-fab-icon { display: grid; place-items: center; }
.cie-chat-fab-icon svg { width: 24px; height: 24px; display: block; filter: drop-shadow(0 0 4px rgba(255,255,255,0.55)); }
.cie-chat-open .cie-chat-fab { transform: rotate(90deg); }
.cie-chat-card { width: min(460px, calc(100vw - 40px)); height: min(820px, calc(100vh - 96px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 26px 64px rgba(16,24,40,0.24), 0 6px 18px rgba(16,24,40,0.09);
  display: flex; flex-direction: column; overflow: hidden; }
.cie-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--hairline); background: var(--surface); }
.cie-chat-heading { flex: 1 1 auto; min-width: 0; }
.cie-chat-title { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 0.98rem;
  letter-spacing: -0.01em; color: var(--text); }
.cie-chat-title::before { content: "✦"; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; font-size: 0.85rem; color: var(--on-accent);
  background: linear-gradient(140deg, #4b57ff, var(--accent) 52%, #8b5cf6);
  box-shadow: 0 2px 7px rgba(80,70,230,0.42); }
.cie-chat-symbol { font-size: 0.78rem; font-weight: 700; color: var(--accent-strong);
  background: var(--accent-soft); border: 1px solid var(--accent-ring); padding: 1px 8px; border-radius: var(--r-pill); margin-left: 6px; }
.cie-chat-subtitle { margin: 3px 0 0 35px; color: var(--muted); font-size: 0.7rem; line-height: 1.2; }
.cie-chat-reset { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  border-radius: var(--r-pill); padding: 5px 10px; font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.cie-chat-reset:hover, .cie-chat-reset:focus-visible { border-color: var(--accent); color: var(--accent-strong); outline: none; }
.cie-chat-close { border: none; background: none; cursor: pointer; font-size: 0.9rem; color: var(--muted-2);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; transition: background 0.12s, color 0.12s; }
.cie-chat-close:hover { background: var(--surface-3); color: var(--text); }
.cie-chat-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.cie-msg { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 0.86rem; line-height: 1.55; }
.cie-msg p { margin: 0 0 6px; } .cie-msg p:last-child { margin-bottom: 0; }
.cie-msg ul { margin: 4px 0; padding-left: 18px; } .cie-msg li { margin-bottom: 3px; }
.cie-msg code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 5px; font-family: var(--font-mono); font-size: 0.82em; }
.cie-msg-user { align-self: flex-end; color: var(--on-accent); border-bottom-right-radius: 5px;
  background: linear-gradient(142deg, #4b57ff 0%, var(--accent) 55%, #7c5cff 100%);
  box-shadow: 0 4px 12px rgba(80,70,230,0.3); }
.cie-msg-user code { background: rgba(255,255,255,0.2); }
.cie-msg-ai { align-self: flex-start; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-bottom-left-radius: 5px; box-shadow: var(--shadow-xs); }
.cie-msg-tools { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--border-strong); font-size: 0.72rem; color: var(--muted); }
.cie-msg-thinking { display: flex; gap: 4px; align-items: center; }
.cie-msg-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: cie-blink 1.2s infinite both; }
.cie-msg-thinking span:nth-child(2) { animation-delay: 0.2s; } .cie-msg-thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cie-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.cie-chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--hairline); background: var(--surface); }
.cie-chat-compose { flex: 1 1 auto; min-width: 0; }
.cie-chat-form textarea { width: 100%; box-sizing: border-box; resize: none; border: 1px solid var(--border-strong); border-radius: 18px;
  padding: 10px 16px; font: inherit; font-size: 0.86rem; color: var(--text); background: var(--surface-2); max-height: 120px;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s; }
.cie-chat-note { margin: 5px 4px 0; color: var(--muted); font-size: 0.66rem; line-height: 1.25; }
.cie-chat-form textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-ring); }
.cie-chat-send { flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer;
  color: var(--on-accent); display: grid; place-items: center; font-size: 0.95rem;
  background: linear-gradient(142deg, #4b57ff, var(--accent) 55%, #8b5cf6);
  box-shadow: 0 4px 12px rgba(80,70,230,0.36); transition: transform 0.15s ease, filter 0.15s ease; }
.cie-chat-send:hover { transform: translateY(-1px); filter: brightness(1.07); }
.cie-chat-send:active { transform: scale(0.94); }
.cie-chat-send.is-cancelling { background: var(--surface-3); color: var(--text-2); box-shadow: none; font-size: 0.72rem; }
.cie-chat-send:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }
@media (prefers-reduced-motion: reduce) { .cie-chat-fab, .cie-msg-thinking span { transition: none; animation: none; } }

/* Small headings inside chat markdown */
.cie-msg .cie-h { margin: 8px 0 4px; font-weight: 700; line-height: 1.3; color: var(--text); }
.cie-msg h3.cie-h { font-size: 0.92rem; }
.cie-msg h4.cie-h { font-size: 0.86rem; }
.cie-msg h5.cie-h, .cie-msg h6.cie-h { font-size: 0.82rem; color: var(--text-2); text-transform: none; }
.cie-msg em { font-style: italic; }
.cie-msg strong { font-weight: 700; }

/* Qualitative analysis: staleness banner (≥1 day old) */
.ql-stale { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; margin-bottom: 12px;
  font-size: 0.83rem; line-height: 1.45; color: var(--text-2);
  background: var(--accent-2-soft); border: 1px solid var(--accent-2); border-radius: var(--r-md); }

/* --- Timeline: range bars + full-height chart ------------------------------------ */
.timeline-ranges { display: grid; gap: 11px; margin: 8px 0 6px; }
.trange { display: grid; gap: 5px; }
.trange-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.78rem; flex-wrap: wrap; }
.trange-label { font-weight: 700; color: var(--text-2); letter-spacing: 0.01em; }
.trange-sub { color: var(--muted); font-variant-numeric: tabular-nums; }
.trange-bar { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--surface-3); }
.trange-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }
.trange-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); transform: translate(-50%, -50%); box-shadow: var(--shadow-xs); }
.trange-ends { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.trange-ends .trange-now { color: var(--text); font-weight: 700; }

/* The Timeline tab fills all remaining height — no empty gap below the chart. */
.symbol-tab-panel[data-panel="timeline"] { height: 100%; }
/* Split layout: top = 10-day / 52-week range card, bottom = candlestick chart. */
.symbol-tab-panel.timeline-split { display: flex; flex-direction: column; gap: 14px; }
.timeline-ranges-card { flex: none; margin: 0; }
/* Free key-stats grid above the candlestick chart (price / range / volume / moves). */
.timeline-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 12px 18px;
  margin: 12px 0 2px;
}
.tstat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tstat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.tstat-value { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.tstat-value.positive { color: var(--positive, #0e9f6e); }
.tstat-value.negative { color: var(--negative, #dc2626); }
.tv-page-back { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; margin-right: 6px; }
.symbol-tab-panel[data-panel="timeline"] .symbol-chart-card { flex: 1 1 auto; min-height: 320px; display: flex; flex-direction: column; margin: 0; }
.symbol-tab-panel[data-panel="timeline"] .timeline-chart-shell { flex: 1 1 auto; min-height: 160px; margin: 10px 0; }
.symbol-tab-panel[data-panel="timeline"] .timeline-chart { height: 100%; }

/* Floating "Sync prices" refresh button (left of the + add button) */
.market-sync-btn-floating { width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--text-2); }
.market-add-btn svg { width: 17px; height: 17px; display: block; }
.market-add-btn.is-syncing svg { animation: cie-spin 0.8s linear infinite; }
@keyframes cie-spin { to { transform: rotate(360deg); } }

/* Market Data: regular-session state column — status pill */
.mkt-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: var(--r-pill);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  white-space: nowrap; border: 1px solid transparent;
}
.mkt-pill .mkt-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.mkt-pill.mkt-open { color: var(--positive); background: var(--positive-soft); border-color: rgba(14,159,110,0.22); }
.mkt-pill.mkt-open .mkt-dot { background: var(--positive); animation: mkt-pulse 1.8s ease-out infinite; }
.mkt-pill.mkt-ext { color: var(--accent-2); background: var(--accent-2-soft); border-color: rgba(183,121,31,0.22); }
.mkt-pill.mkt-ext .mkt-dot { background: var(--accent-2); }
.mkt-pill.mkt-closed { color: var(--muted); background: var(--surface-3); border-color: var(--border); }
.mkt-pill.mkt-closed .mkt-dot { background: var(--muted-2); }
.mkt-pill.mkt-unknown { color: var(--muted-2); background: transparent; font-weight: 600; }
@keyframes mkt-pulse {
  0% { box-shadow: 0 0 0 0 rgba(14,159,110,0.5); }
  70% { box-shadow: 0 0 0 5px rgba(14,159,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,159,110,0); }
}
@media (prefers-reduced-motion: reduce) { .mkt-pill.mkt-open .mkt-dot { animation: none; } }

/* Back button in the chat header — hidden on desktop (the ✕ close is used there). */
.cie-chat-back { display: none; align-items: center; gap: 4px; border: none; background: none;
  cursor: pointer; color: var(--accent); font: inherit; font-weight: 700; font-size: 0.92rem;
  padding: 4px 6px 4px 0; margin-right: 4px; }
.cie-chat-back svg { flex: 0 0 auto; }

/* Chat launcher aligned with the mobile nav island: same bottom + same 56px height → centers on
   the same horizontal line. Placed after the .cie-chat base rule so it wins the cascade. */
@media (max-width: 900px) {
  .cie-chat { right: 12px; bottom: 16px; }

  /* CompAI opens as a FULL-PAGE chat on phones (the small card is hard to use). */
  .cie-chat-card {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;          /* JS overrides with the exact visual-viewport height when the keyboard opens */
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface);   /* solid card bg so no sub-pixel gap ever reveals the page behind */
    z-index: 1400;           /* above the bottom nav island and everything else */
  }
  .cie-chat-head { padding: 14px 16px; justify-content: flex-start; }   /* [< Back] CompAI, left-aligned */
  .cie-chat-back { display: inline-flex; }   /* show the Back button */
  .cie-chat-close { display: none; }         /* Back replaces the ✕ on mobile */
  .cie-chat-subtitle { display: none; }
  .cie-chat-open .cie-chat-fab { display: none; }   /* hide the FAB while the full page is open */

  /* Lock the page behind the full-screen chat so it can't scroll into view or leave a gap. */
  body.cie-chat-active { overflow: hidden; }
  body.cie-chat-active .main-stage,
  body.cie-chat-active .side-nav { overflow: hidden; }
}

/* ============================================================================
   Market Data table — minimalist, elegant (scoped so other tables are untouched)
   ========================================================================== */
#market-data-page .market-table-floating {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.05);
}
#market-data-page thead th {
  background: var(--surface);
  color: var(--muted-2);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 14px 16px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
#market-data-page tbody td {
  padding: 14px 16px; border-bottom: 1px solid var(--hairline);
  vertical-align: middle; font-size: 0.88rem;
}
#market-data-page tbody tr:last-child td { border-bottom: 0; }
#market-data-page tbody tr { transition: background-color 120ms ease; }
#market-data-page tbody tr:hover,
#market-data-page tbody tr:focus-within { background: var(--accent-soft); }
#market-data-page th:first-child, #market-data-page td:first-child { padding-left: 20px; }
#market-data-page th:last-child, #market-data-page td:last-child { padding-right: 18px; }

/* The frozen identity column is useful only when horizontal space is constrained.
   Match its paint to the row state so pointer and keyboard navigation still read
   as one row, rather than as an independent symbol card. */
@media (max-width: 900px) {
  #market-data-page .market-table-floating th:first-child,
  #market-data-page .market-table-floating td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
    transition: background-color 120ms ease;
  }
  #market-data-page .market-table-floating thead th:first-child {
    z-index: 3;
  }
  #market-data-page .market-table-floating tbody tr:hover td:first-child,
  #market-data-page .market-table-floating tbody tr:focus-within td:first-child {
    background: var(--accent-soft);
  }
}

/* Numbers: elegant tabular sans (drop the monospace techy look) */
#market-data-page .market-price-value,
#market-data-page .market-change-value,
#market-data-page .market-change-cell em {
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
}
#market-data-page .market-price-value { font-weight: 700; color: var(--text); font-size: 0.9rem; }
#market-data-page .market-change-value { font-weight: 600; font-size: 0.9rem; }
#market-data-page .asset-symbol-copy strong { font-size: 0.9rem; }

/* Right-align the numeric columns: Actual Price · 1D · 1M · 1Y (columns 4–7) */
#market-data-page thead th:nth-child(n+4):nth-child(-n+7),
#market-data-page tbody td:nth-child(n+4):nth-child(-n+7) { text-align: right; }
#market-data-page td:nth-child(n+4):nth-child(-n+7) .symbol-link,
#market-data-page td:nth-child(n+4):nth-child(-n+7) .market-change-value { text-align: right; }
#market-data-page td:nth-child(n+4):nth-child(-n+7) .market-change-cell { justify-items: end; }

/* --- Auth: login gate, topbar user chip, users page ---------------------- */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  overflow: auto;
  padding: 0;
  background: var(--bg);
}
.login-overlay.open { display: block; }
/* When not authenticated the login is a standalone page: hide the whole app. */
body.auth-locked .app-shell,
body.auth-locked .cie-chat { display: none !important; }
.login-shell {
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(420px, 0.8fr);
  overflow: hidden;
  background: var(--surface);
}
.login-story {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 38px clamp(44px, 6vw, 96px) 42px;
  overflow: hidden;
  color: #f7f7fb;
  background:
    linear-gradient(145deg, rgba(11, 13, 19, 0.68), rgba(21, 24, 36, 0.94)),
    radial-gradient(circle at 76% 20%, rgba(130, 94, 255, 0.52), transparent 33%),
    linear-gradient(135deg, #151824, #0b0d13 74%);
}
.login-story::before,
.login-story::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.login-story::before {
  width: 420px;
  height: 420px;
  right: -190px;
  bottom: -180px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  box-shadow: 0 0 0 68px rgba(255, 255, 255, 0.025), 0 0 0 136px rgba(255, 255, 255, 0.018);
}
.login-story::after {
  inset: 0;
  opacity: 0.24;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.login-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: rgba(247,247,251,.68); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: color var(--transition); }
.login-back:hover { color: #fff; }
.login-back:focus-visible { outline: 2px solid #a997ff; outline-offset: 5px; border-radius: var(--r-sm); }
.login-story-main { width: min(580px, 100%); margin: auto 0; padding: 48px 0; }
.login-brand { display: inline-flex; align-items: center; margin-bottom: 42px; }
.login-brand img { width: clamp(230px, 22vw, 320px); height: auto; max-height: 80px; object-fit: contain; object-position: left center; }
.login-eyebrow, .login-card-kicker { margin: 0; color: #a997ff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; }
.login-story h1 { max-width: 650px; margin: 13px 0 18px; font-family: var(--font-display); font-size: clamp(2.4rem, 4.4vw, 4.25rem); line-height: 0.98; letter-spacing: -0.045em; }
.login-story-copy { max-width: 580px; margin: 0; color: rgba(247,247,251,.68); font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.65; }
.login-capabilities { display: grid; gap: 0; margin-top: 48px; border-top: 1px solid rgba(255,255,255,.12); }
.login-capabilities article { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.login-capability-icon { color: #a997ff; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.55; }
.login-capabilities strong { display: block; margin-bottom: 3px; font-size: 0.92rem; }
.login-capabilities p { margin: 0; color: rgba(247,247,251,.56); font-size: 0.82rem; line-height: 1.45; }
.login-trust { display: flex; align-items: center; gap: 9px; margin: 0; color: rgba(247,247,251,.58); font-size: 0.76rem; }
.login-trust span { width: 7px; height: 7px; border-radius: 50%; background: #39d39f; box-shadow: 0 0 0 4px rgba(57,211,159,.12); }
.login-form-column { display: grid; place-items: center; min-height: 100dvh; padding: clamp(44px, 6vw, 96px); border-left: 1px solid var(--border); background: var(--surface); }
.login-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 6px; }
.login-card-heading { margin-bottom: 28px; }
.login-card-kicker { color: var(--accent); }
.login-card h2 { margin: 10px 0 5px; font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.65rem); line-height: 1.05; letter-spacing: -0.035em; }
.login-sub { color: var(--muted); font-size: 14px; margin: 0; }
.login-form { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.login-form label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); }
/* Sign-up-only fields: hidden in login mode, shown when the card is in sign-up mode. */
.signup-only { display: none !important; }
.login-overlay.mode-signup .signup-only { display: flex !important; }
.login-switch { margin-top: 17px; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); }
.login-switch-btn { background: none; border: none; padding: 0; color: var(--accent); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.login-switch-btn:hover { text-decoration: underline; }
.login-switch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
/* Third gate state: the account exists but has no session until the emailed link is
   opened. Reuses the sign-in column so nothing shifts when it replaces the form. */
.login-verify { display: grid; gap: 12px; text-align: left; }
.login-verify h3 { margin: 0; font-size: 1.02rem; color: var(--text); }
.login-verify p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.login-verify .primary-btn { width: 100%; min-height: 44px; }
.login-verify-note:empty { display: none; }
.login-verify-note { color: var(--accent); font-size: 0.82rem; }
.login-verify .login-switch-btn { justify-self: center; }
.login-form input {
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 15px;
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.login-form input:hover { border-color: var(--muted-2); }
.login-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.login-submit { min-height: 46px; margin-top: 5px; width: 100%; justify-content: center; }
.login-error {
  margin-top: 2px;
  color: var(--negative);
  background: var(--negative-soft);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  text-align: center;
}
.login-legal { margin: 20px 0 0; color: var(--muted-2); font-size: 0.72rem; line-height: 1.5; text-align: center; }
.login-legal a { color: var(--muted); text-underline-offset: 2px; }
.login-legal a:hover { color: var(--accent); }
@media (max-width: 900px) {
  .login-shell { min-height: 100dvh; grid-template-columns: 1fr; }
  .login-story { min-height: auto; padding: 24px 26px 28px; }
  .login-story-main { margin: 0; padding: 50px 0 12px; }
  .login-brand { margin-bottom: 34px; }
  .login-story h1 { max-width: 570px; font-size: clamp(2.25rem, 8vw, 3.65rem); }
  .login-capabilities { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; border: 0; }
  .login-capabilities article { display: block; padding: 0; border: 0; }
  .login-capability-icon { display: block; margin-bottom: 7px; }
  .login-trust { margin-top: 25px; }
  .login-form-column { min-height: auto; padding: 48px 26px; border-top: 1px solid var(--border); border-left: 0; }
}
@media (max-width: 620px) {
  .login-shell { min-height: 100dvh; }
  .login-story { padding: 22px 20px 28px; }
  .login-story-main { padding: 42px 0 8px; }
  .login-brand { margin-bottom: 28px; }
  .login-story h1 { font-size: clamp(2.1rem, 12vw, 3rem); }
  .login-story-copy { font-size: 0.94rem; }
  .login-capabilities { display: none; }
  .login-trust { margin-top: 28px; }
  .login-form-column { padding: 42px 20px 46px; }
  .login-card-heading { margin-bottom: 24px; }
}

.topbar-user { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.topbar-user-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.topbar-user-email { font-size: 13px; color: var(--text-2); font-weight: 600; }
.topbar-user-role {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  align-self: flex-end;
  margin-top: 2px;
}
.topbar-user-role.role-user { color: var(--muted); background: var(--surface-3); }
.topbar-logout-btn { padding: 7px 14px; }

/* Admin users table */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
body.modal-open { overflow: hidden; }
.users-admin-shell { width: 100%; min-width: 0; display: grid; gap: 18px; }
.users-admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.users-admin-head .integrations-intro-copy { max-width: 720px; margin-bottom: 0; }
.users-table-panel { width: 100%; min-width: 0; overflow: visible; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.users-table-wrap { width: 100%; overflow-x: auto; border-radius: inherit; }
.users-table { width: 100%; min-width: 850px; border-collapse: collapse; }
.users-table th { padding: 13px 18px; border-bottom: 1px solid var(--border); color: var(--muted); background: var(--surface-2); font-size: 11px; font-weight: 650; letter-spacing: .055em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.users-table td { padding: 15px 18px; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 13px; vertical-align: middle; }
.users-table tbody tr:last-child td { border-bottom: 0; }
.users-table tbody tr { transition: background-color .16s ease; }
.users-table tbody tr:hover { background: var(--surface-2); }
.user-identity { display: flex; align-items: center; gap: 11px; min-width: 180px; }
.user-identity > div { min-width: 0; }
.user-identity strong { color: var(--text); font-size: 13.5px; font-weight: 650; }
.user-identity small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 11px; white-space: nowrap; }
.user-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: 10px; color: var(--accent); background: var(--accent-soft); font-size: 11px; font-weight: 750; letter-spacing: .03em; }
.user-you-tag { margin-left: 7px; padding: 2px 6px; border-radius: var(--r-pill); color: var(--accent); background: var(--accent-soft); font-size: 9.5px; font-weight: 700; text-transform: uppercase; }
.user-table-email, .user-last-login { white-space: nowrap; }
.user-role-badge { display: inline-flex; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-pill); padding: 3px 9px; font-weight: 650; }
.user-role-badge.role-user { color: var(--muted); background: var(--surface-3); }
.user-actions-cell { position: relative; width: 54px; padding-left: 8px !important; padding-right: 12px !important; text-align: right; }
.user-kebab-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.user-kebab-btn:hover, .user-kebab-btn[aria-expanded="true"] { color: var(--text); border-color: var(--border); background: var(--surface-3); }
.user-kebab-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.user-kebab-btn svg { width: 18px; height: 18px; fill: currentColor; }
.user-actions-menu { position: absolute; z-index: 30; top: calc(100% - 8px); right: 12px; width: 148px; padding: 6px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow-lg); text-align: left; }
.user-actions-menu button { width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; color: var(--text-2); background: transparent; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.user-actions-menu button:hover, .user-actions-menu button:focus-visible { color: var(--text); background: var(--surface-3); outline: 0; }
.user-actions-menu button.danger { color: var(--negative); }
.user-editor-card { width: min(570px, 100%); max-height: min(820px, calc(100dvh - 32px)); overflow-y: auto; }
.user-editor-card .modal-head { align-items: flex-start; }
.user-editor-card .modal-head h3 { margin-bottom: 3px; }
.user-editor-context { display: block; max-width: 400px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-editor-form { margin-top: 18px; }
.user-editor-form .form-actions { justify-content: flex-end; }
@media (max-width: 760px) {
  .users-admin-head { align-items: flex-start; }
  .users-admin-head .primary-btn { flex: 0 0 auto; }
  .users-table { min-width: 0; }
  .users-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .users-table, .users-table tbody, .users-table tr, .users-table td { display: block; width: 100%; }
  .users-table tbody tr { position: relative; padding: 16px 56px 14px 16px; border-bottom: 1px solid var(--border); overflow: visible; }
  .users-table tbody tr:last-child { border-bottom: 0; }
  .users-table td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; border: 0; text-align: right; }
  .users-table td::before { content: attr(data-label); color: var(--muted); font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
  .users-table td:first-child { display: block; padding: 0 0 12px; text-align: left; }
  .users-table td:first-child::before, .users-table .user-actions-cell::before { display: none; }
  .users-table .user-actions-cell { position: absolute; top: 12px; right: 10px; width: auto; padding: 0 !important; }
  .user-actions-menu { top: 38px; right: 0; }
  .user-table-email { max-width: 65vw; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 520px) {
  .users-admin-head { flex-direction: column; gap: 14px; }
  .users-admin-head .primary-btn { width: 100%; }
  .user-editor-form { grid-template-columns: 1fr; }
  .user-editor-form .integration-form-span { grid-column: auto; }
}

/* --- Topbar profile button + account modal ------------------------------- */
.topbar-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 36px;
  height: 36px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease;
}
.topbar-profile-btn:hover { color: var(--accent); background: transparent; }
.topbar-profile-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.topbar-avatar {
  display: grid; place-items: center;
  width: auto; height: auto; flex: 0 0 auto;
  border-radius: 0;
  color: inherit;
  background: transparent;
}
.topbar-avatar svg { width: 19px; height: 19px; display: block; }
.topbar-user-name {
  display: block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
}
.topbar-user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }

/* Account modal */
.account-card { width: min(460px, 100%); }
.account-identity {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px 16px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.account-avatar {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 50%; color: var(--accent); background: var(--accent-soft);
}
.account-avatar svg { width: 28px; height: 28px; }
.account-identity-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.account-identity-name { font-size: 16px; font-weight: 700; color: var(--text); }
.account-identity-email { font-size: 13px; color: var(--muted); }
.account-identity .topbar-user-role { align-self: flex-start; margin-top: 2px; }
.account-form { margin-top: 4px; }
.account-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.account-logout-btn { color: var(--negative); border-color: var(--negative-soft); }

/* --- Profile dropdown menu + Settings (account) page --------------------- */
.topbar-user { position: relative; }
.topbar-chevron { display: none; }
.topbar-profile-btn[aria-expanded="true"] { color: var(--accent); background: transparent; }

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(18, 22, 34, 0.18);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-menu.hidden-page { display: none; }
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.profile-menu-item svg { color: var(--muted); flex: 0 0 auto; }
.profile-menu-item:hover { background: var(--surface-2); color: var(--text); }
.profile-menu-item.danger { color: var(--negative); }
.profile-menu-item.danger svg { color: var(--negative); }
.profile-menu-item.danger:hover { background: var(--negative-soft); }

/* Personal Signals notifications, between theme and profile. */
.topbar-notifications { position: relative; flex: 0 0 auto; }
.notification-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.notification-bell svg { width: 19px; height: 19px; display: block; }
.notification-bell:hover,
.notification-bell[aria-expanded="true"] { color: var(--accent); background: transparent; }
.notification-bell:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.notification-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--negative);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}
.notifications-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: -54px;
  width: min(380px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 22px 60px rgba(18, 22, 34, .24);
  z-index: 90;
}
.notifications-panel.hidden-page { display: none; }
.notifications-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px 12px; border-bottom: 1px solid var(--border); }
.notifications-panel-head > div { display: grid; gap: 2px; }
.notifications-panel-head strong { color: var(--text); font-size: 14px; }
.notifications-panel-head span { color: var(--muted); font-size: 11.5px; }
.notifications-read-all { padding: 5px 0; border: 0; background: transparent; color: var(--accent); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.notifications-read-all:disabled { color: var(--muted); cursor: default; opacity: .6; }
.notifications-list { max-height: min(440px, 60vh); overflow-y: auto; }
.notification-item { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; width: 100%; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--hairline); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.notification-item:hover { background: var(--surface-2); }
.notification-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -3px; }
.notification-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: transparent; }
.notification-item.is-unread .notification-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.notification-copy { display: grid; gap: 4px; min-width: 0; }
.notification-copy strong { overflow: hidden; color: var(--text); font-size: 12.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.notification-copy span { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 11.5px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notification-copy time { color: var(--muted-2); font-size: 10.5px; }
.notification-empty { padding: 30px 18px; color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
.notifications-view-all { width: 100%; padding: 11px 16px; border: 0; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--accent); font-size: 12px; font-weight: 750; cursor: pointer; }
.notifications-view-all:hover { background: var(--accent-soft); }

/* Theme switch (topbar, left of notifications). */
.topbar-theme { position: relative; flex: 0 0 auto; }
.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-switch-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 56px;
  height: 30px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, #020617 12%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.16);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.theme-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  box-shadow: 0 5px 14px rgba(37,99,235,.35);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 160ms ease, box-shadow 160ms ease;
}
.theme-switch-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color 160ms ease, opacity 160ms ease;
}
.theme-switch-icon-dark { color: #eff6ff; }
.theme-switch:hover .theme-switch-track { border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.2); }
.theme-switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 999px; }
.theme-switch:disabled { pointer-events: none; opacity: .72; }
:root[data-theme="light"] .theme-switch-thumb {
  transform: translateX(26px);
  background: linear-gradient(135deg, #fbbf24, #f97316);
  box-shadow: 0 5px 14px rgba(249,115,22,.32);
}
:root[data-theme="light"] .theme-switch-icon-dark { color: var(--muted); }
:root[data-theme="light"] .theme-switch-icon-light { color: #fff7ed; }
@media (prefers-reduced-motion: reduce) {
  .theme-switch-track,
  .theme-switch-thumb,
  .theme-switch-icon { transition: none; }
}

/* Account (Settings) page */
.account-shell { display: grid; gap: 18px; width: 100%; max-width: 1180px; margin: 0 auto; padding-bottom: 34px; }
.account-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 148px; padding: 28px 30px;
  border: 1px solid var(--border); border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--accent) 6%), var(--surface));
  box-shadow: var(--shadow-sm);
}
.account-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.account-avatar {
  display: grid; place-items: center;
  width: 68px; height: 68px; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 18px; color: var(--accent); background: var(--accent-soft);
}
.account-avatar svg { width: 34px; height: 34px; }
.account-identity-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.account-eyebrow, .account-panel-kicker, .account-plan-label {
  color: var(--muted); font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
}
.account-identity-name { margin: 0; overflow: hidden; color: var(--text); font-size: clamp(23px, 2.2vw, 31px); font-weight: 760; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.account-identity-email { overflow: hidden; color: var(--muted); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.account-plan-block { display: grid; justify-items: end; gap: 5px; flex: 0 0 auto; }
.account-plan-name { color: var(--text); font-size: 21px; line-height: 1.1; }
.account-plan-block .topbar-user-role { margin: 0; }
.account-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.account-stat {
  display: grid; gap: 6px; min-height: 122px; padding: 20px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm);
}
.account-stat > span { color: var(--muted); font-size: 11px; font-weight: 720; letter-spacing: .04em; text-transform: uppercase; }
.account-stat > strong { color: var(--text); font-size: 29px; font-variant-numeric: tabular-nums; line-height: 1; }
.account-stat > small { align-self: end; color: var(--muted); font-size: 11.5px; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); gap: 18px; align-items: start; }
.account-profile-panel, .account-info-panel { padding: 24px; }
.account-profile-panel .panel-head > div, .account-info-panel .panel-head > div { display: grid; gap: 3px; }
.account-profile-panel .panel-head h3, .account-info-panel .panel-head h3 { margin: 0; font-size: 18px; }
.account-form { margin-top: 18px; }
.account-security-divider { position: relative; margin: 5px 0 0; border-top: 1px solid var(--border); }
.account-security-divider span { position: relative; top: -8px; padding-right: 9px; background: var(--surface); color: var(--muted); font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.account-side { display: grid; gap: 18px; }
.account-preference-form { display: grid; gap: 11px; margin-top: 18px; }
.account-preference-form > label { color: var(--text); font-size: 12.5px; font-weight: 700; }
.account-preference-form .select-field, .account-preference-form .app-select { width: 100%; }
.account-preference-form p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.account-preference-form .primary-btn { justify-self: start; }
.account-currency-panel .integration-form-status { margin-top: 12px; }
.account-facts { display: grid; gap: 0; margin: 16px 0 0; }
.account-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.account-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.account-facts dt { color: var(--muted); font-size: 12px; }
.account-facts dd { margin: 0; color: var(--text); font-size: 12.5px; font-weight: 650; text-align: right; }
.account-privacy-panel { display: flex; gap: 14px; padding: 20px; border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%); }
.account-privacy-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }
.account-privacy-icon svg { width: 19px; height: 19px; }
.account-privacy-panel strong { color: var(--text); font-size: 13px; }
.account-privacy-panel p { margin: 6px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
@media (max-width: 900px) {
  .account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .account-hero { align-items: flex-start; min-height: 0; padding: 20px; }
  .account-avatar { width: 52px; height: 52px; border-radius: 14px; }
  .account-avatar svg { width: 27px; height: 27px; }
  .account-plan-block { justify-items: start; }
  .account-plan-block .topbar-user-role { display: none; }
  .account-plan-label { display: none; }
  .account-plan-name { font-size: 14px; color: var(--accent); }
  .account-stats { gap: 10px; }
  .account-stat { min-height: 104px; padding: 16px; }
  .account-stat > strong { font-size: 25px; }
  .account-profile-panel, .account-info-panel { padding: 19px; }
  .account-form { grid-template-columns: 1fr; }
  .account-form > * { grid-column: 1; }
}

/* --- Google sign-in button on the login page ----------------------------- */
.login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 4px; color: var(--muted-2); font-size: 12px;
}
.login-divider::before, .login-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.google-btn:hover { background: var(--surface-2); border-color: var(--muted-2); }
.google-btn .google-g { flex: 0 0 auto; }

/* --- Research Lab -------------------------------------------------------- */
.research-shell { display: grid; gap: 18px; }
.research-table { width: 100%; border-collapse: collapse; }
.research-table th, .research-table td { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.research-table th { color: var(--muted); font-weight: 600; }
.research-table td.pos { color: var(--positive); }
.research-table td.neg { color: var(--negative); }
.research-row-btn { padding: 5px 10px; font-size: 12px; }
.research-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.research-metric { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.research-metric .m-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.research-metric .m-value { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; }
.research-metric .m-value.pos { color: var(--positive); }
.research-metric .m-value.neg { color: var(--negative); }
.research-equity-wrap { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface); margin-bottom: 14px; }
.research-equity { width: 100%; height: 160px; display: block; }
.research-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .research-cols { grid-template-columns: 1fr; } }

/* Research Lab — live balance banner */
.research-balance { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px;
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 4px 0 14px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.rl-balance-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px; }
.rl-balance-value { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; }
.rl-balance-sub { font-size: 0.85rem; font-weight: 600; margin-top: 3px; }
.rl-balance-sub.pos { color: var(--positive); } .rl-balance-sub.neg { color: var(--negative); }
.rl-balance-split { display: flex; gap: 22px; }
.rl-balance-split > div { display: flex; flex-direction: column; }
.rl-balance-split span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rl-balance-split strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.rl-balance-live { color: var(--positive); font-weight: 700; text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 5px; }
.rl-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); display: inline-block; animation: rlPulse 1.6s ease-in-out infinite; }
@keyframes rlPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .rl-live-dot { animation: none; } }

/* Research Lab — account actions row */
.research-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 14px; }
.research-actions input[type="number"] { width: 130px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; }
.research-actions input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* Research Lab — decision reasoning */
.rl-why { color: var(--muted); font-size: 0.82em; }

/* ============================================================================
   Research Lab — full-width autonomous dashboard
   ========================================================================== */
.research-dash {
  display: grid;
  gap: 16px;
  padding: 0 0 32px;
  grid-template-columns: 1.4fr 1fr;
  grid-template-areas:
    "intro     intro"
    "balance   model"
    "equity    equity"
    "movements holdings";
  align-items: stretch;
}
.rd-intro { grid-area: intro; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.rd-intro > div:first-child { flex: 1 1 420px; min-width: 0; }
.rd-actions-wrap { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.rd-balance-card { grid-area: balance; display: flex; align-items: center; }
.rd-model { grid-area: model; }
.rd-equity { grid-area: equity; }
.rd-movements { grid-area: movements; }
.rd-holdings { grid-area: holdings; }

.rd-balance-card .research-balance { border: none; background: transparent; padding: 0; margin: 0; width: 100%; }
.rd-balance-card .rl-balance-value { font-size: 2.7rem; line-height: 1.05; }
.rd-balance-card .rl-balance-split { gap: 28px; }
.rd-balance-card .rl-balance-split strong { font-size: 1.15rem; }
.research-dash .research-metrics { margin: 10px 0 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.rd-equity .research-equity { height: 240px; }
.rd-scroll { max-height: 480px; overflow-y: auto; }
.rd-scroll thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }

@media (max-width: 1040px) {
  .research-dash {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "balance" "model" "equity" "movements" "holdings";
  }
  .rd-actions-wrap { align-items: stretch; width: 100%; }
}

/* === B2C access model: paywall / free-tier picker ======================== */
/* Admin-only controls are hidden for every non-admin (free + paid). */
body:not(.access-admin) .admin-only { display: none !important; }
/* Free-only controls (the symbol picker button) show only for free users. */
.free-only { display: none !important; }
body.access-free .free-only { display: inline-flex !important; }
/* Free users still SEE the analysis columns, but the data is replaced by a
   locked chip (the breathing logo). Analysis blocks on the symbol-detail page
   stay hidden for free users EXCEPT for the free sample (NVDA/AAPL/GOOGL), whose
   detail page carries the .symbol-unlocked class. */
body.access-free #symbol-detail-page:not(.symbol-unlocked) .analysis-only { display: none !important; }

/* Locked analysis chip — the STATIC Compounder logo with a small padlock badge
   at the bottom-right. */
.analysis-locked {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(120, 90, 250, 0.10);
  border: 1px solid rgba(120, 90, 250, 0.22);
}
.analysis-locked-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.9;
}
.locked-analysis-trigger {
  min-width: 48px;
  min-height: 44px;
  justify-content: center;
  border-radius: 10px;
}
.locked-analysis-trigger:focus-visible {
  outline: 2px solid var(--accent, #7c8cff);
  outline-offset: 2px;
}
.analysis-locked::after {
  content: "🔒";
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 0.62rem;
  line-height: 1;
  padding: 1px;
  border-radius: 50%;
  background: var(--surface, #14141b);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* Premium symbol-detail tabs: a small lock on the tab label, and — on a symbol the
   free user can't fully access — an overlay that replaces the panel content. */
.symbol-tab-lock {
  display: inline-flex;
  margin-left: 5px;
  font-size: 0.72em;
  line-height: 1;
  opacity: 0.82;
}
.premium-lock-overlay { display: none; }
#symbol-detail-page:not(.symbol-unlocked) .symbol-tab-panel:has(.premium-lock-overlay) > *:not(.premium-lock-overlay) {
  display: none !important;
}
#symbol-detail-page:not(.symbol-unlocked) .premium-lock-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 48px 24px;
  text-align: center;
}
/* Same centered "loading page" language as the AI/candle loaders, but the logo is static. */
.premium-lock-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 460px;
}
.premium-lock-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  padding: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--accent-soft) 0%, transparent 68%);
}
.premium-lock-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.premium-lock-sub { font-size: 0.9rem; line-height: 1.6; color: var(--muted); max-width: 400px; }
.premium-lock-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
  box-shadow: 0 8px 20px var(--accent-ring);
}
.premium-lock-cta:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: 0 12px 26px var(--accent-ring); }
.premium-lock-cta:active { transform: translateY(0); }

/* CompAI chat locked for free users: bubble visible, a small lock badge, and a
   dimmed (disabled) composer. */
.cie-chat.chat-locked .cie-chat-fab { position: relative; }
.cie-chat.chat-locked .cie-chat-fab::after {
  content: "🔒";
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: 0.72rem;
  line-height: 1;
  padding: 2px;
  border-radius: 50%;
  background: var(--surface, #1c1c24);
}
.cie-chat.chat-locked .cie-chat-form { opacity: 0.55; }
.cie-chat.chat-locked .cie-chat-input,
.cie-chat.chat-locked .cie-chat-send { cursor: not-allowed; }

/* Pin (favourite) star used by free/paid users in the Market Data table. */
.market-pin-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 4px 6px;
  color: var(--muted);
  transition: color 0.15s ease, transform 0.1s ease;
}
.market-pin-btn:hover { transform: scale(1.15); color: var(--accent); }
.market-pin-btn.is-pinned { color: #f2c744; }
/* Subtle highlight on pinned rows. */
tr:has(.market-pin-btn.is-pinned) { background: rgba(242, 199, 68, 0.05); }
/* A note shown to free users where analysis would otherwise be — only on the
   detail page of a locked (non-sample) symbol. */
.free-only-block { display: none; }
body.access-free #symbol-detail-page:not(.symbol-unlocked) .free-only-block {
  display: block;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px dashed rgba(120, 90, 250, 0.4);
  background: rgba(120, 90, 250, 0.08);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Sits OUTSIDE the market explorer card, as a direct grid item of .market-data-shell —
   the shell's grid gap owns the spacing below it, so it must not add a margin of its own. */
.upgrade-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(120, 90, 250, 0.35);
  background: linear-gradient(120deg, rgba(120, 90, 250, 0.14), rgba(80, 140, 255, 0.10));
}
.upgrade-banner-text { font-size: 0.9rem; line-height: 1.4; }
.upgrade-banner-btn {
  flex: none;
  padding: 9px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--grad-brand);
}
.upgrade-banner-btn:hover { filter: brightness(1.08); }

.overview-waitlist-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 22px 0;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel));
}
.overview-waitlist-card h2 { margin: 4px 0 6px; font-size: 1.15rem; }
.overview-waitlist-card p { margin: 0; color: var(--muted); }
.overview-waitlist-card .primary-btn { flex: 0 0 auto; min-width: 156px; }
@media (max-width: 720px) {
  .overview-waitlist-card { align-items: stretch; flex-direction: column; }
  .overview-waitlist-card .primary-btn { width: 100%; }
}

.user-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.user-plan-badge.plan-paid { background: rgba(120, 90, 250, 0.18); color: #b7a4ff; }
.user-plan-badge.plan-free { background: rgba(150, 150, 160, 0.16); color: #b8b8c2; }

/* Symbol picker modal */
.symbol-picker-card { width: min(540px, 92vw); max-height: 84vh; display: flex; flex-direction: column; }
.symbol-picker-sub {
  margin: 4px 0 12px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}
.symbol-picker-search {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid rgba(120, 90, 250, 0.25);
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  font-size: 0.9rem;
}
.symbol-picker-search:focus { outline: none; border-color: rgba(120, 90, 250, 0.6); }
.symbol-picker-list {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
  margin: 0 -4px 0 0;
}
.symbol-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.symbol-picker-row:hover { background: rgba(255, 255, 255, 0.05); }
/* Highlight a picked row (its checkbox is checked). */
.symbol-picker-row:has(input:checked) {
  border-color: rgba(242, 199, 68, 0.5);
  background: rgba(242, 199, 68, 0.08);
}
.symbol-picker-row.is-disabled { opacity: 0.45; cursor: not-allowed; }
.symbol-picker-row input {
  width: 18px;
  height: 18px;
  accent-color: #f2c744;
  flex: none;
  cursor: pointer;
}
.symbol-picker-sym { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.symbol-picker-sym strong { font-size: 0.92rem; letter-spacing: 0.01em; }
.symbol-picker-sym span {
  font-size: 0.77rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.symbol-picker-status { margin-top: 12px; font-size: 0.82rem; }
.symbol-picker-status.negative { color: #ff8080; }

/* ===== Launch checklist (admin-only section) ============================== */
#launch-page .integrations-intro { display: flex; flex-direction: column; gap: 14px; }
.lc-progress { display: flex; align-items: center; gap: 12px; }
.lc-progress-track { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.lc-progress-fill { display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width .35s ease; }
.lc-progress-label { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc-toolbar { display: flex; align-items: center; gap: 12px; }
.lc-btn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  border-radius: var(--r-pill); padding: 7px 15px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lc-btn:hover { background: var(--surface-2); }
.lc-status { font-size: 12.5px; color: var(--muted); }
.lc-list { display: flex; flex-direction: column; gap: 22px; margin-top: 4px; }
.lc-group-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px; }
.lc-items { display: flex; flex-direction: column; gap: 10px; }
.lc-item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; }
.lc-item.done { border-color: var(--positive-soft); background: var(--positive-soft); }
.lc-check { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin-top: 1px; flex: 0 0 auto;
  border: 2px solid var(--border-strong); border-radius: 7px; background: var(--surface); cursor: pointer; position: relative; }
.lc-check:checked { background: var(--positive); border-color: var(--positive); }
.lc-check:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.lc-body { min-width: 0; }
.lc-title { font-size: 15px; font-weight: 600; color: var(--text); }
.lc-item.done .lc-title { text-decoration: line-through; color: var(--muted); text-decoration-thickness: 1px; }
.lc-detail { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 3px; }
.lc-notes { margin-top: 10px; width: 100%; box-sizing: border-box; resize: vertical; min-height: 0; height: 34px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--text);
  font: inherit; font-size: 12.5px; padding: 6px 9px; }
.lc-notes:focus { outline: none; border-color: var(--accent); }
.lc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lc-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.lc-badge.todo { background: var(--surface-2); color: var(--muted); }
.lc-badge.doing { background: var(--accent-soft); color: var(--accent-strong); }
.lc-badge.done { background: var(--positive-soft); color: var(--positive); }
.lc-doing-btn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted);
  border-radius: var(--r-pill); padding: 4px 11px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.lc-doing-btn.active { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
@media (max-width: 640px) { .lc-item { grid-template-columns: auto 1fr; } .lc-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; } }

/* Trading View side list: search bar + de-emphasised non-matching rows */
.tv-page-side .tv-side-search { width: 100%; margin-bottom: 16px; }
.tv-page-side .tv-side-table-wrap { margin-top: 4px; }
.tv-side-row-muted { opacity: 0.4; }
.tv-side-row-muted:hover { opacity: 0.7; }

/* Launch checklist: Pro waitlist panel */
.lc-waitlist-panel { display: flex; flex-direction: column; gap: 10px; }
.lc-waitlist { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.lc-wl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; }
.lc-wl-email { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-wl-src { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--muted); }
.lc-wl-src.app { background: var(--accent-soft); color: var(--accent-strong); }
.lc-wl-date { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.lc-wl-delete { min-height: 32px; padding-inline: 10px; }
.lc-wl-empty { color: var(--muted); font-size: 13px; padding: 6px 2px; }
@media (max-width: 640px) {
  .lc-wl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .lc-wl-email { grid-column: 1 / -1; }
  .lc-wl-date { justify-self: end; }
  .lc-wl-delete { grid-column: 1 / -1; justify-self: stretch; }
}

/* Discover ranking is available to Premium/early-access and admins. The v2 rules
   at the end of this file keep it hidden only for Free accounts. */

/* Symbol detail: instant-open loading overlay (covers stale content while fetching) */
#symbol-detail-page { position: relative; }
.symbol-detail-loading { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; padding-top: 14vh; gap: 10px; background: var(--bg); }

/* Qualitative: evidence quotes + consistency warnings */
.ql-quote { margin: 4px 0 2px 26px; padding-left: 10px; border-left: 2px solid var(--border-strong);
  color: var(--muted); font-size: 12px; font-style: italic; }
.ql-consistency { border: 1px solid var(--border); border-left: 3px solid #d6a23a; border-radius: var(--r-sm);
  background: var(--surface-2); padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px; color: var(--text); display: grid; gap: 4px; }
.ql-bar-why { cursor: help; }


/* Qualitative Analysis v2 — decision-first workspace */
.symbol-qualitative-panel { width: 100%; max-width: none; margin-inline: 0; min-width: 0; }
.ql-workspace { display: grid; gap: 16px; }
.ql-eyebrow { display: block; margin-bottom: 5px; color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.ql-verdict { padding: 22px; border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(145deg, var(--surface), var(--surface-2)); box-shadow: var(--shadow-sm); }
.ql-verdict-strong { border-left: 4px solid var(--positive); }
.ql-verdict-promising { border-left: 4px solid var(--accent); }
.ql-verdict-mixed { border-left: 4px solid var(--accent-2, #d6a23a); }
.ql-verdict-weak, .ql-verdict-high_risk { border-left: 4px solid var(--negative); }
.ql-verdict-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ql-verdict h2 { margin: 0; color: var(--text); font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -0.035em; }
.ql-overall { display: flex; align-items: baseline; min-width: 84px; justify-content: flex-end; color: var(--muted); font-variant-numeric: tabular-nums; }
.ql-overall strong { color: var(--text); font-size: 2rem; line-height: 1; }
.ql-overall span { font-size: 0.78rem; }
.ql-verdict-summary { max-width: 780px; margin: 14px 0 16px; color: var(--text-2); font-size: 0.94rem; line-height: 1.6; }
.ql-verdict-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 0.75rem; }
.ql-decision-grid, .ql-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ql-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ql-decision-card { min-width: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.ql-decision-card h3 { margin: 0 0 10px; color: var(--text); font-size: 0.88rem; }
.ql-decision-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ql-decision-card li { position: relative; padding-left: 16px; color: var(--text-2); font-size: 0.83rem; line-height: 1.48; }
.ql-decision-card li::before { content: ""; position: absolute; left: 0; top: 0.56em; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.ql-positive li::before { background: var(--positive); }
.ql-watch li::before { background: var(--accent-2, #d6a23a); }
.ql-negative li::before { background: var(--negative); }
.ql-section { padding: 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.ql-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.ql-section-head h3 { margin: 0; color: var(--text); font-size: 1rem; }
.ql-section-head > span { max-width: 280px; color: var(--muted); font-size: 0.72rem; text-align: right; }
.ql-score-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.ql-score-row { min-width: 0; padding: 11px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.ql-score-row p { margin: 7px 0 0; color: var(--muted); font-size: 0.74rem; line-height: 1.42; }
.ql-risk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ql-risk-grid .ql-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 11px 12px; border-radius: var(--r-sm); }
.ql-risk-grid .ql-chip small { color: var(--muted); font-size: 0.66rem; line-height: 1.25; }
.ql-risk-grid .ql-chip strong { color: inherit; font-size: 0.84rem; text-transform: capitalize; }
.ql-section .ql-tags { margin: 13px 0 0; }
.ql-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--hairline); }
.ql-fact { min-width: 0; padding: 14px; background: var(--surface-2); }
.ql-fact strong { display: block; margin-bottom: 5px; color: var(--text); font-size: 0.76rem; }
.ql-fact p { margin: 0; color: var(--text-2); font-size: 0.82rem; line-height: 1.5; }
.ql-flags { display: grid; gap: 10px; }
.ql-flags .ql-section-head { margin-bottom: 2px; }
.ql-flag { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.ql-flag p { margin: 0; color: var(--text-2); font-size: 0.83rem; line-height: 1.5; }
.ql-flag blockquote { margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--border-strong); color: var(--muted); font-size: 0.74rem; font-style: italic; line-height: 1.45; }
.ql-consistency strong { display: block; margin-bottom: 2px; }
@media (max-width: 760px) {
  .ql-decision-grid, .ql-detail-grid, .ql-score-grid, .ql-fact-grid { grid-template-columns: 1fr; }
  .ql-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-verdict { padding: 18px; }
  .ql-section-head { display: block; }
  .ql-section-head > span { display: block; margin-top: 5px; text-align: left; }
}
@media (max-width: 420px) {
  .ql-risk-grid { grid-template-columns: 1fr; }
  .ql-overall strong { font-size: 1.6rem; }
}

/* Discover v2 — market-intelligence workspace */
.discover-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:8px 2px 4px; }
.discover-hero h2 { margin:3px 0 6px; font-size:clamp(1.7rem,3vw,2.45rem); letter-spacing:-.035em; }
.discover-hero p { margin:0; max-width:68ch; color:var(--muted); line-height:1.5; }
.discover-eyebrow { color:var(--accent-strong); font-size:.68rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.discover-health { display:inline-flex; align-items:center; gap:8px; flex:none; padding:8px 11px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--muted); font-size:.76rem; }
.discover-health-dot { width:7px; height:7px; border-radius:50%; background:var(--positive); box-shadow:0 0 0 4px var(--positive-soft); }
.discover-health.degraded .discover-health-dot { background:var(--accent-2); box-shadow:0 0 0 4px var(--accent-2-soft); }
.discover-data-banner { padding:11px 14px; border:1px solid rgba(183,121,31,.38); border-left:3px solid var(--accent-2); border-radius:var(--r-sm); background:var(--accent-2-soft); color:var(--text-2); font-size:.84rem; }
.discover-command { grid-template-columns:minmax(0,1fr) minmax(320px,.8fr); align-items:center; gap:22px; }
.discover-command .discover-search-form { margin:0; }
.movers-tabs { display:flex; gap:5px; margin-bottom:10px; border-bottom:1px solid var(--hairline); }
.movers-tab { padding:8px 12px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:.78rem; font-weight:750; cursor:pointer; }
.movers-tab:hover,.movers-tab:focus-visible { color:var(--text); }
.movers-tab.active { color:var(--accent-strong); border-bottom-color:var(--accent-strong); }
#discover-page .movers-grid { grid-template-columns:1fr; }
#discover-page .movers-col { display:none; }
#discover-page .movers-col.active { display:grid; }
#discover-page .movers-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 12px; }
.discover-row-actions { display:flex; justify-content:flex-end; gap:5px; flex-wrap:nowrap; }
.discover-row-actions .secondary-btn { min-height:30px; padding:5px 8px; font-size:.7rem; white-space:nowrap; }
body:not(.access-paid):not(.access-admin) #compounder-ranking-panel,
body:not(.access-paid):not(.access-admin) #compounder-table-wrap,
body:not(.access-paid):not(.access-admin) #compounder-empty { display:none; }
@media (max-width:900px) {
  .discover-command { grid-template-columns:1fr; }
  #discover-page .movers-list { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .discover-hero { align-items:flex-start; flex-direction:column; }
  .discover-health { align-self:flex-start; }
  .movers-tabs { overflow-x:auto; }
  .movers-tab { white-space:nowrap; }
  .discover-row-actions { flex-wrap:wrap; min-width:170px; }
}

/* Discovery research workspace — evidence-first, responsive and non-advisory. */
.discover-method-note { margin:14px 0 0; padding:10px 12px; border-left:3px solid var(--accent); background:var(--accent-soft); color:var(--text-2); font-size:.8rem; line-height:1.5; }
.discover-ranking-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline); }
.discover-ranking-tools label { display:grid; gap:6px; color:var(--muted); font-size:.72rem; font-weight:700; }
.discover-ranking-tools input[type="range"] { width:100%; accent-color:var(--accent); }
.discover-ranking-tools output { color:var(--text); font-variant-numeric:tabular-nums; }
.discover-premium-gate { display:flex; align-items:center; gap:12px; padding:16px 18px; border-color:var(--accent-2); }
.discover-premium-gate strong { white-space:nowrap; }
.discover-premium-gate span { flex:1; color:var(--muted); font-size:.82rem; line-height:1.45; }
body.access-paid .discover-premium-gate, body.access-admin .discover-premium-gate { display:none; }
#compounder-ranking-panel.premium-locked .discover-scan-btn,
#compounder-ranking-panel.premium-locked .discover-ranking-tools,
#compounder-ranking-panel.premium-locked .discover-segments { display:none; }
.opportunity-level { display:inline-flex; align-items:center; min-height:26px; padding:4px 9px; border:1px solid currentColor; border-radius:var(--r-pill); font-size:.68rem; font-weight:800; white-space:nowrap; }
.opportunity-level.level-exceptional { color:#2dd4bf; background:rgba(45,212,191,.1); box-shadow:0 0 0 3px rgba(45,212,191,.05); }
.opportunity-level.level-strong { color:var(--positive); background:var(--positive-soft); }
.opportunity-level.level-promising { color:#58a6ff; background:rgba(88,166,255,.1); }
.opportunity-level.level-watch { color:var(--accent-2); background:var(--accent-2-soft); }
.opportunity-level.level-unrated,.opportunity-level.level-locked { color:var(--muted); background:var(--surface-2); }
.discover-opportunity-row.level-exceptional td:first-child { box-shadow:inset 3px 0 #2dd4bf; }
.discover-opportunity-row td > strong,.discover-opportunity-row td > small,.discover-limitation,.evidence-score small { display:block; }
.discover-opportunity-row td > small { margin-top:3px; color:var(--muted); font-size:.7rem; }
.discover-limitation { margin-top:5px; color:var(--accent-2); font-size:.67rem; line-height:1.35; }
.evidence-score { font-weight:800; font-variant-numeric:tabular-nums; }
.evidence-score small { margin-top:2px; color:var(--muted); font-size:.62rem; font-weight:500; white-space:nowrap; }
.valuation-context,.coverage-value { font-size:.78rem; font-variant-numeric:tabular-nums; }
.discover-research-drawer { position:fixed; z-index:90; inset:0 0 0 auto; width:min(680px,calc(100vw - 72px)); overflow-y:auto; padding:24px; border-left:1px solid var(--border-strong); background:var(--background); box-shadow:-24px 0 70px rgba(0,0,0,.35); }
.discover-research-drawer > header { position:sticky; z-index:2; top:-24px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:-24px -24px 0; padding:22px 24px 16px; border-bottom:1px solid var(--hairline); background:color-mix(in srgb,var(--background) 94%,transparent); backdrop-filter:blur(14px); }
.discover-research-drawer h3 { margin:4px 0 0; font-size:1.25rem; }
.discover-research-drawer .icon-button { width:40px; height:40px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--text); font-size:1.4rem; cursor:pointer; }
#discover-research-content { display:grid; gap:16px; padding-top:18px; }
#discover-research-content > section,#discover-research-content > footer,.research-locked,.research-error { padding:18px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); }
#discover-research-content h4 { margin:0 0 12px; font-size:.9rem; }
.research-summary { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; }
.research-summary h4 { margin:12px 0 6px!important; font-size:1.1rem!important; }
.research-summary p,.research-locked p,.research-error p { margin:0; color:var(--muted); line-height:1.5; }
.research-score { display:flex; align-items:center; gap:9px; padding-left:18px; border-left:1px solid var(--border); }
.research-score strong { font-size:2.2rem; line-height:1; font-variant-numeric:tabular-nums; }
.research-score span { color:var(--muted); font-size:.65rem; line-height:1.35; }
.research-metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.research-metric { display:grid; gap:5px; min-width:0; padding:11px; border:1px solid var(--hairline); border-radius:var(--r-sm); background:var(--surface-2); }
.research-metric span { color:var(--muted); font-size:.66rem; }
.research-metric strong { font-size:.84rem; overflow-wrap:anywhere; }
.research-evidence-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.research-evidence-list article { padding:12px; border:1px solid var(--border); border-left:3px solid var(--muted); border-radius:var(--r-sm); }
.research-evidence-list article.tone-positive { border-left-color:var(--positive); }
.research-evidence-list article.tone-warning { border-left-color:var(--accent-2); }
.research-evidence-list p { margin:4px 0 0; color:var(--muted); font-size:.75rem; line-height:1.45; }
.research-caveat,.research-disclaimer { margin:12px 0 0; color:var(--muted); font-size:.72rem; line-height:1.5; }
.research-risk-list { margin:0; padding-left:18px; color:var(--text-2); font-size:.78rem; line-height:1.55; }
.research-provenance strong,.research-provenance span { display:block; }
.research-provenance span { margin-top:4px; color:var(--muted); font-size:.75rem; }
.research-loading { padding:48px 18px; text-align:center; color:var(--muted); }
@media (max-width:760px) {
  .discover-ranking-tools { grid-template-columns:1fr; }
  .discover-premium-gate { align-items:flex-start; flex-direction:column; }
  .discover-research-drawer { inset:0; width:100%; padding:18px; }
  .discover-research-drawer > header { top:-18px; margin:-18px -18px 0; padding:18px; }
  .research-summary { grid-template-columns:1fr; }
  .research-score { padding:12px 0 0; border-left:0; border-top:1px solid var(--border); }
  .research-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .research-evidence-list { grid-template-columns:1fr; }
  #compounder-table-wrap table,#discover-page .discover-browser table { min-width:0; }
  #compounder-table-wrap thead,#discover-page .discover-browser thead { display:none; }
  #compounder-table-wrap tbody,#compounder-table-wrap tr,#compounder-table-wrap td,
  #discover-page .discover-browser tbody,#discover-page .discover-browser tr,#discover-page .discover-browser td { display:block; width:100%; }
  #compounder-table-wrap tr,#discover-page .discover-browser tr { margin:10px 0; padding:14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); }
  #compounder-table-wrap td,#discover-page .discover-browser td { position:static!important; padding:6px 0; border:0; box-shadow:none!important; background:transparent!important; }
  #compounder-table-wrap .discover-row-actions,#discover-page .discover-browser .discover-row-actions { justify-content:flex-start; margin-top:6px; }
}
@media (max-width:420px) { .research-metric-grid { grid-template-columns:1fr; } }
body:not(.access-paid):not(.access-admin) #compounder-ranking-panel { display:block; }

/* ============================================================================
   Tendency — robust support direction from relevant lows
   ========================================================================== */
.symbol-tendency-panel { display: grid; gap: 18px; }
.symbol-tendency-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.symbol-tendency-head > div:first-child { display: grid; gap: 5px; }
.symbol-tendency-head p { margin: 0; color: var(--muted); font-size: 0.82rem; }
.tendency-ranges { margin: 0; flex-wrap: nowrap; }
.symbol-tendency-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 50px; }
.tendency-badge { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-pill); font-weight: 750; }
.tendency-badge > span { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.tendency-bullish { color: var(--positive); background: var(--positive-soft); }
.tendency-bearish { color: var(--negative); background: var(--negative-soft); }
.tendency-sideways { color: var(--accent-2); background: var(--surface-2); }
.tendency-facts { display: grid; gap: 2px; min-width: 155px; padding-left: 14px; border-left: 1px solid var(--hairline); }
.tendency-facts strong { color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.tendency-facts span { color: var(--muted); font-size: 0.72rem; }
.tendency-chart-wrap { min-height: 250px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
.symbol-tendency-chart { display: block; width: 100%; height: 360px; }
.tendency-grid { stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tendency-price { fill: none; stroke: var(--text-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tendency-line { stroke: var(--accent-strong); stroke-width: 2.5; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; }
.tendency-pivot { fill: var(--surface); stroke: var(--accent-strong); stroke-width: 3; vector-effect: non-scaling-stroke; }
.symbol-tendency-method { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.symbol-tendency-method strong { font-size: 0.78rem; }
.symbol-tendency-method span { color: var(--text-2); font-size: 0.78rem; line-height: 1.5; }
.symbol-tendency-method small { color: var(--muted); font-size: 0.68rem; }
.tendency-empty { display: grid; gap: 5px; padding: 10px 0; }
.tendency-empty strong { color: var(--text); }
.tendency-empty span { color: var(--muted); font-size: 0.82rem; }
@media (max-width: 700px) {
  .symbol-tendency-head { align-items: stretch; }
  .tendency-ranges { width: 100%; }
  .tendency-ranges .timeline-filter-btn { flex: 1; }
  .symbol-tendency-chart { height: 280px; }
  .tendency-facts { min-width: 0; flex: 1 1 130px; }
}

/* Compounder-owned time series: shared, theme-aware SVG line treatment. */
.compounder-chart-line,
.overview-timeline-line,
.portfolio-timeline-line,
.tendency-price {
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
.tendency-price { stroke: var(--chart-line); stroke-width: 2.8; }
.tendency-line { stroke: var(--chart-line-2); stroke-width: 3; opacity: 1; }
.tendency-pivot { fill: var(--surface); stroke: var(--chart-line-2); stroke-width: 3.2; }
@media (max-width: 700px) {
  .tendency-price { stroke-width: 2.5; }
  .tendency-line { stroke-width: 2.7; }
}


/* ============================================================================
   Monthly symbol credits — gated account and Market Data surfaces
   ========================================================================== */
.credit-market-panel, .account-billing-panel { display: grid; gap: 16px; padding: clamp(16px, 2.5vw, 24px); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.credit-market-panel { margin-bottom: 18px; }
.credit-market-head, .account-billing-heading, .billing-catalog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.credit-market-head .credit-totals { margin-left: auto; }
.market-workspace-meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.market-credit-prompt { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 16px; padding: 13px 16px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: var(--r-md); background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--surface) 92%, var(--accent))); box-shadow: var(--shadow-sm); }
.market-credit-prompt.hidden-page { display: none; }
.market-credit-prompt-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 1.15rem; font-weight: 700; }
.market-credit-prompt-copy { display: grid; gap: 1px; }
.market-credit-prompt-copy small { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.market-credit-count { color: var(--text); font-size: .92rem; font-weight: 850; white-space: nowrap; }
.market-credit-prompt-hint { justify-self: end; color: var(--muted); font-size: .75rem; line-height: 1.4; text-align: right; }
.credit-free-btn { color: var(--positive) !important; border-color: color-mix(in srgb, var(--positive) 38%, var(--border)) !important; background: var(--positive-soft) !important; }
.credit-notification-item { cursor: default; background: linear-gradient(135deg, var(--accent-soft), transparent 72%); }
.notification-credit-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; justify-self: stretch; min-height: 36px; margin-top: 8px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-size: .72rem; font-weight: 800; line-height: 1; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, transform 140ms ease; }
.notification-credit-cta::after { content: '→'; font-size: 1rem; line-height: 1; }
.notification-credit-cta:hover { border-color: color-mix(in srgb, var(--accent) 78%, #000); background: color-mix(in srgb, var(--accent) 86%, #000); }
.notification-credit-cta:active { transform: translateY(1px); }
.credit-market-head h3, .account-billing-heading h3, .billing-catalog-head h4 { margin: 2px 0 5px; color: var(--text); }
.credit-market-head p, .account-billing-heading p, .billing-catalog-head small { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.credit-totals, .account-credit-grid { display: grid; grid-template-columns: repeat(3, minmax(84px, 1fr)); gap: 8px; }
.credit-totals > span, .account-credit-grid > div { display: grid; gap: 3px; min-width: 88px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.credit-totals small, .account-credit-grid span { color: var(--muted); font-size: .68rem; }
.credit-totals strong, .account-credit-grid strong { color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.credit-available-total { border-color: color-mix(in srgb, var(--positive) 38%, var(--border)) !important; background: var(--positive-soft) !important; }
.credit-market-controls { display: flex; align-items: center; gap: 12px; }
.credit-market-controls .market-search-field { flex: 1; }
.credit-inline-status { min-height: 1.25em; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.credit-symbol-list, .account-assignment-list, .billing-catalog-list { display: grid; gap: 8px; }
.credit-symbol-card, .account-assignment-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.account-assignment-row > span { flex: 1; color: var(--muted); font-size: .76rem; }
.credit-free-symbols { display: flex; gap: 7px; flex-wrap: wrap; }
.subscription-state.included-free { background: var(--accent-soft); color: var(--accent); }
.credit-slots-section { display: grid; gap: 10px; }
.credit-slots-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.credit-slots-heading h4 { margin: 0 0 3px; color: var(--text); font-size: .9rem; }
.credit-slots-heading p, .credit-slots-heading small { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.credit-slot-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; }
.credit-slot { min-height: 126px; display: grid; align-content: space-between; gap: 7px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); text-align: left; }
button.credit-slot { width: 100%; font: inherit; cursor: pointer; }
.credit-slot.available { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 52%, var(--border)); background: color-mix(in srgb, var(--surface-2) 88%, var(--accent-soft)); }
.credit-slot.available:hover { border-color: var(--accent); background: var(--accent-soft); }
.credit-slot.assigned.locked { border-color: color-mix(in srgb, var(--muted) 38%, var(--border)); }
.credit-slot.assigned.modifiable { border-color: color-mix(in srgb, var(--positive) 45%, var(--border)); }
.credit-slot-number { color: var(--muted); font-size: .65rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.credit-slot > strong { font-size: .88rem; }
.credit-slot > small { color: var(--muted); font-size: .68rem; line-height: 1.35; }
.credit-slot .secondary-btn { width: 100%; min-height: 32px; padding-inline: 8px; }
.market-action-stack { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 150px; }
.credit-row-action { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.credit-row-action .primary-btn, .credit-row-action .secondary-btn { width: auto; min-width: 72px; min-height: 36px; padding: 7px 11px; font-size: .7rem; white-space: nowrap; }
.credit-row-state { display: grid; justify-items: end; gap: 3px; }
.credit-row-action small { color: var(--muted); font-size: .66rem; line-height: 1.3; }
.credit-row-action.is-available small { padding-right: 2px; }
.credit-empty { display: grid; gap: 4px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); color: var(--muted); text-align: center; }
.credit-empty strong { color: var(--text); font-size: .86rem; }
.credit-empty span { font-size: .75rem; }
.subscription-state { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); font-size: .68rem; font-weight: 750; white-space: nowrap; }
.subscription-state.active { background: var(--positive-soft); color: var(--positive); }
.subscription-state.warning { background: color-mix(in srgb, #d6a23a 14%, transparent); color: #d6a23a; }
.account-billing-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.billing-catalog { display: grid; gap: 10px; padding-top: 4px; }
.billing-catalog-head { align-items: end; }
.billing-catalog-head h4 { font-size: .9rem; }
.billing-plan-option { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .12s ease; }
.billing-plan-option:hover { border-color: var(--border-strong); background: var(--surface-3); }
.billing-plan-option:active { transform: translateY(1px); }
.billing-plan-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.billing-plan-option > span, .billing-plan-option > b { display: grid; gap: 3px; }
.billing-plan-option > b { justify-items: end; white-space: nowrap; }
.billing-plan-option small { color: var(--muted); font-size: .68rem; font-weight: 500; }
.credit-confirm-card { display: grid; gap: 15px; width: min(520px, calc(100vw - 32px)); }
.credit-confirm-card > p { margin: 0; color: var(--text-2); line-height: 1.55; }
.credit-lock-notice { display: grid; gap: 4px; padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--accent-soft); }
.credit-lock-notice span { color: var(--text-2); font-size: .78rem; }
.credit-confirm-check { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: .8rem; line-height: 1.45; cursor: pointer; }
.credit-confirm-check input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); }
.credit-market-panel :focus-visible, .account-billing-panel :focus-visible, .credit-confirm-card :focus-visible, .notification-credit-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) {
  .market-credit-prompt { grid-template-columns: auto minmax(0, 1fr); }
  .market-credit-prompt-hint { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .credit-market-head, .account-billing-heading, .billing-catalog-head, .credit-slots-heading { align-items: stretch; flex-direction: column; }
  .credit-totals, .account-credit-grid { width: 100%; }
  .credit-slot-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .credit-market-controls, .credit-symbol-card, .account-assignment-row { align-items: stretch; flex-direction: column; }
  .market-action-stack, .credit-row-action, .credit-row-state { justify-items: start; }
  .account-assignment-row .credit-release-btn { align-self: flex-start; }
}
@media (max-width: 480px) {
  .credit-totals, .account-credit-grid, .credit-slot-grid { grid-template-columns: 1fr; }
  .billing-plan-option { align-items: flex-start; }
  .account-billing-actions > button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .billing-plan-option { transition: none; }
  #credit-market-panel { scroll-behavior: auto; }
}

/* Mobile symbol timelines: reduce chrome and keep a readable, full-width plotting area. */
@media (max-width: 640px) {
  .symbol-chart-card { padding: 18px 16px; }
  .timeline-stats { gap: 10px; }
  .timeline-stats-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
  .timeline-stats-values span:last-child { grid-column: 1 / -1; }
  .timeline-control-row { gap: 10px; }
  .timeline-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
  }
  .timeline-filters::-webkit-scrollbar { display: none; }
  .timeline-filters .timeline-filter-btn { flex: 0 0 48px; min-width: 48px; min-height: 40px; padding-inline: 5px; scroll-snap-align: start; }
  .timeline-chart-shell { margin: 8px 0 6px; }
  .symbol-chart-card .timeline-chart,
  .symbol-chart-card .timeline-y-axis { min-height: 0; height: 240px; }
  .timeline-y-axis { display: none; }
  .timeline-axis { margin-top: 2px; font-size: .7rem; }
  .timeline-x-labels span:nth-child(2),
  .timeline-x-labels span:nth-child(4) { display: none; }
  .timeline-x-labels span { max-width: 31%; }
  .timeline-hover-tooltip {
    top: auto !important;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px !important;
    z-index: 60;
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(14px);
    white-space: normal;
  }
  .timeline-hover-guide { stroke-width: 2; stroke-dasharray: none; opacity: .78; }
  .timeline-hover-dot { stroke-width: 3; }
  .symbol-timing-chart { margin-inline: -4px; }
  .symbol-timing-chart svg { width: 100%; height: 240px; }
}

@media (max-width: 380px) {
  .symbol-chart-card { padding-inline: 14px; }
  .symbol-chart-card .timeline-chart,
  .symbol-chart-card .timeline-y-axis,
  .symbol-timing-chart svg { height: 210px; }
}

/* Quote freshness is independent from the exchange session and is reused by
   Market Data, Overview, Portfolio, Signals and symbol detail. */
.mkt-pill.quote-live { border-color: rgba(102, 214, 234, .35); }
.mkt-pill.quote-delayed { border-color: rgba(245, 180, 72, .5); color: #f5c16c; }
.mkt-pill.quote-stale { border-color: rgba(239, 106, 106, .5); color: #f08d8d; }
.mkt-pill.quote-delayed .mkt-dot { background: #f5b448; }
.mkt-pill.quote-stale .mkt-dot { background: #ef6a6a; }
.quote-freshness-text { font-style: normal; font-weight: 800; }
.quote-freshness-text.quote-live, .symbol-market-state.quote-live { color: #a99cff; }
.quote-freshness-text.quote-delayed, .symbol-market-state.quote-delayed { color: #f5c16c; }
.quote-freshness-text.quote-stale, .symbol-market-state.quote-stale { color: #f08d8d; }

/* --- Admin -> Settings ---------------------------------------------------- */
/* One column of labelled rows. The control sits on the right on a wide screen and
   under its description on a narrow one, so the explanation is never truncated to
   keep a select on the same line -- these three dials are confusable enough that the
   text is the part that must survive. */
.settings-panel {
  border: 1px solid var(--border-subtle, rgba(128, 128, 128, .22));
  border-radius: 14px;
  padding: 20px 22px;
  margin-top: 18px;
  max-width: 900px;
}
.settings-panel__head { margin-bottom: 6px; }
.settings-panel__title { font-size: 1rem; font-weight: 600; margin: 0 0 6px; }
.settings-panel__hint { margin: 0; font-size: .85rem; opacity: .75; line-height: 1.5; }
.settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--border-subtle, rgba(128, 128, 128, .16));
}
.settings-row:first-of-type { margin-top: 8px; }
.settings-row__copy { min-width: 0; }
.settings-row__label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 4px; }
.settings-row__desc { margin: 0; font-size: .84rem; opacity: .72; line-height: 1.5; max-width: 58ch; }
.settings-row .select-field { flex: 0 0 auto; }
.settings-status { margin: 14px 0 0; font-size: .84rem; opacity: .8; min-height: 1.2em; }
@media (max-width: 720px) {
  .settings-panel { padding: 16px; }
  .settings-row { flex-direction: column; align-items: stretch; gap: 10px; }
  /* 48px keeps the control inside the touch-target floor the rest of the app uses. */
  .settings-row .app-select { min-height: 48px; }
}