/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Light Theme (default) ─── */
:root {
  --bg:           #f8f9fb;
  --bg-card:      #ffffff;
  --bg-card-alt:  #f3f4f6;
  --bg-input:     #ffffff;
  --bg-nav:       rgba(255,255,255,0.85);
  --border:       #e2e5ea;
  --border-hover: #cbd0d8;
  --text:         #1f2937;
  --text-heading: #0f172a;
  --text-muted:   #6b7280;
  --text-dim:     #9ca3af;
  --accent:       #ff2d20;
  --accent-soft:  rgba(255,45,32,0.08);
  --accent-border:rgba(255,45,32,0.2);
  /* Alias used by page-local styles (intraday tabs, /track, /nfo, etc.) */
  --primary:      var(--accent);
  --blue:         #2563eb;
  --teal:         #0d9488;
  --green:        #16a34a;
  --red:          #dc2626;
  --purple:       #7c3aed;
  --hover-row:    rgba(0,0,0,0.02);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:    0 10px 30px rgba(0,0,0,0.08);
  --radius:       12px;
  --radius-sm:    8px;
  --radius-xs:    6px;
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --transition:   all 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Dark Theme ─── */
[data-theme="dark"] {
  --bg:           #0a0a0f;
  --bg-card:      #111118;
  --bg-card-alt:  #16161f;
  --bg-input:     #1a1a25;
  --bg-nav:       rgba(10,10,15,0.85);
  --border:       #23232f;
  --border-hover: #35354a;
  --text:         #e4e4ed;
  --text-heading: #ffffff;
  --text-muted:   #6b6b80;
  --text-dim:     #44445a;
  --accent:       #ff2d20;
  --accent-soft:  rgba(255,45,32,0.12);
  --accent-border:rgba(255,45,32,0.25);
  --primary:      var(--accent);
  --blue:         #3b82f6;
  --teal:         #14b8a6;
  --green:        #22c55e;
  --red:          #ef4444;
  --purple:       #a855f7;
  --hover-row:    rgba(255,255,255,0.02);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:    0 10px 30px rgba(0,0,0,0.5);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

/* ─── Navbar ─── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-nav);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}

/* Secondary navigation bar (Investments sub-tabs) */
.sub-navbar {
  border-top: 1px solid var(--border);
  background: var(--bg-nav);
}
.sub-nav-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  height: 40px;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.sub-nav-inner a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
}
.sub-nav-inner a:hover {
  color: var(--text-heading);
}
.sub-nav-inner a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nav-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-inner > .nav-right { margin-left: auto; }

/* Admin/agent consoles: many top-level tabs — allow wrap + horizontal scroll so none clip off-screen */
.navbar-admin .nav-inner,
.navbar-agent .nav-inner {
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 16px;
}
.navbar-admin .nav-links,
.navbar-agent .nav-links {
  flex: 1 1 240px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.navbar-admin .nav-links::-webkit-scrollbar,
.navbar-agent .nav-links::-webkit-scrollbar {
  height: 5px;
}
.navbar-admin .nav-links::-webkit-scrollbar-thumb,
.navbar-agent .nav-links::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* Keep theme toggle, bell, and user menu visible when admin tabs use horizontal scroll */
.navbar-admin .nav-right {
  flex-shrink: 0;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }

.brand-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  overflow: visible;
}
.brand-logo {
  display: inline-block;
  height: 28px;
  width: 150px;
  flex-shrink: 0;
  background: url('/logo/Clear market logo colored.svg') no-repeat center / contain;
}
[data-theme="dark"] .brand-logo {
  background-image: url('/logo/Clear market logo white.svg');
}
.nav-role-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 4px;
}

/* ─── Agent Secondary Nav (Market) ─── */
.agent-subnav {
  position: sticky; top: 60px; z-index: 99;
  background: var(--bg-nav); backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.agent-subnav-inner {
  display: flex; align-items: center; gap: 4px;
  padding: 0 40px; height: 44px;
}
.agent-subnav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; font-family: var(--font);
  color: var(--text-muted); text-decoration: none; border-radius: 6px;
  transition: all 0.15s ease;
}
.agent-subnav-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.agent-subnav-link:hover { color: var(--text-heading); background: var(--bg-hover); }
.agent-subnav-link.active { color: var(--accent); background: var(--accent-soft); }
.agent-subnav ~ .app-content .discover-hero { top: 112px; }
.agent-subnav ~ .app-content .two-col-left { top: 112px; max-height: calc(100vh - 128px); }

.navbar:has(.sub-navbar) ~ .app-content .two-col-left { top: 108px; max-height: calc(100vh - 124px); }
.navbar:has(.sub-navbar) ~ .app-content .discover-hero { top: 108px; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cm-nav-search {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  transition: width 0.22s ease;
  z-index: 125;
}
.cm-nav-search.is-open,
.cm-nav-search:focus-within {
  width: clamp(240px, 28vw, 360px);
}
.cm-nav-search-button {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cm-nav-search-button:hover,
.cm-nav-search.is-open .cm-nav-search-button {
  border-color: var(--border-hover);
  background: var(--bg-card-alt);
  color: var(--text);
}
.cm-nav-search-button svg {
  width: 18px;
  height: 18px;
}
.cm-nav-search-input {
  width: 100%;
  height: 36px;
  padding: 8px 12px 8px 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  outline: none;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  transform: scaleX(0.24);
  transform-origin: left center;
  transition: opacity 0.16s ease, transform 0.22s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.cm-nav-search.is-open .cm-nav-search-input,
.cm-nav-search:focus-within .cm-nav-search-input {
  opacity: 1;
  pointer-events: auto;
  transform: scaleX(1);
}
.cm-nav-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,45,32,0.08), var(--shadow-sm);
}
.cm-nav-search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(420px, calc(100vw - 24px));
  max-height: 420px;
  overflow-y: auto;
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  text-align: left;
  z-index: 130;
}
.cm-nav-search-results.show {
  display: block;
}
.cm-nav-search-results .search-result-item {
  padding: 10px 14px;
}
.cm-nav-search-results .sr-left {
  min-width: 0;
}
.cm-nav-search-results .sr-name {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-nav-search-results .sr-right {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 12px;
}
.cm-nav-search-results .sr-change.pos { color: var(--green); }
.cm-nav-search-results .sr-change.neg { color: var(--red); }

/* ─── Notification Bell ─── */
.notif-wrap { position: relative; }
.notif-bell-btn {
  position: relative; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: var(--transition);
}
.notif-bell-btn:hover { border-color: var(--border-hover); background: var(--bg-card-alt); color: var(--text); }
.notif-bell-btn svg { width: 18px; height: 18px; }
.notif-badge {
  position: absolute; top: 0; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  background: #ff2d20; color: #fff; border-radius: 100px;
  pointer-events: none;
}
@keyframes notifRing {
  0% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-14deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-8deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}
.notif-ring svg { animation: notifRing 0.6s ease; }
.notif-bell-btn.notif-ring svg { animation: notifRing 0.6s ease; }

.notif-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: 360px; max-height: 440px; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.15);
  z-index: 200; animation: fadeUp 0.15s ease;
}
.notif-dropdown.open { display: block; }
.notif-dd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 700; color: var(--text-heading);
}
.notif-mark-read {
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--accent);
  font-family: var(--font);
}
.notif-mark-read:hover { text-decoration: underline; }
.notif-list { padding: 6px 0; }
.notif-item {
  display: flex; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); transition: var(--transition);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-card-alt); }
.notif-item.read { opacity: 0.55; }
.ni-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.ni-success { background: rgba(22,163,74,0.08); color: #16a34a; }
.ni-info { background: rgba(37,99,235,0.08); color: #2563eb; }
.ni-warning { background: rgba(234,179,8,0.08); color: #ca8a04; }
.ni-body { flex: 1; min-width: 0; }
.ni-title { font-size: 12px; font-weight: 700; color: var(--text-heading); margin-bottom: 2px; }
.ni-text { font-size: 13px; color: var(--text); line-height: 1.4; }
.notif-action-btn {
  padding: 4px 12px; font-size: 11px; font-weight: 600; border-radius: 6px;
  cursor: pointer; font-family: var(--font); border: 1px solid var(--border);
  background: var(--bg-input); color: var(--text-muted); transition: all 0.2s;
}
.notif-action-btn.notif-btn-accept { background: #16a34a; color: #fff; border-color: #16a34a; }
.notif-action-btn.notif-btn-accept:hover { background: #15803d; }
.notif-action-btn.notif-btn-decline:hover { border-color: #dc2626; color: #dc2626; }
.notif-agent-req { background: rgba(37,99,235,0.04); }
.ni-time { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.notif-empty {
  padding: 40px 20px; text-align: center;
  font-size: 13px; color: var(--text-muted);
}

/* ─── Toast Notifications ─── */
.toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; min-width: 300px; max-width: 420px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  pointer-events: auto;
  transform: translateX(120%); opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.toast-show { transform: translateX(0); opacity: 1; }
.toast-hide { transform: translateX(120%); opacity: 0; transition-duration: 0.25s; }
.toast-icon { flex-shrink: 0; }
.toast-icon svg { width: 20px; height: 20px; }
.toast-success .toast-icon { color: #16a34a; }
.toast-info .toast-icon { color: #2563eb; }
.toast-warning .toast-icon { color: #ca8a04; }
.toast-msg { flex: 1; font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; }
.toast-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--text-dim); padding: 0 2px;
  line-height: 1; transition: color 0.15s;
}
.toast-close:hover { color: var(--text); }

@media (max-width: 480px) {
  .toast-container { left: 12px; right: 12px; top: 12px; }
  .toast { min-width: 0; width: 100%; }
  .notif-dropdown { width: calc(100vw - 24px); right: -60px; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
}
.nav-links a:hover { color: var(--text-heading); text-decoration: none; }
.nav-links a.active { color: var(--accent); font-weight: 600; }

.nav-links-auth {
  gap: 6px;
}
.nav-links-auth a {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.15s ease;
}
.nav-links-auth a:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
}

/* Guest/auth strips use inline display toggles — never let other rules force a hidden strip visible */
.navbar:not(.navbar-admin):not(.navbar-agent) .nav-links[style*="display: none"],
.navbar:not(.navbar-admin):not(.navbar-agent) .nav-links[style*="display:none"] {
  display: none !important;
}

.nav-auth-guest {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-user {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--text);
  transition: all 0.15s ease;
}
.nav-user-btn:hover {
  border-color: var(--accent-border);
  background: var(--bg-hover);
}
.nav-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.nav-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.nav-avatar.nav-avatar--photo {
  padding: 0;
  overflow: hidden;
}

.nav-uname {
  font-size: 13px;
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.15s ease;
}
.nav-user-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nud-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.1s;
}
.nud-item:hover {
  background: var(--bg-hover);
}
.nud-item svg { color: var(--text-dim); flex-shrink: 0; }
.nud-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── Mobile: hide the user button entirely; the hamburger drawer
       contains Profile + Settings + Log out instead. ─────────────────── */
@media (max-width: 768px) {
  body.cm-mobile-drawer-on .navbar .nav-user { display: none !important; }
}
.nud-logout { color: var(--red); }
.nud-logout svg { color: var(--red); }

/* ────────────────────────────────────────────────────────────────────
   Guest-facing /scripts marketing view.
   The authenticated tool view (.scripts-page) uses the existing
   two-column layout — these rules only style the data-scripts-view="guest"
   subtree.
   ──────────────────────────────────────────────────────────────────── */
.scripts-guest {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  color: var(--text);
}

.sg-hero {
  text-align: center;
  padding: 24px 0 48px;
}
.sg-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--primary);
  background: var(--bg-tag, rgba(255, 45, 32, 0.08));
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.sg-title {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  font-weight: 800;
}
.sg-lede {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 680px;
  margin: 0 auto 32px;
}
.sg-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.sg-section-title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 56px 0 8px;
}
.sg-section-sub {
  color: var(--text-dim);
  margin: 0 0 24px;
  font-size: 14px;
}

/* What-you-can-do grid: 4 → 2 → 1 columns */
.sg-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.sg-feature {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.sg-feature:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.sg-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-tag, rgba(255, 45, 32, 0.08));
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.sg-feature-icon svg { width: 20px; height: 20px; }
.sg-feature h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}
.sg-feature p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

/* Example-scripts grid: 3 → 2 → 1 columns */
.sg-example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sg-example {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.sg-example h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
}
.sg-example-formula {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  margin: 0 0 12px;
  color: var(--text-dim);
}
.sg-example p:not(.sg-example-formula) {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

/* How-it-works steps: 3 → 1 column */
.sg-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sg-step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
  position: relative;
}
.sg-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 14px;
}
.sg-step h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}
.sg-step p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}
.sg-mini-note {
  font-size: 11px;
  color: var(--text-faint, var(--text-dim));
  margin-left: 4px;
}

/* Small "Login required" lock label on feature cards that are gated. */
.sg-lock-note {
  display: inline-block;
  margin-top: 10px !important;
  font-size: 11px !important;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 1.6;
}

.sg-cta-strip {
  margin-top: 64px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 24px;
}
.sg-cta-strip h3 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  margin: 0 0 8px;
}
.sg-cta-strip p {
  color: var(--text-dim);
  margin: 0 0 20px;
}

/* Responsive: tablet */
@media (max-width: 960px) {
  .sg-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .sg-example-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Responsive: phone */
@media (max-width: 600px) {
  .scripts-guest { padding: 32px 16px 64px; }
  .sg-hero { padding: 8px 0 32px; }
  .sg-section-title { margin-top: 40px; }
  .sg-feature-grid,
  .sg-example-grid,
  .sg-steps { grid-template-columns: 1fr; }
  .sg-cta-strip { padding: 28px 18px; margin-top: 40px; }
  .sg-cta .btn { width: 100%; justify-content: center; }
}

/* Inline "Login required" lock panel shown inside /scripts tabs that
   guests can't use. The builder itself is public; saved lists are not. */
.scripts-guest-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 12px;
  min-height: 320px;
}
.scripts-guest-lock .sgl-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bg-tag, rgba(255, 45, 32, 0.08));
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.scripts-guest-lock .sgl-icon svg { width: 22px; height: 22px; }
.scripts-guest-lock h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}
.scripts-guest-lock p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 20px;
  max-width: 440px;
}
.scripts-guest-lock .sgl-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 600px) {
  .scripts-guest-lock { padding: 40px 18px; min-height: 260px; }
  .scripts-guest-lock .sgl-cta .btn { width: 100%; justify-content: center; }
}

/* ── Top-nav dropdown (used by guest "Investments") ────────────────────── */
.nav-dd {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* The trigger is a normal nav link, just with a caret tucked beside it. */
.nav-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* When the trigger is a <button> (e.g. "More" with no landing page),
   strip the default UA styling so it matches the <a> triggers. The
   top-bar link styles in cm-header.css cascade in for color/spacing. */
button.nav-dd-trigger {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* "More" uses <button> (no landing href); match .nav-links-auth <a> chip */
.nav-links-auth > .nav-dd > button.nav-dd-trigger {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.25;
  transition: all 0.15s ease;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.nav-links-auth > .nav-dd > button.nav-dd-trigger:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
}
.nav-links-auth > .nav-dd > button.nav-dd-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-dd-caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.nav-dd.is-open .nav-dd-caret {
  transform: rotate(180deg);
}
.nav-dd-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  display: flex;
  flex-direction: column;
}
.nav-dd.is-open .nav-dd-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav-dd-item {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background 0.1s;
}
.nav-dd-item:hover,
.nav-dd-item:focus-visible {
  background: var(--bg-hover);
  outline: none;
}
.nav-dd-item.active {
  color: var(--primary);
  background: var(--bg-hover);
}

/* Mega-menu panel: wider, multi-column grid layout used by the new
   Stocks / Mutual Funds / More dropdowns. Falls back to the
   classic single-column .nav-dd-panel styling on narrow screens. */
.nav-dd-panel-mega {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 8px;
  padding: 14px;
  min-width: 480px;
  max-width: min(720px, calc(100vw - 32px));
}
.nav-dd-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nav-dd-col-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 6px 12px;
  margin-bottom: 2px;
}
.nav-dd-item-rich {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: 8px;
  gap: 2px;
  line-height: 1.35;
}
.nav-dd-item-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-dd-item-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.nav-dd-item-rich.is-soon .nav-dd-item-label { opacity: 0.75; }
.nav-dd-soon-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-hover);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

/* The dropdown is desktop-only — on mobile the hamburger drawer surfaces
   the same categories via buildMegaDrawerGroup, so the trigger's caret
   would be confusing. Hide it inside the drawer flow. */
@media (max-width: 768px) {
  .nav-dd-panel { display: none !important; }
  .nav-dd-caret { display: none !important; }
}

/* Mobile drawer styles for mega-menu sections (sub-headings + soon pill) */
.nav-drawer-subheading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 10px 16px 4px;
}
.nav-drawer-sublink.is-soon { opacity: 0.7; }
.nav-drawer-soon-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--bg-hover);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
}

/* Mobile nav drawer (investor/public navbar) — matches .theme-toggle treatment */
.nav-drawer-toggle {
  display: none;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  transition: var(--transition);
}
.nav-drawer-toggle:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-alt);
}
.nav-drawer-toggle svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.nav-mobile-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
}
.nav-mobile-drawer-root.cm-open {
  pointer-events: auto;
  visibility: visible;
}
.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.22s ease;
}
[data-theme="dark"] .nav-drawer-backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.nav-mobile-drawer-root.cm-open .nav-drawer-backdrop {
  opacity: 1;
}
.nav-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  max-width: 100%;
  background: var(--bg-nav);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.24s ease;
  padding: max(12px, env(safe-area-inset-top, 0px)) 0 max(16px, env(safe-area-inset-bottom, 0px)) 0;
}
[data-theme="dark"] .nav-drawer-panel {
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
}
.nav-mobile-drawer-root.cm-open .nav-drawer-panel {
  transform: translateX(0);
}
.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 16px;
  border-bottom: 1px solid var(--border);
}
.nav-drawer-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
}
.nav-drawer-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: var(--bg-card-alt);
  color: var(--text-heading);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.nav-drawer-close:hover {
  background: var(--bg-hover);
}
.nav-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-drawer-link {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.nav-drawer-link:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
  text-decoration: none;
}
.nav-drawer-link.active {
  color: var(--accent);
  font-weight: 600;
  background: rgba(124, 58, 237, 0.08);
}
[data-theme="dark"] .nav-drawer-link.active {
  background: rgba(167, 139, 250, 0.12);
}
.nav-drawer-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 8px 14px 6px;
}

/* Auth-mode drawer footer pinned to the bottom of the panel —
   holds the Account section (Settings, Log out) and the profile
   card. `margin-top: auto` pushes it below the scrollable nav links
   so it always sits at the bottom regardless of how few/many links
   are above. */
.nav-drawer-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* User profile card shown at the bottom of the drawer's auth section
   (mobile equivalent of the avatar pill in the desktop navbar). */
.nav-drawer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin: 12px 0 0;
  background: var(--bg-card-alt, var(--bg-hover));
  border: 1px solid var(--border);
  border-radius: 12px;
}
.nav-drawer-profile .ndp-avatar {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  font-size: 16px;
}
.nav-drawer-profile .ndp-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-drawer-profile .ndp-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading, var(--text));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-drawer-profile .ndp-email {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-drawer-profile .ndp-role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-top: 2px;
}

/* Collapsible "Investments" group inside the mobile drawer */
.nav-drawer-group { display: flex; flex-direction: column; }
.nav-drawer-group-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.nav-drawer-group-toggle .ndg-chev {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 180ms ease;
  flex-shrink: 0;
}
.nav-drawer-group-toggle[aria-expanded="true"] .ndg-chev {
  transform: rotate(180deg);
}
.nav-drawer-sublist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  margin-left: 14px;
}
.nav-drawer-sublist[hidden] { display: none; }
.nav-drawer-sublink {
  font-size: 14px !important;
  padding: 10px 12px !important;
  font-weight: 500 !important;
}
.nav-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 4px 0;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.nav-drawer-actions .btn {
  width: 100%;
  justify-content: center;
}

/* ─── Theme Toggle ─── */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--border-hover); background: var(--bg-card-alt); }
.theme-toggle svg { width: 18px; height: 18px; color: var(--text-muted); }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(255,45,32,0.2);
}
.btn-primary:hover { background: #e6271c; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,45,32,0.25); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-card-alt); border-color: var(--border-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-card); border-color: var(--border-hover); }

.btn-accent {
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #fff;
  border: none;
}
.btn-accent:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-outline-danger {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.btn-outline-danger:hover { background: rgba(220,38,38,0.06); }

.btn-sm { font-size: 13px; padding: 7px 14px; }
.btn-lg { font-size: 15px; padding: 13px 28px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ─── Landing Hero ─── */
.landing-hero {
  position: relative;
  overflow: hidden;
  padding: 100px 32px 80px;
  text-align: center;
  background: var(--bg);
}

/* ── Floating Stock Cards Background (Apple Stocks widget, theme-aware) ── */
.hero-stock-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  padding: 12px 16px;
  pointer-events: none;
  z-index: 0;
  align-content: start;
}
.hero-radial-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 58% at 50% 46%,
    var(--bg) 0%,
    var(--bg) 30%,
    transparent 100%
  );
}
.hero-float-card {
  aspect-ratio: 1 / 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px 10px 12px;
  opacity: 0.18;
  box-shadow: none;
  animation: heroCardFloat 14s ease-in-out infinite;
  will-change: transform;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hero-float-card:nth-child(odd)  { animation-direction: alternate; }
.hero-float-card:nth-child(even) { animation-direction: alternate-reverse; }
.hero-float-card:nth-child(3n)   { opacity: 0.14; }
.hero-float-card:nth-child(7n)   { opacity: 0.22; }

@keyframes heroCardFloat {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-5px); }
  50%  { transform: translateY(3px); }
  75%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* Row 1: ▲ SYMBOL ... +35.10 */
