:root{
  --bg:#111113;--sf:#1c1c1e;--sf2:#26262a;--sf3:#202024;--bd:#333338;
  --tx:#f3f4f6;--sub:#888890;--muted:#5f6068;--gold:#fbbf24;--pink:#f472b6;
  --purple:#a78bfa;--cyan:#67e8f9;--green:#34d399;--danger:#fb7185;
  --r:8px;--panel:288px;--shadow:0 24px 80px rgba(0,0,0,.62)
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'SF Pro Display',-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--tx);overflow:hidden}
.tool-app{display:grid;grid-template-columns:var(--panel) 1fr var(--panel);height:100vh;min-height:0}
.tool-panel{background:var(--sf);border-color:var(--bd);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.tool-panel.left{border-right:1px solid var(--bd)}.tool-panel.right{border-left:1px solid var(--bd)}
.tool-panel::-webkit-scrollbar{width:4px}.tool-panel::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}
.tool-header{padding:18px 16px 12px;border-bottom:1px solid var(--bd)}
.brand-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:2px}
.tool-title{font-size:16px;font-weight:800;letter-spacing:-.01em}.tool-subtitle{font-size:10px;color:var(--sub);margin-top:3px;line-height:1.45;letter-spacing:.04em}
.tool-section{border-bottom:1px solid var(--bd);padding:12px 16px}.section-title{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:10px;font-weight:700}
.hint{font-size:11px;color:var(--sub);line-height:1.55}.caption{font-size:10px;color:var(--muted);line-height:1.45}.mono{font-family:'SF Pro Mono','Menlo','Consolas',monospace}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px 12px;border-radius:var(--r);border:1px solid var(--bd);background:var(--sf2);color:var(--tx);font-size:12px;font-weight:600;cursor:pointer;transition:.15s;margin-bottom:6px;letter-spacing:.02em;font-family:inherit}
.btn:hover{background:#2e2e34;border-color:#555}.btn:active{transform:scale(.98)}.btn.primary{background:var(--gold);border-color:var(--gold);color:#111;font-weight:800}.btn.accent{background:transparent;border-color:var(--gold);color:var(--gold)}
.button-row{display:flex;gap:6px;margin-bottom:6px}.button-row .btn{flex:1;margin-bottom:0;font-size:11px;padding:8px 9px}
.upload-area{display:block;border:1.5px dashed var(--bd);border-radius:var(--r);padding:16px;text-align:center;cursor:pointer;transition:.2s;position:relative;margin-bottom:8px;background:rgba(255,255,255,.01)}
.upload-area:hover,.upload-area.drag{border-color:var(--gold);background:rgba(251,191,36,.05)}.upload-area input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-icon{font-size:22px;margin-bottom:4px}.upload-text{font-size:11px;color:var(--sub)}.upload-hint{font-size:10px;color:var(--muted);margin-top:2px}
.control-row{margin-bottom:10px}.control-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.control-label{font-size:11px;color:var(--sub)}.control-value{font-size:11px;color:var(--gold);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
input[type=range]{width:100%;height:3px;appearance:none;background:var(--bd);border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);cursor:pointer;transition:.1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.text-input{width:100%;background:var(--sf2);border:1px solid var(--bd);border-radius:var(--r);color:var(--tx);font-size:12px;padding:7px 10px;outline:none;transition:.15s;margin-bottom:6px;font-family:inherit}.text-input:focus{border-color:var(--gold)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.toggle-label{font-size:12px;color:var(--tx)}.toggle{position:relative;width:36px;height:20px;cursor:pointer}.toggle input{display:none}.toggle-track{position:absolute;inset:0;background:var(--bd);border-radius:10px;transition:.2s}.toggle input:checked+.toggle-track{background:var(--gold)}.toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:.2s;pointer-events:none}.toggle input:checked~.toggle-thumb{left:19px}
.chips{display:flex;flex-wrap:wrap;gap:4px}.chip{padding:4px 9px;border-radius:4px;background:var(--sf2);border:1px solid var(--bd);font-size:10px;color:var(--sub);cursor:pointer;transition:.15s;white-space:nowrap}.chip:hover,.chip.active{background:rgba(251,191,36,.12);border-color:var(--gold);color:var(--gold)}
.stage{position:relative;display:flex;align-items:center;justify-content:center;background:#0a0a0c;overflow:hidden;min-width:0;padding:64px 24px 56px}.stage::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(251,191,36,.06),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.025),transparent 42%);pointer-events:none}
.canvas-wrap{position:relative;box-shadow:0 0 0 1px var(--bd),var(--shadow);border-radius:4px;overflow:hidden;background:#050507;max-width:100%;max-height:100%;display:inline-flex}
.canvas-wrap canvas{display:block;touch-action:none;max-width:min(100%, calc(100vw - 640px));max-height:calc(100vh - 130px);width:auto;height:auto;object-fit:contain}
.tool-toolbar{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:rgba(20,20,24,.9);backdrop-filter:blur(12px);border:1px solid var(--bd);border-radius:10px;padding:6px 10px;z-index:10;white-space:nowrap}.tool-tab{padding:5px 11px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--sub);font-size:11px;cursor:pointer;transition:.15s;font-family:inherit}.tool-tab:hover{color:var(--tx);background:var(--sf2)}.tool-tab.active{background:var(--sf2);color:var(--gold);border-color:var(--bd)}.toolbar-sep{width:1px;background:var(--bd);margin:2px 0}
.statusbar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--sub);background:rgba(20,20,24,.75);backdrop-filter:blur(8px);border:1px solid var(--bd);border-radius:6px;padding:4px 12px;letter-spacing:.04em;pointer-events:none;white-space:nowrap}
.empty-state{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--sub);pointer-events:none}.empty-icon{font-size:48px;opacity:.3}.empty-text{font-size:13px;opacity:.55}
.loading{position:absolute;inset:0;background:rgba(10,10,12,.75);display:none;align-items:center;justify-content:center;z-index:20;flex-direction:column;gap:12px}.loading.show{display:flex}.spinner{width:32px;height:32px;border:2px solid var(--bd);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}.loading-text{font-size:11px;color:var(--sub);letter-spacing:.06em}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:860px){body{overflow:auto}.tool-app{display:flex;flex-direction:column;height:auto;min-height:100vh}.tool-panel{width:100%;min-height:0;max-height:42vh;border-left:0!important;border-right:0!important;border-bottom:1px solid var(--bd)}.stage{min-height:58vh;padding:16px}.tool-toolbar{top:8px;max-width:calc(100vw - 24px);overflow-x:auto}.statusbar{bottom:8px}}

