/* ============================================================
   HEADER COMPONENT  ·  v4
   Fixed dark "instrument bezel" — present on every screen, both acts.
   v4: the bezel now reads as machined metal — an edge-light along its
   bottom lip, the logo mark lit from within, a calmer glass blur.
   ============================================================ */
:root { --header-h: calc(52px + var(--sat)); }
.app-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  padding: var(--sat) 22px 0;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(24,21,16,.92), rgba(21,19,15,.82));
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--hairline);
  box-shadow: inset 0 -1px 0 rgba(247,242,230,0.04), 0 1px 12px rgba(8,7,5,.30);
}
.app-logo { display: flex; align-items: center; gap: 9px; }
.app-logo-mark {
  position: relative;
  width: 28px; height: 28px; border-radius: var(--r-sm); flex-shrink: 0;
  background: var(--grad-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-latin-display); font-weight: 800; font-size: 13px;
  color: var(--obsidian); letter-spacing: -0.02em;
  box-shadow: var(--edge-light-strong), 0 2px 8px rgba(196,154,74,.30);
}
/* a slow breath of light from the mark — the system is awake */
.app-logo-mark::after {
  content: ''; position: absolute; inset: -4px; border-radius: 7px; z-index: -1;
  background: radial-gradient(circle, rgba(221,184,104,.45), transparent 70%);
  opacity: .5; animation: markBreath var(--breath) ease-in-out infinite;
}
@keyframes markBreath { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .7; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .app-logo-mark::after { animation: none; } }
.app-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.app-logo-name { font-family: var(--ff-latin-display); font-size: 12px; font-weight: 700; color: var(--snow); letter-spacing: .01em; }
.app-logo-sub { font-family: var(--ff-mono); font-size: 8px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright); }

.lang-toggle {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong); background: rgba(247,242,230,.02);
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--mist); transition: border-color .25s var(--ease-out), color .25s var(--ease-out), background .25s var(--ease-out);
  box-shadow: var(--edge-light);
}
.lang-toggle:active { transform: translateY(1px); }
.lang-toggle:hover { border-color: var(--gold); color: var(--gold-bright); background: var(--gold-soft); }
.lang-toggle svg { width: 12px; height: 12px; opacity: .6; }