.theme-wrap {
    position: relative;
    display: inline-flex;
  }

  .theme-wrap .icon-button {
    position: relative;
  }

  .theme-wrap .theme-icon-sun {
    display: none;
  }

  html[data-theme="dark"] .theme-wrap .theme-icon-moon {
    display: none;
  }

  html[data-theme="dark"] .theme-wrap .theme-icon-sun {
    display: block;
  }

  html {
    color-scheme: light;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #08141f;
    --panel: #102433;
    --ink: #e7f4fb;
    --muted: #8aa4b8;
    --line: #234156;
    --accent: #163246;
    --accent-strong: #7ec8d8;
    --navy: #e7f4fb;
    --navy-soft: #c8dcea;
    --metal: #12293a;
    --metal-mid: #1a3548;
    --chrome: #4e7388;
    --shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  }

  html[data-theme="dark"] body {
    background:
      radial-gradient(circle at top left, rgba(0, 212, 239, 0.1), transparent 34%),
      radial-gradient(circle at bottom right, rgba(8, 40, 58, 0.55), transparent 32%),
      linear-gradient(135deg, #071018 0%, #0b1a28 48%, #08141f 100%);
    color: var(--ink);
  }

  html[data-theme="dark"] .content {
    background:
      radial-gradient(circle at top right, rgba(0, 212, 239, 0.1), transparent 34%),
      radial-gradient(circle at bottom left, rgba(10, 36, 52, 0.92), transparent 30%),
      linear-gradient(180deg, #0c1b29 0%, #0a1824 58%, #08141f 100%);
  }

  html[data-theme="dark"] .page:not(.dashboard-page) .panel,
  html[data-theme="dark"] .page:not(.dashboard-page) .metric-card,
  html[data-theme="dark"] .page:not(.dashboard-page) .report-card {
    border-color: rgba(0, 188, 214, 0.28);
    background:
      linear-gradient(135deg, rgba(22, 52, 70, 0.96), rgba(14, 32, 46, 0.96) 55%, rgba(10, 24, 36, 0.96)),
      linear-gradient(180deg, #143044, #102433);
    box-shadow: var(--shadow);
    color: var(--ink);
  }

  html[data-theme="dark"] .page.is-active > [data-account-info-toolbar],
  html[data-theme="dark"] .page.is-active > [data-manual-withdraw-panel],
  html[data-theme="dark"] .page[data-page="attendance"].is-active > .attendance-records-panel,
  html[data-theme="dark"] .page[data-page="attendance"].is-active > .attendance-summary-panel,
  html[data-theme="dark"] .page[data-page="working-schedule"].is-active > .attendance-schedule-panel,
  html[data-theme="dark"] .page[data-page="users"].is-active > .user-management-panel,
  html[data-theme="dark"] .page[data-page="payroll"].is-active > .payroll-panel,
  html[data-theme="dark"] .page[data-page="work-performance"].is-active > .work-performance-panel,
  html[data-theme="dark"] .withdrawal-records-panel,
  html[data-theme="dark"] .deposit-history-panel,
  html[data-theme="dark"] .report-sheet-panel,
  html[data-theme="dark"] .attendance-records-panel {
    background: #102433 !important;
    color: var(--ink);
    border-color: rgba(0, 188, 214, 0.24);
  }

  html[data-theme="dark"] .page:not(.dashboard-page) h2,
  html[data-theme="dark"] .page:not(.dashboard-page) h3,
  html[data-theme="dark"] .page:not(.dashboard-page) .panel-header,
  html[data-theme="dark"] .page:not(.dashboard-page) .records-title,
  html[data-theme="dark"] .account-info-empty {
    color: var(--ink);
  }

  html[data-theme="dark"] .content .ghost-button,
  html[data-theme="dark"] .content .small-button,
  html[data-theme="dark"] .content .danger-button,
  html[data-theme="dark"] .content .icon-button,
  html[data-theme="dark"] .account-image-icon-button {
    background: linear-gradient(180deg, #1a3a4e, #12293a);
    color: var(--ink);
    border-color: #2d5368;
    box-shadow: inset 0 1px 0 rgba(180, 250, 255, 0.12);
  }

  html[data-theme="dark"] .content .ghost-button:hover,
  html[data-theme="dark"] .content .small-button:hover,
  html[data-theme="dark"] .content .icon-button:hover,
  html[data-theme="dark"] .account-image-icon-button:hover,
  html[data-theme="dark"] .account-image-icon-button:focus {
    border-color: rgba(0, 212, 239, 0.55);
    box-shadow: 0 8px 22px rgba(0, 145, 170, 0.18);
  }

  html[data-theme="dark"] .content .danger-button {
    color: #ff8d86;
    border-color: #6a3330;
  }

  html[data-theme="dark"] .content input,
  html[data-theme="dark"] .content select,
  html[data-theme="dark"] .content textarea,
  html[data-theme="dark"] .app-alert input,
  html[data-theme="dark"] .account-info-form input,
  html[data-theme="dark"] .account-info-form select,
  html[data-theme="dark"] .account-info-form textarea,
  html[data-theme="dark"] .bank-sheet-edit-form input,
  html[data-theme="dark"] .bank-sheet-edit-form select,
  html[data-theme="dark"] .bank-sheet-edit-form textarea,
  html[data-theme="dark"] .work-performance-delay-reason {
    background: linear-gradient(180deg, rgba(16, 40, 56, 0.98), rgba(10, 26, 38, 0.96));
    color: var(--ink);
    border-color: #2d5368;
    box-shadow: inset 0 1px 0 rgba(180, 250, 255, 0.08);
  }

  html[data-theme="dark"] .content input:focus,
  html[data-theme="dark"] .content select:focus,
  html[data-theme="dark"] .content textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(5, 207, 231, 0.18);
  }

  html[data-theme="dark"] .content option,
  html[data-theme="dark"] .app-alert option,
  html[data-theme="dark"] .account-info-form option {
    background: #102433;
    color: var(--ink);
  }

  html[data-theme="dark"] .page:not(.dashboard-page) td,
  html[data-theme="dark"] .page:not(.dashboard-page) .record-cell strong,
  html[data-theme="dark"] .page:not(.dashboard-page) .record-cell span {
    color: #8aa4b8;
    border-bottom-color: var(--line);
  }

  html[data-theme="dark"] .page:not(.dashboard-page) th {
    color: #d5eef6;
    background: linear-gradient(180deg, rgba(28, 62, 82, 0.94), rgba(16, 38, 54, 0.96));
  }

  html[data-theme="dark"] .table-wrap {
    scrollbar-color: rgba(0, 200, 220, 0.55) rgba(8, 28, 42, 0.9);
  }

  html[data-theme="dark"] .table-wrap::-webkit-scrollbar-track {
    background: rgba(8, 28, 42, 0.9);
  }

  html[data-theme="dark"] .withdrawal-row-pending,
  html[data-theme="dark"] .withdrawal-record-table tbody tr.withdrawal-row-pending td {
    background: #0e5564;
    color: #e8fbff;
    border-bottom-color: #5ed4e4;
  }

  html[data-theme="dark"] .withdrawal-row-paying,
  html[data-theme="dark"] .withdrawal-record-table tbody tr.withdrawal-row-paying td:not(.withdrawal-account-name-cell) {
    background: #0e5564;
    color: #8aa4b8;
    border-bottom-color: #5ed4e4;
  }

  html[data-theme="dark"] .withdrawal-row-returned {
    background: #2a333c;
  }

  html[data-theme="dark"] .withdrawal-row-mio-paid {
    background: #16344c;
  }

  html[data-theme="dark"] .withdrawal-row-pending td {
    border-bottom-color: #5ed4e4;
  }

  html[data-theme="dark"] .withdrawal-row-paying td {
    border-bottom-color: #1f6d78;
  }

  html[data-theme="dark"] .withdrawal-row-returned td {
    border-bottom-color: #4a5560;
  }

  html[data-theme="dark"] .withdrawal-row-mio-paid td {
    border-bottom-color: #2a5a78;
  }

  html[data-theme="dark"] .withdrawal-record-table td.withdrawal-account-name-cell.is-paying {
    color: #f4feff;
    background: linear-gradient(180deg, #1b6d80, #0f4552);
    border-color: rgba(126, 245, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(210, 252, 255, 0.28), 0 0 0 1px rgba(0, 212, 239, 0.22);
  }

  html[data-theme="dark"] .withdrawal-record-table td.live-timer-cell.is-ok {
    color: #3ee0b8;
  }

  html[data-theme="dark"] .withdrawal-record-table td.live-timer-cell.is-warn {
    color: #ffb020;
  }

  html[data-theme="dark"] .withdrawal-record-table td.live-timer-cell.is-late {
    color: #ff8a82;
  }

  html[data-theme="dark"] .withdrawal-record-table td.live-timer-cell.is-process.is-ok {
    color: #3ee0b8 !important;
  }

  html[data-theme="dark"] .withdrawal-record-table td.live-timer-cell.is-process.is-warn {
    color: #ffb020 !important;
  }

  html[data-theme="dark"] .withdrawal-record-table td.live-timer-cell.is-process.is-late {
    color: #ff8a82 !important;
  }

  html[data-theme="dark"] .status {
    background: rgba(0, 212, 239, 0.16);
    color: #b7f6ff;
  }

  html[data-theme="dark"] .status.flagged,
  html[data-theme="dark"] .status.review,
  html[data-theme="dark"] .status.kyc-hold,
  html[data-theme="dark"] .status.high {
    background: #4a3314;
    color: #ffd39a;
  }

  html[data-theme="dark"] .status.medium {
    background: #4a3a12;
    color: #ffd789;
  }

  html[data-theme="dark"] .status.pending {
    background: #fdf2d9;
    color: #8a5a00;
  }

  html[data-theme="dark"] .status.testing {
    background: #163a52;
    color: #9cdcff;
  }

  html[data-theme="dark"] .status.low,
  html[data-theme="dark"] .status.approved,
  html[data-theme="dark"] .status.verified,
  html[data-theme="dark"] .status.credit,
  html[data-theme="dark"] .status.active,
  html[data-theme="dark"] .attendance-duty-status.is-on-duty {
    background: #163c2a;
    color: #8cf0b4;
  }

  html[data-theme="dark"] .status.success {
    background: #163c2a;
    color: #059669;
  }

  html[data-theme="dark"] .status.inactive,
  html[data-theme="dark"] .attendance-duty-status.is-off-duty {
    background: #2a3540;
    color: #d5e0ea;
  }

  html[data-theme="dark"] .status.logged-out {
    background: #17384c;
    color: #9cdcff;
  }

  html[data-theme="dark"] .status.returned,
  html[data-theme="dark"] .status.cancelled {
    background: #4a3032;
    color: #d7a8a8;
  }

  .status.success,
  .status.returned,
  .status.cancelled {
    font-weight: 400;
  }

  html[data-theme="dark"] .attendance-schedule-date-th.is-weekend,
  html[data-theme="dark"] .attendance-schedule-person-row td.is-weekend {
    background: #1a2834;
    color: var(--navy-soft);
  }

  html[data-theme="dark"] .attendance-schedule-date-th.is-today,
  html[data-theme="dark"] .attendance-schedule-person-row td.is-today {
    background: #143528;
    color: #8cf0b4;
  }

  html[data-theme="dark"] .attendance-schedule-table .attendance-schedule-station-row td,
  html[data-theme="dark"] .attendance-schedule-table .attendance-schedule-station-row .attendance-schedule-station-label {
    background: linear-gradient(90deg, #163844, #102a38);
    color: #b7f6ff;
    border-color: #2a5368;
  }

  html[data-theme="dark"] .attendance-schedule-person-row td.is-off {
    color: #b7f6ff;
    background: linear-gradient(180deg, #1b6d80, #0f4552);
  }

  html[data-theme="dark"] .attendance-schedule-person-row td.is-off-cover {
    color: #ffe7a8;
    background: linear-gradient(180deg, #5a4514, #3d2f0d);
  }

  html[data-theme="dark"] .search-panel,
  html[data-theme="dark"] .notification-panel,
  html[data-theme="dark"] .language-panel {
    background: linear-gradient(180deg, rgba(18, 44, 60, 0.98), rgba(10, 26, 38, 0.98));
    border-color: rgba(0, 188, 214, 0.32);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(180, 250, 255, 0.12);
    color: var(--ink);
  }

  html[data-theme="dark"] .language-panel button,
  html[data-theme="dark"] .login-language-panel button {
    color: var(--ink);
  }

  html[data-theme="dark"] .language-panel button:hover,
  html[data-theme="dark"] .language-panel button.is-active {
    background: rgba(0, 212, 239, 0.14);
    border-color: rgba(0, 212, 239, 0.32);
    color: #d9fbff;
  }

  html[data-theme="dark"] .notification-head strong,
  html[data-theme="dark"] .notification-head span {
    color: var(--ink);
  }

  html[data-theme="dark"] .notification-badge {
    border-color: #102433;
  }

  html[data-theme="dark"] .account-info-form,
  html[data-theme="dark"] .app-alert-card,
  html[data-theme="dark"] .announcement-card,
  html[data-theme="dark"] .account-update-card,
  html[data-theme="dark"] .bank-sheet-edit-card,
  html[data-theme="dark"] .attendance-summary-edit-card,
  html[data-theme="dark"] .proof-card {
    background: linear-gradient(135deg, rgba(22, 52, 70, 0.98), rgba(12, 30, 44, 0.98)) !important;
    border-color: rgba(0, 188, 214, 0.42);
    color: var(--ink);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(180, 250, 255, 0.12);
  }

  html[data-theme="dark"] .app-alert-copy h2,
  html[data-theme="dark"] .app-alert-copy p:last-child,
  html[data-theme="dark"] .proof-reason,
  html[data-theme="dark"] .bank-sheet-edit-card,
  html[data-theme="dark"] .account-update-card {
    color: var(--ink);
  }

  html[data-theme="dark"] .account-update-head h2 {
    color: #d7eef6;
  }

  html[data-theme="dark"] .account-update-head .eyebrow {
    color: #7ed7e8;
    text-shadow: none;
  }

  html[data-theme="dark"] .account-update-target,
  html[data-theme="dark"] .account-update-save-status {
    color: #c8dcea;
  }

  html[data-theme="dark"] .account-update-save-status.is-success {
    color: #5eefb0;
  }

  html[data-theme="dark"] .account-update-save-status.is-error {
    color: #ff8a82;
  }

  html[data-theme="dark"] .account-update-target input,
  html[data-theme="dark"] .account-update-target input[readonly] {
    background: linear-gradient(180deg, rgba(16, 40, 56, 0.98), rgba(10, 26, 38, 0.96));
    color: #e7f4fb;
    border-color: #2d5368;
    box-shadow: inset 0 1px 0 rgba(180, 250, 255, 0.08);
  }

  html[data-theme="dark"] .account-update-card .ghost-button,
  html[data-theme="dark"] .account-update-card .proof-close {
    background: linear-gradient(180deg, #1a3a4e, #12293a);
    color: #eefbff;
    border-color: #2d5368;
    box-shadow: inset 0 1px 0 rgba(180, 250, 255, 0.12);
  }

  html[data-theme="dark"] .account-update-template {
    background: #0c1b29;
    border-color: #2d5368;
    color: #d7eef6;
  }

  html[data-theme="dark"] .account-update-summary span {
    color: #8aa4b8;
  }

  html[data-theme="dark"] .account-update-summary strong {
    color: #e7f4fb;
  }

  html[data-theme="dark"] .account-update-section h3 {
    color: #d7eef6;
  }

  html[data-theme="dark"] .account-update-grid {
    border-color: #2d5368;
  }

  html[data-theme="dark"] .account-update-grid th,
  html[data-theme="dark"] .account-update-grid td {
    border-color: #2d5368;
    color: #8aa4b8 !important;
    background: #102433;
  }

  html[data-theme="dark"] .account-update-grid th {
    background: linear-gradient(180deg, rgba(28, 62, 82, 0.94), rgba(16, 38, 54, 0.96));
    color: #d5eef6 !important;
  }

  html[data-theme="dark"] .proof-reason {
    background: linear-gradient(180deg, #163044, #102433);
    border-color: #2d5368;
  }

  html[data-theme="dark"] .report-volume-range {
    background: rgba(16, 36, 51, 0.7);
    border-color: var(--line);
  }

  html[data-theme="dark"] .report-volume-range-btn {
    color: var(--muted);
  }

  html[data-theme="dark"] .report-volume-range-btn:hover {
    color: var(--ink);
  }

  html[data-theme="dark"] .work-performance-table tfoot th,
  html[data-theme="dark"] .work-performance-table tfoot td {
    background: #143044;
  }

  html[data-theme="dark"] .setting-row,
  html[data-theme="dark"] .filter-row,
  html[data-theme="dark"] .transaction-filter,
  html[data-theme="dark"] .manual-form,
  html[data-theme="dark"] .deposit-bank-form {
    color: var(--ink);
  }

  html[data-theme="dark"] .auto-refresh-toggle {
    border-color: rgba(110, 235, 246, 0.38);
    background: linear-gradient(180deg, #1a3f52, #12293a);
    color: #eefbff;
    box-shadow: inset 0 1px 0 rgba(180, 250, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.28);
  }

  html[data-theme="dark"] .auto-refresh-toggle.is-on {
    border-color: rgba(126, 245, 255, 0.7);
    background: linear-gradient(180deg, #1b6d80, #0f4552);
    color: #f4feff;
  }

  html[data-theme="dark"] .auto-refresh-toggle:hover {
    border-color: rgba(126, 245, 255, 0.7);
    color: #ffffff;
  }

  html[data-theme="dark"] .page:not(.dashboard-page) tbody tr:hover td:not(.withdrawal-account-name-cell):not(.is-off):not(.is-off-cover):not(.is-today):not(.is-weekend) {
    background: rgba(0, 212, 239, 0.08);
  }

  html[data-theme="dark"] .page:not(.dashboard-page) .withdrawal-record-table tbody tr.withdrawal-row-pending:hover td:not(.withdrawal-account-name-cell):not(.is-off):not(.is-off-cover):not(.is-today):not(.is-weekend) {
    background: #146878;
    color: #e8fbff;
  }

  html[data-theme="dark"] .page:not(.dashboard-page) .withdrawal-record-table tbody tr.withdrawal-row-paying:hover td:not(.withdrawal-account-name-cell):not(.is-off):not(.is-off-cover):not(.is-today):not(.is-weekend) {
    background: #146878;
    color: #8aa4b8;
  }

  html[data-theme="dark"] .attendance-summary-header,
  html[data-theme="dark"] .attendance-daily-header,
  html[data-theme="dark"] .attendance-filter-bar,
  html[data-theme="dark"] .attendance-schedule-toolbar,
  html[data-theme="dark"] .attendance-schedule-toolbar-meta,
  html[data-theme="dark"] .attendance-rules {
    background: #12293a;
    border-color: #2a5368;
    color: #c8dcea;
  }

  html[data-theme="dark"] .attendance-daily-header h2,
  html[data-theme="dark"] .attendance-summary-header h2,
  html[data-theme="dark"] .attendance-schedule-toolbar h2 {
    color: #e7f4fb;
  }

  html[data-theme="dark"] .attendance-schedule-month-field,
  html[data-theme="dark"] .attendance-summary-month-field,
  html[data-theme="dark"] .attendance-schedule-filters label,
  html[data-theme="dark"] .attendance-schedule-legend li,
  html[data-theme="dark"] .filter-summary,
  html[data-theme="dark"] .transaction-filter label,
  html[data-theme="dark"] .manual-form label {
    color: #c8dcea;
  }

  html[data-theme="dark"] .attendance-rules strong {
    color: #e7f4fb;
  }

  html[data-theme="dark"] .attendance-schedule-month-field select,
  html[data-theme="dark"] .attendance-summary-month-field select,
  html[data-theme="dark"] .attendance-schedule-filters select,
  html[data-theme="dark"] .attendance-schedule-cell-select {
    background: linear-gradient(180deg, #1a3f52, #12293a);
    color: #eefbff;
    border-color: rgba(110, 235, 246, 0.38);
  }

  html[data-theme="dark"] .attendance-schedule-week-toggles .ghost-button.is-active,
  html[data-theme="dark"] .attendance-summary-period-toggles .ghost-button.is-active {
    background: linear-gradient(180deg, #1b6d80, #0f4552);
    border-color: rgba(126, 245, 255, 0.7);
    color: #f4feff;
    box-shadow: 0 8px 22px rgba(0, 145, 170, 0.22);
  }

  html[data-theme="dark"] .attendance-schedule-table,
  html[data-theme="dark"] .attendance-schedule-table table {
    background: #102433;
    border-color: #2a5368;
    scrollbar-color: rgba(0, 200, 220, 0.55) rgba(8, 28, 42, 0.9);
  }

  html[data-theme="dark"] .attendance-schedule-table::-webkit-scrollbar-track {
    background: rgba(8, 28, 42, 0.9);
  }

  html[data-theme="dark"] .attendance-schedule-table th {
    color: #d7eef6;
    border-bottom-color: #234156;
    background: #102433;
  }

  html[data-theme="dark"] .attendance-schedule-table td {
    color: #8aa4b8;
    border-bottom-color: #234156;
    background: #102433;
  }

  html[data-theme="dark"] .attendance-schedule-table th:first-child,
  html[data-theme="dark"] .attendance-schedule-table th:nth-child(2),
  html[data-theme="dark"] .attendance-schedule-table th:nth-child(3),
  html[data-theme="dark"] .attendance-schedule-table.has-actions .attendance-schedule-action-th {
    background: #102433;
    color: #d7eef6;
    border-color: #2a5368;
  }

  html[data-theme="dark"] .attendance-schedule-table td:first-child,
  html[data-theme="dark"] .attendance-schedule-table td:nth-child(2),
  html[data-theme="dark"] .attendance-schedule-table td:nth-child(3),
  html[data-theme="dark"] .attendance-schedule-table.has-actions .attendance-schedule-action-cell {
    background: #102433;
    color: #8aa4b8;
    border-color: #2a5368;
  }

  html[data-theme="dark"] .attendance-schedule-table thead th,
  html[data-theme="dark"] .attendance-schedule-table thead th:first-child,
  html[data-theme="dark"] .attendance-schedule-table thead th:nth-child(2),
  html[data-theme="dark"] .attendance-schedule-table thead th:nth-child(3),
  html[data-theme="dark"] .attendance-schedule-table.has-actions thead .attendance-schedule-action-th {
    background: linear-gradient(180deg, #1c3e52, #10263a);
    color: #d5eef6;
    box-shadow: 0 2px 0 #2a5368;
  }

  html[data-theme="dark"] .attendance-schedule-date-th .attendance-schedule-weekday {
    color: #8aa4b8;
  }

  html[data-theme="dark"] .attendance-schedule-person-row.is-zebra td,
  html[data-theme="dark"] .attendance-schedule-person-row.is-zebra td:first-child,
  html[data-theme="dark"] .attendance-schedule-person-row.is-zebra td:nth-child(2),
  html[data-theme="dark"] .attendance-schedule-person-row.is-zebra td:nth-child(3),
  html[data-theme="dark"] .attendance-schedule-person-row.is-zebra .attendance-schedule-action-cell {
    background: #0d1f2c;
    color: #8aa4b8;
  }

  html[data-theme="dark"] .attendance-schedule-person-row.is-editing td,
  html[data-theme="dark"] .attendance-schedule-person-row.is-editing td:first-child,
  html[data-theme="dark"] .attendance-schedule-person-row.is-editing td:nth-child(2),
  html[data-theme="dark"] .attendance-schedule-person-row.is-editing td:nth-child(3) {
    background: #143848;
    color: #8aa4b8;
  }

  html[data-theme="dark"] .attendance-schedule-date-th.is-weekend,
  html[data-theme="dark"] .attendance-schedule-person-row td.is-weekend,
  html[data-theme="dark"] .attendance-schedule-person-row.is-zebra td.is-weekend {
    background: #1a2834;
    color: var(--navy-soft);
  }

  html[data-theme="dark"] .attendance-schedule-date-th.is-today,
  html[data-theme="dark"] .attendance-schedule-person-row td.is-today,
  html[data-theme="dark"] .attendance-schedule-person-row.is-zebra td.is-today {
    background: #143528;
    color: #8cf0b4;
  }

  html[data-theme="dark"] .attendance-schedule-table .attendance-schedule-station-row td,
  html[data-theme="dark"] .attendance-schedule-table .attendance-schedule-station-row .attendance-schedule-station-label,
  html[data-theme="dark"] .attendance-schedule-table .attendance-schedule-station-row .attendance-schedule-station-fill,
  html[data-theme="dark"] .attendance-schedule-table .attendance-schedule-station-row .attendance-schedule-station-action,
  html[data-theme="dark"] .attendance-schedule-table .attendance-schedule-station-row:hover td {
    background: linear-gradient(90deg, #163844, #102a38);
    color: #b7f6ff;
    border-color: #2a5368;
  }

  html[data-theme="dark"] .attendance-schedule-person-row td.is-off,
  html[data-theme="dark"] .attendance-schedule-person-row.is-zebra td.is-off {
    color: #b7f6ff;
    background: linear-gradient(180deg, #1b6d80, #0f4552);
  }

  html[data-theme="dark"] .attendance-schedule-person-row td.is-off-cover,
  html[data-theme="dark"] .attendance-schedule-person-row.is-zebra td.is-off-cover {
    color: #ffe7a8;
    background: linear-gradient(180deg, #5a4514, #3d2f0d);
  }

  html[data-theme="dark"] .attendance-schedule-person-row td.is-empty-slot {
    color: #7f93a6;
  }

  html[data-theme="dark"] .attendance-schedule-edit-toggle:hover,
  html[data-theme="dark"] .attendance-schedule-edit-toggle:focus-visible,
  html[data-theme="dark"] .attendance-schedule-save-toggle:hover,
  html[data-theme="dark"] .attendance-schedule-save-toggle:focus-visible,
  html[data-theme="dark"] .attendance-schedule-cancel-toggle:hover,
  html[data-theme="dark"] .attendance-schedule-cancel-toggle:focus-visible,
  html[data-theme="dark"] .attendance-schedule-delete-toggle:hover,
  html[data-theme="dark"] .attendance-schedule-delete-toggle:focus-visible {
    background: #163844;
    border-color: rgba(0, 212, 239, 0.55);
    color: #b7f6ff;
  }

  html[data-theme="dark"] .attendance-summary-table,
  html[data-theme="dark"] .attendance-summary-table table {
    background: #102433;
  }

  html[data-theme="dark"] .attendance-summary-table th {
    background: #102433;
    color: #d7eef6;
    border-bottom-color: #234156;
  }

  html[data-theme="dark"] .attendance-summary-table td,
  html[data-theme="dark"] .attendance-summary-row td,
  html[data-theme="dark"] .attendance-summary-row.is-expanded td,
  html[data-theme="dark"] .attendance-daily-row.is-off-duty td {
    background: #102433;
    color: #8aa4b8;
    border-bottom-color: #234156;
  }

  html[data-theme="dark"] .attendance-summary-record-table thead th,
  html[data-theme="dark"] .attendance-daily-record-table thead th {
    background: linear-gradient(180deg, #1c3e52, #10263a);
    color: #d5eef6;
    box-shadow: 0 1px 0 #2a5368;
  }

  html[data-theme="dark"] .attendance-summary-row.is-zebra td,
  html[data-theme="dark"] .attendance-summary-row.is-expanded.is-zebra td,
  html[data-theme="dark"] .attendance-daily-row.is-zebra td {
    background: #0d1f2c;
    color: #8aa4b8;
  }

  html[data-theme="dark"] .attendance-daily-row.is-on-duty td {
    background: #143528;
    color: #8aa4b8;
  }

  html[data-theme="dark"] .attendance-daily-row.is-on-duty.is-zebra td {
    background: #123c2c;
    color: #8aa4b8;
  }

  html[data-theme="dark"] .attendance-summary-row.is-edited td {
    background: #3a2f14;
    color: #8aa4b8;
  }

  html[data-theme="dark"] .account-info-records-panel,
  html[data-theme="dark"] .page[data-page="user-record"].is-active > .panel,
  html[data-theme="dark"] .page[data-page="announcement"].is-active > .panel,
  html[data-theme="dark"] .page[data-page="settings"].is-active > .panel,
  html[data-theme="dark"] .page[data-page="bank-settings"].is-active > .panel,
  html[data-theme="dark"] .page[data-page="blocklist-accounts"].is-active > .panel,
  html[data-theme="dark"] .page[data-page="ip-access"].is-active > .panel,
  html[data-theme="dark"] .page[data-page="app-logs"].is-active > .panel,
  html[data-theme="dark"] .page[data-page="merchant"].is-active > .panel,
  html[data-theme="dark"] .page[data-page="admin-file"].is-active > .panel,
  html[data-theme="dark"] .page[data-page="deposits"].is-active .panel,
  html[data-theme="dark"] .report-volume-panel {
    background: #102433 !important;
    color: var(--ink);
    border-color: rgba(0, 188, 214, 0.24);
  }

  html[data-theme="dark"] .filter-icon {
    background: #d5eef6;
  }

  html[data-theme="dark"] .filter-icon::after {
    background: #12293a;
  }

  html[data-theme="dark"] .content .filter-toggle.is-active,
  html[data-theme="dark"] .content .action-column-toggle.is-active {
    background: linear-gradient(180deg, #1b6d80, #0f4552);
    border-color: rgba(126, 245, 255, 0.7);
    color: #f4feff;
  }

  html[data-theme="dark"] .deposit-bank-form label,
  html[data-theme="dark"] .user-form label,
  html[data-theme="dark"] .announcement-form label,
  html[data-theme="dark"] .api-key-form label,
  html[data-theme="dark"] .id-sequence-card label,
  html[data-theme="dark"] .web-update-form label,
  html[data-theme="dark"] .bank-sheet-edit-form label,
  html[data-theme="dark"] .work-performance-section-title,
  html[data-theme="dark"] .work-performance-section-title small,
  html[data-theme="dark"] .work-performance-note,
  html[data-theme="dark"] .local-usage-note,
  html[data-theme="dark"] .payroll-scope {
    color: #c8dcea;
  }

  html[data-theme="dark"] .page[data-page="ip-access"] .panel-note,
  html[data-theme="dark"] .page[data-page="merchant"] .panel-note,
  html[data-theme="dark"] .page[data-page="app-logs"] .panel-note,
  html[data-theme="dark"] .page[data-page="blocklist-accounts"] .panel-note {
    color: #c8dcea;
  }

  html[data-theme="dark"] .account-info-bank-chip {
    background: linear-gradient(180deg, #1a3f52, #12293a);
    border-color: rgba(110, 235, 246, 0.38);
    color: #eefbff;
    box-shadow: inset 0 1px 0 rgba(180, 250, 255, 0.14);
  }

  html[data-theme="dark"] .account-info-personal-search {
    background: linear-gradient(180deg, #1a3f52, #12293a);
    color: #eefbff;
    border-color: rgba(110, 235, 246, 0.38);
  }

  html[data-theme="dark"] .access-trigger,
  html[data-theme="dark"] .access-menu,
  html[data-theme="dark"] .table-action-button {
    background: linear-gradient(180deg, #1a3a4e, #12293a);
    color: #eefbff;
    border-color: #2d5368;
    box-shadow: inset 0 1px 0 rgba(180, 250, 255, 0.12);
  }

  html[data-theme="dark"] .access-trigger::after {
    border-top-color: #d5eef6;
  }

  html[data-theme="dark"] .access-menu label {
    color: #e7f4fb;
  }

  html[data-theme="dark"] .access-menu label:hover {
    background: rgba(0, 212, 239, 0.14);
  }

  html[data-theme="dark"] .access-menu .access-all-option {
    color: #b7f6ff;
    border-bottom-color: #2a5368;
  }

  html[data-theme="dark"] .table-action-button.danger {
    color: #ff8d86;
    border-color: #6a3330;
  }

  html[data-theme="dark"] .account-image-drop,
  html[data-theme="dark"] .deposit-file-drop {
    background: linear-gradient(180deg, rgba(16, 40, 56, 0.98), rgba(10, 26, 38, 0.96));
    border-color: #2d5368;
    color: #c8dcea;
  }

  html[data-theme="dark"] .account-image-field:not(.is-disabled) .account-image-drop,
  html[data-theme="dark"] .deposit-file-drop.is-dragging,
  html[data-theme="dark"] .deposit-file-drop:focus,
  html[data-theme="dark"] .deposit-file-drop.has-file,
  html[data-theme="dark"] .account-image-drop.has-image {
    background: linear-gradient(180deg, #163844, #102a38);
    border-color: rgba(0, 212, 239, 0.55);
    color: #b7f6ff;
  }

  html[data-theme="dark"] .manual-form input.is-locked,
  html[data-theme="dark"] .manual-form textarea.is-locked,
  html[data-theme="dark"] .work-performance-header select.is-locked {
    background: linear-gradient(180deg, #1a3f52, #12293a);
    color: #c8dcea;
  }

  html[data-theme="dark"] .payroll-rates {
    background: #12293a;
    border-color: #2a5368;
    color: #c8dcea;
  }

  html[data-theme="dark"] .payroll-rates strong {
    color: #e7f4fb;
  }

  html[data-theme="dark"] .payroll-table tbody tr.is-zebra td {
    background: #0d1f2c;
    color: #8aa4b8;
  }

  html[data-theme="dark"] .payroll-table tfoot td {
    background: #143044;
    color: #8aa4b8;
    border-top-color: #2a5368;
  }

  html[data-theme="dark"] .payroll-adjustment-input,
  html[data-theme="dark"] .payroll-amount-input,
  html[data-theme="dark"] .payroll-table tbody tr.is-zebra .payroll-adjustment-input,
  html[data-theme="dark"] .payroll-table tbody tr.is-zebra .payroll-amount-input {
    background: linear-gradient(180deg, #1a3f52, #12293a);
    color: #eefbff;
    border-color: rgba(110, 235, 246, 0.38);
  }

  html[data-theme="dark"] .payroll-payslip-card {
    background: #102433;
    border-color: rgba(0, 188, 214, 0.42);
    color: var(--ink);
  }

  html[data-theme="dark"] .payroll-payslip-toolbar {
    background: linear-gradient(180deg, #1c3e52, #10263a);
    border-bottom-color: #2a5368;
  }

  html[data-theme="dark"] .payroll-payslip-doc {
    background: #f7fbfd;
    color: #02091e;
  }

  html[data-theme="dark"] .payroll-payslip-letterhead h2,
  html[data-theme="dark"] .payroll-payslip-name,
  html[data-theme="dark"] .payroll-payslip-fact strong,
  html[data-theme="dark"] .payroll-payslip-line > span,
  html[data-theme="dark"] .payroll-payslip-line > strong {
    color: #02091e;
  }

  html[data-theme="dark"] .work-performance-table thead th,
  html[data-theme="dark"] .work-performance-table thead tr.work-performance-minute-head th,
  html[data-theme="dark"] .withdrawal-record-table thead th,
  html[data-theme="dark"] .deposit-history-table thead th,
  html[data-theme="dark"] .report-sheet-table thead th {
    background: linear-gradient(180deg, #1c3e52, #10263a);
    color: #d5eef6;
    box-shadow: 0 1px 0 #2a5368;
  }

  html[data-theme="dark"] .merchant-ip-box,
  html[data-theme="dark"] .merchant-env-switch .merchant-status-badge {
    background: linear-gradient(180deg, #1a3f52, #12293a);
    border-color: rgba(110, 235, 246, 0.38);
    color: #eefbff;
  }

  html[data-theme="dark"] .merchant-env-toggle.is-testing .merchant-env-toggle-label {
    color: #ffd789;
  }

  html[data-theme="dark"] .merchant-env-toggle.is-production .merchant-env-toggle-label {
    color: #8cf0b4;
  }

  html[data-theme="dark"] .merchant-env-switch .merchant-status-badge.is-active[data-merchant-status="active"] {
    background: #163c2a;
    border-color: rgba(140, 240, 180, 0.45);
    color: #8cf0b4;
  }

  html[data-theme="dark"] .merchant-env-switch .merchant-status-badge.is-active[data-merchant-status="inactive"] {
    background: #4a221c;
    border-color: rgba(255, 141, 134, 0.45);
    color: #ff8d86;
  }

  html[data-theme="dark"] .merchant-row.is-selected td {
    background: #143848;
    color: #8aa4b8;
  }

  html[data-theme="dark"] .merchant-ip-expand td {
    background: #0d1f2c;
    color: #8aa4b8;
  }

  html[data-theme="dark"] .merchant-ip-box.is-open {
    background: #163844;
    color: #b7f6ff;
  }

  html[data-theme="dark"] .merchant-detail-grid span {
    color: #8aa4b8;
  }

  html[data-theme="dark"] .merchant-detail-grid strong {
    color: #e7f4fb;
  }

  html[data-theme="dark"] .admin-file-card,
  html[data-theme="dark"] .id-sequence-card,
  html[data-theme="dark"] .api-key-secret,
  html[data-theme="dark"] .id-preview,
  html[data-theme="dark"] .sheet-list li {
    background: linear-gradient(180deg, #163246, #102433);
    border-color: #2a5368;
    color: #c8dcea;
  }

  html[data-theme="dark"] .admin-file-card strong,
  html[data-theme="dark"] .id-sequence-card h3,
  html[data-theme="dark"] .id-preview strong,
  html[data-theme="dark"] .api-key-heading,
  html[data-theme="dark"] .api-key-secret p {
    color: #e7f4fb;
  }

  html[data-theme="dark"] .integration-docs {
    background: linear-gradient(180deg, #163246, #102433);
    border-color: #2a5368;
    color: #c8dcea;
  }

  html[data-theme="dark"] .integration-docs h1,
  html[data-theme="dark"] .integration-docs h2,
  html[data-theme="dark"] .integration-docs h3 {
    color: #e7f4fb;
  }

  html[data-theme="dark"] .integration-docs code {
    background: #0d1f2c;
    border-color: #2a5368;
    color: #b7f6ff;
  }

  html[data-theme="dark"] .announcement-screen-item,
  html[data-theme="dark"] .announcement-screen-empty {
    background: rgba(16, 40, 56, 0.92);
    border-color: #2a5368;
    color: #d7eef6;
  }

  html[data-theme="dark"] .announcement-card-head h2,
  html[data-theme="dark"] .announcement-screen-item h3,
  html[data-theme="dark"] .announcement-screen-message {
    color: #e7f4fb;
  }

  html[data-theme="dark"] .announcement-screen-meta span {
    background: #163844;
    border-color: rgba(110, 235, 246, 0.38);
    color: #b7f6ff;
  }

  html[data-theme="dark"] .announcement-screen-audit {
    color: #8aa4b8;
    border-top-color: #2a5368;
  }

  html[data-theme="dark"] .process-proof-button {
    color: #b7f6ff;
  }

  html[data-theme="dark"] .process-proof-button.process-proof-button-paid,
  html[data-theme="dark"] .page:not(.dashboard-page) td.process-text-paid {
    color: #059669 !important;
  }

  html[data-theme="dark"] .process-proof-button.process-proof-button-reject,
  html[data-theme="dark"] .page:not(.dashboard-page) td.process-text-reject {
    color: #e86b6b !important;
  }

  html[data-theme="dark"] .withdrawal-record-table tbody tr:has(.process-proof-button-paid) td,
  html[data-theme="dark"] .withdrawal-record-table tbody tr:has(.process-proof-button-reject) td,
  html[data-theme="dark"] .withdrawal-record-table tbody tr:has(td.process-text-paid) td,
  html[data-theme="dark"] .withdrawal-record-table tbody tr:has(td.process-text-reject) td {
    color: #8aa4b8;
  }

  html[data-theme="dark"] .table-empty-cell {
    color: #8aa4b8;
  }

  html[data-theme="dark"] .account-status-switch.is-active .account-status-switch-label {
    color: #8cf0b4;
  }

  html[data-theme="dark"] .account-status-switch.is-stop .account-status-switch-label {
    color: #ff8d86;
  }

  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:nth-child(even),
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:active,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:focus,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:focus-within,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:nth-child(even):active,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:nth-child(even):focus,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:nth-child(even):focus-within {
    background: #102433;
  }

  html[data-theme="dark"] .dashboard-page .operation-accounts-table td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody td:first-child,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:nth-child(even) td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:nth-child(even) td:first-child,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:active td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:focus td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:focus-within td {
    background: linear-gradient(180deg, #163246, #102433) !important;
    color: #8aa4b8 !important;
    text-shadow: 0 1px 2px rgba(0, 8, 20, 0.85);
    box-shadow:
      inset 0 1px 0 rgba(180, 250, 255, 0.08),
      inset 0 -1px 0 rgba(0, 12, 20, 0.35);
  }

  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:nth-child(even) td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr:nth-child(even) td:first-child {
    background: linear-gradient(180deg, #12293a, #0d1f2c) !important;
  }

  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.account-type-per td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.account-type-biz td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.account-station-a td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.account-station-b td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.account-station-mio td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.account-station-accvn td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.account-station-smp td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody td:nth-child(8),
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody td:nth-child(9),
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody td:nth-child(10),
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody td:nth-child(11),
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody td:nth-child(12),
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody td.numeric {
    color: #8aa4b8 !important;
    text-shadow: 0 1px 2px rgba(0, 8, 20, 0.85);
  }

  html[data-theme="dark"] .dashboard-page .operation-accounts-table:not(.hover-locked) tbody tr:hover td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:active td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:focus td,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:focus-within td {
    background:
      linear-gradient(100deg, rgba(0, 212, 239, 0.22), rgba(0, 183, 207, 0.16) 50%, transparent 100%),
      linear-gradient(180deg, #1a4a5c, #102a38) !important;
    color: #f4feff !important;
    text-shadow:
      0 1px 2px rgba(0, 8, 20, 0.96),
      0 0 10px rgba(0, 231, 255, 0.42);
  }

  html[data-theme="dark"] .dashboard-page .operation-accounts-table:not(.hover-locked) tbody tr:hover td:first-child,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned td:first-child,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:active td:first-child,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:focus td:first-child,
  html[data-theme="dark"] .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:focus-within td:first-child {
    background:
      linear-gradient(90deg, #e7fdff 0, #8cf5ff 2px, #00c8df 5px, #007d96 7px, transparent 9px),
      linear-gradient(100deg, rgba(0, 212, 239, 0.22), rgba(0, 183, 207, 0.16) 50%, transparent 100%),
      linear-gradient(180deg, #1a4a5c, #102a38) !important;
  }

  .process-text-paying {
    white-space: nowrap;
    font-weight: 700;
  }

  .process-paying-letter {
    display: inline-block;
    color: #111111;
    font-weight: 700;
    animation: process-paying-letter 1.8s ease-in-out infinite;
  }

  @keyframes process-paying-letter {
    0%, 100% { color: #111111; }
    45% { color: #d5dae1; }
  }

  html[data-theme="dark"] .process-paying-letter {
    color: #8aa4b8;
    animation-name: process-paying-letter-dark;
  }

  @keyframes process-paying-letter-dark {
    0%, 100% { color: #8aa4b8; }
    45% { color: #ffffff; }
  }

  html[data-theme="dark"] .withdrawal-record-table tbody tr.withdrawal-row-paying td.process-text-paying,
  html[data-theme="dark"] .page:not(.dashboard-page) .withdrawal-record-table tbody tr.withdrawal-row-paying:hover td.process-text-paying {
    color: #8aa4b8 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .process-paying-letter,
    html[data-theme="dark"] .process-paying-letter {
      animation: none;
    }
  }