nodewarden/webapp/src/styles/dark.css

:root[data-theme='dark'] body,
:root[data-theme='dark'] #root,
:root[data-theme='dark'] .app-page,
:root[data-theme='dark'] .auth-page {
  background: var(--bg-accent);
  color: var(--text);
}

:root[data-theme='dark'] h1,
:root[data-theme='dark'] h2,
:root[data-theme='dark'] h3,
:root[data-theme='dark'] h4,
:root[data-theme='dark'] .brand,
:root[data-theme='dark'] .mobile-page-title,
:root[data-theme='dark'] .detail-title,
:root[data-theme='dark'] .dialog-title,
:root[data-theme='dark'] .standalone-title,
:root[data-theme='dark'] .kv-main strong,
:root[data-theme='dark'] .list-title,
:root[data-theme='dark'] .sidebar-title,
:root[data-theme='dark'] .totp-code-name,
:root[data-theme='dark'] .backup-destination-name,
:root[data-theme='dark'] .backup-browser-entry,
:root[data-theme='dark'] .mobile-settings-link,
:root[data-theme='dark'] .backup-browser-path strong,
:root[data-theme='dark'] .backup-option-label,
:root[data-theme='dark'] .sort-menu-item,
:root[data-theme='dark'] .create-menu-item,
:root[data-theme='dark'] .tree-btn,
:root[data-theme='dark'] .folder-add-btn,
:root[data-theme='dark'] .list-icon-fallback,
:root[data-theme='dark'] .totp-code-main strong,
:root[data-theme='dark'] .totp-timer-value {
  color: var(--text);
}

:root[data-theme='dark'] .muted,
:root[data-theme='dark'] .detail-sub,
:root[data-theme='dark'] .detail-folder-line,
:root[data-theme='dark'] .field-help,
:root[data-theme='dark'] .list-sub,
:root[data-theme='dark'] .kv-label,
:root[data-theme='dark'] .standalone-muted,
:root[data-theme='dark'] .standalone-footer,
:root[data-theme='dark'] .backup-inline-note,
:root[data-theme='dark'] .backup-browser-empty,
:root[data-theme='dark'] .or,
:root[data-theme='dark'] .mobile-tab,
:root[data-theme='dark'] .side-link,
:root[data-theme='dark'] .side-group-trigger,
:root[data-theme='dark'] .side-sub-link,
:root[data-theme='dark'] .nav-layout-trigger,
:root[data-theme='dark'] .user-chip,
:root[data-theme='dark'] .list-count,
:root[data-theme='dark'] .totp-code-username,
:root[data-theme='dark'] .backup-destination-meta,
:root[data-theme='dark'] .backup-browser-meta,
:root[data-theme='dark'] .table td::before,
:root[data-theme='dark'] .backup-recommendation-step,
:root[data-theme='dark'] .backup-recommendation-inline-note,
:root[data-theme='dark'] .backup-recommendation-linked-item,
:root[data-theme='dark'] .backup-inline-suffix,
:root[data-theme='dark'] .folder-delete-btn,
:root[data-theme='dark'] .folder-sort-btn,
:root[data-theme='dark'] .tree-label {
  color: var(--muted);
}

:root[data-theme='dark'] .input,
:root[data-theme='dark'] .textarea,
:root[data-theme='dark'] select.input,
:root[data-theme='dark'] .search-input,
:root[data-theme='dark'] .dialog input,
:root[data-theme='dark'] .dialog textarea,
:root[data-theme='dark'] .dialog select {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
  box-shadow: none;
}

:root[data-theme='dark'] .input::placeholder,
:root[data-theme='dark'] .textarea::placeholder,
:root[data-theme='dark'] input::placeholder,
:root[data-theme='dark'] textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
}

