/* Header-only appearance; body and product content keep their own palette. */
.site-header{--header-ink:#f3f8f6;--header-muted:#b6cbc5;background:radial-gradient(ellipse at 18% 0%,rgba(131,166,149,.19),transparent 55%),linear-gradient(115deg,#203f3b 0%,#143b37 55%,#102d2b 100%);border-bottom:1px solid rgba(218,238,227,.14);box-shadow:0 8px 26px rgba(13,39,35,.18),inset 0 1px rgba(255,255,255,.09);transition:background .25s,color .25s,box-shadow .25s}
.site-header.scrolled{box-shadow:0 10px 30px rgba(13,39,35,.24),inset 0 1px rgba(255,255,255,.08)}
.site-header .site-brand,.site-header .main-nav a{color:var(--header-ink)}
.site-header .brand-en{color:var(--header-muted)}
.site-header .main-nav a:hover{color:#fff}
.site-header .nav-register{background:linear-gradient(145deg,#fff,#e8efeb);color:#173f39;border-color:rgba(255,255,255,.5);box-shadow:0 5px 16px rgba(0,0,0,.13),inset 0 1px #fff;white-space:nowrap}
.site-header .nav-shell{gap:22px}
.site-header .main-nav{gap:22px}
.header-theme-toggle{flex:0 0 40px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(221,239,232,.28);border-radius:50%;background:rgba(255,255,255,.07);color:#e9f2ee;font-size:18px;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.06);transition:background .2s,transform .2s,box-shadow .2s}
.header-theme-toggle:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.header-theme-toggle:focus-visible{outline:3px solid #f5a623;outline-offset:4px}
.site-header .mobile-menu-btn{background:rgba(255,255,255,.07);border-color:rgba(221,239,232,.28);color:#eef5f2}
.site-header .mobile-nav-open .main-nav{background:#193c37;border-color:#3d5b53}
.site-header .brand-logo-light{display:none}
html[data-header-theme="light"] .site-header{--header-ink:#29463f;--header-muted:#718783;background:linear-gradient(120deg,#fff,#f8fbf9);border-bottom-color:#e0e9e5;box-shadow:0 6px 24px rgba(17,53,49,.09)}
html[data-header-theme="light"] .site-header .main-nav a:hover{color:#0e3a38}
html[data-header-theme="light"] .site-header .nav-register{background:linear-gradient(135deg,#174b44,#103a35);color:#fff;border-color:#19453e}
html[data-header-theme="light"] .header-theme-toggle,html[data-header-theme="light"] .site-header .mobile-menu-btn{background:#f0f5f2;color:#234b42;border-color:#d6e2dc}
html[data-header-theme="light"] .header-theme-toggle:hover{background:#e3ede7}
html[data-header-theme="light"] .site-header .mobile-nav-open .main-nav{background:#fff;border-color:#dde8e5}
html[data-header-theme="light"] .site-header .brand-logo-dark{display:none}
html[data-header-theme="light"] .site-header .brand-logo-light{display:block}
@media(min-width:992px) and (max-width:1199.98px){.site-header .nav-shell{gap:12px}.site-header .main-nav{gap:12px}}
@media(max-width:991.98px){.site-header .nav-shell{gap:12px}.header-theme-toggle{margin-left:auto}.site-header .mobile-menu-btn{margin-left:0}.site-header .main-nav{gap:0}}
@media(max-width:480px){.site-header .brand-en{display:none!important}.site-header .nav-shell{gap:10px}}
@media(prefers-reduced-motion:reduce){.site-header,.header-theme-toggle{transition:none}}

/* Cross-fade the two gradient layers: background-image itself cannot interpolate. */
.site-header,html[data-header-theme="light"] .site-header{background:#173c36;isolation:isolate;transition:box-shadow .48s ease,border-color .48s ease}
.site-header::before,.site-header::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;transition:opacity .48s ease}
.site-header::before{background:radial-gradient(ellipse at 18% 0%,rgba(131,166,149,.19),transparent 55%),linear-gradient(115deg,#203f3b,#143b37 55%,#102d2b);opacity:1}
.site-header::after{background:linear-gradient(120deg,#fff,#f8fbf9);opacity:0}
html[data-header-theme="light"] .site-header::before{opacity:0}
html[data-header-theme="light"] .site-header::after{opacity:1}
.site-header .site-brand,.site-header .main-nav a,.site-header .brand-en{transition:color .48s ease}
.site-header .site-brand{display:grid;grid-template-columns:auto auto}
.site-header .site-brand>img{grid-area:1/1;display:block!important;transition:opacity .48s ease}
.site-header .site-brand>span{grid-area:1/2}
.site-header .brand-logo-dark{opacity:1}.site-header .brand-logo-light{opacity:0}
html[data-header-theme="light"] .site-header .brand-logo-dark{opacity:0}
html[data-header-theme="light"] .site-header .brand-logo-light{opacity:1}
.site-header .nav-register{background:#edf3ef;box-shadow:0 5px 16px rgba(0,0,0,.13);transition:background-color .48s ease,color .48s ease,border-color .48s ease,box-shadow .48s ease}
html[data-header-theme="light"] .site-header .nav-register{background:#143f39;border-color:#143f39;box-shadow:0 6px 18px rgba(20,63,57,.14)}
.site-header .nav-register:focus-visible{outline:3px solid #f5a623;outline-offset:4px}
.header-theme-toggle{position:relative;transition:background-color .48s ease,color .48s ease,border-color .48s ease,transform .2s ease;box-shadow:none}
.header-theme-toggle i{position:absolute;line-height:1;transition:opacity .35s ease,transform .48s ease}
.header-theme-toggle .theme-sun{opacity:1;transform:rotate(0deg) scale(1)}
.header-theme-toggle .theme-moon{opacity:0;transform:rotate(-45deg) scale(.7)}
html[data-header-theme="light"] .header-theme-toggle .theme-sun{opacity:0;transform:rotate(45deg) scale(.7)}
html[data-header-theme="light"] .header-theme-toggle .theme-moon{opacity:1;transform:rotate(0deg) scale(1)}
.site-header .mobile-menu-btn,.site-header .mobile-nav-open .main-nav{transition:background-color .48s ease,color .48s ease,border-color .48s ease}
@media(prefers-reduced-motion:reduce){.site-header,.site-header::before,.site-header::after,.site-header .site-brand,.site-header .main-nav a,.site-header .brand-en,.site-header .site-brand>img,.site-header .nav-register,.header-theme-toggle,.header-theme-toggle i,.site-header .mobile-menu-btn,.site-header .mobile-nav-open .main-nav{transition:none}}

/* Fixed header shrinks without changing document spacing or shifting the page. */
.site-header .nav-shell{transition:min-height .28s ease}
.site-header .site-brand>img{transition:opacity .48s ease,width .28s ease,height .28s ease}
.site-header .brand-cn{transition:font-size .28s ease}
.site-header .brand-en{transition:color .48s ease,font-size .28s ease}
.site-header .nav-register{transition:background-color .48s ease,color .48s ease,border-color .48s ease,box-shadow .48s ease,height .28s ease,padding .28s ease}
.site-header.header-compact .nav-shell{min-height:62px}
.site-header.header-compact .site-brand>img{width:35px;height:35px}
.site-header.header-compact .brand-cn{font-size:18px}
.site-header.header-compact .brand-en{font-size:8px}
.site-header.header-compact .nav-register{height:34px;padding-left:15px;padding-right:15px}
@media(min-width:992px){
 .site-header .main-nav a{transition:color .48s ease,padding .28s ease}
 .site-header.header-compact .main-nav a{padding-top:18px;padding-bottom:18px}
 .site-header.header-compact .main-nav a:after{bottom:10px}
}
@media(max-width:767.98px){
 .site-header.header-compact .nav-shell{min-height:58px}
 .site-header.header-compact .site-brand>img{width:32px;height:32px}
 .site-header.header-compact .brand-cn{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.site-header .nav-shell,.site-header .site-brand>img,.site-header .brand-cn,.site-header .brand-en,.site-header .nav-register,.site-header .main-nav a{transition:none}}
