/* ═══════════════════════════════════════════════════════════════
   DAEDALUS — Dashboard Design System
   Single-viewport, no-scroll simulation dashboard
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #06060f;
  --bg2: #0a0a16;
  --bg3: #0e0e1e;
  --card: rgba(255,255,255,0.025);
  --card2: rgba(255,255,255,0.04);
  --card3: rgba(255,255,255,0.06);
  --cyan: #00d4ff;
  --purple: #7c3aed;
  --emerald: #10b981;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --blue: #3b82f6;
  --indigo: #6366f1;
  --t1: #e2e8f0;
  --t2: #94a3b8;
  --t3: #64748b;
  --t4: #475569;
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.1);
  --grad1: linear-gradient(135deg, var(--cyan), var(--purple));
  --grad2: linear-gradient(135deg, var(--emerald), var(--cyan));
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --r: 8px;
  --r2: 12px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; font-family:var(--font); background:var(--bg); color:var(--t1); font-size:14px; -webkit-font-smoothing:antialiased; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }

/* ── App Shell ─────────────────────────────────────── */
.app { display:grid; grid-template-rows:46px 1fr; height:100vh; width:100vw; }

/* ── Header ────────────────────────────────────────── */
.header {
  display:flex; align-items:center; gap:12px;
  padding:0 16px; background:rgba(6,6,15,0.92);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(20px); z-index:100;
}
.logo { font-size:1rem; font-weight:800; letter-spacing:3px; background:var(--grad1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; flex-shrink:0; }
.header-sep { width:1px; height:24px; background:var(--border); flex-shrink:0; }
.tabs { display:flex; gap:4px; }
.tab-btn {
  font-family:var(--font); font-size:0.72rem; font-weight:600;
  padding:5px 12px; border-radius:6px; border:1px solid transparent;
  background:transparent; color:var(--t3); cursor:pointer;
  transition:all 150ms; letter-spacing:0.5px;
}
.tab-btn:hover { color:var(--t2); background:var(--card); }
.tab-btn.active { color:var(--cyan); background:rgba(0,212,255,0.08); border-color:rgba(0,212,255,0.15); }
.header-spacer { flex:1; }
.header-actions { display:flex; gap:6px; align-items:center; }
.h-btn {
  font-family:var(--font); font-size:0.72rem; font-weight:600;
  padding:4px 14px; border-radius:6px; border:none; cursor:pointer; transition:all 150ms;
}
.h-btn-primary { background:var(--grad1); color:#fff; }
.h-btn-primary:hover { box-shadow:0 0 12px rgba(0,212,255,0.3); }
.h-btn-secondary { background:var(--card); color:var(--t2); border:1px solid var(--border); }
.h-btn-secondary:hover { background:var(--card2); color:var(--t1); }
.round-info {
  font-family:var(--mono); font-size:0.72rem; color:var(--cyan);
  background:rgba(0,212,255,0.06); padding:3px 10px; border-radius:6px;
  border:1px solid rgba(0,212,255,0.12);
}
.composite-info {
  font-family:var(--mono); font-size:0.72rem; font-weight:700;
  padding:3px 10px; border-radius:6px;
}

/* ── Tab Panels ────────────────────────────────────── */
.tab-panel { display:none; overflow:hidden; }
.tab-panel.active { display:flex; flex-direction:column; }

/* ── Simulation Dashboard ──────────────────────────── */
.sim-dashboard {
  display:grid;
  grid-template-columns:210px 1fr 270px;
  grid-template-rows:1fr 90px;
  gap:8px; padding:8px;
  height:100%; overflow:hidden;
}

/* ── Controls Sidebar ──────────────────────────────── */
.controls {
  grid-row:1/3;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r2);
  padding:10px; display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; overflow-x:hidden;
}
.ctrl-group { }
.ctrl-title {
  font-size:0.62rem; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--t3); margin-bottom:6px;
  display:flex; align-items:center; gap:5px;
}
.ctrl-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.ctrl-label { font-size:0.72rem; color:var(--t2); }
.ctrl-select {
  background:var(--bg3); border:1px solid var(--border); border-radius:4px;
  color:var(--t1); font-family:var(--font); font-size:0.72rem;
  padding:3px 6px; cursor:pointer; outline:none; width:100%;
}
.ctrl-select:focus { border-color:var(--cyan); }
.toggle-row { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:4px; }
.toggle-chip {
  font-family:var(--font); font-size:0.6rem; font-weight:500;
  padding:2px 7px; border-radius:4px;
  border:1px solid var(--border); background:transparent;
  color:var(--t4); cursor:pointer; transition:all 100ms;
}
.toggle-chip.active { background:rgba(0,212,255,0.1); border-color:rgba(0,212,255,0.25); color:var(--cyan); }
.slider-row { margin-bottom:6px; }
.slider-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; }
.slider-lbl { font-size:0.68rem; color:var(--t2); }
.slider-val { font-family:var(--mono); font-size:0.65rem; color:var(--cyan); }
input[type="range"] {
  -webkit-appearance:none; width:100%; height:3px; border-radius:2px;
  background:rgba(255,255,255,0.06); outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:10px; height:10px; border-radius:50%;
  background:var(--cyan); cursor:pointer; box-shadow:0 0 4px rgba(0,212,255,0.4);
}
.ctrl-sep { height:1px; background:var(--border); margin:4px 0; }

