.theme-toggle {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--text);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.theme-toggle:hover { border-color: var(--accent-500); transform: translateY(-2px); box-shadow: 0 0 16px color-mix(in srgb, var(--accent-500) 30%, transparent); }
.theme-toggle:active { transform: scale(0.98); }
.theme-toggle svg { width: 21px; height: 21px; position: absolute; transition: transform 0.45s var(--ease-out), opacity 0.3s ease; }
.theme-toggle .icon-sun { transform: translateY(0) rotate(0); opacity: 1; }
.theme-toggle .icon-moon { transform: translateY(28px) rotate(90deg); opacity: 0; }
[data-theme="dark"] .theme-toggle .icon-sun { transform: translateY(-28px) rotate(-90deg); opacity: 0; }
[data-theme="dark"] .theme-toggle .icon-moon { transform: translateY(0) rotate(0); opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .theme-toggle:hover { transform: none; box-shadow: none; }
  .theme-toggle:active { transform: scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
  .theme-toggle:hover, .theme-toggle:active { transform: none; }
  .theme-toggle svg { transition: none; }
}