*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --orange: #ffba48;
  --orange-dim: rgba(245,166,35,0.12);
  --orange-border: rgba(245,166,35,0.3);
  --sb-bg: #F8F8F8;
  --sb-border: #E4E4E4;
  --sb-section: #9B9B9B;
  --sb-icon: #6B6B6B;
  --sb-text: #4A4A4A;
  --sb-hover-bg: #EFEFEF;
  --sb-active-bg: rgba(245,166,35,0.14);
  --sb-active-text: #F5A623;
  --sb-logo-bg: #2E3033;
  --sb-logo-border: #3A3D40;
  --main-bg: #fff;
  --border: #e8e8e8;
  --text: #1d1d1d;
  --muted: #282828;
  --subtle: #fcfcfc;
  --green: #15803d; --green-bg: #f0fdf4; --green-border: #bbf7d0;
  --red: #b91c1c;   --red-bg: #fef2f2;   --red-border: #fecaca;
  --amber-bg: #fffbeb; --amber-text: #92400e;
  --font: 'Inter', system-ui, sans-serif;
  --body-bg: #E4E4E4;
  --card-bg: #fff;
  --hover-track: #F3F4F6;
  --bar-track-bg: #F3F4F6;
  --segment-bar-empty: #E5E7EB;
  --crux-bg: #FFFBEB;
  --crux-border: #FDE68A;
  --crux-strong: #92400E;
  --ai-pill-bg: #eef2ff;
  --ai-pill-border: #c7d2fe;
  --ai-pill-text: #4f46e5;
  --status-info-bg: #eff6ff;
  --status-info-border: #bfdbfe;
  --status-info-text: #1e40af;
}
body.dark {
  --sb-bg: #0c0c0c;
  --sb-border: #222222;
  --sb-section: #6d6d6d;
  --sb-icon: #d4d4d4;
  --sb-text: #eeeeee;
  --sb-hover-bg: #191919;
  --sb-active-bg: rgba(245,166,35,0.16);
  --sb-active-text: var(--orange);
  --sb-logo-bg: #141413;
  --sb-logo-border: #222222;
  --main-bg: #16181d;
  --border: #242424;
  --text: #ffffff;
  --muted: #d1d1d1;
  --subtle: #101010;
  --green-bg: #102b1c; --green-border: #1f5d3a; --green: #62e088;
  --red-bg:   #2c1318; --red-border:   #6e2129; --red:   #f08a8a;
  --amber-bg: #2a1e07; --amber-text: #facc15;
  --orange-dim: rgba(245,166,35,0.18);
  --orange-border: rgba(245,166,35,0.45);
  --body-bg: #1d1d1d;
  --card-bg: #1c1f25;
  --hover-track: #2a2e35;
  --bar-track-bg: #1f1f1f;
  --segment-bar-empty: #2a2e35;
  --crux-bg: #1f1809;
  --crux-border: #221d03;
  --crux-strong: #fcd34d;
  --ai-pill-bg: #1e1b3a; --ai-pill-border: #4338ca; --ai-pill-text: #a5b4fc;
  --status-info-bg: #0c1c34; --status-info-border: #1e3a8a; --status-info-text: #93c5fd;
}
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--font); display: flex; background: var(--body-bg); color: var(--text); }
.shell { display: flex; width: 100vw; height: 100vh; }

