/* Mobile viewport containment: retain native zoom, reflow content instead of scaling pages. */
@media(max-width:800px){
 html,body{width:100%;max-width:100%;min-width:0}
 .shell,.top,.hero,main,#admin-app,.admin-panel{min-width:0;max-width:100%}
 .shell{width:100%;padding-left:clamp(12px,4vw,24px);padding-right:clamp(12px,4vw,24px)}
 .top{min-width:0;gap:10px}
 .top .brand{max-width:100%;overflow-wrap:anywhere}
 img,video,iframe,svg{max-width:100%}
 input,select,textarea,button{max-width:100%;min-width:0}
 input,select,textarea{font-size:max(16px,1em)}
 .admin-grid,.stats{min-width:0}
 .admin-grid>*{min-width:0}
 pre,code{overflow-wrap:anywhere}
 pre{white-space:pre-wrap}
 table{max-width:100%}
 .admin-panel{overflow-wrap:anywhere}
}
@media(max-width:600px){
 body:has(#login) #admin-app,body:has(#reset-form) #admin-app,body:has(.registration-panel) #admin-app{
  width:100%!important;max-width:100%!important;min-width:0!important;
  padding:22px 12px max(24px,env(safe-area-inset-bottom))!important;
 }
 body:has(#login) #admin-app>.admin-panel,body:has(#reset-form) #admin-app>.admin-panel,body:has(.registration-panel) #admin-app>.admin-panel{
  width:100%!important;min-width:0!important;max-width:100%!important;
  padding:24px clamp(14px,5vw,22px)!important;
 }
 body:has(#login) .auth-heading h2,body:has(#reset-form) .auth-heading h2,body:has(.registration-panel) .auth-heading h2{
  font-size:clamp(30px,9vw,46px)!important;letter-spacing:-.045em!important;overflow-wrap:break-word;
 }
 body:has(#login) .top,body:has(#reset-form) .top,body:has(.registration-panel) .top{padding:14px 16px!important}
 body:has(#login) input,body:has(#reset-form) input,body:has(.registration-panel) input{font-size:16px!important;width:100%;min-width:0}
}