@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;450;500;550;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── LIGHT THEME ────────────────────────────────── */
:root {
  --bg:             #f5f5f7;
  --bg-2:           #ebebed;
  --surface:        #ffffff;
  --surface-2:      #f9f9fb;
  --surface-raised: #ffffff;
  --glass:          rgba(255,255,255,0.85);
  --overlay:        rgba(0,0,0,0.28);
  --border:         rgba(0,0,0,0.07);
  --border-med:     rgba(0,0,0,0.11);
  --border-strong:  rgba(0,0,0,0.16);
  --text-1:         #1d1d1f;
  --text-2:         #6e6e73;
  --text-3:         #b0b0b8;
  --text-inv:       #ffffff;
  --accent:         #0071e3;
  --accent-2:       #0060c0;
  --accent-bg:      rgba(0,113,227,0.08);
  --green:          #1a9c3e;
  --green-bg:       rgba(26,156,62,0.10);
  --amber:          #c8780a;
  --amber-bg:       rgba(200,120,10,0.10);
  --red:            #d70015;
  --red-bg:         rgba(215,0,21,0.08);
  --purple:         #6636d6;
  --purple-bg:      rgba(102,54,214,0.09);
  --pink:           #c2185b;
  --pink-bg:        rgba(194,24,91,0.09);
  --orange:         #bf5000;
  --orange-bg:      rgba(191,80,0,0.10);
  --agent-ceo:      #1d1d1f;
  --agent-cfo:      #1a9c3e;
  --agent-sales:    #0071e3;
  --agent-support:  #bf5000;
  --agent-research: #6636d6;
  --agent-mktg:     #c2185b;
  --agent-legal:    #78540a;
  --agent-tech:     #007a7a;
  --cyan-bg:        rgba(0,160,160,.08);
  --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 22px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 12px rgba(0,0,0,0.07),0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.10),0 4px 10px rgba(0,0,0,0.06);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.14),0 8px 20px rgba(0,0,0,0.07);
  --ease:        cubic-bezier(0.25,0.46,0.45,0.94);
  --spring:      cubic-bezier(0.34,1.4,0.64,1);
  --t1: 0.10s; --t2: 0.18s; --t3: 0.30s;
  --sidebar-w: 216px;
  --topbar-h:  50px;
  --panel-w:   288px;
  --shortcut-h: 32px;
}

/* ── DARK THEME ─────────────────────────────────── */
[data-theme="dark"] {
  --bg:             #0c0c0e;
  --bg-2:           #141416;
  --surface:        #18181c;
  --surface-2:      #1e1e22;
  --surface-raised: #232328;
  --glass:          rgba(18,18,22,0.90);
  --overlay:        rgba(0,0,0,0.65);
  --border:         rgba(255,255,255,0.06);
  --border-med:     rgba(255,255,255,0.09);
  --border-strong:  rgba(255,255,255,0.14);
  --text-1:         #f2f2f5;
  --text-2:         #8a8a96;
  --text-3:         #46464f;
  --text-inv:       #0c0c0e;
  --accent:         #3b8ff0;
  --accent-2:       #2a7edf;
  --accent-bg:      rgba(59,143,240,0.12);
  --green:          #32c05a;
  --green-bg:       rgba(50,192,90,0.12);
  --amber:          #f0a020;
  --amber-bg:       rgba(240,160,32,0.12);
  --red:            #f04050;
  --red-bg:         rgba(240,64,80,0.12);
  --purple:         #9b6bf0;
  --purple-bg:      rgba(155,107,240,0.14);
  --pink:           #f06090;
  --pink-bg:        rgba(240,96,144,0.12);
  --orange:         #f07030;
  --orange-bg:      rgba(240,112,48,0.12);
  --agent-ceo:      #f2f2f5;
  --agent-cfo:      #32c05a;
  --agent-sales:    #3b8ff0;
  --agent-support:  #f07030;
  --agent-research: #9b6bf0;
  --agent-mktg:     #f06090;
  --agent-legal:    #f0a020;
  --agent-tech:     #00bfbf;
  --cyan-bg:        rgba(0,200,200,.10);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35),0 1px 2px rgba(0,0,0,0.25);
  --shadow:    0 4px 12px rgba(0,0,0,0.45),0 1px 3px rgba(0,0,0,0.30);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.55),0 4px 10px rgba(0,0,0,0.35);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.70),0 8px 20px rgba(0,0,0,0.45);
}

