:root{--bg:#0a0d0c;--panel:#171e1d;--panel2:#202927;--line:#303d37;--text:#f0f4ed;--muted:#9ba9a1;--accent:#c9f36e;--danger:#ed8a81;--radius:20px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.43;cursor:not-allowed}a{color:var(--accent)}.topbar{height:calc(70px + env(safe-area-inset-top));padding:calc(14px + env(safe-area-inset-top)) 19px 14px;display:flex;align-items:center;justify-content:space-between;background:#0e1312;position:sticky;top:0;z-index:20;border-bottom:1px solid #202a25}.brand{display:flex;align-items:center;gap:11px}.logo-mark{height:35px;width:35px;border-radius:10px;background:var(--accent);color:#142019;font-weight:950;font-size:25px;display:flex;align-items:center;justify-content:center;letter-spacing:-3px;padding-right:3px}.brand-name{font-weight:850;letter-spacing:2px;font-size:20px}.brand-name small{font-weight:550;color:#aab6ae;font-size:9px;letter-spacing:2.5px;margin-left:2px}.top-pill{border:1px solid #304234;border-radius:100px;padding:5px 8px;font-size:10px;color:#baccb6;font-weight:700;letter-spacing:1px;white-space:nowrap}.live-dot{display:inline-block;height:7px;width:7px;background:var(--accent);border-radius:50%;margin-right:5px}.version{color:#526557;margin-left:3px}main{max-width:720px;margin:0 auto;padding:20px 17px calc(120px + env(safe-area-inset-bottom))}.page{display:none}.page.active{display:block}.hero{padding:15px 0 23px}.eyebrow{font-size:10px;color:var(--accent);font-weight:850;letter-spacing:2.4px}.hero h1,.section-intro h1{font-size:clamp(35px,9vw,54px);letter-spacing:-2px;line-height:1.07;margin:13px 0 13px;font-weight:780}.hero h1 em{font-style:normal;color:var(--accent)}.hero p,.section-intro p{color:var(--muted);max-width:500px;margin:0;font-size:14px}.project-heading{margin:6px 0 16px}.field-label{display:block;color:#a9b9ae;font-size:10px;font-weight:850;letter-spacing:1.4px;margin:0 0 8px}.text-control{display:block;width:100%;background:#0f1514;border:1px solid #35463e;color:var(--text);padding:13px 14px;border-radius:12px;outline:none;font-size:16px;min-width:0}.text-control:focus{border-color:var(--accent);box-shadow:0 0 0 2px #c9f36e20}.text-control::placeholder{color:#718279}.title-control{font-weight:700;flex:1}.row-gap{display:flex;gap:8px;align-items:center}.icon-btn{border:1px solid #38483c;background:#1d2922;color:var(--accent);width:49px;height:49px;border-radius:12px;flex-shrink:0;font-size:27px}.progress-panel{padding:17px 15px 15px;background:var(--panel);border:1px solid #2b3932;border-radius:17px;margin-bottom:14px}.progress-head{display:flex;justify-content:space-between;font-size:11px;color:#b6c4b9;font-weight:700;letter-spacing:1px}.progress-head strong{color:var(--accent)}.progress-track{background:#35443c;height:5px;border-radius:20px;overflow:hidden;margin:12px 0 18px}.progress-track span{display:block;width:0%;height:100%;background:var(--accent);transition:width .3s}.step-strip{display:flex;overflow-x:auto;gap:7px;scrollbar-width:none}.step-strip::-webkit-scrollbar{display:none}.step-chip{width:34px;height:34px;border:1px solid #485a4e;border-radius:10px;background:transparent;color:#9db1a2;flex-shrink:0;font-weight:750;font-size:12px}.step-chip.active{background:var(--accent);color:#1a2617;border-color:var(--accent)}.step-chip.done{background:#253b2a;color:var(--accent)}.step-panel{background:var(--panel);border:1px solid #304037;border-radius:20px;padding:20px 17px 21px}.step-index{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:2px}.step-title{font-size:25px;letter-spacing:-.6px;line-height:1.15;margin:8px 0}.step-desc{font-size:13px;color:var(--muted);margin:0 0 19px}.dropzone{display:block;border:1.5px dashed #667967;border-radius:16px;padding:19px 15px;text-align:center;background:#1c2821;position:relative;margin:7px 0 13px;cursor:pointer}.dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.dropzone strong{display:block;font-size:14px;margin:9px 0 4px}.dropzone small{display:block;color:#9fb6a0;font-size:11px}.upload-glyph{font-size:25px;color:var(--accent)}.preview{display:none;background:#0d1210;border:1px solid #344438;border-radius:14px;overflow:hidden;margin:12px 0}.preview.visible{display:block}.preview img,.preview video{display:block;width:100%;max-height:380px;object-fit:contain;background:#0a0d0c}.preview-info{padding:9px 12px;display:flex;justify-content:space-between;gap:6px;align-items:center;font-size:12px;color:#bdccc0;overflow:hidden}.preview-info .file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-btn{border:0;background:#314332;color:var(--accent);border-radius:8px;padding:5px 9px;font-size:11px;flex-shrink:0}.hint{padding:12px 13px;border:1px solid #42523e;border-left:3px solid var(--accent);border-radius:10px;font-size:12px;color:#cad5ca;background:#202b22;margin:13px 0}.hint.warning{border-color:#655345;border-left-color:#f4ba76;background:#30291f}.form-grid{display:grid;gap:12px;margin:10px 0}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid label{font-size:11px;color:#a9b9ad}.form-grid label .text-control{margin-top:6px}textarea.text-control{min-height:125px;resize:vertical;line-height:1.55}.code-editor{font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;min-height:220px!important}.btn{border:1px solid transparent;min-height:46px;padding:11px 17px;border-radius:12px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;white-space:normal;text-align:center;touch-action:manipulation}.btn.primary{background:var(--accent);color:#172514}.btn.secondary{background:#28352d;border-color:#405345;color:var(--text)}.btn.tertiary{background:transparent;border-color:#415443;color:var(--accent)}.btn.danger{background:#312323;color:#ffbcb7;border-color:#6c403e}.btn.full{width:100%}.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}.btn-row .btn{flex:1}.step-bottom{display:flex;gap:11px;margin:15px 0}.step-bottom .btn{flex:1}.check-grid{display:grid;gap:10px;margin:15px 0}.check-item{display:flex;align-items:flex-start;gap:10px;padding:12px;background:#202a24;border-radius:11px;font-size:13px;color:#d4ddd3}.check-item input{accent-color:#bfe967;width:18px;height:18px;flex-shrink:0}.approval{padding:12px;border:1px solid #52664f;border-radius:11px;background:#1d2b20;margin:13px 0}.approval label{display:flex;gap:9px;align-items:center;font-weight:780;font-size:13px}.approval input{accent-color:var(--accent);width:19px;height:19px}.divider{height:1px;background:#35423a;margin:20px 0}.micro{font-size:11px;color:#a3b7a5}.fine{font-size:12px;color:#b5c2b8;margin:0}.section-intro{margin:18px 0 20px}.panel{background:var(--panel);border:1px solid #304037;border-radius:18px;padding:19px;margin:14px 0}.panel-title{font-size:16px;font-weight:800}.stack>*+*{margin-top:12px}.setting-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #2c3931;font-size:12px;color:#b8c5b7}.setting-row b{color:#e3ebde}.api-status{font-size:12px;padding:9px;border-radius:9px;background:#24332b;color:#cadcca}.project-list{display:grid;gap:11px;margin-top:17px}.project-card{border:1px solid #324239;background:var(--panel);border-radius:15px;padding:15px;display:flex;gap:11px;align-items:center}.project-icon{width:48px;height:56px;display:grid;place-items:center;background:#34422e;border-radius:10px;color:var(--accent);font-size:23px;flex-shrink:0}.project-detail{min-width:0;flex:1}.project-detail strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.project-detail small{display:block;color:#99aa9b;font-size:11px}.project-card .mini-btn{font-size:12px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(66px + env(safe-area-inset-bottom));padding:0 max(15px,calc((100vw - 720px)/2)) env(safe-area-inset-bottom);display:flex;background:#141c18;border-top:1px solid #2b392f;z-index:25}.nav-btn{flex:1;border:0;background:transparent;color:#859886;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:11px;gap:1px;font-weight:700}.nav-btn span{font-size:24px;line-height:1.3}.nav-btn.active{color:var(--accent)}#toast{position:fixed;bottom:calc(83px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(20px);background:#e0f1be;color:#1c2717;font-size:12px;font-weight:750;text-align:center;padding:12px 16px;max-width:min(92vw,460px);min-width:200px;border-radius:12px;pointer-events:none;opacity:0;transition:.25s;z-index:40;box-shadow:0 12px 36px #0007}#toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}@media(min-width:730px){.hero{padding-top:30px}.form-grid.two{gap:18px}.step-panel{padding:26px}.topbar{padding-left:max(20px,calc((100vw - 720px)/2));padding-right:max(20px,calc((100vw - 720px)/2))}}@media(max-width:360px){.form-grid.two{grid-template-columns:1fr}.brand-name{font-size:18px}.top-pill{font-size:9px}}

.import-control{display:block;text-align:center;padding:12px 15px;border:1px solid #495b4c;border-radius:12px;color:#d6efc8;background:#253228;font-weight:750;font-size:13px;cursor:pointer}.import-control input{display:none}button:focus-visible,.import-control:focus-within,.dropzone:focus-within{outline:2px solid var(--accent);outline-offset:3px}a:focus-visible{outline:2px solid var(--accent)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.progress-track span,#toast{transition:none}}

/* ===== LAIO Studio v2 additions ===== */
html,body{overscroll-behavior-y:none}
body{-webkit-tap-highlight-color:transparent;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.hidden{display:none!important}
.top-pill.offline{border-color:#6b4a2c;color:#f4ba76}.top-pill.offline .live-dot{background:#f4ba76}
.project-heading{margin:4px 0 14px}
.step-strip{padding-bottom:2px}
.step-chip{width:auto;min-width:44px;height:44px;padding:0 10px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.step-chip small{font-size:11px;font-weight:700}
.step-chip.locked{opacity:.55}
.step-chip.done:not(.active){border-color:#3f6a3f}
.form-label{display:block;font-size:12px;color:#a9b9ad;font-weight:700}
.form-label .text-control{margin-top:6px}
select.text-control{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9fb6a0 50%),linear-gradient(135deg,#9fb6a0 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.switch-row{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:#d4ddd3;padding:10px 0;min-height:44px}
.switch-row input{width:22px;height:22px;accent-color:var(--accent);flex-shrink:0;margin:1px 0 0}
.warn-text{color:#f4ba76!important}
.storage-bar{height:8px;background:#2b3732;border-radius:10px;overflow:hidden}
.storage-bar span{display:block;height:100%;width:0;background:var(--accent)}
.steps-list{padding-left:20px;margin:0}.steps-list li{margin:4px 0}
.btn{min-height:48px}
.btn.small{min-height:40px;padding:8px 12px;font-size:12px}
.mini-btn{min-height:34px;padding:7px 11px;font-size:12px}
.mini-btn.danger{color:#ffbcb7;background:#3a2626}
.btn-row.three .btn{flex:1 1 30%}
.btn-col{display:grid;gap:8px;margin-top:11px}
/* status pills */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.4px;border-radius:100px;padding:4px 9px;background:#26322b;color:#b8c9b9}
.pill.ok{background:#22402a;color:var(--accent)}
.pill.bad{background:#432626;color:#ffbcb7}
.pill.warn{background:#3d3220;color:#f4ba76}
.status-line{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
/* media */
.media-frame{background:#070a09;border:1px solid #2c3a33;border-radius:14px;overflow:hidden;margin:10px 0}
.media-frame img,.media-frame video,.media-frame canvas{display:block;width:100%;max-height:440px;object-fit:contain;background:#070a09}
.media-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;font-size:12px;color:#bdccc0}
.media-meta .file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.media-actions{display:flex;gap:6px;flex-shrink:0}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.compare-grid figure{margin:0;background:#070a09;border:1px solid #2c3a33;border-radius:12px;overflow:hidden}
.compare-grid img{display:block;width:100%;height:210px;object-fit:cover}
.compare-grid figcaption{font-size:10px;letter-spacing:1px;font-weight:800;color:#9fb6a0;padding:6px 8px}
/* avatar picker */
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:12px 0}
.avatar-card{background:var(--panel);border:1px solid #304037;border-radius:14px;overflow:hidden;position:relative}
.avatar-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px #c9f36e40}
.avatar-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#070a09}
.avatar-card .avatar-body{padding:9px 10px}
.avatar-card strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar-card small{display:block;font-size:11px;color:#99aa9b}
.avatar-card .avatar-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.avatar-card .badge{position:absolute;top:8px;left:8px}
.avatar-pick{border:0;padding:0;background:none;color:inherit;text-align:left;width:100%;display:block}
/* json */
.code-editor{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;min-height:240px!important;white-space:pre;overflow-wrap:normal;overflow-x:auto}
.code-editor{font-size:16px!important}
.json-status{font-size:12px;border-radius:10px;padding:10px 12px;margin:8px 0;white-space:pre-wrap;word-break:break-word}
.json-status.ok{background:#1e3324;color:#cfeeb0;border:1px solid #3c5e3c}
.json-status.bad{background:#3a2323;color:#ffc9c4;border:1px solid #6c403e}
.json-status.warn{background:#352c1e;color:#f6d3a3;border:1px solid #6a5434}
.prompt-box{background:#0d1211;border:1px solid #2f3d36;border-radius:12px;padding:12px;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#d9e4da;white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto;margin:8px 0}
details.fold{border:1px solid #2f3d36;border-radius:12px;padding:10px 12px;margin:10px 0;background:#141b19}
details.fold summary{cursor:pointer;font-weight:800;font-size:13px;min-height:28px;display:flex;align-items:center}
/* checklist */
.qa-list{display:grid;gap:10px;margin:14px 0}
.qa-item{background:#1b2420;border:1px solid #2f3d36;border-radius:13px;padding:12px}
.qa-item.pass{border-color:#3f6a3f}.qa-item.fail{border-color:#7a3f3b}
.qa-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.qa-head strong{font-size:14px}
.qa-head small{display:block;font-size:11px;color:#99aa9b;font-weight:500}
.qa-btns{display:flex;gap:6px;flex-shrink:0}
.qa-btn{min-width:64px;min-height:40px;border-radius:10px;border:1px solid #415443;background:transparent;color:#cfdccf;font-weight:800;font-size:12px}
.qa-btn.pass.on{background:var(--accent);color:#172514;border-color:var(--accent)}
.qa-btn.fail.on{background:#c45a52;color:#fff;border-color:#c45a52}
.qa-note{margin-top:8px}
.qa-note .text-control{padding:10px 12px}
.auto-tag{font-size:10px;color:var(--accent);font-weight:800;letter-spacing:.6px}
.gate{border:1px solid #6a5434;background:#2b2419;border-radius:14px;padding:14px;margin:12px 0}
.gate.ok{border-color:#3f6a3f;background:#1b2b1f}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{border:1px solid #415443;background:#1c2621;color:#d6e3d4;border-radius:100px;padding:8px 12px;font-size:12px;font-weight:700;min-height:36px}
.chip.on{background:var(--accent);color:#172514;border-color:var(--accent)}
.segmented{display:flex;background:#141b19;border:1px solid #2f3d36;border-radius:12px;padding:4px;gap:4px;margin:8px 0 12px}
.seg{flex:1;border:0;background:transparent;color:#a9b9ad;font-weight:800;font-size:12px;border-radius:9px;min-height:40px}
.seg.active{background:#2c3a32;color:var(--accent)}
/* projects */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px}
.stat{background:var(--panel);border:1px solid #2b3932;border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:20px;color:var(--accent)}.stat span{font-size:10px;color:#99aa9b;letter-spacing:1px;font-weight:800}
.project-card{flex-wrap:wrap;align-items:stretch}
.project-card.current{border-color:#5d7d45}
.project-thumb{width:62px;height:82px;border-radius:10px;background:#34422e;flex-shrink:0;overflow:hidden;display:grid;place-items:center;color:var(--accent);font-size:23px;border:0;padding:0}
.project-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.project-main{display:flex;gap:11px;flex:1;min-width:0;align-items:center;background:none;border:0;color:inherit;text-align:left;padding:0}
.stage-dots{display:flex;gap:4px;margin-top:7px}
.stage-dots i{display:block;width:16px;height:5px;border-radius:5px;background:#34443b}
.stage-dots i.on{background:var(--accent)}
.project-actions{display:flex;gap:6px;flex-wrap:wrap;width:100%;padding-top:10px;border-top:1px solid #2a3731}
.project-actions .mini-btn{flex:1}
/* history */
.history-list{display:grid;gap:8px;margin:10px 0 16px}
.history-item{background:var(--panel);border:1px solid #2b3932;border-radius:12px;padding:10px 12px;font-size:13px}
.history-item .h-top{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#99aa9b}
.history-item .h-type{color:var(--accent);font-weight:800;letter-spacing:.5px}
.history-item p{margin:4px 0 0;color:#d9e4da;word-break:break-word}
.empty{color:#8fa194;font-size:13px;text-align:center;padding:24px 10px;border:1px dashed #33433a;border-radius:14px}
/* versions */
.version-list{display:grid;gap:8px;margin:10px 0}
.version{display:flex;gap:10px;align-items:center;background:#1b2420;border:1px solid #2f3d36;border-radius:12px;padding:10px}
.version.active{border-color:var(--accent)}
.version .v-info{flex:1;min-width:0;font-size:12px}
.version .v-info strong{display:block;font-size:13px}
.version .v-info small{color:#99aa9b}
.handoff{counter-reset:h;list-style:none;padding:0;margin:10px 0;display:grid;gap:8px}
.handoff li{counter-increment:h;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#d4ddd3}
.handoff li::before{content:counter(h);flex-shrink:0;width:24px;height:24px;border-radius:50%;background:#2c3a32;color:var(--accent);font-weight:900;font-size:12px;display:grid;place-items:center}
@media(max-width:380px){.compare-grid img{height:170px}.nav-btn{font-size:10px}}

.top-pill{display:flex;align-items:center;gap:4px}
.step-strip{position:relative}
.ver-tag{color:#6f8574;margin-left:3px}