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

:root {
  --bg-deepest: #06060c;
  --bg-deep: #08080f;
  --bg-card: #0d0d1a;
  --bg-card-rgb: 13,13,26;
  --bg-elevated: #111122;
  --border: #1a1a2e;
  --border-light: #2a2a4a;
  --glass-bg: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.12);
  --text-primary: #e0e0f0;
  --text-secondary: #8888aa;
  --text-muted: #555577;
  --accent-indigo: #6366f1;
  --accent-cyan: #06b6d4;
  --accent-green: #10b981;
  --accent-amber: #f59e0b;
  --accent-red: #ef4444;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-display: 'Outfit', sans-serif;
  --radius: 10px;
  --radius-sm: 6px;
}

[data-theme="light"] {
  --bg-deepest: #d6d6da;
  --bg-deep: #e0e0e3;
  --bg-card: #ffffff;
  --bg-card-rgb: 255,255,255;
  --bg-elevated: #f0f0f2;
  --border: #c8c8ce;
  --border-light: #b8b8c0;
  --glass-bg: rgba(0,0,0,0.03);
  --glass-border: rgba(0,0,0,0.18);
  --text-primary: #1a1a2e;
  --text-secondary: #555566;
  --text-muted: #888899;
  --accent-indigo: #4f46e5;
  --accent-cyan: #0891b2;
  --accent-green: #059669;
  --accent-amber: #d97706;
  --accent-red: #dc2626;
}

html { font-size: 15px; }

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-mono);
  overflow-x: hidden;
  min-height: 100vh;
}

/* scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deepest); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */
#header {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-deep) 100%);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
  backdrop-filter: blur(12px);
  flex-shrink:0;
}
.logo-group { display:flex; align-items:center; gap:12px; }
.logo-icon {
  width:38px; height:38px; border-radius:8px;
  background: linear-gradient(135deg, var(--accent-indigo), var(--accent-cyan));
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:900; color:#fff;
}
.logo-text h1 { font-family:var(--font-display); font-size:1rem; font-weight:700; letter-spacing:1.5px; color:var(--text-primary); }
.logo-text span { font-size:0.6rem; color:var(--text-muted); letter-spacing:2.5px; text-transform:uppercase; }
.header-meta { display:flex; align-items:center; gap:18px; font-size:0.65rem; }
.live-indicator { color:#10b981;transition:opacity .3s }
.live-indicator.inactive { opacity:0.3 }
.live-dot {
  width:7px; height:7px; border-radius:50%; background:#10b981;
  display:inline-block; margin-right:5px;
}
.live-indicator.active .live-dot { animation: pulse 2s ease-in-out infinite }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── Simulation Spinner Overlay ── */
.sim-spinner-overlay {
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:9999;
}
.sim-spinner-overlay > div { width:min(500px,70%) }
.sim-spinner-overlay .eeg-spinner-wave svg { transition:stroke 0.6s ease }

/* ── EEG Spinner ── */
.eeg-spinner { position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;background:rgba(255,255,255,0.06);border-radius:var(--radius-sm) }
.eeg-spinner-wave svg { transition:stroke 0.6s ease }
.eeg-spinner-wave { width:100%;height:32px;overflow:hidden;position:absolute;top:50%;left:0;transform:translateY(-50%) }
.eeg-spinner-wave svg { position:absolute;top:0;left:0;animation:eeg-scroll 1.8s linear infinite }
.eeg-spinner-label { position:relative;z-index:2;color:var(--text-primary);font-size:0.85rem;font-family:var(--font-mono);white-space:nowrap;padding:2px 14px;text-shadow:0 0 8px rgba(0,0,0,0.5);transition:color 0.9s ease-in-out;background:rgba(var(--bg-card-rgb),0.2);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-radius:6px }

@keyframes eeg-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* centered variant for full-area loading */
.eeg-spinner-center { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 0;gap:4px;width:100% }
.eeg-spinner-center .eeg-spinner { padding:0 }

.live-speed-btn { background:var(--bg-card);border:1px solid var(--border-light);color:var(--text-secondary);padding:3px 8px;border-radius:4px;font-size:0.68rem;cursor:pointer;font-family:var(--font-mono);transition:all .2s }
.live-speed-btn:hover { border-color:var(--accent-indigo);color:var(--text-primary) }
.live-speed-btn.active { background:var(--accent-indigo);border-color:var(--accent-indigo);color:#fff;font-weight:600 }
.live-view-btn { background:var(--bg-card);border:1px solid var(--border-light);color:var(--text-secondary);padding:5px 12px;border-radius:6px;font-size:0.72rem;cursor:pointer;font-family:var(--font-mono);transition:all .2s }
.live-view-btn:hover { border-color:var(--accent-cyan);color:var(--text-primary) }
.live-view-btn.active { background:var(--accent-cyan);border-color:var(--accent-cyan);color:#111;font-weight:600 }
.live-view-btn:disabled { opacity:0.35;cursor:not-allowed }
/* Normal mode — charts fill available tab area */
#live-content { display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden }
#live-content > * { flex-shrink:0 }
#live-views-wrap { flex:1 !important;flex-shrink:1 !important;display:flex;flex-direction:column;min-height:0;margin-bottom:0 !important;overflow:hidden }
.live-view-panel.live-view-active { flex:1;display:flex !important;flex-direction:column;min-height:0 }
.live-view-panel .card { flex:1;display:flex;flex-direction:column;min-height:0 }
.live-view-panel .card .live-chart-wrap { flex:1;min-height:0;height:auto !important;position:relative;overflow:hidden }
.live-view-panel .card .live-chart-wrap canvas { position:absolute;top:0;left:0;width:100% !important;height:100% !important }
#main.live-active { display:flex;flex-direction:column;overflow:hidden }
#main.live-active #stats-row, #main.live-active #tabs { flex-shrink:0 }
#tab-live.active { display:flex !important;flex-direction:column;flex:1;min-height:0 }
/* Fullscreen chart mode — chart fills the entire tab area */
.live-fullscreen { height:calc(100vh - 60px) !important }
.live-fullscreen .live-hide-fs { display:none !important }
.live-fullscreen #live-metrics-row { display:none !important }
.live-fullscreen #live-view-unavailable { display:none !important }
/* Floating transport */
#live-back-to-all:hover { background:rgba(60,64,85,0.95);color:#fff }
#live-transport-float { position:absolute;top:12px;right:12px;z-index:50;background:rgba(40,44,60,0.92);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:8px 12px;box-shadow:0 4px 20px rgba(0,0,0,0.4);cursor:move;user-select:none;transition:width 0.2s,padding 0.2s }
#live-transport-float.collapsed { padding:6px 10px }
#live-transport-float .transport-full { display:flex;align-items:center;gap:6px;flex-wrap:wrap }
#live-transport-float.collapsed .transport-full { display:none }
#live-transport-float .transport-mini { display:none;align-items:center;gap:6px }
#live-transport-float.collapsed .transport-mini { display:flex }
.live-fs-btn { background:none;border:1px solid var(--border-light);color:var(--text-secondary);padding:3px 7px;border-radius:4px;font-size:0.7rem;cursor:pointer;transition:all .2s }
.live-fs-btn:hover { border-color:var(--accent-cyan);color:var(--text-primary) }
.live-status-badge { font-family:var(--font-mono);letter-spacing:.5px }
.live-status-playing { background:rgba(16,185,129,.15);color:var(--accent-green) }
.live-status-paused { background:rgba(245,158,11,.15);color:#f59e0b }
.live-status-stopped { background:rgba(239,68,68,.15);color:#ef4444 }
.live-status-connected { background:rgba(99,102,241,.15);color:var(--accent-indigo) }
.live-status-completed { background:rgba(16,185,129,.15);color:var(--accent-green) }
.live-status-disconnected { background:rgba(255,255,255,.05);color:var(--text-muted) }
/* Multi-chart "All" view — 3-row grid */
#live-view-all.live-view-active { flex:1;display:flex !important;flex-direction:column;min-height:0 }
.live-all-grid { display:grid;gap:8px;flex:1;min-height:0;grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr 1fr;overflow:hidden }
.live-all-grid .live-all-cell { min-height:0;display:flex;flex-direction:column;overflow:hidden;cursor:pointer }
.live-all-grid .live-all-cell .card { flex:1;display:flex;flex-direction:column;min-height:0;margin-bottom:0;padding:8px 12px }
.live-all-grid .live-all-cell .card .card-title { font-size:0.58rem;margin-bottom:2px }
.live-all-grid .live-all-cell .card .live-chart-wrap { flex:1;min-height:0;position:relative;overflow:hidden }
.live-all-grid .live-all-cell .card .live-chart-wrap canvas { position:absolute;top:0;left:0;width:100%!important;height:100%!important }
.live-all-cell.live-all-full { grid-column:1 / -1 }

/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */
.app-shell { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.app-body { display:flex; flex:1; min-height:0; overflow:hidden; }
#app { display:flex; flex:1; min-height:0; overflow:hidden; }

/* Left sidebar */
#sidebar {
  width:310px; min-width:310px;
  background: var(--bg-deepest);
  border-right:1px solid var(--border);
  padding:20px 16px;
  display:flex; flex-direction:column; gap:16px;
  overflow-y:auto; overflow-x:hidden;
}
#sidebar .card { overflow:hidden; min-width:0; }
#sidebar .card:has(#radarChart) { overflow:visible; }
#sidebar .card:has(#radarChart) .chart-box { max-width:270px; margin:0 auto; }
#sidebar #constants-list { overflow:hidden; word-break:break-word; }
.sidebar-label {
  font-size:0.6rem; color:var(--text-muted); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:2px;
}
.channel-display {
  font-size:0.6rem; color:var(--text-muted); letter-spacing:1px;
}
.channel-display strong { color:var(--accent-cyan); font-size:0.95rem; font-weight:700; }

/* Main content */
#main {
  flex:1; padding:20px 24px; overflow-y:auto; min-height:0;
}

/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 18px;
  margin-bottom: 16px;
}
.card-title {
  font-size: 0.65rem; color:var(--text-secondary);
  letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px;
}
.card-subtitle { font-size:0.58rem; color:var(--text-muted); margin-top:-6px; margin-bottom:12px; }

/* ═══════════════════════════════════════════════════════════
   STATS ROW
   ═══════════════════════════════════════════════════════════ */
#stats-row { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.stat-box {
  background: var(--bg-card); border-radius:8px; padding:10px 14px;
  border:1px solid var(--border); flex:1; min-width:110px;
}
.stat-box .label { font-size:0.58rem; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:3px; }
.stat-box .value { font-size:1.2rem; font-weight:700; }
.stat-box .unit  { font-size:0.6rem; color:var(--text-muted); margin-left:3px; }

/* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */
#tabs { display:flex; gap:8px; margin-bottom:20px; }
.tab-btn {
  background:transparent; border:1px solid var(--border-light);
  color:var(--text-secondary); padding:8px 18px; border-radius:var(--radius-sm);
  font-size:0.72rem; font-family:var(--font-mono); cursor:pointer;
  transition:all .25s ease; letter-spacing:.5px;
}
.tab-btn:hover { border-color:var(--accent-indigo); color:var(--text-primary); }
.tab-btn.active {
  background:linear-gradient(135deg, var(--accent-indigo), #4f46e5);
  border:none; color:#fff; font-weight:600;
}
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ═══════════════════════════════════════════════════════════
   CHART CONTAINERS
   ═══════════════════════════════════════════════════════════ */
.chart-box { width:100%; position:relative; max-height:340px; }
.chart-box canvas { width:100%!important; max-height:340px; }

.band-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.band-card { background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); padding:14px; }
.band-card canvas { max-height:120px; }
.band-card .band-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.band-card .band-name { font-size:0.75rem; font-weight:700; }
.band-card .band-range { font-size:0.58rem; color:var(--text-muted); }

/* ═══════════════════════════════════════════════════════════
   FIBONACCI / PASCAL GRID
   ═══════════════════════════════════════════════════════════ */
.fib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; margin-top:14px; }
.fib-cell {
  border-radius:8px; padding:10px 8px; text-align:center;
  border:1px solid var(--border); transition:transform .15s;
}
.fib-cell:hover { transform:scale(1.06); }
.fib-cell .fib-num { font-size:1.05rem; font-weight:700; color:var(--accent-indigo); }
.fib-cell .fib-label { font-size:0.5rem; color:var(--text-muted); margin-top:2px; }
.fib-cell .fib-weight { font-size:0.58rem; color:var(--accent-amber); margin-top:4px; }

/* ═══════════════════════════════════════════════════════════
   CONSTANTS LIST
   ═══════════════════════════════════════════════════════════ */
.const-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 0;
}
.const-row .clabel { font-size:0.6rem; color:var(--text-secondary); }
.const-row .cvalue { font-size:0.72rem; font-weight:600; }

/* ═══════════════════════════════════════════════════════════
   PROTOCOL TABLE
   ═══════════════════════════════════════════════════════════ */
