html,body{min-height:100%;min-height:100dvh}
@media(max-width:800px){
 body{padding-bottom:env(safe-area-inset-bottom)}
 header{padding-top:max(12px,env(safe-area-inset-top));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
 .nav{order:3;padding-bottom:2px;scrollbar-width:none;overscroll-behavior-x:contain}
 .nav::-webkit-scrollbar{display:none}
 header>.actions{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top))}
 .shell{margin-bottom:calc(80px + env(safe-area-inset-bottom))}
 dialog{max-height:calc(100dvh - 24px);overflow:auto}
}
@media(max-width:520px){
 .brand{font-size:20px}
 .role-label{font-size:12px}
 .btn.small{padding:7px 9px}
 header>.actions .btn{font-size:11px;min-height:34px;padding:6px 8px}
}