:root,[data-theme=dark]{--bg:#0a0b10;--panel:#ffffff0a;--border:#ffffff1a;--border-strong:#ffffff26;--fg:#e8eaf2;--sub:#8b90a3;--input-bg:#ffffff0d;--input-border:#ffffff1f;--code-bg:#0b0e14;--code-fg:#b9e8c9;--ghost-bg:#ffffff12;--sel-bg:linear-gradient(135deg, #7b2ff759, #ff4d2e4d)}[data-theme=light]{--bg:#f4f5fa;--panel:#fff;--border:#e2e5ee;--border-strong:#d0d4e0;--fg:#171a24;--sub:#636a7e;--input-bg:#f6f7fb;--input-border:#d7dbe6;--code-bg:#f0f2f8;--code-fg:#1d6b3a;--ghost-bg:#eef0f6;--sel-bg:linear-gradient(135deg, #7b2ff71f, #ff4d2e1a)}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--fg);margin:0;font-family:DM Sans,sans-serif;transition:background .3s,color .3s}.wrap{max-width:1240px;margin:0 auto;padding:36px 20px 80px}h1{letter-spacing:.02em;background:linear-gradient(90deg,#7b2ff7,#b026ff,#ff4d2e);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-family:Bebas Neue,sans-serif;font-size:54px}.tag{letter-spacing:.12em;text-transform:uppercase;color:var(--sub);font-family:JetBrains Mono,monospace;font-size:11px}.header{flex-wrap:wrap;align-items:baseline;gap:16px;display:flex}.header .spacer{flex:1}.sub{color:var(--sub);max-width:640px;margin-top:8px;font-size:15px}label.lbl{letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin-bottom:6px;font-family:JetBrains Mono,monospace;font-size:11px;display:block}input[type=text],textarea{background:var(--input-bg);border:1px solid var(--input-border);width:100%;color:var(--fg);border-radius:10px;outline:none;padding:11px 14px;font-family:DM Sans,sans-serif;font-size:14px}input:focus,textarea:focus{border-color:#b026ff}textarea{resize:vertical;min-height:70px}.btn{color:#fff;cursor:pointer;background:linear-gradient(90deg,#7b2ff7,#b026ff,#ff4d2e);border:none;border-radius:12px;padding:13px 24px;font-family:DM Sans,sans-serif;font-size:15px;font-weight:700}.ghost{background:var(--ghost-bg);border:1px solid var(--border-strong);color:var(--fg);cursor:pointer;border-radius:12px;padding:13px 24px;font-family:DM Sans,sans-serif;font-size:15px;font-weight:600}.ghost.active{color:#fff;background:linear-gradient(90deg,#7b2ff7,#ff4d2e);border-color:#0000}.panel{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:22px}.grid{grid-template-columns:minmax(300px,420px) 1fr;align-items:start;gap:28px;display:grid}@media (width<=900px){.grid{grid-template-columns:1fr}}.row2{grid-template-columns:1fr 1fr;gap:12px;display:grid}.styles{grid-template-columns:1fr 1fr;gap:8px;display:grid}.bgtabs{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.bgtab{cursor:pointer;text-align:center;background:var(--panel);border:1px solid var(--border);color:var(--fg);letter-spacing:.04em;border-radius:10px;flex-direction:column;align-items:center;gap:5px;padding:9px 6px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;display:flex}.bgtab .ic{width:18px;height:18px}.bgtab.sel{background:var(--sel-bg);border-color:#b026ff}.swatches{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.swatch{flex-direction:column;align-items:center;gap:5px;display:flex}.swatch input[type=color]{border:1px solid var(--border-strong);cursor:pointer;background:0 0;border-radius:12px;width:46px;height:46px;padding:2px}.swatch span{color:var(--sub);font-family:JetBrains Mono,monospace;font-size:10px}.bg-preset-row{flex-wrap:wrap;gap:7px;margin-top:12px;display:flex}.bg-preset{cursor:pointer;border:2px solid #0000;border-radius:8px;width:40px;height:26px}.bg-preset:hover{border-color:var(--fg)}.dir-row{align-items:center;gap:6px;margin-top:12px;display:flex}.dir-btn{cursor:pointer;background:var(--panel);border:1px solid var(--border);color:var(--fg);border-radius:8px;padding:6px 10px;font-family:JetBrains Mono,monospace;font-size:11px}.dir-btn.sel{background:var(--sel-bg);border-color:#b026ff}.stylebtn{text-align:left;cursor:pointer;background:var(--panel);border:1px solid var(--border);color:var(--fg);border-radius:12px;padding:10px 12px;font-family:DM Sans,sans-serif}.stylebtn.sel{background:var(--sel-bg);border-color:#b026ff}.stylebtn b{font-size:13px;display:block}.stylebtn span{color:var(--sub);font-size:11px}.file-picker{border:1px dashed var(--border-strong);background:var(--input-bg);cursor:pointer;border-radius:12px;align-items:center;gap:12px;width:100%;min-height:58px;padding:9px 12px;transition:border-color .2s,background .2s,transform .2s;display:flex;position:relative}.file-picker:hover,.file-picker:focus-within{background:var(--sel-bg);border-color:#b026ff}.file-picker:active{transform:scale(.995)}.file-picker input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.file-choose{color:#fff;background:linear-gradient(90deg,#7b2ff7,#b026ff,#ff4d2e);border-radius:9px;flex:none;padding:9px 12px;font-size:12px;font-weight:700}.file-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--sub);font-size:13px;overflow:hidden}canvas{border:1px solid var(--border-strong);background:#fff;border-radius:14px;width:100%;display:block}canvas.status{max-width:340px;margin:0 auto}pre{white-space:pre-wrap;word-break:break-word;color:var(--code-fg);background:var(--code-bg);border:1px solid var(--border);border-radius:12px;margin:0;padding:16px;font-family:JetBrains Mono,monospace;font-size:12px;line-height:1.7}.note{margin-top:8px;font-family:JetBrains Mono,monospace;font-size:12px}.saved-item{border:1px solid var(--border);border-radius:12px;align-items:center;gap:10px;margin-bottom:8px;padding:10px 12px;display:flex}.saved-item .meta{flex:1;min-width:0}.saved-item .meta b{white-space:nowrap;text-overflow:ellipsis;font-size:13px;display:block;overflow:hidden}.saved-item .meta span{color:var(--sub);font-family:JetBrains Mono,monospace;font-size:11px}.mini{border-radius:9px;padding:7px 14px;font-size:12px}.stack{gap:16px;display:grid}.flexwrap{flex-wrap:wrap;gap:12px;display:flex}.toggle{border-radius:999px;padding:10px 18px}.toast{color:#fff;opacity:0;pointer-events:none;z-index:99;background:linear-gradient(90deg,#7b2ff7,#ff4d2e);border-radius:999px;align-items:center;gap:8px;padding:12px 22px;font-weight:700;transition:opacity .25s;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast.show{opacity:1}.toast.err{background:linear-gradient(90deg,#b91c1c,#ef4444)}.ic{stroke:currentColor;fill:none;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;flex:none;width:17px;height:17px}.ic-lg{width:20px;height:20px}button{align-items:center;gap:8px;display:inline-flex}.switch{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;display:inline-flex}.switch .track{background:var(--ghost-bg);border:1px solid var(--border-strong);border-radius:999px;width:52px;height:28px;transition:background .25s;position:relative}.switch .knob{background:linear-gradient(135deg,#7b2ff7,#ff4d2e);border-radius:50%;place-items:center;width:22px;height:22px;transition:transform .25s;display:grid;position:absolute;top:2px;left:2px}.switch .knob .ic{stroke:#fff;width:12px;height:12px}[data-theme=light] .switch .knob{transform:translate(24px)}.switch .lbltxt{letter-spacing:.1em;text-transform:uppercase;color:var(--sub);font-family:JetBrains Mono,monospace;font-size:11px}.overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;background:#0000008c;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.overlay.show{display:flex}.modal{background:var(--bg);border:1px solid var(--border-strong);border-radius:20px;width:100%;max-width:420px;padding:26px;box-shadow:0 30px 80px #00000080}.modal h3{letter-spacing:.02em;margin:0 0 6px;font-family:Bebas Neue,sans-serif;font-size:30px}.modal p{color:var(--sub);margin:0 0 18px;font-size:13.5px}.modal .actions{justify-content:flex-end;gap:10px;margin-top:20px;display:flex}