@media(min-width:801px){
  :root{--persistent-nav-width:244px}
  html.sidebar-collapsed{--persistent-nav-width:76px}
  .shell{grid-template-columns:var(--persistent-nav-width) minmax(0,1fr)}
  .shell>.side{position:fixed;inset:0 auto 0 0;width:var(--persistent-nav-width);height:100dvh;z-index:10001;overflow-y:auto}
  .shell>main{grid-column:2}
  :is(.exam-overlay,.stem-overlay,.basic-overlay,.course-overlay,.module-book-overlay,.speed-math-overlay,.book100-overlay,.ability-overlay){left:var(--persistent-nav-width)}
}
@media(max-width:800px){
  .shell,html.sidebar-collapsed .shell{display:block}
  .shell>.side,html.sidebar-collapsed .shell>.side{position:relative;inset:auto;display:grid;grid-template-columns:1fr;height:auto;min-height:0;padding:12px 16px;gap:10px;border-right:0;box-shadow:none}
  .side .side-header,html.sidebar-collapsed .side .side-header{display:flex;flex-direction:row;justify-content:space-between;min-height:36px;margin:0;gap:10px}
  .side-header .brand,html.sidebar-collapsed .side-header .brand{display:flex;margin:0;font-size:16px}
  .side-header .brand-mark{display:none}
  .side-header .brand-name,html.sidebar-collapsed .side-header .brand-name{display:block}
  .side-header .brand small{display:none}
  .side .sidebar-toggle{width:36px;height:36px;flex-basis:36px}
  .side .nav{display:flex;gap:6px;overflow-x:auto;min-height:0;padding:2px 0 5px}
  .side .nav button{flex:0 0 auto;min-height:40px;padding:9px 12px;font-size:14px;white-space:nowrap}
  .side .nav button span{display:inline}
  .side .account-status,html.sidebar-collapsed .side .account-status{display:flex;justify-content:flex-start;min-height:0;margin:0;padding:7px 10px;gap:8px;border:0;background:transparent}
  .side .account-avatar,html.sidebar-collapsed .side .account-avatar{width:26px;height:26px;flex-basis:26px;border-radius:8px}
  .side .account-avatar svg{width:17px;height:17px}
  .side .account-copy,html.sidebar-collapsed .side .account-copy{display:flex;flex-direction:row;align-items:center;gap:8px}
  .side .account-copy small,.side .account-copy>span,.side .account-indicator{display:none}
  .side .account-copy strong{margin:0;font-size:13px}
  html.sidebar-collapsed .side .nav,html.sidebar-collapsed .side .account-status{display:none}
  .shell>main{padding-top:22px}
}
