/* Header navigation styled after the supplied pill mockup; existing links and account controls stay functional. */
.site-utility{display:flex;justify-content:flex-end;padding:8px max(5%,calc((100vw - 1320px)/2)) 0;background:var(--bg,#050d19)}
.site-announcements{display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:3px 12px 3px 4px;border:1px solid #f2f8fc17;border-radius:999px;background:var(--surface,#0b1a2a);color:var(--text,#f2f8fc);text-decoration:none;font-size:11px;font-weight:650;transition:background .2s,border-color .2s}
.site-announcements:hover{border-color:#f2f8fc35;background:var(--surface,#0b1a2a);color:var(--text,#f2f8fc)}
.site-announcements:focus-visible{outline:2px solid var(--brand,#16d7e8);outline-offset:3px}
.site-announcements-icon{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--brand,#16d7e8),var(--brand,#16d7e8));color:var(--brand-ink,#03121e)}
.site-announcements-icon svg{width:14px;height:14px;fill:currentColor}
body.browse-mode>.site-utility{display:none}
body>header:has(>.site-nav){padding-top:10px;padding-bottom:16px}
body>header>.site-nav{position:relative;display:flex;align-items:center;gap:2px;max-width:100%;padding:6px;border:1px solid #f2f8fc17;border-radius:999px;background:#0b1a2ac7;box-shadow:0 10px 40px -10px #000a,inset 0 1px 0 #f2f8fc0a;backdrop-filter:blur(18px) saturate(140%);isolation:isolate}
body>header>.site-nav .site-nav-indicator{position:absolute;left:0;top:6px;bottom:6px;width:0;border-radius:999px;background:linear-gradient(135deg,var(--brand,#16d7e8),var(--accent,#23e5b4));box-shadow:0 6px 22px -4px #23e5b4a6,inset 0 1px 0 #f2f8fc40;transform:translateX(0);transition:transform .38s cubic-bezier(.2,.8,.2,1),width .38s cubic-bezier(.2,.8,.2,1);pointer-events:none;opacity:0}
body>header>.site-nav .site-nav-indicator.is-ready{opacity:1}
body>header>.site-nav a,body>header>.site-nav .nav-watch{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 14px;border:0;border-radius:999px;background:transparent!important;color:var(--text-muted,#b0c0ce)!important;font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;box-shadow:none!important;transition:color .2s ease}
body>header>.site-nav a[hidden]{display:none!important}
body>header>.site-nav .site-nav-icon{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body>header>.site-nav a[href="/leaderboard"] .site-nav-icon{color:#f5c451}
body>header>.site-nav a[href="/leaderboard"].is-active .site-nav-icon{color:var(--text,#f2f8fc)}
body>header>.site-nav a:hover{background:#f2f8fc08!important;color:var(--text,#f2f8fc)!important}
body>header>.site-nav a.is-active,body>header>.site-nav a.is-active:hover{background:transparent!important;color:var(--text,#f2f8fc)!important;font-weight:650}
body>header>.site-nav a:focus-visible{outline:2px solid var(--brand,#16d7e8);outline-offset:-2px}
body>header>.nav-signup{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-right:calc(var(--zc-login-w,88px) + 9px);padding:9px 15px;border:1px solid #16d7e875;border-radius:999px;background:linear-gradient(130deg,var(--brand,#16d7e8),var(--accent,#23e5b4));color:var(--brand-ink,#03121e);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 7px 18px #16d7e830}
body>header>.nav-signup:hover{filter:brightness(1.12);color:var(--brand-ink,#03121e)}
body>header>.nav-signup:focus-visible{outline:2px solid var(--focus-ring,#68e5ef);outline-offset:3px}
body>header>.nav-signup[hidden]{display:none!important}
body>header>.nav-login[data-signed-in="true"]:has(.zc-header-badge)::before{display:none}
body>header>.nav-login .zc-header-badge{display:block;flex:none;width:32px;height:32px;object-fit:contain}
body>header>.nav-login .zc-header-badge :is(img,svg){display:block;width:100%;height:100%;object-fit:contain}
body>header>.nav-login .zc-header-account-text{white-space:nowrap}
body>header>.nav-login[data-signed-in="true"]:focus-visible{outline:2px solid var(--brand,#16d7e8);outline-offset:3px}
body>header:has(>.nav-signup:not([hidden]))>.zc-lang-head{margin-inline-end:calc(var(--zc-login-w,88px) + var(--zc-signup-w,76px) + 18px)}
.site-live-dot{display:inline-block;width:6px;height:6px;flex:none;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84}
body>header>.zc-lang-head .zc-lang-btn{border-color:#f2f8fc25;background:var(--surface,#0b1a2a);color:var(--text,#f2f8fc)}
body>header>.zc-lang-head .zc-lang-btn:hover,body>header>.zc-lang-head .zc-lang-btn[aria-expanded="true"]{border-color:var(--brand,#16d7e8);background:var(--surface,#0b1a2a);color:var(--text,#f2f8fc)}
#welcome .minutes-stat{height:46px;gap:12px;padding:6px 8px 6px 14px;border:1px solid transparent;background:linear-gradient(var(--surface,#0b1a2a),var(--surface,#0b1a2a)) padding-box,linear-gradient(90deg,#3ddc8480,#16d7e860,#23e5b440) border-box;box-shadow:none}
#welcome .minutes-stat:hover,#welcome .minutes-stat:focus-visible{background:linear-gradient(var(--surface,#0b1a2a),var(--surface,#0b1a2a)) padding-box,linear-gradient(90deg,#3ddc84,var(--brand-hover,#50e6ec),var(--accent,#23e5b4)) border-box;transform:translateY(-1px)}
.minutes-stat-live{display:inline-flex;align-items:center;gap:7px;color:#3ddc84;font-size:10px;font-weight:750;letter-spacing:.08em}
.minutes-stat-separator{width:1px;height:18px;flex:none;background:#f2f8fc20}
#welcome .minutes-stat-value{font-size:17px;font-weight:700;color:var(--text,#f2f8fc)}
#welcome .minutes-stat-label{color:var(--text-muted,#b0c0ce);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
#welcome .minutes-stat-label strong{color:var(--text,#f2f8fc);font-weight:650}
#welcome .minutes-stat-go{display:grid;place-items:center;width:30px;height:30px;margin-left:2px;border-radius:50%;background:#f2f8fc0b;color:var(--text,#f2f8fc);font-size:22px;line-height:1;transition:background .2s,transform .2s}
#welcome .minutes-stat:hover .minutes-stat-go{background:linear-gradient(135deg,var(--brand-hover,#50e6ec),var(--accent,#23e5b4));color:var(--brand-ink,#03121e)}
@media(max-width:1150px){
 body>header:has(>.site-nav){grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
 body>header>.site-nav{grid-column:1/-1;grid-row:2;justify-self:center;width:max-content;max-width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 body>header>.site-nav::-webkit-scrollbar{display:none}
 body>header>.nav-login{grid-column:2;grid-row:1}
 body>header>.nav-signup{grid-column:2;grid-row:1}
 /* Match i18n.css specificity so the globe cannot create an implicit third column. */
 body>header:has(>.site-nav)>.zc-lang-head{grid-column:2;grid-row:1}
 body>header>.zc-partner-pill{grid-column:2;grid-row:1}
}
/* Keep the complete desktop header on one aligned row at laptop widths. */
@media(min-width:1151px) and (max-width:1350px){
 body>header:has(>.site-nav){grid-template-columns:minmax(180px,1fr) auto minmax(265px,1fr);column-gap:12px}
 body>header>.brand .brand-logo-img{max-width:190px;height:auto}
 body>header>.site-nav a,body>header>.site-nav .nav-watch{gap:5px;padding:8px 9px;font-size:12px}
 body>header>.site-nav .site-nav-icon{width:15px;height:15px}
}
@media(max-width:700px){
 .site-utility{padding:7px 4% 0}
 .site-announcements{min-height:32px;font-size:10px}
 body>header:has(>.site-nav){padding:9px 4% 12px}
 body>header>.site-nav{justify-self:stretch;width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;gap:2px}
 body>header>.site-nav a,body>header>.site-nav .nav-watch{flex:none;min-height:38px;padding:8px 13px;font-size:12px}
 body>header>.site-nav a:not(.is-active){font-size:0!important;gap:0}
 body>header>.site-nav a:not(.is-active) .site-nav-icon{width:18px;height:18px}
 body>header>.site-nav a:not(.is-active) .site-live-dot{width:5px;height:5px;margin-left:4px}
 body>header>.nav-signup{min-height:36px;padding:7px 11px;margin-right:calc(var(--zc-login-w,76px) + 7px);font-size:11px}
 body>header:has(>.nav-signup:not([hidden]))>.zc-lang-head{margin-inline-end:calc(var(--zc-login-w,76px) + var(--zc-signup-w,67px) + 12px)}
 body>header:has(>.nav-signup:not([hidden])) .brand-logo-img{max-width:min(42vw,175px)!important;height:auto}
 #welcome .minutes-stat{gap:8px;height:42px;padding:5px 7px 5px 10px}
 #welcome .minutes-stat-label{font-size:11px}
 #welcome .minutes-stat-label>span{display:none}
 #welcome .minutes-stat-value{font-size:15px}
 #welcome .minutes-stat-go{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){body>header>.site-nav .site-nav-indicator,.site-announcements{transition:none}}
@media(max-width:430px){
 body>header:has(>.nav-signup:not([hidden])) .brand-logo-img{max-width:122px!important}
 body>header>.nav-login{min-width:0;padding:8px 9px;font-size:11px}
 body>header>.nav-login[data-signed-in="true"] .zc-header-account-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 body>header>.nav-signup{min-height:34px;padding:7px 8px;font-size:10.5px}
 body>header:has(>.nav-signup:not([hidden]))>.zc-lang-head .zc-lang-code{display:none}
 body>header:has(>.nav-signup:not([hidden]))>.zc-lang-head .zc-lang-btn{min-width:34px;padding:0 8px}
}