/* Left sidebar shell — self-contained, always-ink panel. Does not override site Tailwind bg. */
:root{
  --sb-rail:260px; --sb-rail-collapse:64px; --sb-topbar:52px; --sb-r:8px;
  --sb-ink:#17171a; --sb-ink-2:#1f1f23; --sb-line:#2a2a2f; --sb-fg:#d4d4d8; --sb-fg-mute:#71717a;
  --sb-accent:#10b981; --sb-accent-side:rgba(16,185,129,.16);
}
.sb-side{
  position:fixed; top:0; left:0; bottom:0; width:var(--sb-rail); background:var(--sb-ink);
  color:var(--sb-fg); display:flex; flex-direction:column; border-right:1px solid var(--sb-line);
  z-index:50; transition:width .18s ease;
}
.sb-side.collapsed{width:var(--sb-rail-collapse)}
.app-main{margin-left:var(--sb-rail); transition:margin .18s ease}
.sb-side.collapsed ~ .app-main{margin-left:var(--sb-rail-collapse)}

.sb-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;height:var(--sb-topbar);flex:0 0 auto}
.sb-brand{display:flex;align-items:center;gap:9px;min-width:0}
.sb-mark{width:26px;height:26px;border-radius:7px;background:var(--sb-accent);display:grid;place-items:center;color:#042f1e;flex:0 0 auto}
.sb-mark svg{width:16px;height:16px}
.sb-name{font-weight:650;font-size:14.5px;color:#fafafa;white-space:nowrap;overflow:hidden}
.sb-collapse{margin-left:auto;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;color:var(--sb-fg-mute);flex:0 0 auto;background:none;border:0;cursor:pointer}
.sb-collapse:hover{background:var(--sb-ink-2);color:var(--sb-fg)}
.sb-collapse svg{width:16px;height:16px}
.sb-side.collapsed .sb-name,.sb-side.collapsed .sb-search-wrap,.sb-side.collapsed .sb-cat-label,
.sb-side.collapsed .sb-item-label,.sb-side.collapsed .sb-chev,.sb-side.collapsed .sb-foot-label,
.sb-side.collapsed .sb-badge{display:none}
.sb-side.collapsed .sb-collapse{margin:0 auto}
.sb-side.collapsed .sb-cat-head{justify-content:center;padding:8px 0}
.sb-side.collapsed .sb-item{padding:8px 0;justify-content:center}
.sb-side.collapsed .sb-item .sb-ico{margin:0}
.sb-side.collapsed .sb-items{display:none}
.sb-side.collapsed .sb-foot-btn{justify-content:center}

.sb-search-wrap{padding:4px 12px 10px;flex:0 0 auto}
.sb-search{position:relative}
.sb-search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--sb-fg-mute)}
.sb-search input{
  width:100%;background:var(--sb-ink-2);border:1px solid var(--sb-line);color:var(--sb-fg);
  border-radius:7px;padding:7px 10px 7px 28px;font-size:13px;outline:none;font-family:inherit;
}
.sb-search input::placeholder{color:var(--sb-fg-mute)}
.sb-search input:focus{border-color:var(--sb-accent);background:#000}

.sb-nav{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:4px 8px 12px;scrollbar-width:thin;scrollbar-color:var(--sb-line) transparent}
.sb-nav::-webkit-scrollbar{width:8px}
.sb-nav::-webkit-scrollbar-thumb{background:var(--sb-line);border-radius:8px;border:2px solid var(--sb-ink)}
.sb-cat{margin-top:4px}
.sb-cat-head{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;color:var(--sb-fg-mute);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;width:100%;background:none;border:0;cursor:pointer;font-family:inherit}
.sb-cat-head:hover{background:var(--sb-ink-2);color:var(--sb-fg)}
.sb-cat-icon{width:16px;height:16px;flex:0 0 auto;color:var(--sb-fg-mute)}
.sb-cat-head:hover .sb-cat-icon{color:var(--sb-fg)}
.sb-cat-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden}
.sb-chev{width:14px;height:14px;flex:0 0 auto;transition:transform .15s ease;opacity:.7}

