.theme-toggle,
.locale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 72%);
}

.theme-toggle button,
.locale-toggle button {
  display: inline-flex;
  height: 2rem;
  min-width: 2.65rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 0.375rem;
  padding: 0 0.65rem;
  color: rgb(71 85 105);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.theme-toggle button:hover,
.locale-toggle button:hover {
  background: rgb(241 245 249 / 88%);
  color: rgb(15 23 42);
}

.theme-toggle button.is-active,
.locale-toggle button.is-active {
  background: rgb(15 23 42);
  color: white;
  box-shadow: 0 1px 2px rgb(15 23 42 / 20%);
}

.dark .theme-toggle,
.dark .locale-toggle {
  border-color: rgb(51 65 85);
  background: rgb(15 23 42 / 72%);
}

.dark .theme-toggle button,
.dark .locale-toggle button {
  color: rgb(203 213 225);
}

.dark .theme-toggle button:hover,
.dark .locale-toggle button:hover {
  background: rgb(30 41 59 / 88%);
  color: white;
}

.dark .theme-toggle button.is-active,
.dark .locale-toggle button.is-active {
  background: rgb(248 250 252);
  color: rgb(15 23 42);
  box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
}

html.light body,
html[data-ce-resolved-theme="light"] body {
  background: rgb(248 250 252) !important;
  color: rgb(15 23 42) !important;
}

html.dark body,
html[data-ce-resolved-theme="dark"] body {
  background: rgb(11 18 32) !important;
  color: rgb(248 250 252);
}

.dark .bg-white,
.dark .bg-stone-100 {
  background-color: rgb(21 30 46) !important;
}

.dark .bg-slate-50 {
  background-color: rgb(15 23 42) !important;
}

.dark .bg-slate-100 {
  background-color: rgb(30 41 59) !important;
}

.dark .bg-white\/60,
.dark .bg-white\/70 {
  background-color: rgb(17 24 39 / 78%) !important;
}

.dark .bg-stone-200\/70 {
  background-color: rgb(15 23 42 / 88%) !important;
}

.dark .bg-sky-100 {
  background-color: rgb(12 74 110 / 55%) !important;
}

.dark .bg-sky-600 {
  background-color: rgb(14 116 144) !important;
}

.dark .hover\:bg-sky-600:hover {
  background-color: rgb(8 145 178) !important;
}

.dark .hover\:bg-sky-700:hover {
  background-color: rgb(12 74 110) !important;
}

.dark .bg-amber-100 {
  background-color: rgb(120 53 15 / 45%) !important;
}

.dark .bg-emerald-50 {
  background-color: rgb(6 78 59 / 45%) !important;
}

.dark .bg-rose-50 {
  background-color: rgb(136 19 55 / 42%) !important;
}

.dark .bg-lime-100 {
  background-color: rgb(63 98 18 / 42%) !important;
}

.dark .bg-slate-950 {
  background-color: rgb(12 74 110) !important;
}

.dark .border-slate-200,
.dark .border-stone-300,
.dark .border-slate-800 {
  border-color: rgb(51 65 85) !important;
}

.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(30 41 59) !important;
}

.dark .text-slate-950,
.dark .text-slate-900 {
  color: rgb(248 250 252) !important;
}

.dark .text-slate-700,
.dark .text-slate-600,
.dark .text-slate-500 {
  color: rgb(226 232 240) !important;
}

.dark .text-slate-400 {
  color: rgb(148 163 184) !important;
}

.dark .text-sky-700 {
  color: rgb(125 211 252) !important;
}

.dark .text-sky-300,
.dark .text-sky-400 {
  color: rgb(125 211 252) !important;
}

.dark .text-amber-600,
.dark .text-amber-700,
.dark .text-amber-300 {
  color: rgb(251 191 36) !important;
}

.dark .text-emerald-600,
.dark .text-emerald-700,
.dark .text-emerald-300 {
  color: rgb(52 211 153) !important;
}

.dark .text-rose-600 {
  color: rgb(251 113 133) !important;
}

.dark .text-lime-700,
.dark .text-lime-300 {
  color: rgb(190 242 100) !important;
}

.dark input,
.dark select,
.dark textarea {
  background-color: rgb(15 23 42) !important;
  border-color: rgb(71 85 105) !important;
  color: rgb(248 250 252) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: rgb(148 163 184) !important;
}

html.light body,
html[data-ce-resolved-theme="light"] body {
  background: rgb(248 250 252) !important;
  color: rgb(15 23 42) !important;
}

html.dark body,
html[data-ce-resolved-theme="dark"] body {
  background: rgb(11 18 32) !important;
  color: rgb(248 250 252) !important;
}

html.dark body.bg-slate-50,
html[data-ce-resolved-theme="dark"] body.bg-slate-50 {
  background: rgb(11 18 32) !important;
  color: rgb(248 250 252) !important;
}

.dark .opacity-70 {
  opacity: 0.86 !important;
}

@media (max-width: 640px) {
  .theme-toggle,
  .locale-toggle {
    gap: 0.125rem;
  }

  .theme-toggle button,
  .locale-toggle button {
    min-width: 2.25rem;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
  }
}