/* Theme variables and theme-specific readability overrides. */
:root {
  color-scheme: dark;
  --bg: #061122;
  --bg-2: #08182f;
  --top: rgba(4, 12, 25, 0.92);
  --panel: rgba(12, 30, 58, 0.84);
  --panel-2: rgba(15, 39, 75, 0.72);
  --card: rgba(14, 34, 65, 0.76);
  --glass: rgba(11, 26, 51, 0.66);
  --line: rgba(112, 168, 255, 0.18);
  --line-strong: rgba(45, 236, 211, 0.32);
  --text: #eff7ff;
  --muted: #91a8c8;
  --soft: #5f7594;
  --cyan: #2cefd4;
  --blue: #387cff;
  --violet: #7b5cff;
  --green: #2ee6a6;
  --gold: #ffd166;
  --red: #ff5e7a;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --max: 1500px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f8;
  --bg-2: #eef2f5;
  --top: rgba(249, 251, 253, 0.94);
  --panel: rgba(255, 255, 255, 0.94);
  --panel-2: rgba(244, 247, 250, 0.94);
  --card: rgba(255, 255, 255, 0.95);
  --glass: rgba(255, 255, 255, 0.88);
  --line: rgba(78, 96, 122, 0.16);
  --line-strong: rgba(0, 146, 138, 0.24);
  --text: #10223d;
  --muted: #526781;
  --soft: #7890aa;
  --shadow: 0 18px 46px rgba(47, 64, 86, 0.11);
}
html[data-theme="light"] .top-action {
  background: rgba(255, 255, 255, 0.86);
}
html[data-theme="light"] .top-action-status { color: #086b62; }
html[data-theme="light"] .top-action-globe {
  border-color: rgba(0, 151, 139, 0.28);
  background: rgba(21, 204, 181, 0.12);
}
html[data-theme="light"] .language-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(78, 96, 122, 0.16);
}
html[data-theme="light"] .language-option {
  color: #36516f;
}
html[data-theme="light"] .language-option:hover,
html[data-theme="light"] .language-option.active {
  color: #057c72;
  background: rgba(30, 190, 172, 0.13);
}
html[data-theme="light"] .sidebar-nav {
  background: rgba(248, 250, 252, 0.84);
}
html[data-theme="light"] #content {
  background: rgba(246, 248, 250, 0.9);
}
html[data-theme="light"] .btn {
  background: rgba(247, 251, 255, 0.78);
}
html[data-theme="light"] .btn-primary {
  color: #f8fdff;
  background: linear-gradient(135deg, #05998f, #245fdc);
  box-shadow: 0 14px 30px rgba(31, 96, 190, 0.28);
}
html[data-theme="light"] .metric-card {
  background: rgba(255, 255, 255, 0.94);
}
html[data-theme="light"] .field-label { color: #243b5a; }
html[data-theme="light"] .control {
  background: rgba(247, 251, 255, 0.84);
}
html[data-theme="light"] .meta-grid dd { color: #213b5e; }
html[data-theme="light"] .state {
  background: rgba(247, 249, 252, 0.72);
}
html[data-theme="light"] .disk-ring {
  background:
    radial-gradient(circle at center, #ffffff 0 54%, transparent 55%),
    conic-gradient(var(--cyan) 0 32%, rgba(56, 124, 255, 0.42) 32% 52%, rgba(120, 151, 197, 0.18) 52% 100%);
}
html[data-theme="light"] .job-hint { color: #8a2438; }
html[data-theme="light"] .form-error {
  color: #8a2438;
  background: rgba(255, 94, 122, 0.1);
}
html[data-theme="light"] .login-page {
  background: linear-gradient(180deg, #f3f6f9, #ffffff);
}
html[data-theme="light"] {
  --text: #071a33;
  --muted: #405875;
  --soft: #5f7897;
  --panel: rgba(255, 255, 255, 0.94);
  --card: rgba(255, 255, 255, 0.95);
  --glass: rgba(255, 255, 255, 0.88);
}
html[data-theme="light"] body {
  background: linear-gradient(180deg, #f2f5f8, #ffffff);
}
html[data-theme="light"] .card-subtitle,
html[data-theme="light"] .metric-meta,
html[data-theme="light"] .field-help,
html[data-theme="light"] .pager-info,
html[data-theme="light"] .job-safe-message,
html[data-theme="light"] .page-subtitle {
  color: #415b7a;
}
html[data-theme="light"] .badge-success { color: #075e46; background: rgba(46, 190, 133, 0.18); border-color: rgba(16, 128, 92, 0.22); }
html[data-theme="light"] .badge-info { color: #07526b; background: rgba(56, 189, 248, 0.18); border-color: rgba(12, 117, 150, 0.22); }
html[data-theme="light"] .badge-warning { color: #72500a; background: rgba(255, 209, 102, 0.22); border-color: rgba(150, 103, 8, 0.24); }
html[data-theme="light"] .badge-danger { color: #9a1f3a; background: rgba(255, 94, 122, 0.16); border-color: rgba(190, 45, 75, 0.24); }
html[data-theme="light"] .badge-muted { color: #3e5572; background: rgba(93, 126, 169, 0.12); border-color: rgba(62, 85, 114, 0.18); }
html[data-theme="light"] .badge-violet { color: #493184; background: rgba(123, 92, 255, 0.15); border-color: rgba(88, 66, 182, 0.2); }
html[data-theme="light"] .top-wip-badge {
  color: #7a550c;
  background: rgba(255, 209, 102, 0.2);
}
html[data-theme="light"] .top-action {
  border-color: rgba(78, 96, 122, 0.16);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
html[data-theme="light"] .top-action-icon {
  border-color: rgba(0, 151, 139, 0.22);
  background: rgba(30, 190, 172, 0.12);
}
html[data-theme="light"] .job-card.failed {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(228, 95, 123, 0.28);
}
html[data-theme="light"] .job-diagnostic-summary .job-hint,
html[data-theme="light"] .job-hint {
  color: #8a2039;
}
html[data-theme="light"] .job-detail-line,
html[data-theme="light"] .diagnostic-card,
html[data-theme="light"] .error-row,
html[data-theme="light"] .provider-row {
  color: #09213d;
  background: rgba(248, 250, 252, 0.84);
}
html[data-theme="light"] .job-diagnostics .job-detail-line {
  color: #0b2442;
  border-color: rgba(86, 120, 160, 0.24);
  background: rgba(255, 255, 255, 0.94);
}
html[data-theme="light"] .asset-card,
html[data-theme="light"] .provider-card,
html[data-theme="light"] .key-card,
html[data-theme="light"] .job-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .metric-card {
  border-color: rgba(78, 96, 122, 0.16);
  background-color: rgba(255, 255, 255, 0.92);
}
html[data-theme="light"] .asset-kind-badge {
  color: #07526b;
  background: rgba(182, 229, 247, 0.82);
  border-color: rgba(12, 117, 150, 0.22);
  box-shadow: 0 6px 14px rgba(49, 94, 160, 0.12);
}
html[data-theme="light"] .asset-source-badge {
  color: #3e5572;
  background: rgba(239, 244, 250, 0.86);
  border-color: rgba(62, 85, 114, 0.18);
  box-shadow: 0 6px 14px rgba(49, 94, 160, 0.1);
}
html[data-theme="light"] .asset-thumb {
  background:
    linear-gradient(145deg, rgba(56, 124, 255, 0.08), transparent 48%),
    #edf2f7;
}
html[data-theme="light"] .asset-preview-fallback {
  color: #506987;
}
html[data-theme="light"] .asset-job-strip {
  color: #0b2442;
  border-color: rgba(78, 96, 122, 0.18);
  background: rgba(247, 250, 253, 0.96);
}
html[data-theme="light"] .asset-job-meta .eyebrow {
  color: #087d77;
}
html[data-theme="light"] .asset-job-meta strong {
  color: #0b2442;
}
html[data-theme="light"] .meta-grid dt,
html[data-theme="light"] .kv b {
  color: #506987;
}
html[data-theme="light"] .meta-grid dd,
html[data-theme="light"] .kv span,
html[data-theme="light"] .provider-compact-meta,
html[data-theme="light"] .asset-card .card-subtitle,
html[data-theme="light"] .key-card .card-subtitle {
  color: #183856;
}
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-sm {
  color: #0b2442;
  border-color: rgba(78, 96, 122, 0.18);
  background: rgba(255, 255, 255, 0.86);
}
html[data-theme="light"] .btn-danger {
  color: #a51f3c;
  background: rgba(255, 94, 122, 0.08);
  border-color: rgba(196, 55, 83, 0.28);
}
html[data-theme="light"] .nav-item,
html[data-theme="light"] .segmented button,
html[data-theme="light"] .toggle,
html[data-theme="light"] .queue-cell span,
html[data-theme="light"] .asset-toolbar,
html[data-theme="light"] .jobs-toolbar,
html[data-theme="light"] .keys-toolbar {
  color: #334f70;
}
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .nav-item:hover {
  color: #057c72;
}
html[data-theme="light"] .control,
html[data-theme="light"] .compact-select,
html[data-theme="light"] .top-action-native-select {
  color: #09213d;
}
html[data-theme="light"] .control::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] input::placeholder {
  color: #637d99;
}
html[data-theme="light"] .metric-label,
html[data-theme="light"] .field-label,
html[data-theme="light"] .kv b {
  color: #27425f;
}
html[data-theme="light"] .state-title,
html[data-theme="light"] .queue-cell b,
html[data-theme="light"] .card-title,
html[data-theme="light"] .page-heading,
html[data-theme="light"] .panel-header h2 {
  color: #071a33;
}
html[data-theme="light"] .queue-box,
html[data-theme="light"] .preview-box {
  background: rgba(255, 255, 255, 0.82);
}
html[data-theme="light"] .metric-blue,
html[data-theme="light"] .metric-violet,
html[data-theme="light"] .metric-gold {
  background: rgba(255, 255, 255, 0.94);
}