.hfc-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
.hfc-sym {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 3px;
}
.hfc-arrow { font-size: 7px; }
.hfc-arrow.up   { color: var(--green); }
.hfc-arrow.down { color: var(--red); }
.hfc-abs {
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.hfc-abs.up   { color: var(--green); }
.hfc-abs.down { color: var(--red); }

/* Row 2: Company name ... -0.45% */
.hfc-row2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  line-height: 1.2;
}
.hfc-name {
  font-size: 8px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hfc-pct {
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.hfc-pct.up   { color: var(--green); }
.hfc-pct.down { color: var(--red); }

/* Sparkline with area fill */
.hfc-spark {
  width: 100%;
  flex: 1;
  min-height: 0;
  margin-top: 4px;
}

/* Big price at bottom */
.hfc-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  margin-top: auto;
  padding-top: 2px;
  letter-spacing: -0.02em;
}

@media (max-width: 1200px) {
  .hero-stock-bg { grid-template-columns: repeat(6, 1fr); }
  .hero-float-card:nth-child(n+31) { display: none; }
}
@media (max-width: 900px) {
  .hero-stock-bg { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .hero-float-card:nth-child(n+21) { display: none; }
}
@media (max-width: 600px) {
  .hero-stock-bg { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
  .hero-float-card:nth-child(n+13) { display: none; }
  .hero-float-card { padding: 6px 7px 8px; border-radius: 12px; }
  .hfc-sym { font-size: 8px; }
  .hfc-name { display: none; }
  .hfc-row2 { display: none; }
  .hfc-abs { font-size: 8px; }
  .hfc-price { font-size: 12px; }
}
@media (max-width: 400px) {
  .hero-stock-bg { grid-template-columns: repeat(2, 1fr); }
  .hero-float-card:nth-child(n+9) { display: none; }
}

.landing-hero .hero-glow {
  position: absolute;
  top: -200px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(255,45,32,0.06) 0%, rgba(124,58,237,0.03) 40%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

.landing-hero .hero-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  z-index: 3;
}

.hero-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 20px;
  padding: 6px 16px;
  border: 1px solid var(--accent-border);
  border-radius: 100px;
  background: var(--accent-soft);
}

.landing-hero h1 {
  font-size: clamp(36px,5vw,56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-heading);
  margin-bottom: 20px;
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--purple), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-hero .hero-desc {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.hero-stats {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding: 20px 40px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}

.stat { display: flex; flex-direction: column; align-items: center; }
.stat-num { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-heading); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.stat-divider { width: 1px; height: 36px; background: var(--border); }

/* ─── Features Grid (Landing) ─── */
.features-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}
.features-section h2 {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 12px;
}
.features-section .section-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 16px;
  margin-bottom: 48px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 24px;
}
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.feature-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-icon.red   { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); }
.feature-icon.blue  { background: rgba(37,99,235,0.08); color: var(--blue); border: 1px solid rgba(37,99,235,0.2); }
.feature-icon.teal  { background: rgba(13,148,136,0.08); color: var(--teal); border: 1px solid rgba(13,148,136,0.2); }
.feature-icon.purple { background: rgba(124,58,237,0.08); color: var(--purple); border: 1px solid rgba(124,58,237,0.2); }
.feature-icon.green { background: rgba(22,163,74,0.08); color: var(--green); border: 1px solid rgba(22,163,74,0.2); }

.feature-card h3 { font-size: 16px; font-weight: 700; color: var(--text-heading); margin-bottom: 6px; }
.feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* ─── Stock Screens ─── */
/* ─── Scripts Preview (landing) ─── */
.screens-section {
  padding: 80px 32px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.screens-section .section-header { text-align: center; margin-bottom: 48px; }
.screens-section .section-header h2 { font-size: 32px; font-weight: 800; color: var(--text-heading); margin-bottom: 12px; }
.screens-section .section-header p { font-size: 16px; color: var(--text-muted); max-width: 520px; margin: 0 auto; }

.spv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
.spv-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 28px 20px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--text); transition: var(--transition);
}
.spv-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-md); transform: translateY(-3px); text-decoration: none; }
.spv-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.spv-icon.red { background: var(--accent-soft); }
.spv-icon.blue { background: rgba(37,99,235,0.08); }
.spv-icon.green { background: rgba(22,163,74,0.08); }
.spv-icon.purple { background: rgba(124,58,237,0.08); }
.spv-icon.teal { background: rgba(13,148,136,0.08); }
.spv-card h4 { font-size: 14px; font-weight: 700; color: var(--text-heading); margin: 0; line-height: 1.3; }
.spv-card p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ─── Sectors Preview (landing) ─── */
.sectors-section { padding: 80px 32px; }
.sectors-section .section-header { text-align: center; margin-bottom: 48px; }
.sectors-section .section-header h2 { font-size: 32px; font-weight: 800; color: var(--text-heading); margin-bottom: 12px; }
.sectors-section .section-header p { font-size: 16px; color: var(--text-muted); max-width: 480px; margin: 0 auto; }

.sec-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1100px; margin: 0 auto; }
.sec-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none; color: var(--text);
  transition: var(--transition);
}
.sec-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.sec-card-name { font-size: 14px; font-weight: 700; color: var(--text-heading); line-height: 1.35; }
.sec-card-count { font-size: 12px; color: var(--text-dim); }

@media (max-width: 900px) {
  .spv-grid { grid-template-columns: repeat(2, 1fr); }
  .sec-preview { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .screens-section, .sectors-section { padding: 60px 20px; }
  .spv-grid { grid-template-columns: 1fr; }
  .sec-preview { grid-template-columns: 1fr; }
}

/* ─── How It Works ─── */
.how-section {
  padding: 80px 32px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.how-section .section-header {
  text-align: center;
  margin-bottom: 64px;
}
.how-section .section-header h2 {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 12px;
}
.how-section .section-header p {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto;
}
.how-steps {
  display: flex;
  justify-content: center;
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.how-step {
  flex: 1;
  max-width: 280px;
  text-align: center;
  position: relative;
}
.how-step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.how-step-num.s1 { background: var(--accent-soft); color: var(--accent); border: 2px solid var(--accent-border); }
.how-step-num.s2 { background: rgba(37,99,235,0.08); color: var(--blue); border: 2px solid rgba(37,99,235,0.2); }
.how-step-num.s3 { background: rgba(22,163,74,0.08); color: var(--green); border: 2px solid rgba(22,163,74,0.2); }
.how-step h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
}
.how-step p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}
.how-connector {
  position: absolute;
  top: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--border), var(--accent), var(--blue), var(--green), var(--border));
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 200px);
  opacity: 0.5;
}

/* ─── Market Pulse ─── */
.pulse-section {
  padding: 80px 32px;
  overflow: hidden;
}
.pulse-section .section-header {
  text-align: center;
  margin-bottom: 48px;
}
.pulse-section .section-header h2 {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 12px;
}
.pulse-section .section-header p {
  font-size: 16px;
  color: var(--text-muted);
}
.pulse-track {
  display: flex;
  gap: 16px;
  animation: pulse-scroll 30s linear infinite;
  width: max-content;
}
.pulse-track:hover { animation-play-state: paused; }
@keyframes pulse-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.pulse-card {
  flex-shrink: 0;
  width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: var(--transition);
}
.pulse-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pulse-card .pc-symbol {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 2px;
}
.pulse-card .pc-name {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pulse-card .pc-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.pulse-card .pc-change {
  font-size: 13px;
  font-weight: 600;
}
.pulse-card .pc-change.up { color: var(--green); }
.pulse-card .pc-change.down { color: var(--red); }

/* ─── Data Sources / Built For ─── */
.sources-section {
  padding: 80px 32px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sources-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.sources-text h2 {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 16px;
  line-height: 1.2;
}
.sources-text p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}
.sources-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  transition: var(--transition);
}
.source-badge:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.source-badge .sb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: badge-pulse 2s ease-in-out infinite;
}
.source-badge .sb-dot.live { background: var(--green); }
.source-badge .sb-dot.soon { background: var(--text-dim); }
@keyframes badge-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.sources-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sv-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  text-align: center;
  transition: var(--transition);
}
.sv-card:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sv-card .sv-num {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 4px;
}
.sv-card .sv-num.accent { color: var(--accent); }
.sv-card .sv-num.blue { color: var(--blue); }
.sv-card .sv-num.purple { color: var(--purple); }
.sv-card .sv-num.green { color: var(--green); }
.sv-card .sv-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ─── CTA Section ─── */
.cta-section {
  padding: 100px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section .cta-glow {
  position: absolute;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(255,45,32,0.05) 0%, rgba(37,99,235,0.03) 40%, transparent 70%);
  pointer-events: none;
}
.cta-section .cta-inner {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}
.cta-section h2 {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 16px;
  line-height: 1.15;
}
.cta-section p {
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 36px;
  line-height: 1.7;
}
.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── Scroll Reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Responsive additions for new sections ─── */
@media (max-width: 768px) {
  .how-steps { flex-direction: column; gap: 32px; align-items: center; }
  .how-connector { display: none; }
  .sources-inner { grid-template-columns: 1fr; gap: 40px; }
  .sources-visual { grid-template-columns: 1fr 1fr; }
  .pulse-section { padding: 60px 20px; }
  .how-section, .sources-section { padding: 60px 20px; }
  .cta-section { padding: 60px 20px; }
  .cta-section h2 { font-size: 28px; }
}

/* ─── Auth Pages ─── */
.auth-page {
  display: flex;
  flex-direction: column;
}
.auth-container {
  flex: 1;
  /* Stretch to fill the entire viewport between the site header (~61px)
     and the sticky footer bar (--ft-bar-height) so the dot-grid + accent
     glow background reaches edge-to-edge instead of leaving a flat
     coloured strip below the centered form. */
  min-height: calc(100vh - 61px - var(--ft-bar-height, 56px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  /* Subtle dot-grid + corner accent glows. The SVG is inline so it adds
     zero requests, and the gradient colour stops use the same accent
     hue as the rest of the app so it auto-adjusts in both themes. */
  background-color: var(--bg, #fafbfc);
  background-image:
    radial-gradient(circle at 12% 18%, var(--accent-soft, rgba(255,45,32,.08)) 0%, transparent 42%),
    radial-gradient(circle at 88% 82%, var(--accent-soft, rgba(255,45,32,.08)) 0%, transparent 45%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='1.5' cy='1.5' r='1' fill='%2399a0ad' opacity='0.18'/></svg>");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 28px 28px;
}
[data-theme="dark"] .auth-container {
  background-image:
    radial-gradient(circle at 12% 18%, var(--accent-soft, rgba(255,45,32,.12)) 0%, transparent 42%),
    radial-gradient(circle at 88% 82%, var(--accent-soft, rgba(255,45,32,.12)) 0%, transparent 45%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='1.5' cy='1.5' r='1' fill='%23ffffff' opacity='0.07'/></svg>");
}
.auth-container > * { position: relative; z-index: 1; }
.auth-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
}
.auth-box h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 6px;
}
.auth-box .auth-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.form-group {
  margin-bottom: 18px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.form-group input {
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  padding: 11px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  transition: var(--transition);
  outline: none;
}
.form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,45,32,0.08);
}
.form-group input::placeholder { color: var(--text-dim); }

.auth-box .btn { width: 100%; justify-content: center; margin-top: 4px; }
.auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-muted);
}
.auth-role-tabs {
  display: flex;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 3px;
  margin-bottom: 24px;
  gap: 2px;
}
.auth-role-tab {
  flex: 1;
  padding: 9px 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-xs) - 2px);
  cursor: pointer;
  transition: all 0.2s ease;
}
.auth-role-tab:hover { color: var(--text); }
.auth-role-tab.active {
  background: var(--bg-card);
  color: var(--text-heading);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.auth-copyright {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  padding: 16px 20px 24px;
  margin: 0;
}
.auth-error {
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--red);
  margin-bottom: 16px;
  display: none;
}
.auth-error.show { display: block; }

/* ─── Main Layout ─── */
main {
  max-width: 100%;
  padding: 24px 32px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ─── Cards ─── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  scroll-margin-top: 80px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  animation: fadeUp 0.4s ease both;
}
.card:hover { border-color: var(--border-hover); }
.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; }

.card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.card-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
}
.card-icon svg { width: 20px; height: 20px; color: var(--accent); }
.card-icon.icon-results { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.2); }
.card-icon.icon-results svg { color: var(--blue); }
.card-icon.icon-saved { background: rgba(13,148,136,0.08); border-color: rgba(13,148,136,0.2); }
.card-icon.icon-saved svg { color: var(--teal); }

.card-header h2 { font-size: 18px; font-weight: 700; color: var(--text-heading); margin-bottom: 2px; }
.card-sub { font-size: 13px; color: var(--text-muted); }

/* ─── Scripts Page ─── */
.scripts-page { max-width: 100%; }
.scripts-redesign {
  overflow-x: hidden;
}
.scripts-redesign .cm-page-title,
.scripts-redesign .cm-page-title .page-intro {
  max-width: 760px;
  overflow-wrap: anywhere;
}
.scripts-discovery-shell {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  gap: 0;
}
.scripts-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}
.scripts-hero-copy,
.scripts-hero-panel,
.scripts-content-shell {
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.scripts-hero-copy {
  position: relative;
  overflow: visible;
  border-radius: 18px;
  padding: 34px;
  background:
    radial-gradient(circle at 12% 15%, rgba(255,45,32,0.14), transparent 28%),
    linear-gradient(90deg, rgba(255,45,32,0.055) 0 1px, transparent 1px 76px),
    linear-gradient(0deg, rgba(15,23,42,0.035) 0 1px, transparent 1px 76px),
    var(--bg-card);
  z-index: 20;
}
[data-theme="dark"] .scripts-hero-copy {
  background:
    radial-gradient(circle at 12% 15%, rgba(255,45,32,0.2), transparent 30%),
    linear-gradient(90deg, rgba(148,163,184,0.08) 0 1px, transparent 1px 76px),
    linear-gradient(0deg, rgba(148,163,184,0.07) 0 1px, transparent 1px 76px),
    var(--bg-card);
}
.scripts-kicker {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,45,32,0.1);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.scripts-hero-copy h2 {
  max-width: 760px;
  margin: 0 0 10px;
  color: var(--text-heading);
  font-size: 48px;
  line-height: 1.04;
  letter-spacing: 0;
}
.scripts-hero-copy p {
  max-width: 720px;
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.scripts-hero-search {
  max-width: 780px;
  margin: 0;
}
.scripts-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.scripts-preset {
  box-sizing: border-box;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 86%, var(--bg) 14%);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.scripts-preset:hover,
.scripts-preset.active {
  border-color: var(--accent-border);
  color: var(--accent);
}
.scripts-hero-panel {
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(17,24,39,0.035), transparent 42%),
    var(--bg-card);
}
.scripts-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.scripts-panel-head span {
  color: var(--text-heading);
  font-size: 14px;
  font-weight: 800;
}
.scripts-panel-head small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.scripts-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.scripts-stat {
  min-width: 0;
  min-height: 88px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--bg-card) 82%, var(--bg) 18%);
}
.scripts-stat:nth-child(1) { border-left: 3px solid var(--green); }
.scripts-stat:nth-child(2) { border-left: 3px solid #2563eb; }
.scripts-stat:nth-child(3) { border-left: 3px solid #d97706; }
.scripts-stat:nth-child(4) { border-left: 3px solid var(--accent); }
.scripts-stat span {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.scripts-stat strong {
  display: block;
  color: var(--text-heading);
  font-size: 28px;
  line-height: 1;
}
.scripts-workflow-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.scripts-lane-card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 128px;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  color: inherit;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 90%, var(--bg) 10%), var(--bg-card));
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: var(--font);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.scripts-lane-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--lane-color, var(--accent));
}
.scripts-lane-card:nth-child(1) { --lane-color: var(--green); }
.scripts-lane-card:nth-child(2) { --lane-color: #2563eb; }
.scripts-lane-card:nth-child(3) { --lane-color: var(--accent); }
.scripts-lane-card:hover,
.scripts-lane-card.active {
  transform: translateY(-2px);
  border-color: var(--lane-color, var(--accent));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.scripts-lane-label {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lane-color, var(--accent)) 10%, transparent);
  color: var(--lane-color, var(--accent));
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.scripts-lane-card strong {
  color: var(--text-heading);
  font-size: 18px;
  line-height: 1.2;
}
.scripts-lane-card em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}
.scripts-mode-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  padding: 6px;
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.scripts-mode-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.scripts-mode-tab svg {
  width: 16px;
  height: 16px;
}
.scripts-mode-tab:hover,
.scripts-mode-tab.active {
  background: rgba(255,45,32,0.08);
  color: var(--accent);
  border-color: rgba(255,45,32,0.14);
}
.scripts-content-shell {
  border-radius: 18px;
  padding: 20px;
}
.scripts-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.scripts-section-head h2 {
  margin: 0 0 4px;
  color: var(--text-heading);
  font-size: 20px;
}
.scripts-section-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}
.scripts-saved-card {
  box-shadow: none;
}
/* Shared intro paragraph that sits under each market section's H1
   (Stocks, Mutual Funds, IPO, ETF, REITs, InvITs, Scripts,
   agent counterparts). */
.page-intro {
  max-width: 820px;
  margin: 0 0 40px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}
.scripts-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.scripts-header h1 { margin-top: 0; }

.screen-category { margin-bottom: 36px; }
.sc-header { margin-bottom: 14px; }
.sc-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 2px;
}
.sc-header p {
  font-size: 13px;
  color: var(--text-dim);
}
.sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.screen-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font);
  box-shadow: var(--shadow-sm);
}
.screen-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.screen-card[hidden],
.screen-category[hidden] {
  display: none;
}
@media (max-width: 1100px) {
  .scripts-workflow-lanes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .scripts-landing-hero {
    grid-template-columns: 1fr;
  }
  .scripts-hero-copy {
    padding: 24px;
  }
  .scripts-hero-copy h2 {
    font-size: 34px;
  }
  .scripts-workflow-lanes {
    grid-template-columns: 1fr;
  }
  .scripts-lane-card {
    min-height: 112px;
  }
}
@media (max-width: 640px) {
  .scripts-redesign .cm-page-title,
  .scripts-redesign .cm-page-title .page-intro,
  .scripts-redesign .cm-page-head,
  .scripts-discovery-shell,
  .scripts-landing-hero,
  .scripts-hero-copy,
  .scripts-hero-panel,
  .scripts-content-shell {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .scripts-redesign .cm-page-title .page-intro {
    width: min(100%, calc(100vw - 24px));
  }
  .scripts-redesign .cm-page-title .page-intro,
  .scripts-hero-copy p,
  .scripts-hero-search input {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .scripts-hero-copy,
  .scripts-hero-panel,
  .scripts-content-shell {
    border-radius: 14px;
  }
  .scripts-hero-copy {
    padding: 22px 18px;
  }
  .scripts-hero-copy h2 {
    width: min(100%, 326px);
    font-size: 29px;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  .scripts-hero-copy p,
  .scripts-hero-search {
    width: min(100%, 326px);
    max-width: 100%;
  }
  .scripts-stat-grid {
    grid-template-columns: 1fr;
  }
  .scripts-stat {
    min-height: 74px;
  }
  .scripts-content-shell {
    padding: 14px;
  }
  .scripts-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .screen-category {
    margin-bottom: 28px;
  }
  .sc-grid {
    grid-template-columns: 1fr;
  }
  .screen-card {
    padding: 16px;
  }
  .tv2-header {
    align-items: stretch;
  }
  .tv2-header-right,
  .tv2-name-input {
    width: 100%;
    max-width: 100%;
  }
  .tv2-table-wrap {
    max-height: none;
  }
}
.screen-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 6px;
}
.screen-card p {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 10px;
}
.sc-formula {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-card-alt);
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 4px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.sc-run {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.screen-card:hover .sc-run { text-decoration: underline; }

/* ── Screen-card head row (title + badge) ───────────────────────── */
.sc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.sc-card-head h3 { margin-bottom: 0; }

.sc-badge {
  display: inline-block;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  line-height: 1.4;
  border: 1px solid transparent;
}
.sc-badge-live {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.25);
}
[data-theme="dark"] .sc-badge-live { color: #4ade80; }
.sc-badge-approx {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.25);
}
[data-theme="dark"] .sc-badge-approx { color: #fbbf24; }
.sc-badge-soon {
  background: var(--bg-card-alt);
  color: var(--text-dim);
  border-color: var(--border);
}

/* ── Disabled (coming-soon) tile ─────────────────────────────────── */
.screen-card-disabled {
  cursor: not-allowed;
  opacity: 0.72;
}
.screen-card-disabled:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  transform: none;
}
.sc-run-soon {
  color: var(--text-dim);
  font-weight: 600;
}
.screen-card-disabled:hover .sc-run { text-decoration: none; }

/* ── Shared results section (sibling of tab panels) ─────────────── */
.scripts-results-section { margin-top: 20px; scroll-margin-top: 80px; }

.scripts-results-section .results-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 8px 0 0;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.scripts-results-section .results-status[hidden] { display: none; }
.scripts-results-section .results-status .neg { color: var(--accent); }

.scripts-results-section .rs-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cm-rs-spin 0.8s linear infinite;
}
@keyframes cm-rs-spin {
  to { transform: rotate(360deg); }
}

/* Script Banner */
.script-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255,45,32,0.04), rgba(255,45,32,0.08));
  border: 1px solid rgba(255,45,32,0.15);
  border-radius: var(--radius-xs);
  margin-bottom: 20px;
}
.sb-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sb-body { flex: 1; min-width: 0; }
.sb-name { font-size: 14px; font-weight: 800; color: var(--text-heading); margin-bottom: 4px; }
.sb-formula {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
  line-height: 1.4;
}
.sb-clear {
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  padding: 4px; border-radius: 4px; transition: var(--transition); flex-shrink: 0;
}
.sb-clear:hover { color: var(--accent); background: rgba(255,45,32,0.08); }

.custom-screen-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.csp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.csp-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-heading);
}

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.results-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-heading);
}
.results-header .save-row { margin-bottom: 0; }

/* Refine Results Toolbar */
.refine-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
  flex-wrap: wrap;
}
.refine-left, .refine-right {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.refine-search-wrap {
  position: relative;
}
.refine-search-wrap svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-dim);
}
.refine-input {
  padding: 7px 12px 7px 34px; font-size: 13px; font-family: var(--font);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--bg-input); color: var(--text); width: 200px;
}
.refine-input:focus { border-color: var(--accent); outline: none; }
.refine-select {
  padding: 7px 28px 7px 10px; font-size: 12px; font-weight: 600; font-family: var(--font);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--bg-input); color: var(--text); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.refine-select:focus { border-color: var(--accent); outline: none; }
.refine-count {
  font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
}
.refine-clear {
  padding: 6px 12px; font-size: 11px; font-weight: 600; font-family: var(--font);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: none; color: var(--text-muted); cursor: pointer;
  transition: var(--transition);
}
.refine-clear:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 768px) {
  .refine-bar { flex-direction: column; align-items: stretch; }
  .refine-left, .refine-right { flex-direction: column; }
  .refine-input { width: 100%; }
}

.saved-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  .scripts-header { flex-direction: column; }
  .sc-grid { grid-template-columns: 1fr; }
}

/* ─── Filter Grid ─── */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px 20px;
  margin-bottom: 24px;
}
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.filter-group input,
.filter-group select {
  font-family: var(--font); font-size: 14px;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  transition: var(--transition);
  outline: none;
  -webkit-appearance: none;
}
.filter-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.filter-group input:focus,
.filter-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,45,32,0.08);
}
.filter-group input::placeholder { color: var(--text-dim); }

.filter-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-text { font-size: 13px; color: var(--text-muted); margin-left: 4px; }

/* ─── Save Row ─── */
.save-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.save-row input {
  flex: 1; min-width: 240px;
  font-family: var(--font); font-size: 14px;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  transition: var(--transition);
  outline: none;
}
.save-row input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,148,136,0.08); }
.save-row input::placeholder { color: var(--text-dim); }

.count-badge {
  font-size: 13px; font-weight: 600;
  color: var(--blue);
  background: rgba(37,99,235,0.08);
  padding: 2px 10px; border-radius: 100px; margin-left: 8px;
}
.count-badge:empty { display: none; }

/* ─── Table ─── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead { position: sticky; top: 0; z-index: 1; }
th {
  background: var(--bg-card-alt);
  font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; color: var(--text); }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover td { background: var(--hover-row); }
tbody tr:last-child td { border-bottom: none; }

td .ticker-name { font-weight: 700; color: var(--text-heading); text-decoration: none; }
td a.ticker-name:hover { color: var(--accent); }
td .market-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
td .market-tag.nse { background: rgba(124,58,237,0.08); color: var(--purple); }
td .market-tag.bse { background: rgba(13,148,136,0.08); color: var(--teal); }
td .market-tag.nyse { background: rgba(37,99,235,0.08); color: var(--blue); }
td .sector-tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--bg-card-alt); color: var(--text-muted); }

.pos { color: var(--green); font-weight: 600; }
.neg { color: var(--red); font-weight: 600; }
td.empty-cell { text-align: center; padding: 40px 14px; color: var(--text-dim); font-style: italic; }

/* ─── Saved Lists ─── */
.saved-lists { display: flex; flex-direction: column; gap: 10px; }
.saved-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card-alt);
  transition: var(--transition);
}
.saved-item:hover { border-color: var(--border-hover); }
.saved-item .name { font-weight: 700; font-size: 15px; color: var(--text-heading); margin-bottom: 3px; }
.saved-item .meta { font-size: 12px; color: var(--text-muted); }
.saved-actions { display: flex; gap: 8px; }
.saved-empty { text-align: center; padding: 32px 16px; color: var(--text-dim); font-size: 14px; }