.proto-table { width:100%; border-collapse:collapse; font-size:0.72rem; }
.proto-table th {
  padding:8px 12px; text-align:left; color:var(--text-muted);
  font-size:0.55rem; letter-spacing:1px; text-transform:uppercase;
  border-bottom:1px solid var(--border-light);
}
.proto-table td { padding:10px 12px; border-bottom:1px solid var(--border); }
.proto-table .band-col { font-weight:700; }
.badge {
  display:inline-block; padding:3px 10px; border-radius:4px;
  font-size:0.55rem; font-weight:600; letter-spacing:.5px;
}
.badge-up   { background:rgba(16,185,129,.15); color:var(--accent-green); }
.badge-down { background:rgba(239,68,68,.15);  color:var(--accent-red); }
.badge-hold { background:rgba(245,158,11,.15); color:var(--accent-amber); }


/* ═══════════════════════════════════════════════════════════
   BRAIN SVG
   ═══════════════════════════════════════════════════════════ */
#brain-map { width:100%; max-width:270px; margin:0 auto; }
#brain-map .electrode { cursor:pointer; transition:all .2s ease; }
#brain-map .zone-triangle { pointer-events:none; }
#brain-map .electrode:hover circle { stroke-width:1.2; }
.electrode-label { font-family:var(--font-mono); pointer-events:none; }

/* ═══════════════════════════════════════════════════════════
   LANGUAGE SWITCH
   ═══════════════════════════════════════════════════════════ */
.lang-switch { position:relative; }
.lang-toggle {
  background:var(--bg-deepest); border:1px solid var(--border); color:var(--text-secondary);
  font-family:var(--font-mono); font-size:0.8rem; padding:4px 8px; border-radius:var(--radius-sm);
  cursor:pointer; line-height:1; transition:all .2s ease; white-space:nowrap;
}
.lang-toggle:hover { border-color:var(--accent-indigo); color:var(--text-primary); }
.lang-dropdown {
  display:none; position:absolute; top:100%; right:0; margin-top:4px; z-index:100;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.4); min-width:80px; overflow:hidden;
}
.lang-dropdown.open { display:flex; flex-direction:column; }
.lang-option {
  background:transparent; border:none; color:var(--text-secondary); font-family:var(--font-mono);
  font-size:0.8rem; padding:6px 10px; cursor:pointer; text-align:left; white-space:nowrap;
  transition:background .15s ease;
}
.lang-option:hover { background:rgba(99,102,241,.15); color:var(--text-primary); }
.lang-option.active { background:rgba(99,102,241,.2); color:var(--accent-indigo); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .app-body { flex-direction:column; }
  #nav-sidebar { width:100%; min-width:unset; flex-direction:row; padding:6px 8px; gap:2px; overflow-x:auto; }
  #nav-sidebar .nav-spacer { display:none; }
  #nav-sidebar .nav-tooltip { display:none; }
  .theme-toggle .nav-tooltip { display:none; }
  #app { flex-direction:column; }
  #sidebar { width:100%; min-width:unset; flex-direction:row; flex-wrap:wrap; }
  .band-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════
   SIMULATION CONTROLS
   ═══════════════════════════════════════════════════════════ */
#sim-controls {
  display:flex; align-items:center; gap:16px; padding:6px 24px;
  background:var(--bg-card); border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:0.8rem; position:relative;
  flex-shrink:0; flex-wrap:wrap; overflow:hidden;
}
#sim-controls label { color:var(--text-secondary); display:flex; align-items:center; gap:6px; white-space:nowrap; }
#sim-controls input[type=range] {
  width:100px; accent-color:var(--accent-indigo); background:transparent;
}
#sim-controls .sim-value { color:var(--accent-amber); min-width:32px; text-align:right; }
#sim-controls .slider-hint { font-size:0.6rem; color:var(--text-muted); display:flex; justify-content:space-between; width:100px; margin-top:-2px; }
#sim-defaults-btn {
  background:none; border:1px solid #555577; color:var(--text-secondary);
  padding:3px 8px; border-radius:var(--radius-sm); font-family:var(--font-mono);
  font-size:0.65rem; cursor:pointer; transition:all .2s; white-space:nowrap;
}
#sim-defaults-btn:hover { border-color:var(--accent-indigo); color:var(--text-primary); }
.tab-btn.glow {
  color:var(--accent-green) !important; border-color:var(--accent-green) !important;
  box-shadow:0 0 10px rgba(16,185,129,.4); transition:all .3s;
}

