/* ═══════════════════════════════════════════════
   投資機構模擬系統 — Dashboard Design System
   Modern dark-financial theme with teal accents
   ═══════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────── */
:root {
  --bg: #080c0b;
  --surface: #111816;
  --surface-2: #1a221f;
  --surface-3: #232d29;
  --border: #26302c;
  --border-light: #313d38;
  --text: #e2e8e6;
  --text-muted: #7d8f88;
  --text-dim: #5a6b63;
  --accent: #14b8a6;
  --accent-glow: rgba(20, 184, 166, 0.10);
  --accent-soft: rgba(20, 184, 166, 0.15);
  --accent-strong: #0d9488;
  --warm: #f59e0b;
  --warm-glow: rgba(245, 158, 11, 0.10);
  --success: #22c55e;
  --success-glow: rgba(34, 197, 94, 0.12);
  --danger: #ef4444;
  --danger-glow: rgba(239, 68, 68, 0.12);
  --info: #3b82f6;
  --rose: #ec4899;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 20px rgba(20, 184, 166, 0.06);
  --font-sans: "Segoe UI", "Microsoft JhengHei", -apple-system, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", "JetBrains Mono", monospace;
  --transition: 0.2s ease;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(20,184,166,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(15,118,110,0.05) 0%, transparent 50%),
    linear-gradient(180deg, #080c0b 0%, #0d1412 50%, #090e0c 100%);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.3; }
h1 { font-size: 32px; letter-spacing: -0.02em; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0 0 8px; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: #5eead4; }
strong { font-weight: 700; }

/* ── Layout ───────────────────────────────────── */
.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px 24px 40px;
}

/* ── Navigation ───────────────────────────────── */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 4px 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition);
}

.nav-link:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--text);
}

.nav-link.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #d4fffa;
  box-shadow: var(--shadow-glow);
}

/* ── Hero Section ─────────────────────────────── */
.hero {
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(17,24,22,0.96), rgba(23,32,28,0.92));
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  margin-bottom: 22px;
}

.hero h1 { margin-bottom: 8px; }
.sub {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 800px;
  margin-bottom: 16px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 20px;
  margin-top: 16px;
}

/* ── Stats / Summary Strip ────────────────────── */
.stats, .summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.stat, .summary-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 13px;
}

.stat strong, .summary-note strong { color: var(--text-muted); font-weight: 500; }
.stat div, .summary-note span { color: var(--text); font-weight: 700; }

/* ── Highlight Cards Grid ─────────────────────── */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
}

.highlight-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  transition: all var(--transition);
}

.highlight-card:hover {
  border-color: var(--border-light);
  background: rgba(255,255,255,0.04);
}

.highlight-card strong {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.highlight-card span {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.highlight-card.transition-card {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(20,184,166,0.08), rgba(20,184,166,0.03));
}

/* ── Home Transition / Regression Badges ──────── */
.home-transition-badge,
.regression-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.home-transition-badge,
.regression-badge.healthy {
  background: rgba(34,197,94,0.15);
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.3);
}

.regression-badge.warning {
  background: rgba(245,158,11,0.15);
  color: #fcd34d;
  border: 1px solid rgba(245,158,11,0.3);
}

.regression-badge.muted {
  background: rgba(107,114,128,0.15);
  color: #9ca3af;
  border: 1px solid rgba(107,114,128,0.3);
}

/* ── Entry / Module Cards ──────────────────────── */
.entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.entry-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  transition: all var(--transition);
}

.entry-card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
}

.entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.entry-head h2 { font-size: 20px; }

.entry-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  background: rgba(255,255,255,0.04);
  color: var(--accent);
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.entry-link:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: #5eead4;
}

.entry-card.cyan .entry-link { color: var(--accent); background: var(--accent-glow); }
.entry-card.green .entry-link { color: var(--success); background: var(--success-glow); }
.entry-card.amber .entry-link { color: var(--warm); background: var(--warm-glow); }

/* ── Mini Grid / Stats ────────────────────────── */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.mini-stat {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.15);
}

