/* HEADER — v4.7
   backdrop-filter is now conditional via html[data-quality] in base.css.
   Default here: solid background only (safe on all tiers).
   No will-change. No isolation. */
: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;
  /* Solid default — quality rules in base.css layer glass on top for high/medium */
  background: rgba(24,21,16,.96);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 12px rgba(8,7,5,.28);
  contain: layout style;
}
.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);
}
.app-logo-mark::after {
  content: ''; position: absolute; inset: -4px; border-radius: 7px; z-index: -1;
  background: radial-gradient(circle, rgba(221,184,104,.40), transparent 70%);
  opacity: .5; animation: markBreath var(--breath) ease-in-out infinite;
}
@keyframes markBreath { 0%,100% { opacity: .32; transform: scale(1); } 50% { opacity: .65; transform: scale(1.10); } }
@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: 6px; padding: 8px 14px; border-radius: var(--radius-pill);
  border: 2px solid var(--gold); background: var(--gold);
  font-family: var(--ff-mono); font-size: 11px; font-weight: 900; letter-spacing: .1em;
  color: #1a1400; transition: background .2s, box-shadow .2s, transform .1s;
  box-shadow: 0 0 0 3px rgba(212,175,55,.25), 0 3px 14px rgba(212,175,55,.35);
  min-width: 56px; min-height: 40px; justify-content: center; position: relative;
}
.lang-toggle:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(212,175,55,.2); }
.lang-toggle:hover  { background: var(--gold-bright); box-shadow: 0 0 0 4px rgba(212,175,55,.35), 0 4px 18px rgba(212,175,55,.45); }
.lang-toggle svg { width: 13px; height: 13px; opacity: .8; color: #1a1400; }
@media (max-width: 480px) {
  .lang-toggle { padding: 10px 16px; font-size: 11.5px; min-height: 44px; min-width: 60px; }
}