/* Header v2 (27 sept., seara): o singură bară de sticlă pe lățimea paginii, dimensionată după Google Store (24px margine,
   bandă de 60px, logo la 44px de marginea ecranului, linkuri la 16px după logo, acțiunea contului la capăt) și cu materialul
   liquid glass din Axioma (axioma_5.html .lg / .rail-popover.lg; atelierul liquid-glass/material.css, NOTE-AXIOMA.md).
   Principiile Apple: conținutul trece pe sub bară (deferență), bara se ridică doar după derulare (adâncime), un singur accent
   (CTA-ul contului), ținte de 44px. Un singur strat de difuzie pentru toată bara (::before); linkurile și butoanele din ea sunt
   suprapuneri subțiri, nu alte plăci de sticlă. Panoul contului și meniul mobil sunt sticla de meniu (aproape opacă).
   Tokenii vin din tokens.css; breakpoint-uri (max-width): 900 / 580 / 380. O singură definiție pentru fiecare selector.
   Header-ele de dinainte (cardul provizoriu, pastila centrală): docs/design-alternatives/. */

/* == Stratul header-ului: sticky, transparent, fără ținte proprii (clicurile trec prin marginile lui spre pagină). ==
   Aici stau și rețetele comune: suprapunerile, umplerile de sticlă și umbrele (--glass-* sunt tokenii Axioma din tokens.css). */
.site-header{--header-hover:color-mix(in srgb,var(--ink) 6%,transparent);--header-current:color-mix(in srgb,var(--ink) 8%,transparent);--header-sheen:inset 0 .5px 0 var(--glass-inner),inset 0 0 0 .5px var(--glass-line);--bar-fill:color-mix(in srgb,var(--paper) 80%,transparent);--bar-light:color-mix(in srgb,var(--glass-light) 50%,transparent);--bar-floor:color-mix(in srgb,var(--glass-floor) 45%,transparent);--bar-rest:0 1px 2px -1px var(--glass-depth);--bar-raised:0 2px 3px -2px var(--glass-depth),0 10px 24px -12px var(--glass-depth);--menu-fill:color-mix(in srgb,var(--surface) 92%,transparent);--menu-light:color-mix(in srgb,var(--glass-light) 25%,transparent);--menu-shadow:0 2px 4px -2px var(--glass-depth),0 18px 40px -16px var(--glass-depth);--cta-ink:white;--cta-sheen:color-mix(in srgb,white 30%,transparent);position:sticky;top:0;z-index:35;display:flow-root;pointer-events:none}
/* În tema întunecată --blue e deschis (#a8c7fa), deci textul CTA-ului e albastrul închis din paleta Google (7.8:1). */
[data-theme='dark'] .site-header{--cta-ink:#062e6f}
/* Focusul și ancorele nu rămân sub bara sticky (WCAG 2.4.11): 12 + 60px de header + 8px de aer. */
html{scroll-padding-top:80px}

/* == Bara: corpul e transparent; ::before e sticla (reflexia de sus, podeaua, umplerea pe --paper, muchiile inset și difuzia
   din @supports), ::after e muchia optică (gradient conic mascat la 1px). == */
.site-header .header-bar{position:relative;isolation:isolate;display:flex;align-items:center;gap:var(--space-4);height:60px;margin:12px 24px 0;padding:0 var(--space-2) 0 var(--space-5);border-radius:var(--radius-pill);box-shadow:var(--bar-rest);pointer-events:auto;transition:box-shadow var(--dur-base) var(--ease)}
.site-header[data-scrolled='true'] .header-bar{box-shadow:var(--bar-raised)}
.site-header .header-bar::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(85% 160% at 28% 0,var(--bar-light),transparent 60%),radial-gradient(110% 70% at 50% 125%,var(--bar-floor),transparent 78%),var(--bar-fill);box-shadow:inset 0 0 0 .5px var(--glass-line),inset 0 2px 3px -2px var(--glass-inner),inset 0 -3px 4px -3px var(--glass-rim)}
.site-header .header-bar::after,.site-header .account-toggle::after,.site-header .account-panel::after,.mobile-nav::after{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from -40deg,var(--glass-rim),var(--glass-line) 55deg,transparent 100deg,var(--glass-line) 140deg,var(--glass-rim) 180deg,transparent 250deg,var(--glass-line) 310deg,var(--glass-rim));-webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);mask-composite:exclude}

