@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --color-page: #07131f;
    --color-surface: #101f2f;
    --color-sidebar: #0a1724;
    --color-sidebar-hover: #13283a;
    --color-text: #edf5fc;
    --color-text-soft: #c7d6e5;
    --color-muted: #8fa4ba;
    --color-border: #20364a;
    --color-border-strong: #2c475f;
    --color-blue: #3b9cff;
    --color-blue-hover: #65b2ff;
    --color-blue-soft: #123c61;
    --color-blue-faint: #102a41;
    --color-error: #f08b8b;
    --shadow-sidebar: 1.5rem 0 4rem rgb(0 0 0 / 28%);
    --shadow-tab: 0 0.55rem 1.1rem -0.65rem rgb(0 0 0 / 62%), 0 1px 3px rgb(0 0 0 / 35%);
    --shadow-panel: 0 1.25rem 2.5rem -2rem rgb(0 0 0 / 70%), 0 2px 5px rgb(0 0 0 / 25%);
  }

  html[data-theme="dark"] body {
    background: var(--color-page);
  }

  html[data-theme="dark"] .page-content {
    background:
      radial-gradient(circle at 86% 8%, rgb(59 156 255 / 5%), transparent 24rem),
      var(--color-page);
  }

  html[data-theme="dark"] .sidebar {
    background:
      radial-gradient(circle at -10% 12%, rgb(59 156 255 / 8%), transparent 30%),
      linear-gradient(180deg, #0d1b29 0%, var(--color-sidebar) 55%, #08131e 100%);
  }

  html[data-theme="dark"] .topbar {
    background: rgb(13 27 41 / 92%);
  }

  html[data-theme="dark"] :is(.connection-status, .topbar-icon-button, .topbar-user-button) {
    border-color: var(--color-border);
    background: rgb(16 31 47 / 78%);
    color: var(--color-text-soft);
  }

  html[data-theme="dark"] :is(.topbar-popover, .shell-toast, .shell-confirm-dialog) {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
  }

  html[data-theme="dark"] .shell-notification--danger > span:first-child,
  html[data-theme="dark"] .shell-toast--danger .shell-toast-icon { background: #3c2329; color: #ff9b9b; }

  html[data-theme="dark"] .shell-notification--warning > span:first-child,
  html[data-theme="dark"] .shell-toast--warning .shell-toast-icon { background: #392d19; color: #ffc66d; }

  html[data-theme="dark"] .shell-toast--success .shell-toast-icon { background: #173728; color: #74d6a2; }

  html[data-theme="dark"] .shell-context-banner--readonly,
  html[data-theme="dark"] .shell-context-banner--offline { border-color: #5a4724; background: #2a2318; }

  html[data-theme="dark"] .nav-link:hover {
    border-color: rgb(59 156 255 / 12%);
    background: var(--color-sidebar-hover);
  }

  html[data-theme="dark"] .nav-link.is-active {
    border-color: rgb(59 156 255 / 14%);
    background: linear-gradient(90deg, #123452 0%, #102c45 72%, #0e263c 100%);
    box-shadow: 0 0.75rem 1.5rem -1.2rem rgb(0 0 0 / 75%);
  }

  html[data-theme="dark"] .auth-shell {
    background:
      radial-gradient(circle at 18% 16%, rgb(59 156 255 / 10%), transparent 28rem),
      radial-gradient(circle at 88% 82%, rgb(59 156 255 / 6%), transparent 24rem),
      linear-gradient(145deg, #07131f 0%, #0a1927 48%, #081521 100%);
  }

  html[data-theme="dark"] .auth-panel,
  html[data-theme="dark"] .auth-demo-access {
    border-color: var(--color-border-strong);
    background: rgb(16 31 47 / 94%);
    box-shadow: 0 2rem 5rem -3rem rgb(0 0 0 / 80%);
  }

  html[data-theme="dark"] .auth-role-options {
    background: #0b1927;
  }

  html[data-theme="dark"] .auth-role-options input:checked + span {
    background: var(--color-surface);
  }

  html[data-theme="dark"] :is(
    .section-tab,
    .document-section-tab,
    .payment-section-tab,
    .asset-section-tab,
    .fleet-section-tab,
    .employee-section-tab
  ):hover {
    background: rgb(16 38 58 / 86%);
  }

  html[data-theme="dark"] :is(
    .section-tab,
    .document-section-tab,
    .payment-section-tab,
    .asset-section-tab,
    .fleet-section-tab,
    .employee-section-tab
  ).is-active {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
  }

  html[data-theme="dark"] :is(
    .document-section-tab,
    .payment-section-tab,
    .asset-section-tab,
    .fleet-section-tab
  ) small {
    background: #172b3d;
    color: var(--color-muted);
  }

  html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border-color: var(--color-border) !important;
    background: #0d1c2b !important;
    color: var(--color-text) !important;
  }

  html[data-theme="dark"] :is(input, textarea)::placeholder {
    color: #71869c;
  }

  html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover {
    border-color: var(--color-border-strong) !important;
    background: #102234 !important;
  }

  html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: #4d9fe9 !important;
    background: #102234 !important;
    box-shadow: 0 0 0 3px rgb(59 156 255 / 12%) !important;
  }

  html[data-theme="dark"] :is(
    .attendance-report-footer,
    .payment-report-footer,
    .asset-report-footer,
    .fleet-report-footer
  ) {
    border-color: var(--color-border-strong);
    background: rgb(13 27 41 / 94%);
    box-shadow: 0 -1.1rem 2.7rem -2rem rgb(0 0 0 / 68%);
  }

  html[data-theme="dark"] :is(
    .attendance-table,
    .database-table,
    .record-table,
    .document-table,
    .payment-table,
    .asset-table,
    .fleet-table,
    .profile-table,
    .asset-subtable,
    .fleet-subtable
  ) :is(th, td) {
    border-color: var(--color-border) !important;
  }

  html[data-theme="dark"] :is(
    .attendance-table,
    .database-table,
    .record-table,
    .document-table,
    .payment-table,
    .asset-table,
    .fleet-table,
    .profile-table
  ) tbody tr:hover {
    background: rgb(24 54 79 / 68%);
  }

  html[data-theme="dark"] .profile-table tbody tr:hover {
    background: linear-gradient(90deg, rgb(22 65 99 / 88%), rgb(17 40 61 / 64%));
  }

  html[data-theme="dark"] :is(
    .document-file-row,
    .payment-file-row,
    .payment-proof-row,
    .report-option,
    .report-date-range,
    .profile-shell-note
  ) {
    border-color: var(--color-border);
    background: #0d1c2b;
  }

  html[data-theme="dark"] :is(
    .payment-summary-grid article,
    .asset-summary-grid article,
    .fleet-summary-grid article,
    .profile-access-grid article,
    .settings-format-preview
  ) {
    border-color: var(--color-border);
    background: #0d1c2b;
  }

  html[data-theme="dark"] :is(.report-option:hover, .report-option:has(input:checked)) {
    border-color: var(--color-border-strong);
    background: var(--color-blue-faint);
  }

  html[data-theme="dark"] :is(.record-dialog, .report-preview-dialog) {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
  }

  html[data-theme="dark"] .record-dialog::backdrop {
    background: rgb(0 7 14 / 66%);
  }

  html[data-theme="dark"] :is(.secondary-action-button, .quiet-action-button, .settings-sign-out-button, .profile-sign-out-button) {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
  }

  html[data-theme="dark"] :is(.profile-initials, .about-stage) {
    border-color: var(--color-border-strong);
    background: var(--color-blue-faint);
  }

  html[data-theme="dark"] .settings-theme-track {
    border-color: var(--color-border-strong);
    background: #263c50;
  }

  html[data-theme="dark"] .loading-line {
    background: linear-gradient(90deg, #142a3d 25%, #1c354a 50%, #142a3d 75%);
    background-size: 200% 100%;
  }
}