.mini-stat strong {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.mini-stat span {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── Preview Card ─────────────────────────────── */
.preview-card {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.12);
}

.preview-card strong {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.preview-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.preview-meta { color: var(--text-muted); font-size: 12px; margin-bottom: 8px; }
.preview-body { font-size: 13px; line-height: 1.6; color: var(--text); }

/* ── Quick Note ───────────────────────────────── */
.quick-note { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ── Candidate List / Row ─────────────────────── */
.candidate-list { display: grid; gap: 8px; margin-top: 10px; }

.candidate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.12);
  font-size: 13px;
  transition: all var(--transition);
}

.candidate-row:hover { border-color: var(--border-light); }
.candidate-row.dual { align-items: flex-start; }
.candidate-row strong { font-size: 14px; }
.candidate-row span { color: var(--text-muted); }

.candidate-main { display: grid; gap: 3px; }
.candidate-main strong { font-size: 14px; }
.candidate-main span { color: var(--text-muted); font-size: 12px; }

/* ── Buttons & Inputs ─────────────────────────── */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #f6fffd;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}

button:hover, .btn:hover { opacity: 0.9; box-shadow: 0 0 20px var(--accent-glow); }

input, select, textarea {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-sans);
  transition: border-color var(--transition);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Control Panel ────────────────────────────── */
.control-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.control-panel input, .control-panel select {
  background: rgba(0,0,0,0.3);
}

/* ── Filter Chips / Pagers ────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-chip, .pager {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: all var(--transition);
}

.filter-chip:hover, .pager:hover {
  border-color: var(--border-light);
  color: var(--text);
}

.filter-chip.active, .pager.current {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #d4fffa;
}

/* ── Pills & Badges ───────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-soft);
  color: #5eead4;
}

.pill.alt {
  background: var(--warm-glow);
  color: #fcd34d;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.badge-long {
  background: rgba(34,197,94,0.15);
  color: #86efac;
}

.badge-short {
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
}

/* ── Level Badges ─────────────────────────────── */
.level-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.level-badge.high {
  background: var(--success-glow);
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.25);
}

.level-badge.medium {
  background: var(--warm-glow);
  color: #fcd34d;
  border: 1px solid rgba(245,158,11,0.25);
}

.level-badge.low {
  background: rgba(236,72,153,0.12);
  color: #f9a8d4;
  border: 1px solid rgba(236,72,153,0.2);
}

.level-badge.critical {
  background: var(--danger-glow);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.2);
}

/* ── Status / Performance Badges ───────────────── */
.status-badge, .perf-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
}

.status-badge.closed, .perf-badge.profit {
  background: var(--success-glow);
  color: #86efac;
  border-color: rgba(34,197,94,0.3);
}

.status-badge.open, .perf-badge.pending, .perf-badge.hold {
  background: var(--warm-glow);
  color: #fcd34d;
  border-color: rgba(245,158,11,0.3);
}

.perf-badge.loss, .warning-box {
  background: var(--danger-glow);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.3);
}

.status-badge.none, .perf-badge.flat {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
}

.status-badge.traded {
  background: rgba(59,130,246,0.12);
  color: #93c5fd;
  border-color: rgba(59,130,246,0.25);
}

.status-badge.untraded {
  background: rgba(107,114,128,0.1);
  color: #9ca3af;
}

/* ── Method Chip ──────────────────────────────── */
.method-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

/* ── Coin / Time Chips ────────────────────────── */
.coin-grid, .time-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.coin-chip, .time-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: all var(--transition);
}

.coin-chip:hover, .time-chip:hover {
  border-color: var(--border-light);
  color: var(--text);
}

.coin-chip.active, .time-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #d4fffa;
}

.coin-chip strong, .time-chip strong { color: inherit; }
.coin-chip span, .time-chip span { color: var(--text-dim); font-size: 11px; }

/* ── Content / Reasoning Panel ────────────────── */
.content-panel, .reasoning {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.15);
  line-height: 1.7;
  font-size: 13px;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-color: var(--text-dim) var(--surface);
}

.content-panel::-webkit-scrollbar, .reasoning::-webkit-scrollbar {
  width: 8px;
}
.content-panel::-webkit-scrollbar-track, .reasoning::-webkit-scrollbar-track {
  background: var(--surface);
  border-radius: var(--radius-full);
}
.content-panel::-webkit-scrollbar-thumb, .reasoning::-webkit-scrollbar-thumb {
  background: var(--text-dim);
  border-radius: var(--radius-full);
}

/* ── Bilingual Copy ───────────────────────────── */
.bilingual-copy {
  display: grid;
  gap: 4px;
}

.bilingual-copy div:last-child {
  color: var(--text-muted);
  font-size: 12px;
}

.lang-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
}

.lang-tag.zh {
  background: var(--accent-soft);
  color: #5eead4;
}

/* ── External / Execution Stats ───────────────── */
.external-strip, .ext-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.external-stat, .ext-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.1);
  font-size: 12px;
}

