body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-width: 3.25rem;
  height: 2rem;
  padding: 0 0.6rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  background: transparent;
  font-size: 0.95rem;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.07);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-dropdown {
  position: relative;
  display: inline-block;
}

.theme-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  min-width: 8.5rem;
  padding: 0.35rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #111111;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  z-index: 70;
}

.theme-dropdown.open .theme-menu {
  display: block;
}

.theme-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: #d1d5db;
  font-size: 0.85rem;
  text-align: left;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
}

.theme-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.theme-option.selected {
  background: rgba(166, 26, 37, 0.2);
  color: #ffffff;
}

html[data-theme='light'] {
  color-scheme: light;
}

html[data-theme='light'] body,
html[data-theme='light'] .bg-\[\#0a0a0a\] {
  background-color: #f8fafc !important;
}

html[data-theme='light'] .bg-\[\#111\] {
  background-color: #ffffff !important;
}

html[data-theme='light'] .bg-\[\#1a1a1a\] {
  background-color: #f1f5f9 !important;
}

html[data-theme='light'] .from-\[\#111\] {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html[data-theme='light'] .to-\[\#0a0a0a\] {
  --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position) !important;
}

html[data-theme='light'] .text-white {
  color: #0f172a !important;
}

html[data-theme='light'] .text-gray-300 {
  color: #334155 !important;
}

html[data-theme='light'] .text-gray-400 {
  color: #475569 !important;
}

html[data-theme='light'] .text-gray-500 {
  color: #64748b !important;
}

html[data-theme='light'] .text-gray-600 {
  color: #94a3b8 !important;
}

html[data-theme='light'] .border-white\/5,
html[data-theme='light'] .border-white\/10,
html[data-theme='light'] .border-white\/20 {
  border-color: #cbd5e1 !important;
}

html[data-theme='light'] .hover\:text-white:hover {
  color: #0f172a !important;
}

html[data-theme='light'] .hover\:bg-white\/5:hover {
  background-color: rgba(15, 23, 42, 0.05) !important;
}

html[data-theme='light'] .hover\:border-white\/40:hover {
  border-color: #94a3b8 !important;
}

html[data-theme='light'] input::placeholder {
  color: #94a3b8 !important;
}

html[data-theme='light'] .btn-brand,
html[data-theme='light'] .btn-brand:hover,
html[data-theme='light'] .bg-\[\#A61A25\] {
  color: #ffffff !important;
}

html[data-theme='light'] .theme-toggle {
  border-color: #cbd5e1;
  color: #0f172a;
}

html[data-theme='light'] .theme-toggle:hover {
  border-color: #94a3b8;
  background: #e2e8f0;
}

html[data-theme='light'] .theme-menu {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

html[data-theme='light'] .theme-option {
  color: #334155;
}

html[data-theme='light'] .theme-option:hover {
  background: #f1f5f9;
  color: #0f172a;
}

html[data-theme='light'] .theme-option.selected {
  background: rgba(166, 26, 37, 0.12);
  color: #7f1d1d;
}

html[data-theme='dark'] {
  color-scheme: dark;
}