:root{--max-upload:25;--studio-bg:#111522;--studio-panel:#181d2b;--studio-panel-2:#202638;--studio-line:#30384e;--studio-text:#f7f9ff;--studio-muted:#aeb7cd;--studio-purple:#7957ec;--studio-cyan:#22c7d9}body.studio-mode{overflow:hidden;background:#0d1120;color:var(--studio-text)}body.studio-mode .site-backdrop,body.studio-mode>.skip{display:none}body.studio-mode #main{height:100dvh}.create-app{height:100dvh;background:radial-gradient(circle at 64% -10%,rgba(100,65,210,.38),transparent 34%),var(--studio-bg);color:var(--studio-text);overflow:hidden}.create-app *{box-sizing:border-box}.create-app button,.create-app input,.create-app textarea,.create-app select{font:inherit}.is-hidden{display:none!important}
/* Studio home */
.create-home{display:grid;grid-template-columns:250px minmax(0,1fr);height:100%}.create-home-nav{display:flex;flex-direction:column;padding:18px 14px;border-right:1px solid var(--studio-line);background:rgba(13,16,29,.94)}.create-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;padding:4px 8px 22px}.create-brand img{width:38px;height:38px}.create-brand span{font-weight:900;letter-spacing:-.03em}.create-brand small{display:block;color:#8e99b5;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.home-create-button{display:flex;align-items:center;gap:9px;border:0;border-radius:12px;padding:12px 14px;background:linear-gradient(135deg,#8a5bf2,#5c55e5);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 12px 30px rgba(103,74,225,.27)}.home-create-button b{font-size:20px}.create-home-nav nav{display:grid;gap:5px;margin-top:22px}.create-home-nav nav a,.create-home-nav nav button{display:flex;align-items:center;gap:12px;border:0;border-radius:10px;padding:11px 12px;background:transparent;color:#bcc5d9;text-decoration:none;text-align:left;cursor:pointer}.create-home-nav nav a:hover,.create-home-nav nav button:hover,.create-home-nav nav button.active{background:#242a3b;color:#fff}.create-home-nav nav span{width:22px;text-align:center;font-size:18px}.home-nav-note{margin-top:auto;padding:16px;border:1px solid #343c54;border-radius:15px;background:linear-gradient(145deg,rgba(121,87,236,.18),rgba(34,199,217,.06))}.home-nav-note b{font-size:13px}.home-nav-note p{margin:6px 0 0;color:#a8b1c7;font-size:12px;line-height:1.55}.home-back{color:#aeb7cd;text-decoration:none;font-size:12px;padding:15px 8px 2px}.create-home-main{overflow:auto;padding:42px clamp(28px,4vw,68px) 70px}.create-home-main>header{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;max-width:1400px;margin:auto}.create-home-main>header>div:first-child>span,.kicker{color:#72dce3;font-size:11px;font-weight:900;letter-spacing:.16em}.create-home-main h1{margin:8px 0 7px;font-size:clamp(32px,4vw,58px);letter-spacing:-.055em;line-height:1}.create-home-main header p{margin:0;color:var(--studio-muted)}.home-account{display:flex;align-items:center;gap:10px}.home-account>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#754ee7;font-weight:900}.home-account b,.home-account small{display:block}.home-account small{color:var(--studio-muted);font-size:11px}.home-account a{color:#fff;text-decoration:none;border:1px solid #424b64;border-radius:10px;padding:10px 14px}.create-search{display:flex;align-items:center;max-width:850px;margin:36px auto 32px;border:1px solid #4a3a81;border-radius:17px;background:#141824;box-shadow:0 12px 36px rgba(89,53,190,.28)}.create-search span{font-size:23px;padding-left:18px}.create-search input{width:100%;border:0;outline:0;padding:17px;background:transparent;color:#fff}.preset-section,.home-actions,.home-recent,.home-library{max-width:1400px;margin:0 auto 34px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.section-heading h2{font-size:20px;margin:4px 0 0}.section-heading>button,.section-heading>a{border:1px solid #414960;border-radius:9px;padding:8px 11px;background:#202536;color:#e8ecf8;text-decoration:none;cursor:pointer}.preset-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}.preset-card{min-height:108px;display:flex;align-items:center;gap:13px;border:1px solid #343c51;border-radius:16px;padding:16px;background:#1c2130;color:#fff;text-align:left;cursor:pointer;transition:.18s}.preset-card:hover{transform:translateY(-2px);border-color:#7962d5;background:#242a3d}.preset-card.featured{background:linear-gradient(145deg,rgba(124,87,236,.35),rgba(28,33,48,.95));border-color:#765cd2}.preset-card i{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#2e3549;color:#86e0e5;font-style:normal;font-size:20px}.preset-card b,.preset-card small{display:block}.preset-card small{margin-top:5px;color:#9fa9c1;font-size:11px}.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}.home-actions article{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:23px;border:1px solid #343c51;border-radius:18px;background:#1b202f}.home-actions h2{font-size:19px;margin:5px 0}.home-actions p{max-width:500px;margin:0;color:#aab3c9;font-size:12px}.home-actions button,.home-actions a{flex:none;border:0;border-radius:10px;padding:10px 14px;background:#fff;color:#141728;font-weight:800;text-decoration:none;cursor:pointer}.recent-home-grid,.home-asset-grid{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:14px}.recent-home-grid>button,.home-asset-grid>button{border:0;background:transparent;color:#fff;text-align:left;cursor:pointer}.recent-shape{height:130px;max-width:100%;margin-bottom:8px;border:1px solid #404a63;border-radius:12px;background:linear-gradient(145deg,#343b55,#22273a);box-shadow:0 10px 25px rgba(0,0,0,.22)}.recent-home-grid b,.recent-home-grid small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-home-grid small{color:#8e99b4;font-size:10px;margin-top:4px}.empty-recent{grid-column:1/-1;padding:25px;border:1px dashed #3d465e;border-radius:14px;color:#aeb7cb}.empty-recent b,.empty-recent span{display:block}.home-asset-grid button{padding:10px;border:1px solid #31394e;border-radius:13px;background:#1b202f}.home-asset-grid img{width:100%;height:125px;object-fit:contain}.home-asset-grid span{display:block;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
/* Full editor */
.studio-editor{display:grid;grid-template-rows:58px minmax(0,1fr);height:100%}.editor-topbar{display:grid;grid-template-columns:165px minmax(0,1fr) auto auto;align-items:center;border-bottom:1px solid rgba(255,255,255,.17);background:linear-gradient(90deg,#16b9c7,#4868dc 55%,#772fd6);padding:0 12px;gap:14px}.editor-brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:900}.editor-brand img{width:34px;height:34px}.editor-file,.editor-history,.editor-actions{display:flex;align-items:center;gap:7px}.editor-file input{width:min(310px,32vw);border:0;border-radius:7px;padding:7px 9px;background:rgba(14,18,34,.26);color:#fff;font-weight:750}.editor-file small{color:rgba(255,255,255,.8);font-size:10px}.editor-topbar button{border:1px solid rgba(255,255,255,.24);border-radius:8px;padding:7px 10px;background:rgba(12,17,34,.18);color:#fff;cursor:pointer}.editor-topbar button:hover{background:rgba(12,17,34,.32)}.editor-topbar .export-button{background:#fff;color:#312255;font-weight:900;padding-inline:17px}.editor-body{display:grid;grid-template-columns:72px 310px minmax(0,1fr);min-height:0}.editor-body.panel-closed{grid-template-columns:72px 0 minmax(0,1fr)}.editor-rail{z-index:3;display:flex;flex-direction:column;gap:4px;padding:10px 6px;background:#111522;border-right:1px solid #2f374a}.editor-rail button{display:grid;place-items:center;gap:3px;min-height:56px;border:0;border-radius:9px;background:transparent;color:#aeb8cf;font-size:10px;cursor:pointer}.editor-rail button i{font-style:normal;font-size:19px}.editor-rail button:hover,.editor-rail button.active{background:#282e42;color:#fff}.studio-tools{position:relative;min-width:0;background:#1a1f2d;border-right:1px solid #30384c;overflow:visible}.editor-body.panel-closed>.studio-tools{visibility:hidden}.panel-collapse{position:absolute;z-index:4;right:-14px;top:50%;width:28px;height:46px;border:1px solid #343d54;border-radius:0 10px 10px 0;background:#1a1f2d;color:#fff;cursor:pointer}.tool-panel{display:none;height:100%;overflow:auto;padding:20px 18px 30px}.tool-panel.active{display:block}.panel-title{margin-bottom:18px}.panel-title span{color:#7be0e5;font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.panel-title h2{margin:4px 0 0;color:#fff;font-size:21px}.tool-panel h3{margin:22px 0 6px;color:#e7ebf8;font-size:12px}.tool-panel>p,.tool-note{color:#adb6cc;font-size:12px;line-height:1.5}.tool-panel label{display:grid;gap:5px;margin:14px 0;color:#d4daea;font-size:12px}.tool-panel output{justify-self:end;margin-top:-22px;color:#fff}.tool-panel input,.tool-panel select,.tool-panel textarea{width:100%;border:1px solid #3b445c;border-radius:8px;padding:9px;background:#111624;color:#fff}.tool-panel input[type=range]{border:0;padding:0;accent-color:#8a68ef}.tool-panel input[type=color]{height:40px;padding:3px}.tool-panel button{border:1px solid #3b445c;border-radius:8px;padding:9px;background:#252b3e;color:#edf1fb;cursor:pointer}.tool-panel button:hover{background:#30374d}.tool-primary{background:linear-gradient(135deg,#7957ec,#4c68dc)!important;border:0!important}.tool-split,.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mini-presets,.orientation-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}.mini-presets button,.orientation-buttons button{font-size:10px;padding:7px}.studio-drop{place-items:center;border:1px dashed #7062a9!important;border-radius:13px;padding:20px 10px!important;background:rgba(115,84,224,.09);text-align:center;cursor:pointer}.studio-drop input{display:none}.studio-drop span,.studio-drop small{color:#9ea8c0}.studio-drop.dragging{border-color:#54d4da!important;background:rgba(34,199,217,.1)}.asset-search{display:flex;align-items:center;margin:15px 0 10px;border:1px solid #3b445c;border-radius:8px;background:#111624}.asset-search span{padding-left:10px}.asset-search input{border:0}.studio-library{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.source-choice{min-width:0;overflow:hidden;text-align:left}.source-choice img{width:100%;height:72px;object-fit:contain}.source-choice span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}.source-choice.featured{display:grid;width:100%;margin-top:12px;background:rgba(121,87,236,.15)}.source-choice.featured strong{font-size:12px}.source-choice.featured small{color:#9ca6bd}.details-panel dl{margin:0}.details-panel dl div{padding:12px;border-bottom:1px solid #343c51;background:#202638}.details-panel dl div:first-child{border-radius:10px 10px 0 0}.details-panel dl div:last-child{border-radius:0 0 10px 10px}.details-panel dt{color:#8edce2;font-size:10px;font-weight:800;text-transform:uppercase}.details-panel dd{margin:4px 0 0;color:#fff;font-size:13px;font-weight:650}.studio-tip{margin-top:16px;padding:14px;border:1px solid #4c4380;border-radius:12px;background:#252044}.studio-tip b{color:#fff}.studio-tip p{margin:5px 0 0;color:#c6c9df;font-size:11px;line-height:1.5}.recent-creations{margin-top:18px}.recent-creations h3{color:#fff;font-size:12px}.recent-creations button{display:grid;width:100%;border:0;border-bottom:1px solid #343c51;background:transparent;color:#fff;text-align:left}.recent-creations small{color:#9ea8c0}
.canvas-stage{position:relative;display:grid;grid-template-rows:minmax(0,1fr) 46px;min-width:0;min-height:0;background:#080c16;overflow:hidden}.artboard-viewport{display:grid;place-items:center;min-width:0;min-height:0;padding:34px;overflow:auto;background-color:#eef2f8;background-image:radial-gradient(#c9d1df 1px,transparent 1px);background-size:20px 20px}.canvas-empty{z-index:2;position:absolute;inset:0 0 46px;display:grid;place-content:center;place-items:center;text-align:center;background:rgba(238,242,248,.96);color:#20283a}.canvas-empty[hidden]{display:none}.canvas-empty>span{font-size:30px;color:#7759e7}.canvas-empty h2{margin:8px 0 3px}.canvas-empty p{margin:0 0 14px;color:#667188}.canvas-wrap{display:none;place-items:center;box-shadow:0 18px 55px rgba(23,31,52,.25);overflow:hidden}.canvas-wrap.has-image,.canvas-wrap.blank-canvas{display:grid}.canvas-wrap.transparent{background-color:#fff;background-image:linear-gradient(45deg,#e1e5ed 25%,transparent 25%),linear-gradient(-45deg,#e1e5ed 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e1e5ed 75%),linear-gradient(-45deg,transparent 75%,#e1e5ed 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.canvas-wrap.light{background:#fff}.canvas-wrap.dark{background:#111827}.canvas-wrap canvas{display:block;touch-action:none}.canvas-wrap canvas.object-active{cursor:move}.canvas-wrap canvas.brush-active{cursor:crosshair}.canvas-stage footer{display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#151a27;border-top:1px solid #30384c}.canvas-stage footer>div{display:flex;align-items:center;gap:5px}.canvas-stage footer span,.canvas-stage footer output{color:#c5cce0;font-size:11px}.canvas-stage footer button{border:1px solid #374056;border-radius:7px;padding:5px 8px;background:#23293b;color:#fff;cursor:pointer}.canvas-stage footer button.active{background:#6650c7}.canvas-stage footer input[type=color]{width:28px;height:28px;border:0;background:transparent}.canvas-stage .button{border:0;border-radius:9px;padding:10px 15px;background:#6e52df;color:#fff;font-weight:800;cursor:pointer}
.home-actions small{display:block;margin-top:9px;color:#7f8ba8;font-size:10px}.home-upload-zone{position:relative;border-style:dashed!important;transition:.18s}.home-upload-zone:after{content:"⇧";position:absolute;right:22px;top:17px;color:#7760d5;font-size:25px;opacity:.5}.home-upload-zone.dragging{border-color:#49d2dc!important;background:rgba(34,199,217,.12);transform:translateY(-2px)}.home-upload-zone.dragging:after{color:#56e2e8;opacity:1}
/* Dialogs */
.export-dialog,.custom-size-dialog{width:min(480px,calc(100% - 28px));border:1px solid #46506a;border-radius:20px;background:#171c2a;color:#fff;padding:0;box-shadow:0 35px 100px rgba(0,0,0,.65)}.export-dialog::backdrop,.custom-size-dialog::backdrop{background:rgba(4,7,15,.77);backdrop-filter:blur(7px)}.export-dialog form,.custom-size-dialog form{display:grid;gap:14px;padding:26px}.dialog-close{position:absolute;right:13px;top:10px;border:0;background:transparent;color:#fff;font-size:22px;cursor:pointer}.export-dialog h2,.custom-size-dialog h2{margin:0}.export-dialog p,.custom-size-dialog p{margin:0;color:#aeb7cc}.export-dialog label,.custom-size-dialog label{display:grid;gap:5px;font-size:12px}.export-dialog input,.export-dialog select,.custom-size-dialog input{border:1px solid #3d465e;border-radius:8px;padding:9px;background:#101521;color:#fff}.export-preview{height:180px;display:grid;place-items:center;border-radius:12px;background:#fff}.export-preview canvas{max-width:100%;max-height:180px}.export-dialog .button,.custom-size-dialog .button{border:0;border-radius:9px;padding:11px;background:#7457e7;color:#fff;font-weight:850}.export-dialog small{color:#9ea8bf;text-align:center}
@media(max-width:1100px){.preset-grid{grid-template-columns:repeat(3,1fr)}.recent-home-grid,.home-asset-grid{grid-template-columns:repeat(4,1fr)}.editor-body{grid-template-columns:66px 280px minmax(0,1fr)}.editor-topbar{grid-template-columns:46px minmax(0,1fr) auto auto}.editor-brand span{display:none}}
@media(max-width:760px){body.studio-mode{overflow:auto}.create-app{min-height:100dvh;height:auto}.create-home{display:block}.create-home-nav{height:auto;display:flex;flex-direction:row;align-items:center;gap:8px;padding:10px;position:sticky;top:0;z-index:5}.create-brand{padding:0;margin-right:auto}.create-brand span,.create-home-nav nav,.home-nav-note,.home-back{display:none}.home-create-button{padding:9px;font-size:12px}.create-home-main{padding:26px 14px 60px}.create-home-main>header{display:block}.home-account{margin-top:16px}.preset-grid{grid-template-columns:repeat(2,1fr)}.home-actions{grid-template-columns:1fr}.home-actions article{align-items:flex-start;flex-direction:column}.recent-home-grid,.home-asset-grid{grid-template-columns:repeat(2,1fr)}.studio-editor{height:100dvh}.editor-topbar{grid-template-columns:38px minmax(0,1fr) auto;padding:0 7px}.editor-file button,.editor-file small,.editor-history{display:none}.editor-file input{width:100%}.editor-actions .quiet-button{display:none}.editor-body{grid-template-columns:58px minmax(0,1fr)}.editor-body.panel-closed{grid-template-columns:58px minmax(0,1fr)}.editor-rail{overflow-y:auto}.studio-tools{position:absolute;z-index:5;left:58px;top:58px;bottom:46px;width:min(310px,calc(100vw - 58px));box-shadow:20px 0 45px rgba(0,0,0,.32)}.editor-body.panel-closed>.studio-tools{display:none}.canvas-stage{grid-column:2}.artboard-viewport{padding:18px}.preview-controls span,.preview-controls button:not(.active),.preview-controls input{display:none}}
/* v3.1 expanded creative tools */
.canvas-stage{grid-template-rows:52px minmax(0,1fr) 46px}.canvas-empty{inset:52px 0 46px}.editor-body>.studio-tools{overflow:hidden}.editor-body>.studio-tools .tool-panel{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.studio-top-tools{position:relative!important;inset:auto!important;z-index:4!important;width:auto!important;display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;overflow:hidden!important;padding:7px 12px;border:0;border-bottom:1px solid #30384c;background:linear-gradient(90deg,#171d2b,#20273a);box-shadow:0 8px 24px rgba(7,10,20,.2)!important}.top-tool-group{display:flex;align-items:center;gap:7px;min-width:0}.top-tool-label{flex:none;color:#7be0e5;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.top-layer-bar{display:flex;gap:5px;min-width:80px;max-width:min(46vw,620px);overflow-x:auto;scrollbar-width:thin}.studio-top-tools button{flex:none;border:1px solid #3b445c;border-radius:7px;padding:6px 9px;background:#252b3e;color:#edf1fb;font-size:11px;cursor:pointer}.studio-top-tools button:hover,.studio-top-tools button.active{border-color:#8a6ded;background:#3b3163}.top-layer-bar span{padding:5px;color:#929db5;font-size:11px}.top-size-tools input[type=range]{width:120px;accent-color:#8a68ef}.top-size-tools output{min-width:42px;color:#fff;font-size:11px;text-align:center}
.tool-panel label:has(input[type=color]){grid-template-columns:52px 1fr;align-items:center}.tool-panel label:has(input[type=color])>input[type=color]{grid-column:1;width:48px;border-radius:10px}.tool-panel label:has(input[type=color])>.hex-color-input{grid-column:2;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}.hex-color-input.invalid{border-color:#ff667a!important;box-shadow:0 0 0 2px rgba(255,102,122,.18)}
.editor-rail{overflow-y:auto;scrollbar-width:thin}.editor-rail button{flex:0 0 auto}.tool-stack{display:grid;gap:8px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.align-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.shape-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.shape-grid button{display:grid;place-items:center;gap:5px;min-height:70px}.shape-grid button i{font-style:normal;font-size:25px}.palette-row{display:flex;gap:7px;min-height:42px;align-items:center;flex-wrap:wrap}.palette-row span{color:#9ea8c0;font-size:11px}.palette-row button{width:34px;height:34px;border-radius:50%;padding:0;background:var(--swatch);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}.layer-list{display:grid;gap:6px;margin:14px 0}.layer-row{display:grid!important;grid-template-columns:20px 1fr auto;align-items:center;text-align:left}.layer-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-row small{color:#8edce2}.layer-row.active{border-color:#8b6cff;background:#332c54}.layer-empty{padding:18px;border:1px dashed #46506a;border-radius:10px;color:#9ea8c0;text-align:center}.font-upload input{padding:6px;font-size:10px}.check-row{display:flex!important;grid-template-columns:18px 1fr!important;align-items:center}.check-row input{width:auto!important}.tool-panel button.active{border-color:#8b6cff;background:#382e61}.tool-panel::-webkit-scrollbar,.editor-rail::-webkit-scrollbar{width:7px}.tool-panel::-webkit-scrollbar-thumb,.editor-rail::-webkit-scrollbar-thumb{background:#3b445c;border-radius:9px}@media(max-width:760px){.studio-top-tools{left:auto!important;top:auto!important;bottom:auto!important;display:grid;grid-template-columns:1fr auto;gap:6px;padding:6px}.top-tool-label,#top-open-layers,#top-open-transform,.top-size-tools button:not(#top-size-down):not(#top-size-up){display:none}.top-layer-bar{max-width:58vw}.top-size-tools input[type=range]{width:76px}.canvas-stage{grid-template-rows:46px minmax(0,1fr) 46px}.canvas-empty{inset:46px 0 46px}}
@media(max-height:760px){.editor-rail button{min-height:48px}.editor-rail button i{font-size:16px}.editor-rail button span{font-size:9px}}