/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #000000;
  --surface: #0c0c0c;
  --surface-hover: #111111;
  --surface-active: #141414;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-focus: rgba(255, 255, 255, 0.20);
  --accent: #ffffff;
  --accent-dim: rgba(255, 255, 255, 0.08);
  --positive: #22c55e;
  --positive-dim: rgba(34, 197, 94, 0.12);
  --negative: #ef4444;
  --negative-dim: rgba(239, 68, 68, 0.12);
  --caution: #f59e0b;
  --caution-dim: rgba(245, 158, 11, 0.12);
  --info: #60a5fa;
  --info-dim: rgba(96, 165, 250, 0.12);
  --text: #ffffff;
  --text-sec: rgba(255, 255, 255, 0.60);
  --text-muted: rgba(255, 255, 255, 0.35);
  --text-faint: rgba(255, 255, 255, 0.18);
  --radius-lg: 10px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  justify-content: center;
  padding: 24px 16px;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ===== TERMINAL WINDOW ===== */
.terminal-window {
  width: 100%;
  max-width: 1280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 48px);
}

/* ===== TERMINAL HEADER ===== */
.terminal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.terminal-dots {
  display: none;
}

.dot {
  display: none;
}

.terminal-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  letter-spacing: 0;
}

.terminal-logo {
  display: none;
}

.terminal-version {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 400;
  margin-left: auto;
}

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

.status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--positive);
  opacity: 0.8;
  display: block;
}

.status-dot.pulse {
  animation: none;
}

@keyframes pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.6; }
}

.terminal-status-text {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0;
}

/* ===== TAB BAR ===== */
.tab-bar {
  display: flex;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  padding: 0 24px;
}

.tab {
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 1.5px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
}

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

.tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.tab-key {
  display: none;
}

/* ===== TERMINAL BODY ===== */
.terminal-body {
  flex: 1;
  overflow: auto;
  padding: 24px;
  background: var(--bg);
}

