.header{display:flex; align-items:center; margin-bottom:10px; background:var(--c-body-bg); color:var(--c-text); position:relative;}
.logo-normal{height:70px; margin-right:20px; filter:none;}
.logo-inversion{height:70px; margin-right:20px; filter:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-inversion{filter: invert(1) hue-rotate(180deg);}
}
:root[data-theme="dark"] .logo-inversion{filter: invert(1) hue-rotate(180deg);}
:root[data-theme="light"] .logo-inversion{filter:none;}

.centered-title{
  position:absolute; left:50%; transform:translateX(-50%);
  margin:0; font-size:24px;
}

.header-utility{
  position:absolute; top:6px; right:12px;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
}
.header-current-user{
  display:flex; align-items:center; font-size:.9rem; gap:6px;
  padding:4px 8px; border-radius:10px; background: color-mix(in srgb, var(--c-text) 4%, var(--c-body-bg));
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.username-highlight{
  background: color-mix(in srgb, var(--c-primary) 20%, transparent);
  border-radius:6px; padding:2px 8px; margin-left:6px; font-weight:bold;
}

.subheader{font-size:14px; margin:10px 0 15px;}

.logo-link{text-decoration:none; color:inherit;}
.logo-link h2{margin:0; font-weight:bold; font-size:1.5em;}

.theme-toggle{display:flex;}
.theme-toggle__button{
  position:relative; display:inline-flex; align-items:center; justify-content:space-between;
  width:70px; height:32px; padding:0 8px; gap:6px; margin-bottom:6px;
  border-radius:999px; border:1px solid var(--c-border);
  background: color-mix(in srgb, var(--c-text) 4%, var(--c-body-bg));
  cursor:pointer; color:var(--c-text);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.theme-toggle__button:hover{box-shadow:0 8px 14px rgba(0,0,0,.12);}
.theme-toggle__button:focus-visible{
  outline:2px solid color-mix(in srgb, var(--c-primary) 60%, transparent);
  outline-offset:3px;
}
.theme-toggle__thumb{
  position:absolute; top:2px; left:6px; width:26px; height:24px;
  border-radius:999px;
  background: color-mix(in srgb, var(--c-body-bg) 84%, var(--c-primary) 12%);
  border:1px solid color-mix(in srgb, var(--c-primary) 45%, var(--c-border));
  box-shadow:0 6px 12px rgba(0,0,0,.14);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.theme-toggle__icon{font-size:14px; line-height:1;}
.theme-toggle__button[data-mode="dark"] .theme-toggle__thumb{transform: translateX(28px);}