:root{
--bg-pop-a:#262b33dd;
--bg-pop:#262b33;
--bg-app:#1a1d21;
--bg-field2:#1c2026;
--bg-field:#15171a;
--bg-bar:#20242a;
--bg-surface2:#232830;
--bg-surface:#23272e;
--bg-control:#2c313a;
--bg-control-h:#333944;
--bg-control-h2:#343a44;
--bg-control-h3:#363c45;
--border-1:#34393f;
--border-2:#3a4049;
--border-3:#4a525d;
--text-hi:#e6e9ed;
--icon-dot:#d7dbe0;
--text-b:#c7cedb;
--text-c:#c3c8cf;
--text:#cfd3d8;
--text-mut:#aab2bd;
--text-mut2:#9aa3ad;
--text-mut3:#8b93a0;
--text-dim:#7f8893;
--text-disabled:#7c828c;
--key:#727b86;
--text-dim2:#6f7884;
--text-hidden:#6b7280;
--grip:#5b626c;
--mfx:#4a5058;
--accent-lite:#6ea8ff;
--accent-hover:#9ec5ff;
--green-lite:#5fd98a;
--lock:#e8b14a;
--shadow:rgba(0,0,0,.55);
--shadow-b:rgba(0,0,0,.5);
--shadow-45:rgba(0,0,0,.45);
--shadow-40:rgba(0,0,0,.4);
--shadow-35:rgba(0,0,0,.35);
--shadow-30:rgba(0,0,0,.30);
--overlay-72:rgba(10,12,16,.72);
--overlay-42:rgba(10,12,16,.42);
--overlay-12:rgba(0,0,0,.12);
--bg-canvas:#15171a;
--logo-fg:rgb(245,245,245);
}
html[data-theme="light"]{
--bg-pop-a:rgba(255,255,255,.9);
--bg-pop:#ffffff;
--bg-app:#e6e8ec;
--bg-field2:#ffffff;
--bg-field:#ffffff;
--bg-bar:#e9ebef;
--bg-surface2:#f2f3f6;
--bg-surface:#f2f3f6;
--bg-control:#e3e6ea;
--bg-control-h:#d7dbe1;
--bg-control-h2:#d3d8de;
--bg-control-h3:#ced3da;
--border-1:#d9dde2;
--border-2:#cbd0d7;
--border-3:#aab1bb;
--text-hi:#1b1e23;
--icon-dot:#4a525d;
--text-b:#2b2f36;
--text-c:#2b2f36;
--text:#2b2f36;
--text-mut:#565d67;
--text-mut2:#5c636d;
--text-mut3:#69707a;
--text-dim:#7b828c;
--text-disabled:#9aa0a8;
--key:#8a919b;
--text-dim2:#818892;
--text-hidden:#9098a2;
--grip:#a7adb5;
--mfx:#aeb4bc;
--accent-lite:#1a63d1;
--accent-hover:#2f6fdb;
--green-lite:#1f9d55;
--lock:#c98a10;
--shadow:rgba(30,40,60,.16);
--shadow-b:rgba(30,40,60,.16);
--shadow-45:rgba(30,40,60,.14);
--shadow-40:rgba(30,40,60,.13);
--shadow-35:rgba(30,40,60,.12);
--shadow-30:rgba(30,40,60,.10);
--overlay-72:rgba(40,48,60,.45);
--overlay-42:rgba(40,48,60,.28);
--overlay-12:rgba(30,40,60,.10);
--bg-canvas:#f6f7f9;
--logo-fg:#20242a;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; overflow:hidden; overscroll-behavior:none; }
body { height:100%; overscroll-behavior:none; }
body {
font-family: "Segoe UI", system-ui, sans-serif;
background:var(--bg-app); color:var(--text);
display:flex; flex-direction:column; overflow:hidden;
user-select:none;
}
#topbar {
position:relative; z-index:6;
height:46px; background:var(--bg-surface); border-bottom:1px solid var(--border-1);
box-shadow:0 5px 16px var(--shadow-30);
display:flex; align-items:stretch; padding:0; gap:0;
font-size:13px; color:var(--text-mut2);
overflow:hidden;
}
#topbarScroll {
flex:1 1 auto; min-width:0; display:flex; align-items:stretch;
overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:var(--border-2) transparent;
}
#topbarInner {
display:flex; align-items:center; gap:22px; height:46px; padding:0 14px 0 0;
min-width:max-content; flex:1 0 auto;
}
#topbarInner > * { flex:0 0 auto; }
#topbarScroll::-webkit-scrollbar { height:8px; }
#topbarScroll::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:4px; }
#topbarScroll::-webkit-scrollbar-track { background:transparent; }
#topbar b { color:var(--text-hi); font-weight:600; letter-spacing:.5px; }
#topbar #brandwrap { display:flex; align-items:center; gap:9px; flex:0 0 auto; padding-left:14px; margin-right:22px; }
#topbar #brandlogo { height:32px; width:auto; flex:0 0 auto; display:block; }
#topbar #brand { display:flex; flex-direction:column; line-height:1; font-size:15px; }
#topbar #brand span { color:var(--accent-lite); font-weight:600; font-size:10.5px; letter-spacing:1px; margin-top:2px; }
.topgroup { display:flex; align-items:center; gap:10px; margin-left:10px; }
#topbar .topbtn { width:38px; height:36px; border-radius:8px; }
#topbar .topbtn svg { width:24px; height:24px; }
#topbar #btn3d { width:auto; min-width:0; height:36px; border-radius:8px; gap:7px; padding:0 13px; font-size:13px; font-weight:600; letter-spacing:.3px; flex:0 0 auto; white-space:nowrap; }
#topbar #btn3d svg { width:20px; height:20px; flex:0 0 auto; }
#topbar #btn3d.on { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
body.threed #toolbar, body.threed #layerpanel, body.threed #macropanel,
body.threed #textbar, body.threed #mostikbar, body.threed #splinebar, body.threed #nodebar, body.threed #selectbar,
body.threed #ellipsebar, body.threed #polybar, body.threed #circlebar, body.threed #arcbar { display:none !important; }
body.threed #topbar .topgroup { display:none !important; }
body.threed #topbar #menuBtn, body.threed #topbar #filesBtn { display:none !important; }
body.threed #cmdbar > *,
body.threed #statusbar > * { display:none !important; }
body.threed #statusbar #mfx { display:inline !important; margin-left:auto; }
body.threed #topbar #layerAssign,
body.threed #topbar #layerToggle { visibility:hidden !important; }
#viewer3dHost { position:absolute; inset:0; z-index:40; display:none; background:var(--bg-canvas); }
body.threed #viewer3dHost { display:block; }
#viewer3dHost iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
#topbar .topbtn.lenbtn.len-off { opacity:.32; pointer-events:none; cursor:default; }
#topbar .topbtn[data-tool="undo"] svg,
#topbar .topbtn[data-tool="redo"] svg { transform:translateY(-2.5px); }
#topbar #menuBtn { width:auto; min-width:0; height:36px; border-radius:8px; gap:7px; padding:0 14px; font-size:13px; font-weight:600; letter-spacing:.3px; flex:0 0 auto; white-space:nowrap; }
#topbar #menuBtn svg { width:20px; height:20px; flex:0 0 auto; }
#topbar #menuBtn.menu-open { background:var(--bg-control); color:var(--text-hi); }
#menuPop {
position:fixed; z-index:60; display:none; background:var(--bg-pop); border:1px solid var(--border-2);
border-radius:11px; padding:7px; box-shadow:0 10px 34px var(--shadow); min-width:214px;
}
#menuPop .menu-item {
display:flex; align-items:center; gap:12px; width:100%; padding:9px 12px; border:none;
background:transparent; color:var(--text); cursor:pointer; border-radius:8px; font-size:13.5px;
text-align:left; transition:background .12s, color .12s;
}
#menuPop .menu-item:hover { background:var(--bg-control-h); color:var(--text-hi); }
#menuPop .menu-item svg { width:20px; height:20px; flex:0 0 auto; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#menuPop .menu-sep { height:1px; background:var(--border-2); margin:6px 8px; }
#topbar #filesBtn { width:auto; min-width:0; height:36px; border-radius:8px; gap:7px; padding:0 14px;
font-size:13px; font-weight:600; letter-spacing:.3px; flex:0 0 auto; white-space:nowrap; }
#topbar #filesBtn svg { width:20px; height:20px; flex:0 0 auto; }
#topbar #filesBtn.menu-open { background:var(--bg-control); color:var(--text-hi); }
#filesPop {
position:fixed; z-index:60; display:none; background:var(--bg-pop); border:1px solid var(--border-2);
border-radius:11px; padding:13px 14px; box-shadow:0 10px 34px var(--shadow);
width:452px; max-width:calc(100vw - 12px); max-height:calc(100vh - 74px);
overflow-y:auto; overscroll-behavior:contain; font-size:13px; color:var(--text);
}
#filesPop .fp-head { display:flex; align-items:center; gap:10px; padding-right:30px; }
#filesPop .fp-title { font-weight:600; color:var(--text-hi); font-size:13.5px; letter-spacing:.3px; white-space:nowrap; }
#filesPop .fp-head .fp-btn { margin-left:auto; }
#filesPop .fp-path { margin:5px 2px 10px; color:var(--text-mut3); font-size:12px; line-height:1.3;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#filesPop .fp-btn { display:flex; align-items:center; justify-content:center; gap:7px; flex:0 0 auto;
padding:7px 12px; background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-hi);
border-radius:8px; cursor:pointer; font-size:12.5px; transition:background .12s, border-color .12s, color .12s; }
#filesPop .fp-btn:hover { background:#2f6fdb22; border-color:#2f6fdb; }
#filesPop .fp-btn:disabled { opacity:.45; cursor:default; background:var(--bg-control); border-color:var(--border-2); }
#filesPop .fp-btn svg { width:16px; height:16px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round; }
#filesPop .fp-btn.prim { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
#filesPop .fp-btn.prim:hover { background:#2f6fdb33; }
#filesPop .fp-path.on { color:var(--accent-lite); }
#filesPop .fp-acts { display:flex; gap:8px; }
#filesPop .fp-name { display:none; align-items:center; gap:7px; margin-top:8px; }
#filesPop.naming .fp-name { display:flex; }
#filesPop .fp-name input { flex:1; min-width:0; padding:7px 9px; background:var(--bg-field);
border:1px solid var(--border-2); border-radius:8px; color:var(--text-hi); font-size:12.5px; outline:none; }
#filesPop .fp-name input:focus { border-color:#2f6fdb; }
#filesPop .fp-sec { margin-top:14px; padding-top:12px; border-top:1px solid var(--border-2); }
#filesPop .fp-sec-title { color:var(--text-mut3); font-size:12px; font-weight:600; letter-spacing:.3px; margin:0 2px 9px; }
#filesPop .fp-note { color:var(--text-mut3); font-size:12px; line-height:1.45; margin:0 2px 4px; }
#filesPop .fp-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(126px,1fr)); gap:10px; }
#filesPop .fp-item { display:flex; flex-direction:column; gap:5px; padding:6px; border:1px solid var(--border-2);
border-radius:9px; background:var(--bg-control); cursor:pointer; text-align:left;
transition:background .12s, border-color .12s; }
#filesPop .fp-item:hover { background:#2f6fdb22; border-color:#2f6fdb; }
#filesPop.naming .fp-item { filter:grayscale(1); opacity:.55; }
#filesPop.naming .fp-item:hover, #filesPop.naming .fp-item.sel { filter:none; opacity:1; }
#filesPop .fp-item.sel { background:#2f6fdb33; border-color:#2f6fdb; }
#filesPop .fp-item.cur { border-color:#2f6fdb; box-shadow:inset 0 0 0 1px #2f6fdb; }
#filesPop .fp-item img { display:block; width:100%; height:84px; object-fit:contain; border-radius:6px;
background:var(--bg-field2); }
#filesPop .fp-item .fp-noimg { display:flex; align-items:center; justify-content:center; width:100%; height:84px;
border-radius:6px; background:var(--bg-field2); color:var(--text-dim); font-size:11.5px; }
#filesPop .fp-item .fp-nm { color:var(--text-hi); font-size:12px; line-height:1.25;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#filesPop .fp-item .fp-dt { color:var(--text-mut3); font-size:11px; }
.topsep { width:1px; height:26px; background:var(--border-2); margin:0 14px; }
#main { flex:1; display:flex; min-height:0; position:relative; }
#toolbar {
position:relative; z-index:5;
width:112px; background:var(--bg-surface); border-right:1px solid var(--border-1);
box-shadow:5px 0 16px var(--shadow-30);
display:grid; grid-template-columns:repeat(2,40px); gap:6px;
align-content:start; justify-content:center; padding:8px;
overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable;
}
#toolbar::-webkit-scrollbar { width:8px; }
#toolbar::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:4px; }
#toolbar::-webkit-scrollbar-track { background:transparent; }
.tool {
position:relative;
width:40px; height:40px; border-radius:8px; border:1px solid transparent;
background:transparent; color:var(--text-mut); cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .12s, border-color .12s, color .12s;
}
.tool svg { width:22px; height:22px; stroke:currentColor; stroke-width:1.7;
fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tool:hover { background:var(--bg-control); color:var(--text-hi); transition:none; }
.tool.active { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); transition:none; }
.tool.active[data-tool="hidedim"] { background:#f59e0b22; border-color:#f59e0b; color:#f5a623; }
:root{
--key-size:9px;
--key-color:var(--key);
--key-right:3px;
--key-bottom:2px;
--key-active:var(--accent-lite);
}
.tool[data-key]::after{
content:attr(data-key);
position:absolute; right:var(--key-right); bottom:var(--key-bottom);
font:700 var(--key-size)/1 ui-sans-serif,system-ui,"Segoe UI",sans-serif;
color:var(--key-color); letter-spacing:.2px; pointer-events:none;
}
.tool.active[data-key]::after{ color:var(--key-active); }
.hide-keys .tool[data-key]::after{ display:none; }
.sep { grid-column:1 / -1; height:1px; background:var(--border-1); margin:3px 6px; }
.brk { grid-column:1 / -1; height:0; }
#canvasWrap { flex:1; position:relative; background:var(--bg-canvas); }
:root { --ui-scale:0.75; --ui-dlg-scale:1; }
body { zoom:var(--ui-scale); }
#canvasWrap { zoom:calc(1 / var(--ui-scale)); }
#canvasWrap > #textbar, #canvasWrap > #mostikbar, #canvasWrap > #splinebar,
#canvasWrap > #circlebar, #canvasWrap > #arcbar, #canvasWrap > #ellipsebar,
#canvasWrap > #polybar, #canvasWrap > #nodebar, #canvasWrap > #selectbar,
#canvasWrap > #minimap, #canvasWrap > #zoombar,
#canvasWrap > #mobEnter, #canvasWrap > #mobEsc { zoom:var(--ui-scale); }
#menuPop, #ctxMenu, #settingsPop, #exportPop, #filesPop, #aboutPage, #colorPop, #hsvPop,
#scaleDialog, #offsetDialog, #hatchDialog, #joinDialog, #smoothDialog, #traceDialog,
#layerDialog, #calibDialog, #arrayDialog, #confirmDialog, #progressPop,
#macroRingDialog, #macroConeDialog, #macroTeeDialog, #macroKozkaDialog { zoom:calc(var(--ui-dlg-scale) / var(--ui-scale)); }
#canvasWrap.dragover::after {
content:attr(data-drophint);
position:absolute; inset:8px; z-index:10; pointer-events:none;
display:flex; align-items:center; justify-content:center;
border:2px dashed #2f6fdb; border-radius:10px;
background:rgba(47,111,219,.10); color:var(--accent-lite); font-size:15px; font-weight:600;
}
canvas { display:block; position:absolute; inset:0; cursor:crosshair; }
#cgl { pointer-events:none; }
#minimap {
position:absolute; z-index:24; right:10px; bottom:46px; display:none;
width:168px; height:120px; border-radius:8px; overflow:hidden;
background:var(--bg-pop-a); border:1px solid var(--border-2);
box-shadow:0 4px 14px var(--shadow-40); backdrop-filter:blur(2px);
}
#minimap.on { display:block; }
#minimapCv { position:absolute; inset:0; width:100%; height:100%; cursor:grab; }
#minimapCv.drag { cursor:grabbing; }
#minimapHide {
position:absolute; z-index:2; right:2px; top:2px; width:16px; height:16px; padding:0;
display:flex; align-items:center; justify-content:center;
background:transparent; border:none; border-radius:4px;
color:var(--text-dim); font-size:0; line-height:1; cursor:pointer; opacity:0;
transition:opacity .12s;
}
#minimapHide::before, #minimapHide::after {
content:''; position:absolute; left:50%; top:50%;
width:9px; height:1.5px; border-radius:1px; background:currentColor; }
#minimapHide::before { transform:translate(-50%,-50%) rotate(45deg); }
#minimapHide::after  { transform:translate(-50%,-50%) rotate(-45deg); }
#minimap:hover #minimapHide { opacity:1; }
#minimapHide:hover { background:var(--bg-control-h); color:var(--text-hi); }
#zoombar {
position:absolute; z-index:24; right:10px; bottom:10px;
display:flex; align-items:center; gap:1px; padding:2px;
border-radius:8px; background:var(--bg-pop-a); border:1px solid var(--border-2);
box-shadow:0 4px 14px var(--shadow-40); backdrop-filter:blur(2px);
font-size:12px; user-select:none;
}
#zoombar button {
display:flex; align-items:center; justify-content:center;
height:26px; min-width:26px; padding:0 5px;
background:transparent; border:none; border-radius:5px;
color:var(--text); font-size:12px; line-height:1; cursor:pointer;
}
#zoombar button:hover { background:var(--bg-control-h); color:var(--text-hi); }
#zoombar button:disabled { color:var(--text-disabled); cursor:default; background:transparent; }
#zoombar button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#zoombar .zb-step { font-size:15px; font-weight:600; }
#zoombar #zbPct { min-width:52px; font-variant-numeric:tabular-nums; color:var(--text-hi); }
#zoombar #zbPctIn {
display:none; width:52px; height:26px; padding:0 4px; text-align:center;
background:var(--bg-field); border:1px solid var(--accent-lite); border-radius:5px;
color:var(--text-hi); font-size:12px; font-family:inherit; outline:none;
font-variant-numeric:tabular-nums;
}
#zoombar.editing #zbPct { display:none; }
#zoombar.editing #zbPctIn { display:block; }
#zoombar .zb-sep { width:1px; height:18px; background:var(--border-2); margin:0 3px; flex:0 0 auto; }
#zoombar #zbMap.on { background:var(--bg-control-h2); color:var(--accent-lite); }
body.threed #minimap, body.threed #zoombar { display:none; }
#cmdbar {
height:38px; background:var(--bg-bar); border-top:1px solid var(--border-1);
display:flex; align-items:center; padding:0 12px; gap:8px; font-size:13px;
}
#cmdbar label { color:var(--text-mut2); }
#cmdbar .lbl { color:var(--accent-lite); font-weight:600; min-width:24px; text-align:right; white-space:nowrap; }
#cmdbar input {
width:90px; background:var(--bg-field); border:1px solid var(--border-2); color:var(--text-hi);
border-radius:5px; padding:5px 8px; font-size:13px; outline:none;
font-variant-numeric:tabular-nums;
}
#cmdbar input:focus { border-color:#2f6fdb; }
#cmdbar #inN { width:56px; }
#cmdApply {
background:#2f6fdb; color:#fff; border:none; border-radius:5px;
padding:6px 12px; cursor:pointer; font-size:13px;
flex:0 0 auto; white-space:nowrap;
}
#cmdApply:hover { background:#3d7ce8; }
#cmdmode { margin-left:6px; color:var(--text-dim); font-size:12px; flex:0 0 auto; white-space:nowrap; }
#cmdbar #hint { flex:1 1 auto; min-width:0; color:var(--text-mut2); font-size:12px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
padding-left:12px; margin-left:6px; border-left:1px solid var(--border-1); }
#statusbar {
height:24px; background:var(--bg-surface); border-top:1px solid var(--border-1);
display:flex; align-items:center; padding:0 12px; font-size:12px;
color:var(--text-dim); gap:16px;
}
.badge { color:var(--accent-lite); }
#saveState { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
#saveState:empty { display:none; }
#saveState::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
#saveState.ss-saved { color:var(--text-dim); }
#saveState.ss-err   { color:#e05c4a; font-weight:600; }
#saveWarn {
display:none; align-items:center; gap:10px; flex:0 0 auto; z-index:5;
padding:8px 12px; font-size:12.5px; line-height:1.35;
background:#e05c4a1f; border-bottom:1px solid #e05c4a66; color:#e0a33c;
}
#saveWarn.show { display:flex; }
#saveWarn svg { width:17px; height:17px; flex:none; stroke:#e05c4a; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#saveWarn #saveWarnMsg { flex:1 1 auto; min-width:0; color:var(--text-hi); }
#saveWarn button { flex:none; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12.5px; font-family:inherit;
background:#2f6fdb; border:1px solid #2f6fdb; color:#fff; }
#saveWarn button:hover { background:#3d7ce8; }
#mfx { color:var(--mfx); font-size:11px; letter-spacing:.6px; user-select:none; }
body.mob #statusbar #mfx { margin-left:auto; }
kbd { background:var(--bg-control); border:1px solid var(--border-2); border-radius:3px; padding:0 4px; font-size:11px; }
#textbar { display:none; position:absolute; top:0; left:0; right:0; z-index:20; height:44px;
background:var(--bg-surface); border-bottom:1px solid var(--border-1); box-shadow:0 5px 16px var(--shadow-30);
align-items:center; gap:9px; padding:0 12px; font-size:13px; color:var(--text-mut2); }
#textbar.show { display:flex; }
#textbar > label { color:var(--text-mut3); letter-spacing:.3px; }
#textbar input, #textbar textarea { background:var(--bg-field); border:1px solid var(--border-2); color:var(--text-hi); border-radius:6px;
padding:7px 9px; font-size:13px; outline:none; font-family:inherit; }
#textbar input:focus, #textbar textarea:focus { border-color:#2f6fdb; }
#textValWrap { position:relative; flex:0 0 auto; width:220px; height:33px; align-self:center; }
#textVal { position:absolute; top:0; left:0; width:100%; height:33px; min-height:33px;
line-height:17px; resize:none; overflow:hidden; white-space:pre-wrap; word-break:break-word;
box-shadow:0 6px 16px var(--shadow-35); }
#textH { width:64px; text-align:right; }
#textbar .tb-spin { display:flex; align-items:stretch; flex:0 0 auto; }
#textbar .tb-spin #textH { border-top-right-radius:0; border-bottom-right-radius:0; border-right:none; }
#textbar .tb-spin-btns { display:flex; flex-direction:column; }
#textbar .tb-spin-btns button { padding:0; width:20px; flex:1 1 0; min-height:0;
background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-mut2); border-radius:0;
font-size:8px; line-height:1; display:flex; align-items:center; justify-content:center;
user-select:none; }
#textbar .tb-spin-btns button:first-child { border-top-right-radius:6px; border-bottom:none; }
#textbar .tb-spin-btns button:last-child { border-bottom-right-radius:6px; }
#textbar .tb-spin-btns button:hover { background:var(--bg-control-h2); border-color:var(--border-3); color:var(--text-hi); }
#textbar .tb-spin-btns button:active { background:#2f6fdb; border-color:#2f6fdb; color:#fff; }
#textbar .tb-sep { width:1px; height:24px; background:var(--border-2); margin:0 3px; flex:0 0 auto; }
#textbar .tb-hint { color:var(--text-dim2); margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#textbar button { background:var(--bg-control); border:1px solid var(--border-2); color:var(--text); border-radius:7px;
padding:7px 11px; font-size:13px; cursor:pointer; outline:none; flex:0 0 auto; }
#textbar button:hover { background:var(--bg-control-h2); border-color:var(--border-3); }
#mostikbar { display:none; position:absolute; top:0; left:0; right:0; z-index:20; height:44px;
background:var(--bg-surface); border-bottom:1px solid var(--border-1); box-shadow:0 5px 16px var(--shadow-30);
align-items:center; gap:9px; padding:0 12px; font-size:13px; color:var(--text-mut2); }
#mostikbar.show { display:flex; }
#mostikbar > label { color:var(--text-mut3); letter-spacing:.3px; }
#mostikbar input { background:var(--bg-field); border:1px solid var(--border-2); color:var(--text-hi); border-radius:6px;
padding:7px 9px; font-size:13px; outline:none; font-family:inherit; }
#mostikbar input:focus { border-color:#2f6fdb; }
#bridgeW { width:74px; text-align:right; }
#mostikbar .tb-spin { display:flex; align-items:stretch; flex:0 0 auto; }
#mostikbar .tb-spin #bridgeW { border-top-right-radius:0; border-bottom-right-radius:0; border-right:none; }
#mostikbar .tb-spin-btns { display:flex; flex-direction:column; }
#mostikbar .tb-spin-btns button { padding:0; width:20px; flex:1 1 0; min-height:0;
background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-mut2); border-radius:0;
font-size:8px; line-height:1; display:flex; align-items:center; justify-content:center;
user-select:none; cursor:pointer; }
#mostikbar .tb-spin-btns button:first-child { border-top-right-radius:6px; border-bottom:none; }
#mostikbar .tb-spin-btns button:last-child { border-bottom-right-radius:6px; }
#mostikbar .tb-spin-btns button:hover { background:var(--bg-control-h2); border-color:var(--border-3); color:var(--text-hi); }
#mostikbar .tb-spin-btns button:active { background:#2f6fdb; border-color:#2f6fdb; color:#fff; }
#mostikbar .tb-sep { width:1px; height:24px; background:var(--border-2); margin:0 3px; flex:0 0 auto; }
#mostikbar .tb-hint { color:var(--text-dim2); margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#splinebar, #nodebar, #selectbar, #ellipsebar, #polybar, #circlebar, #arcbar { display:none; position:absolute; top:0; left:0; right:0; z-index:20; height:44px;
background:var(--bg-surface); border-bottom:1px solid var(--border-1); box-shadow:0 5px 16px var(--shadow-30);
align-items:center; gap:9px; padding:0 12px; font-size:13px; color:var(--text-mut2); }
#splinebar.show, #nodebar.show, #selectbar.show, #ellipsebar.show, #polybar.show, #circlebar.show, #arcbar.show { display:flex; }
#splinebar > label, #nodebar > label, #selectbar > label, #ellipsebar > label, #polybar > label, #circlebar > label, #arcbar > label { color:var(--text-mut3); letter-spacing:.3px; white-space:nowrap; }
#splinebar button, #nodebar button, #selectbar button, #ellipsebar button, #polybar .tb-tgl, #circlebar button, #arcbar button {
width:36px; height:34px; border-radius:8px; border:1px solid transparent;
background:transparent; color:var(--text-mut); cursor:pointer; padding:0; outline:none; flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
transition:background .12s, border-color .12s, color .12s; }
#splinebar button svg, #nodebar button svg, #selectbar button svg, #ellipsebar button svg, #polybar .tb-tgl svg, #circlebar button svg, #arcbar button svg {
width:22px; height:22px; stroke:currentColor; stroke-width:1.7;
fill:none; stroke-linecap:round; stroke-linejoin:round; }
#splinebar button:hover, #nodebar button:hover, #selectbar button:not(:disabled):hover,
#ellipsebar button:hover, #polybar .tb-tgl:hover, #circlebar button:hover, #arcbar button:hover { background:var(--bg-control); color:var(--text-hi); transition:none; }
#splinebar button.active, #nodebar button.active, #selectbar button.active,
#ellipsebar button.active, #polybar .tb-tgl.active, #circlebar button.active, #arcbar button.active { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
#splinebar .tb-sep, #nodebar .tb-sep, #selectbar .tb-sep, #ellipsebar .tb-sep, #polybar .tb-sep, #circlebar .tb-sep, #arcbar .tb-sep { width:1px; height:24px; background:var(--border-2); margin:0 3px; flex:0 0 auto; }
#splinebar .tb-hint, #nodebar .tb-hint, #selectbar .tb-hint, #ellipsebar .tb-hint, #polybar .tb-hint, #circlebar .tb-hint, #arcbar .tb-hint { color:var(--text-dim2); margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#polybar input { background:var(--bg-field); border:1px solid var(--border-2); color:var(--text-hi); border-radius:6px;
padding:7px 9px; font-size:13px; outline:none; font-family:inherit; }
#polybar input:focus { border-color:#2f6fdb; }
#polySides { width:56px; text-align:right; }
#polybar .tb-spin { display:flex; align-items:stretch; flex:0 0 auto; }
#polybar .tb-spin #polySides { border-top-right-radius:0; border-bottom-right-radius:0; border-right:none; }
#polybar .tb-spin-btns { display:flex; flex-direction:column; }
#polybar .tb-spin-btns button { padding:0; width:20px; height:auto; flex:1 1 0; min-height:0;
background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-mut2); border-radius:0;
font-size:8px; line-height:1; display:flex; align-items:center; justify-content:center;
user-select:none; cursor:pointer; }
#polybar .tb-spin-btns button:first-child { border-top-right-radius:6px; border-bottom:none; }
#polybar .tb-spin-btns button:last-child { border-bottom-right-radius:6px; }
#polybar .tb-spin-btns button:hover { background:var(--bg-control-h2); border-color:var(--border-3); color:var(--text-hi); }
#polybar .tb-spin-btns button:active { background:#2f6fdb; border-color:#2f6fdb; color:#fff; }
#selectbar button:disabled { opacity:.35; cursor:default; }
#textbar.stacked { top:44px; }
body.mob #textbar.stacked { top:52px; }
#fontPick { position:relative; flex:0 0 auto; }
#fontPickBtn { display:flex; align-items:center; gap:8px; min-width:200px; }
#fontPickBtn .fp-name { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
#fontPickBtn .fp-caret { color:var(--text-dim); font-size:11px; }
#fontMenu { display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:60;
width:400px; max-width:calc(100vw - 24px); max-height:380px; overflow-y:auto; background:var(--bg-surface); border:1px solid var(--border-2);
border-radius:9px; box-shadow:0 12px 30px var(--shadow-45); padding:5px; }
#fontMenu.show { display:block; }
#fontMenu .fm-search { position:sticky; top:-5px; z-index:2; margin:-5px -5px 5px; padding:6px 7px;
background:var(--bg-surface); border-bottom:1px solid var(--border-2); border-radius:9px 9px 0 0; }
#fontMenu .fm-search-inp { width:100%; box-sizing:border-box; padding:6px 9px; border-radius:6px;
border:1px solid var(--border-2); background:var(--bg-control); color:var(--text-hi);
font-family:"Segoe UI",system-ui,sans-serif; font-size:13px; outline:none; }
#fontMenu .fm-search-inp:focus { border-color:#2f6fdb; }
#fontMenu .fm-search-inp::placeholder { color:var(--text-mut3); }
#fontMenu .fm-hit { color:var(--accent-lite); font-weight:700; }
#fontMenu .fm-item.hl { background:var(--bg-control); }
#fontMenu .fm-item { display:flex; align-items:center; gap:10px; padding:6px 11px; border-radius:6px;
cursor:pointer; color:var(--text-hi); font-family:"Segoe UI",system-ui,sans-serif; font-size:13px;
line-height:1.3; white-space:nowrap; overflow:hidden; }
#fontMenu .fm-item .fm-nm { flex:0 1 auto; min-width:0; max-width:56%; overflow:hidden; text-overflow:ellipsis; }
#fontMenu .fm-item .fm-prev { flex:1 1 auto; min-width:0; text-align:right; font-size:20px; line-height:1.15;
color:var(--text-mut2); overflow:hidden; text-overflow:ellipsis; }
#fontMenu .fm-item .fm-prev svg { display:inline-block; vertical-align:middle; height:19px; max-width:100%; }
#fontMenu .fm-item:hover { background:var(--bg-control); }
#fontMenu .fm-item:hover .fm-prev, #fontMenu .fm-item.sel .fm-prev { color:var(--text-hi); }
#fontMenu .fm-item.sel { background:#2f6fdb22; outline:1px solid #2f6fdb; }
#fontMenu .fm-item small { display:block; font-size:10.5px; color:var(--text-mut3); font-family:"Segoe UI",system-ui,sans-serif;
margin-top:1px; overflow:hidden; text-overflow:ellipsis; }
#fontMenu .fm-item.fm-loadsys { display:block; font-size:13px; color:var(--accent-lite);
font-weight:600; border-top:1px solid var(--border-2); border-radius:0 0 6px 6px; margin-top:3px; padding:7px 11px; }
#fontMenu .fm-item.fm-denied { color:#e0a63a; white-space:normal; overflow:visible; cursor:default; }
#fontMenu .fm-item.fm-denied:hover { background:none; }
#fontMenu .fm-note { cursor:default; font-family:"Segoe UI",system-ui,sans-serif; font-size:11.5px;
line-height:1.45; color:var(--text-mut2); background:var(--bg-control); border-radius:6px;
padding:8px 10px; margin:2px 2px 3px; }
#fontMenu .fm-note b { display:block; color:var(--text-hi); font-size:11.5px; margin-bottom:5px; }
#fontMenu .fm-note ol { margin:0; padding-left:17px; }
#fontMenu .fm-note li { margin:3px 0; }
#fontMenu .fm-retry { margin-top:9px; width:100%; border:none; border-radius:5px; padding:6px;
background:#2f6fdb; color:#fff; font-size:12px; font-family:inherit; cursor:pointer; }
#fontMenu .fm-retry:hover { background:#3f7fe8; }
#fontMenu .fm-retry:disabled { background:var(--bg-control-h3); color:var(--text-mut3); cursor:default; }
#fontMenu::-webkit-scrollbar { width:8px; }
#fontMenu::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:4px; }
@font-face { font-family:'BundledNotoPreview'; src:url('NotoSans-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
#scaleDialog, #offsetDialog, #hatchDialog, #joinDialog, #smoothDialog, #traceDialog, #layerDialog, #calibDialog, #macroRingDialog, #macroConeDialog, #macroTeeDialog, #macroKozkaDialog { position:fixed; inset:0; background:var(--overlay-12); display:none;
align-items:center; justify-content:center; z-index:50; }
.calib-note { font-size:11.5px; color:var(--text-mut3); line-height:1.5; margin-bottom:14px; }
.calib-unit { flex:0 0 auto; color:var(--text-mut2); font-size:12px; user-select:none; }
#calibRulerWrap { overflow-x:auto; overflow-y:hidden; margin:2px 0 14px; scrollbar-width:thin; scrollbar-color:var(--border-2) transparent; }
#calibRulerWrap::-webkit-scrollbar { height:6px; }
#calibRulerWrap::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:4px; }
#calibRuler { display:block; position:static; inset:auto; cursor:default; zoom:calc(1 / var(--ui-dlg-scale)); }
#calibDiag { max-width:90px; }
#calibApply { background:#2f6fdb; color:#fff; }
#calibApply:hover { background:#3d7ce8; }
#calibCancel { background:var(--bg-control); color:var(--text); }
#calibCancel:hover { background:var(--bg-control-h3); }
.ldlg-label { display:block; font-size:11.5px; color:var(--text-mut3); margin:0 0 5px; letter-spacing:.3px; }
#layerDlgName { width:100%; background:var(--bg-field); border:1px solid var(--border-2); color:var(--text-hi);
border-radius:5px; padding:8px 9px; font-size:14px; outline:none; margin-bottom:14px; }
#layerDlgName:focus { border-color:#2f6fdb; }
.ldlg-colors { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; margin-bottom:16px; }
.ldlg-colors .cp-sw { width:100%; aspect-ratio:1; border-radius:4px; cursor:pointer;
border:1px solid #00000055; box-shadow:0 0 0 1px #ffffff14 inset; }
.ldlg-colors .cp-sw:hover { outline:2px solid #6ea8ff88; outline-offset:1px; }
.ldlg-colors .cp-sw.sel { outline:2px solid var(--accent-lite); outline-offset:1px; }
.ldlg-ltype { display:flex; gap:8px; margin-bottom:16px; }
.ldlg-ltype button { flex:1; height:34px; display:flex; align-items:center; justify-content:center;
background:var(--bg-field); border:1px solid var(--border-2); border-radius:6px; cursor:pointer; padding:0;
transition:background .12s, border-color .12s; }
.ldlg-ltype button svg { width:60px; height:16px; }
.ldlg-ltype button svg line { stroke:var(--text); stroke-width:2; stroke-linecap:round; }
.ldlg-ltype button:hover { border-color:#6ea8ff88; }
.ldlg-ltype button.sel { border-color:var(--accent-lite); background:#2f6fdb22; }
.ldlg-ltype button.sel svg line { stroke:var(--accent-lite); }
.ldlg-weight { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.ldlg-weight input[type=range] { flex:1; accent-color:var(--accent-lite); height:18px; cursor:pointer; }
.ldlg-weight .wval { min-width:34px; text-align:right; font-size:13px; color:var(--text-hi);
font-variant-numeric:tabular-nums; }
#layerDialog { background:transparent; }
#layerDialog .modalbtns { gap:8px; }
#layerDialog .modalbtns button {
flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
border:1px solid var(--border-2); background:var(--bg-control); color:var(--text); border-radius:7px;
padding:9px; font-size:13px; cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
#layerDialog .modalbtns button svg { width:16px; height:16px; stroke:currentColor; fill:none;
stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#layerDialog .modalbtns button:hover { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
#layerDialog .modalbtns #layerDlgApply { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
#layerDialog .modalbtns #layerDlgApply:hover { background:#2f6fdb33; }
#progressPop { position:fixed; inset:0; z-index:70; display:none;
align-items:center; justify-content:center; background:var(--overlay-12); }
#progressPop .modalbox { width:280px; }
#progressPop .modalbox h3 { cursor:default; }
.prg-bar { height:8px; border-radius:5px; overflow:hidden;
background:var(--bg-field); border:1px solid var(--border-2); }
#prgFill { height:100%; width:0; background:#2f6fdb; transition:width .12s linear; }
.prg-foot { display:flex; justify-content:space-between; align-items:center;
margin:10px 0 16px; font-size:12px; color:var(--text-mut3); }
#prgPct { color:var(--text-hi); font-variant-numeric:tabular-nums; }
#progressPop .modalbtns { justify-content:flex-end; }
#progressPop .modalbtns button { flex:0 0 auto; min-width:110px;
background:var(--bg-control); color:var(--text); }
#progressPop .modalbtns button:hover { background:var(--bg-control-h3); }
#confirmDialog { position:fixed; inset:0; z-index:80; display:none;
align-items:center; justify-content:center;
background:var(--overlay-42); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
#confirmDialog.show { display:flex; animation:cdlgFade .14s ease; }
#confirmDialog .confirmbox { width:320px; animation:cdlgPop .16s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cdlgFade { from{ opacity:0 } to{ opacity:1 } }
@keyframes cdlgPop { from{ opacity:0; transform:translateY(8px) scale(.96) } to{ opacity:1; transform:none } }
.confirm-msg { font-size:13px; color:var(--text-c); line-height:1.55; margin-bottom:18px; }
#confirmDialog .modalbtns button { padding:9px; font-size:13px; font-weight:500; }
#confirmOk { background:#c0392b; color:#fff; }
#confirmOk:hover { background:#d64535; }
#confirmAlt { display:none; background:#2f6fdb; color:#fff; }
#confirmAlt:hover { background:#3f7fe8; }
#confirmCancel { background:var(--bg-control); color:var(--text); }
#confirmCancel:hover { background:var(--bg-control-h3); }
#confirmDialog .modalbtns.stack3 { flex-direction:column-reverse; }
.modalbox { position:relative; background:var(--bg-surface); border:1px solid var(--border-2); border-radius:10px; padding:14px 20px 18px;
width:260px; box-shadow:0 10px 40px var(--shadow-b); }
.modalbox h3 { font-size:14px; color:var(--text-hi); margin:-14px -20px 14px; padding:11px 38px 9px 20px;
font-weight:600; cursor:move; border-bottom:1px solid var(--border-1); border-radius:10px 10px 0 0; }
.pop-close { position:absolute; top:8px; right:8px; width:26px; height:26px; padding:0; z-index:2;
display:flex; align-items:center; justify-content:center; border:none; border-radius:7px;
background:transparent; color:var(--text-mut2); cursor:pointer;
font:400 19px/1 ui-sans-serif,system-ui,"Segoe UI",sans-serif; font-size:0; }
.pop-close::before, .pop-close::after {
content:''; position:absolute; left:50%; top:50%;
width:12px; height:1.7px; border-radius:1px; background:currentColor; }
.pop-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.pop-close::after  { transform:translate(-50%,-50%) rotate(-45deg); }
.pop-close:hover { background:var(--bg-control-h3); color:var(--text-hi); }
.modalbox .pop-close { top:6px; right:6px; }
.scalerow { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.scalerow input { flex:1; width:0; background:var(--bg-field); border:1px solid var(--border-2); color:var(--text-hi);
border-radius:5px; padding:8px 9px; font-size:14px; text-align:center; outline:none; font-variant-numeric:tabular-nums; }
.scalerow input:focus { border-color:#2f6fdb; }
.scalelabel { flex:0 0 auto; min-width:56px; color:var(--text-mut2); font-size:13px; user-select:none; }
#scaleLock { flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-mut2); border-radius:7px; cursor:pointer; padding:0; }
#scaleLock svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
#scaleLock:hover { background:var(--bg-control-h3); }
#scaleLock.on { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
.sc-wh { align-items:flex-end; }
.sc-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.sc-col .tb-spin { flex:0 0 auto; }
.sc-ax { font-size:11px; font-weight:600; color:var(--text-mut3); user-select:none; text-align:center; }
#scaleEachRow { display:none; gap:6px;
margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border-2); }
.sc-mbtn { flex:1; height:42px; display:flex; align-items:center; justify-content:center;
background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-mut2);
border-radius:7px; cursor:pointer; padding:0; }
.sc-mbtn svg { width:100%; max-width:72px; height:32px; fill:none; stroke:currentColor;
stroke-width:1.25; stroke-linecap:round; }
.sc-mbtn svg .box, .sc-mbtn svg .halo { stroke:#ff6b4a; stroke-width:1.3; stroke-dasharray:3 2.2; }
.sc-mbtn:hover { background:var(--bg-control-h3); color:var(--text-hi); }
.sc-mbtn.on { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
.modalbtns { display:flex; gap:8px; }
.modalbtns button { flex:1; border:none; border-radius:6px; padding:8px; cursor:pointer; font-size:13px; }
#scaleApply { background:#2f6fdb; color:#fff; }
#scaleApply:hover { background:#3d7ce8; }
#scaleCancel { background:var(--bg-control); color:var(--text); }
#scaleCancel:hover { background:var(--bg-control-h3); }
#offsetSide { flex:0 0 auto; padding:8px 12px; background:var(--bg-control); border:1px solid var(--border-2);
color:var(--text); border-radius:7px; cursor:pointer; font-size:13px; white-space:nowrap; min-width:96px; }
#offsetSide:hover { background:var(--bg-control-h3); }
#offsetSide.out { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
#hatchAngle { flex:0 0 auto; padding:8px 12px; background:var(--bg-control); border:1px solid var(--border-2);
color:var(--text); border-radius:7px; cursor:pointer; font-size:13px; white-space:nowrap; min-width:64px;
font-variant-numeric:tabular-nums; }
#hatchAngle:hover { background:var(--bg-control-h3); }
#offsetApply { background:#2f6fdb; color:#fff; }
#offsetApply:hover { background:#3d7ce8; }
#offsetCancel { background:var(--bg-control); color:var(--text); }
#offsetCancel:hover { background:var(--bg-control-h3); }
#hatchApply { background:#2f6fdb; color:#fff; }
#hatchApply:hover { background:#3d7ce8; }
#hatchCancel { background:var(--bg-control); color:var(--text); }
#hatchCancel:hover { background:var(--bg-control-h3); }
.modalbox .tb-spin { display:flex; align-items:stretch; flex:1; min-width:0; }
.modalbox .tb-spin input { flex:1; width:0; min-width:0; background:var(--bg-field); border:1px solid var(--border-2); color:var(--text-hi);
border-radius:5px 0 0 5px; border-right:none; padding:8px 9px; font-size:14px; text-align:center; outline:none; font-variant-numeric:tabular-nums; }
.modalbox .tb-spin input:focus { border-color:#2f6fdb; }
.modalbox .tb-spin-btns { display:flex; flex-direction:column; flex:0 0 auto; }
.modalbox .tb-spin-btns button { padding:0; width:22px; flex:1 1 0; min-height:0;
background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-mut2); cursor:pointer; font-size:9px; line-height:1; }
.modalbox .tb-spin-btns button:first-child { border-top-right-radius:5px; border-bottom:none; }
.modalbox .tb-spin-btns button:last-child { border-bottom-right-radius:5px; }
.modalbox .tb-spin-btns button:hover { background:var(--bg-control-h2); border-color:var(--border-3); color:var(--text-hi); }
.modalbox .tb-spin-btns button:active { background:#2f6fdb; border-color:#2f6fdb; color:#fff; }
#scaleDialog .modalbox { width:310px; }
#joinApply { background:#2f6fdb; color:#fff; }
#joinApply:hover { background:#3d7ce8; }
#joinCancel { background:var(--bg-control); color:var(--text); }
#joinCancel:hover { background:var(--bg-control-h3); }
#smoothDialog .smoothrow { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
#smoothRange { flex:1; width:0; height:4px; -webkit-appearance:none; appearance:none; background:var(--border-2);
border-radius:3px; outline:none; cursor:pointer; }
#smoothRange::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px;
border-radius:50%; background:#2f6fdb; border:2px solid #cfe0ff; cursor:pointer; }
#smoothRange::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#2f6fdb;
border:2px solid #cfe0ff; cursor:pointer; }
#smoothDialog .tb-spin { flex:0 0 auto; }
#smoothDialog .tb-spin #smoothVal { flex:0 0 auto; width:74px; text-align:right; }
#smoothApply { background:#2f6fdb; color:#fff; }
#smoothApply:hover { background:#3d7ce8; }
#smoothCancel { background:var(--bg-control); color:var(--text); }
#smoothCancel:hover { background:var(--bg-control-h3); }
#selectbar #traceSep, #selectbar #traceBtn { display:none; }
#selectbar.trace-on #traceSep { display:block; }
#selectbar.trace-on #traceBtn { display:flex; }
#selectbar #traceBtn { width:auto; height:34px; border-radius:8px; gap:7px; padding:0 12px;
font-size:12px; font-weight:600; letter-spacing:.3px; white-space:nowrap;
background:#2f6fdb22; border:1px solid #2f6fdb; color:var(--accent-lite); }
#selectbar #traceBtn:hover { background:#2f6fdb38; color:var(--accent-lite); }
#selectbar #traceBtn span { flex:0 0 auto; }
#selectbar #traceBtn svg { width:20px; height:20px; flex:0 0 auto; }
#selectbar #traceBtn.busy { opacity:.5; pointer-events:none; }
#traceDialog .modalbox { width:330px; }
.tr-tabs { display:flex; gap:6px; margin-bottom:14px; }
.tr-tab { flex:1; padding:7px 3px; font-size:12px; background:var(--bg-control); border:1px solid var(--border-2);
color:var(--text-mut2); border-radius:6px; cursor:pointer; white-space:nowrap; }
.tr-tab:hover { background:var(--bg-control-h3); color:var(--text-hi); }
.tr-tab.sel { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
.tr-row { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.tr-lbl { flex:0 0 auto; width:96px; color:var(--text-mut2); font-size:12.5px; user-select:none; }
.tr-row input[type=range] { flex:1; width:0; height:4px; -webkit-appearance:none; appearance:none; background:var(--border-2);
border-radius:3px; outline:none; cursor:pointer; }
.tr-row input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:15px; height:15px;
border-radius:50%; background:#2f6fdb; border:2px solid #cfe0ff; cursor:pointer; }
.tr-row input[type=range]::-moz-range-thumb { width:15px; height:15px; border-radius:50%; background:#2f6fdb;
border:2px solid #cfe0ff; cursor:pointer; }
.tr-num { flex:0 0 auto; width:46px; text-align:right; color:var(--text); font-size:12.5px;
font-variant-numeric:tabular-nums; user-select:none; }
.tr-chk { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-mut2); cursor:pointer; user-select:none; }
.tr-chk input { width:14px; height:14px; accent-color:#2f6fdb; cursor:pointer; }
.tr-info { font-size:11.5px; color:var(--text-mut3); line-height:1.5; margin:2px 0 13px; min-height:17px; }
#traceApply { background:#2f6fdb; color:#fff; }
#traceApply:hover { background:#3d7ce8; }
#traceCancel { background:var(--bg-control); color:var(--text); }
#traceCancel:hover { background:var(--bg-control-h3); }
#arrayDialog { position:fixed; inset:0; background:var(--overlay-12); display:none;
align-items:center; justify-content:center; z-index:50; }
#arrayDialog.picking { background:transparent; pointer-events:none; }
#arrayDialog.picking .modalbox { pointer-events:auto; }
.arr-tabs { display:flex; gap:6px; margin-bottom:14px; }
.arr-tab { flex:1; padding:7px 3px; font-size:12px; background:var(--bg-control); border:1px solid var(--border-2);
color:var(--text-mut2); border-radius:6px; cursor:pointer; white-space:nowrap; }
.arr-tab:hover { background:var(--bg-control-h3); color:var(--text-hi); }
.arr-tab.sel { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
.arr-pane { display:none; }
.arr-pane.on { display:block; }
.arr-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.arr-lbl { flex:0 0 auto; width:98px; color:var(--text-mut2); font-size:12.5px; user-select:none; }
.arr-row input { flex:1; width:0; min-width:0; background:var(--bg-field); border:1px solid var(--border-2);
color:var(--text-hi); border-radius:5px; padding:7px 8px; font-size:13.5px; text-align:center; outline:none;
font-variant-numeric:tabular-nums; }
.arr-row input:focus { border-color:#2f6fdb; }
.arr-x { flex:0 0 auto; color:var(--text-mut3); font-size:12px; user-select:none; }
.arr-tgl { flex:1; padding:7px 8px; background:var(--bg-control); border:1px solid var(--border-2);
color:var(--text); border-radius:7px; cursor:pointer; font-size:12.5px; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; }
.arr-tgl:hover { background:var(--bg-control-h3); }
.arr-tgl.on { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
.arr-modes { flex:1; display:flex; gap:6px; }
.arr-mbtn { flex:1; height:42px; display:flex; align-items:center; justify-content:center;
background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-mut2);
border-radius:7px; cursor:pointer; padding:0; }
.arr-mbtn svg { width:100%; max-width:54px; height:30px; fill:none; stroke:currentColor;
stroke-width:1.25; stroke-linecap:round; }
.arr-mbtn svg .dim { stroke:#ff6b4a; stroke-width:1.5; }
.arr-mbtn svg .box { stroke:#ff6b4a; stroke-width:1.3; stroke-dasharray:3 2.2; }
.arr-mbtn:hover { background:var(--bg-control-h3); color:var(--text-hi); }
.arr-mbtn.on { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
.arr-pick { flex:0 0 auto; width:34px; height:32px; display:flex; align-items:center; justify-content:center;
background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-mut2); border-radius:7px;
cursor:pointer; padding:0; }
.arr-pick svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.arr-pick:hover { background:var(--bg-control-h3); color:var(--text-hi); }
.arr-pick.on { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
#arrayNote { font-size:11.5px; color:var(--text-mut3); line-height:1.45; margin:2px 0 12px; min-height:17px; }
#arrayNote.warn { color:#ff9f43; }
#arrayApply { background:#2f6fdb; color:#fff; }
#arrayApply:hover { background:#3d7ce8; }
#arrayCancel { background:var(--bg-control); color:var(--text); }
#arrayCancel:hover { background:var(--bg-control-h3); }
#macropanel {
position:absolute; left:112px; top:0; bottom:0; z-index:4;
width:270px; background:var(--bg-surface); border-right:1px solid var(--border-1);
box-shadow:5px 0 16px var(--shadow-30);
display:flex; flex-direction:column; min-height:0; font-size:13px; overflow:hidden;
transform:translateX(0); transition:transform .2s ease;
}
#macropanel.collapsed { transform:translateX(-100%); box-shadow:none; pointer-events:none; }
html.cadboot #macropanel { transition:none !important; }
#macrohead { flex:0 0 auto; padding:11px 14px 9px; font-size:11.5px; font-weight:600; letter-spacing:.6px;
text-transform:uppercase; color:var(--text-mut3); border-bottom:1px solid var(--border-1); white-space:nowrap; }
#macrolist { flex:1; overflow-y:auto; overflow-x:hidden; padding:10px;
display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
#macrolist::-webkit-scrollbar { width:8px; }
#macrolist::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:4px; }
.macroitem {
display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 8px 9px;
background:var(--bg-control); border:1px solid var(--border-2); border-radius:8px; cursor:pointer;
color:var(--text-mut); transition:background .12s, border-color .12s, color .12s;
}
.macroitem:hover { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
.macroitem svg { width:78%; height:auto; display:block; fill:none; stroke:currentColor;
stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.macroitem span { font-size:12px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#macroToggle.on { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
.mr-fig { display:block; width:100%; height:auto; margin:2px 0 14px; }
.mr-fig circle, .mr-fig .part { fill:none; stroke:var(--text-hi); stroke-width:2;
stroke-linecap:round; stroke-linejoin:round; }
.mr-fig .axis { fill:none; stroke:var(--text-mut3); stroke-width:1; stroke-dasharray:7 3 2 3; }
.mr-fig .dim { fill:none; stroke:#ff9f43; stroke-width:1.6; stroke-linecap:round; }
.mr-fig .dimhead { fill:#ff9f43; stroke:none; }
.mr-fig text { fill:#ff9f43; stroke:none;
font:700 14px ui-sans-serif,system-ui,"Segoe UI",sans-serif; }
.mr-chk { cursor:pointer; color:var(--text-mut2); font-size:13px; user-select:none; }
.mr-chk:hover { color:var(--text-hi); }
.mr-chk input[type=checkbox] { flex:0 0 auto; width:15px; height:15px; margin:0; accent-color:#2f6fdb; cursor:pointer; }
.mr-chk span { flex:1; }
.mr-chk input[type=text] { flex:0 0 76px; }
.mr-chk input[type=text]:disabled { opacity:.45; cursor:default; }
.mr-btnrow input[type=checkbox] { position:absolute; width:1px; height:1px;
opacity:0; margin:0; pointer-events:none; }
.mr-figbtn { flex:1; height:50px; display:flex; align-items:center; justify-content:center;
background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-mut2);
border-radius:7px; transition:background .12s, border-color .12s, color .12s; }
.mr-figbtn svg { width:100%; max-width:70px; height:34px; fill:none; stroke:currentColor;
stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.mr-figbtn svg .add { stroke:#ff9f43; stroke-width:1.5; }
.mr-figbtn:hover { background:var(--bg-control-h3); color:var(--text-hi); }
.mr-btnrow input[type=checkbox]:checked ~ .mr-figbtn { background:#2f6fdb22;
border-color:#2f6fdb; color:var(--accent-lite); }
.mr-btnrow input[type=checkbox]:focus-visible ~ .mr-figbtn { border-color:#2f6fdb; }
.mk-ins { flex:1; display:flex; gap:6px; }
.mk-insbtn { flex:1; height:34px; display:flex; align-items:center; justify-content:center;
background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-mut2);
border-radius:7px; cursor:pointer; padding:0; font:600 13px inherit; letter-spacing:.3px;
transition:background .12s, border-color .12s, color .12s; }
.mk-insbtn:hover { background:var(--bg-control-h3); color:var(--text-hi); }
.mk-insbtn.on { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
#macroRingApply, #macroConeApply, #macroTeeApply, #macroKozkaApply { background:#2f6fdb; color:#fff; }
#macroRingApply:hover, #macroConeApply:hover, #macroTeeApply:hover, #macroKozkaApply:hover { background:#3d7ce8; }
#macroRingCancel, #macroConeCancel, #macroTeeCancel, #macroKozkaCancel { background:var(--bg-control); color:var(--text); }
#macroRingCancel:hover, #macroConeCancel:hover, #macroTeeCancel:hover, #macroKozkaCancel:hover { background:var(--bg-control-h3); }
#layerpanel {
width:270px; flex:0 0 270px; background:var(--bg-surface); border-left:1px solid var(--border-1);
box-shadow:-5px 0 16px var(--shadow-30);
display:flex; flex-direction:column; min-height:0; font-size:13px; overflow:hidden;
transition:flex-basis .2s ease, width .2s ease, opacity .2s ease, border-left-width .2s ease;
}
#layerpanel.collapsed { flex-basis:0; width:0; opacity:0; border-left-width:0; pointer-events:none; }
html.layerpanel-hidden #layerpanel { flex-basis:0; width:0; opacity:0; border-left-width:0; pointer-events:none; }
html.cadboot #layerpanel { transition:none !important; }
html.layerpanel-hidden #topbar #layerToggle.on { background:transparent; border-color:transparent; color:var(--text-mut); }
html.layerpanel-hidden #topbar #layerAssign { opacity:0; pointer-events:none; }
html.cadboot #topbar #layerToggle, html.cadboot #topbar #layerAssign { transition:none !important; }
#topbar #layerToggle { width:auto; min-width:0; height:36px; border-radius:8px; gap:7px; padding:0 14px; font-size:13px; font-weight:600; letter-spacing:.3px; flex:0 0 auto; white-space:nowrap; }
#topbar #layerToggle span { flex:0 0 auto; }
#topbar #layerToggle svg { width:20px; height:20px; flex:0 0 auto; }
#layerToggle.on { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
#layerAdd {
width:100%; box-sizing:border-box; height:32px; border-radius:7px; border:1px solid var(--border-2); background:var(--bg-control);
color:var(--text-mut); cursor:pointer; line-height:0; display:flex;
align-items:center; justify-content:center; padding:0; margin:2px 0 8px;
}
#layerAdd svg { display:block; }
body:not(.layer-dragging) #layerAdd:hover { background:#34c06022; border-color:#34c060; color:var(--green-lite); }
#layerlist { flex:1; overflow-y:auto; overflow-x:hidden; padding:5px; }
#layerlist::-webkit-scrollbar { width:8px; }
#layerlist::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:4px; }
.layerrow {
position:relative;
display:flex; align-items:center; gap:5px; padding:5px 5px 5px 12px; border-radius:7px;
cursor:pointer; border:1px solid transparent; margin-bottom:7px;
background:linear-gradient(to right, rgba(var(--rf,55,60,68),1) 0%, rgba(var(--rf,55,60,68),0) 78%);
}
.layerrow::before {
content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
border-radius:7px 0 0 7px; background:var(--lc, transparent);
}
.layerrow:hover {
background:linear-gradient(to right, rgba(var(--rfh,80,90,105),1) 0%, rgba(var(--rfh,80,90,105),0) 78%);
}
.layerrow.imglayer:hover { background:linear-gradient(to right, rgba(var(--rf,55,60,68),1) 0%, rgba(var(--rf,55,60,68),0) 78%); }
.layerrow.imglayer { cursor:default; }
.layerrow.dragging-list, .layerrow.dropping {
background:linear-gradient(to right, rgba(var(--rfh,80,90,105),1) 0%, rgba(var(--rfh,80,90,105),0) 78%);
}
.layerrow.imglayer.dragging-list, .layerrow.imglayer.dropping {
background:linear-gradient(to right, rgba(var(--rf,55,60,68),1) 0%, rgba(var(--rf,55,60,68),0) 78%);
}
.layerrow.dragging-list .lgrip, .layerrow.dropping .lgrip { color:var(--text-mut3); }
.layerrow.dragging-list {
box-shadow:0 16px 40px var(--shadow); cursor:grabbing; z-index:9999;
}
.layer-placeholder {
margin-bottom:7px; border-radius:7px; box-sizing:border-box;
background:#2f6fdb1f; border:2px dashed #2f6fdb66;
}
body.layer-dragging, body.layer-dragging * { cursor:grabbing !important; }
.layerrow.lrow-anim {
overflow:hidden;
transition:max-height .2s ease, opacity .2s ease, margin .2s ease,
padding .2s ease, border-width .2s ease;
}
.layerrow.lrow-collapsed {
opacity:0; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0;
border-top-width:0; border-bottom-width:0;
}
.lgrip {
flex:0 0 auto; width:18px; height:28px; display:flex; align-items:center; justify-content:center;
color:var(--grip); cursor:grab; padding:0;
}
.lgrip:active { cursor:grabbing; }
.lgrip svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.layerrow:hover .lgrip { color:var(--text-mut3); }
.llock {
flex:0 0 auto; width:22px; height:22px; border-radius:5px; border:none; background:transparent;
color:var(--text-mut); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.llock svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round; }
.llock:hover { color:var(--text-hi); background:var(--bg-control-h3); }
.layerrow.locked .llock { color:var(--lock); }
.layerrow.active {
border-color:var(--lc, #2f6fdb);
background:linear-gradient(to right, rgba(var(--rfh,80,90,105),1) 0%, rgba(var(--rfh,80,90,105),0) 78%);
}
.layerrow.active .lname { color:var(--text-hi); }
.layerrow.hidden .lname { color:var(--text-hidden); text-decoration:line-through; }
.lswatch {
flex:0 0 auto; width:18px; height:18px; border-radius:4px; cursor:pointer;
border:1px solid #00000055; box-shadow:0 0 0 1px #ffffff14 inset; padding:0;
}
.lswatch:hover { outline:2px solid var(--accent-lite); outline-offset:1px; }
.lvis {
flex:0 0 auto; width:22px; height:22px; border-radius:5px; border:none; background:transparent;
color:var(--text-mut); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.lvis svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round; }
.lvis:hover { color:var(--text-hi); background:var(--bg-control-h3); }
.layerrow.hidden .lvis { color:var(--grip); }
.lname {
flex:1; min-width:0; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
text-shadow:0 1px 1px var(--shadow-45);
}
.lname-input {
flex:1; min-width:0; background:var(--bg-field); border:1px solid #2f6fdb; color:var(--text-hi);
border-radius:4px; padding:2px 4px; font-size:13px; outline:none;
}
.lcount { flex:0 0 auto; color:var(--text-dim2); font-variant-numeric:tabular-nums; font-size:11px; min-width:16px; text-align:right; }
.lpick, .ldel, .ledit {
flex:0 0 auto; width:22px; height:22px; border-radius:5px; border:none; background:transparent;
color:var(--text-mut); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.lpick svg, .ldel svg, .ledit svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round; }
.lpick:hover { color:var(--accent-lite); background:var(--bg-control-h3); }
.ledit:hover { color:var(--accent-hover); background:var(--bg-control-h3); }
.ldel:hover { color:#ff6b6b; background:var(--bg-control-h3); }
.ldel.disabled { visibility:hidden; }
#topright { display:flex; align-items:center; gap:0; margin-left:auto; }
#topbar #layerAssign {
width:46px; height:36px; border-radius:8px; border:1px solid var(--border-2); background:var(--bg-control);
color:var(--text-disabled); cursor:default; opacity:.45; padding:0; margin-right:8px; flex:0 0 auto;
display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap;
transition:opacity .18s ease, width .18s ease, margin .18s ease, padding .18s ease,
border-color .12s, background .12s, color .12s;
}
#topbar #layerAssign svg { width:36px; height:26px; flex:0 0 auto; }
#layerAssign .la-inner, #layerAssign .la-outer, #layerAssign .la-arrow, #layerAssign .la-head {
stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
#layerAssign .la-arrow, #layerAssign .la-head { stroke-width:3; }
#layerAssign .la-dot { stroke:none; fill:var(--icon-dot); }
#topbar #layerAssign.on { opacity:1; cursor:pointer; color:var(--text); }
#topbar #layerAssign.on:hover { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-hover); }
#topbar #layerAssign.hidden { opacity:0; pointer-events:none; }
#colorPop {
position:fixed; z-index:60; display:none; background:var(--bg-pop); border:1px solid var(--border-2);
border-radius:9px; padding:8px; box-shadow:0 10px 34px var(--shadow);
width:182px;
}
#ctxMenu {
position:fixed; z-index:200; display:none; min-width:190px;
background:var(--bg-surface); border:1px solid var(--border-2); border-radius:9px; padding:5px;
box-shadow:0 12px 36px var(--shadow); font-size:13px; color:var(--text);
}
#ctxMenu .ci {
position:relative; padding:8px 12px; border-radius:6px; cursor:pointer;
display:flex; align-items:center; gap:10px; white-space:nowrap;
}
#ctxMenu .ci:hover { background:var(--bg-control); color:var(--text-hi); }
#ctxMenu .ci svg {
width:15px; height:15px; flex:0 0 auto; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.85;
}
#ctxMenu .ci.has-sub { padding-right:24px; }
#ctxMenu .ci.has-sub::after {
content:'▸'; position:absolute; right:11px; color:var(--text-dim); font-size:11px;
}
#ctxMenu .ci.has-sub::before {
content:''; position:absolute; left:100%; top:0; width:11px; height:100%;
}
#ctxMenu .ci-sep { height:1px; background:var(--border-1); margin:4px 6px; }
#ctxMenu .submenu {
display:none; position:absolute; left:100%; top:-6px; margin-left:6px;
min-width:170px; max-height:320px; overflow-y:auto;
background:var(--bg-surface); border:1px solid var(--border-2); border-radius:9px; padding:5px;
box-shadow:0 12px 36px var(--shadow);
}
#ctxMenu .ci.has-sub:hover > .submenu, #ctxMenu .submenu:hover { display:block; }
#ctxMenu .submenu::-webkit-scrollbar { width:8px; }
#ctxMenu .submenu::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:4px; }
#ctxMenu .cidot {
width:13px; height:13px; border-radius:3px; flex:0 0 auto;
border:1px solid #00000055; box-shadow:0 0 0 1px #ffffff12 inset;
}
#colorPop .cp-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; }
#colorPop .cp-sw {
width:18px; height:18px; border-radius:4px; cursor:pointer; border:1px solid #00000055;
box-shadow:0 0 0 1px #ffffff10 inset;
}
#colorPop .cp-sw:hover { outline:2px solid var(--accent-lite); outline-offset:1px; }
#colorPop .cp-sw.sel { outline:2px solid #fff; outline-offset:1px; }
.cp-sw.cp-custom { background:conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00) !important; position:relative; }
.cp-sw.cp-custom::after { content:'+'; position:absolute; inset:0; display:flex; align-items:center;
justify-content:center; color:#fff; font-weight:700; font-size:12px; line-height:1;
text-shadow:0 0 2px #000a, 0 0 2px #000a; }
#hsvPop {
position:fixed; z-index:120; display:none; background:var(--bg-pop); border:1px solid var(--border-2);
border-radius:9px; padding:10px; box-shadow:0 10px 34px var(--shadow); width:186px; user-select:none;
}
#hsvPop .hsv-sv {
position:relative; width:100%; height:128px; border-radius:6px; cursor:crosshair; touch-action:none;
background-image:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0));
border:1px solid #00000066;
}
#hsvPop .hsv-sv-cur {
position:absolute; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%);
border:2px solid #fff; box-shadow:0 0 0 1px #0009,0 1px 3px #0009; pointer-events:none;
}
#hsvPop .hsv-hue {
position:relative; width:100%; height:14px; margin-top:11px; border-radius:5px; cursor:pointer; touch-action:none;
background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); border:1px solid #00000066;
}
#hsvPop .hsv-hue-cur {
position:absolute; top:50%; width:6px; height:calc(100% + 6px); border-radius:3px;
transform:translate(-50%,-50%); background:#fff; box-shadow:0 0 0 1px #0009,0 1px 3px #0009; pointer-events:none;
}
#hsvPop .hsv-row { display:flex; align-items:center; gap:7px; margin-top:11px; }
#hsvPop .hsv-prev { width:26px; height:26px; border-radius:5px; flex:0 0 auto;
border:1px solid #00000055; box-shadow:0 0 0 1px #ffffff14 inset; }
#hsvPop .hsv-hash { color:var(--text-dim); font-size:13px; margin-right:-4px; }
#hsvPop .hsv-hex {
flex:1; min-width:0; background:var(--bg-field); border:1px solid var(--border-2); color:var(--text-hi);
border-radius:5px; padding:5px 7px; font-size:13px; outline:none; font-family:inherit; letter-spacing:.6px; text-transform:lowercase;
}
#hsvPop .hsv-hex:focus { border-color:#2f6fdb; }
#hsvPop .hsv-ok {
flex:0 0 auto; width:28px; height:28px; padding:0; border-radius:6px; border:1px solid #2f6fdb;
background:#2f6fdb22; color:var(--accent-lite); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
#hsvPop .hsv-ok:hover { background:#2f6fdb33; }
#hsvPop .hsv-ok svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#exportPop {
position:fixed; z-index:60; display:none; background:var(--bg-pop); border:1px solid var(--border-2);
border-radius:11px; padding:16px 17px; box-shadow:0 10px 34px var(--shadow); width:312px;
font-size:13px; color:var(--text);
}
#exportPop .exp-title { font-weight:600; color:var(--text-hi); margin-bottom:15px; font-size:13.5px; letter-spacing:.3px; padding-right:28px; }
#exportPop .exp-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
#exportPop .exp-lbl { color:var(--text-mut3); white-space:nowrap; font-size:12.5px; }
#exportPop .exp-seg { display:flex; flex:1; border:1px solid var(--border-2); border-radius:8px; overflow:hidden; }
#exportPop .exp-seg button { flex:1; padding:8px 6px; text-align:center; background:var(--bg-control); color:var(--text-mut); border:none; cursor:pointer; font-size:12.5px; transition:background .12s, color .12s; }
#exportPop .exp-seg button:hover { background:var(--bg-control-h); }
#exportPop .exp-seg button + button { border-left:1px solid var(--border-2); }
#exportPop .exp-seg button.sel { background:#2f6fdb22; color:var(--accent-lite); }
#exportPop .exp-seg button.sel:hover { background:#2f6fdb33; }
#exportPop .exp-num { width:66px; background:var(--bg-field2); border:1px solid var(--border-2); color:var(--text-hi);
border-radius:6px; padding:7px 8px; font-size:12.5px; text-align:center; outline:none; }
#exportPop .exp-num:focus { border-color:#2f6fdb; }
#exportPop .exp-px { display:flex; align-items:center; gap:6px; }
#exportPop .exp-px .exp-num { width:58px; }
#exportPop .exp-x { color:var(--text-mut3); }
#exportPop.fmt-pdf .exp-jpg, #exportPop.fmt-svg .exp-jpg, #exportPop.fmt-dxf .exp-jpg { display:none; }
#exportPop.fmt-dxf .exp-bgrow { display:none; }
#exportPop .exp-dxf { display:none; }
#exportPop.fmt-dxf .exp-dxf { display:flex; }
#exportPop.fmt-dxf .exp-dims, #exportPop.fmt-svg .exp-dims,
#exportPop:not(.has-dims) .exp-dims { display:none; }
#exportPop .exp-chk { justify-content:flex-start; gap:9px; cursor:pointer; color:var(--text-mut3); font-size:12.5px; }
#exportPop .exp-chk:hover { color:var(--text-hi); }
#exportPop .exp-chk input { flex:none; width:15px; height:15px; margin:0; accent-color:#2f6fdb; cursor:pointer; }
#exportPop .exp-pdf { display:none; }
#exportPop.fmt-pdf .exp-pdf { display:flex; }
#exportPop .exp-warn { display:none; margin:-9px 0 14px; font-size:11.5px; line-height:1.4; color:#e0a33c; }
#exportPop.fmt-pdf.scale11-over .exp-warn { display:block; }
#exportPop .pdf-prevs { justify-content:center; gap:22px; }
#exportPop .pdf-prev-wrap { display:flex; flex-direction:column; align-items:center; gap:7px; }
#exportPop .pdf-prev { position:relative; box-sizing:content-box; border:2px solid transparent; border-radius:3px; cursor:pointer; overflow:hidden;
box-shadow:0 2px 9px rgba(0,0,0,.45); background:var(--bg-field2); transition:border-color .12s, transform .1s; }
#exportPop .pdf-prev:hover { transform:translateY(-1px); }
#exportPop .pdf-prev.sel { border-color:#2f6fdb; }
#exportPop .pdf-prev canvas { position:static; inset:auto; display:block; cursor:pointer; }
#exportPop .pdf-prev-lbl { font-size:11.5px; color:var(--text-mut3); }
#exportPop .pdf-prev.sel + .pdf-prev-lbl, #exportPop .pdf-prev-wrap:has(.sel) .pdf-prev-lbl { color:var(--accent-lite); }
#exportPop .exp-acts { display:flex; gap:8px; margin-top:6px; }
#exportPop .exp-acts button { flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
padding:10px 12px; background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-hi); border-radius:8px;
cursor:pointer; font-size:13px; transition:background .12s, border-color .12s, color .12s; }
#exportPop .exp-acts button:hover { background:#2f6fdb22; border-color:#2f6fdb; }
#exportPop .exp-acts button svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round; }
#exportPop .exp-acts #expCancel { flex:0 0 auto; padding-left:20px; padding-right:20px; color:var(--text); }
#exportPop .exp-acts #expSave { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
#exportPop .exp-acts #expSave:hover { background:#2f6fdb33; }
#settingsPop {
position:fixed; z-index:60; display:none; background:var(--bg-pop); border:1px solid var(--border-2);
border-radius:11px; padding:13px 14px; box-shadow:0 10px 34px var(--shadow); width:342px; max-width:calc(100vw - 12px);
max-height:calc(100vh - 74px); overflow-y:auto; overscroll-behavior:contain;
font-size:13px; color:var(--text);
}
#settingsPop .exp-title { font-weight:600; color:var(--text-hi); margin-bottom:10px; font-size:13.5px; letter-spacing:.3px; padding-right:28px; }
#settingsPop .exp-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; min-height:28px; }
#settingsPop .exp-row:last-child { margin-bottom:0; }
#settingsPop .exp-lbl { flex:0 0 124px; max-width:124px; color:var(--text-mut3); font-size:12px; line-height:1.25; }
#settingsPop .exp-row > .exp-lbl:only-child { flex:1 1 auto; max-width:none; }
#settingsPop .exp-seg { display:flex; flex:1; min-width:0; border:1px solid var(--border-2); border-radius:7px; overflow:hidden; }
#settingsPop .exp-seg button { flex:1; min-width:0; padding:5px 6px; background:var(--bg-control); color:var(--text-mut); border:none; cursor:pointer; font-size:11.5px; line-height:1.25; text-align:center; transition:background .12s, color .12s; }
#settingsPop .exp-seg button:hover { background:var(--bg-control-h); color:var(--text-hi); }
#settingsPop .exp-seg button + button { border-left:1px solid var(--border-2); }
#settingsPop .exp-seg button.sel { background:#2f6fdb22; color:var(--accent-lite); }
#settingsPop .exp-seg button.sel:hover { background:#2f6fdb33; }
#settingsPop .exp-seg button.set-grid { display:flex; align-items:center; justify-content:center; padding:5px 6px; }
#settingsPop .grid-ico { display:block; width:38px; height:21px; fill:none; stroke:currentColor; stroke-linecap:square; }
#settingsPop .grid-ico .gi-fr { opacity:.45; stroke-width:1; }
#settingsPop .grid-ico .gi-ln { opacity:.8; stroke-width:1; }
#settingsPop .exp-acts { display:flex; justify-content:flex-end; margin-top:10px; }
#settingsPop .exp-acts button { min-width:104px; padding:8px 16px; border-radius:8px; cursor:pointer; font-size:12.5px;
background:#2f6fdb22; border:1px solid #2f6fdb; color:var(--accent-lite); transition:background .12s; }
#settingsPop .exp-acts button:hover { background:#2f6fdb33; }
#settingsPop #langSeg { padding:0; }
#settingsPop #langSeg select.set-langsel {
flex:1; width:100%; padding:5px 28px 5px 8px; background-color:var(--bg-control); color:var(--text-hi);
border:none; cursor:pointer; font-size:11.5px; line-height:1.35; outline:none;
appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b93a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 9px center;
}
#settingsPop #langSeg select.set-langsel:hover { background-color:var(--bg-control-h); }
#settingsPop #langSeg select.set-langsel option { background:var(--bg-control); color:var(--text-hi); }
#settingsPop .set-spin { display:flex; flex:1; min-width:0; align-items:stretch; height:26px; }
#settingsPop .set-spin input {
flex:1; min-width:0; padding:4px 8px; background:var(--bg-control); color:var(--text-hi); border:1px solid var(--border-2);
border-right:none; border-radius:7px 0 0 7px; font-size:11.5px; line-height:1.2; outline:none; box-sizing:border-box;
}
#settingsPop .set-spin input:focus { border-color:#2f6fdb; background:var(--bg-control-h); }
#settingsPop .set-spin-btns { display:flex; flex-direction:column; flex:0 0 auto; }
#settingsPop .set-spin-btns button { padding:0; width:20px; flex:1 1 0; min-height:0;
background:var(--bg-control); border:1px solid var(--border-2); color:var(--text-mut2); border-radius:0;
font-size:7px; line-height:1; display:flex; align-items:center; justify-content:center;
cursor:pointer; user-select:none; }
#settingsPop .set-spin-btns button:first-child { border-top-right-radius:7px; border-bottom:none; }
#settingsPop .set-spin-btns button:last-child { border-bottom-right-radius:7px; }
#settingsPop .set-spin-btns button:hover { background:var(--bg-control-h2); border-color:var(--border-3); color:var(--text-hi); }
#settingsPop .set-spin-btns button:active { background:#2f6fdb; border-color:#2f6fdb; color:#fff; }
#settingsPop .set-weight { display:flex; flex:1; min-width:0; align-items:center; gap:9px; }
#settingsPop .set-weight input[type=range] { flex:1; min-width:0; accent-color:var(--accent-lite); height:16px; cursor:pointer; }
#settingsPop .set-weight .wval { flex:0 0 auto; min-width:26px; text-align:right; font-size:12px; color:var(--text-hi);
font-variant-numeric:tabular-nums; }
#settingsPop .set-dimdec { display:flex; flex:1; min-width:0; align-items:center; gap:12px; }
#settingsPop .set-dimdec input[type=range] { flex:0 0 auto; width:92px; min-width:0;
accent-color:var(--accent-lite); height:16px; cursor:pointer; }
#settingsPop .set-dimdec .dval { flex:0 0 auto; font-size:12px; color:var(--text-hi); font-variant-numeric:tabular-nums; }
#aboutPage { display:none; position:fixed; inset:0; z-index:9000; background:var(--overlay-72); overflow-y:auto; padding:30px 14px; }
#aboutPage .about-box { position:relative; max-width:720px; margin:0 auto; background:var(--bg-surface2); border:1px solid var(--border-2); border-radius:12px; padding:28px 30px 34px; color:var(--text-b); font-size:14px; line-height:1.6; }
#aboutPage h1 { font-size:19px; color:var(--text-hi); margin:0 0 12px; padding-right:34px; }
#aboutPage h2 { font-size:15px; color:var(--accent-lite); margin:20px 0 8px; }
#aboutPage h3 { font-size:13.5px; color:var(--text-hi); margin:14px 0 4px; }
#aboutPage p, #aboutPage li { margin:0 0 6px; }
#aboutPage ul { padding-left:20px; margin:0 0 8px; }
#aboutPage a { color:var(--accent-lite); }
#aboutPage .pop-close { top:10px; right:10px; width:32px; height:32px; border-radius:8px; background:var(--bg-control); }
#aboutPage .pop-close::before, #aboutPage .pop-close::after { width:14px; height:1.9px; }
#aboutPage .pop-close:hover { background:var(--bg-control-h); color:#fff; }
canvas { touch-action:none; }
#mobEsc, #mobEnter, #mobTools { display:none; }
body.mob { position:fixed; left:0; top:0; right:0; height:100dvh; }
body.mob button, body.mob .tool { touch-action:manipulation; }
body.mob #topbar { padding:0; }
body.mob #topbarScroll { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
body.mob #topbarScroll::-webkit-scrollbar { display:none; }
body.mob #topbarInner { gap:10px; padding:0 8px 0 0; }
body.mob #topbar #brandwrap { padding-left:8px; margin-right:10px; }
body.mob #topbarInner > * , body.mob #topbar .topgroup > * { flex:0 0 auto; }
body.mob #topbar .topsep { margin:0 4px; }
body.mob #topbar #brand { font-size:13px; }
body.mob #topbar #brandlogo { height:28px; width:auto; }
body.mob #main { position:relative; }
body.mob #toolbar {
position:absolute; left:0; top:0; bottom:0; z-index:40;
width:128px; grid-template-columns:repeat(2,48px);
box-shadow:8px 0 24px var(--shadow-35);
transform:translateX(-108%); transition:transform .18s ease;
}
body.mob #toolbar.open { transform:translateX(0); }
body.mob #toolbar.pinned { transition:none; }
body.mob #toolbar .tool { width:48px; height:48px; }
body.mob #toolbar .tool svg { width:24px; height:24px; }
body.mob #toolbar { scrollbar-width:none; scrollbar-gutter:auto; }
body.mob #toolbar::-webkit-scrollbar { display:none; }
body.mob #toolbar::after {
content:''; position:absolute; right:3px; width:4px; border-radius:2px;
top:var(--sbTop,0px); height:var(--sbH,0px);
background:var(--border-2); pointer-events:none;
}
body.mob #layerpanel {
position:absolute; top:0; right:0; bottom:0; z-index:35;
width:min(280px, 78vw); flex:0 0 auto;
box-shadow:-8px 0 24px var(--shadow-35);
}
body.mob #layerpanel.collapsed { width:0; border-left-width:0; box-shadow:none; }
body.mob #layerpanel, body.mob #macropanel, body.mob #toolbar,
body.mob #layerlist, body.mob #macrolist { overscroll-behavior:contain; }
body.mob #macropanel {
left:0; z-index:34;
width:min(280px, 78vw);
box-shadow:8px 0 24px var(--shadow-35);
}
body.mob #macropanel.collapsed { box-shadow:none; }
body.mob #cmdbar { height:46px; gap:6px; padding:0 8px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
body.mob #cmdbar::-webkit-scrollbar { display:none; }
body.mob #cmdbar > * { flex:0 0 auto; }
body.mob #cmdbar input { font-size:16px; height:34px; width:76px; }
body.mob #cmdbar #inN { width:54px; }
body.mob #cmdbar #cmdApply { height:34px; padding:0 14px; }
body.mob #cmdbar #cmdmode { display:none; }
body.mob #cmdbar #hint { flex:0 0 auto; max-width:60vw; }
body.mob #statusbar #statusHints { display:none; }
body.mob #textbar, body.mob #mostikbar, body.mob #splinebar, body.mob #nodebar, body.mob #selectbar,
body.mob #ellipsebar, body.mob #polybar, body.mob #circlebar, body.mob #arcbar { overflow-x:auto; overflow-y:hidden; height:52px; scrollbar-width:none; }
body.mob #textbar > *, body.mob #mostikbar > *, body.mob #splinebar > *, body.mob #nodebar > *, body.mob #selectbar > *,
body.mob #ellipsebar > *, body.mob #polybar > *, body.mob #circlebar > *, body.mob #arcbar > * { flex:0 0 auto; }
body.mob #textbar input, body.mob #textbar textarea, body.mob #mostikbar input, body.mob #polybar input { font-size:16px; }
body.mob #textbar .tb-hint, body.mob #mostikbar .tb-hint, body.mob #splinebar .tb-hint, body.mob #nodebar .tb-hint, body.mob #selectbar .tb-hint,
body.mob #ellipsebar .tb-hint, body.mob #polybar .tb-hint, body.mob #circlebar .tb-hint, body.mob #arcbar .tb-hint { display:none; }
body.mob .modalbox { max-width:94vw; max-height:86vh; overflow:auto; }
body.mob #ctxMenu .ci { padding:12px 16px; font-size:15px; }
body.mob #menuPop .menu-item { padding:12px 14px; font-size:15px; }
body.mob #mobEsc, body.mob #mobEnter {
display:flex; position:absolute; z-index:30;
width:46px; height:46px; border-radius:50%;
align-items:center; justify-content:center;
background:var(--bg-pop-a); border:1px solid var(--border-2); color:var(--text);
font-size:20px; line-height:1; cursor:pointer;
box-shadow:0 4px 14px var(--shadow-40); backdrop-filter:blur(2px);
}
body.mob #mobEsc   { right:12px; bottom:14px; }
body.mob #mobEnter { right:12px; bottom:70px; color:var(--green-lite); }
body.mob #mobEsc:active, body.mob #mobEnter:active { background:var(--bg-control-h); }
body.mob #zoombar { right:auto; left:10px; bottom:10px; }
body.mob #minimap { right:auto; left:10px; bottom:46px; }
body.mob #zoombar button { height:32px; min-width:32px; }
body.mob #mobTools {
display:flex; position:absolute; z-index:41;
left:0; top:12px; width:26px; height:58px; padding:0;
flex-direction:column; align-items:center; justify-content:center; gap:5px;
background:var(--bg-surface); border:1px solid var(--border-1); border-left:none;
border-radius:0 9px 9px 0; color:var(--text-mut); cursor:pointer;
box-shadow:4px 2px 10px var(--shadow-35);
transition:left .18s ease, background .12s, border-color .12s, color .12s;
}
body.mob #mobTools .mt-arrow { width:15px; height:15px; flex:0 0 auto; fill:currentColor; stroke:none; transition:transform .18s ease; }
body.mob #mobTools .mt-lock { display:none; width:13px; height:13px; flex:0 0 auto;
fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
body.mob #toolbar.open ~ #mobTools { left:128px; }
body.mob #toolbar.open ~ #mobTools .mt-arrow { transform:rotate(180deg); }
body.mob #toolbar.open ~ #mobTools .mt-lock { display:block; }
body.mob #mobTools.on { background:#2f6fdb22; border-color:#2f6fdb; color:var(--accent-lite); }
body.mob #mobTools.on .mt-lock { opacity:1; }
body.mob #mobTools:active { background:var(--bg-control-h); }