/* ===== TAB PANELS ===== */
.tab-panel {
  display: none;
  animation: fadeIn 0.2s ease;
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== PANEL HEADER ===== */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.panel-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.meta-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.alert-tag {
  color: var(--caution);
  border-color: rgba(245, 158, 11, 0.25);
  background: var(--caution-dim);
}

.updated-label {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.updated-label strong {
  color: var(--positive);
  font-weight: 600;
}

/* ===== CARDS ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s;
  overflow: hidden;
}

.card:hover {
  border-color: var(--border-hover);
}

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

.card-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.card-subtitle {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-faint);
}

/* ===== CHART CARD ===== */
.chart-card {
  margin-bottom: 20px;
}

.chart-container {
  padding: 20px;
  height: 280px;
  position: relative;
}

/* ===== CURRENCY GRID ===== */
.currency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.currency-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid transparent;
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: default;
  transition: border-color 0.15s;
  position: relative;
  overflow: hidden;
}

.currency-card:hover {
  border-color: var(--border-hover);
}

.currency-card::before {
  display: none;
}

.currency-card.very-strong { border-left-color: rgba(34, 197, 94, 0.40); }
.currency-card.strong { border-left-color: rgba(34, 197, 94, 0.30); }
.currency-card.neutral { border-left-color: rgba(96, 165, 250, 0.30); }
.currency-card.weak { border-left-color: rgba(245, 158, 11, 0.30); }
.currency-card.very-weak { border-left-color: rgba(239, 68, 68, 0.30); }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.currency-flag-code {
  display: flex;
  align-items: center;
  gap: 8px;
}

.currency-flag {
  font-size: 22px;
  line-height: 1;
}

.currency-code {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.05em;
}

.currency-name {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: var(--font-mono);
}

.score-block {
  text-align: right;
}

.score-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.score-value.positive { color: var(--positive); }
.score-value.negative { color: var(--negative); }
.score-value.neutral { color: var(--info); }

.score-label {
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.rating-badge {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-very-strong {
  background: var(--positive-dim);
  color: var(--positive);
  border: none;
}

.badge-strong {
  background: var(--positive-dim);
  color: var(--positive);
  border: none;
  opacity: 0.8;
}

.badge-neutral {
  background: var(--info-dim);
  color: var(--info);
  border: none;
}

.badge-neutral-strong {
  background: var(--info-dim);
  color: var(--info);
  border: none;
  opacity: 0.8;
}

.badge-weak {
  background: var(--caution-dim);
  color: var(--caution);
  border: none;
}

.badge-very-weak {
  background: var(--negative-dim);
  color: var(--negative);
  border: none;
}

.direction-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.dir-arrow { font-size: 11px; }
.dir-improving { color: var(--positive); }
.dir-stable { color: var(--info); }
.dir-deteriorating { color: var(--negative); }
.dir-mixed { color: var(--caution); }

/* Mini score bar */
.mini-bar-wrap {
  margin-top: 12px;
}

.mini-bar-track {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.mini-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mini-bar-label {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.mini-bar-min, .mini-bar-max {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-faint);
}

/* ===== LEGEND ===== */
.legend-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 0 4px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot.very-strong { background: var(--positive); }
.legend-dot.strong { background: var(--positive); opacity: 0.7; }
.legend-dot.neutral { background: var(--info); }
.legend-dot.weak { background: var(--caution); }
.legend-dot.very-weak { background: var(--negative); }

/* ===== SCORECARDS ===== */
#scorecardsContainer {
  display: grid;
  gap: 20px;
}

.scorecard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s;
}

.scorecard:hover {
  border-color: var(--border-hover);
}

.scorecard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
}

.sc-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sc-flag { font-size: 24px; }

.sc-code {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sc-fullname {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

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

.sc-score {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sc-score.positive { color: var(--positive); }
.sc-score.negative { color: var(--negative); }
.sc-score.zero { color: var(--info); }

.sc-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.scorecard-table-wrap {
  overflow-x: auto;
}

.scorecard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.scorecard-table th {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 10px 16px;
  text-align: left;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
}

.scorecard-table th:last-child { width: 45%; }

.scorecard-table td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
  color: var(--text-sec);
}

.scorecard-table tr:last-child td { border-bottom: none; }

.scorecard-table tr:hover td {
  background: rgba(255,255,255,0.02);
}

.factor-name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.score-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chip-p2 { background: var(--positive-dim); color: var(--positive); }
.chip-p1 { background: var(--positive-dim); color: var(--positive); opacity: 0.8; }
.chip-0  { background: var(--accent-dim); color: var(--text-muted); }
.chip-m1 { background: var(--caution-dim); color: var(--caution); }
.chip-m2 { background: var(--negative-dim); color: var(--negative); }

.factor-rationale {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.scorecard-analysis {
  padding: 16px 20px;
  background: rgba(255,255,255,0.015);
  border-top: 1px solid var(--border);
}

.analysis-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.analysis-text {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-sec);
}

/* ===== TABLE WRAP ===== */
.table-wrap {
  overflow-x: auto;
}

/* ===== DATA TABLE ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--font-sans);
}

.data-table th {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 12px 16px;
  text-align: left;
  background: transparent;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: var(--text-sec);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }

.data-table tr:hover td {
  background: rgba(255,255,255,0.015);
}

.rank-num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-muted);
  font-size: 14px;
}

.rank-num.rank-1, .rank-num.rank-2 { color: var(--positive); }
.rank-num.rank-3 { color: var(--positive); opacity: 0.8; }

.currency-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cell-flag { font-size: 16px; }

.cell-code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.04em;
}

.score-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rate-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-sec);
}

.key-driver {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Trade table specifics */
.pair-cell {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.05em;
}

.delta-cell {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--positive);
}

.rate-diff-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--caution);
}

.conviction-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.conv-high {
  background: var(--positive-dim);
  color: var(--positive);
}

.conv-med {
  background: var(--caution-dim);
  color: var(--caution);
}

.trade-rationale {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 320px;
}

/* ===== RATE DIFF GRID ===== */
.rate-diff-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.rate-diff-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: background 0.15s;
}

.rate-diff-item:hover {
  background: rgba(255,255,255,0.04);
}

.rd-pair {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.rd-rates {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.rd-diff {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--caution);
}

.rd-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ===== ALERTS ===== */
.alert-log {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.alert-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.5;
}

.alert-entry:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}

.alert-entry.alert-warn {
  border-left: 3px solid var(--caution);
  background: var(--caution-dim);
}

.alert-entry.alert-danger {
  border-left: 3px solid var(--negative);
  background: var(--negative-dim);
}

.alert-entry.alert-info {
  border-left: 3px solid var(--info);
  background: var(--info-dim);
}