/* ── Auction Arena ─────────────────────────────────── */
.arena {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r2);
  padding:10px; display:flex; flex-direction:column; overflow:hidden;
}
.arena-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
  flex-shrink:0;
}
.arena-title { font-size:0.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--t2); }
.arena-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  flex:1; min-height:0;
}
.agent-cell {
  display:flex; flex-direction:column; align-items:center;
  padding:6px 4px; border-radius:var(--r);
  background:rgba(255,255,255,0.01); border:1px solid transparent;
  transition:all 200ms; gap:2px; min-height:0;
}
.agent-cell.winner { border-color:var(--cyan); background:rgba(0,212,255,0.04); box-shadow:0 0 10px rgba(0,212,255,0.1); }
.agent-cell.out { opacity:0.25; }
.agent-dot {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.6rem; font-weight:700; color:#fff; flex-shrink:0;
}
.agent-label { font-size:0.6rem; font-weight:600; color:var(--t2); }
.agent-type { font-size:0.5rem; color:var(--t4); text-transform:uppercase; letter-spacing:0.5px; }
.agent-status { font-size:0.5rem; font-weight:600; }
.bid-wrap {
  width:100%; height:44px; background:rgba(255,255,255,0.015);
  border-radius:4px; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; flex-shrink:0;
}
.bid-fill {
  width:100%; border-radius:4px 4px 0 0;
  transition:height 0.5s cubic-bezier(.4,0,.2,1);
}
.val-line {
  position:absolute; left:0; right:0; height:1px;
  border-top:1.5px dashed rgba(255,255,255,0.15);
  transition:bottom 0.5s cubic-bezier(.4,0,.2,1);
}
.bid-nums {
  display:flex; justify-content:space-between; width:100%;
  font-family:var(--mono); font-size:0.55rem; padding:0 2px; flex-shrink:0;
}
.bid-nums .bn-bid { font-weight:600; }
.bid-nums .bn-val { color:var(--t4); }
.paired-tag { font-size:0.45rem; color:var(--rose); }

