/* XRAM PWA adaptive layout v1: desktop baseline, phone-specific overrides.
   Presentation only; no scanner, collection, authentication or data logic. */
html{width:100%;overflow-x:clip;-webkit-text-size-adjust:100%}
body{min-width:0;width:100%;overflow-x:clip}
main{width:100%;max-width:1200px!important;margin-inline:auto}
main>*{min-width:0}
.panel,.x31-tile,.v67-tile{min-width:0;max-width:100%}
img,video,canvas{max-width:100%}
button,input,select,textarea{max-width:100%}
.x31-set-results,#x29-modal .x29-variants{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))!important;gap:12px!important}
.x31-set-card,#x29-modal .x29-card{min-width:0!important;max-width:100%!important}
.x31-set-card img,#x29-modal .x29-card img{display:block;width:100%!important;height:auto!important;aspect-ratio:63/88!important;object-fit:contain!important}
#x29-modal .x29-card button,.x31-set-card button{max-width:100%;white-space:normal!important;overflow-wrap:anywhere}
@media(min-width:1024px){
 main{padding-inline:28px!important}
 #x29-modal .x29-variants{grid-template-columns:repeat(5,minmax(0,1fr))!important}
 .x31-set-results{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important}
}
@media(max-width:767px){
 :root{--xram-mobile-gutter:12px}
 html,body{overscroll-behavior-x:none}
 body{padding-bottom:env(safe-area-inset-bottom,0px)}
 header{min-height:64px!important;padding:8px max(var(--xram-mobile-gutter),env(safe-area-inset-left))!important}
 .xram-brand{padding-right:56px!important;min-width:0!important}
 .xram-brand img{width:42px!important;height:42px!important;flex-shrink:0}
 .xram-brand h1,header h1{font-size:clamp(16px,4.8vw,21px)!important;overflow-wrap:anywhere}
 .brand-sub{font-size:9px!important;letter-spacing:1px!important}
 #xramMenuOpen{width:44px!important;height:44px!important;min-width:44px!important;right:12px!important;top:10px!important}
 main{padding:12px var(--xram-mobile-gutter) calc(90px + env(safe-area-inset-bottom,0px))!important}
 .panel{padding:14px!important;border-radius:16px!important}
 .row{min-width:0;gap:8px}
 .row>*{min-width:0}
 nav{max-width:100%;overflow-x:auto}
 button,select,input,textarea{font-size:16px;min-height:44px}
 #home .home-periods{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 #home .home-periods button{font-size:12px!important;padding:8px 2px!important}
 .x31-set-results,#x29-modal .x29-variants{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 #x29-modal .x29-card,.x31-set-card{padding:8px!important;overflow:hidden!important}
 #x29-modal .x29-card small,.x31-set-card small{font-size:11px!important;line-height:1.35!important;overflow-wrap:anywhere}
 #x29-modal .x29-card button,.x31-set-card button{min-height:44px!important;font-size:12px!important;padding:8px 5px!important}
 #xramImagePreview{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #xramMenuPanel{height:100dvh!important;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))!important}
 .menu-navigation{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .menu-navigation button{min-height:44px!important}
 .x31-grid{min-width:0}
}
@media(max-width:360px){
 .xram-brand h1,header h1{font-size:16px!important}
 #x29-modal .x29-variants,.x31-set-results{gap:7px!important}
 #x29-modal .x29-card,.x31-set-card{padding:5px!important}
}