/* Advanced Metrics tab styles */
.adv-grid { display:flex; flex-direction:column; gap:16px; }
.adv-metrics-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; padding:12px 0; }
.adv-metrics-row { display:flex; gap:16px; flex-wrap:wrap; }
.adv-metric { min-width:0; }
.adv-metric-label { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.adv-metric-value { font-size:1.3rem; font-weight:700; color:var(--text-primary); font-family:var(--font-mono); }
.adv-metric-interp { font-size:0.72rem; color:var(--accent-blue); margin-top:4px; font-style:italic; }
.adv-metric-range { font-size:0.65rem; color:var(--text-muted); margin-top:2px; }
.adv-gauge { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; margin-top:6px; overflow:hidden; }
.adv-gauge-fill { height:100%; border-radius:3px; transition:width 0.5s ease; }
.bio-section { display:flex; flex-direction:column; gap:16px; padding:8px 0; }
.bio-subsection { padding:8px 0; border-bottom:1px solid var(--border); }
.bio-subsection:last-child { border-bottom:none; }
.bio-subtitle { font-size:0.78rem; font-weight:600; color:var(--text-secondary); margin-bottom:10px; }
.eph-map { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.eph-tag { font-size:0.7rem; padding:3px 8px; background:rgba(99,102,241,0.15); border-radius:10px; color:var(--accent-indigo); }
.csd-badge { font-size:0.65rem; padding:2px 8px; border-radius:8px; margin-left:8px; font-weight:600; }
.csd-on { background:rgba(16,185,129,0.2); color:var(--accent-green); }
.csd-off { background:rgba(156,163,175,0.2); color:var(--text-muted); }
.bdws-header { display:flex; align-items:baseline; gap:16px; padding:12px 0; }
.bdws-score { font-size:2.5rem; font-weight:800; font-family:var(--font-mono); }
.bdws-interp { font-size:0.85rem; color:var(--text-secondary); }
.drift-section { padding:12px 0; border-top:1px solid var(--border); margin-top:8px; }
.drift-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.drift-tag { font-size:0.7rem; padding:3px 8px; background:rgba(99,102,241,0.1); border-radius:10px; color:var(--text-secondary); }
@media(max-width:700px) { .adv-metrics-grid { grid-template-columns:1fr 1fr; } }

/* ── sLORETA Credit Link & Modal ─────────────────────────── */
.sloreta-credit-footer { display:flex; align-items:center; gap:4px; padding:12px 0 4px; border-top:1px solid var(--border); margin-top:16px; font-size:0.7rem; color:var(--text-muted); }
.sloreta-credit-link { color:var(--accent-indigo); text-decoration:none; cursor:pointer; font-weight:600; transition:opacity 0.2s; }
.sloreta-credit-link:hover { opacity:0.8; text-decoration:underline; }
.sloreta-credit-dialog { background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px; width:min(480px,90vw); padding:28px; position:relative; }
.sloreta-credit-close { position:absolute; top:12px; right:16px; background:none; border:none; color:var(--text-muted); font-size:1.4rem; cursor:pointer; line-height:1; padding:4px; }
.sloreta-credit-close:hover { color:var(--text-primary); }
.sloreta-credit-dialog h2 { font-family:var(--font-display); font-size:1.1rem; margin:0 0 14px; color:var(--text-primary); }
.sloreta-credit-text { font-size:0.85rem; color:var(--text-secondary); line-height:1.5; margin:0 0 10px; }
.sloreta-credit-author { font-size:1rem; font-weight:600; color:var(--text-primary); margin:0 0 14px; }
.sloreta-credit-paper { border-left:3px solid var(--accent-indigo); padding:10px 14px; margin:0 0 18px; background:rgba(99,102,241,0.06); border-radius:0 6px 6px 0; font-size:0.82rem; color:var(--text-secondary); line-height:1.5; }
.sloreta-credit-journal { font-size:0.75rem; color:var(--text-muted); margin-top:4px; display:inline-block; }
.sloreta-credit-btn { display:inline-flex; align-items:center; gap:4px; }

/* ── sLORETA Source Localization ─────────────────────────── */
.sloreta-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:8px 0 12px; }
.sloreta-summary { display:flex; gap:20px; flex-wrap:wrap; }
.sloreta-stat { font-size:0.8rem; color:var(--text-secondary); }
.sloreta-stat strong { color:var(--text-primary); }
.sloreta-band-tabs { display:flex; gap:4px; }
.sloreta-band-btn { font-size:0.7rem; padding:4px 12px; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--text-muted); cursor:pointer; text-transform:uppercase; letter-spacing:0.5px; transition:all 0.2s; }
.sloreta-band-btn:hover { filter:brightness(1.2); opacity:0.9; }
.sloreta-band-btn.active { color:#fff; }
.sloreta-body { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sloreta-map-container { min-height:300px; }
.sloreta-table-container { max-height:360px; overflow-y:auto; }
.sloreta-sources-table { width:100%; border-collapse:collapse; font-size:0.75rem; }
.sloreta-sources-table th { text-align:left; padding:6px 8px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-size:0.65rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--card-bg); }
.sloreta-sources-table td { padding:5px 8px; border-bottom:1px solid rgba(255,255,255,0.04); }
.sloreta-td-region { color:var(--text-primary); font-weight:500; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sloreta-td-lobe { color:var(--text-secondary); text-transform:capitalize; }
.sloreta-td-hemi { color:var(--text-muted); text-align:center; }
.sloreta-td-power { display:flex; align-items:center; gap:8px; }
.sloreta-power-bar { flex:1; height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; min-width:60px; }
.sloreta-power-fill { height:100%; border-radius:3px; transition:width 0.3s; }
@media(max-width:800px) { .sloreta-body { grid-template-columns:1fr; } }

/* ── sLORETA 3-Panel Brain Viewer ────────────────────────── */
.sloreta-viewer-wrap { margin:8px 0 16px; }
.slv-container { display:flex; flex-direction:column; gap:8px; }
.slv-panels { display:flex; gap:8px; align-items:flex-start; }
.slv-panel { flex:1; min-width:0; }
.slv-panel-label { text-align:center; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-muted); margin-bottom:4px; }
.slv-svg { width:100%; height:auto; display:block; background:rgba(0,0,0,0.15); border-radius:8px; border:1px solid var(--border); }
[data-theme="light"] .slv-svg { background:rgba(240,240,248,0.6); }
.slv-brain-outline { fill:none; stroke:var(--text-muted); stroke-width:1.2; opacity:0.4; }
.slv-nose { stroke:var(--text-muted); stroke-width:1.2; opacity:0.5; }
.slv-midline { stroke:var(--text-muted); stroke-width:0.6; stroke-dasharray:3,3; opacity:0.25; }
.slv-crosshair { stroke:rgba(255,255,255,0.35); stroke-width:0.5; stroke-dasharray:4,3; pointer-events:none; }
[data-theme="light"] .slv-crosshair { stroke:rgba(0,0,0,0.2); }
.slv-region { transition:r 0.15s, stroke-width 0.15s; }
.slv-region:hover { stroke:#fff; stroke-width:1.5; filter:brightness(1.3); }
[data-theme="light"] .slv-region:hover { stroke:#333; }
.slv-region.slv-selected { stroke:#fff; stroke-width:2; stroke-dasharray:none; }
[data-theme="light"] .slv-region.slv-selected { stroke:#222; }
.slv-region.slv-peak { stroke:rgba(255,255,255,0.6); stroke-width:1; }

/* Color bar */
.slv-colorbar { display:flex; flex-direction:column; align-items:center; width:28px; flex-shrink:0; padding:4px 0; }
.slv-colorbar-title { font-size:0.55rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg); }
.slv-colorbar-gradient { width:12px; flex:1; min-height:120px; border-radius:4px; background:linear-gradient(to bottom, rgb(255,0,0), rgb(255,255,0), rgb(0,255,0), rgb(0,255,255), rgb(0,0,255)); border:1px solid var(--border); }
.slv-colorbar-labels { display:flex; flex-direction:column-reverse; justify-content:space-between; font-size:0.55rem; color:var(--text-muted); height:100%; min-height:120px; }

/* Region info */
.slv-info-row { display:flex; justify-content:center; }
.slv-region-info { display:flex; gap:16px; align-items:center; font-size:0.78rem; color:var(--text-secondary); padding:6px 16px; background:rgba(255,255,255,0.03); border-radius:6px; min-height:28px; }
[data-theme="light"] .slv-region-info { background:rgba(0,0,0,0.03); }
.slv-region-info strong { color:var(--text-primary); }

/* Legend */
.slv-legend { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; padding:4px 0; }
.slv-legend-item { display:flex; align-items:center; gap:4px; font-size:0.65rem; color:var(--text-muted); text-transform:capitalize; }
.slv-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Tooltip */
.slv-tooltip { position:fixed; z-index:9999; background:rgba(0,0,0,0.85); color:#fff; padding:4px 10px; border-radius:4px; font-size:0.7rem; white-space:nowrap; pointer-events:none; transform:translateX(-50%); }
[data-theme="light"] .slv-tooltip { background:rgba(30,30,40,0.9); }

/* View toggle */
.sloreta-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sloreta-view-toggle { display:flex; gap:0; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.sloreta-view-btn { font-size:0.65rem; padding:3px 10px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; transition:all 0.2s; letter-spacing:0.3px; }
.sloreta-view-btn:not(:last-child) { border-right:1px solid var(--border); }
.sloreta-view-btn:hover { color:var(--accent-indigo); }
.sloreta-view-btn.active { background:var(--accent-indigo); color:#fff; }

/* 3D Cortical */
.slv-3d-wrap { display:flex; justify-content:center; padding:4px 0; min-height:300px; position:relative; }
.slv-3d-canvas { border-radius:10px; cursor:grab; max-width:100%; }
.slv-3d-canvas:active { cursor:grabbing; }
.slv-3d-toolbar { position:absolute; top:10px; right:10px; z-index:10; display:flex; flex-direction:column; gap:6px; align-items:center; }
.slv-3d-toolbar-btn { background:rgba(30,30,50,0.75); border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.8); border-radius:8px; padding:6px 14px; font-size:0.75rem; cursor:pointer; transition:all 0.2s; backdrop-filter:blur(4px); letter-spacing:0.3px; white-space:nowrap; }
.slv-3d-toolbar-btn:hover { background:rgba(99,102,241,0.5); border-color:var(--accent-indigo); color:#fff; }
.slv-3d-labels-toggle.active { background:rgba(99,102,241,0.35); border-color:rgba(99,102,241,0.5); }
.slv-3d-labels-toggle:not(.active) { opacity:0.5; }
.slv-3d-views { display:grid; grid-template-columns:repeat(3,28px); grid-template-rows:repeat(3,28px); gap:2px; justify-items:center; align-items:center; }
.slv-3d-view-btn { width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:rgba(30,30,50,0.75); border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.7); border-radius:6px; font-size:0.7rem; cursor:pointer; transition:all 0.2s; backdrop-filter:blur(4px); padding:0; }
.slv-3d-view-btn:hover { background:rgba(99,102,241,0.5); border-color:var(--accent-indigo); color:#fff; }
.slv-3d-view-btn[data-angle="front"] { grid-column:2; grid-row:1; }
.slv-3d-view-btn[data-angle="left"]  { grid-column:1; grid-row:2; }
.slv-3d-view-btn[data-angle="top"]   { grid-column:2; grid-row:2; }
.slv-3d-view-btn[data-angle="right"] { grid-column:3; grid-row:2; }
.slv-3d-view-btn[data-angle="back"]  { grid-column:2; grid-row:3; }
.slv-3d-footer { display:flex; align-items:center; justify-content:center; gap:16px; padding:8px 0; flex-wrap:wrap; }
.slv-3d-legend { display:flex; align-items:center; gap:6px; font-size:0.7rem; color:var(--text-muted); }
.slv-3d-legend-title { font-weight:600; color:var(--text-secondary); margin-right:2px; }
.slv-3d-legend-gradient { width:100px; height:12px; border-radius:3px; background:linear-gradient(to right, rgb(0,0,255), rgb(0,255,255), rgb(0,255,0), rgb(255,255,0), rgb(255,0,0)); border:1px solid rgba(255,255,255,0.1); }
.slv-3d-legend-label { font-size:0.65rem; }
.slv-3d-legend-sizes { display:flex; align-items:center; gap:4px; margin-left:8px; }
.slv-3d-size-dot { border-radius:50%; background:var(--text-muted); }
.slv-3d-size-sm { width:6px; height:6px; }
.slv-3d-size-lg { width:14px; height:14px; }

/* Topomap */
.slv-topomap-wrap { display:flex; justify-content:center; padding:8px 0; }
.slv-topomap-canvas { max-width:340px; width:100%; height:auto; aspect-ratio:1; border-radius:12px; border:1px solid var(--border); background:rgba(0,0,0,0.1); }
[data-theme="light"] .slv-topomap-canvas { background:rgba(240,240,248,0.4); }
[data-theme="light"] .slv-3d-toolbar-btn { background:rgba(255,255,255,0.85); border-color:rgba(0,0,0,0.2); color:#333; }
[data-theme="light"] .slv-3d-toolbar-btn:hover { background:rgba(99,102,241,0.2); border-color:var(--accent-indigo); color:var(--accent-indigo); }
[data-theme="light"] .slv-3d-labels-toggle.active { background:rgba(99,102,241,0.25); border-color:var(--accent-indigo); color:var(--accent-indigo); }
[data-theme="light"] .slv-3d-labels-toggle:not(.active) { opacity:0.5; }
[data-theme="light"] .slv-3d-view-btn { background:rgba(255,255,255,0.85); border-color:rgba(0,0,0,0.2); color:#333; }
[data-theme="light"] .slv-3d-view-btn:hover { background:rgba(99,102,241,0.2); border-color:var(--accent-indigo); color:var(--accent-indigo); }
.slv-topomap-footer { display:flex; align-items:center; justify-content:center; gap:20px; padding:8px 0; }
.slv-topomap-footer .slv-colorbar { flex-direction:row; width:auto; height:auto; gap:6px; }
.slv-topomap-footer .slv-colorbar-gradient { width:80px; height:10px; min-height:auto; border-radius:3px; background:linear-gradient(to right, rgb(0,0,255), rgb(0,255,255), rgb(0,255,0), rgb(255,255,0), rgb(255,0,0)); }
.slv-topomap-footer .slv-colorbar-labels { flex-direction:row; min-height:auto; height:auto; gap:4px; }
.slv-topomap-footer .slv-colorbar-title { writing-mode:horizontal-tb; transform:none; margin-bottom:0; margin-right:4px; }

/* Montage grid */
.slv-montage { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.slv-montage-cell { display:flex; flex-direction:column; align-items:center; }
.slv-montage-svg { border-radius:6px; }
.slv-montage-label { font-size:0.58rem; color:var(--text-muted); margin-top:2px; font-variant-numeric:tabular-nums; }
.slv-montage-hint { font-size:0.5rem; color:var(--text-muted); opacity:0.6; text-transform:uppercase; letter-spacing:0.5px; }
.slv-montage-footer { display:flex; align-items:center; justify-content:center; gap:20px; padding:8px 0; }
.slv-montage-footer .slv-colorbar { flex-direction:row; width:auto; height:auto; gap:6px; }
.slv-montage-footer .slv-colorbar-gradient { width:80px; height:10px; min-height:auto; border-radius:3px; background:linear-gradient(to right, rgb(0,0,255), rgb(0,255,255), rgb(0,255,0), rgb(255,255,0), rgb(255,0,0)); }
.slv-montage-footer .slv-colorbar-labels { flex-direction:row; min-height:auto; height:auto; gap:4px; }
.slv-montage-footer .slv-colorbar-title { writing-mode:horizontal-tb; transform:none; margin-bottom:0; margin-right:4px; }

@media(max-width:700px) {
  .slv-panels { flex-direction:column; }
  .slv-colorbar { flex-direction:row; width:100%; height:28px; min-height:auto; }
  .slv-colorbar-gradient { width:100%; height:12px; min-height:auto; background:linear-gradient(to right, rgb(0,0,255), rgb(0,255,255), rgb(0,255,0), rgb(255,255,0), rgb(255,0,0)); }
  .slv-colorbar-labels { flex-direction:row; min-height:auto; height:auto; }
  .slv-colorbar-title { writing-mode:horizontal-tb; transform:none; }
  .slv-montage { grid-template-columns:repeat(2, 1fr); }
  .sloreta-controls { flex-direction:column; align-items:flex-start; }
}

/* ── Graph Theory Tab ────────────────────────────────────── */
.graph-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.graph-connectogram-card { grid-column:1; }
.graph-connectogram-card canvas { display:block; margin:0 auto; }
.brain-fog-alert {
  background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.4);
  border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:16px;
  color:#fca5a5; font-size:0.85rem; display:flex; align-items:center; gap:8px;
}
.brain-fog-icon { font-size:1.3rem; }
.hub-predator-badge {
  display:inline-block; font-size:0.7rem; padding:2px 8px; border-radius:10px;
  background:rgba(239,68,68,0.2); color:#fca5a5; margin-left:8px;
}
.connectogram-legend { display:flex; gap:12px; justify-content:center; margin-top:8px; font-size:0.75rem; color:var(--text-muted); }
.legend-item { display:flex; align-items:center; gap:4px; }
.legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.centrality-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.centrality-table th { text-align:left; color:var(--text-muted); padding:6px 8px; border-bottom:1px solid var(--border); }
.centrality-table td { padding:6px 8px; color:var(--text-secondary); border-bottom:1px solid rgba(255,255,255,0.04); }
.mirror-status { font-size:1.1rem; font-weight:700; margin:8px 0; }
.mirror-metrics { display:flex; flex-direction:column; gap:10px; }
.mirror-link { display:flex; align-items:center; gap:8px; }
.mirror-label { font-size:0.8rem; color:var(--text-muted); min-width:70px; }
.mirror-value { font-size:0.85rem; font-weight:600; min-width:50px; }
.mirror-warning { margin-top:10px; padding:8px 12px; background:rgba(245,158,11,0.12); border-radius:var(--radius-sm); color:#fbbf24; font-size:0.8rem; }
@media(max-width:700px) { .graph-grid { grid-template-columns:1fr; } }

/* ── Wavelet Tab ─────────────────────────────────────────── */
.wavelet-toolbar {
  display:flex; gap:16px; align-items:center; margin-bottom:16px;
  padding:8px 12px; background:var(--card-bg); border-radius:var(--radius-sm); border:1px solid var(--border);
}
.wavelet-toolbar label { font-size:0.8rem; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.wavelet-select {
  background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border);
  padding:4px 8px; border-radius:4px; font-size:0.8rem;
}
.wavelet-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wavelet-scalogram-card { grid-column:1 / -1; }
.wavelet-scalogram-card canvas { display:block; width:100%; }
.scalogram-container { position:relative; }
.scalogram-axis-labels { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--text-muted); padding:4px 8px 0; }
.entropy-bars { display:flex; flex-direction:column; gap:4px; padding:8px 0; }
.entropy-bar-row { display:flex; align-items:center; gap:6px; }
.entropy-label { font-size:0.75rem; color:var(--text-muted); min-width:28px; text-align:right; }
.entropy-bar-bg { flex:1; height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
.entropy-bar-fill { height:100%; border-radius:4px; transition:width 0.3s; }
.entropy-val { font-size:0.7rem; color:var(--text-secondary); min-width:36px; }
.wplv-list { display:flex; flex-direction:column; gap:6px; padding:8px 0; }
.wplv-row { display:flex; align-items:center; gap:6px; }
.wplv-pair { font-size:0.75rem; color:var(--text-muted); min-width:55px; }
.wplv-val { font-size:0.75rem; font-weight:600; min-width:40px; text-align:right; }
@media(max-width:700px) { .wavelet-grid { grid-template-columns:1fr; } }

#sim-btn {
  background:linear-gradient(135deg,#6366f1,#06b6d4); color:#fff; border:none;
  padding:5px 16px; border-radius:var(--radius-sm); font-family:var(--font-mono);
  font-size:0.8rem; font-weight:600; cursor:pointer; transition:opacity .2s;
}
#sim-btn:hover { opacity:.85; }
#sim-btn:disabled { opacity:.4; cursor:not-allowed; }
#sim-btn.running {
  opacity:1; background:linear-gradient(135deg,#06b6d4,#6366f1);
  animation: sim-pulse 1.5s ease-in-out infinite;
}
@keyframes sim-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(6,182,212,.3); }
  50%      { box-shadow: 0 0 14px rgba(6,182,212,.6); }
}
#sim-status {
  color:var(--text-secondary); font-size:0.75rem; margin-left:auto;
}
#sim-status.active { color:var(--accent-cyan); }
#sim-status.done   { color:var(--accent-green); }
#sim-status.error  { color:var(--accent-red); }
#sim-toast {
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:6px;
  background:var(--bg-elevated); border:2px solid var(--accent-green);
  border-radius:var(--radius-md); padding:12px 20px; z-index:100;
  color:var(--text-primary); font-size:0.78rem; font-family:var(--font-mono);
  box-shadow:0 0 16px rgba(16,185,129,.25), 0 4px 20px rgba(0,0,0,.4);
  max-width:460px; text-align:center;
  animation: toast-in .4s ease-out;
}
#sim-toast.visible { display:block; }
@keyframes toast-in {
  from { opacity:0; transform:translateX(-50%) translateY(-4px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
.api-badge {
  font-size:0.65rem; padding:2px 6px; border-radius:3px; font-weight:600;
}
.api-badge.online  { background:rgba(16,185,129,.15); color:var(--accent-green); }
.api-badge.offline { background:rgba(239,68,68,.15); color:var(--accent-red); }

/* ═══════════════════════════════════════════════════════════
   RESONANCE TAB
   ═══════════════════════════════════════════════════════════ */
.resonance-cards {
  display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px;
}
.metric-card {
  flex:1; min-width:140px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; text-align:center;
}
.metric-label { font-size:0.65rem; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; }
.metric-value { font-family:var(--font-display); font-size:1.8rem; font-weight:700; line-height:1.1; }
.metric-sub { font-size:0.65rem; color:var(--text-secondary); margin-top:6px; line-height:1.3; }
.resonance-row { display:flex; gap:12px; margin-bottom:16px; }
.resonance-row > .card { margin-bottom:0; }

/* Fibonacci map */
.fib-map-groups { display:flex; flex-direction:column; gap:10px; padding:12px 0; }
.fib-map-group { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fib-map-weight { font-weight:700; font-size:0.85rem; min-width:50px; }
.fib-map-electrodes { display:flex; flex-wrap:wrap; gap:6px; }
.fib-map-elec {
  display:inline-flex; flex-direction:column; align-items:center;
  background:var(--bg-elevated); border:1px solid; border-radius:var(--radius-sm);
  padding:4px 8px; font-size:0.75rem; font-weight:600;
}
.fib-map-elec small { font-size:0.6rem; font-weight:400; color:var(--text-secondary); margin-top:1px; }
.fib-map-avg { font-size:0.7rem; font-weight:600; margin-left:auto; }

/* ═══════════════════════════════════════════════════════════
   IMPORT MODAL
   ═══════════════════════════════════════════════════════════ */
#import-modal {
  display:none; position:fixed; inset:0; z-index:300;
  background:rgba(30,30,60,.55); backdrop-filter:blur(8px);
  justify-content:center; align-items:center;
}
#import-modal.visible { display:flex; }
.import-dialog {
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px;
  width:min(540px,90vw); max-height:80vh; overflow-y:auto;
  padding:28px;
}
.import-dialog h2 { font-family:var(--font-display); font-size:1.1rem; margin-bottom:16px; }
.import-tabs { display:flex; gap:6px; margin-bottom:12px; }
.import-type-select {
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-primary); font-family:var(--font-mono); font-size:0.75rem;
  padding:6px 14px; cursor:pointer; transition:all .2s; min-width:180px;
}
.import-type-select:hover { border-color:var(--accent-indigo); }
.import-type-select:focus { border-color:var(--accent-indigo); outline:none; }
.import-type-select option { background:var(--bg-elevated); color:var(--text-primary); }
.import-tab-content { display:none; }
.import-tab-content.active { display:block; }
.import-tab-content textarea {
  width:100%; min-height:150px; background:var(--bg-deep); color:var(--text-primary);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px;
  font-family:var(--font-mono); font-size:0.75rem; resize:vertical;
}
.import-tab-content input[type="file"] {
  background:var(--bg-deep); color:var(--text-primary); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:10px; width:100%; font-size:0.75rem; cursor:pointer;
}
/* Wide EEG spinner variant — fills available width */
.eeg-spinner-wide { display:flex;width:100%;padding:14px 0 }
.eeg-spinner-wide .eeg-spinner-wave { width:100% }
.eeg-spinner-wide .eeg-spinner-wave svg { position:absolute;top:0;left:0;height:100%;animation-duration:18s }
.eeg-spinner-wide .eeg-spinner-label { font-size:0.9rem }

/* Import progress spinner: full-width when processing */
.import-tab-content [id$="-progress-label"]:has(.eeg-spinner) { flex:1 }

.import-actions { display:flex; gap:10px; margin-top:16px; }
.import-actions button {
  padding:8px 18px; border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:0.75rem;
  cursor:pointer; border:1px solid var(--border);
}
.btn-primary, .btn-secondary {
  padding:8px 18px; border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:0.75rem;
  cursor:pointer; border:1px solid var(--border); transition:all .2s;
}
.btn-primary { background:var(--accent-indigo); color:#fff; border-color:var(--accent-indigo)!important; }
.btn-primary:hover { opacity:.85; }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-secondary { background:var(--bg-elevated); color:var(--text-secondary); }
.btn-secondary:hover { border-color:var(--accent-indigo); color:var(--text-primary); }
.btn-secondary:disabled { opacity:.35; cursor:not-allowed; pointer-events:auto; }
.btn-secondary:disabled:hover { border-color:var(--border); color:var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════
   HEADER BUTTONS
   ═══════════════════════════════════════════════════════════ */
.header-btn {
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-secondary); font-family:var(--font-mono); font-size:0.65rem;
  padding:4px 10px; cursor:pointer; transition:all .2s; letter-spacing:.5px;
}
.header-btn:hover { border-color:var(--accent-indigo); color:var(--text-primary); }
.header-btn:disabled { opacity:.4; cursor:not-allowed; pointer-events:auto; }
.header-btn:disabled:hover { border-color:var(--border); color:var(--text-secondary); }
.header-btn.paper-btn { border-color:var(--accent-amber); color:var(--accent-amber); }
.header-btn.paper-btn:hover { background:rgba(245,158,11,.12); }
#patient-id.has-sessions { cursor:pointer; }
#patient-id.has-sessions:hover { color:var(--text-primary); }
#patient-id.has-sessions::after { content:' ▾'; font-size:0.65rem; opacity:.5; }
#session-dropdown .sd-table {
  width:100%; border-collapse:collapse; border:none;
}
#session-dropdown .sd-item {
  cursor:pointer; background:none;
  color:var(--text-secondary); font-size:0.72rem; font-family:var(--font-mono); transition:background .15s;
}
#session-dropdown .sd-item td {
  padding:6px 4px; white-space:nowrap; border:none;
}
#session-dropdown .sd-item td:first-child { padding-left:10px; }
#session-dropdown .sd-item td:last-child { padding-right:10px; }
#session-dropdown .sd-item:hover { background:rgba(99,102,241,.08); }
#session-dropdown .sd-item.active { background:rgba(99,102,241,.12); color:var(--accent-cyan); }
#session-dropdown .sd-item .sd-type {
  display:inline-block; padding:2px 6px; border-radius:4px; font-size:0.65rem; font-weight:600;
}
#session-dropdown .sd-item .sd-sim {
  font-size:0.6rem; color:var(--accent-red); white-space:nowrap;
}
#session-dropdown .sd-item .sd-sim.has-sim { color:var(--accent-green); }
#session-dropdown .sd-item .sd-date { color:var(--text-muted); font-size:0.65rem; }
#session-dropdown .sd-report-btn {
  background:rgba(99,102,241,0.25); color:#a5b4fc; border:1px solid rgba(99,102,241,0.4);
  font-weight:600; padding:3px 10px; border-radius:var(--radius-sm); cursor:pointer;
  font-size:0.65rem; font-family:var(--font-mono); transition:opacity .15s; white-space:nowrap;
}
#session-dropdown .sd-report-btn:hover { opacity:.85; }
#session-dropdown .sd-report-btn:disabled { opacity:.3; cursor:not-allowed; pointer-events:none; }
#session-dropdown .sd-psych-btn {
  background:rgba(124,58,237,0.25); color:#c4b5fd; border:1px solid rgba(124,58,237,0.4);
  font-weight:600; padding:3px 10px; border-radius:var(--radius-sm); cursor:pointer;
  font-size:0.65rem; font-family:var(--font-mono); transition:opacity .15s; white-space:nowrap;
}
#session-dropdown .sd-psych-btn:hover { opacity:.85; }
#session-dropdown .sd-psych-btn:disabled { opacity:.3; cursor:not-allowed; pointer-events:none; }
#session-dropdown .sd-session-btn {
  background:rgba(6,182,212,0.2); color:#67e8f9; border:1px solid rgba(6,182,212,0.35);
  font-weight:600; padding:3px 10px; border-radius:var(--radius-sm); cursor:pointer;
  font-size:0.65rem; font-family:var(--font-mono); transition:opacity .15s; white-space:nowrap;
}
#session-dropdown .sd-session-btn:hover { opacity:.85; }

/* ═══════════════════════════════════════════════════════════
   LOGIN SCREEN
   ═══════════════════════════════════════════════════════════ */
#login-screen {
  position:fixed; inset:0; z-index:200;
  background:var(--bg-deep);
  display:flex; align-items:center; justify-content:center;
}
.login-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:40px 36px; width:380px; max-width:90vw;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.login-card .login-logo {
  display:flex; align-items:center; gap:12px; margin-bottom:28px; justify-content:center;
}
.login-card .login-logo .logo-icon { width:44px; height:44px; font-size:22px; }
.login-card .login-logo h2 {
  font-family:var(--font-display); font-size:1.1rem; font-weight:700; letter-spacing:1.5px; color:var(--text-primary);
}
.login-card .login-logo span {
  font-size:0.55rem; color:var(--text-muted); letter-spacing:2.5px; text-transform:uppercase; display:block;
}
.login-field {
  margin-bottom:16px;
}
.login-field label {
  display:block; font-size:0.65rem; color:var(--text-muted); letter-spacing:1px;
  text-transform:uppercase; margin-bottom:6px;
}
.login-field input {
  width:100%; padding:10px 14px; border-radius:var(--radius-sm);
  background:var(--bg-elevated); border:1px solid var(--border);
  color:var(--text-primary); font-family:var(--font-mono); font-size:0.85rem;
  outline:none; transition:border-color .2s;
}
.login-field input:focus { border-color:var(--accent-indigo); }
.login-field input::placeholder { color:var(--text-muted); }
.password-wrapper { position:relative; }
.password-wrapper input { padding-right:40px; }
.pw-toggle {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px;
  display:flex; align-items:center;
}
.pw-toggle:hover { color:var(--text-primary); }
.pw-toggle .hidden { display:none; }
#login-error {
  color:var(--accent-red); font-size:0.72rem; margin-bottom:12px; min-height:1.2em;
}
#login-btn {
  width:100%; padding:11px; border:none; border-radius:var(--radius-sm);
  background:linear-gradient(135deg, var(--accent-indigo), #4f46e5);
  color:#fff; font-family:var(--font-mono); font-size:0.85rem; font-weight:600;
  cursor:pointer; transition:opacity .2s; letter-spacing:.5px;
}
#login-btn:hover { opacity:.88; }
#login-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ═══════════════════════════════════════════════════════════
   NAV SIDEBAR (left icon rail)
   ═══════════════════════════════════════════════════════════ */