/* ── Metrics Panel ─────────────────────────────────── */
.metrics {
  display:flex; flex-direction:column; gap:8px;
  overflow:hidden;
}
.metrics-top {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r2);
  padding:10px; flex-shrink:0;
}
.metrics-title { font-size:0.62rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--t3); margin-bottom:8px; }
.m-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; }
.m-box {
  text-align:center; padding:6px;
  border-radius:var(--r); background:rgba(255,255,255,0.015); border:1px solid var(--border);
}
.m-val { font-family:var(--mono); font-size:1.1rem; font-weight:700; line-height:1.2; }
.m-lbl { font-size:0.55rem; color:var(--t4); text-transform:uppercase; letter-spacing:0.8px; margin-top:1px; }
.m-bar { height:3px; border-radius:2px; background:rgba(255,255,255,0.04); margin-top:4px; overflow:hidden; }
.m-bar-fill { height:100%; border-radius:2px; transition:width 0.5s ease; }
.composite-box {
  text-align:center; padding:8px;
  border-radius:var(--r); border:1px solid rgba(0,212,255,0.1);
  background:rgba(0,212,255,0.03);
}
.comp-label { font-size:0.55rem; color:var(--t3); text-transform:uppercase; letter-spacing:1px; }
.comp-value { font-family:var(--mono); font-size:1.4rem; font-weight:800; background:var(--grad1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.charts-panel {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r2);
  padding:10px; flex:1; min-height:0;
  display:flex; flex-direction:column; gap:6px; overflow:hidden;
}
.chart-box { flex:1; min-height:0; display:flex; flex-direction:column; }
.chart-head { font-size:0.55rem; font-weight:600; color:var(--t4); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:2px; flex-shrink:0; }
.chart-box canvas { width:100% !important; flex:1; min-height:0; }

/* ── Timeline / Logs ───────────────────────────────── */
.timeline-bar {
  grid-column:2/4;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r2);
  padding:8px 10px; display:flex; flex-direction:column; overflow:hidden;
}
.timeline-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:4px; flex-shrink:0;
}
.timeline-title { font-size:0.62rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--t3); }
.timeline-scroll {
  display:flex; gap:6px; overflow-x:auto; flex:1; align-items:stretch;
}
.t-event {
  flex-shrink:0; min-width:130px; padding:6px 8px;
  border-radius:var(--r); border:1px solid var(--border);
  background:rgba(255,255,255,0.01); font-size:0.65rem;
}
.t-event .t-round { font-family:var(--mono); font-size:0.55rem; color:var(--cyan); margin-bottom:1px; }
.t-event .t-action { color:var(--t1); font-weight:600; margin-bottom:1px; }
.t-event .t-impact { font-family:var(--mono); font-size:0.55rem; }
.t-impact.pos { color:var(--emerald); }
.t-impact.neg { color:var(--rose); }

/* ── Architecture Tab ──────────────────────────────── */
.doc-scroll { overflow-y:auto; padding:24px 40px; max-width:1100px; margin:0 auto; height:100%; }
.doc-scroll h2 { font-size:1.4rem; font-weight:800; margin:0 0 8px; }
.doc-scroll h3 { font-size:1rem; font-weight:700; margin:20px 0 6px; color:var(--cyan); }
.doc-scroll p { font-size:0.85rem; color:var(--t2); line-height:1.7; margin-bottom:10px; max-width:800px; }
.doc-scroll strong { color:var(--t1); }
.doc-scroll code {
  font-family:var(--mono); font-size:0.78rem; background:var(--card2);
  padding:1px 5px; border-radius:3px; color:var(--cyan);
}
.doc-scroll pre {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  padding:12px 16px; overflow-x:auto; margin:8px 0 16px;
  font-family:var(--mono); font-size:0.75rem; color:var(--t2); line-height:1.6;
}

/* Diagrams in docs */
.inv-row { display:grid; grid-template-columns:1fr 60px 1fr; gap:12px; align-items:center; margin:16px 0; }
.inv-card {
  padding:16px; border-radius:var(--r2); border:1px solid var(--border);
  text-align:center;
}
.inv-card.old { background:rgba(239,68,68,0.04); border-color:rgba(239,68,68,0.12); }
.inv-card.new { background:rgba(0,212,255,0.04); border-color:rgba(0,212,255,0.12); }
.inv-card h4 { font-size:0.95rem; margin-bottom:4px; }
.inv-card p { font-size:0.8rem; color:var(--t2); margin:0; }
.inv-arrow { text-align:center; color:var(--t4); font-size:1.4rem; }

