/* ============================================================================
   QUANTUM STARWORLD COMMAND CENTER — Dark-First Stylesheet v1.0.0
   ============================================================================
   Dark mode: black (#0a0e1a), midnight blue (#0d1321), graphite (#1a1f2e),
   silver (#8892a0), cyan accent (#00d4aa), violet accent (#7c5cbf)
   ============================================================================ */

:root {
  --bg-primary: #0a0e1a;
  --bg-secondary: #0d1321;
  --bg-tertiary: #1a1f2e;
  --bg-card: #151b2b;
  --bg-hover: #1e2640;
  --border: #2a3040;
  --border-light: #3a4560;
  --text-primary: #e8ecf4;
  --text-secondary: #8892a0;
  --text-muted: #5a6478;
  --accent-cyan: #00d4aa;
  --accent-cyan-dim: #00b894;
  --accent-violet: #7c5cbf;
  --accent-green: #00c853;
  --accent-red: #ff5252;
  --accent-amber: #ffab00;
  --accent-blue: #448aff;
  --shadow: rgba(0,0,0,0.4);
  --radius: 8px;
  --radius-sm: 4px;
  --sidebar-width: 260px;
  --topbar-height: 52px;
  --font-mono: 'SF Mono','Fira Code','Consolas',monospace;
  --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

[data-theme="light"] {
  --bg-primary: #f5f7fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef0f4;
  --bg-card: #ffffff;
  --bg-hover: #e8ecf2;
  --border: #d0d5dd;
  --border-light: #e0e4eb;
  --text-primary: #1a1f2e;
  --text-secondary: #5a6478;
  --text-muted: #8892a0;
  --shadow: rgba(0,0,0,0.08);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; font-family:var(--font-sans); background:var(--bg-primary); color:var(--text-primary); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--accent-cyan); text-decoration:none; }
code,pre { font-family:var(--font-mono); font-size:.9em; }

#app { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