.external-stat strong, .ext-chip strong { color: var(--text); }
.external-stat span, .ext-chip span { color: var(--text-muted); }
.external-label { color: var(--text-muted); font-size: 11px; }
.external-value { color: var(--text); font-weight: 700; font-size: 14px; }
.external-sub { color: var(--text-dim); font-size: 11px; }

.execution-panel, .external-panel {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.1);
  margin-bottom: 12px;
}

.execution-head, .external-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}

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

.execution-stat {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.08);
}

.execution-stat strong { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.execution-stat span { font-size: 15px; font-weight: 700; }

.execution-transition-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  background: var(--accent-glow);
  color: var(--accent);
}

.execution-transition-badge.active {
  background: var(--warm-glow);
  color: var(--warm);
}

.execution-issues {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.execution-issue {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
}

.execution-issues-head {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 8px;
}

/* ── External Inline ──────────────────────────── */
.external-inline, .execution-inline {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.08);
  margin: 8px 0;
}

.external-inline-head, .execution-inline-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.detail-grid, .execution-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}

.detail-item, .execution-detail-item {
  font-size: 12px;
}

.detail-item strong, .execution-detail-item strong {
  color: var(--text-muted);
  font-weight: 500;
}

/* ── External Signals Page ────────────────────── */
.consensus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.consensus-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

.consensus-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.consensus-head strong { font-size: 16px; }
.consensus-meta { color: var(--text-muted); font-size: 12px; }

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

.signal-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  transition: all var(--transition);
}

.signal-card:hover { border-color: var(--border-light); }
.signal-card.bull { border-left: 3px solid var(--success); }
.signal-card.bear { border-left: 3px solid var(--danger); }
.signal-card.neutral { border-left: 3px solid var(--info); }

.signal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.signal-head strong { font-size: 15px; }
.signal-meta { color: var(--text-muted); font-size: 12px; }
.signal-reasoning {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.1);
  font-size: 12px;
  line-height: 1.6;
  max-height: 250px;
  overflow-y: auto;
}

.signal-summary {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── Bankr Role Matrix ────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.role-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  transition: all var(--transition);
}

.role-card:hover { border-color: var(--border-light); }
.role-card.high { border-top: 3px solid var(--success); }
.role-card.medium { border-top: 3px solid var(--warm); }
.role-card.low { border-top: 3px solid var(--rose); }

.role-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.role-head strong { font-size: 17px; }
.score-line { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; }

.method-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.role-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.role-note p { margin-bottom: 4px; }

/* ── Learning Feed ────────────────────────────── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

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

.memory-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

.memory-meta { color: var(--text-muted); font-size: 12px; margin-bottom: 8px; }

.memory-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.memory-chip {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  background: var(--accent-glow);
  color: var(--accent);
}

.memory-list { display: grid; gap: 8px; }

.card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.card-head h3 { font-size: 16px; }

.record-card, .lesson-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.08);
}

.lesson-card { border-left: 3px solid var(--accent); }

.summary-box {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.08);
  font-size: 13px;
  line-height: 1.6;
  max-height: 300px;
  overflow-y: auto;
}

.detail, .signal-detail {
  font-size: 12px;
  color: var(--text-muted);
}

.file-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

.section-split { margin: 20px 0; border: 0; border-top: 1px solid var(--border); }
.lesson-stack { display: grid; gap: 12px; }

/* ── History Page ─────────────────────────────── */
.chip-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition);
}

.chip:hover { border-color: var(--border-light); color: var(--text); }
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: #d4fffa; }

.filter-link { color: var(--text-muted); font-size: 12px; }
.focus-note { color: var(--text-muted); font-size: 13px; font-style: italic; }

.matrix-wrap { overflow-x: auto; margin-bottom: 20px; }

.matrix-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.matrix-table th, .matrix-table td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
}

.matrix-table th {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
}

.matrix-table td { background: rgba(0,0,0,0.06); }

.matrix-link { color: var(--accent); font-size: 12px; }

.matrix-cell.strong { background: rgba(34,197,94,0.1); color: #86efac; }
.matrix-cell.medium { background: rgba(245,158,11,0.1); color: #fcd34d; }
.matrix-cell.weak { background: rgba(239,68,68,0.08); color: #fca5a5; }
.matrix-cell.empty { color: var(--text-dim); }

.hotspot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.hotspot-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

.empty-row { color: var(--text-dim); font-size: 13px; padding: 20px 0; }

.row-focus {
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-glow);
  margin-bottom: 8px;
}

.entry-card-focus {
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
}

.timeframe-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.timeframe-pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
}

.alert-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  background: var(--danger-glow);
  color: #fca5a5;
}

