:root{--bg: #0e0f12;--panel: #16181d;--line: #262a31;--fg: #e6e7ea;--muted: #9aa0ab;--accent: #4c8dff;--error: #ff6b6b}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,Segoe UI,sans-serif;display:flex;flex-direction:column;height:100vh;overflow:hidden}#topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}.brand{font-weight:700;letter-spacing:.04em}#modes{display:flex;gap:6px}#modes button{background:transparent;color:var(--muted);border:1px solid transparent;padding:6px 14px;border-radius:6px;cursor:pointer}#modes button:hover{color:var(--fg)}#modes button.active{color:var(--fg);background:#20242c;border-color:var(--line)}.spacer{flex:1}.upload,#export{background:#20242c;color:var(--fg);border:1px solid var(--line);padding:7px 14px;border-radius:6px;cursor:pointer}.upload:hover,#export:not(:disabled):hover{border-color:var(--accent)}#export:disabled{opacity:.45;cursor:default}#stage{flex:1;display:flex;min-height:0}#views{flex:1;display:flex;min-width:0}.viewport{position:relative;flex:1;min-width:0;border-right:1px solid var(--line)}.viewport[hidden]{display:none}.viewport canvas{width:100%;height:100%;display:block}.pane-label{position:absolute;top:8px;left:10px;font-size:12px;color:var(--muted);background:#00000059;padding:2px 8px;border-radius:4px}#panel{width:300px;flex:0 0 300px;background:var(--panel);border-left:1px solid var(--line);padding:14px;overflow-y:auto}#panel h3{margin:4px 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.panel-hint{color:var(--muted)}.ctl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.ctl span{color:var(--muted)}.ctl input,.ctl select{width:110px;background:#0f1115;color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:5px 7px}#panel button{width:100%;margin-top:6px;background:#20242c;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px;cursor:pointer}#panel button:hover{border-color:var(--accent)}#status{padding:7px 16px;background:var(--panel);border-top:1px solid var(--line);color:var(--muted);font-size:13px}#status.error{color:var(--error)}#drop-hint{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--fg);background:#0a0c10b3;border:3px dashed var(--accent);pointer-events:none}.hidden{display:none!important}#loading{position:fixed;inset:0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;background:#0a0c108c;color:var(--fg);font-size:15px;z-index:50}.spinner{width:46px;height:46px;border:4px solid rgba(255,255,255,.18);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}