#theme-toggle,
.theme-toggle-edge,
#theme-toggle-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

#theme-toggle:hover,
.theme-toggle-edge:hover,
#theme-toggle-nav:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--surface);
}

#theme-toggle:focus-visible,
.theme-toggle-edge:focus-visible,
#theme-toggle-nav:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

#theme-toggle i,
.theme-toggle-edge i,
#theme-toggle-nav i {
  transition: opacity 0.3s ease;
}

.theme-toggle-edge {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 1002;
}

@media (max-width: 768px) {
  .theme-toggle-edge {
    display: none !important;
  }
  #theme-toggle-nav {
    display: none !important;
  }
}

@media (min-width: 769px) {
  #theme-toggle-desktop {
    display: none !important;
  }
}

@keyframes theme-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.theme-toggle-btn.rotating i {
  animation: theme-spin 0.5s ease;
}