/* GlitchLab specific */
.upload-area{display:block;position:relative}
.upload-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-title-row .section-title{margin-bottom:0}
.collapsible{transition:max-height .2s ease,opacity .2s ease;overflow:hidden;max-height:400px;opacity:1}
.collapsible.collapsed{max-height:0;opacity:0;pointer-events:none}
.layer-list{max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.layer-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:4px;margin-bottom:3px;background:var(--sf2);border:1px solid var(--bd);font-size:10px;color:var(--sub);cursor:pointer;transition:.15s}
.layer-item:hover{border-color:var(--gold);color:var(--tx)}
.layer-item.selected{border-color:var(--gold);background:rgba(251,191,36,.08);color:var(--gold)}
.layer-item .li-num{font-weight:700;color:var(--gold);min-width:18px}
.layer-item .li-type{color:var(--tx);font-weight:600;white-space:nowrap}
.layer-item .li-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.layer-props{font-size:11px}
.prop-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(51,51,56,.5)}
.prop-row:last-child{border-bottom:none}
.prop-key{color:var(--sub);font-size:10px;min-width:40px}
.prop-val{color:var(--tx);font-size:10px;font-variant-numeric:tabular-nums;text-align:right}
.prop-input{margin:0;padding:4px 6px;font-size:10px;flex:1;margin-left:8px}

/* === Light Theme === */
[data-theme="light"]{
  --bg:#f0f2f5;--sf:#ffffff;--sf2:#f4f5f7;--sf3:#ecedf0;--bd:#d8dade;
  --tx:#1a1a1e;--sub:#6b7280;--muted:#9ca3af;--shadow:0 24px 80px rgba(0,0,0,.12)
}
[data-theme="light"] body{background:var(--bg)}
[data-theme="light"] .stage{background:#e4e6ea}
[data-theme="light"] .stage::before{background:radial-gradient(circle at 50% 40%,rgba(251,191,36,.08),transparent 38%),linear-gradient(135deg,rgba(0,0,0,.015),transparent 42%)}
[data-theme="light"] .canvas-wrap{background:#d8dade}
[data-theme="light"] .tool-toolbar{background:rgba(255,255,255,.92);border-color:var(--bd)}
[data-theme="light"] .statusbar{background:rgba(255,255,255,.82);border-color:var(--bd)}
[data-theme="light"] .loading{background:rgba(240,242,245,.85)}
[data-theme="light"] .btn:hover{background:#ecedf0;border-color:#c0c4cc}
[data-theme="light"] input[type=range]{background:var(--bd)}
[data-theme="light"] .text-input{color:var(--tx)}

/* Theme toggle button */
.theme-btn{position:fixed;bottom:20px;right:20px;width:36px;height:36px;border-radius:50%;border:1px solid var(--bd);background:var(--sf2);color:var(--tx);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.2);line-height:1}
.theme-btn:hover{transform:scale(1.1)}