/* ================================================================
   THEMES
   - Accent themes (emerald, ocean, sunset, violet, dark, midnight)
     override the indigo accent via [data-theme].
   - Dark themes (dark, midnight) additionally remap the light
     palette to a dark palette (page/card/soft/input/text/border).
   ================================================================ */

html[data-theme="light"] { color-scheme: light; }
html[data-theme="emerald"] { color-scheme: light; }
html[data-theme="ocean"] { color-scheme: light; }
html[data-theme="sunset"] { color-scheme: light; }
html[data-theme="violet"] { color-scheme: light; }

/* ============ DARK PALETTE (CSS variables) ============ */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-body: #0f172a;
  --bg-card: #1e293b;
  --bg-soft: #334155;
  --bg-hover: #3b4b63;
  --border: #334155;
  --text-hi: #f1f5f9;
  --text-mid: #cbd5e1;
  --text-low: #94a3b8;
}

html[data-theme="midnight"] {
  color-scheme: dark;
  --bg-body: #020617;
  --bg-card: #0f172a;
  --bg-soft: #1e293b;
  --bg-hover: #283449;
  --border: #1e293b;
  --text-hi: #e2e8f0;
  --text-mid: #cbd5e1;
  --text-low: #94a3b8;
}

/* ================================================================
   ACCENT OVERRIDES
   ================================================================ */