/* == Identitate: emblema de 36px (bufnița 28px în compas) și numele; tagline-ul de 12px încape în bară pe desktop. == */
.site-header .identity{display:flex;align-items:center;flex-shrink:0;gap:10px;min-width:0;min-height:var(--control-size);border-radius:var(--radius-pill)}
.identity-emblem{position:relative;display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px}
.site-header .identity-emblem .owl-mascot{width:28px;height:28px}
.identity-compass{position:absolute;inset:0;width:36px;height:36px;color:var(--muted);opacity:.25;pointer-events:none}
.site-header .identity-name{font:700 16px/1.2 var(--sans);letter-spacing:-.02em;white-space:nowrap}
.site-header .identity-name small{display:block;margin-top:2px;font-size:var(--type-label);font-weight:400;line-height:1.2;letter-spacing:.12em;color:var(--muted)}

/* == Navigarea: la 16px după identitate, ținte de 44px aproape lipite. Hover = suprapunerea subțire; pagina curentă =
   suprapunerea puțin mai marcată, lumina de sus și un punct --blue sub etichetă (forma, nu doar culoarea). == */
.site-header .desktop-nav{display:flex;align-items:center;gap:2px;min-width:0;margin:0}
.site-header .desktop-nav a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-size);padding:0 14px;border-radius:var(--radius-pill);color:var(--ink);font:400 var(--type-ui)/1 var(--sans);white-space:nowrap;transition:background-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.site-header .desktop-nav a:hover{background:var(--header-hover)}
.site-header .desktop-nav a[aria-current='page']{background:var(--header-current);box-shadow:var(--header-sheen)}
.site-header .desktop-nav a[aria-current='page']::after{content:'';position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--blue)}
.site-header .desktop-nav a:focus-visible{outline:var(--focus-ring);outline-offset:-3px}
/* Urma de sub link (poziționată de header.js) nu mai are rol: pagina curentă are acum suprapunerea și punctul. */
.nav-trace{display:none}

/* == Contul, la capătul barei. Oaspete: CTA-ul „Intră în cont”, sticlă nuanțată cu --blue (Apple „tinted glass”): umplerea
   --blue 90%, reflexia doar în banda de sus (textul rămâne ≥ 4.5:1), podeaua și muchia Axioma. Autentificat: cercul de 44px
   cu inițialele (--blue pe --blue-soft) sau poza, numele complet în aria-label. == */
