/* Narrow rising-star sidebar; decoration never intercepts navigation. */
.app-body{grid-template-columns:100px minmax(0,1fr)}
.app-body>.sidebar{padding:0 5px 12px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 0,#62406e55,transparent 45%),linear-gradient(165deg,#382641,#302039 65%,#3b234b);overflow:hidden}
.sidebar-stars{height:clamp(90px,17vh,160px);flex-shrink:0;position:relative;overflow:hidden;pointer-events:none;margin:0 -5px 10px;contain:paint}
.sidebar-stars:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 23% 22%,#ffd3a9 0 1px,transparent 1.5px),radial-gradient(circle at 72% 60%,#dcafff 0 1px,transparent 1.5px),radial-gradient(circle at 43% 74%,#ffc7db 0 1px,transparent 1.5px);opacity:.5}
.sidebar-stars i{position:absolute;left:var(--x);top:100%;width:var(--size);height:var(--size);color:#ffc9a1;animation:sidebar-starrise var(--duration) var(--delay) linear infinite}
.sidebar-stars i:nth-child(3n){color:#dda7ff}.sidebar-stars i:nth-child(3n + 1){color:#ffa6c8}
.sidebar-stars i:before{content:"";position:absolute;inset:0;background:currentColor;clip-path:polygon(50% 0,61% 35%,98% 36%,68% 58%,79% 95%,50% 73%,21% 95%,32% 58%,2% 36%,39% 35%)}
@keyframes sidebar-starrise{0%{transform:translateY(0);opacity:0}15%{opacity:.85}80%{opacity:.6}100%{transform:translateY(-200px);opacity:0}}
.app-body>.sidebar .nav-list{margin:0;gap:clamp(8px,1.8vh,18px);flex:0 1 auto;min-height:0;overflow-y:auto}
.app-body>.sidebar .nav-item{min-height:48px;padding:12px 7px;gap:6px;border-radius:12px;font-size:14px;justify-content:flex-start}
.app-body>.sidebar .nav-item>svg{width:22px;height:22px;flex-shrink:0}
.app-body>.sidebar .nav-item span{display:inline}
.app-body>.sidebar .sidebar-bottom{display:block;margin-top:auto;padding:24px 0 8px;flex-shrink:0}
.app-body>.sidebar .sidebar-brand{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;height:48px;min-height:48px;margin:0;padding:0;color:#fff;background:transparent;border:0;cursor:pointer}
.app-body>.sidebar .sidebar-brand strong{display:block;font-size:18px;letter-spacing:0}
.brand-logo{flex-shrink:0;width:29px;height:34px}.sidebar-mock-exit{display:block;margin:6px auto 0;font-size:10px;color:#e5c9e8}
.sidebar-brand:focus-visible{outline:2px solid #ffb994;outline-offset:2px;border-radius:8px}
@media(max-height:650px){.sidebar-stars{height:70px;margin-bottom:6px}.app-body>.sidebar .nav-list{gap:8px}.app-body>.sidebar .nav-item{min-height:42px;padding-block:9px}.app-body>.sidebar .sidebar-bottom{padding-top:12px}}
@media(max-width:800px){.app-body{grid-template-columns:64px minmax(0,1fr)}.app-body>.sidebar{padding-inline:5px}.app-body>.sidebar .nav-item{justify-content:center;padding-inline:5px}.app-body>.sidebar .nav-item span,.app-body>.sidebar .sidebar-brand strong{display:none}.sidebar-mock-exit{font-size:9px}.sidebar-stars{margin-inline:-5px}}
@media(prefers-reduced-motion:reduce){.sidebar-stars i{animation:none;top:calc(12% + var(--x) * .7);opacity:.6}}

/* A second rising field fills the free space immediately above the bottom logo. */
.app-body>.sidebar .sidebar-stars-bottom{height:160px;max-height:160px;min-height:0;flex:0 1 160px;margin: auto -5px 0}
.app-body>.sidebar .sidebar-stars-bottom+.sidebar-bottom{margin-top:0;padding-top:8px}