#topbar { display:flex; align-items:center; justify-content:space-between; height:var(--topbar-height); background:var(--bg-secondary); border-bottom:1px solid var(--border); padding:0 16px; z-index:100; flex-shrink:0; }
.topbar-left { display:flex; align-items:center; gap:12px; }
.menu-btn { background:none; border:none; color:var(--text-primary); font-size:20px; cursor:pointer; padding:4px 8px; border-radius:var(--radius-sm); display:none; }
.menu-btn:hover { background:var(--bg-hover); }
.topbar-brand { font-weight:700; font-size:15px; letter-spacing:.5px; background:linear-gradient(135deg,var(--accent-cyan),var(--accent-violet)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.topbar-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.5px; background:var(--accent-amber); color:#000; }
.topbar-badge.ready { background:var(--accent-green); color:#000; }
.topbar-badge.blocked { background:var(--accent-red); color:#fff; }
.topbar-time { font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); padding:4px 12px; background:var(--bg-tertiary); border-radius:var(--radius-sm); }
.topbar-right { display:flex; align-items:center; gap:8px; }
.icon-btn { background:none; border:1px solid var(--border); color:var(--text-secondary); cursor:pointer; padding:4px 10px; border-radius:var(--radius-sm); font-size:14px; }
.icon-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
.topbar-role { font-size:11px; font-weight:600; text-transform:uppercase; padding:3px 10px; border-radius:var(--radius-sm); background:var(--bg-tertiary); color:var(--text-secondary); letter-spacing:.5px; }

.sidebar { position:fixed; top:var(--topbar-height); left:0; width:var(--sidebar-width); height:calc(100vh - var(--topbar-height)); background:var(--bg-secondary); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:90; transition:transform .2s ease; overflow-y:auto; }
.sidebar-header { display:flex; flex-direction:column; padding:16px 16px 8px; border-bottom:1px solid var(--border); }
.sidebar-brand { font-size:12px; font-weight:700; letter-spacing:1px; color:var(--text-secondary); text-transform:uppercase; }
.sidebar-version { font-size:10px; color:var(--text-muted); font-family:var(--font-mono); }
.sidebar-search { padding:8px 12px; }
.nav-search-input { width:100%; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-tertiary); color:var(--text-primary); font-size:12px; outline:none; }
.nav-search-input:focus { border-color:var(--accent-cyan); }
.nav-list { list-style:none; padding:4px 0; flex:1; }
.nav-item { display:flex; align-items:center; gap:10px; padding:8px 16px; cursor:pointer; font-size:13px; color:var(--text-secondary); transition:all .15s ease; border-left:3px solid transparent; }
.nav-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.nav-item.active { color:var(--accent-cyan); background:rgba(0,212,170,.08); border-left-color:var(--accent-cyan); font-weight:600; }
.nav-icon { font-size:15px; width:20px; text-align:center; flex-shrink:0; }
.sidebar-footer { padding:12px 16px; border-top:1px solid var(--border); text-align:center; }
.motto { font-size:11px; font-weight:600; letter-spacing:1px; color:var(--text-muted); text-transform:uppercase; }

.main-content { margin-left:var(--sidebar-width); margin-top:var(--topbar-height); height:calc(100vh - var(--topbar-height)); overflow-y:auto; padding:24px; flex:1; }
.view-container { max-width:1400px; margin:0 auto; }

.loading-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 20px; gap:16px; color:var(--text-muted); }
.loader { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent-cyan); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.view-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:8px; }
.view-title { font-size:22px; font-weight:700; display:flex; align-items:center; gap:10px; }
.view-subtitle { font-size:13px; color:var(--text-muted); margin-top:2px; }
.view-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.card:hover { box-shadow:0 2px 12px var(--shadow); }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:8px; }
.card-title { font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; }
.card-subtitle { font-size:12px; color:var(--text-muted); }
.card-body { font-size:13px; color:var(--text-secondary); line-height:1.6; }
.card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); font-size:12px; color:var(--text-muted); }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:24px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; text-align:center; }
.stat-value { font-size:28px; font-weight:700; font-family:var(--font-mono); line-height:1.2; }
.stat-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; }
.stat-value.positive { color:var(--accent-green); }
.stat-value.negative { color:var(--accent-red); }
.stat-value.warning { color:var(--accent-amber); }
.stat-value.info { color:var(--accent-cyan); }

.table-container { overflow-x:auto; margin-bottom:16px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { text-align:left; padding:10px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); border-bottom:2px solid var(--border); white-space:nowrap; background:var(--bg-tertiary); }
tbody td { padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:hover { background:var(--bg-hover); }

.badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.badge-demo { background:#3a2a00; color:#ffab00; border:1px solid #5a4000; }
.badge-current { background:rgba(0,200,83,.15); color:var(--accent-green); }
.badge-partial { background:rgba(255,171,0,.15); color:var(--accent-amber); }
.badge-blocked { background:rgba(255,82,82,.15); color:var(--accent-red); }
.badge-pending { background:rgba(68,138,255,.15); color:var(--accent-blue); }
.badge-pass { background:rgba(0,200,83,.15); color:var(--accent-green); }
.badge-fail { background:rgba(255,82,82,.15); color:var(--accent-red); }
.badge-unknown { background:rgba(255,171,0,.15); color:var(--accent-amber); }
.badge-gate { font-size:8px; padding:1px 6px; }

.btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; background:var(--bg-tertiary); color:var(--text-primary); white-space:nowrap; }
.btn:hover { background:var(--bg-hover); border-color:var(--border-light); }
.btn-primary { background:var(--accent-cyan); border-color:var(--accent-cyan); color:#000; }
.btn-primary:hover { background:var(--accent-cyan-dim); }
.btn-danger { background:var(--accent-red); border-color:var(--accent-red); color:#fff; }
.btn-danger:hover { opacity:.85; }
.btn-ghost { background:transparent; border-color:transparent; color:var(--text-secondary); }
.btn-ghost:hover { background:var(--bg-hover); color:var(--text-primary); }
.btn-sm { padding:3px 10px; font-size:11px; }
.btn:disabled { opacity:.4; cursor:not-allowed; }

.filters-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; padding:12px; background:var(--bg-tertiary); border-radius:var(--radius); border:1px solid var(--border); }
.filter-group { display:flex; align-items:center; gap:4px; }
.filter-group label { font-size:11px; color:var(--text-muted); text-transform:uppercase; font-weight:600; }
select,input[type="text"],input[type="date"] { padding:5px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-primary); color:var(--text-primary); font-size:12px; outline:none; }
select:focus,input:focus { border-color:var(--accent-cyan); }

.gate-progress { display:flex; gap:2px; margin:12px 0; flex-wrap:wrap; }
.gate-step { width:20px; height:6px; border-radius:3px; background:var(--bg-tertiary); flex-shrink:0; }
.gate-step.pass { background:var(--accent-green); }
.gate-step.fail { background:var(--accent-red); }
.gate-step.unknown { background:var(--accent-amber); }
.gate-step.na { background:var(--text-muted); opacity:.3; }

.flex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.flex-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; flex-shrink:0; }
.status-dot.scheduled { background:var(--accent-blue); }
.status-dot.pregame { background:var(--accent-cyan); }
.status-dot.live { background:var(--accent-green); }
.status-dot.final { background:var(--text-muted); }
.status-dot.postponed { background:var(--accent-amber); }
.status-dot.canceled { background:var(--accent-red); }

