/* ====================================================================
   FX Patrol — color tokens
   Dark theme = default. Light theme overrides via prefers-color-scheme
   and [data-theme="light"] for manual override.
   ==================================================================== */

:root {
  /* dark theme (default) */
  --bg: #07101f;
  --bg-grad: radial-gradient(900px 600px at 0% -10%, #11243f 0%, #07101f 55%);
  --bg-elev: #0e1c30;
  --bg-elev-2: #16284a;
  --bg-elev-3: #1a3052;
  --bg-hover: #1c3157;
  --line: #1f3357;
  --line-strong: #2a4574;
  --text: #f4f8fc;
  --text-muted: #a0b4d4;
  --text-faint: #6b80a0;

  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-soft: rgba(56,189,248,0.13);
  --accent-warm: #f59e0b;

  --long: #22c55e;
  --long-soft: rgba(34,197,94,0.14);
  --short: #f87171;
  --short-soft: rgba(248,113,113,0.14);
  --neutral: #94a3b8;
  --neutral-soft: rgba(148,163,184,0.13);

  --confirmed: #22c55e;
  --intact: #a3e635;
  --weakened: #f59e0b;
  --broken: #f87171;

  /* currency-specific accents (consistent across both themes) */
  --c-usd: #3b82f6;
  --c-eur: #818cf8;
  --c-gbp: #a78bfa;
  --c-jpy: #f472b6;
  --c-aud: #fb923c;
  --c-nzd: #a3e635;
  --c-cad: #fb7185;
  --c-chf: #2dd4bf;
  --c-xau: #fbbf24;
  --c-xag: #94a3b8;
  --c-xpt: #cbd5e1;
  --c-xpd: #fda4af;
  --c-yields: #6366f1;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 4px 14px rgba(0,0,0,.32);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.4);

  --radius: 10px;
  --radius-sm: 6px;
  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --t: 160ms cubic-bezier(.2,.7,.3,1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f6f8;
    --bg-grad: radial-gradient(900px 600px at 0% -10%, #eef2f7 0%, #f5f6f8 55%);
    --bg-elev: #ffffff;
    --bg-elev-2: #f8fafc;
    --bg-elev-3: #f1f5f9;
    --bg-hover: #eef2f7;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --text: #0f172a;
    --text-muted: #475569;
    --text-faint: #94a3b8;

    --accent: #0284c7;
    --accent-strong: #0369a1;
    --accent-soft: rgba(2,132,199,0.11);
    --accent-warm: #d97706;

    --long: #16a34a;
    --long-soft: rgba(22,163,74,0.12);
    --short: #dc2626;
    --short-soft: rgba(220,38,38,0.10);
    --neutral: #64748b;
    --neutral-soft: rgba(100,116,139,0.11);

    --confirmed: #16a34a;
    --intact: #65a30d;
    --weakened: #d97706;
    --broken: #dc2626;

    --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
    --shadow-md: 0 4px 14px rgba(15,23,42,.08);
    --shadow-lg: 0 14px 36px rgba(15,23,42,.12);
  }
}

/* Explicit dark override so manual toggle works even when system is light. */
[data-theme="dark"] {
  --bg: #07101f;
  --bg-grad: radial-gradient(900px 600px at 0% -10%, #11243f 0%, #07101f 55%);
  --bg-elev: #0e1c30;
  --bg-elev-2: #16284a;
  --bg-elev-3: #1a3052;
  --bg-hover: #1c3157;
  --line: #1f3357;
  --line-strong: #2a4574;
  --text: #f4f8fc;
  --text-muted: #a0b4d4;
  --text-faint: #6b80a0;
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-soft: rgba(56,189,248,0.13);
  --accent-warm: #f59e0b;
  --long: #22c55e;
  --long-soft: rgba(34,197,94,0.14);
  --short: #f87171;
  --short-soft: rgba(248,113,113,0.14);
  --neutral: #94a3b8;
  --neutral-soft: rgba(148,163,184,0.13);
  --confirmed: #22c55e;
  --intact: #a3e635;
  --weakened: #f59e0b;
  --broken: #f87171;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 4px 14px rgba(0,0,0,.32);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.4);
}
[data-theme="dark"] .topbar { background: rgba(7,16,31,0.88); }

[data-theme="light"] {
  --bg: #f5f6f8;
  --bg-grad: radial-gradient(900px 600px at 0% -10%, #eef2f7 0%, #f5f6f8 55%);
  --bg-elev: #ffffff;
  --bg-elev-2: #f8fafc;
  --bg-elev-3: #f1f5f9;
  --bg-hover: #eef2f7;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --text-muted: #475569;
  --text-faint: #94a3b8;
  --accent: #0284c7;
  --accent-strong: #0369a1;
  --accent-soft: rgba(2,132,199,0.11);
  --accent-warm: #d97706;
  --long: #16a34a;
  --long-soft: rgba(22,163,74,0.12);
  --short: #dc2626;
  --short-soft: rgba(220,38,38,0.10);
  --neutral: #64748b;
  --neutral-soft: rgba(100,116,139,0.11);
  --confirmed: #16a34a;
  --intact: #65a30d;
  --weakened: #d97706;
  --broken: #dc2626;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 4px 14px rgba(15,23,42,.08);
  --shadow-lg: 0 14px 36px rgba(15,23,42,.12);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--display);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
a { color: var(--accent); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--accent-strong); filter: brightness(1.2); }
button { font-family: inherit; }

/* ====================================================================
   TOPBAR
   ==================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 18px;
  align-items: center;
  padding: 11px 22px;
  background: rgba(var(--topbar-bg-rgb, 7,16,31), 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .topbar { background: rgba(255,255,255,0.85); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .topbar { background: rgba(255,255,255,0.85); }
}

.topbar-left {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  padding: 4px 8px; margin: -4px -8px; border-radius: 8px;
  transition: background var(--t);
}
.topbar-left:hover { background: var(--bg-elev-2); }
.topbar-left h1 {
  font-family: var(--display); font-size: 16px; font-weight: 700;
  margin: 0; letter-spacing: -0.015em; color: var(--text);
}
.version {
  font-family: var(--mono); font-size: 10px; color: var(--text-faint);
  font-weight: 500; padding: 2px 6px; background: var(--bg-elev-2);
  border: 1px solid var(--line); border-radius: 3px;
}

/* LIVE indicator */
.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--long);
  padding: 4px 10px; background: var(--long-soft); border-radius: 999px;
  font-weight: 600; letter-spacing: 0.06em;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--long);
  box-shadow: 0 0 0 0 var(--long); animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.topbar-right { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.topbar-stats { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.status-pill { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); padding: 4px 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; font-weight: 500; white-space: nowrap; }
.status-pill strong { color: var(--text); margin-left: 3px; font-weight: 600; }
.status-clock { font-family: var(--mono); font-size: 11px; color: var(--accent); padding: 4px 10px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }

/* === Theme toggle === */
.theme-toggle {
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--text-muted);
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  transition: all var(--t);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle .theme-icon-light { display: none; }
.theme-toggle .theme-icon-dark { display: inline; }
[data-theme="light"] .theme-toggle .theme-icon-light { display: inline; }
[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .theme-icon-light { display: inline; }
  :root:not([data-theme="dark"]) .theme-toggle .theme-icon-dark { display: none; }
}

/* === Notification bell === */
.bell-wrap { position: relative; }
.bell-btn {
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--text-muted);
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  transition: all var(--t); position: relative;
}
.bell-btn:hover { color: var(--accent); border-color: var(--accent); }
.bell-btn.has-new { color: var(--accent-warm); border-color: var(--accent-warm); }
.bell-btn.shaking { animation: bell-shake 0.9s cubic-bezier(.36,.07,.19,.97) 1; }
@keyframes bell-shake {
  10%, 90% { transform: rotate(-8deg); }
  20%, 80% { transform: rotate(10deg); }
  30%, 50%, 70% { transform: rotate(-14deg); }
  40%, 60% { transform: rotate(14deg); }
}
.bell-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--accent-warm); color: white;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  padding: 1px 5px; border-radius: 999px; min-width: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
  transition: transform var(--t);
}
.bell-badge.hidden { display: none; }
.bell-btn.has-new .bell-badge { transform: scale(1.12); }

.bell-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); width: 380px; max-height: 460px; overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: var(--shadow-lg); z-index: 100;
}
.bell-dropdown[hidden] { display: none; }
.bell-dropdown-header {
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--display); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 700; color: var(--accent);
}
.bell-clear { font-family: var(--mono); font-size: 10px; color: var(--text-muted); cursor: pointer; padding: 2px 8px; border-radius: 4px; }
.bell-clear:hover { color: var(--accent); background: var(--accent-soft); }
.bell-item {
  display: block; padding: 10px 14px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: background var(--t);
}
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: var(--bg-elev-2); }
.bell-item .bi-meta { font-family: var(--mono); font-size: 10px; color: var(--text-faint); display: flex; gap: 6px; margin-bottom: 4px; }
.bell-item .bi-headline { color: var(--text); font-size: 12.5px; line-height: 1.45; }
.bell-empty { padding: 28px; text-align: center; color: var(--text-faint); font-size: 12px; }

/* === SEARCH === */
.search-wrap { position: relative; max-width: 480px; width: 100%; justify-self: center; }
.search-input {
  width: 100%; padding: 8px 38px 8px 14px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 7px; color: var(--text); font-family: var(--display);
  font-size: 13px; font-weight: 400; transition: border-color var(--t), background var(--t);
  outline: none;
}
.search-input::placeholder { color: var(--text-faint); }
.search-input:focus { border-color: var(--accent); background: var(--bg-elev-2); }
.search-kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--text-faint);
  background: var(--bg-elev-2); border: 1px solid var(--line);
  padding: 2px 6px; border-radius: 4px; pointer-events: none;
}
.search-input:focus ~ .search-kbd { opacity: 0; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: 8px; max-height: 480px; overflow-y: auto;
  box-shadow: var(--shadow-lg); z-index: 100;
}
.sr-item {
  display: grid; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background var(--t); color: inherit;
  font-size: 12.5px;
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover, .sr-item.active { background: var(--bg-elev-2); }
.sr-inst { grid-template-columns: 16px 1fr auto 60px 50px; }
.sr-news { grid-template-columns: 16px 1fr auto; padding: 8px 14px; }
.sr-icon { color: var(--accent); font-size: 13px; opacity: 0.8; }
.sr-primary { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-secondary { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); font-weight: 500; }
.sr-badge { font-family: var(--display); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-align: center; letter-spacing: 0.06em; }
.sr-long { background: var(--long-soft); color: var(--long); }
.sr-short { background: var(--short-soft); color: var(--short); }
.sr-neutral { background: var(--neutral-soft); color: var(--neutral); }
.sr-pending { background: var(--bg-elev-2); color: var(--text-faint); border: 1px solid var(--line); }
.sr-conv { font-family: var(--mono); font-size: 11px; color: var(--accent); text-align: right; font-weight: 600; }
.sr-tags { display: flex; gap: 4px; flex-wrap: nowrap; }
.sr-tag { font-family: var(--mono); font-size: 9.5px; color: var(--accent); padding: 1px 5px; background: var(--accent-soft); border-radius: 3px; font-weight: 600; }
.sr-meta { font-family: var(--mono); font-size: 10px; color: var(--text-faint); white-space: nowrap; }
.sr-empty { padding: 18px; text-align: center; color: var(--text-faint); font-size: 12px; }

main { padding: 20px 22px 40px; max-width: 1760px; margin: 0 auto; }
footer { padding: 20px; color: var(--text-faint); font-size: 11.5px; text-align: center; border-top: 1px solid var(--line); margin-top: 32px; font-weight: 400; }

/* ====================================================================
   APP LAYOUT — left sidebar + main content
   ==================================================================== */
.app-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .app-layout { grid-template-columns: 1fr; }
  .app-sidebar { position: static !important; max-height: none; }
}
.app-main { min-width: 0; }

.app-sidebar {
  position: sticky;
  top: 78px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  /* Stretch to the bottom of the viewport so no awkward gap below the nav */
  height: calc(100vh - 100px);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;  /* outer container clips so border-radius is respected */
}
/* Custom scrollbar that matches the dark/light theme rather than the harsh
   default OS chrome. Only appears when content overflows. */
.app-sidebar .sidenav::-webkit-scrollbar { width: 8px; }
.app-sidebar .sidenav::-webkit-scrollbar-track { background: transparent; }
.app-sidebar .sidenav::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
  border: 2px solid var(--bg-elev);
}
.app-sidebar .sidenav::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* Scroll-target offset: account for the sticky topbar (~58px) + a buffer so
   the section header is visible when a sidebar link scrolls to it. */
[id^="section-"], #full-news, #top {
  scroll-margin-top: 84px;
}

/* === X-style nav rail with grouped sections — scrolls when overflowing === */
.sidenav {
  display: flex; flex-direction: column;
  padding: 8px 8px;
  gap: 4px;
  flex: 1;
  min-height: 0;
  /* Allow natural flow + scroll when items overflow (e.g. when Tools section is open) */
  overflow-y: auto;
}
.sidenav-group {
  display: flex; flex-direction: column; gap: 1px;
  padding: 2px 0;
  border-bottom: 1px solid var(--line);
}
.sidenav-group:last-child { border-bottom: none; }
.sidenav-group-label {
  font-family: var(--display); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-faint);
  padding: 6px 12px 4px;
}

.sidenav-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--t), color var(--t), transform var(--t);
}
.sidenav-item:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  transform: translateX(2px);
}
.sidenav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.sidenav-text { font-weight: inherit; }

.sidenav-icon {
  font-family: var(--display);
  font-size: 13px; font-weight: 700;
  text-align: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  background: var(--text-faint);
  transition: transform var(--t), background var(--t);
}
.icon-overview { background: var(--accent); }
.icon-majors   { background: var(--c-usd); } /* legacy — kept harmless */
.icon-usd      { background: var(--c-usd); }
.icon-eur      { background: var(--c-eur); }
.icon-gbp      { background: var(--c-gbp); }
.icon-aud      { background: var(--c-aud); }
.icon-nzd      { background: var(--c-nzd); color: #1f1f1f; }
.icon-cad      { background: var(--c-cad); }
.icon-audnzd   { background: linear-gradient(135deg, var(--c-aud) 35%, var(--c-nzd)); }
.icon-cadchf   { background: linear-gradient(135deg, var(--c-cad) 35%, var(--c-chf)); }
.icon-jpy      { background: var(--c-jpy); }
.icon-metals   { background: var(--c-xau); color: #1f1f1f; }
.icon-energy   { background: #f97316; }
.icon-yields   { background: var(--c-yields); }
.icon-cb       { background: var(--text-muted); }
.icon-fed      { background: var(--accent-strong); }
.icon-news     { background: var(--c-cad); }
.icon-calendar { background: var(--c-nzd); color: #1f1f1f; }
.icon-devil    { background: #6b7280; }

.sidenav-item:hover .sidenav-icon { transform: scale(1.06); }

/* === Bottom stats panel — fills the gap with useful info === */
.sidenav-stats {
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev-2);
}
.stats-card { display: flex; flex-direction: column; gap: 8px; }
.stats-header {
  font-family: var(--display); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
  padding: 0 4px;
}
.stats-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center; gap: 9px;
  padding: 4px 4px;
  font-size: 11.5px;
}
.stats-row-compact { font-size: 10.5px; padding: 0 4px; }
.stats-dot { width: 8px; height: 8px; border-radius: 50%; }
.stats-label { color: var(--text-muted); }
.stats-value { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); }
.stats-row-compact .stats-value { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.stats-time { font-family: var(--mono); }
.stats-divider { height: 1px; background: var(--line); margin: 2px 4px; }

/* ====================================================================
   CENTRAL BANK WATCH SECTION
   ==================================================================== */
.cb-section { margin: 26px 0 22px; }
.cb-section-header {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.cb-section-header h2 {
  font-family: var(--display); font-size: 11px; margin: 0;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent);
}
.cb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.cb-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  border-left-width: 3px;
  /* Whole card is clickable — base.html click handler navigates to the
     detail page when the user clicks anywhere outside the remove button
     or footer link. */
  cursor: pointer;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.cb-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--line-strong);
}
/* In edit mode the card is grabbed, not navigated — override cursor */
.cb-section.is-editing .cb-card { cursor: grab; }
.cb-ccy-USD { border-left-color: var(--c-usd); }
.cb-ccy-EUR { border-left-color: var(--c-eur); }
.cb-ccy-GBP { border-left-color: var(--c-gbp); }
.cb-ccy-JPY { border-left-color: var(--c-jpy); }
.cb-ccy-AUD { border-left-color: var(--c-aud); }
.cb-ccy-NZD { border-left-color: var(--c-nzd); }
.cb-ccy-CAD { border-left-color: var(--c-cad); }
.cb-ccy-CHF { border-left-color: var(--c-chf); }
.cb-card-header {
  display: flex; justify-content: space-between; align-items: center;
}
.cb-name-row { display: flex; align-items: center; gap: 7px; }
.cb-code {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--text);
}
.cb-ccy-tag {
  font-family: var(--mono); font-size: 10px; color: var(--text-faint);
  padding: 2px 6px; background: var(--bg-elev-2); border-radius: 3px; font-weight: 600;
}
.cb-rate-label {
  font-family: var(--display); font-size: 9.5px; color: var(--text-faint);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 4px;
}
.cb-rate-value {
  font-family: var(--mono); font-size: 22px; font-weight: 700;
  color: var(--text); letter-spacing: -0.02em; line-height: 1.1;
}
.cb-card-footer {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px;
}
.cb-meeting-label {
  font-family: var(--display); font-size: 9.5px; color: var(--text-faint);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
.cb-meeting-date {
  font-family: var(--mono); font-size: 11.5px; color: var(--accent); font-weight: 600;
}
.cb-notes {
  font-size: 10.5px; color: var(--text-muted); line-height: 1.45;
  padding-top: 6px; border-top: 1px dashed var(--line); margin-top: 2px;
}

/* ====================================================================
   TOP ROW — stat cards on the left, "Latest" news ticker on the right
   ==================================================================== */
.top-row {
  display: grid;
  /* Best Trade is a fixed-width hero; the news feed takes the wide flexible
     column so more headlines fit per line and more rows are visible. */
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 22px;
  align-items: stretch;
}
@media (max-width: 1180px) {
  .top-row { grid-template-columns: 1fr; }
}
.top-row .top-row-stats { margin-bottom: 0; }

.latest-card {
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  isolation: isolate;
}
.latest-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--short), transparent);
  opacity: 0.9;
}
.latest-card-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px;
  background: linear-gradient(135deg, #0c1828 0%, #1a2540 100%);
  border-bottom: 1px solid var(--line-strong);
  flex-shrink: 0;
  color: #f4f8fc;
}
[data-theme="light"] .latest-card-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #f1f5f9;
}
.latest-card-title { display: flex; align-items: center; gap: 9px; }
.latest-card-label {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: #f4f8fc;
}
.latest-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.7);
  animation: latest-pulse 1.6s infinite cubic-bezier(.66,0,.34,1);
}
@keyframes latest-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); transform: scale(1); }
  70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); transform: scale(1); }
}
.latest-card-more {
  font-family: var(--mono); font-size: 11px; color: rgba(244,248,252,0.85);
  padding: 4px 10px; border: 1px solid rgba(244,248,252,0.2); border-radius: 5px;
  text-decoration: none; transition: all var(--t); background: rgba(0,0,0,0.18);
}
.latest-card-more:hover {
  color: #fff; border-color: var(--accent); background: var(--accent-soft);
}
.latest-card-body {
  overflow-y: auto;
  flex: 1;
  /* Taller now that the news feed is the wide hero column — fits ~8-9 compact
     items before scrolling, and the wider column means headlines wrap less. */
  max-height: 340px;
}
.latest-card-body::-webkit-scrollbar { width: 6px; }
.latest-card-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

/* === Ticker items shared by the side-card layout === */
.ticker-list { list-style: none; padding: 0; margin: 0; }
.ticker-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background var(--t);
}
.ticker-item:last-child { border-bottom: none; }
.ticker-item:hover { background: var(--bg-elev-2); }
.ticker-item.ticker-mm { background: rgba(239,68,68,0.05); }
.ticker-item.ticker-mm::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--short);
}
.ticker-item.ticker-new { background: rgba(245,158,11,0.05); }
.ticker-item.ticker-mm.ticker-new { background: rgba(239,68,68,0.10); }
.ticker-meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; color: var(--text-faint);
  margin-bottom: 4px; font-weight: 500;
}
.ticker-src { padding: 1px 6px; border-radius: 3px; background: var(--bg-elev-2); color: var(--text-muted); font-weight: 600; }
.ticker-time { color: var(--text-faint); }
.ticker-vol {
  font-family: var(--display); font-size: 8px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px; background: var(--short); color: white; letter-spacing: 0.08em;
}
.ticker-tag {
  font-family: var(--display); font-size: 8.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px; letter-spacing: 0.1em; color: white;
}
.tag-geo { background: #dc2626; }
.tag-rel { background: #0284c7; }
.tag-cb  { background: #7c3aed; }
.ticker-new-pill {
  font-family: var(--display); font-size: 8.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px; background: var(--accent-warm); color: white; letter-spacing: 0.1em;
}
.ticker-headline {
  display: block; color: var(--text); font-size: 12px; line-height: 1.45; font-weight: 500;
  margin-top: 1px;
}
.ticker-headline:hover { color: var(--accent); }
/* Flash animation when a new item appears via HTMX swap */
.ticker-item.flash-new { animation: ticker-flash 1.8s ease-out 1; }
@keyframes ticker-flash {
  0%   { background: rgba(239,68,68,0.22); box-shadow: inset 3px 0 0 var(--short); }
  100% { background: transparent; }
}

/* ====================================================================
   STAT CARDS ROW — vivid gradient hero cards (CRM-style)
   ==================================================================== */
.stat-row { margin-bottom: 20px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  /* Make sure cards stretch to fill the stat-row height when top-row is taller */
  height: 100%;
}
.stat-row.top-row-stats { height: 100%; }
.stat-card {
  position: relative;
  padding: 22px 26px 24px;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  /* Match approx. the height of the Latest card on the right so the top-row
     reads as one balanced band (not three short cards with a gap below). */
  min-height: 250px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: transform var(--t), box-shadow var(--t);
  isolation: isolate;
}

/* ====================================================================
   BEST TRADE CAROUSEL — silhouette + slide animation
   ==================================================================== */
.best-carousel {
  position: relative;
  isolation: isolate;
  min-height: 250px;
  /* Fill the column height so the gradient slide stretches to match the news
     card, and the bottom-anchored arrows/dots sit on the card — not in a gap. */
  height: 100%;
}
/* The silhouette is a SECOND card layered behind the active one, offset down-right
   so a slice of it is visible. Same gradient family, dimmed via brightness. */
.best-silhouette {
  position: absolute;
  top: 18px;
  bottom: -18px;
  left: 22px;
  right: 0;
  z-index: 0;
  border-radius: 14px;
  /* background gradient comes from .best-grad-N class added inline */
  filter: brightness(0.78) saturate(0.85);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
  pointer-events: none;
  display: flex; flex-direction: column;
  padding: 22px 26px 24px;
  overflow: hidden;
}
.best-silhouette-label {
  font-family: var(--display);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.75);
  align-self: flex-end;
  margin-bottom: 6px;
}
.best-silhouette-pair {
  font-family: var(--mono);
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.85);
  align-self: flex-end;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.best-slides {
  position: relative;
  z-index: 1;
  min-height: 250px;
  /* Fill the carousel so the absolutely-positioned slide (inset:0) stretches
     to the full column height — keeps the gradient flush with the bottom edge
     where the arrows/dots are anchored. */
  height: 100%;
}
.best-slide {
  /* Stack all slides on top of each other */
  position: absolute !important;
  inset: 0;
  opacity: 0;
  transform: translateX(60px) scale(0.97);
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(.4,0,.2,1), transform 320ms cubic-bezier(.4,0,.2,1);
}
.best-slide.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  z-index: 2;
}
.best-slide.slide-out-left {
  opacity: 0;
  transform: translateX(-60px) scale(0.97);
  z-index: 1;
}

.best-card-counter {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.9);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 2px;
}

/* Nav arrows — pinned bottom-right of the carousel container, z-index above slides */
.best-nav-btn {
  position: absolute;
  bottom: 42px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(0,0,0,0.32);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.best-nav-btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.6); }
.best-nav-btn:active { transform: scale(0.9); }
.best-nav-next { right: 38px; }
.best-nav-prev { right: 82px; }

/* Carousel position dots — centered at the bottom of the Best Trade card,
   sitting on a subtle dark pill so they stay legible over the bright gradient. */
