:root {
    --nav-bg: #111a35;
    --field-bg: #ffffff;
    --secondary-bg: #e7eaf0;
    --success-bg: #dff5e9;
    --warning-bg: #fff0c7;
    --danger-bg: #fee4e2;
    --running-bg: #e0e7ff;
    --shadow: rgba(16, 24, 40, .08);
    --code-bg: #eef1f5;
    color-scheme: light;
}

html[data-theme="dark"] {
    --bg: #0d1320;
    --surface: #151e2e;
    --text: #e8edf5;
    --muted: #a8b3c4;
    --border: #344158;
    --primary: #91adff;
    --primary-dark: #b7c8ff;
    --success: #7ad7ad;
    --warning: #f5c96a;
    --danger: #ff9b94;
    --nav-bg: #080d17;
    --field-bg: #101827;
    --secondary-bg: #2a3548;
    --success-bg: #173b2d;
    --warning-bg: #453615;
    --danger-bg: #492421;
    --running-bg: #252f62;
    --shadow: rgba(0, 0, 0, .3);
    --code-bg: #0a101b;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --bg: #0d1320;
        --surface: #151e2e;
        --text: #e8edf5;
        --muted: #a8b3c4;
        --border: #344158;
        --primary: #91adff;
        --primary-dark: #b7c8ff;
        --success: #7ad7ad;
        --warning: #f5c96a;
        --danger: #ff9b94;
        --nav-bg: #080d17;
        --field-bg: #101827;
        --secondary-bg: #2a3548;
        --success-bg: #173b2d;
        --warning-bg: #453615;
        --danger-bg: #492421;
        --running-bg: #252f62;
        --shadow: rgba(0, 0, 0, .3);
        --code-bg: #0a101b;
        color-scheme: dark;
    }
}

.topbar { background: var(--nav-bg); }
.card, .issue-card { background: var(--surface); box-shadow: 0 4px 18px var(--shadow); }
.filter-link, input, select, textarea { background: var(--field-bg); color: var(--text); border-color: var(--border); }
.btn-secondary, .badge, .alert { background: var(--secondary-bg); color: var(--text); }
.badge-ok, .badge-completed, .alert-success { background: var(--success-bg); color: var(--success); }
.badge-warning, .badge-queued, .alert-warning { background: var(--warning-bg); color: var(--warning); }
.badge-error, .badge-failed, .alert-error { background: var(--danger-bg); color: var(--danger); }
.badge-running { background: var(--running-bg); color: var(--primary); }
.comparison-value, .occurrence, .page-error, details, summary { background: var(--surface); border-color: var(--border); }
code, pre { background: var(--code-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
code { padding: .12em .35em; }
pre { padding: 14px; overflow: auto; }

.theme-control select { min-width: 105px; padding: 6px 8px; border-color: rgba(255,255,255,.35); background: var(--nav-bg); color: white; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.settings-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.settings-nav a { padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 700; }
.settings-section { scroll-margin-top: 20px; }
.inline-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.inline-form .form-group { flex: 1 1 280px; }
.appearance-options { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.choice { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--field-bg); }
.choice input { width: auto; }
.warning-confirm { color: var(--warning); }
.status-list dd { font-weight: 650; }

@media (max-width: 850px) {
    .nav { flex-wrap: wrap; }
    .theme-control { order: 2; }
}
html[data-theme="dark"] .btn:not(.btn-secondary), html[data-theme="dark"] .filter-link.is-active { background: #496bd3; color: #fff; }
html[data-theme="dark"] .btn:not(.btn-secondary):hover { background: #5d7de0; }
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .btn:not(.btn-secondary), html[data-theme="system"] .filter-link.is-active { background: #496bd3; color: #fff; }
    html[data-theme="system"] .btn:not(.btn-secondary):hover { background: #5d7de0; }
}