.layer-box { border-radius:var(--r2); padding:12px; margin-bottom:6px; border:1px solid; }
.layer-box.l1 { background:rgba(0,212,255,0.03); border-color:rgba(0,212,255,0.1); }
.layer-box.l2 { background:rgba(16,185,129,0.03); border-color:rgba(16,185,129,0.1); margin:8px 0; }
.layer-box.l3 { background:rgba(245,158,11,0.03); border-color:rgba(245,158,11,0.1); }
.layer-tag { font-size:0.6rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
.layer-desc { font-size:0.78rem; color:var(--t2); line-height:1.5; }

.agent-chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.a-chip {
  padding:10px 14px; border-radius:var(--r); border:1px solid var(--border);
  background:var(--card); min-width:160px; flex:1;
}
.a-chip h5 { font-size:0.8rem; margin-bottom:3px; }
.a-chip p { font-size:0.7rem; color:var(--t3); margin:0; line-height:1.4; }

.reward-eq {
  font-family:var(--mono); font-size:1.2rem; font-weight:600;
  text-align:center; padding:16px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r2);
  margin:12px 0; letter-spacing:2px;
}

.term-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:12px 0; }
.term-card {
  padding:10px; border-radius:var(--r); border:1px solid var(--border);
  background:var(--card); text-align:center;
}
.term-card .tc-sym { font-family:var(--mono); font-size:1.3rem; font-weight:700; }
.term-card .tc-name { font-size:0.7rem; font-weight:600; margin-top:2px; }
.term-card .tc-desc { font-size:0.6rem; color:var(--t3); margin-top:4px; line-height:1.4; }

/* Curriculum stages in training tab */
.stage-row { display:flex; gap:8px; margin:12px 0; overflow-x:auto; }
.stage-box {
  flex:1; min-width:160px; padding:12px;
  border-radius:var(--r2); border:1px solid var(--border); background:var(--card);
}
.stage-box .sb-num { font-family:var(--mono); font-size:0.6rem; font-weight:700; letter-spacing:1px; margin-bottom:4px; }
.stage-box h5 { font-size:0.8rem; margin-bottom:4px; }
.stage-box p { font-size:0.7rem; color:var(--t3); margin:0; line-height:1.4; }

.arch-flow {
  display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr; gap:0;
  align-items:center; margin:16px 0;
}
.arch-node {
  padding:14px; border-radius:var(--r2); border:1px solid var(--border);
  background:var(--card); text-align:center;
}
.arch-node h5 { font-size:0.85rem; margin-bottom:4px; }
.arch-node p { font-size:0.7rem; color:var(--t3); margin:0; line-height:1.4; }
.arch-arr { text-align:center; color:var(--t4); font-size:1.2rem; }

/* ── Color Utilities ───────────────────────────────── */
.c-cyan { color:var(--cyan); }
.c-purple { color:var(--purple); }
.c-emerald { color:var(--emerald); }
.c-amber { color:var(--amber); }
.c-rose { color:var(--rose); }
.c-blue { color:var(--blue); }

/* ── Responsive ────────────────────────────────────── */
@media (max-width:1100px) {
  .sim-dashboard { grid-template-columns:180px 1fr 240px; }
}
@media (max-width:900px) {
  .sim-dashboard { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .controls { grid-row:auto; flex-direction:row; flex-wrap:wrap; }
  .timeline-bar { grid-column:auto; }
  .arena-grid { grid-template-columns:repeat(2,1fr); }
}

.active-ai {
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
  background: rgba(0, 212, 255, 0.05) !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.1);
}