.best-dots {
  position: absolute;
  bottom: 47px;  /* +5 over the arrows' 42px so the pill's centre lines up with the taller arrow buttons */
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 5;
  padding: 8px 14px;
  background: rgba(0,0,0,0.28);
  border-radius: 999px;
  backdrop-filter: blur(3px);
}
.best-dot {
  width: 10px; height: 10px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background var(--t), width var(--t);
}
.best-dot:hover { background: rgba(255,255,255,0.85); }
.best-dot.is-active {
  width: 28px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.28); }
.stat-card-bg {
  position: absolute; inset: 0; z-index: -1;
  border-radius: 14px;
}
.stat-card-best .stat-card-bg {
  background:
    radial-gradient(circle at 80% -10%, rgba(255,255,255,.25), transparent 50%),
    linear-gradient(135deg, #ec4899 0%, #c026d3 55%, #7c3aed 100%);
}

/* === Per-cycle gradients for the Best Trade carousel ===
   Each card in the carousel gets a different palette so cycling has visual variety.
   The silhouette behind picks up the SAME class as the next card so it previews correctly. */
.best-grad-0.stat-card-best .stat-card-bg,
.best-silhouette.best-grad-0 {
  background:
    radial-gradient(circle at 80% -10%, rgba(255,255,255,.25), transparent 50%),
    linear-gradient(135deg, #ec4899 0%, #c026d3 55%, #7c3aed 100%);
}
.best-grad-1.stat-card-best .stat-card-bg,
.best-silhouette.best-grad-1 {
  background:
    radial-gradient(circle at 80% -10%, rgba(255,255,255,.25), transparent 50%),
    linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #4338ca 100%);
}
.best-grad-2.stat-card-best .stat-card-bg,
.best-silhouette.best-grad-2 {
  background:
    radial-gradient(circle at 80% -10%, rgba(255,255,255,.25), transparent 50%),
    linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #dc2626 100%);
}
.best-grad-3.stat-card-best .stat-card-bg,
.best-silhouette.best-grad-3 {
  background:
    radial-gradient(circle at 80% -10%, rgba(255,255,255,.25), transparent 50%),
    linear-gradient(135deg, #059669 0%, #14b8a6 55%, #0ea5e9 100%);
}
.best-grad-4.stat-card-best .stat-card-bg,
.best-silhouette.best-grad-4 {
  background:
    radial-gradient(circle at 80% -10%, rgba(255,255,255,.25), transparent 50%),
    linear-gradient(135deg, #8b5cf6 0%, #a855f7 55%, #d946ef 100%);
}
.best-grad-5.stat-card-best .stat-card-bg,
.best-silhouette.best-grad-5 {
  background:
    radial-gradient(circle at 80% -10%, rgba(255,255,255,.25), transparent 50%),
    linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #9d174d 100%);
}
/* The silhouette element itself has no .stat-card-bg child, so the rule above
   applies the gradient directly to .best-silhouette. */
.stat-card-fed .stat-card-bg {
  background:
    radial-gradient(circle at 90% 110%, rgba(255,255,255,.20), transparent 50%),
    linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #1d4ed8 100%);
}
.stat-card-mix .stat-card-bg {
  background:
    radial-gradient(circle at 10% 110%, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
}
.stat-card-activity .stat-card-bg {
  background:
    radial-gradient(circle at 70% 110%, rgba(255,255,255,.22), transparent 50%),
    linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%);
}
.stat-card-label {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.85);
}
.stat-card-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stat-card-value {
  font-family: var(--mono); font-size: 48px; font-weight: 700;
  letter-spacing: -0.025em; color: #fff; line-height: 1.05; margin-top: 6px;
}
.stat-card-tag {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 4px; letter-spacing: 0.08em;
  background: rgba(0,0,0,.22); color: #fff;
}
.stat-card-tag.long  { background: rgba(34,197,94,0.45); }
.stat-card-tag.short { background: rgba(239,68,68,0.45); }
.stat-card-tag.neutral { background: rgba(148,163,184,0.45); }
.stat-card-sub {
  font-size: 12px; color: rgba(255,255,255,0.88); line-height: 1.5;
}
.stat-card-sub strong { color: #fff; font-weight: 600; }
.stat-big { font-family: var(--mono); font-size: 17px; font-weight: 700; color: #fff; margin-right: 4px; }
.stat-card-tags {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto;
}
.stat-card-tags span {
  font-family: var(--mono); font-size: 10px; padding: 3px 8px;
  background: rgba(255,255,255,0.18); border-radius: 999px;
  color: #fff; font-weight: 500;
  backdrop-filter: blur(6px);
}

/* === Donut chart inside the bias-mix card === */
.stat-mix-row { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.stat-donut { width: 120px; height: 120px; flex-shrink: 0; }
.donut-track  { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 12; }
.donut-long   { fill: none; stroke: #22c55e; stroke-width: 12; transition: stroke-dasharray .6s ease; }
.donut-short  { fill: none; stroke: #f87171; stroke-width: 12; transition: stroke-dasharray .6s ease; }
.donut-neutral{ fill: none; stroke: rgba(255,255,255,.55); stroke-width: 12; transition: stroke-dasharray .6s ease; }
.stat-mix-counts { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: rgba(255,255,255,0.95); }
.stat-mix-counts > div { display: flex; align-items: center; gap: 8px; }
.stat-mix-counts strong { font-family: var(--mono); font-size: 18px; font-weight: 700; min-width: 24px; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-long { background: #22c55e; }
.dot-short { background: #f87171; }
.dot-neutral { background: rgba(255,255,255,.55); }

/* ====================================================================
   HERO / BEST PAIR (legacy, may still be referenced)
   ==================================================================== */
.hero { margin-bottom: 22px; }
.best-card {
  display: grid; grid-template-columns: auto auto auto 1fr; gap: 26px; align-items: center;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--t), box-shadow var(--t);
}
.best-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.best-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md), 0 0 24px rgba(56,189,248,.12); }
.best-label-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.best-label { font-family: var(--display); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); font-weight: 700; }
.best-pair { font-family: var(--mono); font-size: 38px; font-weight: 700; letter-spacing: -0.025em; color: var(--text); line-height: 1; }
.best-direction { font-family: var(--display); font-size: 16px; font-weight: 700; padding: 8px 16px; border-radius: 6px; letter-spacing: 0.08em; }
.best-direction.long { background: var(--long-soft); color: var(--long); border: 1px solid rgba(34,197,94,0.3); }
.best-direction.short { background: var(--short-soft); color: var(--short); border: 1px solid rgba(248,113,113,0.3); }
.best-direction.neutral { background: var(--neutral-soft); color: var(--neutral); border: 1px solid rgba(148,163,184,0.3); }
.best-conviction { display: flex; align-items: baseline; gap: 6px; }
.conviction-num { font-family: var(--mono); font-size: 32px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.conviction-label { font-family: var(--display); font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; }
.best-score { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.best-reasons { list-style: none; margin: 14px 0 0; padding: 0; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.best-reasons li { font-family: var(--mono); font-size: 10.5px; padding: 3px 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; color: var(--text-muted); font-weight: 500; }

/* ====================================================================
   SECTIONS — colored gradient banners, currency-themed per section
   ==================================================================== */
.instrument-section { margin-bottom: 24px; }
.section-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; margin-bottom: 14px;
  border-radius: 8px;
  color: #fff;
  position: relative; overflow: hidden;
}
.section-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px;
}
.section-header h2 {
  font-family: var(--display); font-size: 13px; margin: 0;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #fff;
}
.section-count {
  font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,0.85); font-weight: 600;
  background: rgba(0,0,0,0.18); padding: 2px 8px; border-radius: 999px;
}
.instrument-section { isolation: isolate; }
/* Banner gradients keyed to the base-currency section names (white text rides on top). */
.instrument-section[data-section="USD"] .section-header::before          { background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 70%, transparent 100%); }
.instrument-section[data-section="EUR"] .section-header::before          { background: linear-gradient(90deg, #818cf8 0%, #4f46e5 70%, transparent 100%); }
.instrument-section[data-section="GBP"] .section-header::before          { background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 70%, transparent 100%); }
.instrument-section[data-section="AUD"] .section-header::before          { background: linear-gradient(90deg, #fb923c 0%, #c2410c 70%, transparent 100%); }
.instrument-section[data-section="NZD"] .section-header::before          { background: linear-gradient(90deg, #84cc16 0%, #4d7c0f 70%, transparent 100%); }
.instrument-section[data-section="CAD & CHF"] .section-header::before    { background: linear-gradient(90deg, #fb7185 0%, #14b8a6 80%, transparent 100%); }
.instrument-section[data-section="Metals"] .section-header::before       { background: linear-gradient(90deg, #fbbf24 0%, #d97706 70%, transparent 100%); }
.instrument-section[data-section="US Yields"] .section-header::before    { background: linear-gradient(90deg, #6366f1 0%, #4338ca 70%, transparent 100%); }
.instrument-section[data-section="Energy"] .section-header::before       { background: linear-gradient(90deg, #f97316 0%, #c2410c 70%, transparent 100%); }

/* ====================================================================
   PAIR CARDS — currency dot adds color variety without breaking direction signal
   ==================================================================== */
.pair-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pair-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
  cursor: pointer; text-decoration: none; color: inherit;
  position: relative; min-height: 176px;
  overflow: hidden;
}
.pair-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 10px 0 0 10px;
}
.pair-card.dir-long {
  background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(34,197,94,0.07) 100%);
  border-color: rgba(34,197,94,0.22);
}
.pair-card.dir-long::before { background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: 0 0 12px rgba(34,197,94,0.4); }
.pair-card.dir-short {
  background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(248,113,113,0.08) 100%);
  border-color: rgba(248,113,113,0.22);
}
.pair-card.dir-short::before { background: linear-gradient(180deg, #fca5a5, #dc2626); box-shadow: 0 0 12px rgba(248,113,113,0.4); }
.pair-card.dir-neutral { background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(148,163,184,0.05) 100%); }
.pair-card.dir-neutral::before { background: var(--neutral); opacity: 0.6; }
.pair-card.dir-empty::before { background: var(--line-strong); }
.pair-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--accent);
}

.pair-card.flash-new {
  animation: flash-new 1.6s ease-out 1;
}
@keyframes flash-new {
  0%   { box-shadow: 0 0 0 2px var(--accent-warm), 0 0 20px var(--accent-warm); }
  100% { box-shadow: var(--shadow-sm); }
}

.pair-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pair-code-wrap { display: flex; align-items: center; gap: 7px; }
.ccy-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
.ccy-USD { background: var(--c-usd); }
.ccy-EUR { background: var(--c-eur); }
.ccy-GBP { background: var(--c-gbp); }
.ccy-JPY { background: var(--c-jpy); }
.ccy-AUD { background: var(--c-aud); }
.ccy-NZD { background: var(--c-nzd); }
.ccy-CAD { background: var(--c-cad); }
.ccy-CHF { background: var(--c-chf); }
.ccy-XAU { background: var(--c-xau); }
.ccy-XAG { background: var(--c-xag); }
.ccy-XPT { background: var(--c-xpt); }
.ccy-XPD { background: var(--c-xpd); }

/* Dual currency flag (TradingView style): big base-currency flag with a small
   quote-currency badge clipped into the bottom-right. The .ccy-<base> class on
   .flag-base supplies a coloured background so the icon still reads if the flag
   image fails to load. Flag images come from flagcdn.com. */
.pair-flag { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.pair-flag .flag-base {
  display: block; width: 22px; height: 22px; border-radius: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.22);
}
.pair-flag .flag-quote {
  position: absolute; right: -3px; bottom: -3px;
  width: 12px; height: 12px; border-radius: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 0 0 1.5px var(--bg-elev);
}

/* Metals: a stylised ingot/bar on a disc, one distinct colour per metal so the four
   read apart at a glance, + the US-flag badge since they're priced in USD. */
.pair-flag .flag-metal {
  display: block; width: 22px; height: 22px; border-radius: 50%; position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.22);
}
.pair-flag .flag-metal::before {        /* the bar/ingot — a trapezoid */
  content: ""; position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%);
  width: 12px; height: 7px; background: rgba(255,255,255,0.95);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0.5px 0.6px rgba(0,0,0,0.45));
}
.flag-metal-XAU { background: linear-gradient(135deg, #fde68a 0%, #d4a017 100%); }  /* gold — amber */
.flag-metal-XAG { background: linear-gradient(135deg, #cbd5e1 0%, #64748b 100%); }  /* silver — steel grey */
.flag-metal-XPT { background: linear-gradient(135deg, #7dd3fc 0%, #0284c7 100%); }  /* platinum — sky blue */
.flag-metal-XPD { background: linear-gradient(135deg, #c4b5fd 0%, #7c3aed 100%); }  /* palladium — violet */

/* Energy (WTI / Brent) — an oil-droplet disc + US-flag badge (priced in USD). */
.pair-flag .flag-energy {
  display: block; width: 22px; height: 22px; border-radius: 50%; position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.22);
}
.pair-flag .flag-energy::before {       /* teardrop = oil drop */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; background: rgba(255,255,255,0.92);
  border-radius: 0 50% 50% 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  filter: drop-shadow(0 0.5px 0.5px rgba(0,0,0,0.35));
}
.flag-energy-WTI   { background: linear-gradient(135deg, #b45309 0%, #1c1917 100%); }  /* crude amber → black */
.flag-energy-BRENT { background: linear-gradient(135deg, #475569 0%, #0f172a 100%); }  /* slate → black */

/* Country flag on the Central Bank Watch cards (replaces the small colour dot). */
.cb-flag {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.18);
}

.pair-card-header h3 { margin: 0; font-family: var(--mono); font-size: 14.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--text); }
.badge { font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 3px; }
.badge.long { background: var(--long-soft); color: var(--long); }
.badge.short { background: var(--short-soft); color: var(--short); }
.badge.neutral { background: var(--neutral-soft); color: var(--neutral); }
.badge.empty { background: var(--bg-elev-2); color: var(--text-faint); border: 1px solid var(--line); }

.conviction-row { display: flex; align-items: center; gap: 10px; }
.conviction-bar { position: relative; height: 6px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden; flex: 1; }
.conviction-fill { height: 100%; transition: width .4s ease; border-radius: 3px; box-shadow: 0 0 8px currentColor; }
.pair-card.dir-long  .conviction-fill { background: linear-gradient(90deg, #16a34a, #4ade80); color: #4ade80; }
.pair-card.dir-short .conviction-fill { background: linear-gradient(90deg, #dc2626, #f87171); color: #f87171; }
.pair-card.dir-neutral .conviction-fill { background: linear-gradient(90deg, var(--neutral), #cbd5e1); color: var(--neutral); }
.conviction-text { font-family: var(--mono); font-size: 14px; color: var(--text); font-weight: 700; min-width: 36px; text-align: right; }
.pair-card.dir-long  .conviction-text { color: #4ade80; }
.pair-card.dir-short .conviction-text { color: #fca5a5; }

.pair-summary {
  margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Catalyst horizon stamp — frames the bias as "valid until the next policy meeting". */
.pair-catalyst {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 4px 9px;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-subtle, rgba(148,163,184,0.10));
  border: 1px solid var(--line);
  border-radius: 999px;
  width: fit-content;
}
.pair-catalyst .catalyst-flag { opacity: 0.7; font-size: 10px; }
.pair-catalyst strong { color: var(--text); font-weight: 700; }
.pair-catalyst .catalyst-days {
  margin-left: 2px; padding-left: 6px;
  border-left: 1px solid var(--line);
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
/* Meeting within 3 days — amber, so you know the catalyst is right on top of you. */
.pair-catalyst.catalyst-imminent {
  color: #b45309;
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.4);
}
.pair-catalyst.catalyst-imminent strong,
.pair-catalyst.catalyst-imminent .catalyst-days,
.pair-catalyst.catalyst-imminent .catalyst-days-now { color: #b45309; }
[data-theme="dark"] .pair-catalyst.catalyst-imminent { color: #fbbf24; }
[data-theme="dark"] .pair-catalyst.catalyst-imminent strong,
[data-theme="dark"] .pair-catalyst.catalyst-imminent .catalyst-days { color: #fbbf24; }

.pair-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); margin-top: auto; }
.muted { color: var(--text-faint); font-family: var(--mono); font-size: 10px; font-weight: 500; }
.ghost-btn {
  background: transparent; border: 1px solid var(--line); color: var(--text-muted);
  padding: 3px 9px; border-radius: 4px; font-size: 11px; cursor: pointer; font-family: var(--mono);
  transition: all var(--t); font-weight: 500;
}
.ghost-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.primary-btn {
  background: var(--accent); color: white; border: none;
  padding: 7px 16px; border-radius: 6px; font-size: 12.5px; cursor: pointer;
  font-family: var(--display); font-weight: 600; letter-spacing: 0.02em;
  transition: all var(--t);
}
.primary-btn:hover { background: var(--accent-strong); }

/* ====================================================================
   PILLAR (on detail page)
   ==================================================================== */
.pillar-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 7px; }
.pillar { padding: 9px 11px; background: var(--bg-elev-2); border-radius: 6px; border-left: 3px solid var(--neutral); display: flex; flex-direction: column; gap: 4px; }
.pillar-confirmed { border-left-color: var(--confirmed); }
.pillar-intact    { border-left-color: var(--intact); }
.pillar-weakened  { border-left-color: var(--weakened); }
.pillar-broken    { border-left-color: var(--broken); }
.pillar-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pillar-name { font-family: var(--mono); font-size: 11.5px; color: var(--text); font-weight: 600; }
.pillar-status-tag { font-family: var(--display); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.1em; text-transform: uppercase; }
.pillar-confirmed .pillar-status-tag { background: var(--long-soft); color: var(--confirmed); }
.pillar-intact    .pillar-status-tag { background: rgba(163,230,53,0.15); color: var(--intact); }
.pillar-weakened  .pillar-status-tag { background: rgba(245,158,11,0.15); color: var(--weakened); }
.pillar-broken    .pillar-status-tag { background: var(--short-soft); color: var(--broken); }
.pillar-desc { color: var(--text); font-size: 12.5px; line-height: 1.5; }
.pillar-evidence { color: var(--text-muted); font-size: 11.5px; font-style: italic; line-height: 1.5; padding-left: 9px; border-left: 2px solid var(--line); margin-top: 2px; }

.kill-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 7px; }
.kill { padding: 9px 11px; background: var(--bg-elev-2); border-radius: 6px; border-left: 3px solid var(--line-strong); }
.kill.kill-tripped { background: var(--short-soft); border-left-color: var(--broken); }
.kill-name { font-family: var(--mono); font-weight: 600; color: var(--text); font-size: 11.5px; }
.kill-cond { color: var(--text-muted); font-size: 12px; margin-top: 3px; line-height: 1.45; }
.kill-trip-tag { color: var(--broken); font-family: var(--display); font-size: 9px; font-weight: 700; padding: 2px 6px; border: 1px solid var(--broken); border-radius: 3px; margin-left: 6px; letter-spacing: 0.08em; }

details summary { cursor: pointer; color: var(--text-muted); font-size: 10.5px; padding: 4px 0; user-select: none; transition: color var(--t); list-style: none; display: flex; align-items: center; gap: 5px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸"; transition: transform var(--t); display: inline-block; font-size: 9px; color: var(--accent); }
details[open] summary::before { transform: rotate(90deg); }
details summary:hover { color: var(--text); }

/* ====================================================================
   GRID-2 / PANELS
   ==================================================================== */
.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 28px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }
.panel { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg-elev-2); }
.panel-header h2 { font-family: var(--display); font-size: 11px; margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.panel-subtle { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); font-weight: 500; }
.panel-body { padding: 4px 0; max-height: 620px; overflow-y: auto; }
.panel-body::-webkit-scrollbar { width: 6px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.panel-body::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ====================================================================
   EVENTS
   ==================================================================== */
.events { list-style: none; padding: 0; margin: 0; }
.event { padding: 11px 18px; border-bottom: 1px solid var(--line); transition: background var(--t); position: relative; }
.event:last-child { border-bottom: none; }
.event:hover { background: var(--bg-elev-2); }
.event.is-new { background: rgba(245,158,11,0.06); }
.event.is-new::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-warm); }
/* Market-moving items (high-importance + geopolitics/release/central-bank) — red */
.event.is-market-moving { background: rgba(239,68,68,0.06); }
.event.is-market-moving::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--short); }
.event.is-market-moving.is-new { background: rgba(239,68,68,0.10); }
.vol-pill {
  font-family: var(--display); font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
  background: var(--short); color: white; letter-spacing: 0.08em;
}
.event.flash-new { animation: flash-event 1.6s ease-out 1; }
@keyframes flash-event {
  0%   { background: rgba(245,158,11,0.18); }
  100% { background: transparent; }
}
.event-meta { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; color: var(--text-faint); margin-bottom: 4px; flex-wrap: wrap; font-weight: 500; }
.event-source { padding: 2px 7px; border-radius: 3px; background: var(--bg-elev-2); color: var(--text-muted); font-weight: 600; }
.event-time { color: var(--text-faint); }
.new-pill {
  font-family: var(--display); font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
  background: var(--accent-warm); color: white; letter-spacing: 0.08em;
}
.tag-pair { background: var(--accent-soft); color: var(--accent); padding: 2px 7px; border-radius: 3px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; }
.event-headline { display: block; color: var(--text); font-size: 12.5px; padding: 2px 0; line-height: 1.5; font-weight: 400; }
.event-headline:hover { color: var(--accent); }
.event.imp-2 .event-headline, .event.imp-3 .event-headline { font-weight: 500; }
.event.imp-3 { border-left: 3px solid var(--accent-warm); padding-left: 15px; background: rgba(245,158,11,.04); }

.event-deltas { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.delta { padding: 6px 10px; background: var(--bg-elev-2); border-radius: 5px; font-size: 11.5px; border-left: 3px solid var(--neutral); }
.delta.verdict-confirm { border-left-color: var(--long); background: var(--long-soft); }
.delta.verdict-weaken  { border-left-color: var(--weakened); background: rgba(245,158,11,.1); }
.delta.verdict-break   { border-left-color: var(--short); background: var(--short-soft); }
.delta.verdict-noise   { opacity: 0.5; }
.delta strong { font-family: var(--mono); margin-right: 5px; font-size: 11px; font-weight: 600; }
.delta-verdict { font-family: var(--display); font-size: 9px; color: var(--text-muted); text-transform: uppercase; padding: 2px 6px; background: var(--bg-elev); border-radius: 3px; font-weight: 700; letter-spacing: 0.08em; }
.delta-conviction { font-family: var(--mono); font-size: 10.5px; color: var(--accent); margin-left: 4px; font-weight: 600; }
.delta em { display: block; color: var(--text); font-style: normal; font-size: 11.5px; margin-top: 4px; line-height: 1.45; }

/* ====================================================================
   CALENDAR
   ==================================================================== */
/* === New calendar layout (v2) ===
   Day-grouped, three labelled figure cells (Prev / Forecast / Actual),
   impact-colored dot on the left. Consistent with the dashboard panel
   styling (var(--bg-elev), var(--line), var(--accent)). */
.cal-list { list-style: none; padding: 0; margin: 0; }

/* Day separator — sits between groups of events for the same calendar day. */
.cal-day-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px 8px;
  background: linear-gradient(180deg, var(--bg-elev-2) 0%, transparent 100%);
  border-top: 1px solid var(--line);
}
.cal-day-head:first-child { border-top: none; }
.cal-day-head-weekday {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.cal-day-head-date {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* Event row — five-column grid. The "figures" cell can wrap on narrow
   widths. Hover and impact tinting follow the dashboard palette. */
.cal-row {
  display: grid;
  grid-template-columns: 14px 52px 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  position: relative;
  transition: background var(--t);
}
.cal-row:last-child { border-bottom: none; }
.cal-row:hover { background: var(--bg-elev-2); }
.cal-row.imp-high { background: rgba(239,68,68,0.05); }
.cal-row.imp-high:hover { background: rgba(239,68,68,0.09); }
.cal-row.imp-medium { background: rgba(245,158,11,0.04); }
.cal-row.imp-medium:hover { background: rgba(245,158,11,0.08); }
.cal-row.imp-low .cal-row-event { color: var(--text-muted); }

/* Impact dot — radius-style, glowing on high-impact. */
.cal-row-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 2px var(--bg-elev);
  justify-self: center;
}
.cal-row.imp-high .cal-row-dot {
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--bg-elev), 0 0 8px rgba(239,68,68,0.55);
}
.cal-row.imp-medium .cal-row-dot { background: #f59e0b; }
.cal-row.imp-low .cal-row-dot { background: rgba(148,163,184,0.5); }

.cal-row-time {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

/* Currency tag — same vocabulary as .tag-pair, just sized to fit the column. */
.cal-row-ccy {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  justify-self: start;
  letter-spacing: 0.04em;
  min-width: 36px;
}

.cal-row-event {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  min-width: 0;
}
.cal-row.imp-high .cal-row-event { font-weight: 500; }

/* Figures — three labelled cells right-aligned. Each shows a tiny uppercase
   label above the value so the eye can scan columns. Empty cells dim. */
.cal-row-figs {
  display: grid;
  grid-template-columns: 78px 78px 78px;
  gap: 6px;
}
.cal-fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(148,163,184,0.06);
  border: 1px solid var(--line);
  font-family: var(--mono);
  line-height: 1.15;
  text-align: right;
}
.cal-fig-label {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1px;
}
.cal-fig-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.cal-fig.cal-fig-empty .cal-fig-val { color: var(--text-faint); font-weight: 500; }

/* Actual cell — emphasised when present (release has landed). */
.cal-fig-actual.cal-fig-empty { opacity: 0.55; }
.cal-row.has-actual .cal-fig-actual {
  background: var(--accent-soft);
  border-color: rgba(56,189,248,0.32);
}
.cal-row.has-actual .cal-fig-actual .cal-fig-label { color: var(--accent); }
.cal-row.has-actual .cal-fig-actual .cal-fig-val { color: var(--accent); font-weight: 700; }

/* Bare rows (e.g. bank holidays, no fig values at all) — figures cell absent,
   so the grid drops the last column naturally. */
.cal-row.cal-row-bare { grid-template-columns: 14px 52px 44px 1fr; }

@media (max-width: 760px) {
  .cal-row {
    grid-template-columns: 12px 48px 40px 1fr;
    padding: 9px 12px;
    row-gap: 8px;
  }
  .cal-row-figs {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .cal-day-head { padding: 12px 12px 6px; }
}

/* ====================================================================
   DEVIL'S ADVOCATE
   ==================================================================== */
.devils-section { margin-top: 24px; }
.devils-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; padding: 16px; }
.devil-card { background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 7px; padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow var(--t), border-color var(--t); }
.devil-card:hover { border-color: var(--accent); }
.devil-card header { display: flex; justify-content: space-between; align-items: center; }
.devil-card h4 { margin: 0; font-family: var(--display); font-size: 13px; font-weight: 600; }
.devil-thesis { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.6; }
.devil-evidence { list-style: disc inside; margin: 0; padding: 0 0 0 4px; color: var(--text-muted); font-size: 11.5px; line-height: 1.65; }
.devil-trigger { padding: 11px 13px; background: var(--bg-elev); border-left: 3px solid var(--accent-warm); font-size: 11.5px; border-radius: 0 5px 5px 0; }
.devil-trigger strong { display: block; color: var(--accent-warm); font-size: 9.5px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--display); font-weight: 700; }
.devil-card footer { color: var(--text-faint); font-family: var(--mono); font-size: 10px; }

.empty-state { padding: 28px; color: var(--text-muted); text-align: center; font-size: 12px; }
.empty-state.large { padding: 50px; font-size: 13px; }
.empty-state.small { padding: 14px; font-size: 11.5px; }

/* ====================================================================
   PAIR DETAIL
   ==================================================================== */
.detail-header {
  display: grid; grid-template-columns: auto auto auto 1fr auto; gap: 24px; align-items: center;
  padding: 26px 30px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  margin-bottom: 24px;
  position: relative; overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.detail-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px;
}
.detail-dir-long::before {
  background:
    radial-gradient(circle at 85% -10%, rgba(255,255,255,.22), transparent 50%),
    linear-gradient(135deg, #059669 0%, #16a34a 45%, #4ade80 100%);
}
.detail-dir-short::before {
  background:
    radial-gradient(circle at 85% -10%, rgba(255,255,255,.22), transparent 50%),
    linear-gradient(135deg, #b91c1c 0%, #dc2626 45%, #f87171 100%);
}
.detail-dir-neutral::before {
  background:
    radial-gradient(circle at 85% -10%, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(135deg, #475569 0%, #64748b 50%, #94a3b8 100%);
}
.detail-header .detail-back {
  color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.3); background: rgba(0,0,0,0.15);
}
.detail-header .detail-back:hover { color: #fff; background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
.detail-header .detail-pair { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.detail-header .best-direction {
  background: rgba(0,0,0,0.22); color: #fff; border-color: rgba(255,255,255,0.3);
}
.detail-header .conviction-num { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.detail-header .conviction-label { color: rgba(255,255,255,0.8); }
.detail-header .ghost-btn {
  color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.3); background: rgba(0,0,0,0.15);
}
.detail-header .ghost-btn:hover { color: #fff; background: rgba(255,255,255,0.18); border-color: #fff; }
.detail-back { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); padding: 6px 13px; border-radius: 6px; border: 1px solid var(--line); transition: all var(--t); font-weight: 500; }
.detail-back:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.detail-pair { font-family: var(--mono); font-size: 40px; font-weight: 700; color: var(--text); letter-spacing: -0.025em; }
.detail-summary { color: var(--text); font-size: 14px; line-height: 1.7; margin: 20px 0 0; max-width: 80ch; font-weight: 400; }

.detail-section { margin-top: 26px; }
.detail-section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.detail-section-header h2 { font-family: var(--display); font-size: 11px; margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.detail-section-header .panel-subtle { font-size: 11px; }

.pillar-detail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.pillar-detail { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 7px; padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; border-left-width: 3px; transition: border-color var(--t); }
.pillar-detail.pillar-confirmed { border-left-color: var(--confirmed); }
.pillar-detail.pillar-intact    { border-left-color: var(--intact); }
.pillar-detail.pillar-weakened  { border-left-color: var(--weakened); }
.pillar-detail.pillar-broken    { border-left-color: var(--broken); }
.pillar-detail .pillar-name { font-size: 12.5px; }
.pillar-detail .pillar-desc { font-size: 12.5px; }
.pillar-supporting { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 11px; }
.pillar-supporting .sup-item { font-size: 11px; color: var(--text-muted); padding: 4px 0; line-height: 1.5; }
.pillar-supporting .sup-item a { color: var(--text); }
.pillar-supporting .sup-item a:hover { color: var(--accent); }
.pillar-supporting .sup-meta { font-family: var(--mono); font-size: 10px; color: var(--text-faint); margin-right: 6px; }

.delta-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--bg-elev); }
.delta-timeline li { padding: 12px 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 150px auto 1fr; gap: 16px; align-items: start; transition: background var(--t); }
.delta-timeline li:hover { background: var(--bg-elev-2); }
.delta-timeline li:last-child { border-bottom: none; }
.delta-timeline .ts { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); font-weight: 500; }
.delta-timeline .verdict-tag { font-family: var(--display); font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.08em; align-self: start; }
.delta-timeline .v-confirm { background: var(--long-soft); color: var(--long); }
.delta-timeline .v-weaken  { background: rgba(245,158,11,.18); color: var(--weakened); }
.delta-timeline .v-break   { background: var(--short-soft); color: var(--short); }
.delta-timeline .v-neutral { background: var(--neutral-soft); color: var(--neutral); }
.delta-timeline .delta-content .h { font-size: 12.5px; color: var(--text); margin-bottom: 4px; line-height: 1.5; }
.delta-timeline .delta-content .why { font-size: 11.5px; color: var(--text-muted); line-height: 1.55; }
.delta-timeline .conv-change { font-family: var(--mono); font-size: 10.5px; margin-top: 4px; color: var(--accent); font-weight: 600; }

::selection { background: rgba(56,189,248,0.28); color: var(--text); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ====================================================================
   RATES PRICING PANEL
   ==================================================================== */
.rates-section { margin-top: 24px; }
.rates-body { max-height: none; padding: 18px 20px 22px; }
.rates-header { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.rates-stat { display: flex; flex-direction: column; gap: 2px; }
.rates-stat-label { font-family: var(--display); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); font-weight: 600; }
.rates-stat-value { font-family: var(--mono); font-size: 16px; color: var(--text); font-weight: 600; letter-spacing: -0.005em; }
.rates-cme-link { margin-left: auto; }

.rates-chart-wrap { background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px 6px; margin-bottom: 18px; }
.rates-chart-title { font-family: var(--display); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.rates-chart { width: 100%; height: auto; display: block; }
.rates-grid { stroke: var(--line); stroke-width: 0.5; }
.rates-yaxis { font-family: var(--mono); font-size: 9px; fill: var(--text-faint); text-anchor: end; }
.rates-xaxis { font-family: var(--mono); font-size: 9px; fill: var(--text-faint); }
.rates-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rates-area { fill: var(--accent); opacity: 0.08; }
.rates-point { fill: var(--accent); stroke: var(--bg-elev-2); stroke-width: 1.5; }

.rates-meetings-title { font-family: var(--display); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); font-weight: 700; margin-bottom: 10px; }
.rates-meeting { padding: 12px 0; border-bottom: 1px solid var(--line); }
.rates-meeting:last-child { border-bottom: none; }
.rates-meeting-date { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--text); display: inline-block; min-width: 120px; }
.rates-meeting-rate { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); margin-left: 12px; }
.rates-arrow { color: var(--text-faint); }
.rates-change { padding: 1px 6px; border-radius: 3px; font-size: 10.5px; font-weight: 600; margin-left: 4px; background: var(--bg-elev-2); color: var(--text-muted); }
.rates-change.up { color: var(--short); background: var(--short-soft); }
.rates-change.down { color: var(--long); background: var(--long-soft); }
.rates-outcomes { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 5px; }
.rates-outcome { display: grid; grid-template-columns: 64px 1fr 44px 100px; gap: 12px; align-items: center; font-size: 11.5px; }
.rates-move { font-family: var(--display); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 3px; text-align: center; letter-spacing: 0.06em; }
.rates-hold { background: var(--neutral-soft); color: var(--neutral); }
.rates-hike { background: var(--short-soft); color: var(--short); }
.rates-cut { background: var(--long-soft); color: var(--long); }
.rates-bar-track { height: 8px; background: var(--bg-elev-2); border-radius: 4px; overflow: hidden; }
.rates-bar-fill { height: 100%; border-radius: 4px; transition: width .3s ease; }
.rates-hold-fill { background: var(--neutral); }
.rates-hike-fill { background: var(--short); }
.rates-cut-fill { background: var(--long); }
.rates-prob { font-family: var(--mono); font-size: 11.5px; color: var(--text); font-weight: 600; text-align: right; }
.rates-target { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); }

/* ====================================================================
   SIDEBAR — TOOLS GROUP (extra icons)
   ==================================================================== */
.icon-chat   { background: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%); color: #fff; }
.icon-lot    { background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%); color: #fff; }
.icon-equity { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); color: #fff; }
.icon-journal{ background: linear-gradient(135deg, #14b8a6 0%, #0891b2 100%); color: #fff; }

/* =============================================================
   TRADING JOURNAL
   ============================================================= */
.journal-page {
  max-width: 1400px;
  margin: 16px auto;
  padding: 0 16px;
  display: flex; flex-direction: column;
  gap: 16px;
}
.journal-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px;
}
.journal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  margin: 0 0 4px 0;
  color: var(--text);
  letter-spacing: -0.5px;
}
.journal-sub {
  color: var(--text-dim);
  font-size: 13px;
}

/* --- Stats hero --- */
.journal-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1000px) {
  .journal-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .journal-stats { grid-template-columns: repeat(2, 1fr); }
}
.jstat {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}
.jstat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  font-weight: 600;
}
.jstat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.jstat-sub {
  font-size: 11px;
  color: var(--text-dim);
}
.jstat.jstat-pnl { border: 1.5px solid var(--accent); }
.jstat-value.pos, .jstat-pnl.pos .jstat-value { color: #22c55e; }
.jstat-value.neg, .jstat-pnl.neg .jstat-value { color: #ef4444; }
td.pos { color: #22c55e; font-weight: 600; }
td.neg { color: #ef4444; font-weight: 600; }

/* --- Equity curve --- */
.journal-curve-wrap {
  padding: 14px 16px 8px 16px;
}
#equity-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
}

/* --- Table --- */
.journal-table-wrap {
  padding: 0;
}
.journal-table-wrap .card-header {
  padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.journal-filter {
  display: flex; gap: 8px;
}
.journal-filter input,
.journal-filter select {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}
.journal-table-scroll {
  overflow-x: auto;
}
.journal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.journal-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  font-weight: 600;
  background: var(--bg);
  position: sticky; top: 0;
}
.journal-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
}
.journal-table tbody tr:hover {
  background: var(--bg);
}
.jcell-date { font-family: 'Space Grotesk', sans-serif; color: var(--text-dim); }
.jdir {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.jdir-long  { background: rgba(34,197,94,0.15); color: #16a34a; }
.jdir-short { background: rgba(239,68,68,0.15); color: #dc2626; }
.jbias {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.jbias-long    { background: rgba(34,197,94,0.10); color: #15803d; }
.jbias-short   { background: rgba(239,68,68,0.10); color: #b91c1c; }
.jbias-neutral { background: rgba(148,163,184,0.15); color: var(--text-dim); }
.jbias-pending { background: rgba(148,163,184,0.10); color: var(--text-dim); }

.jstatus {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}
.jstatus-open   { background: rgba(56,189,248,0.20); color: #0284c7; }
.jstatus-closed { background: rgba(148,163,184,0.20); color: var(--text-dim); }

.jrow-actions { white-space: nowrap; }
.btn-tiny {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.btn-tiny:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-tiny-danger:hover { background: #ef4444; border-color: #ef4444; }

.journal-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-dim);
}

/* --- Buttons --- */
.btn-primary {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #14b8a6 0%, #0891b2 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(14,165,233,0.25);
  transition: transform 0.1s ease;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-secondary {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

/* --- Modal --- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
/* CRITICAL: the `display: flex` above overrides the browser's default
   `[hidden] { display: none }` because both have the same specificity and
   ours comes later. Without this override, setting `hidden = true` in JS
   adds the attribute but the modal stays visually open. */
.modal-backdrop[hidden] {
  display: none !important;
}
[data-theme="light"] .modal-backdrop { background: rgba(15, 23, 42, 0.30); }
.modal {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: 90%; max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.modal-narrow { max-width: 500px; }
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.modal-header h3 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
}
.modal-close {
  background: none; border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-dim);
  line-height: 1;
}
.modal-close:hover { color: var(--text); }
.trade-form {
  padding: 18px 22px 22px 22px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.form-row label {
  display: flex; flex-direction: column;
  gap: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  font-weight: 600;
}
.form-row-full { grid-column: 1 / -1; }
.form-row input,
.form-row select,
.form-row textarea {
  font-size: 14px;
  font-family: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}
.form-row textarea { resize: vertical; min-height: 60px; }
.form-actions {
  display: flex; justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

/* ====================================================================
   TOOL PAGES — Lot Size + Equity Simulator
   ==================================================================== */
.tool-page { max-width: 1200px; margin: 0 auto; padding: 24px 32px 48px; }
.tool-header { margin-bottom: 28px; }
.tool-back {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 18px;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity .15s ease, transform .15s ease;
}
.tool-back:hover { opacity: 1; transform: translateX(-2px); }
.tool-title {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.tool-sub { color: var(--text-muted); font-size: 14.5px; max-width: 720px; line-height: 1.5; margin: 0; }

.tool-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: start;
  margin-bottom: 28px;
}
@media (max-width: 900px) { .tool-grid { grid-template-columns: 1fr; } }

.tool-form {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.tool-field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tool-field label {
  font-family: var(--display);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
}
.tool-field input,
.tool-field select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.tool-field input:focus,
.tool-field select:focus {
  border-color: var(--accent);
  background: var(--bg-elev-2);
}
.tool-field-row { display: flex; gap: 14px; }
.tool-hint { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 2px; line-height: 1.4; }

.tool-btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #0a1220;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease;
  margin-top: 4px;
}
.tool-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(56,189,248,0.5); }
.tool-btn:active { transform: translateY(0); }

.tool-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tool-result {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
}
.tool-result-label {
  font-family: var(--display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 6px;
}
.tool-result-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.tool-result-accent {
  background: linear-gradient(135deg, rgba(56,189,248,0.12), rgba(56,189,248,0.04));
  border-color: var(--accent);
}
.tool-result-accent .tool-result-value { color: var(--accent); }

.tool-chart-wrap {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.tool-chart-wrap h3 {
  font-family: var(--display);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 14px;
}
.tool-chart-wrap canvas { display: block; width: 100%; height: auto; max-width: 100%; }

.tool-note {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 24px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.tool-note h3 {
  font-family: var(--display);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  font-weight: 700;
  margin: 0 0 12px;
}
.tool-note ol, .tool-note ul { padding-left: 22px; margin: 8px 0; }
.tool-note li { margin: 4px 0; }
.tool-note strong { color: var(--text); }
.tool-disclaimer { font-size: 12px; color: var(--text-faint); font-style: italic; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* ====================================================================
   AI CHAT PAGE
   ==================================================================== */
.chat-page { max-width: 880px; margin: 0 auto; padding: 24px 24px 48px; }
.chat-shell {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; flex-direction: column;
  min-height: calc(100vh - 280px);
  overflow: hidden;
}
.chat-log {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg);
}
.chat-msg { display: flex; }
.chat-msg-user { justify-content: flex-end; }
.chat-msg-bot  { justify-content: flex-start; }
.chat-bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}
.chat-bubble p { margin: 0 0 8px; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul { padding-left: 22px; margin: 4px 0 8px; }
.chat-bubble li { margin: 2px 0; }
.chat-bubble code {
  font-family: var(--mono);
  background: rgba(56,189,248,0.12);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13px;
}
.chat-msg-user .chat-bubble {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #0a1220;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.chat-msg-bot .chat-bubble {
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.chat-disclaimer {
  font-size: 11.5px !important;
  color: var(--text-faint);
  margin-top: 10px !important;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
}
.chat-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text);
  outline: none;
  resize: none;
  line-height: 1.45;
  min-height: 44px;
  max-height: 160px;
  transition: border-color .15s ease;
}
.chat-input:focus { border-color: var(--accent); }
.chat-send {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #0a1220;
  border: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
}
.chat-send:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(56,189,248,0.5); }
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-footer-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 18px 12px;
  font-family: var(--display);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.chat-status { color: var(--text-muted); }

/* =============================================================
   AUTH PAGES — login + signup
   ============================================================= */
.auth-body {
  min-height: 100vh;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(56,189,248,0.10), transparent 50%),
    radial-gradient(900px 700px at 90% 90%, rgba(20,184,166,0.10), transparent 50%),
    var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
}
.auth-shell {
  display: grid;
  grid-template-columns: minmax(360px, 480px) minmax(280px, 460px);
  gap: 32px;
  width: min(960px, 92vw);
  padding: 24px;
}
@media (max-width: 760px) { .auth-shell { grid-template-columns: 1fr; } .auth-side { display: none; } }

.auth-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
}
.auth-brand { margin-bottom: 24px; }
.auth-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 1px; font-weight: 600;
  color: #22c55e;
  background: rgba(34,197,94,0.10);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.auth-title {
  font-size: 26px;
  margin: 0 0 4px 0;
  letter-spacing: -0.5px;
}
.auth-tagline {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0;
}

.auth-error {
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.30);
  color: #dc2626;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
}
.auth-success {
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.30);
  color: #15803d;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
}
.change-pw-page {
  max-width: 560px;
  margin: 24px auto;
  padding: 0 16px;
}
.change-pw-card .card-header {
  padding: 16px 20px;
}
.change-pw-card .card-header h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  margin: 0;
  flex: 1;
}

/* Profile page — a list of read-only-ish rows with an Edit / Change link. */
.profile-info {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 20px 18px;
}
.profile-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.profile-row:last-child { border-bottom: none; }
.profile-row-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
}
.profile-row-value { font-size: 14px; color: var(--text); word-break: break-word; }
.profile-row-action {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px; font-weight: 600;
  color: var(--accent); text-decoration: none;
  padding: 5px 10px; border-radius: 6px;
  transition: background 130ms ease;
}
.profile-row-action:hover { background: var(--bg-elev-2); }
.profile-row-action-disabled { color: var(--text-faint, var(--text-dim)); cursor: default; }
.profile-row-action-disabled:hover { background: transparent; }
.profile-actions {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 0 20px 20px;
}

/* Personalisation page — stacked sections with their own headings + actions. */
.personal-section {
  padding: 18px 20px;
  border-top: 1px solid var(--line);
}
.personal-section:first-of-type { border-top: none; }
.personal-section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.personal-section-sub {
  font-size: 12.5px; color: var(--text-dim);
  margin: 0 0 14px; line-height: 1.5;
}
.personal-section-danger .personal-section-title { color: #ef4444; }

.btn-danger {
  background: #ef4444; color: #fff;
  border: none; padding: 10px 18px; border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: filter 130ms ease, transform 130ms ease;
}
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn-danger:active:not(:disabled) { transform: scale(0.98); }
.btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

/* Side-by-side form actions, e.g. "Back" on the left, primary action on the right. */
.form-actions-split { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.btn-back {
  display: inline-flex; align-items: center;
  text-decoration: none;
}

/* Read-only value display, used on Profile for the locked email field. */
.profile-locked-value {
  font-family: var(--mono);
  font-size: 14px; color: var(--text);
  padding: 12px 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  word-break: break-all;
}

/* =============================================================
   BILLING page — beta placeholder
   ============================================================= */
.billing-banner {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 16px 20px 20px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(20,184,166,0.12), rgba(14,165,233,0.10));
  border: 1px solid rgba(20,184,166,0.35);
  border-radius: 12px;
}
.billing-banner-tag {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0f766e; color: #fff;
  font-family: var(--display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em;
}
.billing-banner-title {
  font-family: var(--display);
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 3px;
}
.billing-banner-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }

.billing-plan {
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 14px;
}
.billing-plan-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.billing-plan-row:last-child { border-bottom: none; }
.billing-plan-label {
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
}
.billing-plan-value { font-size: 13.5px; color: var(--text); }
.billing-plan-muted { color: var(--text-dim); }

.billing-empty {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: var(--bg-elev-2);
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 13.5px;
  margin-bottom: 12px;
}
.billing-empty-icon { font-size: 22px; }
.billing-placeholder-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-label {
  display: flex; flex-direction: column;
  gap: 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-dim);
}
.auth-label input {
  font: inherit; font-size: 15px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.auth-label input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.15);
}

.auth-submit {
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #14b8a6 0%, #0891b2 100%);
  color: #fff;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 4px 16px rgba(14,165,233,0.20);
  transition: transform 0.08s ease;
}
.auth-submit:hover { transform: translateY(-1px); }

.auth-foot {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}
.auth-foot a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.auth-foot a:hover { text-decoration: underline; }

.auth-side {
  padding: 32px;
  display: flex; flex-direction: column;
  justify-content: center;
}
.auth-side-tag {
  font-size: 11px; letter-spacing: 1.5px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
}
.auth-side h2 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 20px 0;
  letter-spacing: -0.5px;
}
.auth-side-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: 12px;
  color: var(--text-dim);
  font-size: 14px;
}
.auth-side-list li {
  padding-left: 22px;
  position: relative;
}
.auth-side-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: #22c55e;
  font-weight: 700;
}

/* =============================================================
   TOPBAR USER MENU
   ============================================================= */
.user-menu { position: relative; }
.user-menu-btn {
  border: none; background: none; cursor: pointer;
  padding: 2px;
  border-radius: 999px;
}
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6 0%, #0891b2 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Space Grotesk', sans-serif;
  box-shadow: 0 2px 8px rgba(14,165,233,0.25);
}
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  min-width: 320px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.32);
  z-index: 100;
  overflow: hidden;
}
.user-menu-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.user-menu-avatar-lg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6 0%, #0891b2 100%);
  color: #fff; font-weight: 700; font-size: 18px;
  font-family: 'Space Grotesk', sans-serif;
  flex-shrink: 0;
}
.user-menu-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-menu-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--text);
  line-height: 1.2;
}
.user-menu-email {
  font-size: 12px; color: var(--text-dim);
  word-break: break-all; line-height: 1.3;
}
.user-menu-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--text); text-decoration: none;
  transition: background 130ms ease;
}
.user-menu-row:hover { background: var(--bg-elev-2); }
.user-menu-row-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--bg-elev-2);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.user-menu-row-text { display: flex; flex-direction: column; gap: 2px; }
.user-menu-row-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  line-height: 1.2;
}
.user-menu-row-sub {
  font-size: 11.5px; color: var(--text-dim);
  line-height: 1.3;
}
.user-menu-logout {
  display: block; text-align: center;
  margin: 8px 6px 4px;
  padding: 11px 16px;
  background: var(--accent);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 13.5px;
  border-radius: 10px;
  text-decoration: none;
  transition: filter 130ms ease;
}
.user-menu-logout:hover { filter: brightness(1.08); }

/* =============================================================
   CALIBRATION / TRACK RECORD page
   ============================================================= */
.calib-page { max-width: 1100px; margin: 0 auto; padding: 8px 4px 40px; }
.calib-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.calib-title { font-size: 28px; font-weight: 700; margin: 0; }
.calib-sub { color: var(--text-dim); font-size: 14px; max-width: 640px; margin-top: 4px; line-height: 1.5; }
.calib-horizon { display: flex; gap: 4px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.calib-htab { padding: 6px 14px; border-radius: 7px; text-decoration: none; color: var(--text-dim); font-size: 13px; font-weight: 600; transition: background .15s; }
.calib-htab.active { background: var(--accent); color: #fff; }
.calib-htab:hover:not(.active) { background: var(--bg); }

/* Self-contained card styling so we don't depend on a global .card */
.calib-page .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.calib-page .card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-weight: 600; gap: 10px; }
.calib-page .card-header .muted { font-weight: 400; font-size: 12px; }

.calib-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.cstat { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.cstat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.cstat-value { font-size: 30px; font-weight: 700; font-family: "JetBrains Mono", monospace; margin: 4px 0; }
.cstat-value.pos { color: #22c55e; }
.cstat-value.neg { color: #ef4444; }
.cstat-sub { font-size: 12px; color: var(--text-dim); }

#reliability-canvas { width: 100%; height: auto; display: block; }
.calib-legend { display: flex; gap: 20px; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.calib-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.dot-perfect { background: rgba(148,163,184,0.6); }
.dot-actual { background: #14b8a6; }

.calib-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.calib-table th { text-align: left; padding: 8px 10px; color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.calib-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.calib-table td.pos { color: #22c55e; font-weight: 600; }
.calib-table td.neg { color: #ef4444; font-weight: 600; }
.calib-win { color: #22c55e; font-weight: 600; }
.calib-loss { color: #ef4444; font-weight: 600; }
.calib-empty { text-align: center; padding: 44px 24px; }
.calib-empty h3 { margin: 0 0 10px; font-size: 20px; }
.calib-note { font-size: 12px; margin-top: 16px; line-height: 1.5; }

@media (max-width: 720px) {
  .calib-stats { grid-template-columns: 1fr; }
}

/* =============================================================
   THESIS FRESHNESS indicator (pair cards)
   ============================================================= */
.freshness { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.freshness-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.freshness-fresh { color: #22c55e; }
.freshness-fresh .freshness-dot { background: #22c55e; box-shadow: 0 0 5px rgba(34,197,94,0.6); }
.freshness-aging { color: #f59e0b; }
.freshness-aging .freshness-dot { background: #f59e0b; }
.freshness-stale { color: #94a3b8; }
.freshness-stale .freshness-dot { background: #94a3b8; }

/* Calibration sidebar icon */
.icon-calib { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: #fff; }

/* === Quality pass: NEUTRAL bucketing, hit-rate pill, book exposure === */

/* Topbar: emphasise the hit-rate pill — it's the stat that actually matters */
.status-pill-hit { border-color: var(--accent); }
.status-pill-hit strong { color: var(--accent); }

/* Conviction fill coloured by the EFFECTIVE direction (sub-threshold = muted) */
.conviction-fill-long { background: var(--long); }
.conviction-fill-short { background: var(--short); }
.conviction-fill-neutral { background: var(--text-dim); opacity: 0.5; }

/* A card whose stored lean was collapsed to NEUTRAL (noise) recedes slightly */
.pair-card.dir-muted { opacity: 0.78; }
.pair-card.dir-muted:hover { opacity: 1; }

/* The "revised N×" instability flag on a thrashing thesis */
.meta-unstable { color: var(--accent-warm) !important; font-weight: 600; }

/* --- Book exposure card: the book netted to its true currency drivers --- */
.exposure-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin-top: 14px;
}
.exposure-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.exposure-title {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.exposure-sub { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.exposure-sub em { font-style: normal; font-weight: 600; color: var(--text); }
.exposure-rows { display: flex; flex-direction: column; gap: 9px; }
.exposure-row { display: grid; grid-template-columns: 64px 1fr 120px; align-items: center; gap: 12px; }
.exposure-ccy {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--text);
  min-width: 0;
}
.expo-ccy-label { line-height: 1; }

/* Compact icon variants for book exposure rows. Three shapes:
   - .expo-icon-flag    : 16px round country flag (currencies)
   - .expo-icon-pair    : 16px disc with a 9px US-flag badge tucked bottom-right
                          (WTI/BRENT/metals — priced in USD)
   Sizes are deliberately smaller than the pair-card flags (22px) so the
   exposure rows stay dense and the eye runs down the bars, not the icons. */
.expo-icon {
  position: relative;
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.expo-icon-flag {
  border-radius: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.18);
}
.expo-icon-pair .expo-icon-base {
  display: block; width: 16px; height: 16px; border-radius: 50%; position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.22);
}
/* Mini oil-drop inside the energy disc (scaled-down version of the pair-card icon) */
.expo-icon-pair .flag-energy::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; background: rgba(255,255,255,0.92);
  border-radius: 0 50% 50% 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  filter: drop-shadow(0 0.5px 0.5px rgba(0,0,0,0.35));
}
/* Mini metal ingot inside the metal disc */
.expo-icon-pair .flag-metal::before {
  content: ""; position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%);
  width: 9px; height: 5px; background: rgba(255,255,255,0.95);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0.5px 0.5px rgba(0,0,0,0.45));
}
.expo-icon-pair .expo-icon-quote {
  position: absolute; right: -2px; bottom: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 0 0 1.5px var(--bg-elev);
}
.exposure-track {
  position: relative; height: 10px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 5px; overflow: hidden;
}
.exposure-zero {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--text-dim); opacity: 0.45; transform: translateX(-50%); z-index: 1;
}
.exposure-bar { position: absolute; top: 0; bottom: 0; }
.exposure-bar.exposure-strong { left: 50%; background: var(--long); border-radius: 0 5px 5px 0; }
.exposure-bar.exposure-weak  { right: 50%; background: var(--short); border-radius: 5px 0 0 5px; }
.exposure-meta { font-size: 11.5px; color: var(--text-dim); text-align: right; font-family: var(--mono); }
.exposure-strong-text { color: var(--long); text-transform: uppercase; letter-spacing: 0.04em; }
.exposure-weak-text { color: var(--short); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 560px) {
  /* Bumped from 52→64px to fit the new icon (16px) + 5-char labels like BRENT */
  .exposure-row { grid-template-columns: 64px 1fr 92px; gap: 8px; }
  .exposure-meta { font-size: 10.5px; }
  .expo-icon, .expo-icon .expo-icon-base { width: 14px; height: 14px; }
  .expo-icon-pair .expo-icon-quote { width: 8px; height: 8px; }
}

/* Dual-flag composite on the Best Trade carousel cards — purely decorative.
   Base flag (larger) at top-left of the badge area; quote flag (smaller) tucked
   bottom-right, slightly behind. Sits in the empty right half of the card. */
.best-card-flags {
  position: absolute;
  top: 26px; right: 28px;
  width: 92px; height: 92px;
  pointer-events: none;
  z-index: 2;
}
.best-card-flag {
  position: absolute;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.best-card-flag-base {
  top: 0; left: 0;
  width: 70px; height: 70px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.32),
              0 0 0 3px rgba(255,255,255,0.92);
  z-index: 2;
}
.best-card-flag-quote {
  right: 0; bottom: 0;
  width: 50px; height: 50px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.26),
              0 0 0 3px rgba(255,255,255,0.92);
  z-index: 1;
}

@media (max-width: 720px) {
  .best-card-flags { top: 18px; right: 18px; width: 72px; height: 72px; }
  .best-card-flag-base  { width: 54px; height: 54px; }
  .best-card-flag-quote { width: 40px; height: 40px; }
}


/* ====================================================================
   HONESTY STACK — calibration annotation, driver fingerprint, "Why?" modal,
   per-pair track record table. Visuals built around making the bias engine's
   numbers *audit-able* rather than a black-box claim.
   ==================================================================== */

/* ---- Calibration-aware annotation under the conviction bar -------------
   "X% hit rate at this level · N calls" — the historical accuracy of the
   conviction bucket this pair currently falls into. Tiny but high-information. */
.conviction-cal {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--text-dim);
  margin-top: -4px;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

/* ---- Pair market row: 7d sparkline + last price + 1d change ----------- */
.pair-market {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 6px;
  min-height: 26px;
}
.pair-spark-wrap {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  height: 22px;
}
.pair-spark {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}
.pair-market-quote {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; flex-shrink: 0; min-width: 70px;
}
.pair-last-price {
  font-family: var(--mono);
  font-size: 13.5px; font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  font-feature-settings: "tnum" 1;
}
.pair-change {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  line-height: 1; letter-spacing: 0.01em;
}
.pair-change-up   { color: var(--long); }
.pair-change-down { color: var(--short); }

/* ---- Driver fingerprint — four mini-bars + labels showing what's driving
   each bias (rates / growth / geo / sentiment). Bar length = share of the
   engine's thesis pillars that fall into each category. ------------------ */
.driver-fingerprint {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 2px 0 8px;
}
.driver-cell {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.driver-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--bg-elev-2);
  overflow: hidden;
  position: relative;
  cursor: help;
}
.driver-bar::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--p, 0%);
  border-radius: 3px;
  transition: width 280ms ease;
}
.driver-rates::after     { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }   /* blue   */
.driver-growth::after    { background: linear-gradient(90deg, #22c55e, #15803d); }   /* green  */
.driver-geo::after       { background: linear-gradient(90deg, #f97316, #c2410c); }   /* orange */
.driver-sentiment::after { background: linear-gradient(90deg, #a78bfa, #7c3aed); }   /* violet */

.driver-label {
  font-family: var(--display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint, var(--text-dim));
  text-align: center;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 200ms ease, color 200ms ease;
}
/* Light up the label when that driver has any pillars (i.e. is actually present). */
.driver-cell:nth-child(1) .driver-label.is-active { color: #3b82f6; opacity: 1; }
.driver-cell:nth-child(2) .driver-label.is-active { color: #22c55e; opacity: 1; }
.driver-cell:nth-child(3) .driver-label.is-active { color: #f97316; opacity: 1; }
.driver-cell:nth-child(4) .driver-label.is-active { color: #a78bfa; opacity: 1; }

/* ---- "Why?" pill button in the card footer ----------------------------- */
.ghost-btn-why {
  font-size: 10.5px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.ghost-btn-why:hover { background: var(--accent); color: #fff; }

/* ---- "Why this bias?" modal -------------------------------------------- */
.why-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(8, 12, 20, 0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px 20px;
  overflow-y: auto;
  animation: briefing-fade-in 220ms ease-out;
}
.why-backdrop[hidden] { display: none !important; }
.why-modal {
  background: var(--bg-elev); color: var(--text);
  border-radius: 16px;
  width: 720px; max-width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px var(--line);
  position: relative;
  animation: briefing-slide 280ms cubic-bezier(.2,.9,.3,1);
}
.why-close {
  position: absolute; top: 14px; right: 16px;
  background: transparent; border: none;
  font-size: 24px; line-height: 1; color: var(--text-dim);
  cursor: pointer; padding: 4px 10px; border-radius: 8px;
  z-index: 2;
}
.why-close:hover { background: var(--bg-elev-2); color: var(--text); }
.why-modal-header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.why-modal-header h2 {
  font-family: var(--display);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.why-subhead {
  display: flex; align-items: center; gap: 12px;
}
.why-pair-name {
  font-family: var(--mono);
  font-size: 22px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.why-conv {
  font-family: var(--mono);
  font-size: 13px; color: var(--text-dim);
}
.why-body {
  padding: 8px 24px 24px;
  max-height: 60vh; overflow-y: auto;
}
.why-section { margin-top: 18px; }
.why-section h3 {
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.why-prose {
  font-size: 14px; line-height: 1.55; color: var(--text);
  margin: 0;
}
.why-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.why-list-pillars li,
.why-list-kills   li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg-elev-2);
  font-size: 13.5px; line-height: 1.45; color: var(--text);
}
.why-list-pillars li::before { content: "▸"; color: var(--long); flex-shrink: 0; }
.why-list-kills   li::before { content: "✕"; color: var(--short); flex-shrink: 0; }
.why-list-deltas li {
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg-elev-2); border-left: 3px solid var(--accent);
}
.why-delta-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
}
.why-delta-arrow { font-size: 14px; font-weight: 700; }
.why-delta-up    { color: var(--long); }
.why-delta-down  { color: var(--short); }
.why-delta-flat  { color: var(--text-dim); }
.why-delta-verdict {
  font-family: var(--display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-dim);
}
.why-delta-when { margin-left: auto; font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
.why-delta-summary {
  font-size: 13px; line-height: 1.5; color: var(--text);
  margin-top: 6px;
}
.why-delta-news {
  font-size: 12px;
  margin-top: 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.why-list-news li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.why-list-news li:last-child { border-bottom: none; }
.why-news {
  color: var(--text); text-decoration: none;
}
a.why-news:hover { color: var(--accent); text-decoration: underline; }
.why-news-src {
  font-family: var(--mono); font-size: 10.5px;
  padding: 1px 7px; border-radius: 3px;
  background: var(--bg-elev-2); color: var(--text-dim);
}
.why-news-when { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-left: auto; }
.why-footer {
  padding: 14px 24px 18px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end;
}

/* ---- Per-pair track record table on /calibration ----------------------- */
.calib-table-pairs .calib-hr-cell {
  display: flex; align-items: center; gap: 10px;
}
.calib-table-pairs .calib-hr-bar {
  flex: 1; max-width: 120px;
  height: 6px; border-radius: 3px;
  background: var(--bg-elev-2);
  overflow: hidden;
}
.calib-table-pairs .calib-hr-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--long));
  transition: width 320ms ease;
}
.calib-table-pairs .calib-pair-link a {
  color: var(--text-dim); text-decoration: none; font-family: var(--mono); font-size: 12px;
}
.calib-table-pairs .calib-pair-link a:hover { color: var(--accent); }
.calib-pairs-note {
  font-size: 11.5px; color: var(--text-dim);
  line-height: 1.5; padding: 0 18px 16px; margin: 0;
}

/* ====================================================================
   MORNING BRIEFING MODAL — "Good morning, here's what you missed"
   Fires once per ~18h on first page load of the day, ONLY if something
   important changed. Designed to feel personal, calm, dismissable.
   ==================================================================== */
.briefing-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8, 12, 20, 0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: briefing-fade-in 220ms ease-out;
}
.briefing-backdrop[hidden] { display: none !important; }
@keyframes briefing-fade-in { from { opacity: 0; } to { opacity: 1; } }

.briefing-modal {
  background: var(--bg-elev); color: var(--text);
  border-radius: 18px;
  padding: 28px 32px 24px;
  max-width: 480px; width: calc(100vw - 40px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px var(--line);
  position: relative;
  animation: briefing-slide 280ms cubic-bezier(.2,.9,.3,1);
}
@keyframes briefing-slide {
  from { transform: translateY(14px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.briefing-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: none;
  font-size: 22px; line-height: 1; color: var(--text-dim);
  cursor: pointer; padding: 4px 10px; border-radius: 8px;
  transition: background 120ms ease, color 120ms ease;
}
.briefing-close:hover { background: var(--bg-elev-2); color: var(--text); }

.briefing-title {
  font-family: var(--display);
  font-size: 22px; font-weight: 700;
  margin: 0 0 6px; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.briefing-wave {
  font-size: 26px; display: inline-block;
  transform-origin: 70% 70%;
  animation: briefing-wave 1.8s ease-in-out 0.2s 2;
}
@keyframes briefing-wave {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(14deg); }
  80% { transform: rotate(-4deg); }
}

.briefing-sub {
  color: var(--text-dim);
  font-size: 13.5px; line-height: 1.5; margin: 0 0 18px;
}

.briefing-items {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 9px;
}
.briefing-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 10px;
  background: var(--bg-elev-2); border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.4; color: var(--text);
  transition: transform 130ms ease, border-color 130ms ease;
}
.briefing-item:hover { border-color: var(--accent); transform: translateX(2px); }
.briefing-icon { font-size: 16px; line-height: 1; flex-shrink: 0; width: 22px; text-align: center; }
.briefing-text { font-family: var(--mono); font-size: 12.5px; }
.briefing-item-flip { border-left: 3px solid var(--accent); }
.briefing-item-jump { border-left: 3px solid var(--long); }
.briefing-item-news { border-left: 3px solid var(--short); }
.briefing-item-cb   { border-left: 3px solid var(--text-dim); }

.briefing-actions { display: flex; justify-content: flex-end; }
.briefing-cta {
  background: var(--accent); color: #fff;
  border: none; padding: 10px 20px; border-radius: 8px;
  font-family: var(--display); font-weight: 600;
  font-size: 13px; letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 120ms ease;
}
.briefing-cta:hover { filter: brightness(1.08); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .briefing-backdrop { background: rgba(30, 40, 60, 0.45); }
}
[data-theme="light"] .briefing-backdrop { background: rgba(30, 40, 60, 0.45); }


/* ====================================================================
   EDIT MODE — iOS-style jiggle / add / remove / drag-to-reorder per section
   ==================================================================== */

/* Section banner is now a click target — collapses/expands the section. The
   chevron on the left mirrors the state; the Edit button on the right has its
   own click handler (stops propagation so it doesn't toggle the section). */
.section-header { gap: 12px; cursor: pointer; user-select: none; }
.section-header:focus { outline: 2px solid rgba(255,255,255,0.6); outline-offset: -3px; }

/* Chevron is a real visual affordance, not a hint. Boxed, bright, gets a
   subtle hover background so users notice the section is clickable. */
.section-collapse-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  font-size: 14px; line-height: 1;
  color: #ffffff;
  background: rgba(255,255,255,0.18);
  border-radius: 6px;
  transition: transform 220ms cubic-bezier(.25,.8,.25,1), background 130ms ease;
  flex-shrink: 0;
}
.section-header:hover .section-collapse-icon {
  background: rgba(255,255,255,0.34);
}
.instrument-section.is-collapsed .section-collapse-icon { transform: rotate(-90deg); }

/* Collapse animation. The old approach was animating max-height: 5000px → 0,
   which made the easing curve map to a *fake* 5000px range — most of the visible
   time was empty, the actual motion was a brief jolt. That's what felt laggy.
   The fix is the modern grid-template-rows trick: the wrapper is a 1-row grid
   and animates the row size from 1fr (intrinsic height) to 0fr. The browser
   knows the true target height and the timing function maps directly onto it,
   so the motion feels smooth start-to-finish. The inner element needs
   min-height: 0 + overflow: hidden so it can actually shrink. */
.section-collapse,
.cb-section .cb-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 320ms cubic-bezier(.25,.8,.25,1),
              opacity            240ms ease;
  opacity: 1;
}
.instrument-section.is-collapsed .section-collapse,
.cb-section.is-collapsed         .cb-body {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}
.section-collapse > .pair-grid,
.cb-section .cb-body > * {
  min-height: 0;
  overflow: hidden;
}
/* Hide the Edit pill while collapsed — you can't edit what you can't see. */
.instrument-section.is-collapsed .section-edit-btn,
.cb-section.is-collapsed         .section-edit-btn { display: none; }
.instrument-section.is-collapsed,
.cb-section.is-collapsed { margin-bottom: 10px; }
.instrument-section.is-collapsed .section-header,
.cb-section.is-collapsed         .cb-section-header { margin-bottom: 0; }

/* CB section header — currently a plain dark-text label. Turn it into the same
   coloured banner style as the pair sections so the new chevron + Edit pill
   read cleanly. Indigo gradient distinguishes it from the FX sections. */
.cb-section-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; margin-bottom: 14px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(90deg, #6366f1 0%, #312e81 70%, transparent 100%);
  cursor: pointer; user-select: none;
  position: relative;
}
.cb-section-header h2 {
  font-family: var(--display); font-size: 13px; margin: 0;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #fff;
}
.cb-section-header .panel-subtle.cb-subtle {
  color: rgba(255,255,255,0.78);
  font-family: var(--mono); font-size: 11px;
}
.cb-section-header:focus { outline: 2px solid rgba(255,255,255,0.6); outline-offset: -3px; }

/* cb-card needs position:relative as anchor for the absolute-positioned
   .pair-remove-btn (top-center of the card). */
.cb-card { position: relative; }


.section-edit-btn {
  margin-left: auto;
  background: #ffffff;
  color: #0f172a;
  border: none;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
  transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease;
}
.section-edit-btn:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.28); }
.section-edit-btn:active { transform: scale(0.95); }
.instrument-section.is-editing .section-edit-btn {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.40), 0 3px 10px rgba(0,0,0,0.30);
}

/* The jiggle. Two slightly-different keyframes alternated by position so the
   grid looks organic, not synchronised. Reduced-motion users get a tiny pulse
   instead of a rotation — still signals "edit mode," doesn't induce nausea. */
@keyframes pair-jiggle-a {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}
@keyframes pair-jiggle-b {
  0%, 100% { transform: rotate(1deg); }
  50% { transform: rotate(-1deg); }
}
.instrument-section.is-editing .pair-card:nth-child(odd),
.cb-section.is-editing         .cb-card:nth-child(odd)   { animation: pair-jiggle-a 0.30s ease-in-out infinite; }
.instrument-section.is-editing .pair-card:nth-child(even),
.cb-section.is-editing         .cb-card:nth-child(even)  { animation: pair-jiggle-b 0.30s ease-in-out infinite; }
.instrument-section.is-editing .pair-card,
.cb-section.is-editing .cb-card { cursor: grab; user-select: none; }
.instrument-section.is-editing .pair-card:active,
.cb-section.is-editing .cb-card:active { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  .instrument-section.is-editing .pair-card:nth-child(odd),
  .instrument-section.is-editing .pair-card:nth-child(even) {
    animation: none;
    outline: 2px dashed var(--accent);
    outline-offset: -3px;
  }
}

/* Red minus button on each card, only shown in edit mode. Sits at top-CENTER
   of the card — visually between the pair name (left) and the direction badge
   (right), in the empty space of the header row. */
.pair-remove-btn {
  position: absolute; top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: #ef4444; color: #fff;
  border: 2px solid #fff;
  font-size: 20px; font-weight: 700; line-height: 1;
  cursor: pointer; padding: 0;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.45);
  z-index: 6;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.pair-remove-btn:hover {
  transform: translateX(-50%) scale(1.12);
  box-shadow: 0 3px 14px rgba(220, 38, 38, 0.55);
}
.instrument-section.is-editing .pair-remove-btn,
.cb-section.is-editing         .pair-remove-btn { display: flex; }

/* While a drag is in flight, kill the jiggle on EVERY card in the grid so
   SortableJS's transform: translate3d() can run uncontested and the other cards
   visibly slide to make room (iOS-style). */
.pair-grid.is-dragging .pair-card,
.cb-grid.is-dragging   .cb-card {
  animation: none !important;
  transition: transform 220ms cubic-bezier(.25,.8,.25,1) !important;
}
/* The "chosen" / "drag" cards used to get transform: scale(1.04) here — that
   was fighting SortableJS's translate transform and the card couldn't actually
   move. Style without changing transform. */
.pair-grid.is-dragging .pair-card.sortable-chosen,
.pair-grid.is-dragging .pair-card.sortable-drag {
  cursor: grabbing;
  box-shadow: 0 18px 44px rgba(0,0,0,0.30);
  z-index: 100;
}
/* The "ghost" is the placeholder for the card the user picked up. Making it
   fully invisible (rather than 35% opacity) gives the iOS look — the slot the
   card came from just disappears, and the other cards animate into the gap. */
.pair-card-ghost { opacity: 0 !important; }

/* Ghost class while a card is being dragged. */
.pair-card-ghost { opacity: 0.4; transform: scale(0.97); }

/* The "+" add-pair slot — dashed placeholder card that sits after the visible
   pairs. Hidden by default; only appears in edit mode. Greyed when the user
   has nothing hidden in this section. */
.pair-add-slot {
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 140px;
  border: 2px dashed var(--line);
  border-radius: 12px;
  color: var(--text-dim);
  cursor: pointer;
  position: relative;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.instrument-section.is-editing .pair-add-slot,
.cb-section.is-editing         .pair-add-slot { display: flex; }
.pair-add-slot:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-elev-2);
}
.pair-add-slot.is-empty { opacity: 0.45; cursor: not-allowed; }
.pair-add-slot.is-empty:hover {
  border-color: var(--line); color: var(--text-dim); background: transparent;
}
.pair-add-plus { font-size: 34px; font-weight: 300; line-height: 1; }
.pair-add-label {
  font-family: var(--display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
}

/* Popover that opens when the "+" is clicked, listing the hidden pairs to add
   back. Mounted on <body> (not the slot) so stacking contexts don't trap it. */
.pair-add-menu {
  z-index: 9999;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06);
  min-width: 220px;
  max-height: 320px; overflow-y: auto;
  padding: 8px;
  animation: pair-add-menu-pop 160ms ease-out;
}
@keyframes pair-add-menu-pop {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pair-add-menu-title {
  font-family: var(--display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.pair-add-menu-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none;
  padding: 10px 12px; border-radius: 8px;
  font-family: var(--mono); font-size: 13.5px; color: var(--text);
  cursor: pointer;
  transition: background 110ms ease, color 110ms ease;
}
.pair-add-menu-item:hover { background: var(--bg-elev-2); color: var(--accent); }


/* ====================================================================
   CoT POSITIONING PANEL on the pair detail page
   ==================================================================== */
.cot-explainer {
  color: var(--text-dim); font-size: 12.5px; line-height: 1.55;
  margin: 4px 0 14px; max-width: 720px;
}
.cot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.cot-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.cot-card.cot-lean-long  { border-left-color: var(--long); }
.cot-card.cot-lean-short { border-left-color: var(--short); }

.cot-card-header { display: flex; align-items: center; gap: 10px; }
.cot-ccy {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--text);
}
.cot-lean-tag {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
.cot-long-bg  { background: var(--long-soft);  color: var(--long); }
.cot-short-bg { background: var(--short-soft); color: var(--short); }
.cot-stretch {
  margin-left: auto;
  font-family: var(--display); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: var(--accent-warm, #f59e0b);
  color: #fff;
}

.cot-pct-row { display: flex; align-items: center; gap: 12px; }
.cot-pct {
  font-family: var(--mono); font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text);
  flex-shrink: 0;
}
.cot-pct-unit { font-size: 11px; color: var(--text-dim); margin-left: 2px; letter-spacing: 0.04em; }
.cot-pct-bar {
  flex: 1; height: 8px; background: var(--bg-elev-2);
  border-radius: 4px; overflow: hidden; position: relative;
}
.cot-pct-fill { height: 100%; border-radius: 4px; transition: width 200ms ease; }
.cot-fill-long  { background: var(--long); }
.cot-fill-short { background: var(--short); }

.cot-numbers {
  font-size: 13px; color: var(--text);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cot-numbers strong { font-family: var(--mono); font-weight: 700; }
.cot-delta {
  font-family: var(--mono); font-size: 11.5px;
  padding: 2px 6px; border-radius: 4px;
}
.cot-delta-up   { background: var(--long-soft);  color: var(--long); }
.cot-delta-down { background: var(--short-soft); color: var(--short); }

.cot-meta { font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); }

.cot-note { font-size: 12px; color: var(--text-dim); margin-top: 12px; }


/* ====================================================================
   RATE PATHS panel on the pair detail page
   ==================================================================== */
.rp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.rp-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.rp-card-header {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--display); margin-bottom: 6px;
}
.rp-code { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.rp-ccy {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-dim);
  padding: 2px 7px; border-radius: 999px; background: var(--bg-elev-2);
}
.rp-next { margin-left: auto; font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
.rp-rate {
  font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em; margin-bottom: 4px;
}
.rp-step {
  font-size: 12.5px; color: var(--text-dim);
  padding: 3px 0; margin-bottom: 6px;
}
.rp-step strong { font-family: var(--mono); font-weight: 700; }
.rp-step-up   strong { color: var(--long); }
.rp-step-down strong { color: var(--short); }
.rp-step-flat strong { color: var(--text); }
.rp-path { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 0; }

.rp-diff {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-elev-2);
  border-left: 3px solid var(--text-dim);
  font-size: 13.5px; color: var(--text);
}
.rp-diff-base  { border-left-color: var(--long); }
.rp-diff-quote { border-left-color: var(--short); }
.rp-diff-icon { font-size: 18px; opacity: 0.7; }

.rp-source-note {
  font-size: 11.5px; color: var(--text-faint, var(--text-dim));
  margin-top: 10px; font-style: italic; line-height: 1.5;
}


/* ====================================================================
   RISK REVERSAL panel on the pair detail page
   ==================================================================== */
.rr-row {
  display: grid;
  grid-template-columns: minmax(140px,180px) 1fr minmax(140px,220px);
  gap: 18px; align-items: center;
  padding: 14px 16px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px;
}
.rr-value {
  font-family: var(--mono); font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
}
.rr-lean-call .rr-value { color: var(--long); }
.rr-lean-put  .rr-value { color: var(--short); }
.rr-lean-flat .rr-value { color: var(--text); }
.rr-unit {
  display: block; margin-top: 4px;
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.rr-interp { font-size: 13px; color: var(--text); line-height: 1.45; }
.rr-spark { width: 100%; height: 36px; color: var(--accent); }
.rr-lean-call .rr-spark { color: var(--long); }
.rr-lean-put  .rr-spark { color: var(--short); }
.rr-meta { font-size: 11.5px; color: var(--text-dim); margin: 10px 0 0; font-family: var(--mono); }

.rr-empty {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px;
  background: var(--bg-elev-2);
  border: 1px dashed var(--line); border-radius: 10px;
}
.rr-empty-icon { font-size: 22px; color: var(--text-dim); line-height: 1; }
.rr-empty-head {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text);
  margin-bottom: 4px;
}
.rr-empty-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; max-width: 720px; }

/* ====================================================================
   LANDING PAGE (/) — public-facing marketing surface
   Used by templates/landing.html for unauthed visitors.
   Composed against the same color tokens as the app so it follows
   prefers-color-scheme automatically. No data-theme override here —
   marketing should respect the OS theme.
   ==================================================================== */

body.landing-body {
  margin: 0;
  font-family: var(--display);
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(1200px 700px at 100% -10%, var(--accent-soft) 0%, transparent 55%),
    radial-gradient(900px 600px at 0% 10%, rgba(248,113,113,0.06) 0%, transparent 50%),
    var(--bg-grad);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.landing-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 36px;
  border-bottom: 1px solid var(--line);
  background: rgba(7,16,31,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 50;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .landing-topbar { background: rgba(255,255,255,0.75); }
}
.landing-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
}
.landing-brand-name {
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
}
.landing-nav {
  display: inline-flex; align-items: center; gap: 22px;
}
.landing-nav a {
  color: var(--text-muted); text-decoration: none; font-size: 13.5px;
  font-weight: 500; transition: color var(--t);
}
.landing-nav a:hover { color: var(--accent); }
.landing-nav-login {
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--line);
}
.landing-nav-login:hover { border-color: var(--accent); }
.landing-nav-cta {
  padding: 8px 16px; border-radius: 8px;
  background: var(--accent); color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 18px rgba(56,189,248,0.28);
  transition: transform var(--t), box-shadow var(--t);
}
.landing-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(56,189,248,0.38);
  color: #fff !important;
}

/* HERO */
.landing-hero {
  padding: 86px 36px 64px;
  display: flex; justify-content: center;
}
.landing-hero-inner {
  max-width: 1040px; width: 100%; text-align: center;
}
.landing-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid rgba(56,189,248,0.22);
  margin-bottom: 26px;
}
.hero-tag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: live-pulse 2.4s infinite;
  box-shadow: 0 0 0 0 var(--accent);
}

/* SPLIT HERO — marketing copy on the left, inline auth card on the right.
   Stacks on mobile. Used by landing.html. */
.landing-hero-split { padding: 64px 36px 56px; }
.landing-hero-split-inner {
  max-width: 1200px; width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 460px);
  gap: 56px;
  align-items: center;
  text-align: left;
}
.landing-hero-copy { min-width: 0; }
.landing-hero-copy .landing-hero-title { text-align: left; }
.landing-hero-copy .landing-hero-sub { margin-left: 0; margin-right: 0; }
.landing-hero-copy .landing-hero-stats { margin-left: 0; }

/* The auth card — sticky-feeling sign-in box. */
.landing-auth-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.landing-auth-card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(56,189,248,0.45), rgba(56,189,248,0) 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.landing-auth-tabs {
  display: inline-flex; gap: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 18px;
}
.landing-auth-tab {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  background: transparent; border: none;
  color: var(--text-muted);
  padding: 7px 14px; border-radius: 7px;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.landing-auth-tab:hover { color: var(--text); }
.landing-auth-tab.is-active {
  background: var(--bg-elev); color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.landing-auth-error {
  background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.30);
  color: #f87171;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
  font-weight: 500;
}
[data-theme="light"] .landing-auth-error,
:root:not([data-theme="dark"]) .landing-auth-error { color: #dc2626; }

/* ===== Google OAuth button + "or" divider =====
   Follows Google's brand spec: white background, Google G logo on the left,
   "Continue with Google" text, neutral border. Hover slightly darkens the
   background. Sits ABOVE the email/password form with a divider in between. */
.landing-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 11px 16px;
  margin-bottom: 16px;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #d4d8de;
  border-radius: 10px;
  font-family: var(--display);
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.landing-google-btn:hover {
  background: #f7f8fa;
  border-color: #c0c5cf;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transform: translateY(-1px);
  color: #1f2937;          /* keep dark text on hover too */
}
.landing-google-logo {
  flex-shrink: 0;
  width: 18px; height: 18px;
}
.landing-auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.landing-auth-divider::before,
.landing-auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.landing-auth-divider span { padding: 0 4px; }

.landing-auth-pane {
  display: none;
  flex-direction: column;
  gap: 14px;
}
.landing-auth-pane.is-active { display: flex; }

.landing-auth-label {
  display: flex; flex-direction: column; gap: 6px;
}
.landing-auth-label > span {
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.landing-auth-label input {
  font-family: var(--display); font-size: 14.5px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
  -webkit-appearance: none; appearance: none;
}
.landing-auth-label input::placeholder { color: var(--text-faint); }
.landing-auth-label input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.16);
}

.landing-auth-submit {
  margin-top: 6px;
  width: 100%; justify-content: center;
  font-size: 15px;
  padding: 13px 18px;
}

.landing-auth-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted);
  margin-top: 4px;
  flex-wrap: wrap;
}
.landing-auth-foot a {
  color: var(--accent); text-decoration: none; font-weight: 600;
}
.landing-auth-foot a:hover { text-decoration: underline; }
.landing-auth-foot-dot { color: var(--text-faint); }

.landing-auth-finepr {
  margin: 16px 0 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px; color: var(--text-faint);
  text-align: center;
}

/* Authed variant of the auth card — replaces the sign-in form with a quick
   "Continue to dashboard" affordance. Same visual shell so the card slot on
   the hero doesn't shift sizes between authed/unauthed states. */
.landing-auth-card-authed {
  display: flex; flex-direction: column;
  gap: 12px;
}
.landing-auth-greeting {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 5px 12px; border-radius: 999px;
  background: var(--long-soft); color: var(--long);
  border: 1px solid rgba(34,197,94,0.30);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.landing-auth-greeting strong { color: var(--text); font-weight: 700; }
.landing-auth-greeting-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--long);
  box-shadow: 0 0 0 0 var(--long);
  animation: live-pulse 2s infinite;
}
.landing-auth-welcome {
  font-family: var(--display);
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  margin: 6px 0 4px 0; color: var(--text);
}
.landing-auth-welcome-sub {
  margin: 0 0 14px 0;
  font-size: 13.5px; color: var(--text-muted); line-height: 1.55;
}
.landing-auth-foot-authed {
  margin-top: 4px;
  justify-content: flex-start;
}
.landing-auth-foot-authed a { color: var(--text-muted); }
.landing-auth-foot-authed a:hover { color: var(--accent); }

/* Stack on narrow viewports */
@media (max-width: 920px) {
  .landing-hero-split { padding: 48px 24px 40px; }
  .landing-hero-split-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .landing-hero-copy .landing-hero-title { text-align: center; }
  .landing-auth-card { max-width: 460px; margin: 0 auto; width: 100%; }
}
@media (max-width: 480px) {
  .landing-hero-split { padding: 36px 16px 32px; }
  .landing-auth-card { padding: 20px 18px 18px; }
  .landing-hero-stats { grid-template-columns: 1fr 1fr !important; }
}

.landing-hero-title {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700; line-height: 1.06; letter-spacing: -0.025em;
  margin: 0 0 22px 0;
}
.landing-hero-accent {
  background: linear-gradient(90deg, var(--accent) 0%, #818cf8 60%, #f472b6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-hero-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-muted); line-height: 1.55;
  max-width: 720px; margin: 0 auto 36px;
}
.landing-hero-actions {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 48px;
}

/* Buttons (reused by methodology + landing) */
.landing-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 22px; border-radius: 10px;
  font-family: var(--display); font-size: 14.5px; font-weight: 600;
  text-decoration: none; transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
  cursor: pointer; border: 1px solid transparent;
  letter-spacing: -0.005em;
}
.landing-btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 28px rgba(56,189,248,0.32);
}
.landing-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(56,189,248,0.42);
  background: var(--accent-strong);
}
.landing-btn-secondary {
  background: var(--bg-elev); color: var(--text);
  border-color: var(--line-strong);
}
.landing-btn-secondary:hover {
  background: var(--bg-hover); border-color: var(--accent);
}
.landing-btn-big {
  padding: 16px 30px; font-size: 16px;
}

/* Hero stats row */
.landing-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 20px;
  max-width: 720px; margin: 0 auto;
}
.landing-stat {
  padding: 22px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
  transition: transform var(--t), border-color var(--t);
}
.landing-stat:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.landing-stat-value {
  font-family: var(--display);
  font-size: 32px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--text); line-height: 1;
}
.landing-stat-label {
  margin-top: 8px;
  font-size: 11.5px; color: var(--text-muted);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
}

/* Section heads */
.landing-section-head {
  text-align: center; max-width: 700px; margin: 0 auto 44px;
}
.landing-section-head h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 12px 0; color: var(--text);
}
.landing-section-head p {
  font-size: 15.5px; color: var(--text-muted); line-height: 1.55;
  margin: 0;
}

/* Features grid */
.landing-features {
  padding: 64px 36px;
  border-top: 1px solid var(--line);
}
.landing-feature-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1140px; margin: 0 auto;
}
.landing-feature {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 22px;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
  position: relative; overflow: hidden;
}
.landing-feature::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); opacity: 0; transition: opacity var(--t);
}
.landing-feature:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.landing-feature:hover::before { opacity: 1; }
.landing-feature h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 8px 0; color: var(--text);
}
.landing-feature p {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.6;
  margin: 0;
}
.landing-feature-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(56,189,248,0.22);
}
.landing-feat-bias    { background: rgba(56,189,248,0.13); color: var(--accent); border-color: rgba(56,189,248,0.22); }
.landing-feat-news    { background: rgba(248,113,113,0.13); color: #f87171; border-color: rgba(248,113,113,0.22); }
.landing-feat-honest  { background: rgba(34,197,94,0.13); color: var(--long); border-color: rgba(34,197,94,0.22); }
.landing-feat-source  { background: rgba(168,139,250,0.13); color: #a78bfa; border-color: rgba(168,139,250,0.22); }
.landing-feat-fed     { background: rgba(251,191,36,0.13); color: #fbbf24; border-color: rgba(251,191,36,0.22); }
.landing-feat-brief   { background: rgba(244,114,182,0.13); color: #f472b6; border-color: rgba(244,114,182,0.22); }

/* "What it is NOT" honest section */
.landing-honest {
  padding: 64px 36px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent 0%, var(--bg-elev) 50%, transparent 100%);
}
.landing-honest-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1140px; margin: 0 auto;
}
.landing-honest-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-warm);
  border-radius: 14px;
  padding: 24px 22px;
  position: relative;
}
.landing-honest-tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(245,158,11,0.13); color: var(--accent-warm);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 12px;
  border: 1px solid rgba(245,158,11,0.22);
}
.landing-honest-card h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 8px 0; color: var(--text);
}
.landing-honest-card p {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0;
}
.landing-honest-card p strong { color: var(--text); font-weight: 600; }

/* Final CTA */
.landing-cta {
  padding: 86px 36px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.landing-cta-inner {
  max-width: 640px; margin: 0 auto;
}
.landing-cta-inner h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700; letter-spacing: -0.025em;
  margin: 0 0 14px 0; color: var(--text);
}
.landing-cta-inner > p {
  font-size: 16px; color: var(--text-muted); margin: 0 0 28px 0;
}
.landing-cta-fine {
  margin-top: 18px !important;
  font-size: 13px !important;
  color: var(--text-faint) !important;
}
.landing-cta-fine a {
  color: var(--accent); text-decoration: none; font-weight: 600;
}
.landing-cta-fine a:hover { text-decoration: underline; }

/* Footer — heavier on the legal disclaimer now. Three blocks:
   1. Risk warning (bold red-tinted): high-risk + lose-more-than-deposit
   2. Not-financial-advice paragraph (text-muted)
   3. Meta row: link to full disclaimer + tagline
*/
.landing-footer {
  padding: 36px 36px 28px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.landing-footer-inner {
  max-width: 820px; margin: 0 auto;
  font-size: 12.5px; color: var(--text-muted);
  text-align: left;
  display: flex; flex-direction: column; gap: 14px;
}
.landing-footer-inner a {
  color: var(--text-muted); text-decoration: underline;
  text-underline-offset: 2px;
}
.landing-footer-inner a:hover { color: var(--accent); }
.landing-footer-warning {
  margin: 0;
  padding: 12px 14px;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.22);
  border-left: 3px solid var(--short);
  border-radius: 8px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--text);
}
.landing-footer-warning strong { color: var(--short); font-weight: 700; }
.landing-footer-disclaimer {
  margin: 0;
  font-size: 12px; line-height: 1.6;
  color: var(--text-muted);
}
.landing-footer-disclaimer strong { color: var(--text); font-weight: 600; }
.landing-footer-meta {
  margin: 4px 0 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px; color: var(--text-faint);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}

/* 2-col stats variant (used after we dropped the $0 card) — looks cleaner
   than a 3-col grid with a missing tile, and centers on the auth-card side. */
.landing-hero-stats-2col {
  grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  max-width: 520px !important;
}

/* Variant tag for the disclaimer page header — red-tinted to read as "warning"
   rather than the neutral accent-blue used for "Methodology". */
.methodology-tag-warn {
  background: rgba(248,113,113,0.13) !important;
  color: var(--short) !important;
  border-color: rgba(248,113,113,0.30) !important;
}

/* Mobile pass for landing */
@media (max-width: 720px) {
  .landing-topbar { padding: 14px 18px; }
  .landing-brand-name { font-size: 14px; }
  .landing-nav { gap: 10px; }
  .landing-nav a { font-size: 12.5px; }
  .landing-nav-login { padding: 6px 10px; }
  .landing-nav-cta { padding: 6px 12px; }
  .landing-hero { padding: 56px 18px 40px; }
  .landing-hero-stats { grid-template-columns: 1fr; }
  .landing-features, .landing-honest, .landing-cta { padding: 48px 18px; }
  .landing-feature-grid, .landing-honest-grid { grid-template-columns: 1fr; }
  .landing-btn { width: 100%; justify-content: center; }
  .landing-hero-actions { flex-direction: column; width: 100%; }
}

/* ====================================================================
   METHODOLOGY PAGE (/methodology) — public, no login required
   The "read this before you trust the dashboard" doc.
   ==================================================================== */

.methodology {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 36px 80px;
  color: var(--text);
  line-height: 1.65;
}
.methodology-head {
  margin-bottom: 52px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.methodology-tag {
  display: inline-block;
  padding: 4px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(56,189,248,0.22);
  margin-bottom: 20px;
}
.methodology h1 {
  font-size: clamp(34px, 5.6vw, 52px);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.025em;
  margin: 0 0 18px 0; color: var(--text);
}
.methodology-lede {
  font-size: 16.5px; color: var(--text-muted); line-height: 1.65;
  margin: 0; max-width: 680px;
}
.methodology-section {
  margin-bottom: 44px;
}
.methodology-section h2 {
  font-family: var(--display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 16px 0;
  color: var(--text);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.methodology-section p {
  font-size: 15px; color: var(--text); line-height: 1.7;
  margin: 0 0 14px 0;
}
.methodology-section p:last-child { margin-bottom: 0; }
.methodology-section p strong { color: var(--text); font-weight: 600; }
.methodology-section p em { color: var(--text-muted); font-style: italic; }

.methodology-list {
  list-style: none; padding: 0; margin: 14px 0 14px 0;
}
.methodology-list li {
  position: relative;
  padding: 10px 0 10px 22px;
  font-size: 14.5px; line-height: 1.65;
  color: var(--text-muted);
  border-bottom: 1px dashed var(--line);
}
.methodology-list li:last-child { border-bottom: none; }
.methodology-list li::before {
  content: "▸";
  position: absolute; left: 0; top: 10px;
  color: var(--accent); font-size: 13px;
}
.methodology-list li strong { color: var(--text); font-weight: 600; }

.methodology-list-good li::before {
  content: "✓"; color: var(--long); font-weight: 700;
}
.methodology-list-bad li::before {
  content: "✕"; color: var(--short); font-weight: 700;
}

/* Section variants for the "what it cannot do" + disclaimer */
.methodology-warn h2 {
  color: var(--accent-warm);
  border-bottom-color: rgba(245,158,11,0.30);
}
.methodology-disclaimer {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--short);
  border-radius: 12px;
  padding: 24px 26px;
  margin-top: 56px;
}
.methodology-disclaimer h2 {
  color: var(--short);
  border-bottom-color: rgba(248,113,113,0.30);
}
.methodology-disclaimer p {
  font-size: 14px; color: var(--text-muted); line-height: 1.7;
}
.methodology-disclaimer p strong { color: var(--text); }

.methodology-foot {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

/* Mobile pass for methodology */
@media (max-width: 720px) {
  .methodology { padding: 36px 18px 64px; }
  .methodology-section h2 { font-size: 19px; }
  .methodology-foot { flex-direction: column; }
  .methodology-foot .landing-btn { width: 100%; justify-content: center; }
}

/* ====================================================================
   PAIR DETAIL — redesigned hero (bias card + Lightweight Charts price chart)
   This is the entry point on /pair/{pair}. Goal: see direction, conviction,
   live calibration and a real price chart in one glance.
   ==================================================================== */

.pd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 22px;
  padding: 26px;
  margin: 0 0 28px 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 16px;
  position: relative; overflow: hidden;
}
/* Chartless layout — for instruments without a price feed (e.g. non-US
   sovereign yields). The bias card spans the full row instead of leaving
   an empty placeholder where the chart would be. */
.pd-hero.pd-hero-chartless {
  grid-template-columns: minmax(0, 1fr);
}
.pd-hero::before {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; opacity: 0.55;
  background: radial-gradient(700px 280px at 100% 0%, var(--accent-soft) 0%, transparent 60%);
}
/* Direction-tinted glow behind the hero. The class names are lowercase to
   match bias.direction values ("long" / "short" / "neutral") — Jinja
   renders them verbatim from the schema, so the CSS must agree. */
.pd-hero.pd-dir-long::before {
  background: radial-gradient(700px 280px at 100% 0%, var(--long-soft) 0%, transparent 60%);
}
.pd-hero.pd-dir-short::before {
  background: radial-gradient(700px 280px at 100% 0%, var(--short-soft) 0%, transparent 60%);
}
.pd-hero.pd-dir-neutral::before {
  background: radial-gradient(700px 280px at 100% 0%, var(--neutral-soft) 0%, transparent 60%);
}
.pd-hero > * { position: relative; z-index: 1; }

/* ----- LEFT: bias card ----- */
.pd-hero-bias {
  display: flex; flex-direction: column;
  gap: 14px;
}
.pd-hero-topline {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.pd-back {
  font-size: 12.5px; color: var(--text-muted); text-decoration: none;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 6px;
  transition: background var(--t), color var(--t);
}
.pd-back:hover { background: var(--bg-hover); color: var(--accent); }
.pd-refresh-btn {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--text-muted); background: var(--bg-elev-2);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 10px; cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.pd-refresh-btn:hover { color: var(--accent); border-color: var(--accent); }

.pd-pair-line {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.pd-pair-name {
  font-family: var(--display);
  font-size: clamp(34px, 4.8vw, 48px);
  font-weight: 700; letter-spacing: -0.025em;
  margin: 0; color: var(--text); line-height: 1;
}
.pd-pair-sub {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 13px; color: var(--text-muted);
  padding: 4px 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.pd-pair-flag {
  width: 18px; height: 13px; object-fit: cover;
  border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.pd-pair-ccy { font-weight: 600; color: var(--text); }
.pd-pair-slash { color: var(--text-faint); margin: 0 2px; }

.pd-direction-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 4px;
}
.pd-direction {
  font-family: var(--display);
  font-size: 15px; font-weight: 700; letter-spacing: 0.10em;
  padding: 8px 18px; border-radius: 999px;
  text-transform: uppercase;
}
/* Direction pill colors — lowercase classes to match bias.direction. */
.pd-direction.pd-dir-long    { background: var(--long-soft);    color: var(--long);    border: 1px solid rgba(34,197,94,0.30); }
.pd-direction.pd-dir-short   { background: var(--short-soft);   color: var(--short);   border: 1px solid rgba(248,113,113,0.30); }
.pd-direction.pd-dir-neutral { background: var(--neutral-soft); color: var(--neutral); border: 1px solid rgba(148,163,184,0.30); }

/* Bonus: tint the conviction number the same color as the direction so the
   whole header reads as one consistent direction signal. Matches the pair-
   card convention on the dashboard. */
.pd-dir-long .pd-conviction-num    { color: var(--long); }
.pd-dir-short .pd-conviction-num   { color: var(--short); }
.pd-dir-neutral .pd-conviction-num { color: var(--neutral); }

.pd-conviction-block {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 5px 14px; border-radius: 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
}
.pd-conviction-num {
  font-family: var(--mono);
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
}
.pd-conviction-label {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}

.pd-cal-annot {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 8px;
  background: rgba(56,189,248,0.06);
  border: 1px solid rgba(56,189,248,0.18);
}
.pd-cal-pct {
  font-family: var(--mono); font-size: 19px; font-weight: 700;
  color: var(--accent); line-height: 1;
}
.pd-cal-label {
  font-size: 11px; color: var(--text-muted);
  line-height: 1.35; font-weight: 500;
}
.pd-cal-faint { color: var(--text-faint); font-size: 10px; }

.pd-summary {
  font-size: 15.5px; line-height: 1.55; color: var(--text);
  margin: 6px 0 0 0;
  max-width: 540px;
}

.pd-meta-row {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  margin-top: auto;
}
.pd-meta-item { display: inline-flex; flex-direction: column; gap: 1px; }
.pd-meta-label {
  font-size: 10px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.pd-meta-value {
  font-family: var(--mono); font-size: 13px;
  color: var(--text); font-weight: 600;
}

/* ----- RIGHT: price chart ----- */
.pd-hero-chart {
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  min-height: 320px;
}
.pd-chart-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-bottom: 14px;
}
.pd-chart-price-block {
  display: flex; align-items: baseline; gap: 12px;
}
.pd-chart-price {
  font-family: var(--mono);
  font-size: 26px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--text); line-height: 1;
}
.pd-chart-price-empty {
  font-family: var(--mono); font-size: 14px; color: var(--text-faint);
}
.pd-chart-change {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
}
.pd-chart-change.up   { color: var(--long); }
.pd-chart-change.down { color: var(--short); }
.pd-chart-change-unit {
  margin-left: 4px;
  font-size: 10px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.pd-chart-tf {
  display: inline-flex; gap: 2px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 8px; padding: 2px;
}
.pd-tf-btn {
  background: transparent; border: none;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--text-muted);
  padding: 6px 12px; border-radius: 6px;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.pd-tf-btn:hover { color: var(--text); }
.pd-tf-btn.is-active {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 8px rgba(56,189,248,0.28);
}
[data-theme="light"] .pd-tf-btn.is-active,
:root:not([data-theme="dark"]) .pd-tf-btn.is-active { color: #fff; }

.pd-chart-canvas {
  flex: 1;
  min-height: 260px;
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.pd-chart-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px;
  color: var(--text-faint);
  background: var(--bg);
  pointer-events: none;
  z-index: 2;
}
.pd-chart-loading.is-hidden { display: none; }
.pd-chart-foot {
  margin-top: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.pd-chart-source {
  font-size: 10.5px; color: var(--text-faint);
  letter-spacing: 0.03em;
}

/* Light-theme tweaks: lift chart panel onto white card */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pd-hero-chart { background: var(--bg-elev-2); }
  :root:not([data-theme="dark"]) .pd-chart-loading { background: var(--bg-elev-2); }
}
[data-theme="light"] .pd-hero-chart { background: var(--bg-elev-2); }
[data-theme="light"] .pd-chart-loading { background: var(--bg-elev-2); }

/* Stack on mobile */
@media (max-width: 980px) {
  .pd-hero { grid-template-columns: 1fr; padding: 20px; }
  .pd-hero-chart { min-height: 280px; }
  .pd-chart-canvas { min-height: 220px; }
  .pd-pair-name { font-size: clamp(28px, 7vw, 36px); }
  .pd-direction-row { gap: 10px; }
  .pd-cal-annot { width: 100%; justify-content: flex-start; }
  .pd-chart-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .pd-chart-tf { align-self: flex-start; }
}

/* ====================================================================
   ADAPTIVE HORIZON — pill on pair cards, meta row on pair detail
   ==================================================================== */
.pair-horizon {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  color: var(--text-muted);
  cursor: help;
}
.pair-horizon-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.pair-horizon-label { white-space: nowrap; }

/* Color the dot + border by horizon */
.pair-horizon-intraday   { border-color: rgba(244,114,182,0.30); color: #f472b6; }
.pair-horizon-intraday   .pair-horizon-dot { background: #f472b6; box-shadow: 0 0 0 3px rgba(244,114,182,0.18); }
.pair-horizon-swing      { border-color: rgba(56,189,248,0.30); color: var(--accent); }
.pair-horizon-swing      .pair-horizon-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(56,189,248,0.16); }
.pair-horizon-multi_week { border-color: rgba(168,139,250,0.30); color: #a78bfa; }
.pair-horizon-multi_week .pair-horizon-dot { background: #a78bfa; box-shadow: 0 0 0 3px rgba(168,139,250,0.18); }
.pair-horizon-macro      { border-color: rgba(251,191,36,0.30); color: #fbbf24; }
.pair-horizon-macro      .pair-horizon-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,0.18); }

/* Light-mode contrast — keep readable in white-card mode */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pair-horizon { background: var(--bg-elev-3); }
}
[data-theme="light"] .pair-horizon { background: var(--bg-elev-3); }

/* On the pair detail page, the horizon item lives inside .pd-meta-row */
.pd-meta-item.pd-horizon-item {
  padding: 6px 12px; border-radius: 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
}
.pd-horizon-intraday   { border-color: rgba(244,114,182,0.30); }
.pd-horizon-intraday   .pd-meta-value { color: #f472b6; }
.pd-horizon-swing      { border-color: rgba(56,189,248,0.30); }
.pd-horizon-swing      .pd-meta-value { color: var(--accent); }
.pd-horizon-multi_week { border-color: rgba(168,139,250,0.30); }
.pd-horizon-multi_week .pd-meta-value { color: #a78bfa; }
.pd-horizon-macro      { border-color: rgba(251,191,36,0.30); }
.pd-horizon-macro      .pd-meta-value { color: #fbbf24; }

/* The rationale block (1 line "why this horizon") below the meta row */
.pd-horizon-why {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-size: 13px; line-height: 1.5;
  color: var(--text-muted);
  display: flex; align-items: flex-start; gap: 8px;
}
.pd-horizon-why-icon {
  font-size: 14px; color: var(--accent); line-height: 1.45;
}

/* ====================================================================
   SNAPSHOT-TO-SHARE — button on pair detail + modal with download options
   ==================================================================== */
.pd-topline-actions {
  display: inline-flex; gap: 8px; align-items: center;
}
.pd-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--text-muted); background: var(--bg-elev-2);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 10px; cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.pd-share-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--bg-hover); }
.pd-share-btn svg { stroke: currentColor; }

/* Modal scaffolding */
.share-backdrop {
  position: fixed; inset: 0;
  background: rgba(7,16,31,0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity 0.18s ease-out;
}
.share-backdrop.is-open { opacity: 1; }
.share-backdrop[hidden] { display: none; }

.share-modal {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(8px); opacity: 0;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1), opacity 0.18s ease-out;
}
.share-backdrop.is-open .share-modal { transform: translateY(0); opacity: 1; }

.share-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.share-head h3 {
  margin: 0; font-family: var(--display);
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
}
.share-pair-name {
  font-family: var(--mono); color: var(--accent); margin-left: 4px;
}
.share-close {
  background: transparent; border: none;
  color: var(--text-muted); font-size: 18px; cursor: pointer;
  width: 32px; height: 32px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t);
}
.share-close:hover { background: var(--bg-hover); color: var(--text); }

.share-body {
  padding: 20px 22px 22px;
  overflow-y: auto;
}

.share-preview {
  border-radius: 12px;
  overflow: hidden;
  background: #07101f;
  border: 1px solid var(--line);
  margin-bottom: 18px;
  aspect-ratio: 1200 / 630;
}
.share-svg {
  width: 100%; height: 100%;
  display: block;
  border: none;
  pointer-events: none;
}

.share-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.share-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  color: var(--text);
  background: var(--bg-elev-2);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 14px; cursor: pointer; text-decoration: none;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.share-action-btn:hover {
  background: var(--bg-hover); border-color: var(--accent);
  transform: translateY(-1px);
}
.share-action-primary {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(56,189,248,0.30);
}
.share-action-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.share-action-x {
  background: #000; color: #fff;
  border-color: #000;
}
.share-action-x:hover { background: #18181b; color: #fff; border-color: #18181b; }
[data-theme="light"] .share-action-x,
:root:not([data-theme="dark"]) .share-action-x { color: #fff; }

.share-fineprint {
  margin: 0; padding-top: 8px;
  font-size: 12px; color: var(--text-faint);
  text-align: center;
  border-top: 1px dashed var(--line);
}
.share-fineprint strong { color: var(--text-muted); font-weight: 600; }

@media (max-width: 600px) {
  .share-modal { width: 100%; }
  .share-actions { grid-template-columns: 1fr 1fr; }
}

/* ====================================================================
   PUSH NOTIFICATION TOGGLE — lives in account/personalisation
   ==================================================================== */
.push-toggle-row {
  margin: 14px 16px 0;
}
.push-toggle {
  display: inline-flex; align-items: center; gap: 14px;
  cursor: pointer;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 100%;
  transition: border-color var(--t);
}
.push-toggle:hover { border-color: var(--accent); }
.push-toggle input {
  position: absolute; opacity: 0; pointer-events: none;
}
.push-toggle-slider {
  width: 42px; height: 24px; border-radius: 999px;
  background: var(--bg-elev-3);
  border: 1px solid var(--line-strong);
  position: relative;
  flex-shrink: 0;
  transition: background var(--t), border-color var(--t);
}
.push-toggle-slider::after {
  content: ""; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-muted);
  top: 2px; left: 2px;
  transition: transform var(--t), background var(--t);
}
.push-toggle input:checked + .push-toggle-slider {
  background: var(--accent); border-color: var(--accent);
}
.push-toggle input:checked + .push-toggle-slider::after {
  transform: translateX(18px);
  background: #fff;
}
.push-toggle-label {
  display: flex; flex-direction: column; gap: 2px;
}
.push-toggle-title {
  font-family: var(--display);
  font-size: 14px; font-weight: 600; color: var(--text);
}
.push-toggle-sub {
  font-size: 12.5px; color: var(--text-muted);
}

.push-prefs {
  margin: 16px;
  padding: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.push-pref-row {
  display: grid; grid-template-columns: 1fr 200px 60px;
  align-items: center; gap: 14px;
}
.push-pref-label {
  font-size: 13.5px; color: var(--text); font-weight: 500;
}
.push-pref-row input[type="range"] {
  width: 100%; accent-color: var(--accent);
}
.push-pref-value {
  font-family: var(--mono);
  font-size: 14px; font-weight: 700;
  text-align: right; color: var(--accent);
}
.push-pref-explainer {
  margin: 10px 0 0 0;
  font-size: 12px; color: var(--text-faint); line-height: 1.55;
}

.push-meta {
  margin: 0 16px;
  min-height: 22px;
  font-family: var(--mono); font-size: 12px;
  color: var(--text-muted);
}

.push-status {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-warm);
  border-radius: 10px;
}
.push-status-icon { font-size: 20px; line-height: 1.4; }
.push-status-head {
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  color: var(--text); margin-bottom: 3px;
}
.push-status-sub {
  font-size: 12px; color: var(--text-muted); line-height: 1.55;
}
.push-status-sub code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px; color: var(--accent);
}

@media (max-width: 600px) {
  .push-pref-row { grid-template-columns: 1fr; gap: 10px; }
  .push-pref-value { text-align: left; }
}

/* ====================================================================
   MOBILE PASS — single comprehensive sweep below the natural tablet
   breakpoints (which most things already have). Covers everything the
   user can hit on a phone-sized viewport.

   Two breakpoints:
     ≤720px : phones in landscape, small tablets in portrait
     ≤480px : phones in portrait — the tightest reasonable target
   ==================================================================== */

@media (max-width: 720px) {
  /* Topbar: trim padding + hide the auxiliary stats so brand + actions fit */
  .app-topbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .topbar-stats { gap: 4px; }
  .status-pill { font-size: 10px; padding: 3px 7px; }
  .status-clock { font-size: 10.5px; padding: 3px 6px; }

  /* Stat cards row: single column */
  .stat-cards-row { grid-template-columns: 1fr !important; }

  /* Pair grid: single column with comfortable card spacing */
  .pair-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .pair-card { padding: 14px; }
  .pair-card-header { gap: 8px; }

  /* Section headers: less aggressive type */
  .section-block h2 { font-size: 17px; }

  /* Detail sections — reduce padding so content has room to breathe */
  .detail-section { padding: 16px 14px; }
  .detail-section-header h2 { font-size: 17px; }

  /* The driver fingerprint cells get squeezed — keep them readable */
  .driver-fingerprint { gap: 6px; }
  .driver-label { font-size: 9px; }

  /* Why-modal: take more screen */
  .why-modal { width: 100%; max-height: calc(100vh - 24px); }

  /* Briefing modal — full screen on phone */
  .briefing-modal { width: 100%; max-height: 100vh; border-radius: 0; }

  /* Calendar + events lists: tighter rows */
  .cal-item, .event { padding: 10px 12px; font-size: 12.5px; }

  /* Calibration table rows */
  .calib-table-pairs th, .calib-table-pairs td {
    padding: 8px 10px; font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  /* Smaller body font for phone */
  body { font-size: 14px; }

  /* Topbar brand goes very tight */
  .app-topbar { padding: 6px 10px; }
  .topbar-brand { font-size: 13.5px; }
  .live-pill { font-size: 9.5px; padding: 3px 7px; }
  .theme-toggle, .bell-btn { width: 28px; height: 28px; font-size: 12px; }

  /* Hide the secondary stats pills entirely on tiny screens — they're
     duplicated under the dashboard anyway. Brand + LIVE + bell + theme stay. */
  .topbar-stats .status-pill { display: none; }

  /* Pair card content — compact mode */
  .pair-card-header .pair-name { font-size: 19px; }
  .conviction-num { font-size: 15px; }
  .pair-summary { font-size: 12.5px; line-height: 1.5; }

  /* Pair detail hero — single-column, tighter */
  .pd-hero { padding: 14px; gap: 14px; }
  .pd-hero-chart { padding: 12px; min-height: 240px; }
  .pd-chart-canvas { min-height: 200px; }
  .pd-pair-name { font-size: 30px; }
  .pd-direction { font-size: 13px; padding: 6px 14px; }
  .pd-conviction-num { font-size: 18px; }
  .pd-cal-pct { font-size: 16px; }

  /* Pillar cards: tighter padding */
  .pillar-detail { padding: 12px; }
  .pillar-name { font-size: 13.5px; }
  .pillar-desc { font-size: 12.5px; }

  /* Why modal: less padding so content has more room */
  .why-modal .why-section { padding: 12px 14px; }
  .why-section h4 { font-size: 11px; }
  .why-news-headline { font-size: 13px; }

  /* Calendar / events on phone — single-column, less metadata visible */
  .event-meta { flex-wrap: wrap; gap: 6px; }
  .event-headline { font-size: 13px; line-height: 1.45; }

  /* Account pages — tighter cards */
  .change-pw-page { padding: 0 12px; }
  .change-pw-card .card-header { padding: 12px 14px; }
  .personal-section { padding: 16px 14px; }
  .personal-section-title { font-size: 14.5px; }

  /* Sidebar (when stacked above content) — trim padding */
  .app-sidebar { padding: 0; }

  /* Detail action buttons row — stack on phone */
  .pd-topline-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .pd-share-btn, .pd-refresh-btn { width: 100%; justify-content: center; }

  /* Conviction-cal hit-rate annotation — slightly smaller */
  .conviction-cal { font-size: 10.5px; }

  /* Best Trade carousel — keep readable */
  .stat-card-value { font-size: 22px; }

  /* CB Watch card */
  .cb-card { padding: 12px; }

  /* Trade journal table — let it scroll horizontally */
  .journal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Touch-target floor — interactive things need ≥40px on touch screens.
   Coarse pointer = touchscreen (works on every modern phone / iPad). */
@media (pointer: coarse) {
  .ghost-btn, .pd-share-btn, .pd-refresh-btn,
  .theme-toggle, .bell-btn, .tf-btn, .pd-tf-btn {
    min-height: 36px;
  }
  /* Make tap targets slightly more generous in calibration / track-record links */
  .calib-table-pairs a { padding: 4px 0; display: inline-block; }
}

/* ====================================================================
   BEST-TRADE CHANGE POPUP — fires on dashboard load when the headline
   top pair has changed since the user last acknowledged it.
   Lives in index.html.
   ==================================================================== */
.top-change-backdrop {
  position: fixed; inset: 0;
  background: rgba(7,16,31,0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 240;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.top-change-backdrop.is-open { opacity: 1; }
.top-change-backdrop[hidden] { display: none; }

.top-change-modal {
  width: min(640px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 28px 22px;
  box-shadow: var(--shadow-lg);
  transform: translateY(10px) scale(0.99);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1), opacity 0.18s ease-out;
}
.top-change-backdrop.is-open .top-change-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.top-change-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.top-change-tag {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(56,189,248,0.22);
}
.top-change-close {
  background: transparent; border: none;
  color: var(--text-muted); font-size: 18px; cursor: pointer;
  width: 32px; height: 32px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t);
}
.top-change-close:hover { background: var(--bg-hover); color: var(--text); }

.top-change-title {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 18px 0; color: var(--text);
}

.top-change-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 20px;
}
.top-change-pill {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
}
.top-change-pill-label {
  font-size: 10.5px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.top-change-pill-pair {
  font-family: var(--display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--text);
}
.top-change-pill-meta {
  font-family: var(--mono);
  font-size: 12.5px; color: var(--text-muted); font-weight: 600;
}
.top-change-pill.dir-long .top-change-pill-meta    { color: var(--long); }
.top-change-pill.dir-short .top-change-pill-meta   { color: var(--short); }
.top-change-pill.dir-neutral .top-change-pill-meta { color: var(--neutral); }
.top-change-pill.dir-long  { border-left: 3px solid var(--long); }
.top-change-pill.dir-short { border-left: 3px solid var(--short); }
.top-change-pill.dir-neutral { border-left: 3px solid var(--neutral); }

.top-change-arrow {
  align-self: center;
  font-size: 22px; color: var(--text-muted); font-weight: 600;
}

.top-change-body {
  margin-bottom: 18px;
}
.top-change-summary {
  margin: 0 0 14px 0;
  font-size: 14px; line-height: 1.6; color: var(--text);
  padding: 12px 14px;
  background: var(--bg-elev-2);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.top-change-pillars-label {
  font-family: var(--display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.top-change-pillars {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.top-change-pillars li {
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.top-change-pillar-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.top-change-pillar-head strong {
  font-family: var(--display);
  font-size: 13.5px; font-weight: 700; color: var(--text);
}
.top-change-pillar-status {
  display: inline-flex;
  padding: 1px 7px; border-radius: 4px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
}
.top-change-pillar-status.pillar-intact    { background: rgba(34,197,94,0.13);  color: var(--long); }
.top-change-pillar-status.pillar-confirmed { background: rgba(34,197,94,0.18);  color: var(--long); }
.top-change-pillar-status.pillar-weakened  { background: rgba(245,158,11,0.16); color: var(--accent-warm); }
.top-change-pillar-status.pillar-broken    { background: rgba(248,113,113,0.16); color: var(--short); }
.top-change-pillar-desc {
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
}

.top-change-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.top-change-dismiss, .top-change-open {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  padding: 10px 18px; border-radius: 10px;
  cursor: pointer; text-decoration: none;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.top-change-dismiss {
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  color: var(--text);
}
.top-change-dismiss:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.top-change-open {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(56,189,248,0.30);
}
.top-change-open:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .top-change-modal { padding: 22px 18px 18px; }
  .top-change-flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .top-change-arrow {
    transform: rotate(90deg);
    align-self: center;
  }
  .top-change-actions { flex-direction: column-reverse; }
  .top-change-dismiss, .top-change-open { width: 100%; }
}


/* ====================================================================
   G7 MAJORS LIVE TICKER — thin scrolling marquee, pair + price only.
   Doubled track + translateX(0 → -50%) = seamless loop.
   Outer band uses display:block (not flex) so the inner wrap can
   actually be 100% wide and let inline content overflow off-screen.
   ==================================================================== */

.fx-ticker {
  position: relative;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  height: 36px;
  display: block;                /* not flex — flex would shrink children */
  width: 100%;
}
.fx-ticker-loading {
  width: 100%; text-align: center;
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  letter-spacing: 0.02em;
  line-height: 36px;
}
.fx-ticker-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  /* fade the edges so items slide in/out without a hard cut */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.fx-ticker-track {
  display: inline-flex;          /* sized to content, wider than viewport */
  flex-wrap: nowrap;             /* never break to a new line */
  align-items: center;
  gap: 28px;
  height: 100%;
  padding-left: 24px;
  white-space: nowrap;
  /* 28s = brisker tape feel. NYSE-wall tape moves fast; people scan, not read. */
  animation: fx-ticker-scroll 28s linear infinite;
  will-change: transform;
}
.fx-ticker-wrap:hover .fx-ticker-track {
  animation-play-state: paused;
}
@keyframes fx-ticker-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }   /* doubled track loops here */
}
.fx-ticker-item {
  display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--text);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  flex-shrink: 0;                /* preserve item width — never collapse */
  transition: background var(--t);
}
.fx-ticker-item:hover { background: var(--bg-hover); }

/* NYSE-style direction coloring. The pair label stays neutral for scanability;
   the PRICE picks up the color so the eye sees a green/red wall of numbers,
   not green/red wall of labels. Direction class is applied to the parent
   .fx-ticker-item so we can also tint the hover background subtly. */
.fx-ticker-pair {
  font-family: var(--display);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-muted);
}
.fx-ticker-price {
  font-family: var(--mono);
  font-size: 13px; font-weight: 600;
  color: var(--text);
  transition: color 0.4s ease;          /* smooth fade when patched */
}
.fx-ticker-item-up   .fx-ticker-price { color: var(--long); }
.fx-ticker-item-down .fx-ticker-price { color: var(--short); }
.fx-ticker-item-flat .fx-ticker-price { color: var(--text-muted); }

/* Tiny direction caret AFTER the price — a single character cue, matches the
   NYSE-tape "▲ 4.32 / ▼ 4.30" convention without needing to show the % itself. */
.fx-ticker-item-up   .fx-ticker-price::after { content: " ▲"; font-size: 9px; opacity: 0.7; }
.fx-ticker-item-down .fx-ticker-price::after { content: " ▼"; font-size: 9px; opacity: 0.7; }

@media (max-width: 720px) {
  .fx-ticker, .fx-ticker-loading { height: 32px; line-height: 32px; }
  .fx-ticker-track { gap: 18px; padding-left: 12px; animation-duration: 45s; }
  .fx-ticker-pair  { font-size: 10.5px; }
  .fx-ticker-price { font-size: 12px; }
}

/* ====================================================================
   GOOGLE OAUTH CONFIRM-SIGNUP PAGE
   Shown to first-time Google sign-ins so they explicitly opt into having
   an account created. Prevents random Google users from silently spinning
   up accounts on an invite-only tool.
   ==================================================================== */
.google-confirm-wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 80px 24px 64px;
}
.google-confirm-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px 36px 32px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.google-confirm-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  margin: 0 auto 22px;
}
.google-confirm-title {
  font-family: var(--display);
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 10px 0;
  color: var(--text);
}
.google-confirm-sub {
  font-size: 14.5px; line-height: 1.55; color: var(--text-muted);
  margin: 0 0 24px 0;
}
.google-confirm-identity {
  display: inline-block;
  padding: 14px 22px;
  margin-bottom: 28px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 260px;
}
.google-confirm-name {
  font-family: var(--display);
  font-size: 16px; font-weight: 600;
  color: var(--text);
}
.google-confirm-email {
  font-family: var(--mono);
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  margin-top: 3px;
}
.google-confirm-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 22px;
}
.google-confirm-btn-primary,
.google-confirm-btn-secondary {
  width: 100%;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
.google-confirm-finepr {
  margin: 0;
  font-size: 12px; line-height: 1.55;
  color: var(--text-faint);
  text-align: center;
}
.google-confirm-finepr a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.google-confirm-finepr a:hover { color: var(--accent); }

/* ====================================================================
   LANDING PAGE EXPANSION — trust strip · how-it-works · sample card · FAQ
   · 3-col footer. Adds the "feels like a real product" sections that
   theweightclinic.co.uk has, but with FX-honest content (no fake
   regulation claim — explicit "Not FCA-regulated · info only").
   ==================================================================== */

/* ---- Trust strip (scrolling band under the topbar) ---- */
.trust-strip {
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  height: 38px;
  display: flex; align-items: center;
}
.trust-strip-track {
  display: inline-flex; align-items: center;
  gap: 32px; padding-left: 24px;
  white-space: nowrap;
  animation: trust-strip-scroll 60s linear infinite;
  will-change: transform;
}
.trust-strip:hover .trust-strip-track { animation-play-state: paused; }
@keyframes trust-strip-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.trust-strip-item {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.trust-strip-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.trust-strip-dot-ok   { background: var(--long); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.trust-strip-dot-warn { background: var(--accent-warm); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }

/* ---- How it works ---- */
.landing-howit {
  padding: 64px 36px;
  border-top: 1px solid var(--line);
}
.landing-howit-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 1140px; margin: 0 auto;
  counter-reset: howit;
}
.landing-howit-step {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px 22px;
  position: relative;
  transition: transform var(--t), border-color var(--t);
}
.landing-howit-step:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.landing-howit-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--display);
  font-size: 14px; font-weight: 700;
  border: 1px solid rgba(56,189,248,0.22);
  margin-bottom: 14px;
}
.landing-howit-step h3 {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 6px 0; color: var(--text);
}
.landing-howit-step p {
  font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 0;
}

/* ---- Sample bias card section ---- */
.landing-sample {
  padding: 64px 36px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent 0%, var(--bg-elev) 50%, transparent 100%);
}
.landing-sample-wrap {
  max-width: 1040px; margin: 0 auto;
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
}
.landing-sample-card {
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-md);
  position: relative;
  pointer-events: none;       /* it's a preview, not interactive */
  border-left: 3px solid var(--long);   /* direction tint matches LONG */
}
.landing-sample-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.landing-sample-pair-line {
  display: inline-flex; align-items: center; gap: 8px;
}
/* Dual-flag composite (matches .pair-flag on the dashboard pair cards):
   big 22px base flag, small 12px quote flag tucked into the bottom-right
   corner with a halo cut-out so it reads as overlapping rather than collided. */
.landing-sample-flag-wrap {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.landing-sample-flag-base {
  display: block;
  width: 22px; height: 22px; border-radius: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.22);
}
.landing-sample-flag-quote {
  position: absolute; right: -3px; bottom: -3px;
  width: 12px; height: 12px; border-radius: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 0 0 1.5px var(--bg-elev);
}
.landing-sample-card h3 {
  font-family: var(--mono);
  font-size: 16px; font-weight: 700;
  color: var(--text); margin: 0;
}
.landing-sample-badge {
  font-family: var(--display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  padding: 5px 12px; border-radius: 999px;
}
.landing-sample-badge-long {
  background: var(--long-soft); color: var(--long);
  border: 1px solid rgba(34,197,94,0.30);
}
.landing-sample-conv-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
}
.landing-sample-bar {
  flex: 1; height: 8px; border-radius: 4px;
  background: var(--bg-elev-2);
  overflow: hidden;
}
.landing-sample-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--long) 0%, #4ade80 100%);
  border-radius: 4px;
}
.landing-sample-conv {
  font-family: var(--mono);
  font-size: 15px; font-weight: 700; color: var(--text);
  min-width: 38px; text-align: right;
}
.landing-sample-cal {
  font-size: 11px; color: var(--accent);
  font-family: var(--mono);
  margin-bottom: 14px;
}
.landing-sample-summary {
  font-size: 13px; line-height: 1.55; color: var(--text);
  margin: 0 0 14px 0;
}
.landing-sample-pillars {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.landing-sample-pillar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--neutral);
  border-radius: 6px;
}
.landing-sample-pillar-confirmed { border-left-color: var(--long); }
.landing-sample-pillar-intact    { border-left-color: var(--accent); }
.landing-sample-pillar-weakened  { border-left-color: var(--accent-warm); }
.landing-sample-pillar-name {
  font-family: var(--display);
  font-size: 12.5px; font-weight: 600; color: var(--text);
}
.landing-sample-pillar-tag {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.landing-sample-pillar-confirmed .landing-sample-pillar-tag { color: var(--long); }
.landing-sample-pillar-intact .landing-sample-pillar-tag    { color: var(--accent); }
.landing-sample-pillar-weakened .landing-sample-pillar-tag  { color: var(--accent-warm); }
.landing-sample-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-faint);
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.landing-sample-horizon {
  background: var(--accent-soft); color: var(--accent);
  padding: 3px 8px; border-radius: 999px;
  font-family: var(--mono); font-weight: 600;
}
.landing-sample-cta h3 {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 10px 0; color: var(--text);
}
.landing-sample-cta p {
  font-size: 14.5px; color: var(--text-muted); line-height: 1.55;
  margin: 0 0 18px 0;
}

@media (max-width: 760px) {
  .landing-sample-wrap { grid-template-columns: 1fr; gap: 24px; }
  .landing-howit { padding: 48px 18px; }
  .landing-sample { padding: 48px 18px; }
}

/* ---- FAQ ---- */
.landing-faq {
  padding: 64px 36px;
  border-top: 1px solid var(--line);
}
.landing-faq-list {
  max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;
}
.landing-faq-item {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color var(--t);
}
.landing-faq-item:hover { border-color: var(--line-strong); }
.landing-faq-item[open] { border-color: var(--accent); background: var(--bg-elev-2); }
.landing-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--display);
  font-size: 14.5px; font-weight: 600;
  color: var(--text);
  display: flex; justify-content: space-between; align-items: center;
  user-select: none;
}
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 18px; font-weight: 700;
  color: var(--text-muted);
  transition: transform var(--t), color var(--t);
}
.landing-faq-item[open] summary::after {
  content: "−"; color: var(--accent);
}
.landing-faq-item p {
  margin: 0; padding: 0 20px 18px;
  font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
}
.landing-faq-item p strong { color: var(--text); font-weight: 600; }
.landing-faq-item p a { color: var(--accent); }

/* ---- 3-column footer (Product / Company / Legal) ---- */
.landing-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 12px 0 6px;
  padding: 18px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.landing-footer-col {
  display: flex; flex-direction: column; gap: 6px;
}
.landing-footer-col-head {
  font-family: var(--display);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.landing-footer-col a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 2px 0;
}
.landing-footer-col a:hover { color: var(--accent); }

@media (max-width: 600px) {
  .landing-footer-cols { grid-template-columns: 1fr 1fr; gap: 18px; }
  .landing-howit-grid { grid-template-columns: 1fr; }
}

/* ---- Contact page mailto pill ---- */
.contact-mailto {
  display: inline-block;
  font-family: var(--mono);
  font-size: 16px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(56,189,248,0.22);
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  margin: 4px 0;
  transition: background var(--t), border-color var(--t);
}
.contact-mailto:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

/* ====================================================================
   PRICING PAGE — 3 cards (Free trial / Pro £15 / Desk £49), monthly/annual
   toggle, comparison table, FAQ. Centre card "Most popular" is visually
   the featured one (raised, accent border). Toggle is pure CSS — :checked
   on the annual radio swaps prices via data-* attributes.
   ==================================================================== */

.pricing-page {
  max-width: 1100px; margin: 0 auto;
  padding: 56px 36px 80px;
  color: var(--text);
}
.pricing-head {
  text-align: center; max-width: 760px; margin: 0 auto 36px;
}
.pricing-head h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700; letter-spacing: -0.025em;
  margin: 14px 0 12px 0;
}
.pricing-lede {
  font-size: 16px; line-height: 1.6; color: var(--text-muted);
  margin: 0 0 24px 0;
}
.pricing-beta-banner {
  display: inline-flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  background: var(--accent-soft);
  border: 1px solid rgba(56,189,248,0.30);
  border-radius: 12px;
  font-size: 13.5px; line-height: 1.55; color: var(--text);
  text-align: left;
  margin: 0 auto 28px;
  max-width: 640px;
}
.pricing-beta-banner strong { color: var(--accent); }
.pricing-beta-icon { font-size: 18px; line-height: 1.4; }

.pricing-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-top: 4px;
}
.pricing-toggle input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pricing-toggle label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.pricing-toggle input[type="radio"]:checked + label {
  background: var(--accent); color: #fff;
}
.pricing-toggle-save {
  font-size: 10px; padding: 2px 7px;
  background: var(--long-soft); color: var(--long);
  border-radius: 999px; letter-spacing: 0.04em;
}
.pricing-toggle input[type="radio"]:checked + label .pricing-toggle-save {
  background: rgba(255,255,255,0.20); color: #fff;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 40px 0 56px;
  align-items: start;
}
/* 2-col variant — Pro + Desk only (no free trial; too gameable on email signup).
   Centred + tighter so two cards don't sprawl across full width on desktop. */
.pricing-grid-2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin-left: auto; margin-right: auto;
}
.pricing-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px 26px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.pricing-card:hover {
  transform: translateY(-2px); border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.pricing-card-featured {
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--bg-elev) 0%, rgba(56,189,248,0.04) 100%);
  transform: translateY(-8px);
  box-shadow: 0 10px 32px rgba(56,189,248,0.18);
}
.pricing-card-featured:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 38px rgba(56,189,248,0.24);
}
.pricing-card-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(56,189,248,0.30);
}
.pricing-card-head { margin-bottom: 18px; }
.pricing-card-name {
  font-family: var(--display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 4px 0;
  color: var(--text);
}
.pricing-card-tagline {
  font-size: 13px; color: var(--text-muted); margin: 0;
}
.pricing-card-price {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--line);
}
.pricing-card-amount {
  font-family: var(--display);
  font-size: 44px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--text); line-height: 1;
}
.pricing-card-period {
  font-family: var(--mono);
  font-size: 13px; color: var(--text-muted);
  font-weight: 500;
}

/* Annual toggle — swap content via data-annual attr when annual radio checked */
body:has(#pp-annual:checked) .pricing-card-amount[data-annual] { font-size: 0; }
body:has(#pp-annual:checked) .pricing-card-amount[data-annual]::before {
  content: attr(data-annual);
  font-size: 44px;
}
body:has(#pp-annual:checked) .pricing-card-period[data-annual] { font-size: 0; }
body:has(#pp-annual:checked) .pricing-card-period[data-annual]::before {
  content: attr(data-annual);
  font-size: 13px;
}

.pricing-features {
  list-style: none; padding: 0; margin: 0 0 22px 0;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.pricing-features li {
  font-size: 13.5px; line-height: 1.5; color: var(--text);
}
.pricing-features-prev {
  font-weight: 600; color: var(--text-muted) !important;
  padding-bottom: 4px; border-bottom: 1px dashed var(--line);
  margin-bottom: 4px;
}

.pricing-cta {
  display: block; text-align: center;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: var(--display); font-size: 14.5px; font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.pricing-cta-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 18px rgba(56,189,248,0.28);
}
.pricing-cta-primary:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(56,189,248,0.38);
}
.pricing-cta-secondary {
  background: var(--bg-elev-2); color: var(--text);
  border: 1px solid var(--line-strong);
}
.pricing-cta-secondary:hover {
  background: var(--bg-hover); border-color: var(--accent);
}
.pricing-card-fine {
  margin: 12px 0 0 0; text-align: center;
  font-size: 11.5px; color: var(--text-faint);
}

/* === Comparison table — grouped, with rich column headers === */
.pricing-compare {
  margin: 64px 0;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.pricing-compare h2 {
  text-align: center; font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px 0;
}
.pricing-compare-sub {
  text-align: center; font-size: 14px; color: var(--text-muted);
  margin: 0 0 28px 0; max-width: 580px; margin-left: auto; margin-right: auto;
}
.pricing-compare-wrap {
  background: var(--bg-elev);
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow-x: auto;
  box-shadow: var(--shadow-md);
}
.pricing-compare-table {
  width: 100%; border-collapse: collapse;
  min-width: 580px;
}

/* Column headers — feature name (60% width) + two tier columns (20% each) */
.pricing-compare-table thead th {
  padding: 22px 18px 18px;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.pcc-feat { width: 50%; }
.pcc-col {
  width: 25%; text-align: center !important;
  position: relative;
}
.pcc-col-name {
  font-family: var(--display);
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 4px;
}
.pcc-col-price {
  font-family: var(--display);
  font-size: 22px; font-weight: 700; color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.pcc-col-price span {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}
.pcc-col-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 10px rgba(56,189,248,0.30);
}
.pcc-col-tag-spacer {
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  user-select: none;
}
/* Pro column subtle accent — matches the "Most popular" framing on the cards */
.pcc-col-featured {
  background: linear-gradient(180deg, rgba(56,189,248,0.10) 0%, rgba(56,189,248,0.04) 100%) !important;
  border-bottom: 2px solid var(--accent) !important;
  position: relative;
}

/* Body rows */
.pricing-compare-table tbody td {
  padding: 14px 18px;
  font-size: 13.5px; line-height: 1.4;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.pricing-compare-table tbody td:first-child {
  color: var(--text);
}
.pricing-compare-table tbody td:nth-child(2),
.pricing-compare-table tbody td:nth-child(3) {
  text-align: center;
  width: 25%;
}
/* Pro column body cells — keep the subtle highlight all the way down */
.pricing-compare-table tbody tr td:nth-child(2) {
  background: rgba(56,189,248,0.04);
}
.pricing-compare-table tbody tr:hover td { background: var(--bg-hover); }
.pricing-compare-table tbody tr:hover td:nth-child(2) {
  background: rgba(56,189,248,0.08);
}
.pricing-compare-table tbody tr:last-child td { border-bottom: none; }

/* Group section rows — visually break up Core / Power / Team */
.pcc-group td {
  padding: 18px 18px 8px !important;
  background: transparent !important;
  border-bottom: none !important;
}
.pcc-group-label {
  display: inline-block;
  font-family: var(--display);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  width: 100%;
}

/* Cell content treatments */
.pcc-yes {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--long-soft);
  color: var(--long);
  font-weight: 700; font-size: 13px;
  border: 1px solid rgba(34,197,94,0.22);
}
.pcc-no {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 16px;
  user-select: none;
}
.pcc-num {
  font-family: var(--mono);
  font-size: 13.5px; font-weight: 700;
  color: var(--text);
  padding: 4px 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.pcc-num-strong { color: var(--accent); border-color: rgba(56,189,248,0.30); }

/* === Landing-page pricing teaser (between honest + final CTA) === */
.landing-pricing {
  padding: 64px 36px;
  border-top: 1px solid var(--line);
}
.landing-pricing-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin: 36px auto 18px;
}
.landing-pricing-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px 22px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.landing-pricing-card:hover {
  transform: translateY(-2px); border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.landing-pricing-card-featured {
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--bg-elev) 0%, rgba(56,189,248,0.04) 100%);
  box-shadow: 0 8px 24px rgba(56,189,248,0.15);
}
.landing-pricing-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-family: var(--display); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(56,189,248,0.30);
}
.landing-pricing-name {
  font-family: var(--display);
  font-size: 18px; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
}
.landing-pricing-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.landing-pricing-amount {
  font-family: var(--display);
  font-size: 36px; font-weight: 700; color: var(--text);
  letter-spacing: -0.02em; line-height: 1;
}
.landing-pricing-period {
  font-family: var(--mono);
  font-size: 12.5px; color: var(--text-muted);
}
.landing-pricing-features {
  list-style: none; padding: 0; margin: 0 0 18px 0;
  display: flex; flex-direction: column; gap: 7px;
  flex: 1;
}
.landing-pricing-features li {
  font-size: 13px; line-height: 1.4; color: var(--text);
  position: relative; padding-left: 18px;
}
.landing-pricing-features li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--long); font-weight: 700; font-size: 13px;
}
.landing-pricing-features li:first-child:has-text("Everything")::before { content: "↑"; color: var(--accent); }
.landing-pricing-cta { width: 100%; text-align: center; }
.landing-pricing-foot {
  text-align: center; font-size: 13px; color: var(--text-muted);
  margin: 18px 0 0 0;
}
.landing-pricing-foot a { color: var(--accent); text-decoration: none; font-weight: 600; }
.landing-pricing-foot a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .landing-pricing { padding: 48px 18px; }
  .landing-pricing-grid { grid-template-columns: 1fr; }
}

