/* Shared navigation, including default and PJSK appearances. */
.topbar.site-navigation { height:60px; flex-shrink:0; display:flex; align-items:center; padding:0 24px; gap:14px; background:var(--surface-glass); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); position:relative; z-index:30; }
.site-navigation .topbar-btn, .site-navigation .appearance-trigger { width:36px; height:36px; flex-shrink:0; border:1px solid var(--border); border-radius:50%; background:var(--surface); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:background .18s,color .18s,border-color .18s; }
.site-navigation .topbar-btn:hover { color:var(--accent); border-color:var(--accent); }
.site-navigation .topbar-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.site-navigation .topbar-title { flex:1; min-width:0; font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-tools, .site-navigation .topbar-theme { display:flex; align-items:center; gap:12px; }
.site-navigation .nav-sidebar-toggle, .site-navigation .nav-tools-toggle { display:none; }
.qq-icon { width:18px; height:20px; background:currentColor; mask:url('/icons/qq.svg') center/contain no-repeat; -webkit-mask:url('/icons/qq.svg') center/contain no-repeat; }
.nav-menu-lines { position:relative; width:18px; height:18px; }
.nav-menu-lines > span { position:absolute; width:18px; height:2px; left:0; top:8px; border-radius:2px; background:currentColor; transition:transform .28s ease,opacity .18s; }
.nav-menu-lines > span:first-child { transform:translateY(-6px); }
.nav-menu-lines > span:last-child { transform:translateY(6px); }
[aria-expanded="true"] > .nav-menu-lines > span:first-child { transform:rotate(45deg); }
[aria-expanded="true"] > .nav-menu-lines > span:nth-child(2) { opacity:0; transform:scaleX(0); }
[aria-expanded="true"] > .nav-menu-lines > span:last-child { transform:rotate(-45deg); }
html[data-site-theme="pjsk"] .site-navigation { border-bottom:3px solid transparent; border-image:linear-gradient(90deg,#00cabc,#e7f6ff 48%,#f05db0) 1; }
html[data-site-theme="pjsk"] .nav-sidebar-toggle { background:#fff; color:#444466; border:0; box-shadow:0 0 0 3px rgb(255 255 255 / .5); }
html[data-site-theme="pjsk"] .nav-menu-lines { transform:rotate(-9deg); }
html[data-site-theme="pjsk"] .nav-sidebar-toggle[aria-expanded="true"] { background:#00cabc; }
@media (max-width:768px) {
 .topbar.site-navigation { padding:0 12px; gap:10px; z-index:60; }
 .site-navigation .nav-sidebar-toggle, .site-navigation .nav-tools-toggle { display:flex; }
 .nav-tools-toggle svg { transition:transform .25s; }
 .nav-tools-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
 .site-navigation .nav-tools { position:absolute; right:12px; top:68px; max-width:calc(100vw - 24px); padding:10px; gap:10px; border:1px solid var(--border); border-radius:28px; background:var(--surface); box-shadow:0 8px 28px rgb(30 25 60 / .15); transform-origin:right center; transform:scaleX(.05); opacity:0; visibility:hidden; pointer-events:none; transition:transform .24s,opacity .18s,visibility .24s; }
 .site-navigation .nav-tools.is-open { transform:scaleX(1); opacity:1; visibility:visible; pointer-events:auto; }
 .site-navigation .topbar-theme { gap:10px; }
 .site-navigation .l2d-menu > div, .site-navigation .appearance-menu { position:fixed; right:0; top:58px; max-height:calc(100dvh - 148px); overflow-y:auto; }
 .sidebar { padding-top:72px; }
 .sidebar-brand { margin-top:0; }
 .sidebar-close-btn { display:none !important; }
}
@media (max-width:359px) {
 .site-navigation .nav-tools, .site-navigation .topbar-theme { gap:6px; }
}
@media (prefers-reduced-motion:reduce) {
 .nav-menu-lines > span, .site-navigation .nav-tools, .nav-tools-toggle svg { transition:none; }
}