#nav-sidebar {
  width:56px; min-width:56px;
  background:var(--bg-deepest); border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center;
  padding:12px 0; gap:4px;
  overflow-y:auto; overflow-x:hidden;
}
.nav-item {
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:1.1rem; cursor:pointer;
  transition:all .2s ease; position:relative; border:none; background:none;
}
.nav-item:hover { background:rgba(99,102,241,.1); color:var(--text-secondary); }
.nav-item.active { background:rgba(99,102,241,.18); color:var(--accent-indigo); }
.nav-item .nav-tooltip {
  position:absolute; left:54px; top:50%; transform:translateY(-50%);
  background:var(--bg-elevated); border:1px solid var(--border-light);
  color:var(--text-primary); font-size:0.68rem; padding:4px 10px;
  border-radius:6px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .15s; z-index:300;
}
.nav-item:hover .nav-tooltip { opacity:1; }
.nav-spacer { flex:1; }
.nav-user-badge {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent-indigo), var(--accent-cyan));
  color:#fff; font-size:0.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; margin-bottom:4px; transition:opacity .2s;
}
.nav-user-badge:hover { opacity:.8; }

/* ═══════════════════════════════════════════════════════════
   USERS VIEW
   ═══════════════════════════════════════════════════════════ */
.app-view {
  flex:1; overflow-y:auto; min-height:0;
}
.view-container { max-width:960px; margin:0 auto; padding:28px 32px; }
.view-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.view-title { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--text-primary); }
.view-subtitle { font-size:0.68rem; color:var(--text-muted); margin-top:2px; }
.btn-create-user {
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(135deg, var(--accent-indigo), #4f46e5); color:#fff; border:none;
  padding:8px 16px; border-radius:var(--radius-sm); font-family:var(--font-mono);
  font-size:0.75rem; font-weight:600; cursor:pointer; transition:opacity .2s;
}
.btn-create-user:hover { opacity:.88; }

/* Users table */
#users-table-wrap {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.users-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.users-table th {
  text-align:left; padding:12px 16px; font-size:0.6rem; color:var(--text-muted);
  letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid var(--border);
  background:var(--bg-elevated);
}
.users-table td { padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.users-table tbody tr:hover { background:rgba(99,102,241,.04); }
.users-table tbody tr:last-child td { border-bottom:none; }
.user-cell-info { display:flex; flex-direction:column; gap:1px; }
.user-cell-name { font-weight:600; color:var(--text-primary); }
.user-cell-email { font-size:0.68rem; color:var(--text-muted); }
.role-badge {
  display:inline-block; padding:3px 10px; border-radius:10px;
  font-size:0.62rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
}
.role-badge.super_admin { background:rgba(239,68,68,.15); color:var(--accent-red); }
.role-badge.admin { background:rgba(245,158,11,.15); color:var(--accent-amber); }
.role-badge.technician { background:rgba(99,102,241,.15); color:var(--accent-indigo); }
.role-badge.patient { background:rgba(16,185,129,.15); color:var(--accent-green); }
.status-dot {
  display:inline-flex; align-items:center; gap:5px; font-size:0.7rem;
}
.status-dot::before {
  content:''; width:7px; height:7px; border-radius:50%;
}
.status-dot.active::before { background:var(--accent-green); }
.status-dot.inactive::before { background:var(--accent-red); }
.user-actions { display:flex; gap:6px; }
.user-actions button {
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-secondary);
  padding:5px 10px; border-radius:var(--radius-sm); font-family:var(--font-mono);
  font-size:0.65rem; cursor:pointer; transition:all .2s;
}
.user-actions button:hover { border-color:var(--accent-indigo); color:var(--text-primary); }
.user-actions button.btn-danger:hover { border-color:var(--accent-red); color:var(--accent-red); }
.btn-danger {
  background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.4);
  font-family:var(--font-mono); cursor:pointer; transition:all .2s;
}
.btn-danger:hover { background:rgba(239,68,68,.25); border-color:#ef4444; }
.btn-danger:disabled, .btn-danger[disabled] {
  opacity:0.3; cursor:not-allowed; pointer-events:none;
}
.user-actions button:disabled, .user-actions button[disabled] {
  opacity:0.3; cursor:not-allowed; pointer-events:none;
}

/* Patients grid modal */
.patients-modal-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:28px 28px 20px; width:min(1100px,94vw);
  box-shadow:0 20px 60px rgba(0,0,0,.5); max-height:80vh; overflow-y:auto;
}
.patients-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.patients-modal-header h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--text-primary); }
#patients-table-wrap {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.btn-select-patient {
  background:linear-gradient(135deg, var(--accent-green), #059669) !important;
  color:#fff !important; border-color:var(--accent-green) !important; font-weight:600;
}
.btn-select-patient:hover { opacity:.85; }
.btn-report {
  background:rgba(99,102,241,0.15); color:#6366f1; border:1px solid rgba(99,102,241,0.3);
  font-weight:600; padding:5px 14px; border-radius:var(--radius-sm); cursor:pointer;
  font-size:0.72rem; font-family:var(--font-mono); transition:opacity .15s;
}
.btn-report:hover { opacity:.8; }
.btn-report:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* Psychological Report button */
.btn-psych-report {
  background:rgba(124,58,237,0.15); color:#7c3aed; border:1px solid rgba(124,58,237,0.3);
  font-weight:600; padding:5px 14px; border-radius:var(--radius-sm); cursor:pointer;
  font-size:0.72rem; font-family:var(--font-mono); transition:opacity .15s;
}
.btn-psych-report:hover { opacity:.8; }
.btn-psych-report:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* Psychological Report modal */
.psych-report-card {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--radius-lg); display:flex; flex-direction:column;
  width:min(960px, 95vw); max-height:90vh; overflow:hidden; box-shadow:var(--shadow-xl);
}
.psych-report-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--border-color);
  flex-shrink:0;
}
.psych-report-body {
  overflow-y:auto; padding:24px 28px; flex:1;
  font-size:0.88rem; line-height:1.7; color:var(--text-primary);
}
.psych-report-narrative { max-width:720px; margin:0 auto; }
.psych-report-narrative p { margin:0 0 1em; }
.psych-report-narrative h1,.psych-report-narrative h2,.psych-report-narrative h3 {
  color:var(--text-primary); margin:1.2em 0 .4em;
}
.psych-report-meta {
  display:flex; gap:20px; align-items:center; padding:12px 0 4px;
  font-size:0.72rem; color:var(--text-muted); border-top:1px solid var(--border-color);
  margin-top:20px;
}
.psych-report-cached-badge {
  background:rgba(34,197,94,0.12); color:#22c55e; border:1px solid rgba(34,197,94,0.3);
  border-radius:4px; padding:1px 7px; font-size:0.68rem; font-family:var(--font-mono);
  font-weight:600; white-space:nowrap;
}
.psych-report-disclaimer {
  font-size:0.72rem; color:var(--text-muted); font-style:italic;
  padding-top:8px; border-top:1px solid var(--border-color); margin-top:8px;
}
.psych-report-error {
  background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.3);
  border-radius:8px; padding:16px 20px; color:#ef4444;
}
.psych-report-error pre {
  margin:8px 0 0; font-size:0.75rem; white-space:pre-wrap; word-break:break-word;
  color:var(--text-secondary);
}