/* ── RESET ──────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; height:100%; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  background:var(--bg); color:var(--text-1);
  height:100vh; overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--t3),color var(--t3);
}
button,input,textarea,select { font-family:inherit; }
a { text-decoration:none; color:inherit; }
svg { flex-shrink:0; }

/* ── TOPBAR ─────────────────────────────────────── */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:var(--topbar-h);
  background:var(--glass);
  backdrop-filter:saturate(200%) blur(28px);
  -webkit-backdrop-filter:saturate(200%) blur(28px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 14px;
  transition:background var(--t3);
}
.topbar-left,.topbar-right { display:flex; align-items:center; gap:8px; }
.brand-mark {
  width:26px; height:26px; border-radius:7px;
  background:var(--text-1); color:var(--text-inv);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; letter-spacing:-0.3px;
  flex-shrink:0; transition:background var(--t3),color var(--t3);
}
.brand-name {
  font-size:13.5px; font-weight:600; letter-spacing:-0.3px;
  color:var(--text-1);
}
.brand-name span { color:var(--text-2); font-weight:400; }
.mobile-menu-btn { display:none; }

/* ── SHELL ──────────────────────────────────────── */
.shell {
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr var(--panel-w);
  height:100vh;
  padding-top:var(--topbar-h);
  padding-bottom:var(--shortcut-h);
}

/* ── SIDEBAR ─────────────────────────────────────── */
.sidebar {
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  padding:10px 0 0;
  transition:background var(--t3),transform var(--t2);
}
.sidebar-section { padding:4px 0; }
.sidebar-sep { height:1px; background:var(--border); margin:6px 12px; }
.sidebar-label {
  padding:8px 14px 4px;
  font-size:10px; font-weight:600;
  letter-spacing:0.8px; text-transform:uppercase;
  color:var(--text-3);
}
.sidebar-footer {
  margin-top:auto; padding:12px 14px;
  border-top:1px solid var(--border);
}
.shortcut-hint {
  display:flex; gap:4px; flex-wrap:wrap;
}
.shortcut-hint kbd {
  background:var(--surface-2); border:1px solid var(--border-med);
  border-radius:4px; padding:1px 5px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px; color:var(--text-3);
}

/* ── MAIN ───────────────────────────────────────── */
.main {
  overflow-y:auto; overflow-x:hidden;
  padding:20px 20px 24px;
  display:flex; flex-direction:column; gap:14px;
  scroll-behavior:smooth;
}

/* ── LIVE PANEL ─────────────────────────────────── */
.live-panel {
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:background var(--t3);
}

/* ── PAGES ──────────────────────────────────────── */
.page { display:none; }
.page.active {
  display:flex; flex-direction:column; gap:14px;
  animation:pageIn var(--t2) var(--ease) both;
}
@keyframes pageIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.page-header { margin-bottom:0; }
.page-title { font-size:19px; font-weight:700; letter-spacing:-0.5px; color:var(--text-1); }
.page-sub   { font-size:12.5px; color:var(--text-2); margin-top:2px; }

/* ── SCROLLBAR ──────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }

/* ── SHORTCUT BAR ───────────────────────────────── */
.shortcut-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  height:var(--shortcut-h);
  background:var(--glass);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  display:flex; align-items:center;
  gap:14px; padding:0 16px;
  overflow-x:auto;
}
.shortcut-bar span {
  display:flex; align-items:center; gap:4px;
  font-size:11px; color:var(--text-3); white-space:nowrap;
}
.shortcut-bar kbd {
  background:var(--surface-2); border:1px solid var(--border-med);
  border-radius:4px; padding:1px 5px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; color:var(--text-2);
}

/* ── SIDEBAR OVERLAY (mobile) ───────────────────── */
.sidebar-overlay {
  display:none; position:fixed; inset:0; z-index:150;
  background:var(--overlay);
  backdrop-filter:blur(4px);
}
.sidebar-overlay.show { display:block; }

/* ── MOBILE ─────────────────────────────────────── */
@media (max-width:900px) {
  .shell { grid-template-columns:1fr; padding-bottom:var(--shortcut-h); }
  .live-panel { display:none; }
  .sidebar {
    position:fixed; top:var(--topbar-h); left:0; bottom:0;
    width:240px; z-index:200;
    transform:translateX(-100%);
    box-shadow:var(--shadow-xl);
  }
  .sidebar.open { transform:translateX(0); }
  .mobile-menu-btn { display:flex !important; }
  .shortcut-bar { display:none; }
  .main { padding:14px 14px 20px; gap:12px; }
  .stats-row { grid-template-columns:1fr 1fr; gap:8px; }
  .agents-grid { grid-template-columns:1fr 1fr !important; }
  .agent-selector { gap:4px; flex-wrap:wrap; }
}
@media (max-width:500px) {
  .agents-grid { grid-template-columns:1fr !important; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .page-title { font-size:17px; }
}