/* One app frame: the content scrolls; navigation occupies its own grid row. */
html,body,#app{height:100%}
html:has(.app-shell),body:has(.app-shell){overflow:hidden;overscroll-behavior:none}
.app-shell{height:100dvh;min-height:0;max-width:1600px;margin-inline:auto;display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
.sidebar{min-height:0;display:flex;flex-direction:column;padding:38px 24px;background:var(--paper);border-right:1px solid var(--line)}
.sidebar .nav-links{min-height:0;overflow-y:auto;flex-shrink:1}
.sidebar .sidebar-bottom{flex-shrink:0}
.main{min-width:0;min-height:0;margin:0;padding:30px 48px 42px;overflow:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;touch-action:manipulation;-webkit-overflow-scrolling:touch}
.mobile-nav{display:none}
html.dialog-scroll-locked .app-shell>.main{overflow:hidden}
@media(max-width:1200px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.sidebar{padding:34px 18px}.main{padding:26px 30px}}
@media(max-width:1020px){.app-shell{grid-template-columns:184px minmax(0,1fr)}.sidebar{padding:30px 14px}.main{padding:25px}}
@media(max-width:760px){
 .app-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
 .sidebar{display:none}
 .main{padding:20px;scrollbar-gutter:auto}
 .mobile-nav{display:block;padding:8px 12px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border:0}
 .mobile-nav-items{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px;border:1px solid var(--line);border-radius:999px;background:var(--paper);box-shadow:0 6px 24px #17374a14}
 .mobile-nav .nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:60px;padding:8px 4px;font-size:10px;border-radius:999px}
 .mobile-nav .nav-item span{max-width:100%;line-height:1.3;letter-spacing:-.02em;white-space:nowrap}
 .mobile-nav .nav-item svg{width:24px;height:24px}
 .mobile-nav .nav-item.active{background:var(--mint);color:var(--green)}
 .mobile-nav .nav-item.active:before{display:none}
 [data-theme=dark] .mobile-nav{background:var(--bg)}
 [data-theme=dark] .mobile-nav-items{box-shadow:0 6px 24px #0003}
}
@media(max-width:380px){.main{padding-inline:15px}.mobile-nav{padding-inline:6px}.mobile-nav-items{gap:0;padding:4px}.mobile-nav .nav-item{padding-inline:0;font-size:9px}}
@media print{
 html,body,#app{height:auto}
 html:has(.app-shell),body:has(.app-shell){overflow:visible}
 .app-shell{display:block;height:auto;padding:0}
 .sidebar,.mobile-nav{display:none!important}
 .main{overflow:visible;margin:0;padding:0}
}