html {
  color-scheme: dark;
}

.control-sidebar {
  width: 248px;
  min-width: 248px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid #1b2a3d;
  background: #0b121e;
  color: #9aacc0;
  scrollbar-width: thin;
  scrollbar-color: #26384d transparent;
}

.control-sidebar-main { flex: 1 0 auto; }
.control-sidebar-brand { height: 72px !important; min-height: 72px !important; border-color: #1b2a3d !important; }
.control-sidebar-nav { padding: 20px 13px 15px !important; }
.control-sidebar-label { margin: 0 10px 12px !important; color: #61768e !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .16em !important; }
.control-sidebar-nav > button {
  min-height: 43px;
  padding: 7px 10px !important;
  border: 1px solid transparent;
  border-radius: 8px !important;
  color: #9aacc0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.control-sidebar-nav > button > div { min-width: 0; flex: 1 1 auto; gap: 11px !important; }
.control-sidebar-nav > button > div > i,
.control-sidebar-nav > button > i { width: 28px; height: auto; flex: 0 0 28px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: #89a2bd !important; background: transparent !important; box-shadow: none !important; text-align: center; font-size: 13px !important; }
.control-sidebar-nav > button > div > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-sidebar-nav > button > span { flex: 0 0 auto; }
.control-sidebar-nav > button:hover { border-color: #20344a; color: #d6e4f2 !important; background: rgba(75, 212, 243, .045) !important; }
.control-sidebar-nav > button.control-nav-active {
  border-color: rgba(75, 212, 243, .22) !important;
  color: #b9f3ff !important;
  background: linear-gradient(105deg, rgba(75, 212, 243, .11), rgba(56, 141, 240, .06)) !important;
}
.control-sidebar-nav > button.control-nav-active i { color: #4bd4f3 !important; }
.control-sidebar-footer { border-color: #1b2a3d !important; }

@media (max-width: 760px) {
  .control-sidebar { width: 216px !important; min-width: 216px !important; }
  .control-sidebar-brand { padding-right: 14px !important; padding-left: 14px !important; }
  .control-sidebar-nav { padding-right: 9px !important; padding-left: 9px !important; }
  .control-sidebar-footer { padding-right: 10px !important; padding-left: 10px !important; }
}

@media (max-width: 560px) {
  .control-sidebar { width: 72px !important; min-width: 72px !important; }
  .control-sidebar-brand { height: 68px !important; min-height: 68px !important; justify-content: center; padding: 8px !important; }
  .control-sidebar-brand > div { display: none; }
  .control-sidebar-brand img { width: 36px; height: 36px; }
  .control-sidebar-nav { padding: 12px 8px !important; }
  .control-sidebar-label { display: none; }
  .control-sidebar-nav > button { position: relative; width: 48px; min-height: 44px; justify-content: center; margin-right: auto; margin-left: auto; padding: 0 !important; }
  .control-sidebar-nav > button > div { width: 28px; justify-content: center; }
  .control-sidebar-nav > button > div > span { display: none; }
  .control-sidebar-nav > button > span { position: absolute; top: 1px; right: 1px; max-width: 34px; overflow: hidden; padding: 2px 4px; border: 1px solid #0b121e; border-radius: 999px; font-size: 7px; line-height: 1; text-overflow: clip; white-space: nowrap; }
  .control-sidebar-nav > button#nav-dashboard > span { width: 6px; height: 6px; padding: 0; border: 0; }
  .control-sidebar-nav > button > i { margin: 0 auto; }
  .control-sidebar-footer { display: grid; justify-items: center; gap: 10px !important; padding: 12px 7px !important; }
  .control-creator-link, .control-profile-link { width: 48px !important; min-height: 44px; justify-content: center; padding: 0 !important; }
  .control-footer-label, .control-footer-soon, .control-system-label, .control-reset-link span, .control-profile-label { display: none; }
  .control-system-row { flex-direction: column; gap: 10px; }
  .control-system-row > span { justify-content: center; }
  .control-reset-link { width: 30px; height: 30px; padding: 0; }
}

html[data-theme="light"] {
  color-scheme: light;
  color: #172033;
  background: #f4f6fb;
}

html[data-theme="light"] body {
  color: #172033;
  background-color: #f4f6fb;
  background-image: none;
}

html[data-theme="light"] aside {
  color: #334155;
  border-color: #e2e8f0;
  background: #fff;
}

html[data-theme="light"] .brand,
html[data-theme="light"] .sidebar-footer,
html[data-theme="light"] .system-state {
  border-color: #e2e8f0;
  color: #64748b;
}

html[data-theme="light"] .brand small,
html[data-theme="light"] .topbar-caption,
html[data-theme="light"] .topbar-sub,
html[data-theme="light"] .sub {
  color: #64748b;
}

html[data-theme="light"] header,
html[data-theme="light"] .topbar {
  border-color: #e2e8f0;
  background: #ffffffed;
}

html[data-theme="light"] main {
  color: #172033;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .topbar-title,
html[data-theme="light"] .section-heading h2,
html[data-theme="light"] .list-row strong,
html[data-theme="light"] .channel h2,
html[data-theme="light"] .hero-title,
html[data-theme="light"] .module h2 {
  color: #172033;
}

html[data-theme="light"] nav a,
html[data-theme="light"] nav button {
  color: #475569;
}

html[data-theme="light"] nav a:hover,
html[data-theme="light"] nav button:hover,
html[data-theme="light"] nav button.active {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}

html[data-theme="light"] .control-sidebar-nav > button.control-nav-active {
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
  background: #eff6ff !important;
}
html[data-theme="light"] .control-sidebar-nav > button.control-nav-active i { color: #2563eb !important; }

html[data-theme="light"] .card,
html[data-theme="light"] .section-card,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .module,
html[data-theme="light"] .studio-panel,
html[data-theme="light"] .production-card,
html[data-theme="light"] .provider-card,
html[data-theme="light"] .table-wrap {
  border-color: #e2e8f0;
  background: #fff;
  box-shadow: 0 8px 24px #1c31500b;
}

html[data-theme="light"] .metric-value,
html[data-theme="light"] .metric,
html[data-theme="light"] .list-row,
html[data-theme="light"] table,
html[data-theme="light"] th,
html[data-theme="light"] td {
  color: #334155;
}

html[data-theme="light"] .list-row,
html[data-theme="light"] th,
html[data-theme="light"] td {
  border-color: #e2e8f0;
}

html[data-theme="light"] .chip,
html[data-theme="light"] .badge,
html[data-theme="light"] .module-status {
  border-color: #dbe3ef;
  color: #475569;
  background: #f1f5f9;
}

html[data-theme="light"] .profile-menu,
html[data-theme="light"] .account-menu {
  border-color: #e2e8f0;
  background: #fff;
  box-shadow: 0 18px 45px #0f172a24;
}

html[data-theme="light"] .profile-menu button,
html[data-theme="light"] .profile-menu a,
html[data-theme="light"] .account-menu button,
html[data-theme="light"] .account-menu a,
html[data-theme="light"] .account-menu summary {
  color: #334155;
}

html[data-theme="light"] .profile-menu button:hover,
html[data-theme="light"] .profile-menu a:hover,
html[data-theme="light"] .account-menu button:hover,
html[data-theme="light"] .account-menu a:hover {
  color: #1d4ed8;
  background: #eff6ff;
}

html[data-theme="light"] dialog,
html[data-theme="light"] dialog .dialog-head {
  border-color: #e2e8f0;
  color: #172033;
  background: #fff;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .input-control {
  border-color: #cbd5e1;
  color: #172033;
  background: #fff;
}

html[data-theme="light"] .studio-hero {
  border-color: #dbe3ef;
  background:
    radial-gradient(ellipse at 95% 10%, #dbeafe, transparent 38%),
    linear-gradient(120deg, #fff, #f1f5f9 70%, #e0f2fe);
}

html[data-theme="light"] .hero-copy,
html[data-theme="light"] .module p,
html[data-theme="light"] .section-heading p,
html[data-theme="light"] .muted {
  color: #64748b;
}

html[data-theme="light"] .hero-art {
  border-color: #dbe3ef;
  background: linear-gradient(140deg, #e0e7ff, #e0f2fe);
}

html[data-theme="light"] .studio-panel-head h2,
html[data-theme="light"] .production-heading h3,
html[data-theme="light"] .script-block h4,
html[data-theme="light"] .provider-card h3 {
  color: #172033;
}

html[data-theme="light"] .studio-panel-head p,
html[data-theme="light"] .studio-help,
html[data-theme="light"] .production-meta,
html[data-theme="light"] .provider-card p {
  color: #64748b;
}

html[data-theme="light"] .production-card,
html[data-theme="light"] .provider-card {
  border-color: #dbe3ef;
  background: #f8fafc;
}

html[data-theme="light"] .field,
html[data-theme="light"] .consent-row,
html[data-theme="light"] .job-row {
  color: #475569;
}

html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .script-editor {
  border-color: #cbd5e1;
  color: #172033;
  background: #fff;
}

html[data-theme="light"] .status-pill {
  border-color: #bfdbfe;
  color: #1d4ed8;
  background: #eff6ff;
}

html[data-theme="light"] .status-pill.error {
  border-color: #fecaca;
  color: #b91c1c;
  background: #fef2f2;
}

html[data-theme="light"] .status-pill.good {
  border-color: #bbf7d0;
  color: #15803d;
  background: #f0fdf4;
}

html[data-theme="light"] .job-row {
  border-color: #e2e8f0;
}

html[data-theme="light"] .empty-state {
  border-color: #cbd5e1;
  color: #64748b;
}

html[data-theme="light"] .notice-box {
  border-color: #fcd34d;
  color: #854d0e;
  background: #fffbeb;
}

html[data-theme="light"] a {
  color: #1d4ed8;
}

.theme-switch {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #dbe3ef;
  border-radius: 11px;
  color: #334155;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 18px #1c31500b;
}

html[data-theme="dark"] .theme-switch {
  border-color: #334155;
  color: #cbd5e1;
  background: #0f172a;
}

html[data-theme="dark"] body.login-page,
html[data-theme="dark"] body.password-page {
  color: #e2e8f0;
  background: #0b1120;
}

html[data-theme="dark"] .login-shell,
html[data-theme="dark"] .password-shell {
  border-color: #263349;
  background: #0f172a;
  box-shadow: 0 28px 80px #02061780;
}

html[data-theme="dark"] .login-shell .brand,
html[data-theme="dark"] .login-shell h1 {
  color: #f8fafc;
}

html[data-theme="dark"] .login-shell label,
html[data-theme="dark"] .login-shell .form-options,
html[data-theme="dark"] .password-shell label {
  color: #cbd5e1;
}

html[data-theme="dark"] .login-shell .intro,
html[data-theme="dark"] .password-shell p {
  color: #94a3b8;
}

html[data-theme="dark"] .login-shell input,
html[data-theme="dark"] .password-shell input {
  border-color: #334155;
  color: #e2e8f0;
  background: #0b1120;
}

html[data-theme="dark"] .login-shell .forgot,
html[data-theme="dark"] .login-shell .show-password {
  color: #93c5fd;
}

html[data-theme="dark"] .password-shell {
  color: #e2e8f0;
}

html[data-theme="light"] .password-shell {
  border-color: #e2e8f0;
  color: #172033;
  background: #fff;
}

html[data-theme="light"] .password-shell label,
html[data-theme="light"] .password-shell input {
  color: #172033;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}