*{box-sizing:border-box}
:root{--ink:#171922;--muted:#6f7482;--line:#e1e4ec;--soft:#f5f6fa;--purple:#635bff;--purple2:#7b4dff;--danger:#d94b55}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#f6f7fb}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.58}
label{display:block;font-size:12px;font-weight:700;margin:11px 0 6px;color:#303440}
input,select{width:100%;min-height:38px;border:1px solid #cfd4df;border-radius:8px;padding:8px 10px;background:#fff;color:#1d2029;outline:none}
input:focus,select:focus{border-color:#7770ff;box-shadow:0 0 0 3px rgba(99,91,255,.12)}
input[type=color]{padding:3px}
input[type=range]{padding:0;min-height:24px;border:0;box-shadow:none;accent-color:#635bff}
.topbar{height:66px;background:#16171d;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:relative;z-index:20;box-shadow:0 1px 0 #ffffff12}
.brand{font-weight:800;letter-spacing:-.2px}.topbar nav{display:flex;gap:8px}.topbar nav a{padding:10px 12px;border-radius:8px;color:#e8e9ee;font-size:13px}.topbar nav a:hover{background:#272933}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #d3d7e1;background:#fff;color:#232630;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:750;line-height:1.1;min-height:36px;white-space:nowrap}
.btn:hover{background:#f7f7fb;border-color:#bdc3d0}.btn.primary{background:linear-gradient(135deg,#6259ff,#7a4dff);border-color:#6259ff;color:#fff}.btn.primary:hover{filter:brightness(.98)}.btn.accent{background:#fff8ef;border-color:#ffd7a8;color:#9a5700}.btn.danger{color:#b82935;border-color:#f0c6ca;background:#fff8f8}
.page{max-width:1500px;margin:auto;padding:34px 26px}.page.narrow{max-width:720px}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:24px}.page h1{margin:0 0 8px;font-size:30px}.page p{margin:0;color:var(--muted)}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 10px 30px #24325208}
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.project-card{background:#fff;border:1px solid #e1e4eb;border-radius:14px;overflow:hidden;box-shadow:0 8px 25px #17213c0a}.project-preview{height:180px;background:linear-gradient(135deg,#1a214d,#6e34c8,#d254da);display:flex;align-items:flex-end;justify-content:center;gap:12px;padding:22px}.mini-phone{height:130px;width:62px;border:4px solid #e8e9ee;border-radius:15px;background:#101631;box-shadow:0 8px 16px #0004;position:relative}.mini-phone:before{content:"";position:absolute;width:22px;height:6px;border-radius:8px;background:#08090a;top:6px;left:50%;transform:translateX(-50%)}.project-body{padding:18px}.project-body h3{margin:0 0 7px}.project-body p{font-size:13px;margin-bottom:14px}.row{display:flex;gap:10px;align-items:center}.empty{padding:40px;background:#fff;border:1px dashed #cfd3dc;border-radius:14px;color:#777}
.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#12163f,#5e38b6,#c748d2)}.login-card{width:min(390px,calc(100vw - 34px));background:#fff;padding:32px;border-radius:18px;box-shadow:0 20px 60px #0005}.login-card h1{margin:0 0 8px}.login-card p{color:#707583;margin:0 0 22px}.login-card .btn{width:100%;margin-top:18px}.alert{padding:10px;background:#ffeaea;color:#a40000;border-radius:8px}.hint{font-size:12px;color:#777;margin-top:15px;text-align:center}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.template-card{background:#fff;padding:14px;border:1px solid var(--line);border-radius:12px}.template-swatch{height:130px;border-radius:10px;margin-bottom:10px}.template-card small{display:block;color:#777;margin-top:4px}

/* Editor */
.editor-shell{height:calc(100vh - 66px);display:flex;flex-direction:column;background:#eef1f7}.editor-toolbar{background:#fff;border-bottom:1px solid #dfe2e9;padding:9px 12px;display:flex;gap:8px;align-items:center;position:sticky;top:0;z-index:15;box-shadow:0 2px 12px #17213c0a}.editor-toolbar select{width:auto;min-width:150px;max-width:210px;min-height:36px;padding:6px 8px;font-size:12px}.editor-toolbar #saveStatus{margin-left:auto;color:#25874a;font-size:12px;font-weight:800;padding-right:4px}.editor-content{display:flex;min-height:0;flex:1}.control-panel{width:294px;flex:0 0 294px;background:#fff;border-right:1px solid #dfe2e9;padding:15px;overflow:auto}.project-mini-head{padding:1px 0 10px}.project-mini-head h3{margin:4px 0 0;font-size:18px}.eyebrow{font-size:10px;font-weight:850;letter-spacing:.12em;color:#8a8f9d}.upload-box{border:1px dashed #cfd4df;background:#fafbfe;border-radius:10px;padding:11px}.upload-box label{margin-top:0}.upload-box input[type=file]{font-size:11px;min-height:36px;padding:6px}.upload-box .btn{width:100%;margin-top:8px}.control-section{border-top:1px solid #eceef3;margin-top:15px;padding-top:13px}.control-title{font-size:12px;font-weight:850;margin-bottom:4px;color:#1f2230}.check-row{display:flex;align-items:center;gap:8px;margin-top:10px}.check-row input{width:auto;min-height:0}.export-shortcuts .btn{width:100%;margin-top:7px}.export-note{font-size:10px;line-height:1.4;color:#858a96;margin-top:8px}
.screens-stage{display:flex;gap:16px;padding:18px;overflow:auto;align-items:flex-start;background:#e9edf5;flex:1}.screen-wrap{flex:0 0 330px}.screen-label{text-align:center;font-weight:800;margin:0 0 8px;font-size:12px;max-width:330px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screen-label span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#fff;border:1px solid #d9dde6;margin-right:6px;font-size:10px}.design-canvas{width:330px;position:relative;overflow:hidden;border-radius:12px;box-shadow:0 10px 30px #26304a24;cursor:pointer;background-repeat:no-repeat;background-color:#1a1f48;isolation:isolate}.design-canvas.canvas-phone{aspect-ratio:1284/2778}.design-canvas.canvas-tablet{aspect-ratio:2048/2732}.screen-wrap.active .design-canvas{outline:3px solid #6259ff;outline-offset:1px}.design-title{position:absolute;z-index:8;top:4.1%;left:4%;right:4%;text-align:center;font-family:Georgia,'Times New Roman',serif;font-weight:800;line-height:1.02;text-shadow:0 2px 10px #0005;word-break:normal}.design-glow{position:absolute;border-radius:50%;filter:blur(28px);opacity:.28;pointer-events:none;z-index:0}.glow-one{width:55%;height:18%;background:#fff;left:-16%;top:-4%}.glow-two{width:55%;height:20%;background:#ef86ff;right:-28%;bottom:3%;opacity:.2}
.device-shell{position:absolute;z-index:5;left:50%;top:var(--device-y);width:var(--device-width);transform:translateX(-50%);box-shadow:0 12px 30px rgba(0,0,0,var(--device-shadow-alpha));transition:width .08s linear,top .08s linear;background:#111;overflow:visible}.device-shell.iphone{aspect-ratio:9/19.5;border-radius:15% / 7%;border:3px solid var(--device-rim)}.device-shell.tablet{aspect-ratio:2048/2732;border-radius:5%;border:3px solid var(--device-rim)}.frame-black{background:#111214}.frame-titanium{background:#2c2a26}.frame-silver{background:#d6d7da}.frame-white{background:#f5f5f3}.frame-minimal{background:#0d0e10;border-width:2px!important}.device-screen{position:absolute;background:#050505;overflow:hidden;z-index:2}.iphone .device-screen{inset:1.55% 3.1%;border-radius:13.2% / 6.3%}.tablet .device-screen{inset:2.2%;border-radius:3.9%}.device-screen img{display:block;width:100%;height:100%;user-select:none}.dynamic-island{position:absolute;z-index:6;left:50%;top:2.6%;transform:translateX(-50%);width:31%;height:3.55%;min-height:9px;border-radius:999px;background:#030303;box-shadow:0 1px 2px #0008}.dynamic-island i{position:absolute;width:8%;aspect-ratio:1;border-radius:50%;background:#253243;right:12%;top:50%;transform:translateY(-50%);box-shadow:inset 0 0 3px #6a7b90}.side-button{position:absolute;z-index:1;width:2.4%;border-radius:3px;background:var(--device-rim);opacity:.8}.side-button-one{height:6.2%;left:-2.1%;top:18%}.side-button-two{height:8.3%;left:-2.1%;top:27%}.side-button-three{height:12.2%;right:-2.1%;top:26%}.tablet-camera{position:absolute;z-index:6;left:50%;top:.7%;width:1.2%;aspect-ratio:1;border-radius:50%;background:#08090a;transform:translateX(-50%);box-shadow:inset 0 0 0 1px #3b4552}.add-placeholder{width:330px;min-height:540px;display:grid;place-items:center;border:2px dashed #c2c7d2;border-radius:12px;color:#777;background:#fff8;text-align:center;padding:30px}.add-placeholder b{display:block;color:#353944;margin-bottom:8px}.add-placeholder span{display:block;font-size:12px;line-height:1.45}

/* Export modal */
.export-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px}.export-modal.open{display:flex}.export-modal-backdrop{position:absolute;inset:0;background:#0b0c12b8;backdrop-filter:blur(3px)}.export-dialog{position:relative;z-index:1;width:min(980px,95vw);max-height:88vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 30px 80px #0007;padding:20px}.export-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.export-dialog-head h2{margin:3px 0 0}.icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid #d9dde6;background:#fff;font-size:24px;line-height:1}.export-summary{margin:14px 0;padding:11px 13px;border-radius:9px;background:#f4f5fa;color:#555b68;font-size:13px}.export-preview-strip{display:flex;gap:12px;overflow:auto;padding:10px 2px 14px}.export-preview-item{flex:0 0 auto}.export-preview-item .design-canvas{width:155px;box-shadow:0 7px 20px #2223;pointer-events:none}.export-preview-item>span{display:block;text-align:center;font-size:10px;color:#737987;margin-top:6px}.export-actions{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #e6e8ef;padding-top:14px}.export-progress{min-height:22px;margin-top:10px;font-size:12px;color:#4d5570;font-weight:700;text-align:right}

@media(max-width:900px){.topbar nav{display:none}.editor-toolbar{overflow-x:auto}.control-panel{width:250px;flex-basis:250px}.screen-wrap{flex-basis:290px}.design-canvas{width:290px}.screen-label{max-width:290px}}