.pricing-faq { margin: 56px 0 24px; }
.pricing-faq h2 {
  text-align: center; font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 28px 0;
}

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 18px; }
  .pricing-card-featured { transform: none; }
  .pricing-card-featured:hover { transform: translateY(-2px); }
}
@media (max-width: 600px) {
  .pricing-page { padding: 40px 18px 60px; }
  .pricing-toggle { width: 100%; justify-content: center; }
  .pricing-compare-table th,
  .pricing-compare-table td { padding: 10px 12px; font-size: 12.5px; }
}

/* ====================================================================
   PRICING v2 — ONE PLAN, THREE BILLING PERIODS
   ==================================================================== */

.billing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 900px;
  margin: 36px auto 56px;
  align-items: stretch;
}
.billing-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 22px 22px;
  display: flex; flex-direction: column;
  text-align: center;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.billing-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.billing-card-featured {
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--bg-elev) 0%, rgba(56,189,248,0.06) 100%);
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(56,189,248,0.20);
}
.billing-card-featured:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 34px rgba(56,189,248,0.28);
}
.billing-card-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-family: var(--display);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(56,189,248,0.30);
  white-space: nowrap;
}
.billing-card-name {
  font-family: var(--display);
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.billing-card-price {
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  margin-bottom: 12px;
}
.billing-card-total {
  font-family: var(--display);
  font-size: 44px; font-weight: 700; line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text);
}
.billing-card-per {
  font-family: var(--mono);
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
}
.billing-card-meta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  font-size: 12.5px; color: var(--text-muted);
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line);
  min-height: 36px;
}
.billing-card-effective {
  font-family: var(--mono); font-weight: 600;
  color: var(--text);
}
.billing-card-save {
  display: inline-block;
  background: var(--long-soft); color: var(--long);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,0.22);
}
.billing-cta {
  display: block; width: 100%;
  padding: 11px 18px;
  border-radius: 10px;
  text-align: center;
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  text-decoration: none;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  margin-bottom: 10px;
}
.billing-cta-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 16px rgba(56,189,248,0.28);
}
.billing-cta-primary:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(56,189,248,0.38);
}
.billing-cta-secondary {
  background: var(--bg-elev-2); color: var(--text);
  border: 1px solid var(--line-strong);
}
.billing-cta-secondary:hover {
  background: var(--bg-hover); border-color: var(--accent);
}
.billing-card-fineprint {
  font-size: 11px; color: var(--text-faint);
  font-family: var(--mono); letter-spacing: 0.04em;
}

