/* Light / dark mode overrides. The default theme remains light. */
html[data-theme="dark"] {
  --black: #f5f5f5;
  --text: #e5e5e5;
  --muted: #a3a3a3;
  --soft: #737373;
  --line: #303030;
  --line-dark: #404040;
  --surface: #171717;
  --white: #171717;
  color-scheme: dark;
  background: #111;
}

html[data-theme="dark"] body {
  background: #111;
  color: #e5e5e5;
}

html[data-theme="dark"] .site-header {
  background: rgba(17,17,17,.96);
  border-color: #303030;
}

html[data-theme="dark"] .brand {
  color: #f5f5f5;
}

html[data-theme="dark"] .brand small {
  color: #737373;
}

html[data-theme="dark"] .streak-badge,
html[data-theme="dark"] .header-button,
html[data-theme="dark"] .icon-button {
  background: #222;
  border-color: #303030;
  color: #d4d4d4;
}

html[data-theme="dark"] .header-button:hover,
html[data-theme="dark"] .icon-button:hover {
  background: #2a2a2a;
  border-color: #404040;
}

html[data-theme="dark"] .streak-badge.active {
  color: #d4d4d4;
}

html[data-theme="dark"] .clean-card {
  background: #181818;
  border-color: #303030;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

html[data-theme="dark"] .day-button {
  color: #a3a3a3;
}

html[data-theme="dark"] .day-button:hover:not(:disabled) {
  background: #242424;
  color: #f5f5f5;
}

html[data-theme="dark"] .active-date strong,
html[data-theme="dark"] .prompt-card h1,
html[data-theme="dark"] .stats-header h2 {
  color: #f5f5f5;
}

html[data-theme="dark"] .date-pill {
  background: #f5f5f5;
  color: #171717;
}

html[data-theme="dark"] .date-pill.past,
html[data-theme="dark"] .category-badge {
  background: #222;
  border-color: #303030;
  color: #a3a3a3;
}

html[data-theme="dark"] .release-timer {
  color: #737373;
}

html[data-theme="dark"] .release-timer strong {
  color: #d4d4d4;
}

html[data-theme="dark"] .prompt-blank {
  color: #f5f5f5;
  text-decoration-color: #f5f5f5;
}

html[data-theme="dark"] .prompt-blank.empty {
  color: #737373;
}

html[data-theme="dark"] .community-hint > strong:first-child,
html[data-theme="dark"] .community-hint span strong {
  color: #d4d4d4;
}

html[data-theme="dark"] .community-hint {
  color: #737373;
}

html[data-theme="dark"] .answer-input {
  border-color: #404040;
  background: #111;
  color: #f5f5f5;
}

html[data-theme="dark"] .answer-input:focus {
  border-color: #f5f5f5;
  background: #171717;
  box-shadow: 0 0 0 1px #f5f5f5;
}

html[data-theme="dark"] .answer-input::placeholder,
html[data-theme="dark"] .answer-count,
html[data-theme="dark"] .answer-note {
  color: #737373;
}

html[data-theme="dark"] .primary-button {
  background: #f5f5f5;
  color: #171717;
}

html[data-theme="dark"] .primary-button:hover:not(:disabled) {
  background: #d4d4d4;
}

html[data-theme="dark"] .secondary-button {
  background: #181818;
  border-color: #303030;
  color: #d4d4d4;
}

html[data-theme="dark"] .secondary-button:hover {
  background: #242424;
}

html[data-theme="dark"] .answer-locked {
  background: #202020;
  border-color: #303030;
  color: #a3a3a3;
}

html[data-theme="dark"] .answer-locked strong {
  color: #f5f5f5;
}

html[data-theme="dark"] .locked-icon {
  color: #a3a3a3;
}

html[data-theme="dark"] .stats-header {
  border-color: #303030;
}

html[data-theme="dark"] .stats-icon {
  color: #d4d4d4;
}

html[data-theme="dark"] .stats-header p {
  color: #737373;
}

html[data-theme="dark"] .stats-tab {
  color: #a3a3a3;
}

html[data-theme="dark"] .stats-tab:hover {
  color: #f5f5f5;
  background: #222;
}

html[data-theme="dark"] .stats-tab.active {
  color: #f5f5f5;
  background: #242424;
}

html[data-theme="dark"] .search-wrap {
  background: #111;
  border-color: #303030;
  color: #737373;
}

html[data-theme="dark"] .search-wrap input {
  color: #f5f5f5;
}

html[data-theme="dark"] .search-wrap input::placeholder {
  color: #737373;
}

html[data-theme="dark"] .site-footer {
  color: #737373;
  border-color: #303030;
}

html[data-theme="dark"] .site-footer a {
  color: #a3a3a3;
}

html[data-theme="dark"] .error-state {
  background: #251717;
  border-color: #5b2525;
  color: #fca5a5;
}

html[data-theme="dark"] .modal-backdrop {
  background: rgba(0,0,0,.72);
}

html[data-theme="dark"] .modal-panel {
  background: #181818;
  border-color: #303030;
  color: #e5e5e5;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .archive-item {
  border-color: #303030;
}

html[data-theme="dark"] .modal-header h3 {
  color: #f5f5f5;
}

html[data-theme="dark"] .modal-description,
html[data-theme="dark"] .archive-item-meta {
  color: #8f8f8f;
}

html[data-theme="dark"] .archive-item {
  background: #202020;
  color: #e5e5e5;
}

html[data-theme="dark"] .archive-item:hover {
  background: #262626;
  border-color: #4a4a4a;
}

html[data-theme="dark"] .archive-item.active {
  background: #252525;
  border-color: #606060;
}

html[data-theme="dark"] .archive-date {
  color: #e5e5e5;
}

html[data-theme="dark"] .archive-prompt {
  color: #a3a3a3;
}

html[data-theme="dark"] .archive-count {
  background: #2a2a2a;
  border-color: #404040;
  color: #d4d4d4;
}

html[data-theme="dark"] .archive-arrow {
  color: #a3a3a3;
}

html[data-theme="dark"] .close-button,
html[data-theme="dark"] .modal-close-wide {
  background: #222;
  border-color: #303030;
  color: #d4d4d4;
}

html[data-theme="dark"] .close-button:hover,
html[data-theme="dark"] .modal-close-wide:hover {
  background: #2a2a2a;
  border-color: #404040;
  color: #f5f5f5;
}

html[data-theme="dark"] .archive-list::-webkit-scrollbar-track {
  background: #181818;
}

html[data-theme="dark"] .archive-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #4a4a4a;
}

html[data-theme="dark"] .archive-list::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a;
}

.theme-toggle {
  position: relative;
  width: 58px;
  height: 34px;
  flex: 0 0 58px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f5f5f5;
  color: #404040;
  transition: background .18s ease, border-color .18s ease;
}

.theme-toggle:hover {
  border-color: var(--line-dark);
}

.theme-toggle-track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  pointer-events: none;
}

.theme-toggle-icon {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .55;
}

.theme-toggle-icon svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #171717;
  transition: transform .2s cubic-bezier(.16,1,.3,1), background .18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

html[data-theme="dark"] .theme-toggle {
  background: #222;
  border-color: #404040;
  color: #d4d4d4;
}

html[data-theme="dark"] .theme-toggle-thumb {
  transform: translateX(24px);
  background: #f5f5f5;
}

html[data-theme="dark"] .theme-toggle-icon {
  opacity: .7;
}

@media (max-width: 560px) {
  .header-actions {
    gap: 6px;
  }

  .theme-toggle {
    width: 50px;
    flex-basis: 50px;
  }

  html[data-theme="dark"] .theme-toggle-thumb {
    transform: translateX(16px);
  }
}