@import url(https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700&family=Playfair+Display:wght@600;700&family=Poppins:wght@400;500;600;700&display=swap);*{box-sizing:border-box}body{font-family:Inter,Arial,sans-serif;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}:root{--bg:#f6f7fb;--surface:#fff;--muted:#667085;--text:#182230;--line:#e7eaf0;--brand:#5b5ce2;--brand-2:#7c3aed;--soft:#f1f2ff;--canvas:#edf0f7;--shadow:0 14px 40px #222a4414}.studio.dark{--bg:#11131a;--surface:#1b1e28;--muted:#a5adbd;--text:#f4f6fb;--line:#303541;--soft:#272638;--canvas:#171a23;--shadow:0 15px 45px #0000004d;color-scheme:dark}.studio{background:#f6f7fb;background:var(--bg);color:#182230;color:var(--text);min-height:100vh;transition:background .2s,color}.topbar{align-items:center;background:#fff;background:var(--surface);border-bottom:1px solid #e7eaf0;border-bottom:1px solid var(--line);display:flex;height:76px;justify-content:space-between;padding:0 28px}.brand,.brand>div,.header-actions{align-items:center;display:flex;gap:12px}.brand-mark{background:linear-gradient(135deg,#5b5ce2,#a855f7);background:linear-gradient(135deg,var(--brand),#a855f7);border-radius:12px;box-shadow:0 8px 16px #6d5ce344;color:#fff;display:grid;font-size:18px;height:38px;place-items:center;width:38px}.brand strong{display:block;font-size:15px;letter-spacing:-.2px}.brand span,.canvas-heading span,.sidebar-title p{color:#667085;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.brand span{font-size:10px;font-weight:500;letter-spacing:0;text-transform:none}.icon-button,.primary-button,.secondary-button,.theme-toggle{align-items:center;background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:10px;color:#182230;color:var(--text);display:inline-flex;font-size:13px;font-weight:600;gap:7px;height:36px;padding:0 11px}.icon-button{justify-content:center;padding:0;width:36px}.icon-button:disabled{cursor:not-allowed;opacity:.35}.icon-button:hover,.theme-toggle:hover{background:#f1f2ff;background:var(--soft)}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:calc(100vh - 76px)}.sidebar{background:#fff;background:var(--surface);border-right:1px solid #e7eaf0;border-right:1px solid var(--line);max-height:calc(100vh - 76px);overflow:auto;padding:22px 14px 16px}.sidebar-title{padding:0 9px 14px}.sidebar-title p{margin:0 0 5px}.sidebar-title span{color:#667085;color:var(--muted);font-size:12px}.accordion-section{border-top:1px solid #e7eaf0;border-top:1px solid var(--line)}.accordion-trigger{align-items:center;background:#0000;border:0;color:#182230;color:var(--text);display:flex;font-size:13px;font-weight:700;justify-content:space-between;padding:16px 9px;text-align:left;width:100%}.accordion-trigger span{align-items:center;display:flex;gap:10px}.accordion-trigger span i{color:#5b5ce2;color:var(--brand);font-size:15px}.accordion-content{padding:0 9px 17px}.hint{color:#667085;color:var(--muted);font-size:11px;line-height:1.5;margin:10px 0 0}.generate-button{align-items:center;background:linear-gradient(135deg,#5b5ce2,#7c3aed);background:linear-gradient(135deg,var(--brand),var(--brand-2));border:0;border-radius:12px;box-shadow:0 9px 20px #645ce040;color:#fff;display:flex;font-size:13px;font-weight:700;gap:8px;justify-content:center;margin-top:16px;padding:13px;width:100%}.generate-button:disabled{cursor:wait;opacity:.6}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.device-grid{grid-gap:7px;display:grid;gap:7px;grid-template-columns:repeat(3,1fr)}.device-option{align-items:center;background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:11px;color:#182230;color:var(--text);display:flex;flex-direction:column;font-size:11px;gap:3px;padding:10px 4px;transition:.18s}.device-option i{color:#667085;color:var(--muted);font-size:19px}.device-option small{color:#667085;color:var(--muted);font-size:8px}.device-option.selected{background:#f1f2ff;background:var(--soft);border-color:#5b5ce2;border-color:var(--brand);box-shadow:inset 0 0 0 1px #5b5ce2;box-shadow:inset 0 0 0 1px var(--brand)}.device-option.selected i{color:#5b5ce2;color:var(--brand)}.accordion-content .mb-4{margin:0!important}.form-control{background:#fff!important;background:var(--surface)!important;border-color:#e7eaf0!important;border-color:var(--line)!important;border-radius:10px!important;color:#182230!important;color:var(--text)!important;font-size:12px!important;padding:10px!important}.file-status{color:#18a56c;font-size:11px;margin:8px 0 0}.studio-input{background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:9px;color:#182230;color:var(--text);font-size:12px;margin:5px 0 12px;outline:none;padding:9px 10px;width:100%}.studio-input:focus{border-color:#5b5ce2;border-color:var(--brand);box-shadow:0 0 0 3px #5b5ce21a}.field-label{align-items:center;color:#667085;color:var(--muted);display:flex;font-size:11px;font-weight:700;justify-content:space-between;margin:8px 0 2px}.color-dot{border:1px solid #c7cbd4;border-radius:50%;height:16px;width:16px}.swatch-grid{grid-gap:6px;display:grid;gap:6px;grid-template-columns:repeat(6,1fr);margin:8px 0}.swatch{border:2px solid #0000;border-radius:7px;height:23px}.swatch.selected{border-color:#182230;border-color:var(--text);box-shadow:0 0 0 2px #fff,0 0 0 3px #5b5ce2;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--brand)}.hex-field{align-items:center;border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:8px;color:#667085;color:var(--muted);display:flex;font-size:12px;padding-left:10px}.hex-field input{background:#0000;border:0;color:#182230;color:var(--text);outline:0;padding:8px 4px;width:100%}.gradient-presets{grid-gap:6px;display:grid;gap:6px;grid-template-columns:1fr 1fr;margin:0 0 10px}.gradient-chip{align-items:center;background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:8px;color:#182230;color:var(--text);display:flex;font-size:10px;gap:6px;padding:5px}.gradient-chip span{border-radius:5px;height:20px;width:20px}.template-grid{grid-gap:6px;display:grid;gap:6px;margin-bottom:12px}.template-card{background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:8px;color:#182230;color:var(--text);padding:8px;text-align:left}.template-card small,.template-card strong{display:block;font-size:11px}.template-card small{color:#667085;color:var(--muted);font-size:10px;margin-top:2px}.template-card.selected{background:#f1f2ff;background:var(--soft);border-color:#5b5ce2;border-color:var(--brand)}.overlay-actions{display:flex;gap:6px}.overlay-actions button{background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:7px;color:#182230;color:var(--text);font-size:11px;min-width:31px;padding:6px}.overlay-actions button:last-child{margin-left:auto}.main-panel{display:flex;flex-direction:column;gap:20px;min-width:0;padding:28px 34px 34px}.canvas-heading{align-items:flex-end;display:flex;justify-content:space-between}.canvas-heading h1{font-size:20px;letter-spacing:-.6px;margin:4px 0 0}.download-actions{display:flex;gap:8px}.primary-button{background:#5b5ce2;background:var(--brand);border-color:#5b5ce2;border-color:var(--brand);color:#fff}.preview-area{background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 40px #222a4414;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:calc(100vh - 185px);overflow:hidden}.preview-toolbar{align-items:center;border-bottom:1px solid #e7eaf0;border-bottom:1px solid var(--line);display:flex;height:53px;justify-content:space-between;padding:0 16px}.output-tabs{display:flex;gap:5px}.output-tabs button{background:#0000;border:0;border-radius:7px;color:#667085;color:var(--muted);font-size:11px;padding:6px 10px;text-transform:capitalize}.output-tabs button.active{background:#f1f2ff;background:var(--soft);color:#5b5ce2;color:var(--brand);font-weight:700}.zoom-controls{align-items:center;display:flex;gap:4px}.zoom-controls button{background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:6px;color:#182230;color:var(--text);height:27px;width:27px}.zoom-controls span{color:#667085;color:var(--muted);font-size:10px;min-width:32px;text-align:center}.canvas-viewport{background:radial-gradient(#e7eaf0 1px,#0000 0);background:radial-gradient(var(--line) 1px,#0000 1px);background-color:#edf0f7;background-color:var(--canvas);background-size:18px 18px;cursor:grab;display:grid;flex:1 1;min-height:570px;overflow:hidden;place-items:center;position:relative;touch-action:none}.canvas-viewport:active{cursor:grabbing}.canvas-art{max-height:94%;max-width:92%;position:relative;transition:transform .08s linear;will-change:transform}.canvas-art img{border-radius:7px;box-shadow:0 25px 70px #12192c50;display:block;max-height:70vh;max-width:100%}.canvas-art img,.draggable-copy{-webkit-user-select:none;user-select:none}.draggable-copy{color:#fff;cursor:move;font-size:clamp(9px,1.8vw,23px);font-weight:700;max-width:80%;overflow:hidden;position:absolute;text-align:center;text-overflow:ellipsis;text-shadow:0 2px 10px #0008;transform:translate(-50%,-50%);white-space:nowrap}.draggable-copy.subheading{font-size:clamp(7px,1.1vw,15px);font-weight:500}.empty-preview{color:#667085;color:var(--muted);text-align:center}.empty-preview i{color:#5b5ce2;color:var(--brand);font-size:34px}.empty-preview h3{color:#182230;color:var(--text);font-size:16px;margin:13px 0 5px}.empty-preview p{font-size:12px;line-height:1.5;margin:0;max-width:230px}@media (max-width:800px){.topbar{padding:0 15px}.workspace{grid-template-columns:1fr}.sidebar{border-right:0;max-height:none}.main-panel{padding:18px}.canvas-heading{align-items:flex-start;flex-direction:column;gap:12px}.preview-area{min-height:550px}.canvas-viewport{min-height:480px}.canvas-art img{max-height:430px}.brand span{display:none}}.upload-batch-list{display:flex;gap:6px;overflow-x:auto;padding:9px 0 2px}.upload-batch-thumb{background:#fff;background:var(--surface);border:2px solid #e7eaf0;border:2px solid var(--line);border-radius:7px;flex:0 0 48px;height:62px;overflow:hidden;padding:0;position:relative}.upload-batch-thumb img{height:100%;object-fit:cover;width:100%}.upload-batch-thumb span{background:#5b5ce2;background:var(--brand);border-radius:50%;bottom:2px;color:#fff;display:grid;font-size:9px;font-weight:700;height:15px;place-items:center;position:absolute;right:2px;width:15px}.image-drawer{background:#fff;background:var(--surface);border-left:1px solid #e7eaf0;border-left:1px solid var(--line);box-shadow:-18px 0 45px #18223020;height:calc(100vh - 76px);overflow:auto;padding:16px;position:fixed;right:0;top:76px;transform:translateX(100%);transition:transform .22s ease;width:min(320px,88vw);z-index:20}.image-drawer.open{transform:translateX(0)}.image-drawer-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.drawer-image-list{grid-gap:8px;display:grid;gap:8px}.drawer-image-card{align-items:center;background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:9px;color:#182230;color:var(--text);display:flex;font-size:11px;gap:8px;padding:7px;width:100%}.drawer-image-card.selected{background:#f1f2ff;background:var(--soft);border-color:#5b5ce2;border-color:var(--brand)}.drawer-image-select{grid-gap:9px;align-items:center;background:#0000;border:0;color:inherit;display:grid;flex:1 1;font-size:inherit;gap:9px;grid-template-columns:54px 1fr auto;min-width:0;padding:0;text-align:left}.drawer-image-card img{border-radius:6px;height:64px;object-fit:cover;width:54px}.drawer-image-card span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drawer-image-select>i{color:#18a56c}.drawer-image-remove{background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:8px;color:#dc2626;display:grid;flex-shrink:0;height:30px;place-items:center;width:30px}.drawer-image-remove:hover{background:#f1f2ff;background:var(--soft)}.preset-modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#10182880;display:grid;inset:0;padding:20px;place-items:center;position:fixed;z-index:30}.preset-modal{background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:18px;box-shadow:0 28px 80px #10182855;padding:26px;width:min(420px,100%)}.preset-modal-icon{background:#f1f2ff;background:var(--soft);border-radius:12px;color:#5b5ce2;color:var(--brand);display:grid;font-size:20px;height:42px;margin-bottom:14px;place-items:center;width:42px}.preset-modal h2{font-size:19px;letter-spacing:-.4px;margin:0 0 7px}.preset-modal p{color:#667085;color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 18px}.preset-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.preset-modal-actions button:disabled{cursor:not-allowed;opacity:.5}.preset-actions{grid-gap:7px;display:grid;gap:7px}.preset-delete-check{align-items:center;color:#667085;color:var(--muted);display:flex;font-size:11px;gap:7px}.preset-delete-check input{accent-color:#dc2626}.delete-preset-button{background:#fff1f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:12px;padding:8px;width:100%}.delete-preset-button:disabled{cursor:not-allowed;opacity:.45}.gradient-editor{margin-bottom:16px}.gradient-preview{border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:10px;box-shadow:inset 0 0 0 1px #fff5;cursor:crosshair;height:44px;position:relative}.gradient-handle{border:2px solid #fff;border:2px solid var(--surface);border-radius:7px;box-shadow:0 2px 6px #0005;height:31px;outline:1px solid #27364a;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:17px}.gradient-handle.selected{outline:2px solid #5b5ce2;outline:2px solid var(--brand);transform:translate(-50%,-50%) scale(1.08)}.gradient-toolbar{align-items:center;display:flex;gap:8px;justify-content:space-between;margin:10px 0}.gradient-type{border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:8px;display:flex;overflow:hidden}.gradient-type button{background:#fff;background:var(--surface);border:0;color:#667085;color:var(--muted);font-size:11px;padding:7px 11px}.gradient-type button.active{background:#f1f2ff;background:var(--soft);color:#5b5ce2;color:var(--brand);font-weight:700}.angle-input{align-items:center;border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:8px;color:#667085;color:var(--muted);display:flex;font-size:11px;gap:4px;padding:4px 7px}.angle-input input{background:#0000;border:0;color:#182230;color:var(--text);font-size:11px;outline:0;width:38px}.gradient-editor .gradient-presets{grid-template-columns:repeat(3,1fr);margin-bottom:10px}.gradient-editor .gradient-chip{font-size:9px;justify-content:flex-start;padding:5px}.gradient-editor .gradient-chip span{height:17px;width:17px}.stop-editor{display:flex;gap:7px;margin-top:9px}.stop-picker{align-items:center;border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:8px;display:flex;flex:1 1;gap:5px;padding:3px 6px}.stop-picker input[type=color]{background:#0000;border:0;height:27px;padding:0;width:29px}.stop-picker input:not([type]){background:#0000;border:0;color:#182230;color:var(--text);font-size:11px;outline:0;width:100%}.stop-position{align-items:center;border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:8px;color:#667085;color:var(--muted);display:flex;font-size:10px;gap:3px;padding:4px 7px}.stop-position input{background:#0000;border:0;color:#182230;color:var(--text);font-size:11px;outline:0;width:31px}.gradient-stop-list{grid-gap:5px;display:grid;gap:5px;margin-top:8px}.gradient-stop-list button{align-items:center;background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:7px;color:#182230;color:var(--text);display:flex;font-size:10px;gap:7px;padding:5px;text-align:left}.gradient-stop-list button.active{background:#f1f2ff;background:var(--soft);border-color:#5b5ce2;border-color:var(--brand)}.gradient-stop-list span{border-radius:5px;height:17px;width:17px}.gradient-stop-list small{color:#667085;color:var(--muted);margin-left:auto}.gradient-stop-list i{color:#667085;color:var(--muted);font-size:14px}.text-size-control{margin:4px 0 13px}.text-size-control .field-label{margin-top:0}.text-size-control output{color:#5b5ce2;color:var(--brand);font-weight:700}.text-size-control input[type=range]{cursor:pointer}.range-control,.text-size-control input[type=range]{accent-color:#5b5ce2;accent-color:var(--brand);width:100%}.range-control{margin:4px 0 11px}.rotate-button{background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:8px;color:#182230;color:var(--text);font-size:12px;padding:8px;width:100%}.live-art{aspect-ratio:9/16;border-radius:8px;box-shadow:0 25px 70px #12192c50;overflow:hidden;position:relative;width:min(360px,70vw)}.live-frame{background:#fff;border:16px solid #333;border-radius:34px;box-sizing:border-box;height:76%;left:7%;overflow:hidden;padding:10px;position:absolute;top:24%;width:86%}.live-frame img{display:block;height:100%;width:100%}.live-heading,.live-subheading{color:#fff;font-weight:700;position:absolute;text-align:center;text-shadow:0 2px 8px #0008;transform:translate(-50%,-50%);width:86%;z-index:2}.live-heading{font-size:21px}.live-subheading{font-size:12px;font-weight:500}.editable-text{cursor:move;touch-action:none}.editable-text.selected{outline:1px dashed #fff;outline-offset:4px}.live-text-tools{align-items:center;background:#111b;border-radius:7px;color:#fff;display:flex;font-size:10px;gap:4px;padding:4px 6px;position:absolute;right:4px;top:4px;z-index:5}.live-text-tools button{background:#fff;border:0;border-radius:4px;color:#111;font-size:15px;height:22px;width:22px}.live-frame-tools{background:#111c;border-radius:7px;bottom:5px;color:#fff;font-size:10px;left:5px;padding:6px;position:absolute;width:130px;z-index:6}.live-frame-tools label{align-items:center;display:flex;gap:5px}.live-frame-tools input{accent-color:#fff;flex:1 1}.picker-row{align-items:center;display:flex;gap:7px}.native-color-input{background:#fff;background:var(--surface);border:1px solid #e7eaf0;border:1px solid var(--line);border-radius:8px;cursor:pointer;height:36px;padding:3px;width:40px}.picker-row .hex-field{flex:1 1}
/*# sourceMappingURL=main.7440f019.css.map*/