.included-section {
  margin: 64px 0 40px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.included-section h2 {
  text-align: center;
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 8px 0;
}
.included-sub {
  text-align: center; font-size: 14px; color: var(--text-muted);
  margin: 0 0 36px 0;
  max-width: 580px; margin-left: auto; margin-right: auto;
}
.included-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1040px; margin: 0 auto;
}
.included-group {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 18px;
  transition: border-color var(--t), box-shadow var(--t);
}
.included-group:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.included-group-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 14px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.included-group-icon { font-size: 18px; line-height: 1; }
.included-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.included-list li {
  position: relative; padding-left: 22px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--text);
}
.included-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 1px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--long-soft); color: var(--long);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  border: 1px solid rgba(34,197,94,0.22);
}

.landing-billing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 820px;
  margin: 36px auto 18px;
}
.landing-billing-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 16px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  text-align: center;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.landing-billing-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.landing-billing-card-featured {
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--bg-elev) 0%, rgba(56,189,248,0.06) 100%);
}
.landing-billing-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-family: var(--display);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(56,189,248,0.30);
  white-space: nowrap;
}
.landing-billing-name {
  font-family: var(--display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.landing-billing-price {
  font-family: var(--display);
  font-size: 32px; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 8px;
}
.landing-billing-price span {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  color: var(--text-muted);
  margin-left: 3px;
}
.landing-billing-meta {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .billing-grid { grid-template-columns: 1fr; max-width: 420px; }
  .billing-card-featured { transform: none; }
  .billing-card-featured:hover { transform: translateY(-2px); }
  .landing-billing-grid { grid-template-columns: 1fr; max-width: 360px; }
  .included-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Cookie consent banner
   Sticky bar at the bottom of every page. Hidden by default (the partial sets
   `hidden`); the partial's inline JS removes the attribute if the user hasn't
   acknowledged yet. Dismissal animates a small slide-out before final hide.
   ============================================================================ */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9100;                     /* above modals' backdrop (most use 9000) */
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
  padding: 14px 18px;
  font-family: var(--display);
  animation: cookieSlideIn 380ms cubic-bezier(.2,.7,.3,1.05) both;
}
.cookie-banner.cookie-banner-leaving {
  animation: cookieSlideOut 220ms ease-in both;
}
.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
}
.cookie-banner-icon {
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}
.cookie-banner-text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.cookie-banner-link {
  color: var(--accent);
  font-weight: 500;
  margin-left: 4px;
  white-space: nowrap;
}
.cookie-banner-link:hover { color: var(--accent-strong); }
.cookie-banner-btn {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  white-space: nowrap;
}
.cookie-banner-btn:hover { background: var(--accent-strong); transform: translateY(-1px); }
.cookie-banner-btn:active { transform: translateY(0); }
@keyframes cookieSlideIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cookieSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(28px); }
}
@media (max-width: 640px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; }
  .cookie-banner-inner { flex-wrap: wrap; gap: 10px; }
  .cookie-banner-text { font-size: 12.5px; min-width: 0; flex-basis: 100%; }
  .cookie-banner-icon { font-size: 18px; }
  .cookie-banner-btn { width: 100%; padding: 10px; }
}