.alert-entry.alert-positive {
  border-left: 3px solid var(--positive);
  background: var(--positive-dim);
}

.alert-timestamp {
  color: var(--text-faint);
  font-size: 10px;
  white-space: nowrap;
  padding-top: 1px;
  min-width: 80px;
}

.alert-text {
  color: var(--text-sec);
  flex: 1;
}

.alert-text strong {
  color: var(--text);
}

.alert-impact {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ===== MARKET SNAPSHOT ===== */
.snapshot-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.snapshot-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: background 0.15s;
}

.snapshot-item:hover {
  background: rgba(255,255,255,0.04);
}

.snapshot-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.snapshot-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.snapshot-value.green { color: var(--positive); }
.snapshot-value.amber { color: var(--caution); }
.snapshot-value.red { color: var(--negative); }

.snapshot-change {
  font-family: var(--font-mono);
  font-size: 10px;
  margin-top: 3px;
}

.snapshot-change.up { color: var(--positive); }
.snapshot-change.down { color: var(--negative); }
.snapshot-change.flat { color: var(--text-muted); }

/* ===== TERMINAL FOOTER ===== */
.terminal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.footer-prompt {
  display: none;
}

.footer-text {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
  letter-spacing: 0;
}

.live-indicator {
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.footer-divider {
  color: var(--border);
  font-size: 12px;
}

.footer-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  body { padding: 8px; }

  .terminal-window { min-height: calc(100vh - 16px); border-radius: 8px; }

  .terminal-body { padding: 14px; }

  .currency-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

  .chart-container { height: 200px; }

  .panel-header { flex-direction: column; align-items: flex-start; }

  .scorecard-header { flex-direction: column; gap: 12px; }

  .sc-right { align-self: flex-end; }

  .tab { padding: 10px 14px; font-size: 10px; }

  .terminal-title { font-size: 11px; }

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

@media (max-width: 480px) {
  .currency-grid { grid-template-columns: 1fr 1fr; }
  .legend-row { gap: 10px; }
}

/* ===== QUANT ENGINE — TAB 5 ===== */

/* Loading / error states */
.quant-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.quant-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(34,197,94,0.2);
  border-top-color: var(--positive);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.quant-error {
  padding: 20px 24px;
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--red-dim);
  border-radius: var(--radius-sm);
  margin: 16px;
}

/* Quant table — wider, tighter rows */
.quant-table th, .quant-table td {
  padding: 8px 10px;
  font-size: 11px;
}

/* Z-score colouring */
.z-score {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.z-extreme  { color: var(--negative); }
.z-elevated { color: var(--caution); }
.z-normal   { color: var(--text-sec); }

/* Positioning state badges */
.pos-state-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  border: none;
  white-space: nowrap;
}
.pos-clean    { background: var(--info-dim);   color: var(--info); }
.pos-building { background: var(--caution-dim);  color: var(--caution); }
.pos-crowded  { background: var(--negative-dim);    color: var(--negative); }
.pos-unknown  { background: var(--accent-dim); color: var(--text-faint); }

/* Squeeze risk markers */
.squeeze-flag {
  font-size: 12px;
  margin-left: 4px;
  cursor: help;
}
.squeeze-flag-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--caution-dim);
  color: var(--caution);
  border: none;
  margin-left: 6px;
}

