@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#10131b;--panel:#191e29;--line:#2b3240;--muted:#929bad;--text:#f5f7fb;--lime:#c9f36b;--lime2:#a9dc4c}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -20%,#293344 0,transparent 50%),var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh}.topbar{height:70px;border-bottom:1px solid #252b37;display:flex;align-items:center;justify-content:space-between;padding:0 max(calc((100% - 1180px)/2),24px)}.brand{font:800 17px Manrope,sans-serif;letter-spacing:2px;color:white;text-decoration:none}.brand b{color:var(--lime)}.brandmark{color:var(--lime);font-size:24px;vertical-align:-2px;margin-right:7px}.topnote{font-size:10px;letter-spacing:2px;color:#778194}.shell{max-width:1180px;margin:auto;padding:52px 24px 24px}.intro{text-align:center;max-width:690px;margin:0 auto 38px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--lime);font-weight:700}.eyebrow span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin:0 8px 1px 0;box-shadow:0 0 12px var(--lime)}h1{font:800 clamp(35px,5vw,57px)/1.12 Manrope,sans-serif;letter-spacing:-2.5px;margin:16px 0}h1 em{font-style:normal;color:var(--lime)}.intro p{color:#a4adbc;line-height:1.7;font-size:14px;margin:auto;max-width:560px}.workspace{display:grid;grid-template-columns: minmax(330px,.88fr) minmax(0,1.12fr);gap:18px;align-items:stretch}.panel{background:linear-gradient(145deg,#1c2230,#171c26);border:1px solid #303847;border-radius:17px;padding:25px;box-shadow:0 20px 60px #0003}.section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}.step{color:var(--lime);font:700 11px Manrope;letter-spacing:1.5px}.section-head h2,.preview-top h2{font:700 16px Manrope;margin:0 0 3px}.section-head small{font-size:11px;color:var(--muted)}.dropzone{min-height:145px;border:1px dashed #586477;border-radius:12px;background:#151a24;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;transition:.2s}.dropzone:hover,.dropzone.drag{border-color:var(--lime);background:#202a25}.dropzone input{display:none}.upload-icon{font-size:25px;color:var(--lime);margin-bottom:5px}.dropzone strong{font-size:13px}.dropzone small{font-size:10px;color:#8c96a8;margin-top:5px}.browse{font-size:9px;font-weight:800;letter-spacing:1px;color:#111715;background:var(--lime);padding:8px 15px;border-radius:6px;margin-top:12px}.ratio-head{margin-top:26px}.ratios{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.ratio{border:1px solid #343d4c;background:#171d27;color:#aeb7c6;border-radius:9px;padding:11px 3px 9px;display:flex;align-items:center;flex-direction:column;gap:5px;cursor:pointer}.ratio.active{border-color:var(--lime);background:#273127;color:white;box-shadow:inset 0 0 0 1px #c9f36622}.ratio b{font-size:11px}.ratio small{font-size:8px;color:#8792a3}.ratio-icon{display:block;border:1.5px solid currentColor;border-radius:2px;width:18px;height:18px}.ratio-icon.original{width:22px;height:15px}.ratio-icon.portrait{width:14px;height:18px}.ratio-icon.story{width:11px;height:19px}.ratio-icon.landscape{width:23px;height:13px}.style-head{margin-top:25px}.styles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.style{display:flex;align-items:center;text-align:left;gap:9px;background:#171d27;border:1px solid #343d4c;border-radius:9px;padding:9px;color:#f5f7fb;cursor:pointer}.style.active{border-color:var(--lime);background:#252e27}.swatch{width:29px;height:29px;border-radius:7px;flex:none}.swatch.natural{background:linear-gradient(135deg,#b4a17d,#668b70,#d5c5a4)}.swatch.vivid{background:linear-gradient(135deg,#f3a12e,#e84f78,#397bd4)}.swatch.warm{background:linear-gradient(135deg,#f9bd67,#bd7146,#754b39)}.swatch.cinematic{background:linear-gradient(135deg,#e9a46a,#426b68,#263c53)}.style b{display:block;font-size:11px}.style small{display:block;font-size:9px;color:#929bad;margin-top:3px}.style i{font-style:normal;color:var(--lime);margin-left:auto;opacity:0}.style.active i{opacity:1}.generate{width:100%;height:48px;margin-top:22px;background:var(--lime);border:0;border-radius:9px;color:#151a13;font-weight:800;letter-spacing:1px;font-size:11px;cursor:pointer;box-shadow:0 7px 24px #c9f36620}.generate:disabled{opacity:.35;cursor:not-allowed}.generate .arrow{float:right;margin-right:16px;font-size:17px;line-height:11px}.privacy{text-align:center;font-size:9px;color:#7f8999;margin:12px 0 0}.preview-panel{display:flex;flex-direction:column;min-height:620px}.preview-top{display:flex;justify-content:space-between;align-items:center}.preview-top h2{margin-top:5px}.status{font-size:8px;letter-spacing:1px;border:1px solid #3a4352;border-radius:20px;padding:6px 9px;color:#a4adbc}.status.ready{color:var(--lime);border-color:#687d43}.canvas-wrap{flex:1;min-height:390px;margin:20px 0 14px;background:repeating-conic-gradient(#252c38 0% 25%,#202733 0% 50%) 50%/22px 22px;border-radius:11px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.empty{text-align:center;color:#9aa4b5}.empty-icon{font-size:42px;color:#667286;margin-bottom:8px}.empty b{display:block;font-size:12px}.empty small{font-size:10px;display:block;margin-top:5px}canvas{display:block;max-width:100%;max-height:480px;object-fit:contain}.preview-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}.legend{font-size:10px;color:#a7b0bf;display:flex;align-items:center;gap:7px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.before{background:#7c8798;margin-left:4px}.after{background:var(--lime);margin-left:7px}.download{border:1px solid var(--lime);color:var(--lime);background:transparent;border-radius:7px;padding:10px 15px;font-size:9px;font-weight:800;letter-spacing:1px;cursor:pointer}.download:disabled{opacity:.3;cursor:not-allowed}.info{display:flex;gap:10px;border-top:1px solid #303847;margin-top:19px;padding-top:14px;color:#9ca7b7}.info>span{color:var(--lime);font-size:18px}.info p{font-size:10px;line-height:1.6;margin:0}.info b{color:#e8edf5;font-size:11px}footer{text-align:center;color:#687386;font-size:9px;letter-spacing:2px;padding:28px 0 8px}footer span{color:var(--lime);padding:0 5px}
@media(max-width:780px){.shell{padding:38px 15px 20px}.workspace{grid-template-columns:1fr}.panel{padding:19px}.preview-panel{min-height:500px}.canvas-wrap{min-height:320px}.topbar{padding:0 17px}.topnote{font-size:8px}}@media(max-width:380px){.ratios{gap:4px}.ratio small{font-size:7px}.ratio{padding-left:1px;padding-right:1px}}