/* ============================================================================
   First-login onboarding modal
   Renders ONLY on first dashboard load (when user.onboarded_at is NULL on the
   server). Dismissal POSTs /api/onboarding/dismiss which stamps the column so
   it never fires again. Style matches the briefing modal pattern.
   ============================================================================ */
.onboarding-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9200;                     /* above cookie banner */
  background: rgba(7, 16, 31, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: onboardBackdropIn 220ms ease-out;
}
.onboarding-backdrop.is-closing {
  animation: onboardBackdropOut 200ms ease-in forwards;
}
@keyframes onboardBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes onboardBackdropOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.onboarding-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: linear-gradient(165deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 32px 32px 28px;
  box-shadow: 0 32px 72px rgba(0,0,0,0.55), 0 0 0 1px rgba(56,189,248,0.08);
  animation: onboardModalIn 320ms cubic-bezier(.2,.7,.3,1.05);
}
@keyframes onboardModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.onboarding-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--t), color var(--t);
}
.onboarding-close:hover { background: var(--bg-hover); color: var(--text); }
.onboarding-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.onboarding-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.18;
}
.onboarding-lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 22px;
}
.onboarding-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.onboarding-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 14px;
  background: rgba(56,189,248,0.05);
  border: 1px solid rgba(56,189,248,0.18);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.onboarding-steps li strong { color: var(--text); font-weight: 600; }
