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

html[data-theme="light"] {
  color-scheme: light;
  --colors-scale1: #f8fafc;
  --colors-scale2: #ffffff;
  --colors-scale3: #f8fafc;
  --colors-scale4: #eef2f7;
  --colors-scale5: #d8e1ec;
  --colors-scale6: #c1ccd8;
  --colors-scale7: #94a3b8;
  --colors-scale8: #64748b;
  --colors-scale9: #475569;
  --colors-scale10: #334155;
  --colors-scale11: #1e293b;
  --colors-scale12: #0f172a;
  --colors-brand: #3ecf8e;
  --colors-brand-hover: #34b27b;
}

html[data-theme="light"] body {
  background-color: var(--colors-scale2);
  color: var(--colors-scale12);
}

html[data-theme="light"] .page-loader {
  background: rgba(248, 250, 252, 0.82);
  color: var(--colors-brand);
}

html[data-theme="light"] .sh-time-input {
  color: var(--colors-scale12) !important;
}

html[data-theme="light"] .install-code {
  background: var(--colors-scale1);
  color: var(--colors-scale12);
}

html[data-theme="light"] .axis-label {
  fill: var(--colors-scale9);
}

html[data-theme="light"] .fc {
  --fc-today-bg-color: rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .fc-non-business {
  background-color: rgba(148, 163, 184, 0.09);
}

html[data-theme="light"] .widget-preview {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.26);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .w-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
  border-bottom-color: rgba(148, 163, 184, 0.2);
}

html[data-theme="light"] .w-body,
html[data-theme="light"] .w-input-area {
  background: #ffffff;
}

html[data-theme="light"] .w-mode-card,
html[data-theme="light"] .w-lead-field input,
html[data-theme="light"] .w-chip,
html[data-theme="light"] .w-fake-input {
  background: var(--colors-scale1);
  border-color: rgba(148, 163, 184, 0.28);
}

html[data-theme="light"] .w-msg.bot {
  background: #eef2f7;
  color: var(--colors-scale11);
}

html[data-theme="light"] ::selection {
  background: rgba(62, 207, 142, 0.22);
  color: var(--colors-scale12);
}

.theme-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--colors-scale5);
  background: var(--colors-scale3);
  color: var(--colors-scale11);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.theme-toggle-btn:hover {
  background: var(--colors-scale4);
  color: var(--colors-scale12);
  border-color: var(--colors-scale6);
}

.theme-toggle-btn:active {
  transform: translateY(1px);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--colors-brand);
  outline-offset: 2px;
}

.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
}

html[data-theme="light"] .theme-toggle-btn {
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}