*,:before,:after{box-sizing:border-box}:root{--bg:#08080c;--bg-elev:#101017;--panel:#121219;--panel-2:#17171f;--line:#ffffff17;--line-strong:#ffffff29;--text:#ececf4;--muted:#9797ad;--faint:#6b6b80;--accent:#7b6cff;--accent-2:#a06bff;--accent-ink:#fff;--radius:14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,system-ui,sans-serif}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0}button{font:inherit;color:inherit;cursor:pointer}input{font:inherit}.app{background:radial-gradient(1200px 600px at 80% -10%, #7b6cff1f, transparent 60%), var(--bg);grid-template-rows:auto 1fr auto;height:100dvh;display:grid}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a0a1099;align-items:center;gap:16px;padding:14px 22px;display:flex}.brand{letter-spacing:-.01em;align-items:center;gap:9px;font-size:17px;font-weight:650;display:flex}.brand .mark{background:linear-gradient(140deg, var(--accent), var(--accent-2));color:#fff;border-radius:8px;place-items:center;width:26px;height:26px;font-size:13px;display:grid;transform:rotate(0)}.brand .tag{text-transform:uppercase;letter-spacing:.08em;color:var(--accent-2);border:1px solid var(--line-strong);border-radius:999px;padding:2px 7px;font-size:10px;font-weight:700}.subtitle{color:var(--muted);margin:0;font-size:13.5px}.topbar-spacer{flex:1}.privacy{color:var(--faint);white-space:nowrap;align-items:center;gap:7px;font-size:12px;display:flex}.privacy .dot{background:#38d39f;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 3px #38d39f2e}.stage{grid-template-columns:1fr 348px;gap:20px;min-height:0;padding:20px;display:grid}.preview-wrap{border:1px solid var(--line);border-radius:var(--radius);background-color:var(--bg-elev);background-image:radial-gradient(#ffffff0a 1px,#0000 1px);background-size:22px 22px;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:30px;transition:border-color .15s,box-shadow .15s;display:flex;position:relative;overflow:auto}.preview-wrap.is-drag{border-color:var(--accent);box-shadow:inset 0 0 0 2px #7b6cff80}.preview-wrap.is-checker{background-image:conic-gradient(#ffffff0d 25%, transparent 0 50%, #ffffff0d 0 75%, transparent 0);background-size:20px 20px}.preview-canvas{border-radius:6px;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 200px);box-shadow:0 20px 60px -20px #000000b3}.preview-meta{color:var(--faint);align-items:center;gap:10px;font-size:12px;display:flex}.preview-meta .sep{opacity:.5}.dropzone{border:1.5px dashed var(--line-strong);text-align:center;background:#ffffff04;border-radius:16px;width:min(520px,100%);padding:44px 32px}.dz-icon{color:var(--accent-2);font-size:34px;line-height:1}.dropzone h2{letter-spacing:-.01em;margin:14px 0 6px;font-size:20px}.dropzone p{color:var(--muted);margin:0;font-size:13.5px;line-height:1.6}.dz-actions{justify-content:center;gap:10px;margin:20px 0 14px;display:flex}.dz-note{color:var(--faint)!important;font-size:11.5px!important}kbd{border:1px solid var(--line-strong);color:var(--text);background:var(--panel-2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;font-family:inherit;font-size:11px}.panel{flex-direction:column;gap:14px;min-height:0;padding-right:4px;display:flex;overflow-y:auto}.group{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:12px;padding:14px;display:flex}.group-head{text-transform:uppercase;letter-spacing:.09em;color:var(--faint);justify-content:space-between;align-items:center;font-size:11px;font-weight:700;display:flex}.dest-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.dest{text-align:left;border:1px solid var(--line);background:var(--panel-2);border-radius:9px;flex-direction:column;gap:2px;padding:9px 10px;transition:border-color .12s,background .12s,transform 60ms;display:flex}.dest:hover{border-color:var(--line-strong)}.dest:active{transform:translateY(1px)}.dest.active{border-color:var(--accent);background:#7b6cff24}.dest-label{font-size:13px;font-weight:600}.dest-hint{color:var(--faint);font-size:10.5px}.switch{text-transform:none;letter-spacing:0;color:var(--muted);cursor:pointer;align-items:center;gap:7px;font-size:11.5px;font-weight:600;display:inline-flex}.switch.spaced{margin-top:2px}.switch input{accent-color:var(--accent);width:14px;height:14px}.swatches{grid-template-columns:repeat(6,1fr);gap:7px;display:grid}.swatches.disabled{opacity:.35;pointer-events:none}.swatch{aspect-ratio:1;border:1px solid var(--line-strong);border-radius:8px;padding:0;transition:transform 80ms,box-shadow .12s;position:relative;overflow:hidden}.swatch:hover{transform:translateY(-1px)}.swatch.active{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.swatch-tag{letter-spacing:.06em;color:#ffffffe6;text-shadow:0 1px 3px #0009;place-items:center;font-size:9px;font-weight:800;display:grid;position:absolute;inset:0}.custom-color{align-items:center;gap:8px;display:flex}.custom-color input[type=color]{border:1px solid var(--line-strong);background:var(--panel-2);border-radius:8px;width:38px;height:34px;padding:2px}.custom-color input[type=text]{border:1px solid var(--line-strong);background:var(--panel-2);min-width:0;color:var(--text);border-radius:8px;flex:1;padding:8px 10px}.range{flex-direction:column;gap:7px;display:flex}.range-label{color:var(--muted);justify-content:space-between;font-size:12.5px;font-weight:600;display:flex}.range-val{color:var(--text);font-variant-numeric:tabular-nums}.range input[type=range]{appearance:none;background:var(--line-strong);border-radius:999px;outline:none;width:100%;height:4px}.range input[type=range]::-webkit-slider-thumb{appearance:none;border:3px solid var(--accent);cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;margin-top:-1px}.range input[type=range]::-moz-range-thumb{border:3px solid var(--accent);cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px}.frame-row{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:550;transition:border-color .12s,color .12s,background .12s}.chip:hover{border-color:var(--line-strong)}.chip.active{border-color:var(--accent);color:var(--text);background:#7b6cff24}.url-input{border:1px solid var(--line-strong);background:var(--panel-2);width:100%;color:var(--text);border-radius:9px;padding:9px 11px}.url-input::placeholder{color:var(--faint)}.btn{border:1px solid var(--line-strong);background:var(--panel-2);border-radius:9px;padding:9px 16px;font-size:13px;font-weight:600;transition:transform 60ms,border-color .12s,background .12s,opacity .12s}.btn:hover{border-color:var(--accent)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:linear-gradient(140deg, var(--accent), var(--accent-2));color:var(--accent-ink);border-color:#0000;box-shadow:0 6px 20px -6px #7b6cffb3}.btn.ghost{background:0 0}.link{color:var(--accent-2);background:0 0;border:none;padding:0;font-size:12px;font-weight:600}.link:hover{text-decoration:underline}.link.muted{color:var(--faint)}.actionbar{border-top:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a0a10b3;align-items:center;gap:10px;padding:12px 20px;display:flex}.ab-spacer{flex:1}.scale-seg{border:1px solid var(--line-strong);border-radius:9px;display:inline-flex;overflow:hidden}.scale-seg button{background:var(--panel-2);border:none;border-right:1px solid var(--line-strong);color:var(--muted);padding:8px 12px;font-size:12px;font-weight:600}.scale-seg button:last-child{border-right:none}.scale-seg button.active{color:var(--text);background:#7b6cff33}.toast{border:1px solid var(--line-strong);color:var(--text);z-index:50;background:#17171f;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;animation:.18s ease-out toast-in;position:fixed;bottom:78px;left:50%;transform:translate(-50%);box-shadow:0 12px 40px -12px #000c}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}}@media (width<=920px){.app{grid-template-rows:auto 1fr auto;height:auto;min-height:100dvh}.stage{grid-template-columns:1fr}.subtitle{display:none}.preview-wrap{min-height:46vh}.preview-canvas{max-height:60vh}.actionbar{position:sticky;bottom:0}}@media (width<=520px){.privacy span:not(.dot){display:none}.dest-grid{grid-template-columns:1fr}.actionbar{flex-wrap:wrap}}