.dark-toggle {
  width: 40px;
  height: 40px;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  border-radius: 12px;
  cursor: pointer;

  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);

  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease,
    box-shadow 0.25s ease;
}

.dark-toggle:hover {
  background: #f4f6f8;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.dark-toggle i {
  font-size: 1.25rem;
  transition: color 0.25s ease, transform 0.35s ease;
}

.dark-toggle.icon-sun i {
  color: #f5a623;
}

html.dark-mode .dark-toggle {
  background: var(--bg-elevated);
  border: 1px solid var(--table-divider);
  box-shadow: none;
}

html.dark-mode .dark-toggle:hover {
  background: var(--form-bg-hover);
  transform: translateY(-2px);
}

html.dark-mode .dark-toggle.icon-moon i {
  color: #c4dcff;
}

/* ============================================
   ACCESSIBILITY
============================================ */

.dark-toggle:focus-visible {
  outline: 3px solid var(--form-border-focus);
  outline-offset: 3px;
}