/* User modal */
.modal-overlay {
  position:fixed; inset:0; z-index:250; background:rgba(30,30,60,.55);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.user-modal-card {
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:14px;
  padding:28px 28px 20px; width:520px; max-width:90vw;
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.15);
}
.user-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.user-modal-header h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--text-primary); }
.modal-close {
  background:none; border:none; color:var(--text-muted); font-size:1.4rem; cursor:pointer;
  transition:color .2s; line-height:1;
}
.modal-close:hover { color:var(--text-primary); }
.patients-modal-card {
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:14px;
  padding:24px; width:1100px; max-width:94vw; max-height:80vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.15);
  position:relative;
}
.patients-modal-header {
  display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px;
}
.patients-modal-card .users-table { font-size:0.75rem; }
.patients-modal-card .users-table th { padding:8px 6px; }
.patients-modal-card .users-table td { padding:10px 6px; }
.sortable-th { cursor:pointer; user-select:none; }
.sortable-th:hover { color:var(--text-primary); background:rgba(99,102,241,0.08); }
.sort-arrow { font-size:0.7rem; color:var(--accent-blue); margin-left:2px; }
.patients-modal-card .user-actions { gap:4px; }
.patients-modal-card .user-actions button { padding:5px 8px; }
.pv-session-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; padding:2px 8px; border-radius:10px;
  font-size:0.7rem; font-weight:600;
  background:rgba(99,102,241,.15); color:var(--accent-indigo);
}
.pv-session-count.zero { background:rgba(255,255,255,.05); color:var(--text-muted); }
.patients-modal-card .users-table tbody tr.pv-loaded-patient td {
  background: rgba(34,211,238,.12) !important;
  border-bottom-color: rgba(34,211,238,.25);
}
.patients-modal-card .users-table tbody tr.pv-loaded-patient td:first-child {
  box-shadow: inset 3px 0 0 var(--accent-cyan);
}
.patients-modal-card .users-table tbody tr.pv-loaded-patient:hover td {
  background: rgba(34,211,238,.18) !important;
}
/* Session data tabs in patient detail */
.pv-sd-tab.active { color:var(--accent-indigo) !important; border-bottom-color:var(--accent-indigo) !important; }
.pv-sd-tab:hover { color:var(--text-primary); }
.pv-sd-field { margin-bottom:8px; }
.pv-sd-field label { display:block; font-size:0.6rem; text-transform:uppercase; color:var(--text-muted); letter-spacing:0.5px; margin-bottom:2px; }
.pv-sd-field .pv-sd-val { font-size:0.78rem; color:var(--text-secondary); min-height:18px; }
.pv-sd-field .pv-sd-val.empty { color:var(--text-muted); font-style:italic; }
.pv-loaded-badge {
  display:inline-block; margin-left:8px; padding:1px 7px; border-radius:4px;
  font-size:0.6rem; font-weight:700; letter-spacing:0.03em;
  background:rgba(34,211,238,.15); color:var(--accent-cyan); vertical-align:middle;
}
.uf-row { display:flex; gap:16px; margin-bottom:14px; }
.uf-field { flex:1; }
.uf-field label {
  display:block; font-size:0.62rem; color:var(--text-muted); letter-spacing:1px;
  text-transform:uppercase; margin-bottom:5px;
}
.uf-field input, .uf-field select {
  width:100%; padding:9px 12px; border-radius:var(--radius-sm);
  background:var(--bg-elevated); border:1px solid var(--border);
  color:var(--text-primary); font-family:var(--font-mono); font-size:0.8rem;
  outline:none; transition:border-color .2s;
}
.uf-field input:focus, .uf-field select:focus { border-color:var(--accent-indigo); }
.uf-field select { cursor:pointer; }
.uf-field select option { background:var(--bg-elevated); color:var(--text-primary); }
.uf-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }

/* ═══════════════════════════════════════════════════════════
   PAPER MODE SIDEBAR PANEL
   ═══════════════════════════════════════════════════════════ */
#paper-panel {
  --paper-accent: var(--accent-amber);
  position:fixed; top:0; right:-380px; bottom:0; z-index:200;
  width:360px; max-width:90vw;
  display:flex; flex-direction:column;
  background:rgba(15,15,30,.45);
  border-left:2px solid var(--paper-accent);
  backdrop-filter:blur(28px) saturate(1.4) brightness(1.1); -webkit-backdrop-filter:blur(28px) saturate(1.4) brightness(1.1);
  transition:right .35s cubic-bezier(.4,0,.2,1), border-color .3s;
  box-shadow:-8px 0 40px rgba(0,0,0,.5);
}
#paper-panel.visible { right:0; }

/* Panel overlays content — no margin push needed */

/* Header */
#paper-panel .paper-header {
  display:flex; align-items:center; gap:10px;
  padding:16px 20px 12px; border-bottom:1px solid var(--border);
}
.paper-step-badge {
  font-family:var(--font-mono); font-size:0.65rem; font-weight:700;
  color:var(--paper-accent); letter-spacing:1.5px; text-transform:uppercase;
}
.paper-act-label {
  font-family:var(--font-mono); font-size:0.6rem; color:var(--text-muted);
  letter-spacing:0.5px; opacity:0.7;
}
.paper-close {
  margin-left:auto; background:none; border:none;
  color:var(--text-muted); font-size:1.3rem; cursor:pointer;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); transition:all .2s;
}
.paper-close:hover { background:rgba(255,255,255,.06); color:var(--text-primary); }

/* Body — scrollable content area */
.paper-body {
  flex:1; overflow-y:auto; padding:24px 20px;
  transition:opacity .15s ease;
}
.paper-body.paper-fade-out { opacity:0; }

/* Icon */
.paper-icon {
  width:48px; height:48px; margin-bottom:16px;
  color:var(--paper-accent); opacity:0.9;
}
.paper-icon svg { width:100%; height:100%; }

/* Title */
#paper-panel .paper-title {
  font-family:var(--font-display); font-size:1.15rem; font-weight:700;
  color:var(--text-primary); margin:0 0 10px; line-height:1.3;
}

/* Description */
#paper-panel .paper-desc {
  font-size:0.82rem; color:var(--text-secondary); line-height:1.65;
  margin:0 0 20px;
}

/* Key Metrics */
.paper-metrics-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.paper-metric {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--radius-sm); padding:10px 12px;
  display:flex; flex-direction:column; gap:3px;
}
.paper-metric-label {
  font-family:var(--font-mono); font-size:0.62rem; color:var(--text-muted);
  letter-spacing:0.5px; text-transform:uppercase;
}
.paper-metric-value {
  font-family:var(--font-mono); font-size:0.82rem; font-weight:600;
}

/* Progress bar */
.paper-progress {
  display:flex; gap:3px; padding:0 20px; margin-bottom:8px;
}
.paper-seg {
  flex:1; height:4px; border-radius:2px;
  background:var(--border); transition:all .3s;
}
.paper-seg.done { background:var(--seg-accent); opacity:0.6; }
.paper-seg.active { background:var(--seg-accent); box-shadow:0 0 8px rgba(255,255,255,.15); }
.paper-seg.act-gap { margin-left:6px; }

/* Navigation */
#paper-panel .paper-nav {
  display:flex; gap:10px; align-items:center;
  padding:12px 20px 16px; border-top:1px solid var(--border);
}
#paper-panel .paper-nav button {
  padding:8px 20px; border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:0.75rem;
  cursor:pointer; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-secondary);
  transition:all .2s;
}
#paper-panel .paper-nav button:hover { border-color:var(--paper-accent); color:var(--text-primary); }
#paper-panel .paper-nav button:disabled { opacity:.3; cursor:not-allowed; }
#paper-panel .paper-nav button.btn-accent {
  background:var(--paper-accent); color:#000; border-color:var(--paper-accent); font-weight:600;
}
.paper-kbd-hint {
  margin-left:auto; font-family:var(--font-mono); font-size:0.6rem;
  color:var(--text-muted); opacity:0.5; letter-spacing:1px;
}

/* ═══════════════════════════════════════════════════════════
   THEME TOGGLE
   ═══════════════════════════════════════════════════════════ */
.theme-toggle {
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:1.1rem; cursor:pointer;
  transition:all .2s ease; position:relative; border:none; background:none;
}
.theme-toggle:hover { background:rgba(99,102,241,.1); color:var(--text-secondary); }
.theme-toggle .nav-tooltip {
  position:absolute; left:54px; top:50%; transform:translateY(-50%);
  background:var(--bg-elevated); border:1px solid var(--border-light);
  color:var(--text-primary); font-size:0.68rem; padding:4px 10px;
  border-radius:6px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .15s; z-index:300;
}
.theme-toggle:hover .nav-tooltip { opacity:1; }

