/* Shared navigation, with compact utilities and a continuous brand palette. */
#header{background:var(--paper);border-bottom:1px solid var(--line)}
#header .header-inner{max-width:1800px;margin:auto;min-height:108px;padding:24px 28px;gap:28px}
#header .brand{flex-shrink:0;padding:0}
#header .brand-art{position:relative;display:flex;align-items:center;gap:18px}
#header .brand-art:after{content:'';width:7px;height:7px;background:var(--yellow);flex:none;margin-left:-6px}
#header .brand-icon{width:46px;height:52px;flex:0 0 46px}
#header .brand-wordmark{width:218px;max-width:none}
#header .nav{margin-left:0;flex:1;justify-content:center;gap:clamp(15px,1.55vw,29px);font-size:15px;white-space:nowrap}
#header .nav>a,#header .nav>details>summary{min-height:48px;display:flex;align-items:center;padding:10px 0;gap:8px}
#header .nav>a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -3px var(--yellow);font-weight:700}
#header .actions{margin-left:0;padding-left:22px;border-left:1px solid var(--line);gap:18px;flex-shrink:0}
#header .actions>.icon-link{width:30px;height:42px;display:flex;align-items:center;justify-content:center}
#header .actions .icon-link>svg,#header .actions .icon-link>img:not(.avatar){width:25px;height:25px}
#header .actions>.account-link{width:auto;max-width:190px;gap:12px;padding-left:22px;margin-left:4px;border-left:1px solid var(--line);height:54px;text-decoration:none}
#header .account-link>span{display:block;min-width:0;font-size:14px;max-width:145px;overflow:hidden;text-overflow:ellipsis}
#header .header-login-title{display:block;line-height:1.5;white-space:nowrap}
#header .header-login-subtitle{display:block;font-size:11px;line-height:1.6;color:var(--muted);white-space:nowrap}
#header .count{background:var(--yellow);color:#171717;border:2px solid var(--paper);min-width:19px;height:19px;font:600 10px/15px sans-serif}
#header a:focus-visible,#header summary:focus-visible,#header button:focus-visible{outline:2px solid var(--yellow);outline-offset:5px}
[data-theme=dark] #header{background:linear-gradient(115deg,#111,#0c0c0c)}
[data-theme=dark] #header .nav>a[aria-current=page]{color:var(--yellow)}
@media(min-width:1191px){
 body>.topline,[data-theme=dark] body>.topline{min-height:56px;padding:8px 28px;gap:20px;flex-wrap:nowrap;border-bottom:1px solid #ffffff12;background:#191919;color:#ededed}
 body>.topline>span:first-child{font:10px/1.5 monospace;letter-spacing:1.8px;white-space:nowrap}
 body>.topline>a{border-left:1px solid #ffffff28;padding-left:20px;font-size:12px;letter-spacing:0;white-space:nowrap}
 body>.topline .preferences{margin-left:auto;gap:0;flex-wrap:nowrap;align-items:center}
 body>.topline .language-mark{display:none}
 body>.topline .preferences button{height:36px;min-height:36px;padding:7px 12px;font-size:12px;border-color:#444;letter-spacing:0;background:transparent;color:#e9e9e9}
 body>.topline .preferences [data-language=th]{border-radius:10px 0 0 10px}
 body>.topline .preferences [data-language=en]{border-radius:0;border-left:0;border-right:0}
 body>.topline .preferences [data-language=zh]{border-radius:0 10px 10px 0}
 body>.topline .preferences [data-language][aria-pressed=true]{background:var(--yellow);color:#171717;border-color:var(--yellow)}
 body>.topline .preferences button img{width:24px;height:17px}
 body>.topline #sitemap-toggle{border:0;border-right:1px solid #444;border-radius:0;padding-right:22px;margin-right:22px}
 body>.topline .preferences [data-language=ai]{margin-left:20px;border-radius:9px}
 body>.topline #theme-toggle{border:0;border-left:1px solid #444;border-radius:0;margin-left:20px;padding-left:20px;background:transparent;color:#ededed}
 body>.topline #theme-toggle .preference-icon{color:var(--yellow);width:23px;height:23px}
}
@media(min-width:1191px) and (max-width:1500px){
 #header .header-inner{padding:20px 24px;gap:20px;min-height:94px}
 #header .brand-art{gap:10px}#header .brand-icon{width:35px;height:43px;flex-basis:35px}#header .brand-wordmark{width:155px}
 #header .nav{font-size:12px;gap:16px}#header .actions{gap:12px;padding-left:16px}
 #header .actions>.account-link{padding-left:14px;gap:8px}#header .account-link>span{font-size:12px}
 body>.topline,[data-theme=dark] body>.topline{padding-inline:24px;gap:12px}body>.topline>span:first-child{font-size:8px;letter-spacing:1px}
 body>.topline .preferences button{padding-inline:9px}body>.topline #sitemap-toggle{margin-right:12px;padding-right:12px}
 body>.topline .preferences [data-language=ai]{margin-left:12px}body>.topline #theme-toggle{margin-left:12px;padding-left:12px}
}
@media(max-width:1190px){
 #header .header-inner{min-height:76px;padding:14px 22px;gap:16px}
 #header .brand-icon{width:34px;height:42px;flex-basis:34px}#header .brand-wordmark{width:158px}#header .brand-art{gap:10px}
 #header .actions{margin-left:auto;padding-left:16px;gap:14px}
 #header .menu-toggle{width:40px;height:40px;min-width:40px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink)}
 #mobile-menu-panel .account-link .header-login-title{display:block!important;font-size:14px;color:var(--ink)}
 #mobile-menu-panel .header-login-subtitle{display:block;font-size:12px;color:var(--muted)}
}
@media(max-width:600px){
 #header .header-inner{padding:12px;min-height:72px;gap:8px}
 #header .brand-icon{width:34px;height:42px;flex-basis:34px}#header .brand-wordmark{display:block;width:clamp(88px,27vw,132px)}#header .brand-art{gap:7px}#header .brand-art:after{width:5px;height:5px;margin-left:0}
 #header .actions{padding-left:0;border:0;gap:6px}#header .actions>.icon-link{width:26px;height:40px}
 #header .actions .icon-link>svg,#header .actions .icon-link>img:not(.avatar){width:22px;height:22px}
}