/* One predictable control: System → Light → Dark. Icons inherit the page palette. */
.theme-picker { margin-left: auto; flex-shrink: 0; }
#theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 10px; flex-shrink: 0;
  color: var(--ink); background: var(--subtle, var(--soft));
  border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; transition: color .18s, background .18s, border-color .18s;
}
#theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--chip, var(--soft)); }
#theme-toggle:active { transform: scale(.94); }
#theme-toggle [data-theme-icon] {
  display: block; width: 22px; height: 22px; flex: 0 0 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  animation: theme-reveal .2s ease-out;
}
#theme-toggle [hidden] { display: none !important; }
@keyframes theme-reveal { from { opacity: .25; transform: rotate(-25deg) scale(.85); } to { opacity: 1; transform: none; } }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0e1216; --ink: #e7edf3; --secondary: #b4bfc9; --muted: #94a2ae;
    --accent: #6cb4f2; --line: #28323b; --subtle: #151c23; --chip: #162b3e;
    --focus: #f5ba78; --header: rgb(14 18 22 / 96%);
  }
}
@media (prefers-reduced-motion: reduce) { #theme-toggle, #theme-toggle [data-theme-icon] { animation: none; transition: none; } }
@media print { :root, :root[data-theme] { color-scheme: light; } .theme-picker { display: none; } }