/* V2.2: flexible viewport shell, safe areas and content-driven panel sizing. */
html{width:100%;height:100%;overflow:hidden}body{width:100%;height:100vh;height:var(--app-height,100dvh);min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}header{flex:0 0 auto;min-height:64px;height:auto;flex-wrap:wrap;padding:12px 18px;gap:12px}.brand{flex-shrink:0}.top-actions{flex-wrap:wrap;justify-content:flex-end;min-width:0}.top-actions button{min-height:38px}.workspace,.focus-preview .workspace{height:auto;flex:1 1 0;min-height:0;min-width:0;overflow:hidden;grid-template-columns:clamp(180px,16vw,240px) minmax(0,1fr) minmax(0,.9fr)}aside{overflow-y:auto;overscroll-behavior:contain;min-width:0}.files{flex:1 0 110px;overflow-y:auto}.editor-panel,.preview-panel{min-width:0;min-height:0}.editor-wrap{flex:1 1 0;min-height:0;overflow:hidden}.gutter{flex-shrink:0;max-width:65px}textarea#editor{height:100%;min-height:0}.bar{flex-shrink:0;min-width:0}.editor-panel>.bar{gap:7px;padding:0 12px}.editor-panel>.bar .spacer{min-width:0}#tab{flex:1;min-width:24px}.console{height:clamp(90px,21vh,180px);min-height:0;flex:0 0 auto;display:flex;flex-direction:column}.console .bar{min-height:36px;height:auto;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}#output{flex:1;max-height:none;min-height:0;overflow:auto;padding:10px 14px}.preview-panel>.bar{flex-wrap:wrap;height:auto;min-height:48px;padding:7px 12px}.preview-panel select{max-width:145px;min-width:0}.preview-area,.focus-preview .preview-area{min-width:0;min-height:0;flex:1 1 0;overflow:auto;padding:14px;align-items:stretch}iframe#preview{max-width:100%;min-width:0;min-height:0;height:100%;flex:0 1 auto}.preview-note{flex:0 0 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}footer{height:auto;min-height:28px;flex:0 0 auto;padding:6px 12px;min-width:0}#saveStatus{min-width:0;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#cursor{white-space:nowrap}.mobile-nav{flex:0 0 auto;height:auto;min-height:43px}.mobile-nav button{min-height:36px}.mobile-nav button[aria-current=page]{background:#087bff22;color:#9bc9ff;border-radius:7px}dialog{max-width:calc(100% - 24px);max-height:calc(var(--app-height,100dvh) - 24px);overflow:auto;overscroll-behavior:contain;padding:22px}dialog input,dialog select,dialog textarea{max-width:100%;font-size:16px}dialog button{min-height:38px}.project-item{flex-wrap:wrap}.project-item .grow{flex-basis:50%}.runtime-note{overflow-wrap:anywhere}.language-option{min-width:0;overflow-wrap:anywhere}.language-option span{min-width:0}.focus-preview .workspace{grid-template-columns:minmax(0,1fr)}.focus-preview .preview-panel{display:flex!important}.focus-preview aside,.focus-preview .editor-panel{display:none!important}
@media(min-width:1101px){.mobile-nav{display:none}.workspace .editor-panel,.workspace .preview-panel{display:flex}body.files-view aside{display:flex}body.files-view .editor-panel{display:flex}body.preview .editor-panel{display:flex}.focus-preview .editor-panel{display:none!important}}
@media(max-width:1100px){.pill{display:none}.workspace{grid-template-columns:190px minmax(0,1fr)}.mobile-nav{display:flex;justify-content:center;gap:8px;border-bottom:1px solid var(--border);padding:4px 12px}.preview-panel{display:none}.editor-panel{display:flex}body.preview .preview-panel{display:flex}body.preview .editor-panel{display:none}.mobile-nav button{background:none;border:0;padding:6px 22px}.hide-medium{display:none}}
@media(max-width:760px){header{min-height:0;padding:10px 12px;gap:9px}.brand{font-size:16px}.brand span{display:inline}.brand .logo{width:29px;height:29px;font-size:16px}.top-actions{flex:1;gap:5px}.top-actions button{font-size:11px;padding:7px 10px;min-height:36px}.hide-mobile{display:none}.workspace{grid-template-columns:minmax(0,1fr)}aside{display:none;padding:14px;gap:10px;border:0}.editor-panel{display:flex;border:0}.preview-panel{display:none}body.files-view aside{display:flex}body.files-view .editor-panel,body.files-view .preview-panel{display:none}body.preview .preview-panel{display:flex}body.preview .editor-panel{display:none}.files{flex-basis:120px}.file{min-height:42px}aside>button{min-height:40px}#search{font-size:16px}.mobile-nav{padding:3px 10px}.mobile-nav button{flex:1;max-width:190px;min-height:38px;padding:7px}.editor-panel>.bar{padding:0 10px;gap:6px}.editor-panel>.bar button{min-height:34px;padding:5px 9px}textarea#editor{font-size:16px;line-height:24px}.console{height:clamp(100px,23vh,160px)}.preview-area,.focus-preview .preview-area{padding:8px}.preview-note{font-size:10px;padding:9px}.preview-note span{display:none}footer{font-size:10px;gap:8px}.cards{gap:8px}.card{padding:12px}.language-list{grid-template-columns:1fr}}
@media(max-width:460px){header>.spacer{display:none}.brand{width:100%;justify-content:center;font-size:15px}.top-actions{width:100%;justify-content:center;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.top-actions .hide-mobile{display:none}.top-actions button{font-size:11px;padding:6px 4px;min-width:0;white-space:nowrap}.brand .logo{width:23px;height:23px;font-size:14px}header{gap:7px;padding:7px 10px}.editor-panel>.bar{gap:4px;padding:0 8px}#language{max-width:75px}.editor-panel>.bar .spacer{display:none}.console .bar{gap:4px;padding-left:8px;padding-right:8px}.console .bar strong{font-size:9px}#runStatus{font-size:9px;max-width:60px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console .bar button{padding:4px 6px;min-height:30px;font-size:10px}footer>span:first-child{display:none}.preview-panel>.bar{gap:6px;padding:6px 9px}.preview-panel>.bar select{max-width:140px}dialog{padding:18px}.cards{grid-template-columns:1fr}}
@media(max-height:520px){header{padding-top:5px;padding-bottom:5px;min-height:45px}.mobile-nav{min-height:34px;padding-top:0;padding-bottom:0}.mobile-nav button{min-height:31px}.console{height:80px}.console .bar{min-height:28px}.editor-panel>.bar{height:38px;min-height:38px}.preview-panel>.bar{min-height:36px}.preview-note{display:none}footer{min-height:22px;padding-top:3px;padding-bottom:3px}.preview-area{padding:5px}aside{padding-top:8px;gap:6px}.project-title{margin:3px 0}.brand .logo{width:23px;height:23px}dialog{max-height:calc(var(--app-height,100dvh) - 12px)}}
@media(pointer:coarse){button,select{touch-action:manipulation}#closeModal{min-width:40px;min-height:40px}}
@media(max-width:460px){#newProject{font-size:0}#newProject::after{content:'＋ New';font-size:11px}}