.onboarding-step-num {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.onboarding-actions {
  display: flex;
  justify-content: flex-end;
}
.onboarding-cta {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
  box-shadow: 0 4px 16px rgba(56,189,248,0.32);
}
.onboarding-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(56,189,248,0.45); }
.onboarding-cta:active { transform: translateY(0); }
@media (max-width: 540px) {
  .onboarding-modal { padding: 24px 20px 22px; border-radius: 14px; }
  .onboarding-title { font-size: 22px; }
  .onboarding-tag { font-size: 10px; }
  .onboarding-steps li { padding: 12px; font-size: 13px; }
  .onboarding-cta { width: 100%; }
}

/* ============================================================================
   Branded error pages (404 / 500)
   Standalone — does NOT extend base.html, so its layout is self-contained.
   Centered card with a code + title + message + dual CTAs.
   ============================================================================ */
.error-body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image: var(--bg-grad);
  color: var(--text);
  font-family: var(--display);
  display: flex;
  flex-direction: column;
}
.error-page {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.error-card {
  width: 100%;
  max-width: 520px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 44px 36px 36px;
  box-shadow: 0 24px 56px rgba(0,0,0,0.4);
  text-align: center;
}
.error-code {
  font-family: var(--mono);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 8px;
}
.error-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 14px;
}
.error-message {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 28px;
}
.error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.error-btn {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: transform var(--t), background var(--t), border-color var(--t);
  text-decoration: none;
  display: inline-block;
}
.error-btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(56,189,248,0.32);
}
.error-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(56,189,248,0.45); color: #ffffff; }
.error-btn-secondary {
  color: var(--text);
  background: var(--bg-elev-2);
}
.error-btn-secondary:hover { background: var(--bg-hover); border-color: var(--line-strong); color: var(--text); }
.error-footnote {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}
.error-footnote a { color: var(--accent); }
.error-footnote a:hover { color: var(--accent-strong); }
@media (max-width: 480px) {
  .error-card { padding: 32px 22px 26px; }
  .error-code { font-size: 52px; }
  .error-title { font-size: 22px; }
  .error-actions { flex-direction: column; }
  .error-btn { width: 100%; }
}

