:root {
  --bg: #050508;
  --panel: #0a0a0f;
  --panel-head: #08080d;
  --panel-2: #1c2230;
  --panel-hi: #22293a;
  --border: #1a1a2a;
  --fg: #e8ecf1;
  --muted: #9ca3af;
  --green: #7ee787;
  --green-bg: #1f3a2a;
  --red: #f85149;
  --red-bg: #3a1f1f;
  --blue: #58a6ff;
  --blue-bg: #1f2f3a;
  --yellow: #e3b341;
  --accent: #7ee787;

  --chakra-crown: #a855f7;
  --chakra-eye: #8b5cf6;
  --chakra-throat: #58a6ff;
  --chakra-heart: #7ee787;
  --chakra-solar: #e3b341;
  --chakra-sacral: #ff7b00;
  --chakra-root: #f85149;
}

* { box-sizing: border-box; }

/* ── Global motion system ── */

/* Value flash — numbers glow when they change */
.val-up { animation: val-flash-green 1s ease-out; }
.val-down { animation: val-flash-red 1s ease-out; }
@keyframes val-flash-green {
  0% { color: #2ea043; text-shadow: 0 0 12px rgba(46, 160, 67, 0.6); transform: scale(1.02); }
  100% { color: inherit; text-shadow: none; transform: scale(1); }
}
@keyframes val-flash-red {
  0% { color: #f85149; text-shadow: 0 0 12px rgba(248, 81, 73, 0.5); transform: scale(1.02); }
  100% { color: inherit; text-shadow: none; transform: scale(1); }
}

/* Smooth transitions on everything that changes */
.animated-val { transition: color 0.3s ease; }

/* Data arrive — new items slide in */
.data-fresh { animation: data-arrive 0.5s ease-out; }
@keyframes data-arrive {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Live dot — pulses to show connection is alive */
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #2ea043; margin-right: 6px;
  animation: live-dot-pulse 2s ease-in-out infinite;
}
@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px #2ea043; }
  50% { opacity: 0.3; box-shadow: none; }
}

/* Ambient glow — subtle top border shimmer showing data is flowing */
.ambient-glow {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  background: linear-gradient(90deg, transparent, #58a6ff, #2ea043, #58a6ff, transparent);
  background-size: 200% 100%;
  animation: ambient-flow 4s linear infinite;
  opacity: 0.6; pointer-events: none;
}
@keyframes ambient-flow {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Pill animations — direction pills pop in */
.pill { transition: transform 0.2s ease, opacity 0.2s ease; }
.pill.green { text-shadow: 0 0 6px rgba(46, 160, 67, 0.3); }
.pill.red { text-shadow: 0 0 6px rgba(248, 81, 73, 0.3); }

/* Card hover lift */
.panel:hover { border-color: #30363d; }

/* Status pill subtle glow */
.status-pill.s-active { animation: status-glow 2s ease-in-out infinite; }
@keyframes status-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(46, 160, 67, 0.3); }
  50% { box-shadow: 0 0 8px rgba(46, 160, 67, 0.5); }
}

/* Closes list — items slide in on update */
.close-row { animation: close-slide-in 0.4s ease-out; }
@keyframes close-slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Signal heat cards — subtle breathing when active */
.signal-card { transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.2s ease; }
.signal-card:hover { transform: translateY(-1px); }

/* Market intel table rows — highlight on change */
.market-row { transition: background 0.3s ease; }
.market-row.updated { background: rgba(88, 166, 255, 0.05); }
}
html, body, #root { margin: 0; min-height: 100%; }
html { overflow-x: hidden; }
body { overflow-x: hidden; overscroll-behavior-x: none; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
select, button, input {
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  font-family: inherit;
}
button { cursor: pointer; }
button:hover { border-color: var(--accent); }

/* ====================================================================
 * Layout
 * Top header is sticky. Main is a vertical stack of "rows":
 *   row-primary  — left rail (positions + goal) beside a wide chart.
 *   row-split    — closes beside signals (recent activity).
 *   row-three    — pressure / news / per-pair (reference).
 * ==================================================================== */
.app { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; max-width: 100vw; }

header.top {
  padding: 8px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  backdrop-filter: blur(12px);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.05em;
}
.pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.subtitle { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: normal; }
.viewer-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(126, 231, 135, 0.1);
  border: 1px solid rgba(126, 231, 135, 0.2);
  border-radius: 12px;
  padding: 2px 10px;
  margin-left: 4px;
}

/* Clock — ticks every second, shows UTC + session context */
.clock {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.clock-utc {
  font-family: ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.clock-session {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.clock-session.green  { color: var(--green);  background: var(--green-bg); }
.clock-session.blue   { color: var(--blue);   background: var(--blue-bg); }
.clock-session.yellow { color: var(--yellow); background: #3a2f1f; }
.clock-session.muted  { color: var(--muted);  background: var(--panel-2); }
.clock-session.red    { color: var(--red);    background: var(--red-bg); }
.clock-hint { font-size: 12px; }
.clock-countdown { font-size: 12px; font-variant-numeric: tabular-nums; }
.clock-countdown strong { color: var(--fg); font-weight: 600; }
@media (max-width: 820px) {
  .clock-hint { display: none; }
}

.cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.card .label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.exec-badge {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: none;
}
.exec-badge.sim   { color: var(--muted); background: var(--panel-2); }
.exec-badge.oanda { color: var(--green); background: var(--green-bg); }
.card .value { font-size: 24px; font-weight: 600; margin-top: 4px; }
.card .hint  { font-size: 12px; color: var(--muted); margin-top: 4px; }
.progress {
  height: 10px;
  background: var(--panel-2);
  border-radius: 5px;
  overflow: hidden;
  margin: 10px 0 4px;
}
.progress.tiny { height: 6px; margin: 4px 0 2px; }
.progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--accent));
  width: 0;
  transition: width 0.6s;
}

main { display: flex; flex-direction: column; gap: 16px; overflow-x: hidden; }

/* Today's stats bar — TUI style */
.stats-bar {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 6px 16px;
  background: #0c0c0c;
  border: 1px solid #333;
  border-radius: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
}
.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 2px;
}
.stat-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
@media (max-width: 480px) {
  .stats-bar { gap: 8px; padding: 6px 12px; flex-wrap: wrap; justify-content: center; }
  .stat-value { font-size: 13px; }
  .stat-label { font-size: 9px; }
  .stat-item { min-width: 60px; }
}

/* Model status bar */
.models-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  justify-content: center;
}
.model-card {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
}
.model-label {
  font-weight: 700; color: #79c0ff; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.05em;
  min-width: 60px;
  display: flex; align-items: center; gap: 4px;
}
.model-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(121,192,255,0.15);
  color: #79c0ff; font-size: 8px; font-weight: 700;
  font-style: italic; cursor: help;
  flex-shrink: 0; position: relative;
}
.model-info:hover {
  background: rgba(121,192,255,0.3);
}
.model-info[title]:hover::after {
  content: attr(title);
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); margin-top: 6px;
  background: #1c2230; color: #ccc;
  border: 1px solid #444; border-radius: 6px;
  padding: 8px 12px; font-size: 11px; font-style: normal;
  font-weight: 400; letter-spacing: 0; text-transform: none;
  width: 260px; line-height: 1.5;
  z-index: 100; pointer-events: none;
  white-space: normal;
}
.model-metrics { display: flex; gap: 10px; }
.model-metric { display: flex; align-items: center; gap: 3px; }
.model-metric-label { color: #777; font-size: 9px; text-transform: uppercase; }
.model-metric-value {
  color: var(--fg); font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .models-bar { padding: 6px 12px; gap: 6px; font-size: 10px; }
  .model-card { padding: 3px 8px; gap: 6px; }
  .model-label { font-size: 9px; min-width: 50px; }
  .model-metric-value { font-size: 11px; }
}

.row { display: grid; gap: 16px; overflow: hidden; }
.row-two   { grid-template-columns: 1fr 1fr; }
.row-three { grid-template-columns: 1fr 1fr 1fr; }
.row-three > * { min-width: 0; overflow: hidden; }
.row-full  { grid-template-columns: 1fr; }
@media (max-width: 1200px) {
  .row-three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .row-two   { grid-template-columns: 1fr; }
  .row-three { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .row-three { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* Compounding calculator */
.calc-panel { display: flex; flex-direction: column; }
.calc-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}
.calc-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.calc-field input {
  width: 90px;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}
.calc-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.calc-presets button {
  font-size: 12px;
  padding: 4px 10px;
}
.calc-presets strong { margin-left: 4px; color: var(--accent); }
.calc-table { font-size: 13px; }
.calc-table td, .calc-table th { padding: 6px 8px; }
.calc-footer {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--panel-2);
  border-radius: 4px;
  border-left: 3px solid var(--yellow);
}
.calc-footer strong { color: var(--yellow); }

/* Panel shell — TUI style */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0;
  overflow: hidden;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  contain: content;
  transition: padding 0.2s ease, border-color 0.6s ease, box-shadow 0.6s ease;
  position: relative;
}
.panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--chakra-throat), transparent);
  opacity: 0.25;
  pointer-events: none;
}
.panel.panel-pulse {
  border-color: #58a6ff;
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.15);
}
.panel.panel-pulse-green {
  border-color: #2ea043;
  box-shadow: 0 0 16px rgba(46, 160, 67, 0.2);
}
.panel.panel-pulse-red {
  border-color: #f85149;
  box-shadow: 0 0 16px rgba(248, 81, 73, 0.15);
}
.panel-title {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px 12px;
  background: var(--panel-head);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.panel-title .panel-indicator {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--chakra-heart);
  box-shadow: 0 0 4px var(--chakra-heart);
  flex-shrink: 0;
  animation: live-dot-pulse 2s ease-in-out infinite;
}
.panel > *:not(.panel-title) {
  padding-left: 16px;
  padding-right: 16px;
}
.panel > *:last-child {
  padding-bottom: 14px;
}
.panel > *:not(.panel-title):first-child {
  padding-top: 10px;
}
.panel > table {
  padding: 0;
}
.panel > .table-scroll-wrap {
  padding-left: 0;
  padding-right: 0;
}
.panel-sub {
  font-size: 11px; line-height: 1.5; color: #777;
  padding: 4px 16px 8px !important;
  white-space: normal; word-break: break-word;
}
.panel > .panel-title + * {
  padding-top: 8px;
}
.panel-title .muted { font-weight: normal; font-size: 12px; line-height: 1.3; }
.panel-subtitle {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin: -4px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

/* Chart */
.chart-col { min-width: 0; }
.chart { width: 100%; height: 440px; background: var(--bg); border-radius: 4px; }
.chart-panel { overflow: hidden; }
.chart-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chart-pair-select { display: flex; align-items: center; gap: 8px; }
.chart-pair-select select {
  font-size: 15px; font-weight: 600; background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px;
  min-height: 36px; cursor: pointer;
}
.chart-title-right { display: flex; align-items: center; gap: 10px; }
.chart-controls-toggle {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; font-size: 11px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.chart-controls-toggle:hover { color: var(--fg); border-color: var(--accent); }
.strength-edge { font-size: 11px; font-weight: 600; }
.chart-price-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.chart-current-price {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.chart-price-change {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) { .chart { height: 320px; } }

/* Utility colors */
.green  { color: var(--green); }
.red    { color: var(--red); }
.muted  { color: var(--muted); }
.yellow { color: var(--yellow); }
.blue   { color: var(--blue); }

/* Table scroll wrapper — enables horizontal scroll on mobile for wide tables */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Tables */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th {
  text-align: left;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  white-space: nowrap;
}
td { padding: 8px 10px; border-bottom: 1px solid var(--panel-2); }
tbody tr:hover { background: var(--panel-2); }
td.num, th.num { text-align: right; }

/* Daily-history drill-down: nested trade table under a day row */
tr.daily-detail { background: var(--bg); }
tr.daily-detail:hover { background: var(--bg); }
tr.daily-detail > td { padding: 4px 0 10px 0; }
table.inner { font-size: 12px; }
table.inner th { padding: 4px 8px; font-size: 10px; }
table.inner td { padding: 4px 8px; border-bottom: 1px solid var(--panel-2); }
table.inner tbody tr:hover { background: var(--panel-2); }

/* Pills */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pill.long   { background: var(--green-bg); color: var(--green); }
.pill.short  { background: var(--red-bg);   color: var(--red); }
.pill.fired  { background: var(--blue-bg);  color: var(--blue); }
.pill.no     { background: #2a2a2a;         color: var(--muted); }
.pill.high   { background: #3a1f1f;         color: var(--red); }
.pill.medium { background: #3a2f1f;         color: var(--yellow); }
.pill.low    { background: #1f3a2a;         color: var(--green); }

/* =====================================================================
 * Live trades panel — one big card per open position. Easier to glance
 * than a table when there are 0–3 positions (the common case).
 * ===================================================================== */
.live-panel {
  border: 1px solid var(--border);
  min-height: 120px;
}
.pos-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pos-card {
  min-height: 90px;
}
/* When there are no positions, keep the empty-state as a centered row */
.pos-cards:empty { display: none; }
.pos-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.pos-card:hover:not(.pos-card-empty) { border-color: var(--accent); }

/* Empty slot */
.pos-card-empty {
  border-style: dashed;
  opacity: 0.6;
  cursor: default;
}
.empty-slot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}
.empty-ring {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.empty-icon {
  font-size: 20px;
  color: var(--muted);
  opacity: 0.4;
  animation: empty-pulse 3s ease-in-out infinite;
}
@keyframes empty-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}
.empty-text { flex: 1; }
.empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
}
.empty-sub {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.7;
}
.scanning-pair {
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s;
}
.empty-pills {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.pos-card.selected {
  border-color: var(--blue);
  background: var(--panel-hi);
  box-shadow: 0 0 0 1px var(--blue-bg);
}
.pos-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.pos-head strong { font-size: 15px; letter-spacing: 0.02em; }
.pos-age { margin-left: auto; font-size: 11px; }

.refresh-btn {
  margin-left: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 16px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.refresh-btn:hover {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--panel-hi);
}
.refresh-btn.spinning {
  animation: spin-once 0.6s ease-in-out;
  color: var(--accent);
  border-color: var(--accent);
}
@keyframes spin-once {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Card glow states --- */
.card-glow-win {
  border-color: rgba(46, 160, 67, 0.4) !important;
  box-shadow: 0 0 20px rgba(46, 160, 67, 0.12), inset 0 1px 0 rgba(46, 160, 67, 0.08);
  animation: card-breathe-win 3s ease-in-out infinite;
}
@keyframes card-breathe-win {
  0%, 100% { box-shadow: 0 0 16px rgba(46, 160, 67, 0.1); }
  50% { box-shadow: 0 0 24px rgba(46, 160, 67, 0.2); }
}
.card-glow-lose {
  border-color: rgba(248, 81, 73, 0.35) !important;
  box-shadow: 0 0 16px rgba(248, 81, 73, 0.08), inset 0 1px 0 rgba(248, 81, 73, 0.06);
  animation: card-breathe-lose 3s ease-in-out infinite;
}
@keyframes card-breathe-lose {
  0%, 100% { box-shadow: 0 0 12px rgba(248, 81, 73, 0.06); }
  50% { box-shadow: 0 0 20px rgba(248, 81, 73, 0.14); }
}

/* AI confidence badge */
.conf-badge {
  position: relative;
  overflow: hidden;
  padding: 2px 10px;
  border-radius: 10px;
  border: 1px solid rgba(136, 98, 255, 0.3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.conf-bar {
  position: absolute;
  inset: 0;
  width: var(--conf-pct);
  background: linear-gradient(90deg, rgba(136, 98, 255, 0.15), rgba(136, 98, 255, 0.35));
  transition: width 0.6s ease;
}
.conf-text {
  position: relative;
  color: rgb(176, 148, 255);
  text-shadow: 0 0 8px rgba(136, 98, 255, calc(var(--conf-alpha) * 0.6));
}

/* Live badge */
.pos-live-badge {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.pos-live-badge.is-live {
  color: var(--green);
  border-color: rgba(46, 160, 67, 0.4);
  background: rgba(46, 160, 67, 0.08);
  animation: live-blink 2s ease-in-out infinite;
}
@keyframes live-blink {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.countdown-ring-mini { width: 18px; height: 18px; flex-shrink: 0; }
/* Signal pipeline */
.signal-pipeline-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 8px 0 4px; margin-bottom: 8px; position: relative; z-index: 2;
}
.tag-strong { color: #00ff88; background: rgba(0,255,136,0.1); border: 1px solid rgba(0,255,136,0.2); }
.tag-neutral { color: var(--muted); background: var(--bg); border: 1px solid var(--border); }
.tag-toxic { color: #f85149; background: rgba(248,81,73,0.08); border: 1px solid rgba(248,81,73,0.2); }
@keyframes section-glow {
  0%, 100% { border-color: rgba(59, 130, 246, 0.12); box-shadow: 0 0 8px rgba(59, 130, 246, 0.04); }
  33% { border-color: rgba(20, 184, 166, 0.12); box-shadow: 0 0 8px rgba(20, 184, 166, 0.04); }
  66% { border-color: rgba(0, 255, 136, 0.12); box-shadow: 0 0 8px rgba(0, 255, 136, 0.04); }
}
/* Status indicator dots */
.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.dot-live {
  background: #00ff88;
  box-shadow: 0 0 4px #00ff88;
  animation: status-pulse-green 1.5s ease-in-out infinite;
}
.status-dot.dot-stale {
  background: #d29922;
  box-shadow: 0 0 4px rgba(210, 153, 34, 0.6);
  animation: status-pulse-amber 2s ease-in-out infinite;
}
.status-dot.dot-error {
  background: #f85149;
  box-shadow: 0 0 4px rgba(248, 81, 73, 0.6);
}
@keyframes status-pulse-green {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 4px rgba(0, 255, 136, 0.3); }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(0, 255, 136, 0.6); }
}
@keyframes status-pulse-amber {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 4px rgba(210, 153, 34, 0.3); }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(210, 153, 34, 0.6); }
}
.ai-target {
  color: rgba(0, 255, 136, 0.9);
  font-weight: 600;
}
.ai-action {
  color: rgba(255, 200, 50, 0.9);
  font-weight: 600;
}

/* AI position decisions */
.ai-pos-decisions { display: flex; flex-direction: column; gap: 6px; }
.ai-pos-dec {
  border-radius: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
}
.dec-hold { background: rgba(46, 160, 67, 0.08); border-color: rgba(46, 160, 67, 0.25); }
.dec-close { background: rgba(248, 81, 73, 0.08); border-color: rgba(248, 81, 73, 0.25); }
.dec-enter { background: rgba(88, 166, 255, 0.08); border-color: rgba(88, 166, 255, 0.25); }
.dec-skip { background: rgba(139, 148, 158, 0.06); border-color: rgba(139, 148, 158, 0.15); }
.ai-pos-dec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ai-pos-dec-pair {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}
.ai-pos-dec-badge {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 4px;
}
.badge-hold { background: rgba(46, 160, 67, 0.2); color: #2ea043; }
.badge-close { background: rgba(248, 81, 73, 0.2); color: #f85149; }
.badge-enter { background: rgba(88, 166, 255, 0.2); color: #58a6ff; }
.badge-skip { background: rgba(139, 148, 158, 0.15); color: #8b949e; }
.ai-pos-dec-reason {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
}

/* AI Trading Desk */
.ai-desk-agents { display: flex; flex-direction: column; gap: 8px; }
@keyframes avatar-pulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 0; }
}
.avatar-strat { background: linear-gradient(135deg, #1a3a5c, #2563eb); color: #93c5fd; border: 1px solid rgba(59,130,246,0.4); }
.avatar-strat::before, .avatar-strat::after { border-color: rgba(59,130,246,0.5); animation-duration: 2.2s; }
.avatar-tech { background: linear-gradient(135deg, #1a3c3c, #0d9488); color: #5eead4; border: 1px solid rgba(20,184,166,0.4); }
.avatar-tech::before, .avatar-tech::after { border-color: rgba(20,184,166,0.5); animation-duration: 2.8s; }
.avatar-risk { background: linear-gradient(135deg, #3c2a1a, #d97706); color: #fcd34d; border: 1px solid rgba(245,158,11,0.4); }
.avatar-risk::before, .avatar-risk::after { border-color: rgba(245,158,11,0.5); animation-duration: 1.8s; }
.avatar-head { background: linear-gradient(135deg, #1a3c2a, #16a34a); color: #86efac; border: 1px solid rgba(22,163,74,0.4); }
.avatar-head::before, .avatar-head::after { border-color: rgba(22,163,74,0.5); animation-duration: 3s; }
.desk-agent-content { flex: 1; min-width: 0; }
.desk-agent-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.desk-agent-name {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(0, 200, 255, 0.6);
}
.desk-verdict-header { display: flex; align-items: flex-start; gap: 10px; }
.desk-agent-bias {
  font-weight: 700; font-size: 11px; padding: 1px 6px; border-radius: 3px;
}
.bias-bull { background: rgba(46,160,67,0.2); color: #2ea043; }
.bias-bear { background: rgba(248,81,73,0.2); color: #f85149; }
.bias-mixed { background: rgba(227,179,65,0.2); color: #e3b341; }
.desk-agent-heat { font-weight: 700; font-size: 11px; padding: 1px 6px; border-radius: 3px; }
.heat-low { background: rgba(46,160,67,0.2); color: #2ea043; }
.heat-medium { background: rgba(227,179,65,0.2); color: #e3b341; }
.heat-high { background: rgba(248,81,73,0.2); color: #f85149; }
.desk-agent-detail { color: rgba(255,255,255,0.5); font-size: 11px; }
.ai-desk-consensus {
  font-size: 12px; color: rgba(255,255,255,0.7);
  padding: 8px; margin-top: 6px;
  background: rgba(0, 200, 255, 0.04);
  border: 1px solid rgba(0, 200, 255, 0.08);
  border-radius: 6px; line-height: 1.5;
}
.desk-consensus-label {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 8px; font-weight: 700; letter-spacing: 0.15em;
  color: rgba(0, 200, 255, 0.4); display: block; margin-bottom: 4px;
}
.desk-dissent {
  color: rgba(248,81,73,0.7); font-style: italic;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(248,81,73,0.1);
  font-size: 11px; line-height: 1.5;
}

/* AI pair scoring grid */
.ai-pairs { display: flex; flex-direction: column; gap: 4px; }
.ai-pair-score {
  font-family: "SF Mono", "Fira Code", monospace;
  font-weight: 800;
  font-size: 13px;
  min-width: 36px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 4px;
}
.ai-pair-name {
  color: rgba(255, 255, 255, 0.9);
  min-width: 65px;
  font-weight: 700;
}
.ai-pair-reason {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  flex: 1;
  line-height: 1.4;
}
@keyframes text-reveal {
  from { clip-path: inset(0 100% 0 0); opacity: 0.4; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
.ai-desk-consensus { animation: text-reveal 0.8s ease-out 0.45s both; }
/* Consensus meter — S/T/R indicator circles */
.consensus-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.consensus-node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 10px;
  font-weight: 800;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
  position: relative;
}
.consensus-node.node-agree {
  border-color: rgba(0, 255, 136, 0.5);
  color: #00ff88;
  background: rgba(0, 255, 136, 0.08);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.15);
}
.consensus-node.node-disagree {
  border-color: rgba(248, 81, 73, 0.5);
  color: #f85149;
  background: rgba(248, 81, 73, 0.08);
  box-shadow: 0 0 10px rgba(248, 81, 73, 0.15);
}
.consensus-node.node-agree::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 136, 0.2);
  animation: consensus-ping 2s ease-out infinite;
}
@keyframes consensus-ping {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.5); opacity: 0; }
}
.consensus-wire {
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
}
.consensus-wire.wire-active {
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.3), rgba(0, 200, 255, 0.3));
  animation: wire-flow 1.5s ease-in-out infinite;
}
@keyframes wire-flow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}
.consensus-arrow {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid rgba(255, 255, 255, 0.06);
}
.consensus-arrow.arrow-active {
  border-left-color: rgba(0, 255, 136, 0.4);
}
.consensus-verdict-label {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(0, 200, 255, 0.4);
  margin-left: 4px;
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* --- Hero area: ring + P&L --- */
.pos-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 12px;
}

/* Countdown ring */
.ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.ring-svg { width: 100%; height: 100%; }
.ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ring-time {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  line-height: 1;
}
.ring-safety {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
  transition: color 0.8s;
}

/* P&L + details right of ring */
.pos-hero-right, .pos-hero-left {
  flex: 1;
  min-width: 0;
}
.pos-hero-pnl {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.pos-hero-pnl.green { text-shadow: 0 0 20px rgba(46, 160, 67, 0.25); }
.pos-hero-pnl.red   { text-shadow: 0 0 20px rgba(248, 81, 73, 0.2); }
.pos-hero-pips {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  opacity: 0.85;
}
.pos-hero-price {
  font-size: 12px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* --- Status pills --- */
.pos-status-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.status-pill {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.status-pill.s-ok {
  background: rgba(46, 160, 67, 0.08);
  color: var(--green);
  border: 1px solid rgba(46, 160, 67, 0.2);
}
.status-pill.s-active {
  background: rgba(56, 139, 253, 0.1);
  color: var(--blue);
  border: 1px solid rgba(56, 139, 253, 0.25);
  animation: pill-pulse 2s ease-in-out infinite;
}
@keyframes pill-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.status-pill.s-session {
  background: rgba(139, 148, 158, 0.08);
  color: var(--fg);
  border: 1px solid var(--border);
}
.status-pill.s-warn {
  background: rgba(210, 153, 34, 0.1);
  color: var(--yellow);
  border: 1px solid rgba(210, 153, 34, 0.3);
}
.status-pill.s-wait {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* --- Entry row --- */
.pos-entry-row {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

/* Ticker digit animation */
.tick-digit {
  display: inline-block;
  transition: color 0.3s;
}
.tick-static {
  display: inline-block;
}
.tick-digit.tick-up {
  animation: tickUp 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.tick-digit.tick-down {
  animation: tickDown 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tickUp {
  0%   { transform: translateY(40%); opacity: 0.3; }
  100% { transform: translateY(0);   opacity: 1;   }
}
@keyframes tickDown {
  0%   { transform: translateY(-40%); opacity: 0.3; }
  100% { transform: translateY(0);    opacity: 1;   }
}

/* Spread health meter — one row per pair */
.spreads-panel .panel-subtitle { margin-bottom: 10px; }
.spread-rows {
  display: flex; flex-direction: column; gap: 6px;
}
.spread-row {
  display: grid;
  grid-template-columns: 70px 1fr 50px 60px;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.spread-pair {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.spread-track {
  position: relative;
  height: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.spread-fill {
  height: 100%;
  transition: width 0.6s ease-out, background-color 0.4s;
  border-radius: 2px 0 0 2px;
}
.spread-fill.tight { background: var(--green); }
.spread-fill.ok    { background: var(--blue); }
.spread-fill.wide  { background: var(--yellow); }
.spread-fill.spike { background: var(--red); }
.spread-baseline {
  /* tick at 1.0x = 20% of the 5x cap = the "normal" reference */
  position: absolute;
  left: 20%;
  top: -2px;
  width: 1px;
  height: 12px;
  background: var(--muted);
  opacity: 0.6;
}
.spread-ratio {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}
.spread-ratio.tight { color: var(--green); }
.spread-ratio.ok    { color: var(--blue); }
.spread-ratio.wide  { color: var(--yellow); }
.spread-ratio.spike { color: var(--red); }
.spread-pips { font-size: 11px; }

/* Goal panel compact variant */
.goal-panel .goal-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
}
.goal-panel .goal-row-label {
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.goal-panel .goal-row-val {
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.goal-proj { margin-top: 12px; font-size: 12px; }

/* Chart legend dots */
.chart-legend { display: flex; gap: 8px; font-size: 11px; color: var(--muted); }
.chart-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 4px 10px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 8px;
  font-size: 12px;
}
.feature-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.feature-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
.feature-swatch {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
}
.feature-label { color: var(--muted); font-variant-numeric: tabular-nums; }
.feature-toggle:hover .feature-label { color: var(--fg); }
.cross-pair-strength {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 4px 6px;
  font-size: 11px;
  align-items: center;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 4px;
}
.cross-pair-strength strong { color: var(--fg); margin-right: 2px; }

/* Signal heat grid — 3 / 1 / 3 layout, height-fill per pair */
.signals-grid-panel { padding-bottom: 6px; overflow: hidden; }
.signals-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}
.signals-row {
  display: grid;
  gap: 8px;
}
.signals-row.r-3 { grid-template-columns: repeat(3, 1fr); }
.signals-row.r-1 {
  grid-template-columns: minmax(0, 1fr);
  /* center the single card to feel like a hub */
  width: 33.33%;
  margin: 0 auto;
}
.sig-card {
  position: relative;
  overflow: hidden;
  height: 110px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--panel-2);
  transition: border-color 0.2s, transform 0.15s;
}
.sig-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.sig-card.selected { border-color: var(--accent); border-width: 2px; }
.sig-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.25;
  overflow: visible;
  /* Spring overshoot on height changes — fill rises and bounces slightly
   * past the target before settling, like water with momentum. */
  transition: height 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.4s,
              opacity 0.3s;
}
.sig-card.fire .sig-fill { opacity: 0.45; }
.sig-card.near .sig-fill { opacity: 0.35; }
.sig-card:hover .sig-fill { opacity: 0.55; }
/* Fluid shimmer — animated gradient sweeps across the fill on hover.
 * The pseudo-element rides on top of the colored fill at low opacity, so
 * the underlying band color stays visible while the shimmer suggests
 * motion. Animation only runs when the user is hovering — idle cards
 * stay still so the panel doesn't feel busy. */
.sig-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%,
    transparent 100%
  );
  transform: translateX(-100%);
  pointer-events: none;
}
.sig-card:hover .sig-fill::before {
  animation: sig-shimmer 2.4s ease-in-out infinite;
}
@keyframes sig-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* Slow vertical "breathing" — fill height pulses ±2% on hover, suggesting
 * the level is alive and responsive, not a static bar. */
.sig-card:hover .sig-fill {
  animation: sig-breathe 3.2s ease-in-out infinite;
}
@keyframes sig-breathe {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.15) saturate(1.2); }
}

/* Animated wave surface — two SVGs at the top edge of the fill, scrolling
 * horizontally at different speeds for a parallax water-surface feel. The
 * SVG is positioned so its midline (y=5) sits right at the top of the
 * fill — the wave crest peeks above the static top line, and the trough
 * dips below into the colored fill. */
.sig-wave {
  position: absolute;
  left: -50%;
  right: -50%;
  width: 200%;
  top: -8px;
  height: 12px;
  pointer-events: none;
}
.sig-wave.wave-back {
  opacity: 0.55;
  animation: wave-scroll-back 6s linear infinite;
}
.sig-wave.wave-front {
  opacity: 0.85;
  animation: wave-scroll-front 4s linear infinite;
}
@keyframes wave-scroll-back {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}
@keyframes wave-scroll-front {
  0%   { transform: translateX(-25%); }
  100% { transform: translateX(0); }
}
/* Hover amplifies the wave amplitude via vertical stretch */
.sig-card:hover .sig-wave {
  animation-duration: 2.5s, 1.8s;
}
.sig-card:hover .sig-wave.wave-back { transform: scaleY(1.4); }
.sig-card:hover .sig-wave.wave-front { transform: scaleY(1.6); }

/* Splash ripple on click — circle expands from click point and fades. */
.sig-splash {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: sig-splash-ripple 700ms ease-out forwards;
  filter: blur(1px);
}
@keyframes sig-splash-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.9;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(28);
    opacity: 0;
  }
}
.sig-threshold-line {
  /* dashed horizontal line at 75% from bottom = the fire threshold */
  position: absolute;
  bottom: 75%;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.sig-content {
  position: relative;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.sig-pair-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sig-pair {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sig-arrow {
  font-size: 16px;
  font-weight: 700;
}
.sig-arrow.long { color: var(--green); }
.sig-arrow.short { color: var(--red); }
.sig-arrow.muted { color: var(--muted); opacity: 0.5; }
.sig-conf {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sig-age {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle;
}
.dot.blue   { background: var(--blue); }
.dot.green  { background: var(--green); }
.dot.yellow { background: var(--yellow); }
.dot.red    { background: var(--red); }

/* Pressure bar */
.bb-bar {
  position: relative;
  width: 100%; min-width: 120px; max-width: 220px;
  height: 12px;
  background: var(--panel-2);
  border-radius: 3px;
  overflow: hidden;
}
.bb-bar .center {
  position: absolute;
  left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--border);
}
.bb-bar .dot-marker {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px currentColor;
}

/* Confetti overlay */
.confetti-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 100;
}
.win-toast {
  position: fixed; top: 24px; right: 24px;
  background: var(--green-bg); color: var(--green);
  padding: 16px 24px; border-radius: 8px;
  font-size: 18px; font-weight: 700;
  border: 1px solid var(--green);
  animation: slide-in 0.4s ease-out;
  z-index: 101;
}
@keyframes slide-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── TUI Trade Desk ── */
.tui {
  background: #0c0c0c; border: 1px solid #333;
  border-radius: 4px; overflow-x: hidden;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  font-size: 12px; line-height: 1.7; color: #aaa;
  contain: content;
}

/* Top status bar */
.tui-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 10px; background: #1a1a2e;
  border-bottom: 1px solid #333;
  font-size: 11px; color: #888;
}
.tui-topbar-l { display: flex; align-items: center; gap: 8px; }
.tui-topbar-title { font-weight: 700; color: #ccc; letter-spacing: 0.1em; }
.tui-topbar-r { font-variant-numeric: tabular-nums; font-size: 10px; }

/* Bottom status bar */
.tui-botbar {
  display: flex; align-items: center; gap: 16px;
  padding: 3px 10px; background: #1a1a2e;
  border-top: 1px solid #333;
  font-size: 10px; color: #666;
}
.tui-key {
  background: #333; color: #ccc; padding: 0 4px;
  border-radius: 2px; font-weight: 700; font-size: 9px;
  margin-right: 3px;
}

/* Content */
.tui-content { padding: 6px 0; }
.tui-section { margin-bottom: 2px; }
.tui-section-head { padding: 0 10px; color: #777; white-space: nowrap; }
.tui-label { color: #79c0ff; font-weight: 700; font-size: 11px; }
.tui-sub {
  color: #777; font-size: 11px; line-height: 1.5;
  white-space: pre-wrap !important; word-break: break-word;
  padding-bottom: 4px;
}

/* Rows */
.tui-row { padding: 0 10px; white-space: pre-wrap; word-break: break-word; font-variant-numeric: tabular-nums; }
.tui-wrap { white-space: pre-wrap; word-break: break-word; }
.tui-bar-row { display: flex; align-items: center; }

/* Colors */
.tui-dim { color: #777; }
.tui-white { color: #e6edf3; font-weight: 700; }
.tui-green { color: #3fb950; font-weight: 700; }
.tui-red { color: #f85149; font-weight: 700; }
.tui-yellow { color: #d29922; font-weight: 700; }
.tui-green-bg {
  background: #238636; color: #fff; font-weight: 700;
  padding: 0 4px; font-size: 10px;
}
.tui-conf { color: #238636; font-size: 10px; letter-spacing: -1px; }
.tui-progress { color: #238636; font-size: 10px; letter-spacing: -1px; }
.tui-blink { animation: tui-blink 1s step-end infinite; }
@keyframes tui-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.tui-fire-section .tui-row { background: rgba(63,185,80,0.04); }

/* Gauge infographics */
.tui-decision-block { margin-bottom: 6px; }
.tui-gauges { padding: 4px 10px 4px 28px; display: flex; flex-direction: column; gap: 2px; }
.tui-gauge {
  animation: tui-g-in 0.4s ease-out both;
  animation-delay: var(--g-delay, 0s);
}
@keyframes tui-g-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tui-gauge-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; margin-bottom: 1px;
}
.tui-gauge-name {
  color: #79c0ff; font-weight: 700; font-size: 10px;
  min-width: 24px;
}
.tui-gauge-svg { display: block; }
.tui-gauge-needle {
  animation: tui-needle 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(var(--g-delay, 0s) + 0.2s);
}
.tui-gauge-val-label {
  animation: tui-needle 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(var(--g-delay, 0s) + 0.2s);
}
@keyframes tui-needle {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--needle-to, 0)); }
}

@media (max-width: 600px) {
  .tui { font-size: 10px; }
  .tui-row { padding: 0 6px; }
  .tui-topbar, .tui-botbar { padding: 3px 6px; font-size: 9px; }
}

/* ── Desktop TUI enhancements ── */

/* Countdown progress bar under topbar */
.tui-countdown-bar {
  height: 2px; background: #111;
}
.tui-countdown-fill {
  height: 100%; background: #79c0ff; transition: width 1s linear;
}
.tui-countdown-fill[data-low="true"] { background: #d29922; }
.tui-countdown-fill[data-expired="true"] { background: #f85149; }

/* Bias pill */
.tui-bias-pill {
  display: inline-block; padding: 1px 8px; border-radius: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
}
.tui-bias-pill-bull { background: rgba(63,185,80,0.15); color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
.tui-bias-pill-bear { background: rgba(248,81,73,0.15); color: #f85149; border: 1px solid rgba(248,81,73,0.3); }
.tui-bias-pill-mixed { background: rgba(139,148,158,0.1); color: #8b949e; border: 1px solid rgba(139,148,158,0.2); }

/* Radar cards (hidden on mobile, shown on desktop) */
.tui-radar-cards { display: none; }
.tui-radar-table { display: block; }

/* Desktop CSS progress bars for confidence (hidden on mobile) */
.tui-conf-bar-wrap { display: none; }

@media (min-width: 1024px) {
  /* Two-column grid layout */
  .tui-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .tui-grid > .tui-decisions-section,
  .tui-grid > .tui-fire-section {
    grid-column: 1 / -1;
  }

  /* Section accent borders */
  .tui-outlook-section {
    border-left: 3px solid rgba(121,192,255,0.4);
    margin-left: 4px;
  }
  .tui-radar-section {
    border-left: 3px solid rgba(63,185,80,0.4);
    margin-left: 4px;
  }
  .tui-decisions-section {
    border-left: 3px solid rgba(210,153,34,0.4);
    margin-left: 4px;
  }
  .tui-fire-section {
    border-left: 3px solid rgba(63,185,80,0.6);
    margin-left: 4px;
    background: rgba(63,185,80,0.03);
  }

  /* Hide box-drawing on desktop */
  .tui-box-top, .tui-box-bot { display: none; }
  .tui-box-pipe { visibility: hidden; width: 0; display: inline-block; overflow: hidden; }

  /* Sections get subtle backgrounds */
  .tui-outlook-section { background: rgba(121,192,255,0.02); border-radius: 4px; padding: 4px 0; margin-bottom: 4px; }
  .tui-radar-section { background: rgba(63,185,80,0.02); border-radius: 4px; padding: 4px 0; margin-bottom: 4px; }
  .tui-decisions-section { background: rgba(210,153,34,0.02); border-radius: 4px; padding: 4px 0; margin-bottom: 4px; }

  /* Radar: show card grid, hide monospace table */
  .tui-radar-cards {
    display: flex; gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tui-radar-cards::-webkit-scrollbar { height: 3px; }
  .tui-radar-cards::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
  .tui-radar-table { display: none; }

  .tui-radar-card {
    flex: 0 0 auto;
    min-width: 90px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; padding: 8px 10px;
    text-align: center;
    transition: border-color 0.2s;
  }
  .tui-radar-card:hover {
    border-color: rgba(255,255,255,0.15);
  }
  .tui-radar-card-pair {
    font-size: 11px; font-weight: 700; color: #e6edf3;
    margin-bottom: 2px;
  }
  .tui-radar-card-dir {
    font-size: 12px; font-weight: 700; margin-bottom: 1px;
  }
  .tui-radar-card-conf {
    font-size: 16px; font-weight: 700; color: #ccc;
    margin-bottom: 2px;
  }
  .tui-radar-card-mag {
    font-size: 9px; color: #666;
  }

  /* Decision blocks as card grid on desktop */
  .tui-decisions-section .tui-sub { margin-bottom: 8px; }
  .tui-decisions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    padding: 4px 12px;
  }
  .tui-decision-block {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(210,153,34,0.15);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 0;
  }
  .tui-decision-block .tui-row { padding: 0; }
  .tui-decision-block .tui-box-pipe { display: none; }

  /* Gauges inside cards — vertical stack, full width */
  .tui-gauges {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 0 0;
  }
  .tui-gauge-svg {
    width: 100%;
    max-width: 280px;
  }
  .tui-gauge-head { font-size: 11px; }

  /* Blocked/cooldown rows inside decisions */
  .tui-decisions-section > .tui-row:not(.tui-sub):not(.tui-box-bot) {
    padding: 4px 12px;
  }

  /* CSS confidence bars (desktop) */
  .tui-conf-bar-wrap {
    display: flex; align-items: center; gap: 6px;
    margin-top: 2px; padding-left: 4px;
  }
  .tui-conf-bar {
    flex: 1; height: 4px; max-width: 120px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px; overflow: hidden;
  }
  .tui-conf-bar-fill {
    height: 100%; border-radius: 2px;
    transition: width 0.6s ease-out;
  }
  .tui-conf-bar-label {
    font-size: 10px; color: #888; min-width: 28px;
    font-variant-numeric: tabular-nums;
  }

  /* Bias pill (always visible but bigger on desktop) */
  .tui-bias-pill { padding: 2px 10px; font-size: 11px; }
}

/* ── Timing Mandala ── */
.timing-panel { padding: 0 !important; }
.timing-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 8px 12px 12px;
}
.timing-canvas {
  width: 100%; max-width: min(400px, 85vw); height: 400px;
  cursor: crosshair; touch-action: none;
}
.timing-legend {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; max-width: 400px;
}
.timing-leg-row {
  display: flex; align-items: center; gap: 6px;
  font-family: "SF Mono", monospace; font-size: 10px;
  padding: 2px 6px; border-radius: 3px;
  transition: background 0.2s;
  cursor: default;
}
.timing-leg-active { background: rgba(255,255,255,0.04); }
.timing-leg-fire {
  background: rgba(255,255,255,0.06);
  animation: timing-beat 0.6s ease-out;
}
@keyframes timing-beat {
  0% { background: rgba(255,255,255,0.15); }
  100% { background: rgba(255,255,255,0.06); }
}
.timing-leg-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  transition: box-shadow 0.3s;
}
.timing-leg-name { color: #ccc; font-weight: 700; min-width: 56px; transition: color 0.3s; }
.timing-leg-period { color: #888; min-width: 28px; }
.timing-leg-next { color: #777; min-width: 36px; font-variant-numeric: tabular-nums; }
.timing-leg-fire .timing-leg-next { color: #3fb950; font-weight: 700; }
.timing-leg-desc { color: #666; }

@media (max-width: 600px) {
  .timing-canvas { height: 300px; }
  .timing-leg-desc { display: none; }
  .timing-legend { font-size: 10px; }
  .timing-leg-row { gap: 4px; }
  .timing-leg-name { min-width: 48px; }
  .timing-leg-period { min-width: 24px; }
  .timing-leg-next { min-width: 32px; }
}

/* ── Living System ── */
.living-panel { padding: 0 !important; }
.living-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 12px 16px 16px;
}
.living-canvas {
  width: 100%; max-width: min(420px, 90vw);
  aspect-ratio: 1 / 1;
  cursor: default; touch-action: pan-y;
}

/* ── Desktop: hide desktop elements, show mobile by default ── */
.living-desktop-sidebar { display: none; }
.living-mobile-tui { display: block; }
.timing-legend-desktop { display: none; }

/* ====================================================================
 * Desktop layouts for LivingSystem + TimingMandala (>=1024px)
 * ==================================================================== */
@media (min-width: 1024px) {
  /* ── LivingSystem: structured grid layout ── */
  .living-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    padding: 12px 16px 16px;
    align-items: stretch;
  }
  .living-canvas {
    max-width: none;
    width: 100%;
    height: 100%;
    min-height: 300px;
    grid-row: 1 / 3;
    grid-column: 1;
    aspect-ratio: auto;
  }
  .living-mobile-tui { display: none; }
  .living-desktop-sidebar {
    display: contents;
  }

  /* Agent card grid: fills right column top */
  .living-agent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    grid-column: 2;
    grid-row: 1;
  }
  .living-agent-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
    font-size: 13px;
  }
  .living-agent-card--strategist { border-left: 3px solid rgba(255,123,0,0.7); }
  .living-agent-card--technician { border-left: 3px solid rgba(88,166,255,0.7); }
  .living-agent-card--risk_manager { border-left: 3px solid rgba(63,185,80,0.7); }
  .living-agent-card--scalp_trader { border-left: 3px solid rgba(224,64,251,0.7); }

  .living-agent-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }
  .living-agent-card-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  .living-agent-card-name {
    font-weight: 700; font-size: 13px; flex: 1; color: #e6edf3;
  }
  .living-agent-card-score {
    color: #fff; font-weight: 700; font-size: 15px;
    font-variant-numeric: tabular-nums;
  }
  .living-agent-card-rating {
    font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; margin-bottom: 4px;
  }
  .living-agent-card-bar-wrap {
    width: 100%; height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px; overflow: hidden;
    margin-bottom: 6px;
  }
  .living-agent-card-bar {
    height: 100%; border-radius: 2px;
    transition: width 0.6s ease-out;
  }
  .living-agent-card-edge {
    display: flex; gap: 6px; font-size: 12px; margin-bottom: 4px;
  }
  .living-agent-card-edge-label {
    color: #ff9d3d; font-weight: 700; text-transform: uppercase;
  }
  .living-agent-card-edge-val {
    color: #aaa;
  }
  .living-agent-card-note {
    color: #bbb; font-size: 12px; line-height: 1.5;
  }

  /* Experiment + coaching below both columns */
  .living-experiment-card {
    background: rgba(188,140,255,0.04);
    border: 1px solid rgba(188,140,255,0.15);
    border-radius: 6px;
    padding: 10px 14px;
    font-family: "SF Mono", monospace; font-size: 12px;
    grid-column: 1 / -1;
  }
  .living-experiment-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  }
  .living-experiment-badge {
    color: #0a0a0a; background: #bc8cff;
    padding: 1px 6px; border-radius: 2px;
    font-size: 9px; font-weight: 700;
  }
  .living-experiment-meta { color: #8b949e; font-size: 10px; margin-bottom: 4px; }
  .living-experiment-hyp { color: #8b949e; font-style: italic; font-size: 10px; margin-bottom: 6px; }
  .living-experiment-progress {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  }
  .living-experiment-stats {
    display: flex; gap: 10px; font-size: 10px;
  }

  /* Coaching card — full width */
  .living-coaching-card {
    background: rgba(227,179,65,0.04);
    border: 1px solid rgba(227,179,65,0.15);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: "SF Mono", monospace; font-size: 13px;
    grid-column: 1 / -1;
  }
  .living-coaching-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  }
  .living-coaching-scroll {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
  }
  .living-coaching-entry {
    display: flex; flex-direction: column; gap: 2px;
    margin-bottom: 10px; font-size: 12px; line-height: 1.6; color: #bbb;
  }

  /* System footer — full width */
  .living-system-footer {
    display: flex; align-items: center; gap: 6px;
    font-family: "SF Mono", monospace; font-size: 12px;
    padding: 6px 0;
    grid-column: 1 / -1;
  }

  /* ── TimingMandala: side-by-side ── */
  .timing-wrap {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 16px 12px;
  }
  .timing-canvas {
    max-width: none;
    width: 480px;
    height: 480px;
    flex-shrink: 0;
  }
  .timing-legend-mobile { display: none; }
  .timing-legend-desktop {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-width: 0;
  }

  /* Desktop legend group */
  .timing-desk-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .timing-desk-group-label {
    font-family: "SF Mono", monospace;
    font-size: 9px; font-weight: 700;
    color: #777; letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 6px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 2px;
  }
  .timing-desk-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "SF Mono", monospace;
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 4px;
    transition: background 0.2s;
    cursor: default;
    position: relative;
  }
  .timing-desk-row--hover { background: rgba(255,255,255,0.04); }
  .timing-desk-row--fire {
    background: rgba(255,255,255,0.06);
    animation: timing-desk-pulse 1.5s ease-in-out infinite;
  }
  @keyframes timing-desk-pulse {
    0%, 100% { background: rgba(255,255,255,0.04); }
    50% { background: rgba(255,255,255,0.08); }
  }
  .timing-desk-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    transition: box-shadow 0.3s;
  }
  .timing-desk-name {
    color: #ccc; font-weight: 700; min-width: 60px;
    transition: color 0.3s;
  }
  .timing-desk-period {
    color: #666; min-width: 28px;
  }
  .timing-desk-countdown {
    color: #777; min-width: 36px;
    font-variant-numeric: tabular-nums;
  }
  .timing-desk-row--fire .timing-desk-countdown {
    color: #3fb950; font-weight: 700;
  }
  .timing-desk-progress-wrap {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
    min-width: 40px;
  }
  .timing-desk-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s linear;
  }
}

/* ── Market Map ── */
.mm-panel {
  background: linear-gradient(180deg, rgba(6,10,16,0.98), rgba(12,18,28,0.95));
  border: 1px solid rgba(88,166,255,0.12);
  position: relative; overflow: hidden;
}
.mm-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88,166,255,0.3), rgba(46,160,67,0.3), rgba(248,81,73,0.2), transparent);
}
.mm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mm-title {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em; color: rgba(88,166,255,0.6);
}
.mm-driver {
  font-family: "SF Mono", monospace; font-size: 9px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; letter-spacing: 0.05em;
}
.mm-driver-bull { background: rgba(46,160,67,0.12); color: #2ea043; border: 1px solid rgba(46,160,67,0.2); }
.mm-driver-bear { background: rgba(248,81,73,0.12); color: #f85149; border: 1px solid rgba(248,81,73,0.2); }
.mm-driver-flat { background: rgba(139,148,158,0.1); color: #8b949e; border: 1px solid rgba(139,148,158,0.15); }
.mm-narrative {
  font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.5;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mm-strength { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.mm-ccy-row { display: flex; align-items: center; gap: 6px; height: 22px; }
.mm-ccy-rank {
  font-family: "SF Mono", monospace; font-size: 8px; color: rgba(255,255,255,0.2);
  width: 10px; text-align: right;
}
.mm-ccy-name {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 11px; font-weight: 700; width: 28px;
}
.mm-bar-track {
  flex: 1; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.03); position: relative; overflow: hidden;
}
.mm-bar-center {
  position: absolute; top: 0; left: 50%; width: 1px; height: 100%;
  background: rgba(255,255,255,0.1);
}
.mm-bar-fill {
  position: absolute; top: 0; height: 100%; border-radius: 4px;
  box-shadow: 0 0 6px currentColor;
  animation: mm-bar-glow 2s ease-in-out infinite alternate;
}
.mm-bar-pos { border-radius: 0 4px 4px 0; }
.mm-bar-neg { border-radius: 4px 0 0 4px; }
@keyframes mm-bar-glow {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}
.mm-ccy-val {
  font-family: "SF Mono", monospace; font-size: 9px; font-weight: 600;
  width: 35px; text-align: right;
}
.mm-val-pos { color: #2ea043; }
.mm-val-neg { color: #f85149; }
.mm-pairs {
  display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.mm-pair-chip {
  display: flex; align-items: center; gap: 2px;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  font-family: "SF Mono", monospace; font-size: 10px;
  transition: border-color 0.3s;
}
.mm-pair-chip:hover { border-color: rgba(255,255,255,0.15); }
.mm-pair-base { font-weight: 700; }
.mm-pair-slash { color: rgba(255,255,255,0.2); margin: 0 1px; }
.mm-pair-quote { font-weight: 500; opacity: 0.7; }
.mm-pair-pips { margin-left: 4px; font-weight: 700; font-size: 9px; }
.mm-pip-up { color: #2ea043; }
.mm-pip-down { color: #f85149; }

/* ── Tick Flow ── */
.tf-panel {
  background: linear-gradient(180deg, rgba(8,12,18,0.95), var(--panel-2));
  border: 1px solid rgba(227,179,65,0.1);
}
.tf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tf-title {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em; color: rgba(227,179,65,0.6);
}
.tf-sub { font-size: 10px; color: var(--muted); }
.tf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tf-card {
  background: rgba(255,255,255,0.02);
  border-radius: 8px; padding: 10px; min-width: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.tf-flow-buy { border-left: 3px solid #2ea043; }
.tf-flow-sell { border-left: 3px solid #f85149; }
.tf-flow-neutral { border-left: 3px solid #8b949e; }
.tf-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tf-pair {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 11px; font-weight: 700; color: var(--fg);
}
.tf-dir {
  font-family: "SF Mono", monospace; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
}
.tf-dir-buy { background: rgba(46,160,67,0.15); color: #2ea043; }
.tf-dir-sell { background: rgba(248,81,73,0.15); color: #f85149; }
.tf-dir-neutral { background: rgba(139,148,158,0.1); color: #8b949e; }
.tf-bar-track {
  height: 6px; border-radius: 3px; background: rgba(248,81,73,0.2);
  position: relative; margin-bottom: 3px; overflow: hidden;
}
.tf-bar-buy {
  height: 100%; border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, rgba(46,160,67,0.6), rgba(46,160,67,0.3));
  transition: width 1s ease;
}
.tf-bar-center {
  position: absolute; top: 0; left: 50%; width: 1px; height: 100%;
  background: rgba(255,255,255,0.3);
}
.tf-labels { display: flex; justify-content: space-between; margin-bottom: 4px; }
.tf-buy-label { font-size: 8px; color: #2ea043; }
.tf-sell-label { font-size: 8px; color: #f85149; }
.tf-meta { display: flex; align-items: center; gap: 6px; }
.tf-vol {
  font-family: "SF Mono", monospace; font-size: 8px; font-weight: 700;
  padding: 1px 4px; border-radius: 2px;
}
.tf-vol-surge { background: rgba(227,179,65,0.2); color: #e3b341; }
.tf-vol-high { background: rgba(88,166,255,0.15); color: #58a6ff; }
.tf-vol-normal { background: rgba(139,148,158,0.1); color: #8b949e; }
.tf-vol-low { background: rgba(139,148,158,0.06); color: rgba(139,148,158,0.5); }
.tf-vol-bars { display: flex; align-items: flex-end; gap: 2px; flex: 1; height: 20px; }
.tf-vol-col { flex: 1; display: flex; align-items: flex-end; }
.tf-vol-bar {
  width: 100%; border-radius: 1px; min-height: 2px;
  background: rgba(227,179,65,0.4);
}
.tf-str {
  font-family: "SF Mono", monospace; font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.4);
}
.oi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.oi-title {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em; color: rgba(88,166,255,0.6);
}
.oi-sub { font-size: 10px; color: var(--muted); }
@keyframes oi-row-tick {
  0%   { opacity: 0; transform: translateY(6px); }
  60%  { opacity: 1; transform: translateY(-1px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Ticker digit animation */
.oi-ticker {
  display: inline-flex; font-variant-numeric: tabular-nums;
}
.oi-tick-static { display: inline-block; }
.oi-tick-digit {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
}
.oi-tick-roll {
  display: inline-block;
  animation: oi-digit-roll 0.25s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: var(--tick-delay, 0ms);
}
@keyframes oi-digit-roll {
  0%   { transform: translateY(-100%); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.oi-best-badge {
  font-size: 8px; font-weight: 700; color: #e3b341;
  background: rgba(227,179,65,0.12); border: 1px solid rgba(227,179,65,0.3);
  padding: 0 4px; border-radius: 2px; letter-spacing: 0.05em;
}
.oi-best-reason {
  font-size: 9px; color: #888; margin-bottom: 4px;
  padding: 2px 0;
}
.oi-tt-fast { color: #58a6ff; }
.oi-tt-slow { color: #e3b341; }
.oi-tt-pos { color: #3fb950; font-weight: 700; }
.oi-tt-neg { color: #f85149; font-weight: 700; }

/* ── Market Intelligence ── */
.intel-panel {
  background: linear-gradient(180deg, rgba(8,12,18,0.95), var(--panel-2));
  border: 1px solid rgba(0,200,255,0.1);
}
.intel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.intel-title {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  color: rgba(0,200,255,0.6);
}
.intel-sub { font-size: 10px; color: var(--muted); }
.intel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.intel-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; padding: 10px;
  transition: border-color 0.3s;
}
.intel-card:hover { border-color: rgba(0,200,255,0.2); }
.intel-scalp-ready {
  border-color: rgba(0,255,136,0.25);
  box-shadow: 0 0 8px rgba(0,255,136,0.05);
}
.intel-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.intel-pair {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 12px; font-weight: 700; color: var(--fg);
}
.intel-scalp-badge {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 8px; font-weight: 700; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(0,255,136,0.15); color: #2ea043;
  animation: term-blink 2s ease-in-out infinite;
}
.intel-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.intel-label {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 8px; font-weight: 600; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3); width: 24px; flex-shrink: 0;
}
.intel-gauge { display: flex; align-items: center; gap: 6px; flex: 1; }
.intel-gauge-track {
  flex: 1; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.04); position: relative;
  overflow: visible;
}
.intel-gauge-zones {
  display: flex; height: 100%; border-radius: 3px; overflow: hidden;
}
.gz-oversold { flex: 3; background: rgba(88,166,255,0.1); }
.gz-neutral { flex: 4; background: rgba(255,255,255,0.02); }
.gz-overbought { flex: 3; background: rgba(248,81,73,0.1); }
.intel-bb-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  border-radius: 3px; transition: width 1s;
}
.intel-gauge-needle {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  transition: left 1s;
}
.gauge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 4px currentColor;
}
.intel-val {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 10px; font-weight: 700; min-width: 32px; text-align: right;
}
.intel-spread {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 10px; font-weight: 600;
}
.spread-tight { color: #2ea043; }
.spread-ok { color: #e3b341; }
.spread-wide { color: #f85149; }
@media (max-width: 480px) {
  .intel-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .intel-card { padding: 8px; }
}

/* ── Flow Chart ── */
.flow-chart-panel { overflow: visible; }
.flow-chart-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
  max-width: 100%;
}
.flow-chart-svg {
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  display: block;
}

footer {
  padding: 14px 24px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
code {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* =====================================================================
 * Skeleton loading shimmer — subtle dark-theme placeholder bars.
 * ===================================================================== */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--panel-2) 25%,
    var(--panel-hi) 50%,
    var(--panel-2) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
.skeleton-block {
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--panel-2) 25%,
    var(--panel-hi) 50%,
    var(--panel-2) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.error-banner {
  background: var(--red-bg); color: var(--red);
  padding: 8px 16px; border-radius: 4px;
  font-size: 12px; font-family: ui-monospace, Consolas, monospace;
}

/* Auth gate (cloud mode only) */
.auth-gate-shell {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
.auth-gate-card {
  background: var(--panel, #15171c); padding: 32px;
  border-radius: 8px; max-width: 360px; text-align: center;
}
.auth-gate-card h2 { margin-top: 0; margin-bottom: 8px; }
.auth-gate-btn {
  margin-top: 16px; padding: 10px 20px; font-size: 14px;
  cursor: pointer; border: 1px solid #444; border-radius: 4px;
  background: #2a2d33; color: inherit;
}
.auth-gate-btn:hover { background: #353941; }

/* Access request form */
.auth-gate-note {
  width: 100%; min-height: 60px; padding: 8px;
  margin-top: 12px; box-sizing: border-box;
  background: #1e1e1e; color: inherit;
  border: 1px solid #444; border-radius: 4px;
  font-family: inherit; font-size: 13px; resize: vertical;
}
.auth-gate-btn-secondary {
  margin-top: 8px; padding: 8px 16px; font-size: 13px;
  cursor: pointer; border: 1px solid #444; border-radius: 4px;
  background: transparent; color: #aaa;
}
.auth-gate-btn-secondary:hover { color: #fff; border-color: #666; }

/* Outcome pill tooltip */
.outcome-pill {
  position: relative;
  cursor: help;
}
.outcome-pill::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 240px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 30;
}
.outcome-pill:hover::after,
.outcome-pill:focus::after {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 700px) {
  .outcome-pill::after { width: 200px; font-size: 11px; }
}

/* Info tip */
.info-tip-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 6px; }
.info-tip-btn {
  width: 18px; height: 18px; min-width: 18px; min-height: 18px;
  border-radius: 50%; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--muted); font-size: 11px; font-weight: 700;
  font-style: italic; font-family: Georgia, serif;
  cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; line-height: 1;
}
.info-tip-btn:hover { border-color: var(--accent); color: var(--accent); }
.info-tip-backdrop {
  position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,0.4);
}
.info-tip-popup {
  position: fixed; z-index: 151;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 300px; max-width: 85vw; max-height: 60vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px 18px;
  font-size: 13px; font-weight: 400; line-height: 1.6;
  color: var(--fg); box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: info-tip-in 0.2s ease-out;
}
@keyframes info-tip-in {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Admin panel */
.admin-panel { border: 1px solid #2d3340; }

/* Help overlay */
.help-trigger-group {
  position: fixed;
  top: 14px;
  right: 24px;
  z-index: 20;
  display: flex;
  gap: 8px;
}
.help-trigger {
  position: relative;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 18px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
  text-decoration: none;
}
a.help-trigger:hover { text-decoration: none; }
.help-trigger:hover { border-color: var(--accent); color: var(--accent); }
.hiw-trigger { font-size: 13px; }

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: help-fade-in 0.3s ease-out;
}
@keyframes help-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.help-content {
  position: relative;
  width: 90vw;
  max-width: 720px;
  max-height: 85vh;
  background: rgba(22, 27, 34, 0.95);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  animation: help-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes help-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.help-scroll {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  max-height: 85vh;
  padding: 40px 36px 32px;
}
.help-header {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
}
.help-header h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--accent), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 8px;
}
.help-tagline {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.help-close {
  position: absolute;
  top: -8px;
  right: -8px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 28px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.help-close:hover { color: var(--fg); }

.help-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.help-section {
  padding: 20px 24px;
  background: rgba(28, 34, 48, 0.6);
  border: 1px solid var(--border);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.help-section h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--fg);
  margin: 0 0 8px;
}
.help-section p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.help-footer {
  text-align: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.help-footer p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .help-trigger-group { top: 8px; right: 10px; gap: 6px; }
  .help-trigger { width: 32px; height: 32px; font-size: 16px; }
  .hiw-trigger { font-size: 11px; }
  .help-content { width: 95vw; max-height: 90vh; }
  .help-scroll { padding: 24px 20px; }
  .help-header h1 { font-size: 24px; }
  .help-section { padding: 16px 18px; }
}

/* =====================================================================
 * Mobile-first responsive overrides.
 *
 * Tier 1 — small tablets / large phones (≤ 700px): tighten gutters, reflow
 * the open-positions strip to single-column, allow tables to scroll.
 * Tier 2 — phones (≤ 480px): compress sticky header, drop non-essential
 * chrome, switch admin table to card layout, ensure 44px tap targets.
 * ===================================================================== */
@media (max-width: 700px) {
  main { padding: 12px 20px; gap: 12px; }
  header.top { padding: 10px 20px; gap: 10px; }
  footer { padding: 12px 20px; }
  .panel { padding: 12px 14px; }
  .panel-title { font-size: 11px; }
  .panel-sub { font-size: 10px; line-height: 1.3; }

  .pos-cards { grid-template-columns: 1fr; }
  .pos-card { min-height: 100px; }
  .card { padding: 10px 12px; }
  button, select { min-height: 36px; }

  /* Signal heat: ignore the desktop 3+1+3 split — on a 2-col phone grid
   * it produces orphan single-card rows. Dissolve the .signals-row
   * containers via display:contents so all 7 cards flow into one grid,
   * and span the last card across both columns so it doesn't look
   * stranded. The hub-centering on r-1 is also irrelevant in flow. */
  .signals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding-top: 8px;
  }
  .signals-row { display: contents; }
  .signals-row.r-1 { width: auto; margin: 0; }
  .signals-grid .signals-row:last-child .sig-card:last-child {
    grid-column: 1 / -1;
  }

  /* Tables: keep display:table so thead/tbody columns stay aligned. */
  .panel:has(table) { overflow-x: auto; }
  .panel { overflow-x: hidden; }
  /* Hide SCALE and extra columns on mobile to prevent overflow */
  table .hide-mobile { display: none; }
  table td, table th { font-size: 12px; padding: 4px 6px; }

  /* AdminPanel: collapse table rows to stacked cards so approve/deny is
   * thumb-reachable with a real tap target instead of a 30px row. */
  .admin-panel table { display: table; white-space: normal; }
  .admin-panel thead { display: none; }
  .admin-panel tbody, .admin-panel tr { display: block; }
  .admin-panel tbody tr {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 10px;
    background: var(--panel-2);
  }
  .admin-panel td {
    display: block;
    padding: 4px 0;
    border: none;
  }
  .admin-panel td:last-child {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
  }
  .admin-panel .auth-gate-btn,
  .admin-panel .auth-gate-btn-secondary {
    min-height: 44px;
    padding: 10px 18px;
    margin: 4px 6px 4px 0;
  }

  /* Spread row: drop the pip column on narrow, leave pair / track / ratio. */
  .spread-row { grid-template-columns: 56px 1fr 50px; }
  .spread-pips { display: none; }

  /* Pressure panel: 7-col table → compact stacked cards. Hide the SL/TP/AB
   * price columns entirely (the live-trade strip already shows them).
   * Each row becomes: Pair + Range bar + %B + Setup on one line. */
  .panel.col-span-2 table { display: block; white-space: normal; overflow: visible; }
  .panel.col-span-2 table thead { display: none; }
  .panel.col-span-2 table tbody { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .panel.col-span-2 table tbody tr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-2);
  }
  .panel.col-span-2 td { padding: 0; border: none; white-space: nowrap; }
  .panel.col-span-2 td:nth-child(1) { font-size: 12px; min-width: 60px; }
  .panel.col-span-2 td:nth-child(2) { flex: 1; min-width: 60px; }
  .panel.col-span-2 td:nth-child(3) { font-size: 12px; min-width: 30px; text-align: right; }
  .panel.col-span-2 td:nth-child(4) { display: table-cell; }
  .panel.col-span-2 td:nth-child(5),
  .panel.col-span-2 td:nth-child(6),
  .panel.col-span-2 td:nth-child(7) { display: none; }

  /* News panel: collapse the 4-col table into stacked card rows. */
  .news-panel table { display: table; white-space: normal; }
  .news-panel thead { display: none; }
  .news-panel tbody, .news-panel tbody tr { display: block; }
  .news-panel tbody tr {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 8px;
    background: var(--panel-2);
  }
  .news-panel td {
    display: inline;
    padding: 0;
    border: none;
  }
  .news-panel td:nth-child(1) { display: block; font-size: 12px; margin-bottom: 4px; }
  .news-panel td:nth-child(2) { font-weight: 600; margin-right: 8px; }
  .news-panel td:nth-child(3) { margin-right: 8px; }
  .news-panel td:nth-child(4) { display: block; margin-top: 6px; line-height: 1.35; white-space: normal; }
}

@media (max-width: 480px) {
  main { padding: 10px 20px; gap: 10px; }
  header.top { padding: 8px 20px; gap: 8px; }
  footer { padding: 10px 20px; font-size: 11px; }
  .panel { padding: 10px 14px; }

  /* Sticky header compression */
  .brand { font-size: 15px; gap: 8px; }
  .clock { font-size: 12px; padding: 6px 10px; gap: 8px; }
  .clock-utc { font-size: 13px; }
  .clock-countdown { font-size: 11px; }

  /* Cards: keep 2x2 but shrink so the whole header fits in ≤170px sticky */
  .cards { gap: 8px; }
  .card { padding: 8px 10px; }
  .card .label { font-size: 10px; }
  .card .value { font-size: 18px; margin-top: 2px; }
  .card .hint { font-size: 11px; margin-top: 2px; }
  .exec-badge { font-size: 9px; padding: 1px 4px; margin-left: 4px; }
  .progress { height: 8px; margin: 6px 0 2px; }

  /* Position cards: compress vertical space */
  .pos-card { padding: 10px 12px; }
  .pos-pnl-value { font-size: 18px; }
  .pos-pnl-label { font-size: 10px; }
  .pos-tiers { gap: 6px; }
  .tier-val { font-size: 13px; }
  .tier-label { font-size: 9px; }

  /* Chart: mobile optimized. Feature toggles hidden behind "Layers" button
   * (collapsible). Cross-pair strength stays visible (compact one-liner).
   * Chart gets full available height for readability on small screens. */
  .chart { height: 50vh; min-height: 280px; max-height: 420px; }
  .chart-legend { display: none; }
  .chart-features {
    gap: 8px;
    padding: 6px 2px 8px;
    font-size: 11px;
    flex-wrap: wrap;
  }
  .feature-toggle { gap: 4px; white-space: nowrap; }
  .cross-pair-strength { font-size: 10px; gap: 6px; padding: 2px 4px 4px; }
  .chart-pair-select select { font-size: 16px; min-height: 40px; padding: 6px 12px; }
  .chart-controls-toggle { min-height: 32px; padding: 4px 12px; }
  .chart-title-row { flex-wrap: wrap; }
  .chart-price-display { order: -1; width: 100%; padding: 2px 0 4px; }
  .chart-current-price { font-size: 28px; }
  .chart-price-change { font-size: 14px; }

  /* Goal panel: dollar values overflow on narrow screens. Stack the label
   * above the value instead of space-between, and let values shrink. */
  .goal-panel .goal-row { flex-wrap: wrap; gap: 2px; }
  .goal-panel .goal-row-val { font-size: 13px; }
  .goal-panel .goal-row-val .muted { font-size: 11px; }

  /* Calculator: stack inputs, give numeric fields room. The table needs
   * white-space normal so the × column doesn't get clipped. Footer must
   * wrap — it has long prose that extends past the panel edge. */
  .calc-inputs { gap: 8px; }
  .calc-field input { width: 100%; min-height: 40px; }
  .calc-presets { margin-left: 0; width: 100%; }
  .calc-presets button { min-height: 38px; flex: 1 1 30%; }
  .calc-table { font-size: 12px; }
  .calc-table td, .calc-table th { padding: 4px 6px; }
  .calc-footer { font-size: 11px; word-break: break-word; }

  /* Tables: swipeable left/right on mobile. Only table-containing panels. */
  .panel:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel-subtitle, .calc-footer, .goal-proj { word-break: break-word; }
  .panel table td, .panel table th { white-space: nowrap; }

  /* Signal heat — phone density. The 2-col flow + last-card-spans-2 is
   * inherited from the 700px rule above. Tighten the card itself. */
  .signals-grid { gap: 6px; }
  .sig-card { height: 84px; }
  .sig-content { padding: 8px 10px; }
  .sig-pair { font-size: 12px; }
  .sig-conf { font-size: 20px; }
  .sig-age { font-size: 9px; }

  /* Hide non-essential table columns on phones */
  .hide-mobile { display: none; }

  /* Daily history: tighten the panel title so summary stats wrap cleanly */
  .panel-title { flex-wrap: wrap; font-size: 13px; }
  .panel-title .muted { font-size: 11px; }

  /* Inner trade table: smaller text, abbreviate exit reasons */
  table.inner td { font-size: 11px; padding: 3px 4px; }
  table.inner th { font-size: 9px; padding: 3px 4px; }

  /* Footer: hide keyboard shortcut on touch devices */
  .kbd-hint { display: none; }

  /* Win toast: pull from edges so it doesn't crowd the corner */
  .win-toast { top: 56px; right: 12px; padding: 12px 16px; font-size: 15px; }

  /* Auth gate card: phone-friendly */
  .auth-gate-shell { padding: 16px; }
  .auth-gate-card { padding: 20px; max-width: 100%; }

  /* Universal touch sizing — anything tappable hits 44px minimum */
  button,
  select,
  input[type="number"],
  input[type="text"],
  input[type="email"],
  textarea {
    min-height: 40px;
  }
  .auth-gate-btn { min-height: 44px; padding: 12px 20px; }
}

/* ====================================================================
 * How It Works — interactive pipeline page
 * ==================================================================== */
.hiw-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px 60px;
  overflow-x: hidden;
}

/* Hero */
.hiw-hero { padding: 40px 0 32px; text-align: center; }
.hiw-back {
  display: inline-block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
  transition: color .15s;
}
.hiw-back:hover { color: var(--accent); text-decoration: none; }
.hiw-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}
.hiw-subtitle {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 28px;
  line-height: 1.6;
}
.hiw-hero-actions { display: flex; justify-content: center; gap: 12px; }
.hiw-demo-btn {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.hiw-demo-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(126, 231, 135, 0.25);
  border-color: transparent;
}
.hiw-demo-stop {
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--border);
}
.hiw-demo-stop:hover {
  border-color: var(--red);
  box-shadow: none;
  transform: none;
}

/* Pipeline container */
.hiw-pipeline { position: relative; }

/* Individual stage */
.hiw-stage {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
  opacity: 0;
  transform: translateY(24px);
  position: relative;
}
.hiw-stage.hiw-revealed {
  opacity: 1;
  transform: translateY(0);
}
.hiw-stage:hover { background: var(--panel); }
.hiw-stage.hiw-expanded { background: var(--panel); }
.hiw-stage.hiw-demo-active {
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--border), 0 0 24px rgba(126, 231, 135, 0.08);
}
.hiw-stage.hiw-demo-past { opacity: .5; }

/* Stage marker (numbered circle + icon) */
.hiw-stage-marker {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color .3s, box-shadow .3s;
  color: var(--stage-color);
}
.hiw-demo-active .hiw-stage-marker,
.hiw-expanded .hiw-stage-marker {
  border-color: var(--stage-color);
  box-shadow: 0 0 16px color-mix(in srgb, var(--stage-color) 30%, transparent);
}
.hiw-stage-num {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  padding: 0 4px;
  line-height: 1;
}
.hiw-icon { display: block; }
.hiw-icon-active { filter: drop-shadow(0 0 4px currentColor); }

/* Stage text content */
.hiw-stage-body { flex: 1; min-width: 0; padding-top: 4px; }
.hiw-stage-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--fg);
}
.hiw-stage-tagline {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* Expand icon */
.hiw-expand-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 18px;
  font-weight: 300;
  transition: transform .2s;
  margin-top: 14px;
}
.hiw-expanded .hiw-expand-icon { color: var(--accent); }

/* Demo message (shown during walkthrough) */
.hiw-demo-msg {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(126, 231, 135, 0.06);
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--accent);
  animation: hiw-fade-in .4s ease-out;
}

/* Detail panel (expandable) */
.hiw-stage-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(0.34, 1.2, 0.64, 1), opacity .3s;
  opacity: 0;
}
.hiw-detail-open {
  max-height: 700px;
  opacity: 1;
}
.hiw-detail-inner {
  padding: 16px 0 4px;
}
.hiw-detail-inner p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fg);
}
.hiw-detail-note {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-style: italic;
}

/* Connector between stages */
.hiw-connector {
  width: 2px;
  height: 32px;
  background: var(--border);
  margin-left: 41px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.hiw-connector-lit { background: var(--accent); }
.hiw-connector-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  left: -1.5px;
  opacity: .6;
  animation: hiw-flow 1.8s linear infinite;
}
@keyframes hiw-flow {
  0%   { top: -5px; opacity: 0; }
  15%  { opacity: .6; }
  85%  { opacity: .6; }
  100% { top: calc(100% + 5px); opacity: 0; }
}

/* Detail: chips */
.hiw-detail-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.hiw-chip {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid;
  color: var(--fg);
  background: transparent;
}

/* Detail: feature grid */
.hiw-feature-grid { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.hiw-feature-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hiw-feature-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hiw-feature-cat { font-weight: 600; min-width: 100px; }
.hiw-feature-items { color: var(--muted); }

/* Detail: candle viz */
.hiw-candle-viz { display: flex; gap: 20px; margin: 12px 0; }
.hiw-candle-part { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.hiw-candle-block { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* Detail: stats row */
.hiw-stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.hiw-stat {
  flex: 1;
  min-width: 80px;
  text-align: center;
  padding: 12px 8px;
  background: var(--panel-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.hiw-stat-val {
  display: block;
  font-size: 22px;
  font-weight: 700;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--accent);
}
.hiw-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* Detail: gate bar viz */
.hiw-gate-viz { margin: 16px 0; }
.hiw-gate-bar {
  position: relative;
  height: 28px;
  background: var(--panel-2);
  border-radius: 6px;
  overflow: visible;
  border: 1px solid var(--border);
}
.hiw-gate-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 65%;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(90deg, var(--red) 0%, var(--yellow) 50%, var(--green) 100%);
  opacity: .3;
  animation: hiw-gate-pulse 3s ease-in-out infinite;
}
@keyframes hiw-gate-pulse { 0%, 100% { width: 52%; } 50% { width: 72%; } }
.hiw-gate-threshold {
  position: absolute;
  left: 20%;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.hiw-gate-label-lo { position: absolute; left: 4px; bottom: -18px; font-size: 10px; color: var(--muted); }
.hiw-gate-label-hi { position: absolute; right: 4px; bottom: -18px; font-size: 10px; color: var(--muted); }
.hiw-gate-label-th { position: absolute; left: 20%; bottom: -18px; font-size: 10px; color: var(--accent); transform: translateX(-50%); }

/* Detail: filter list */
.hiw-filter-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.hiw-filter-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
.hiw-filter-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 1px;
}

/* Detail: check list (RiskGuard) */
.hiw-check-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.hiw-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.hiw-check-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.hiw-check strong { display: block; }
.hiw-check-desc { display: block; font-size: 12px; color: var(--muted); }

/* Detail: execution flow */
.hiw-exec-flow { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 12px 0; }
.hiw-exec-step { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.hiw-exec-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hiw-exec-arrow { color: var(--muted); margin-left: 12px; font-size: 14px; }

/* Detail: exit strategy viz */
.hiw-exit-viz { margin: 16px 0 12px; }
.hiw-exit-track {
  position: relative;
  height: 28px;
  border-radius: 6px;
  overflow: visible;
  display: flex;
}
.hiw-exit-zone {
  height: 100%;
}
.hiw-exit-loss {
  flex: 1;
  background: linear-gradient(90deg, var(--red), var(--yellow));
  opacity: .2;
  border-radius: 6px 0 0 6px;
}
.hiw-exit-win {
  flex: 2.2;
  background: linear-gradient(90deg, var(--yellow), var(--green));
  opacity: .2;
  border-radius: 0 6px 6px 0;
}
.hiw-exit-marker {
  position: absolute;
  top: -6px;
  bottom: -18px;
  width: 2px;
  background: var(--muted);
}
.hiw-exit-marker span {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.hiw-exit-sl    { left: 0%; background: var(--red); }
.hiw-exit-sl span { color: var(--red); }
.hiw-exit-entry { left: 31%; background: var(--fg); }
.hiw-exit-entry span { color: var(--fg); }
.hiw-exit-1r    { left: 62%; background: var(--yellow); }
.hiw-exit-1r span { color: var(--yellow); }
.hiw-exit-tp    { left: 100%; background: var(--green); }
.hiw-exit-tp span { color: var(--green); }
.hiw-exit-steps { display: flex; flex-direction: column; gap: 8px; margin: 24px 0 8px; }
.hiw-exit-step { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.hiw-exit-badge { font-weight: 600; font-size: 12px; min-width: 72px; }

/* Outcome card */
.hiw-outcome { margin-top: 16px; }
.hiw-outcome-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--green-bg);
  border: 1px solid var(--green);
  border-radius: 10px;
}
.hiw-outcome-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}
.hiw-outcome-card strong { font-size: 15px; }
.hiw-outcome-card p { font-size: 13px; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }

/* Footer */
.hiw-footer {
  text-align: center;
  padding: 40px 0 20px;
  color: var(--muted);
  font-size: 13px;
}
.hiw-footer-link { color: var(--accent); }

/* Fade-in keyframe */
@keyframes hiw-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .hiw-page { padding: 0 12px 40px; overflow-x: hidden; }
  .hiw-hero { padding: 24px 0 20px; }
  .hiw-title { font-size: 22px; }
  .hiw-subtitle { font-size: 13px; padding: 0 4px; }
  .hiw-stage { gap: 10px; padding: 10px 8px; }
  .hiw-stage-marker { width: 40px; height: 40px; min-width: 40px; }
  .hiw-stage-marker svg { width: 18px; height: 18px; }
  .hiw-connector { margin-left: 28px; }
  .hiw-stage-title { font-size: 14px; }
  .hiw-stage-tagline { font-size: 12px; }
  .hiw-stat-row { gap: 6px; }
  .hiw-stat { min-width: 55px; padding: 6px 4px; }
  .hiw-stat-val { font-size: 16px; }
  .hiw-stat-label { font-size: 9px; }
  .hiw-feature-cat { min-width: 70px; font-size: 11px; }
  .hiw-feature-items { font-size: 11px; }
  .hiw-detail-inner { font-size: 12px; }
  .hiw-filter-item { font-size: 12px; }
  .hiw-check { font-size: 12px; }
  .hiw-exec-step { font-size: 12px; }
  .hiw-exit-step { font-size: 12px; }
  .hiw-candle-viz { gap: 12px; flex-wrap: wrap; }
  .hiw-expand-icon { display: none; }
  .hiw-outcome-card { flex-direction: column; gap: 8px; }
  .hiw-outcome-icon { font-size: 28px; }
  .flow-chart-panel { margin: 0; overflow: visible; }
  .flow-chart-scroll { padding: 4px 0; }
  .flow-chart-svg { width: 100%; max-width: 100%; }
}

@media (max-width: 480px) {
  .consensus-meter { gap: 5px; }
  .consensus-node { width: 24px; height: 24px; font-size: 9px; }
  .consensus-wire { width: 10px; }
}

/* ============================================================
   SCALP RADAR — psychedelic animated 4-gate scanner
   ============================================================ */

/* Keyframes */
@keyframes sr-sweep {
  0%   { left: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { left: calc(100% + 2px); opacity: 0; }
}

@keyframes sr-hue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes sr-pulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 6px currentColor, 0 0 14px currentColor; }
  50%      { opacity: 0.7; text-shadow: 0 0 10px currentColor, 0 0 24px currentColor, 0 0 40px currentColor; }
}

@keyframes sr-gate-flash {
  0%   { box-shadow: 0 0 4px rgba(255,255,255,0.1); }
  50%  { box-shadow: 0 0 12px rgba(255,255,255,0.8), 0 0 20px rgba(255,255,255,0.3); }
  100% { box-shadow: 0 0 4px rgba(255,255,255,0.1); }
}

@keyframes sr-row-rainbow {
  0%   { border-color: hsl(0, 70%, 40%); }
  25%  { border-color: hsl(90, 70%, 40%); }
  50%  { border-color: hsl(180, 70%, 40%); }
  75%  { border-color: hsl(270, 70%, 40%); }
  100% { border-color: hsl(360, 70%, 40%); }
}

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

@keyframes sr-ready-glow {
  0%, 100% { color: #3fb950; text-shadow: 0 0 8px #3fb950, 0 0 18px #3fb95088; }
  33%      { color: #58a6ff; text-shadow: 0 0 8px #58a6ff, 0 0 18px #58a6ff88; }
  66%      { color: #e040fb; text-shadow: 0 0 8px #e040fb, 0 0 18px #e040fb88; }
}

/* Panel */
.scalp-radar {
  border: 2px solid var(--border);
  transition: border-color 0.05s linear;
  position: relative;
}

.scalp-radar .panel-title {
  letter-spacing: 0.15em;
  transition: color 0.05s linear;
}

/* Body — positions the scan line relative */
.sr-body {
  position: relative;
  overflow: hidden;
  padding: 4px 16px 14px;
}

/* Timer bar */
.sr-timer {
  position: relative;
  height: 20px;
  background: #111;
  border-radius: 3px;
  margin-bottom: 10px;
  overflow: hidden;
}
.sr-timer-bar {
  height: 100%;
  background: linear-gradient(90deg, #3fb95033, #3fb95066);
  border-radius: 3px;
  transition: width 1s linear;
}
.sr-timer-label {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #888;
  letter-spacing: 0.05em;
}
.sr-timer-fired {
  animation: sr-fire-flash 0.5s ease-out;
}
.sr-timer-fired .sr-timer-label { color: #3fb950; }
@keyframes sr-fire-flash {
  0% { background: #3fb95033; }
  100% { background: #111; }
}

/* Pair row */
.sr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg,
    hsla(0, 70%, 40%, 0.15),
    hsla(90, 70%, 40%, 0.15),
    hsla(180, 70%, 40%, 0.15),
    hsla(270, 70%, 40%, 0.15),
    hsla(360, 70%, 40%, 0.15)
  ) 1;
}
.sr-row:last-child { border-bottom: none; }

.sr-row-ready {
  animation: sr-row-rainbow 3s linear infinite;
  border-bottom-width: 2px;
  border-image: linear-gradient(90deg,
    hsl(0, 80%, 50%),
    hsl(60, 80%, 50%),
    hsl(120, 80%, 50%),
    hsl(180, 80%, 50%),
    hsl(240, 80%, 50%),
    hsl(300, 80%, 50%),
    hsl(360, 80%, 50%)
  ) 1;
}

/* Pair name */
.sr-pair {
  width: 72px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg);
  flex-shrink: 0;
}
.sr-row-ready .sr-pair {
  animation: sr-ready-glow 3s linear infinite;
}

/* Direction badge */
.sr-dir {
  width: 46px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sr-dir-long  { color: #3fb950; background: rgba(63, 185, 80, 0.15); }
.sr-dir-short { color: #f85149; background: rgba(248, 81, 73, 0.15); }
.sr-dir-skip  { color: var(--muted); background: var(--panel-2); }

/* (old horizontal gate container removed — now vertical in .sr-gates below) */

/* Row header */
.sr-row-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.sr-score {
  font-size: 10px; color: #777; margin-left: auto;
}

/* Gates — vertical stack */
.sr-gates {
  display: flex; flex-direction: column; gap: 6px;
}

/* Individual gate — horizontal row with bar below */
.sr-gate {
  padding: 6px 10px;
  background: #111;
  border-radius: 4px;
  border-left: 3px solid #333;
  animation: sr-gate-in 0.3s ease-out both;
}
.sr-gate:nth-child(2) { animation-delay: 0.05s; }
.sr-gate:nth-child(3) { animation-delay: 0.1s; }
.sr-gate:nth-child(4) { animation-delay: 0.15s; }
@keyframes sr-gate-in {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}
.sr-gate-pass { border-left-color: #3fb950; }
.sr-icon-close { color: #e3b341; }

.sr-gate-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.sr-gate-icon { font-size: 12px; width: 16px; flex-shrink: 0; }
.sr-icon-pass { color: #3fb950; }
.sr-icon-fail { color: #f85149; }

/* Proximity bar */
.sr-prox-track {
  height: 14px; background: #1a1a2e; border-radius: 4px;
  overflow: hidden; position: relative; margin-top: 2px;
}
.sr-prox-fill {
  height: 100%; border-radius: 4px; min-width: 2px;
  transition: width 1s ease-out, background 0.5s;
  position: absolute; top: 0; left: 0;
}
.sr-prox-threshold {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: #ccc; border-radius: 1px;
  box-shadow: 0 0 4px rgba(255,255,255,0.3);
}
.sr-gauge-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; margin-bottom: 2px;
}
.sr-gauge-now { color: #ccc; font-weight: 700; }
.sr-gauge-goal { color: #888; }

/* Gate label */
.sr-gate-label {
  font-size: 11px;
  font-weight: 700;
  color: #ccc;
  min-width: 70px;
}
.sr-val-pass { color: #3fb950 !important; font-weight: 700; }

/* Gate value */
.sr-gate-val {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.sr-gate-fail .sr-gate-val { color: var(--muted); }

/* Gate descriptor */
.sr-gate-desc {
  font-size: 8px;
  color: #777;
  letter-spacing: 0.04em;
}

/* SCALP READY badge */
.sr-ready {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(63, 185, 80, 0.1);
  border: 1px solid rgba(63, 185, 80, 0.3);
  animation: sr-pulse 2s ease-in-out infinite, sr-ready-glow 3s linear infinite;
  flex-shrink: 0;
  margin-left: auto;
}

/* Loading shimmer */
.sr-shimmer-block {
  padding: 8px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sr-shimmer {
  height: 36px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--panel-2) 25%, #2a3040 50%, var(--panel-2) 75%);
  background-size: 200% 100%;
  animation: sr-shimmer 1.5s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 600px) {
  .sr-gate-label { min-width: 60px; font-size: 10px; }
  .sr-gate-desc { font-size: 8px; }
  .sr-gauge-labels { font-size: 9px; }
  .sr-pair { font-size: 11px; }
  .sr-ready { font-size: 9px; padding: 2px 6px; }
  .sr-row-head { flex-wrap: wrap; gap: 4px; }
  .sr-gate-row { flex-wrap: wrap; }
  .sr-gate-val { font-size: 11px; }

  .pos-cards { grid-template-columns: 1fr; }
}

/* ====================================================================
 * Landscape mode optimization — shorter viewports on phones rotated.
 * ==================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  header.top { padding: 6px 16px; }
  .stats-bar { padding: 4px 12px; }
  .living-canvas { height: 280px; }
  .timing-canvas { height: 260px; }
  .chart { height: 280px; }
}

/* ====================================================================
 * Desktop layout improvements for grid components (>=1024px).
 * ==================================================================== */
@media (min-width: 1024px) {

  /* ── MarketMap: strength bars + pair chips side by side ── */
  .mm-body {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }
  .mm-strength {
    flex: 1;
    min-width: 0;
    gap: 5px;
  }
  .mm-ccy-row {
    height: 28px;
    gap: 10px;
  }
  .mm-ccy-name {
    font-size: 12px;
    width: 34px;
  }
  .mm-bar-track {
    height: 12px;
    border-radius: 6px;
  }
  .mm-ccy-val {
    font-size: 11px;
    width: 42px;
  }
  .mm-ccy-rank {
    font-size: 9px;
    width: 12px;
  }

  .mm-sidebar {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .mm-pairs {
    flex-direction: column;
    gap: 4px;
    border-top: none;
    padding-top: 0;
  }
  .mm-pair-chip {
    padding: 5px 10px;
    font-size: 11px;
    gap: 3px;
  }
  .mm-pair-pips {
    font-size: 10px;
    margin-left: auto;
  }

  /* Correlation legend */
  .mm-corr-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    color: rgba(255,255,255,0.4);
    font-family: "SF Mono", monospace;
  }
  .mm-corr-legend-bar {
    height: 8px;
    width: 80px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f85149, #8b949e, #2ea043);
  }
  /* ── MarketIntel: data table on desktop, hide card grid ── */
  .intel-grid { display: none; }
  .intel-table-wrap { display: block; }

  .intel-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 11px;
  }
  .intel-table th {
    text-align: left;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.2s;
  }
  .intel-table th:hover {
    color: rgba(255,255,255,0.6);
  }
  .intel-table th .sort-arrow {
    font-size: 8px;
    margin-left: 3px;
    opacity: 0.5;
  }
  .intel-table th .sort-arrow.active {
    opacity: 1;
    color: rgba(0,200,255,0.8);
  }
  .intel-table td {
    padding: 8px 12px;
    color: var(--fg);
    white-space: nowrap;
  }
  .intel-table tr:nth-child(even) td {
    background: rgba(255,255,255,0.02);
  }
  .intel-table tr:nth-child(odd) td {
    background: rgba(255,255,255,0.005);
  }
  .intel-table tr:hover td {
    background: rgba(0,200,255,0.04);
  }
  .intel-table .intel-t-pair {
    font-weight: 700;
    font-size: 12px;
  }
  .intel-table .intel-t-scalp {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0,255,136,0.15);
    color: #2ea043;
    margin-left: 6px;
  }
  .intel-table .intel-t-gauge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .intel-t-minibar {
    width: 60px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.04);
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }
  .intel-t-minibar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 1s;
  }
  .intel-t-minibar-needle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 3px currentColor;
    transition: left 1s;
  }
  .intel-t-trend {
    font-weight: 700;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.05em;
  }
  .intel-t-trend-up { background: rgba(46,160,67,0.12); color: #2ea043; }
  .intel-t-trend-down { background: rgba(248,81,73,0.12); color: #f85149; }
  .intel-t-trend-flat { background: rgba(139,148,158,0.08); color: #8b949e; }
  .intel-t-score {
    font-weight: 700;
    font-size: 12px;
  }
  .intel-t-score-high { color: #2ea043; }
  .intel-t-score-mid { color: #e3b341; }
  .intel-t-score-low { color: rgba(255,255,255,0.2); }

  /* ── TickFlow: horizontal bar chart layout ── */
  .tf-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .tf-card {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 12px;
    padding: 10px 16px;
    border-left-width: 4px;
  }
  .tf-card-head {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: center;
    margin-bottom: 0;
  }
  .tf-pair { font-size: 13px; }
  .tf-dir { display: none; }
  .tf-bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
  }
  .tf-desktop-bar {
    display: flex;
    align-items: center;
    height: 28px;
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
    position: relative;
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .tf-dbar-buy {
    height: 100%;
    background: linear-gradient(90deg, rgba(46,160,67,0.5), rgba(46,160,67,0.25));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #2ea043;
    font-variant-numeric: tabular-nums;
    transition: width 1s ease;
    min-width: 40px;
  }
  .tf-dbar-sell {
    height: 100%;
    background: linear-gradient(90deg, rgba(248,81,73,0.25), rgba(248,81,73,0.5));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #f85149;
    font-variant-numeric: tabular-nums;
    transition: width 1s ease;
    min-width: 40px;
  }
  .tf-dbar-center-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 700;
    color: var(--fg);
    z-index: 1;
    text-shadow: 0 0 6px #0a0a0a;
    pointer-events: none;
  }
  .tf-labels { display: none; }
  .tf-meta {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 4px;
  }
  .tf-vol { font-size: 9px; padding: 2px 8px; border-radius: 10px; }
  .tf-vol-bars { max-width: 160px; height: 16px; }
  .tf-str { font-size: 11px; }  .oi-header { grid-column: 1 / -1; }
  /* ── Closes: enhanced table styling ── */
  .closes-desktop-table th { font-size: 11px; padding: 8px 12px; }
  .closes-desktop-table td { padding: 10px 12px; }
  .closes-desktop-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }
  .closes-desktop-table tbody tr:nth-child(odd) { background: transparent; }
  .closes-desktop-table tbody tr:hover { background: var(--panel-2); }
  .closes-pnl-lg {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .closes-exit-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .closes-exit-tp { background: rgba(46,160,67,0.15); color: #2ea043; }
  .closes-exit-sl { background: rgba(248,81,73,0.15); color: #f85149; }
  .closes-exit-time { background: rgba(227,179,65,0.15); color: #e3b341; }
  .closes-exit-other { background: rgba(139,148,158,0.1); color: #8b949e; }

  /* ── DailyHistory: horizontal bar chart ── */
  .dh-mobile-table { display: none; }
  .dh-desktop-bars { display: flex; }
  .dh-sparkline { display: block; }
  .dh-desktop-bars {
    flex-direction: column;
    gap: 2px;
  }
  .dh-bar-row {
    display: grid;
    grid-template-columns: 100px 60px 60px 1fr 90px;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .dh-bar-row:hover { background: var(--panel-2); }
  .dh-bar-row-today {
    box-shadow: 0 0 10px rgba(126,231,135,0.08), inset 0 0 20px rgba(126,231,135,0.03);
    border: 1px solid rgba(126,231,135,0.12);
  }
  .dh-bar-date { font-size: 12px; font-weight: 700; color: var(--fg); }
  .dh-bar-trades { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .dh-bar-wl { font-size: 11px; font-variant-numeric: tabular-nums; }
  .dh-bar-track {
    height: 24px;
    background: rgba(255,255,255,0.03);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
  }
  .dh-bar-fill {
    height: 100%;
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--fg);
    transition: width 0.8s ease;
    min-width: fit-content;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .dh-bar-fill.positive {
    background: linear-gradient(90deg, rgba(46,160,67,0.4), rgba(46,160,67,0.15));
    justify-content: flex-end;
  }
  .dh-bar-fill.negative {
    background: linear-gradient(90deg, rgba(248,81,73,0.15), rgba(248,81,73,0.4));
    justify-content: flex-start;
  }
  .dh-bar-pnl {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .dh-sparkline {
    margin-top: 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
  }
  .dh-sparkline-label {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .dh-sparkline svg { width: 100%; height: 40px; display: block; }
  .dh-bar-detail { padding: 4px 12px 10px 112px; }
  .dh-bar-detail table { font-size: 12px; }
  .dh-bar-detail th { padding: 4px 8px; font-size: 10px; }
  .dh-bar-detail td { padding: 4px 8px; }
}

/* OI crossover flash keyframes */
@keyframes oi-cross-flash-bull {
  0%, 100% { background: rgba(46,160,67,0.15); }
  50% { background: rgba(46,160,67,0.3); box-shadow: 0 0 8px rgba(46,160,67,0.2); }
}
@keyframes oi-cross-flash-bear {
  0%, 100% { background: rgba(248,81,73,0.15); }
  50% { background: rgba(248,81,73,0.3); box-shadow: 0 0 8px rgba(248,81,73,0.2); }
}

/* Default: hide desktop-only elements */
.tf-desktop-bar { display: none; }
.dh-desktop-bars { display: none; }
.dh-sparkline { display: none; }

/* Hide desktop-only elements on mobile */
.intel-table-wrap { display: none; }
.mm-corr-legend { display: none; }

/* ====================================================================
 * Desktop: OpenPositions / ScalpRadar / Chart refinements
 * All behind min-width: 1024px to preserve mobile.
 * ==================================================================== */

/* --- Elements in DOM on all breakpoints, hidden on mobile --- */

.sr-readiness-ring {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: none;
}
.sr-readiness-svg { width: 100%; height: 100%; }
.sr-readiness-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.chart-pair-tabs { display: none; }
.chart-pair-tab {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 6px 14px;
  margin-left: -1px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
}
.chart-pair-tab:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.chart-pair-tab:last-child { border-radius: 0 4px 4px 0; }
.chart-pair-tab:hover {
  color: var(--fg);
  border-color: var(--accent);
  z-index: 1;
  position: relative;
}
.chart-pair-tab.active {
  background: var(--panel-hi);
  color: var(--accent);
  border-color: var(--accent);
  z-index: 1;
  position: relative;
}

.chart-features-hidden { display: none; }
.chart-features-inner { display: contents; }
.pos-header-row { display: none; }

/* ── Desktop breakpoint ── */
@media (min-width: 1024px) {

  /* Desktop: OpenPositions -------------------------------------------*/

  .pos-header-row {
    display: grid;
    grid-template-columns: 1.2fr 0.7fr 1fr 0.8fr 0.5fr;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  }

  .pos-cards { grid-template-columns: 1fr; gap: 6px; }

  .pos-card:not(.pos-card-empty) {
    display: grid;
    grid-template-columns: 1.2fr 0.7fr 1fr 0.8fr 0.5fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 8px;
    padding: 10px 14px;
    border-radius: 6px;
  }
  .pos-card:not(.pos-card-empty) .pos-head {
    grid-column: 1; grid-row: 1; margin-bottom: 0;
  }
  .pos-card:not(.pos-card-empty) .pos-hero {
    grid-column: 3; grid-row: 1; padding: 0; gap: 8px;
  }
  .pos-card:not(.pos-card-empty) .pos-hero .ring-wrap { display: none; }
  .pos-card:not(.pos-card-empty) .pos-status-row {
    grid-column: 1 / -1; grid-row: 2;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid rgba(51, 51, 51, 0.4);
  }
  .pos-card:not(.pos-card-empty) .pos-entry-row {
    grid-column: 1 / -1; grid-row: 3;
  }

  .pos-card.card-glow-win {
    background: linear-gradient(135deg, rgba(46,160,67,0.07) 0%, var(--panel-2) 60%) !important;
    border-color: rgba(46,160,67,0.35) !important;
    box-shadow: 0 0 24px rgba(46,160,67,0.1), inset 0 0 40px rgba(46,160,67,0.03);
  }
  .pos-card.card-glow-lose {
    background: linear-gradient(135deg, rgba(248,81,73,0.06) 0%, var(--panel-2) 60%) !important;
    border-color: rgba(248,81,73,0.3) !important;
    box-shadow: 0 0 24px rgba(248,81,73,0.08), inset 0 0 40px rgba(248,81,73,0.02);
  }

  .pos-card-empty {
    min-height: 44px; padding: 4px 14px;
    border-style: dashed; border-width: 1px; opacity: 0.35;
  }
  .pos-card-empty .empty-slot { gap: 10px; padding: 0; }
  .pos-card-empty .empty-ring { width: 30px; height: 30px; }
  .pos-card-empty .empty-title { font-size: 11px; }
  .pos-card-empty .empty-sub { font-size: 10px; }
  .pos-card-empty .empty-pills { gap: 3px; margin-top: 3px; }
  .pos-card-empty .empty-pills .status-pill { font-size: 9px; padding: 1px 5px; }

  /* Desktop: ScalpRadar ----------------------------------------------*/

  .sr-readiness-ring { display: block; }
  .sr-timer { margin-bottom: 14px; }

  .sr-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  .sr-body .sr-timer { grid-column: 1 / -1; }

  .sr-body .sr-row {
    display: flex; flex-direction: column; align-items: stretch;
    padding: 12px;
    border: 1px solid var(--border); border-radius: 6px;
    background: #0e0e0e; border-image: none;
  }
  .sr-body .sr-row:last-child { border-bottom: 1px solid var(--border); }

  .sr-body .sr-row-head {
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(51,51,51,0.5); flex-wrap: nowrap;
  }
  .sr-body .sr-pair { font-size: 14px; width: auto; }
  .sr-body .sr-dir { font-size: 10px; padding: 3px 8px; }
  .sr-body .sr-gate { padding: 8px 12px; }
  .sr-body .sr-gate-row { gap: 10px; }
  .sr-body .sr-prox-track { height: 16px; }
  .sr-body .sr-gate-label { font-size: 12px; }
  .sr-body .sr-gate-desc { font-size: 9px; }
  .sr-body .sr-gauge-labels { font-size: 11px; }
  .sr-readiness-ring { width: 36px; height: 36px; }

  /* Desktop: Chart ---------------------------------------------------*/

  .chart { height: 500px; }
  .chart-pair-tabs { display: flex; }
  .chart-pair-select select { display: none; }
  .chart-current-price { font-size: 24px; }
  .chart-features-hidden { display: flex; }
  .chart-controls-toggle { display: none; }
  .chart-features {
    flex-direction: row; align-items: center;
    gap: 16px; padding: 6px 8px 8px;
  }
  .chart-features-inner {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  }
}

/* ====================================================================
 * Desktop widescreen — better use of space on large monitors.
 * ==================================================================== */
@media (min-width: 1400px) {
  main { max-width: 1400px; margin: 0 auto; }
  .row-three { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
}

/* ====================================================================
 * AgenticFlow — decision pipeline infographic
 * ==================================================================== */

/* Animated dashed connection lines */
@keyframes flow-dash {
  to { stroke-dashoffset: -14; }
}

.af-panel {
  contain: content;
}

.af-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 8px 0 20px;
  position: relative;
}

/* ── Tooltip ── */
.af-tooltip {
  z-index: 100;
  max-width: 320px;
  padding: 10px 14px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #ccc;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  word-break: break-word;
}

/* ── Layer ── */
.af-layer {
  width: 100%;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
  overflow: visible;
}

.af-layer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #2a2a2a;
  flex-wrap: wrap;
}

.af-layer-num {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #555;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

.af-layer-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #e6edf3;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

.af-timing {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: #0a0a0a;
  background: #555;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  white-space: nowrap;
}

.af-layer-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ── Node ── */
.af-node {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid;
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  min-width: 140px;
  max-width: 260px;
  transition: background 0.2s, box-shadow 0.2s;
  cursor: default;
}

.af-node:hover {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 16px rgba(255,255,255,0.04);
}

.af-node-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

.af-node-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.af-node-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

.af-node-desc {
  font-size: 11px;
  line-height: 1.4;
  color: #888;
}

.af-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
  width: fit-content;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

/* ── Arrows ── */
.af-arrow-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.af-flow-line {
  animation: flow-dash 0.8s linear infinite;
}

.af-harrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Pipeline (horizontal row of nodes) ── */
.af-pipeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* ── Outputs row ── */
.af-outputs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.af-output {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px dashed;
  border-radius: 4px;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.03em;
}

/* ── Gate circles (scalp) ── */
.af-scalp-desc {
  font-size: 11px;
  color: #666;
  text-align: center;
  line-height: 1.5;
  max-width: 480px;
}

.af-gates-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 8px 0;
}

.af-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  transition: transform 0.15s;
}

.af-gate:hover {
  transform: scale(1.1);
}

.af-gate-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  border: 2px solid #333;
  color: #555;
  background: rgba(255,255,255,0.03);
  transition: all 0.3s;
}

.af-gate--pass .af-gate-num {
  border-color: #2ea043;
  color: #2ea043;
  background: rgba(46,160,67,0.1);
  box-shadow: 0 0 8px rgba(46,160,67,0.2);
}

.af-gate-label {
  font-size: 9px;
  color: #666;
  letter-spacing: 0.02em;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  text-align: center;
  max-width: 56px;
  line-height: 1.2;
}

.af-gate--pass .af-gate-label {
  color: #2ea043;
}

.af-gates-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.af-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #666;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

.af-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.af-legend-dot--pass {
  background: #2ea043;
  box-shadow: 0 0 4px rgba(46,160,67,0.3);
}

.af-legend-dot--fail {
  background: #333;
  border: 1px solid #555;
}

.af-legend-result {
  font-weight: 700;
  color: #f85149;
}

/* ── Self-improvement cycle ── */
.af-improve-story {
  color: #999; font-size: 12px; font-style: italic;
  margin-bottom: 12px; text-align: center;
}
.af-improve-cycle {
  display: flex; flex-direction: column; gap: 0;
}
.af-improve-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 0;
}
.af-improve-step-num {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #0a0a0a;
  flex-shrink: 0; margin-top: 8px;
}
.af-improve-step .af-node {
  flex: 0 0 auto; min-width: 180px; max-width: 220px;
}
.af-improve-detail {
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  font-size: 11px; line-height: 1.7; color: #bbb;
  padding: 6px 0; flex: 1; min-width: 0;
}
.af-improve-eg {
  font-weight: 700; color: #e6edf3;
  background: rgba(255,255,255,0.06);
  padding: 1px 5px; border-radius: 3px;
}
.af-improve-feedback {
  margin-top: 12px; text-align: center;
}
.af-improve-feedback-svg {
  width: 100%; max-width: 500px; height: 40px;
}
.af-improve-feedback-label {
  display: block; font-size: 11px; color: #e3b341;
  font-weight: 600; letter-spacing: 0.05em;
  margin-top: 4px;
}

/* Legacy grid fallback */
.af-improve-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.af-improve-grid .af-node {
  max-width: none;
}

.af-feedback-wrap {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.af-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.af-feedback-svg {
  opacity: 0.5;
}

.af-feedback-svg .af-flow-line {
  animation: flow-dash 1.2s linear infinite;
}

.af-feedback-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #e3b341;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  opacity: 0.6;
}

/* ── Layer accent borders ── */
.af-layer--thesis {
  border-left: 2px solid #ff7b0044;
}
.af-layer--entry {
  border-left: 2px solid #58a6ff44;
}
.af-layer--scalp {
  border-left: 2px solid #e040fb44;
}
.af-layer--improve {
  border-left: 2px solid #e3b34144;
}

/* ── Live data elements ── */
.af-entry-decisions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #2a2a2a;
  border-radius: 4px;
}

.af-entry-item {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  border-left: 2px solid #555;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

.af-executed-trade {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(63, 185, 80, 0.06);
  border: 1px solid rgba(63, 185, 80, 0.25);
  border-radius: 4px;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

@keyframes af-blink-anim {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.af-blink {
  animation: af-blink-anim 1s infinite;
}

/* ── Mobile (default) ── */
@media (max-width: 700px) {
  .af-node {
    max-width: none;
    width: 100%;
  }
  .af-pipeline {
    flex-direction: column;
    align-items: stretch;
  }
  .af-pipeline .af-harrow {
    transform: rotate(90deg);
    align-self: center;
  }
  .af-improve-step {
    flex-direction: column; gap: 8px;
  }
  .af-improve-step .af-node {
    min-width: 0; max-width: none; width: 100%;
  }
  .af-improve-grid {
    grid-template-columns: 1fr;
  }
  .af-tooltip {
    max-width: 260px;
    font-size: 11px;
  }
  .af-gate-num {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  .af-gate-label {
    font-size: 8px;
    max-width: 48px;
  }
}

/* ── Desktop ── */
@media (min-width: 1024px) {
  .af-container {
    padding: 16px 8px 28px;
  }

  .af-layer-content {
    padding: 20px 24px;
  }

  .af-pipeline {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .af-node {
    min-width: 160px;
    max-width: 220px;
  }

  .af-pipeline .af-node {
    flex: 1;
    min-width: 0;
  }

  .af-improve-step .af-node {
    min-width: 220px;
  }
  .af-improve-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .af-improve-grid .af-node {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .af-improve-grid .af-node-body {
    align-items: center;
  }

  .af-gate-num {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .af-gates-row {
    gap: 12px;
  }

  .af-gate-label {
    font-size: 10px;
    max-width: 64px;
  }
}

/* ── AgenticFlow demo mode ── */
.af-demo-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  margin: 4px 0 8px;
  background: rgba(227,179,65,0.06);
  border: 1px solid rgba(227,179,65,0.2);
  border-radius: 6px;
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  font-size: 11px;
}
.af-demo-bar-left {
  display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
}
.af-demo-market-closed {
  font-size: 9px; font-weight: 700; color: #f85149;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.af-demo-mode-label {
  font-size: 12px; font-weight: 800; color: #e3b341;
  letter-spacing: 0.05em;
  animation: af-demo-pulse 2s ease-in-out infinite;
}
.af-demo-bar-center {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.af-demo-current-step {
  font-size: 12px; color: #ccc; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-demo-progress {
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
}
.af-demo-progress-fill {
  height: 100%; background: #e3b341;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.af-demo-step-count {
  font-size: 9px; color: #777;
}
.af-demo-bar-right {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.af-demo-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: #ccc; font-size: 13px;
  cursor: pointer; padding: 0;
}
.af-demo-btn:hover { border-color: #e3b341; color: #e3b341; }
.af-demo-speed {
  display: flex; gap: 2px;
}
.af-demo-speed-btn {
  padding: 2px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  color: #777; font-size: 10px; font-weight: 600;
  cursor: pointer;
  font-family: "SF Mono", monospace;
}
.af-demo-speed-btn:hover { color: #ccc; border-color: #555; }
.af-demo-speed-active {
  background: rgba(227,179,65,0.15);
  border-color: rgba(227,179,65,0.4);
  color: #e3b341;
}
@keyframes af-demo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
@media (max-width: 600px) {
  .af-demo-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .af-demo-bar-center { order: 3; width: 100%; }
  .af-demo-current-step { font-size: 11px; }
}

/* ── Project Stats ── */
.ps-panel { contain: content; }
.ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 8px 0;
}
.ps-card {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color 0.2s;
}
.ps-card:hover {
  border-color: rgba(88,166,255,0.3);
}
.ps-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(88,166,255,0.1);
  border: 1px solid rgba(88,166,255,0.2);
  border-radius: 6px;
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  font-size: 10px; font-weight: 700; color: #58a6ff;
  flex-shrink: 0;
}
.ps-body { min-width: 0; }
.ps-value {
  font-size: 20px; font-weight: 800; color: #e6edf3;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.ps-label {
  font-size: 11px; font-weight: 600; color: #9ca3af;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.ps-sub {
  font-size: 10px; color: #666; line-height: 1.3;
  margin-top: 2px;
}
@media (max-width: 600px) {
  .ps-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ps-card { padding: 10px 12px; }
  .ps-value { font-size: 18px; }
  .ps-icon { width: 30px; height: 30px; font-size: 9px; }
}
@media (min-width: 1024px) {
  .ps-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

/* ── AgenticFlow active layer highlight ── */
.af-layer--active {
  border: 1px solid rgba(227,179,65,0.4) !important;
  background: rgba(227,179,65,0.04) !important;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(227,179,65,0.08), inset 0 0 20px rgba(227,179,65,0.03);
  animation: af-layer-glow 1.5s ease-in-out infinite;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.af-layer--active .af-layer-header {
  background: rgba(227,179,65,0.06);
}
.af-layer--active .af-layer-num {
  color: #e3b341;
}
@keyframes af-layer-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(227,179,65,0.08), inset 0 0 20px rgba(227,179,65,0.03); }
  50% { box-shadow: 0 0 30px rgba(227,179,65,0.15), inset 0 0 30px rgba(227,179,65,0.06); }
}

/* ── Demo explanation callout ── */
.af-demo-explain {
  padding: 12px 16px;
  margin: 0 0 8px;
  background: rgba(227,179,65,0.06);
  border-left: 3px solid #e3b341;
  border-radius: 0 6px 6px 0;
  animation: af-explain-in 0.4s ease-out;
}
.af-demo-explain-text {
  font-size: 13px;
  line-height: 1.7;
  color: #ccc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@keyframes af-explain-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .af-demo-explain { padding: 10px 12px; }
  .af-demo-explain-text { font-size: 12px; line-height: 1.6; }
}

/* ── Bot Brain ── */
/* ── Data Flow ticker ── */
.dataflow-strip {
  overflow: hidden; background: linear-gradient(90deg, #0d1117, #111820, #0d1117);
  border-bottom: 1px solid #21262d;
  padding: 6px 0; font-size: 12px; font-family: "SF Mono", monospace;
  position: sticky; top: 0; z-index: 50;
}
.dataflow-scroll {
  display: flex; gap: 32px; white-space: nowrap;
  animation: dataflow-scroll 25s linear infinite;
  width: max-content;
}
@keyframes dataflow-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.dataflow-item { display: inline-flex; gap: 6px; align-items: center; }
.dataflow-pair { color: #58a6ff; font-weight: 600; font-size: 11px; }
.dataflow-price { color: #e6edf3; font-weight: 500; }
.dataflow-change { font-size: 11px; font-weight: 600; }
.dataflow-change.green { color: #2ea043; text-shadow: 0 0 6px rgba(46, 160, 67, 0.3); }
.dataflow-change.red { color: #f85149; text-shadow: 0 0 6px rgba(248, 81, 73, 0.3); }
.dataflow-item { border-right: 1px solid #21262d; padding-right: 8px; }

.brain-panel { overflow: hidden; }
.brain-pulse {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2ea043; margin-left: 8px; vertical-align: middle;
  animation: brain-blink 2s ease-in-out infinite;
}
@keyframes brain-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px #2ea043; }
  50% { opacity: 0.3; box-shadow: none; }
}
.brain-countdown {
  font-weight: 500; font-size: 10px; color: #58a6ff; letter-spacing: 0.02em;
  margin-left: 8px; padding: 1px 6px; background: rgba(88, 166, 255, 0.1);
  border-radius: 3px; font-variant-numeric: tabular-nums;
  transition: all 0.3s ease;
}
.brain-countdown-soon { color: #d29922; background: rgba(210, 153, 34, 0.15); }
.brain-last-update { font-weight: 400; font-size: 9px; color: #484f58; margin-left: 8px; letter-spacing: 0; }
.brain-pulse-fast { animation-duration: 0.5s !important; }
.brain-scanning { border-color: #58a6ff !important; box-shadow: 0 0 20px rgba(88, 166, 255, 0.15) !important; }
.brain-pair-scanning {
  border-color: #58a6ff !important;
  animation: brain-pair-scan 0.6s ease-out;
}
@keyframes brain-pair-scan {
  0% { border-color: #58a6ff; box-shadow: 0 0 16px rgba(88, 166, 255, 0.3); }
  100% { border-color: #1e2432; box-shadow: none; }
}
.brain-stats { display: flex; gap: 10px; font-size: 12px; }
.brain-stat {
  color: #8b949e; position: relative; cursor: pointer;
  display: flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 4px; transition: background 0.2s;
}
.brain-stat:hover, .brain-stat:active { background: #21262d; }
.brain-stat-icon { font-size: 13px; }
.brain-stat-val { font-weight: 600; color: #e6edf3; }
.brain-stat-tip {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  background: #30363d; color: #e6edf3; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
}
.brain-stat:hover .brain-stat-tip, .brain-stat:active .brain-stat-tip { opacity: 1; }
/* ── Share button (inline in panel-title) ── */
.panel-title .share-btn {
  display: flex !important;
  width: 22px; height: 22px; border-radius: 4px;
  background: transparent; color: #484f58; border: none;
  font-size: 13px; cursor: pointer; align-items: center; justify-content: center;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0; margin-left: 4px;
}
.panel-title .share-btn:hover { background: #21262d; color: #e6edf3; }
.panel-title .share-btn:active { background: #30363d; color: #e6edf3; }
.panel-title .share-btn-busy { color: #58a6ff; cursor: wait; }
@media (max-width: 768px) {
  .panel-title .share-btn { width: 28px; height: 28px; font-size: 15px; color: #8b949e; }
  .brain-stats { gap: 6px; flex-wrap: wrap; }
  .brain-stat { padding: 2px 4px; font-size: 11px; }
  .brain-stat-tip { bottom: -22px; font-size: 10px; }
  .brain-pipeline { display: none !important; }
  .brain-warmup { display: none; }
  .brain-pair-active { box-shadow: none !important; }
  .brain-warmup-label { font-size: 9px; }
  .brain-learning-stats { font-size: 10px; gap: 4px; }
  .brain-narration { padding: 10px; margin: 6px 4px 10px; }
  .brain-doing { font-size: 13px; }
  .brain-next { font-size: 11px; }
  .brain-feed { max-height: 150px; }
  .brain-event { padding: 3px 6px; font-size: 10px; }
  .brain-label { min-width: 60px; font-size: 10px; }
  .brain-detail { font-size: 9px; }
}

.brain-narration {
  padding: 12px 14px; margin: 8px 8px 12px; border-radius: 8px;
  background: linear-gradient(135deg, #161b22, #1c2230); border: 1px solid #30363d;
  position: relative; overflow: hidden;
}
.brain-narration::before {
  content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: linear-gradient(180deg, #58a6ff, #2ea043);
  border-radius: 8px 0 0 8px;
}
.brain-doing { font-size: 13px; color: #e6edf3; line-height: 1.6; padding-left: 8px; }
.brain-doing strong { color: #58a6ff; }
.brain-next { font-size: 12px; color: #8b949e; line-height: 1.5; margin-top: 6px; padding-left: 8px; }
.brain-next strong { color: #6e7681; }
.brain-feed {
  max-height: 320px; overflow-y: auto; padding: 4px 8px;
  scrollbar-width: thin; scrollbar-color: #30363d transparent;
}
.brain-empty { color: #8b949e; text-align: center; padding: 24px; font-style: italic; }
.brain-event {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-left: 3px solid #30363d; margin-bottom: 2px; border-radius: 0 4px 4px 0;
  background: var(--panel-2); font-size: 12px;
  transition: all 0.3s ease, opacity 0.5s ease;
  opacity: 0.7;
}
.brain-event:first-child { opacity: 1; }
.brain-event:nth-child(2) { opacity: 0.9; }
.brain-event:nth-child(3) { opacity: 0.85; }
.brain-event-new {
  animation: brain-slide-in 0.5s ease-out;
  opacity: 1 !important;
}
@keyframes brain-slide-in {
  from { opacity: 0; transform: translateX(-16px); background: rgba(88, 166, 255, 0.08); }
  to { opacity: 1; transform: translateX(0); background: var(--panel-2); }
}
.brain-icon { font-size: 14px; flex-shrink: 0; }
.brain-label { font-weight: 600; white-space: nowrap; min-width: 100px; }
.brain-detail { color: #8b949e; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain-time { color: #484f58; font-size: 11px; white-space: nowrap; }

/* Brain pair progress cards — mobile gets 3-col grid via @media block above */
.brain-pairs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 4px; max-width: 100%; box-sizing: border-box; }
@media (min-width: 769px) {
  .brain-pairs { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; padding: 8px; }
}
.brain-pair-card {
  background: var(--panel-2); border-radius: 4px; padding: 3px 4px;
  border: 1px solid #1e2432; transition: border-color 0.5s, box-shadow 0.5s;
  min-width: 0; overflow: hidden; box-sizing: border-box;
}
@media (min-width: 769px) {
  .brain-pair-card { border-radius: 8px; padding: 10px 12px; }
}
.brain-pair-card:hover { transform: translateY(-1px); border-color: #30363d; }
.brain-pair-active {
  border-color: #2ea043; box-shadow: 0 0 16px rgba(46, 160, 67, 0.25);
  animation: brain-card-trade 2s ease-in-out infinite;
}
@keyframes brain-card-trade {
  0%, 100% { box-shadow: 0 0 12px rgba(46, 160, 67, 0.2); }
  50% { box-shadow: 0 0 20px rgba(46, 160, 67, 0.35); }
}
.brain-pair-header { display: flex; align-items: center; gap: 3px; margin-bottom: 1px; font-size: 9px; }
.brain-pair-header .pill { font-size: 7px; padding: 0 2px; }
.brain-pair-status { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brain-learning-card { grid-column: 1 / -1; }
.brain-learning-stats { font-size: 9px; }
@media (min-width: 769px) {
  .brain-pair-header { gap: 8px; margin-bottom: 6px; font-size: 13px; }
  .brain-pair-header .pill { font-size: inherit; padding: revert; }
  .brain-pair-status { font-size: inherit; white-space: normal; }
  .brain-learning-stats { font-size: inherit; }
}
.brain-warmup { display: flex; align-items: center; gap: 8px; }
.brain-warmup-bar { flex: 1; height: 6px; background: #21262d; border-radius: 3px; overflow: hidden; }
.brain-warmup-fill {
  height: 100%; border-radius: 3px; transition: width 1s ease;
  background: linear-gradient(90deg, #58a6ff, #79c0ff);
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.4);
  position: relative;
}
.brain-warmup-fill::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
  animation: warmup-shimmer 1.5s ease-in-out infinite;
}
@keyframes warmup-shimmer {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.brain-warmup-label { font-size: 11px; color: #8b949e; white-space: nowrap; }
.brain-pipeline { display: flex; gap: 4px; align-items: center; margin: 4px 0; }
.brain-step { display: flex; flex-direction: column; align-items: center; flex: 1; }
.brain-step-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #30363d;
  border: 2px solid #30363d; transition: all 0.4s ease;
  position: relative;
}
.brain-step-done .brain-step-dot {
  border-color: #2ea043; background: #2ea043;
  box-shadow: 0 0 6px rgba(46, 160, 67, 0.5);
}
.brain-step-current .brain-step-dot {
  animation: brain-step-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 10px currentColor;
}
@keyframes brain-step-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}
/* Connection lines between pipeline steps */
.brain-pipeline { position: relative; }
.brain-step-label { font-size: 9px; color: #484f58; margin-top: 2px; }
.brain-step-done .brain-step-label { color: #2ea043; }
.brain-step-current .brain-step-label { color: #e6edf3; }
.brain-pair-status { font-size: 11px; margin-top: 4px; }
.brain-learning-card { border-color: #a371f7; }

/* ═══ SPECTRUM BAR ═══ */
.spectrum-bar {
  height: 2px;
  background: linear-gradient(90deg,
    var(--chakra-root), var(--chakra-sacral), var(--chakra-solar),
    var(--chakra-heart), var(--chakra-throat), var(--chakra-eye),
    var(--chakra-crown));
  animation: spectrum-breathe 6s ease-in-out infinite;
}

@keyframes spectrum-breathe {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* ═══ SECTION DIVIDERS ═══ */
.section-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0 10px;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

/* ═══ STATS STRIP ═══ */
.stats-strip-wrap {
  background: var(--panel-head);
  border-bottom: 1px solid var(--border);
}

.stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px 16px;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  flex-wrap: wrap;
}

.stats-strip-row2 {
  border-top: 1px solid var(--border);
  padding: 4px 16px;
  font-size: 11px;
}

.stats-strip-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
}

.stats-strip-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #555;
}

.stats-strip-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.stats-strip-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
}

@media (max-width: 820px) {
  .stats-strip {
    font-size: 10px;
    padding: 6px 8px;
    gap: 0;
  }
  .stats-strip-item { padding: 2px 6px; }
  .stats-strip-label { font-size: 8px; }
  .stats-strip-sep { height: 12px; }
}

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

.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ═══ FOCUS MODE TRANSITIONS ═══ */
.flower-container {
  position: relative;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 50;
}

.flower-container svg {
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.app.focus-mode .flower-container {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  height: 100vh;
  margin: 0;
  background: var(--bg);
  z-index: 90;
}

.app.focus-mode .flower-container svg {
  transform: scale(1.8);
}

.app.focus-mode .header-bar {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.header-bar {
  transition: opacity 0.6s, transform 0.6s;
}

.panels-grid {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.app.focus-mode .panels-grid {
  opacity: 0;
  transform: scale(0.95) translateY(40px);
  pointer-events: none;
}

.subsys-detail {
  position: absolute;
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s 0.4s;
  pointer-events: none;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

.app.focus-mode .subsys-detail {
  opacity: 1;
}

.subsys-detail .sys-name {
  font-weight: 600;
  font-size: 10px;
  margin-bottom: 2px;
}

.subsys-detail .sys-stat {
  font-size: 20px;
  font-weight: 700;
}

.subsys-detail .sys-sub {
  font-size: 8px;
  color: #555;
  margin-top: 2px;
}

/* ═══ FLOATING SUMMARY CARD ═══ */
.focus-summary {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 260px;
  background: #0a0a0fdd;
  border: 1px solid #a855f733;
  border-radius: 8px;
  backdrop-filter: blur(16px);
  z-index: 110;
  cursor: pointer;
  opacity: 0;
  transform: translateX(300px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

.focus-summary::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--chakra-crown), var(--chakra-throat), var(--chakra-heart));
  opacity: 0.6;
}

.app.focus-mode .focus-summary {
  opacity: 1;
  transform: translateX(0);
}

.focus-summary:hover {
  border-color: #a855f766;
  box-shadow: 0 0 20px #a855f722;
}

.focus-summary-head {
  padding: 10px 14px 6px;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--chakra-crown);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.focus-summary-body {
  padding: 4px 14px 12px;
}

.focus-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 11px;
}

.focus-summary-row .label { color: var(--muted); }
.focus-summary-row .val { font-weight: 600; }

.focus-summary-positions {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

.focus-summary-back {
  text-align: center;
  padding: 6px;
  font-size: 8px;
  color: #555;
  letter-spacing: 2px;
  border-top: 1px solid var(--border);
}

/* ═══ AMBIENT BACKGROUND ═══ */
.ambient-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
}

.ambient-bg circle {
  transition: opacity 2s ease;
}

.ambient-bg.ambient-scanning circle.throat { opacity: 0.10; }
.ambient-bg.ambient-trading circle.heart { opacity: 0.10; }
.ambient-bg.ambient-learning circle.eye { opacity: 0.12; }
.ambient-bg.ambient-veto circle.root { opacity: 0.10; }

/* ═══ SECTION GRID ═══ */
.section-grid {
  display: grid;
  gap: 10px;
  contain: content;
}

.section-grid > * > .panel,
.section-grid > .panel {
  min-height: 80px;
}

.section-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.section-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.section-grid.cols-2-1 { grid-template-columns: 2fr 1fr; }
.section-grid.cols-3-2 { grid-template-columns: 3fr 2fr; }
.section-grid.cols-1-2 { grid-template-columns: 1fr 2fr; }
.section-grid .span-2 { grid-column: span 2; }
.section-grid .span-3 { grid-column: span 3; }

.flower-container:hover .flower-hint { opacity: 1 !important; }

@media (max-width: 1100px) {
  .section-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .section-grid .span-3 { grid-column: span 2; }
  .flower-container { height: 220px; }
}

@media (max-width: 820px) {
  .section-grid.cols-3,
  .section-grid.cols-2,
  .section-grid.cols-2-1,
  .section-grid.cols-3-2,
  .section-grid.cols-1-2 { grid-template-columns: 1fr; }
  .section-grid .span-2,
  .section-grid .span-3 { grid-column: span 1; }
  .flower-container { height: 180px; }
  .ambient-bg circle:nth-child(n+4) { display: none; }
  .flower-container .subsys-detail { font-size: 8px; }
  .flower-container .subsys-detail .sys-stat { font-size: 16px; }

  .focus-summary {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 40vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  .app.focus-mode .focus-summary {
    transform: translateY(0);
  }
}

.flower-container svg { will-change: transform; }
.ambient-bg { will-change: opacity; }
.brain-learning-stats { display: flex; gap: 12px; font-size: 12px; color: #8b949e; }

/* ====================================================================
 * COMPREHENSIVE MOBILE AUDIT — 375px viewport (iPhone SE / standard)
 * Single block at end of file to override all panel layouts for mobile.
 * ==================================================================== */
@media (max-width: 480px) {

  /* ── Global: prevent any horizontal overflow ── */
  .app { max-width: 100vw; overflow-x: hidden; }
  .panels-grid { padding: 0 6px; }
  main { gap: 10px; }

  /* ── Header: tighter padding ── */
  header.top { padding: 6px 10px; }
  .brand { font-size: 14px; gap: 6px; }
  .viewer-count { font-size: 9px; padding: 1px 6px; }
  .help-trigger-group { right: 10px; top: 10px; gap: 4px; }
  .help-trigger { width: 30px; height: 30px; min-width: 30px; min-height: 30px; font-size: 15px; }

  /* ── Clock ── */
  .clock { gap: 6px; padding: 6px 8px; font-size: 11px; }
  .clock-utc { font-size: 13px; }
  .clock-countdown { font-size: 10px; }

  /* ── Stats strip: compact, wrap gracefully ── */
  .stats-strip { font-size: 9px; padding: 4px 4px; gap: 0; flex-wrap: wrap; justify-content: center; }
  .stats-strip-item { padding: 2px 4px; gap: 3px; }
  .stats-strip-label { font-size: 7px; letter-spacing: 0.5px; }
  .stats-strip-val { font-size: 10px; }
  .stats-strip-sep { height: 10px; margin: 0 1px; }

  /* ── DataFlow ticker ── */
  .dataflow-strip { padding: 4px 0; font-size: 10px; }
  .dataflow-pair { font-size: 9px; }
  .dataflow-price { font-size: 10px; }
  .dataflow-change { font-size: 9px; }
  .dataflow-scroll { gap: 16px; }

  /* ── Flower of Life: smaller height ── */
  .flower-container { height: 160px; }
  .flower-container .subsys-detail { font-size: 7px; }
  .flower-container .subsys-detail .sys-stat { font-size: 14px; }

  /* ── Section dividers: tighter ── */
  .section-divider { padding: 12px 0 6px; font-size: 8px; letter-spacing: 2px; gap: 6px; }
  .section-divider .section-dot { width: 5px; height: 5px; }

  /* ── Panel base: reduce internal padding ── */
  .panel > *:not(.panel-title) { padding-left: 8px; padding-right: 8px; }
  .panel > *:last-child { padding-bottom: 8px; }
  .panel-title { padding: 4px 8px; font-size: 10px; gap: 6px; }
  .panel-sub { padding: 4px 8px 6px !important; font-size: 10px; }
  .panel-subtitle { font-size: 11px; margin: -2px 0 8px; }

  /* ── Section grid: everything single column ── */
  .section-grid { gap: 8px; }

  /* ── Positions: single column, compact cards ── */
  .pos-cards { grid-template-columns: 1fr; gap: 8px; }
  .pos-card { padding: 8px 10px; }
  .pos-head strong { font-size: 13px; }
  .pos-hero { gap: 10px; padding: 6px 0 8px; }
  .pos-hero-pnl { font-size: 22px; }
  .pos-hero-pips { font-size: 12px; }
  .ring-wrap { width: 60px; height: 60px; }
  .ring-time { font-size: 13px; }
  .ring-safety { font-size: 8px; }
  .empty-ring { width: 60px; height: 60px; }
  .empty-title { font-size: 12px; }
  .empty-sub { font-size: 10px; }
  .empty-slot { gap: 10px; }

  /* ── Pipeline Status: stack columns vertically ── */
  .pipeline-grid { grid-template-columns: 1fr !important; }

  /* ── Bot Brain: compact ── */
  .brain-narration { padding: 8px 10px; margin: 4px 2px 8px; }
  .brain-doing { font-size: 12px; padding-left: 6px; }
  .brain-next { font-size: 11px; padding-left: 6px; }
  .brain-feed { max-height: 140px; padding: 2px 4px; }
  .brain-event { padding: 3px 5px; font-size: 10px; gap: 5px; }
  .brain-label { min-width: 50px; font-size: 9px; }
  .brain-detail { font-size: 9px; }
  .brain-time { font-size: 9px; }
  .brain-pairs { grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; }
  .brain-pair-card { padding: 3px 4px; }
  .brain-pair-header { font-size: 8px; gap: 2px; }
  .brain-pair-header .pill { font-size: 6px; padding: 0 2px; }
  .brain-pair-status { font-size: 7px; }
  .brain-stats { gap: 4px; flex-wrap: wrap; font-size: 10px; }
  .brain-stat { padding: 1px 3px; font-size: 10px; }
  .brain-countdown { font-size: 9px; padding: 1px 4px; margin-left: 4px; }

  /* ── Next Scan card: smaller ring ── */
  .section-grid.cols-2-1 > div:last-child .panel {
    min-height: auto;
  }

  /* ── Chart: shorter, compact controls ── */
  .chart { height: 260px; }
  .chart-pair-select select { font-size: 13px; padding: 4px 6px; min-height: 30px; }
  .chart-title-row { flex-wrap: wrap; gap: 4px; }
  .chart-current-price { font-size: 18px; }
  .chart-price-change { font-size: 10px; }
  .chart-features { gap: 6px; padding: 4px 2px 6px; font-size: 10px; }
  .feature-toggle { gap: 3px; }
  .cross-pair-strength { gap: 6px; font-size: 10px; padding: 2px 2px 4px; }
  .chart-legend { font-size: 10px; gap: 4px; }

  /* ── Scalp Radar: compact rows ── */
  .sr-body { padding: 4px 8px 10px; }
  .sr-row { gap: 6px; padding: 6px 0; flex-wrap: wrap; }
  .sr-pair { width: 60px; font-size: 10px; }
  .sr-dir { width: 38px; font-size: 8px; padding: 1px 4px; }
  .sr-gates { gap: 4px; }
  .sr-gate { padding: 4px 6px; }
  .sr-gate-row { gap: 4px; margin-bottom: 2px; }
  .sr-gate-label { min-width: 50px; font-size: 9px; }
  .sr-gate-val { font-size: 10px; }
  .sr-gate-desc { font-size: 7px; }
  .sr-prox-track { height: 10px; }
  .sr-gauge-labels { font-size: 8px; }
  .sr-timer { height: 16px; margin-bottom: 6px; }
  .sr-timer-label { font-size: 8px; }
  .sr-ready { font-size: 8px; padding: 2px 5px; }
  .sr-row-head { gap: 4px; margin-bottom: 4px; }  .desk-agent-name { font-size: 8px; }
  .desk-agent-detail { font-size: 10px; }
  .ai-desk-consensus { font-size: 11px; padding: 6px; }
  .desk-dissent { font-size: 10px; }  .ai-pair-score { font-size: 11px; min-width: 28px; padding: 1px 4px; }
  .ai-pair-name { font-size: 11px; min-width: 52px; }
  .ai-pair-reason { font-size: 9px; }
  .ai-pos-dec { padding: 6px 8px; }
  .ai-pos-dec-pair { font-size: 11px; }
  .ai-pos-dec-badge { font-size: 8px; padding: 1px 5px; }
  .ai-pos-dec-reason { font-size: 10px; }
  .consensus-meter { gap: 3px; }
  .consensus-node { width: 22px; height: 22px; font-size: 8px; }
  .consensus-wire { width: 8px; }
  /* ── Living System: compact canvas + hide large sidebar text ── */
  .living-canvas { max-width: min(300px, 85vw); }
  .living-wrap { padding: 8px 8px 12px; gap: 6px; }

  /* ── Agentic Flow: compact nodes ── */
  .af-layer-header { padding: 8px 10px; gap: 6px; }
  .af-layer-title { font-size: 11px; }
  .af-layer-num { font-size: 8px; }
  .af-timing { font-size: 8px; padding: 1px 5px; }
  .af-layer-content { padding: 10px 8px; gap: 8px; }
  .af-node { padding: 6px 8px; gap: 6px; }
  .af-node-badge { width: 22px; height: 22px; font-size: 11px; border-radius: 4px; }
  .af-node-name { font-size: 10px; }
  .af-node-desc { font-size: 9px; }
  .af-badge { font-size: 8px; padding: 1px 4px; }
  .af-output { font-size: 8px; padding: 3px 6px; }
  .af-scalp-desc { font-size: 9px; max-width: 100%; }
  .af-gates-row { gap: 4px; padding: 4px 0; }
  .af-gate-num { width: 24px; height: 24px; font-size: 10px; }
  .af-gate-label { font-size: 7px; max-width: 42px; }
  .af-demo-explain { padding: 8px 10px; margin: 0 0 6px; }
  .af-demo-explain-text { font-size: 11px; word-break: break-word; }
  .af-container { padding: 8px 2px 14px; }

  /* ── Market Intel: card grid compact ── */
  .intel-grid { grid-template-columns: 1fr !important; gap: 6px; }
  .intel-card { padding: 8px; }
  .intel-pair { font-size: 11px; }
  .intel-scalp-badge { font-size: 7px; }
  .intel-row { gap: 4px; margin-bottom: 3px; }
  .intel-label { font-size: 7px; width: 20px; }
  .intel-val { font-size: 9px; min-width: 26px; }

  /* ── Closes: scrollable table via .table-scroll-wrap ── */
  .table-scroll-wrap { padding-left: 0; padding-right: 0; }
  .closes-desktop-table { min-width: 400px; }
  .closes-desktop-table th { font-size: 9px; padding: 4px 6px; }
  .closes-desktop-table td { font-size: 10px; padding: 5px 6px; white-space: nowrap; }
  .closes-pnl-lg { font-size: 11px; }
  .closes-exit-pill { font-size: 9px; padding: 1px 6px; }

  /* ── Daily History: compact mobile table ── */
  .dh-mobile-table th { font-size: 9px; padding: 4px 5px; }
  .dh-mobile-table td { font-size: 10px; padding: 4px 5px; }
  .dh-mobile-table .pill { font-size: 9px; padding: 1px 5px; }
  table.inner th { font-size: 8px; padding: 3px 5px; }
  table.inner td { font-size: 10px; padding: 3px 5px; }

  /* ── Timing Mandala: smaller ── */
  .timing-canvas { height: 240px; max-width: min(320px, 85vw); }
  .timing-wrap { padding: 6px 8px 10px; gap: 6px; }
  .timing-leg-row { font-size: 9px; gap: 3px; }
  .timing-leg-name { min-width: 40px; font-size: 9px; }
  .timing-leg-period { min-width: 20px; }
  .timing-leg-next { min-width: 28px; }

  /* ── Market Map: compact bars ── */
  .mm-narrative { font-size: 10px; margin-bottom: 6px; padding-bottom: 6px; }
  .mm-ccy-row { height: 18px; gap: 4px; }
  .mm-ccy-name { font-size: 9px; width: 24px; }
  .mm-ccy-rank { font-size: 7px; }
  .mm-ccy-val { font-size: 8px; width: 28px; }
  .mm-pair-chip { font-size: 9px; padding: 2px 5px; }
  .mm-pairs { gap: 4px; }
  /* ── Tick Flow: single column ── */
  .tf-grid { grid-template-columns: 1fr; gap: 6px; }
  .tf-card { padding: 8px; }
  .tf-pair { font-size: 10px; }

  /* ── Signal Heat Grid: compact ── */
  .signals-row.r-3 { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .signals-row.r-1 { width: 50%; }
  .sig-card { height: 80px; }
  .sig-content { padding: 6px 8px; }
  .sig-pair { font-size: 10px; }
  .sig-conf { font-size: 18px; }
  .sig-age { font-size: 8px; }
  .sig-arrow { font-size: 12px; }

  /* ── Spread rows: compact ── */
  .spread-row { grid-template-columns: 52px 1fr 40px 48px; gap: 4px; }
  .spread-pair { font-size: 10px; }
  .spread-ratio { font-size: 10px; }
  .spread-pips { font-size: 9px; }

  /* ── Project Stats: compact ── */
  .ps-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ps-card { padding: 8px 8px; gap: 6px; }
  .ps-icon { width: 26px; height: 26px; font-size: 8px; }
  .ps-value { font-size: 16px; }
  .ps-label { font-size: 9px; }
  .ps-sub { font-size: 8px; }
  /* ── Confetti toast: smaller, don't overflow right edge ── */
  .win-toast { top: 12px; right: 10px; padding: 10px 14px; font-size: 14px; max-width: calc(100vw - 20px); }

  /* ── Tables globally: prevent blow-out ── */
  table { font-size: 11px; }
  th { font-size: 9px; padding: 4px 6px; }
  td { font-size: 10px; padding: 5px 6px; }

  /* ── Compounding calculator: compact ── */
  .calc-inputs { gap: 6px; }
  .calc-field input { width: 70px; font-size: 13px; }
  .calc-presets button { font-size: 10px; padding: 3px 6px; }
  .calc-table { font-size: 11px; }
  .calc-table td, .calc-table th { padding: 4px 5px; }
  .calc-footer { font-size: 10px; }

  /* ── Admin panel: compact ── */
  .admin-panel { font-size: 11px; }

  /* ── Spectrum bar: thinner ── */
  .spectrum-bar { height: 1px; }

  /* ── Error banner: compact ── */
  .error-banner { padding: 6px 10px; font-size: 11px; }

  /* ── Outcome pill tooltip: narrower ── */
  .outcome-pill::after { width: 180px; font-size: 10px; }
}

/* ═══ CLOSES: Desktop table vs Mobile list ═══ */
.closes-mobile { display: none; }

@media (max-width: 480px) {
  .closes-desktop { display: none !important; }
  .closes-mobile {
    display: flex;
    flex-direction: column;
    padding: 4px;
  }
  .closes-mobile-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
  }
  .closes-m-pair {
    font-weight: 700;
    min-width: 58px;
    font-size: 10px;
  }
  .closes-m-pnl {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
  }
}

/* ═══ MARKET INTEL ═══ */
.intel-panel { overflow: hidden; }
.intel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: var(--panel-head);
  border-bottom: 1px solid var(--border);
}
.intel-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--chakra-solar); font-weight: 700; }
.intel-sub { font-size: 10px; color: var(--muted); }
.intel-table-wrap { overflow-x: auto; }
.intel-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.intel-table th {
  text-align: left; font-size: 9px; color: #555; text-transform: uppercase;
  letter-spacing: 1px; padding: 6px 8px; border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.intel-table th:hover { color: var(--fg); }
.intel-table td { padding: 5px 8px; border-bottom: 1px solid #111; }
.intel-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.intel-t-pair { font-weight: 700; color: var(--fg); }
.intel-t-scalp { font-size: 8px; margin-left: 4px; color: var(--chakra-crown); font-weight: 600; }
.intel-t-gauge { display: flex; align-items: center; gap: 6px; }
.intel-t-minibar { position: relative; width: 40px; height: 6px; background: #1a1a2a; border-radius: 3px; overflow: hidden; }
.intel-t-minibar-needle { position: absolute; top: 0; width: 3px; height: 100%; border-radius: 1px; }
.intel-t-minibar-fill { height: 100%; border-radius: 3px; }
.sort-arrow { font-size: 8px; color: #555; margin-left: 2px; }
.sort-arrow.active { color: var(--fg); }

@media (max-width: 480px) {
  .intel-table { font-size: 9px; }
  .intel-table th { font-size: 8px; padding: 4px 4px; }
  .intel-table td { padding: 3px 4px; }
  .intel-t-minibar { width: 24px; }
  .intel-t-pair { font-size: 9px; }
}

/* ═══ CHAT ═══ */
.chat-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--chakra-eye);
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.chat-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.6);
}
.chat-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.chat-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px;
  height: 440px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: var(--panel-head);
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.chat-title { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--chakra-eye); }
.chat-count { font-size: 9px; color: var(--muted); margin-left: auto; }
.chat-close { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.chat-close:hover { color: var(--fg); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.chat-empty { text-align: center; color: #555; font-size: 11px; padding: 40px 0; }

.chat-msg { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; }
.chat-msg-admin { border-left: 2px solid var(--chakra-eye); padding-left: 6px; }
.chat-msg-bot { border-left: 2px solid var(--chakra-heart); padding-left: 6px; }
.chat-msg-bot .chat-msg-name { color: var(--chakra-heart); }
.chat-avatar { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.chat-avatar-fallback {
  background: var(--panel-head); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.chat-msg-body { flex: 1; min-width: 0; }
.chat-msg-name { font-weight: 700; color: var(--fg); font-size: 10px; margin-right: 6px; }
.chat-msg-text { color: var(--muted); word-break: break-word; }
.chat-msg-time { font-size: 8px; color: #444; flex-shrink: 0; margin-top: 2px; }

.chat-input-wrap {
  display: flex; padding: 8px; gap: 6px;
  border-top: 1px solid var(--border); background: var(--panel-head);
}
.chat-input {
  flex: 1; background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; color: var(--fg);
  font-size: 11px; font-family: inherit; outline: none;
  min-height: 32px;
}
.chat-input:focus { border-color: var(--chakra-eye); }
.chat-input:disabled { opacity: 0.5; }
.chat-send {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--chakra-eye); border: none; color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.chat-send:disabled { opacity: 0.3; cursor: default; }
.chat-send:hover:not(:disabled) { background: var(--chakra-crown); }

@media (max-width: 480px) {
  .chat-fab { bottom: 12px; right: 12px; width: 40px; height: 40px; font-size: 16px; }
  .chat-panel {
    bottom: 0; right: 0; left: 0; width: 100%;
    height: 50vh; border-radius: 16px 16px 0 0;
  }
}

.chat-thinking {
  animation: chat-think-pulse 1.5s ease-in-out infinite;
  font-style: italic;
  color: var(--chakra-eye) !important;
}
@keyframes chat-think-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   HUD Focus Mode — Iron Man style full-screen panel overlay
   Double-click any panel title to engage. ESC to dismiss.
   ══════════════════════════════════════════════════════════════ */

.hud-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 2, 8, 0.92);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hud-fade-in 0.25s ease-out;
  cursor: pointer;
}

@keyframes hud-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hud-focused-panel {
  position: relative;
  width: min(92vw, 1200px);
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  cursor: default;
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: 6px;
  background: var(--panel);
  box-shadow:
    0 0 40px rgba(88, 166, 255, 0.08),
    0 0 80px rgba(88, 166, 255, 0.04),
    inset 0 0 60px rgba(88, 166, 255, 0.02);
  animation: hud-panel-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hud-panel-in {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
    box-shadow: 0 0 0 rgba(88, 166, 255, 0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* HUD corner brackets */
.hud-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 2;
}
.hud-tl { top: -1px; left: -1px; border-top: 2px solid var(--blue); border-left: 2px solid var(--blue); border-radius: 6px 0 0 0; }
.hud-tr { top: -1px; right: -1px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); border-radius: 0 6px 0 0; }
.hud-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--blue); border-left: 2px solid var(--blue); border-radius: 0 0 0 6px; }
.hud-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--blue); border-right: 2px solid var(--blue); border-radius: 0 0 6px 0; }

.hud-corner::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--blue);
}
.hud-tl::after { top: -3px; left: -3px; }
.hud-tr::after { top: -3px; right: -3px; }
.hud-bl::after { bottom: -3px; left: -3px; }
.hud-br::after { bottom: -3px; right: -3px; }

/* Scanline sweep */
.hud-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.5), transparent);
  animation: hud-scan 3s linear infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes hud-scan {
  0% { top: 0; opacity: 1; }
  100% { top: 100%; opacity: 0.2; }
}

/* Close button */
.hud-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 10;
  background: transparent;
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: 4px;
  color: var(--blue);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.hud-close:hover {
  background: rgba(88, 166, 255, 0.1);
  border-color: var(--blue);
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.2);
}

/* HUD label */
.hud-label {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--blue);
  opacity: 0.6;
  font-weight: 600;
  z-index: 4;
  pointer-events: none;
}

/* Inside the focused panel, scale up content */
.hud-focused-panel .panel {
  border: none;
  background: transparent;
  box-shadow: none;
}

.hud-focused-panel .panel-title {
  font-size: 13px;
  padding: 10px 16px;
  padding-left: 16px;
}

/* Double-click hint on panel titles */
.panel-title::after {
  content: "⛶";
  opacity: 0;
  margin-left: auto;
  font-size: 12px;
  color: var(--blue);
  transition: opacity 0.2s;
  pointer-events: none;
}
.panel:hover .panel-title::after {
  opacity: 0.3;
}
.panel:hover .panel-title:hover::after {
  opacity: 0.7;
}

/* Scrollbar styling inside focused panel */
.hud-focused-panel::-webkit-scrollbar { width: 4px; }
.hud-focused-panel::-webkit-scrollbar-track { background: transparent; }
.hud-focused-panel::-webkit-scrollbar-thumb { background: rgba(88, 166, 255, 0.2); border-radius: 2px; }
.hud-focused-panel::-webkit-scrollbar-thumb:hover { background: rgba(88, 166, 255, 0.4); }