/* ─── Footer ─── */
/* old footer reset */
footer { border-top: none; padding: 0; text-align: left; }

/* ─── Animations ─── */
@keyframes spin { to { transform: rotate(360deg); } }
.cm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cm-svg-loader { text-align: center; box-sizing: border-box; }
.cm-svg-loader.cm-svg-loader--auto .cm-svg-loader-img {
  width: 100%;
  max-width: min(400px, 92vw);
  height: auto;
  display: block;
  margin: 0 auto;
}
.cm-svg-loader--discover .cm-svg-loader-img,
.discover-grid .cm-svg-loader--auto .cm-svg-loader-img {
  max-width: min(240px, 88vw);
}
.cm-svg-loader--hero .cm-svg-loader-img {
  width: 100%;
  max-width: min(560px, 94vw);
  height: auto;
  display: block;
  margin: 0 auto;
}
.cm-svg-loader--panel .cm-svg-loader-img {
  width: 100%;
  max-width: min(440px, 94vw);
  height: auto;
  display: block;
  margin: 0 auto;
}
.cm-svg-loader--mini img {
  width: auto;
  height: 22px;
  vertical-align: middle;
  margin-right: 8px;
  display: inline-block;
}
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.6s linear infinite;
  vertical-align: middle; margin-right: 6px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Search Bar ─── */
.search-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 40px;
}
.search-wrap input {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  padding: 14px 20px 14px 48px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text);
  outline: none;
  transition: var(--transition);
  box-shadow: var(--shadow-md);
}
.search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,45,32,0.08), var(--shadow-md); }
.search-wrap input::placeholder { color: var(--text-dim); }
.search-wrap .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-dim);
  pointer-events: none;
}
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 380px;
  overflow-y: auto;
  z-index: 200;
  display: none;
  text-align: left;
}
.search-results.show { display: block; }
.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  cursor: pointer;
  transition: background 0.1s ease;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--bg-card-alt); text-decoration: none; }
.search-result-item .sr-left { display: flex; flex-direction: column; gap: 2px; }
.search-result-item .sr-symbol { font-weight: 700; font-size: 14px; color: var(--text-heading); }
.search-result-item .sr-name { font-size: 12px; color: var(--text-muted); }
.search-result-item .sr-right { text-align: right; }
.search-result-item .sr-price { font-weight: 600; font-size: 14px; color: var(--text-heading); }
.search-result-item .sr-change { font-size: 12px; }
.search-result-item .sr-market { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 3px; }
.sr-market.nse { background: rgba(124,58,237,0.08); color: var(--purple); }
.sr-market.bse { background: rgba(13,148,136,0.08); color: var(--teal); }
.search-empty { padding: 20px; text-align: center; color: var(--text-dim); font-size: 14px; }

/* Nav search (smaller, inline) */
.nav-search {
  position: relative;
  width: 220px;
}
.nav-search input {
  width: 100%;
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 12px 8px 34px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text);
  outline: none;
  transition: var(--transition);
}
.nav-search input:focus { border-color: var(--accent); background: var(--bg-card); }
.nav-search input::placeholder { color: var(--text-dim); }
.nav-search .search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-dim);
  pointer-events: none;
}
.nav-search .search-results { top: calc(100% + 4px); min-width: 340px; right: 0; left: auto; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .nav-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 12px;
  }
  .sub-nav-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 0;
    flex-wrap: nowrap;
  }
  .sub-nav-inner a {
    flex-shrink: 0;
    padding: 0 14px;
  }

  /*
   * Public navbar: wrap into two rows — brand + actions on row 1, links scroll on row 2.
   */
  .navbar:not(.navbar-admin):not(.navbar-agent) .nav-brand {
    order: 1;
    min-width: 0;
    flex-shrink: 0;
  }
  body.cm-mobile-drawer-on .navbar .nav-drawer-toggle {
    display: flex;
  }
  /* On mobile we surface the investment sub-nav inside the drawer
     as a collapsible "Investments" group, so hide the desktop
     secondary navbar. Keep the breadcrumb-bar variant visible — it
     replaces the in-page breadcrumb on detail pages. */
  body.cm-mobile-drawer-on .navbar .sub-navbar:not(.breadcrumb-bar) {
    display: none !important;
  }
  .navbar:not(.navbar-admin):not(.navbar-agent) .brand-logo {
    max-width: min(136px, 44vw);
  }
  .navbar:not(.navbar-admin):not(.navbar-agent) .nav-inner > .nav-right {
    order: 3;
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    max-width: 100%;
  }
  .cm-nav-search.is-open,
  .cm-nav-search:focus-within {
    width: min(240px, calc(100vw - 132px));
  }
  .cm-nav-search-results {
    width: min(360px, calc(100vw - 24px));
  }
  /* Drawer mode: horizontal link row + guest CTAs live in the side panel.
     Apply to ALL navbar variants (public, admin, agent) so the mobile
     drawer is universal and the inline link row never has to wrap. */
  body.cm-mobile-drawer-on .navbar .nav-inner > .nav-links,
  body.cm-mobile-drawer-on .navbar .nav-inner > .nav-links-auth {
    display: none !important;
  }
  body.cm-mobile-drawer-on .navbar .nav-auth-guest {
    display: none !important;
  }
  .navbar:not(.navbar-admin):not(.navbar-agent) .nav-links {
    order: 10;
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 12px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  .navbar:not(.navbar-admin):not(.navbar-agent) .nav-links a {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .nav-search {
    width: clamp(140px, 42vw, 220px);
    max-width: 100%;
    min-width: 0;
    flex-shrink: 1;
  }
  .nav-search .search-results {
    min-width: 0;
    left: auto;
    right: 0;
    width: min(360px, calc(100vw - 24px));
  }

  /* Admin / Agent navbars on mobile: the inline link row is hidden by
     the global drawer rule above, so the nav-inner stays single-row
     just like the public navbar. */
  .navbar-admin .nav-inner,
  .navbar-agent .nav-inner {
    flex-wrap: nowrap;
    height: 60px;
    min-height: 60px;
    align-items: center;
  }
  .navbar-agent .nav-right,
  .navbar-admin .nav-right {
    flex-shrink: 0;
    margin-left: auto;
    gap: 8px;
  }

  .landing-hero { padding: 48px max(18px, env(safe-area-inset-left)) 40px max(18px, env(safe-area-inset-right)); }
  .landing-hero h1 { font-size: clamp(26px, 7vw, 32px); }
  /* Mobile redesign: a stack of five stats becomes a tower; show a tidy
     2-column grid instead, hide the divider lines (which don't translate
     to a grid), tighten the number/label so each cell stays compact, and
     let the last stat span the full row so the layout always balances. */
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    padding: 16px 18px;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .hero-stats .stat { padding: 4px 0; }
  .hero-stats .stat-num { font-size: 22px; }
  .hero-stats .stat-label { font-size: 11px; letter-spacing: 0.04em; }
  .hero-stats .stat-divider { display: none; }
  /* Last stat (5 stats with the dividers stripped → 5 grid items) takes
     the full row so we never get a lonely cell. */
  .hero-stats .stat:last-child { grid-column: 1 / -1; }
  .card { padding: 20px; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
  .hero-actions { flex-direction: column; align-items: center; }
  .auth-container {
    padding: 32px max(14px, env(safe-area-inset-left)) 40px max(14px, env(safe-area-inset-right));
  }
  .auth-box { padding: 28px 22px; }
}

@media (max-width: 480px) {
  .filter-grid { grid-template-columns: 1fr; }
  .save-row { flex-direction: column; }
  .save-row input { min-width: 0; }
}

/* ═══════════════════════════════════════════
   MUTUAL FUNDS
   ═══════════════════════════════════════════ */

/* ─── MF Listing Page ─── */
.mf-page { max-width: 100%; padding: 24px 32px 60px; }
.mf-page-header { margin-bottom: 32px; }
.mf-page-header h1 { font-size: 28px; font-weight: 800; color: var(--text-heading); margin-bottom: 4px; }
.mf-page-header p { color: var(--text-muted); font-size: 14px; }

.mf-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; }

.mf-sidebar { position: sticky; top: 80px; align-self: start; }
.mf-filter-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.mf-filter-card h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 16px; }
.mf-filter-group { margin-bottom: 16px; }
.mf-filter-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.mf-filter-group select,
.mf-filter-group input {
  width: 100%; padding: 7px 10px; font-size: 13px; font-family: var(--font);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
  color: var(--text); transition: var(--transition);
}
.mf-filter-group select:focus,
.mf-filter-group input:focus { border-color: var(--accent); outline: none; }
.mf-filter-actions { display: flex; gap: 8px; margin-top: 12px; }
.mf-filter-actions .btn { flex: 1; font-size: 13px; padding: 8px 0; }

.mf-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mf-results-header .mf-count { font-size: 13px; color: var(--text-muted); }
.mf-sort-wrap { display: flex; align-items: center; gap: 8px; }
.mf-sort-wrap label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.mf-sort-wrap select {
  padding: 5px 8px; font-size: 12px; font-family: var(--font);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xs);
  color: var(--text);
}

