/* Keep app controls inside the viewport; only the learning content scrolls. */
:root{--app-safe-top:env(safe-area-inset-top,0px);--app-safe-bottom:env(safe-area-inset-bottom,0px);--app-safe-left:env(safe-area-inset-left,0px);--app-safe-right:env(safe-area-inset-right,0px)}
html,body{height:100%;overflow:hidden}
body{min-height:0}
.shell{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-left:var(--app-safe-left);padding-right:var(--app-safe-right)}
.shell>.topbar{position:relative;top:auto;flex:none;height:calc(56px + var(--app-safe-top));padding:calc(6px + var(--app-safe-top)) 16px 6px;z-index:20}
.shell>main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;padding-bottom:24px;scroll-padding-top:16px;scroll-padding-bottom:24px}
.shell>.bottom-nav{position:relative;bottom:auto;width:100%;flex:none;height:calc(50px + var(--app-safe-bottom));min-height:calc(50px + var(--app-safe-bottom));padding:2px 8px calc(2px + var(--app-safe-bottom));grid-template-columns:repeat(5,minmax(0,1fr))}
.shell>.bottom-nav .nav-btn{min-width:0;min-height:44px;padding:3px 2px;gap:2px;border-radius:10px}
.shell>.bottom-nav .nav-btn svg{width:19px;height:19px}
/* Keep the brand on the two overview screens, with notch space on every view. */
.shell:not(:has(#home.active,#profile.active))>.topbar{display:none}
.shell:not(:has(#home.active,#profile.active))>main{padding-top:calc(20px + var(--app-safe-top))}
.shell .exam-sticky{top:0}
.toast{bottom:calc(62px + var(--app-safe-bottom));max-width:calc(100% - 32px)}
@media(min-width:700px){.shell{height:calc(100vh - 52px);height:calc(100dvh - 52px);min-height:0}.toast{bottom:calc(88px + var(--app-safe-bottom))}}

.shell>.topbar .logo-mark{width:44px;height:44px}
.shell>.topbar .logo-mark img{position:static;display:block;width:100%;height:100%;max-width:100%;object-fit:contain}
.shell>.topbar .brand{gap:8px;font-size:15px}