:root[data-theme='dark'] .input:focus,
:root[data-theme='dark'] .textarea:focus,
:root[data-theme='dark'] .search-input:focus,
:root[data-theme='dark'] .dialog input:focus,
:root[data-theme='dark'] .dialog textarea:focus,
:root[data-theme='dark'] .dialog select:focus {
  border-color: color-mix(in srgb, var(--primary) 54%, var(--line));
  background: var(--panel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

:root[data-theme='dark'] .input-readonly {
  background: var(--panel-muted);
  color: var(--muted-strong);
}

:root[data-theme='dark'] .input:disabled,
:root[data-theme='dark'] .btn:disabled {
  background: var(--panel-muted);
  border-color: var(--line-soft);
  color: color-mix(in srgb, var(--muted) 62%, transparent);
}

:root[data-theme='dark'] .mobile-sidebar-mask,
:root[data-theme='dark'] .dialog-mask {
  background: var(--overlay-strong);
}

:root[data-theme='dark'] .toast-item {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme='dark'] .toast-item.error,
:root[data-theme='dark'] .toast-item.warning {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
  color: var(--text);
}

:root[data-theme='dark'] .jwt-warning-head,
:root[data-theme='dark'] .jwt-warning-label,
:root[data-theme='dark'] .jwt-warning-copy,
:root[data-theme='dark'] .jwt-warning-list {
  color: var(--warning);
}

:root[data-theme='dark'] .local-error {
  color: var(--danger);
}

:root[data-theme='dark'] .status-ok {
  color: var(--success);
}

:root[data-theme='dark'] .totp-qr,
:root[data-theme='dark'] .totp-qr svg,
:root[data-theme='dark'] .totp-qr img {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

/* ── dark mode scrollbar ── */
:root[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  background-clip: content-box;
}

:root[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 40%, var(--muted) 22%);
  background-clip: content-box;
}

/* ── dark mode backdrop-filter ── */
:root[data-theme='dark'] .dialog-mask {
  backdrop-filter: blur(8px) brightness(0.7);
  -webkit-backdrop-filter: blur(8px) brightness(0.7);
}

:root[data-theme='dark'] .topbar {
  background: rgba(17, 24, 39, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

:root[data-theme='dark'] .user-chip {
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

:root[data-theme='dark'] .user-chip:hover {
  background: var(--panel-subtle);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
}

/* ── dark mode depth ── */
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .list-panel,
:root[data-theme='dark'] .sidebar-block,
:root[data-theme='dark'] .mobile-sidebar-sheet {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(0, 0, 0, 0.16);
}

:root[data-theme='dark'] .app-shell {
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.30);
}

:root[data-theme='dark'] .list-item:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(139, 184, 255, 0.12);
}

:root[data-theme='dark'] .card-brand-icon {
  color: #bfdbfe;
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}

:root[data-theme='dark'] .card-brand-icon:has(img) {
  background: #fff;
}

:root[data-theme='dark'] .card-brand-american-express {
  color: #fff;
  background: #2563eb;
}

:root[data-theme='dark'] .card-brand-mastercard,
:root[data-theme='dark'] .card-brand-maestro,
:root[data-theme='dark'] .card-brand-discover {
  color: #f8fafc;
}

:root[data-theme='dark'] .mobile-sidebar-sheet,
:root[data-theme='dark'] .mobile-sidebar-close,
:root[data-theme='dark'] .nav-layout-menu,
:root[data-theme='dark'] .nav-layout-trigger,
:root[data-theme='dark'] .table tr,
:root[data-theme='dark'] .settings-subcard,
:root[data-theme='dark'] .import-summary-table-wrap,
:root[data-theme='dark'] .backup-help-bubble,
:root[data-theme='dark'] .backup-recommendation-card,
:root[data-theme='dark'] .backup-recommendation-dav-item,
:root[data-theme='dark'] .backup-recommendations-summary,
:root[data-theme='dark'] .backup-browser-path,
:root[data-theme='dark'] .backup-browser-list,
:root[data-theme='dark'] .restore-progress-card,
:root[data-theme='dark'] .restore-progress-current,
:root[data-theme='dark'] .restore-progress-elapsed {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme='dark'] .mobile-sidebar-title,
:root[data-theme='dark'] .import-summary-close,
:root[data-theme='dark'] .backup-recommendation-group-title,
:root[data-theme='dark'] .backup-browser-path strong,
:root[data-theme='dark'] .restore-progress-current strong,
:root[data-theme='dark'] .custom-field-check span,
:root[data-theme='dark'] .notes {
  color: var(--text);
}

:root[data-theme='dark'] .backup-help-bubble::before {
  background: var(--panel);
  border-color: var(--line);
}

:root[data-theme='dark'] .mobile-sidebar-close:hover,
:root[data-theme='dark'] .side-link:hover,
:root[data-theme='dark'] .side-group-trigger:hover,
:root[data-theme='dark'] .side-sub-link:hover,
:root[data-theme='dark'] .nav-layout-trigger:hover,
:root[data-theme='dark'] .nav-layout-trigger.active,
:root[data-theme='dark'] .nav-layout-option:hover,
:root[data-theme='dark'] .nav-layout-option.active,
:root[data-theme='dark'] .mobile-sidebar-sheet .tree-btn.active,
:root[data-theme='dark'] .mobile-settings-link.active,
:root[data-theme='dark'] .backup-destination-item.active,
:root[data-theme='dark'] .backup-interval-preset.active {
  background: color-mix(in srgb, var(--primary) 14%, var(--panel));
  color: var(--primary-strong);
}

:root[data-theme='dark'] .table td,
:root[data-theme='dark'] .attachment-row,
:root[data-theme='dark'] .custom-field-card,
:root[data-theme='dark'] .kv-line,
:root[data-theme='dark'] .kv-row,
:root[data-theme='dark'] .import-summary-table th,
:root[data-theme='dark'] .import-summary-table td,
:root[data-theme='dark'] .restore-progress-card,
:root[data-theme='dark'] .restore-progress-current,
:root[data-theme='dark'] .restore-progress-elapsed {
  border-color: var(--line);
}

:root[data-theme='dark'] .import-summary-table th {
  background: var(--panel-muted);
  color: var(--muted-strong);
}

:root[data-theme='dark'] .import-summary-failed-list {
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
  color: var(--danger);
}

:root[data-theme='dark'] .backup-help-trigger,
:root[data-theme='dark'] .backup-destination-type,
:root[data-theme='dark'] .backup-interval-preset,
:root[data-theme='dark'] .restore-progress-meter {
  background: var(--panel-muted);
  border-color: var(--line);
  color: var(--muted-strong);
}

:root[data-theme='dark'] .backup-destination-item:hover,
:root[data-theme='dark'] .backup-interval-preset:hover:not(:disabled) {
  background: var(--panel-subtle);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  color: var(--primary-strong);
}

:root[data-theme='dark'] .backup-help-bubble,
:root[data-theme='dark'] .backup-recommendation-step,
:root[data-theme='dark'] .backup-recommendation-inline-note,
:root[data-theme='dark'] .backup-recommendation-linked-item,
:root[data-theme='dark'] .backup-browser-meta,
:root[data-theme='dark'] .backup-browser-empty,
:root[data-theme='dark'] .backup-inline-note,
:root[data-theme='dark'] .restore-progress-kicker,
:root[data-theme='dark'] .restore-progress-subtitle,
:root[data-theme='dark'] .restore-progress-current p,
:root[data-theme='dark'] .restore-progress-item,
:root[data-theme='dark'] .check-line {
  color: var(--muted);
}

:root[data-theme='dark'] .restore-progress-overlay {
  background: var(--overlay-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

:root[data-theme='dark'] .not-found-code {
  background: color-mix(in srgb, var(--primary) 18%, var(--panel));
  color: var(--primary-strong);
}

:root[data-theme='dark'] .log-detail-head h3,
:root[data-theme='dark'] .log-row-main strong,
:root[data-theme='dark'] .log-detail-meta strong,
:root[data-theme='dark'] .log-detail-json dd,
:root[data-theme='dark'] .log-detail-json h4,
:root[data-theme='dark'] .log-pagination-count {
  color: var(--text);
}

:root[data-theme='dark'] .log-row-main small,
:root[data-theme='dark'] .log-detail-meta span,
:root[data-theme='dark'] .log-detail-json dt {
  color: var(--muted);
}

:root[data-theme='dark'] .log-row,
:root[data-theme='dark'] .log-detail-meta > div,
:root[data-theme='dark'] .log-detail-json dl > div,
:root[data-theme='dark'] .log-pagination-count {
  background: var(--panel-muted);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme='dark'] .log-row:hover,
:root[data-theme='dark'] .log-row.active {
  background: color-mix(in srgb, var(--primary) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
}