:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #19171e; --surface: #24202d; --text: #eeebf3;
  --muted: #b0aab9; --link: #bbabff; --line: #36313f;
  --button: #eeebf3; --button-text: #211c2b;
}
footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}
.footer-links { display: flex; justify-content: flex-end; gap: 20px; flex-wrap: wrap; }
.theme-picker {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  margin: 0;
  min-width: 0;
}
.theme-picker legend, .theme-picker input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.theme-picker label { cursor: pointer; }
.theme-picker span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.theme-picker svg { width: 14px; height: 14px; flex: none; }
.theme-picker input:checked + span { background: var(--line); color: var(--text); }
.theme-picker label:hover span { color: var(--text); }
.theme-picker input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 600px) {
  footer { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .footer-links { justify-content: center; }
}