/* step22 (2026-10-23): demo modal on mobile ~full-screen. No vh/dvh: Android WebView (Oppo, app) mis-evaluates viewport units -> modal collapsed to a thin strip. Use inset on fixed box instead. Desktop unchanged. */
@media (max-width:600px){
#demoModal{box-sizing:border-box;left:0;right:0;top:0;bottom:0;inset:0;transform:none;width:auto;max-width:none;height:auto;max-height:none;margin:0;border-radius:0;
 padding:max(46px,calc(env(safe-area-inset-top,0px) + 46px)) 12px max(16px,env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#demoClose{position:fixed;top:max(8px,calc(env(safe-area-inset-top,0px) + 8px));right:10px;z-index:30}
#demoModal img{max-width:100%;height:auto;max-height:none}
}
/* step22b: same for nested client view (#clientView, index/share/account) + lang panel, stacked above demo */
@media (max-width:600px){
#clientView{box-sizing:border-box;left:0;right:0;top:0;bottom:0;inset:0;transform:none;width:auto;max-width:none;height:auto;max-height:none;margin:0;border-radius:0;z-index:28;
 padding:max(48px,calc(env(safe-area-inset-top,0px) + 48px)) 14px max(20px,env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#clientShade{z-index:27}
#clientClose{position:fixed;top:max(8px,calc(env(safe-area-inset-top,0px) + 8px));right:10px;z-index:31}
#clientView .croom img{max-height:none}
#langPanel{max-height:calc(100% - 24px)}
}
/* step37: photos of one room — phone: full width stacked; tablet/desktop: side-by-side grid, description under the group */
.croom{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
.croom img{margin:0!important;width:100%;height:auto;object-fit:cover}
.croom h4,.croom p{grid-column:1/-1}
@media (min-width:700px){.croom{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.croom img{aspect-ratio:4/3;max-height:none}}