/* 图标 <svg> 必须显式约束尺寸，否则回退到默认 300x150 撑爆每行 */
.sb-ico svg, .sb-cat-icon svg, .sb-chev svg { width: 100%; height: 100%; display: block; }
.sb-cat.open .sb-chev{transform:rotate(90deg)}

.sb-items{list-style:none;margin:0;padding:0 0 4px;max-height:0;overflow:hidden;transition:max-height .2s ease}
.sb-cat.open .sb-items{max-height:600px}
.sb-item{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 30px;border-radius:7px;color:var(--sb-fg);
  font-size:13px;position:relative;white-space:nowrap;overflow:hidden}
.sb-item:hover{background:var(--sb-ink-2);color:#fafafa}
.sb-item .sb-ico{width:15px;height:15px;flex:0 0 auto;color:var(--sb-fg-mute);margin-left:-22px}
.sb-item.active{background:var(--sb-accent-side);color:#fff}
.sb-item.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--sb-accent);border-radius:2px}
.sb-item.active .sb-ico{color:var(--sb-accent)}
.sb-item-label{overflow:hidden;text-overflow:ellipsis}
.sb-badge{font-size:10px;font-weight:600;color:var(--sb-accent);background:var(--sb-accent-side);padding:1px 5px;border-radius:4px;flex:0 0 auto}
.sb-tip{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#000;color:#fafafa;
  font-size:12px;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;z-index:60}
.sb-side.collapsed .sb-item:hover .sb-tip,.sb-side.collapsed .sb-cat-head:hover .sb-tip{opacity:1}

/* search mode: flatten */
body.sb-searching .sb-items{max-height:none;overflow:visible}
body.sb-searching .sb-cat-head{display:none}
body.sb-searching .sb-item{padding-left:12px}
body.sb-searching .sb-item .sb-ico{margin-left:0}
body.sb-searching .sb-hide{display:none}

.sb-foot{flex:0 0 auto;padding:8px;border-top:1px solid var(--sb-line);display:flex;gap:6px;flex-wrap:wrap}
.sb-foot-btn{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:7px;color:var(--sb-fg-mute);
  font-size:12px;background:none;border:0;cursor:pointer;font-family:inherit}
.sb-foot-btn:hover{background:var(--sb-ink-2);color:var(--sb-fg)}
.sb-foot-btn svg{width:15px;height:15px;flex:0 0 auto}

/* in-main topbar */
.sb-topbar{position:sticky;top:0;z-index:40;height:var(--sb-topbar);
  background:color-mix(in srgb,var(--sb-panel,#fff) 88%,transparent);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--sb-border,#e4e4e7);display:flex;align-items:center;gap:12px;padding:0 18px}
.sb-hamburger{display:none;width:34px;height:34px;border-radius:7px;align-items:center;justify-content:center;
  border:1px solid var(--sb-border,#e4e4e7);background:none;cursor:pointer;color:inherit}
.sb-hamburger svg{width:18px;height:18px}
.sb-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#52525b;min-width:0}
.sb-crumb b{color:#18181b;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-crumb .sep{color:#a1a1aa}
html.dark .sb-crumb{color:#a1a1aa}
html.dark .sb-crumb b{color:#e4e4e7}
.sb-spacer{flex:1}
.sb-pill{font-size:12px;color:#52525b;border:1px solid #e4e4e7;border-radius:999px;padding:4px 10px}
html.dark .sb-pill{color:#a1a1aa;border-color:#26262b}

/* mobile drawer */
.sb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .18s;z-index:49}
body.sb-drawer-open .sb-backdrop{opacity:1;pointer-events:auto}
@media (max-width:860px){
  .sb-side{transform:translateX(-100%);box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
  .sb-side.collapsed{width:var(--sb-rail)}
  .sb-side.collapsed ~ .app-main{margin-left:0}
  body.sb-drawer-open .sb-side{transform:none}
  .app-main{margin-left:0}
  .sb-hamburger{display:inline-flex}
  .sb-collapse{display:none}
}