/* ── Variables ── */
:root {
  --bg: #0a0a0f;
  --bg-panel: #12121a;
  --bg-card: #1a1a26;
  --bg-hover: #22222e;
  --border: #2a2a3a;
  --text: #e0e0e8;
  --text-dim: #888898;
  --text-muted: #555568;
  --accent: #7c5cff;
  --green: #00ff88;
  --blue: #00aaff;
  --pink: #ff88ff;
  --orange: #ffaa00;
  --red: #ff6666;
  --cyan: #88ffff;
  --glass: rgba(255,255,255,0.03);
  --glass-b: rgba(255,255,255,0.06);
  --glass-hover: rgba(255,255,255,0.08);
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --block-header: 32px;
  --sidebar-w: 48px;
  --statusbar-h: 36px;
}

/* ── Reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

::selection { background: rgba(255,255,255,0.15); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Animations ── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes typingBounce { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.muted { font-size: 11px; color: var(--text-muted); }