:root {
  --app-env-banner-height: 0px;
  --theme-bg: #e3e8e1;
  --theme-surface: #ffffff;
  --theme-surface-muted: #f3f4f6;
  --theme-text: #111827;
  --theme-text-soft: #4b5563;
  --theme-border: #d1d5db;
  --theme-accent: #16a34a;
  --theme-accent-strong: #15803d;
  --theme-accent-contrast: #ffffff;
  --theme-header: #16a34a;
  --theme-header-text: #ffffff;
  --theme-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #262626;
  --theme-surface: #333333;
  --theme-surface-muted: #3d3d3d;
  --theme-text: #f4ede5;
  --theme-text-soft: #d2c4b6;
  --theme-border: #5a5a5a;
  --theme-accent: #f08c2e;
  --theme-accent-strong: #ff9f43;
  --theme-accent-contrast: #1f1f1f;
  --theme-header: #2e2e2e;
  --theme-header-text: #fff4e8;
  --theme-shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
}

html,
body {
  background: var(--theme-bg);
  color: var(--theme-text);
}

body {
  transition: background-color 180ms ease, color 180ms ease;
}

.theme-topbar-shell {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 1rem 1rem 0;
}

.theme-topbar-shell.theme-topbar-shell--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.theme-topbar {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(107, 114, 128, 0.28);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--theme-shadow);
  backdrop-filter: blur(14px);
}

.theme-home-link {
  color: var(--theme-text);
  font-weight: 700;
  text-decoration: none;
}

.theme-home-link:hover {
  color: var(--theme-accent);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(107, 114, 128, 0.28);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  background: rgba(243, 244, 246, 0.88);
  color: var(--theme-text);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.theme-toggle:hover {
  border-color: rgba(240, 140, 46, 0.65);
  transform: translateY(-1px);
}

.theme-toggle-track {
  position: relative;
  width: 2.8rem;
  height: 1.55rem;
  border-radius: 999px;
  background: rgba(156, 163, 175, 0.65);
  transition: background-color 180ms ease;
}

.theme-toggle-thumb {
  position: absolute;
  top: 0.18rem;
  left: 0.2rem;
  width: 1.18rem;
  height: 1.18rem;
  border-radius: 999px;
  background: var(--theme-accent);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  transition: transform 180ms ease, background-color 180ms ease;
}

.theme-toggle[data-theme-current="dark"] .theme-toggle-track {
  background: rgba(240, 140, 46, 0.42);
}

.theme-toggle[data-theme-current="dark"] .theme-toggle-thumb {
  transform: translateX(1.2rem);
}

html[data-theme="dark"] a {
  color: #ffd4a6;
}

html[data-theme="dark"] a:hover {
  color: var(--theme-accent-strong);
}

html[data-theme="dark"] .theme-topbar {
  background: rgba(51, 51, 51, 0.9);
  border-color: rgba(255, 159, 67, 0.28);
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(61, 61, 61, 0.92);
  border-color: rgba(255, 159, 67, 0.24);
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] main.rounded-2xl,
html[data-theme="dark"] #mobileSidebar {
  background-color: var(--theme-surface) !important;
}

html[data-theme="dark"] .bg-slate-900,
html[data-theme="dark"] .bg-green-600,
html[data-theme="dark"] .bg-green-500 {
  background-color: var(--theme-header) !important;
}

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

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

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

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .font-bold,
html[data-theme="dark"] .font-semibold {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-t,
html[data-theme="dark"] .border-b,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-slate-400,
html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--theme-border) !important;
}

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

html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] footer {
  background-color: #2b2b2b !important;
}

html[data-theme="dark"] .bg-gray-100.rounded-full,
html[data-theme="dark"] .bg-gray-100.rounded-lg,
html[data-theme="dark"] .bg-gray-100.rounded-md,
html[data-theme="dark"] .bg-gray-100.px-2,
html[data-theme="dark"] .bg-gray-100.px-3,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100 {
  background-color: var(--theme-surface-muted) !important;
}

html[data-theme="dark"] .hover\:bg-gray-50:hover,
html[data-theme="dark"] .hover\:bg-gray-100:hover,
html[data-theme="dark"] .hover\:bg-white\/20:hover,
html[data-theme="dark"] .hover\:bg-white\/25:hover,
html[data-theme="dark"] .hover\:bg-white\/50:hover,
html[data-theme="dark"] .hover\:bg-green-100:hover,
html[data-theme="dark"] .hover\:bg-green-50:hover,
html[data-theme="dark"] .hover\:bg-green-600:hover,
html[data-theme="dark"] .hover\:bg-green-700:hover,
html[data-theme="dark"] .hover\:bg-rose-50:hover,
html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover {
  background-color: #464646 !important;
}

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

html[data-theme="dark"] .bg-green-500,
html[data-theme="dark"] .bg-green-600,
html[data-theme="dark"] .bg-green-700,
html[data-theme="dark"] .border-green-500,
html[data-theme="dark"] .border-green-600,
html[data-theme="dark"] .hover\:bg-green-600:hover,
html[data-theme="dark"] .hover\:bg-green-700:hover,
html[data-theme="dark"] .hover\:border-green-600:hover {
  background-color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  color: var(--theme-accent-contrast) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #2b2b2b;
  color: var(--theme-text);
  border-color: var(--theme-border);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #b7a99a;
}

html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-rose-50 {
  background-color: #3f3430 !important;
}

html[data-theme="dark"] .text-red-800,
html[data-theme="dark"] .text-rose-700,
html[data-theme="dark"] .text-rose-900 {
  color: #ffe3c2 !important;
}

html[data-theme="dark"] .border-red-500,
html[data-theme="dark"] .border-emerald-500,
html[data-theme="dark"] .border-rose-200,
html[data-theme="dark"] .border-rose-300 {
  border-color: var(--theme-accent) !important;
}

html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-100,
html[data-theme="dark"] .bg-red-300,
html[data-theme="dark"] .bg-green-300,
html[data-theme="dark"] .bg-slate-300 {
  background-color: #4a4030 !important;
}

html[data-theme="dark"] .bg-emerald-100 {
  background-color: #294438 !important;
}

html[data-theme="dark"] .bg-sky-50,
html[data-theme="dark"] .bg-sky-100 {
  background-color: #2d3e4d !important;
}

html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-900 {
  color: #ffe3c2 !important;
}

html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-800,
html[data-theme="dark"] .text-emerald-900 {
  color: #d8f5e3 !important;
}

html[data-theme="dark"] .text-sky-700,
html[data-theme="dark"] .text-sky-800,
html[data-theme="dark"] .text-sky-900 {
  color: #d9ecff !important;
}

html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-emerald-200,
html[data-theme="dark"] .border-sky-200 {
  border-color: #6b6254 !important;
}

html[data-theme="dark"] select:invalid {
  color: #b7a99a;
}

html[data-theme="dark"] .bg-black\/50,
html[data-theme="dark"] .bg-black\/60,
html[data-theme="dark"] .bg-black\/75 {
  background-color: rgba(16, 16, 16, 0.72) !important;
}

@media (max-width: 640px) {
  .theme-topbar-shell {
    padding: 0.75rem 0.75rem 0;
  }

  .theme-topbar-shell.theme-topbar-shell--overlay {
    position: sticky;
  }

  .theme-topbar {
    padding: 0.7rem 0.85rem;
  }

  .theme-toggle-text {
    font-size: 0.88rem;
  }
}