/* ============================================================================
   Economic-indicator pages (Trading-Economics-style detail + browse-all)
   ============================================================================ */
.ind-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 0 32px;
}

/* Hero block — meta row, name + headline value, description */
.ind-hero {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px 24px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.ind-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
}
.ind-breadcrumb {
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 4px;
}
.ind-breadcrumb:hover { color: var(--accent); }
.ind-hero-ccy {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 3px 9px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ind-hero-imp {
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 10px;
}
.ind-hero-imp-high { background: rgba(239,68,68,0.14); color: #ef4444; }
.ind-hero-imp-medium { background: rgba(245,158,11,0.14); color: #f59e0b; }
.ind-hero-imp-low { background: rgba(148,163,184,0.14); color: var(--text-muted); }
.ind-hero-freq {
  color: var(--text-faint);
  text-transform: lowercase;
  letter-spacing: 0.06em;
}
.ind-hero-titlerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}
.ind-hero-titles { flex: 1 1 auto; min-width: 0; }
.ind-hero-name {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.18;
}
.ind-hero-sub {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.ind-hero-value {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.ind-hero-value-num {
  display: block;
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1.05;
}
.ind-hero-value-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ind-hero-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 78ch;
}

/* Chart panel */
.ind-chart-panel { margin-bottom: 18px; }
.ind-chart-wrap {
  padding: 14px 18px 18px;
  background: var(--bg-elev);
}
.ind-chart {
  width: 100%;
  height: 360px;
}

/* Two-column grid */
.ind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.ind-panel .panel-body,
.ind-panel > ul,
.ind-panel > .ind-cal-group { padding: 0; }
@media (max-width: 880px) {
  .ind-grid { grid-template-columns: 1fr; }
  .ind-chart { height: 280px; }
  .ind-hero-titlerow { flex-direction: column; }
  .ind-hero-value { text-align: left; }
}

/* Recent prints list */
.ind-prints {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ind-print-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  transition: background var(--t);
}
.ind-print-row:last-child { border-bottom: none; }
.ind-print-row:hover { background: var(--bg-elev-2); }
.ind-print-row:first-child .ind-print-value { color: var(--accent); font-weight: 700; }
.ind-print-period { color: var(--text-muted); font-weight: 500; letter-spacing: 0.02em; }
.ind-print-value { color: var(--text); font-weight: 600; }

/* Calendar mini-list inside the indicator detail page */
.ind-cal-group { padding: 10px 0; }
.ind-cal-group + .ind-cal-group { border-top: 1px solid var(--line); }
.ind-cal-group-label {
  padding: 6px 18px 8px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.ind-cal-row {
  display: grid;
  grid-template-columns: 10px 110px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.ind-cal-row:last-child { border-bottom: none; }
.ind-cal-row-upcoming { background: rgba(56,189,248,0.04); }
.ind-cal-row.imp-high { background: rgba(239,68,68,0.06); }
.ind-cal-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-faint);
  justify-self: center;
}
.ind-cal-row.imp-high .ind-cal-dot { background: #ef4444; }
.ind-cal-row.imp-medium .ind-cal-dot { background: #f59e0b; }
.ind-cal-time {
  font-family: var(--mono);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
}
.ind-cal-event {
  color: var(--text);
  font-size: 12px;
  min-width: 0;
}
.ind-cal-figs {
  display: flex;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.ind-cal-fig {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(148,163,184,0.04);
}
.ind-cal-fig-actual {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(56,189,248,0.3);
  font-weight: 700;
}

/* Source footnote */
.ind-source-foot {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  padding: 10px 0;
}
.ind-source-foot a { color: var(--accent); }
.ind-source-foot a:hover { color: var(--accent-strong); }
.ind-source-foot code {
  font-family: var(--mono);
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
}

/* === Indicators index (browse-all) === */
.ind-index {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 0 32px;
}
.ind-index-head {
  margin-bottom: 22px;
}
.ind-index-head h1 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 6px;
}
.ind-index-lede {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 72ch;
}
.ind-index-section { margin-bottom: 24px; }
.ind-index-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.ind-index-section-ccy {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.ind-index-section-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
.ind-index-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.ind-index-card {
  display: block;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform var(--t), border-color var(--t), background var(--t);
  position: relative;
}
.ind-index-card:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: var(--bg-elev-2);
}
.ind-index-card-dot {
  position: absolute;
  top: 14px; right: 14px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
}
.ind-index-card.imp-high .ind-index-card-dot { background: #ef4444; }
.ind-index-card.imp-medium .ind-index-card-dot { background: #f59e0b; }
.ind-index-card-name {
  display: block;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  padding-right: 20px;
  line-height: 1.3;
}
.ind-index-card-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Calendar row → indicator link affordance: when a row in the main calendar
   has been wrapped in an <a class="cal-row">, the same grid + hover applies
   but with a pointer cursor and a subtle arrow on hover. */
a.cal-row {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.cal-row::after {
  content: '→';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--t), transform var(--t);
  font-family: var(--mono);
  font-size: 13px;
}
a.cal-row:hover::after { opacity: 1; transform: translateY(-50%) translateX(4px); }

/* ============================================================================
   Phase 5 polish — hot/cold interpretation badge on indicator hero +
   related-indicators sidebar at the bottom of each detail page +
   indicator chip variant in the search dropdown.
   ============================================================================ */

/* Hot/cold badge on the indicator hero */
.ind-hot-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ind-hot-very-hot  { background: rgba(239,68,68,0.18); color: #ef4444; border: 1px solid rgba(239,68,68,0.32); }
.ind-hot-hot       { background: rgba(245,158,11,0.18); color: #f59e0b; border: 1px solid rgba(245,158,11,0.32); }
.ind-hot-normal    { background: rgba(148,163,184,0.14); color: var(--text-muted); border: 1px solid var(--line); }
.ind-hot-cool      { background: rgba(56,189,248,0.14); color: var(--accent); border: 1px solid rgba(56,189,248,0.32); }
.ind-hot-very-cool { background: rgba(34,197,94,0.16); color: #22c55e; border: 1px solid rgba(34,197,94,0.32); }

/* Related-indicators panel at the bottom of /indicator/{slug} */
.ind-related { margin-bottom: 18px; }
.ind-related-grid {
  list-style: none;
  padding: 12px 14px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.ind-related-card {
  display: block;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: transform var(--t), border-color var(--t), background var(--t);
  position: relative;
}
.ind-related-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--bg-hover);
}
.ind-related-card-dot {
  position: absolute;
  top: 12px; right: 12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}
.ind-related-card.imp-high .ind-related-card-dot { background: #ef4444; }
.ind-related-card.imp-medium .ind-related-card-dot { background: #f59e0b; }
.ind-related-card-name {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding-right: 18px;
  line-height: 1.3;
  margin-bottom: 3px;
}
.ind-related-card-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Indicator chip in the global search dropdown */
.sr-item.sr-ind .sr-icon { color: var(--accent); }
.sr-badge.sr-ind-ccy {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(56,189,248,0.32);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ============================================================================
   Why-modal: structured pillar + kill-switch cards
   The old `.why-list-pillars li` rule assumed a flat string body with a single
   ▸ arrow before. We now render rich {name, status, description, last_evidence}
   blocks, so we override those defaults and style each piece explicitly.
   Selectors target `.why-pillar` and `.why-kill` rather than the generic li
   so the old rules still apply if a non-structured response ever comes back.
   ============================================================================ */
.why-list-pillars li.why-pillar,
.why-list-kills   li.why-kill {
  display: block;          /* override the flex-row default */
  padding: 12px 14px;
  background: var(--bg-elev-2);
  border-radius: 10px;
  border-left: 3px solid var(--line-strong);
}
.why-list-pillars li.why-pillar::before,
.why-list-kills   li.why-kill::before {
  content: none;           /* kill the legacy ▸/✕ arrow */
}
.why-pillar-intact  { border-left-color: var(--long); }
.why-pillar-tripped,
.why-pillar-broken  { border-left-color: var(--short); }
.why-pillar-weakened { border-left-color: var(--accent-warm); }
.why-pillar-head,
.why-kill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.why-pillar-name,
.why-kill-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.why-pillar-status {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-elev-3);
  color: var(--text-muted);
}
.why-pillar-status.pill-intact   { background: rgba(34,197,94,0.13);  color: var(--long); }
.why-pillar-status.pill-tripped,
.why-pillar-status.pill-broken   { background: rgba(239,68,68,0.13);  color: var(--short); }
.why-pillar-status.pill-weakened { background: rgba(245,158,11,0.13); color: var(--accent-warm); }
.why-pillar-desc,
.why-kill-cond {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
.why-pillar-evidence {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
  font-style: italic;
}
/* Kill-switch tripped state — flip the left border + the trip badge */
.why-list-kills li.why-kill {
  border-left-color: var(--text-faint);
}
.why-list-kills li.why-kill.why-kill-tripped {
  border-left-color: var(--short);
  background: rgba(239,68,68,0.05);
}
.why-kill-trip {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(239,68,68,0.18);
  color: var(--short);
  text-transform: uppercase;
}

/* ============================================================================
   Admin / operational dashboard (/admin/status)
   Service-level health view — gauges, scheduler jobs, error buffer.
   ============================================================================ */
.admin-page { padding: 20px 24px 40px; max-width: 1280px; }
.admin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 24px; flex-wrap: wrap;
}
.admin-head-left { flex: 1 1 auto; min-width: 280px; }
.admin-tag {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.admin-head h1 {
  font-family: var(--display); font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 6px; color: var(--text);
}
.admin-sub { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }

.admin-verdict {
  flex: 0 0 auto;
  display: inline-flex; flex-direction: column; gap: 8px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  min-width: 180px;
}
.admin-verdict-green  { background: rgba(34,197,94,0.10);  border-color: rgba(34,197,94,0.35); }
.admin-verdict-amber  { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); }
.admin-verdict-red    { background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.4); }
.admin-verdict-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; margin-right: 8px;
}
.admin-verdict-green .admin-verdict-dot { background: var(--long); box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.admin-verdict-amber .admin-verdict-dot { background: var(--accent-warm); box-shadow: 0 0 8px rgba(245,158,11,0.5); }
.admin-verdict-red   .admin-verdict-dot { background: var(--short); box-shadow: 0 0 8px rgba(239,68,68,0.5); animation: adminPulse 2s ease-in-out infinite; }
@keyframes adminPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.admin-verdict-label {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
}
.admin-verdict-reasons {
  margin: 6px 0 0; padding: 0; list-style: none;
  font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}
.admin-verdict-reasons li::before { content: "· "; }

.admin-gauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 28px;
}
.admin-gauge {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.admin-gauge-label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 8px;
}
.admin-gauge-value {
  font-family: var(--display); font-size: 24px; font-weight: 700;
  letter-spacing: -0.015em; color: var(--text); line-height: 1.1;
}
.admin-gauge-slash { color: var(--text-faint); font-weight: 400; }
.admin-gauge-sub {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-muted);
  margin-top: 6px;
}

.admin-section {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.admin-section-title {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.admin-subsection-title {
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  margin: 14px 0 8px;
}

.admin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.admin-kv {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 12px; background: var(--bg-elev-2); border-radius: 8px;
  font-size: 12.5px;
}
.admin-k { color: var(--text-muted); }
.admin-v { color: var(--text); font-family: var(--mono); font-weight: 600; }

.admin-grid-flags { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.admin-flag {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--bg-elev-2); border-radius: 8px;
  font-size: 12px; color: var(--text);
}
.admin-flag-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 8px;
}
.admin-flag-on  .admin-flag-dot { background: var(--long); }
.admin-flag-off .admin-flag-dot { background: var(--text-faint); }
.admin-flag-name { flex: 1 1 auto; text-transform: capitalize; }
.admin-flag-state {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
.admin-flag-on  .admin-flag-state { color: var(--long); background: rgba(34,197,94,0.13); }
.admin-flag-off .admin-flag-state { color: var(--text-muted); background: var(--bg-elev-3); }

.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-list li {
  display: flex; justify-content: space-between; padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.admin-list li:last-child { border-bottom: none; }
.admin-list-name { color: var(--text); }
.admin-list-val { color: var(--text-muted); font-family: var(--mono); font-size: 11.5px; }

.admin-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.admin-table thead th {
  text-align: left; padding: 8px 12px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--line-strong);
}
.admin-table tbody td {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  color: var(--text);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table .admin-right { text-align: right; font-family: var(--mono); }
.admin-table code {
  font-family: var(--mono); font-size: 11.5px; color: var(--accent);
  background: var(--accent-soft); padding: 1px 6px; border-radius: 4px;
}
.admin-table-sub { color: var(--text-faint); font-size: 11px; }

.admin-empty {
  font-size: 13px; color: var(--text-muted); padding: 12px 0; margin: 0;
}

.admin-btn-sm {
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; padding: 5px 10px;
  background: var(--bg-elev-2); color: var(--text-muted);
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.admin-btn-sm:hover { background: var(--bg-hover); color: var(--text); }

.admin-error-list { list-style: none; margin: 0; padding: 0; }
.admin-error-item {
  padding: 12px 14px; background: rgba(239,68,68,0.04);
  border: 1px solid rgba(239,68,68,0.25); border-radius: 8px;
  margin-bottom: 10px;
}
.admin-error-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.admin-error-type {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--short); padding: 2px 8px;
  background: rgba(239,68,68,0.12); border-radius: 4px;
}
.admin-error-when { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.admin-error-msg { font-size: 13px; color: var(--text); margin: 0; line-height: 1.5; }
.admin-error-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.admin-error-meta code { background: var(--bg-elev-2); padding: 1px 6px; border-radius: 4px; }
.admin-error-tb { margin-top: 8px; }
.admin-error-tb summary {
  cursor: pointer; font-size: 11px; color: var(--text-muted);
  font-family: var(--mono); user-select: none;
}
.admin-error-tb pre {
  margin: 6px 0 0; padding: 10px; background: var(--bg);
  border-radius: 6px; font-family: var(--mono); font-size: 10.5px;
  color: var(--text-muted); overflow-x: auto; max-height: 320px;
}

.admin-foot {
  display: flex; justify-content: space-between;
  margin-top: 20px; padding: 14px 4px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
}
.admin-foot a { color: var(--accent); }
.admin-foot a:hover { color: var(--accent-strong); }

@media (max-width: 720px) {
  .admin-page { padding: 14px 14px 28px; }
  .admin-head { flex-direction: column; }
  .admin-verdict { width: 100%; }
  .admin-gauge-value { font-size: 20px; }
  .admin-section { padding: 14px; }
}

/* ============================================================================
   Calendar currency-filter chips (FX Street-style)
   Sits above the calendar body in the dashboard. Pure client-side filter —
   toggling a chip just hides matching rows via JS so we don't need a server
   round-trip on every flip. State persists across visits via localStorage.
   ============================================================================ */
.cal-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev-2);
}
.cal-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
  min-width: 38px;
  text-align: center;
}
.cal-chip:hover { background: var(--bg-hover); color: var(--text); }
.cal-chip.is-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.cal-chip-all {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cal-chip-all.is-on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.cal-filter-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .cal-filter-bar { padding: 10px 12px; gap: 5px; }
  .cal-chip { padding: 3px 8px; min-width: 34px; font-size: 10px; }
  .cal-filter-count { width: 100%; margin: 4px 0 0; text-align: right; }
}

/* ============================================================================
   FOMC commentary panel — COMPACT
   Tucks INSIDE the rates panel directly under the Fed Funds curve.
   Single-card design with a head row, narrative paragraph, side-by-side
   triggers, inline Powell quotes, single-line footer. Net bias colours
   the left border. Designed to be ~½ the vertical of the original layout.
   ============================================================================ */
.rates-fomc-divider {
  height: 0;
  border-top: 1px dashed var(--line);
  margin: 0 16px;
}
.fomc-body { padding: 12px 16px 14px; }
.fomc-body .empty-state.small { padding: 14px; }

.fomc-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-elev-2);
  border-radius: 8px;
  border-left: 3px solid var(--text-faint);
  color: var(--text-muted);
}
.fomc-empty-icon { font-size: 22px; flex: 0 0 auto; }
.fomc-empty-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.fomc-empty-sub { font-size: 11.5px; line-height: 1.4; }

.fomc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px 10px 16px;
  border-left: 3px solid var(--line-strong);
  border-radius: 0 8px 8px 0;
  background: var(--bg-elev-2);
}
.fomc-bias-hawkish { border-left-color: var(--short); }
.fomc-bias-dovish  { border-left-color: var(--long); }
.fomc-bias-neutral { border-left-color: var(--text-muted); }

/* HEAD — single row: meta + decision (centre) + pills (right) */
.fomc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.fomc-head-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  flex: 0 0 auto;
}
.fomc-head-label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fomc-head-date {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.fomc-head-decision {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.fomc-head-pills {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}
.fomc-bias-pill,
.fomc-conv-pill {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
}
.fomc-bias-pill-hawkish { background: rgba(239,68,68,0.13); color: var(--short); border-color: rgba(239,68,68,0.3); }
.fomc-bias-pill-dovish  { background: rgba(34,197,94,0.13); color: var(--long);  border-color: rgba(34,197,94,0.3); }
.fomc-bias-pill-neutral { background: var(--bg-elev-3);     color: var(--text-muted); }
.fomc-conv-pill-high    { background: var(--accent-soft); color: var(--accent); border-color: rgba(56,189,248,0.3); }
.fomc-conv-pill-medium  { background: var(--bg-elev-3);   color: var(--text-muted); }
.fomc-conv-pill-low     { background: var(--bg-elev-3);   color: var(--text-faint); }

/* NARRATIVE — tight paragraphs, no separate card */
.fomc-narrative {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fomc-narrative-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
.fomc-narrative-text strong {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
}

/* TRIGGERS — side-by-side, compact list */
.fomc-triggers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fomc-trigger-block {
  padding: 0;
}
.fomc-trigger-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fomc-trigger-icon { font-weight: 700; }
.fomc-trigger-hawk .fomc-trigger-icon,
.fomc-trigger-hawk .fomc-trigger-label { color: var(--short); }
.fomc-trigger-dove .fomc-trigger-icon,
.fomc-trigger-dove .fomc-trigger-label { color: var(--long); }
.fomc-trigger-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fomc-trigger-list li {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text);
  padding-left: 11px;
  position: relative;
}
.fomc-trigger-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}
.fomc-trigger-hawk .fomc-trigger-list li::before { color: var(--short); }
.fomc-trigger-dove .fomc-trigger-list li::before { color: var(--long); }

/* QUOTES — inline, single-line each */
.fomc-quote-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fomc-quote {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--accent);
  font-size: 12px;
  line-height: 1.4;
}
.fomc-quote-topic {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  flex: 0 0 auto;
}
.fomc-quote-text {
  font-style: italic;
  color: var(--text);
}

/* FOOTER — single row, kill switch + next catalyst */
.fomc-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text);
}
.fomc-foot-block { flex: 1 1 220px; }
.fomc-foot-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
}

@media (max-width: 720px) {
  .fomc-triggers { grid-template-columns: 1fr; }
  .fomc-head { gap: 8px; }
  .fomc-head-decision { width: 100%; flex-basis: 100%; }
  .fomc-card { padding: 10px 12px; }
}

/* ============================================================================
   Central banks — INDEX page (/central-banks)
   Eight summary cards, each linking to its own detail page.
   ============================================================================ */
.cb-index-page { max-width: 1200px; margin: 0 auto; padding: 28px 24px 60px; }
.cb-index-head { margin-bottom: 24px; }
.cb-index-head h1 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 6px;
}
.cb-index-lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0;
}
.cb-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.cb-index-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.cb-index-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.cb-index-card-head { display: flex; align-items: center; gap: 10px; }
.cb-index-flag {
  width: 28px; height: 20px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  flex: 0 0 auto;
}
.cb-index-name-block { display: flex; flex-direction: column; line-height: 1.1; }
.cb-index-code {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.cb-index-name {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.cb-index-ccy-tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.cb-index-rate { display: flex; flex-direction: column; gap: 2px; }
.cb-index-rate-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cb-index-rate-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.cb-index-card-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.cb-index-foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
}
.cb-index-foot-label { color: var(--text-muted); letter-spacing: 0.04em; }
.cb-index-foot-val { color: var(--text); font-weight: 600; }
.cb-expected-hold { color: var(--text-muted); }
.cb-expected-hike { color: var(--short); }
.cb-expected-cut  { color: var(--long); }
.cb-index-path {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}
.cb-index-card-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity var(--t), color var(--t);
}
.cb-index-card:hover .cb-index-card-arrow {
  opacity: 1;
  color: var(--accent);
}

