:root {
  color-scheme: dark;
  --bg: #070708;
  --panel: #101011;
  --panel2: #19191b;
  --line: #28282b;
  --text: #f4f1e9;
  --muted: #918e84;
  --orange: #ff792e;
  --admin-bg: #070708;
  --admin-surface: #101011;
  --admin-surface-hover: #19191b;
  --admin-border: #28282b;
  --admin-border-strong: #414145;
  --admin-text: #f4f1e9;
  --admin-muted: #b9b5aa;
}

html, body, .screen, .layout, .main { background: var(--bg) !important; }
body { color: var(--text); font-family: "Segoe UI Variable", "Aptos", "Helvetica Neue", Arial, sans-serif; }
.sidebar { background: #0b0b0c !important; border-color: var(--line) !important; }
.sidebar nav { background: transparent; border-color: var(--line); }
.sidebar .nav { color: var(--text) !important; font-weight: 800; }
.sidebar .nav:hover { background: var(--panel) !important; color: #ffffff !important; border-color: var(--line) !important; }
.sidebar .nav.active { background: var(--panel) !important; color: var(--orange) !important; border-color: var(--line) !important; box-shadow: inset 3px 0 0 var(--orange); }
.brand { color: var(--text); }
.mark { background: var(--orange) !important; color: #24110b !important; }
.eyebrow { color: var(--orange) !important; }
.topbar { border-color: var(--line) !important; }
.topbar h2 { color: var(--text); }
.panel, .metric, .login-card, .detail-card { background: var(--panel) !important; border-color: var(--line) !important; }
.metric:hover { background: #19191b !important; border-color: #414145 !important; }
.metric span, .metric small, .sub, .sidebar-foot { color: var(--admin-muted) !important; }
.metric strong, .stat-row b, .rank-row > b { color: var(--text) !important; }
.primary { background: var(--orange) !important; border-color: var(--orange) !important; color: #24110b !important; box-shadow: 0 6px 22px rgb(255 121 46 / .12); }
.primary:hover { background: #ff8c4b !important; border-color: #ff8c4b !important; }
.button, .controls select, .filters select, select, .date-control, .search, .login-card input {
  background-color: #101011 !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.button:hover, .controls select:hover, .filters select:hover, select:hover, .date-control:hover { background-color: #19191b !important; border-color: #414145 !important; }
.search::placeholder { color: var(--admin-muted); }
.menu-trigger, .menu-popover { background-color: var(--panel); color: var(--text); border-color: #414145; }
.menu-trigger:hover, .menu-control.is-open .menu-trigger { border-color: var(--orange); box-shadow: 0 0 0 3px rgb(255 121 46 / .08); }
.menu-option { color: var(--text); }
.menu-option:hover, .menu-option.selected { background-color: #1c120c; color: var(--orange); }
.menu-option.selected { box-shadow: inset 2px 0 0 var(--orange); }
.bar-fill, .chart-bar { background: var(--orange) !important; }
.bar-bg { background-color: var(--line); }
.table th { background-color: var(--panel) !important; color: var(--admin-muted); border-color: var(--line); }
.table td { border-color: var(--line); }
.table tr:hover td { background-color: #19191b; }
.notice { background: #101011 !important; border-color: var(--line) !important; color: var(--admin-muted) !important; }
.person-cell b { color: var(--text); }
.person-cell small { color: var(--admin-muted); }
.menu-trigger:focus-visible, .menu-option:focus-visible, .button:focus-visible, .controls select:focus-visible, .search:focus-visible, .nav:focus-visible, .primary:focus-visible, input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
#content.is-loading::before { background-image: linear-gradient(90deg, transparent, var(--orange), transparent); }

@media (prefers-reduced-motion: reduce) {
  .nav, .button, .primary { transition: none; }
}