/* ---------- header ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(6px);
  -webkit-backdrop-filter: saturate(1.4) blur(6px);
}
.brand {
  display: inline-flex;
  align-items: center;
}
.brand:hover {
  text-decoration: none;
}
.brand img {
  display: block;
  height: 28px;
  width: auto;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4),
    filter 0.25s ease;
}
.brand:hover img {
  transform: scale(1.04);
  filter: drop-shadow(
    0 4px 10px color-mix(in srgb, var(--brand) 35%, transparent)
  );
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.theme-toggle:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}
.theme-toggle:hover .icon-sun,
.theme-toggle:hover .icon-moon {
  transform: rotate(20deg);
}
.theme-toggle:active {
  transform: scale(0.94);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .icon-system {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .icon-system {
  display: none;
}
:root[data-theme-pref="light"] .theme-toggle .icon-sun {
  display: block;
}
:root[data-theme-pref="dark"] .theme-toggle .icon-moon {
  display: block;
}
:root[data-theme-pref="system"] .theme-toggle .icon-system {
  display: block;
}