html.dark-mode {
  --bg: #141210;
  --bg-card: #1e1b18;
  --surface: #181512;
  --white: #1e1b18;
  --text: #f0ece8;
  --text-2: #c4b8b0;
  --text-3: #7a6e68;
  --border: #2e2824;
  --border-dark: #3d3530;
  --green-bg: #0d2418;
  --green: #3ecf8e;
  --amber-bg: #241a08;
  --amber: #d4a234;
  --red-bg: #240a0e;
  --crimson-pale: #240a0e;
  --gold-pale: #1e1608;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow: 0 4px 16px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
}

html.dark-mode body { background: var(--bg); }

html.dark-mode .sidebar,
html.dark-mode .topbar,
html.dark-mode .modal,
html.dark-mode .modal-header,
html.dark-mode .modal-footer { background: var(--bg-card); }

html.dark-mode .login-right,
html.dark-mode .pending-card { background: var(--bg-card); }

html.dark-mode #login-screen { background: #0e0c0a; }

html.dark-mode .card { background: var(--bg-card); border-color: var(--border); }

html.dark-mode .field input,
html.dark-mode .field select,
html.dark-mode .field textarea,
html.dark-mode .search-input,
html.dark-mode .filter-select {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
html.dark-mode .field input:focus,
html.dark-mode .field select:focus,
html.dark-mode .field textarea:focus,
html.dark-mode .search-input:focus,
html.dark-mode .filter-select:focus {
  border-color: var(--crimson-light);
  box-shadow: 0 0 0 3px rgba(199,11,43,.15);
}

html.dark-mode .btn-secondary {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border-dark);
}
html.dark-mode .btn-secondary:hover:not(:disabled) { background: var(--surface); }

html.dark-mode .btn-danger {
  background: var(--bg);
  color: var(--crimson-light);
  border-color: #4a1820;
}
html.dark-mode .btn-danger:hover:not(:disabled) { background: var(--red-bg); }

html.dark-mode .btn-ghost:hover:not(:disabled) { background: var(--surface); }

html.dark-mode thead tr { background: var(--surface); }
html.dark-mode tbody tr:hover { background: var(--surface); }

html.dark-mode .skeleton {
  background: linear-gradient(90deg,var(--border) 25%,var(--surface) 50%,var(--border) 75%);
  background-size: 200% 100%;
}

html.dark-mode .stat-card { background: var(--bg-card); border-color: var(--border); }
html.dark-mode .detail-field { background: var(--bg); }

html.dark-mode .toast { background: #f0ece8; color: #141210; }
html.dark-mode .toast.success { background: #0d2418; color: #a7f3d0; border-left-color: #3ecf8e; }
html.dark-mode .toast.error { background: #240a0e; color: #fca5a5; border-left-color: var(--crimson); }
html.dark-mode .toast.info { background: #0a1524; color: #93c5fd; border-left-color: #60a5fa; }

html.dark-mode .nav-item:hover { background: var(--surface); }
html.dark-mode .nav-item.active { background: #2a0810; color: var(--crimson-light); }
html.dark-mode .user-card:hover { background: var(--surface); }

html.dark-mode .danger-zone { background: var(--red-bg); border-color: #4a1820; }

html.dark-mode .modal-backdrop { background: rgba(0,0,0,.7); }

html.dark-mode .img-upload-zone {
  background: var(--bg);
  border-color: var(--border-dark);
}
html.dark-mode .img-upload-zone:hover,
html.dark-mode .img-upload-zone.drag-over {
  background: #240a0e;
  border-color: var(--crimson-light);
}
html.dark-mode .img-upload-clear { background: var(--text); color: #141210; }