*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0f1117; --bg-surface: #1a1d27; --bg-surface-2: #222535; --bg-surface-3: #2a2e42; --border: #2e3248; --text: #e2e4ed; --text-muted: #8a8fa8; --text-dim: #5a5f77; --accent: #6366f1; --accent-hover: #4f52d9; --accent-dim: rgba(99, 102, 241, 0.15); --green: #22c55e; --blue: #3b82f6; --yellow: #eab308; --red: #ef4444; --radius: 8px; --radius-sm: 4px; --sidebar-width: 260px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } html, body, #app { height: 100%; width: 100%; overflow: hidden; } /* ── Layout ────────────────────────────────────────────── */ .layout { display: flex; height: 100vh; overflow: hidden; } .main-content { flex: 1; overflow-y: auto; padding: 32px; } /* ── Shared content areas ───────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--text-muted); text-align: center; } .empty-state h2 { font-size: 24px; font-weight: 700; color: var(--text); } /* ── Buttons ────────────────────────────────────────────── */ .btn-primary { padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary.btn-sm { padding: 6px 14px; font-size: 13px; } .btn-secondary { padding: 10px 20px; background: var(--bg-surface-2); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s; } .btn-secondary:hover:not(:disabled) { background: var(--bg-surface-3); }