:root {
  --theme-bg: #09090b;
  --theme-surface: #111113;
  --theme-panel: #18181b;
  --theme-panel-strong: #27272a;
  --theme-field: #000000;
  --theme-text: #f4f4f5;
  --theme-muted: #d4d4d8;
  --theme-faint: #71717a;
  --theme-border: #3f3f46;
  --theme-border-strong: #52525b;
  --theme-primary: #f4f4f5;
  --theme-primary-text: #09090b;
  --theme-shadow: rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] {
  --theme-bg: #f3f6fb;
  --theme-surface: #ffffff;
  --theme-panel: #f8fafc;
  --theme-panel-strong: #e8eef7;
  --theme-field: #ffffff;
  --theme-text: #111827;
  --theme-muted: #334155;
  --theme-faint: #64748b;
  --theme-border: #cbd5e1;
  --theme-border-strong: #94a3b8;
  --theme-primary: #1f2937;
  --theme-primary-text: #ffffff;
  --theme-shadow: rgba(15, 23, 42, 0.14);
}

html,
body {
  transition: background-color .18s ease, color .18s ease;
}

.theme-toggle {
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .65rem;
  border: 1px solid var(--theme-border);
  background: var(--theme-panel);
  color: var(--theme-muted);
  box-shadow: 0 10px 30px var(--theme-shadow);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--theme-panel-strong);
  color: var(--theme-text);
}

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

.theme-toggle-below-header {
  top: 4.25rem;
}

html[data-theme="light"] body {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] .bg-black,
html[data-theme="light"] .bg-\[\#050505\],
html[data-theme="light"] .bg-\[\#090909\] {
  background-color: var(--theme-bg) !important;
}

html[data-theme="light"] .bg-zinc-950,
html[data-theme="light"] .bg-zinc-900,
html[data-theme="light"] .bg-zinc-900\/50,
html[data-theme="light"] .bg-black\/25,
html[data-theme="light"] .bg-black\/30 {
  background-color: var(--theme-surface) !important;
}

html[data-theme="light"] .bg-zinc-800,
html[data-theme="light"] .bg-zinc-700 {
  background-color: var(--theme-panel-strong) !important;
}

html[data-theme="light"] .bg-zinc-100 {
  background-color: var(--theme-primary) !important;
}

html[data-theme="light"] .text-black {
  color: var(--theme-primary-text) !important;
}

html[data-theme="light"] .border-zinc-900,
html[data-theme="light"] .border-zinc-800,
html[data-theme="light"] .border-zinc-700,
html[data-theme="light"] .border-zinc-600,
html[data-theme="light"] .border-zinc-500 {
  border-color: var(--theme-border) !important;
}

html[data-theme="light"] .text-zinc-100,
html[data-theme="light"] .text-zinc-200,
html[data-theme="light"] .text-zinc-300 {
  color: var(--theme-text) !important;
}

html[data-theme="light"] .text-zinc-400 {
  color: var(--theme-muted) !important;
}

html[data-theme="light"] .text-zinc-500,
html[data-theme="light"] .text-zinc-600,
html[data-theme="light"] .text-zinc-700 {
  color: var(--theme-faint) !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] label {
  color: var(--theme-text) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background-color: var(--theme-field) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: var(--theme-faint) !important;
}

html[data-theme="light"] .top-btn {
  background: var(--theme-surface) !important;
  color: var(--theme-muted) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 8px 24px var(--theme-shadow);
}

html[data-theme="light"] .top-btn:hover,
html[data-theme="light"] .hover\:bg-zinc-900:hover,
html[data-theme="light"] .hover\:bg-zinc-800:hover,
html[data-theme="light"] .hover\:bg-zinc-700:hover {
  background: var(--theme-panel-strong) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] .hover\:bg-white:hover {
  background: #111827 !important;
}

html[data-theme="light"] .bottom-btn {
  border-color: var(--theme-border) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(12px);
}

html[data-theme="light"] .card,
html[data-theme="light"] .archive-mini {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

html[data-theme="light"] .archive-mini:hover,
html[data-theme="light"] .template-active {
  background: var(--theme-panel-strong) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] .cat-archive,
html[data-theme="light"] .help-line {
  border-color: var(--theme-border) !important;
}

html[data-theme="light"] .manager-modal {
  background: rgba(15, 23, 42, 0.35) !important;
}

html[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb,
html[data-theme="light"] textarea::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
}

html[data-theme="light"] .shadow-black,
html[data-theme="light"] .shadow-black\/20,
html[data-theme="light"] .shadow-black\/30 {
  --tw-shadow-color: var(--theme-shadow) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}