:root{
  --bg:#eef2f5;--panel:#fff;--line:#e3e8ed;--line2:#eef1f4;--ink:#1d2a36;--ink2:#4a5a69;--muted:#8593a0;
  --accent:#0f7a8f;--accent-soft:#e2f4f6;--accent-ink:#075e6f;--warn-bg:#fff7e8;--warn:#8a6420;--danger:#c0392b;
  --c0:#2370dd;--c1:#e7861b;--c2:#b74383;--c3:#18a4ae;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:13px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px 10px;transition:background .12s,border-color .12s,color .12s}
button:hover{border-color:#b9c9d4;background:#f6fafc}
button.active{color:var(--accent-ink);border-color:#8fcdd8;background:var(--accent-soft);font-weight:600}
button:disabled{opacity:.45;cursor:default}
.primary{color:#fff;background:var(--accent);border-color:var(--accent);font-weight:600}
.primary:hover{background:#0b6778;border-color:#0b6778;color:#fff}
.secondary{background:#f8fafb}
.danger-text{color:var(--danger)}
.wide{width:100%}
.hidden{display:none!important}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.layout{display:grid;grid-template-columns:270px minmax(360px,1fr) 330px;height:100vh;min-height:520px}
.sidebar,.inspector{background:var(--panel);display:flex;flex-direction:column;min-height:0;z-index:2}
.sidebar{border-right:1px solid var(--line)}
.inspector{border-left:1px solid var(--line)}

.brand{padding:16px;display:flex;gap:11px;align-items:center;border-bottom:1px solid var(--line2)}
.brand strong{display:block;font-size:15px;line-height:1.2}
.brand small{display:block;color:var(--muted);margin-top:3px;font-size:11px}
.mark{background:linear-gradient(140deg,#13889e,#0b5e70);color:#fff;border-radius:10px;width:34px;height:34px;display:grid;place-items:center}
.mark svg{fill:#fff;stroke:none;width:18px;height:18px}

.section{padding:13px 16px;border-bottom:1px solid var(--line2)}
.section.grow{flex:1;display:flex;flex-direction:column;min-height:120px;padding-bottom:6px}
.section-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.section-title span{font-weight:500;letter-spacing:0;text-transform:none}

.layer{display:grid;grid-template-columns:auto 10px 1fr auto;align-items:center;gap:8px;padding:4px 0;font-size:12px;color:var(--ink2);cursor:pointer}
.layer input{accent-color:var(--accent);margin:0}
.layer .len{color:var(--muted);font-variant-numeric:tabular-nums}
.swatch{width:10px;height:10px;border-radius:3px;flex:none}

#search{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:#f8fafb}
#search:focus{outline:2px solid #a9dde5;border-color:#5fb3c2;background:#fff}
.object-list{overflow:auto;flex:1;margin:8px -8px 0;padding:0 8px}
.group-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--ink2);padding:8px 4px 3px;position:sticky;top:0;background:#fff}
.group-head .len{margin-left:auto;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.object-item{display:flex;align-items:center;gap:7px;border:0;background:transparent;width:100%;text-align:left;padding:5px 6px 5px 20px;border-radius:6px;color:var(--ink2);font-size:12px}
.object-item:hover{background:#f1f6f8}
.object-item.selected{background:var(--accent-soft);color:var(--accent-ink)}
.object-item .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.object-item .tiny{font-size:10.5px;color:var(--muted);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.object-item .ico{width:14px;height:14px;opacity:.75}

.file-actions{display:flex;flex-direction:column;gap:6px;padding-bottom:14px}
.file-actions button{font-size:12px}
.btn-row{display:flex;gap:6px}
.btn-row>button{flex:1}

.main{position:relative;min-width:0;background:radial-gradient(1200px 800px at 50% 30%,#fbfdfe,#e6eef2)}
#viewport{position:absolute;inset:0}
#viewport canvas{display:block;width:100%;height:100%;outline:none}
#viewport.grab canvas{cursor:grab}#viewport.grabbing canvas{cursor:grabbing}#viewport.cross canvas{cursor:crosshair}

.toolbar,.viewbar{position:absolute;top:12px;display:flex;gap:4px;padding:5px;background:#ffffffe8;backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 24px #1b33470f;z-index:3}
.toolbar{left:50%;transform:translateX(-50%)}
.toolbar button{display:flex;align-items:center;gap:6px;border-color:transparent;background:transparent;padding:6px 10px;font-size:12px}
.toolbar button:hover{background:#f1f6f8}
.toolbar button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.toolbar .sep{width:1px;background:var(--line);margin:4px 3px}
.viewbar{right:12px;top:auto;bottom:44px}
.viewbar button{font-size:12px;padding:6px 10px;border-color:transparent;background:transparent}
.viewbar button:hover{background:#f1f6f8}
.viewbar button.toggle.active{background:var(--accent-soft);color:var(--accent-ink);border-color:#bfe3e9}

.statusbar{position:absolute;left:0;right:0;bottom:0;height:34px;display:flex;align-items:center;gap:9px;padding:0 14px;background:#ffffffd9;backdrop-filter:blur(10px);border-top:1px solid var(--line);font-size:12px;color:var(--ink2);z-index:3;white-space:nowrap;overflow:hidden}
.statusbar b{color:var(--ink)}
#status{overflow:hidden;text-overflow:ellipsis}
.coords{margin-left:auto;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.live-dot{width:7px;height:7px;border-radius:50%;background:#21b9a6;flex:none}

.hud{position:absolute;z-index:4;pointer-events:none;background:#1d2a36;color:#fff;border-radius:9px;padding:7px 10px;font-size:12px;line-height:1.45;box-shadow:0 8px 24px #0003;transform:translate(16px,16px);white-space:nowrap;font-variant-numeric:tabular-nums}
.hud b{font-size:13px}
.hud .plus{color:#ffb07a}.hud .minus{color:#7de0c6}.hud .muted{color:#a9b6c2}
.seg-labels{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.seg-label{position:absolute;transform:translate(-50%,-50%);background:#ffffffe6;border:1px solid #cfdbe2;color:#23394a;border-radius:5px;padding:1px 5px;font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.seg-label.active{background:#1d2a36;color:#fff;border-color:#1d2a36}

.tabs{display:flex;gap:4px;padding:12px 14px 0;border-bottom:1px solid var(--line2)}
.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:8px 10px 9px;color:var(--muted);font-weight:600}
.tabs button.active{color:var(--accent-ink);border-bottom-color:var(--accent);background:transparent}
.tab-body{flex:1;min-height:0;overflow:auto;padding:16px}

.empty{padding:16px;background:#f6f8fa;border:1px dashed #d9e3e8;border-radius:10px;color:var(--ink2);font-size:12px;line-height:1.65}
.empty b{color:var(--ink)}
.empty kbd,.kbd{display:inline-block;border:1px solid #cfd9e0;border-bottom-width:2px;border-radius:4px;padding:0 4px;font-size:10.5px;background:#fff;font-family:inherit}
.prop-title{font-size:17px;line-height:1.3;font-weight:700;display:flex;align-items:center;gap:8px}
.prop-title .code{font-size:11px;font-weight:700;color:#fff;border-radius:5px;padding:2px 6px}
.prop-sub{font-size:12px;color:var(--muted);margin:4px 0 12px}
.prop-block{padding:12px 0;border-top:1px solid var(--line2)}
.prop-block h3{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 9px;font-weight:700}
.field{display:grid;grid-template-columns:118px 1fr auto;align-items:center;gap:8px;margin:7px 0;font-size:12px}
.field label{color:var(--ink2)}
.field input,.field select{width:100%;min-width:0;border-radius:7px;border:1px solid #dbe3e8;padding:6px 7px;background:#fff}
.field input:focus,.field select:focus{outline:2px solid #a9dde5;border-color:#5fb3c2}
.field small{color:var(--muted);min-width:18px}
.big-stat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 6px}
.big-stat div{background:#f5f8fa;border-radius:9px;padding:9px 10px}
.big-stat b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.big-stat span{font-size:11px;color:var(--muted)}
.big-stat .hl{background:var(--accent-soft)}.big-stat .hl b{color:var(--accent-ink)}
.seg-list{display:flex;flex-wrap:wrap;gap:4px}
.seg-chip{font-size:11px;padding:2px 7px;border-radius:5px;background:#f1f5f7;color:var(--ink2);border:1px solid transparent;font-variant-numeric:tabular-nums;cursor:pointer}
.seg-chip.active{background:#1d2a36;color:#fff}
.note{padding:9px 10px;color:#5d6b77;background:#f5f7f9;border-radius:8px;font-size:11.5px;line-height:1.5;margin-top:8px}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.badge{display:inline-block;font-size:10.5px;font-weight:600;border-radius:5px;padding:1px 6px;background:#eef3f6;color:var(--ink2)}
.badge.dim{background:#e3f5ea;color:#1e7a45}.badge.meas{background:#eef3fb;color:#34598f}.badge.d3{background:#fff2e3;color:#99601a}.badge.legacy{background:#fdeaea;color:#a83a32}
.inspector .row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.inspector .row button{flex:1;font-size:12px;white-space:nowrap}
.link-list{display:flex;flex-direction:column;gap:3px}
.link-list button{display:flex;justify-content:space-between;text-align:left;font-size:12px;padding:6px 8px;background:#f7f9fa;border-color:transparent}
.link-list button span{color:var(--muted);font-variant-numeric:tabular-nums}

table.bom{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
table.bom th{font-size:10.5px;color:var(--muted);font-weight:600;text-align:right;padding:5px 4px;border-bottom:1px solid var(--line)}
table.bom th:first-child,table.bom td:first-child{text-align:left}
table.bom td{padding:6px 4px;border-bottom:1px solid var(--line2);text-align:right}
table.bom td.buy{font-weight:700;color:var(--accent-ink)}
table.bom tr.circuit td{font-size:11.5px;color:var(--ink2);padding:4px}
table.bom tr.circuit:hover td{background:#f5f9fa;cursor:pointer}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.settings label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--ink2)}
.settings input{border:1px solid #dbe3e8;border-radius:7px;padding:6px 7px;width:100%}

.totals{border-top:1px solid var(--line);padding:11px 14px 13px;background:#fbfcfd}
.totals .t-head{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.totals .t-row{display:grid;grid-template-columns:10px 1fr auto auto;gap:8px;align-items:center;font-size:12px;padding:2px 0;font-variant-numeric:tabular-nums}
.totals .t-row .g{color:var(--muted)}
.totals .t-row b{min-width:48px;text-align:right}
.flash{animation:flash .6s ease}
@keyframes flash{0%{background:#fff3c4}100%{background:transparent}}

@media(max-width:1180px){.layout{grid-template-columns:230px 1fr 300px}.toolbar button span{display:none}}
@media(max-width:820px){
  html,body{overflow:auto}
  .layout{grid-template-columns:1fr;grid-template-rows:70vh auto auto;height:auto}
  .main{grid-row:1;height:70vh}.sidebar{grid-row:3;max-height:none}.inspector{grid-row:2;max-height:none}
  .toolbar{left:8px;transform:none;overflow:auto;max-width:calc(100% - 16px)}
}

.totals .t-sum{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;color:var(--ink2);font-variant-numeric:tabular-nums}
.totals .t-sum:first-of-type{border-top:1px solid var(--line);margin-top:6px;padding-top:7px}
.totals .t-sum.total{font-size:14px;color:var(--ink)}.totals .t-sum.total b{color:var(--accent-ink)}
table.bom input.price{width:72px;border:1px solid #dbe3e8;border-radius:6px;padding:3px 5px;text-align:right;font-variant-numeric:tabular-nums}
table.bom tr.grp td{background:#f5f8fa;padding-top:8px}
table.bom tr.total td{font-size:13px}
.save-state{font-size:11.5px;color:var(--muted);text-align:center;margin:-1px 0 2px}
.save-state.dirty{color:#b0621a;font-weight:600}.save-state.err{color:var(--danger)}
#save.dirty{background:#d9731a;border-color:#d9731a}#save.dirty:hover{background:#bf6314}
.modal-wrap{position:fixed;inset:0;z-index:50;background:#1d2a3666;display:grid;place-items:center;padding:16px}
.modal{background:var(--panel);border-radius:12px;padding:18px;max-width:420px;width:100%;box-shadow:0 20px 50px #0004;display:flex;flex-direction:column;gap:12px}
.modal p{margin:0;line-height:1.5;color:var(--ink)}
.modal input{border:1px solid var(--line);border-radius:8px;padding:8px}
.modal-row{display:flex;gap:8px;justify-content:flex-end}
.primary.danger{background:var(--danger);border-color:var(--danger)}