:root{--sidebar-open:250px;--sidebar-closed:76px}
.shell{transition:grid-template-columns .2s ease}
.shell.sidebar-collapsed{grid-template-columns:var(--sidebar-closed) minmax(0,1fr)}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-open);height:100dvh;min-height:100vh;transition:width .2s ease;padding:18px 12px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;z-index:70}
.main{grid-column:2;min-width:0}
.sidebar .brand{height:44px;margin:0 5px 28px;white-space:nowrap;overflow:hidden}
.sidebar .brand span{transition:opacity .15s ease}
.nav-title{display:none}
.nav{padding-top:2px}
.nav button{position:relative;display:flex;align-items:center;gap:12px;min-height:42px;padding:9px 11px;white-space:nowrap;overflow:hidden}
.nav button::before{content:attr(data-icon);display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;font-size:17px;font-weight:400}
.nav button[data-category-start]{margin-top:31px}
.nav button[data-category-start]::after{content:attr(data-category);position:absolute;left:11px;top:-23px;color:#858585;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sidebar-toggle{display:grid;place-items:center;width:38px;height:38px;padding:0!important;font-size:21px;border-radius:9px}
.topbar{gap:12px}.topbar .sidebar-toggle{flex:0 0 38px}.topbar h1{margin-right:auto}
.sidebar-backdrop{display:none}
.shell.sidebar-collapsed .sidebar{width:var(--sidebar-closed);padding-inline:10px}
.shell.sidebar-collapsed .brand{justify-content:center;margin-inline:0}
.shell.sidebar-collapsed .brand img{width:40px;height:40px}
.shell.sidebar-collapsed .brand span,.shell.sidebar-collapsed .nav button .soon{display:none}
.shell.sidebar-collapsed .nav button{justify-content:center;padding-inline:9px;font-size:0;overflow:visible}
.shell.sidebar-collapsed .nav button::before{font-size:18px}
.shell.sidebar-collapsed .nav button[data-category-start]{margin-top:12px}
.shell.sidebar-collapsed .nav button[data-category-start]::after{display:none}
.shell.sidebar-collapsed .nav button:hover::after{content:attr(data-label);display:block;position:absolute;left:54px;top:50%;transform:translateY(-50%);z-index:90;padding:8px 10px;border-radius:7px;background:#101828;color:#fff;font-size:12px;letter-spacing:0;text-transform:none;box-shadow:0 8px 22px #10182838;pointer-events:none}
@media(min-width:761px){.shell:not(.sidebar-collapsed){grid-template-columns:var(--sidebar-open) minmax(0,1fr)}}
@media(min-width:761px){.shell.sidebar-collapsed .content{max-width:none}}
@media(max-width:760px){
  .shell,.shell.sidebar-collapsed{display:block}
  .main{display:block}
  .sidebar,.shell.sidebar-collapsed .sidebar{position:fixed;inset:0 auto 0 0;width:min(290px,86vw);height:100vh;padding:18px 12px;transform:translateX(-105%);transition:transform .2s ease;box-shadow:16px 0 38px #10182840}
  .shell.sidebar-mobile-open .sidebar{transform:none}
  .shell.sidebar-collapsed .brand{justify-content:flex-start;margin:0 5px 28px}
  .shell.sidebar-collapsed .brand span{display:inline}
  .shell.sidebar-collapsed .nav button{justify-content:flex-start;padding:9px 11px;font-size:inherit;overflow:hidden}
  .shell.sidebar-collapsed .nav button[data-category-start]{margin-top:31px}
  .shell.sidebar-collapsed .nav button[data-category-start]::after{display:block}
  .shell.sidebar-collapsed .nav button:hover::after{content:attr(data-category);left:11px;top:-23px;transform:none;padding:0;background:transparent;color:#858585;font-size:10px;box-shadow:none;text-transform:uppercase}
  .sidebar-backdrop{position:fixed;inset:0;z-index:65;background:#10182880}
  .shell.sidebar-mobile-open .sidebar-backdrop{display:block}
  body.sidebar-lock{overflow:hidden}
}