/* Light-theme overrides for hardcoded colors */
[data-theme="light"] .logo-icon { color:#fff; }
[data-theme="light"] .nav-user-badge { color:#fff; }
[data-theme="light"] .btn-create-user { color:#fff; }
[data-theme="light"] .btn-primary { color:#fff; }
[data-theme="light"] #login-btn { color:#fff; }
[data-theme="light"] .live-view-btn.active { color:#fff; }
[data-theme="light"] .live-speed-btn.active { color:#fff; }
[data-theme="light"] .sim-run-btn { color:#fff; }
[data-theme="light"] #paper-panel .paper-nav button.btn-accent { color:#000; }
[data-theme="light"] .login-card { box-shadow:0 20px 60px rgba(0,0,0,.12); }
[data-theme="light"] #session-dropdown { box-shadow:0 12px 40px rgba(0,0,0,.12); }

/* Light: floating transport */
[data-theme="light"] #live-transport-float { background:rgba(240,240,242,0.96); border-color:var(--border-light); box-shadow:0 4px 20px rgba(0,0,0,.15); }
[data-theme="light"] #live-back-to-all { background:rgba(240,240,245,0.95); color:var(--text-primary); border-color:var(--border); }

/* Light: paper sidebar panel */
[data-theme="light"] #paper-panel { background:rgba(240,240,250,.4); box-shadow:-8px 0 40px rgba(0,0,0,.12); }

/* Light: sidebar backgrounds */
[data-theme="light"] #sidebar { background:var(--bg-card); }

/* Light: EEG spinner — darken the wave + add background for visibility */
[data-theme="light"] .eeg-spinner-wave svg { stroke:var(--accent-indigo); }
[data-theme="light"] .eeg-spinner-label { color:var(--text-primary); }
[data-theme="light"] .eeg-spinner-center { background:var(--bg-card); border-radius:var(--radius); padding:30px 20px; }
[data-theme="light"] .eeg-spinner { background:var(--bg-card); border-radius:var(--radius-sm); padding:8px 14px; }

/* Light: zone labels in brain map */
[data-theme="light"] #brain-map .zone-label-text { fill:rgba(0,0,0,0.35) !important; }


/* ═══════════════════════════════════════════════════════════
   SESSION REPORT MODAL
   ═══════════════════════════════════════════════════════════ */

.report-modal-card {
  width:95vw; max-width:900px; max-height:95vh;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
}
.report-toolbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px; border-bottom:1px solid var(--border);
  background:var(--bg-elevated); flex-shrink:0;
}
/* Report search bar */
.report-search-bar {
  display:flex; align-items:center; gap:4px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  border-radius:6px; padding:3px 6px; font-family:var(--font-mono);
}
.report-search-bar input {
  background:transparent; border:none; outline:none;
  color:var(--text-primary); font-size:0.72rem; width:140px;
  font-family:var(--font-mono); padding:2px 4px;
}
.report-search-bar input::placeholder { color:var(--text-muted); }
.report-search-toggle {
  -webkit-appearance:none; appearance:none;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:3px;
  color:var(--text-muted); cursor:pointer; font-size:0.65rem;
  padding:2px 5px; font-family:var(--font-mono); font-weight:600;
  transition:all 0.15s;
}
.report-search-toggle:hover { color:var(--text-primary); border-color:rgba(255,255,255,0.25); }
.report-search-toggle.active {
  background:rgba(99,102,241,0.22); color:var(--accent-indigo);
  border-color:var(--accent-indigo);
}
.report-search-count {
  font-size:0.65rem; color:var(--text-muted); min-width:40px;
  text-align:center; font-family:var(--font-mono); white-space:nowrap;
}
.report-search-nav {
  -webkit-appearance:none; appearance:none;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:3px;
  cursor:pointer; color:var(--text-muted); font-size:0.55rem;
  padding:2px 5px; line-height:1; transition:all 0.15s;
  font-family:var(--font-mono);
}
.report-search-nav:hover { color:var(--text-primary); border-color:rgba(255,255,255,0.25); }
.report-search-nav:disabled { opacity:0.3; cursor:default; }
mark.report-highlight {
  background:rgba(250,204,21,0.35); color:inherit;
  border-radius:2px; padding:0 1px;
}
mark.report-highlight.current {
  background:rgba(250,204,21,0.7); outline:2px solid rgba(250,204,21,0.5);
}
.report-content {
  overflow-y:auto; padding:24px 32px; flex:1;
  font-family:var(--font-display); color:var(--text-primary);
}
.report-section { margin-bottom:28px; page-break-inside:avoid; }
.report-section-title {
  font-size:1rem; font-weight:700; color:var(--text-primary);
  margin:0 0 12px; padding-bottom:6px;
  border-bottom:2px solid var(--accent-indigo);
  font-family:var(--font-display);
}
.report-subsection-title {
  font-size:0.85rem; font-weight:600; color:var(--text-secondary);
  margin:16px 0 8px; font-family:var(--font-display);
}

/* Clinic banner */
.report-clinic-banner { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.report-clinic-logo { width:64px; height:64px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.report-clinic-info { text-align:left; }
.report-clinic-name { font-size:0.95rem; font-weight:700; color:var(--text-primary); line-height:1.3; }
.report-clinic-address { font-size:0.75rem; color:var(--text-muted); line-height:1.4; margin-top:2px; }

/* Header */
.report-header { text-align:center; margin-bottom:8px; }
.report-header h1 { font-size:1.3rem; font-weight:800; color:var(--accent-indigo); margin:0; letter-spacing:0.05em; }
.report-subtitle { font-size:0.75rem; color:var(--text-muted); margin:2px 0 16px; }
.report-patient-info { background:var(--bg-elevated); border-radius:var(--radius-sm); padding:12px 16px; margin:12px 0; }
.report-info-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.report-info-item { display:flex; flex-direction:column; }
.report-info-label { font-size:0.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.report-info-value { font-size:0.82rem; color:var(--text-primary); font-weight:600; }
.report-legend { display:flex; gap:16px; justify-content:center; margin-top:12px; }
.report-legend-item { display:flex; align-items:center; gap:4px; font-size:0.7rem; color:var(--text-secondary); }
.report-legend-dot { width:10px; height:10px; border-radius:2px; display:inline-block; }

/* Brain Maps */
.report-brain-maps-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.report-brain-map-col h4 { text-align:center; font-size:0.75rem; color:var(--text-secondary); margin-bottom:6px; }
.report-brain-map-container {
  position:relative; width:100%; padding-top:100%;
  background:var(--bg-elevated); border-radius:var(--radius-sm); border:1px solid var(--border);
}
.report-brain-cell {
  position:absolute; width:28px; height:28px; border-radius:4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:translate(-50%, -50%); font-family:var(--font-mono);
}
.report-brain-cell-name { font-size:0.5rem; font-weight:700; line-height:1; }
.report-brain-cell-value { font-size:0.45rem; line-height:1; }

/* Findings */
.report-findings-list { display:flex; flex-direction:column; gap:8px; }
.report-finding {
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 12px; border-left:3px solid #6b7280;
  background:var(--bg-elevated); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:0.78rem;
}
.report-finding-num { font-weight:700; flex-shrink:0; min-width:28px; }
.report-finding-text { flex:1; color:var(--text-primary); line-height:1.4; }
.report-finding-severity {
  font-size:0.6rem; font-weight:600; padding:2px 6px;
  border-radius:3px; flex-shrink:0; text-transform:uppercase;
}

/* Bar Charts */
.report-bar-charts-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.report-bar-chart-item h4 { font-size:0.72rem; color:var(--text-secondary); margin-bottom:4px; text-align:center; }

/* Tables */
.report-table-wrap { overflow-x:auto; margin:8px 0; }
.report-table {
  width:100%; border-collapse:collapse; font-size:0.72rem;
  font-family:var(--font-mono);
}
.report-table th {
  text-align:left; padding:6px 10px; font-weight:600;
  color:var(--text-secondary); border-bottom:1px solid var(--border);
  font-size:0.65rem; text-transform:uppercase; letter-spacing:0.03em;
}
.report-table td { padding:5px 10px; border-bottom:1px solid var(--border); }
.report-table-compact td, .report-table-compact th { padding:4px 8px; }
.report-table-electrode { font-weight:600; color:var(--accent-cyan); }
.report-z-excess { background:rgba(239,68,68,0.08); }
.report-z-deficit { background:rgba(59,130,246,0.08); }
.report-power-val { margin-right:4px; }
.report-z-val { font-size:0.6rem; color:var(--text-muted); }

/* Metric Cards */
.report-metrics-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin:8px 0; }
.report-metric-card {
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px; text-align:center;
}
.report-metric-label { font-size:0.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.03em; }
.report-metric-value { font-size:1.1rem; font-weight:700; margin:4px 0; font-family:var(--font-mono); }
.report-metric-subtitle { font-size:0.6rem; color:var(--text-muted); line-height:1.3; }

/* Footer */
.report-footer { border-top:1px solid var(--border); padding-top:16px; text-align:center; }
.report-disclaimer { font-size:0.65rem; color:var(--text-muted); font-style:italic; margin-bottom:8px; line-height:1.4; }
.report-timestamp { font-size:0.6rem; color:var(--text-muted); }
.report-branding { font-size:0.65rem; color:var(--accent-indigo); font-weight:600; margin-top:4px; }


/* ═══════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════ */

@media print {
  body > *:not(#report-modal-overlay):not(#psych-report-modal) { display:none !important; }
  #psych-report-modal {
    display:flex !important; position:static; background:white;
    overflow:visible; z-index:auto; align-items:flex-start;
  }
  #psych-report-modal .psych-report-card {
    width:100%; max-width:100%; max-height:none; height:auto;
    border:none; border-radius:0; background:white;
    box-shadow:none; overflow:visible; display:block;
  }
  #psych-report-modal .psych-report-toolbar { display:none !important; }
  #psych-report-modal .psych-report-body {
    overflow:visible; padding:0; color:#111; background:white;
    height:auto; flex:none;
  }
  #psych-report-modal .psych-report-narrative { color:#111; }
  #psych-report-modal .psych-report-meta,
  #psych-report-modal .psych-report-disclaimer { color:#555; border-color:#ccc; }

  /* When psych report is open, suppress the regular report overlay */
  body.printing-psych #report-modal-overlay { display:none !important; }

  #report-modal-overlay {
    display:block !important; position:static; background:white;
    overflow:visible; z-index:auto;
  }
  .report-modal-card {
    display:block !important;
    width:100%; max-width:100%; max-height:none; height:auto;
    border:none; border-radius:0; background:white;
    box-shadow:none; overflow:visible;
  }
  .report-content {
    display:block !important; flex:none;
    overflow:visible; padding:0; color:#111;
    background:white; height:auto;
  }
  .no-print { display:none !important; }
  .report-section { page-break-inside:auto; }
  .report-section-title { page-break-after:avoid; }
  .report-finding { page-break-inside:avoid; }
  .report-metric-card { page-break-inside:avoid; }
  .report-table tr { page-break-inside:avoid; }
  /* Prevent orphaned section titles: if a title can't fit with content, move it all to next page */
  .report-findings-list .report-section-title { margin-bottom:8px; }
  .report-findings-list .report-section-title + .report-finding { page-break-before:avoid; }
  .report-section-title { color:#333; border-bottom-color:#333; }
  .report-subsection-title { color:#555; }
  .report-header h1 { color:#333; }
  .report-patient-info { background:#f5f5f5; }
  .report-info-label { color:#777; }
  .report-info-value { color:#111; }
  .report-finding { background:#f9f9f9; }
  .report-finding-text { color:#111; }
  .report-table th { color:#555; }
  .report-table td { color:#111; }
  .report-metric-card { background:#f5f5f5; border-color:#ddd; }
  .report-metric-label { color:#777; }
  .report-metric-subtitle { color:#999; }
  .report-footer { border-top-color:#ddd; }
  .report-brain-map-container { background:#f5f5f5; border-color:#ddd; }
  .report-bar-charts-grid { page-break-inside:avoid; }

  /* Force colors in print */
  .report-z-excess { background:rgba(239,68,68,0.1) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .report-z-deficit { background:rgba(59,130,246,0.1) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .report-legend-dot { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .report-brain-cell { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .report-finding-severity { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ─── HISTORIC / CHANGELOG VIEW ─────────────────────────── */
.hist-search-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.hist-search-wrap {
  display:flex; align-items:center; gap:6px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:8px; padding:6px 12px; min-width:220px;
}
.hist-search-wrap svg { color:var(--text-muted); flex-shrink:0; }
.hist-search-wrap input {
  border:none; background:none; outline:none;
  color:var(--text-primary); font-size:0.78rem; width:100%;
}
.hist-search-wrap input::placeholder { color:var(--text-muted); }
.hist-search-options {
  display:flex; align-items:center; gap:4px;
}
.hist-opt-btn {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:4px; padding:2px 7px; font-size:0.7rem; font-weight:700;
  color:var(--text-muted); cursor:pointer; font-family:'SF Mono',monospace;
  transition:all .15s; line-height:1.4;
}
.hist-opt-btn:hover { border-color:var(--accent-indigo); color:var(--text-primary); }
.hist-opt-btn.active { background:rgba(99,102,241,.2); border-color:var(--accent-indigo); color:var(--accent-indigo); }
.hist-nav-btn {
  background:none; border:1px solid var(--glass-border); border-radius:4px;
  padding:1px 6px; font-size:0.6rem; color:var(--text-muted); cursor:pointer;
  transition:all .15s; line-height:1;
}
.hist-nav-btn:hover { border-color:var(--accent-indigo); color:var(--text-primary); }
.hist-match-count {
  font-size:0.68rem; color:var(--text-muted); font-family:'SF Mono',monospace;
  min-width:40px; text-align:center;
}
mark.hist-highlight {
  background:rgba(250,204,21,.35); color:inherit; border-radius:2px;
  padding:0 1px; scroll-margin-top:80px;
}
mark.hist-highlight.current {
  background:rgba(250,204,21,.7); outline:2px solid rgba(250,204,21,.6);
}

.hist-content {
  display:flex; flex-direction:column; gap:4px;
  padding:8px 0; max-height:calc(100vh - 180px); overflow-y:auto;
}

/* Collapsible groups */
.hist-group { border:none; }
.hist-group summary {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  list-style:none; padding:8px 12px; border-radius:8px;
  font-family:'SF Mono',monospace; transition:background .15s;
}
.hist-group summary::-webkit-details-marker { display:none; }
.hist-group summary:hover { background:rgba(99,102,241,.08); }
.hist-chevron {
  font-size:0.55rem; color:var(--text-muted); transition:transform .2s;
  display:inline-block; width:12px; text-align:center;
}
.hist-group[open] > summary .hist-chevron { transform:rotate(90deg); }
.hist-group-label { font-weight:700; }
.hist-group-count {
  font-size:0.65rem; color:var(--text-muted);
}
.hist-group-badge {
  font-size:0.65rem; color:var(--accent-indigo); opacity:.7;
}
.hist-group-body { padding-left:16px; }

/* Year level */
.hist-year-summary { font-size:1rem; color:var(--text-primary); }
.hist-year-summary .hist-group-label { color:var(--accent-indigo); }

/* Month level */
.hist-month-summary { font-size:0.85rem; color:var(--text-primary); }

/* Day level */
.hist-day-summary { font-size:0.78rem; color:var(--text-secondary); }
.hist-day-summary .hist-group-label {
  min-width:20px; text-align:right;
}
/* Version level (inside day) */
.hist-version-summary { font-size:0.76rem; color:var(--text-secondary); padding:4px 12px; }
.hist-ver-label {
  font-weight:700; color:var(--accent-indigo); font-family:'SF Mono',monospace; font-size:0.74rem;
}
.hist-day-body { padding:6px 0 6px 20px; }
.hist-cat { margin-bottom:8px; }
.hist-cat:last-child { margin-bottom:0; }
.hist-cat h4 {
  font-size:0.68rem; text-transform:uppercase; letter-spacing:0.6px;
  margin:0 0 6px; font-weight:600;
}
.hist-cat ul { list-style:none; margin:0; padding:0; }
.hist-cat li {
  font-size:0.76rem; color:var(--text-secondary); padding:3px 0;
  display:flex; align-items:baseline; gap:6px;
}
.hist-icon {
  font-weight:700; font-size:0.7rem; flex-shrink:0; width:12px; text-align:center;
}
.hist-note {
  font-size:0.72rem; color:var(--text-muted); font-style:italic; margin:0 0 4px;
}
.hist-empty {
  text-align:center; padding:60px 20px; color:var(--text-muted); font-size:0.82rem;
}
.hist-toggle-btn {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:6px; padding:4px 12px; font-size:0.7rem;
  color:var(--accent-indigo); cursor:pointer; font-family:'SF Mono',monospace;
  transition:all .15s;
}
.hist-toggle-btn:hover { background:rgba(99,102,241,.12); border-color:var(--accent-indigo); }
.hist-section-toggle {
  background:none; border:none; cursor:pointer;
  color:var(--text-muted); font-size:0.55rem; padding:2px 6px;
  border-radius:4px; margin-left:auto; transition:all .15s;
  line-height:1; opacity:.6;
}
.hist-section-toggle:hover { opacity:1; background:rgba(99,102,241,.1); color:var(--accent-indigo); }

/* ─── CLINIC VIEW ────────────────────────────────── */
.clinic-tab-btn {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-bottom: none; border-radius: 6px 6px 0 0;
  padding: 6px 14px; font-size: 0.75rem;
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.clinic-tab-btn:hover { color: var(--text-primary); background: rgba(99,102,241,.08); }
.clinic-tab-btn.active { color: var(--accent-indigo); border-color: var(--accent-indigo); background: rgba(99,102,241,.1); }

/* ─── PATIENT FORM EXPANDED ──────────────────────── */
.pf-label {
  display: block; font-size: 0.72rem; color: var(--text-muted);
  margin-bottom: 2px; font-weight: 500;
}
.pf-input {
  width: 100%; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border-light); background: var(--glass-bg);
  color: var(--text-primary); font-size: 0.82rem; box-sizing: border-box;
  outline: none; transition: border-color .15s;
}
.pf-input:focus { border-color: var(--accent-indigo); }
.pf-input[readonly] { background: var(--bg-elevated); color: var(--text-secondary); cursor: default; }
textarea.pf-input { font-family: inherit; }
.patient-tab-panel { display: block; }
.condition-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(99,102,241,.12); border: 1px solid var(--accent-indigo);
  border-radius: 20px; padding: 2px 8px; font-size: 0.72rem; color: var(--accent-indigo);
}
.condition-chip button {
  background: none; border: none; cursor: pointer; color: var(--accent-indigo);
  font-size: 0.75rem; padding: 0; line-height: 1; opacity: .6;
}
.condition-chip button:hover { opacity: 1; }
.med-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 6px; font-size: 0.78rem;
}
.med-item-name { font-weight: 600; flex: 1; }
.med-item-info { color: var(--text-muted); font-size: 0.72rem; }

/* ─── BLOOD TEST FILE GRID ───────────────────────── */
.blood-files-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; margin-top: 8px; }
.blood-files-table th { text-align: left; padding: 4px 8px; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.blood-files-table td { padding: 5px 8px; border-bottom: 1px solid var(--glass-border); }
.blood-files-table tr:last-child td { border-bottom: none; }
.blood-files-table .bt-preview-btn { background: none; border: none; cursor: pointer; color: var(--accent-cyan); font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; }
.blood-files-table .bt-preview-btn:hover { background: rgba(6,182,212,.1); }

/* ─── FILE PREVIEW MODAL ─────────────────────────── */
.file-preview-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.8);
  display: flex; align-items: center; justify-content: center; z-index: 3000;
}
.file-preview-card {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: 12px; width: 90vw; max-width: 900px;
  height: 85vh; display: flex; flex-direction: column; overflow: hidden;
}
.file-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.file-preview-header h4 { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-preview-body { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-deepest); }
.file-preview-body iframe { width: 100%; height: 100%; border: none; }
.file-preview-body img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Toggle switch */
.toggle-switch input:checked + .toggle-track { background: var(--accent-indigo); }
.toggle-switch input:checked ~ .toggle-knob { transform: translateX(16px); }

/* Required field indicator */
.cf-req::after { content: ' *'; color: var(--accent-red, #ef4444); }

/* ═══════════════════════════════════════════════════════════
   SETTINGS MODAL
   ═══════════════════════════════════════════════════════════ */
.settings-modal-card {
  background: var(--bg-card);
  border-radius: 12px;
  width: 95%;
  max-width: 1100px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  overflow: hidden;
}
.settings-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.settings-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  padding: 0 16px;
}
.settings-tab {
  padding: 10px 20px;
  font-size: 0.78rem;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: color .15s, border-color .15s;
}
.settings-tab:hover { color: var(--text-primary); }
.settings-tab.active {
  color: var(--accent-indigo);
  border-bottom-color: var(--accent-indigo);
}
.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.settings-loading, .settings-error {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.settings-error { color: var(--accent-red, #ef4444); }

/* Sections */
.settings-section {
  margin-bottom: 24px;
}
.settings-section h4 {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.settings-field label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.settings-input {
  font-size: 0.85rem;
  color: var(--text-primary);
  padding: 8px 12px;
  background: var(--bg-tertiary, rgba(255,255,255,.04));
  border-radius: 6px;
  border: 1px solid var(--border-color);
  font-family: var(--font-mono);
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s;
}
.settings-input:focus { border-color: var(--accent-indigo); outline: none; }
.settings-save-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
.settings-save-row .settings-hint { margin: 0; }
.settings-value {
  font-size: 0.85rem;
  color: var(--text-primary);
  padding: 8px 12px;
  background: var(--bg-tertiary, rgba(255,255,255,.04));
  border-radius: 6px;
  border: 1px solid var(--border-color);
  font-family: var(--font-mono);
}
.settings-provider-badge {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
}
.settings-hint {
  margin: 16px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}
.status-ok { color: #22c55e; font-weight: 700; }
.status-err { color: #ef4444; font-weight: 700; }

/* App sub-tabs */
.settings-sub-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}
.settings-sub-tab {
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all .15s;
}
.settings-sub-tab:hover { color: var(--text-primary); background: rgba(255,255,255,.04); }
.settings-sub-tab.active {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: rgba(6,182,212,.08);
}

/* List headers */
.settings-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
.settings-list-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.settings-search {
  padding: 6px 10px;
  font-size: 0.78rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-mono);
  min-width: 180px;
}
.settings-add-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Tables */
.settings-table-wrap {
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
}
.settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.settings-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.settings-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--text-primary);
}
.settings-table tbody tr:hover {
  background: rgba(255,255,255,.03);
}
.btn-sm {
  padding: 5px 12px;
  font-size: 0.72rem;
  border-radius: 6px;
  border: 1px solid var(--accent-indigo);
  background: rgba(99,102,241,.12);
  color: var(--accent-indigo);
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.btn-sm:hover { background: rgba(99,102,241,.22); }
.btn-icon-sm {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 2px 6px;
}
.btn-icon-sm:hover { color: var(--text-primary); }

/* Training docs table */
.training-docs-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 10px;
}
.training-docs-search-input { max-width: 260px; }
.training-docs-count {
  color: var(--text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}
.training-docs-search-row .training-docs-save-config-btn { margin-left: auto; }
.training-docs-grid { width: 100%; }
.training-docs-grid th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.settings-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; display: inline-block; }
.settings-doc-ext { color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; }
.settings-doc-size { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }
.settings-doc-actions { display: flex; gap: 2px; }
.settings-doc-del { margin-left: 2px; }
.settings-training-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.settings-training-upload input[type="file"] {
  font-size: 0.8rem;
  color: var(--text-secondary);
  flex: 1;
}

/* Prompt template textarea */
.settings-prompt-textarea {
  width: 100%;
  min-height: 200px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  resize: vertical;
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
}
.btn-outline:hover { background: var(--bg-hover, rgba(255,255,255,0.05)); }

/* Training docs inline controls */
.doc-usage-select,
.doc-condition-add {
  font-size: 0.75rem;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text);
  max-width: 140px;
}

/* Condition chips (multi-select) */
.doc-cond-chips-wrap { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.doc-cond-chip {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 0.7rem; padding: 1px 6px; border-radius: 10px;
  background: var(--accent-indigo, #6366f1); color: #fff; white-space: nowrap;
}
.doc-cond-chip button {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: 0.8rem; padding: 0 1px; line-height: 1; opacity: 0.8;
}
.doc-cond-chip button:hover { opacity: 1; }
.doc-condition-add { font-size: 0.7rem; max-width: 100px; margin-top: 1px; }

/* Note cell (clickable) */
.doc-note-cell {
  cursor: pointer; font-size: 0.75rem; color: var(--text);
  padding: 2px 4px; border-radius: 4px; display: inline-block;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-note-cell:hover { background: var(--bg-hover, rgba(255,255,255,0.05)); }
.doc-note-empty { color: var(--text-muted); font-style: italic; }

/* Note edit modal */
.doc-note-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.6); display: none;
  align-items: center; justify-content: center;
}
.doc-note-modal-card {
  background: var(--bg-card, #1e1e2e); border-radius: 10px;
  padding: 20px; width: 480px; max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.doc-note-modal-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.doc-note-modal-header h3 {
  margin: 0; font-size: 0.95rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px;
}
.doc-note-modal-textarea {
  width: 100%; resize: vertical; min-height: 120px;
  font-size: 0.85rem; padding: 10px; border-radius: 6px;
  background: var(--bg-input, var(--bg-secondary)); color: var(--text);
  border: 1px solid var(--border); font-family: inherit;
}
.doc-note-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
}
.training-docs-config-save {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Chips (conditions / education) */
.settings-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.75rem;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.settings-system-badge {
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(99,102,241,.15);
  color: var(--accent-indigo);
  font-weight: 600;
  text-transform: uppercase;
}
.settings-chip-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
}
.settings-chip-del:hover { color: var(--accent-red, #ef4444); }

/* Recommendation inline edit inputs */
.settings-rec-input {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  background: var(--bg-input, var(--bg-card));
  color: var(--text-primary);
  font-size: 0.75rem;
  font-family: inherit;
}
.settings-rec-input:focus {
  outline: none;
  border-color: var(--accent-primary, #6366f1);
}
.settings-rec-order {
  width: 50px;
}

/* Permissions matrix */
.settings-perm-wrap {
  overflow: auto;
  max-height: 500px;
}
.settings-perm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.settings-perm-table th {
  padding: 8px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
  text-align: center;
}
.settings-perm-table th.perm-label-col { text-align: left; min-width: 200px; }
.settings-perm-table th.perm-role-col { min-width: 90px; }
.perm-group-row td {
  padding: 10px 10px 4px;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border-color);
  background: rgba(6,182,212,.04);
}
.perm-name {
  padding: 5px 10px;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.perm-desc {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.perm-check {
  text-align: center;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.perm-dirty { background: rgba(245,158,11,.08); }
.settings-perm-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════
   qSelect – Themed custom select
   ═══════════════════════════════════════════════════════════ */
.q-select {
  position: relative;
  display: inline-flex;
  width: 100%;
}
.q-select-native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important; height: 0 !important;
  overflow: hidden !important;
}
.q-select-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border-light); background: var(--glass-bg);
  color: var(--text-primary); font-size: 0.82rem;
  cursor: pointer; outline: none; transition: border-color .15s, background .15s;
  font-family: inherit; text-align: left; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-select-btn:hover { border-color: var(--accent-indigo); }
.q-select-btn:focus { border-color: var(--accent-indigo); box-shadow: 0 0 0 2px rgba(99,102,241,.15); }
.q-select.open .q-select-btn { border-color: var(--accent-indigo); }
.q-select-btn svg { flex-shrink: 0; color: var(--text-muted); transition: transform .2s; }
.q-select.open .q-select-btn svg { transform: rotate(180deg); }
.q-select-label { overflow: hidden; text-overflow: ellipsis; }
.q-select-placeholder { color: var(--text-muted); }

.q-select-dropdown {
  position: fixed; z-index: 99999;
  background: var(--bg-elevated); border: 1px solid var(--border-light);
  border-radius: 8px; padding: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.2);
  overflow-y: auto; overflow-x: hidden;
  animation: qsel-fade-in .12s ease-out;
}
@keyframes qsel-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.q-select-option {
  padding: 6px 10px; border-radius: 5px; cursor: pointer;
  font-size: inherit; color: var(--text-primary);
  transition: background .1s; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.q-select-option:hover, .q-select-option.focused {
  background: rgba(99,102,241,.15); color: var(--accent-indigo);
}
.q-select-option.selected {
  background: rgba(99,102,241,.1); color: var(--accent-indigo); font-weight: 600;
}
.q-select-option.selected::after { content: ' ✓'; opacity: .6; }
.q-select-option.disabled {
  color: var(--text-muted); cursor: default; opacity: .5;
}
.q-select-option.disabled:hover { background: none; color: var(--text-muted); }
.q-select-option.placeholder {
  color: var(--text-muted); font-style: italic;
}

/* Light theme adjustments */
[data-theme="light"] .q-select-dropdown {
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
}

/* Scrollbar in dropdown */
.q-select-dropdown::-webkit-scrollbar { width: 5px; }
.q-select-dropdown::-webkit-scrollbar-track { background: transparent; }
.q-select-dropdown::-webkit-scrollbar-thumb {
  background: var(--border-light); border-radius: 3px;
}
.q-select-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Size variants – inherit from context */
.uf-field .q-select-btn {
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border-color: var(--border);
  font-size: 0.78rem;
}
.settings-field .q-select-btn {
  font-size: 0.85rem; padding: 8px 12px;
  background: var(--bg-tertiary, rgba(255,255,255,.04));
  border-color: var(--border-color, var(--border-light));
  font-family: var(--font-mono);
}
.wavelet-toolbar .q-select { width: auto; }
.wavelet-toolbar .q-select-btn {
  padding: 4px 8px; border-radius: 4px; font-size: 0.8rem;
  background: var(--bg-secondary, var(--bg-elevated)); border-color: var(--border);
}
.import-tabs .q-select { width: auto; min-width: 180px; }
.import-tabs .q-select-btn {
  background: var(--bg-elevated); border-color: var(--border);
  font-family: var(--font-mono); font-size: 0.75rem;
  padding: 6px 14px; border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════
   CHAT WIDGET
   ═══════════════════════════════════════════════════════════ */

/* ── Bubble ─────────────────────────────────────────────── */
#chat-bubble {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-indigo); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(99,102,241,.4);
  transition: transform .15s, box-shadow .15s;
}
#chat-bubble:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(99,102,241,.55); }

.chat-dot {
  position: absolute; top: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--bg-deep);
}
.chat-dot.online { background: var(--accent-green); }
.chat-dot.offline { background: var(--text-muted); }

.chat-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; border-radius: 10px;
  background: var(--accent-red); color: #fff;
  font-size: 0.65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}

/* ── Panel ──────────────────────────────────────────────── */
#chat-panel {
  position: fixed; bottom: 88px; right: 24px; z-index: 9998;
  width: 360px; height: 520px;
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius); overflow: hidden;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  font-family: var(--font-mono);
}

/* ── Header ─────────────────────────────────────────────── */
.chat-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.chat-header-title { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.chat-status-label { font-size: 0.7rem; }
.chat-status-label.online { color: var(--accent-green); }
.chat-status-label.offline { color: var(--text-muted); }
.chat-header-actions { margin-left: auto; display: flex; gap: 4px; }

.chat-icon-btn {
  background: none; border: none; cursor: pointer; color: var(--text-secondary);
  padding: 4px; border-radius: 4px; display: flex; align-items: center;
}
.chat-icon-btn:hover { color: var(--text-primary); background: var(--glass-bg); }

/* ── Instruction banner ─────────────────────────────────── */
.chat-instruction {
  padding: 8px 14px; font-size: 0.68rem; color: var(--text-muted);
  background: var(--bg-elevated); border-bottom: 1px solid var(--border);
  line-height: 1.4;
}

/* ── Messages area ──────────────────────────────────────── */
.chat-messages {
  flex: 1; overflow-y: auto; padding: 12px; display: flex;
  flex-direction: column; gap: 8px;
}

.chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 10px; font-size: 0.78rem; line-height: 1.45; }
.chat-msg.user { align-self: flex-end; background: var(--accent-indigo); color: #fff; border-bottom-right-radius: 2px; }
.chat-msg.admin { align-self: flex-start; background: var(--bg-elevated); color: var(--text-primary); border-bottom-left-radius: 2px; border: 1px solid var(--border); }
.chat-msg.system { align-self: center; color: var(--text-muted); font-size: 0.7rem; font-style: italic; }

.chat-msg-text { white-space: pre-wrap; word-break: break-word; }
.chat-msg-image { margin-top: 6px; }
.chat-msg-image img { max-width: 100%; border-radius: 6px; cursor: pointer; }
.chat-msg-image-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }

.chat-msg-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 0.6rem; opacity: 0.7; }
.chat-msg.user .chat-msg-meta { justify-content: flex-end; }

/* ── Typing indicator ───────────────────────────────────── */
.chat-typing {
  padding: 4px 14px; font-size: 0.7rem; color: var(--accent-cyan);
  font-style: italic;
}

/* ── Image preview ──────────────────────────────────────── */
.chat-image-preview {
  padding: 6px 14px; align-items: center; gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.chat-image-preview img { height: 48px; border-radius: 4px; object-fit: cover; }
.chat-preview-remove {
  background: none; border: none; color: var(--accent-red); cursor: pointer;
  font-size: 1.2rem; padding: 0 4px; line-height: 1;
}

/* ── Input area ─────────────────────────────────────────── */
.chat-input-area {
  padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
#chat-input {
  width: 100%; resize: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-family: var(--font-mono); font-size: 0.78rem;
  background: var(--bg-card); color: var(--text-primary);
  outline: none;
}
#chat-input:focus { border-color: var(--accent-indigo); }

.chat-input-actions {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
}
.chat-send-hint { font-size: 0.6rem; color: var(--text-muted); flex: 1; text-align: right; }
.chat-send-btn {
  background: var(--accent-indigo); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.chat-send-btn:hover { background: #4f46e5; }

/* ── SA Chat Admin (sidebar view) ───────────────────────── */
.chat-admin-container {
  position: fixed; top: 0; left: 56px; right: 0; bottom: 0;
  background: var(--bg-deep); z-index: 800;
  display: none; font-family: var(--font-mono);
}

.chat-admin-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.chat-admin-header h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.chat-admin-back { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1rem; }

.chat-admin-layout {
  display: flex; height: calc(100% - 52px);
}

/* Conversation list */
.chat-admin-list {
  width: 320px; border-right: 1px solid var(--border);
  overflow-y: auto; background: var(--bg-card);
}
.chat-admin-list-header {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  display: flex; gap: 8px;
}
.chat-admin-search {
  flex: 1; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-elevated);
  color: var(--text-primary); font-family: var(--font-mono); font-size: 0.75rem;
  outline: none;
}
.chat-admin-filter {
  padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-elevated);
  color: var(--text-primary); font-family: var(--font-mono); font-size: 0.75rem;
  cursor: pointer; outline: none;
}

.chat-conv-item {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
}
.chat-conv-item:hover { background: var(--bg-elevated); }
.chat-conv-item.active { background: var(--bg-elevated); border-left: 3px solid var(--accent-indigo); }

.chat-conv-name { font-weight: 600; font-size: 0.8rem; color: var(--text-primary); }
.chat-conv-email { font-size: 0.68rem; color: var(--text-muted); }
.chat-conv-meta {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 0.65rem; color: var(--text-secondary);
}
.chat-conv-unread {
  background: var(--accent-red); color: #fff; border-radius: 10px;
  padding: 1px 6px; font-size: 0.6rem; font-weight: 700;
}

/* Detail pane */
.chat-admin-detail {
  flex: 1; display: flex; flex-direction: column;
}
.chat-admin-detail-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.85rem;
}

.chat-admin-detail-header {
  padding: 10px 16px; background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.chat-admin-detail-info {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.chat-admin-detail-name { font-weight: 600; font-size: 0.85rem; }
.chat-admin-detail-meta { font-size: 0.65rem; color: var(--text-muted); }

.chat-admin-detail-actions { display: flex; gap: 8px; }
.chat-admin-action-btn {
  padding: 5px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.7rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text-primary); transition: background .1s;
}
.chat-admin-action-btn:hover { background: var(--bg-card); }
.chat-admin-action-btn.danger { border-color: var(--accent-red); color: var(--accent-red); }

/* Messages in admin view */
.chat-admin-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 8px;
}

/* Admin reply area */
.chat-admin-reply {
  padding: 10px 14px; border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.chat-admin-reply textarea {
  width: 100%; resize: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-family: var(--font-mono); font-size: 0.78rem;
  background: var(--bg-elevated); color: var(--text-primary);
  outline: none;
}
.chat-admin-reply textarea:focus { border-color: var(--accent-indigo); }
.chat-admin-reply-actions {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
}

/* Client metadata panel */
.chat-admin-metadata {
  padding: 10px 16px; background: var(--bg-elevated);
  border-bottom: 1px solid var(--border); font-size: 0.68rem;
  color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.chat-admin-metadata span { display: flex; gap: 4px; }
.chat-admin-metadata strong { color: var(--text-secondary); }

/* ── Flatpickr dark theme overrides ─────────────────────── */
.flatpickr-calendar {
  font-family: var(--font-display, 'Outfit', sans-serif) !important;
  border-color: var(--glass-border) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5) !important;
}
.flatpickr-calendar.dark {
  background: var(--bg-card) !important;
  border-color: var(--glass-border) !important;
}
.flatpickr-calendar.dark .flatpickr-months .flatpickr-month,
.flatpickr-calendar.dark .flatpickr-weekdays,
.flatpickr-calendar.dark .flatpickr-weekday {
  background: var(--bg-card) !important;
  color: var(--text-muted) !important;
}
.flatpickr-calendar.dark .flatpickr-day {
  color: var(--text-primary) !important;
  border-radius: 6px !important;
}
.flatpickr-calendar.dark .flatpickr-day:hover {
  background: var(--glass-bg) !important;
  border-color: var(--accent-cyan) !important;
}
.flatpickr-calendar.dark .flatpickr-day.selected {
  background: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: #fff !important;
}
.flatpickr-calendar.dark .flatpickr-day.today {
  border-color: var(--accent-cyan) !important;
}
.flatpickr-calendar.dark .flatpickr-current-month input.cur-year,
.flatpickr-calendar.dark .flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--text-primary) !important;
}
/* altInput visible field styling */
input.flatpickr-input[readonly] {
  cursor: pointer;
}
input.flatpickr-alt-input, .flatpickr-input + input {
  background: var(--glass-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 6px !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: inherit !important;
  padding: inherit !important;
}