:root {
  color-scheme:dark;
  --bg:#05070a; --sidebar:#030508; --surface:#090d12; --surface-2:#121922;
  --line:#293543; --text:#e8eef4; --muted:#a0adbd;
  --input:#0a0f15; --control-border:#63758d; --hover:#182332;
  --accent:#8c6dff; --accent-bright:#b5a0ff; --accent-soft:#211c37;
  --accent-button:#7956ef; --accent-hover:#8764f4; --accent-border:#ad92ff;
  --on-accent:#fff; --focus:#b5a0ff; --focus-ring:#8c6dff30;
  --green:#7ceab0; --green-soft:#153026; --amber:#f3c46a; --amber-soft:#342b1f;
  --danger:#ff9299; --danger-soft:#34212a; --danger-border:#a56174;
  --neutral-soft:#1c2530; --disabled:#171f29; --disabled-text:#9faaba;
  --shadow:#0008; --backdrop:#03050aca;
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#fafbfd; --sidebar:#eaf0f7; --surface:#fff; --surface-2:#f0f4f8;
  --line:#bdc9d5; --text:#192535; --muted:#516276;
  --input:#fff; --control-border:#7c90a7; --hover:#e5ecf4;
  --accent:#6943c3; --accent-bright:#6338b4; --accent-soft:#eee8fa;
  --accent-button:#6943c3; --accent-hover:#5632a6; --accent-border:#6338b4;
  --on-accent:#fff; --focus:#6338b4; --focus-ring:#6943c324;
  --green:#17633b; --green-soft:#e2f4e9; --amber:#814400; --amber-soft:#fff0d8;
  --danger:#a82339; --danger-soft:#fbe8ec; --danger-border:#bc6271;
  --neutral-soft:#e9eff6; --disabled:#e9edf2; --disabled-text:#657284;
  --shadow:#263d5926; --backdrop:#1925358f;
}


button,.button { border-color:var(--control-border); }
button:hover:not(:disabled),.button:hover { background:var(--hover); border-color:var(--control-border); }
button:disabled { background:var(--disabled); border-color:var(--line); color:var(--disabled-text); }
.primary { background:var(--accent-button); border-color:var(--accent-border); color:var(--on-accent); box-shadow:0 4px 15px -8px var(--accent); }
.primary:hover:not(:disabled) { background:var(--accent-hover); border-color:var(--accent-border); }
.ghost { color:var(--text); }
.danger,.validity-error { color:var(--danger); background:var(--danger-soft); border-color:var(--danger-border); }
.danger:hover:not(:disabled) { color:var(--danger); background:var(--danger-soft); border-color:var(--danger); }
input,textarea,select,.select-trigger { background:var(--input); border-color:var(--control-border); color:var(--text); }
input::placeholder,textarea::placeholder { color:var(--muted); }
input:hover,textarea:hover,select:hover,.select-trigger:hover:not(:disabled) { background:var(--input); border-color:var(--muted); }
input:focus,textarea:focus,select:focus,.select-trigger[aria-expanded="true"],.select-trigger:focus-visible { border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); }
button:focus-visible,a:focus-visible { outline-color:var(--focus); }
#validity-days[aria-invalid="true"],.select-trigger[aria-invalid="true"] { border-color:var(--danger); }
select option,.select-options { color:var(--text); background:var(--surface); }
.select-options { border-color:var(--control-border); box-shadow:0 12px 30px var(--shadow); }
select option:checked,.select-option[aria-selected="true"] { background:var(--accent-button); border-color:var(--accent-border); color:var(--on-accent); }
.select-option.active:not([aria-selected="true"]):not([aria-disabled="true"]),.select-option:hover:not([aria-selected="true"]):not([aria-disabled="true"]) { background:var(--accent-soft); border-color:var(--focus); color:var(--text); }
.select-option[aria-selected="true"].active,.select-option[aria-selected="true"]:hover:not([aria-disabled="true"]) { background:var(--accent-hover); border-color:var(--focus); }
.select-option[aria-disabled="true"] { color:var(--disabled-text); }
::selection,input::selection,textarea::selection { background:var(--accent-button); color:var(--on-accent); }
::-webkit-scrollbar-thumb { background:var(--control-border); }
label,dd,td:first-child,.activity-list strong { color:var(--text); }
.text-link:hover { color:var(--accent-bright); }
.skip-link { background:var(--accent-button); color:var(--on-accent); }


