:root { --navigation-rail:#2d3436; --navigation-ink:#17191b; --navigation-muted:#67747c; --navigation-accent:#1686dc; }
body { padding-left: 76px !important; }
.site-sidebar { position:fixed;inset:16px auto 16px 12px;z-index:1050;display:flex;align-items:stretch;gap:10px;height:auto;max-height:calc(100vh - 32px);font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.nav-rail { width:58px;flex:0 0 58px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:9px 7px;border:1px solid #343a3c;border-radius:30px;background:var(--navigation-rail);box-shadow:0 15px 40px rgb(17 24 29 / 20%); }
.rail-brand { display:grid;place-items:center;width:40px;height:42px;margin-bottom:3px; }
.rail-brand img { width:34px;height:34px; }
.rail-button { display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border:0;border-radius:13px;background:transparent;color:#d7dcdf;text-decoration:none;font-size:1rem;transition:color .16s ease,background .16s ease,transform .16s ease; }
.rail-button:hover,.rail-button:focus-visible,.rail-button.is-active { color:#086db8;background:#e5f2fb; }
.rail-button:hover { transform:translateY(-1px); }
.rail-button:focus-visible,.rail-brand:focus-visible,.rail-avatar:focus-visible,.nav-link-row:focus-visible { outline:3px solid #79b8f5;outline-offset:2px; }
.rail-spacer { flex:1 1 auto; }
.rail-avatar { display:grid;place-items:center;width:40px;height:40px;margin-top:4px;border:2px solid #ffcb70;border-radius:50%;background:#ffeba8;color:#252321;text-decoration:none;font-size:.72rem;font-weight:850; }
.nav-panel { width:268px;min-width:0;overflow:auto;padding:17px 13px 14px;border:1px solid #e1e5e7;border-radius:18px;background:#fff;color:var(--navigation-ink);box-shadow:0 15px 40px rgb(17 24 29 / 18%); }
.nav-panel[hidden] { display:none !important; }
.nav-panel-brand { display:flex;align-items:center;gap:10px;padding:2px 5px 15px;border-bottom:1px solid #e5e8ea; }
.nav-panel-brand img { width:38px;height:38px; }
.nav-panel-brand strong,.nav-panel-brand small { display:block;line-height:1.3; }
.nav-panel-brand strong { font-size:.95rem;font-weight:800; }
.nav-panel-brand small { margin-top:3px;color:#69767d;font-size:.56rem;font-weight:750;letter-spacing:.09em; }
.nav-group { padding:13px 0 5px; }
.nav-group > p { margin:0 8px 5px;color:#7c858a;font-size:.62rem;font-weight:850;letter-spacing:.12em; }
.nav-link-row { position:relative;display:flex;align-items:center;gap:11px;min-height:38px;padding:7px 9px;border-radius:10px;color:#394248;text-decoration:none;font-size:.86rem;font-weight:600;transition:color .15s ease,background .15s ease; }
.nav-link-row i { width:17px;color:#78858b;text-align:center;font-size:.82rem; }
.nav-link-row:hover { background:#f1f3f4;color:#191d20; }
.nav-link-row:hover i { color:var(--navigation-accent); }
.nav-link-row.is-active { background:#e5f2fb;color:#075e9b; }
.nav-link-row.is-active i { color:var(--navigation-accent); }
.nav-panel-bottom { margin-top:8px;padding-top:10px;border-top:1px solid #e5e8ea; }
.nav-panel-bottom > .nav-link-row:first-child { background:#25282a;color:#fff; }
.nav-panel-bottom > .nav-link-row:first-child i { color:#ffcb70; }
.nav-panel-bottom > .nav-link-row:nth-child(2) { margin-top:6px; }
.nav-prototype-note { display:block;padding:0 9px;color:#7a858a;font-size:.66rem;line-height:1.4; }
.navigation-fallback { position:fixed;inset:0 0 auto;z-index:1100;display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 12px 86px;border-bottom:1px solid #dedfe2;background:#fff;box-shadow:0 4px 18px rgb(17 24 29 / 10%); }
.navigation-fallback a { padding:9px 12px;border-radius:9px;background:#f1f2f5;color:#252321;text-decoration:none;font-size:.86rem;font-weight:650; }
.navigation-fallback a:focus-visible { outline:3px solid #1686dc;outline-offset:2px; }
@media(max-width:760px) {
  .navigation-fallback { inset:auto 8px calc(8px + env(safe-area-inset-bottom));padding:8px;border:1px solid #343a3c;border-radius:18px; }
  .navigation-fallback a { flex:1 0 calc(50% - 8px);text-align:center; }
  body { padding-left:0 !important;padding-bottom:calc(78px + env(safe-area-inset-bottom)) !important; }
  .site-sidebar { inset:auto 8px calc(8px + env(safe-area-inset-bottom));height:auto;max-height:none;display:block; }
  .nav-rail { width:100%;height:58px;flex-direction:row;justify-content:space-between;gap:2px;padding:6px 7px;border-radius:20px; }
  .rail-brand { width:36px;height:40px;margin:0; }
  .rail-brand img { width:30px;height:30px; }
  .rail-button { width:40px;height:40px;flex-basis:40px;border-radius:12px; }
  .rail-spacer { display:none; }
  .rail-avatar { width:36px;height:36px;margin:0;flex:0 0 36px; }
  .nav-panel { position:fixed;left:8px;right:8px;bottom:calc(74px + env(safe-area-inset-bottom));width:auto;max-height:min(72vh,580px);padding:14px 12px 12px;border-radius:18px; }
  .nav-group { padding:10px 0 3px; }
  .nav-link-row { min-height:40px; }
}
@media(max-width:360px) {
  .nav-rail { gap:0;padding-inline:5px; }
  .rail-button { width:36px;flex-basis:36px; }
  .rail-brand { width:32px; }
  .rail-avatar { width:33px;height:33px;flex-basis:33px; }
}
@media(prefers-reduced-motion:reduce) { .rail-button,.nav-link-row { transition:none; } }