.top-actions{display:flex;align-items:center;gap:16px}.settings-btn{border:1px solid #414c5e;background:#1b2230;color:var(--lime);padding:10px 13px;border-radius:8px;font-size:10px;font-weight:800;cursor:pointer}.swatch.reference{background:linear-gradient(135deg,#55a9ed,#8bd2ff,#58a65a)}.prompt-wrap{margin-top:17px}.prompt-wrap label,.settings-modal label{display:block;font-size:10px;font-weight:700;color:#c6cfdd;margin:0 0 7px}.prompt-wrap textarea,.settings-modal input,.settings-modal select{width:100%;background:#111722;border:1px solid #394456;color:#f5f7fb;border-radius:8px;padding:10px;font:11px 'DM Sans',sans-serif}.prompt-wrap textarea{resize:vertical}.local-generate{width:100%;margin-top:9px;padding:11px;border:1px solid #475365;background:transparent;color:#cbd3df;border-radius:8px;font-size:10px;font-weight:700;cursor:pointer}.local-generate:disabled{opacity:.35}.modal-backdrop{position:fixed;inset:0;background:#05070bdc;z-index:10;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}.modal-backdrop[hidden]{display:none}.settings-modal{width:min(100%,540px);max-height:95vh;overflow:auto;background:#1a202c;border:1px solid #3a4556;border-radius:16px;padding:22px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.modal-head h2{font:700 19px Manrope;margin-top:7px}.close-btn{background:#293344;color:var(--lime);border:1px solid #475365;border-radius:8px;font-size:22px;padding:6px 11px}.modal-desc{font-size:11px;color:#a4adbc;line-height:1.6}.settings-modal label{margin-top:13px}.key-row{display:flex;gap:7px}.key-row input{flex:1;min-width:0}.key-row button{background:#293344;color:#dce4ef;border:1px solid #475365;border-radius:8px;padding:0 12px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.security-note{background:#111a22;border:1px solid #344333;border-radius:9px;padding:11px;color:#aebaa8;font-size:10px;line-height:1.6;margin-top:17px}.security-note b{color:var(--lime)}.modal-actions{display:flex;gap:10px;margin-top:18px}.clear-btn,.save-btn{padding:12px;border-radius:8px;font-size:10px;font-weight:800}.clear-btn{background:transparent;border:1px solid #566174;color:#c3ccda}.save-btn{background:var(--lime);border:0;color:#151a13;flex:1}.settings-feedback{font-size:10px;color:var(--lime);min-height:12px}
@media(max-width:780px){.topbar{padding:10px 15px}.topnote{display:none}.top-actions{gap:0}.settings-btn{font-size:9px;padding:9px}}