/* Yangguang's navigation topology, expressed in Hongsui tokens. */
.icon-rail{position:fixed;inset:0 auto 0 0;width:var(--nav-rail-width);z-index:35;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;align-items:center;padding:18px 7px;gap:16px}
.rail-brand{display:grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border-radius:8px}.rail-brand img{display:block}
.rail-primary,.rail-groups,.rail-bottom{display:flex;flex-direction:column;align-items:center;width:100%;gap:8px}
.rail-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:8px;background:transparent;color:var(--color-text-secondary)}
.rail-link .icon{width:21px;height:21px}.rail-link:hover{background:var(--color-surface-subtle);color:var(--color-brand)}.rail-link.active{color:var(--color-brand);background:var(--color-selected)}
.rail-groups{border-top:1px solid var(--color-border);padding-top:16px;margin-top:8px}.rail-bottom{margin-top:auto;gap:8px}
.rail-account{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--color-selected);color:var(--color-brand);font-size:13px;margin-top:6px}
.rail-expand{position:fixed;left:var(--nav-rail-width);top:22px;width:28px;height:28px;padding:4px;background:var(--color-surface);border:1px solid var(--color-border);border-left:0;border-radius:0 6px 6px 0;color:var(--color-text-secondary)}.rail-expand .icon{width:17px;height:17px}
.sidebar{left:var(--nav-rail-width);width:var(--sidebar-width);padding:0;display:flex;flex-direction:column;overflow:hidden;background:var(--color-surface);transform:translateX(-100%);visibility:hidden;transition:transform var(--motion-fast) var(--ease-out),visibility var(--motion-fast);z-index:30}
.nav-expanded .sidebar{transform:translateX(0);visibility:visible}.nav-expanded .rail-expand{display:none}.nav-expanded .rail-help{display:none}
.main-shell{margin-left:var(--nav-rail-width)}.nav-expanded .main-shell{margin-left:calc(var(--nav-rail-width) + var(--sidebar-width))}
.sidebar-header{position:relative;flex:none;padding:26px 20px 15px}.sidebar-header .brand{padding:0 30px 0 1px;gap:10px}.sidebar-header .brand>img{display:none}.sidebar-header .brand strong{font-size:21px;letter-spacing:1px;line-height:1.4}.sidebar-header .brand small{font-size:11px;letter-spacing:0;margin-top:5px;color:var(--color-text-secondary)}
.sidebar .drawer-close{position:absolute;right:12px;top:27px;display:flex;width:28px;height:28px}.drawer-close>.icon{transform:rotate(180deg);width:18px;height:18px}
.sidebar-start{display:flex;width:100%;height:39px;margin-top:23px;font-size:13px;border-radius:7px;gap:8px;justify-content:center}.sidebar-start>.icon{width:17px;height:17px}
.sidebar-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:9px 14px 20px;scrollbar-gutter:stable}
.nav-label{font-size:11px;color:var(--color-text-secondary);padding:0 12px;margin-bottom:9px;letter-spacing:.5px}
.sidebar .nav-item{font-size:13px;min-height:44px;gap:11px;padding:10px 12px;margin:3px 0;line-height:1.5;border-radius:7px}.sidebar .nav-item>.icon{width:19px;height:19px}
.nav-count{margin-left:auto;font-size:11px;color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.nav-item.active .nav-count{color:var(--color-brand)}
.nav-group{margin-top:14px;padding-top:11px;border-top:1px solid var(--color-border)}.nav-group>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:10px 12px;list-style:none;font-size:13px;cursor:pointer;color:var(--color-text-secondary);border-radius:7px;user-select:none}
.nav-group>summary::-webkit-details-marker{display:none}.nav-group>summary:hover{background:var(--color-surface-subtle)}.nav-group.has-active>summary{color:var(--color-brand)}.group-chevron{width:14px;height:14px}.nav-group[open]>summary>.group-chevron{transform:rotate(90deg)}.nav-group-content{padding-top:3px}.project-group{margin-top:10px}.nav-group .project-shortcut{font-size:12px;padding:10px 12px;width:100%;gap:10px;border-radius:6px}.project-shortcut:hover{background:var(--color-surface-subtle)}
.sidebar-bottom{flex:none;margin:0;padding:0 18px}.sidebar-motto{font-size:11px;color:var(--color-text-secondary);padding:12px 8px 14px;letter-spacing:.5px}.sidebar .account{border-top:1px solid var(--color-border);padding:17px 7px 19px;margin:0;gap:10px}.sidebar .account .avatar{display:none}.sidebar .account strong{font-size:12px}.sidebar .account small{font-size:10px;margin-top:3px}.sidebar .account .badge{margin-left:auto}
@media(max-width:1200px) and (min-width:761px){:root{--sidebar-width:238px}.sidebar-header{padding-left:18px;padding-right:18px}.sidebar-scroll{padding-left:12px;padding-right:12px}}
@media(max-width:760px){
 .icon-rail{display:none}.sidebar{left:0;width:var(--sidebar-width);visibility:hidden;transform:translateX(-100%);z-index:30}.nav-expanded .sidebar{visibility:hidden;transform:translateX(-100%)}.nav-open .sidebar{visibility:visible;transform:translateX(0)}.main-shell,.nav-expanded .main-shell{margin-left:0}.sidebar-header{padding-top:28px}.sidebar-header .brand>img{display:block}.sidebar-header .brand{padding-right:19px;gap:9px}.sidebar-header .brand strong{font-size:20px}.sidebar-header .brand small{font-size:9px}.sidebar .drawer-close{top:9px;right:7px}.sidebar .account .avatar{display:grid}.sidebar-start{margin-top:21px}.sidebar-scroll{padding-top:10px}.nav-open .nav-overlay{display:block}
}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* Route changes keep navigation geometry and scroll position stable. */
.sidebar-scroll{scroll-behavior:auto;overflow-anchor:none}.sidebar .nav-item,.sidebar .nav-item.active{font-weight:500;transform:none;transition:background-color 120ms,color 120ms}

/* Footer follows the reference: utility links, divider, account and sign out. */
.sidebar-bottom{padding:0 14px;background:var(--color-surface);border-top:1px solid var(--color-border)}
.sidebar-utilities{padding:10px 0 14px}
.sidebar .sidebar-utilities .nav-item{min-height:40px;margin:0;padding:8px 12px;font-weight:400}
.sidebar .sidebar-utilities .icon{width:17px;height:17px}
.sidebar .account{border-top:1px solid var(--color-border);padding:12px 0 14px;min-height:70px;gap:8px;display:flex;align-items:center}
.account-profile{min-width:0;flex:1;display:block;padding:0;text-align:left;background:none;border:0;border-radius:4px;cursor:pointer}.account-profile:disabled{opacity:1;cursor:default}.sidebar .account-profile strong{display:block;font-size:13px;font-weight:600;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar .account-profile small{display:block;font-size:11px;line-height:1.5;color:var(--color-text-secondary);margin-top:2px}
.account-logout{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;color:var(--color-text-secondary)}.account-logout .icon{width:17px;height:17px}.account-logout:hover{background:var(--color-surface-subtle);color:var(--color-brand)}
@media(max-width:760px){.sidebar-bottom{padding-bottom:env(safe-area-inset-bottom)}}