/* Opportunity score */
.opp-score {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

/* Valid trade row highlight */
.trade-valid-row {
  background: rgba(34,197,94,0.02);
}
.trade-valid-row:hover {
  background: rgba(34,197,94,0.03);
}

/* ─── Trade idea cards ─── */
.quant-trade-cards {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quant-no-trades {
  padding: 24px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

.quant-trade-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.qtc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.qtc-rank {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 30px;
}

.qtc-pair {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  flex: 1;
}

.qtc-score {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.qtc-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qtc-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}

.qtc-metric {
  padding: 10px 16px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.qtc-metric:last-child { border-right: none; }

.qtc-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.qtc-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-sec);
}

.qtc-reasoning {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qtc-row {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-sec);
  line-height: 1.4;
}

.qtc-row-label {
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: 0.08em;
  min-width: 90px;
  padding-top: 1px;
  flex-shrink: 0;
}

.qtc-risk {
  color: var(--amber);
}
.qtc-risk .qtc-row-label {
  color: rgba(255,184,0,0.5);
}

/* Direction badge */
.qtc-direction {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.qtc-direction.long {
  background: var(--positive-dim);
  color: var(--positive);
}
.qtc-direction.short {
  background: var(--negative-dim);
  color: var(--negative);
}

/* Pair + direction group */
.qtc-pair-block {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

/* Numeric conviction score next to badge */
.qtc-conviction-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* Duration badge */
.duration-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.dur-short {
  background: var(--caution-dim);
  color: var(--caution);
}
.dur-medium {
  background: var(--info-dim);
  color: var(--info);
}
.dur-long {
  background: var(--positive-dim);
  color: var(--positive);
}

/* Duration row inside trade card */
.qtc-duration-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(75,158,255,0.03);
  font-family: var(--font-mono);
  font-size: 11px;
  flex-wrap: wrap;
}
.qtc-dur-label {
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  min-width: 70px;
}
.qtc-dur-driver {
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.qtc-dur-text {
  color: var(--text-sec);
  line-height: 1.5;
}

/* Flowing rationale text */
.qtc-rationale {
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-sec);
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}

/* Risk row */
.qtc-risk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.qtc-risk-icon {
  font-size: 12px;
  flex-shrink: 0;
}
.qtc-risk-flag {
  color: var(--amber);
  background: rgba(255,184,0,0.04);
}
.qtc-risk-clear {
  color: var(--text-faint);
}

/* ─── Trend & Alignment row inside trade card ─── */
.qtc-trend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Pair trend badges */
.qtc-trend-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.trend-strong-bull { background: var(--positive-dim);  color: var(--positive); }
.trend-bull         { background: var(--positive-dim);  color: var(--positive); opacity: 0.8; }
.trend-strong-bear  { background: var(--negative-dim);  color: var(--negative); }
.trend-bear         { background: var(--negative-dim);  color: var(--negative); opacity: 0.8; }
.trend-neutral      { background: var(--accent-dim); color: var(--text-muted); }

/* Alignment badges */
.qtc-align-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.align-good     { background: var(--positive-dim);   color: var(--positive); }
.align-partial  { background: var(--info-dim);  color: var(--info); }
.align-conflict { background: var(--caution-dim);   color: var(--caution); }
.align-block    { background: var(--negative-dim);   color: var(--negative); }

/* Trade type badge */
.qtc-type-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.type-continuation { background: var(--info-dim); color: var(--info); }
.type-reversal     { background: var(--caution-dim);  color: var(--caution); }

/* Market state badge */
.qtc-state-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--accent-dim);
}
.state-trending    { color: var(--positive); background: var(--positive-dim); }
.state-transition  { color: var(--caution); background: var(--caution-dim); }
.state-exhaustion  { color: var(--negative); background: var(--negative-dim); }
.state-choppy      { color: var(--text-faint); }

/* BLOCKED tag inside card */
.qtc-blocked-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--negative-dim);
  color: var(--negative);
  border: none;
  margin-left: auto;
}

/* Pair matrix status column */
.pair-status {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
.status-tradable { color: var(--positive); background: var(--positive-dim); }
.status-blocked  { color: var(--negative);   background: var(--negative-dim); }
.status-invalid  { color: var(--text-faint); }

/* Blocked row in matrix */
.trade-blocked-row { opacity: 0.5; }

/* ─── NEW FEATURES: Tiers, Sessions, Health, Watchlist, Filters ─── */

/* Conviction tier badges (Feature 1) */
.tier-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tier-high        { background: var(--positive-dim); color: var(--positive); }
.tier-medium      { background: var(--info-dim); color: var(--info); }
.tier-speculative { background: var(--caution-dim); color: var(--caution); }

/* Session tags (Feature 3) */
.qtc-sessions {
  padding: 6px 16px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.01);
}
.session-tag {
  display: inline-block;
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
}
.session-tokyo   { background: var(--info-dim); color: var(--info); }
.session-london  { background: var(--positive-dim); color: var(--positive); }
.session-newyork { background: var(--negative-dim); color: var(--negative); }

/* Time horizon badge (Feature 3) */
.horizon-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--accent-dim);
}
.horizon-intraday    { color: var(--caution); }
.horizon-swing       { color: var(--info); }
.horizon-positional  { color: var(--positive); }

