*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-base: #0c0d0f;
  --bg-surface: #141519;
  --bg-elevated: #1a1b21;
  --bg-hover: #22232b;
  --border: #2a2b35;
  --border-subtle: #1e1f27;
  --text-primary: #e8e9ed;
  --text-secondary: #8b8d9a;
  --text-tertiary: #7a7c88;
  --accent: #4f8ff7;
  --accent-dim: #2a4a7a;
  --status-completed: #34d399;
  --status-completed-bg: rgba(52,211,153,0.1);
  --status-waiting: #fbbf24;
  --status-waiting-bg: rgba(251,191,36,0.1);
  --status-in-progress: #60a5fa;
  --status-in-progress-bg: rgba(96,165,250,0.1);
  --status-pending: #6b7280;
  --status-pending-bg: rgba(107,114,128,0.1);
  --status-failed: #f87171;
  --status-failed-bg: rgba(248,113,113,0.1);
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --sidebar-w: 240px;
  --panel-w: 480px;
  --radius: 8px;
  --radius-sm: 5px;
}

html, body { height: 100%; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* Grain overlay */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Focus visible outline for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }