.theme-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 4px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-mid);
  font: inherit;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.theme-toggle:hover { border-color: var(--line-strong); background: var(--paper-soft); color: var(--ink); }
.theme-toggle:active { transform: scale(.975); }
.theme-toggle:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.theme-toggle-label { min-width: 30px; font-size: 10px; font-weight: 720; text-align: left; }
.theme-scene {
  position: relative;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(17,17,15,.18);
  border-radius: 999px;
  background: linear-gradient(165deg, #92d4f3 0%, #c9e7f2 55%, #f7d5a5 100%);
  box-shadow: inset 0 -7px 11px rgba(246,169,75,.15);
  transition: background .45s ease, border-color .3s ease, box-shadow .45s ease;
}
.theme-scene::before {
  content: "";
  position: absolute;
  inset: auto -3px -4px;
  height: 11px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.2));
  transform: translateX(9px);
  transition: opacity .3s ease, transform .45s ease;
}
.theme-scene::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  top: 5px;
  left: 8px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 7px 2px #f8f1d5, 15px -1px #fff, 25px 3px #d9e7ff, 31px -1px #fff;
  opacity: 0;
  transition: opacity .35s ease;
}
.theme-orbit {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff8c8 0 17%, #ffd85f 38%, #f2a93b 100%);
  box-shadow: 0 0 9px rgba(255,190,64,.72);
  transition: transform .48s cubic-bezier(.22,.8,.2,1), background .35s ease, box-shadow .35s ease;
}
.theme-scene[data-scene="dark"] {
  background: linear-gradient(165deg, #111827 0%, #1e2941 58%, #27324d 100%);
  border-color: rgba(216,225,244,.2);
  box-shadow: inset 0 -8px 14px rgba(4,8,18,.42);
}
.theme-scene[data-scene="dark"]::before { opacity: .18; transform: translateX(-8px); background: linear-gradient(180deg, #53617b, #222c43); }
.theme-scene[data-scene="dark"]::after { opacity: 1; }
.theme-scene[data-scene="dark"] .theme-orbit {
  transform: translateX(21px);
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, #e4e8de 32%, #aeb8c2 100%);
  box-shadow: -3px 1px 0 -1px #8d98a5 inset, 0 0 8px rgba(218,229,244,.3);
}
.theme-scene[data-scene="auto"] { background: linear-gradient(90deg, #acdff4 0 48%, #1c2740 52% 100%); }
.theme-scene[data-scene="auto"]::before { opacity: .35; transform: translateX(3px); }
.theme-scene[data-scene="auto"]::after { opacity: .65; }
.theme-scene[data-scene="auto"] .theme-orbit {
  transform: translateX(11px);
  background: conic-gradient(from 90deg, #dce3eb 0 50%, #ffd45f 50% 100%);
  box-shadow: -4px 0 7px rgba(219,229,245,.2), 4px 0 7px rgba(255,189,63,.35);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-scene, .theme-scene::before, .theme-scene::after, .theme-orbit { transition: none !important; }
}

@media (max-width: 420px) {
  .theme-toggle { min-width: 54px; padding-right: 5px; }
  .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}