/* Thesis breakdown bar (Feature 2) */
.qtc-thesis-bar {
  padding: 8px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.01);
}
.thesis-component {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Thesis health indicator (Feature 4) */
.qtc-health {
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.01);
  border-bottom: 1px solid var(--border);
}
.health-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.health-strong    { background: var(--positive); }
.health-weakening { background: var(--caution); }
.health-stale     { background: var(--negative); }

/* Pin button for watchlist (Feature 7) */
.pin-btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.pin-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-sec);
}
.pin-btn.pinned {
  border-color: var(--positive);
  color: var(--positive);
  background: var(--positive-dim);
}

/* Focus breadcrumb (Feature 6) */
.focus-breadcrumb {
  display: none;
  padding: 8px 16px;
  background: var(--accent-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--text-sec);
}
.clear-focus-btn {
  margin-left: 6px;
  padding: 2px 6px;
  border: none;
  background: var(--border);
  color: var(--text-muted);
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}
.clear-focus-btn:hover {
  background: var(--border-hover);
  color: var(--text-sec);
}

/* Watchlist panel (Feature 7) */
#watchlistPanel {
  margin-top: 20px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.watchlist-summary {
  font-size: 12px;
  color: var(--text-sec);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.watchlist-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.watchlist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.01);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 11px;
}
.watchlist-pair {
  min-width: 60px;
}

/* Quant filter panel (Feature 5) */
.quant-filters {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.quant-filters summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
  color: var(--text-sec);
  user-select: none;
}
.quant-filters summary:hover {
  color: var(--text);
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
  font-size: 11px;
}
.filter-label {
  min-width: 100px;
  color: var(--text-muted);
  font-weight: 500;
}
.filter-input {
  padding: 4px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 10px;
}
.filter-input:focus {
  outline: none;
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.08);
}
.filter-checkbox {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.filter-count-badge {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--positive-dim);
  color: var(--positive);
  border-radius: var(--radius-xs);
  font-weight: 600;
  font-size: 10px;
}
.reset-filters-btn {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.reset-filters-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-sec);
}

/* Filter panel details element */
.filter-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
  color: var(--text-sec);
  user-select: none;
  padding: 6px 0;
}
.filter-summary:hover {
  color: var(--text);
}
.filter-content {
  padding: 12px 0;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.filter-select {
  padding: 4px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 10px;
  cursor: pointer;
  max-width: 200px;
}
.filter-select:focus {
  outline: none;
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.08);
}
.filter-reset-btn {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.filter-reset-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-sec);
}

/* View trade ideas button on scorecards */
.scorecard-actions {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.view-trades-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--positive-dim);
  border-radius: var(--radius-xs);
  color: var(--positive);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.view-trades-btn:hover {
  background: var(--positive-dim);
  border-color: var(--positive);
}

/* Watchlist panel on dashboard */
.watchlist-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.watchlist-header {
  font-weight: 600;
  font-size: 11px;
  color: var(--text-sec);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.watchlist-empty {
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  padding: 20px 0;
}
.watchlist-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
}
.watchlist-summary-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.watchlist-summary-count {
  font-weight: 600;
  color: var(--text);
}
.watchlist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 10px;
}
.watchlist-row:last-child {
  border-bottom: none;
}
.watchlist-pair {
  font-weight: 600;
  min-width: 80px;
  color: var(--text);
}
.watchlist-direction {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-weight: 600;
  font-size: 9px;
}
.watchlist-direction.long {
  background: var(--positive-dim);
  color: var(--positive);
}
.watchlist-direction.short {
  background: var(--negative-dim);
  color: var(--negative);
}
.watchlist-delta {
  color: var(--text-sec);
  min-width: 50px;
}
.watchlist-health-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.watchlist-health-dot.strong {
  background: var(--positive);
}
.watchlist-health-dot.weakening {
  background: var(--caution);
}
.watchlist-health-dot.stale {
  background: var(--negative);
}
.watchlist-age {
  color: var(--text-muted);
  flex: 1;
}
.watchlist-close-btn {
  padding: 2px 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: 9px;
  cursor: pointer;
  transition: all 0.15s;
}
.watchlist-close-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-sec);
}
.watchlist-closed-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.watchlist-closed-toggle {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.watchlist-closed-toggle:hover {
  color: var(--text-sec);
}
.watchlist-closed-list {
  margin-top: 8px;
  display: none;
}

/* P&L Tracking Row */
.pnl-row {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  background: rgba(75, 158, 255, 0.02);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: center;
}

.pnl-entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pnl-entry-label {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pnl-entry-value {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-mono);
}

.pnl-entry-time {
  color: var(--text-muted);
  font-size: 9px;
}

.pnl-current {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pnl-current-label {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pnl-current-value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pnl-price {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-mono);
}

.pnl-pips {
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 10px;
}

.pnl-profit {
  color: var(--positive);
  background: var(--positive-dim);
}

.pnl-loss {
  color: var(--negative);
  background: var(--negative-dim);
}

.pnl-zero {
  color: var(--text-sec);
  background: rgba(255, 255, 255, 0.05);
}

.pnl-unavailable {
  color: var(--caution);
  background: var(--caution-dim);
}

.pnl-update-time {
  color: var(--text-muted);
  font-size: 9px;
  margin-left: 4px;
}

/* ── Carry column ─────────────────────────────────────────────────────────── */
.carry-positive {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--positive);
}
.carry-negative {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--negative);
}
.carry-neutral {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Momentum Edge column ─────────────────────────────────────────────────── */
.mom-strong   { font-size: 11px; font-weight: 700; color: var(--positive); }
.mom-positive { font-size: 11px; font-weight: 600; color: var(--blue); }
.mom-neutral  { font-size: 11px; color: var(--text-muted); }
.mom-weak     { font-size: 11px; font-weight: 600; color: var(--negative); }

/* ── Conviction breakdown row ─────────────────────────────────────────────── */
.conviction-breakdown-row td {
  padding: 0 !important;
  border-top: none !important;
}
.conviction-breakdown {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px 6px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid var(--border);
}
.cb-sep {
  color: var(--border);
  font-size: 12px;
}
.cb-item        { color: var(--text-muted); }
.cb-item strong { color: var(--text-sec); }
.cb-score strong   { color: var(--blue); }
.cb-carry-pos strong { color: var(--positive); }
.cb-carry-neg strong { color: var(--negative); }

/* ── Signals grid (conviction grid) ─────────────────────────────────────── */
.signals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-bottom: 4px;
}
.sg-cell {
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.sg-pos     { background: var(--positive-dim); color: var(--positive); }
.sg-neg     { background: var(--negative-dim); color: var(--negative); }
.sg-neutral { background: rgba(255,255,255,0.04); color: var(--text-muted); }

.confluence-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.conf-4 { background: var(--positive-dim); color: var(--positive); }
.conf-3 { background: rgba(75,158,255,0.15); color: var(--blue); }
.conf-2 { background: var(--caution-dim); color: var(--caution); }
.conf-1 { background: var(--negative-dim); color: var(--negative); }

/* ── Regime banner ────────────────────────────────────────────────────────── */
.regime-banner {
  margin-bottom: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  border-left: 3px solid currentColor;
}
.regime-risk-off {
  background: rgba(255, 95, 87, 0.08);
  color: var(--negative);
  border-left-color: var(--negative);
}
.regime-risk-on {
  background: rgba(35, 209, 96, 0.08);
  color: var(--positive);
  border-left-color: var(--positive);
}
.regime-neutral {
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  border-left-color: var(--border);
}

/* ── Regime badge (inline on rows / cards) ───────────────────────────────── */
.regime-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.regime-aligned       { background: var(--positive-dim); color: var(--positive); }
.regime-headwind      { background: var(--caution-dim);  color: var(--caution); }
.regime-neutral-badge { background: rgba(255,255,255,0.04); color: var(--text-muted); }

/* ── Correlation badge ────────────────────────────────────────────────────── */
.corr-badge {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  color: var(--blue);
  opacity: 0.7;
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.qtc-corr-note {
  padding: 4px 16px;
  font-size: 10px;
  color: var(--blue);
  opacity: 0.7;
  border-top: 1px solid var(--border);
}

/* ── Quant card signals row ──────────────────────────────────────────────── */
.qtc-signals-row {
  padding: 8px 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}
.qtc-signals-row .signals-grid {
  flex-shrink: 0;
  width: 160px;
}
.qtc-metrics-inline {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pnl-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pnl-refresh-btn {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
}

.pnl-refresh-btn:hover:not(:disabled) {
  border-color: var(--border-hover);
  color: var(--text-sec);
  background: rgba(255, 255, 255, 0.03);
}

.pnl-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pnl-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--text-muted);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.pnl-warning-icon {
  color: var(--caution);
  font-size: 10px;
}

.pnl-not-refreshed {
  color: var(--text-muted);
  font-style: italic;
  font-size: 9px;
}

@media (max-width: 700px) {
  .pnl-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .pnl-controls {
    justify-self: end;
  }
  .qtc-metrics { grid-template-columns: repeat(2, 1fr); }
  .qtc-trend-row { gap: 4px; }
}

/* ── Market Context Panel ─────────────────────────────────────────────────── */
.ctx-panel {
  padding: 0;
  overflow: hidden;
}

.ctx-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.ctx-panel-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ctx-updated-label {
  font-size: 10px;
  color: var(--text-muted);
}

.ctx-refresh-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.ctx-refresh-btn:hover:not(:disabled) {
  border-color: var(--border-hover);
  color: var(--text-sec);
}

.ctx-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Five equal-width tiles in a row */
.ctx-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  divide-x: 1px solid var(--border);
}

.ctx-tile {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ctx-tile:last-child {
  border-right: none;
}

.ctx-tile-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ctx-tile-price {
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text);
  line-height: 1.2;
}

.ctx-tile-change {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
}

/* Trend colours */
.ctx-rising  .ctx-tile-change { color: var(--positive); }
.ctx-falling .ctx-tile-change { color: var(--negative); }
.ctx-flat    .ctx-tile-change { color: var(--text-muted); }

.ctx-rising  .ctx-tile-price  { color: var(--text); }
.ctx-falling .ctx-tile-price  { color: var(--text); }

.ctx-arrow { font-size: 9px; }

.ctx-flat-label {
  color: var(--text-muted);
  font-size: 10px;
}

.ctx-unavailable {
  color: var(--text-muted);
}

/* Loading shimmer */
.ctx-panel-refreshing {
  opacity: 0.7;
  pointer-events: none;
}

.ctx-loading-text {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

@keyframes shimmer {
  0%   { opacity: 0.4; }
  50%  { opacity: 0.7; }
  100% { opacity: 0.4; }
}

.ctx-shimmer .ctx-placeholder {
  animation: shimmer 1.2s ease-in-out infinite;
  color: var(--text-muted);
}

/* Responsive: stack to 2-3 columns on small screens */
@media (max-width: 700px) {
  .ctx-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .ctx-tile {
    border-bottom: 1px solid var(--border);
  }
  .ctx-tile:last-child {
    grid-column: span 2;
  }
}

/* ── Charts Tab ─────────────────────────────────────────────────────────────── */
.chart-panel-card {
  padding: 0;
  overflow: hidden;
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.chart-controls-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-symbol-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chart-ctrl-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.chart-select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
  padding: 4px 8px;
  cursor: pointer;
  min-width: 72px;
}
.chart-select:focus { outline: none; border-color: var(--blue); }

.chart-slash {
  font-size: 18px;
  color: var(--text-muted);
  padding-top: 14px;
}

.chart-load-btn {
  margin-top: 14px;
  padding: 5px 14px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.chart-load-btn:hover { opacity: 0.85; }

.chart-interval-group {
  display: flex;
  gap: 4px;
}

.chart-interval-btn {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.chart-interval-btn:hover  { color: var(--text); border-color: var(--blue); }
.chart-interval-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }

.chart-quick-pairs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chart-quick-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-elevated);
  color: var(--text-sec);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.chart-quick-btn:hover { border-color: var(--blue); color: var(--blue); }

.chart-symbol-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.chart-active-symbol {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
  letter-spacing: 0.5px;
}

.chart-active-interval {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  background: rgba(75,158,255,0.12);
  padding: 2px 8px;
  border-radius: 3px;
}

.tv-chart-container {
  min-height: 560px;
  background: #131722;
}
.tv-chart-container iframe {
  display: block;
}

.chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Chart link button (on trade rows & cards) ───────────────────────────── */
.chart-link-btn {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  font-size: 11px;
  padding: 1px 5px;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
  transition: all 0.15s;
  line-height: 1;
}
.chart-link-btn:hover {
  color: var(--blue);
  border-color: var(--blue);
}

/* ── Tab bar — divider + commodity tab accent ────────────────────────────── */
.tab-divider {
  width: 1px;
  background: var(--border);
  margin: 8px 6px;
  flex-shrink: 0;
}
.tab.tab-commodity {
  color: var(--text-muted);
  font-size: 11px;
}
.tab.tab-commodity.active {
  color: var(--caution);
  border-bottom-color: var(--caution);
}
.tab.tab-commodity:hover { color: var(--caution); }

/* ── Commodity / Indices tab layout ─────────────────────────────────────── */
.commodity-panel-body {
  padding: 0;
}

.comm-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 860px) {
  .comm-layout { grid-template-columns: 1fr; }
}

/* Left column */
.comm-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Asset hero card */
.comm-asset-hero {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 18px 20px;
  background: var(--surface);
}
.comm-asset-hero.ctx-rising  { border-color: rgba(34,197,94,0.25); }
.comm-asset-hero.ctx-falling { border-color: rgba(239,68,68,0.25); }
.comm-asset-hero.comm-hero-nodata { opacity: 0.5; }

.comm-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.comm-hero-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.comm-hero-price {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
}
.comm-hero-change {
  text-align: right;
}
.comm-hero-arrow { font-size: 20px; margin-right: 4px; }
.comm-hero-pct   { font-size: 16px; font-weight: 700; font-family: var(--font-mono); }
.ctx-rising .comm-hero-arrow,
.ctx-rising .comm-hero-pct  { color: var(--positive); }
.ctx-falling .comm-hero-arrow,
.ctx-falling .comm-hero-pct { color: var(--negative); }
.ctx-flat .comm-hero-arrow  { color: var(--text-muted); }

.comm-hero-impact {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 2px;
}
.comm-hero-note {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 6px;
}

/* Secondary asset (Nasdaq on indices tab) */
.comm-secondary-asset {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 10px 14px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 10px;
}
.comm-sec-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; flex: 1; }
.comm-sec-price { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.comm-sec-arrow { font-size: 13px; }
.comm-sec-pct   { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.ctx-rising .comm-sec-arrow,  .ctx-rising .comm-sec-pct  { color: var(--positive); }
.ctx-falling .comm-sec-arrow, .ctx-falling .comm-sec-pct { color: var(--negative); }

/* Alignment card */
.comm-alignment-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 16px 20px;
  background: var(--surface);
}
.comm-align-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.comm-align-value {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
.align-very-strong { color: var(--positive); }
.align-strong      { color: #86efac; }
.align-neutral     { color: var(--text-sec); }
.align-weak        { color: var(--caution); }
.align-very-weak   { color: var(--negative); }
.comm-align-score  { font-size: 11px; color: var(--text-sec); margin-bottom: 4px; }
.comm-align-note   { font-size: 10px; color: var(--text-muted); }

/* Rationale card */
.comm-rationale-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 16px 20px;
  background: var(--surface);
}
.comm-rat-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.comm-rat-text {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.6;
}

/* Right column — related currencies */
.comm-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.comm-currencies-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.comm-currencies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* Related currency card */
.comm-currency-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}
.comm-currency-card:hover { border-color: var(--border-hover); }
.comm-currency-card.strong     { border-color: rgba(34,197,94,0.2); }
.comm-currency-card.very-strong{ border-color: rgba(34,197,94,0.3); }
.comm-currency-card.weak       { border-color: rgba(245,158,11,0.2); }
.comm-currency-card.very-weak  { border-color: rgba(239,68,68,0.25); }

.comm-cc-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.comm-cc-flag     { font-size: 22px; }
.comm-cc-identity { flex: 1; }
.comm-cc-code     { font-size: 16px; font-weight: 700; display: block; }
.comm-cc-name     { font-size: 10px; color: var(--text-muted); }
.comm-cc-score    { font-size: 20px; font-weight: 700; font-family: var(--font-mono); }
.comm-cc-score.positive { color: var(--positive); }
.comm-cc-score.negative { color: var(--negative); }
.comm-cc-score.neutral  { color: var(--text-muted); }

.comm-cc-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comm-cc-bar { margin: 2px 0; }

.comm-cc-factors { display: flex; flex-direction: column; gap: 5px; }
.comm-cc-factor  { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.comm-factor-chip {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.comm-factor-name { color: var(--text-sec); }

.comm-not-tracked {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.comm-no-currencies {
  font-size: 12px;
  color: var(--text-muted);
  padding: 20px 0;
}