.theme-toggle {
  min-width: 116px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  border: 1px solid var(--line, var(--viewer-line, #deddea)) !important;
  border-radius: 12px !important;
  color: var(--ink, var(--viewer-ink, #1c1e38)) !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: none !important;
  font: 700 .82rem 'DM Sans', system-ui, sans-serif !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease !important;
}

.theme-toggle:hover {
  border-color: var(--lilac, var(--violet, var(--viewer-accent, #7664d8))) !important;
  background: var(--lavender, var(--lav, #e9e5ff)) !important;
  transform: translateY(-1px) !important;
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--orange, var(--coral, #ff7956)) !important;
  outline-offset: 3px !important;
}

.theme-toggle__icon {
  width: 18px;
  font-size: 1.05rem;
  line-height: 1;
}

:root[data-theme='dark'] .theme-toggle {
  color: #f5f3ff !important;
  background: rgba(36, 36, 50, .92) !important;
  border-color: var(--line, var(--viewer-line, #4b4b60)) !important;
}

:root[data-theme='dark'] .theme-toggle:hover {
  background: var(--lavender, var(--lav, #343249)) !important;
}

.theme-toggle--floating {
  position: fixed !important;
  top: 18px !important;
  right: 76px !important;
  z-index: 1000 !important;
}

.auth-control {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 13px !important;
  border: 1px solid var(--line, var(--viewer-line, #deddea)) !important;
  border-radius: 12px !important;
  color: var(--ink, var(--viewer-ink, #1c1e38)) !important;
  background: rgba(255, 255, 255, .82) !important;
  font: 700 .82rem 'DM Sans', system-ui, sans-serif !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease !important;
}

.auth-control::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #9b9bad;
  content: '';
}

.auth-control.is-signed-in::before { background: #35a579; }
.auth-control:hover {
  border-color: var(--lilac, var(--violet, var(--viewer-accent, #7664d8))) !important;
  background: var(--lavender, var(--lav, #e9e5ff)) !important;
  transform: translateY(-1px) !important;
}
.auth-control:focus-visible { outline: 3px solid var(--orange, var(--coral, #ff7956)) !important; outline-offset: 3px !important; }
:root[data-theme='dark'] .auth-control {
  color: #f5f3ff !important;
  background: rgba(36, 36, 50, .92) !important;
  border-color: var(--line, var(--viewer-line, #4b4b60)) !important;
}
:root[data-theme='dark'] .auth-control:hover { background: var(--lavender, var(--lav, #343249)) !important; }
.topbar .auth-control,
.calc-topbar .auth-control { margin-left: auto !important; }
.topbar .auth-control + .theme-toggle,
.calc-topbar .auth-control + .theme-toggle { margin-left: 0 !important; }

.taskbar .theme-toggle {
  order: -1;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  .theme-toggle {
    width: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
  }

  .theme-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .theme-toggle--floating {
    right: 70px !important;
  }

  .auth-control--topbar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    color: var(--ink, var(--viewer-ink, #1c1e38)) !important;
    font-size: .7rem !important;
    text-overflow: ellipsis !important;
  }

  .auth-control--topbar::before {
    width: 7px;
    height: 7px;
  }

  :root[data-theme='dark'] .auth-control--topbar { color: #f5f3ff !important; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .auth-control {
    transition: none !important;
  }
}