html[data-theme="dark"] {
  --line: #3D5360 !important;
  --muted: #C5D0D6 !important;
  --soft: #AFC0C9 !important;
}

html[data-theme] .btn.primary {
  background: var(--green-deep);
}

html[data-theme] .btn.primary:hover {
  background: #095C39;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border-color: #49606C;
  background-color: #16222C;
  color: #EAF0F3;
}

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

html[data-theme="dark"] .supportstatus.bad {
  color: #FCA5A5;
}

html[data-theme="dark"] .supportstatus:not(.bad) {
  color: #6CDDA8;
}

html[data-theme="dark"] .article-body mark {
  background: #6A511A;
  color: #F1F6F8;
}

/* The root theme is the single visual source of truth for the toggle icon. */
html[data-theme="light"] #themeToggle #iconMoon,
html[data-theme="dark"] #themeToggle #iconSun {
  display: block !important;
}

html[data-theme="light"] #themeToggle #iconSun,
html[data-theme="dark"] #themeToggle #iconMoon {
  display: none !important;
}

.mobile-theme-picker {
  display: none;
}

@media (max-width: 1199px) {
  .mobile-theme-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-theme-picker > div {
    display: flex;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    padding: 3px;
  }

  .mobile-theme-picker-label {
    font-size: 14px;
    color: var(--ink);
  }

  .mobile-theme-picker button {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    padding: 7px 11px;
    font: 700 12px var(--body);
    cursor: pointer;
  }

  .mobile-theme-picker button[aria-pressed="true"] {
    background: var(--green-soft);
    color: var(--green-deep);
  }

  html[data-theme="dark"] .mobile-theme-picker button[aria-pressed="true"] {
    color: #6CDDA8;
  }
}