/* ══════════════════ SIDEBAR ══════════════════ */
.sidebar {
  width: 236px; flex-shrink: 0;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width 0.15s ease, border-right-color 0.15s ease;
}
.sidebar.hidden {
  width: 0;
  border-right-color: transparent;
}
.sb-logo {
  display: flex; align-items: center; gap: 9px;
  padding: 15px 14px 13px;
  background: var(--sb-logo-bg);
  border-bottom: 1px solid var(--sb-logo-border);
  flex-shrink: 0;
  cursor: pointer;
}
.sb-logo-img { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; }
.sb-logo-text-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.05; }
.sb-logo-tikr { font-size: 17px; font-weight: 700; color: #F0F0F0; letter-spacing: -0.01em; }
.sb-logo-play { font-size: 11px; font-weight: 500; color: #888; letter-spacing: 0.01em; }
.sb-beta-chip {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: auto;
  padding: 2px 6px 2px 5px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--orange);
  background: rgba(245,166,35,0.12);
  border: 1px solid rgba(245,166,35,0.28);
  border-radius: 4px;
  flex-shrink: 0;
}
.sb-beta-chip svg { opacity: 0.9; }
.sb-scroll { flex: 1; overflow-y: auto; padding-bottom: 10px; }
.sb-scroll::-webkit-scrollbar { width: 3px; }
.sb-scroll::-webkit-scrollbar-thumb { background: #D4D4D4; border-radius: 3px; }
.sb-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 5px;
  cursor: pointer;
  user-select: none;
}
.sb-section-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: none;
  color: var(--sb-section);
}
.sb-section-chevron {
  color: #AEAEAE; transition: transform 0.2s;
  display: flex; align-items: center;
}
.sb-section-chevron.open { transform: rotate(180deg); }
.sb-group { overflow: hidden; transition: max-height 0.2s ease; }
.sb-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px;
  margin: 1px 8px;
  font-size: 12.5px; color: var(--sb-text);
  cursor: pointer; border-radius: 5px;
  transition: background 0.1s, color 0.1s;
  user-select: none;
}
.sb-item:hover { background: var(--sb-hover-bg); }
.sb-item.active {
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
}
.sb-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }
.sb-item.active svg { opacity: 1; }
.sb-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item-ticker {
  font-family: var(--font); font-size: 9.5px; font-weight: 500;
  color: #555; flex-shrink: 0;
}
.sb-item.active .sb-item-ticker { color: var(--orange); }
.sb-divider { height: 1px; background: #dcdcdc; margin: 8px 0; }
body.dark .sb-divider { background: #242424; }

/* Discover card — prominent top-of-sidebar entry */
.sb-discover {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 10px 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--sb-hover-bg);
  border: 1px solid var(--sb-border);
  color: var(--sb-text);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.sb-discover:hover {
  background: var(--sb-active-bg);
  border-color: rgba(245,166,35,0.35);
}
.sb-discover.active {
  background: var(--sb-active-bg);
  border-color: rgba(245,166,35,0.45);
  color: var(--sb-active-text);
}
.sb-discover svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
.sb-discover.active svg { opacity: 1; }
.sb-discover-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sb-discover-title { font-size: 13px; font-weight: 600; line-height: 1.2; }
.sb-discover-sub {
  font-size: 11px; font-weight: 400;
  color: var(--sb-section);
  line-height: 1.2;
}
.sb-discover.active .sb-discover-sub { color: var(--orange); opacity: 0.75; }

/* ══════════════════ MAIN ══════════════════ */
.main {
  flex: 1; background: var(--main-bg); display: flex; flex-direction: column; overflow: hidden;
  /* Wide-screen content cap — bars stretch full-width (background + border),
     but their inner padding scales so the contents stay aligned with the
     content panels below them. Mobile breakpoints below override these. */
  --content-max: 1200px;
  --gutter-h: max(22px, calc((100% - var(--content-max)) / 2));
  /* Right-edge target for the price block in .co-header — matches the
     max-width of .view-stream (the content panel below), so the price's
     right edge lines up with where the content panel ends. */
  --analysis-width: 900px;
}

/* ── Home / Discover ── */
.home-state {
  flex: 1; display: flex; flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
}
.home-logo-arrow { color: var(--orange); margin-right: 1px; }

/* Top bar */
.home-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.home-topbar-brand { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.home-topbar-logo { width: 28px; height: 28px; border-radius: 7px; }
.home-topbar-name { display: flex; align-items: baseline; }
.home-topbar-tikr { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.home-topbar-play { font-size: 11px; font-weight: 500; color: var(--muted); }
.home-topbar-actions { display: flex; align-items: center; gap: 8px; }

/* Centered content column */
.home-inner {
  width: 100%; max-width: 1060px;
  margin: 0 auto;
  padding: 56px 28px 80px;
  display: flex; flex-direction: column;
}

/* Hero */
.home-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  max-width: 680px; width: 100%; margin: 0 auto;
}
.home-beta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 12.5px; color: var(--muted);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.home-beta-tag {
  font-family: var(--font); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em;
  background: #111827; color: #fff;
  padding: 3px 9px; border-radius: 50px;
}
body.dark .home-beta-tag { background: #fff; color: #111827; }
.home-hero-title {
  margin-top: 22px;
  font-size: 44px; font-weight: 700; line-height: 1.12;
  letter-spacing: -0.03em; color: var(--text);
  white-space: nowrap;
}
.home-hero-accent {
  color: var(--orange);
  box-shadow: inset 0 -0.16em 0 var(--orange-dim);
}
.home-hero-sub {
  margin-top: 18px;
  font-size: 16px; line-height: 1.6; color: var(--muted);
  max-width: 540px;
}
.home-divider {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin: 32px 0 24px;
  color: var(--muted);
  font-family: var(--font); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: none;
  white-space: nowrap;
}
.home-divider::before, .home-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Search */
.home-search-wrap { width: 100%; max-width: 640px; position: relative; }
.home-search-box {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: text;
}
.home-search-box:focus-within {
  border-color: var(--orange);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08), 0 0 0 3px rgba(245,166,35,0.12);
}
.home-search-box svg { flex-shrink: 0; color: #9CA3AF; }
.home-search-box input {
  flex: 1; border: none; outline: none;
  font-family: var(--font); font-size: 15.5px;
  color: var(--text); background: transparent;
}
.home-search-box input::placeholder { color: #9CA3AF; }
.home-search-kbd { display: flex; gap: 3px; flex-shrink: 0; }
.home-search-kbd kbd {
  font-family: var(--font); font-size: 11px;
  color: var(--muted);
  background: var(--subtle, #f3f4f6);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 6px; min-width: 20px; text-align: center;
}
.home-sub { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }

/* Section heads (Recently viewed / Suggested companies) */
.home-recents, .home-suggestions { width: 100%; margin-top: 44px; }
.home-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.home-section-title {
  font-size: 17px; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em;
}
.home-section-count {
  font-family: var(--font); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: none;
  color: var(--muted); margin-left: 10px;
}
.home-suggestions-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: none; color: var(--muted);
  text-align: left;
}

/* Filter tabs */
.home-filter-tabs {
  display: flex; gap: 2px;
  background: var(--subtle, #f3f4f6);
  border: 1px solid var(--border);
  border-radius: 9px; padding: 2px;
  /* Horizontal scroll on narrow screens — there are too many sector pills
     to wrap cleanly, and stacking would break the inline visual rhythm. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-x;
  max-width: 100%;
}
.home-filter-tabs::-webkit-scrollbar { display: none; }
.home-filter-tab {
  font-family: var(--font); font-size: 12.5px; font-weight: 500;
  color: var(--muted); cursor: pointer;
  background: transparent; border: none;
  padding: 5px 11px; border-radius: 7px;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.home-filter-tab:hover { color: var(--text); }
.home-filter-tab.active {
  background: var(--card-bg); color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.home-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.suggest-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Let grid 1fr columns shrink below intrinsic content width — without this,
     a single card with a long un-wrappable name (e.g. Roundhill ETF Trust)
     forces the whole grid wider than its parent's max-width, decentering it. */
  min-width: 0;
}
.suggest-card:hover {
  border-color: var(--orange);
  box-shadow: 0 2px 8px rgba(245,166,35,0.12);
}
.suggest-card-body { min-width: 0; flex: 1; }
.suggest-logo {
  width: 34px; height: 34px; border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--subtle);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
/* Once the real logo arrives, switch to a light bg so the PNGs (designed for
   white backgrounds) stay legible — same trick as .co-logo-box. */
.suggest-logo:has(img) { background: #F9FAFB; }
.suggest-logo img { width: 100%; height: 100%; object-fit: contain; }
.suggest-card-soon { cursor: default; }
.suggest-card-soon:hover { border-color: var(--border); box-shadow: none; }
.suggest-ticker-soon { color: var(--muted); }
.suggest-name-soon { color: var(--muted); }
.suggest-ticker {
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
  color: var(--orange);
  margin-bottom: 4px;
}
.suggest-name {
  font-size: 12.5px; font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggest-sector {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.home-page-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-family: var(--font); font-size: 13px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.home-page-btn:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
}
.home-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.home-page-label {
  font-size: 12.5px;
  color: var(--muted);
  min-width: 92px;
  text-align: center;
}
.suggest-empty {
  grid-column: 1 / -1;
  padding: 24px 16px; text-align: center;
  font-size: 13px; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 8px;
}
.home-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  overflow: hidden; z-index: 100;
  max-height: min(70vh, 520px);
}
.home-dropdown.open { display: flex; flex-direction: column; }

/* Beta header pinned at top of the dropdown (both home + in-company search). */
.hd-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: #fffbeb;
  color: #92400e;
  border-bottom: 1px solid #fde68a;
  font-size: 12px; font-weight: 500;
  flex-shrink: 0;
}
.hd-banner svg { flex-shrink: 0; color: #d97706; }
body.dark .hd-banner {
  background: #1f1a0a;
  color: #d4a44a;
  border-bottom-color: #4a3818;
}
body.dark .hd-banner svg { color: #e0a83a; }

.hd-results {
  flex: 1; min-height: 0;
  overflow-y: auto;
}
.hd-results::-webkit-scrollbar { width: 6px; }
.hd-results::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 6px; }
body.dark .hd-results::-webkit-scrollbar-thumb { background: #3a3a3a; }

.hd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.hd-item:last-child { border-bottom: none; }
.hd-item:hover { background: var(--hover-track); }
.hd-ticker {
  font-family: var(--font);
  font-size: 13.5px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  width: 80px; flex-shrink: 0;
}
.hd-name {
  font-size: 13px; color: var(--muted); font-weight: 400;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Company view ── */
.company-view { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.company-view.show { display: flex; }
.co-header {
  padding: 14px var(--gutter-h);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; flex-shrink: 0;
}
.co-header-left { display: flex; align-items: center; gap: 14px; }
.co-logo-box {
  width: 48px; height: 48px; border-radius: 10px;
  border: 1px solid var(--border);
  background: #F9FAFB;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.co-logo-box svg { width: 28px; height: 28px; }
.co-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.co-ticker-big {
  font-size: 22px; font-weight: 700;
  color: var(--orange); letter-spacing: -0.02em;
}
.co-name-text {
  font-size: 15px; font-weight: 400; color: #333;
}
.co-exch-pill {
  font-size: 11px; color: #555;
  border: 1px solid #D1D5DB;
  border-radius: 4px; padding: 2px 7px;
  background: #fff;
}
.co-sector-row { font-size: 12.5px; color: var(--muted); }
.co-search-bar {
  padding: 8px var(--gutter-h);
  border-bottom: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
  position: relative;
}
/* Anchor wraps the input + its dropdown so the dropdown can position itself
   relative to the input (and inherit its 360px max-width) instead of the
   full search-bar width. */
.co-search-anchor {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 360px;
}
.co-search-inner {
  display: flex; align-items: center; gap: 8px;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  transition: border-color 0.15s, border-radius 0.12s, background 0.15s;
  cursor: text;
}
.co-search-inner:focus-within { border-color: var(--orange); background: #fff; }
.co-search-inner input {
  flex: 1; border: none; outline: none;
  font-family: var(--font); font-size: 13px;
  color: var(--text); background: transparent;
}
.co-search-inner input::placeholder { color: #9CA3AF; }
/* When the dropdown is open, square off the input's bottom corners so the
   dropdown visually extends downward from inside the input border. */
.co-search-anchor:has(.co-search-dropdown.open) .co-search-inner {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.co-search-dropdown {
  display: none; position: absolute;
  /* Sit flush against the input — overlap its 1px bottom border. */
  top: calc(100% - 1px); left: 0; right: 0;
  background: var(--card-bg);
  /* Inherit the input's border-color so the dropdown reads as a continuation
     of the input box; when input is focused (orange), the dropdown matches. */
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  overflow: hidden; z-index: 100;
  max-height: min(60vh, 460px);
}
.co-search-inner:focus-within ~ .co-search-dropdown,
.co-search-anchor:has(.co-search-inner:focus-within) .co-search-dropdown {
  border-color: var(--orange);
}
.co-search-dropdown.open { display: flex; flex-direction: column; }

/* Tighter, simpler rows for the header dropdown (smaller fonts per the
   artifact reference). Scoped to this dropdown so the home dropdown stays
   at the larger size. */
.co-search-dropdown .hd-banner { padding: 7px 12px; font-size: 11px; }
.co-search-dropdown .hd-item { padding: 6px 12px; gap: 10px; border-bottom: none; }
.co-search-dropdown .hd-ticker { font-size: 12px; width: 64px; }
.co-search-dropdown .hd-name { font-size: 12px; }
.co-header-right {
  text-align: right; flex-shrink: 0;
  /* Pin the price block above the right edge of the last analysis tab —
     when the .co-header content area is wider than the tabs span, the
     extra room is absorbed as right margin so price doesn't drift past
     "Bear Case". On narrow viewports the max() collapses to 0. */
  margin-right: max(0px, calc(100% - var(--analysis-width)));
}
.co-price-usd { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.co-price-currency { font-size: 13px; font-weight: 500; color: #6B7280; margin-right: 4px; }
.co-chg-row { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; }
.co-chg-val { font-size: 13px; font-weight: 500; }
.co-date-row { font-size: 11px; color: #9CA3AF; margin-top: 3px; }
.co-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.pos { color: var(--green); } .neg { color: var(--red); }

/* Tab bar */
.tab-bar {
  display: flex; background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--gutter-h); overflow-x: auto; overflow-y: hidden;
  flex-shrink: 0; scrollbar-width: none;
  /* Lock touch gestures to horizontal pan so swiping the tab bar can't drift
     vertically on mobile (which previously bled into page scroll feel). */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 13px; font-size: 12.5px; font-weight: 500;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap; margin-bottom: -1px;
  transition: color 0.1s; user-select: none;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--orange); }
.tab svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Content area */
.content-area {
  flex: 1; overflow-y: auto; padding: 20px var(--gutter-h);
  background: var(--subtle);
}
.content-area::-webkit-scrollbar { width: 4px; }
.content-area::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
.panel { display: none; }
.panel.show { display: block; }

/* ══════════════════ AI-COMPOSED COMPONENTS (the palette Opus uses) ═══════ */

/* Cards */
.card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.card-title {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-transform: none;
  color: var(--muted); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}

/* AI pill */
.ai-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 500; color: #4f46e5;
  background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 3px; padding: 2px 8px; margin-bottom: 14px;
}

/* KPI strip */
.kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 12px;
}
.kpi-cell { background: #fff; padding: 13px 15px; }
.kpi-lbl { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.kpi-val { font-family: var(--font); font-size: 16px; font-weight: 500; color: var(--text); }

/* Risks */
.risk-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
}
.risk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.risk-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: none;
  padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
}
.risk-badge.high { background: var(--red-bg); color: var(--red); }
.risk-badge.med  { background: var(--amber-bg); color: var(--amber-text); }
.risk-badge.low  { background: var(--green-bg); color: var(--green); }
.risk-name { font-size: 15px; font-weight: 600; color: var(--red); }
.risk-intro { font-size: 13px; line-height: 1.7; color: var(--text); margin-bottom: 10px; }
.risk-bullets {
  margin: 0 0 10px 0; padding: 8px 14px; list-style: none;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.risk-bullets li {
  font-size: 14px; line-height: 1.65; color: var(--muted);
  padding: 3px 0 3px 16px; position: relative;
}
.risk-bullets li::before {
  content: "•"; position: absolute; left: 0;
  color: var(--muted); font-size: 14px; line-height: 1.65;
}
.risk-bottom {
  font-size: 13px; line-height: 1.65; color: var(--text);
  padding-top: 10px; border-top: 1px solid var(--border);
}
.risk-bottom strong { color: var(--text); font-weight: 600; }

/* Bar chart */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.bar-yr { font-family: var(--font); font-size: 11px; color: var(--muted); width: 30px; text-align: right; flex-shrink: 0; }
.bar-track { flex: 1; height: 22px; background: #F3F4F6; border-radius: 3px; overflow: hidden; }
.bar-fill {
  height: 100%; background: var(--orange); opacity: 0.8; border-radius: 3px; min-width: 4px;
  display: flex; align-items: center; padding-left: 8px;
  font-family: var(--font); font-size: 11px; font-weight: 500; color: #7c3d00;
}

/* Debate */
.debate-topic {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 12px;
}
.debate-topic-title {
  font-size: 15px; font-weight: 600; color: var(--text);
  margin-bottom: 6px;
}
.debate-topic-intro {
  font-size: 13px; line-height: 1.7; color: var(--muted);
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.debate-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.debate-side { border-radius: 8px; padding: 12px 14px; }
.debate-bull-side { background: var(--green-bg); border: 1px solid var(--green-border); }
.debate-bear-side { background: var(--red-bg);   border: 1px solid var(--red-border); }
.debate-side-label {
  font-size: 12px; font-weight: 700; letter-spacing: -0.01em;
  text-transform: none; margin-bottom: 6px;
}
.debate-bull-side .debate-side-label { color: var(--green); }
.debate-bear-side .debate-side-label { color: var(--red); }
.debate-side-intro {
  font-size: 12.5px; line-height: 1.65; margin-bottom: 8px;
}
.debate-bull-side .debate-side-intro { color: #166534; }
.debate-bear-side .debate-side-intro { color: #991b1b; }
.debate-side-bullets { list-style: none; padding: 0; margin: 0; }
.debate-side-bullets li {
  font-size: 12px; line-height: 1.65; color: var(--muted);
  padding: 3px 0 3px 14px; position: relative;
}
.debate-side-bullets li::before {
  content: "•"; position: absolute; left: 0; font-size: 13px; line-height: 1.65;
}
.debate-bull-side .debate-side-bullets li::before { color: var(--green); }
.debate-bear-side .debate-side-bullets li::before { color: var(--red); }
.debate-crux {
  font-size: 13px; line-height: 1.7;
  padding: 10px 14px; border-radius: 8px;
  background: #FFFBEB; border: 1px solid #FDE68A;
  color: var(--text);
}
.debate-crux strong { color: #92400E; font-weight: 600; }

/* Case (Bull/Bear) */
.case-hero { border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid; }
.case-bull { background: var(--green-bg); border-color: var(--green-border); }
.case-bear { background: var(--red-bg); border-color: var(--red-border); }
.case-emo { font-size: 26px; }
.case-ttl { font-size: 13.5px; font-weight: 600; }
.case-bull .case-ttl { color: var(--green); }
.case-bear .case-ttl { color: var(--red); }
.case-sub { font-size: 12px; margin-top: 2px; }
.case-bull .case-sub { color: #16a34a; }
.case-bear .case-sub { color: #b91c1c; }
.case-arg-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
}
.case-arg-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.case-arg-body { font-size: 13px; line-height: 1.7; color: var(--text); margin-bottom: 10px; }
.case-arg-bullets { list-style: none; padding: 0; margin: 0 0 10px 0; }
.case-arg-bullets li {
  font-size: 12.5px; line-height: 1.65; color: var(--muted);
  padding: 3px 0 3px 14px; position: relative;
}
.case-arg-bullets li::before { content: "•"; position: absolute; left: 0; font-size: 13px; line-height: 1.65; color: var(--muted); }
.risk-bullets li strong,
.debate-side-bullets li strong,
.case-arg-bullets li strong { font-weight: 600; }
.case-arg-risk {
  font-size: 12.5px; line-height: 1.65; color: var(--muted);
  padding-top: 10px; border-top: 1px solid var(--border);
}
.case-arg-risk .risk-label { font-weight: 600; }
.bull .case-arg-risk .risk-label { color: #e37500; }
.bear .case-arg-risk .risk-label { color: var(--red); }

/* Prose */
.prose { font-size: 14px; line-height: 1.75; color: var(--text); padding-bottom: 16px; }
.prose + .prose { margin-top: 10px; }

/* Segments */
.segment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.segment-card {
  border: 1px solid var(--border); border-radius: 5px; padding: 12px 14px;
  background: var(--subtle);
}
.segment-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.segment-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.segment-rev { font-size: 12px; font-weight: 600; color: var(--orange); font-family: var(--font); }
.segment-share { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.segment-bar-track { height: 4px; background: #E5E7EB; border-radius: 2px; margin-bottom: 6px; }
.segment-bar-fill { height: 100%; background: var(--orange); border-radius: 2px; opacity: 0.7; }
.segment-body { font-size: 12px; line-height: 1.6; color: var(--muted); }

/* Growth + Watch list items */
.growth-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.growth-item:last-child { border-bottom: none; padding-bottom: 0; }
.growth-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.growth-body { font-size: 13px; line-height: 1.7; color: var(--muted); }
.watch-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.watch-item:last-child { border-bottom: none; padding-bottom: 0; }
.watch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex-shrink: 0; margin-top: 5px; }
.watch-body { font-size: 13px; line-height: 1.7; color: var(--muted); }
.watch-body strong { color: var(--text); font-weight: 600; }

/* Footer */
.app-footer {
  flex-shrink: 0; padding: 8px var(--gutter-h);
  border-top: 1px solid var(--border); background: #fff;
  display: flex; align-items: center; gap: 6px;
}
.app-footer span { font-size: 11.5px; color: #9CA3AF; }

/* ── Login overlay ──────────────────────────────────────────────────── */
.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(135deg, #2E3033 0%, #1a1c1e 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%; max-width: 380px;
  background: #fff; border-radius: 16px;
  padding: 36px 32px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  text-align: center;
  font-family: var(--font);
}
.login-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}
.login-logo { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: block; }
.login-title {
  font-size: 24px; font-weight: 700; color: var(--text);
  letter-spacing: -0.02em;
  display: inline-flex; align-items: baseline; line-height: 1;
}
.login-play { font-size: 13px; font-weight: 500; color: #9CA3AF; letter-spacing: 0.01em; }
.login-play-arrow { color: var(--orange); margin-right: 1px; font-size: 11px; }
.login-sub { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.login-card form { display: flex; flex-direction: column; gap: 10px; }
.login-card input {
  font-family: var(--font); font-size: 14px;
  padding: 11px 14px; border: 1.5px solid var(--border);
  border-radius: 8px; outline: none; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-card input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245,166,35,0.12);
}
.login-card button {
  margin-top: 6px;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  padding: 11px; border: none; border-radius: 8px;
  background: linear-gradient(145deg, #F5A623 0%, #E8880A 100%);
  color: #fff; cursor: pointer;
  transition: filter 0.12s, transform 0.06s;
}
.login-card button:hover { filter: brightness(1.04); }
.login-card button:active { transform: translateY(1px); }
.login-card button:disabled { opacity: 0.6; cursor: not-allowed; }
.login-error {
  margin-top: 8px; min-height: 18px;
  font-size: 12px; color: var(--red); text-align: left;
}

/* Tier gate splash (shares the login-overlay styling) */
.tier-body {
  font-size: 13.5px; line-height: 1.65; color: var(--muted);
  margin: 10px 0 20px;
}
.tier-body strong { color: var(--text); font-weight: 600; }
.tier-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.tier-cta {
  display: inline-block; text-align: center; text-decoration: none;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  padding: 11px 14px; border-radius: 8px;
  background: linear-gradient(145deg, #F5A623 0%, #E8880A 100%);
  color: #fff;
  transition: filter 0.12s, transform 0.06s;
}
.tier-cta:hover  { filter: brightness(1.04); }
.tier-cta:active { transform: translateY(1px); }
.tier-secondary {
  font-family: var(--font); font-size: 13px; font-weight: 500;
  padding: 9px 14px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.tier-secondary:hover { border-color: var(--text); color: var(--text); }

/* User chip — appears next to each search bar (home + company view) */
.user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  font-size: 11.5px; font-weight: 500; color: var(--sb-text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer; user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.user-chip:hover {
  background: var(--orange-dim); border-color: var(--orange-border);
  color: var(--orange);
}
.user-chip-email { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* Co-search-bar layout: input grows, chip stays compact on the right */
.co-search-row { display: flex; align-items: center; gap: 8px; }
/* User actions: push to the right with margin-left:auto, then pull back so
   the chip's right edge aligns with where .co-header-right (price) ends —
   both use the same --analysis-width cap so the two rows line up. */
.co-search-row .user-actions {
  margin-left: auto;
  margin-right: max(0px, calc(100% - var(--analysis-width)));
}


/* Loading / Error states */
.panel-loading {
  padding: 40px 20px; text-align: center;
  font-size: 13px; color: var(--muted);
}
.panel-loading::before {
  content: ''; display: inline-block; width: 12px; height: 12px;
  margin-right: 8px; vertical-align: middle;
  border: 2px solid var(--orange-dim); border-top-color: var(--orange);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.panel-error {
  padding: 16px 18px; border-radius: 6px;
  background: var(--red-bg); border: 1px solid var(--red-border);
  color: var(--red); font-size: 13px; line-height: 1.6;
}

/* Streaming status pill */
.view-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; margin-bottom: 12px;
  background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 999px;
  font-size: 11.5px; color: #4f46e5; font-weight: 500;
  transition: opacity 0.3s, background 0.2s, border-color 0.2s, color 0.2s;
}
.view-status.done {
  background: #f0fdf4; border-color: #bbf7d0; color: #166534;
}
.view-status.error {
  background: var(--red-bg); border-color: var(--red-border); color: var(--red);
}
.view-status.info {
  background: #eff6ff; border-color: #bfdbfe; color: #1e40af;
}
.view-status.soon {
  background: #fffbeb; border-color: #fde68a; color: #92400e;
}
.view-status-spinner {
  width: 10px; height: 10px;
  border: 1.5px solid rgba(79,70,229,0.2);
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.view-status.done .view-status-spinner  { border-color: #bbf7d0;          border-top-color: #166534; }
.view-status.error .view-status-spinner { border-color: var(--red-border); border-top-color: var(--red); }
.view-status.info .view-status-spinner  { border-color: #bfdbfe;          border-top-color: #1e40af; }
.view-status.soon .view-status-spinner  { border-color: #fde68a;          border-top-color: #92400e; }
.view-status.done .view-status-spinner,
.view-status.error .view-status-spinner,
.view-status.info .view-status-spinner,
.view-status.soon .view-status-spinner { animation: none; }
.view-stream { max-width: 900px; }

/* Friendly info / error panels (shown instead of streamed HTML) */
.panel-info {
  padding: 28px 32px; border-radius: 8px;
  border: 1px solid; max-width: 640px; margin: 24px auto 0;
}
.panel-info-title {
  font-size: 15px; font-weight: 600; margin-bottom: 8px;
}
.panel-info-body {
  font-size: 13.5px; line-height: 1.65;
}
.panel-info-cta {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 6px;
  background: var(--orange);
  color: #fff;
  border: none; cursor: pointer;
  transition: filter 0.12s, transform 0.06s;
}
.panel-info-cta:hover  { filter: brightness(1.04); }
.panel-info-cta:active { transform: translateY(1px); }

.panel-info-soon  { background: #fffbeb; border-color: #fde68a; }
.panel-info-soon .panel-info-title { color: #92400e; }
.panel-info-soon .panel-info-body  { color: #78350f; }
.panel-info-info  { background: #eff6ff; border-color: #bfdbfe; }
.panel-info-info .panel-info-title { color: #1e40af; }
.panel-info-info .panel-info-body  { color: #1e3a8a; }
.panel-info-error { background: var(--red-bg); border-color: var(--red-border); }
.panel-info-error .panel-info-title { color: var(--red); }
.panel-info-error .panel-info-body  { color: #7f1d1d; }

/* ══════════════════ Theme toggle button ══════════════════ */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--orange-border);
  color: var(--orange);
  background: var(--orange-dim);
}
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .icon-moon { display: none; }
body.dark .theme-toggle .icon-sun  { display: none; }
body.dark .theme-toggle .icon-moon { display: inline; }

/* Group toggle + user-chip when they live in the same corner */
.user-actions { display: flex; align-items: center; gap: 8px; }

/* ══════════════════ DARK MODE — surface overrides ══════════════════ */
body.dark {
  background: var(--body-bg);
  color: var(--text);
}
/* Cards & elevated surfaces */
body.dark .card,
body.dark .risk-card,
body.dark .debate-topic,
body.dark .case-arg-card,
body.dark .kpi-cell,
body.dark .co-header,
body.dark .co-search-bar,
body.dark .tab-bar,
body.dark .app-footer,
body.dark .home-search-box,
body.dark .suggest-card,
body.dark .user-chip,
body.dark .login-card,
body.dark .home-dropdown,
body.dark .co-search-dropdown,
body.dark .theme-toggle {
  background: var(--card-bg);
}
/* Inner-bg surfaces (sub-tone) */
body.dark .segment-card,
body.dark .co-search-inner {
  background: var(--subtle);
}
/* Logo box stays on a light surface even in dark mode — many vendor logos
   are PNGs with dark/transparent content designed for white backgrounds,
   so a dark box makes them invisible. */
body.dark .co-logo-box,
body.dark .suggest-logo:has(img) {
  background: #F4F6FA;
}
/* Bar tracks */
body.dark .bar-track       { background: var(--bar-track-bg); }
body.dark .segment-bar-track { background: var(--segment-bar-empty); }
/* Debate "crux" callout */
body.dark .debate-crux {
  background: var(--crux-bg); border-color: var(--crux-border); color: var(--text);
}
body.dark .debate-crux strong { color: var(--crux-strong); }
/* AI pill */
body.dark .ai-pill {
  background: var(--ai-pill-bg); border-color: var(--ai-pill-border); color: var(--ai-pill-text);
}
/* Streaming status pill */
body.dark .view-status {
  background: var(--ai-pill-bg); border-color: var(--ai-pill-border); color: var(--ai-pill-text);
}
body.dark .view-status.info {
  background: var(--status-info-bg); border-color: var(--status-info-border); color: var(--status-info-text);
}
body.dark .view-status.soon {
  background: #1f1a0a; border-color: #4a3818; color: #d4a44a;
}
body.dark .view-status.done {
  background: var(--green-bg); border-color: var(--green-border); color: var(--green);
}
body.dark .view-status.error {
  background: var(--red-bg); border-color: var(--red-border); color: var(--red);
}
/* panel-info friendly panels */
body.dark .panel-info-soon  { background: #1f1a0a; border-color: #4a3818; }
body.dark .panel-info-soon .panel-info-title { color: #d4a44a; }
body.dark .panel-info-soon .panel-info-body  { color: #b89968; }
body.dark .panel-info-info  { background: var(--status-info-bg); border-color: var(--status-info-border); }
body.dark .panel-info-info .panel-info-title { color: var(--status-info-text); }
body.dark .panel-info-info .panel-info-body  { color: var(--status-info-text); }
body.dark .panel-info-error { background: var(--red-bg); border-color: var(--red-border); }
body.dark .panel-info-error .panel-info-title { color: var(--red); }
body.dark .panel-info-error .panel-info-body  { color: #fca5a5; }

/* Bull/bear panels: the intro paragraphs hard-code light-mode greens/reds
   (#166534, #991b1b) that are unreadable on a dark background. Override with
   tones that match the lifted --green / --red palette so the two sides stay
   visually distinct. */
body.dark .debate-bull-side .debate-side-intro,
body.dark .case-bull .case-sub { color: #7fe89c; }
body.dark .debate-bear-side .debate-side-intro,
body.dark .case-bear .case-sub { color: #f49a9a; }
/* Co-header sub elements */
body.dark .co-ticker-big { color: var(--orange); }
body.dark .co-name-text  { color: #cbd5e0; }
body.dark .co-exch-pill  { background: var(--subtle); border-color: var(--border); color: #cbd5e0; }
body.dark .co-price-currency { color: var(--muted); }
/* Login splash already on dark background — but the card itself becomes card-bg */
body.dark .login-card { color: var(--text); }
body.dark .login-title { color: var(--text); }
body.dark .login-card input {
  background: var(--subtle); color: var(--text); border-color: var(--border);
}
body.dark .login-card input::placeholder { color: var(--muted); }
body.dark .tier-body strong { color: var(--text); }
body.dark .tier-secondary { color: var(--muted); border-color: var(--border); }
body.dark .tier-secondary:hover { color: var(--text); border-color: var(--muted); }
/* Sidebar group hover already uses var --sb-hover-bg */
body.dark .sb-item:hover { color: var(--text); }
body.dark .sb-item-ticker { color: var(--muted); }
/* Suggest card hover */
body.dark .suggest-card-soon:hover { background: var(--card-bg); }
/* Tab borders */
body.dark .tab.active { color: var(--text); }
/* Hover sb-item color */
body.dark .hd-item:hover { background: var(--sb-hover-bg); }
body.dark .hd-name { color: var(--text); }
/* Make the page background obvious in dark, hide light flash */
body.dark .home-state, body.dark .company-view { background: var(--main-bg); }

/* Mobile-only home button in company-view search bar — hidden on desktop. */
.co-mobile-home {
  display: none;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.co-mobile-home:hover {
  border-color: var(--orange-border);
  color: var(--orange);
  background: var(--orange-dim);
}

/* ══════════════════ RESPONSIVE ══════════════════ */

/* Tablet & below: hide sidebar (in-page tab-bar covers analysis nav), tighten paddings, halve 4-col grids. */
@media (max-width: 900px) {
  .sidebar { display: none !important; }
  .co-mobile-home { display: inline-flex; }

  .home-suggestions-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }

  .home-inner { padding: 40px 20px 64px; }
  .home-hero-title { font-size: 36px; }

  .content-area { padding: 16px 16px; }
  .co-header { padding: 12px 16px; }
  .co-search-bar { padding: 8px 14px; }
  /* dropdown now sits inside .co-search-anchor with left:0/right:0 — no override needed */
  .tab-bar { padding: 0 14px; }
  .app-footer { padding: 7px 14px; }
}

/* Mobile: stack company header, smaller hero, single-column for 2-col grids. */
@media (max-width: 600px) {
  .home-topbar { padding: 12px 16px; }
  .home-inner { padding: 32px 16px 56px; }
  .user-chip-email { display: none; }
  .home-beta-text { display: none; }
  .home-beta-pill { padding: 5px 10px 5px 6px; }
  .home-hero-title { font-size: 29px; white-space: normal; }
  .home-hero-sub { font-size: 14.5px; margin-top: 14px; }
  .home-divider { margin: 24px 0 20px; font-size: 10px; letter-spacing: 0.05em; }
  .home-search-box { padding: 13px 14px; border-radius: 12px; }
  .home-search-box input { font-size: 14px; }
  .home-search-kbd { display: none; }
  .home-recents, .home-suggestions { margin-top: 32px; }

  /* Company header: brand info on the left, price block on the right —
     side-by-side row keeps the section compact and feels like the financial
     tickers users expect (Yahoo / Robinhood). Both columns truncate gracefully. */
  .co-header {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 14px;
  }
  .co-header-left  { gap: 10px; flex: 1 1 auto; min-width: 0; }
  .co-header-right {
    text-align: right; align-self: flex-start;
    flex-shrink: 0; width: auto;
  }
  .co-chg-row { justify-content: flex-end; }
  .co-name-block { min-width: 0; flex: 1 1 auto; }
  .co-logo-box { width: 36px; height: 36px; border-radius: 8px; }
  .co-logo-box svg { width: 20px; height: 20px; }
  .co-name-row {
    flex-wrap: wrap; gap: 4px 8px; margin-bottom: 2px;
    align-items: baseline;
  }
  .co-ticker-big { font-size: 17px; }
  .co-name-text {
    font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
  }
  .co-exch-pill { font-size: 10px; padding: 1px 5px; }
  .co-sector-row {
    font-size: 11.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .co-price-usd { font-size: 18px; white-space: nowrap; }
  .co-price-currency { font-size: 11px; }
  .co-chg-val { font-size: 12px; }
  .co-date-row { margin-top: 2px; font-size: 10.5px; white-space: nowrap; }

  /* Tabs more compact, content padding shrinks */
  .tab { padding: 9px 10px; font-size: 12px; }
  .content-area { padding: 14px 12px; }

  /* Cards a touch tighter */
  .card, .risk-card, .case-arg-card, .debate-topic { padding: 14px 14px; }
  .kpi-cell { padding: 11px 12px; }
  .kpi-val { font-size: 14px; }

  /* 2-col → 1-col for content grids */
  .segment-grid { grid-template-columns: 1fr; }
  .debate-sides { grid-template-columns: 1fr; }

  /* Footer slimmer */
  .app-footer { padding: 7px 14px; }
  .app-footer span { font-size: 11px; line-height: 1.4; }

  /* Login / tier card */
  .login-overlay { padding: 14px; }
  .login-card { padding: 28px 22px 22px; }
  .login-title { font-size: 21px; }
  .login-logo { width: 42px; height: 42px; }
}

/* Very small phones: stack suggestion + KPI grids fully */
@media (max-width: 380px) {
  .home-suggestions-grid { grid-template-columns: 1fr; }
  .kpi-strip { grid-template-columns: 1fr; }
  .home-hero-title { font-size: 24px; }

  /* Drop the wordy company name so the ticker + price stay readable side-by-side. */
  .co-header .co-name-text { display: none; }
  .co-date-row { display: none; }
}