.site-header .account-menu{display:flex;margin-left:auto}
.site-header .account-toggle{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-size);min-width:var(--control-size);margin:0;padding:0 18px;border:0;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--blue) 90%,transparent);color:var(--cta-ink);font:700 var(--type-ui)/1 var(--sans);white-space:nowrap;cursor:pointer;box-shadow:0 2px 3px -2px var(--glass-depth),0 8px 18px -10px color-mix(in srgb,var(--blue) 55%,transparent);transition:background-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),scale .24s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.site-header .account-toggle::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(85% 55% at 28% 0,var(--cta-sheen),transparent 60%),radial-gradient(110% 60% at 50% 125%,color-mix(in srgb,var(--glass-floor) 35%,transparent),transparent 78%);box-shadow:inset 0 0 0 .5px var(--glass-line),inset 0 2px 3px -2px var(--glass-inner),inset 0 -3px 4px -3px var(--glass-rim)}
.site-header .account-toggle:hover{background:var(--blue);box-shadow:0 2px 4px -2px var(--glass-depth),0 12px 24px -12px color-mix(in srgb,var(--blue) 70%,transparent)}
.site-header .account-toggle:active{scale:.975}
.site-header .account-toggle[aria-expanded='true']{background:var(--blue)}
.site-header .account-icon{display:none;flex:none;width:20px;height:20px}
.site-header .account-toggle.is-signed-in{width:var(--control-size);padding:0;overflow:hidden;background:var(--blue-soft);color:var(--blue);box-shadow:0 2px 3px -2px var(--glass-depth),0 9px 22px -12px var(--glass-depth)}
.site-header .account-toggle.is-signed-in::before{background:radial-gradient(85% 160% at 28% 0,var(--menu-light),transparent 60%)}
/* Hover-ul cercului se depărtează de --blue (spre --surface), ca inițialele să rămână ≥ 4.5:1 în ambele teme. */
.site-header .account-toggle.is-signed-in:hover{background:color-mix(in srgb,var(--blue-soft) 80%,var(--surface));box-shadow:0 2px 4px -2px var(--glass-depth),0 12px 26px -12px var(--glass-depth)}
.site-header .account-initials{font:700 var(--type-label)/1 var(--sans);letter-spacing:.04em}
.site-header .account-photo{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* == Meniul (telefon): 44px, o lentilă clară în bară (suprapunere + muchie de lumină), fără difuzie proprie. == */
.site-header .menu-toggle{display:none;place-items:center;flex:0 0 var(--control-size);width:var(--control-size);height:var(--control-size);margin:0;padding:0;border:0;border-radius:50%;background:var(--header-hover);box-shadow:var(--header-sheen);color:var(--ink);cursor:pointer;transition:background-color var(--dur-fast) var(--ease)}
.site-header .menu-toggle:hover,.site-header .menu-toggle[aria-expanded='true']{background:var(--header-current)}
.menu-toggle-lines{position:relative;width:18px;height:12px}
.menu-toggle-lines::before,.menu-toggle-lines::after{content:'';position:absolute;left:0;width:18px;height:1.5px;border-radius:1px;background:currentColor;transition:transform var(--dur-fast) ease}
.menu-toggle-lines::before{top:2.5px}
.menu-toggle-lines::after{bottom:2.5px;left:5px;width:13px}
.menu-toggle[aria-expanded='true'] .menu-toggle-lines::before{transform:translateY(2.75px) rotate(45deg)}
.menu-toggle[aria-expanded='true'] .menu-toggle-lines::after{left:0;width:18px;transform:translateY(-2.75px) rotate(-45deg)}
.site-header .account-toggle:focus-visible,.site-header .menu-toggle:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* == Panoul contului: sticla de meniu Axioma (aproape opacă: --surface 92%, difuzie 20px, rază 24px, muchia și umbra glass),
   sub bară și aliniat la marginea ei dreaptă (bara e blocul de poziționare). Rânduri de 44px, text ≥ 12px. == */
.site-header .account-panel{position:absolute;z-index:2;top:calc(100% + var(--space-2));right:0;isolation:isolate;display:flex;flex-direction:column;width:min(280px,calc(100vw - 32px));padding:var(--space-3);border-radius:24px;box-shadow:var(--menu-shadow);color:var(--ink);text-align:left;animation:account-panel-in var(--dur-fast) var(--ease)}
.site-header .account-panel::before,.mobile-nav::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(85% 60% at 28% 0,var(--menu-light),transparent 60%),var(--menu-fill);box-shadow:inset 0 0 0 .5px var(--glass-line),inset 0 2px 3px -2px var(--glass-inner)}
.site-header .account-panel[hidden]{display:none}
.site-header .account-panel-group{display:contents}
.site-header .account-panel-title{margin:var(--space-1) var(--space-3) var(--space-2);color:var(--muted);font:700 var(--type-label)/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.site-header .account-panel-user{min-width:0;margin:var(--space-1) var(--space-3) var(--space-2)}
.site-header .account-panel-name{margin:0;font:700 var(--type-ui)/1.35 var(--sans);overflow-wrap:anywhere}
.site-header .account-panel-role{margin:2px 0 0;color:var(--muted);font:400 var(--type-small)/1.4 var(--sans)}
.site-header .account-panel-link{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-size);margin:0;padding:0 var(--space-3);border:0;border-radius:12px;background:transparent;color:var(--ink);font:400 var(--type-ui)/1.3 var(--sans);text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease)}
.site-header .account-panel-link:hover{background:var(--header-hover)}
.site-header .account-panel-link:focus-visible{outline:var(--focus-ring);outline-offset:-3px}
.site-header .account-panel-rule{height:0;margin:var(--space-2) var(--space-3);border:0;border-top:1px solid var(--line)}
.site-header .account-theme{justify-content:space-between}
.site-header .account-switch{position:relative;flex:0 0 34px;width:34px;height:20px;border:1px solid var(--control-border);border-radius:var(--radius-pill);background:transparent;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.site-header .account-switch::after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.site-header .account-theme[aria-pressed='true'] .account-switch{border-color:var(--blue);background:var(--blue)}
.site-header .account-theme[aria-pressed='true'] .account-switch::after{background:var(--surface);transform:translateX(14px)}

/* == Meniul mobil: copil al <header>, sub bară (top:100% = marginea de jos a header-ului), aceeași margine de 12px și
   aceeași sticlă de meniu ca panoul; rânduri de 48px. == */
.mobile-nav{position:absolute;z-index:34;top:calc(100% + var(--space-2));left:12px;right:12px;isolation:isolate;display:none;padding:var(--space-2);border-radius:24px;box-shadow:var(--menu-shadow);pointer-events:auto;animation:account-panel-in var(--dur-fast) var(--ease)}
.mobile-nav a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 var(--space-4);border-radius:16px;color:var(--ink);font:400 var(--type-copy)/1.3 var(--sans);transition:background-color var(--dur-fast) var(--ease)}
.mobile-nav a+a{margin-top:2px}
.mobile-nav a::after{content:'→';content:'→' / '';font-size:18px;opacity:.55}
.mobile-nav a:hover{background:var(--header-hover)}
.mobile-nav a[aria-current='page']{background:var(--header-current);font-weight:700;box-shadow:var(--header-sheen)}
.mobile-nav a:focus-visible{outline:var(--focus-ring);outline-offset:-3px}