/* ---------- emerald ---------- */
html[data-theme="emerald"] .bg-indigo-600 { background-color: #059669; }
html[data-theme="emerald"] .bg-indigo-700 { background-color: #047857; }
html[data-theme="emerald"] .bg-indigo-500 { background-color: #10b981; }
html[data-theme="emerald"] .bg-indigo-400 { background-color: #34d399; }
html[data-theme="emerald"] .text-indigo-600 { color: #059669; }
html[data-theme="emerald"] .text-indigo-700 { color: #047857; }
html[data-theme="emerald"] .text-indigo-500 { color: #10b981; }
html[data-theme="emerald"] .text-indigo-400 { color: #34d399; }
html[data-theme="emerald"] .text-indigo-100 { color: #d1fae5; }
html[data-theme="emerald"] .border-indigo-500 { border-color: #10b981; }
html[data-theme="emerald"] .border-indigo-600 { border-color: #059669; }
html[data-theme="emerald"] .border-indigo-400 { border-color: #34d399; }
html[data-theme="emerald"] .border-indigo-300 { border-color: #6ee7b7; }
html[data-theme="emerald"] .border-indigo-200 { border-color: #a7f3d0; }
html[data-theme="emerald"] .border-indigo-100 { border-color: #d1fae5; }
html[data-theme="emerald"] .bg-indigo-50 { background-color: #ecfdf5; }
html[data-theme="emerald"] .bg-indigo-100 { background-color: #d1fae5; }
html[data-theme="emerald"] .from-indigo-500 { --tw-gradient-from: #10b981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(16 185 129 / 0)); }
html[data-theme="emerald"] .from-indigo-600 { --tw-gradient-from: #059669; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(5 150 105 / 0)); }
html[data-theme="emerald"] .from-indigo-400 { --tw-gradient-from: #34d399; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(52 211 153 / 0)); }
html[data-theme="emerald"] .to-indigo-700 { --tw-gradient-to: #047857; }
html[data-theme="emerald"] .to-indigo-800 { --tw-gradient-to: #065f46; }
html[data-theme="emerald"] .to-indigo-900 { --tw-gradient-to: #064e3b; }
html[data-theme="emerald"] .to-indigo-500 { --tw-gradient-to: #10b981; }
html[data-theme="emerald"] .focus\:ring-indigo-500:focus { --tw-ring-color: #10b981; }
html[data-theme="emerald"] .focus\:border-indigo-500:focus { border-color: #10b981; }
html[data-theme="emerald"] .ring-indigo-500\/30 { --tw-ring-color: rgb(16 185 129 / 0.3); }

/* ---------- ocean ---------- */
html[data-theme="ocean"] .bg-indigo-600 { background-color: #0284c7; }
html[data-theme="ocean"] .bg-indigo-700 { background-color: #0369a1; }
html[data-theme="ocean"] .bg-indigo-500 { background-color: #0ea5e9; }
html[data-theme="ocean"] .bg-indigo-400 { background-color: #38bdf8; }
html[data-theme="ocean"] .text-indigo-600 { color: #0284c7; }
html[data-theme="ocean"] .text-indigo-700 { color: #0369a1; }
html[data-theme="ocean"] .text-indigo-500 { color: #0ea5e9; }
html[data-theme="ocean"] .text-indigo-400 { color: #38bdf8; }
html[data-theme="ocean"] .text-indigo-100 { color: #e0f2fe; }
html[data-theme="ocean"] .border-indigo-500 { border-color: #0ea5e9; }
html[data-theme="ocean"] .border-indigo-600 { border-color: #0284c7; }
html[data-theme="ocean"] .border-indigo-400 { border-color: #38bdf8; }
html[data-theme="ocean"] .border-indigo-300 { border-color: #7dd3fc; }
html[data-theme="ocean"] .border-indigo-200 { border-color: #bae6fd; }
html[data-theme="ocean"] .border-indigo-100 { border-color: #e0f2fe; }
html[data-theme="ocean"] .bg-indigo-50 { background-color: #f0f9ff; }
html[data-theme="ocean"] .bg-indigo-100 { background-color: #e0f2fe; }
html[data-theme="ocean"] .from-indigo-500 { --tw-gradient-from: #0ea5e9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(14 165 233 / 0)); }
html[data-theme="ocean"] .from-indigo-600 { --tw-gradient-from: #0284c7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(2 132 199 / 0)); }
html[data-theme="ocean"] .from-indigo-400 { --tw-gradient-from: #38bdf8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(56 189 248 / 0)); }
html[data-theme="ocean"] .to-indigo-700 { --tw-gradient-to: #0369a1; }
html[data-theme="ocean"] .to-indigo-800 { --tw-gradient-to: #075985; }
html[data-theme="ocean"] .to-indigo-900 { --tw-gradient-to: #0c4a6e; }
html[data-theme="ocean"] .to-indigo-500 { --tw-gradient-to: #0ea5e9; }
html[data-theme="ocean"] .focus\:ring-indigo-500:focus { --tw-ring-color: #0ea5e9; }
html[data-theme="ocean"] .focus\:border-indigo-500:focus { border-color: #0ea5e9; }
html[data-theme="ocean"] .ring-indigo-500\/30 { --tw-ring-color: rgb(14 165 233 / 0.3); }

/* ---------- sunset ---------- */
html[data-theme="sunset"] .bg-indigo-600 { background-color: #ea580c; }
html[data-theme="sunset"] .bg-indigo-700 { background-color: #c2410c; }
html[data-theme="sunset"] .bg-indigo-500 { background-color: #f97316; }
html[data-theme="sunset"] .bg-indigo-400 { background-color: #fb923c; }
html[data-theme="sunset"] .text-indigo-600 { color: #ea580c; }
html[data-theme="sunset"] .text-indigo-700 { color: #c2410c; }
html[data-theme="sunset"] .text-indigo-500 { color: #f97316; }
html[data-theme="sunset"] .text-indigo-400 { color: #fb923c; }
html[data-theme="sunset"] .text-indigo-100 { color: #ffedd5; }
html[data-theme="sunset"] .border-indigo-500 { border-color: #f97316; }
html[data-theme="sunset"] .border-indigo-600 { border-color: #ea580c; }
html[data-theme="sunset"] .border-indigo-400 { border-color: #fb923c; }
html[data-theme="sunset"] .border-indigo-300 { border-color: #fdba74; }
html[data-theme="sunset"] .border-indigo-200 { border-color: #fed7aa; }
html[data-theme="sunset"] .border-indigo-100 { border-color: #ffedd5; }
html[data-theme="sunset"] .bg-indigo-50 { background-color: #fff7ed; }
html[data-theme="sunset"] .bg-indigo-100 { background-color: #ffedd5; }
html[data-theme="sunset"] .from-indigo-500 { --tw-gradient-from: #f97316; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(249 115 22 / 0)); }
html[data-theme="sunset"] .from-indigo-600 { --tw-gradient-from: #ea580c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(234 88 12 / 0)); }
html[data-theme="sunset"] .from-indigo-400 { --tw-gradient-from: #fb923c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(251 146 60 / 0)); }
html[data-theme="sunset"] .to-indigo-700 { --tw-gradient-to: #c2410c; }
html[data-theme="sunset"] .to-indigo-800 { --tw-gradient-to: #9a3412; }
html[data-theme="sunset"] .to-indigo-900 { --tw-gradient-to: #7c2d12; }
html[data-theme="sunset"] .to-indigo-500 { --tw-gradient-to: #f97316; }
html[data-theme="sunset"] .focus\:ring-indigo-500:focus { --tw-ring-color: #f97316; }
html[data-theme="sunset"] .focus\:border-indigo-500:focus { border-color: #f97316; }
html[data-theme="sunset"] .ring-indigo-500\/30 { --tw-ring-color: rgb(249 115 22 / 0.3); }

/* ---------- violet ---------- */
html[data-theme="violet"] .bg-indigo-600 { background-color: #7c3aed; }
html[data-theme="violet"] .bg-indigo-700 { background-color: #6d28d9; }
html[data-theme="violet"] .bg-indigo-500 { background-color: #8b5cf6; }
html[data-theme="violet"] .bg-indigo-400 { background-color: #a78bfa; }
html[data-theme="violet"] .text-indigo-600 { color: #7c3aed; }
html[data-theme="violet"] .text-indigo-700 { color: #6d28d9; }
html[data-theme="violet"] .text-indigo-500 { color: #8b5cf6; }
html[data-theme="violet"] .text-indigo-400 { color: #a78bfa; }
html[data-theme="violet"] .text-indigo-100 { color: #ede9fe; }
html[data-theme="violet"] .border-indigo-500 { border-color: #8b5cf6; }
html[data-theme="violet"] .border-indigo-600 { border-color: #7c3aed; }
html[data-theme="violet"] .border-indigo-400 { border-color: #a78bfa; }
html[data-theme="violet"] .border-indigo-300 { border-color: #c4b5fd; }
html[data-theme="violet"] .border-indigo-200 { border-color: #ddd6fe; }
html[data-theme="violet"] .border-indigo-100 { border-color: #ede9fe; }
html[data-theme="violet"] .bg-indigo-50 { background-color: #f5f3ff; }
html[data-theme="violet"] .bg-indigo-100 { background-color: #ede9fe; }
html[data-theme="violet"] .from-indigo-500 { --tw-gradient-from: #8b5cf6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(139 92 246 / 0)); }
html[data-theme="violet"] .from-indigo-600 { --tw-gradient-from: #7c3aed; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(124 58 237 / 0)); }
html[data-theme="violet"] .from-indigo-400 { --tw-gradient-from: #a78bfa; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(167 139 250 / 0)); }
html[data-theme="violet"] .to-indigo-700 { --tw-gradient-to: #6d28d9; }
html[data-theme="violet"] .to-indigo-800 { --tw-gradient-to: #5b21b6; }
html[data-theme="violet"] .to-indigo-900 { --tw-gradient-to: #4c1d95; }
html[data-theme="violet"] .to-indigo-500 { --tw-gradient-to: #8b5cf6; }
html[data-theme="violet"] .focus\:ring-indigo-500:focus { --tw-ring-color: #8b5cf6; }
html[data-theme="violet"] .focus\:border-indigo-500:focus { border-color: #8b5cf6; }
html[data-theme="violet"] .ring-indigo-500\/30 { --tw-ring-color: rgb(139 92 246 / 0.3); }

/* ---------- dark (indigo accent, lightened for dark bg) ---------- */
html[data-theme="dark"] .text-indigo-600 { color: #a5b4fc; }
html[data-theme="dark"] .text-indigo-700 { color: #c7d2fe; }
html[data-theme="dark"] .text-indigo-500 { color: #818cf8; }
html[data-theme="dark"] .text-indigo-400 { color: #818cf8; }
html[data-theme="dark"] .text-indigo-200 { color: #a5b4fc; }
html[data-theme="dark"] .text-indigo-100 { color: #c7d2fe; }
html[data-theme="dark"] .text-indigo-800 { color: #c7d2fe; }
html[data-theme="dark"] .border-indigo-500 { border-color: #6366f1; }
html[data-theme="dark"] .border-indigo-600 { border-color: #6366f1; }
html[data-theme="dark"] .border-indigo-400 { border-color: #818cf8; }
html[data-theme="dark"] .border-indigo-300 { border-color: #6366f1; }
html[data-theme="dark"] .border-indigo-200 { border-color: #4f46e5; }
html[data-theme="dark"] .border-indigo-100 { border-color: rgb(99 102 241 / 0.3); }
html[data-theme="dark"] .focus\:ring-indigo-500:focus { --tw-ring-color: #6366f1; }
html[data-theme="dark"] .focus\:border-indigo-500:focus { border-color: #6366f1; }
html[data-theme="dark"] .ring-indigo-500\/30 { --tw-ring-color: rgb(99 102 241 / 0.3); }
html[data-theme="dark"] .from-indigo-600 { --tw-gradient-from: #6366f1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(99 102 241 / 0)); }
html[data-theme="dark"] .from-indigo-500 { --tw-gradient-from: #818cf8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(129 140 248 / 0)); }
html[data-theme="dark"] .from-indigo-400 { --tw-gradient-from: #a5b4fc; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(165 180 252 / 0)); }
html[data-theme="dark"] .from-indigo-700 { --tw-gradient-from: #4f46e5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(79 70 229 / 0)); }
html[data-theme="dark"] .from-indigo-50\/50 { --tw-gradient-from: rgb(99 102 241 / 0.18); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(15 23 42 / 0)); }
html[data-theme="dark"] .to-indigo-900 { --tw-gradient-to: #4338ca; }
html[data-theme="dark"] .to-indigo-800 { --tw-gradient-to: #4f46e5; }
html[data-theme="dark"] .to-indigo-700 { --tw-gradient-to: #4f46e5; }
html[data-theme="dark"] .to-indigo-600 { --tw-gradient-to: #6366f1; }
html[data-theme="dark"] .to-indigo-500 { --tw-gradient-to: #818cf8; }

/* ---------- midnight (blue accent, lightened for dark bg) ---------- */
html[data-theme="midnight"] .text-indigo-600 { color: #60a5fa; }
html[data-theme="midnight"] .text-indigo-700 { color: #93c5fd; }
html[data-theme="midnight"] .text-indigo-500 { color: #3b82f6; }
html[data-theme="midnight"] .text-indigo-400 { color: #3b82f6; }
html[data-theme="midnight"] .text-indigo-200 { color: #60a5fa; }
html[data-theme="midnight"] .text-indigo-100 { color: #93c5fd; }
html[data-theme="midnight"] .text-indigo-800 { color: #93c5fd; }
html[data-theme="midnight"] .border-indigo-500 { border-color: #3b82f6; }
html[data-theme="midnight"] .border-indigo-600 { border-color: #3b82f6; }
html[data-theme="midnight"] .border-indigo-400 { border-color: #60a5fa; }
html[data-theme="midnight"] .border-indigo-300 { border-color: #2563eb; }
html[data-theme="midnight"] .border-indigo-200 { border-color: #1d4ed8; }
html[data-theme="midnight"] .border-indigo-100 { border-color: rgb(59 130 246 / 0.3); }
html[data-theme="midnight"] .focus\:ring-indigo-500:focus { --tw-ring-color: #3b82f6; }
html[data-theme="midnight"] .focus\:border-indigo-500:focus { border-color: #3b82f6; }
html[data-theme="midnight"] .ring-indigo-500\/30 { --tw-ring-color: rgb(59 130 246 / 0.3); }
html[data-theme="midnight"] .from-indigo-600 { --tw-gradient-from: #3b82f6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(59 130 246 / 0)); }
html[data-theme="midnight"] .from-indigo-500 { --tw-gradient-from: #60a5fa; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(96 165 250 / 0)); }
html[data-theme="midnight"] .from-indigo-400 { --tw-gradient-from: #93c5fd; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(147 197 253 / 0)); }
html[data-theme="midnight"] .from-indigo-700 { --tw-gradient-from: #2563eb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(37 99 235 / 0)); }
html[data-theme="midnight"] .from-indigo-50\/50 { --tw-gradient-from: rgb(59 130 246 / 0.18); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(2 6 23 / 0)); }
html[data-theme="midnight"] .to-indigo-900 { --tw-gradient-to: #1e40af; }
html[data-theme="midnight"] .to-indigo-800 { --tw-gradient-to: #2563eb; }
html[data-theme="midnight"] .to-indigo-700 { --tw-gradient-to: #2563eb; }
html[data-theme="midnight"] .to-indigo-600 { --tw-gradient-to: #3b82f6; }
html[data-theme="midnight"] .to-indigo-500 { --tw-gradient-to: #60a5fa; }

/* ================================================================
   DARK BASE
   ================================================================ */
html[data-theme="dark"] body,
html[data-theme="midnight"] body {
  background-color: var(--bg-body);
  color: var(--text-hi);
}

html[data-theme="dark"] .bg-slate-50,
html[data-theme="midnight"] .bg-slate-50 { background-color: var(--bg-body); }

html[data-theme="dark"] .bg-white,
html[data-theme="midnight"] .bg-white { background-color: var(--bg-card); }

html[data-theme="dark"] .bg-slate-100,
html[data-theme="midnight"] .bg-slate-100 { background-color: var(--bg-soft); }

html[data-theme="dark"] .bg-slate-200,
html[data-theme="midnight"] .bg-slate-200 { background-color: var(--bg-hover); }

html[data-theme="dark"] .bg-slate-300,
html[data-theme="midnight"] .bg-slate-300 { background-color: var(--bg-hover); }

html[data-theme="dark"] .bg-slate-400,
html[data-theme="midnight"] .bg-slate-400 { background-color: var(--bg-hover); }

html[data-theme="dark"] .bg-slate-500,
html[data-theme="midnight"] .bg-slate-500 { background-color: #475569; }

html[data-theme="dark"] .bg-slate-600,
html[data-theme="midnight"] .bg-slate-600 { background-color: #64748b; }

html[data-theme="dark"] .bg-\[\#f8fafc\],
html[data-theme="midnight"] .bg-\[\#f8fafc\] { background-color: var(--bg-body); }

/* hover states */
html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="midnight"] .hover\:bg-slate-50:hover { background-color: var(--bg-soft); }
html[data-theme="dark"] .hover\:bg-slate-100:hover,
html[data-theme="midnight"] .hover\:bg-slate-100:hover { background-color: var(--bg-hover); }
html[data-theme="dark"] .hover\:bg-slate-200:hover,
html[data-theme="midnight"] .hover\:bg-slate-200:hover { background-color: var(--bg-hover); }
html[data-theme="dark"] .hover\:bg-white:hover,
html[data-theme="midnight"] .hover\:bg-white:hover { background-color: var(--bg-card); }
html[data-theme="dark"] .hover\:border-slate-300:hover,
html[data-theme="dark"] .hover\:border-slate-400:hover,
html[data-theme="midnight"] .hover\:border-slate-300:hover,
html[data-theme="midnight"] .hover\:border-slate-400:hover { border-color: var(--border); }

/* ============ DARK TEXT ============ */
html[data-theme="dark"] .text-slate-900,
html[data-theme="midnight"] .text-slate-900 { color: var(--text-hi); }
html[data-theme="dark"] .text-slate-800,
html[data-theme="midnight"] .text-slate-800 { color: var(--text-hi); }
html[data-theme="dark"] .text-slate-700,
html[data-theme="midnight"] .text-slate-700 { color: var(--text-hi); }
html[data-theme="dark"] .text-slate-600,
html[data-theme="midnight"] .text-slate-600 { color: var(--text-mid); }
html[data-theme="dark"] .text-slate-500,
html[data-theme="midnight"] .text-slate-500 { color: var(--text-mid); }
html[data-theme="dark"] .text-slate-400,
html[data-theme="midnight"] .text-slate-400 { color: var(--text-low); }
html[data-theme="dark"] .text-slate-300,
html[data-theme="midnight"] .text-slate-300 { color: var(--text-low); }

html[data-theme="dark"] .hover\:text-slate-700:hover,
html[data-theme="dark"] .hover\:text-slate-800:hover,
html[data-theme="dark"] .hover\:text-slate-900:hover,
html[data-theme="midnight"] .hover\:text-slate-700:hover,
html[data-theme="midnight"] .hover\:text-slate-800:hover,
html[data-theme="midnight"] .hover\:text-slate-900:hover { color: var(--text-hi); }
html[data-theme="dark"] .hover\:text-slate-600:hover,
html[data-theme="midnight"] .hover\:text-slate-600:hover { color: var(--text-mid); }

/* ============ DARK BORDERS ============ */
html[data-theme="dark"] .border-slate-100,
html[data-theme="midnight"] .border-slate-100 { border-color: var(--border); }
html[data-theme="dark"] .border-slate-200,
html[data-theme="midnight"] .border-slate-200 { border-color: var(--border); }
html[data-theme="dark"] .border-slate-300,
html[data-theme="midnight"] .border-slate-300 { border-color: var(--border); }
html[data-theme="dark"] .border-slate-400,
html[data-theme="midnight"] .border-slate-400 { border-color: var(--border); }
html[data-theme="dark"] .border-slate-500,
html[data-theme="midnight"] .border-slate-500 { border-color: var(--border); }
html[data-theme="dark"] .border-slate-600,
html[data-theme="midnight"] .border-slate-600 { border-color: var(--border); }
html[data-theme="dark"] .border-slate-800,
html[data-theme="midnight"] .border-slate-800 { border-color: var(--border); }

html[data-theme="dark"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
html[data-theme="midnight"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
html[data-theme="midnight"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="midnight"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }

/* ============ DARK INPUTS ============ */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="midnight"] input,
html[data-theme="midnight"] textarea,
html[data-theme="midnight"] select { color: var(--text-hi); }

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="midnight"] input::placeholder,
html[data-theme="midnight"] textarea::placeholder { color: var(--text-low); }

html[data-theme="dark"] select option,
html[data-theme="midnight"] select option { background: var(--bg-card); color: var(--text-hi); }

/* ============ DARK TRANSLUCENT WHITE ============ */
html[data-theme="dark"] .bg-white\/95,
html[data-theme="midnight"] .bg-white\/95 { background-color: rgb(30 41 59 / 0.95); }
html[data-theme="dark"] .bg-white\/90,
html[data-theme="midnight"] .bg-white\/90 { background-color: rgb(30 41 59 / 0.9); }
html[data-theme="dark"] .bg-white\/80,
html[data-theme="midnight"] .bg-white\/80 { background-color: rgb(30 41 59 / 0.8); }
html[data-theme="dark"] .bg-white\/70,
html[data-theme="midnight"] .bg-white\/70 { background-color: rgb(30 41 59 / 0.7); }
html[data-theme="dark"] .bg-white\/60,
html[data-theme="midnight"] .bg-white\/60 { background-color: rgb(30 41 59 / 0.6); }
html[data-theme="dark"] .bg-white\/50,
html[data-theme="midnight"] .bg-white\/50 { background-color: rgb(30 41 59 / 0.5); }
html[data-theme="dark"] .bg-white\/40,
html[data-theme="midnight"] .bg-white\/40 { background-color: rgb(30 41 59 / 0.4); }
html[data-theme="dark"] .bg-white\/30,
html[data-theme="midnight"] .bg-white\/30 { background-color: rgb(30 41 59 / 0.3); }
html[data-theme="dark"] .bg-white\/20,
html[data-theme="midnight"] .bg-white\/20 { background-color: rgb(30 41 59 / 0.2); }
html[data-theme="dark"] .bg-white\/10,
html[data-theme="midnight"] .bg-white\/10 { background-color: rgb(30 41 59 / 0.1); }
html[data-theme="dark"] .bg-white\/5,
html[data-theme="midnight"] .bg-white\/5 { background-color: rgb(30 41 59 / 0.05); }
html[data-theme="dark"] .bg-white\/15,
html[data-theme="midnight"] .bg-white\/15 { background-color: rgb(30 41 59 / 0.15); }

/* black overlays stay dark in dark mode */
html[data-theme="dark"] .bg-black\/30,
html[data-theme="dark"] .bg-black\/40,
html[data-theme="dark"] .bg-black\/50,
html[data-theme="dark"] .bg-black\/60,
html[data-theme="midnight"] .bg-black\/30,
html[data-theme="midnight"] .bg-black\/40,
html[data-theme="midnight"] .bg-black\/50,
html[data-theme="midnight"] .bg-black\/60 { background-color: rgb(2 6 23 / 0.6); }

/* slate opacity variants */
html[data-theme="dark"] .bg-slate-50\/50,
html[data-theme="midnight"] .bg-slate-50\/50 { background-color: rgb(30 41 59 / 0.5); }
html[data-theme="dark"] .bg-slate-100\/20,
html[data-theme="dark"] .bg-slate-100\/30,
html[data-theme="dark"] .bg-slate-100\/50,
html[data-theme="midnight"] .bg-slate-100\/20,
html[data-theme="midnight"] .bg-slate-100\/30,
html[data-theme="midnight"] .bg-slate-100\/50 { background-color: rgb(51 65 85 / 0.5); }
html[data-theme="dark"] .bg-slate-200\/60,
html[data-theme="midnight"] .bg-slate-200\/60 { background-color: rgb(71 85 105 / 0.6); }
html[data-theme="dark"] .bg-slate-500\/10,
html[data-theme="midnight"] .bg-slate-500\/10 { background-color: rgb(100 116 139 / 0.15); }
html[data-theme="dark"] .bg-slate-900\/40,
html[data-theme="midnight"] .bg-slate-900\/40 { background-color: rgb(2 6 23 / 0.6); }
html[data-theme="dark"] .border-slate-200\/50,
html[data-theme="dark"] .border-slate-200\/60,
html[data-theme="dark"] .border-slate-200\/80,
html[data-theme="midnight"] .border-slate-200\/50,
html[data-theme="midnight"] .border-slate-200\/60,
html[data-theme="midnight"] .border-slate-200\/80 { border-color: rgb(51 65 85 / 0.6); }
html[data-theme="dark"] .border-slate-500\/20,
html[data-theme="midnight"] .border-slate-500\/20 { border-color: rgb(100 116 139 / 0.3); }
html[data-theme="dark"] .divide-slate-200\/60 > :not([hidden]) ~ :not([hidden]),
html[data-theme="midnight"] .divide-slate-200\/60 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(51 65 85 / 0.6); }
html[data-theme="dark"] .placeholder-slate-500::placeholder,
html[data-theme="midnight"] .placeholder-slate-500::placeholder { color: var(--text-low); }
html[data-theme="dark"] .placeholder\:text-slate-600::placeholder,
html[data-theme="midnight"] .placeholder\:text-slate-600::placeholder { color: var(--text-low); }

/* ============ DARK SOFT TINTED BACKGROUNDS ============ */
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="midnight"] .bg-indigo-50 { background-color: rgb(99 102 241 / 0.12); }
html[data-theme="dark"] .bg-indigo-100,
html[data-theme="midnight"] .bg-indigo-100 { background-color: rgb(99 102 241 / 0.18); }
html[data-theme="dark"] .bg-emerald-50,
html[data-theme="midnight"] .bg-emerald-50 { background-color: rgb(16 185 129 / 0.12); }
html[data-theme="dark"] .bg-emerald-100,
html[data-theme="midnight"] .bg-emerald-100 { background-color: rgb(16 185 129 / 0.18); }
html[data-theme="dark"] .bg-rose-50,
html[data-theme="midnight"] .bg-rose-50 { background-color: rgb(244 63 94 / 0.12); }
html[data-theme="dark"] .bg-rose-100,
html[data-theme="midnight"] .bg-rose-100 { background-color: rgb(244 63 94 / 0.18); }
html[data-theme="dark"] .bg-amber-50,
html[data-theme="midnight"] .bg-amber-50 { background-color: rgb(245 158 11 / 0.12); }
html[data-theme="dark"] .bg-amber-100,
html[data-theme="midnight"] .bg-amber-100 { background-color: rgb(245 158 11 / 0.18); }
html[data-theme="dark"] .bg-red-50,
html[data-theme="midnight"] .bg-red-50 { background-color: rgb(239 68 68 / 0.12); }
html[data-theme="dark"] .bg-red-100,
html[data-theme="midnight"] .bg-red-100 { background-color: rgb(239 68 68 / 0.18); }
html[data-theme="dark"] .bg-sky-50,
html[data-theme="midnight"] .bg-sky-50 { background-color: rgb(14 165 233 / 0.12); }
html[data-theme="dark"] .bg-sky-100,
html[data-theme="midnight"] .bg-sky-100 { background-color: rgb(14 165 233 / 0.18); }
html[data-theme="dark"] .bg-blue-50,
html[data-theme="midnight"] .bg-blue-50 { background-color: rgb(59 130 246 / 0.12); }
html[data-theme="dark"] .bg-orange-50,
html[data-theme="midnight"] .bg-orange-50 { background-color: rgb(249 115 22 / 0.12); }

html[data-theme="dark"] .hover\:bg-rose-50:hover,
html[data-theme="midnight"] .hover\:bg-rose-50:hover { background-color: rgb(244 63 94 / 0.15); }
html[data-theme="dark"] .hover\:bg-rose-100:hover,
html[data-theme="midnight"] .hover\:bg-rose-100:hover { background-color: rgb(244 63 94 / 0.2); }

/* ============ DARK TINTED BORDERS ============ */
html[data-theme="dark"] .border-emerald-100,
html[data-theme="dark"] .border-emerald-200,
html[data-theme="midnight"] .border-emerald-100,
html[data-theme="midnight"] .border-emerald-200 { border-color: rgb(16 185 129 / 0.35); }
html[data-theme="dark"] .border-rose-100,
html[data-theme="dark"] .border-rose-200,
html[data-theme="midnight"] .border-rose-100,
html[data-theme="midnight"] .border-rose-200 { border-color: rgb(244 63 94 / 0.35); }
html[data-theme="dark"] .border-amber-100,
html[data-theme="dark"] .border-amber-200,
html[data-theme="midnight"] .border-amber-100,
html[data-theme="midnight"] .border-amber-200 { border-color: rgb(245 158 11 / 0.35); }
html[data-theme="dark"] .border-red-100,
html[data-theme="dark"] .border-red-200,
html[data-theme="midnight"] .border-red-100,
html[data-theme="midnight"] .border-red-200 { border-color: rgb(239 68 68 / 0.35); }
html[data-theme="dark"] .border-sky-100,
html[data-theme="midnight"] .border-sky-100 { border-color: rgb(14 165 233 / 0.35); }
html[data-theme="dark"] .border-blue-100,
html[data-theme="midnight"] .border-blue-100 { border-color: rgb(59 130 246 / 0.35); }
html[data-theme="dark"] .border-green-100,
html[data-theme="dark"] .border-green-200,
html[data-theme="dark"] .border-green-300,
html[data-theme="midnight"] .border-green-100,
html[data-theme="midnight"] .border-green-200,
html[data-theme="midnight"] .border-green-300 { border-color: rgb(16 185 129 / 0.35); }
html[data-theme="dark"] .border-orange-300,
html[data-theme="midnight"] .border-orange-300 { border-color: rgb(249 115 22 / 0.35); }

/* ============ DARK STATUS TEXT (lightened) ============ */
html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .text-emerald-700,
html[data-theme="midnight"] .text-emerald-600,
html[data-theme="midnight"] .text-emerald-700 { color: #34d399; }
html[data-theme="dark"] .text-rose-500,
html[data-theme="dark"] .text-rose-600,
html[data-theme="dark"] .text-rose-400,
html[data-theme="midnight"] .text-rose-500,
html[data-theme="midnight"] .text-rose-600,
html[data-theme="midnight"] .text-rose-400 { color: #fb7185; }
html[data-theme="dark"] .text-amber-500,
html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-400,
html[data-theme="midnight"] .text-amber-500,
html[data-theme="midnight"] .text-amber-600,
html[data-theme="midnight"] .text-amber-700,
html[data-theme="midnight"] .text-amber-400 { color: #fbbf24; }
html[data-theme="dark"] .text-red-400,
html[data-theme="dark"] .text-red-500,
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .text-red-900,
html[data-theme="midnight"] .text-red-400,
html[data-theme="midnight"] .text-red-500,
html[data-theme="midnight"] .text-red-600,
html[data-theme="midnight"] .text-red-700,
html[data-theme="midnight"] .text-red-900 { color: #f87171; }
html[data-theme="dark"] .text-sky-500,
html[data-theme="dark"] .text-sky-700,
html[data-theme="midnight"] .text-sky-500,
html[data-theme="midnight"] .text-sky-700 { color: #38bdf8; }
html[data-theme="dark"] .text-blue-500,
html[data-theme="dark"] .text-blue-600,
html[data-theme="midnight"] .text-blue-500,
html[data-theme="midnight"] .text-blue-600 { color: #60a5fa; }
html[data-theme="dark"] .text-purple-500,
html[data-theme="midnight"] .text-purple-500 { color: #a78bfa; }
html[data-theme="dark"] .text-green-500,
html[data-theme="dark"] .text-green-700,
html[data-theme="midnight"] .text-green-500,
html[data-theme="midnight"] .text-green-700 { color: #34d399; }
html[data-theme="dark"] .text-orange-600,
html[data-theme="midnight"] .text-orange-600 { color: #fb923c; }
html[data-theme="dark"] .text-emerald-400,
html[data-theme="midnight"] .text-emerald-400 { color: #6ee7b7; }
html[data-theme="dark"] .text-emerald-500,
html[data-theme="midnight"] .text-emerald-500 { color: #34d399; }

/* ============ DARK DECOR & GRADIENTS ============ */
html[data-theme="dark"] .from-indigo-50,
html[data-theme="midnight"] .from-indigo-50 { --tw-gradient-from: var(--bg-card); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(15 23 42 / 0)); }
html[data-theme="dark"] .via-white,
html[data-theme="midnight"] .via-white { --tw-gradient-to: var(--bg-body); --tw-gradient-stops: var(--tw-gradient-from), var(--bg-card), var(--bg-body); }
html[data-theme="dark"] .to-white,
html[data-theme="midnight"] .to-white { --tw-gradient-to: var(--bg-card); }

html[data-theme="dark"] .shadow-xl,
html[data-theme="midnight"] .shadow-xl { box-shadow: 0 20px 25px -5px rgb(2 6 23 / 0.5), 0 8px 10px -6px rgb(2 6 23 / 0.4); }
html[data-theme="dark"] .shadow-lg,
html[data-theme="midnight"] .shadow-lg { box-shadow: 0 10px 15px -3px rgb(2 6 23 / 0.5), 0 4px 6px -4px rgb(2 6 23 / 0.4); }
html[data-theme="dark"] .shadow-md,
html[data-theme="midnight"] .shadow-md { box-shadow: 0 4px 6px -1px rgb(2 6 23 / 0.4), 0 2px 4px -2px rgb(2 6 23 / 0.3); }
html[data-theme="dark"] .shadow-sm,
html[data-theme="midnight"] .shadow-sm { box-shadow: 0 1px 2px 0 rgb(2 6 23 / 0.4); }
html[data-theme="dark"] .shadow-\[0_0_15px_rgba\(20\,184\,166\,0\.3\)\],
html[data-theme="midnight"] .shadow-\[0_0_15px_rgba\(20\,184\,166\,0\.3\)\] { box-shadow: 0 0 15px rgb(20 184 166 / 0.15); }

/* ============ SCROLLBAR (dark) ============ */
html[data-theme="dark"] ::-webkit-scrollbar-track,
html[data-theme="midnight"] ::-webkit-scrollbar-track { background: var(--bg-body); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb,
html[data-theme="midnight"] ::-webkit-scrollbar-thumb { background: var(--bg-hover); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover { background: var(--text-low); }