.mf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.mf-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none; color: var(--text);
  transition: var(--transition);
}
.mf-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.mf-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mf-card-name { font-size: 14px; font-weight: 700; color: var(--text-heading); line-height: 1.35; flex: 1; }
.mf-card-nav { font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.mf-card-meta { font-size: 11px; color: var(--text-dim); display: flex; gap: 8px; flex-wrap: wrap; }
.mf-card-meta span { background: var(--bg-card-alt); padding: 2px 8px; border-radius: 4px; }
.mf-card-returns { display: flex; gap: 6px; flex-wrap: wrap; }
.mf-ret-badge {
  font-size: 11px; font-weight: 600; padding: 3px 8px;
  border-radius: 4px; white-space: nowrap;
}
.mf-ret-badge.pos { background: rgba(22,163,74,.08); color: #16a34a; }
.mf-ret-badge.neg { background: rgba(220,38,38,.08); color: #dc2626; }
.mf-ret-badge.neutral { background: var(--bg-card-alt); color: var(--text-dim); }

.mf-empty { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 14px; }

.mf-discovery-shell {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
}
.mf-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  position: relative;
  z-index: 5;
}
.mf-hero-copy,
.mf-hero-panel,
.mf-results-panel {
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.mf-hero-copy {
  overflow: visible;
  border-radius: 18px;
  padding: 32px;
  background:
    linear-gradient(90deg, rgba(255,45,32,0.07) 0 1px, transparent 1px 82px),
    linear-gradient(0deg, rgba(15,23,42,0.035) 0 1px, transparent 1px 82px),
    linear-gradient(135deg, rgba(255,45,32,0.08), rgba(255,255,255,0) 42%),
    var(--bg-card);
  position: relative;
  z-index: 20;
}
[data-theme="dark"] .mf-hero-copy {
  background:
    linear-gradient(90deg, rgba(148,163,184,0.08) 0 1px, transparent 1px 82px),
    linear-gradient(0deg, rgba(148,163,184,0.07) 0 1px, transparent 1px 82px),
    linear-gradient(135deg, rgba(255,45,32,0.12), rgba(15,23,42,0) 44%),
    var(--bg-card);
}
.mf-kicker {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,45,32,0.1);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.mf-hero-copy h2 {
  max-width: 680px;
  margin: 0 0 10px;
  color: var(--text-heading);
  font-size: 46px;
  line-height: 1.04;
  letter-spacing: 0;
}
.mf-hero-copy p {
  max-width: 690px;
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.mf-hero-search {
  max-width: 760px;
  margin: 0;
}
.mf-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.mf-preset {
  box-sizing: border-box;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 86%, var(--bg) 14%);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.mf-preset:hover,
.mf-preset.active {
  border-color: var(--accent-border);
  color: var(--accent);
}
.mf-hero-panel {
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(17,24,39,0.035), transparent 42%),
    var(--bg-card);
}
.mf-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.mf-panel-head span {
  color: var(--text-heading);
  font-size: 14px;
  font-weight: 800;
}
.mf-panel-head small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.mf-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mf-stat {
  min-width: 0;
  min-height: 88px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--bg-card) 82%, var(--bg) 18%);
}
.mf-stat:nth-child(1) { border-left: 3px solid var(--green); }
.mf-stat:nth-child(2) { border-left: 3px solid #2563eb; }
.mf-stat:nth-child(3) { border-left: 3px solid #d97706; }
.mf-stat:nth-child(4) { border-left: 3px solid var(--accent); }
.mf-stat span {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mf-stat strong {
  display: block;
  color: var(--text-heading);
  font-size: 28px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mf-research-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
  position: relative;
  z-index: 1;
}
.mf-lane-card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 136px;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  overflow: hidden;
  color: inherit;
  text-align: left;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 90%, var(--bg) 10%), var(--bg-card));
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: var(--font);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.mf-lane-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--lane-color, var(--accent));
}
.mf-lane-card:nth-child(1) { --lane-color: var(--green); }
.mf-lane-card:nth-child(2) { --lane-color: #2563eb; }
.mf-lane-card:nth-child(3) { --lane-color: #d97706; }
.mf-lane-card:nth-child(4) { --lane-color: var(--accent); }
.mf-lane-card:hover,
.mf-lane-card.active {
  transform: translateY(-2px);
  border-color: var(--lane-color, var(--accent));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.mf-lane-label {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lane-color, var(--accent)) 10%, transparent);
  color: var(--lane-color, var(--accent));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.mf-lane-card strong {
  display: block;
  color: var(--text-heading);
  font-size: 18px;
  line-height: 1.2;
}
.mf-lane-card em {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}
.mf-workbench {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.mf-filter-panel {
  position: sticky;
  top: 118px;
  align-self: start;
}
.mf-filter-title {
  margin-bottom: 16px;
}
.mf-filter-title h3 {
  margin-bottom: 3px;
}
.mf-filter-title span {
  color: var(--text-muted);
  font-size: 12px;
}
.mf-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mf-filter-grid .mf-filter-group {
  margin-bottom: 16px;
}
.mf-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  margin: 2px 0 14px;
}
.mf-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  margin-top: 1px;
}
.mf-results-panel {
  border-radius: 18px;
  padding: 18px;
}
.mf-results-header h2 {
  margin: 0 0 4px;
  color: var(--text-heading);
  font-size: 18px;
  line-height: 1.2;
}
.alt-asset-shell .mf-hero-copy h2,
.nfo-shell .mf-hero-copy h2,
.amc-shell .mf-hero-copy h2 {
  max-width: 780px;
}
.amc-workbench {
  grid-template-columns: 1fr;
}
.amc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.amc-card {
  display: flex;
  min-width: 0;
  min-height: 92px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.amc-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.amc-card-name {
  color: var(--text-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}
.amc-card-count {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.amc-funds .mf-results-header .btn {
  flex: 0 0 auto;
}
.nfo-card-rich .mf-card-name {
  min-height: 38px;
}
.ipo-shell .mf-hero-copy h2,
.etf-shell .mf-hero-copy h2 {
  max-width: 790px;
}
.ipo-rich-list .ipo-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.ipo-rich-list .ipo-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

@media (max-width: 1100px) {
  .mf-research-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mf-workbench {
    grid-template-columns: 1fr;
  }
  .mf-filter-panel {
    position: static;
  }
}

@media (max-width: 900px) {
  .mf-landing-hero {
    grid-template-columns: 1fr;
  }
  .mf-hero-copy {
    padding: 24px;
  }
  .mf-hero-copy h2 {
    font-size: 34px;
  }
  .mf-results-header {
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .cm-page-title,
  .cm-page-title .page-intro {
    width: min(100%, 340px);
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .mf-discovery-shell,
  .mf-landing-hero,
  .mf-hero-copy,
  .mf-hero-panel,
  .mf-workbench,
  .mf-results-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .mf-research-lanes,
  .mf-stat-grid,
  .mf-filter-grid {
    grid-template-columns: 1fr;
  }
  .mf-hero-copy,
  .mf-hero-panel,
  .mf-results-panel {
    border-radius: 12px;
  }
  .mf-hero-copy {
    padding: 20px;
  }
  .mf-hero-copy h2 {
    width: min(100%, 326px);
    max-width: 100%;
    font-size: 30px;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  .mf-hero-copy p,
  .mf-hero-copy .discover-search {
    width: min(100%, 326px);
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .mf-hero-copy p {
    font-size: 14px;
    line-height: 1.55;
  }
  .mf-preset-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .mf-preset {
    width: 100%;
  }
  .mf-results-header {
    flex-direction: column;
  }
  .mf-sort-wrap {
    width: 100%;
    justify-content: space-between;
  }
  .mf-sort-wrap select {
    min-width: 160px;
  }
  .amc-grid {
    grid-template-columns: 1fr;
  }
  .amc-funds .mf-results-header .btn {
    width: 100%;
  }
}

/* ─── MF Detail Page ─── */
.mf-detail { max-width: 100%; padding: 24px 32px 60px; }
/* Breadcrumb bar (shared across stock & MF detail pages) */
.breadcrumb {
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  padding: 10px 40px; font-size: 13px; color: var(--text-muted);
  display: flex; align-items: center; gap: 0;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb .sep { margin: 0 8px; color: var(--text-dim); }

/* When cm-header.js promotes an in-page breadcrumb into the navbar, the
   breadcrumb element gets the .sub-nav-inner class (so it picks up sub-nav
   sizing/padding). Neutralize the standalone .breadcrumb chrome so it lines
   up flush with the rest of the secondary bar. */
.sub-navbar.breadcrumb-bar { /* outer: matches .sub-navbar styling */ }
.sub-nav-inner.breadcrumb {
  background: transparent;
  border-bottom: 0;
  padding: 0 40px; /* match .sub-nav-inner */
  height: 40px;
  gap: 0;
}
/* The promoted breadcrumb is a flex row of mixed inline pieces (back
   button, separators, links, current page span). The generic
   `.sub-nav-inner a` rule above adds `padding: 0 20px` to every <a>
   which inflates the gaps when reused for a breadcrumb. Neutralise
   that, and tighten the separators back to a compact 8px gap on each
   side. */
.sub-nav-inner.breadcrumb a {
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 0;
  display: inline;
  align-items: initial;
}
.sub-nav-inner.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.sub-nav-inner.breadcrumb .sep,
.sub-nav-inner.breadcrumb .bc-divider {
  margin: 0 8px;
  color: var(--text-dim);
}
@media (max-width: 768px) {
  .sub-nav-inner.breadcrumb {
    height: auto;
    min-height: 40px;
    /* Match the navbar / app-content 12px gutter on mobile so the
       Go Back chevron lines up with the brand logo and page content. */
    padding: 8px max(12px, env(safe-area-inset-left, 0px));
  }
}

.bc-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  color: var(--text-muted); padding: 2px 4px 2px 0;
  border-radius: 6px; transition: color 0.15s, background 0.15s;
}
.bc-back svg { width: 16px; height: 16px; flex-shrink: 0; }
.bc-back:hover { color: var(--accent); }
.bc-divider {
  width: 1px; height: 16px; background: var(--border);
  margin: 0 14px; flex-shrink: 0;
}

/* ─── Page Layout: Main + Sidebar (shared) ─── */
.page-layout { display: flex; gap: 28px; padding: 24px 40px; align-items: flex-start; }
.main-col { flex: 1; min-width: 0; }
.side-col { width: 220px; flex-shrink: 0; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }

/* ─── Actions Card ─── */
.actions-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.action-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 9px 12px; font-size: 13px; font-weight: 600; font-family: var(--font);
  border-radius: var(--radius-xs); cursor: pointer; transition: var(--transition); border: 1px solid var(--border);
}
.action-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.action-btn.btn-follow { background: var(--accent); color: #fff; border-color: var(--accent); }
.action-btn.btn-follow:hover:not(:disabled) { opacity: 0.9; }
.action-btn.btn-follow.following { background: var(--bg); color: var(--accent); border-color: var(--accent); }
.action-btn.btn-portfolio { background: var(--bg); color: var(--text); }
.action-btn.btn-portfolio:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.action-btn.btn-portfolio.added { background: rgba(22,163,74,.06); color: #16a34a; border-color: #16a34a; }
.action-btn.btn-share { background: var(--bg); color: var(--text-muted); }
.action-btn.btn-share:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.action-btn.btn-alert { background: var(--bg); color: var(--text-muted); }
.action-btn.btn-alert:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.action-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ─── Portfolio Popover ─── */
.portfolio-popover-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1500;
  align-items: center; justify-content: center;
  /* Establish a top-level stacking context that the TradingView chart
     (which uses canvases with position:absolute inside .chart-container)
     cannot punch through. */
  isolation: isolate;
}
.portfolio-popover-overlay.open { display: flex; }
.portfolio-popover {
  background-color: var(--bg-card);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2); width: 420px; max-width: 92vw;
  padding: 28px; animation: fadeUp 0.2s ease;
  position: relative;
  z-index: 1;
  /* Defence in depth: opaque even if a parent stacking context is
     bypassed for some reason. */
  isolation: isolate;
}
.portfolio-popover .pp-form { background: var(--bg-card); }
.pp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.pp-header h3 { font-size: 17px; font-weight: 700; color: var(--text-heading); }
.pp-close { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 4px; border-radius: 6px; }
.pp-close:hover { background: var(--bg-hover); color: var(--text); }
.pp-stock-info { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg); border-radius: var(--radius-xs); margin-bottom: 18px; }
.pp-stock-sym { font-weight: 800; font-size: 14px; color: var(--text-heading); }
.pp-stock-price { font-size: 13px; color: var(--text-muted); margin-left: auto; }
.pp-form { display: flex; flex-direction: column; gap: 14px; }
.pp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pp-field label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.pp-field input, .pp-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px; font-size: 14px; font-family: var(--font);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--bg-input); color: var(--text);
}
.pp-field input:focus, .pp-field select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(255,45,32,0.08); }
.pp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp-total { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-heading); font-weight: 600; }
.pp-actions { display: flex; gap: 10px; margin-top: 6px; }
.pp-actions .btn { flex: 1; justify-content: center; }

/* ─── Sidebar Cards ─── */
.side-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
.side-card-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 12px 14px 8px; }
.side-card ul { list-style: none; margin: 0; padding: 0; }
.side-card li a { display: block; padding: 7px 14px; font-size: 12px; color: var(--text); text-decoration: none; border-left: 3px solid transparent; transition: var(--transition); }
.side-card li a:hover { color: var(--accent); background: var(--bg-card-alt, rgba(0,0,0,0.02)); }
.side-card li a.active { color: var(--accent); font-weight: 600; border-left-color: var(--accent); background: var(--bg-card-alt, rgba(0,0,0,0.02)); }
.side-card .side-link { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 12px; color: var(--text-muted); text-decoration: none; transition: var(--transition); }
.side-card .side-link:hover { color: var(--accent); }
.side-card .side-link .arrow { font-size: 10px; }

/* Stack the page layout (main column + sticky sidebar) into a single
   column whenever there isn't enough room for both the 220px sidebar
   AND the main content. We raised this breakpoint from 768 → 1024 to
   avoid an awkward middle range where the main column collapses
   enough that the inner two-column grid (chart | returns | info)
   overflows beneath the still-side-by-side sticky sidebar — see
   mf-detail.html. */
@media (max-width: 1024px) {
  .page-layout {
    flex-direction: column;
    padding: 16px max(12px, env(safe-area-inset-left, 0px)) 16px max(12px, env(safe-area-inset-right, 0px));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .main-col, .side-col {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Any element inside the main column that has intrinsic width
     (canvases, embeds, wide tables) must be allowed to shrink. */
  .main-col > * { max-width: 100%; }
  .main-col img,
  .main-col canvas,
  .main-col iframe { max-width: 100%; height: auto; }
  .side-col { width: 100%; position: static; max-height: none; }
  .side-card ul { display: flex; flex-wrap: wrap; }
  .side-card li a { padding: 6px 12px; border-left: none; border-bottom: 2px solid transparent; }
  .side-card li a.active { border-left: none; border-bottom-color: var(--accent); }
}

.mf-detail-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 24px;
}
.mf-detail-header h1 { font-size: 22px; font-weight: 800; color: var(--text-heading); margin-bottom: 8px; line-height: 1.35; }
.mf-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mf-badge {
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 100px; background: var(--bg-card-alt); color: var(--text-muted);
}
.mf-badge.accent { background: var(--accent-soft); color: var(--accent); }

.mf-nav-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.mf-nav-big { font-size: 32px; font-weight: 800; color: var(--text-heading); }
.mf-nav-change { font-size: 14px; font-weight: 600; }
.mf-nav-change.pos { color: #16a34a; }
.mf-nav-change.neg { color: #dc2626; }
.mf-nav-date { font-size: 12px; color: var(--text-dim); }

/* Single-column stack: NAV History, then Returns, then Fund Information.
   Returns is always wider than tall and reads better full-width than
   squeezed into a half-column. */
.mf-detail-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }

/* NAV Chart */
.mf-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.mf-chart-card h2 { font-size: 16px; font-weight: 700; color: var(--text-heading); margin-bottom: 12px; }
.mf-chart-filters { display: flex; gap: 6px; margin-bottom: 16px; }
.mf-chart-filters button {
  padding: 5px 12px; font-size: 12px; font-weight: 600; font-family: var(--font);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--bg); color: var(--text-muted); cursor: pointer;
  transition: var(--transition);
}
.mf-chart-filters button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.mf-chart-wrap { position: relative; width: 100%; height: 280px; }
.mf-chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* Returns Grid */
.mf-returns-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.mf-returns-card h2 { font-size: 16px; font-weight: 700; color: var(--text-heading); margin-bottom: 16px; }
.mf-returns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.mf-return-item {
  text-align: center; padding: 16px 8px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.mf-return-item .label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; }
.mf-return-item .value { font-size: 20px; font-weight: 800; }
.mf-return-item .value.pos { color: #16a34a; }
.mf-return-item .value.neg { color: #dc2626; }
.mf-return-item .value.na { color: var(--text-dim); }
.mf-return-item .vs-cat { font-size: 10px; font-weight: 700; margin-top: 4px; padding: 2px 6px; border-radius: 999px; display: inline-block; }
.mf-return-item .vs-cat.pos { background: rgba(22,163,74,0.12); color: #16a34a; }
.mf-return-item .vs-cat.neg { background: rgba(220,38,38,0.12); color: #dc2626; }
.cat-stats-meta { grid-column: 1 / -1; padding-top: 14px; margin-top: 4px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-muted); text-align: center; }
.cat-stats-meta strong { color: var(--text-heading); }

/* AMFI risk-o-meter badges. Mapping from label string to colour. */
.mf-badge.risk-low { background: rgba(22,163,74,0.15); color: #16a34a; }
.mf-badge.risk-moderately-low { background: rgba(132,204,22,0.15); color: #65a30d; }
.mf-badge.risk-moderate { background: rgba(234,179,8,0.18); color: #b45309; }
.mf-badge.risk-moderately-high { background: rgba(249,115,22,0.18); color: #c2410c; }
.mf-badge.risk-high { background: rgba(220,38,38,0.15); color: #dc2626; }
.mf-badge.risk-very-high { background: rgba(159,18,57,0.18); color: #9f1239; font-weight: 800; }

/* Fund Info */
.mf-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  grid-column: 1 / -1;
}
.mf-info-card h2 { font-size: 16px; font-weight: 700; color: var(--text-heading); margin-bottom: 16px; }
.mf-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.mf-info-item .label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; margin-bottom: 2px; }
.mf-info-item .val { font-size: 14px; font-weight: 600; color: var(--text-heading); word-break: break-all; }

/* ─── MF Analytics & Holdings (mf-detail.html) ───
   Computed values: see app/Services/MfAnalytics.php (analytics) and
   app/Services/MfHoldings/* (holdings). Sections degrade gracefully when
   the underlying data hasn't been computed for a fund yet. */
.mf-analytics-card, .mf-holdings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.mf-analytics-card h2, .mf-holdings-card h2 { font-size: 16px; font-weight: 700; color: var(--text-heading); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mf-analytics-card h2 .subtle, .mf-holdings-card h2 .subtle { font-size: 11px; font-weight: 500; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
.mf-section-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; background: var(--bg); border: 1px dashed var(--border); border-radius: var(--radius-sm); }

.mfa-subhead { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin: 20px 0 10px; }
.mfa-subhead:first-child { margin-top: 0; }

/* Stat tiles row: rolling 3Y/5Y, Sharpe, Max DD, SIP XIRR etc. */
.mfa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.mfa-stat { padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mfa-stat .label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; }
.mfa-stat .val { font-size: 20px; font-weight: 800; color: var(--text-heading); }
.mfa-stat .val.pos { color: #16a34a; }
.mfa-stat .val.neg { color: #dc2626; }
.mfa-stat .hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* Calendar-year returns bar chart (inline SVG). */
.mfa-cal-chart { width: 100%; height: 180px; }
.mfa-cal-bar { transition: opacity 0.15s; cursor: default; }
.mfa-cal-bar:hover { opacity: 0.8; }
.mfa-cal-label { font-size: 10px; fill: var(--text-dim); }
.mfa-cal-value { font-size: 10px; font-weight: 700; }

/* Rolling-returns range bars (min — avg — max) */
.mfa-range-row { display: grid; grid-template-columns: 60px 1fr 80px; gap: 12px; align-items: center; margin: 10px 0; }
.mfa-range-row .label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.mfa-range-row .bar { position: relative; height: 26px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs); overflow: hidden; }
.mfa-range-row .bar-fill { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(220,38,38,0.25), rgba(22,163,74,0.45)); }
.mfa-range-row .bar-marker { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--accent); border-radius: 1px; }
.mfa-range-row .bar-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text-dim); opacity: 0.4; }
.mfa-range-row .summary { text-align: right; font-size: 12px; color: var(--text-muted); }
.mfa-range-row .summary strong { color: var(--text-heading); font-size: 13px; }

/* Benchmark comparison row */
.mfa-bench { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mfa-bench .bench-item { text-align: center; }
.mfa-bench .bench-item .label { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
.mfa-bench .bench-item .val { font-size: 15px; font-weight: 700; color: var(--text-heading); }
.mfa-bench-head { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.mfa-bench-head strong { color: var(--text-heading); }

/* ─── Holdings ─── */
.mfh-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.mfh-meta strong { color: var(--text-heading); }
.mfh-alloc-bar { display: flex; height: 32px; width: 100%; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); margin-bottom: 10px; }
.mfh-alloc-seg { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; min-width: 24px; }
.mfh-alloc-seg.equity { background: #2563eb; }
.mfh-alloc-seg.debt { background: #f59e0b; }
.mfh-alloc-seg.cash { background: #6b7280; }
.mfh-alloc-seg.other { background: #a855f7; }
.mfh-alloc-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
.mfh-alloc-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.mfh-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 768px) { .mfh-split { grid-template-columns: 1fr; } }

.mfh-sector-list { list-style: none; padding: 0; margin: 0; }
.mfh-sector-list li { display: grid; grid-template-columns: 1fr 60px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.mfh-sector-list .sec-name { color: var(--text-heading); font-weight: 600; }
.mfh-sector-list .sec-pct { text-align: right; color: var(--text-muted); font-weight: 700; font-size: 12px; }
.mfh-sector-bar { grid-column: 1 / -1; height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.mfh-sector-bar > span { display: block; height: 100%; background: var(--accent); }

/* Top holdings table */
.mfh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mfh-table thead th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.mfh-table tbody td { padding: 10px; border-bottom: 1px solid var(--border); color: var(--text-heading); }
.mfh-table tbody tr:last-child td { border-bottom: none; }
.mfh-table .name { font-weight: 600; }
.mfh-table .name a { color: var(--accent); text-decoration: none; }
.mfh-table .name a:hover { text-decoration: underline; }
.mfh-table .sector { font-size: 12px; color: var(--text-muted); }
.mfh-table .pct-cell { width: 180px; }
.mfh-pct-wrap { display: flex; align-items: center; gap: 8px; }
.mfh-pct-bar { flex: 1; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; min-width: 60px; }
.mfh-pct-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #60a5fa); }
.mfh-pct-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-heading); min-width: 52px; text-align: right; }
.mfh-show-all { margin-top: 12px; padding: 8px 14px; font-size: 12px; font-weight: 600; background: var(--bg); border: 1px solid var(--border); color: var(--text-heading); border-radius: var(--radius-xs); cursor: pointer; }
.mfh-show-all:hover { background: var(--border); }

/* ─── Mobile responsive overrides for MF detail page ───
   Two breakpoints:
   - 640px: tablets / large phones in portrait. Tighten tiles, drop
     less-important table columns, restructure range bars.
   - 480px: small phones. Stack tiles 2-up, hide secondary chart
     decorations, allow more aggressive text-wrap. */
@media (max-width: 640px) {
  /* Card padding: 24px reads as fat on small screens. */
  .mf-analytics-card, .mf-holdings-card { padding: 16px; }
  .mf-analytics-card h2, .mf-holdings-card h2 { font-size: 15px; gap: 6px; }

  /* Stat tiles: smaller minmax + tighter padding. */
  .mfa-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .mfa-stat { padding: 10px; }
  .mfa-stat .val { font-size: 17px; }
  .mfa-stat .hint { font-size: 10px; }

  /* Range bars: the right-side "min → max" summary becomes a single
     line below the bar instead of competing for grid width. The 80px
     summary column was forcing the bar into <100px on narrow screens. */
  .mfa-range-row {
    grid-template-columns: 40px 1fr;
    grid-template-areas: "label bar" "summary summary";
    row-gap: 4px;
  }
  .mfa-range-row > .label { grid-area: label; }
  .mfa-range-row > .bar { grid-area: bar; height: 22px; }
  .mfa-range-row > .summary { grid-area: summary; text-align: left; padding-left: 48px; }
  .mfa-range-row .summary br { display: none; }
  .mfa-range-row .summary span { font-size: 11px; margin-left: 6px; }

  /* Benchmark tiles: 2 per row instead of trying to fit 5. */
  .mfa-bench { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; }
  .mfa-bench .bench-item .val { font-size: 14px; }

  /* Holdings table: drop sector column (it's repeated in the sector
     list right above), shrink pct column, allow name to wrap. */
  .mfh-table { font-size: 12px; }
  .mfh-table thead th { padding: 6px 6px; font-size: 10px; }
  .mfh-table tbody td { padding: 8px 6px; }
  .mfh-table .name { word-break: break-word; }
  .mfh-table .sector { display: none; }
  .mfh-table thead th:nth-child(2),
  .mfh-table tbody td:nth-child(2) { display: none; }
  .mfh-table .pct-cell { width: 110px; }
  .mfh-pct-bar { min-width: 30px; }
  .mfh-pct-num { min-width: 44px; font-size: 12px; }

  /* Holdings meta: stack stats vertically. */
  .mfh-meta { gap: 8px; font-size: 11px; flex-direction: column; }
  .mfh-alloc-bar { height: 26px; }
  .mfh-alloc-legend { gap: 10px; font-size: 11px; }
  .mfh-alloc-seg { font-size: 10px; }

  /* Calendar-year bar chart: shorter on mobile. SVG viewBox handles
     the rest via preserveAspectRatio. */
  .mfa-cal-chart { height: 150px; }

  /* Returns tiles: smaller min so 2 fit comfortably on 360px. */
  .mf-returns-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .mf-return-item { padding: 10px 6px; }
  .mf-return-item .value { font-size: 16px; }
  .mf-return-item .vs-cat { font-size: 9px; padding: 1px 5px; }
}

@media (max-width: 480px) {
  /* Stat tiles: force exactly 2 columns — auto-fit can produce 3 cramped
     ones on borderline widths and the numbers stop being readable. */
  .mfa-stats { grid-template-columns: 1fr 1fr; }
  .mfa-stat .val { font-size: 15px; }

  /* Returns: 2 columns is more readable than 3 at this width. */
  .mf-returns-grid { grid-template-columns: 1fr 1fr; }

  /* Subhead and section headings: tighten further. */
  .mfa-subhead { font-size: 11px; margin: 16px 0 8px; }

  /* Hide value labels on calendar bars below 480px — they overlap each
     other when the bar width drops below ~30px. Year labels and the
     tooltip on tap still convey the data. */
  .mfa-cal-value { display: none; }
}

/* ─── Landing: MF Section ─── */
.mf-landing-section {
  padding: 80px 32px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.mf-landing-section .section-header { text-align: center; margin-bottom: 48px; }
.mf-landing-section .section-header h2 { font-size: 32px; font-weight: 800; color: var(--text-heading); margin-bottom: 12px; }
.mf-landing-section .section-header p { font-size: 16px; color: var(--text-muted); max-width: 540px; margin: 0 auto; }

/* MF Preview Cards (landing) */
.mf-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.mpv-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: var(--transition);
}
.mpv-card:hover { box-shadow: var(--shadow-md); }
.mpv-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.mpv-cat-name { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-heading); }
.mpv-cat-link { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.mpv-cat-link:hover { text-decoration: underline; }
.mpv-card-body { display: flex; flex-direction: column; }
.mpv-fund {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  text-decoration: none; color: inherit; transition: var(--transition);
  border-bottom: 1px solid var(--border);
}
.mpv-fund:last-child { border-bottom: none; }
.mpv-fund:hover { background: var(--bg-card-alt); }
.mpv-rank {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--text-dim);
  background: var(--bg-card-alt); border: 1px solid var(--border);
}
.mpv-fund-info { flex: 1; min-width: 0; }
.mpv-fund-name { font-size: 13px; font-weight: 700; color: var(--text-heading); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpv-fund-house { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.mpv-fund-ret { text-align: right; flex-shrink: 0; }
.mpv-ret-val { font-size: 15px; font-weight: 800; }
.mpv-ret-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.mpv-fund-ret.pos .mpv-ret-val { color: #16a34a; }
.mpv-fund-ret.neg .mpv-ret-val { color: #dc2626; }

.mf-landing-actions { text-align: center; margin-top: 36px; }

/* ─── Landing: MF Stats in Sources ─── */
.mf-stat-row { display: flex; gap: 16px; justify-content: center; margin-top: 24px; }

/* ─── Search MF Results ─── */
.search-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); padding: 6px 14px 4px; background: var(--bg-card-alt);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 900px) {
  .mf-layout { grid-template-columns: 1fr; }
  .mf-sidebar { position: static; }
  .mf-preview { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .mf-page, .mf-detail { padding: 70px 16px 40px; }
  .mf-grid { grid-template-columns: 1fr; }
  .mf-preview { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   Footer – sticky bottom bar with live index ticker
   ═══════════════════════════════════════════════════════════════════

   Layout: the footer is `position: fixed` to the bottom of the
   viewport. The slim bar is always visible; the columnar body sits
   *inside* the same footer and slides up from above the bar when
   expanded. Page bodies reserve space for the bar height via
   padding-bottom on body so content never hides under the bar.
*/

:root {
  --ft-bar-height: 56px;
}

/* Reserve viewport space so the fixed footer never overlays content.
   Applied to auth pages too now that login/signup/etc. carry the same
   sticky footer (the .auth-container flex layout will simply center
   inside the smaller available area, which still looks right). */
body { padding-bottom: var(--ft-bar-height); }

.site-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  background: #111111; color: #a3a3a3;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
}
[data-theme="dark"] .site-footer { background: #0a0a0a; }

/* ── Sticky bar ─────────────────────────────────────────────────────── */
.ft-toggle-bar {
  display: flex; align-items: center; gap: 16px;
  height: var(--ft-bar-height);
  padding: 0 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: inherit;
  order: 2; /* keep the bar at the bottom even when body is above */
}
.ft-brand {
  flex-shrink: 0;
}
.ft-toggle-btn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; width: 32px; height: 32px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease;
  flex-shrink: 0;
}
.ft-toggle-btn:hover { background: rgba(255,255,255,0.12); }
.ft-toggle-btn:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
.ft-chevron {
  width: 16px; height: 16px; color: #a3a3a3;
  transition: transform 0.3s ease;
}
/* When the body is collapsed (default), chevron points up so users
   know clicking will expand. When expanded the chevron points down. */
.ft-toggle-btn.collapsed .ft-chevron { transform: rotate(180deg); }

/* ── Marquee ticker ─────────────────────────────────────────────────── */
.ft-ticker {
  flex: 1 1 auto; min-width: 0;
}
.ft-ticker-viewport {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.ft-ticker-track {
  display: inline-flex; align-items: center; gap: 36px;
  white-space: nowrap; will-change: transform;
}
.ft-ticker-track.animating {
  animation: ft-ticker-scroll 60s linear infinite;
}
.ft-ticker-track.paused,
.ft-ticker:hover .ft-ticker-track.animating { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ft-ticker-track.animating { animation: none; }
  .ft-ticker-viewport { overflow-x: auto; }
}
@keyframes ft-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.ft-ticker-placeholder {
  font-size: 13px; color: #737373; font-style: italic; padding: 0 4px;
}
.ft-tk-item {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 13px; color: #d4d4d4; font-variant-numeric: tabular-nums;
  padding: 0 4px;
}
.ft-tk-name { font-weight: 700; color: #fafafa; font-size: 12px;
  letter-spacing: 0.02em; }
.ft-tk-price { font-weight: 600; }
.ft-tk-arrow { font-size: 9px; line-height: 1; }
.ft-tk-change, .ft-tk-pct { font-size: 12px; font-weight: 500; }
.ft-tk-item.up    .ft-tk-arrow,
.ft-tk-item.up    .ft-tk-change,
.ft-tk-item.up    .ft-tk-pct { color: #22c55e; }
.ft-tk-item.down  .ft-tk-arrow,
.ft-tk-item.down  .ft-tk-change,
.ft-tk-item.down  .ft-tk-pct { color: #ef4444; }
.ft-tk-item.flat  .ft-tk-arrow,
.ft-tk-item.flat  .ft-tk-change,
.ft-tk-item.flat  .ft-tk-pct { color: #a3a3a3; }

/* ── Expanding body ─────────────────────────────────────────────────── */
.ft-body {
  order: 1;
  max-height: 480px; overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
  opacity: 1; padding: 36px 32px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: inherit;
}
.ft-body.collapsed {
  max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0;
  border-bottom-color: transparent;
}

.ft-cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  max-width: 1200px; margin: 0 auto;
}
.ft-col h4 {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #737373; margin-bottom: 14px;
}
.ft-col a {
  display: block; font-size: 13px; color: #a3a3a3;
  text-decoration: none; padding: 3px 0; transition: color 0.15s;
}
.ft-col a:hover { color: #fff; }

.ft-bottom {
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.ft-bottom p { font-size: 12px; color: #525252; margin: 0; }

@media (max-width: 900px) {
  :root { --ft-bar-height: 52px; }
  .ft-toggle-bar { padding: 0 16px; gap: 12px; }
  .ft-tk-item { font-size: 12px; gap: 6px; }
  .ft-tk-name { font-size: 11px; }
  .ft-ticker-track { gap: 28px; }
  .ft-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ft-body { padding: 26px 20px 22px; }
}
@media (max-width: 560px) {
  .ft-brand { display: none !important; }
  .ft-ticker-track.animating { animation-duration: 45s; }
  .ft-cols { grid-template-columns: 1fr; gap: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Agent Signup Page
   ═══════════════════════════════════════════════════════════════════ */

.agent-badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   Invite Page
   ═══════════════════════════════════════════════════════════════════ */

.invite-header { text-align: center; margin-bottom: 24px; }
.input-readonly {
  background: var(--bg-card-alt) !important;
  color: var(--text-muted);
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════
   Agent Dashboard
   ═══════════════════════════════════════════════════════════════════ */

.agent-dash { padding: 24px 32px 40px; max-width: 100%; }
.agent-welcome {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-right: 8px;
}

/* Stats Bar */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.stat-card.accent { border-color: var(--accent-border); background: var(--accent-soft); }
.stat-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-val { font-size: 24px; font-weight: 800; margin-top: 6px; color: var(--text-heading); }
.stat-card.accent .stat-val { color: var(--accent); }

/* Tabs */
.dash-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.dash-tab {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.dash-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.dash-tab:hover:not(.active) { color: var(--text); }

/* Panel */
.dash-panel { min-height: 300px; }
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.panel-header h2 { font-size: 20px; font-weight: 700; }
.panel-header h3 { font-size: 18px; font-weight: 700; }
.empty-msg { text-align: center; padding: 40px; color: var(--text-muted); }

/* Table */
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dash-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.dash-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.dash-table tr:hover td { background: var(--hover-row); }
.dash-table .cust-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.dash-table .cust-link:hover { text-decoration: underline; }
.action-cell { white-space: nowrap; }
.txn-scheme { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.badge-green { background: rgba(22,163,74,0.1); color: #16a34a; }
.badge-yellow { background: rgba(245,158,11,0.1); color: #d97706; }
.badge-gray { background: rgba(100,116,139,0.1); color: #64748b; }
.badge-red { background: rgba(220,38,38,0.1); color: #dc2626; }
.badge-blue { background: rgba(37,99,235,0.1); color: #2563eb; }

/* Icon Buttons */
.btn-icon {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  transition: var(--transition);
  margin-left: 4px;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); }
.btn-icon-danger:hover { border-color: var(--red); color: var(--red); }

/* Portfolio Cards */
.portfolio-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.pf-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pf-top h4 { font-size: 16px; }
.pf-link { color: var(--accent); text-decoration: none; font-weight: 700; }
.pf-link:hover { text-decoration: underline; }
.pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.pf-stats > div { display: flex; flex-direction: column; gap: 2px; }
.pf-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; letter-spacing: 0.03em; }
.pf-notes { margin-top: 10px; font-size: 13px; color: var(--text-muted); }

/* Holdings */
.holdings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.holding-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.holding-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.holding-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.holding-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; font-size: 13px; }
.holding-stats > div { display: flex; flex-direction: column; }
.holding-stats span:first-child { font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.text-green { color: var(--green); }
.text-red { color: var(--red); }

/* Summary Bar */
.summary-bar {
  display: flex;
  gap: 32px;
  padding: 16px 20px;
  background: var(--bg-card-alt);
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 16px;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-box {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h3 { font-size: 18px; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Invite Link */
.invite-link-box { display: flex; gap: 8px; margin-bottom: 8px; }
.invite-link-box input { flex: 1; }
.invite-expires { font-size: 12px; color: var(--text-muted); }

/* MF Search in Modal */
.mf-search-results {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  margin-top: 4px;
}
.mf-search-results:empty { border: none; }
.mf-result-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}
.mf-result-item:hover { background: var(--accent-soft); }
.mf-selected {
  padding: 8px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 8px;
}

/* Analytics */
.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.analytics-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.analytics-card.full-width { grid-column: 1 / -1; }
.analytics-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.analytics-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.analytics-row:last-child { border-bottom: none; }
.analytics-row .rank { color: var(--text-muted); font-weight: 700; width: 32px; }
.analytics-row .scheme-name { flex: 1; margin: 0 12px; }
.analytics-row .scheme-val { font-weight: 700; white-space: nowrap; }

@media (max-width: 900px) {
  .analytics-grid { grid-template-columns: 1fr; }
  .agent-dash { padding: 70px 16px 32px; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dash-stats { grid-template-columns: 1fr; }
  .holdings-grid { grid-template-columns: 1fr; }
  .summary-bar { flex-direction: column; gap: 8px; }
  .dash-table { font-size: 12px; }
  .dash-table th, .dash-table td { padding: 6px 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   App Sidebar – Left Navigation for post-login pages
   ═══════════════════════════════════════════════════════════════════ */

/* Top-bar active link */
.nav-links-auth a.active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-soft);
}

/* ── cm-refresh.js public "Refresh latest" widget ─────────────────── */
.cm-refresh {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font); font-size: 13px;
}
/* Hint / “Last updated” on the left, primary refresh control on the right */
.cm-refresh.cm-refresh--hint-first {
  flex-direction: row-reverse;
}
.cm-refresh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); font: inherit; font-weight: 600;
  cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cm-refresh-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cm-refresh-btn:disabled { opacity: 0.7; cursor: progress; }
.cm-refresh-icon { width: 14px; height: 14px; }
.cm-refresh-btn:disabled .cm-refresh-icon { animation: cm-refresh-spin 0.9s linear infinite; }
@keyframes cm-refresh-spin { to { transform: rotate(360deg); } }
.cm-refresh-hint { color: var(--text-muted); font-size: 12px; }
.cm-refresh-err { color: #b91c1c; }
[data-theme="dark"] .cm-refresh-err { color: #f87171; }

.cm-page-head,
.stocks-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.cm-page-title,
.stocks-page-title {
  min-width: 0;
  max-width: 760px;
}

.cm-page-title h1,
.stocks-page-title h1 {
  margin-bottom: 8px;
}

.cm-page-title .page-intro,
.stocks-page-title .page-intro {
  margin-bottom: 0;
}

.cm-page-head .cm-refresh,
.stocks-page-head .cm-refresh {
  flex: 0 0 auto;
  margin-left: auto;
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
  text-align: right;
}

.cm-page-head .cm-refresh-hint,
.stocks-page-head .cm-refresh-hint {
  display: block;
  max-width: 320px;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .app-content {
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .cm-page-head,
  .stocks-page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 22px;
  }

  .cm-page-title,
  .stocks-page-title {
    max-width: none;
    width: 100%;
  }

  .cm-page-title .page-intro,
  .stocks-page-title .page-intro {
    max-width: none;
    overflow-wrap: anywhere;
  }

  .cm-page-head .cm-refresh,
  .stocks-page-head .cm-refresh {
    width: 100%;
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .stocks-landing-hero {
    grid-template-columns: 1fr;
  }
}

/* Dashboard page */
.app-content { padding: 24px 32px; min-height: 100vh; }
.app-content h1 { font-size: 24px; font-weight: 800; margin-top: 0; margin-bottom: 8px; }
.app-content .page-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; }

/* ═══ Dashboard — Bento Grid ═══ */
.dash-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.dash-header h1 { margin-bottom: 2px; }
.dash-date { font-size: 12px; color: var(--text-dim); white-space: nowrap; font-weight: 500; margin-left: auto; }

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Rows grow with content but are also driven by an explicit --bento-rows
     custom property so users can stretch a card vertically. Cards keep
     their natural height when --bento-rows is 1 (the default). */
  grid-auto-rows: minmax(0, auto);
  gap: 16px;
}
.bento-8 { grid-column: span 8; }
.bento-6 { grid-column: span 6; }
.bento-4 { grid-column: span 4; }
.bento-3 { grid-column: span 3; }
.bento-12 { grid-column: span 12; }
/* Vertical span: keep the natural row height as the floor, but force a
   min-height so the card visibly grows when the user drags the bottom
   handle. 1 = natural, 2 = "tall", 3/4 = "extra tall". */
.b-card { --bento-rows: 1; }
.b-card[data-rows="2"] { --bento-rows: 2; min-height: 460px; }
.b-card[data-rows="3"] { --bento-rows: 3; min-height: 620px; }
.b-card[data-rows="4"] { --bento-rows: 4; min-height: 780px; }

.b-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
  position: relative; overflow: visible;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.b-card:hover { border-color: var(--accent-border); box-shadow: 0 8px 32px rgba(0,0,0,0.06); }
[data-theme="dark"] .b-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.25); }

/* Lock body during drag/resize */
.bg-body-dragging { -webkit-user-select: none; user-select: none; cursor: grabbing; }

/* Drag handle */
.bg-drag-handle { cursor: grab; -webkit-user-select: none; user-select: none; }
.bg-body-dragging .bg-drag-handle { cursor: grabbing; }

/* ── Resize handles ──────────────────────────────────────────────
   We expose three handles per card, each invisible by default and
   subtly hinted on card hover. Active drag flips them to the accent
   colour. The earlier full-height red side bar was visually noisy;
   small neutral grabbers feel more like a polished design tool.
*/
.bg-resize-handle {
  position: absolute;
  z-index: 5;
  background: transparent;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease, transform 140ms ease;
}

/* East edge — width-only resize. A thin, centered pill sitting flush
   against the right edge. Hidden until card hover, never paints a
   full-height stripe. */
.bg-resize-e {
  top: 50%;
  right: -3px;
  transform: translateY(-50%);
  width: 5px;
  height: 44px;
  border-radius: 3px;
  cursor: ew-resize;
  background: var(--text-muted);
}

/* South edge — height-only resize, mirrored design at the bottom. */
.bg-resize-s {
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
  width: 44px;
  height: 5px;
  border-radius: 3px;
  cursor: ns-resize;
  background: var(--text-muted);
}

/* South-east corner — diagonal grabber for both dimensions. Drawn as
   two short diagonal lines (the universal "drag-to-resize" hint). */
.bg-resize-se {
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 6px, var(--text-muted) 6px 8px, transparent 8px 100%),
    linear-gradient(135deg, transparent 0 10px, var(--text-muted) 10px 12px, transparent 12px 100%);
}

.b-card:hover .bg-resize-handle { opacity: 0.45; }
.bg-resize-handle:hover { opacity: 0.85 !important; }
.bg-resize-handle:active,
.bg-resizing .bg-resize-handle { opacity: 1 !important; background: var(--accent); }
/* Corner grabber keeps its diagonal-line look even when active — repaint
   with the accent colour stops. */
.bg-resize-se:active,
.bg-resizing .bg-resize-se {
  background:
    linear-gradient(135deg, transparent 0 6px, var(--accent) 6px 8px, transparent 8px 100%),
    linear-gradient(135deg, transparent 0 10px, var(--accent) 10px 12px, transparent 12px 100%) !important;
}

/* Placeholder left behind while dragging */
.bg-dragging {
  opacity: 0 !important;
  pointer-events: none;
}

/* Floating ghost */
.bg-ghost {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  opacity: 0.85;
  will-change: transform;
}
.bg-ghost-active {
  box-shadow: 0 24px 48px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
  opacity: 0.92;
}
[data-theme="dark"] .bg-ghost-active {
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}

/* Card while resizing — a soft outline + lift, no red glow */
.bg-resizing {
  z-index: 10;
  outline: 1.5px dashed var(--accent);
  outline-offset: 2px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .bg-resizing { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }

/* Reset button */
.bg-reset-btn {
  background: none; border: 1px solid var(--border);
  border-radius: 8px; width: 32px; height: 32px;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.bg-reset-btn:hover { color: var(--accent); border-color: var(--accent); }
.bg-reset-btn svg { width: 16px; height: 16px; }

/* "Add card" dropdown — sits alongside the reset button. */
.bg-toolbar { display: inline-flex; gap: 8px; align-items: center; }
.bg-add-wrap { position: relative; }
.bg-add-btn {
  background: none; border: 1px solid var(--border);
  border-radius: 8px; height: 32px; padding: 0 12px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-family: var(--font, inherit);
  font-size: 13px; font-weight: 600;
  transition: color 140ms ease, border-color 140ms ease;
}
.bg-add-btn:hover { color: var(--accent); border-color: var(--accent); }
.bg-add-btn svg { width: 14px; height: 14px; }
.bg-add-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 240px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
  padding: 6px; z-index: 100;
  display: none;
}
.bg-add-menu.is-open { display: block; }
[data-theme="dark"] .bg-add-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); }
.bg-add-menu-empty {
  padding: 12px 14px; font-size: 13px;
  color: var(--text-muted); font-style: italic;
}
.bg-add-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; border: 0; background: none;
  padding: 8px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--text); text-align: left; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.bg-add-menu button:hover { background: var(--bg-card-alt); color: var(--accent); }
.bg-add-menu button svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }

/* Per-card hide ("×") button in the head, shown on card hover only. */
.b-card-head { position: relative; }
.bg-card-hide-btn {
  position: absolute; top: 0; right: 0;
  width: 24px; height: 24px;
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); opacity: 0;
  border-radius: 6px;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}
.b-card:hover .bg-card-hide-btn { opacity: 0.7; }
.bg-card-hide-btn:hover { opacity: 1; background: var(--bg-card-alt); color: var(--accent); }
.bg-card-hide-btn svg { width: 14px; height: 14px; }
@media (max-width: 768px) {
  .bg-card-hide-btn { display: none; }
}

.b-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.b-card-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.b-card-title svg { width: 14px; height: 14px; opacity: 0.5; }
.b-card-link {
  font-size: 11px; font-weight: 600; color: var(--accent);
  text-decoration: none;
}
.b-card-link:hover { text-decoration: underline; }

/* Portfolio Hero */
.hero-pf { display: flex; align-items: center; gap: 32px; }
.hero-pf-left { flex: 1; }
.hero-pf-pnl { font-size: 40px; font-weight: 900; line-height: 1.1; color: var(--text-heading); }
.hero-pf-pnl.up { color: #16a34a; }
.hero-pf-pnl.down { color: #dc2626; }
.hero-pf-pnl-pct { font-size: 16px; font-weight: 700; margin-left: 8px; opacity: 0.75; }
.hero-pf-pnl-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  color: inherit;
  vertical-align: middle;
}
.hero-pf-pnl-sub {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
  color: var(--text-muted);
}
.hero-pf-pnl-sub.up { color: #16a34a; }
.hero-pf-pnl-sub.down { color: #dc2626; }
.hero-pf-pnl-sub .muted {
  color: var(--text-dim);
  font-weight: 500;
  margin-right: 4px;
}
.hero-pf-pnl-sub .hero-pf-pnl-pct { font-size: 12px; }
.hero-pf-row { display: flex; gap: 32px; margin-top: 16px; }
.hero-pf-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-pf-stat-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.hero-pf-stat-val { font-size: 18px; font-weight: 800; color: var(--text-heading); }

/* Portfolio breakdown table by instrument type */
.pf-breakdown {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card-alt);
}
.pf-breakdown-head,
.pf-breakdown-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 0.7fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  font-size: 13px;
}
.pf-breakdown-head {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.pf-breakdown-row + .pf-breakdown-row { border-top: 1px solid var(--border); }
.pf-breakdown-row .pf-bd-asset { font-weight: 600; color: var(--text-heading); }
.pf-breakdown-row .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.pf-breakdown-head .num { text-align: right; }
.pf-breakdown-row .num .up { color: #16a34a; }
.pf-breakdown-row .num .down { color: #dc2626; }
.pf-breakdown-row .num .muted { color: var(--text-dim); font-weight: 500; }
@media (max-width: 600px) {
  .pf-breakdown-head { display: none; }
  .pf-breakdown-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 4px;
    padding: 12px 14px;
  }
  .pf-breakdown-row .pf-bd-asset { grid-column: 1 / -1; font-size: 14px; }
  .pf-breakdown-row .num { font-size: 12px; text-align: left; }
  .pf-breakdown-row .num::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
}

/* Donut ring */
.alloc-body { display: flex; flex-direction: column; align-items: center; padding: 12px 0 4px; }
.hero-ring-wrap { flex-shrink: 0; position: relative; width: 120px; height: 120px; }
.hero-ring {
  width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(#2563eb 0% 50%, #16a34a 50% 80%, #f59e0b 80% 100%);
  display: flex; align-items: center; justify-content: center;
}
.hero-ring-inner {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--bg-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero-ring-count { font-size: 22px; font-weight: 900; color: var(--text-heading); line-height: 1; }
.hero-ring-label { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; margin-top: 2px; }
.hero-ring-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ring-leg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
.ring-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Quick stats card */
.qstat-grid { display: flex; flex-direction: column; gap: 14px; }
.qstat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-card-alt);
}
.qstat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px;
}
.qstat-icon.qi-stocks { background: rgba(37,99,235,0.1); color: #2563eb; }
.qstat-icon.qi-mf { background: rgba(22,163,74,0.1); color: #16a34a; }
.qstat-icon.qi-other { background: rgba(245,158,11,0.1); color: #f59e0b; }
.qstat-icon.qi-top { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.qstat-body { flex: 1; min-width: 0; }
.qstat-label { font-size: 11px; color: var(--text-dim); font-weight: 500; }
.qstat-val { font-size: 15px; font-weight: 800; color: var(--text-heading); }
.qstat-val .qstat-accent { color: var(--accent); font-weight: 600; }

/* Compact watchlist rows */
.watch-list { display: flex; flex-direction: column; gap: 0; }
.watch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: background 0.12s;
}
.watch-row:nth-child(even) { background: var(--bg-card-alt); }
.watch-row:hover { background: var(--accent-bg, rgba(37,99,235,0.06)); }
.wr-rank { font-size: 11px; font-weight: 700; color: var(--text-dim); width: 18px; text-align: center; flex-shrink: 0; }
.wr-sym { font-size: 13px; font-weight: 800; color: var(--text-heading); white-space: nowrap; }
.wr-name { font-size: 11px; color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-price { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.wr-chg { font-size: 12px; font-weight: 700; white-space: nowrap; min-width: 64px; text-align: right; }
.wr-chg.up { color: #16a34a; }
.wr-chg.down { color: #dc2626; }
.wr-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.wr-badge.pos { background: rgba(22,163,74,0.08); color: #16a34a; }
.wr-badge.neg { background: rgba(220,38,38,0.08); color: #dc2626; }

.watch-empty {
  text-align: center; padding: 28px 16px; font-size: 12px;
  color: var(--text-dim); opacity: 0.7;
}
.watch-empty a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* Market compact list */
.mkt-list { display: flex; flex-direction: column; gap: 0; }
.mkt-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: background 0.12s;
}
.mkt-row:nth-child(even) { background: var(--bg-card-alt); }
.mkt-row:hover { background: var(--accent-bg, rgba(37,99,235,0.06)); }
.mkt-rank {
  font-size: 10px; font-weight: 800; color: var(--text-dim);
  width: 18px; flex-shrink: 0; text-align: center;
}
.mkt-sym { font-size: 12px; font-weight: 800; color: var(--text-heading); white-space: nowrap; }
.mkt-name { font-size: 10px; color: var(--text-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-val { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.mkt-chg { font-size: 11px; font-weight: 800; white-space: nowrap; min-width: 56px; text-align: right; }
.mkt-chg.up { color: #16a34a; }
.mkt-chg.down { color: #dc2626; }

/* News horizontal scroll */
.news-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.news-scroll::-webkit-scrollbar { height: 4px; }
.news-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.news-tile {
  flex: 0 0 320px; scroll-snap-align: start;
  padding: 18px 20px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
}
.news-tile.nt-up { border-left-color: #16a34a; }
.news-tile.nt-down { border-left-color: #dc2626; }
.news-tile.nt-mf { border-left-color: #2563eb; }
.news-tile h4 { font-size: 13px; font-weight: 700; color: var(--text-heading); margin-bottom: 8px; }
.news-tile p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.news-tile a { color: var(--accent); font-weight: 600; text-decoration: none; }
.news-tile a:hover { text-decoration: underline; }

/* Dashboard Announcements */
.dash-ann-list { display: flex; flex-direction: column; gap: 16px; max-height: 340px; overflow-y: auto; }
.dash-ann-list::-webkit-scrollbar { width: 3px; }
.dash-ann-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.dash-ann-stock { border-left: 3px solid var(--accent); padding-left: 14px; }
.dash-ann-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.dash-ann-sym { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.dash-ann-sym:hover { text-decoration: underline; }
.dash-ann-name { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-ann-items { display: flex; flex-direction: column; gap: 6px; }
.dash-ann-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--text-muted); line-height: 1.4;
  padding: 6px 10px; border-radius: 8px;
  background: var(--bg-card-inner, var(--bg-body));
  text-decoration: none;
  transition: background 0.15s;
}
a.dash-ann-item:hover { background: var(--bg-hover, var(--border)); }
.dash-ann-icon { flex-shrink: 0; font-size: 14px; line-height: 1.3; }
.dash-ann-text { flex: 1; min-width: 0; color: var(--text-body); }
.dash-ann-date { flex-shrink: 0; font-size: 10px; color: var(--text-dim); white-space: nowrap; margin-left: auto; }
.dash-ann-empty { padding: 24px 0; text-align: center; }
.dash-ann-empty p { font-size: 13px; color: var(--text-dim); }

/* Dashboard News Articles */
.dash-news-articles { max-height: 480px; overflow-y: auto; }
.dash-news-articles::-webkit-scrollbar { width: 3px; }
.dash-news-articles::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Shimmer skeleton */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skel {
  border-radius: 8px; overflow: hidden;
  background: linear-gradient(90deg, var(--bg-card-alt) 25%, var(--bg-card) 50%, var(--bg-card-alt) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}
.skel-line { height: 14px; margin-bottom: 10px; border-radius: 6px; }
.skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; }
.skel-line.w40 { width: 40%; }
.skel-lg { height: 40px; width: 50%; margin-bottom: 12px; }
.skel-row { display: flex; gap: 10px; padding: 10px 0; }
.skel-row .skel { flex: 1; height: 14px; }

.dash-empty {
  text-align: center; padding: 28px 16px; font-size: 12px;
  color: var(--text-dim); border: 1px dashed var(--border);
  border-radius: 12px;
}
.dash-empty a { color: var(--accent); font-weight: 600; }

@media (max-width: 1024px) {
  .bento-8, .bento-6 { grid-column: span 6; }
  .bento-4 { grid-column: span 6; }
  .bento-3 { grid-column: span 6; }
  .hero-pf { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-ring-wrap { width: 100px; height: 100px; }
  .hero-ring { width: 100px; height: 100px; }
  .hero-ring-inner { width: 66px; height: 66px; }
}
@media (max-width: 768px) {
  .bento { grid-template-columns: 1fr; gap: 12px; }
  .bento-8, .bento-6, .bento-4, .bento-3, .bento-12 { grid-column: span 1; }
  /* Vertical span tweaks: on phones every card stacks, so collapse the
     stretched heights back to their natural minimum. Otherwise users see
     huge empty space below short cards. */
  .b-card[data-rows="2"],
  .b-card[data-rows="3"],
  .b-card[data-rows="4"] { min-height: 0; --bento-rows: 1; }
  .b-card { padding: 16px; border-radius: 12px; }
  .b-card-head { gap: 8px; flex-wrap: wrap; }
  .b-card-title { font-size: 13px; }
  .hero-pf-pnl { font-size: 26px; }
  .hero-pf-pnl-pct { font-size: 14px; }
  .hero-pf-stat-val { font-size: 15px; }
  .hero-pf-row { gap: 14px; flex-wrap: wrap; }
  .hero-pf-stat-label { font-size: 10px; }
  .dash-header { flex-direction: column; gap: 4px; align-items: flex-start; }
  .dash-date { margin-left: 0; }
  .news-tile { flex: 0 0 240px; }
  .watch-row { gap: 8px; padding: 10px 8px; }
  .wr-name { display: none; }
  .wr-chg { min-width: 56px; font-size: 11px; }
  .wr-price { font-size: 12px; }
  .qstat-val { font-size: 14px; }
  .alloc-strip-legend { font-size: 11px; }
  /* Disable layout-editor affordances on touch — drag/resize/hide make
     no sense on a phone and just confuse muscle memory. */
  .bg-resize-handle,
  .bg-resize-e,
  .bg-resize-s,
  .bg-resize-se,
  .bg-card-hide-btn,
  .bg-toolbar { display: none !important; }
  .bg-drag-handle { cursor: default; }
}
@media (max-width: 480px) {
  .bento { gap: 10px; }
  .b-card { padding: 14px; border-radius: 10px; }
  .b-card-head { margin-bottom: 10px; }
  .hero-pf-pnl { font-size: 22px; }
  .hero-pf-pnl-sub { font-size: 12px; }
  .hero-pf-row { gap: 12px; }
  .hero-pf-stat-val { font-size: 14px; }
  .dash-header h1 { font-size: 20px; }
  .b-card-link { font-size: 12px; }
}

.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.placeholder-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.placeholder-card .ph-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  stroke: var(--text-dim);
  opacity: 0.5;
}
.placeholder-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.placeholder-card p { font-size: 13px; color: var(--text-muted); }

/* ── Stocks Browse Page ── */
.stocks-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.stocks-search-wrap {
  position: relative;
  width: 280px;
}
.stocks-search-wrap .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--text-dim);
  pointer-events: none;
}
.stocks-search-wrap input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s;
}
.stocks-search-wrap input:focus { border-color: var(--accent); }

.stocks-filters-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.stocks-filters-bar select {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
}
.stocks-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.stocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.stock-browse-card {
  display: block;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 86%, var(--bg) 14%), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.stock-browse-card::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(16,185,129,0.65), rgba(37,99,235,0.45), rgba(239,68,68,0.5));
  opacity: .35;
}
.stock-browse-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.sbc-rank {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
}
.sbc-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 34px;
  margin-bottom: 8px;
}
.sbc-sym {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-heading);
  letter-spacing: 0;
}
.sbc-name {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 16px;
}
.sbc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.sbc-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
}
.sbc-chg {
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}
.sbc-chg.up { color: var(--green); background: rgba(16,185,129,0.1); }
.sbc-chg.down { color: var(--red); background: rgba(239,68,68,0.1); }

/* ─── Stock Tabs ─── */
/* ═══ 2-Column Layout: vertical tabs left, content right ═══ */
.two-col {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
  /* No horizontal pull: rail + content align with the page H1 and any
     other in-page text. (Was -16px previously which made every page
     using .two-col look mis-aligned with its own heading.) */
}
.app-content > h1 + .two-col { margin-top: 4px; }

/* ═══ Section hub navigation (mega-menu links; cm-hub-rail.js) ═══ */
.cm-hub-page {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 22px;
  box-sizing: border-box;
}

.cm-hub-page .cm-hub-main-col {
  flex: 1 1 auto;
  min-width: 0;
}

.cm-hub-page .cm-hub-rail {
  flex: 0 0 216px;
  width: 216px;
  position: sticky;
  top: 96px;
  align-self: flex-start;
  max-height: calc(100vh - 108px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  font-family: var(--font);
}

.agent-subnav ~ .app-content.cm-hub-page .cm-hub-rail {
  top: 124px;
  max-height: calc(100vh - 140px);
}

.navbar:has(.sub-navbar) ~ .app-content.cm-hub-page .cm-hub-rail {
  top: 112px;
  max-height: calc(100vh - 124px);
}

.cm-hub-rail-title {
  margin-bottom: 8px;
  padding: 2px 2px 0;
}

.cm-hub-rail-brand {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-heading);
  letter-spacing: 0.02em;
}

.cm-hub-rail-home {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  padding: 4px 0;
  color: var(--accent);
  text-decoration: none;
}

.cm-hub-rail-home:hover { text-decoration: underline; color: var(--accent); }

.cm-hub-sec-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 12px 0 6px;
}

.cm-hub-sec-heading:first-of-type {
  margin-top: 4px;
}

.cm-hub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cm-hub-list li { margin-bottom: 2px; }

.cm-hub-link {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}

.cm-hub-link:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
}

.cm-hub-link.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.cm-hub-link-desc {
  display: block;
  font-size: 11px;
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.35;
  color: var(--text-muted);
}

.cm-hub-link-soon {
  display: block;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: default;
}

/* Hub merged into .two-col-nav (see cm-hub-rail.js) */
.two-col-nav .cm-hub-in-nav {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.two-col-nav .cm-hub-in-nav .cm-hub-rail-brand {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
}
.two-col-nav .cm-hub-in-nav .cm-hub-rail-home {
  margin-bottom: 10px;
}
.two-col-nav .cm-hub-in-nav .cm-hub-sec-heading {
  margin: 12px 0 5px;
}
.two-col-nav .cm-hub-in-nav .cm-hub-sec-heading:first-of-type {
  margin-top: 2px;
}

.cm-secondary-nav {
  width: 100%;
  border-bottom: 1px solid var(--border);
  background: var(--bg-nav);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.cm-secondary-nav-inner {
  min-height: 44px;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.cm-secondary-nav-toggle {
  display: none;
}

.cm-secondary-nav-list {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cm-secondary-nav-list::-webkit-scrollbar {
  display: none;
}

.cm-secondary-nav-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding-right: 10px;
  margin-right: 4px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cm-secondary-nav-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.cm-secondary-nav-item:hover {
  color: var(--text-heading);
  text-decoration: none;
}

.cm-secondary-nav-item.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.cm-secondary-nav-item.is-muted {
  opacity: 0.45;
  cursor: default;
}

.cm-hub-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 26px 0 18px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.cm-hub-strip-head {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  padding: 0 6px 0 4px;
  min-width: 116px;
}

.cm-hub-strip-kicker {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.cm-hub-strip-head strong {
  font-size: 13px;
  color: var(--text-heading);
}

.cm-hub-strip-list {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cm-hub-strip-list::-webkit-scrollbar {
  display: none;
}

.cm-hub-strip-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

.cm-hub-strip-item:hover {
  background: var(--bg-card-alt);
  color: var(--text-heading);
}

.cm-hub-strip-item.active {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 47, 40, 0.14);
}

.cm-hub-strip-item.is-muted {
  opacity: 0.45;
  cursor: default;
}

/* Marketing static pages widen slightly when paired with rail */
.static-page.cm-hub-page {
  max-width: none;
}

@media (min-width: 769px) {
  .wn-page.cm-hub-page .cm-hub-main-col {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* Mobile FAB + layered sheet above two-col sheets */
.cm-hub-m-trigger {
  display: none;
  position: fixed;
  z-index: 1180;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(72px, env(safe-area-inset-bottom, 14px));
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-heading);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-family: var(--font);
}

[data-theme="dark"] .cm-hub-m-trigger {
  box-shadow: 0 4px 26px rgba(0, 0, 0, 0.45);
}

.cm-hub-m-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cm-hub-m-trigger .tcm-chev {
  width: 14px;
  height: 14px;
}

.cm-hub-m-trigger[aria-expanded="true"] .tcm-chev {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .cm-hub-page { flex-direction: column; gap: 0; }
  .cm-hub-page .cm-hub-rail { display: none !important; }

  .cm-secondary-nav-inner {
    min-height: 0;
    padding: 8px 16px;
    display: block;
  }

  .cm-secondary-nav-toggle {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-heading);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }

  .cm-secondary-nav-toggle .tcm-chev {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
  }

  .cm-secondary-nav.is-open .cm-secondary-nav-toggle .tcm-chev {
    transform: rotate(180deg);
  }

  .cm-secondary-nav-list {
    display: none;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    overflow: visible;
  }

  .cm-secondary-nav.is-open .cm-secondary-nav-list {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 2px;
  }

  .cm-secondary-nav-label {
    display: none;
  }

  .cm-secondary-nav-item {
    min-height: 38px;
    padding: 0 10px;
    border-bottom: 0;
    border-radius: 8px;
  }

  .cm-secondary-nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .cm-hub-strip {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 14px;
    padding: 12px;
  }

  .cm-hub-strip-head {
    min-width: 0;
    padding: 0;
  }

  .cm-hub-m-trigger {
    display: inline-flex !important;
  }

  html[data-cm-forced-mobile="1"] .cm-hub-m-trigger {
    bottom: max(76px, env(safe-area-inset-bottom, 14px));
  }
}

.tcm-sheet.cm-hub-tcm-sheet {
  z-index: 1260;
}

.cm-hub-sheet-subheading {
  padding: 10px 14px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cm-hub-sheet-desc {
  display: block;
  font-weight: 500;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
}

.tcm-sheet-row.cm-hub-sheet-row-muted {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.tcm-sheet a.tcm-sheet-row {
  text-decoration: none;
  color: inherit;
}
.two-col-nav {
  position: sticky; top: 80px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.two-col-nav .tc-heading {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-dim);
  padding: 10px 12px 6px; margin: 0;
}
.tc-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--text-muted); background: none; border: none;
  cursor: pointer; text-align: left; width: 100%;
  transition: background 0.12s, color 0.12s;
}
.tc-tab svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.5; }
.tc-tab:hover { background: var(--bg-card-alt); color: var(--text); }
.tc-tab.active {
  background: var(--accent); color: #fff;
}
.tc-tab.active svg { opacity: 1; }
.tc-tab .tc-badge {
  margin-left: auto; font-size: 10px; font-weight: 800;
  background: rgba(255,255,255,0.2); padding: 1px 7px;
  border-radius: 100px; min-width: 20px; text-align: center;
}
.tc-tab:not(.active) .tc-badge { background: var(--bg-card-alt); color: var(--text-dim); }

.two-col-left {
  position: sticky; top: 80px;
  display: flex; flex-direction: column; gap: 12px;
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.two-col-left::-webkit-scrollbar { width: 3px; }
.two-col-left::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.two-col-left .two-col-nav {
  position: static;
}
.nav-filter-card {
  padding: 16px;
}
.nav-filter-card .mf-filter-group { margin-bottom: 12px; }
.nav-filter-card .mf-filter-group select,
.nav-filter-card .mf-filter-group input { font-size: 12px; padding: 6px 8px; }
.nav-filter-card .mf-filter-actions { gap: 6px; }
.nav-filter-card .mf-filter-actions .btn { font-size: 12px; padding: 6px 0; }

.two-col-content { min-width: 0; }

.stock-tab-panel { display: none; }
.stock-tab-panel.active { display: block; }

/* Legacy horizontal tabs (keep for backward compat if needed) */
.stock-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 28px;
}
.stock-tab {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font);
}
.stock-tab:hover {
  color: var(--text-heading);
}
.stock-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.stock-tab-panel { display: none; }
.stock-tab-panel.active { display: block; }

/* ─── Discover Tab ─── */
.stock-discovery-shell {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.stocks-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 24px;
  position: relative;
  z-index: 5;
}
.slh-copy,
.slh-panel {
  position: relative;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.slh-copy {
  overflow: visible;
  z-index: 20;
  border-radius: 18px;
  padding: 30px;
  background:
    linear-gradient(90deg, rgba(255,45,32,0.08) 0 1px, transparent 1px 76px),
    linear-gradient(0deg, rgba(15,23,42,0.035) 0 1px, transparent 1px 76px),
    linear-gradient(135deg, rgba(255,45,32,0.08), rgba(255,255,255,0) 42%),
    var(--bg-card);
}
[data-theme="dark"] .slh-copy {
  background:
    linear-gradient(90deg, rgba(148,163,184,0.08) 0 1px, transparent 1px 76px),
    linear-gradient(0deg, rgba(148,163,184,0.07) 0 1px, transparent 1px 76px),
    linear-gradient(135deg, rgba(255,45,32,0.12), rgba(15,23,42,0) 44%),
    var(--bg-card);
}
.slh-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,45,32,0.1);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.slh-copy h2 {
  max-width: 620px;
  margin: 0 0 10px;
  font-size: 48px;
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--text-heading);
}
.slh-copy p {
  max-width: 650px;
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.slh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.slh-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-card) 86%, var(--bg) 14%);
  font-size: 12px;
  font-weight: 700;
}
.slh-actions a:hover {
  border-color: var(--accent-border);
  color: var(--accent);
}
.slh-panel {
  overflow: hidden;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(17,24,39,0.035), transparent 38%),
    var(--bg-card);
}
.slh-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.slh-panel-head span {
  color: var(--text-heading);
  font-size: 14px;
  font-weight: 800;
}
.slh-panel-head small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.slh-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.slh-stat {
  min-width: 0;
  min-height: 88px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--bg-card) 82%, var(--bg) 18%);
}
.slh-stat:nth-child(1) { border-left: 3px solid var(--green); }
.slh-stat:nth-child(2) { border-left: 3px solid var(--red); }
.slh-stat:nth-child(3) { border-left: 3px solid #2563eb; }
.slh-stat:nth-child(4) { border-left: 3px solid #d97706; }
.slh-stat-label {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.slh-stat strong {
  display: block;
  color: var(--text-heading);
  font-size: 30px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slh-tape {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--border);
}
.slh-tape a,
.slh-tape span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
}
.slh-tape strong { font-size: 12px; color: var(--text-heading); }
.slh-tape .up span { color: var(--green); font-weight: 800; }
.slh-tape .down span { color: var(--red); font-weight: 800; }

.stock-research-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 28px;
  position: relative;
  z-index: 1;
}
.stock-lane-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 142px;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 90%, var(--bg) 10%), var(--bg-card));
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.stock-lane-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--lane-color, var(--accent));
}
.stock-lane-card:nth-child(1) { --lane-color: var(--green); }
.stock-lane-card:nth-child(2) { --lane-color: #2563eb; }
.stock-lane-card:nth-child(3) { --lane-color: #d97706; }
.stock-lane-card:nth-child(4) { --lane-color: var(--accent); }
.stock-lane-card:hover {
  transform: translateY(-2px);
  border-color: var(--lane-color, var(--accent));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.stock-lane-label {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lane-color, var(--accent)) 10%, transparent);
  color: var(--lane-color, var(--accent));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.stock-lane-card strong {
  display: block;
  color: var(--text-heading);
  font-size: 18px;
  line-height: 1.2;
}
.stock-lane-card em {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}
@media (max-width: 1100px) {
  .stock-research-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.discover-hero {
  text-align: center;
  padding: 36px 40px 40px;
  background:
    radial-gradient(ellipse 80% 60% at 20% 100%, rgba(255,45,32,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(37,99,235,0.05) 0%, transparent 60%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  position: sticky;
  top: 68px;
  z-index: 20;
  overflow: visible;
  transition: padding 0.35s cubic-bezier(.4,0,.2,1),
              border-radius 0.35s cubic-bezier(.4,0,.2,1),
              box-shadow 0.35s ease;
}
[data-theme="dark"] .discover-hero {
  background:
    radial-gradient(ellipse 80% 60% at 20% 100%, rgba(255,45,32,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(96,165,250,0.06) 0%, transparent 60%),
    var(--bg-card);
}
.discover-hero.scrolled {
  padding: 12px 24px 14px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.dh-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.dh-deco-1 {
  width: 220px; height: 220px;
  top: -100px; right: -50px;
  background: radial-gradient(circle, rgba(255,45,32,0.06), transparent 70%);
}
.dh-deco-2 {
  width: 150px; height: 150px;
  bottom: -60px; left: -30px;
  background: radial-gradient(circle, rgba(37,99,235,0.05), transparent 70%);
}
.dh-deco-3 {
  width: 80px; height: 80px;
  top: 16px; left: 28%;
  background: radial-gradient(circle, rgba(22,163,74,0.04), transparent 70%);
}
.discover-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 6px;
  position: relative;
  max-height: 40px; opacity: 1;
  transition: max-height 0.35s cubic-bezier(.4,0,.2,1),
              opacity 0.25s ease,
              margin 0.35s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.discover-hero.scrolled .discover-title {
  max-height: 0; opacity: 0; margin-bottom: 0;
}
.discover-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 22px;
  position: relative;
  max-height: 30px; opacity: 1;
  transition: max-height 0.35s cubic-bezier(.4,0,.2,1),
              opacity 0.25s ease,
              margin 0.35s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.discover-hero.scrolled .discover-sub {
  max-height: 0; opacity: 0; margin-bottom: 0;
}
.discover-search {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 720px;
  margin: 0;
  z-index: 30;
  transition: max-width 0.35s cubic-bezier(.4,0,.2,1);
}
.discover-hero.scrolled .discover-search {
  max-width: 100%;
}
.discover-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-dim);
  pointer-events: none;
  z-index: 1;
  transition: width 0.25s ease, height 0.25s ease, left 0.25s ease;
}
.discover-search input {
  width: 100%;
  min-height: 56px;
  padding: 15px 20px 15px 50px;
  font-size: 16px;
  font-family: var(--font);
  border: 2px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: padding 0.3s cubic-bezier(.4,0,.2,1), font-size 0.3s ease,
              border-color 0.2s ease, box-shadow 0.2s ease, border-radius 0.3s ease;
  box-sizing: border-box;
}
.discover-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.12), var(--shadow-md);
}
.discover-hero.scrolled .discover-search input {
  padding: 10px 16px 10px 42px;
  font-size: 14px;
  border-radius: 10px;
}
.discover-hero.scrolled .discover-search-icon {
  width: 16px; height: 16px; left: 14px;
}
.discover-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}
.discover-results.show { display: block; }
.discover-results .search-group-label {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.discover-results .search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border-subtle, var(--border));
  transition: background 0.1s;
}
.discover-results .search-result-item:last-child { border-bottom: none; }
.discover-results .search-result-item:hover { background: var(--bg-hover); }
.discover-results .sr-left { text-align: left; }
.discover-results .sr-symbol { font-weight: 700; font-size: 14px; }
.discover-results .sr-name { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.discover-results .sr-right { text-align: right; flex-shrink: 0; margin-left: 16px; }
.discover-results .sr-price { font-weight: 600; font-size: 14px; }
.discover-results .sr-change { font-size: 12px; font-weight: 600; }
.discover-results .sr-change.pos { color: var(--green); }
.discover-results .sr-change.neg { color: var(--red); }
.discover-results .search-empty { padding: 24px; text-align: center; color: var(--text-dim); font-size: 14px; }
.discover-results .sr-market { font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 600; margin-left: 4px; }
.discover-results .sr-market.nse { background: rgba(34,197,94,0.12); color: #16a34a; }
.discover-results .sr-market.bse { background: rgba(59,130,246,0.12); color: #2563eb; }

.discover-sections {
  max-width: 100%;
}
.discover-section {
  margin-bottom: 34px;
}
.discover-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.discover-section-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 3px;
}
.discover-section-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}
.discover-section-head a {
  flex: 0 0 auto;
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}
.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

/* ─── Browse by Sector grid ──────────────────────────────────────────
 * Theme cards that bucket the 140+ DB sub-sectors into 11 high-level
 * themes. Each card uses its theme accent colour for the icon disc and
 * the avg-change badge. Clicking the card takes the user to
 * /sector/{slug}.
 */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.sector-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 86%, var(--bg) 14%), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  overflow: hidden;
}
.sector-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--theme-color, var(--accent));
  opacity: 0.85;
}
.sector-card:hover {
  transform: translateY(-2px);
  border-color: var(--theme-color, var(--accent));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.sector-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.sector-card-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--theme-color, var(--accent)) 12%, transparent);
  color: var(--theme-color, var(--accent));
  flex: 0 0 36px;
}
.sector-card-icon svg { width: 20px; height: 20px; }
.sector-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.25;
}
.sector-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.sector-card-count { font-weight: 600; color: var(--text); }
.sector-card-avg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
}
.sector-card-avg.up { background: rgba(16,185,129,0.12); color: var(--green); }
.sector-card-avg.down { background: rgba(239,68,68,0.12); color: var(--red); }
.sector-card-avg.flat { background: rgba(100,116,139,0.12); color: var(--text-muted); }
.sector-card-movers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 11px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.sector-card-mover { line-height: 1.35; }
.sector-card-mover-label {
  display: block;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  margin-bottom: 2px;
}
.sector-card-mover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.sector-card-mover-sym { font-weight: 700; color: var(--text); }
.sector-card-mover-chg { font-weight: 600; font-size: 11px; }
.sector-card-mover-chg.up { color: var(--green); }
.sector-card-mover-chg.down { color: var(--red); }
.sector-card-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ─── Following Tab ─── */
.following-header {
  margin-bottom: 20px;
}
.following-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.following-empty p { font-size: 16px; font-weight: 500; }

/* ─── Following Table ─── */
.follow-table-wrap { overflow-x: auto; }
.fw-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.fw-table thead th {
  text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--text-dim); padding: 10px 12px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap; position: sticky; top: 0;
  background: var(--bg-body);
}
.fw-table thead th.num { text-align: right; }
.fw-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; }
.fw-table tbody tr:hover { background: var(--bg-hover, rgba(0,0,0,0.02)); }
[data-theme="dark"] .fw-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.fw-table td { padding: 10px 12px; white-space: nowrap; color: var(--text-body); }
.fw-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fw-table td.up { color: #16a34a; font-weight: 600; }
.fw-table td.down { color: #dc2626; font-weight: 600; }
.fw-sym { font-weight: 700; color: var(--accent); text-decoration: none; }
.fw-sym:hover { text-decoration: underline; }
.fw-name { color: var(--text-muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.fw-market { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.fw-market.nse { background: #e8f5e9; color: #2e7d32; }
.fw-market.bse { background: #fce4ec; color: #c62828; }
[data-theme="dark"] .fw-market.nse { background: rgba(46,125,50,0.2); }
[data-theme="dark"] .fw-market.bse { background: rgba(198,40,40,0.2); }
.fw-sector { color: var(--text-dim); font-size: 11px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.fw-unfollow {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 14px; padding: 4px 8px;
  border-radius: 4px; transition: background 0.12s, color 0.12s;
}
.fw-unfollow:hover { background: #fce4ec; color: #dc2626; }
[data-theme="dark"] .fw-unfollow:hover { background: rgba(220,38,38,0.15); }

/* ─── News Tab ─── */
.news-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.news-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
}
.news-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
}
.news-body strong {
  color: var(--accent);
  font-weight: 700;
}
.news-card.news-muted {
  background: transparent;
  border-style: dashed;
  opacity: 0.7;
}
.news-card.news-muted p {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}

/* ─── Yahoo Finance News Articles ─── */
.yf-article {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background 0.12s;
}
.yf-article:last-child { border-bottom: none; }
.yf-article:hover { background: var(--bg-hover, rgba(0,0,0,0.015)); margin: 0 -20px; padding: 16px 20px; border-radius: 8px; }
[data-theme="dark"] .yf-article:hover { background: rgba(255,255,255,0.025); }
.yf-article-body { flex: 1; min-width: 0; }
.yf-article-title { font-size: 14px; font-weight: 600; color: var(--text-heading); line-height: 1.4; margin-bottom: 4px; }
.yf-article:hover .yf-article-title { color: var(--accent); }
.yf-article-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yf-article-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-dim); }
.yf-source {
  font-weight: 600; padding: 1px 6px; border-radius: 4px;
  background: var(--bg-hover, rgba(0,0,0,0.04));
}
.yf-time { opacity: 0.7; }
.yf-arrow { flex-shrink: 0; font-size: 22px; color: var(--text-dim); opacity: 0.3; padding-top: 2px; transition: opacity 0.12s; }
.yf-article:hover .yf-arrow { opacity: 0.7; color: var(--accent); }
.yf-empty { text-align: center; padding: 40px 20px; }
.yf-empty p { font-size: 14px; color: var(--text-dim); }

/* News time filters */
.yf-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.sec .yf-filters { margin-bottom: 16px; }
.yf-filter {
  background: none; border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  cursor: pointer; transition: all 0.15s;
}
.yf-filter:hover { border-color: var(--accent); color: var(--accent); }
.yf-filter.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
}

@media (max-width: 600px) {
  .stocks-header { flex-direction: column; }
  .stocks-search-wrap { width: 100%; }
  .stocks-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .stock-tab { padding: 10px 14px; font-size: 13px; }
  .two-col,
  .two-col-content,
  .stock-tab-panel,
  .stock-discovery-shell,
  .stocks-landing-hero,
  .slh-copy,
  .slh-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .stocks-landing-hero { grid-template-columns: 1fr; gap: 12px; }
  .slh-copy { padding: 22px 18px; border-radius: 14px; }
  .stocks-page-title .page-intro {
    width: min(100%, 330px);
    max-width: 100%;
  }
  .slh-copy h2 {
    width: min(100%, 326px);
    max-width: 100%;
    font-size: 28px;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  .slh-copy p {
    width: min(100%, 326px);
    max-width: 100%;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .slh-copy .discover-search {
    width: min(100%, 326px);
    max-width: 100%;
  }
  .slh-panel { border-radius: 14px; }
  .slh-panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .slh-stat-grid { grid-template-columns: 1fr; }
  .slh-stat { min-height: 74px; }
  .slh-actions a { min-height: 32px; }
  .stock-research-lanes {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 22px;
  }
  .stock-lane-card {
    min-height: 124px;
    padding: 14px;
  }
  .discover-hero { padding: 20px 16px 24px; position: static; }
  .discover-title { font-size: 18px; }
  .discover-search input { max-width: 100%; font-size: 14px; padding: 12px 16px 12px 42px; }
  .discover-section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* ─── Two-column stack on mobile ───
   The page must stack (nav-card on top, content below — never side-by-side)
   whenever the mobile header is active. Two triggers cover all cases:
     1. Width-based: matches cm-header.js's `(max-width: 768px)` breakpoint.
     2. Forced-mobile attribute: cm-header.js sets
        `html[data-cm-forced-mobile="1"]` on touch devices in portrait,
        which can happen at any width (e.g. iPad portrait). */
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; gap: 14px; }
  /* Horizontal pill strip only when cm-two-col has not taken over the nav
     (no data-tcm-enhanced). Enhanced navs are hidden here — see .tcm-trigger
     rules below — so this selector avoids leftover row flex fighting display:none. */
  .two-col-nav:not([data-tcm-enhanced="1"]) {
    position: static; flex-direction: row; overflow-x: auto;
    border-radius: 10px; gap: 0; padding: 4px;
  }
  .two-col-nav:not([data-tcm-enhanced="1"]) .tc-heading { display: none; }
  .two-col-left { position: static; max-height: none; overflow: visible; }
  .nav-filter-card { display: none !important; }
  .two-col-nav:not([data-tcm-enhanced="1"]) .tc-tab {
    white-space: nowrap; padding: 8px 14px; border-radius: 8px; font-size: 12px;
  }
}
html[data-cm-forced-mobile="1"] .two-col {
  grid-template-columns: 1fr;
  gap: 14px;
}
/* Portrait-tablet viewport shim (cm-header.js): same rules as width-based
   mobile, but never restyle enhanced navs — those use .tcm-trigger + sheet. */
html[data-cm-forced-mobile="1"] .two-col-nav:not([data-tcm-enhanced="1"]) {
  position: static; flex-direction: row; overflow-x: auto;
  border-radius: 10px; gap: 0; padding: 4px;
}
html[data-cm-forced-mobile="1"] .two-col-nav:not([data-tcm-enhanced="1"]) .tc-heading { display: none; }
html[data-cm-forced-mobile="1"] .two-col-left {
  position: static; max-height: none; overflow: visible;
}
html[data-cm-forced-mobile="1"] .nav-filter-card { display: none !important; }
html[data-cm-forced-mobile="1"] .two-col-nav:not([data-tcm-enhanced="1"]) .tc-tab {
  white-space: nowrap; padding: 8px 14px; border-radius: 8px; font-size: 12px;
}

/* ─── Responsive: layout shell ─── */
html {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

/* Responsive – app shell & breadcrumbs */
@media (max-width: 768px) {
  main {
    padding: 18px max(14px, env(safe-area-inset-left, 0px)) 56px max(14px, env(safe-area-inset-right, 0px));
  }
  .app-content {
    padding: 14px max(12px, env(safe-area-inset-left, 0px)) 38px max(12px, env(safe-area-inset-right, 0px)) !important;
  }
  .mf-page {
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
  }
  .agent-dash {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
  .mf-detail {
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
  }
  .breadcrumb {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    flex-wrap: wrap;
    row-gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* Keep the "Go Back" label visible on mobile so the breadcrumb bar
     still reads naturally inside the secondary navbar. */
  .bc-divider { margin: 0 10px; }
  .dash-header .dash-date { white-space: normal; text-align: left; word-break: break-word; margin-left: 0; }
  .mf-detail-header { padding: 20px 18px !important; }
  .company-header .ch-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .pp-row { grid-template-columns: 1fr; gap: 10px; }
  .theme-toggle,
  .nav-drawer-toggle {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .mf-chart-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 8px;
    scrollbar-width: thin;
  }
}

@media (max-width: 640px) {
  .dash-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin-bottom: 20px;
  }
  .dash-tab {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
  }
  .placeholder-grid { grid-template-columns: 1fr; gap: 16px; }
  .mf-nav-big { font-size: clamp(22px, 9vw, 30px); }
  .panel-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 480px) {
  .auth-container {
    padding: 24px max(12px, env(safe-area-inset-left, 0px)) 32px max(12px, env(safe-area-inset-right, 0px));
  }
  .auth-box { padding: 24px 16px !important; }
  .landing-hero .hero-actions .btn-lg { width: 100%; text-align: center; }
}

@media (max-width: 560px) {
  .modal-overlay {
    padding: max(14px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(22px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }
  .modal-box {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    box-sizing: border-box;
  }
  .portfolio-popover {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }
}

/* ═══ Metal / Commodity secondary tabs ═══ */
.metal-tabs {
  display: flex;
  gap: 6px;
  padding: 0 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.metal-tabs::-webkit-scrollbar { display: none; }
.metal-tab {
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.metal-tab:hover { border-color: var(--accent); color: var(--accent); }
.metal-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ═══ Metal / Commodity price cards ═══ */
.metal-price-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.metal-price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.metal-price-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(229,9,20,0.08);
}
.mpc-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.mpc-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.mpc-change {
  font-size: 13px;
  font-weight: 600;
}
.mpc-change.up { color: var(--green, #16a34a); }
.mpc-change.down { color: var(--red, #dc2626); }

/* ═══ IPO cards ═══ */
.ipo-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ipo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ipo-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(229,9,20,0.08);
}
.ipo-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ipo-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.ipo-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ipo-badge--upcoming { background: #fef3c7; color: #92400e; }
.ipo-badge--open { background: #dcfce7; color: #166534; }
.ipo-badge--listed { background: #dbeafe; color: #1e40af; }
[data-theme="dark"] .ipo-badge--upcoming { background: #78350f; color: #fef3c7; }
[data-theme="dark"] .ipo-badge--open { background: #14532d; color: #dcfce7; }
[data-theme="dark"] .ipo-badge--listed { background: #1e3a5f; color: #dbeafe; }
.ipo-card-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 20px;
}
.ipo-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ipo-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ipo-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.ipo-value.up { color: var(--green, #16a34a); }
.ipo-value.down { color: var(--red, #dc2626); }

/* ═══ REIT / InvIT cards ═══ */
.reit-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.reit-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(229,9,20,0.08);
}
.reit-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.reit-card-header > div { display: flex; flex-direction: column; gap: 2px; }
.reit-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.reit-symbol {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.reit-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.reit-badge--office { background: #dbeafe; color: #1e40af; }
.reit-badge--retail { background: #fce7f3; color: #9d174d; }
.reit-badge--power { background: #fef3c7; color: #92400e; }
.reit-badge--roads { background: #d1fae5; color: #065f46; }
.reit-badge--telecom { background: #ede9fe; color: #5b21b6; }
[data-theme="dark"] .reit-badge--office { background: #1e3a5f; color: #dbeafe; }
[data-theme="dark"] .reit-badge--retail { background: #831843; color: #fce7f3; }
[data-theme="dark"] .reit-badge--power { background: #78350f; color: #fef3c7; }
[data-theme="dark"] .reit-badge--roads { background: #064e3b; color: #d1fae5; }
[data-theme="dark"] .reit-badge--telecom { background: #4c1d95; color: #ede9fe; }
.reit-card-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 20px;
  margin-bottom: 14px;
}
.reit-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reit-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.reit-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.reit-value.highlight { color: var(--accent); }
.reit-card-footer {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.reit-change {
  font-size: 13px;
  font-weight: 600;
}
.reit-change.up { color: var(--green, #16a34a); }
.reit-change.down { color: var(--red, #dc2626); }

@media (max-width: 640px) {
  .metal-price-cards { grid-template-columns: 1fr 1fr; }
  .ipo-card-details, .reit-card-details { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .metal-price-cards { grid-template-columns: 1fr; }
  .ipo-card-details { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   cm-two-col.js — mobile dropdown trigger + bottom sheet for .two-col-nav
   Desktop (>768px): trigger/sheet hidden, original sidebar visible.
   Mobile (≤768px): original sidebar hidden, trigger card visible.
   ───────────────────────────────────────────────────────────────────────── */

/* Trigger card is hidden on desktop. */
.tcm-trigger { display: none !important; }

/* Always constrain trigger icon/chev sizes, even outside the mobile media
   query, so that if the trigger ever becomes visible the inner SVGs stay
   small (defence-in-depth against unsized SVGs filling their container). */
.tcm-trigger-icon { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; }
.tcm-trigger-icon svg { width: 16px; height: 16px; flex-shrink: 0; }
.tcm-chev { width: 18px; height: 18px; flex-shrink: 0; }

/* The bottom sheet is always in the DOM (on <body>) but only visible while
   .open is toggled. We still keep it pointer-events:none until then. */
.tcm-sheet {
  position: fixed; inset: 0; z-index: 1200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.tcm-sheet.open { opacity: 1; pointer-events: auto; }

.tcm-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
[data-theme="dark"] .tcm-sheet-backdrop { background: rgba(0, 0, 0, 0.65); }

.tcm-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  color: var(--text);
  border-top: 1px solid var(--border);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
  padding: 8px 16px 24px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.tcm-sheet.open .tcm-sheet-panel { transform: translateY(0); }

.tcm-sheet-grabber {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border);
  margin: 6px auto 10px;
}

.tcm-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 8px;
}
.tcm-sheet-title {
  font-size: 14px; font-weight: 600; margin: 0;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tcm-sheet-close {
  background: transparent; border: 0; padding: 6px;
  color: var(--text-muted);
  cursor: pointer; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tcm-sheet-close:hover { background: var(--bg-card-alt); color: var(--text-heading); }
.tcm-sheet-close svg { width: 18px; height: 18px; }

.tcm-sheet-list {
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
}

.tcm-sheet-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px;
  background: transparent; border: 0; border-radius: 12px;
  font-size: 15px; font-weight: 500;
  color: var(--text);
  text-align: left; width: 100%;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.tcm-sheet-row:hover { background: var(--bg-card-alt); }
.tcm-sheet-row.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.tcm-row-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 8px;
  background: var(--bg-card-alt);
  color: var(--text-muted);
}
.tcm-sheet-row.active .tcm-row-icon {
  background: var(--accent-soft);
  color: var(--accent);
}
.tcm-row-icon svg { width: 16px; height: 16px; opacity: 1; }
.tcm-row-label { flex: 1; min-width: 0; }
.tcm-sheet-row .tc-badge { margin-left: auto; }

/* Lock background scroll while the sheet is open. */
html.tcm-sheet-locked, html.tcm-sheet-locked body { overflow: hidden; }

@media (max-width: 768px) {
  /* Hide the original vertical nav on mobile; trigger replaces it. We hide
     it wherever the enhancer found it — both the direct .two-col child
     layout (e.g. screener.html), the nested .two-col-left layout
     (e.g. mutual-funds.html, etf.html, ipo.html, etc.), and the settings
     page's .settings-rail. */
  .two-col-nav[data-tcm-enhanced="1"],
  .settings-rail[data-tcm-enhanced="1"] { display: none !important; }

  .tcm-trigger {
    display: flex !important; align-items: center; justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-heading);
    font-family: var(--font);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    text-align: left;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
  }
  .tcm-trigger:hover, .tcm-trigger[aria-expanded="true"] {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
  }
  .tcm-trigger-label {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 0; flex: 1;
  }
  .tcm-trigger-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
  }
  .tcm-trigger-icon svg { width: 16px; height: 16px; opacity: 1; }
  .tcm-trigger-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tcm-chev {
    width: 18px; height: 18px;
    color: var(--text-muted);
    transition: transform 180ms ease;
    flex-shrink: 0;
  }
  .tcm-trigger[aria-expanded="true"] .tcm-chev { transform: rotate(180deg); }
}

/* cm-header portrait-tablet shim sets html[data-cm-forced-mobile="1"] while
   the layout viewport can exceed 768px on some browsers / WebViews. Mirror
   the tcm mobile rules here so enhanced navs never fall back to horizontal
   pill tabs without the trigger + sheet. */
html[data-cm-forced-mobile="1"] .two-col-nav[data-tcm-enhanced="1"],
html[data-cm-forced-mobile="1"] .settings-rail[data-tcm-enhanced="1"] {
  display: none !important;
}
html[data-cm-forced-mobile="1"] .tcm-trigger {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-heading);
  font-family: var(--font);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  text-align: left;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
html[data-cm-forced-mobile="1"] .tcm-trigger:hover,
html[data-cm-forced-mobile="1"] .tcm-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
html[data-cm-forced-mobile="1"] .tcm-trigger-label {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0; flex: 1;
}
html[data-cm-forced-mobile="1"] .tcm-trigger-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
html[data-cm-forced-mobile="1"] .tcm-trigger-icon svg { width: 16px; height: 16px; opacity: 1; }
html[data-cm-forced-mobile="1"] .tcm-trigger-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-cm-forced-mobile="1"] .tcm-chev {
  width: 18px; height: 18px;
  color: var(--text-muted);
  transition: transform 180ms ease;
  flex-shrink: 0;
}
html[data-cm-forced-mobile="1"] .tcm-trigger[aria-expanded="true"] .tcm-chev { transform: rotate(180deg); }

/* ============================================================================
   Mobile responsive table → cards + toolbar → bottom sheet
   ----------------------------------------------------------------------------
   Reusable patterns for converting desktop data tables and inline filter
   toolbars into mobile-friendly card lists + bottom-sheet filters.

   Usage:
   - Add class `cm-mobile-cards` to a <table>. Each <td> in <tbody> rows
     should carry a `data-label="…"` attribute that matches its column
     header. On ≤768px the table flattens, the <thead> hides, and each
     <tr> renders as a card with label/value pairs.

   - Wrap an inline filter row in any element with attribute
     `data-cm-mobile-sheet` (or class `cm-mobile-sheet-host`). The
     `/cm-mobile-filters.js` script will, on ≤768px, hide the inline
     row, insert a "Filters" trigger card above it, and re-open the
     row inside a bottom sheet on tap. Apply / Clear buttons inside
     the toolbar keep working untouched.
   ============================================================================ */

/* Filter trigger button (mobile only, shown by JS) */
.cm-filter-trigger {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  font: 600 14px/1.2 var(--font);
  color: var(--text);
  cursor: pointer;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.cm-filter-trigger:hover { border-color: var(--accent); }
.cm-filter-trigger .cm-ft-label {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0; flex: 1;
}
.cm-filter-trigger .cm-ft-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.cm-filter-trigger .cm-ft-icon svg { width: 16px; height: 16px; }
.cm-filter-trigger .cm-ft-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font: 600 12px/1 var(--font);
}
.cm-filter-trigger .cm-ft-chev {
  width: 18px; height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Bottom-sheet container (always in DOM on <body>) */
.cm-filter-sheet {
  position: fixed; inset: 0; z-index: 1200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.cm-filter-sheet.open { opacity: 1; pointer-events: auto; }
.cm-filter-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.cm-filter-sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  padding: 14px 16px 22px;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 200ms ease;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.18);
}
.cm-filter-sheet.open .cm-filter-sheet-panel { transform: translateY(0); }
.cm-filter-sheet-grab {
  width: 36px; height: 4px; border-radius: 999px;
  background: var(--border);
  margin: 2px auto 12px;
}
.cm-filter-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.cm-filter-sheet-header h3 {
  margin: 0; font-size: 16px; color: var(--text-heading, var(--text));
}
.cm-filter-sheet-close {
  background: none; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.cm-filter-sheet-close:hover { background: var(--accent-soft); color: var(--accent); }
.cm-filter-sheet-body { display: flex; flex-direction: column; gap: 12px; }

/* Filter sheet on mobile only */
@media (max-width: 768px) {
  .cm-filter-trigger { display: flex; }

  /* Hide the inline toolbar once cm-mobile-filters.js has built a
     trigger + sheet for it. The toolbar still exists in the DOM (the
     script moves it back and forth between its original spot and the
     sheet body), so we hide it by default and re-show it only when
     it lives inside the sheet panel. */
  [data-cm-mobile-sheet-enhanced="1"] { display: none !important; }
  .cm-filter-sheet-body [data-cm-mobile-sheet-enhanced="1"] {
    display: flex !important;
  }

  /* When toolbar is hosted in sheet, stretch its controls full-width
     and stack them vertically for easy thumb access. */
  .cm-filter-sheet-body select,
  .cm-filter-sheet-body input,
  .cm-filter-sheet-body textarea {
    width: 100%;
    padding: 12px 12px;
    font-size: 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input, var(--bg-card));
    color: var(--text);
    box-sizing: border-box;
  }
  .cm-filter-sheet-body .btn { width: 100%; padding: 12px; font-size: 15px; }
  .cm-filter-sheet-body > * { width: 100%; }
  /* The toolbar element itself, when moved into the sheet, becomes a
     vertical stack with full-width controls. */
  .cm-filter-sheet-body [data-cm-mobile-sheet-host="1"],
  .cm-filter-sheet-body .cm-mobile-sheet-host {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0;
    border: 0;
  }
}

/* ── Table → Card list on mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
  table.cm-mobile-cards { display: block; width: 100%; border: 0; }
  table.cm-mobile-cards thead { display: none; }
  table.cm-mobile-cards tbody { display: block; }
  table.cm-mobile-cards tbody tr {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 10px;
    box-shadow: var(--shadow-sm);
  }
  table.cm-mobile-cards tbody tr:hover td { background: transparent; }
  table.cm-mobile-cards tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    text-align: right;
    font-size: 13px;
  }
  table.cm-mobile-cards tbody td:last-child { border-bottom: 0; }
  table.cm-mobile-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-dim);
    padding-top: 2px;
  }
  /* Cells flagged as "primary" render as a top header with the full
     value taking full width and the label hidden. */
  table.cm-mobile-cards tbody td[data-primary]::before { display: none; }
  table.cm-mobile-cards tbody td[data-primary] {
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading, var(--text));
    border-bottom: 1px solid var(--border);
    padding: 0 0 8px;
    margin-bottom: 4px;
  }
  /* Empty-state row spans whole card cleanly. */
  table.cm-mobile-cards tbody td[colspan]::before { display: none; }
  table.cm-mobile-cards tbody td[colspan] { text-align: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   /scripts/<slug> — per-script detail page
   ───────────────────────────────────────────────────────────────────── */

/* Use the full app width (matches /scripts and /company pages).
   .app-content already supplies the 24px/32px gutter; this class only
   needs to add bottom padding for breathing room. */
.script-detail-page { padding-bottom: 80px; }
@media (max-width: 768px) { .script-detail-page { padding-bottom: 48px; } }

/* Breadcrumb for the per-script page uses the global .breadcrumb /
   .bc-back styles defined elsewhere in this file (same as /company
   and /sector pages). cm-header.js promotes it into the sub-navbar. */

.sd-hero { padding: 24px; margin-bottom: 16px; }
.sd-hero-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.sd-hero-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0;
}
.sd-hero-title h1 {
  font-size: 24px; line-height: 1.2; margin: 0;
  color: var(--text-primary, #111827); font-weight: 700;
}
@media (max-width: 768px) { .sd-hero-title h1 { font-size: 20px; } }

.sd-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sd-hero-desc {
  margin: 12px 0 16px;
  color: var(--text-secondary, #4b5563);
  font-size: 15px; line-height: 1.55;
}

.sd-formula {
  background: var(--bg-secondary, #f9fafb);
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 8px; padding: 12px 14px;
  font-size: 13px;
}
[data-theme="dark"] .sd-formula {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .12);
}
.sd-formula-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-secondary, #6b7280); margin-bottom: 4px;
}
.sd-formula code {
  display: block; background: none; padding: 0;
  font-family: 'SFMono-Regular', 'Consolas', monospace;
  color: var(--text-primary, #111827);
  font-size: 13px; line-height: 1.5; white-space: normal; word-break: break-word;
}

.sd-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.sd-meta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px;
  background: var(--bg-secondary, #f3f4f6);
  font-size: 12px; color: var(--text-secondary, #4b5563);
}
[data-theme="dark"] .sd-meta-pill { background: rgba(255,255,255,.05); }
.sd-meta-pill strong { color: var(--text-primary, #111827); font-weight: 700; }
.sd-meta-pill-lock { background: rgba(245, 158, 11, .12); color: #92400e; }
.sd-meta-pill-lock a { color: #92400e; font-weight: 600; }
[data-theme="dark"] .sd-meta-pill-lock { background: rgba(245, 158, 11, .15); color: #fbbf24; }
[data-theme="dark"] .sd-meta-pill-lock a { color: #fbbf24; }

.sd-status {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin: 0 0 16px;
  background: var(--bg-secondary, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  color: var(--text-secondary, #4b5563);
  font-size: 14px;
}
[data-theme="dark"] .sd-status {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}

.sd-results { padding: 20px; }

.sd-soon-card {
  padding: 40px 24px; text-align: center;
  margin: 0 auto; max-width: 560px;
}
.sd-soon-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(245, 158, 11, .15);
  color: #f59e0b;
  display: flex; align-items: center; justify-content: center;
}
.sd-soon-icon svg { width: 28px; height: 28px; }
.sd-soon-card h2 { margin: 0 0 8px; font-size: 20px; }
.sd-soon-card p { margin: 0 0 20px; color: var(--text-secondary, #6b7280); line-height: 1.5; }

.sd-not-found { padding: 40px 24px; text-align: center; max-width: 560px; margin: 0 auto; }

/* Guest paywall over the results table */
.sd-table-wrap { position: relative; }
.sd-row-blurred {
  filter: blur(6px); user-select: none; pointer-events: none;
  opacity: .85;
}
.sd-row-blurred a { pointer-events: none; }
.sd-paywall {
  position: absolute; left: 0; right: 0;
  /* Position the lock card over the blurred rows. Roughly at row 12.
     Using min(top%, px) so it doesn't escape on long result sets. */
  top: clamp(360px, 60%, 520px);
  margin: 0 auto;
  max-width: 480px; width: calc(100% - 32px);
  text-align: center;
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  padding: 24px 24px 20px;
  z-index: 5;
}
[data-theme="dark"] .sd-paywall {
  background: var(--bg-elevated, #1f2937);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
}
.sd-paywall-icon {
  width: 48px; height: 48px; margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(59, 130, 246, .12);
  color: var(--accent, #3b82f6);
  display: flex; align-items: center; justify-content: center;
}
.sd-paywall-icon svg { width: 24px; height: 24px; }
.sd-paywall h3 { margin: 0 0 8px; font-size: 17px; }
.sd-paywall p { margin: 0 0 16px; color: var(--text-secondary, #6b7280); font-size: 13.5px; line-height: 1.5; }
.sd-paywall-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Save row */
.sd-results .save-row { display: flex; gap: 8px; align-items: center; }
.sd-results .save-row input {
  padding: 6px 10px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; font-size: 13px; min-width: 200px;
  background: var(--bg-primary, #fff); color: var(--text-primary, #111827);
}
[data-theme="dark"] .sd-results .save-row input {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1);
}
.sd-save-locked {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-secondary, #6b7280);
  font-size: 13px;
}
.sd-save-locked svg { width: 16px; height: 16px; flex-shrink: 0; }
.sd-save-locked a { color: var(--accent, #3b82f6); font-weight: 600; text-decoration: none; }
.sd-save-locked a:hover { text-decoration: underline; }
[data-theme="dark"] .sd-save-locked { background: rgba(255,255,255,.05); }

/* "Custom" badge for saved user scripts */
.sc-badge-custom {
  background: rgba(99, 102, 241, .12);
  color: #4338ca;
}
[data-theme="dark"] .sc-badge-custom { color: #a5b4fc; }

/* ─────────────────────────────────────────────────────────────────────
   TradingView-style filter builder (Custom Script tab)
   ───────────────────────────────────────────────────────────────────── */

.filter-builder {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 20px;
}

.fb-group {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-primary, #fff);
  overflow: hidden;
  transition: border-color .15s;
}
[data-theme="dark"] .fb-group {
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.08);
}
.fb-group:hover { border-color: var(--accent, #3b82f6); }

.fb-group > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 14px; font-weight: 600;
  color: var(--text-primary, #111827);
}
.fb-group > summary::-webkit-details-marker { display: none; }
.fb-group-chevron {
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent var(--text-secondary, #6b7280);
  transition: transform .2s;
  flex-shrink: 0;
}
.fb-group[open] .fb-group-chevron { transform: rotate(90deg); }
.fb-group-title { flex: 1 1 auto; }
.fb-group-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 4px; text-transform: uppercase;
}
.fb-badge-live   { background: rgba(34, 197, 94, .15);  color: #16a34a; }
.fb-badge-soon   { background: rgba(245, 158, 11, .15); color: #d97706; }
[data-theme="dark"] .fb-badge-live { color: #4ade80; }
[data-theme="dark"] .fb-badge-soon { color: #fbbf24; }

.fb-group-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}
@media (max-width: 600px) {
  .fb-group-body { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px 12px; }
}

.fb-group-locked > summary { opacity: .65; cursor: pointer; }
.fb-group-locked .fb-group-body { background: rgba(0,0,0,.015); }
[data-theme="dark"] .fb-group-locked .fb-group-body { background: rgba(255,255,255,.02); }

.filter-group-soon { opacity: .55; pointer-events: none; }
.filter-group-soon input,
.filter-group-soon select {
  cursor: not-allowed; background: var(--bg-secondary, #f9fafb);
}
.fb-coming-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; margin-left: 6px;
  background: rgba(245, 158, 11, .12); color: #d97706;
}
[data-theme="dark"] .fb-coming-tag { color: #fbbf24; }

/* ─────────────────────────────────────────────────────────────────────
   Create New Script · TradingView-style horizontal-toolbar builder
   (public/scripts-tv2.js / scripts.html #tab-custom)
   ───────────────────────────────────────────────────────────────────── */

.tv2 {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: visible; /* let popovers escape this container */
}

/* Row 1: header */
.tv2-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.tv2-header-left  { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tv2-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tv2-save-note {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.tv2-save-note[hidden] { display: none; }
.tv2-title {
  margin: 0; font-size: 17px; font-weight: 700; color: var(--text-heading);
}
.tv2-count {
  font-size: 13px; color: var(--text-muted); font-weight: 600;
}
.tv2-name-input {
  padding: 7px 11px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-primary, #fff);
  font-size: 13px; min-width: 200px; max-width: 280px;
  color: var(--text-primary);
}
[data-theme="dark"] .tv2-name-input {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1);
}

/* ─────────────────────────────────────────────────────────────────────
   Row 2: horizontal filter button bar
   Two button states per filter:
     .tv2-fbtn   inactive  → outline pill with label + chevron
     .tv2-fpill  active    → dark filled pill with label, value, and ×
   ───────────────────────────────────────────────────────────────────── */
.tv2-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary, #fafbfc);
}
[data-theme="dark"] .tv2-filter-bar { background: rgba(255,255,255,.015); }

/* Outline button (inactive) */
.tv2-fbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-primary); cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.tv2-fbtn:hover { border-color: var(--text-muted); background: var(--bg-secondary, #fafbfc); }
.tv2-fbtn-open  { background: var(--bg-secondary, #fafbfc); border-color: var(--text-muted); }
[data-theme="dark"] .tv2-fbtn:hover,
[data-theme="dark"] .tv2-fbtn-open { background: rgba(255,255,255,.05); }
.tv2-fbtn-label { color: var(--text-primary); }
.tv2-fbtn-caret {
  width: 9px; height: 6px; color: var(--text-muted);
  transition: transform .15s;
}
.tv2-fbtn-open .tv2-fbtn-caret { transform: rotate(180deg); }

/* Filled dark pill (active) */
.tv2-fpill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px;
  background: #2b2e34;
  border: 1px solid #2b2e34;
  border-radius: 6px;
  font-family: inherit; font-size: 13px;
  color: #d9dcdf; cursor: pointer; white-space: nowrap;
  transition: filter .12s;
}
.tv2-fpill:hover { filter: brightness(1.08); }
[data-theme="dark"] .tv2-fpill { background: #3a3d44; border-color: #3a3d44; }
.tv2-fpill-label  { color: #c5c8cc; }
.tv2-fpill-value  { color: #fff; font-weight: 700; }
.tv2-pill-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: #fff; color: #1f2330;
  border-radius: 100px;
  font-size: 12px; font-weight: 700;
}
.tv2-fpill-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 2px;
  color: #c5c8cc; border-radius: 4px;
  cursor: pointer;
}
.tv2-fpill-x:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Status line */
.tv2-status {
  padding: 0 18px; min-height: 22px;
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center;
}
.tv2-status:empty { padding: 0; min-height: 0; }
.tv2-status.tv2-status-busy::before {
  content: ''; width: 12px; height: 12px; margin-right: 8px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: tv2-spin .6s linear infinite;
}
.tv2-status.tv2-status-error { color: var(--red, #dc2626); }
.tv2-status.tv2-status-ok    { color: var(--green, #16a34a); }
@keyframes tv2-spin { to { transform: rotate(360deg); } }

/* Column-set tabs */
.tv2-colset-tabs {
  display: flex; gap: 2px;
  padding: 6px 18px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: thin;
}
.tv2-coltab {
  position: relative;
  padding: 8px 14px; margin-bottom: -1px;
  background: none; border: 1px solid transparent; border-bottom: 0;
  border-radius: 6px 6px 0 0;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.tv2-coltab:hover { color: var(--text-primary); }
.tv2-coltab-on {
  color: var(--accent); font-weight: 600;
  background: var(--bg-card);
  border-color: var(--border);
}
.tv2-coltab-on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--bg-card);
}

/* Sticky "+" column at the far right of the table header */
.tv2-table thead th.tv2-th-add {
  width: 40px; min-width: 40px;
  padding: 8px 10px;
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  /* Optional: stick to the right edge during horizontal scroll. */
  position: sticky; right: 0; z-index: 2;
  background: var(--bg-secondary, #fafbfc);
  border-left: 1px solid var(--border);
}
[data-theme="dark"] .tv2-table thead th.tv2-th-add { background: rgba(255,255,255,.03); }
.tv2-table thead th.tv2-th-add:hover { color: var(--text-primary); }
.tv2-table tbody td.tv2-td-add {
  width: 40px; min-width: 40px;
  padding: 0;
  position: sticky; right: 0;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
}
[data-theme="dark"] .tv2-table tbody td.tv2-td-add { background: var(--bg-card); }
.tv2-table tbody tr:hover td.tv2-td-add { background: var(--bg-secondary, #fafbfc); }
[data-theme="dark"] .tv2-table tbody tr:hover td.tv2-td-add { background: rgba(255,255,255,.025); }

/* Sort indicator (small arrow next to the column label) */
.tv2-th-label { vertical-align: middle; }
.tv2-th-sort {
  display: inline-block; margin-left: 4px;
  color: var(--text-muted); font-weight: 500;
}

/* Results table */
.tv2-table-wrap {
  overflow: auto; max-height: calc(100vh - 380px); min-height: 320px;
}
.tv2-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px;
}
.tv2-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-secondary, #fafbfc);
  text-align: left; font-weight: 600;
  color: var(--text-muted); white-space: nowrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none;
}
[data-theme="dark"] .tv2-table thead th { background: rgba(255,255,255,.03); }
.tv2-table thead th:hover { color: var(--text-primary); }
.tv2-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary); white-space: nowrap;
}
.tv2-table tbody tr:hover td { background: var(--bg-secondary, #fafbfc); }
[data-theme="dark"] .tv2-table tbody tr:hover td { background: rgba(255,255,255,.025); }
.tv2-ticker { color: var(--accent); font-weight: 600; text-decoration: none; }
.tv2-ticker:hover { text-decoration: underline; }
.tv2-table .pos { color: var(--green, #16a34a); font-weight: 500; }
.tv2-table .neg { color: var(--red, #dc2626); font-weight: 500; }
.tv2-empty {
  text-align: center; padding: 36px 16px;
  color: var(--text-muted); font-style: italic;
}
.tv2-empty-error { color: var(--red, #dc2626); font-style: normal; }
.tv2-retry {
  margin-left: 6px; padding: 3px 10px;
  background: var(--accent); color: #fff;
  border: 0; border-radius: 4px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.tv2-retry:hover { filter: brightness(1.08); }

/* Skeleton rows */
.tv2-skel td { padding: 12px 14px; }
.tv2-skel-cell {
  display: block; width: 100%; height: 12px;
  background: linear-gradient(90deg,
    var(--border) 0%,
    rgba(255,255,255,.4) 50%,
    var(--border) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: tv2-skel 1.2s linear infinite;
  opacity: .55;
}
[data-theme="dark"] .tv2-skel-cell {
  background: linear-gradient(90deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.06) 100%);
  background-size: 200% 100%; opacity: .85;
}
@keyframes tv2-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─────────────────────────────────────────────────────────────────────
   Popover (filter editor)
   The popover hosts either:
     • preset list view: title + ? + trash, optional period selector,
       search, stacked preset rows (each: bold label + grey caption),
       "Manual setup" footer
     • manual view: title with back-arrow, Min/Max inputs, Clear/Apply
     • sector view: title + ? + trash, search, checkbox list,
       "Select all" footer
   ───────────────────────────────────────────────────────────────────── */
.tv2-popover {
  /* JS sets position: fixed and left/top from the anchor button's
     viewport rect. We default to fixed here too in case JS hasn't
     run yet — avoids a flash at the document origin. */
  position: fixed;
  z-index: 1000;
  min-width: 300px; max-width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden;
}
[data-theme="dark"] .tv2-popover {
  background: var(--bg-elevated, #1f2937);
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
}
.tv2-pop-body {
  padding: 14px 14px 6px;
  max-height: 520px;
  overflow-y: auto;
}

/* Popover header: title + help dot + trash icon */
.tv2-pop-head2 {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.tv2-pop-title2 {
  flex: 1;
  font-size: 14px; font-weight: 700;
  color: var(--text-heading); line-height: 1.2;
  display: inline-flex; align-items: center; gap: 6px;
}
.tv2-pop-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: rgba(0,0,0,.08); color: var(--text-muted);
  border-radius: 50%;
  font-size: 11px; font-weight: 600;
  cursor: help;
}
[data-theme="dark"] .tv2-pop-help { background: rgba(255,255,255,.12); }
.tv2-pop-trash,
.tv2-pop-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-muted); border-radius: 4px;
  padding: 0;
}
.tv2-pop-trash:hover,
.tv2-pop-back:hover { color: var(--text-primary); background: rgba(0,0,0,.04); }
[data-theme="dark"] .tv2-pop-trash:hover,
[data-theme="dark"] .tv2-pop-back:hover { background: rgba(255,255,255,.06); }

/* Period sub-dropdown (under the title) — "1 day ▾", "Year to date ▾", etc. */
.tv2-period { position: relative; margin-bottom: 10px; }
.tv2-period-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--text-primary);
}
.tv2-period-trigger:hover { color: var(--accent); }
.tv2-period-caret {
  width: 8px; height: 5px; color: var(--text-muted); margin-left: 2px;
}
.tv2-period-menu {
  position: absolute; top: 100%; left: 0; z-index: 5;
  margin-top: 4px;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: 6px 0;
  max-height: 280px; overflow-y: auto;
}
[data-theme="dark"] .tv2-period-menu {
  background: var(--bg-elevated, #2a2f3a);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.tv2-period-section {
  padding: 6px 14px 4px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.tv2-period-item {
  padding: 7px 14px;
  font-size: 13px; color: var(--text-primary);
  cursor: pointer;
}
.tv2-period-item:hover { background: var(--bg-secondary, #fafbfc); }
[data-theme="dark"] .tv2-period-item:hover { background: rgba(255,255,255,.05); }
.tv2-period-item-on {
  background: #1f2330; color: #fff; font-weight: 600;
}
.tv2-period-item-on:hover { background: #1f2330; }
[data-theme="dark"] .tv2-period-item-on { background: #3a3d44; }
.tv2-period-item-dis { color: var(--text-muted); cursor: not-allowed; opacity: .5; }
.tv2-period-item-dis:hover { background: transparent; }

/* Search box inside popover */
.tv2-pop-search { margin-bottom: 8px; }
.tv2-pop-search input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-primary, #fff);
  font-size: 13px; color: var(--text-primary);
  box-sizing: border-box;
}
.tv2-pop-search input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59,130,246,.18);
}
[data-theme="dark"] .tv2-pop-search input {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1);
}

/* Stacked preset rows: "Above 30%" / grey caption "Exceptional up" */
.tv2-pop-rows {
  display: flex; flex-direction: column;
  margin: 0 -6px 6px;
}
.tv2-row {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .1s, border-color .1s;
}
.tv2-row:hover { background: var(--bg-secondary, #fafbfc); }
[data-theme="dark"] .tv2-row:hover { background: rgba(255,255,255,.05); }
.tv2-row-on {
  border-color: var(--accent);
  background: rgba(59,130,246,.06);
}
[data-theme="dark"] .tv2-row-on { background: rgba(96,165,250,.1); }
.tv2-row-label {
  font-size: 14px; font-weight: 500; color: var(--text-primary);
  line-height: 1.3;
}
.tv2-row-desc {
  font-size: 12px; color: var(--text-muted);
  margin-top: 1px; line-height: 1.3;
}
.tv2-row-empty {
  padding: 14px; text-align: center;
  font-size: 12px; color: var(--text-muted); font-style: italic;
}
.tv2-muted { opacity: .7; }

/* Manual setup footer link */
.tv2-pop-manual {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% + 28px); margin: 6px -14px -6px;
  padding: 11px 18px;
  background: none; border: 0; border-top: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-primary);
}
.tv2-pop-manual:hover { background: var(--bg-secondary, #fafbfc); }
[data-theme="dark"] .tv2-pop-manual:hover { background: rgba(255,255,255,.05); }
.tv2-pop-manual svg { color: var(--text-muted); }

/* Manual mode: Min/Max rows reuse the existing label/input pattern */
.tv2-pop-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.tv2-pop-row-label {
  width: 42px; font-size: 12px; color: var(--text-muted);
}
.tv2-pop-row input[type="number"],
.tv2-pop-row input[type="text"] {
  flex: 1; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-primary, #fff);
  font-size: 13px; color: var(--text-primary);
  box-sizing: border-box;
}
[data-theme="dark"] .tv2-pop-row input {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1);
}
.tv2-pop-unit { font-size: 12px; color: var(--text-muted); min-width: 14px; }

.tv2-pop-footer {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 10px 0 4px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}

/* Sector popover: checkbox list + "Select all" footer */
.tv2-checklist {
  display: flex; flex-direction: column;
  margin: 0 -6px 4px;
  max-height: 320px; overflow-y: auto;
}
.tv2-checkrow {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px; color: var(--text-primary);
  border: 1.5px solid transparent;
}
.tv2-checkrow:hover { background: var(--bg-secondary, #fafbfc); }
[data-theme="dark"] .tv2-checkrow:hover { background: rgba(255,255,255,.05); }
.tv2-checkrow input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.tv2-checkbox-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid var(--border); border-radius: 4px;
  background: var(--bg-primary, #fff);
  position: relative;
  transition: border-color .1s, background .1s;
}
.tv2-checkrow input:checked ~ .tv2-checkbox-icon {
  border-color: var(--accent);
}
.tv2-checkrow input:checked ~ .tv2-checkbox-icon::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 11px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[data-theme="dark"] .tv2-checkbox-icon { background: rgba(255,255,255,.04); }
.tv2-checkrow-label { flex: 1; }

.tv2-pop-selectall {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% + 28px); margin: 6px -14px -6px;
  padding: 11px 18px;
  background: none; border: 0; border-top: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-primary);
}
.tv2-pop-selectall:hover { background: var(--bg-secondary, #fafbfc); }
[data-theme="dark"] .tv2-pop-selectall:hover { background: rgba(255,255,255,.05); }
.tv2-pop-selectall svg { color: var(--text-muted); }

/* 52W toggle group (Near High / Near Low in manual mode) */
.tv2-toggle-group {
  display: flex; gap: 6px; margin-bottom: 12px;
}
.tv2-toggle {
  flex: 1;
  padding: 7px 10px;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-primary); cursor: pointer;
}
.tv2-toggle:hover { border-color: var(--accent); }
.tv2-toggle-on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────
   Column picker (the "+" popover) — two-level: categories → columns
   ───────────────────────────────────────────────────────────────────── */
.tv2-colpicker {
  min-width: 340px; max-width: 380px;
}
.tv2-cp-rows {
  display: flex; flex-direction: column;
  margin: 0 -6px;
  max-height: 380px; overflow-y: auto;
}
.tv2-cp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px; color: var(--text-primary);
  border: 1.5px solid transparent;
}
.tv2-cp-row:hover { background: var(--bg-secondary, #fafbfc); }
[data-theme="dark"] .tv2-cp-row:hover { background: rgba(255,255,255,.05); }
.tv2-cp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-primary);
  flex-shrink: 0;
}
[data-theme="dark"] .tv2-cp-icon { border-color: rgba(255,255,255,.18); }
.tv2-cp-row-label { flex: 1; }
.tv2-cp-row-count {
  font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
/* Column rows (level 2 + search hits): already-added columns get a
   filled grey background so users see at a glance which columns are
   in the current layout. Clicking toggles add/remove. */
.tv2-cp-col-row { padding-left: 12px; }
.tv2-cp-row-added {
  background: rgba(0,0,0,.05);
}
[data-theme="dark"] .tv2-cp-row-added { background: rgba(255,255,255,.08); }
.tv2-cp-row-added:hover { background: rgba(0,0,0,.08); }
[data-theme="dark"] .tv2-cp-row-added:hover { background: rgba(255,255,255,.12); }

/* ─────────────────────────────────────────────────────────────────────
   Column-header dropdown menu (sort, delete, move-left/start/right/end)
   Triggered by clicking any column header in the results table.
   ───────────────────────────────────────────────────────────────────── */
.tv2-colmenu {
  min-width: 230px; max-width: 280px;
  padding: 6px 0;
}
.tv2-cm-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  padding: 10px 14px 6px;
}
.tv2-cm-title {
  font-size: 14px; font-weight: 700; color: var(--text-heading);
  display: inline-flex; align-items: center; gap: 6px;
}
.tv2-cm-trash {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-muted); border-radius: 4px;
}
.tv2-cm-trash:hover { color: var(--text-primary); background: rgba(0,0,0,.04); }
[data-theme="dark"] .tv2-cm-trash:hover { background: rgba(255,255,255,.06); }
.tv2-cm-sep {
  height: 1px; background: var(--border); margin: 4px 0;
}
.tv2-cm-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 8px 14px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--text-primary);
  text-align: left;
}
.tv2-cm-item:hover { background: var(--bg-secondary, #fafbfc); }
[data-theme="dark"] .tv2-cm-item:hover { background: rgba(255,255,255,.05); }
.tv2-cm-item svg { color: var(--text-muted); flex-shrink: 0; }
.tv2-cm-item:hover svg { color: var(--text-primary); }
.tv2-cm-item-dis,
.tv2-cm-item-dis:hover {
  color: var(--text-muted); background: none; cursor: not-allowed; opacity: .5;
}
.tv2-cm-item-dis:hover svg { color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────────────
   Mobile / tablet: bottom-sheet presentation for every TV2 popover
   The popover host elements (`.tv2-popover`, `.tv2-colpicker`,
   `.tv2-colmenu`) all use the same `.tv2-sheet-mode` modifier.
   When the JS detects the viewport is mobile or `cm-header.js` has
   set `data-cm-forced-mobile`, it adds `.tv2-sheet-mode` to the host
   and shows a shared `.tv2-sheet-backdrop` behind it.
   ───────────────────────────────────────────────────────────────────── */
.tv2-sheet-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
[data-theme="dark"] .tv2-sheet-backdrop { background: rgba(0, 0, 0, 0.65); }

.tv2-popover.tv2-sheet-mode {
  /* Override the desktop floating-box layout entirely. The host
     spans the full width at the bottom edge of the viewport and
     animates up. The body's overflow scrolling is preserved so
     long preset lists / column lists still scroll inside the sheet. */
  position: fixed;
  left: 0; right: 0; bottom: 0; top: auto;
  width: 100%;
  min-width: 0; max-width: 100%;
  margin: 0;
  border-radius: 18px 18px 0 0;
  border: 0; border-top: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
  max-height: 85vh;
  display: flex; flex-direction: column;
  /* Slide-up animation: start translated, then settle when the JS
     adds `.tv2-sheet-shown` on the next frame. */
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
  z-index: 1210;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tv2-popover.tv2-sheet-mode.tv2-sheet-shown { transform: translateY(0); }

/* Drag grabber at the top — visual only, matches .tcm-sheet pattern. */
.tv2-popover.tv2-sheet-mode::before {
  content: '';
  display: block;
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border);
  margin: 8px auto 4px;
  flex-shrink: 0;
}

/* The body needs to scroll, not the host (otherwise the grabber
   scrolls away with the content). */
.tv2-popover.tv2-sheet-mode .tv2-pop-body {
  max-height: none;
  overflow-y: auto;
  padding: 12px 18px 20px;
  flex: 1 1 auto;
}

/* Sheet header gets a slightly bigger title for finger-friendliness. */
.tv2-popover.tv2-sheet-mode .tv2-pop-title2 { font-size: 16px; }
.tv2-popover.tv2-sheet-mode .tv2-pop-head2  { margin-bottom: 12px; }

/* Preset rows / category rows: bigger touch targets on mobile. */
.tv2-popover.tv2-sheet-mode .tv2-row,
.tv2-popover.tv2-sheet-mode .tv2-checkrow,
.tv2-popover.tv2-sheet-mode .tv2-cp-row {
  padding-top: 12px; padding-bottom: 12px;
}
.tv2-popover.tv2-sheet-mode .tv2-row-label,
.tv2-popover.tv2-sheet-mode .tv2-checkrow-label,
.tv2-popover.tv2-sheet-mode .tv2-cp-row-label {
  font-size: 15px;
}

/* Column-header menu items also get bigger hit areas in the sheet. */
.tv2-colmenu.tv2-sheet-mode .tv2-cm-item {
  padding: 14px 18px;
  font-size: 15px;
}
.tv2-colmenu.tv2-sheet-mode .tv2-cm-head {
  padding: 14px 18px 8px;
}
.tv2-colmenu.tv2-sheet-mode .tv2-cm-title { font-size: 16px; }
/* Colmenu has no wrapping `.tv2-pop-body` — make the host itself
   scrollable in sheet mode in case the menu grows past the viewport. */
.tv2-colmenu.tv2-sheet-mode { overflow-y: auto; }

/* The period sub-menu inside a sheet can't escape its container
   like it does on desktop (would overflow the screen edge), so make
   it span the full sheet width inline. */
.tv2-popover.tv2-sheet-mode .tv2-period-menu {
  position: static;
  width: auto;
  margin-top: 6px;
  box-shadow: none;
  border-radius: 8px;
  max-height: 200px;
}

/* Selected sort marker stays visible in sheet too — no change needed,
   but tighten the search box and surrounding spacing. */
.tv2-popover.tv2-sheet-mode .tv2-pop-search input { font-size: 15px; padding: 10px 12px; }

/* Lock background scroll while a sheet is open. Inline elements on
   the page underneath shouldn't scroll behind the sheet. */
html.tv2-sheet-open,
html.tv2-sheet-open body { overflow: hidden; }

/* ─────────────────────────────────────────────────────────────────────
   Guest-lock overlay for /scripts saved tab
   We render the lock on TOP of the existing tab content (rather than
   replacing the content's innerHTML, which would destroy JS event
   listeners on filter buttons / preset chips / column tabs).
   ───────────────────────────────────────────────────────────────────── */
#tab-custom, #tab-saved { position: relative; }
.scripts-guest-locked > *:not(.scripts-guest-lock-overlay) {
  /* Hide the real content so guests don't briefly see private saved lists
     before /auth/me resolves. The DOM stays intact so JS listeners
     and state are preserved across the guest → authed transition. */
  visibility: hidden !important;
}
.scripts-guest-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  z-index: 5;
}
.scripts-guest-lock-overlay > .scripts-guest-lock {
  flex: 1;
}