/* Root is the full-size app; /app retains the device preview. */
.pwa-mode body { padding:0; display:block; overflow:hidden; background:var(--phone-bg); }
.pwa-mode .device-frame { width:100%;height:100dvh;border:0;border-radius:0;box-shadow:none; }
.pwa-mode .dynamic-island,.pwa-mode .status-bar,.pwa-mode .home-bar { display:none; }
.pwa-mode .screen-container { margin-top:env(safe-area-inset-top,0px); }
.pwa-mode .view-scroll { padding:14px 22px 115px; max-width:1100px; left:50%; width:100%; transform:translateX(-50%); }
.pwa-mode .floating-profile { top:calc(24px + env(safe-area-inset-top,0px)); right:max(22px,calc((100% - 1100px)/2 + 22px)); }
.pwa-mode .bottom-tab-bar { bottom:calc(14px + env(safe-area-inset-bottom,0px)); left:50%; right:auto; transform:translateX(-50%); width:min(440px,calc(100% - 28px)); }
.pwa-mode .floating-plan { right:max(22px,calc((100% - 760px)/2 + 22px)); bottom:calc(96px + env(safe-area-inset-bottom,0px)); }
.pwa-mode .view-detail > div { max-width:760px;margin:0 auto; }
.pwa-mode .detail-top-nav { top:24px; }
.pwa-mode .detail-hero { height:clamp(270px,40vh,400px)!important; }
.phone-mode body { padding:24px 12px; }
.phone-mode .device-frame { width:min(414px,calc(100vw - 24px)); height:min(875px,calc(100dvh - 48px)); min-height:430px; border-radius:44px; border:1px solid #dfe6db;box-shadow:0 24px 80px #2945361c,0 0 0 8px #ffffffb0; }
.phone-mode .dynamic-island { display:flex; }

.pwa-mode .screen-container { min-height:0; }
.pwa-mode .view-scroll { max-width:none;width:auto;left:0;right:0;transform:none;padding:24px max(24px,calc((100% - 1160px)/2)) 120px; }
.pwa-mode .app-recipe-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start; }
.pwa-mode .app-recipe-grid .recipe-card { min-width:0;margin:0; }
.pwa-mode .floating-profile { right:max(24px,calc((100% - 1160px)/2)); }
.pwa-mode .feed-header { padding-right:60px; }
.pwa-mode .view-scroll[x-show*="planner"],.pwa-mode .view-scroll[x-show*="cart"] { padding-left:max(24px,calc((100% - 860px)/2));padding-right:max(24px,calc((100% - 860px)/2)); }
@media(min-width:1100px) { .pwa-mode .app-recipe-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.pwa-mode .feed-welcome { padding:32px; }.pwa-mode .feed-welcome h1 { font-size:40px; } }
@media(max-width:699px) { .pwa-mode .app-recipe-grid { grid-template-columns:minmax(0,1fr);gap:20px; }.pwa-mode .view-scroll { padding:14px 18px 115px; }.pwa-mode .floating-profile { right:18px; } }
