:root {
  color-scheme: light;
  --light-bg: #f4f5fb;
  --light-surface: #ffffff;
  --light-surface-soft: #f7f8fd;
  --light-surface-muted: #eef1f8;
  --light-surface-strong: #e4e8f2;
  --light-border: #dbe1ee;
  --light-border-soft: #ebeff6;
  --light-border-strong: #c9d1e3;
  --light-text: #1e2433;
  --light-text-soft: #556074;
  --light-text-muted: #7d8799;
  --light-text-faint: #98a2b3;
  --light-accent: #6d5ef3;
  --light-accent-strong: #5f4ee6;
  --light-accent-soft: #f0edff;
  --light-accent-soft-strong: #e4dfff;
  --light-success-soft: #e9f8f1;
  --light-success-text: #178760;
  --light-danger-soft: #fff0f4;
  --light-danger-text: #cf476c;
  --light-warning-soft: #fff6df;
  --light-warning-text: #b97d12;
  --light-overlay: rgba(17, 24, 39, 0.34);
  --light-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);

  --dark-bg: #16141d;
  --dark-surface: #1f1b2b;
  --dark-surface-soft: #262233;
  --dark-surface-muted: #2d2840;
  --dark-surface-strong: #393150;
  --dark-border: #3e3654;
  --dark-border-soft: #332d46;
  --dark-border-strong: #544673;
  --dark-text: #f4f1ff;
  --dark-text-soft: #cac2df;
  --dark-text-muted: #a69dbf;
  --dark-text-faint: #887fa3;
  --dark-accent: #9f83ff;
  --dark-accent-strong: #b69fff;
  --dark-accent-soft: #2f2843;
  --dark-accent-soft-strong: #3d3258;
  --dark-success-soft: #183427;
  --dark-success-text: #84dfaa;
  --dark-danger-soft: #3d1e31;
  --dark-danger-text: #ff8db4;
  --dark-warning-soft: #3c2f19;
  --dark-warning-text: #f1ca73;
  --dark-overlay: rgba(8, 10, 16, 0.72);
  --dark-shadow: 0 24px 64px rgba(6, 8, 14, 0.44);

  --theme-bg: var(--light-bg);
  --theme-surface: var(--light-surface);
  --theme-surface-soft: var(--light-surface-soft);
  --theme-surface-muted: var(--light-surface-muted);
  --theme-surface-strong: var(--light-surface-strong);
  --theme-border: var(--light-border);
  --theme-border-soft: var(--light-border-soft);
  --theme-border-strong: var(--light-border-strong);
  --theme-text: var(--light-text);
  --theme-text-soft: var(--light-text-soft);
  --theme-text-muted: var(--light-text-muted);
  --theme-text-faint: var(--light-text-faint);
  --theme-accent: var(--light-accent);
  --theme-accent-strong: var(--light-accent-strong);
  --theme-accent-soft: var(--light-accent-soft);
  --theme-accent-soft-strong: var(--light-accent-soft-strong);
  --theme-success-soft: var(--light-success-soft);
  --theme-success-text: var(--light-success-text);
  --theme-danger-soft: var(--light-danger-soft);
  --theme-danger-text: var(--light-danger-text);
  --theme-warning-soft: var(--light-warning-soft);
  --theme-warning-text: var(--light-warning-text);
  --theme-overlay: var(--light-overlay);
  --theme-shadow: var(--light-shadow);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: var(--dark-bg);
  --theme-surface: var(--dark-surface);
  --theme-surface-soft: var(--dark-surface-soft);
  --theme-surface-muted: var(--dark-surface-muted);
  --theme-surface-strong: var(--dark-surface-strong);
  --theme-border: var(--dark-border);
  --theme-border-soft: var(--dark-border-soft);
  --theme-border-strong: var(--dark-border-strong);
  --theme-text: var(--dark-text);
  --theme-text-soft: var(--dark-text-soft);
  --theme-text-muted: var(--dark-text-muted);
  --theme-text-faint: var(--dark-text-faint);
  --theme-accent: var(--dark-accent);
  --theme-accent-strong: var(--dark-accent-strong);
  --theme-accent-soft: var(--dark-accent-soft);
  --theme-accent-soft-strong: var(--dark-accent-soft-strong);
  --theme-success-soft: var(--dark-success-soft);
  --theme-success-text: var(--dark-success-text);
  --theme-danger-soft: var(--dark-danger-soft);
  --theme-danger-text: var(--dark-danger-text);
  --theme-warning-soft: var(--dark-warning-soft);
  --theme-warning-text: var(--dark-warning-text);
  --theme-overlay: var(--dark-overlay);
  --theme-shadow: var(--dark-shadow);
}

html,
body {
  min-height: 100%;
}

body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

body.theme-shell {
  background:
    radial-gradient(circle at top left, rgba(109, 94, 243, 0.05), transparent 28%),
    radial-gradient(circle at top right, rgba(148, 163, 184, 0.08), transparent 24%),
    var(--theme-bg) !important;
}

body.theme-auth-page {
  background:
    radial-gradient(circle at 18% 10%, rgba(109, 94, 243, 0.07), transparent 30%),
    radial-gradient(circle at 82% 0%, rgba(203, 213, 225, 0.2), transparent 28%),
    var(--theme-bg) !important;
}

html[data-theme="dark"] body.theme-shell,
html[data-theme="dark"] body.theme-auth-page {
  background:
    radial-gradient(circle at 18% 10%, rgba(159, 131, 255, 0.17), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(116, 92, 201, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0)),
    var(--theme-bg) !important;
}

::selection {
  background: rgba(109, 94, 243, 0.18);
}

html[data-theme="dark"] ::selection {
  background: rgba(159, 131, 255, 0.24);
}

.theme-auth-card {
  transition:
    background-color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

html[data-theme="dark"] .theme-auth-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow) !important;
}

.theme-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--theme-border);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
  transition:
    transform 0.2s ease,
    background-color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.theme-toggle-button:hover {
  transform: translateY(-1px);
  background: var(--theme-surface-soft);
}

.theme-toggle-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(109, 94, 243, 0.18);
}

html[data-theme="dark"] .theme-toggle-button {
  background: rgba(31, 27, 43, 0.86);
  border-color: var(--theme-border);
  box-shadow: 0 14px 30px rgba(6, 8, 14, 0.28);
}

html[data-theme="dark"] .theme-toggle-button:hover {
  background: var(--theme-surface-soft);
}

html[data-theme="dark"] .theme-toggle-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(159, 131, 255, 0.22);
}

.theme-toggle-icon {
  width: 1.45rem;
  height: 1.45rem;
  display: block;
}

.theme-toggle-floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 40;
}

@media (max-width: 768px) {
  .theme-toggle-floating {
    top: 0.875rem;
    right: 0.875rem;
  }
}

html[data-theme="dark"] .bg-white {
  background-color: var(--theme-surface) !important;
}

html[data-theme="dark"] .bg-slate-50 {
  background-color: var(--theme-surface-soft) !important;
}

html[data-theme="dark"] .bg-slate-100 {
  background-color: var(--theme-surface-muted) !important;
}

html[data-theme="dark"] .bg-slate-50\/50 {
  background-color: rgba(38, 34, 51, 0.74) !important;
}

html[data-theme="dark"] .bg-slate-300 {
  background-color: var(--theme-surface-strong) !important;
}

html[data-theme="dark"] .bg-indigo-50 {
  background-color: var(--theme-accent-soft) !important;
}

html[data-theme="dark"] .bg-indigo-50\/50,
html[data-theme="dark"] .bg-indigo-50\/60 {
  background-color: rgba(47, 40, 67, 0.82) !important;
}

html[data-theme="dark"] .bg-indigo-100 {
  background-color: var(--theme-accent-soft-strong) !important;
}

html[data-theme="dark"] .bg-indigo-600 {
  background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-strong)) !important;
}

html[data-theme="dark"] .bg-indigo-500 {
  background-color: var(--theme-accent) !important;
}

html[data-theme="dark"] .bg-blue-50 {
  background-color: var(--theme-accent-soft) !important;
}

html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-yellow-100 {
  background-color: var(--theme-warning-soft) !important;
}

html[data-theme="dark"] .bg-yellow-400 {
  background-color: var(--theme-warning-text) !important;
}

html[data-theme="dark"] .bg-orange-100 {
  background-color: rgba(124, 92, 41, 0.36) !important;
}

html[data-theme="dark"] .bg-red-50 {
  background-color: var(--theme-danger-soft) !important;
}

html[data-theme="dark"] .bg-green-50 {
  background-color: var(--theme-success-soft) !important;
}

html[data-theme="dark"] .bg-slate-900\/50,
html[data-theme="dark"] .bg-slate-900\/60,
html[data-theme="dark"] .bg-slate-900\/90 {
  background-color: var(--theme-overlay) !important;
}

html[data-theme="dark"] .bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.11) !important;
}