.sidebar-brand small,.nav-label,.nav-item,.system-pill,.stat-top p,.access-legend p,
.activity-list time,dt,footer,.authenticated footer,.footer-separator,
.login-intro>p:not(.eyebrow),.login-decoration,.page-breadcrumb span { color:var(--muted); }
.page-breadcrumb strong { color:var(--text); }
.nav-item:hover { background:var(--hover); color:var(--text); }
.nav-item.active { background:var(--accent-soft); border-color:var(--line); color:var(--accent-bright); }
.nav-badge { color:var(--text); border-color:var(--line); background:var(--surface-2); }
.avatar,.user-avatar,.help-icon,.feature-number,.login-icon,.validity-dates { border-color:var(--line); }
.user-avatar,.feature-number,.preview-label { color:var(--accent-bright); }
.feature-number,.activity-mark,.note { background:var(--accent-soft); }
.note { color:var(--text); }
.connection-badge { color:var(--accent-bright); background:var(--accent-soft); border-color:var(--accent-border); }
.stat-icon.green,.badge.ok { color:var(--green); background:var(--green-soft); }
.stat-icon.amber,.badge.warn { color:var(--amber); background:var(--amber-soft); }
.badge { color:var(--text); }
.badge.bad { color:var(--danger); background:var(--danger-soft); }
.badge.neutral { color:var(--muted); background:var(--neutral-soft); border-color:var(--line); }
.chart-bar-track { border-color:var(--line); }
.chart-bar { background:linear-gradient(var(--accent-bright),var(--accent-button)); border-color:var(--accent-border); }
.chart-bar.zero { background:var(--neutral-soft); border-color:var(--control-border); }
.chart-count { color:var(--text); }
.access-ring { background:conic-gradient(var(--accent) var(--percentage),var(--neutral-soft) 0); }
.legend-dot { background:var(--control-border); }
.legend-dot.active { background:var(--accent); }
th { background:var(--surface-2); color:var(--muted); }
td { color:var(--text); border-color:var(--line); }
tbody tr:hover { background:var(--hover); }
.empty-state { color:var(--muted)!important; }
.search-field svg { stroke:var(--muted); }
.generation-preview { background:var(--surface-2); border-color:var(--control-border); }
#new-key { color:var(--accent-bright); background:var(--accent-soft); }
.login-intro h1 span { color:var(--accent-bright); }
.login-card { background:var(--surface); border-color:var(--line); box-shadow:0 20px 80px -35px var(--shadow); }
#status { color:var(--text); background:var(--accent-soft); border-color:var(--accent-border); box-shadow:0 10px 35px var(--shadow); }
dialog { border-color:var(--control-border); box-shadow:0 25px 90px var(--shadow); }
dialog::backdrop { background:var(--backdrop); }
.password-reset { background:var(--surface-2); border-color:var(--line); }


.theme-picker { display:flex; flex:none; align-items:center; gap:3px; width:100%; min-width:0; height:36px; margin:0; padding:3px; border:1px solid var(--control-border); border-radius:7px; background:var(--surface-2); }
.theme-picker label { display:flex; flex:1; align-items:center; justify-content:center; gap:5px; height:28px; min-width:0; margin:0; padding:0 4px; border:1px solid transparent; border-radius:4px; color:var(--muted); font-size:11px; line-height:1; font-weight:600; cursor:pointer; }
.theme-picker label:hover { background:var(--hover); color:var(--text); }
.theme-picker input:checked+label { color:var(--accent-bright); background:var(--accent-soft); border-color:var(--accent-border); }
.theme-picker input:focus-visible+label { outline:2px solid var(--focus); outline-offset:3px; }
.theme-picker svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body:not(.authenticated) .topbar-controls { display:grid; grid-template-columns:148px; flex:none; }
@media (min-width:1031px) and (max-width:1280px) {
  .authenticated .topbar { flex-wrap:wrap; gap:10px; padding-block:12px; }
  .authenticated .topbar-actions { width:100%; justify-content:flex-end; }
}
@media (max-width:1030px) {
  .authenticated .topbar-actions { flex-wrap:wrap; justify-content:flex-start; }
  .authenticated .topbar-controls { flex:1 1 616px; }
}
@media (max-width:760px) {
  .authenticated .topbar-controls { flex-basis:100%; }
  .authenticated .topbar-actions #mobile-logout { margin-left:auto; }
}


.topbar-controls { grid-auto-rows:40px; align-items:stretch; }
.topbar-controls > .topbar-control,
.topbar-controls > .theme-picker { box-sizing:border-box; width:100%; height:40px; min-height:40px; margin:0; border-radius:8px; }
.topbar-controls > .theme-picker { padding:3px; gap:3px; }
.topbar-controls > .theme-picker label { height:100%; padding:0 5px; border-radius:5px; }
.topbar-controls > .connection-badge { overflow:hidden; text-overflow:ellipsis; display:block; line-height:22px; text-align:center; }