/* ── Open Positions / Scalp ───────────────────── */
.pnl-pos { color: var(--success); }
.pnl-neg { color: var(--danger); }

.breath-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.breath-light {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  margin-right: 6px;
}

.breath-light.active { background: var(--success); box-shadow: 0 0 8px rgba(34,197,94,0.4); }

.stat-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

.stat-card .label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.stat-card .value {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── Trade Results / Performance Report ───────── */
.timeframe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.timeframe-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

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

.timeframe-card-head strong { font-size: 17px; }

.timeframe-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.timeframe-kpis div {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.06);
  text-align: center;
}

.timeframe-kpis strong { display: block; font-size: 16px; }
.timeframe-kpis span { font-size: 11px; color: var(--text-muted); }

.curve-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.latest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.latest-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.06);
}

.latest-card-head { font-weight: 700; margin-bottom: 6px; }
.latest-card-meta { color: var(--text-muted); font-size: 12px; }
.latest-card-signal { font-size: 15px; font-weight: 700; margin: 6px 0; }
.latest-card-metrics { font-size: 12px; color: var(--text-muted); }
.latest-card-performance { margin-top: 6px; }

.perf-cell { font-variant-numeric: tabular-nums; }
.status-note { color: var(--text-muted); font-size: 12px; }

.result-row.has-summary { cursor: pointer; }
.expand-hint { font-size: 11px; color: var(--text-dim); }
.summary-detail-row { padding: 10px; }
.summary-detail {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.summary-detail-label {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 11px;
}

/* ── Chart Styles ─────────────────────────────── */
.chart-grid { margin-bottom: 24px; }

.chart-card-wide,
.chart-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.chart-head strong { font-size: 16px; }
.chart-head span { color: var(--text-muted); font-size: 13px; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}

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

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

.chart-svg { width: 100%; height: auto; }
.chart-empty { color: var(--text-dim); text-align: center; padding: 40px 0; }

/* ── Tables ───────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.06);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(255,255,255,0.02); }

/* ── Login Page ───────────────────────────────── */
.login-card {
  width: min(100%, 420px);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

.login-card h1 { margin-bottom: 8px; font-size: 26px; }
.login-card p { color: var(--text-muted); margin-bottom: 20px; }
.login-card label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.login-card input { width: 100%; margin-bottom: 4px; }
.login-card button { width: 100%; margin-top: 14px; }

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

/* ── External Signals Page specific ───────────── */
.regression-hero.healthy {
  border: 1px solid rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.05);
}

.regression-hero.warning {
  border: 1px solid rgba(245,158,11,0.3);
  background: rgba(245,158,11,0.05);
}

.stat.bull { color: var(--success); }
.stat.bear { color: var(--danger); }
.stat.neutral { color: var(--info); }

.adoption-pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
}

.adoption-pill.yes { background: var(--success-glow); color: #86efac; }
.adoption-pill.partial { background: var(--warm-glow); color: #fcd34d; }
.adoption-pill.no { background: var(--danger-glow); color: #fca5a5; }
.adoption-pill.na { background: rgba(107,114,128,0.1); color: #9ca3af; }
.adoption-note { color: var(--text-dim); font-size: 11px; }
.ext-row { font-size: 12px; color: var(--text-muted); }
.ext-empty { color: var(--text-dim); font-size: 13px; padding: 12px 0; }

.external-summary { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.external-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ── Progress bar ─────────────────────────────── */
.progress {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  overflow: hidden;
}

.bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 0.5s ease;
}

/* ── Meta ─────────────────────────────────────── */
.meta { color: var(--text-muted); font-size: 12px; }

/* ── Bilingual section ────────────────────────── */
.bilingual-section {
  display: grid;
  gap: 4px;
}

/* ── Pagination ───────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .mini-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .wrap { padding: 14px 16px; }
  .hero { padding: 20px; }
  h1 { font-size: 26px; }
  .highlight-grid { grid-template-columns: repeat(2, 1fr); }
  .entry-grid { grid-template-columns: 1fr; }
  .mini-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .nav { gap: 6px; }
  .nav-link { font-size: 12px; padding: 5px 10px; }
}

@media (max-width: 480px) {
  .highlight-grid { grid-template-columns: 1fr 1fr; }
  .highlight-card span { font-size: 16px; }
}