html[data-theme="dark"] .bg-white\/30 {
  background-color: rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] .bg-white\/50 {
  background-color: rgba(31, 27, 43, 0.72) !important;
}

html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-indigo-200 {
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .border-blue-200,
html[data-theme="dark"] .border-yellow-200,
html[data-theme="dark"] .border-yellow-300,
html[data-theme="dark"] .border-green-200,
html[data-theme="dark"] .border-red-200 {
  border-color: var(--theme-border-strong) !important;
}

html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-indigo-100 {
  border-color: var(--theme-border-soft) !important;
}

html[data-theme="dark"] .border-indigo-100\/50,
html[data-theme="dark"] .border-indigo-100\/80,
html[data-theme="dark"] .border-indigo-500\/50 {
  border-color: rgba(84, 70, 115, 0.72) !important;
}

html[data-theme="dark"] .border-white\/5 {
  border-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme="dark"] .text-slate-900 {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .text-slate-800 {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .text-slate-700 {
  color: var(--theme-text-soft) !important;
}

html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500 {
  color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-slate-300 {
  color: var(--theme-text-faint) !important;
}

html[data-theme="dark"] .text-indigo-600 {
  color: var(--theme-accent) !important;
}

html[data-theme="dark"] .text-indigo-500 {
  color: var(--theme-accent) !important;
}

html[data-theme="dark"] .text-indigo-700,
html[data-theme="dark"] .text-indigo-800 {
  color: var(--theme-accent-strong) !important;
}

html[data-theme="dark"] .text-indigo-700\/70 {
  color: rgba(202, 194, 223, 0.74) !important;
}

html[data-theme="dark"] .text-indigo-900 {
  color: #efe7ff !important;
}

html[data-theme="dark"] .text-indigo-100,
html[data-theme="dark"] .text-indigo-200 {
  color: #efe7ff !important;
}

html[data-theme="dark"] .text-blue-700 {
  color: var(--theme-accent-strong) !important;
}

html[data-theme="dark"] .text-red-600 {
  color: var(--theme-danger-text) !important;
}

html[data-theme="dark"] .text-red-700 {
  color: var(--theme-danger-text) !important;
}

html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-green-700 {
  color: var(--theme-success-text) !important;
}

html[data-theme="dark"] .text-yellow-600,
html[data-theme="dark"] .text-yellow-800 {
  color: var(--theme-warning-text) !important;
}

html[data-theme="dark"] .text-orange-600 {
  color: #f3bd73 !important;
}

html[data-theme="dark"] .hover\:bg-slate-50:hover {
  background-color: var(--theme-surface-soft) !important;
}

html[data-theme="dark"] .hover\:bg-slate-100:hover {
  background-color: var(--theme-surface-muted) !important;
}

html[data-theme="dark"] .hover\:bg-indigo-50:hover {
  background-color: var(--theme-accent-soft) !important;
}

html[data-theme="dark"] .hover\:bg-indigo-100:hover {
  background-color: var(--theme-accent-soft-strong) !important;
}

html[data-theme="dark"] .hover\:bg-indigo-700:hover {
  background: linear-gradient(135deg, var(--theme-accent-strong), #c8b6ff) !important;
}

html[data-theme="dark"] .hover\:bg-red-50:hover {
  background-color: var(--theme-danger-soft) !important;
}

html[data-theme="dark"] .hover\:border-indigo-400:hover {
  border-color: var(--theme-accent) !important;
}

html[data-theme="dark"] .hover\:text-indigo-600:hover {
  color: var(--theme-accent) !important;
}

html[data-theme="dark"] .hover\:text-indigo-800:hover {
  color: var(--theme-accent-strong) !important;
}

html[data-theme="dark"] .hover\:text-slate-600:hover {
  color: var(--theme-text-soft) !important;
}

html[data-theme="dark"] .focus\:bg-white:focus {
  background-color: var(--theme-surface) !important;
}

html[data-theme="dark"] :is(input, select, textarea) {
  color: var(--theme-text);
  caret-color: var(--theme-accent);
}

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

html[data-theme="dark"] option {
  background-color: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="dark"] input[type="file"]::file-selector-button {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

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

html[data-theme="dark"] aside.bg-white,
html[data-theme="dark"] header.bg-white,
html[data-theme="dark"] nav.bg-white {
  background-color: rgba(26, 23, 37, 0.9) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-2xl {
  box-shadow: var(--theme-shadow) !important;
}

html[data-theme="dark"] {
  scrollbar-color: var(--theme-border-strong) var(--theme-surface-soft);
}