.site-header-inner{
  --header-press-shift-y: 1px;
  --header-press-scale-soft: .985;
  --header-press-scale-icon: .965;
  --header-press-scale-avatar: .975;
}

.site-header-inner .mode-btn,
.site-header-inner .icon-btn,
.site-header-inner .user-btn{
  transition:
    transform .14s ease,
    background-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    filter .16s ease,
    opacity .16s ease;
}

.site-header-inner .mode-btn:not(.active):active{
  transform: translateY(var(--header-press-shift-y)) scale(var(--header-press-scale-soft));
  background: #e9eff8;
  color: #1f2937;
  box-shadow:
    inset 0 1px 2px rgba(15,23,42,.08),
    inset 0 0 0 1px rgba(15,23,42,.04);
}

.site-header-inner .mode-btn.active:active{
  transform: translateY(var(--header-press-shift-y)) scale(var(--header-press-scale-soft));
}

.site-header-inner .mode-toggle:has(.mode-btn.active:active) .mode-toggle-active-bg{
  filter: brightness(.965) saturate(1.06);
}

.site-header-inner .icon-btn:active{
  transform: translateY(var(--header-press-shift-y)) scale(var(--header-press-scale-icon));
  background: rgba(99,102,241,.10);
  color: #334155;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.1);
}

.site-header-inner .user-btn:active{
  transform: translateY(var(--header-press-shift-y)) scale(var(--header-press-scale-avatar));
  background: rgba(99,102,241,.08);
}

.site-header-inner .user-btn:active .user-avatar{
  filter: brightness(.97) saturate(1.03);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.16),
    inset 0 -1px 2px rgba(79,70,229,.14);
}

.dark .site-header-inner .mode-btn:not(.active):active{
  background: rgba(148,163,184,.16);
  color: #f8fafc;
  box-shadow:
    inset 0 1px 2px rgba(2,6,23,.28),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.dark .site-header-inner .mode-toggle:has(.mode-btn.active:active) .mode-toggle-active-bg{
  filter: brightness(.92) saturate(1.08);
}

.dark .site-header-inner .icon-btn:active{
  background: rgba(129,140,248,.16);
  color: #f8fafc;
  box-shadow: inset 0 1px 2px rgba(2,6,23,.3);
}

.dark .site-header-inner .user-btn:active{
  background: rgba(129,140,248,.14);
}

.dark .site-header-inner .user-btn:active .user-avatar{
  filter: brightness(1.03) saturate(1.04);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.12),
    inset 0 -1px 2px rgba(15,23,42,.28);
}