/* == Difuzia: numai pe stratul ::before al celor trei suprafețe și numai unde există suport; textul nu trece prin filtru. == */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
.site-header .header-bar::before{-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.site-header .account-panel::before,.mobile-nav::before{-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%)}
@media (prefers-reduced-transparency:reduce){
.site-header .header-bar::before,.site-header .account-panel::before,.mobile-nav::before{-webkit-backdrop-filter:none;backdrop-filter:none}
}
}
/* Fără difuzie, sticla ar lăsa textul paginii să se vadă prin bară: umplerea devine opacă (și la transparență redusă). */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.site-header{--bar-fill:var(--paper);--menu-fill:var(--surface)}
}
@media (prefers-reduced-transparency:reduce){
.site-header{--bar-fill:var(--paper);--menu-fill:var(--surface)}
}

/* == Stări: la tastatură fără tranziții (focusul apare imediat). == */
.site-header[data-header-input='keyboard'] a,.site-header[data-header-input='keyboard'] button,.site-header[data-header-input='keyboard'] .menu-toggle-lines::before,.site-header[data-header-input='keyboard'] .menu-toggle-lines::after{transition:none}
@keyframes account-panel-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes account-panel-fade{from{opacity:0}}

@media (max-width:900px){
html{scroll-padding-top:76px}
.site-header .header-bar{height:56px;margin:12px 12px 0;padding:0 6px 0 14px;gap:var(--space-2)}
.site-header .desktop-nav{display:none}
.site-header .menu-toggle{display:grid}
.site-header .identity-name small{display:none}
.site-header .account-panel{width:min(300px,calc(100vw - 24px))}
.mobile-nav{display:block}
}
@media (max-width:580px){
.site-header .identity{gap:8px}
.identity-emblem{flex-basis:32px;width:32px;height:32px}
.site-header .identity-emblem .owl-mascot{width:26px;height:26px}
.identity-compass{width:32px;height:32px}
.site-header .identity-name{font-size:15px}
.site-header .account-toggle{padding:0 14px}
}
@media (max-width:380px){
.site-header .identity-name{font-size:14px}
.site-header .account-cta-label{display:none}
.site-header .account-icon{display:block}
.site-header .account-toggle{width:var(--control-size);padding:0}
}
@media (prefers-reduced-motion:reduce){
/* Politica din contract: duratele rămân (culoarea, fundalul și umbra se schimbă la fel), dispar doar mișcările. */
.site-header .account-panel,.mobile-nav{animation-name:account-panel-fade}
.site-header .account-toggle:active{scale:none}
.site-header .menu-toggle-lines::before,.site-header .menu-toggle-lines::after,.site-header .account-switch::after{transition:none}
}
@media (forced-colors:active){
.site-header .header-bar,.site-header .account-panel,.mobile-nav{border:1px solid CanvasText;background:Canvas}
.site-header .header-bar::before,.site-header .header-bar::after,.site-header .account-toggle::before,.site-header .account-toggle::after,.site-header .account-panel::before,.site-header .account-panel::after,.mobile-nav::before,.mobile-nav::after,.site-header .desktop-nav a[aria-current='page']::after{content:none}
.site-header .account-toggle,.site-header .menu-toggle{border:1px solid ButtonText}
.site-header .desktop-nav a[aria-current='page'],.mobile-nav a[aria-current='page']{text-decoration:underline}
/* Switch-ul își păstrează desenul: pista și butonul în culori de sistem, starea apăsată pe Highlight. */
.site-header .account-switch{forced-color-adjust:none;border-color:ButtonText;background:Canvas}
.site-header .account-switch::after{background:ButtonText}
.site-header .account-theme[aria-pressed='true'] .account-switch{border-color:Highlight;background:Highlight}
.site-header .account-theme[aria-pressed='true'] .account-switch::after{background:HighlightText}
.identity-compass{display:none}
}
@media print{
.site-header,.mobile-nav{display:none!important}
}