:root{--bg: #eef1f5;--panel: #f7f9fb;--line: #d3d9e0;--fg: #1b2026;--muted: #5b636d;--accent: #2f6fed;--error: #d23b3b;--btn: #e9eef4}*{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:var(--btn);border-color:var(--line)}.spacer{flex:1}.upload,#snap,#export,#auth{background:var(--btn);color:var(--fg);border:1px solid var(--line);padding:7px 14px;border-radius:6px;cursor:pointer}#auth{background:#f1683a;color:#fff;border-color:#f1683a}#auth:hover{filter:brightness(1.05)}#auth.patron{background:var(--btn);color:var(--fg);border-color:var(--line)}.upload:hover,#snap:not(:disabled):hover,#export:not(:disabled):hover{border-color:var(--accent)}#snap:disabled,#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);background:#eaf0f6}.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(--fg);background:#fff9;padding:2px 8px;border-radius:4px;z-index:2}#toolbar{position:absolute;top:42px;left:10px;z-index:3;display:flex;flex-direction:column;gap:6px;background:#ffffffd9;border:1px solid var(--line);border-radius:9px;padding:6px;box-shadow:0 2px 8px #0000001f}#toolbar button{width:34px;height:34px;padding:0;display:grid;place-items:center;background:transparent;color:var(--fg);border:1px solid transparent;border-radius:7px;cursor:pointer}#toolbar button:hover{background:#0000000f}#toolbar button.active{background:var(--accent);color:#fff;border-color:var(--accent)}#tool-sub{position:absolute;left:48px;top:86px;display:flex;flex-direction:column;gap:6px;background:#ffffffeb;border:1px solid var(--line);border-radius:9px;padding:6px;box-shadow:0 2px 8px #0000001f}#brush-pop{position:absolute;left:48px;top:166px;display:flex;align-items:center;gap:8px;background:#ffffffeb;border:1px solid var(--line);border-radius:9px;padding:8px 10px;box-shadow:0 2px 8px #0000001f}#brush-pop input[type=range]{width:120px}#brush-pop input[type=number]{width:56px;background:#fff;color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:4px 6px}#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:#fff;color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:5px 7px}#panel button{width:100%;margin-top:6px;background:var(--btn);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:#eef1f5b8;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:#eef1f59e;color:var(--fg);font-size:15px;z-index:50}.spinner{width:46px;height:46px;border:4px solid rgba(0,0,0,.12);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}