.toast-container { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:1000; }
.toast { padding:12px 16px; border-radius:var(--radius); font-size:13px; font-weight:500; min-width:250px; max-width:400px; animation:slideIn .3s ease; box-shadow:0 4px 16px var(--shadow); display:flex; align-items:center; gap:8px; }
.toast-success { background:#1b5e20; color:#c8e6c9; border-left:4px solid var(--accent-green); }
.toast-error { background:#b71c1c; color:#ffcdd2; border-left:4px solid var(--accent-red); }
.toast-info { background:#1a237e; color:#c5cae9; border-left:4px solid var(--accent-blue); }
.toast-warning { background:#e65100; color:#ffe0b2; border-left:4px solid var(--accent-amber); }
@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }

.demo-banner { background:linear-gradient(135deg,#3a2a00,#2a1a00); border:1px solid #5a4000; color:#ffd54f; padding:10px 16px; border-radius:var(--radius); font-size:12px; font-weight:600; margin-bottom:16px; display:flex; align-items:center; gap:8px; }

.empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); }
.empty-state-icon { font-size:40px; margin-bottom:12px; }
.empty-state-title { font-size:16px; font-weight:600; margin-bottom:4px; color:var(--text-secondary); }

.section-title { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin:24px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border); }

.candidate-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); gap:8px; flex-wrap:wrap; }
.candidate-row:last-child { border-bottom:none; }
.candidate-info { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.candidate-thesis { font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.candidate-actions { display:flex; gap:4px; flex-shrink:0; }

.gate-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:6px; margin:8px 0; }
.gate-item { padding:6px 10px; border-radius:var(--radius-sm); font-size:11px; display:flex; justify-content:space-between; align-items:center; border:1px solid var(--border); background:var(--bg-tertiary); }

.deck-alert { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--radius-sm); font-size:12px; margin-bottom:4px; }
.deck-alert.critical { background:rgba(255,82,82,.1); border-left:3px solid var(--accent-red); }
.deck-alert.warning { background:rgba(255,171,0,.1); border-left:3px solid var(--accent-amber); }

@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .menu-btn { display:block; }
  .main-content { margin-left:0; padding:16px; }
  .flex-grid,.flex-grid-2 { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .view-header { flex-direction:column; align-items:flex-start; }
  .topbar-brand { font-size:13px; }
  .topbar-time { display:none; }
}
@media (max-width:480px) { .stats-grid { grid-template-columns:1fr 1fr; } }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }