:root {
  color-scheme: dark;
  --bg: #050505;
  --bg-panel: #121212;
  --surface: #161f3d;
  --border: #2a355e;
  --text: #e8eeff;
  --muted: #98a6cf;
  --accent: #6f8fff;
  --success: #2fcf84;
  --danger: #ff5f7f;
  --warning: #f6b34b;
  --radius: 12px;
  --mono: "IBM Plex Mono", monospace;
  --sans: "Inter", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sans);
  background: #000000;
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.terminal-app,
.app-shell {
  background: #000000;
}

html {
  scroll-behavior: smooth;
}

.hidden {
  display: none !important;
}

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

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

.app-ambient,
.ticker-bar,
.topbar__meta,
.topbar__guest,
.topbar__user,
.shell-toolbar,
.context-ribbon,
.mobile-dock,
.briefing-drawer,
.rail-drawer,
.briefingDrawerBackdrop,
.railDrawerBackdrop {
  display: none !important;
}

.terminal-app,
.app-shell {
  min-height: 100vh;
  max-width: 1580px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 16px;
  padding: 18px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  background: linear-gradient(180deg, rgba(20, 30, 60, 0.94) 0%, rgba(14, 21, 46, 0.95) 100%);
  border: 1px solid rgba(67, 90, 162, 0.42);
  border-radius: 10px;
  padding: 0 12px;
  overflow: hidden;
}

.brand-block,
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 800;
}

.brand-block strong,
.topbar__brand strong {
  display: block;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
}

.brand-block p,
.topbar__brand span {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.brand-slogan {
  display: none;
}

.topbar-right,
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-chip {
  margin: 0;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(17, 24, 49, 0.9);
  color: var(--muted);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  white-space: nowrap;
}

.status-chip::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.chip-phase::before { background: var(--warning); }
.chip-server::before { background: var(--success); animation: dot-pulse 2.4s ease-in-out infinite; }
.chip-net::before { background: var(--accent); }

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.btn {
  border: 1px solid var(--border);
  background: #1c2850;
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}

.btn:hover {
  border-color: #4b63a7;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
}

.btn-outline {
  background: transparent;
  border-color: rgba(88, 166, 255, 0.45);
  color: var(--accent-blue);
}

.btn-outline:hover {
  background: rgba(88, 166, 255, 0.08);
  border-color: rgba(88, 166, 255, 0.7);
}

.btn-danger {
  background: rgba(127, 40, 62, 0.45);
  border-color: rgba(255, 95, 127, 0.62);
  color: #ffd8e1;
}

.btn-danger:hover {
  border-color: rgba(255, 125, 150, 0.9);
  background: rgba(142, 39, 66, 0.62);
}

.btn-ghost.is-active {
  color: #fff;
  border-color: rgba(115, 149, 255, 0.7);
  background: rgba(48, 69, 135, 0.35);
}

.function-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  position: sticky;
  top: 8px;
  z-index: 12;
  padding: 8px;
  border: 1px solid rgba(58, 78, 138, 0.34);
  border-radius: 14px;
  background: rgba(13, 20, 40, 0.78);
  backdrop-filter: blur(8px);
}

.function-key {
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--muted);
  border-radius: 10px;
  padding: 10px;
  text-align: left;
  display: grid;
  gap: 3px;
}

.function-key span {
  font-family: var(--mono);
  font-size: 0.65rem;
}

.function-key strong {
  font-size: 0.78rem;
}

.function-key.is-active {
  border-color: rgba(105, 140, 240, 0.8);
  color: #fff;
  background: linear-gradient(160deg, #1e3470 0%, #1a2b5e 100%);
  box-shadow: 0 0 0 1px rgba(105, 140, 240, 0.25);
}

.workspace-shell {
  display: grid;
  grid-template-columns: 255px 1fr;
  gap: 16px;
  min-height: 0;
}

.left-rail {
  display: grid;
  gap: 12px;
  /* When the combined rails (watchlist + alerts + briefing + portfolio) are
     taller than the viewport, scroll the whole rail instead of pushing cards
     off-screen. Stacks cleanly with each card's own internal max-height. */
  align-content: start;
  max-height: calc(100vh - 152px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px; /* breathing room for the scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 143, 255, 0.25) transparent;
}

.left-rail::-webkit-scrollbar {
  width: 7px;
}
.left-rail::-webkit-scrollbar-track {
  background: transparent;
}
.left-rail::-webkit-scrollbar-thumb {
  background: rgba(111, 143, 255, 0.18);
  border-radius: 999px;
  transition: background 160ms ease;
}
.left-rail::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 143, 255, 0.45);
}

.rail-card {
  border: 1px solid rgba(63, 84, 148, 0.44);
  border-radius: 14px;
  background: var(--bg-soft);
  overflow: hidden;
}

.rail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.rail-head h2 {
  margin: 0;
  font-size: 0.85rem;
}

.rail-head small {
  color: var(--muted);
  font-family: var(--mono);
}

/* ── Tier usage badges ────────────────────────────── */
.tier-badge {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 1px 6px;
  border-radius: 99px;
  transition: background 0.2s, color 0.2s;
}
.tier-badge.tier-warn {
  background: rgba(255, 180, 0, 0.15);
  color: var(--warning, #f5a623);
  border: 1px solid rgba(255, 180, 0, 0.35);
}
.tier-badge.tier-full {
  background: rgba(255, 80, 80, 0.15);
  color: var(--danger, #ff5f7f);
  border: 1px solid rgba(255, 80, 80, 0.35);
  animation: tier-pulse 2.4s ease-in-out infinite;
}
@keyframes tier-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* Rail upgrade nudge */
.rail-upgrade-nudge {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px 4px;
  padding: 7px 10px;
  background: rgba(255, 180, 0, 0.08);
  border: 1px dashed rgba(255, 180, 0, 0.4);
  border-radius: 8px;
  color: var(--warning, #f5a623);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}
.rail-upgrade-nudge:hover {
  background: rgba(255, 180, 0, 0.16);
}

.rail-body {
  padding: 8px;
  display: grid;
  gap: 8px;
  /* Dynamic height: scales with viewport so content never gets clipped without
     a clear scroll indicator. Uses min() so on very tall screens we don't
     waste space and on short screens we still get a scrollbar instead of
     content disappearing below the fold. */
  max-height: min(560px, calc(100vh - 220px));
  overflow-y: auto;
  overflow-x: hidden;
  /* Custom scrollbar so the scroll affordance is visible (Bloomberg-style
     thin track that hints at "more below" when content overflows). */
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 143, 255, 0.35) transparent;
  scroll-behavior: smooth;
}

.rail-body::-webkit-scrollbar {
  width: 8px;
}

.rail-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.rail-body::-webkit-scrollbar-thumb {
  background: rgba(111, 143, 255, 0.25);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 160ms ease;
}

.rail-body::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 143, 255, 0.55);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Subtle gradient fade at the bottom of the rail when scrollable, to hint
   that more content lives below. Pure CSS pseudo-element, no JS required. */
.rail-body {
  position: relative;
}

.rail-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 6px;
  position: relative;
  transition: opacity 120ms ease, transform 120ms ease;
}

.rail-row.is-dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

.rail-row.is-drop-target {
  outline: 2px solid rgba(111, 143, 255, 0.85);
  outline-offset: 2px;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(111, 143, 255, 0.18);
}

.rail-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(146, 173, 230, 0.35);
  font-size: 11px;
  letter-spacing: -1px;
  cursor: grab;
  user-select: none;
  transition: color 120ms ease;
}

.rail-drag-handle:hover {
  color: rgba(111, 143, 255, 0.85);
}

.rail-row:active .rail-drag-handle {
  cursor: grabbing;
}

.rail-item {
  border: 1px solid rgba(70, 94, 164, 0.35);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
}

.rail-item:hover {
  border-color: rgba(111, 143, 255, 0.55);
  background: rgba(111, 143, 255, 0.06);
}

.rail-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.rail-item-price {
  text-align: right;
}

.rail-item-spark {
  height: 22px;
  overflow: hidden;
  opacity: 0.85;
}

.rail-item-spark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rail-item small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}

.rail-remove {
  width: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

.alert-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.alert-row.is-triggered {
  border-color: #3e9f75;
}

.workspace-main {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
  min-height: 0;
}

.workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}

.panel {
  background-color: #121212;
  border-top: 1px solid #333;
  border-left: 1px solid #1a1a1a;
  border-right: 1px solid #0f0f0f;
  border-bottom: 1px solid #050505;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.panel-head,
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: none;
  background: linear-gradient(180deg, #181818 0%, #121212 100%);
  box-shadow: 0 1px 0 0 #232323 inset;
  font-family: var(--sans);
}

.panel-head h3,
.panel-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.panel-controls {
  display: flex;
  gap: 6px;
}

.panel-btn {
  border: 1px solid rgba(42, 53, 94, 0.7);
  border-radius: 6px;
  background: rgba(20, 30, 62, 0.6);
  color: var(--muted);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}

.panel-btn:hover {
  border-color: rgba(110, 140, 240, 0.7);
  color: var(--text);
  background: rgba(40, 56, 110, 0.7);
}

.panel-content {
  padding: 14px;
  overflow: auto;
  background: transparent;
}

.command-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(91, 115, 191, 0.44);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 24, 52, 0.96) 0%, rgba(12, 18, 40, 0.97) 100%);
  padding: 12px 14px;
  position: relative;
  transition: border-color .18s, box-shadow .18s;
}

.command-shell:focus-within {
  border-color: rgba(79, 124, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.1);
}

.cmd-prefix {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.78rem;
}

.command-input {
  border: 1px solid rgba(86, 108, 176, 0.42);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 0.84rem;
  outline: none;
  transition: border-color .16s;
}

.command-input:focus {
  border-color: rgba(79, 124, 255, 0.5);
}

.autocomplete {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 8px);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 6px;
  display: grid;
  gap: 4px;
  /* Anchored above the input. Without a max-height a long list grows off the
     top of the viewport and the user can't reach the bottom items because the
     page itself stops scrolling. Cap it and let the dropdown own its scroll. */
  max-height: min(60vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 60;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}

.autocomplete-item {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.autocomplete-item:hover,
.autocomplete-item.is-highlighted {
  border-color: var(--border);
  background: rgba(22, 31, 61, 0.5);
  outline: none;
}
.autocomplete-item.is-highlighted {
  border-color: rgba(111, 143, 255, 0.4);
  background: rgba(111, 143, 255, 0.08);
}

.ac-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.ac-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ac-desc {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-price {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.ac-pct {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.ac-category-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ac-cat-action { background: var(--accent); }
.ac-cat-command { background: var(--warning); }
.ac-cat-symbol { background: var(--success); }

.statusbar,
.status-bar {
  border: 1px solid rgba(61, 83, 146, 0.42);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(17, 25, 52, 0.95) 0%, rgba(13, 20, 43, 0.95) 100%);
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--muted);
  font-size: 0.78rem;
}

.statusbar strong,
.status-bar strong {
  color: var(--text);
}

.statusbar-market-clock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.market-clock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
  transition: background 0.5s;
}

.statusbar-hint {
  margin-left: auto;
  opacity: 0.55;
  font-size: 0.72rem;
}

.stack {
  display: grid;
  gap: 10px;
}

.card {
  border: 1px solid rgba(65, 87, 150, 0.4);
  border-radius: 14px;
  background: var(--surface);
  padding: 13px;
}

.card-head {
  margin-bottom: 10px;
}

.card-head h4 {
  margin: 0;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stat-card span,
.stat-card small {
  color: var(--muted);
  font-size: 0.75rem;
}

.stat-card strong {
  display: block;
  margin: 6px 0;
  font-size: 1.2rem;
  font-family: var(--mono);
  letter-spacing: -0.02em;
}

.chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.chip {
  border: 1px solid rgba(42, 53, 94, 0.8);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(24, 36, 74, 0.98), rgba(17, 25, 56, 0.98));
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
  display: grid;
  gap: 3px;
  cursor: pointer;
}

.quote-card h4 {
  margin: 0 0 8px;
}

.quote-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.quote-row strong {
  font-size: 1.3rem;
}

.quote-card p {
  margin: 0;
  color: var(--muted);
}

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

.chart-card {
  min-height: 260px;
  padding: 16px;
}

.line-chart {
  width: 100%;
  height: 260px;
  display: block;
}

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

.data-table th,
.data-table td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(68, 88, 150, 0.34);
  text-align: left;
  font-size: 0.8rem;
}

.data-table tbody tr:hover {
  background: rgba(31, 44, 88, 0.28);
}

.data-table th {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.table-link {
  border: none;
  background: transparent;
  color: #8eb0ff;
  cursor: pointer;
  font-weight: 600;
}

.news-card small {
  color: var(--muted);
}

.news-card p {
  margin: 8px 0;
}

.news-card a {
  color: #8eb0ff;
}

/* ── Screener Presets Row ── */
.screener-presets-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

.screener-presets-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.screener-preset-chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
  white-space: nowrap;
}

.screener-preset-chip:hover {
  border-color: rgba(111, 143, 255, 0.6);
  color: var(--text);
  background: rgba(111, 143, 255, 0.07);
}

.screener-preset-chip.is-active {
  border-color: var(--accent);
  color: #fff;
  background: rgba(111, 143, 255, 0.18);
}

/* ── Screener Filter Actions ── */
.screener-filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.screener-export-btn {
  white-space: nowrap;
}

.screener-filters,
.add-pos-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.screener-filters {
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  align-items: center;
}

.screener-filters .screener-filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .screener-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .screener-filters .screener-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

.table-sort {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  letter-spacing: inherit;
  text-transform: inherit;
}
.table-sort:hover { color: var(--text, #e5ecf8); }
.table-sort.is-active { color: rgb(156, 185, 255); font-weight: 700; }

.muted-cell {
  color: var(--muted, #99a4ba);
  font-size: 0.92em;
}

.screener-table .screener-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screener-filters input,
.screener-filters select,
.add-pos-form input,
.calc-input input,
.auth-form input,
.auth-form select {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #1a254b;
  color: var(--text);
  padding: 8px 10px;
  width: 100%;
}

.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tile {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #1a254b;
  color: var(--text);
  padding: 8px;
  display: grid;
  gap: 2px;
  text-align: center;
}

.tile.positive {
  border-color: #2a7458;
}

.tile.negative {
  border-color: #7f3d4f;
}

.curve-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}

.curve-col {
  display: grid;
  gap: 4px;
  text-align: center;
}

.curve-bar {
  width: 100%;
  background: #4f7cff;
  border-radius: 4px 4px 0 0;
}

.curve-col strong {
  font-size: 0.72rem;
}

.curve-col small {
  color: var(--muted);
  font-size: 0.7rem;
}

.fx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.fx-card {
  display: grid;
  gap: 4px;
}

.fx-card span {
  color: var(--muted);
  font-size: 0.75rem;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.calc-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.calc-input {
  display: grid;
  gap: 4px;
}

.calc-input span {
  color: var(--muted);
  font-size: 0.75rem;
}

.calc-results {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.calc-results p {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.calc-aside {
  color: var(--muted);
  font-size: 0.74rem;
  font-family: var(--mono);
}

.calc-greeks-header {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.calc-greeks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 8px;
}

.calc-greek {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 7px;
  border-radius: 5px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}

.calc-greek span {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  cursor: help;
}

.calc-greek strong {
  font-family: var(--mono);
  font-size: 0.78rem;
}

.empty-state,
.empty-inline {
  color: var(--muted);
  text-align: center;
  padding: 20px;
}

/* ── Error state card (used by renderers for fetch failures) ─────── */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
  padding: 20px;
}
.error-state .error-icon {
  font-size: 1.25rem;
  color: var(--negative, #ff5252);
  line-height: 1;
}
.error-state .btn {
  margin-top: 4px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  /* Slightly heavier dim + an explicit z-index so chart tooltips, ticker
     labels, and other absolutely-positioned overlays sit BEHIND modals.
     Sits above onboarding (z 9000) and command palette (z 8500). */
  background: rgba(5, 7, 14, 0.85);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 9500;
}
/* Modal contents sit above the backdrop's blur so they look crisp. */
.modal-backdrop > * {
  position: relative;
  z-index: 1;
}

.auth-modal {
  width: min(560px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.auth-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-head h2 {
  margin: 0;
  font-size: 1rem;
}

.icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.auth-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.auth-status[data-tone="error"] {
  color: var(--danger);
}

.auth-status[data-tone="neutral"] {
  color: var(--muted);
}

.auth-status[data-tone="success"] {
  color: var(--success);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.auth-tab {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 8px;
}

.auth-tab.is-active {
  background: #253a73;
  border-color: #5876d2;
  color: #fff;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form label {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}

.auth-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.auth-hint[data-tone="error"] {
  color: var(--danger);
}

.auth-hint[data-tone="success"] {
  color: var(--success);
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── Password strength meter ─────────────────────────────────────── */
.password-strength {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.password-strength-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  height: 4px;
}

.password-strength-bar {
  background: rgba(146, 173, 230, 0.16);
  border-radius: 2px;
  transition: background 160ms ease, transform 160ms ease;
}

.password-strength[data-score="1"] .password-strength-bar.is-active { background: #e85a5a; }
.password-strength[data-score="2"] .password-strength-bar.is-active { background: #ffa726; }
.password-strength[data-score="3"] .password-strength-bar.is-active { background: #ffc857; }
.password-strength[data-score="4"] .password-strength-bar.is-active { background: #4be09a; }

.password-strength-label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.password-strength[data-score="1"] .password-strength-label { color: #ef9999; }
.password-strength[data-score="2"] .password-strength-label { color: #ffc266; }
.password-strength[data-score="3"] .password-strength-label { color: #ffe082; }
.password-strength[data-score="4"] .password-strength-label { color: #4be09a; }

/* ── Auth meta row (forgot password / switch link) ───────────────── */
.auth-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: -4px;
  margin-bottom: 4px;
  font-size: 0.78rem;
}

.auth-meta-hint {
  color: var(--muted);
  font-size: 0.74rem;
}

.auth-text-link {
  background: none;
  border: none;
  color: rgba(111, 143, 255, 0.95);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-decoration: none;
  transition: color 120ms ease;
}

.auth-text-link:hover {
  color: #93b1ff;
  text-decoration: underline;
}

.settings-modal {
  width: min(620px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
}

.settings-modal .auth-form + .auth-form {
  border-top: 1px solid rgba(79, 100, 165, 0.4);
  padding-top: 12px;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast[data-tone="success"] {
  border-color: #2a7458;
  color: var(--success);
}

.toast[data-tone="error"] {
  border-color: #7f3d4f;
  color: var(--danger);
}

/* ── Desktop layout constraints ── */
.workspace-shell {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden;
}

.left-rail {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  flex: 0 0 280px !important;
  flex-shrink: 0 !important;
}

.workspace-main {
  flex: 1 1 auto !important;
  min-width: 800px !important;
  width: auto !important;
}

/* ── Tablet breakpoint ── */
@media (max-width: 1200px) {
  .function-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .workspace-shell {
    flex-direction: column !important;
    overflow-x: hidden !important;
  }

  .left-rail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .workspace-main {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   Mobile bottom panel nav (visible only at ≤768px)
   ───────────────────────────────────────────────────────────── */
.mobile-panel-nav {
  display: none; /* hidden by default; JS adds .is-visible on mobile */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(8, 12, 24, 0.97);
  border-top: 1px solid rgba(120, 140, 180, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0;
  safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-panel-nav.is-visible {
  display: flex;
}
.mobile-panel-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted, #99a4ba);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 52px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-panel-tab:active { opacity: 0.7; }
.mobile-panel-tab.is-active {
  color: #4f7cff;
}
.mobile-panel-tab svg {
  flex-shrink: 0;
  transition: color 0.15s;
}
.mobile-panel-tab.is-active svg {
  stroke: #4f7cff;
}

/* ── Mobile breakpoint ── */
@media (max-width: 768px) {
  .terminal-app,
  .app-shell {
    padding: 4px 4px 60px 4px; /* bottom padding clears the mobile nav */
    gap: 6px;
  }

  /* ── Topbar: compact single row, fixed height ── */
  .topbar {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    padding: 0 8px;
    gap: 6px;
  }
  .topbar-right {
    flex-wrap: nowrap !important;
    overflow: hidden;
    gap: 4px;
    flex-shrink: 0;
  }
  /* Hide low-priority topbar controls on mobile */
  #autoJumpButton,
  #resetFocusButton,
  #openCommandPalette,
  .topbar-divider {
    display: none !important;
  }
  .topbar-right .btn-ghost:not(#logoutButton):not(#openSettingsBtn):not(#openAuthBtn) {
    display: none !important;
  }
  .topbar-right .btn-ghost,
  .topbar-right .btn-icon {
    padding: 6px 8px;
    font-size: 0.7rem;
  }
  .brand-block strong {
    font-size: 0.9rem;
  }
  .chip-row {
    display: none !important;
  }
  .statusbar-hint {
    display: none !important;
  }

  /* ── Function row: tight 4-column strip ── */
  .function-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
  }
  .function-key {
    padding: 5px 3px;
  }
  .function-key span { font-size: 0.55rem; }
  .function-key strong { font-size: 0.65rem; }

  /* ── Overview strip: horizontally scrollable ── */
  .overview-strip {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    gap: 6px;
  }
  .overview-strip::-webkit-scrollbar { display: none; }
  .overview-card {
    flex-shrink: 0;
    min-width: 90px;
  }

  /* ── Workspace shell: column, no sidebar ── */
  .workspace-shell {
    flex-direction: column !important;
    overflow-x: hidden !important;
    gap: 0;
  }

  /* ── Left rail: horizontal scroll strip on mobile ── */
  .left-rail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: rgba(8, 12, 24, 0.6);
    border-bottom: 1px solid rgba(120, 140, 180, 0.12);
    padding: 4px 8px;
  }
  .left-rail::-webkit-scrollbar { display: none; }
  .left-rail .rail-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
  }
  .left-rail .rail-head {
    display: none; /* hide "Watchlist / Alerts" labels on mobile */
  }
  .left-rail .rail-body {
    display: flex;
    flex-direction: row;
    gap: 4px;
    overflow: visible;
  }
  .rail-item {
    flex-shrink: 0;
    min-width: 70px;
    max-width: 80px;
    padding: 4px 8px;
    border-radius: 6px;
  }

  /* ── Workspace main & grid ── */
  .workspace-main {
    min-width: 0 !important;
    width: 100% !important;
  }
  .workspace-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    height: 100%;
  }

  /* ── Panel: only the mobile-active one is visible ── */
  [data-panel].is-mobile-hidden {
    display: none !important;
  }
  .panel {
    min-height: calc(100dvh - 220px); /* full remaining height */
    height: auto;
  }
  .panel-content {
    padding: 8px;
    overflow-x: hidden;
  }

  /* ── All multi-col grids collapse to 1 col ── */
  .card-grid,
  .chip-grid,
  .split-grid,
  .heatmap-grid,
  .tile-grid,
  .fx-grid,
  .auth-grid,
  .screener-filters,
  .add-pos-form,
  .deep-dive-grid,
  .greeks-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Stat cards: 2-col on mobile for density ── */
  .card-grid-home,
  .card-grid-2 {
    grid-template-columns: 1fr 1fr !important;
  }

  .chart-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .curve-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* ── Tables: horizontal scroll on mobile ── */
  .data-table-wrapper,
  .financial-data-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table,
  .financial-data-table,
  .screener-table,
  .options-table {
    min-width: 480px;
  }
  /* Wrap any bare table that has no explicit wrapper */
  .panel-content article .data-table:not(.no-scroll),
  .panel-content article .financial-data-table:not(.no-scroll) {
    display: block;
    overflow-x: auto;
  }

  /* ── Trade ticket: 2-col on mobile ── */
  .trade-ticket {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  /* ── Screener filters: 2-col pill row ── */
  .screener-filters {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Row actions: wrap on mobile ── */
  .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .row-actions .btn-inline {
    padding: 4px 8px;
    font-size: 0.65rem;
  }

  /* ── Command shell ── */
  .command-shell {
    grid-template-columns: 1fr;
  }
  .cmd-prefix { display: none; }
  .command-palette { width: calc(100vw - 16px) !important; }
  .command-palette .command-input {
    height: 44px !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }

  /* ── Status bar ── */
  .statusbar,
  .status-bar {
    display: none; /* replaced by mobile nav; save the vertical space */
  }

  /* ── Quote view ── */
  .quote-hero { flex-direction: column !important; }
  .quote-meta-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .quote-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .quote-depth-grid { grid-template-columns: 1fr !important; }

  /* ── Toolbar: tight ── */
  .toolbar { gap: 4px; flex-wrap: wrap; }
  .toolbar .btn { padding: 6px 8px; font-size: 0.7rem; }
  .toolbar-wrap { row-gap: 6px; }

  /* ── Stat cards ── */
  .stat-card { padding: 10px 12px; }
  .stat-card strong { font-size: 1rem; }
  .stat-card small { font-size: 0.7rem; }

  /* ── Modal / auth ── */
  .modal-backdrop {
    padding: 8px;
    align-items: flex-start;
    padding-top: 10vh;
  }
  .auth-modal { width: 100%; }
  .notif-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Equity sparkline ── */
  .equity-spark-svg { height: 80px; }

  /* ── Welcome / tour modal ── */
  .tour-modal { max-height: 85vh; overflow-y: auto; }

  /* ── Typography ── */
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 1rem; }

  /* ── Calculator greeks: 2 columns on mobile ── */
  .calc-greeks-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Small phone breakpoint ── */
@media (max-width: 420px) {
  .topbar .brand-block strong,
  .topbar .topbar__brand strong {
    font-size: 0.85rem;
  }
  .brand-mark {
    width: 28px;
    height: 28px;
  }
  .brand-mark svg {
    width: 24px;
    height: 24px;
  }
  .panel {
    min-height: 300px;
  }
  .chart-summary-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .quote-meta-grid {
    grid-template-columns: 1fr !important;
  }
  /* Collapse stat cards to 1-col on very small screens */
  .card-grid-home { grid-template-columns: 1fr 1fr !important; }
  /* Trade ticket single col on tiny screens */
  .trade-ticket { grid-template-columns: 1fr !important; }
  /* Screener filters: single col */
  .screener-filters { grid-template-columns: 1fr !important; }
  /* Mobile nav: tighter */
  .mobile-panel-tab { min-height: 46px; padding: 6px 2px; }
  .mobile-panel-tab span { font-size: 8px; }
}

@media (max-width: 900px) {
  .workspace-grid,
  .split-grid,
  .heatmap-grid,
  .card-grid,
  .chip-grid,
  .tile-grid,
  .curve-grid,
  .fx-grid,
  .auth-grid,
  .screener-filters,
  .add-pos-form {
    grid-template-columns: 1fr;
  }

  .command-shell {
    grid-template-columns: 1fr;
  }

  .cmd-prefix {
    display: none;
  }
}

.workspace-grid,
.panel,
.panel-content,
.card,
.data-table,
.financial-data-table {
  min-width: 0;
}

.panel-head h3,
.status-chip,
.overview-card,
.table-link,
.data-table th,
.data-table td,
.financial-data-table th,
.financial-data-table td {
  white-space: nowrap;
}

/* Terminal input policy */
.terminal-input {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border-divider) !important;
  color: var(--text-primary) !important;
  height: 28px !important;
  padding: 0 8px !important;
  outline: none;
  transition: border-color 0.15s ease;
}

.terminal-input:focus {
  border-color: #4a90e2 !important;
}

/* Reserve error text space and avoid layout shift */
.error-message-container {
  height: 16px !important;
  color: var(--data-down) !important;
  font-size: 11px !important;
  visibility: hidden;
  margin: 0;
}

.error-message-container.active {
  visibility: visible;
}

/* Fullscreen command palette overlay */
.palette-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(2px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding-top: 20vh !important;
  z-index: 200 !important;
}

.palette-backdrop.hidden {
  display: none !important;
}

.command-palette {
  width: 680px !important;
  max-width: calc(100vw - 24px);
  position: relative;
  border: 1px solid var(--border-divider) !important;
  background: var(--bg-panel) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  flex-wrap: wrap;
  border-radius: 12px !important;
  overflow: hidden;
}

.command-palette .cmd-prefix {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 52px;
  font-size: 1.1rem;
  color: rgba(111,143,255,0.8);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-divider);
}

.command-palette #runCommandButton {
  display: none !important;
}

/* Keyboard hint badges in command palette */
.cmd-kbd-hint {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 10px;
  font-size: 0.68rem;
  color: rgba(152,166,207,0.5);
  font-family: "IBM Plex Mono", monospace;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-divider);
  border-left: 1px solid var(--border-divider);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .cmd-kbd-hint { display: none !important; }
}

.command-palette .command-input {
  display: block;
  flex: 1;
  height: 52px !important;
  padding: 0 12px !important;
  font-size: 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--border-divider) !important;
  background: transparent !important;
}

.command-palette .autocomplete {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 52px !important;
  border-top: none !important;
  background: var(--bg-panel) !important;
  border-radius: 0 0 12px 12px !important;
  overflow: hidden;
}

/* Candlestick chart surface */
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 380px;
}

.chart-canvas {
  width: 100%;
  height: 380px;
}

.chart-loading {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border-radius: 10px;
  background: rgba(15, 22, 43, 0.82);
  border: 1px solid var(--border-divider);
  padding: 10px;
}

.chart-loading .empty-state,
.chart-loading .empty-inline {
  padding: 8px;
}

.toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border-divider);
  align-self: center;
  flex-shrink: 0;
}

/* Chart indicator toggle bar */
.chart-indicator-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border, #1e2d4a);
}
.indicator-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.indicator-toggle {
  font-size: 0.7rem;
  font-family: var(--mono);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border, #1e2d4a);
  background: transparent;
  color: var(--muted, #7b91b5);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.3;
}
.indicator-toggle:hover {
  border-color: var(--accent, #2fcf84);
  color: var(--text, #e8f0fe);
}
.indicator-toggle.is-active {
  background: rgba(47, 207, 132, 0.12);
  border-color: var(--accent, #2fcf84);
  color: var(--accent, #2fcf84);
}

.chart-legend-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 6px 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Chart Bar Replay Controls (Phase 1 feature parity with TradingView) */
.chart-replay-controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.85rem;
  background: linear-gradient(180deg, rgba(20, 32, 56, 0.55) 0%, rgba(14, 22, 40, 0.65) 100%);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 6px;
  margin: 0 0.5rem 0.6rem;
  position: relative;
  font-family: var(--mono);
}
.chart-replay-controls::before {
  content: "REPLAY";
  position: absolute;
  top: -7px;
  left: 12px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  background: var(--bg, #0d1525);
  padding: 0 6px;
}
.chart-replay-toggle {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  min-width: 88px;
  border: 1px solid var(--border, #1e2d4a);
  background: rgba(47, 207, 132, 0.08);
  color: var(--accent, #2fcf84);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.chart-replay-toggle:hover {
  background: rgba(47, 207, 132, 0.18);
  border-color: var(--accent, #2fcf84);
  transform: translateY(-1px);
}
.chart-replay-toggle:active {
  transform: translateY(0);
}
.chart-replay-toggle.is-playing {
  background: rgba(255, 167, 38, 0.12);
  border-color: rgba(255, 167, 38, 0.6);
  color: rgb(255, 167, 38);
}
.chart-replay-slider {
  flex: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--border, #1e2d4a);
  border-radius: 3px;
  outline: none;
}
.chart-replay-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent, #2fcf84);
  cursor: pointer;
  border: 2px solid var(--bg, #0d1525);
  box-shadow: 0 0 0 1px var(--accent, #2fcf84), 0 2px 6px rgba(47, 207, 132, 0.4);
  transition: transform 0.15s;
}
.chart-replay-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.chart-replay-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent, #2fcf84);
  cursor: pointer;
  border: 2px solid var(--bg, #0d1525);
  box-shadow: 0 0 0 1px var(--accent, #2fcf84);
}
.chart-replay-label {
  min-width: 130px;
  text-align: right;
  font-size: 0.78rem;
  color: var(--text, #e8f0fe);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  border: 1px solid var(--border, #1e2d4a);
}
.chart-replay-hint {
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .chart-replay-controls {
    flex-wrap: wrap;
  }
  .chart-replay-label {
    min-width: 0;
    flex: 1;
  }
  .chart-replay-hint { display: none; }
}
.chart-replay-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  background: rgba(255, 167, 38, 0.92);
  color: rgb(20, 12, 0);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(255, 167, 38, 0.45), 0 0 0 1px rgba(255, 167, 38, 0.6);
  pointer-events: none;
  animation: replay-badge-fade-in 0.25s ease-out;
}
@keyframes replay-badge-fade-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Compound condition rule rows (Phase 2: multi-condition alerts) */
.rule-condition-text {
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.rule-watchlist-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 3px;
  background: rgba(111, 143, 255, 0.18);
  color: rgb(155, 175, 255);
  border: 1px solid rgba(111, 143, 255, 0.35);
  text-transform: uppercase;
  vertical-align: middle;
}

/* ── Quick Rule Builder (visual form for IF/THEN rules) ────────────────── */
.rules-head-left { display: flex; flex-direction: column; gap: 2px; }
.rule-builder-panel {
  background: rgba(13, 21, 37, 0.72);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: rule-builder-slide-in 0.15s ease-out;
}
@keyframes rule-builder-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.rule-builder-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 10px;
  align-items: end;
}
@media (max-width: 720px) {
  .rule-builder-grid { grid-template-columns: 1fr; }
}
.rule-builder-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rule-builder-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #7b91b5);
}
.rule-builder-input {
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 7px 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 4px;
  color: var(--text, #e8f0fe);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.rule-builder-input:focus {
  border-color: var(--accent, #2fcf84);
  background: rgba(47, 207, 132, 0.06);
}
.rule-builder-msg .rule-builder-input { width: 100%; }
.rule-builder-and summary {
  font-size: 0.72rem;
  color: var(--muted, #7b91b5);
  cursor: pointer;
  padding: 6px 0;
  letter-spacing: 0.04em;
  user-select: none;
}
.rule-builder-and summary:hover { color: var(--accent, #2fcf84); }
.rule-builder-and[open] summary { color: var(--text, #e8f0fe); }
.rule-builder-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid rgba(30, 45, 74, 0.5);
}
.rule-builder-preview {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted, #7b91b5);
  background: rgba(0, 0, 0, 0.2);
  padding: 5px 9px;
  border-radius: 4px;
  border: 1px dashed var(--border, #1e2d4a);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Pin/Star Rules ────────────────────────────────────────────────────── */
.rule-pin-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted, #7b91b5);
  cursor: pointer;
  padding: 2px 5px;
  font-size: 0.85rem;
  border-radius: 3px;
  transition: all 0.15s;
  margin-right: 4px;
}
.rule-pin-btn:hover { color: rgb(255, 200, 60); border-color: rgba(255, 200, 60, 0.35); }
.rule-pin-btn.is-pinned {
  color: rgb(255, 200, 60);
  background: rgba(255, 200, 60, 0.08);
}
.rule-live-row.is-pinned {
  border-left: 3px solid rgb(255, 200, 60);
  background: linear-gradient(90deg, rgba(255, 200, 60, 0.04) 0%, transparent 30%);
}

/* ── Workspace Export/Import buttons ──────────────────────────────────── */
.workspace-io-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.workspace-io-btn {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border, #1e2d4a);
  color: var(--muted, #7b91b5);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.workspace-io-btn:hover {
  border-color: var(--accent, #2fcf84);
  color: var(--accent, #2fcf84);
}

/* ── Options Strategy P&L Card ─────────────────────────────────────────── */
.pnl-strategy-card {
  position: relative;
}
.pnl-strategy-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #1e2d4a);
  background: rgba(13, 21, 37, 0.4);
}
.pnl-control {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 130px;
}
.pnl-control label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #7b91b5);
}
.pnl-control select {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 4px;
  color: var(--text, #e8f0fe);
  cursor: pointer;
}
.pnl-control select:hover {
  border-color: var(--accent, #2fcf84);
}
.pnl-strategy-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--border, #1e2d4a);
}
.pnl-stat {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid var(--border, #1e2d4a);
}
.pnl-stat:last-child { border-right: none; }
.pnl-stat span {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #7b91b5);
  font-weight: 600;
}
.pnl-stat strong {
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.pnl-chart-wrap {
  padding: 12px 14px 4px;
  background: rgba(0, 0, 0, 0.15);
}
.pnl-chart {
  width: 100%;
  height: auto;
  max-height: 260px;
  display: block;
}
.pnl-disclaimer {
  display: block;
  padding: 6px 14px 10px;
  font-size: 0.68rem;
  color: var(--muted, #7b91b5);
  font-style: italic;
}

/* ── Version pill in header ────────────────────────────────────────────── */
.version-pill {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  background: linear-gradient(135deg, rgba(47, 207, 132, 0.18) 0%, rgba(111, 143, 255, 0.18) 100%);
  border: 1px solid rgba(47, 207, 132, 0.4);
  color: rgb(155, 220, 180);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  position: relative;
}
.version-pill:hover {
  border-color: var(--accent, #2fcf84);
  color: var(--accent, #2fcf84);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47, 207, 132, 0.2);
}
.version-pill::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 6px;
  height: 6px;
  background: rgb(255, 200, 60);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 200, 60, 0.8);
  animation: version-pulse 2s ease-in-out infinite;
}
@keyframes version-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* ── What's New modal ──────────────────────────────────────────────────── */
.whats-new-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 26, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.whats-new-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.whats-new-card {
  position: relative;
  background: linear-gradient(180deg, #131e35 0%, #0d1525 100%);
  border: 1px solid rgba(47, 207, 132, 0.25);
  border-radius: 14px;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(47, 207, 132, 0.1);
  transform: scale(0.95) translateY(8px);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.whats-new-backdrop.is-open .whats-new-card {
  transform: scale(1) translateY(0);
}
.whats-new-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: 1px solid var(--border, #1e2d4a);
  color: var(--muted, #7b91b5);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: all 0.15s;
}
.whats-new-close:hover {
  border-color: var(--accent, #2fcf84);
  color: var(--accent, #2fcf84);
}
.whats-new-header {
  text-align: center;
  margin-bottom: 24px;
}
.whats-new-version {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(47, 207, 132, 0.2) 0%, rgba(111, 143, 255, 0.2) 100%);
  border: 1px solid rgba(47, 207, 132, 0.5);
  color: rgb(155, 220, 180);
  border-radius: 14px;
  margin-bottom: 12px;
}
.whats-new-header h2 {
  font-size: 1.6rem;
  margin: 4px 0 8px;
  color: var(--text, #e8f0fe);
}
.whats-new-subtitle {
  color: var(--muted, #7b91b5);
  font-size: 0.92rem;
  margin: 0;
}
.whats-new-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.whats-new-feature {
  background: rgba(13, 21, 37, 0.55);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 8px;
  padding: 16px;
  transition: transform 0.15s, border-color 0.15s;
}
.whats-new-feature:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 207, 132, 0.35);
}
.whats-new-icon {
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.whats-new-feature h3 {
  font-size: 0.95rem;
  margin: 0 0 6px;
  color: var(--text, #e8f0fe);
}
.whats-new-feature p {
  font-size: 0.78rem;
  color: var(--muted, #7b91b5);
  margin: 0;
  line-height: 1.5;
}
.whats-new-feature kbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 3px;
  color: var(--text, #e8f0fe);
}
.whats-new-feature code {
  font-size: 0.72rem;
  padding: 1px 4px;
  background: rgba(47, 207, 132, 0.08);
  border-radius: 3px;
  color: var(--accent, #2fcf84);
}
.whats-new-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border, #1e2d4a);
  flex-wrap: wrap;
  gap: 12px;
}
.whats-new-footer small {
  color: var(--muted, #7b91b5);
}
.whats-new-footer kbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 3px;
  color: var(--text, #e8f0fe);
}

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.line-chart {
  display: none !important;
}

/* Custom Scrollbar for Webkit */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-app);
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.auth-form input[type="file"] {
  border: 1px dashed var(--border-divider) !important;
  padding: 20px !important;
  background: var(--bg-app) !important;
  cursor: pointer;
  text-align: center;
  height: auto !important;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px !important;
}

.auth-form label {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-bottom: 4px;
}

.quote-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.deep-dive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.insight-block {
  border: 1px solid var(--border-divider);
  background: var(--bg-panel);
  padding: 6px;
  display: grid;
  gap: 2px;
}

.insight-block span {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
}

.insight-summary {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.news-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-divider);
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--data-up);
  text-transform: uppercase;
  margin-bottom: 2px;
  font-family: var(--mono);
}

.news-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.news-title {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
}

.news-title.news-title-positive {
  color: var(--data-up) !important;
}

.news-title.news-title-negative {
  color: var(--data-down) !important;
}

.news-title:hover {
  text-decoration: underline;
  color: #fff;
}

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

.news-sentiment.negative {
  color: var(--data-down);
}

.news-sentiment.positive {
  color: var(--data-up);
}

.sentiment-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}

.sentiment-dot-positive { background: var(--data-up); }
.sentiment-dot-negative { background: var(--data-down); }
.sentiment-dot-neutral  { background: var(--text-muted); }

@media (max-width: 900px) {
  .deep-dive-grid {
    grid-template-columns: 1fr;
  }

  .news-row,
  .quote-action-row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(145deg, #0e1930 0%, #172040 100%);
  border: 1px solid rgba(79, 124, 255, 0.35);
  color: #f6f8ff;
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.18), 0 14px 28px rgba(5, 12, 40, 0.55);
}

.brand-mark svg {
  width: 36px;
  height: 36px;
}

/* ── Analyst Consensus ── */
.analyst-consensus {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}

.analyst-rating-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  min-width: 100px;
  text-align: center;
}

.analyst-rating-badge strong {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.analyst-rating-badge small {
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 4px;
}

.analyst-rating-badge.rec-bullish {
  border-color: rgba(47, 207, 132, 0.5);
  color: var(--success);
}

.analyst-rating-badge.rec-bearish {
  border-color: rgba(255, 95, 127, 0.5);
  color: var(--danger);
}

.analyst-rating-badge.rec-neutral {
  border-color: rgba(246, 179, 75, 0.5);
  color: var(--warning);
}

.analyst-targets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.target-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(42, 53, 94, 0.5);
  border-radius: 8px;
  background: rgba(22, 31, 61, 0.5);
}

.target-row span {
  color: var(--muted);
  font-size: 0.75rem;
}

.target-row strong {
  font-family: var(--mono);
  font-size: 0.82rem;
}

.accent-text {
  color: var(--accent) !important;
}

/* ── Financial Snapshot Grid ── */
.financial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.financial-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(42, 53, 94, 0.4);
  border-radius: 8px;
  background: rgba(22, 31, 61, 0.3);
}

.financial-metric span {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.financial-metric strong {
  font-family: var(--mono);
  font-size: 0.82rem;
}

@media (max-width: 768px) {
  .analyst-consensus {
    grid-template-columns: 1fr;
  }

  .analyst-targets {
    grid-template-columns: 1fr;
  }

  .financial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Onboarding Overlay ── */
.onboarding-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 500;
  padding: 16px;
}

.onboarding-card {
  width: min(640px, 100%);
  border: 1px solid rgba(111, 143, 255, 0.35);
  border-radius: 16px;
  background: linear-gradient(160deg, #0f1a3a 0%, #0a1028 100%);
  padding: 32px;
  display: grid;
  gap: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  max-height: 90vh;
  overflow-y: auto;
}

.onboarding-card h2 {
  margin: 0;
  font-size: 1.4rem;
  color: #fff;
}

.onboarding-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.onboarding-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.onboarding-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(42, 53, 94, 0.5);
  border-radius: 10px;
  background: rgba(22, 31, 61, 0.4);
}

.onboarding-feature-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.onboarding-feature h4 {
  margin: 0 0 2px;
  font-size: 0.82rem;
  color: #fff;
}

.onboarding-feature p {
  font-size: 0.74rem;
}

.onboarding-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.onboarding-shortcuts kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(111, 143, 255, 0.3);
  border-radius: 6px;
  background: rgba(22, 31, 61, 0.6);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
}

.onboarding-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.onboarding-actions .btn {
  padding: 10px 20px;
  font-size: 0.88rem;
}

@media (max-width: 768px) {
  .onboarding-features {
    grid-template-columns: 1fr;
  }

  .onboarding-card {
    padding: 20px;
  }
}

/* ── Pro Tier Upgrade Banner ── */
.upgrade-banner {
  border: 1px solid rgba(111, 143, 255, 0.3);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15, 26, 58, 0.95) 0%, rgba(20, 30, 70, 0.95) 100%);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.upgrade-banner-text h4 {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: #fff;
}

.upgrade-banner-text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.upgrade-banner .btn-upgrade {
  background: linear-gradient(135deg, #6f8fff 0%, #5a75e0 100%);
  border: none;
  color: #fff;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.upgrade-banner .btn-upgrade:hover {
  background: linear-gradient(135deg, #8aa5ff 0%, #6f8fff 100%);
}

.upgrade-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.upgrade-pill {
  background: rgba(111, 143, 255, 0.12);
  border: 1px solid rgba(111, 143, 255, 0.25);
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Pro lock badge ── */
.pro-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(246, 179, 75, 0.12);
  border: 1px solid rgba(246, 179, 75, 0.3);
  color: var(--warning);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms, border-color 120ms;
}

.pro-lock-badge:hover {
  background: rgba(246, 179, 75, 0.22);
  border-color: rgba(246, 179, 75, 0.55);
}

/* ── Pricing Modal ── */
.pricing-modal {
  background: linear-gradient(160deg, #0d1530 0%, #111a3a 100%);
  border: 1px solid rgba(111, 143, 255, 0.25);
  border-radius: 20px;
  padding: 28px 28px 22px;
  width: min(880px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  display: grid;
  gap: 20px;
}

.pricing-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.pricing-modal-title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  color: #fff;
}

.pricing-modal-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

/* Annual/monthly toggle */
.pricing-billing-toggle {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}

.pricing-billing-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 7px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 140ms, color 140ms;
}

.pricing-billing-btn.is-active {
  background: rgba(111, 143, 255, 0.2);
  color: #fff;
}

.pricing-save-badge {
  background: rgba(47, 207, 132, 0.22);
  color: var(--success);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 700;
}

/* Plan grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pricing-card {
  border: 1px solid rgba(63, 84, 148, 0.5);
  border-radius: 16px;
  background: rgba(17, 26, 58, 0.7);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing-card.is-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 40px rgba(111, 143, 255, 0.18);
  position: relative;
  background: rgba(20, 35, 80, 0.85);
}

.pricing-card.is-featured::before {
  content: "Most Popular";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pricing-card-header h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: #fff;
}

.pricing-card-desc {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.pricing-price {
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.pricing-price small {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
}

.pricing-annual-note {
  font-size: 0.72rem;
  color: var(--success);
  margin-top: 4px;
  font-weight: 500;
}

.pricing-features {
  flex: 1;
  display: grid;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0;
  margin: 0;
}

.pricing-features li {
  list-style: none;
  padding-left: 20px;
  position: relative;
  line-height: 1.4;
}

.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

.pricing-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  font-size: 0.88rem;
}

/* Waitlist capture */
.pricing-waitlist {
  border: 1px solid rgba(111, 143, 255, 0.2);
  background: rgba(111, 143, 255, 0.05);
  border-radius: 14px;
  padding: 16px 20px;
  display: grid;
  gap: 10px;
}

.pricing-waitlist-label {
  margin: 0;
  font-size: 0.88rem;
  color: #fff;
  font-weight: 600;
}

.pricing-waitlist-form {
  display: flex;
  gap: 8px;
}

.pricing-waitlist-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.85rem;
}

.pricing-waitlist-input:focus {
  outline: none;
  border-color: var(--accent);
}

.pricing-waitlist-note {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.pricing-footer-note {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 700px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .pricing-waitlist-form {
    flex-direction: column;
  }
}

/* ── Quote stats grid ── */
.quote-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.quote-stat-tile {
  padding: 8px;
  border: 1px solid rgba(42, 53, 94, 0.4);
  border-radius: 8px;
  background: rgba(22, 31, 61, 0.3);
  display: grid;
  gap: 3px;
}

.quote-stat-tile span {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.quote-stat-tile strong {
  font-family: var(--mono);
  font-size: 0.84rem;
}

.quote-stat-wide {
  grid-column: span 1;
}

/* ── Quote depth ── */
.quote-depth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quote-depth-side {
  display: grid;
  gap: 4px;
}

.quote-depth-side span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.quote-depth-side strong {
  font-family: var(--mono);
  font-size: 1rem;
}

.quote-depth-side small {
  color: var(--muted);
  font-size: 0.72rem;
}

.bid-side strong { color: var(--success); }
.ask-side strong { color: var(--danger); }

.depth-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(42, 53, 94, 0.4);
  overflow: hidden;
}

.bid-side .depth-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--success);
}

.ask-side .depth-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--danger);
}

/* ── Quote hero layout ── */
.quote-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.quote-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 16px;
  text-align: right;
}

.quote-meta-grid div {
  display: grid;
  gap: 2px;
}

.quote-meta-grid span {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.quote-meta-grid strong {
  font-family: var(--mono);
  font-size: 0.88rem;
}

.eyebrow {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--mono);
}

/* ── Compact chip grid ── */
.compact-chip-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.chip-peer strong {
  font-size: 0.82rem;
}

.chip-peer span {
  font-family: var(--mono);
  font-size: 0.78rem;
}

.chip-peer small {
  font-size: 0.7rem;
}

/* ── Card head split ── */
.card-head-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-head-split small {
  color: var(--muted);
  font-size: 0.72rem;
}

/* ── Chart state badge ── */
.chart-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(47, 207, 132, 0.1);
  color: var(--success);
  font-size: 0.68rem;
  font-family: var(--mono);
  margin-bottom: 8px;
}

.chart-state-badge.is-stale {
  background: rgba(246, 179, 75, 0.1);
  color: var(--warning);
}

/* ── Chart skeleton ── */
.chart-skeleton {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 100%;
  gap: 4px;
  padding: 12px;
}

.chart-skeleton-line {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: rgba(111, 143, 255, 0.15);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.chart-skeleton-line.a { height: 60%; animation-delay: 0s; }
.chart-skeleton-line.b { height: 80%; animation-delay: 0.15s; }
.chart-skeleton-line.c { height: 40%; animation-delay: 0.3s; }
.chart-skeleton-line.d { height: 70%; animation-delay: 0.45s; }
.chart-skeleton-grid { display: none; }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* ── Range pills ── */
.range-pill {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  cursor: pointer;
}

.range-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Skeleton loading ── */
.skeleton-box {
  display: block;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(42, 53, 94, 0.3) 0%, rgba(42, 53, 94, 0.5) 50%, rgba(42, 53, 94, 0.3) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-box.lg { height: 24px; width: 60%; }
.skeleton-box.sm { height: 12px; width: 40%; }

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Tabular nums ── */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}

/* ── Shortcuts overlay ── */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 20, 0.75);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: shortcuts-fade-in 160ms ease-out;
}

.shortcuts-overlay.hidden {
  display: none;
}

.shortcuts-panel {
  width: min(1060px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(180deg, #0b1226 0%, #08101f 100%);
  border: 1px solid rgba(111, 143, 255, 0.35);
  border-radius: 14px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(111, 143, 255, 0.2) inset;
  color: var(--text);
}

.shortcuts-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(70, 94, 164, 0.35);
}

.shortcuts-head h3 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 22px;
}

@media (max-width: 960px) {
  .shortcuts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .shortcuts-grid { grid-template-columns: 1fr; }
}

.shortcut-section h4 {
  margin: 0 0 10px 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(70, 94, 164, 0.25);
  font-size: 0.82rem;
}

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

.shortcut-row span {
  color: var(--muted);
  text-align: right;
}

.shortcut-row kbd,
.shortcut-row code {
  display: inline-block;
  min-width: 30px;
  padding: 3px 8px;
  background: rgba(111, 143, 255, 0.12);
  border: 1px solid rgba(111, 143, 255, 0.35);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: #cfd9ff;
  text-align: center;
}

.shortcuts-foot {
  padding: 14px 22px;
  border-top: 1px solid rgba(70, 94, 164, 0.35);
  font-size: 0.76rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.shortcuts-version {
  font-size: 0.7rem;
  color: rgba(100, 120, 180, 0.5);
  white-space: nowrap;
}

.shortcuts-foot kbd {
  padding: 2px 6px;
  background: rgba(111, 143, 255, 0.12);
  border: 1px solid rgba(111, 143, 255, 0.35);
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: #cfd9ff;
}

@keyframes shortcuts-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Flash animation ── */
.flash-up {
  animation: flash-green 0.6s ease-out;
}

.flash-down {
  animation: flash-red 0.6s ease-out;
}

@keyframes flash-green {
  0% { background: rgba(47, 207, 132, 0.25); }
  100% { background: transparent; }
}

@keyframes flash-red {
  0% { background: rgba(255, 95, 127, 0.25); }
  100% { background: transparent; }
}

/* ── Notification drawer ── */
.notif-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 100%;
  height: 100vh;
  background: #0a0f20;
  border-left: 1px solid var(--border);
  z-index: 300;
  display: grid;
  grid-template-rows: auto 1fr;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.notif-drawer.is-open {
  transform: translateX(0);
}

.notif-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}

.notif-drawer-head h3 {
  margin: 0;
  font-size: 0.9rem;
}

.notif-history {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 4px;
}

.notif-bell-btn {
  position: relative;
}

.notif-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 299;
}

/* ── Overview strip ── */
.overview-strip {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.overview-card {
  flex: 0 0 auto;
  min-width: 120px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.overview-card strong {
  font-size: 0.78rem;
}

.overview-card span {
  font-family: var(--mono);
  font-size: 0.75rem;
}

.overview-card small {
  font-size: 0.68rem;
}

.overview-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 18px;
}

.overview-sparkline span {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: var(--muted);
  min-height: 2px;
}

.overview-sparkline-positive span { background: var(--success); }
.overview-sparkline-negative span { background: var(--danger); }

/* ── Topbar divider ── */
.topbar-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 4px;
}

/* ── Button sizes ── */
.btn-sm {
  padding: 4px 8px;
  font-size: 0.72rem;
}

.btn-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.btn-icon:hover {
  border-color: rgba(111, 143, 255, 0.5);
  color: var(--text);
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

.topbar {
  box-shadow: 0 16px 40px rgba(5, 10, 27, 0.28);
}

.topbar-right {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.status-chip {
  backdrop-filter: blur(8px);
}

.status-chip-secondary {
  background: rgba(29, 41, 79, 0.85);
}

.chip-server-offline::before { background: var(--danger) !important; animation: none !important; }

/* ── WAKE-SERVER BANNER ───────────────────────────────────────────
   Shown above the topbar on cold-start while the Render free-tier
   backend is booting up. Hidden by default; AppBootstrap toggles
   .is-shown after the first failed health check. */
.wake-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(255,184,77,0.16), rgba(255,184,77,0.08));
  border-bottom: 1px solid rgba(255,184,77,0.28);
  color: #ffce82;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  z-index: 200;
  position: relative;
}
.wake-banner.is-shown { display: flex; }
.wake-banner.is-extended {
  background: linear-gradient(180deg, rgba(156,185,255,0.14), rgba(156,185,255,0.06));
  border-bottom-color: rgba(156,185,255,0.28);
  color: #b9cdfd;
}
.wake-banner.is-extended .wake-text strong { color: #fff; }
.wake-banner.is-extended .wake-spinner {
  border-color: rgba(156,185,255,0.3);
  border-top-color: #b9cdfd;
}
.wake-banner.is-resolved {
  background: linear-gradient(180deg, rgba(47,207,132,0.16), rgba(47,207,132,0.08));
  border-bottom-color: rgba(47,207,132,0.28);
  color: var(--accent);
  animation: wake-resolve-fade 1800ms ease-in 600ms forwards;
}
.wake-banner .wake-text strong { color: #fff; font-weight: 600; }
.wake-banner.is-resolved .wake-text strong { color: var(--accent); }
.wake-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,184,77,0.3);
  border-top-color: #ffce82;
  animation: wake-spin 900ms linear infinite;
  flex-shrink: 0;
}
.wake-banner.is-resolved .wake-spinner {
  border-color: rgba(47,207,132,0.3);
  border-top-color: var(--accent);
  animation: none;
  background: var(--accent);
  border: none;
  position: relative;
}
.wake-banner.is-resolved .wake-spinner::after {
  content: '✓';
  color: #051a0e;
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes wake-spin { to { transform: rotate(360deg); } }
@keyframes wake-resolve-fade {
  from { opacity: 1; max-height: 60px; }
  to   { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }
}
.wake-dismiss {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.5;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: 8px;
  border-radius: 4px;
  transition: opacity 160ms, background 160ms;
}
.wake-dismiss:hover { opacity: 1; background: rgba(255,255,255,0.08); }

@media (max-width: 720px) {
  .wake-banner { font-size: 12px; padding: 8px 14px; }
  .wake-banner .wake-text strong { display: block; }
}

.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  border-radius: 1px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  flex-shrink: 0;
}

.btn-icon svg {
  width: 17px;
  height: 17px;
  stroke: var(--muted);
}

.btn-icon:hover svg {
  stroke: var(--text);
}

.overview-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.overview-card {
  border: 1px solid rgba(60, 82, 140, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(22, 32, 66, 0.96) 0%, rgba(14, 20, 44, 0.98) 100%);
  color: var(--text);
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(5, 10, 27, 0.28);
  cursor: pointer;
  transition: border-color .17s ease, box-shadow .17s ease;
  border-left: 2px solid transparent;
}

.overview-card:hover {
  border-color: rgba(110, 142, 255, 0.7);
  border-left-color: var(--accent);
  box-shadow: 0 14px 28px rgba(8, 16, 44, 0.4);
}

.overview-card span {
  color: var(--muted);
  font-size: 0.7rem;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.overview-card small {
  color: var(--muted);
  font-size: 0.72rem;
}

.overview-card strong {
  font-size: 0.98rem;
  font-family: var(--mono);
  letter-spacing: -0.01em;
}

.overview-card-summary {
  border-style: dashed;
  background: linear-gradient(180deg, rgba(20, 32, 68, 0.94), rgba(14, 21, 45, 0.96));
}

.overview-card.is-placeholder {
  opacity: 0.8;
}

.workspace-grid {
  transition: grid-template-columns .35s ease, grid-template-rows .35s ease, gap .35s ease;
}

.workspace-grid.is-focused {
  grid-template-columns: 1.35fr 0.65fr;
  grid-template-rows: 1.15fr 0.85fr;
}

.workspace-grid.is-focused .panel {
  opacity: 0.68;
}

.workspace-grid.is-focused .panel.is-focused {
  opacity: 1;
  box-shadow: 0 24px 48px rgba(7, 14, 38, 0.38);
}

.panel {
  transition: box-shadow .24s ease, border-color .22s ease, opacity .22s ease;
  box-shadow: 0 8px 24px rgba(5, 10, 30, 0.32);
  background: linear-gradient(180deg, rgba(18, 26, 52, 0.98) 0%, rgba(13, 19, 40, 1) 100%);
}

.panel:hover {
  border-color: rgba(100, 130, 220, 0.65);
  box-shadow: 0 12px 32px rgba(8, 16, 44, 0.38);
}

.panel.is-active {
  border-color: rgba(110, 144, 255, 0.85);
  box-shadow:
    inset 0 2px 0 0 rgba(110, 144, 255, 0.95),
    0 0 0 1px rgba(110, 144, 255, 0.55),
    0 18px 40px rgba(14, 26, 72, 0.45);
}

/* "ACTIVE" marker on the focused panel head, plus dim siblings slightly so
   the eye locks onto the panel that owns keyboard focus. */
.panel.is-active .panel-head::before {
  content: "ACTIVE";
  font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(180, 200, 255, 0.95);
  background: rgba(110, 144, 255, 0.14);
  border: 1px solid rgba(110, 144, 255, 0.45);
  border-radius: 3px;
  padding: 2px 6px;
  margin-right: 8px;
  line-height: 1;
  align-self: center;
  flex: 0 0 auto;
  order: -1;
}

.workspace-grid .panel:not(.is-active) {
  opacity: 0.92;
}
.workspace-grid .panel:not(.is-active):hover {
  opacity: 1;
}

/* ── Panel drag interaction ────────────────────────────────────
   The HTML5 drag API ships with an unstyled ghost (a translucent
   copy of the dragged element). For a 600×500 panel that ghost
   looks like a phantom duplicate hovering over the workspace —
   confusing. We replace it with a small chip in JS, dim the
   source, and outline the would-be drop target. */
.panel.is-dragging {
  opacity: 0.45;
  filter: saturate(0.6);
  cursor: grabbing;
}
.panel.is-drop-target:not(.is-dragging) {
  border-color: rgba(47, 207, 132, 0.82);
  box-shadow: 0 0 0 1px rgba(47, 207, 132, 0.45),
              0 18px 40px rgba(14, 60, 38, 0.32);
  background: linear-gradient(
    180deg,
    rgba(20, 36, 32, 0.98) 0%,
    rgba(15, 30, 28, 1) 100%);
}
.panel-drag-chip {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f6f8ff;
  background: linear-gradient(135deg, #2a3970 0%, #1a2350 100%);
  border: 1px solid rgba(110, 144, 255, 0.55);
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 6px 18px rgba(5, 12, 40, 0.5);
  pointer-events: none;
  user-select: none;
}

.panel-content {
  scrollbar-width: thin;
  scrollbar-color: #42558f transparent;
}

/* ── Panel mount fade-in ───────────────────────────────────────
   When the panel content swaps modules (Quote → Chart → News etc.),
   the new content materializes with a quick fade + 4px lift instead
   of snapping in. The animation is short enough to feel tight, not
   ceremonial. Panel renders that don't replace innerHTML (chart
   in-place updates) skip this naturally. */
@keyframes panel-content-in {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,    0); }
}
.panel-content > section,
.panel-content > article {
  animation: panel-content-in 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ── Stat-card lift on hover ───────────────────────────────────
   Tiny but adds tactility. Same will-change pattern keeps it
   compositor-friendly. */
.stat-card,
.brief-metric {
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 200ms ease,
              box-shadow 220ms ease;
}
.stat-card:hover,
.brief-metric:hover {
  transform: translateY(-2px);
  border-color: rgba(110, 144, 255, 0.45);
}

/* ── Function-key press feedback ───────────────────────────────
   Existing :hover provides color but no motion. Add a 1px sink
   on :active so clicks feel committed. */
.function-key {
  transition: transform 120ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.function-key:active { transform: translateY(1px); }

/* ── Focus-mode smoother fade ─────────────────────────────────
   The .is-focused state above already animates opacity. Add a
   subtle scale on the focused panel so it feels like it pulls
   forward in 3D, not just brightens. */
.workspace-grid.is-focused .panel.is-focused {
  transform: scale(1.0);
  transition: opacity .24s ease, box-shadow .24s ease, transform .28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.workspace-grid:not(.is-focused) .panel {
  transition: box-shadow .24s ease, border-color .22s ease, opacity .22s ease, transform .26s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.panel-btn,
.rail-remove,
.btn,
.function-key,
.chip,
.tile,
.overview-card,
.action-tile,
.list-row,
.range-pill,
.mini-link {
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.panel-btn:hover,
.rail-remove:hover,
.btn:hover,
.function-key:hover,
.chip:hover,
.tile:hover,
.action-tile:hover,
.list-row:hover,
.range-pill:hover,
.mini-link:hover {
  filter: brightness(1.04);
}

.function-key {
  min-height: 62px;
}

.function-key:hover,
.function-key.is-active {
  box-shadow: 0 12px 20px rgba(21, 36, 82, 0.24);
}

.glow-card,
.card-feature {
  background: linear-gradient(160deg, rgba(28, 40, 80, 0.97) 0%, rgba(17, 25, 54, 0.98) 100%);
  border-color: rgba(72, 98, 172, 0.55);
  box-shadow: 0 8px 22px rgba(5, 10, 32, 0.3);
}

.quote-card-feature,
.chart-card-feature,
.news-card-feature {
  background: linear-gradient(160deg, rgba(22, 33, 68, 0.98) 0%, rgba(14, 20, 46, 0.99) 100%);
  border-color: rgba(64, 90, 162, 0.5);
}

.stack-lg {
  gap: 14px;
}

.card-head-split,
.news-meta-row,
.news-actions,
.quote-hero,
.toolbar-wrap,
.row-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.card-grid-home {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chart-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quote-hero {
  align-items: flex-start;
}

.quote-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: min(280px, 100%);
}

.quote-meta-grid div {
  border: 1px solid rgba(95, 120, 196, 0.28);
  border-radius: 10px;
  background: rgba(15, 22, 48, 0.52);
  padding: 10px;
  display: grid;
  gap: 4px;
}

.quote-meta-grid span,
.eyebrow,
.pulse-card span,
.action-tile span,
.list-row small,
.mini-link,
.news-meta-row small,
.compact-list small {
  color: var(--muted);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-family: var(--mono);
}

.action-grid,
.pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.action-tile,
.pulse-card,
.list-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(18, 27, 57, 0.86);
  color: var(--text);
  padding: 12px;
  text-align: left;
  display: grid;
  gap: 5px;
}

.pulse-card.is-live {
  border-color: rgba(81, 168, 121, 0.62);
  box-shadow: 0 0 0 1px rgba(47, 207, 132, 0.18) inset;
}

.action-tile:hover,
.list-row:hover,
.chip:hover,
.tile:hover {
  border-color: rgba(121, 151, 242, 0.72);
  box-shadow: 0 14px 24px rgba(10, 18, 44, 0.24);
}

.compact-list {
  gap: 8px;
}

.list-row {
  width: 100%;
}

.range-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(23, 34, 69, 0.92);
  color: var(--muted);
  padding: 7px 11px;
  font-weight: 600;
}

.range-pill.is-active {
  color: #fff;
  border-color: #6d8cff;
  background: rgba(72, 102, 203, 0.32);
}

.btn-inline,
.mini-link {
  padding: 6px 10px;
  font-size: 0.75rem;
}

.mini-link {
  border: 1px solid rgba(98, 123, 194, 0.28);
  border-radius: 999px;
  background: rgba(19, 29, 60, 0.72);
}

.compact-chip-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.briefing-hero {
  border: 1px solid rgba(105, 187, 255, 0.28);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(87, 168, 255, 0.16), transparent 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(77, 255, 176, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(18, 24, 43, 0.92), rgba(13, 18, 33, 0.96));
}

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

.brief-metric {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 11, 22, 0.54);
}

.brief-metric span {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brief-metric strong {
  font-size: 1rem;
}

.brief-metric small {
  font-size: 0.72rem;
  color: var(--muted);
}

.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.compact-list .list-row {
  min-height: 2.6rem;
  border-radius: 11px;
}

.chip-peer {
  min-height: 82px;
}

.chip-peer {
  justify-items: start;
  gap: 4px;
}

.chip-peer span {
  font-size: 0.84rem;
  color: var(--text);
}

.chip-peer small {
  font-size: 0.72rem;
}

.news-actions a {
  color: #97b4ff;
  text-decoration: none;
}

.news-actions a:hover {
  text-decoration: underline;
}

.screener-filters,
.add-pos-form {
  align-items: center;
}

.row-actions {
  justify-content: flex-end;
}

.calc-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-strip,
.action-grid,
.pulse-grid,
.compact-chip-grid,
.quote-meta-grid,
.card-grid-home,
.chart-summary-grid {
  min-width: 0;
}

@media (max-width: 1200px) {
  .overview-strip,
  .action-grid,
  .pulse-grid,
  .compact-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid-home,
  .chart-summary-grid,
  .quote-meta-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .topbar {
    align-items: flex-start;
  }

  .topbar,
  .topbar-right,
  .quote-hero,
  .card-head-split,
  .news-meta-row,
  .news-actions,
  .row-actions,
  .toolbar-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .overview-strip,
  .action-grid,
  .pulse-grid,
  .compact-chip-grid,
  .quote-meta-grid,
  .calc-grid,
  .card-grid-home,
  .chart-summary-grid {
    grid-template-columns: 1fr;
  }

  .workspace-grid.is-focused {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

/* ── Home Hero ─────────────────────────────────────── */
.home-hero {
  padding: 16px 0 8px;
}

.home-greeting {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.home-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.home-stat {
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   Meridian Terminal — Refined Design System
   Professional trading terminal aesthetic with depth and clarity
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg-app: #06080d;
  --bg-panel: #0d1117;
  --bg-card: #111820;
  --bg-hover: #161d28;
  --bg-elevated: #1a2233;
  --border-divider: #1e2a3a;
  --border-subtle: #253040;
  --border-active: #3d5a80;
  --text-primary: #e6edf3;
  --text-secondary: #c9d1d9;
  --text-muted: #7d8590;
  --data-up: #3fb950;
  --data-down: #f85149;
  --data-up-bg: rgba(63, 185, 80, 0.08);
  --data-down-bg: rgba(248, 81, 73, 0.08);
  --accent-blue: #58a6ff;
  --accent-purple: #bc8cff;
  --glow-blue: rgba(88, 166, 255, 0.15);
  --glow-green: rgba(63, 185, 80, 0.12);

  --bg: var(--bg-app);
  --bg-soft: var(--bg-panel);
  --surface: var(--bg-card);
  --border: var(--border-divider);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --success: var(--data-up);
  --danger: var(--data-down);
  --warning: #d29922;
  --accent: var(--accent-blue);
  --radius: 8px;
}

/* ── Reset selective aggression ────────────────────── */
* {
  border-radius: revert !important;
  box-shadow: revert !important;
}

html, body {
  background: var(--bg-app) !important;
  color: var(--text-primary) !important;
}

body,
.terminal-app,
.topbar,
.statusbar,
.status-bar,
.workspace-shell,
.workspace-main,
.workspace-grid,
.panel,
.panel-head,
.command-shell,
.card,
.rail-card,
.overview-card,
.function-key,
.chip,
.tile,
.action-tile,
.list-row,
.range-pill,
.auth-modal,
.toast,
.modal-backdrop,
.palette-backdrop {
  background-image: none !important;
}

/* ── App Shell ─────────────────────────────────────── */
.terminal-app,
.app-shell {
  gap: 10px !important;
  padding: 10px !important;
}

.function-row {
  display: none !important;
}

/* ── Topbar ────────────────────────────────────────── */
.topbar {
  border: 1px solid var(--border-divider) !important;
  border-radius: 10px !important;
  background: var(--bg-panel) !important;
  padding: 6px 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
}

.brand-mark {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
  background: var(--bg-card) !important;
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.08) !important;
}

.brand-block strong,
.topbar__brand strong {
  color: var(--text-primary) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em;
}

/* ── Status Chips ──────────────────────────────────── */
.status-chip {
  border-color: var(--border-divider) !important;
  border-radius: 999px !important;
  background: var(--bg-card) !important;
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
  padding: 4px 10px !important;
  backdrop-filter: none !important;
}

.status-chip::before {
  border-radius: 50% !important;
}

.chip-phase::before { background: var(--warning) !important; }
.chip-server::before { background: var(--data-up) !important; }
.chip-net::before { background: var(--accent-blue) !important; }
.chip-server-offline::before { background: var(--data-down) !important; animation: none !important; }

/* ── Buttons ───────────────────────────────────────── */
.btn,
.panel-btn,
.rail-remove,
.icon-btn {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-divider) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.btn:hover,
.panel-btn:hover,
.rail-remove:hover,
.icon-btn:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

.btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-muted) !important;
}

.btn-ghost:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-divider) !important;
  color: var(--text-primary) !important;
}

.btn-primary {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

.btn-primary:hover {
  background: rgba(88, 166, 255, 0.1) !important;
  border-color: rgba(88, 166, 255, 0.4) !important;
  color: var(--accent-blue) !important;
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.08) !important;
}

.btn-danger {
  background: rgba(248, 81, 73, 0.1) !important;
  border-color: rgba(248, 81, 73, 0.35) !important;
  color: var(--data-down) !important;
}

.btn-danger:hover {
  background: rgba(248, 81, 73, 0.18) !important;
  border-color: rgba(248, 81, 73, 0.55) !important;
}

.btn-icon {
  border-radius: 8px !important;
}

.btn-icon svg {
  stroke: var(--text-muted) !important;
}

.btn-icon:hover svg {
  stroke: var(--accent-blue) !important;
}

/* ── Range Pills ───────────────────────────────────── */
.range-pill {
  border: 1px solid var(--border-divider) !important;
  border-radius: 999px !important;
  background: var(--bg-card) !important;
  color: var(--text-muted) !important;
  padding: 5px 12px !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
}

.range-pill:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-subtle) !important;
}

.range-pill.is-active {
  background: rgba(56, 139, 253, 0.12) !important;
  border-color: rgba(56, 139, 253, 0.45) !important;
  color: var(--accent-blue) !important;
}

/* ── Auth Tabs ─────────────────────────────────────── */
.auth-tab {
  border-radius: 8px !important;
}

.auth-tab.is-active {
  background: rgba(56, 139, 253, 0.14) !important;
  border-color: rgba(56, 139, 253, 0.35) !important;
  color: var(--accent-blue) !important;
}

/* ── Workspace Layout ──────────────────────────────── */
.workspace-shell {
  grid-template-columns: 260px 1fr !important;
  gap: 10px !important;
}

.left-rail {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  flex: 0 0 260px !important;
}

.workspace-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-content: flex-start;
}

.panel {
  flex: 1 1 calc(50% - 8px) !important;
  min-width: 360px !important;
  min-height: 280px !important;
  resize: both;
  overflow: hidden;
  border: 1px solid var(--border-divider) !important;
  border-radius: 12px !important;
  background: var(--bg-panel) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.panel:hover {
  border-color: var(--border-subtle) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
}

.panel.is-active {
  /* Strong, unmistakable affordance for the panel that owns keyboard focus.
     The top accent rail, glow ring, and full-strength border together carry
     the "you are here" signal even when several panels are visible. */
  border-color: rgba(110, 144, 255, 0.85) !important;
  box-shadow:
    inset 0 2px 0 0 rgba(110, 144, 255, 0.95),
    0 0 0 1px rgba(110, 144, 255, 0.55),
    0 18px 40px rgba(14, 26, 72, 0.45),
    0 0 24px rgba(88, 166, 255, 0.18) !important;
}

/* "ACTIVE" marker inserted at the start of the focused panel head. The
   inactive panels carry no such marker, so the user can scan four panels
   and instantly find which one their commands will land in. */
.panel.is-active .panel-head::before {
  content: "ACTIVE" !important;
  font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: rgba(180, 200, 255, 0.95) !important;
  background: rgba(110, 144, 255, 0.14) !important;
  border: 1px solid rgba(110, 144, 255, 0.45) !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  margin-right: 8px !important;
  line-height: 1 !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  order: -1 !important;
  text-transform: none !important;
}

.workspace-grid.is-focused .panel {
  opacity: 0.65 !important;
}

.workspace-grid.is-focused .panel.is-focused {
  opacity: 1 !important;
  flex-basis: 100% !important;
  border-color: var(--accent-blue) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 20px rgba(88, 166, 255, 0.1) !important;
}

/* ── Panel Head ────────────────────────────────────── */
.panel-head,
.panel-header {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-divider) !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
}

.panel-head h3 {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

.panel-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
}

/* ── Panel Content ─────────────────────────────────── */
.panel-content {
  padding: 10px !important;
}

/* ── Cards ─────────────────────────────────────────── */
.card {
  border: 1px solid var(--border-divider) !important;
  border-radius: 10px !important;
  background: var(--bg-card) !important;
  padding: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.card-head h4 {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.glow-card,
.card-feature {
  background: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(88, 166, 255, 0.04) inset !important;
}

.quote-card-feature,
.chart-card-feature {
  background: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
}

/* ── Stat Cards ────────────────────────────────────── */
.stat-card {
  padding: 16px 18px !important;
}

.stat-card span,
.stat-card small {
  color: var(--text-muted) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.stat-card strong {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ── Rail Cards ────────────────────────────────────── */
.rail-card {
  border: 1px solid var(--border-divider) !important;
  border-radius: 10px !important;
  background: var(--bg-panel) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.rail-head {
  border-bottom-color: var(--border-divider) !important;
  padding: 8px 10px !important;
}

.rail-head h2 {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--text-muted) !important;
}

.rail-head small {
  color: var(--text-muted) !important;
}

.rail-body {
  padding: 6px !important;
}

.rail-item {
  border: 1px solid var(--border-divider) !important;
  border-radius: 8px !important;
  background: var(--bg-card) !important;
  padding: 6px 8px !important;
  transition: border-color 0.15s ease !important;
}

.rail-item:hover {
  border-color: var(--border-subtle) !important;
}

.rail-item small {
  color: var(--text-muted) !important;
}

.alert-row {
  border: 1px solid var(--border-divider) !important;
  border-radius: 8px !important;
  background: var(--bg-card) !important;
  font-size: 0.75rem !important;
}

.alert-row.is-triggered {
  background: var(--data-up-bg) !important;
  border-color: rgba(63, 185, 80, 0.25) !important;
}

.alert-row {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 8px !important;
}
.alert-row .alert-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.alert-row [data-alert-edit] {
  cursor: text;
  border-radius: 4px;
  padding: 0 2px;
  transition: background 120ms ease;
}
.alert-row [data-alert-edit]:hover,
.alert-row [data-alert-edit]:focus {
  background: rgba(125, 165, 255, 0.10);
  outline: none;
}
.alert-row [data-alert-edit] em {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px dashed rgba(125, 165, 255, 0.45);
}
.alert-row-x {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.78rem;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.alert-row-x:hover {
  color: var(--danger, #ff5f7f);
  background: rgba(255, 95, 127, 0.10);
  border-color: rgba(255, 95, 127, 0.30);
}

/* ── Overview Strip ────────────────────────────────── */
.overview-strip {
  gap: 6px !important;
}

.overview-card {
  border: 1px solid var(--border-divider) !important;
  border-radius: 10px !important;
  background: var(--bg-panel) !important;
  padding: 8px 10px !important;
  border-left: 2px solid transparent !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.15s ease !important;
}

.overview-card:hover {
  border-color: var(--border-subtle) !important;
  border-left-color: var(--accent-blue) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18) !important;
  background: var(--bg-card) !important;
}

.overview-card span {
  color: var(--text-muted) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.overview-card strong {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
}

.overview-card small {
  font-size: 0.68rem !important;
}

.overview-card-summary {
  border-style: dashed !important;
}

/* ── Chips & Tiles ─────────────────────────────────── */
.chip {
  border: 1px solid var(--border-divider) !important;
  border-radius: 10px !important;
  background: var(--bg-card) !important;
  padding: 10px 12px !important;
}

.chip:hover {
  border-color: var(--border-active) !important;
  background: var(--bg-hover) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important;
}

.chip-peer {
  min-height: 76px !important;
}

.tile {
  border: 1px solid var(--border-divider) !important;
  border-radius: 8px !important;
  background: var(--bg-card) !important;
}

.tile.positive {
  border-color: rgba(63, 185, 80, 0.3) !important;
  background: rgba(63, 185, 80, 0.06) !important;
}

.tile.negative {
  border-color: rgba(248, 81, 73, 0.3) !important;
  background: rgba(248, 81, 73, 0.06) !important;
}

.tile:hover {
  background: var(--bg-hover) !important;
}

/* ── Action Tiles & List Rows ──────────────────────── */
.action-tile,
.list-row {
  border: 1px solid var(--border-divider) !important;
  border-radius: 10px !important;
  background: var(--bg-card) !important;
  padding: 10px 12px !important;
  transition: all 0.15s ease !important;
}

.action-tile:hover,
.list-row:hover {
  border-color: var(--border-active) !important;
  background: var(--bg-hover) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.action-tile strong {
  font-size: 0.85rem !important;
}

.action-tile span,
.list-row small {
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
}

/* ── Pulse Cards ───────────────────────────────────── */
.pulse-card {
  border: 1px solid var(--border-divider) !important;
  border-radius: 10px !important;
  background: var(--bg-card) !important;
  padding: 10px 12px !important;
}

.pulse-card.is-live {
  border-color: rgba(63, 185, 80, 0.25) !important;
  background: var(--data-up-bg) !important;
  box-shadow: 0 0 8px rgba(63, 185, 80, 0.06) inset !important;
}

/* ── Mini Link ─────────────────────────────────────── */
.mini-link {
  border: 1px solid var(--border-divider) !important;
  border-radius: 999px !important;
  background: var(--bg-card) !important;
  color: var(--text-muted) !important;
  padding: 4px 10px !important;
  font-size: 0.72rem !important;
}

.mini-link:hover {
  background: var(--bg-hover) !important;
  color: var(--accent-blue) !important;
}

/* ── Tables ────────────────────────────────────────── */
.data-table,
.data-table-dense,
.financial-data-table {
  border-collapse: collapse !important;
  width: 100% !important;
  border: none !important;
  font-family: "Inter", sans-serif !important;
}

.data-table th,
.data-table td,
.financial-data-table th,
.financial-data-table td {
  padding: 8px 10px !important;
  font-size: 0.78rem !important;
  border-bottom: 1px solid var(--border-divider) !important;
  text-align: left !important;
}

.data-table th,
.financial-data-table th {
  color: var(--text-muted) !important;
  font-family: var(--mono) !important;
  text-transform: uppercase !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  background: var(--bg-card) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
}

.data-table tbody tr,
.financial-data-table tbody tr {
  transition: background 0.1s ease !important;
}

.data-table tbody tr:hover,
.financial-data-table tbody tr:hover {
  background: var(--bg-hover) !important;
}

.table-link {
  color: var(--accent-blue) !important;
  font-weight: 600 !important;
}

.table-link:hover {
  text-decoration: underline !important;
}

/* ── Inputs ────────────────────────────────────────── */
input,
select,
.command-input,
.screener-filters input,
.screener-filters select,
.add-pos-form input,
.calc-input input,
.auth-form input,
.auth-form select {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-divider) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  padding: 8px 10px !important;
  font-size: 0.82rem !important;
  transition: border-color 0.15s ease !important;
}

input:focus,
select:focus,
.command-input:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 2px rgba(56, 139, 253, 0.1) !important;
  outline: none !important;
}

.terminal-input {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-divider) !important;
  color: var(--text-primary) !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
}

.terminal-input:focus {
  border-color: var(--accent-blue) !important;
}

/* ── Auth Modal ────────────────────────────────────── */
.auth-modal {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  background: var(--bg-panel) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  padding: 20px !important;
}

.auth-form label {
  font-family: var(--mono) !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.04em !important;
}

.auth-grid {
  gap: 12px !important;
}

/* ── Toast ─────────────────────────────────────────── */
.toast {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
  background: var(--bg-panel) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  padding: 10px 16px !important;
  font-size: 0.82rem !important;
}

.toast[data-tone="success"] {
  border-color: rgba(63, 185, 80, 0.35) !important;
}

.toast[data-tone="error"] {
  border-color: rgba(248, 81, 73, 0.35) !important;
}

/* ── Command Palette ───────────────────────────────── */
.palette-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(6, 8, 13, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding-top: 18vh !important;
  z-index: 200 !important;
}

.palette-backdrop.hidden {
  display: none !important;
}

.command-palette {
  width: min(680px, calc(100vw - 32px)) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  background: var(--bg-panel) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.command-palette .cmd-prefix,
.command-palette #runCommandButton {
  display: none !important;
}

.command-palette .command-input {
  display: block !important;
  width: 100% !important;
  height: 56px !important;
  padding: 0 20px !important;
  font-size: 1rem !important;
  border: none !important;
  border-bottom: 1px solid var(--border-divider) !important;
  border-radius: 0 !important;
  background: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  font-family: var(--mono) !important;
}

.command-palette .command-input::placeholder {
  color: var(--text-muted) !important;
  font-style: italic !important;
}

.command-palette .autocomplete {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 56px !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  background: var(--bg-panel) !important;
  border: none !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}

.autocomplete-item {
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  margin: 2px 6px !important;
  padding: 10px 14px !important;
  color: var(--text-primary) !important;
}

.autocomplete-item:hover,
.autocomplete-item.is-highlighted {
  background: var(--bg-hover) !important;
  outline: none;
}
.autocomplete-item.is-highlighted {
  background: rgba(111, 143, 255, 0.10) !important;
  border-radius: 6px !important;
}

/* ── Statusbar ─────────────────────────────────────── */
.statusbar,
.status-bar {
  border: 1px solid var(--border-divider) !important;
  border-radius: 10px !important;
  background: var(--bg-panel) !important;
  padding: 8px 14px !important;
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
}

.statusbar strong,
.status-bar strong {
  color: var(--text-secondary) !important;
}

/* ── Briefing Hero ─────────────────────────────────── */
.briefing-hero {
  border: 1px solid rgba(88, 166, 255, 0.18) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(88, 166, 255, 0.06), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(63, 185, 80, 0.04), transparent 50%),
    var(--bg-card) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 20px rgba(88, 166, 255, 0.04) inset !important;
}

.brief-metric {
  border: 1px solid var(--border-divider) !important;
  border-radius: 8px !important;
  background: rgba(6, 8, 13, 0.5) !important;
  padding: 10px !important;
}

.brief-metric span {
  color: var(--text-muted) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.08em !important;
}

.brief-metric strong {
  font-size: 1rem !important;
  color: var(--text-primary) !important;
}

/* ── Quote ─────────────────────────────────────────── */
.quote-action-row {
  display: flex !important;
  gap: 6px !important;
}

.quote-action-row .btn {
  font-family: var(--mono) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
}

.quote-hero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.eyebrow {
  color: var(--text-muted) !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.quote-meta-grid div {
  border: 1px solid var(--border-divider) !important;
  border-radius: 8px !important;
  background: var(--bg-panel) !important;
  padding: 8px 10px !important;
}

.quote-meta-grid span {
  color: var(--text-muted) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ── Deep Dive ─────────────────────────────────────── */
.deep-dive-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.insight-block {
  border: 1px solid var(--border-divider) !important;
  border-radius: 8px !important;
  background: var(--bg-panel) !important;
  padding: 8px 10px !important;
}

.insight-block span {
  color: var(--text-muted) !important;
  font-size: 0.62rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.insight-summary {
  margin: 10px 0 0 !important;
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
}

/* ── News ──────────────────────────────────────────── */
.news-item {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--border-divider) !important;
  transition: background 0.1s ease !important;
}

.news-item:last-child {
  border-bottom: none !important;
}

/* Multi-column grid for the headline list when the news panel is wide
   (focused single-panel mode or widescreen). Container queries let us
   react to the panel size, not just the window. */
.news-list-card {
  container-type: inline-size;
  container-name: news-list;
}
.news-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 18px;
}
.news-list-grid .news-item {
  break-inside: avoid;
}
@container news-list (min-width: 760px) {
  .news-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container news-list (min-width: 1200px) {
  .news-list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.news-meta {
  font-size: 0.65rem !important;
  color: var(--text-muted) !important;
  margin-bottom: 4px !important;
  gap: 10px !important;
}

.news-source {
  color: var(--accent-blue) !important;
  font-weight: 500 !important;
}

/* Source filter bar */
.news-source-bar {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.news-source-bar::-webkit-scrollbar { display: none; }
.news-source-bar .toolbar-label {
  color: var(--muted, #6e7681);
  font-size: 0.73rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.news-title {
  color: var(--text-primary) !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
}

.news-title.news-title-positive {
  color: var(--data-up) !important;
}

.news-title.news-title-negative {
  color: var(--data-down) !important;
}

.news-title:hover {
  color: var(--accent-blue) !important;
  text-decoration: underline !important;
}

.news-sentiment.neutral {
  color: var(--text-muted) !important;
}

.news-sentiment.positive {
  color: var(--data-up) !important;
}

.news-sentiment.negative {
  color: var(--data-down) !important;
}

/* ── Chart ─────────────────────────────────────────── */
.chart-canvas-wrap {
  position: relative !important;
  width: 100% !important;
  height: 380px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.chart-canvas {
  width: 100% !important;
  height: 380px !important;
}

.chart-loading {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(6, 8, 13, 0.85) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-divider) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.chart-card {
  padding: 12px !important;
}

/* ── Yield Curve ───────────────────────────────────── */
.curve-bar {
  background: linear-gradient(to top, var(--accent-blue), rgba(88, 166, 255, 0.5)) !important;
  border-radius: 4px 4px 0 0 !important;
}

.curve-col strong {
  font-size: 0.72rem !important;
  color: var(--text-primary) !important;
}

.curve-col small {
  font-size: 0.65rem !important;
  color: var(--text-muted) !important;
}

/* ── FX Cards ──────────────────────────────────────── */
.fx-card {
  border: 1px solid var(--border-divider) !important;
  border-radius: 8px !important;
  background: var(--bg-card) !important;
  padding: 10px !important;
}

.fx-card span {
  color: var(--text-muted) !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ── Calculator ────────────────────────────────────── */
.calc-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

.calc-input span {
  color: var(--text-muted) !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.calc-results {
  padding-top: 10px !important;
  border-top: 1px solid var(--border-divider) !important;
  margin-top: 8px !important;
}

.calc-results p {
  display: flex !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
}

.calc-results strong {
  color: var(--text-primary) !important;
  font-family: var(--mono) !important;
}

/* ── System Log ────────────────────────────────────── */
.system-log {
  border: 1px solid var(--border-divider) !important;
  border-radius: 8px !important;
  background: var(--bg-app) !important;
  padding: 10px 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset !important;
}

.system-log-entry {
  border-bottom: 1px dotted var(--border-divider) !important;
}

.system-log-line {
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  color: var(--text-secondary) !important;
}

/* ── 52W Range Bar ─────────────────────────────────── */
.w52-range-wrap {
  margin-top: 10px !important;
  width: 100% !important;
  max-width: 280px !important;
}

.w52-range-bar {
  position: relative !important;
  height: 4px !important;
  background: var(--border-subtle) !important;
  border-radius: 2px !important;
  margin-bottom: 4px !important;
}

.w52-range-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  background: linear-gradient(90deg, var(--data-down), var(--accent-blue), var(--data-up)) !important;
  border-radius: 2px !important;
  max-width: 100% !important;
}

.w52-range-marker {
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--text-primary) !important;
  border: 2px solid var(--bg-card) !important;
}

.w52-range-labels {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.65rem !important;
  color: var(--text-muted) !important;
}

.w52-label-mid {
  color: var(--text-muted) !important;
  opacity: 0.7 !important;
}

.log-trigger-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--accent-blue) !important;
  vertical-align: middle !important;
  margin: 0 2px !important;
  box-shadow: 0 0 4px rgba(88, 166, 255, 0.6) !important;
}

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: var(--border-subtle) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted) !important;
}

.panel-content {
  scrollbar-width: thin !important;
  scrollbar-color: var(--border-subtle) transparent !important;
}

/* ── Skeleton Loading ──────────────────────────────── */
.skeleton-box {
  display: block !important;
  width: 100% !important;
  height: 12px !important;
  border: none !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.8s ease infinite !important;
}

.skeleton-box.sm {
  width: 46% !important;
  height: 10px !important;
}

.skeleton-box.lg {
  height: 18px !important;
}

/* ── Empty States ──────────────────────────────────── */
.empty-state,
.empty-inline {
  color: var(--text-muted) !important;
  text-align: center !important;
  padding: 24px 16px !important;
  font-size: 0.82rem !important;
  border: 1px dashed var(--border-divider) !important;
  border-radius: 10px !important;
  background: var(--bg-card) !important;
}

/* ── Numeric Typography ────────────────────────────── */
.tabular-nums,
[data-price-current],
.price-value,
.data-table th,
.data-table td,
.financial-data-table th,
.financial-data-table td,
.statusbar strong,
.status-bar strong,
#lastUpdated,
#refreshCountdown {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* ── Price Flash Animations ────────────────────────── */
.flash-up,
.flash-down {
  will-change: background-color, color, box-shadow !important;
}

.flash-up {
  animation: flash-green 400ms ease-out !important;
}

.flash-down {
  animation: flash-red 400ms ease-out !important;
}

@keyframes flash-green {
  0% {
    color: #d9fbe9;
    background-color: rgba(63, 185, 80, 0.25);
    box-shadow: inset 0 0 0 1px rgba(63, 185, 80, 0.35);
  }
  100% {
    color: inherit;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px transparent;
  }
}

@keyframes flash-red {
  0% {
    color: #ffe0e6;
    background-color: rgba(248, 81, 73, 0.22);
    box-shadow: inset 0 0 0 1px rgba(248, 81, 73, 0.3);
  }
  100% {
    color: inherit;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px transparent;
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Color Utilities ───────────────────────────────── */
.positive,
.toast[data-tone="success"],
.auth-status[data-tone="success"],
.auth-hint[data-tone="success"] {
  color: var(--data-up) !important;
}

.negative,
.btn-danger,
.toast[data-tone="error"],
.auth-status[data-tone="error"],
.auth-hint[data-tone="error"] {
  color: var(--data-down) !important;
}

/* ── Error Messages ────────────────────────────────── */
.error-message-container {
  height: 16px !important;
  color: var(--data-down) !important;
  font-size: 0.68rem !important;
  visibility: hidden !important;
  margin: 0 !important;
}

.error-message-container.active {
  visibility: visible !important;
}

/* ── File Input ────────────────────────────────────── */
.auth-form input[type="file"] {
  border: 1px dashed var(--border-subtle) !important;
  padding: 20px !important;
  background: var(--bg-app) !important;
  cursor: pointer !important;
  text-align: center !important;
  height: auto !important;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 1200px) {
  .workspace-shell {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  .left-rail {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  .overview-strip,
  .action-grid,
  .pulse-grid,
  .compact-chip-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .topbar,
  .topbar-right,
  .quote-hero,
  .card-head-split,
  .news-meta-row,
  .news-actions,
  .row-actions,
  .toolbar-wrap,
  .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .panel {
    min-width: 100% !important;
    flex-basis: 100% !important;
  }

  .overview-strip,
  .action-grid,
  .pulse-grid,
  .compact-chip-grid,
  .quote-meta-grid,
  .calc-grid,
  .card-grid-home,
  .chart-summary-grid,
  .chip-grid,
  .tile-grid,
  .heatmap-grid,
  .split-grid,
  .auth-grid,
  .screener-filters,
  .add-pos-form,
  .deep-dive-grid,
  .left-rail {
    grid-template-columns: 1fr !important;
  }

  .command-palette {
    grid-template-columns: 1fr !important;
  }

  .cmd-prefix {
    display: none !important;
  }

  .workspace-grid.is-focused .panel {
    flex-basis: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── Statusbar hint ───────────────────────── */
.statusbar-hint {
  margin-left: auto;
  color: var(--text-muted, #484f58);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  opacity: 0.7;
}

/* ── Button danger helper ─────────────────── */
.btn-danger,
.btn.btn-danger {
  color: var(--data-down, #f85149) !important;
  border-color: var(--data-down, #f85149) !important;
}
.btn-danger:hover,
.btn.btn-danger:hover {
  background: rgba(248, 81, 73, 0.12) !important;
}

/* ── code tag inside empty states ─────────── */
.empty-state code,
.empty-inline code {
  background: rgba(88, 166, 255, 0.1);
  color: var(--accent-blue, #58a6ff);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.82em;
}

/* ── Stat card improvements ───────────────── */
.stat-card .positive { color: var(--data-up, #3fb950); }
.stat-card .negative { color: var(--data-down, #f85149); }

/* ── Overview card subtle hover glow ──────── */
.overview-card:hover {
  background: rgba(88, 166, 255, 0.06) !important;
  border-color: rgba(88, 166, 255, 0.2) !important;
}
.overview-card-summary {
  border-left: 2px solid var(--accent-blue, #58a6ff) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 190px !important;
  padding: 10px 12px !important;
}

.pulse-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.pulse-header span {
  font-size: 0.68rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted) !important;
}

.pulse-header strong {
  font-size: 0.82rem !important;
  color: var(--text) !important;
}

.pulse-breadth-bar {
  height: 5px;
  background: rgba(248, 81, 73, 0.22);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.pulse-breadth-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3fb950, #58a6ff);
  border-radius: 999px;
  transition: width 260ms ease-out;
}

.pulse-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 0.72rem;
}

.pulse-stats div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pulse-stats span {
  color: var(--muted) !important;
  font-size: 0.62rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pulse-stats strong {
  font-size: 0.78rem !important;
  font-variant-numeric: tabular-nums;
}

.pulse-leaders {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.pulse-leaders small {
  white-space: nowrap;
}

/* ── Tile intensity refinement ────────────── */
.tile.positive {
  background: rgba(63, 185, 80, 0.1) !important;
  border-color: rgba(63, 185, 80, 0.25) !important;
}
.tile.negative {
  background: rgba(248, 81, 73, 0.1) !important;
  border-color: rgba(248, 81, 73, 0.25) !important;
}
.tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── Range pill active state refinement ───── */
.range-pill.is-active {
  background: var(--accent-blue, #58a6ff) !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.3);
}

/* ── Empty inline within cards ────────────── */
.empty-inline {
  color: var(--text-muted, #484f58);
  font-size: 0.82rem;
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}

/* ── Friendly portfolio empty state ──────── */
.empty-state-lg {
  padding: 32px 24px;
  font-size: 0.9rem;
  color: var(--text-muted, #484f58);
  text-align: center;
}

/* ── News: compact sentiment bar ─────────── */
.news-sentiment-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted, #484f58);
  padding: 4px 0 0;
  flex-wrap: wrap;
}
.news-sentiment-bar strong {
  color: var(--text-primary, #e6edf3);
  font-size: 0.84rem;
}
.news-sentiment-bar .positive { color: var(--data-up, #3fb950); }
.news-sentiment-bar .negative { color: var(--data-down, #f85149); }
.news-sentiment-bar .sentiment-neutral { color: var(--text-muted, #484f58); }
.sentiment-sep {
  opacity: 0.35;
  font-size: 0.7rem;
}
.sentiment-bar-visual {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
  background: var(--border, #1e2d4a);
}
.sentiment-bar-segment {
  height: 100%;
  transition: width 0.3s;
}
.sentiment-bar-segment.positive { background: var(--accent, #2fcf84); }
.sentiment-bar-segment.neutral-bar { background: var(--border, #3d4a5c); }
.sentiment-bar-segment.negative { background: var(--danger, #ff5f7f); }
.sentiment-filter-note {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-muted, #484f58);
  opacity: 0.6;
}

/* ── News: compact refresh icon button ───── */
.btn-refresh-icon {
  margin-left: auto;
  padding: 4px 8px !important;
  font-size: 1rem;
  line-height: 1;
  border-radius: 6px !important;
  opacity: 0.6;
}
.btn-refresh-icon:hover {
  opacity: 1;
}

/* ── Toolbar label ────────────────────────── */
.toolbar-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #484f58);
  padding-right: 2px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   NOTIFICATION DRAWER & BELL
═══════════════════════════════════════════════════════ */

.notif-bell-btn {
  position: relative;
}

.notif-bell-btn.is-pinging {
  animation: bell-jiggle 520ms ease;
}

.notif-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  background: #e85d4a;
  color: #fff;
  font-size: 0.62rem;
  font-family: var(--mono);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  line-height: 1;
}

.notif-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: var(--bg-panel, #0d1117);
  border-left: 1px solid var(--border, rgba(63, 84, 148, 0.44));
  z-index: 800;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notif-drawer.is-open {
  transform: translateX(0);
}

.notif-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, rgba(63, 84, 148, 0.44));
  flex-shrink: 0;
}

.notif-drawer-head h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.notif-history {
  list-style: none;
  margin: 0;
  padding: 8px;
  flex: 1;
  overflow-y: auto;
}

.notif-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface, #161b22);
  border: 1px solid var(--border, rgba(63, 84, 148, 0.35));
  margin-bottom: 6px;
}

.notif-item-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}

.notif-item-title {
  font-weight: 600;
  font-size: 0.82rem;
  flex: 1;
}

.notif-item-time {
  color: var(--muted, #6e7681);
  font-size: 0.7rem;
  font-family: var(--mono);
  white-space: nowrap;
}

.notif-symbol-chip {
  font-size: 0.7rem;
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.1);
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 1.4;
}

.notif-symbol-chip:hover {
  background: rgba(88, 166, 255, 0.2);
}

.notif-item-body {
  font-size: 0.78rem;
  color: var(--muted, #6e7681);
  margin: 0;
  line-height: 1.4;
}

.notif-empty {
  text-align: center;
  color: var(--muted, #6e7681);
  font-size: 0.82rem;
  padding: 32px 16px;
  list-style: none;
}

.notif-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 799;
}

/* ═══════════════════════════════════════════════════════
   RULES TAB BAR
═══════════════════════════════════════════════════════ */

.rules-tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border, rgba(63, 84, 148, 0.44));
  margin-bottom: 0;
}

.rules-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted, #6e7681);
  padding: 8px 14px;
  font-size: 0.82rem;
  font-family: var(--font);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.rules-tab-btn:hover {
  color: var(--text, #e6edf3);
}

.rules-tab-btn.is-active {
  color: var(--text, #e6edf3);
  border-bottom-color: #58a6ff;
}

.rules-tab-badge {
  font-size: 0.68rem;
  color: var(--muted, #6e7681);
  background: var(--surface, #161b22);
  border-radius: 10px;
  padding: 1px 6px;
  font-family: var(--mono);
}

/* Rule status indicators */
.status-dot { font-size: 0.76rem; white-space: nowrap; }
.status-dot-green { color: var(--accent, #2fcf84); }
.status-dot-yellow { color: #e5a94e; }
tr.rule-matched {
  background: rgba(47, 207, 132, 0.06);
  border-left: 3px solid var(--accent, #2fcf84);
}

/* ── Rules empty state ─────────────────────────────── */
.rules-empty-state {
  padding: 28px 20px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rules-empty-icon {
  font-size: 2rem;
  line-height: 1;
  filter: grayscale(0.3);
  margin-bottom: 4px;
}
.rules-empty-state h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text, #e6edf3);
}
.rules-empty-state p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted, #6e7681);
  max-width: 380px;
}
.rules-syntax-hint {
  font-size: 0.76rem !important;
  background: var(--surface, #161b22);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 6px;
  padding: 6px 12px !important;
}
.rules-template-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}
.rules-template-label {
  font-size: 0.72rem;
  color: var(--muted, #6e7681);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rules-template-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.rules-template-btn {
  background: var(--surface, #161b22);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 0.78rem;
  color: var(--text, #e6edf3);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.rules-template-btn:hover {
  border-color: var(--accent, #2fcf84);
  background: rgba(47, 207, 132, 0.06);
  color: var(--accent, #2fcf84);
}

/* Syntax hint card below rules table */
.rules-syntax-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px !important;
  font-size: 0.78rem;
  color: var(--muted, #6e7681);
}
.rules-syntax-prefix {
  font-size: 1rem;
  flex-shrink: 0;
}

/* Sector snapshot tiles (Home module) */
.sector-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  padding: 4px 0;
}
.sector-snapshot-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface, #161b22);
  border: 1px solid var(--border, #1e2d4a);
}
.sector-snapshot-tile strong {
  font-size: 0.72rem;
  color: var(--text, #e8f0fe);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sector-snapshot-tile span {
  font-size: 0.88rem;
  font-weight: 700;
  font-family: var(--mono);
}
.sector-snapshot-tile.positive { border-color: rgba(47, 207, 132, 0.25); }
.sector-snapshot-tile.negative { border-color: rgba(255, 95, 127, 0.25); }

/* Clickable table row */
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background: rgba(120, 140, 180, 0.06); }

/* Table scroll wrapper for wide tables */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ── Portfolio share card ── */
.port-share-card {
  background: linear-gradient(135deg, rgba(47,207,132,0.04) 0%, transparent 60%);
  border-color: rgba(47,207,132,0.2) !important;
}
.port-share-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.port-share-preview {
  background: var(--bg, #0e1420);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.port-share-logo {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent, #2fcf84);
  letter-spacing: 0.04em;
}
.port-share-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 0.83rem;
}
.port-share-footer {
  font-size: 0.68rem;
  color: var(--muted, #6e7681);
}
.port-share-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Portfolio equity curve ── */
.port-equity-chart {
  width: 100%;
  overflow: hidden;
}

.port-equity-svg {
  width: 100%;
  height: 80px;
  display: block;
}

.port-equity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  color: var(--muted);
  font-size: 0.78rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.port-equity-meta {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ── Portfolio allocation bars ── */
.port-alloc-grid {
  display: grid;
  gap: 6px;
}

.alloc-row {
  display: grid;
  grid-template-columns: 54px 1fr 38px 80px;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.alloc-symbol {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.75rem;
}

.alloc-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.alloc-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.alloc-pct {
  text-align: right;
  color: var(--muted);
  font-size: 0.72rem;
}

.alloc-pl {
  text-align: right;
  font-size: 0.72rem;
  font-family: var(--mono);
}

/* 52-week range bar in screener */
.range-bar-row td {
  padding: 0 8px 6px !important;
  border-top: none !important;
}
.range-bar-wrap {
  max-width: 200px;
  margin-left: auto;
}
.range-bar-track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--border, #1e2d4a);
}
.range-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--danger, #ff5f7f), var(--accent, #2fcf84));
  opacity: 0.6;
}
.range-bar-dot {
  position: absolute;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text, #e8f0fe);
  border: 1.5px solid var(--bg-panel, #0e1420);
  transform: translateX(-50%);
}

/* Screener inline 52-week position cell */
.screener-52wk-cell {
  min-width: 80px;
}
.screener-52wk-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
}
.screener-52wk-lo,
.screener-52wk-hi {
  font-size: 0.6rem;
  color: var(--muted, #6e7681);
  font-weight: 700;
  flex-shrink: 0;
}
.screener-52wk-track {
  position: relative;
  flex: 1;
  min-width: 48px;
  max-width: 80px;
  height: 4px;
  border-radius: 2px;
  background: var(--border, #1e2d4a);
}
.screener-52wk-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent, #2fcf84);
  opacity: 0.55;
}
.screener-52wk-dot {
  position: absolute;
  top: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text, #e8f0fe);
  border: 1.5px solid var(--bg-panel, #0e1420);
}
.screener-52wk-badge {
  font-size: 0.7rem;
  flex-shrink: 0;
}

@keyframes bell-jiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
}

body[data-theme="light"] {
  --bg: #eef2f7;
  --bg-panel: #ffffff;
  --surface: #f7f9fc;
  --border: #d5ddeb;
  --text: #132038;
  --muted: #56657f;
  --accent: #2e62ff;
  --success: #17804c;
  --danger: #c24a4a;
  background: linear-gradient(180deg, #eef2f7 0%, #e7edf6 100%);
  color: var(--text);
}

body[data-theme="light"] .terminal-app,
body[data-theme="light"] .app-shell {
  background: transparent;
}

body[data-theme="light"] .card,
body[data-theme="light"] .rail-card,
body[data-theme="light"] .panel,
body[data-theme="light"] .overview-card,
body[data-theme="light"] .notif-drawer,
body[data-theme="light"] .function-key,
body[data-theme="light"] .chip,
body[data-theme="light"] .tile {
  box-shadow: 0 14px 30px rgba(32, 53, 95, 0.08);
}

.terminal-app.is-compact .overview-strip,
.terminal-app.is-compact .workspace-shell,
.terminal-app.is-compact .stack,
.terminal-app.is-compact .stack-lg,
.terminal-app.is-compact .card-grid,
.terminal-app.is-compact .quote-stats-grid,
.terminal-app.is-compact .quote-depth-grid {
  gap: 10px;
}

.terminal-app.is-compact .card,
.terminal-app.is-compact .overview-card,
.terminal-app.is-compact .rail-item,
.terminal-app.is-compact .alert-row,
.terminal-app.is-compact .quote-stat-tile,
.terminal-app.is-compact .quote-depth-side {
  padding: 10px;
}

.overview-card span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.overview-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(47, 207, 132, 0.45);
  animation: dot-pulse 1.2s ease-in-out infinite;
}

.overview-sparkline {
  display: grid;
  grid-auto-flow: column;
  align-items: end;
  gap: 3px;
  min-height: 24px;
  margin-top: 4px;
}

.overview-sparkline span {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(120, 150, 255, 0.7), rgba(120, 150, 255, 0.18));
  animation: shimmer 2.6s linear infinite;
}

.overview-sparkline span:nth-child(1) { height: 8px; }
.overview-sparkline span:nth-child(2) { height: 14px; }
.overview-sparkline span:nth-child(3) { height: 10px; }
.overview-sparkline span:nth-child(4) { height: 18px; }
.overview-sparkline span:nth-child(5) { height: 12px; }

.overview-sparkline-negative span {
  background: linear-gradient(180deg, rgba(248, 81, 73, 0.62), rgba(248, 81, 73, 0.16));
}

.overview-sparkline-positive span {
  background: linear-gradient(180deg, rgba(63, 185, 80, 0.62), rgba(63, 185, 80, 0.16));
}

.overview-sparkline-svg {
  width: 100%;
  height: 26px;
  margin-top: 4px;
  overflow: visible;
}

.overview-sparkline-svg path {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overview-sparkline-svg.positive path {
  stroke: var(--success);
}

.overview-sparkline-svg.negative path {
  stroke: var(--danger);
}

.quote-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quote-stat-tile {
  border: 1px solid rgba(95, 120, 196, 0.22);
  border-radius: 12px;
  background: rgba(14, 21, 46, 0.58);
  padding: 12px;
  display: grid;
  gap: 5px;
  min-height: 84px;
}

.quote-stat-wide {
  grid-column: span 1;
}

.quote-stat-tile span,
.quote-depth-side span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.quote-stat-tile strong {
  font-size: 0.92rem;
  line-height: 1.35;
}

.quote-depth-card {
  background: linear-gradient(180deg, rgba(18, 26, 52, 0.94), rgba(12, 18, 38, 0.98));
}

.quote-depth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quote-depth-side {
  border: 1px solid rgba(95, 120, 196, 0.24);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 6px;
  background: rgba(14, 21, 46, 0.58);
}

.quote-depth-side strong {
  font-size: 1rem;
}

.quote-depth-side small {
  color: var(--muted);
}

.depth-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.depth-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.bid-side .depth-bar i {
  background: linear-gradient(90deg, rgba(47, 207, 132, 0.3), rgba(47, 207, 132, 0.85));
}

.ask-side .depth-bar i {
  background: linear-gradient(90deg, rgba(255, 95, 127, 0.35), rgba(255, 95, 127, 0.88));
}

.chart-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47, 207, 132, 0.28);
  color: var(--success);
  background: rgba(47, 207, 132, 0.08);
  font-size: 0.74rem;
  font-family: var(--mono);
}

.chart-state-badge.is-stale {
  color: var(--warning);
  border-color: rgba(246, 179, 75, 0.28);
  background: rgba(246, 179, 75, 0.08);
}

.chart-skeleton {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%),
    rgba(9, 14, 28, 0.72);
  background-size: auto, 220% 100%, auto;
  animation: shimmer 2s linear infinite;
}

.chart-skeleton-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 100% 44px, 56px 100%;
  opacity: 0.45;
}

.chart-skeleton-line {
  position: absolute;
  inset: auto auto 0 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

.chart-skeleton-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat center / contain;
}

.chart-skeleton-line.a::before {
  clip-path: polygon(0% 73%, 12% 68%, 26% 70%, 38% 52%, 53% 57%, 66% 36%, 82% 44%, 100% 18%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg, rgba(95, 140, 255, 0.34), rgba(95, 140, 255, 0.04));
}

.chart-skeleton-line.b::before {
  clip-path: polygon(0% 85%, 18% 76%, 31% 81%, 44% 60%, 59% 68%, 74% 48%, 88% 52%, 100% 39%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg, rgba(47, 207, 132, 0.2), rgba(47, 207, 132, 0.03));
}

@media (max-width: 900px) {
  .quote-stats-grid,
  .quote-depth-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Paper Trading Module (F9)
   ================================================================ */

.trade-gate {
  text-align: center;
}

.trade-gate .empty-state-lg {
  font-size: 14px;
  line-height: 1.55;
  padding: 28px 24px;
}

.trade-ticket-card {
  position: relative;
}

/* Equity curve sparkline */
.equity-spark-card {
  padding: 14px 16px 12px;
}
.equity-spark {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.equity-spark.empty {
  min-height: 140px;
}
.equity-spark-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--muted-2, #7a8599);
  font-size: 12px;
  border: 1px dashed rgba(120, 140, 180, 0.18);
  border-radius: 6px;
}
.equity-spark-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.equity-spark-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #99a4ba);
}
.equity-spark-head small {
  color: var(--muted-2, #7a8599);
  font-size: 10px;
}
.equity-spark-delta {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.equity-spark-delta small {
  display: block;
  font-size: 11px;
  font-weight: 600;
}
.equity-spark-delta.positive { color: rgb(90, 225, 155); }
.equity-spark-delta.negative { color: rgb(255, 130, 130); }
.equity-spark-svg {
  width: 100%;
  height: 120px;
  display: block;
  border-radius: 4px;
  background: rgba(10, 16, 28, 0.35);
  border: 1px solid rgba(120, 140, 180, 0.12);
  padding: 0;
}

/* Options Greeks snapshot card */
.greeks-card {
  padding: 14px 16px;
}
.greeks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}
.greek-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(120, 140, 180, 0.14);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(10, 16, 28, 0.3);
}
.greek-col h5 {
  margin: 0 0 4px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.greek-col h5.positive { color: rgb(90, 225, 155); }
.greek-col h5.negative { color: rgb(255, 130, 130); }
.greek-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 0;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(120, 140, 180, 0.08);
}
.greek-stat:last-child { border-bottom: none; }
.greek-stat-label {
  grid-column: 1;
  grid-row: 1;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #99a4ba);
}
.greek-stat strong {
  grid-column: 2;
  grid-row: 1;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
}
.greek-stat small {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 9px;
  color: var(--muted-2, #7a8599);
  letter-spacing: 0.02em;
}

.options-table .greek-cell {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted, #99a4ba);
}

/* ATM row highlight */
.options-atm-row {
  background: rgba(111, 143, 255, 0.06);
}
.options-atm-row td {
  border-top: 1px solid rgba(111, 143, 255, 0.2);
  border-bottom: 1px solid rgba(111, 143, 255, 0.2);
}
.accent { color: var(--accent); }

/* OI bar cell */
.oi-bar-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 64px;
}
.oi-bar-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 140, 180, 0.15);
  overflow: hidden;
}
.oi-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.7;
}

.trade-ticket {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
  margin-top: 6px;
}

.trade-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.trade-field > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #7a8599);
}

.trade-field input {
  background: rgba(10, 16, 28, 0.55);
  border: 1px solid rgba(120, 140, 180, 0.25);
  color: var(--fg, #e5ecf8);
  border-radius: 6px;
  padding: 9px 10px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.trade-field input:focus {
  outline: none;
  border-color: rgba(95, 140, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(95, 140, 255, 0.18);
}

.trade-field-readout {
  background: rgba(10, 16, 28, 0.4);
  border: 1px solid rgba(120, 140, 180, 0.18);
  border-radius: 6px;
  padding: 8px 10px 9px;
}

.trade-field-readout strong {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.trade-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.btn-buy,
.btn-sell {
  flex: 1;
  padding: 11px 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 120ms ease, background 120ms ease;
  font-family: inherit;
  font-size: 13px;
}

.btn-buy {
  background: linear-gradient(180deg, rgba(47, 207, 132, 0.95), rgba(34, 168, 106, 0.95));
  color: #02180d;
  border-color: rgba(47, 207, 132, 0.6);
}

.btn-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(47, 207, 132, 0.35);
}

.btn-sell {
  background: linear-gradient(180deg, rgba(255, 99, 99, 0.92), rgba(214, 66, 66, 0.92));
  color: #1a0303;
  border-color: rgba(255, 99, 99, 0.55);
}

.btn-sell:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 99, 99, 0.35);
}

.btn-sell:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.trade-position-hint {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(95, 140, 255, 0.08);
  border: 1px solid rgba(95, 140, 255, 0.22);
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted, #99a4ba);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.trade-quick-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(120, 140, 180, 0.18);
}

.chip-sm {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(95, 140, 255, 0.1);
  border: 1px solid rgba(95, 140, 255, 0.25);
  color: var(--fg, #e5ecf8);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, transform 100ms ease;
  font-family: inherit;
}

.chip-sm:hover {
  background: rgba(95, 140, 255, 0.2);
  transform: translateY(-1px);
}

.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.btn-inline {
  padding: 4px 10px;
  font-size: 11px;
}

.btn-danger {
  color: rgba(255, 128, 128, 0.9);
  border-color: rgba(255, 128, 128, 0.3);
}

.btn-danger:hover {
  background: rgba(255, 99, 99, 0.12);
}

.fills-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px;
  max-height: 340px;
  overflow-y: auto;
}

.fill-row {
  display: grid;
  grid-template-columns: 46px 56px 1fr 92px 92px 72px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(10, 16, 28, 0.35);
  border: 1px solid rgba(120, 140, 180, 0.12);
  border-radius: 5px;
  font-size: 12px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.fill-side {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 6px;
  border-radius: 4px;
  text-align: center;
}

.fill-side-buy {
  background: rgba(47, 207, 132, 0.18);
  color: rgb(90, 225, 155);
}

.fill-side-sell {
  background: rgba(255, 99, 99, 0.16);
  color: rgb(255, 130, 130);
}

.fill-symbol {
  font-weight: 700;
  color: var(--fg, #e5ecf8);
}

.fill-qty,
.fill-total {
  color: var(--muted, #99a4ba);
}

.fill-time {
  font-size: 11px;
  color: var(--muted-2, #7a8599);
  text-align: right;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 4px 2px;
}

.achievement-tile {
  position: relative;
  padding: 12px 14px;
  background: rgba(10, 16, 28, 0.4);
  border: 1px solid rgba(120, 140, 180, 0.15);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 150ms ease, background 150ms ease;
}

.achievement-tile strong {
  font-size: 13px;
  color: var(--muted, #99a4ba);
  font-weight: 700;
}

.achievement-tile small {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted-2, #7a8599);
}

.achievement-tile.is-unlocked {
  background: linear-gradient(145deg, rgba(47, 207, 132, 0.12), rgba(95, 140, 255, 0.08));
  border-color: rgba(47, 207, 132, 0.4);
}

.achievement-tile.is-unlocked strong {
  color: rgb(130, 240, 180);
}

.achievement-tile.is-unlocked small {
  color: rgba(200, 230, 215, 0.82);
}

.achievement-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 207, 132, 0.85);
  color: #02180d;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

.achievement-locked {
  position: absolute;
  top: 10px;
  right: 12px;
  color: rgba(120, 140, 180, 0.4);
  font-size: 14px;
}

.muted-fraction {
  color: var(--muted-2, #7a8599);
  font-weight: 500;
  font-size: 0.75em;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1100px) {
  .trade-ticket {
    grid-template-columns: 1fr 1fr;
  }
  .split-grid {
    grid-template-columns: 1fr;
  }
  .fill-row {
    grid-template-columns: 46px 56px 1fr 80px;
  }
  .fill-row > :nth-child(n + 5) {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Mobile override block — placed at end of file so these rules
   win over ALL earlier !important declarations in wider-breakpoint
   blocks (cascade: last rule with equal importance wins).
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Topbar: force single row, left-to-right */
  .topbar {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }
  .topbar-right {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 4px !important;
    justify-content: flex-end !important;
  }

  /* Overview strip: horizontal scroll, never grid */
  .overview-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 0 4px !important;
  }
  .overview-strip::-webkit-scrollbar { display: none; }
  .overview-card, .overview-strip > * {
    flex-shrink: 0 !important;
    min-width: 90px !important;
    max-width: 110px !important;
    width: auto !important;
  }

  /* Card headers stay as rows */
  .card-head-split {
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Toolbar stays as rows (wrapping is fine) */
  .toolbar,
  .toolbar-wrap {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  /* Row actions stay as rows */
  .row-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* News meta row stays as row */
  .news-meta-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* Left rail: horizontal scroll strip (overrides later display:grid !important) */
  .left-rail {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    align-items: center !important;
    background: rgba(8,12,24,0.7) !important;
    border-bottom: 1px solid rgba(120,140,180,0.12) !important;
    grid-template-columns: none !important; /* reset grid */
  }
  .left-rail::-webkit-scrollbar { display: none !important; }
  .left-rail .rail-card {
    display: flex !important;
    flex-direction: row !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    gap: 4px !important;
  }
  .left-rail .rail-head { display: none !important; }
  .left-rail .rail-body {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
  }
  .rail-item {
    flex-shrink: 0 !important;
    min-width: 68px !important;
    max-width: 80px !important;
    padding: 4px 7px !important;
    border-radius: 6px !important;
  }

  /* Panel only shows the mobile-active one */
  [data-panel].is-mobile-hidden {
    display: none !important;
  }

  /* Chart indicator toggles wrap tightly on mobile */
  .chart-indicator-bar {
    gap: 3px !important;
    padding: 4px 6px !important;
  }
  .indicator-toggle {
    font-size: 0.62rem !important;
    padding: 2px 5px !important;
  }

  /* Chart canvas reduced height on mobile */
  .chart-canvas-wrap {
    height: 280px !important;
    min-height: 280px !important;
  }

  /* Summary grids: 2 columns on mobile */
  .chart-summary-grid,
  .card-grid-home {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Screener filters stack vertically */
  .screener-filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .screener-filters select,
  .screener-filters input {
    width: 100% !important;
  }

  /* News filter bar scrolls horizontally */
  .news-filter-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .news-filter-bar::-webkit-scrollbar { display: none; }

  /* Heatmap tiles: 3-column minimum */
  .tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
    gap: 4px !important;
  }
  .tile {
    padding: 6px 4px !important;
  }
  .tile strong {
    font-size: 0.68rem !important;
  }

  /* Sector snapshot tiles */
  .sector-snapshot-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Quick action grid */
  .action-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Split grid goes single column */
  .split-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Guided Tour ──────────────────────────────────────────────────────────── */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
}
.tour-overlay.hidden { display: none; }

.tour-spotlight {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 4, 18, 0.76);
  outline: 2.5px solid var(--accent, #2fcf84);
  outline-offset: 5px;
  z-index: 9991;
  transition: top 0.32s cubic-bezier(.4,0,.2,1),
              left 0.32s cubic-bezier(.4,0,.2,1),
              width 0.32s cubic-bezier(.4,0,.2,1),
              height 0.32s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.tour-spotlight.tour-no-target {
  box-shadow: 0 0 0 9999px rgba(0, 4, 18, 0.76);
  outline: none;
  width: 0 !important;
  height: 0 !important;
  top: 50% !important;
  left: 50% !important;
}

.tour-card {
  position: fixed;
  width: min(360px, calc(100vw - 32px));
  background: var(--surface, #111827);
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 14px;
  padding: 20px;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(47, 207, 132, 0.14);
  z-index: 9999;
  pointer-events: all;
  transition: top 0.32s cubic-bezier(.4,0,.2,1),
              left 0.32s cubic-bezier(.4,0,.2,1);
}

.tour-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  align-items: center;
}

.tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border, #1e2d4a);
  transition: background 0.22s, width 0.22s, border-radius 0.22s;
  flex-shrink: 0;
}
.tour-dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: var(--accent, #2fcf84);
}

.tour-card-body { margin-bottom: 16px; }

.tour-step-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 10px;
  line-height: 1;
}

.tour-step-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #e8f0fe);
}

.tour-step-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted, #7b91b5);
  line-height: 1.6;
}

.tour-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #1e2d4a);
}

@media (max-width: 480px) {
  .tour-card { padding: 14px 14px 16px; }
  .tour-step-title { font-size: 0.9rem; }
  .tour-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .tour-actions > .btn-ghost { width: 100%; text-align: left; order: 1; }
  .tour-actions > div { order: 0; }
}

/* ─────────────────────────────────────────────────────────────
   Order type selector + limit price field
   ───────────────────────────────────────────────────────────── */
.trade-order-type-select {
  width: 100%;
  background: #0d1529;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 7px 10px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2398a6cf' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.trade-order-type-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(111, 143, 255, 0.18);
}

.trade-limit-price-field {
  animation: fadeIn 0.15s ease;
}

/* ─────────────────────────────────────────────────────────────
   Pending orders table
   ───────────────────────────────────────────────────────────── */
.pending-order-row {
  opacity: 0.92;
}
.pending-order-row:hover {
  opacity: 1;
  background: rgba(111, 143, 255, 0.04);
}

.order-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.order-type-limit {
  background: rgba(111, 143, 255, 0.15);
  color: #a0b4ff;
  border: 1px solid rgba(111, 143, 255, 0.3);
}
.order-type-stop {
  background: rgba(246, 179, 75, 0.15);
  color: #f6b34b;
  border: 1px solid rgba(246, 179, 75, 0.3);
}

/* ─────────────────────────────────────────────────────────────
   Mobile: trade order type + pending orders
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .trade-order-type-select {
    font-size: 0.78rem;
    padding: 6px 28px 6px 8px;
  }

  .pending-order-row td:nth-child(6),
  .pending-order-row td:nth-child(5) {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Yield curve SVG chart
   ───────────────────────────────────────────────────────────── */
.yield-curve-wrap {
  padding: 4px 0 0;
  overflow: hidden;
}

.yield-curve-svg {
  width: 100%;
  height: 140px;
  display: block;
}

.curve-tenor-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 2px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
  gap: 4px;
}

.curve-tenor-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.curve-tenor-cell strong {
  font-size: 0.72rem;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.curve-tenor-cell small {
  font-size: 0.65rem;
  color: var(--muted);
}

@media (max-width: 768px) {
  .curve-tenor-cell strong { font-size: 0.65rem; }
  .curve-tenor-cell small  { font-size: 0.6rem; }
}

/* ───────── Live Ticker Tape ───────── */
.ticker-tape {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 30px;
  background: linear-gradient(180deg, rgba(10, 14, 25, 0.95) 0%, rgba(10, 14, 25, 0.85) 100%);
  border-top: 1px solid rgba(80, 100, 160, 0.18);
  border-bottom: 1px solid rgba(80, 100, 160, 0.18);
  margin: 0;
  padding: 0;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 0.74rem;
  z-index: 5;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.ticker-tape.is-empty { display: none; }

.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  width: max-content;
  animation: ticker-scroll 80s linear infinite;
  will-change: transform;
}
.ticker-tape:hover .ticker-track { animation-play-state: paused; }

.ticker-segment {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 30px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(80, 100, 160, 0.10);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease;
  font-family: inherit;
}
.ticker-item:hover {
  background: rgba(120, 160, 255, 0.07);
  color: var(--accent);
}
.ticker-item strong {
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.ticker-item em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}
.ticker-item .positive { color: #2fcf84; font-weight: 500; }
.ticker-item .negative { color: #ff5f7f; font-weight: 500; }
.ticker-item.is-loading em { opacity: 0.5; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

@media (max-width: 768px) {
  .ticker-tape { height: 26px; font-size: 0.68rem; }
  .ticker-item { height: 26px; padding: 0 10px; gap: 5px; }
}

/* Overview card with seed (non-live) data — subtler so user can tell at
   a glance which prices are live vs static. */
.overview-card.is-static {
  opacity: 0.78;
}
.overview-card.is-static strong {
  color: var(--muted);
}
.overview-card.is-static:hover {
  opacity: 1;
}


/* ───────── Position Sizer Card ───────── */
.position-sizer-card {
  background: linear-gradient(180deg, rgba(20, 30, 55, 0.55), rgba(15, 22, 42, 0.45));
  border: 1px solid rgba(120, 160, 255, 0.18);
}
.position-sizer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.position-sizer-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--muted);
}
.position-sizer-field input {
  background: rgba(8, 12, 24, 0.7);
  border: 1px solid rgba(120, 160, 255, 0.18);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  font-weight: 500;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.position-sizer-field input:focus {
  outline: none;
  border-color: rgba(120, 160, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(120, 160, 255, 0.15);
}
.position-sizer-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 10px 12px;
  background: rgba(8, 12, 24, 0.55);
  border: 1px solid rgba(120, 160, 255, 0.12);
  border-radius: 6px;
  margin-bottom: 10px;
}
.sizer-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sizer-result span {
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sizer-result strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.86rem;
  color: var(--text);
  font-weight: 600;
}
.sizer-result-wide {
  grid-column: 1 / -1;
}
.sizer-result-wide strong {
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 500;
}
.position-sizer-quick {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.position-sizer-hint {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}


/* ───────── Today's Movers (Portfolio attribution) ───────── */
.today-movers-card {
  background: linear-gradient(180deg, rgba(20, 30, 55, 0.45), rgba(15, 22, 42, 0.35));
}
.today-movers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.today-movers-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.today-movers-title {
  margin: 0 0 4px;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.today-movers-title.positive { color: #2fcf84; }
.today-movers-title.negative { color: #ff5f7f; }
.today-mover-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(8, 12, 24, 0.55);
  border: 1px solid rgba(120, 160, 255, 0.10);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  color: var(--text);
  font-family: inherit;
}
.today-mover-row:hover {
  background: rgba(120, 160, 255, 0.07);
  border-color: rgba(120, 160, 255, 0.25);
}
.today-mover-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
}
.today-mover-head strong {
  font-size: 0.8rem;
  font-weight: 600;
}
.today-mover-head span {
  font-size: 0.78rem;
  font-weight: 600;
}
.today-mover-bar {
  height: 4px;
  background: rgba(8, 12, 24, 0.6);
  border-radius: 2px;
  overflow: hidden;
}
.today-mover-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
}
.today-mover-bar .positive-bar { background: linear-gradient(90deg, #2fcf84, #22a96d); }
.today-mover-bar .negative-bar { background: linear-gradient(90deg, #ff5f7f, #d8364f); }
.today-mover-meta small {
  font-size: 0.7rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}

@media (max-width: 768px) {
  .today-movers-grid { grid-template-columns: 1fr; }
}


/* ───────── Multi-Watchlist Group Bar ───────── */
.watchlist-group-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 4px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(80, 100, 160, 0.10);
}

/* Sort cycle button */
.watchlist-sort-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0 4px 4px;
}

.wl-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(15, 22, 42, 0.55);
  border: 1px solid rgba(80, 100, 160, 0.18);
  border-radius: 999px;
  cursor: pointer;
  transition: all 120ms ease;
}

.wl-sort-btn:hover {
  border-color: rgba(120, 160, 255, 0.45);
  color: #c8d4f0;
}

.wl-sort-btn.is-active {
  border-color: rgba(120, 160, 255, 0.55);
  background: rgba(120, 160, 255, 0.12);
  color: #c8d4f0;
}

.wl-sort-icon {
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1;
}

.rail-row.is-sorted .rail-drag-handle {
  cursor: not-allowed;
  opacity: 0.35;
}
.wl-group-chip {
  display: inline-flex;
  align-items: stretch;
  border-radius: 5px;
  border: 1px solid rgba(80, 100, 160, 0.15);
  background: rgba(15, 22, 42, 0.5);
  overflow: hidden;
  transition: border-color 120ms ease, background 120ms ease;
}
.wl-group-chip.is-active {
  border-color: rgba(120, 160, 255, 0.55);
  background: rgba(120, 160, 255, 0.10);
  box-shadow: 0 0 0 1px rgba(120, 160, 255, 0.18);
}
.wl-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px 9px;
  font-family: inherit;
  font-size: 0.72rem;
}
.wl-group-btn strong {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}
.wl-group-btn small {
  font-size: 0.62rem;
  color: var(--muted);
  padding: 0 4px;
  background: rgba(8, 12, 24, 0.6);
  border-radius: 3px;
  font-family: "IBM Plex Mono", monospace;
}
.wl-group-chip.is-active .wl-group-btn small {
  background: rgba(120, 160, 255, 0.20);
  color: var(--accent);
}
.wl-group-del {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(80, 100, 160, 0.15);
  color: var(--muted);
  cursor: pointer;
  padding: 0 6px;
  font-size: 0.85rem;
  line-height: 1;
  transition: color 120ms ease, background 120ms ease;
}
.wl-group-del:hover {
  background: rgba(255, 95, 127, 0.12);
  color: #ff5f7f;
}
.wl-group-add {
  background: transparent;
  border: 1px dashed rgba(120, 160, 255, 0.30);
  color: var(--muted);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 0.85rem;
  line-height: 1;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.wl-group-add:hover {
  color: var(--accent);
  border-color: rgba(120, 160, 255, 0.55);
  background: rgba(120, 160, 255, 0.08);
}


/* ───────── Pricing Modal Enhancements ───────── */
.pricing-social-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--muted);
}
.pricing-stars {
  color: #f6b34b;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.pricing-popular-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #f6b34b, #ff8a3d);
  color: #1a1108;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(246, 179, 75, 0.35);
  white-space: nowrap;
}
.pricing-card.is-featured {
  position: relative;
  overflow: visible;
}

.pricing-trial-note {
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--success);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pricing-faq-accordion {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(80, 100, 160, 0.15);
}
.pricing-faq-accordion summary {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pricing-faq-accordion summary::-webkit-details-marker { display: none; }
.pricing-faq-accordion summary::before {
  content: "▶";
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 200ms ease;
}
.pricing-faq-accordion[open] summary::before { transform: rotate(90deg); }

.pricing-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.pricing-faq-item {
  padding: 10px 12px;
  background: rgba(8, 12, 24, 0.5);
  border: 1px solid rgba(80, 100, 160, 0.10);
  border-radius: 6px;
}
.pricing-faq-item strong {
  display: block;
  font-size: 0.78rem;
  color: var(--text);
  margin-bottom: 4px;
}
.pricing-faq-item p {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.45;
}


/* ───────── Theme System ───────── */
/* Variables that themes can override. The default :root values stay for "dark" theme. */
:root {
  --body-bg: #000000;
  --topbar-grad-from: rgba(20, 30, 60, 0.94);
  --topbar-grad-to:   rgba(14, 21, 46, 0.95);
  --topbar-border: rgba(67, 90, 162, 0.42);
}

/* Bloomberg — pure black with signature amber */
[data-theme="bloomberg"] {
  --bg: #000000;
  --bg-panel: #0a0a0a;
  --surface: #1a1303;
  --border: #3d2f10;
  --text: #ffb84d;
  --muted: #a08050;
  --accent: #ff9c00;
  --success: #00d96a;
  --danger: #ff3344;
  --warning: #f0d000;
  --body-bg: #000000;
  --topbar-grad-from: rgba(40, 28, 6, 0.95);
  --topbar-grad-to:   rgba(20, 14, 3, 0.96);
  --topbar-border: rgba(255, 156, 0, 0.35);
}
[data-theme="bloomberg"] body,
[data-theme="bloomberg"] .terminal-app,
[data-theme="bloomberg"] .app-shell {
  background: var(--body-bg);
}

/* Synthwave — deep purple with neon pink/cyan */
[data-theme="synthwave"] {
  --bg: #150828;
  --bg-panel: #1d0e35;
  --surface: #2a1452;
  --border: #4d2a8a;
  --text: #f0e8ff;
  --muted: #b09bd8;
  --accent: #ff66cc;
  --success: #00ffcc;
  --danger: #ff4477;
  --warning: #ffcc00;
  --body-bg: linear-gradient(160deg, #150828 0%, #0a0418 100%);
  --topbar-grad-from: rgba(60, 22, 110, 0.85);
  --topbar-grad-to:   rgba(30, 10, 60, 0.9);
  --topbar-border: rgba(255, 102, 204, 0.40);
}
[data-theme="synthwave"] body,
[data-theme="synthwave"] .terminal-app,
[data-theme="synthwave"] .app-shell {
  background: var(--body-bg);
}

/* Emerald — forest dark with gold accents */
[data-theme="emerald"] {
  --bg: #021410;
  --bg-panel: #062018;
  --surface: #0a3025;
  --border: #155040;
  --text: #d8f5e8;
  --muted: #88b8a4;
  --accent: #d4af37;
  --success: #4ade80;
  --danger: #ff6680;
  --warning: #f7c948;
  --body-bg: #021410;
  --topbar-grad-from: rgba(8, 45, 35, 0.94);
  --topbar-grad-to:   rgba(2, 22, 18, 0.96);
  --topbar-border: rgba(212, 175, 55, 0.30);
}
[data-theme="emerald"] body,
[data-theme="emerald"] .terminal-app,
[data-theme="emerald"] .app-shell {
  background: var(--body-bg);
}

/* Paper — light theme for daytime work */
[data-theme="paper"] {
  --bg: #f8f6f0;
  --bg-panel: #ffffff;
  --surface: #f0ebe0;
  --border: #d5cdb8;
  --text: #1a1a1a;
  --muted: #6b6356;
  --accent: #c43a3a;
  --success: #1e8a3e;
  --danger: #c92024;
  --warning: #c47a00;
  --body-bg: #e8e2d0;
  --topbar-grad-from: rgba(248, 246, 240, 0.96);
  --topbar-grad-to:   rgba(232, 226, 208, 0.96);
  --topbar-border: rgba(180, 165, 130, 0.50);
  color-scheme: light;
}
[data-theme="paper"] body,
[data-theme="paper"] .terminal-app,
[data-theme="paper"] .app-shell {
  background: var(--body-bg);
  color: var(--text);
}
[data-theme="paper"] .topbar {
  background: linear-gradient(180deg, var(--topbar-grad-from), var(--topbar-grad-to));
  border-color: var(--topbar-border);
}
[data-theme="paper"] .ticker-tape {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 246, 240, 0.92));
  border-color: rgba(180, 165, 130, 0.30);
  color: var(--text);
}
[data-theme="paper"] .ticker-item strong { color: var(--text); }
[data-theme="paper"] .ticker-item em { color: var(--muted); }
[data-theme="paper"] .panel,
[data-theme="paper"] .card,
[data-theme="paper"] .rail-card {
  background: var(--bg-panel);
  color: var(--text);
  border-color: var(--border);
}

/* Midnight — deep navy with electric blue */
[data-theme="midnight"] {
  --bg: #050d1a;
  --bg-panel: #0a1628;
  --surface: #0f2040;
  --border: #1e3a68;
  --text: #cce0ff;
  --muted: #7a9cc4;
  --accent: #3b82f6;
  --success: #22d3a0;
  --danger: #f87171;
  --warning: #fbbf24;
  --body-bg: linear-gradient(160deg, #050d1a 0%, #020810 100%);
  --topbar-grad-from: rgba(10, 22, 50, 0.96);
  --topbar-grad-to:   rgba(5, 12, 30, 0.98);
  --topbar-border: rgba(59, 130, 246, 0.35);
}
[data-theme="midnight"] body,
[data-theme="midnight"] .terminal-app,
[data-theme="midnight"] .app-shell {
  background: var(--body-bg);
}

/* Crimson — dark wine with deep red */
[data-theme="crimson"] {
  --bg: #0f0208;
  --bg-panel: #1a0510;
  --surface: #280a1c;
  --border: #4d1232;
  --text: #fce4ec;
  --muted: #c48aa0;
  --accent: #e53e6a;
  --success: #4ade80;
  --danger: #ff6b6b;
  --warning: #f4c542;
  --body-bg: #0f0208;
  --topbar-grad-from: rgba(45, 8, 25, 0.96);
  --topbar-grad-to:   rgba(20, 4, 14, 0.98);
  --topbar-border: rgba(229, 62, 106, 0.40);
}
[data-theme="crimson"] body,
[data-theme="crimson"] .terminal-app,
[data-theme="crimson"] .app-shell {
  background: var(--body-bg);
}

/* Slate — steel blue with cool gray */
[data-theme="slate"] {
  --bg: #0c1018;
  --bg-panel: #141d2b;
  --surface: #1e2a3d;
  --border: #2e4060;
  --text: #dce8f5;
  --muted: #7d98b8;
  --accent: #60a5fa;
  --success: #34d399;
  --danger: #f87171;
  --warning: #fbbf24;
  --body-bg: #0c1018;
  --topbar-grad-from: rgba(18, 28, 45, 0.96);
  --topbar-grad-to:   rgba(10, 16, 26, 0.98);
  --topbar-border: rgba(96, 165, 250, 0.30);
}
[data-theme="slate"] body,
[data-theme="slate"] .terminal-app,
[data-theme="slate"] .app-shell {
  background: var(--body-bg);
}

/* Amber — warm honey with dark gold */
[data-theme="amber"] {
  --bg: #100c00;
  --bg-panel: #1c1600;
  --surface: #2c2200;
  --border: #503800;
  --text: #fef3c7;
  --muted: #c49d50;
  --accent: #f59e0b;
  --success: #34d399;
  --danger: #f87171;
  --warning: #fcd34d;
  --body-bg: #100c00;
  --topbar-grad-from: rgba(35, 26, 0, 0.96);
  --topbar-grad-to:   rgba(18, 13, 0, 0.98);
  --topbar-border: rgba(245, 158, 11, 0.35);
}
[data-theme="amber"] body,
[data-theme="amber"] .terminal-app,
[data-theme="amber"] .app-shell {
  background: var(--body-bg);
}

/* ───────── Theme Picker Popover ───────── */
.theme-popover {
  position: fixed;
  top: 64px;
  right: 18px;
  z-index: 250;
  width: 420px;
  background: linear-gradient(180deg, rgba(20, 30, 60, 0.98), rgba(14, 21, 46, 0.99));
  border: 1px solid var(--topbar-border);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(120, 160, 255, 0.10);
  padding: 14px;
  animation: theme-popover-in 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes theme-popover-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.theme-popover-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(80, 100, 160, 0.15);
}
.theme-popover-head strong {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.theme-popover-head small {
  font-size: 0.68rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  background: rgba(8, 12, 24, 0.6);
  padding: 2px 6px;
  border-radius: 4px;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px;
  background: rgba(8, 12, 24, 0.55);
  border: 1px solid rgba(80, 100, 160, 0.12);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  color: var(--text);
  font-family: inherit;
}
.theme-option:hover {
  border-color: rgba(120, 160, 255, 0.50);
  background: rgba(120, 160, 255, 0.07);
  transform: translateY(-1px);
}
.theme-option.is-active {
  border-color: rgba(120, 160, 255, 0.70);
  background: rgba(120, 160, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(120, 160, 255, 0.30);
}
.theme-option strong {
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 6px;
}
.theme-option small {
  font-size: 0.66rem;
  color: var(--muted);
}
.theme-swatch {
  display: block;
  width: 100%;
  height: 38px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}
.theme-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: brightness(1.05);
}
.theme-swatch-dark {
  background: linear-gradient(135deg, #050505 0%, #161f3d 60%, #6f8fff 100%);
}
.theme-swatch-bloomberg {
  background: linear-gradient(135deg, #000000 0%, #1a1303 50%, #ff9c00 100%);
}
.theme-swatch-synthwave {
  background: linear-gradient(135deg, #150828 0%, #2a1452 50%, #ff66cc 100%);
}
.theme-swatch-emerald {
  background: linear-gradient(135deg, #021410 0%, #0a3025 50%, #d4af37 100%);
}
.theme-swatch-paper {
  background: linear-gradient(135deg, #f8f6f0 0%, #e8e2d0 50%, #c43a3a 100%);
}
.theme-swatch-midnight {
  background: linear-gradient(135deg, #050d1a 0%, #0a1628 50%, #3b82f6 100%);
}
.theme-swatch-crimson {
  background: linear-gradient(135deg, #0f0208 0%, #1a0510 50%, #e53e6a 100%);
}
.theme-swatch-slate {
  background: linear-gradient(135deg, #0c1018 0%, #141d2b 50%, #60a5fa 100%);
}
.theme-swatch-amber {
  background: linear-gradient(135deg, #100c00 0%, #1c1600 50%, #f59e0b 100%);
}

/* ───────── Settings Panel ───────── */
.settings-panel-root {
  min-height: 100%;
  padding: 20px 0 40px;
  animation: settings-panel-in 280ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes settings-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.settings-panel-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 4px;
}
.settings-section {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  animation: settings-section-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.settings-section:last-of-type { border-bottom: none; }
@keyframes settings-section-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.settings-section:nth-child(1) { animation-delay: 0ms; }
.settings-section:nth-child(2) { animation-delay: 40ms; }
.settings-section:nth-child(3) { animation-delay: 80ms; }
.settings-section:nth-child(4) { animation-delay: 120ms; }
.settings-section:nth-child(5) { animation-delay: 160ms; }
.settings-section:nth-child(6) { animation-delay: 200ms; }
.settings-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-hint {
  font-size: 0.66rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.07);
}
.settings-panel-user {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  transition: background 180ms ease;
}
.settings-panel-user:hover { background: rgba(255,255,255,0.045); }
.settings-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), rgba(111, 143, 255, 0.4));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(111,143,255,0.3);
}
.settings-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-user-info strong {
  font-size: 0.96rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-user-info small {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-username {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem !important;
}
.settings-tier-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.settings-tier-badge.tier-free {
  background: rgba(255,255,255,0.07);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.1);
}
.settings-tier-badge.tier-pro {
  background: linear-gradient(135deg, rgba(111,143,255,0.2), rgba(111,143,255,0.08));
  color: #b0c4ff;
  border: 1px solid rgba(111,143,255,0.3);
}
.settings-tier-badge.tier-pro-plus {
  background: linear-gradient(135deg, rgba(255,184,77,0.2), rgba(255,120,0,0.1));
  color: #ffd080;
  border: 1px solid rgba(255,184,77,0.3);
}
.settings-section-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.settings-panel-guest {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 12px;
}
.settings-guest-msg {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 14px;
}
.settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 520px) {
  .settings-theme-grid { grid-template-columns: repeat(2, 1fr); }
}
.settings-sub-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 16px;
}
.settings-sub-card.tier-pro {
  border-color: rgba(111,143,255,0.2);
  background: rgba(111,143,255,0.04);
}
.settings-sub-card.tier-pro-plus {
  border-color: rgba(255,184,77,0.2);
  background: rgba(255,184,77,0.04);
}
.settings-sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.settings-sub-header strong { font-size: 0.9rem; }
.settings-sub-desc {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.55;
}
.settings-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 480px) {
  .settings-plan-grid { grid-template-columns: 1fr; }
}
.settings-plan-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.settings-plan-card:hover {
  border-color: rgba(111,143,255,0.35);
  transform: translateY(-2px);
}
.settings-plan-featured {
  border-color: rgba(111,143,255,0.25);
  background: rgba(111,143,255,0.06);
}
.settings-plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6f8fff, #a78bfa);
  color: #fff;
  white-space: nowrap;
}
.settings-plan-card strong { font-size: 1rem; font-weight: 700; }
.settings-plan-card span { font-size: 0.8rem; color: var(--muted); }
.settings-plan-card ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.settings-plan-card ul li {
  font-size: 0.75rem;
  color: var(--muted);
}
.settings-pref-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.settings-pref-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
}
.settings-pref-row:last-child { border-bottom: none; }
.settings-pref-action { cursor: default; }
.settings-pref-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-pref-row > div strong { font-size: 0.86rem; font-weight: 600; }
.settings-pref-row > div small { font-size: 0.74rem; color: var(--muted); }
.settings-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms ease;
  outline: none;
}
.settings-toggle.is-on {
  background: var(--accent);
}
.settings-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.settings-toggle.is-on .settings-toggle-knob {
  transform: translateX(18px);
}
.settings-shortcut-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.settings-shortcut-table td {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.settings-shortcut-table tr:last-child td { border-bottom: none; }
.settings-shortcut-table kbd {
  display: inline-block;
  padding: 2px 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.settings-shortcut-table td:last-child {
  padding-left: 14px;
  color: var(--muted);
}
.settings-panel-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
}
.settings-panel-footer a {
  color: var(--accent);
  text-decoration: none;
}
.settings-panel-footer a:hover { text-decoration: underline; }
.btn-danger-ghost {
  background: transparent;
  border: 1px solid rgba(229, 62, 62, 0.35);
  color: #f87171;
}
.btn-danger-ghost:hover {
  background: rgba(229, 62, 62, 0.1);
  border-color: rgba(229, 62, 62, 0.55);
}


/* ───────── Tier Gate Cards ───────── */
.tier-gate-card {
  margin: 24px auto;
  max-width: 520px;
  background: linear-gradient(160deg, rgba(18, 26, 56, 0.9) 0%, rgba(10, 16, 36, 0.95) 100%);
  border: 1px solid rgba(111, 143, 255, 0.22);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: card-in 280ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(111, 143, 255, 0.08);
}
.tier-gate-icon {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(111, 143, 255, 0.4));
}
.tier-gate-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}
.tier-gate-card p {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 400px;
  margin: 0;
}
.tier-gate-preview {
  width: 100%;
  margin: 8px 0;
  padding: 14px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  font-size: 0.8rem;
  overflow: hidden;
  position: relative;
}
.tier-gate-preview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to bottom, transparent, rgba(10, 16, 36, 0.95));
  pointer-events: none;
}
.tier-gate-preview-line {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tier-gate-blur {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
  color: var(--muted);
}
.tier-gate-table-preview {
  padding: 0;
  overflow-x: auto;
}
.tier-gate-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.tier-gate-preview-table th {
  padding: 6px 10px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: right;
}
.tier-gate-preview-table th:first-child { text-align: left; }
.tier-gate-preview-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-align: right;
}
.tier-gate-preview-table td:first-child { text-align: left; }
.tier-gate-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.tier-gate-note {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 2px;
}


/* ───────── Fluid Animations ───────── */

/* Panel content entrance */
.panel-content {
  animation: panel-content-in 240ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes panel-content-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal backdrop entrance */
.modal-backdrop:not(.hidden) {
  animation: modal-backdrop-in 220ms ease both;
}
@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal box spring entrance */
.modal-box {
  animation: modal-box-in 280ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
@keyframes modal-box-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Card grid staggered entrance */
.card-grid .card:nth-child(1) { animation-delay: 0ms; }
.card-grid .card:nth-child(2) { animation-delay: 30ms; }
.card-grid .card:nth-child(3) { animation-delay: 60ms; }
.card-grid .card:nth-child(4) { animation-delay: 90ms; }
.card-grid .card:nth-child(5) { animation-delay: 120ms; }
.card-grid .card:nth-child(6) { animation-delay: 150ms; }
.card-grid .card {
  animation: card-in 300ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Price flash tones — smoother */
.price-up {
  animation: price-flash-up 900ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.price-down {
  animation: price-flash-down 900ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes price-flash-up {
  0%   { background-color: rgba(47, 207, 132, 0.28); color: #2fcf84; }
  60%  { background-color: rgba(47, 207, 132, 0.10); }
  100% { background-color: transparent; color: inherit; }
}
@keyframes price-flash-down {
  0%   { background-color: rgba(248, 81, 73, 0.25); color: #f85149; }
  60%  { background-color: rgba(248, 81, 73, 0.08); }
  100% { background-color: transparent; color: inherit; }
}

/* Tab bar transitions */
.tabs-row .tab-btn {
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

/* Sidebar / watchlist row hover */
.rail-item {
  transition: background 130ms ease, border-color 130ms ease, transform 120ms ease;
}
.rail-item:hover { transform: translateX(2px); }

/* Button press micro-animation */
.btn {
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease,
              transform 100ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
.btn:active { transform: scale(0.97); }

/* Function key hover spring */
.function-key {
  transition: background 140ms ease, border-color 180ms ease, color 140ms ease,
              box-shadow 200ms ease, transform 140ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.function-key:hover { transform: translateY(-1px); }
.function-key:active { transform: scale(0.96); }

/* Toast entrance */
.toast {
  animation: toast-in 320ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Notif drawer entrance */
.notif-drawer.is-open {
  animation: notif-drawer-in 280ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes notif-drawer-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Skeleton shimmer improvements */
.shimmer-line,
.shimmer-block {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 30%,
    rgba(255,255,255,0.04) 60%);
  background-size: 200% 100%;
  animation: shimmer-sweep 1.6s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes shimmer-sweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Panel focus ring pulse */
.panel.is-focused {
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

/* Autocomplete dropdown entrance */
.autocomplete-dropdown:not(.hidden) {
  animation: dropdown-in 180ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scaleY(0.97); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* Topbar separator fade on scroll */
.topbar {
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

/* Chip hover */
.chip {
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.chip:hover { transform: translateY(-1px); }

/* Overview card hover lift */
.overview-card {
  transition: border-color 160ms ease, background 160ms ease, transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 200ms ease;
}
.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ───────── Earnings Calendar ───────── */
.earnings-calendar-card {
  background: linear-gradient(180deg, rgba(35, 24, 60, 0.45), rgba(20, 14, 40, 0.35));
  border: 1px solid rgba(180, 130, 255, 0.20);
}
.earnings-cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.earnings-cal-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(8, 12, 24, 0.6);
  border: 1px solid rgba(180, 130, 255, 0.12);
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  color: var(--text);
  font-family: inherit;
  text-align: left;
}
.earnings-cal-tile:hover {
  border-color: rgba(180, 130, 255, 0.50);
  background: rgba(180, 130, 255, 0.08);
  transform: translateY(-1px);
}
.earnings-cal-tile.is-urgent {
  border-color: rgba(246, 179, 75, 0.55);
  background: rgba(246, 179, 75, 0.08);
  box-shadow: 0 0 0 1px rgba(246, 179, 75, 0.18);
}
.earnings-cal-tile.is-soon {
  border-color: rgba(180, 130, 255, 0.40);
}
.earnings-cal-day {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.earnings-cal-tile.is-urgent .earnings-cal-day {
  color: var(--warning);
  animation: earnings-pulse 1.6s ease-in-out infinite;
}
@keyframes earnings-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.earnings-cal-date {
  font-size: 0.66rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}
.earnings-cal-sym strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  display: block;
}
.earnings-cal-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 2px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
}
.earnings-cal-price small {
  font-size: 0.66rem;
  font-weight: 600;
}


/* ───────── Screener Soft Paywall ───────── */
.screener-locked-row {
  position: relative;
  background: rgba(120, 160, 255, 0.04);
}
.screener-locked-row td { border-color: rgba(80, 100, 160, 0.10); }
.screener-locked-text {
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
  opacity: 0.7;
}
.screener-lock-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.92rem;
  filter: none !important;
  vertical-align: middle;
}
.screener-locked-row td:has(.screener-lock-icon) .screener-locked-text {
  filter: none;
  color: var(--accent);
  font-weight: 500;
  font-size: 0.78rem;
  opacity: 1;
}

.screener-paywall-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(120, 160, 255, 0.10), rgba(180, 130, 255, 0.08));
  border: 1px solid rgba(120, 160, 255, 0.30);
  border-radius: 8px;
}
.screener-paywall-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.screener-paywall-text strong {
  font-size: 0.82rem;
  color: var(--text);
}
.screener-paywall-text small {
  font-size: 0.7rem;
  color: var(--muted);
}


/* ───────── Ticker Notes / Trade Journal ───────── */
.ticker-notes-card {
  background: linear-gradient(180deg, rgba(35, 50, 25, 0.30), rgba(20, 32, 14, 0.22));
  border: 1px solid rgba(160, 200, 100, 0.18);
}
.ticker-notes-textarea {
  width: 100%;
  background: rgba(8, 12, 24, 0.70);
  border: 1px solid rgba(120, 160, 255, 0.18);
  color: var(--text);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--mono), monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 90px;
  transition: border-color 120ms ease;
}
.ticker-notes-textarea:focus {
  outline: none;
  border-color: rgba(160, 200, 100, 0.50);
  box-shadow: 0 0 0 2px rgba(160, 200, 100, 0.12);
}
.ticker-notes-textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
  font-style: italic;
}
.ticker-notes-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--muted);
}


/* ───────── Visual Polish: Shimmer Skeletons ───────── */
.skeleton-box {
  position: relative;
  overflow: hidden;
  background: rgba(80, 100, 160, 0.10);
}
.skeleton-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(120, 160, 255, 0.10) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  transform: translateX(-100%);
}
@keyframes skeleton-shimmer {
  to { transform: translateX(100%); }
}

/* ───────── Visual Polish: Card Micro-Interactions ───────── */
.card {
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 180ms ease,
              border-color 180ms ease;
}
.stat-card:hover,
.action-tile:hover,
.pulse-card:hover {
  transform: translateY(-2px);
}
.action-tile {
  transition: transform 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 160ms ease,
              background 160ms ease;
}

/* ───────── Visual Polish: Glowing Live Dot ───────── */
.overview-live-dot,
.market-clock-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  margin-left: 5px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(47, 207, 132, 0.55);
  animation: live-dot-pulse 2s ease-in-out infinite;
}
@keyframes live-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 207, 132, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(47, 207, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 207, 132, 0); }
}

/* ───────── Visual Polish: Price Flash (subtle smooth transition) ───────── */
[data-price-up] {
  animation: price-flash-up 700ms ease-out;
}
[data-price-down] {
  animation: price-flash-down 700ms ease-out;
}
@keyframes price-flash-up {
  0%   { background-color: rgba(47, 207, 132, 0.30); }
  100% { background-color: transparent; }
}
@keyframes price-flash-down {
  0%   { background-color: rgba(255, 95, 127, 0.30); }
  100% { background-color: transparent; }
}

/* ───────── Visual Polish: Subtle Background Grain ───────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.6) 1px, transparent 0);
  background-size: 32px 32px;
}

/* ───────── Visual Polish: Better Focus Ring ───────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(120, 160, 255, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ───────── Visual Polish: Click-to-Copy on Prices ───────── */
[data-copy-on-click] {
  cursor: pointer;
  transition: color 150ms ease;
  position: relative;
}
[data-copy-on-click]:hover {
  color: var(--accent);
}
[data-copy-on-click]::after {
  content: "📋";
  position: absolute;
  top: -2px;
  right: -16px;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}
[data-copy-on-click]:hover::after {
  opacity: 0.6;
}
[data-copy-on-click].copied::after {
  content: "✓";
  opacity: 1;
  color: var(--success);
}

/* ───────── Visual Polish: Card Accent Stripe (key metrics) ───────── */
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 180ms ease;
}
.stat-card:hover::before {
  opacity: 1;
}

/* ───────── Visual Polish: Topbar Brand Glow ───────── */
.brand-mark {
  position: relative;
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.brand-mark:hover {
  transform: rotate(-3deg) scale(1.05);
}

/* ───────── Visual Polish: Toolbar pill hover ───────── */
.range-pill {
  transition: transform 120ms ease, background 150ms ease, color 150ms ease;
}
.range-pill:hover:not(.is-active) {
  transform: translateY(-1px);
  color: var(--accent);
}

/* ───────── Visual Polish: Smooth scroll for any panel content ───────── */
.panel-content {
  scroll-behavior: smooth;
}
.panel-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.panel-content::-webkit-scrollbar-track {
  background: rgba(8, 12, 24, 0.4);
}
.panel-content::-webkit-scrollbar-thumb {
  background: rgba(120, 160, 255, 0.18);
  border-radius: 4px;
  transition: background 150ms ease;
}
.panel-content::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 160, 255, 0.35);
}


/* ───────── Live User Count Chip ───────── */
.chip-live-users {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(47, 207, 132, 0.10);
  border: 1px solid rgba(47, 207, 132, 0.25);
  color: #2fcf84;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
}
.chip-live-users .status-chip-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2fcf84;
  box-shadow: 0 0 0 0 rgba(47, 207, 132, 0.55);
  animation: live-dot-pulse 2s ease-in-out infinite;
}

/* ───────── Free Trial CTA Button (topbar) ───────── */
.btn-trial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg, #f6b34b 0%, #ff8a3d 100%);
  color: #1a1108;
  border: none;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: transform 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 4px 14px rgba(246, 179, 75, 0.25);
}
.btn-trial:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(246, 179, 75, 0.40);
}
.btn-trial:active {
  transform: translateY(0);
}
.trial-badge-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: trial-pulse 1.6s ease-in-out infinite;
}
@keyframes trial-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Dim the trial button slightly when user is already pro/auth'd (best effort via class) */
[data-user-pro="true"] .btn-trial {
  background: linear-gradient(90deg, #2fcf84 0%, #1ea866 100%);
  box-shadow: 0 4px 14px rgba(47, 207, 132, 0.20);
  color: #fff;
}
[data-user-pro="true"] .btn-trial::before {
  content: "✓ Pro · ";
}


/* ───────── Onboarding Wizard ───────── */
.onboarding-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.80);
  backdrop-filter: blur(10px) saturate(0.5);
  -webkit-backdrop-filter: blur(10px) saturate(0.5);
  z-index: 600;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
}

.onboarding-wizard {
  width: 100%;
  max-width: 620px;
  background: linear-gradient(180deg, rgba(18, 28, 55, 0.98) 0%, rgba(10, 16, 35, 0.99) 100%);
  border: 1px solid rgba(100, 130, 220, 0.35);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(120, 160, 255, 0.08), 0 0 60px rgba(80, 120, 255, 0.06);
  overflow: hidden;
  animation: wizard-in 350ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes wizard-in {
  from { opacity: 0; transform: scale(0.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Step dots */
.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 24px 0;
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.wizard-step span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(80, 100, 160, 0.25);
  border: 2px solid rgba(80, 100, 160, 0.25);
  transition: all 200ms ease;
}
.wizard-step.is-active span {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(111, 143, 255, 0.20);
}
.wizard-step.is-done span {
  background: var(--success);
  border-color: var(--success);
}
.wizard-step small {
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wizard-step.is-active small { color: var(--accent); }
.wizard-step.is-done small   { color: var(--success); }
.wizard-step-connector {
  flex: 1;
  height: 2px;
  max-width: 80px;
  background: rgba(80, 100, 160, 0.15);
  margin: 0 6px 16px;
  border-radius: 1px;
}

/* Panes */
.wizard-pane {
  display: none;
  padding: 20px 24px 24px;
}
.wizard-pane.is-active {
  display: block;
  animation: wizard-pane-in 250ms ease;
}
@keyframes wizard-pane-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.wizard-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(80, 100, 160, 0.12);
}
.wizard-hero h2 {
  margin: 0 0 2px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.wizard-hero p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.wizard-step-body h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.wizard-step-sub {
  margin: 0 0 16px;
  font-size: 0.78rem;
  color: var(--muted);
}
.wizard-step-sub kbd {
  background: rgba(80, 100, 160, 0.2);
  border: 1px solid rgba(80, 100, 160, 0.3);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-family: var(--mono);
}

/* Focus tiles */
.wizard-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.wizard-focus-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(8, 12, 24, 0.65);
  border: 1px solid rgba(80, 100, 160, 0.15);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  font-family: inherit;
  transition: border-color 130ms ease, background 130ms ease, transform 130ms ease;
}
.wizard-focus-tile:hover {
  border-color: rgba(120, 160, 255, 0.45);
  background: rgba(120, 160, 255, 0.06);
  transform: translateY(-1px);
}
.wizard-focus-tile.is-active {
  border-color: rgba(120, 160, 255, 0.80);
  background: rgba(120, 160, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(120, 160, 255, 0.30);
}
.wizard-focus-icon { font-size: 1.2rem; }
.wizard-focus-tile strong { font-size: 0.82rem; font-weight: 600; }
.wizard-focus-tile small  { font-size: 0.66rem; color: var(--muted); font-family: var(--mono); }
.wizard-selection-note {
  font-size: 0.72rem;
  color: var(--accent);
  font-family: var(--mono);
  min-height: 18px;
}

/* Theme tiles (wizard step 2) */
.wizard-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.wizard-theme-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0 0 10px;
  background: rgba(8, 12, 24, 0.65);
  border: 1px solid rgba(80, 100, 160, 0.15);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  overflow: hidden;
  transition: border-color 130ms ease, transform 130ms ease;
}
.wizard-theme-tile:hover { transform: translateY(-2px); border-color: rgba(120, 160, 255, 0.40); }
.wizard-theme-tile.is-active {
  border-color: rgba(120, 160, 255, 0.80);
  box-shadow: 0 0 0 2px rgba(120, 160, 255, 0.25), 0 4px 12px rgba(80, 120, 255, 0.15);
}
.wizard-theme-tile strong { font-size: 0.76rem; font-weight: 600; padding: 0 10px; }
.wizard-theme-tile small  { font-size: 0.62rem; color: var(--muted); padding: 0 10px; }

/* Theme preview mini-mockup */
.wizard-theme-preview {
  width: 100%;
  height: 62px;
  border-radius: 4px 4px 0 0;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.wizard-preview-dark     { background: #050505; }
.wizard-preview-bloomberg{ background: #000000; }
.wizard-preview-synthwave{ background: #150828; }
.wizard-preview-emerald  { background: #021410; }
.wizard-preview-paper    { background: #f8f6f0; }
.wtp-bar { height: 6px; border-radius: 2px; background: rgba(120, 160, 255, 0.20); margin-bottom: 2px; }
.wizard-preview-bloomberg .wtp-bar { background: rgba(255,156,0,0.25); }
.wizard-preview-synthwave .wtp-bar { background: rgba(255,102,204,0.25); }
.wizard-preview-emerald .wtp-bar   { background: rgba(212,175,55,0.25); }
.wizard-preview-paper .wtp-bar     { background: rgba(180,165,130,0.30); }
.wtp-row { display: flex; gap: 3px; align-items: center; }
.wtp-row.small { gap: 2px; }
.wtp-cell { flex: 1; height: 12px; border-radius: 2px; background: rgba(80,100,160,0.12); }
.wtp-cell.green  { background: rgba(47,207,132,0.40); }
.wtp-cell.red    { background: rgba(255,95,127,0.40); }
.wtp-cell.amber  { background: rgba(255,156,0,0.45); }
.wtp-cell.cyan   { background: rgba(0,255,204,0.40); }
.wtp-cell.pink   { background: rgba(255,102,204,0.40); }
.wtp-cell.gold   { background: rgba(212,175,55,0.45); }
.wtp-cell.dkgreen{ background: rgba(30,138,62,0.45); }
.wtp-cell.dkred  { background: rgba(201,32,36,0.40); }
.wtp-line { flex: 2; height: 4px; border-radius: 2px; background: rgba(80,100,160,0.12); }
.wtp-line.short  { flex: 1; }
.wtp-line.amber  { background: rgba(255,156,0,0.30); }
.wtp-line.cyan   { background: rgba(0,255,204,0.30); }
.wtp-line.pink   { background: rgba(255,102,204,0.30); }
.wtp-line.gold   { background: rgba(212,175,55,0.30); }
.wtp-line.dkgreen{ background: rgba(30,138,62,0.30); }
.wtp-line.dkred  { background: rgba(201,32,36,0.25); }

/* Speed tiles (wizard step 3) */
.wizard-speed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.wizard-speed-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(8, 12, 24, 0.65);
  border: 1px solid rgba(80, 100, 160, 0.15);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: border-color 130ms ease, background 130ms ease;
}
.wizard-speed-tile:hover { border-color: rgba(120, 160, 255, 0.40); }
.wizard-speed-tile.is-active {
  border-color: rgba(120, 160, 255, 0.80);
  background: rgba(120, 160, 255, 0.10);
  box-shadow: 0 0 0 1px rgba(120, 160, 255, 0.28);
}
.wizard-speed-tile strong { font-size: 0.86rem; font-weight: 700; }
.wizard-speed-tile small  { font-size: 0.70rem; color: var(--muted); }
.wizard-speed-badge {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f6b34b, #ff8a3d);
  color: #1a1108;
}

/* Recap */
.wizard-finish-recap {
  background: rgba(120, 160, 255, 0.06);
  border: 1px solid rgba(120, 160, 255, 0.15);
  border-radius: 8px;
  padding: 12px 14px;
}
.wizard-recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.wizard-recap-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wizard-recap-item span {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wizard-recap-item strong {
  font-size: 0.82rem;
  color: var(--text);
  font-family: var(--mono);
}

/* Actions bar */
.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(80, 100, 160, 0.12);
}
.wizard-launch-btn {
  background: linear-gradient(90deg, #2fcf84, #1ea866);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 4px 14px rgba(47, 207, 132, 0.25);
}
.wizard-launch-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(47, 207, 132, 0.35);
}

@media (max-width: 600px) {
  .wizard-focus-grid { grid-template-columns: 1fr 1fr; }
  .wizard-speed-grid { grid-template-columns: 1fr 1fr; }
  .wizard-theme-grid { grid-template-columns: 1fr 1fr 1fr; }
  .onboarding-wizard { max-width: 100%; border-radius: 12px; }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE DEEP POLISH — comprehensive 768px and below
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hide new topbar elements that don't fit on mobile */
  #themePickerBtn,
  #freeTrialBtn,
  #liveUserCount,
  .ticker-tape { display: none !important; }

  /* Better terminal grid row sizing on mobile */
  .terminal-app,
  .app-shell {
    grid-template-rows: auto auto 1fr auto auto !important;
  }

  /* Card density: more breathing room */
  .card { padding: 12px 14px !important; }
  .card-head { padding-bottom: 8px; }
  .card-head h4 { font-size: 0.82rem; }

  /* Quick actions grid: 3-col on mobile */
  .action-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .action-tile { padding: 10px 8px !important; }
  .action-tile strong { font-size: 0.76rem; }
  .action-tile span { display: none; }

  /* Split grid: single column on mobile */
  .split-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* Card-grid: full-width single column */
  .card-grid-home {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .stat-card { padding: 10px 12px !important; }
  .stat-card span { font-size: 0.68rem; }
  .stat-card strong { font-size: 1.0rem; }
  .stat-card small { font-size: 0.66rem; }

  /* Quote card: stacked layout */
  .quote-hero { flex-direction: column; gap: 10px; }
  .quote-meta-grid { grid-template-columns: 1fr 1fr; }
  .quote-stats-grid { grid-template-columns: 1fr 1fr; }

  /* Data tables: horizontal scroll */
  .data-table th, .data-table td { font-size: 0.7rem; padding: 6px 7px; }
  .data-table .screener-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Position sizer: 2-col inputs */
  .position-sizer-grid { grid-template-columns: 1fr 1fr !important; }
  .position-sizer-results { grid-template-columns: 1fr 1fr !important; }

  /* Today's movers: stack on mobile */
  .today-movers-grid { grid-template-columns: 1fr !important; }

  /* Screener paywall banner: stack */
  .screener-paywall-banner { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* News items: tighter */
  .news-item { padding: 8px 0; }
  .news-meta { flex-wrap: wrap; gap: 4px; }

  /* Earnings cal: 2-col */
  .earnings-cal-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Rail cards: hide sidebar on mobile (handled by bottom nav) */
  .left-rail { display: none !important; }

  /* Bottom nav: slightly taller with bigger icons */
  .mobile-panel-nav {
    height: 56px !important;
    padding: 4px 0 !important;
  }
  .mobile-panel-tab {
    font-size: 0.58rem !important;
    gap: 2px !important;
  }

  /* Statusbar: 2 items visible */
  .statusbar > span:nth-child(n+3) { display: none; }
  .statusbar > span:first-child { order: 1; }
  .statusbar-market-clock { order: 2; }

  /* Modal: full-screen on small devices */
  .pricing-modal { max-width: 100% !important; max-height: 90dvh; }
  .pricing-grid { grid-template-columns: 1fr !important; }
  .auth-modal { max-width: 95vw !important; }

  /* Shortcuts overlay: single column */
  .shortcuts-grid { grid-template-columns: 1fr 1fr !important; }

  /* Rule templates: 1-col */
  .rules-template-grid { grid-template-columns: 1fr !important; }

  /* Screener filter bar: 2-col */
  .screener-filters {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 420px) {
  /* Extra small: single column everywhere */
  .card-grid-home { grid-template-columns: 1fr !important; }
  .action-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .wizard-focus-grid { grid-template-columns: 1fr 1fr !important; }
  .earnings-cal-grid { grid-template-columns: 1fr 1fr !important; }
  .position-sizer-grid { grid-template-columns: 1fr !important; }
  .position-sizer-results { grid-template-columns: 1fr !important; }
  .pricing-grid { grid-template-columns: 1fr !important; }
  .wizard-speed-grid { grid-template-columns: 1fr 1fr !important; }

  .topbar { padding: 0 6px !important; }
  .brand-block strong { display: none !important; }
}

/* Safe-area bottom padding for modern iOS (home bar) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-panel-nav {
    padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important;
    height: calc(56px + env(safe-area-inset-bottom)) !important;
  }
  .terminal-app {
    padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }
}


/* ───────── Rules Engine Live UI ───────── */
.rules-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 4px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(47, 207, 132, 0.55);
  animation: live-dot-pulse 2s ease-in-out infinite;
}

.rules-live-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rule-live-row {
  border: 1px solid rgba(80, 100, 160, 0.15);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(8, 12, 24, 0.55);
  transition: border-color 200ms ease, background 200ms ease;
}
.rule-live-row.rule-status-matched {
  border-color: rgba(47, 207, 132, 0.55);
  background: rgba(47, 207, 132, 0.06);
  animation: rule-match-pulse 1.5s ease-in-out 3;
}
@keyframes rule-match-pulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px rgba(47, 207, 132, 0.20); }
}
.rule-live-row.rule-status-close {
  border-color: rgba(246, 179, 75, 0.45);
  background: rgba(246, 179, 75, 0.05);
}

.rule-live-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rule-live-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.84rem;
}
.rule-live-op {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rule-live-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(80, 100, 160, 0.15);
  color: var(--muted);
  white-space: nowrap;
}
.rule-live-status.rule-status-matched {
  background: rgba(47, 207, 132, 0.15);
  color: var(--success);
}
.rule-live-status.rule-status-close {
  background: rgba(246, 179, 75, 0.15);
  color: var(--warning);
}

.rule-proximity-bar {
  height: 5px;
  background: rgba(8, 12, 24, 0.6);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.rule-proximity-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(111, 143, 255, 0.5), rgba(111, 143, 255, 0.8));
  transition: width 300ms ease;
}
.rule-proximity-fill.close    { background: linear-gradient(90deg, #f6b34b, #ff8a3d); }
.rule-proximity-fill.matched  { background: linear-gradient(90deg, #2fcf84, #1ea866); }

.rule-live-meta {
  display: flex;
  gap: 14px;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  flex-wrap: wrap;
}
.rule-live-meta strong { color: var(--text); }
.rule-live-msg {
  flex: 1;
  color: var(--text);
  font-style: italic;
  font-family: var(--sans);
  font-size: 0.70rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* Chart compare button */
.btn.is-compare-active {
  border-color: rgba(255, 200, 60, 0.50);
  color: rgba(255, 200, 60, 0.90);
  background: rgba(255, 200, 60, 0.08);
}
.compare-legend { color: rgba(255, 200, 60, 0.90); }

/* ── Sentiment Sparkline Card ─────────────────────────────────────── */
.sentiment-sparkline-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

.sentiment-sparkline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sentiment-sparkline-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sentiment-sparkline-sub {
  display: block;
  font-size: 0.70rem;
  color: var(--muted);
  margin-top: 2px;
}

.sentiment-sparkline-score {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.sentiment-sparkline-score.positive { color: var(--positive); }
.sentiment-sparkline-score.negative { color: var(--negative); }

.sentiment-sparkline-arrow {
  font-size: 0.85rem;
}

.sentiment-sparkline-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  opacity: 0.85;
}

.sentiment-sparkline-body {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sentiment-sparkline {
  display: block;
  flex-shrink: 0;
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
}

.sentiment-sparkline-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.68rem;
  color: var(--muted);
}
.sentiment-sparkline-legend .positive { color: var(--positive); }
.sentiment-sparkline-legend .negative { color: var(--negative); }

@media (max-width: 480px) {
  .sentiment-sparkline-body { flex-direction: column; align-items: flex-start; }
  .sentiment-sparkline { width: 100%; max-width: 240px; }
}


/* ── Inline Position Editor ───────────────────────────────────────────── */
.pos-edit-row { background: rgba(111, 143, 255, 0.04); }
.pos-edit-row.hidden { display: none; }

.pos-edit-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  flex-wrap: wrap;
}

.pos-edit-label {
  font-size: 0.78rem;
  color: var(--muted);
  flex-shrink: 0;
}
.pos-edit-label strong { color: var(--accent, #6f8fff); }

.pos-edit-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--muted);
}
.pos-edit-field input {
  width: 100px;
  padding: 4px 8px;
  font-size: 0.78rem;
  background: var(--input-bg, rgba(10,14,30,0.7));
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
}
.pos-edit-field input:focus {
  border-color: rgba(111,143,255,0.6);
  outline: none;
}

.pos-edit-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* Make the edit pencil button subtler */
button[data-toggle-pos-edit] {
  opacity: 0.55;
  font-size: 0.85rem;
}
button[data-toggle-pos-edit]:hover { opacity: 1; }

/* ── Screener column header tooltips ─────────────────────────────────── */
.screener-th-hint {
  font-size: 0.65rem;
  color: var(--muted);
  display: block;
  font-weight: 400;
  letter-spacing: 0;
}

/* ── Heatmap tile — intensity-colored variant ─────────────────────── */
.heat-tile {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  transition: filter 120ms ease, transform 80ms ease;
}
.heat-tile:hover {
  filter: brightness(1.18);
  transform: scale(1.03);
  z-index: 2;
}
.heat-tile strong {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.heat-tile small {
  font-size: 0.68rem;
  font-family: "IBM Plex Mono", monospace;
}

/* ── Subscription tier badge (header) ─────────────────────────────────── */
.tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted);
  user-select: none;
  white-space: nowrap;
}
.tier-badge[data-tier="pro"] {
  background: linear-gradient(135deg, rgba(111,143,255,0.25), rgba(111,143,255,0.10));
  border-color: rgba(111,143,255,0.55);
  color: #cfdbff;
}
.tier-badge[data-tier="pro_plus"] {
  background: linear-gradient(135deg, rgba(255,196,80,0.25), rgba(255,140,80,0.12));
  border-color: rgba(255,196,80,0.6);
  color: #ffe6a8;
}

/* ── Mobile responsive layout ────────────────────────────────────── */
/*  All rules in this section layer on top of the existing desktop CSS.
    Desktop (>=901px) is left untouched. Tablet ≤900px stacks the four
    panels and surfaces the bottom nav; phone ≤600px goes full-screen
    for modals and tightens typography. JS toggles `body.is-mobile`
    when the 900px media-query matches. */

/* The "⋯ More" header button + dropdown — desktop hides them via .mobile-only */
.mobile-only { display: none !important; }
.mobile-more-menu {
  position: fixed;
  top: 56px;
  right: 8px;
  z-index: 250;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  padding: 8px;
  background: var(--bg, rgba(8, 12, 24, 0.98));
  border: 1px solid var(--border, rgba(120, 140, 180, 0.22));
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mobile-more-menu.hidden { display: none; }
.mobile-more-menu .btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  min-height: 44px;
  font-size: 0.85rem;
}

/* ── Tablet ≤900px ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  body.is-mobile .mobile-only { display: inline-flex !important; }

  /* Header: title shrinks; secondary buttons collapse into the More menu */
  .topbar { gap: 6px; padding: 0 10px; }
  #appTitle { font-size: 1rem; }
  .brand-block .chip-row { display: none !important; }

  /* Critical buttons stay; secondary ones hide (the JS dropdown re-exposes them) */
  body.is-mobile #autoJumpButton,
  body.is-mobile #resetFocusButton,
  body.is-mobile #replayTourBtn,
  body.is-mobile #shareViewBtn,
  body.is-mobile #themePickerBtn,
  body.is-mobile #openCommandPalette {
    display: none !important;
  }
  /* When cloned into the dropdown, force them visible again */
  body.is-mobile .mobile-more-menu #autoJumpButton,
  body.is-mobile .mobile-more-menu #resetFocusButton,
  body.is-mobile .mobile-more-menu #replayTourBtn,
  body.is-mobile .mobile-more-menu #shareViewBtn,
  body.is-mobile .mobile-more-menu #themePickerBtn,
  body.is-mobile .mobile-more-menu #openCommandPalette {
    display: inline-flex !important;
  }

  /* Ticker tape: smaller font + faster animation feel */
  .ticker-tape { font-size: 0.7rem; }
  .ticker-tape .ticker-track,
  .ticker-tape [class*="ticker-track"] {
    animation-duration: 28s !important;
  }

  /* Stack the 4 panels vertically with smooth horizontal slide animation */
  .workspace-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }
  .panel {
    transition: transform 240ms ease;
    will-change: transform;
  }
  .panel.is-mobile-hidden {
    transform: translateX(100%);
  }

  /* Tables get a horizontal scroll container so they never break layout */
  .panel-content table,
  .panel-content .data-table,
  .panel-content .options-table,
  .panel-content .screener-table,
  .panel-content .financial-data-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Touch targets: Apple HIG min 44x44 */
  .btn, .panel-btn, .icon-btn,
  .mobile-panel-tab,
  .auth-tab,
  .pricing-billing-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Charts auto-resize to viewport width */
  .panel-content canvas,
  .panel-content svg.chart-svg,
  .chart-canvas-wrap canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ── Phone ≤600px ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Title shrinks further; ticker even smaller */
  #appTitle { font-size: 0.85rem; }
  .ticker-tape { font-size: 0.65rem; }
  .ticker-tape .ticker-track,
  .ticker-tape [class*="ticker-track"] {
    animation-duration: 22s !important;
  }

  /* Modals go full-screen with sticky close button */
  .modal-backdrop > .auth-modal,
  .modal-backdrop > .settings-modal,
  .modal-backdrop > .pricing-modal,
  .palette-backdrop > .command-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
  }
  .auth-head,
  .pricing-modal-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg, rgba(8, 12, 24, 0.98));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .auth-head .icon-btn,
  .pricing-modal-head .icon-btn {
    position: sticky;
    right: 0;
    top: 0;
    min-width: 44px;
    min-height: 44px;
  }

  /* Command palette compresses to one line */
  .command-shell .cmd-kbd-hint { display: none; }
}


/* ── AI Insights panel ────────────────────────────────────────────── */
.ai-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px;
}
.ai-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.ai-symbol {
  margin: 0;
  font-size: 1.6rem;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
  color: var(--text);
}
.ai-symbol-meta {
  margin: 4px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.ai-symbol-meta .positive { color: var(--success, #2fcf84); }
.ai-symbol-meta .negative { color: var(--danger, #ff5f7f); }
.ai-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ai-loading,
.ai-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--muted);
}
.ai-empty h3 {
  color: var(--text);
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.ai-empty p {
  margin: 0 0 12px;
  line-height: 1.5;
  font-size: 0.88rem;
}
.ai-spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto 14px;
  border: 2px solid rgba(111,143,255,0.2);
  border-top-color: var(--accent, #6f8fff);
  border-radius: 50%;
  animation: ai-spin 800ms linear infinite;
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

.ai-card {
  background: linear-gradient(180deg, rgba(111,143,255,0.05), rgba(111,143,255,0.01));
  border: 1px solid rgba(111,143,255,0.18);
  border-radius: 10px;
  padding: 16px 18px;
}
.ai-card-tone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.ai-tone-icon { font-size: 0.85rem; }
.ai-headline {
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text);
}
.ai-bullets {
  margin: 0 0 14px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-bullets li {
  line-height: 1.55;
  font-size: 0.9rem;
  color: var(--text);
}
.ai-summary {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}
.ai-summary strong { color: var(--text); }

.ai-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
}
.ai-source-badge {
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.ai-source-badge[data-source="openai"],
.ai-source-badge[data-source="anthropic"] {
  background: linear-gradient(135deg, rgba(111,143,255,0.18), rgba(111,143,255,0.06));
  border-color: rgba(111,143,255,0.4);
  color: #cfdbff;
}

.ai-disclaimer {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 0.72rem;
  color: var(--muted);
  background: rgba(255,184,77,0.06);
  border-left: 2px solid rgba(255,184,77,0.5);
  border-radius: 3px;
}

/* AI quota meter. Lives between the commentary card and the footer so
   the user always sees their remaining headroom. Bar fill turns warm
   at 70% and red at 90% so a heavy month is obvious before the cap
   actually hits. */
.ai-quota {
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  font-family: "IBM Plex Mono", monospace;
}
.ai-quota-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.ai-quota-label {
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text, #e8edf5);
}
.ai-quota-count {
  font-variant-numeric: tabular-nums;
}
.ai-quota-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.ai-quota-bar-fill {
  height: 100%;
  background: var(--accent, #2fcf84);
  transition: width 0.4s ease, background-color 0.3s ease;
}
.ai-quota[data-pct="70"] .ai-quota-bar-fill,
.ai-quota[data-pct="71"] .ai-quota-bar-fill,
.ai-quota[data-pct="72"] .ai-quota-bar-fill,
.ai-quota[data-pct="73"] .ai-quota-bar-fill,
.ai-quota[data-pct="74"] .ai-quota-bar-fill,
.ai-quota[data-pct="75"] .ai-quota-bar-fill,
.ai-quota[data-pct="76"] .ai-quota-bar-fill,
.ai-quota[data-pct="77"] .ai-quota-bar-fill,
.ai-quota[data-pct="78"] .ai-quota-bar-fill,
.ai-quota[data-pct="79"] .ai-quota-bar-fill,
.ai-quota[data-pct="80"] .ai-quota-bar-fill,
.ai-quota[data-pct="81"] .ai-quota-bar-fill,
.ai-quota[data-pct="82"] .ai-quota-bar-fill,
.ai-quota[data-pct="83"] .ai-quota-bar-fill,
.ai-quota[data-pct="84"] .ai-quota-bar-fill,
.ai-quota[data-pct="85"] .ai-quota-bar-fill,
.ai-quota[data-pct="86"] .ai-quota-bar-fill,
.ai-quota[data-pct="87"] .ai-quota-bar-fill,
.ai-quota[data-pct="88"] .ai-quota-bar-fill,
.ai-quota[data-pct="89"] .ai-quota-bar-fill { background: #ffb84d; }
.ai-quota[data-pct="90"] .ai-quota-bar-fill,
.ai-quota[data-pct="91"] .ai-quota-bar-fill,
.ai-quota[data-pct="92"] .ai-quota-bar-fill,
.ai-quota[data-pct="93"] .ai-quota-bar-fill,
.ai-quota[data-pct="94"] .ai-quota-bar-fill,
.ai-quota[data-pct="95"] .ai-quota-bar-fill,
.ai-quota[data-pct="96"] .ai-quota-bar-fill,
.ai-quota[data-pct="97"] .ai-quota-bar-fill,
.ai-quota[data-pct="98"] .ai-quota-bar-fill,
.ai-quota[data-pct="99"] .ai-quota-bar-fill,
.ai-quota[data-pct="100"] .ai-quota-bar-fill { background: #ff5f7f; }
.ai-quota-note {
  margin: 6px 0 0;
  font-family: var(--sans, system-ui);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0;
}
.ai-quota-free {
  border-color: rgba(110,144,255,0.35);
  background: rgba(110,144,255,0.06);
}
.ai-quota-free .ai-quota-note { color: #cfdbff; }

/* ─── Right-Click Context Menu ──────────────────────────────────────────── */
.ctx-menu {
  min-width: 232px;
  background: linear-gradient(160deg, rgba(15, 22, 48, 0.98), rgba(10, 16, 40, 0.98));
  border: 1px solid rgba(111, 143, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  padding: 6px;
  backdrop-filter: blur(12px);
  animation: ctx-menu-pop 120ms ease-out;
  font-size: 0.82rem;
}

@keyframes ctx-menu-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ctx-menu-head {
  padding: 6px 10px 8px;
  border-bottom: 1px solid rgba(111, 143, 255, 0.16);
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ctx-menu-head strong {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--text);
}

.ctx-menu-head small {
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.82rem;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background 90ms ease, color 90ms ease;
}

.ctx-menu-item span {
  font-size: 0.96rem;
  width: 18px;
  display: inline-block;
  text-align: center;
  line-height: 1;
}

.ctx-menu-item kbd {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  padding: 1px 6px;
  border: 1px solid rgba(111, 143, 255, 0.25);
  border-radius: 4px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.25);
}

.ctx-menu-item:hover {
  background: rgba(111, 143, 255, 0.14);
  color: #f5f8ff;
}

.ctx-menu-item.ctx-menu-danger:hover {
  background: rgba(239, 83, 80, 0.16);
  color: #ff8a87;
}

.ctx-menu-sep {
  height: 1px;
  background: rgba(111, 143, 255, 0.16);
  margin: 4px 6px;
}

/* ─── Market Hours Status Indicator ─────────────────────────────────────── */
.market-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(111, 143, 255, 0.28);
  background: rgba(15, 22, 48, 0.55);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  cursor: default;
  transition: border-color 160ms ease, background 160ms ease;
}

.market-status-pill .market-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(160, 184, 230, 0.55);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  flex-shrink: 0;
}

.market-status-pill.is-open {
  border-color: rgba(0, 200, 116, 0.55);
  color: #4be09a;
  background: rgba(0, 200, 116, 0.08);
}

.market-status-pill.is-open .market-status-dot {
  background: #00e676;
  animation: market-pulse 1.6s ease-in-out infinite;
}

@keyframes market-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 230, 118, 0); }
}

.market-status-pill.is-pre,
.market-status-pill.is-after {
  border-color: rgba(255, 184, 77, 0.55);
  color: #ffc266;
  background: rgba(255, 184, 77, 0.08);
}

.market-status-pill.is-pre .market-status-dot,
.market-status-pill.is-after .market-status-dot {
  background: #ffb84d;
}

.market-status-pill.is-closed {
  border-color: rgba(146, 173, 230, 0.25);
  color: rgba(160, 184, 230, 0.78);
}

.market-status-pill .market-countdown {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  margin-left: 2px;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ─── Keyboard Cheat Sheet Overlay ──────────────────────────────────────── */
.cheatsheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 18, 0.78);
  backdrop-filter: blur(6px);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: cheatsheet-fade 180ms ease-out;
}

@keyframes cheatsheet-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cheatsheet-card {
  width: min(960px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: linear-gradient(160deg, #0f1a3a 0%, #0a1028 100%);
  border: 1px solid rgba(111, 143, 255, 0.4);
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  animation: cheatsheet-pop 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cheatsheet-pop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.cheatsheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(111, 143, 255, 0.2);
}

.cheatsheet-head h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.cheatsheet-head small {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cheatsheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.cheatsheet-section {
  background: rgba(20, 30, 64, 0.4);
  border: 1px solid rgba(111, 143, 255, 0.16);
  border-radius: 10px;
  padding: 14px 16px;
}

.cheatsheet-section h3 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.cheatsheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.84rem;
  gap: 12px;
}

.cheatsheet-row + .cheatsheet-row {
  border-top: 1px dashed rgba(111, 143, 255, 0.08);
}

.cheatsheet-row span {
  color: var(--text);
}

.cheatsheet-keys {
  display: flex;
  gap: 4px;
  align-items: center;
}

.cheatsheet-keys kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  padding: 2px 7px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(111, 143, 255, 0.3);
  border-radius: 4px;
  color: #c8d4f0;
  min-width: 18px;
  text-align: center;
}

.cheatsheet-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(111, 143, 255, 0.16);
  text-align: center;
  font-size: 0.74rem;
  color: var(--muted);
}

.cheatsheet-foot kbd {
  font-family: 'JetBrains Mono', monospace;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(111, 143, 255, 0.3);
  border-radius: 3px;
  color: #c8d4f0;
}