/* ---------- fullscreen Cubiq app shell ---------- */
.shell{max-width:none;margin:0;padding:0;min-height:100dvh;background:var(--ink)}
/* viewport-fit=cover makes env(safe-area-inset-*) meaningful. With
   apple-mobile-web-app-status-bar-style=black-translucent iOS draws content
   under the status bar, so the header must absorb the top inset itself. */
.app-header{height:calc(64px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-left)) 0;padding-right:max(20px,env(safe-area-inset-right));border-bottom:1px solid var(--line);background:rgba(22,24,29,.94);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.app-logo{font-family:'Chakra Petch',sans-serif;font-size:24px;font-weight:700;letter-spacing:.03em;color:#fff}.app-logo span{color:var(--kuning)}
.app-tagline{font-size:11px;color:var(--muted-d)}
.app-shell{width:100%;background:transparent}
.app-screen{height:calc(100dvh - 64px - env(safe-area-inset-top));min-height:520px;overflow:hidden;display:flex;flex-direction:column;color:#EDEFF4;position:relative;background:var(--ink)}
.app-body{overflow-y:auto;overscroll-behavior-y:contain}
.view{width:min(100%,920px);margin:0 auto;padding:24px 24px calc(104px + env(safe-area-inset-bottom));min-height:100%}
.view#v-live{width:min(100%,1200px)}
.tabbar{position:absolute;padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));z-index:8}
.toast{position:fixed;left:50%;right:auto;width:min(calc(100% - 32px),520px);bottom:calc(78px + env(safe-area-inset-bottom));transform:translate(-50%,20px)}
.toast.show{transform:translate(-50%,0)}
.updatebar{position:fixed;left:50%;right:auto;width:min(calc(100% - 32px),520px);bottom:calc(78px + env(safe-area-inset-bottom));transform:translate(-50%,20px)}
.updatebar.show{transform:translate(-50%,0)}
.modal-ov,.sheet-ov{position:fixed}.sheet{position:fixed;left:50%;right:auto;width:min(100%,520px);transform:translate(-50%,110%)}.sheet.show{transform:translate(-50%,0)}
.live-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}.live-panel{min-width:0}.live-cam{aspect-ratio:16/10}.live-panel #cube-wrap{height:clamp(280px,38vw,440px)}
.live-copy{font-size:12.5px;color:#ccd1dc;background:var(--biru-bg);border:1px solid #355b94;border-radius:12px;padding:12px 14px;margin-bottom:14px}.live-copy b{color:#fff}
.camera-actions{display:flex;gap:8px;margin:8px 0 10px}.camera-actions .btn{flex:1;justify-content:center}
#btn-confirm-live{margin-top:10px}
@media(max-width:700px){.app-header{height:calc(56px + env(safe-area-inset-top))}.app-tagline{display:none}.app-screen{height:calc(100dvh - 56px - env(safe-area-inset-top))}.view{padding:18px 14px calc(100px + env(safe-area-inset-bottom))}.live-workspace{grid-template-columns:1fr}.live-cam{aspect-ratio:4/3}.live-panel #cube-wrap{height:280px}.mode-grid{grid-template-columns:1fr 1fr}.packs{grid-template-columns:1fr 1fr}.tabbar button{font-size:9.5px}}
@media(max-width:700px){.scan-editor{grid-template-columns:1fr}.scan-guide{order:-1}.scan-mode-grid{grid-template-columns:1fr}.scan-grid{max-width:310px}}
@media(max-width:430px){.orientation-top{grid-template-columns:120px 1fr}.cube-stage{height:130px}.orientation-cube{transform-origin:center}.orientation-nav{grid-template-columns:1fr 1fr}.orientation-index{grid-column:1/-1;grid-row:1}.orientation-nav .btn{grid-row:2}}