/* ============================================================================
   Central bank — DETAIL page (/central-bank/{code})
   ============================================================================ */
.cb-detail-page { max-width: 1100px; margin: 0 auto; padding: 24px 24px 60px; }
.cb-detail-back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 14px;
  text-decoration: none;
  transition: color var(--t);
}
.cb-detail-back:hover { color: var(--accent); }
.cb-detail-head {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 20px 22px 18px;
  margin-bottom: 18px;
}
.cb-detail-head-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}
.cb-detail-name-block { display: flex; align-items: center; gap: 14px; flex: 1 1 240px; }
.cb-detail-flag {
  width: 44px; height: 30px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  flex: 0 0 auto;
}
.cb-detail-name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.cb-detail-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.cb-detail-rate-block,
.cb-detail-meeting-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cb-detail-rate-label,
.cb-detail-meta-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cb-detail-rate-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.cb-detail-meta-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.cb-detail-expected {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 4px;
  display: inline-block;
  width: fit-content;
  background: var(--bg-elev-2);
}
.cb-detail-path {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  font-style: italic;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Commentary section — used both Fed (live) and others (placeholder) */
.cb-commentary-section { margin-bottom: 18px; }
.cb-commentary-body-placeholder { padding: 20px; }
.cb-commentary-placeholder {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bg-elev-2);
  border-left: 3px solid var(--text-faint);
  border-radius: 8px;
  padding: 18px 20px;
}
.cb-commentary-placeholder-icon { font-size: 32px; flex: 0 0 auto; }
.cb-commentary-placeholder-body h3 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.cb-commentary-placeholder-body p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.cb-commentary-placeholder-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}

/* Recent decisions list */
.cb-history-section { margin-bottom: 18px; }
.cb-history-body { padding: 4px 0; }
.cb-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cb-history-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.cb-history-row:last-child { border-bottom: none; }
.cb-history-row.imp-high { background: rgba(239,68,68,0.04); }
.cb-history-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.cb-history-name { color: var(--text); }
.cb-history-figs { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-history-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-elev-2);
  min-width: 56px;
  line-height: 1.1;
}
.cb-history-fig-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cb-history-fig-val {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
}
.cb-history-fig-actual { background: var(--accent-soft); }
.cb-history-fig-actual .cb-history-fig-val { color: var(--accent); }

/* Per-bank rate-history chart on /central-bank/{code} */
.cb-rate-history-section { margin-bottom: 18px; }
.cb-rate-history-body { padding: 12px 14px; }
.cb-rate-history-chart {
  width: 100%;
  height: 260px;
  min-height: 200px;
}

/* Dashboard CB Watch card — small "View →" link */
.cb-card-open {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-decoration: none;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--accent-soft);
  transition: background var(--t), border-color var(--t);
}
.cb-card-open:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

@media (max-width: 720px) {
  .cb-index-page,
  .cb-detail-page { padding: 18px 14px 40px; }
  .cb-detail-head-row { gap: 14px; }
  .cb-detail-name { font-size: 18px; }
  .cb-detail-rate-value { font-size: 18px; }
  .cb-history-row { grid-template-columns: 1fr; gap: 6px; }
}