:root{--bg:#111113;--sf:#1c1c1e;--sf2:#26262a;--bd:#333338;--tx:#f3f4f6;--sub:#888890;--gold:#fbbf24;--pink:#f472b6;--purple:#a78bfa;--cyan:#67e8f9;--r:8px;--pw:288px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'SF Pro Display',-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--tx);display:flex;height:100vh;overflow:hidden}
#panel,#right-panel{width:var(--pw);min-width:var(--pw);background:var(--sf);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
#panel{order:1;border-right:1px solid var(--bd)}
#right-panel{order:3;border-left:1px solid var(--bd)}
#panel::-webkit-scrollbar,#right-panel::-webkit-scrollbar{width:4px}#panel::-webkit-scrollbar-thumb,#right-panel::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}
.ph{padding:18px 16px 12px;border-bottom:1px solid var(--bd);flex-shrink:0}
.brand-logo{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:2px}
.panel-title{font-size:16px;font-weight:700;letter-spacing:-.01em}
.panel-sub{font-size:10px;color:var(--sub);margin-top:3px;letter-spacing:.04em}
.sec{border-bottom:1px solid var(--bd);padding:12px 16px}
.sec-t{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:10px;font-weight:600}
.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:500;cursor:pointer;transition:all .15s;margin-bottom:6px;letter-spacing:.02em;font-family:inherit}
.btn:hover{background:#2e2e34;border-color:#555}.btn:active{transform:scale(.98)}
.btn.pri{background:var(--gold);color:#111;border-color:var(--gold);font-weight:700}.btn.pri:hover{background:#f5b800}
.btn.acc{background:transparent;border-color:var(--gold);color:var(--gold)}.btn.acc:hover{background:rgba(251,191,36,.08)}
.btn.ico{width:auto;flex:1;margin-bottom:0;font-size:11px}
.brow{display:flex;gap:6px;margin-bottom:6px}
.tog-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tog-label{font-size:12px;color:var(--tx)}
.tog{position:relative;width:36px;height:20px;cursor:pointer}
.tog input{display:none}
.tog-track{position:absolute;inset:0;background:var(--bd);border-radius:10px;transition:.2s}
.tog input:checked+.tog-track{background:var(--gold)}
.tog-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:.2s;pointer-events:none}
.tog input:checked~.tog-thumb{left:19px}
.srow{margin-bottom:10px}
.shdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.slbl{font-size:11px;color:var(--sub)}
.sval{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:transform .1s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.uarea{border:1.5px dashed var(--bd);border-radius:var(--r);padding:16px;text-align:center;cursor:pointer;transition:.2s;position:relative;margin-bottom:8px}
.uarea:hover,.uarea.drag{border-color:var(--gold);background:rgba(251,191,36,.04)}
.uarea input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.uicon{font-size:22px;margin-bottom:4px}.utxt{font-size:11px;color:var(--sub)}.uhint{font-size:10px;color:var(--bd);margin-top:2px}
.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.on{background:rgba(251,191,36,.12);border-color:var(--gold);color:var(--gold)}
.szgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.szcard{padding:8px;border-radius:var(--r);border:1px solid var(--bd);background:var(--sf2);cursor:pointer;text-align:center;transition:.15s}
.szcard:hover{border-color:#555}.szcard.on{border-color:var(--gold);background:rgba(251,191,36,.08)}
.sznm{font-size:10px;font-weight:600}.szdm{font-size:9px;color:var(--sub);margin-top:1px}
.szbar{width:100%;margin:6px auto 0;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.szbar-i{background:rgba(251,191,36,.3)}
.txin{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}
.txin:focus{border-color:var(--gold)}
#canvas-area{order:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0a0c;position:relative;overflow:hidden}
#cwrap{position:relative;box-shadow:0 0 0 1px var(--bd),0 24px 80px rgba(0,0,0,.8);border-radius:4px;overflow:hidden;cursor:crosshair}
#mc{display:block;touch-action:none}
#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}
.tbb{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}
.tbb:hover{color:var(--tx);background:var(--sf2)}.tbb.on{background:var(--sf2);color:var(--gold);border-color:var(--bd)}
.tbsep{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}
#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}
.spinner{width:32px;height:32px;border:2px solid var(--bd);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
.loading-txt{font-size:11px;color:var(--sub);letter-spacing:.06em}
@keyframes spin{to{transform:rotate(360deg)}}
#placeholder{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--sub);pointer-events:none}
#placeholder .phi{font-size:48px;opacity:.3}
#placeholder .pht{font-size:13px;opacity:.5}
@media (max-width: 760px){
  body{flex-direction:column;overflow:auto;height:auto;min-height:100vh}
  #panel,#right-panel{width:100%;min-width:0;max-height:42vh;border-right:0;border-left:0;border-bottom:1px solid var(--bd)}
  #canvas-area{min-height:52vh;padding:16px}
  #toolbar{top:8px;max-width:calc(100vw - 24px);overflow-x:auto}
  #statusbar{bottom:8px}
}

/* === Light Theme === */
[data-theme="light"]{
  --bg:#f0f2f5;--sf:#ffffff;--sf2:#f4f5f7;--bd:#d8dade;
  --tx:#1a1a1e;--sub:#6b7280
}
[data-theme="light"] body{background:var(--bg)}
[data-theme="light"] #canvas-area{background:#e4e6ea}
[data-theme="light"] #toolbar{background:rgba(255,255,255,.92);border-color:var(--bd)}
[data-theme="light"] .tbb:hover{background:#ecedf0}
[data-theme="light"] .tbb.on{background:#ecedf0;color:var(--gold)}
[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"] .txin{background:var(--sf2);border-color:var(--bd);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)}