body.pg{min-width:0}
.pg-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:8px 16px;background:rgba(23,25,28,.97);border-bottom:1px solid var(--line);flex-wrap:wrap}
.pg-top .brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text);text-decoration:none}
.pg-top .crumb{color:var(--muted);font-weight:600}
.pg-top .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:7px 12px;font-size:14px;line-height:1.2}
.btn:hover{border-color:var(--cyan)}
.btn.sm{padding:4px 9px;font-size:12.5px}
.btn.run{background:#1f7a47;border-color:#34D17A;color:#dcfce7;font-weight:700}
.btn.run.on{background:#7a1519;border-color:#E5484D;color:#fee2e2}
select.btn{padding:7px 8px}

.pg-grid{display:block;padding:10px}
.palette{background:rgba(23,25,28,.97);border:1px solid var(--line);border-radius:12px;padding:8px}
.pal-group{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:10px 4px 6px;font-weight:600}
.pal-group:first-child{margin-top:2px}
.pal-item{display:flex;align-items:center;gap:8px;width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:4px 6px;color:var(--text);font-size:12.5px;margin-bottom:5px;text-align:left;cursor:grab}
.pal-item:hover{border-color:var(--cyan);background:#26292e}
.pal-item svg{width:46px;height:36px;flex:none;pointer-events:none}
.pal-item svg text{font-family:var(--mono)}
.pal-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 2px 4px;font-weight:700;font-size:13px}
.min-btn{background:var(--panel2);border:1px solid var(--line);color:#CFCFCB;border-radius:6px;width:26px;height:24px;padding:0;font-size:15px;line-height:1;flex:none}
.min-btn:hover{border-color:var(--cyan);color:#fff}
.side-head{display:flex;align-items:center;justify-content:space-between}
.layout-tg{display:flex;gap:4px}
.layout-tg .btn.on{border-color:#F5B301;background:rgba(245,179,1,.13)}

.bench-wrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;min-width:0}
.bench-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:6px;min-height:30px}
.swatches{display:flex;align-items:center;gap:5px}
.swatches span{margin-right:2px}
.swatches button{width:20px;height:20px;border-radius:50%;border:2px solid #101214;padding:0;font-size:10px;font-weight:700;color:#101214;box-shadow:0 0 0 1px var(--line)}
.swatches button.auto{background:conic-gradient(#dc2626 0 33%,#2563eb 0 66%,#111827 0)!important;color:#fff}
.swatches button.on{box-shadow:0 0 0 2px var(--cyan)}
/* the status line gets its own fixed one-line row: its text changes on hover/select, and letting it wrap
   moved the panel up and down under the mouse, which changed the text again (the "shaking" loop) */
.meter{font-family:var(--mono);color:#E8E6E1;font-size:12px;flex:0 0 100%;order:10;height:18px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.meter .v24{color:#f87171}.meter .v0{color:#60a5fa}
.bench-view{height:66vh;min-height:320px;max-height:1400px;resize:vertical;overflow:hidden;border-radius:8px;position:relative}
#bench{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;background:#CFCABD}
#bench .bg{cursor:grab}
#bench.panning,#bench.panning *{cursor:grabbing!important}
.zoom{display:flex;align-items:center;gap:4px}
.zoom .btn.sm{min-width:28px;padding:3px 8px}
#zoomPct{font-family:var(--mono);font-size:12px;color:#E8E6E1;min-width:42px;text-align:center}
#bench text{font-family:var(--mono);pointer-events:none}
#bench [data-cid]{cursor:move}
#bench .act{cursor:pointer}
#bench .term{cursor:crosshair}
#bench .term .tr{fill:#e5e7eb;stroke:#374151;stroke-width:1.6}
#bench .term.hov .tr,#bench .term.pend .tr{fill:#F5B301;stroke:#8a6400;stroke-width:2.5}
#bench .term.v24 .tr{stroke:#dc2626;stroke-width:3}
#bench .term.v0 .tr{stroke:#2563eb;stroke-width:3}
#bench .term text{font-size:8.5px;fill:#E8E6E1;text-anchor:middle;font-weight:700;paint-order:stroke;stroke:#202328;stroke-width:2.5px}
#bench .wire{fill:none;stroke-width:3.4;stroke-linecap:round;pointer-events:none}
#bench .whit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer;pointer-events:stroke}
#bench g.w.live .wire{filter:drop-shadow(0 0 2.5px rgba(250,204,21,.95))}
#bench g.w.sel .wire{stroke-dasharray:9 5;stroke-width:4.5}
#bench g.w.short .wire{stroke:#E5484D!important;stroke-width:5;animation:pgblink .4s steps(2) infinite}
@keyframes pgblink{50%{opacity:.25}}
.bench-tips{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin-top:6px}
.bench-tips b{color:#CFCFCB;font-weight:600}

.side{background:rgba(23,25,28,.97);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}
table.mon{width:100%;border-collapse:collapse;font-size:12px}
table.mon th{text-align:left;color:var(--muted);font-weight:600;padding:2px 4px;border-bottom:1px solid var(--line)}
table.mon td{padding:2px 4px;border-bottom:1px solid #22262b}
table.mon td.addr{font-family:var(--mono);color:#D9D6CE;width:52px}
table.mon td:last-child{width:18px}
.chal{margin:0;padding-left:18px;font-size:13px;color:#B9BBB8}
.chal li{margin-bottom:7px}

.ladder-wrap{margin:0 10px 40px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.lad-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.lad-head h2{margin:0;font-size:20px}
.lad-hint{color:#9AA0A6;font-size:13px;transition:color .2s}
.lad-hint.flash{color:var(--amber)}
.lad-tools{display:flex;flex-wrap:wrap;gap:6px}
.tool{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel2);border:1px solid var(--line);color:#CFCFCB;border-radius:8px;padding:5px 6px;font-size:11px;min-width:58px}
.tool svg{width:40px;height:20px}
.tool:hover{border-color:#F5B301}
.tool.on{border-color:var(--cyan);background:rgba(245,179,1,.13);color:#fff}
.propbar{margin:10px 0 6px;min-height:42px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#101214;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px}
.propbar label{display:flex;align-items:center;gap:6px;color:var(--muted)}
.propbar input{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:5px 8px;font-family:var(--mono);width:96px;font-size:13px}
.propbar input.bad{border-color:var(--red);box-shadow:0 0 0 2px rgba(239,68,68,.25)}
.propbar .phelp{color:#9AA0A6;flex:1;min-width:200px}
.propbar .muted{color:var(--muted)}
#rungs{overflow-x:auto}
.rung-card{border-top:1px solid var(--line);padding:6px 0;min-width:max-content}
.rung-head{display:flex;gap:6px;align-items:center;max-width:914px}
.rung-head .rn{font-family:var(--mono);color:var(--muted);font-size:12px;width:36px}
.rung-head input{flex:1;background:transparent;border:1px solid transparent;border-radius:6px;color:#9AA0A6;font-style:italic;font-size:13px;padding:3px 6px}
.rung-head input:hover,.rung-head input:focus{border-color:var(--line);outline:none}
.rung-head button{background:none;border:1px solid transparent;color:var(--muted);border-radius:6px;padding:1px 8px;font-size:14px}
.rung-head button:hover{border-color:var(--line);color:var(--text)}
.rsvg{display:block;cursor:pointer}
.rsvg text{font-family:var(--mono);pointer-events:none}
#addRung{margin-top:8px}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#202328;border:1px solid var(--amber);color:var(--text);padding:10px 16px;border-radius:10px;z-index:60;max-width:min(92vw,660px);font-size:14px;box-shadow:0 10px 30px #000a;transition:opacity .3s}
.modal{position:fixed;inset:0;background:rgba(3,6,10,.72);z-index:70;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:980px;width:100%;max-height:90vh;overflow:auto}
.modal-box h2{margin:0 0 6px}
.modal-box>p{color:var(--muted);margin:0 0 14px}
.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin-bottom:16px}
.help-grid h3{margin:0 0 6px;font-size:15px;color:var(--cyan)}
.help-grid ul{margin:0;padding-left:18px;font-size:13.5px;color:#C6C7C4}
.help-grid li{margin-bottom:6px}

/* ---- ladder editor v2 ---- */
.lad-tools{align-items:stretch}
.tgroup{align-self:center;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);padding:0 2px}
.tsep{width:1px;background:var(--line);margin:2px 4px}
.tool{position:relative;cursor:grab;touch-action:none;user-select:none}
.tool.cmd{cursor:pointer}
.tool kbd{position:absolute;top:2px;right:3px;font-size:9px;font-family:var(--mono);color:#6b7178;background:none;border:none;padding:0}
#propbar{display:block;line-height:1.6;color:#B9BBB8}
#propbar code,#propbar kbd,.lad-hint kbd{font-family:var(--mono);font-size:12px;background:#202328;border:1px solid #2E3238;border-radius:4px;padding:0 5px;color:#E8E6E1}
.rung-card{border:1px solid transparent;border-top-color:var(--line);border-radius:8px;padding:6px 4px;transition:border-color .15s,background .15s}
.rung-card.sel{border-color:#F5B301;background:rgba(245,179,1,.04)}
.rung-head .rn{width:auto;min-width:78px;font-weight:600}
.rung-card.sel .rung-head .rn{color:var(--cyan)}
.rung-body{overflow-x:auto}
.rsvg{cursor:default;touch-action:none;user-select:none}
.lad-ed{position:fixed;z-index:80;display:none;background:#101214;color:#fff;border:2px solid var(--cyan);border-radius:6px;padding:3px 8px;font:600 13px var(--mono);text-align:center;box-shadow:0 6px 20px #000a;outline:none}
.lad-ghost{position:fixed;z-index:90;display:none;align-items:center;gap:6px;pointer-events:none;background:rgba(245,179,1,.13);border:1px solid var(--cyan);color:#fff;border-radius:8px;padding:4px 10px;font-size:12px;box-shadow:0 8px 24px #000a}
.lad-ghost svg{width:34px;height:17px}
.lad-marker{position:fixed;z-index:85;display:none;pointer-events:none;background:var(--cyan);border-radius:3px;box-shadow:0 0 10px var(--cyan)}
.lad-marker.wrap{background:rgba(245,179,1,.15);border:2px dashed var(--cyan);box-shadow:none;border-radius:8px}
body.lad-dragging,body.lad-dragging *{cursor:grabbing!important}
.lad-hint.flash{animation:hintflash 1.2s ease}
@keyframes hintflash{0%{color:#F5B301}100%{color:#9AA0A6}}
/* ---- floating popups over the wiring panel ---- */
.pop{position:absolute;top:10px;z-index:6;display:none;max-height:calc(100% - 20px);overflow:auto;backdrop-filter:blur(6px);box-shadow:0 12px 36px rgba(0,0,0,.55);animation:popin .14s ease-out}
.pop.open{display:block}
.palette.pop{left:10px;width:218px}
.side.pop{right:10px;width:300px}
@keyframes popin{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:760px){.palette.pop{width:calc(100% - 20px)}.side.pop{width:calc(100% - 20px)}}
.pal-head{position:sticky;top:-8px;z-index:1;background:rgba(23,25,28,.99);padding:4px 2px;margin:-8px -2px 4px}

/* ---- draggable popups, rename box, mains potentials ---- */
.pal-head,.side-head{cursor:move;user-select:none}
.pal-head::before,.side-head::before{content:"\2807\2807";color:#454B53;font-size:11px;letter-spacing:-3px;margin-right:6px}
.pop.dragging{opacity:.92;box-shadow:0 18px 44px rgba(0,0,0,.65);transition:none}
.ren-ed{position:fixed;z-index:80;display:none;width:150px;background:#101214;color:#fff;border:2px solid var(--cyan);border-radius:6px;padding:3px 8px;font:700 13px var(--mono);text-align:center;box-shadow:0 6px 20px #000a;outline:none}
#bench .term.vac .tr{stroke:#f97316;stroke-width:3}
#bench .term.vpe .tr{stroke:#65a30d;stroke-width:3}
#bench g.w.live.ac .wire{filter:drop-shadow(0 0 3px rgba(249,115,22,.95))}
.meter .vac{color:#fb923c}.meter .vpe{color:#84cc16}

/* ---- ladder toolbar + info bar stay pinned under the top bar while scrolling ---- */
.lad-sticky{position:sticky;top:var(--toph,52px);z-index:20;background:var(--panel);margin:-12px -12px 0;padding:12px 12px 4px;border-radius:12px 12px 0 0;transition:box-shadow .15s}
.lad-sticky.stuck{border-radius:0;box-shadow:0 10px 18px -8px rgba(0,0,0,.7);border-bottom:1px solid var(--line)}
.lad-sticky .propbar{margin-bottom:0}
#bench .wbox{cursor:grab}

/* ---- terminal tooltip ---- */
.term-tip{position:fixed;z-index:95;max-width:300px;pointer-events:none;background:#101214;border:1px solid var(--cyan);border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.45;color:#CFCFCB;box-shadow:0 10px 28px rgba(0,0,0,.6)}
.term-tip .tt-head{font-family:var(--mono);font-size:12px;color:#E8E6E1;margin-bottom:3px}
.term-tip .tt-id{color:#F5B301}
.term-tip .tt-desc{color:#E8E6E1}
.term-tip .tt-now{margin-top:4px;padding-top:4px;border-top:1px solid #2E3238;font-family:var(--mono);font-size:11.5px;color:#9AA0A6}
.term-tip .v24{color:#f87171}.term-tip .v0{color:#60a5fa}.term-tip .vac{color:#fb923c}.term-tip .vpe{color:#84cc16}
.term-tip .tt-dim{color:#9AA0A6;font-size:11.5px;margin-top:3px}

/* ---- part help: hover button, palette "?" and the popup ---- */
#bench .help-btn{cursor:pointer}
#bench .help-btn:hover circle{fill:#8a6400}
.term-tip .tt-help{margin-top:4px;color:#F5B301;font-size:11.5px}
.pal-item{position:relative}
.pal-help{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:rgba(245,179,1,.13);border:1px solid #F5B301;color:#F5B301;font:700 11px/16px var(--mono);text-align:center;font-style:normal;opacity:0;transition:opacity .12s;cursor:pointer}
.pal-item:hover .pal-help{opacity:1}
.pal-help:hover{background:#b88600;color:#fff}
.help-box{max-width:1080px;padding:18px 20px}
.hb-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.hb-icon{width:74px;height:60px;flex:none;background:#CFCABD;border-radius:8px;padding:4px}
.hb-icon svg{width:100%;height:100%}
.hb-icon svg text{font-family:var(--mono)}
.hb-head h2{margin:0 0 4px;font-size:20px}
.hb-sub{color:#C6C7C4;font-size:14px;max-width:760px}
.hb-close{margin-left:auto;width:32px;height:30px;font-size:20px}
.hb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:18px}
@media (max-width:900px){.hb-grid{grid-template-columns:minmax(0,1fr)}}
.hb-text h3,.hb-demo h3{margin:12px 0 6px;font-size:14px;color:var(--cyan);text-transform:uppercase;letter-spacing:.8px}
.hb-text h3:first-child,.hb-demo h3:first-child{margin-top:0}
.hb-text p,.hb-text li{font-size:14px;color:#CFCFCB;line-height:1.55}
.hb-text ol,.hb-text ul{margin:0;padding-left:20px}
.hb-text li{margin-bottom:4px}
table.hb-terms{width:100%;border-collapse:collapse;font-size:12.5px}
table.hb-terms td{padding:4px 6px;border-bottom:1px solid #22262b;vertical-align:top;color:#C6C7C4}
table.hb-terms td.addr{font-family:var(--mono);color:#F5B301;white-space:nowrap;width:1%}
.hb-demo{background:#101214;border:1px solid var(--line);border-radius:10px;padding:12px;align-self:start;position:sticky;top:0}
.hb-live{font-size:11px;color:#34D17A;margin-left:6px;animation:pgblink 1.2s steps(2) infinite}
.demo-stage{background:#CFCABD;border-radius:8px;min-height:120px;display:flex;align-items:center;justify-content:center;padding:6px}
.demo-svg{width:100%;max-height:340px;display:block;touch-action:none;user-select:none}
.demo-svg text{font-family:var(--mono)}
.demo-svg .act{cursor:pointer}
.demo-ctl{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.dctl{font-size:13.5px;color:#E8E6E1;display:flex;flex-direction:column;gap:4px}
.dctl.chk{flex-direction:row;align-items:center;gap:8px;cursor:pointer}
.dctl input[type=checkbox]{width:16px;height:16px;accent-color:var(--cyan)}
.demo-out{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-family:var(--mono);font-size:12.5px;color:#E8E6E1}
.dout{display:flex;align-items:center;gap:6px}
.demo-out .v24{color:#f87171}.demo-out .v0{color:#60a5fa}.demo-out .vac{color:#fb923c}.demo-out .vpe{color:#84cc16}.demo-out .ok{color:#4ade80}.demo-out .off{color:#6b7a8c}
.demo-note{font-size:12.5px;color:#9AA0A6;margin:10px 0 0}
.hb-ex{margin-top:12px;width:100%}

/* ---- parts search ---- */
.pal-search{position:sticky;top:18px;z-index:1;background:rgba(23,25,28,.99);padding:4px 0 8px;margin-bottom:2px;display:flex;align-items:center;gap:6px}
.pal-search input{flex:1;min-width:0;background:#101214;border:1px solid var(--line);border-radius:7px;color:var(--text);padding:7px 9px;font:inherit;font-size:13px}
.pal-search input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px rgba(245,179,1,.2)}
#palCount{font-family:var(--mono);font-size:11px;color:var(--muted);min-width:14px;text-align:right}
.pal-empty{font-size:12.5px;color:var(--muted);padding:6px 4px}
.pal-item[hidden],.pal-group[hidden]{display:none}

/* ---- cable management: ferrules + hovered cable ---- */
#bench .ferrule rect{fill:#f8fafc;stroke:#334155;stroke-width:1}
#bench .ferrule text{font-size:8.5px;font-weight:700;fill:#111827;text-anchor:middle;font-family:var(--mono)}
#bench g.w.hov .wire{stroke-width:5.5;filter:drop-shadow(0 0 3px rgba(245,179,1,.95))}
.term-tip .tt-ferrule{display:inline-block;background:#f8fafc;color:#111827;border:1px solid #64748b;border-radius:3px;padding:0 5px;font-family:var(--mono);font-weight:700;margin:0 4px}
.term-tip .tt-dim{color:#9AA0A6;font-size:11.5px}
#btnCable.on{border-color:var(--cyan);background:rgba(245,179,1,.13);color:#fff}

/* ==== design theme: playground (graphite + amber, green RUN) ==== */
.pg-top{background:#17191C;border-bottom:1px solid #2E3238;min-height:54px}
.pg-top .brand{font-size:14px;font-weight:500;color:#9AA0A6}
.pg-top .brand-dot{width:24px;height:24px;border-radius:3px;background:#ECE9E1 radial-gradient(circle,#1f7a47 0 3.5px,transparent 4.5px);box-shadow:none}
.pg-top .crumb{color:#E8E6E1;font-weight:700}
.btn{border-radius:4px;font-weight:500}
.btn:hover{border-color:#9AA0A6}
.btn.run{background:#1f7a47;border-color:#1f7a47;color:#fff;letter-spacing:.04em;box-shadow:0 0 0 1px #34D17A,0 0 16px rgba(52,209,122,.25)}
.btn.run:hover{background:#239152}
.btn.run.on{background:#b3262b;border-color:#b3262b;color:#fff;box-shadow:0 0 0 1px #E5484D,0 0 16px rgba(229,72,77,.25)}
.bench-wrap,.ladder-wrap{background:#17191C;border-color:#2E3238;border-radius:6px}
.lad-sticky{background:#17191C}
.lad-head h2{font-weight:800;font-stretch:85%}
.tool{background:#202328;border-color:#2E3238;border-radius:4px}
.tool:hover{border-color:#F5B301}
.tool.on{border-color:#F5B301;color:#fff}
.pal-group,.tgroup{font-family:var(--mono);letter-spacing:.1em;color:#6b7178}
.pal-item{background:#202328;border-color:#2E3238;border-radius:4px}
.pal-item:hover{border-color:#9AA0A6;background:#26292e}
.palette,.side{border-radius:6px}
.toast{background:#ECE9E1;color:#141619;border-color:#F5B301;border-radius:4px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.term-tip{background:#ECE9E1;color:#2c2f33;border:none;border-radius:4px;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.term-tip .tt-head{color:#141619;font-weight:700}
.term-tip .tt-id{color:#8a6400}
.term-tip .tt-desc{color:#2c2f33}
.term-tip .tt-now{border-top-color:#CFCABD;color:#4A4E54}
.term-tip .tt-dim{color:#4A4E54}
.term-tip .tt-help{color:#8a6400}
.term-tip .v24{color:#b3262b}.term-tip .v0{color:#1f5fd0}.term-tip .vac{color:#c2560c}.term-tip .vpe{color:#4d7c0f}
.modal-box{border-radius:10px}
.help-grid h3,.hb-text h3,.hb-demo h3{color:#F5B301}
/* dark canvas (design 1b): a thin casing keeps black / dark cables visible on the dark plate */
#bench{background:#0c0e10}
#bench .wcase{fill:none;stroke:#5a6068;stroke-width:5.4;stroke-linecap:round;pointer-events:none}
#bench g.w.sel .wcase{stroke:#F5B301}
.hb-icon,.demo-stage{background:#0c0e10 radial-gradient(circle at 1px 1px,#23272c 1px,transparent 0) 0 0/16px 16px}

/* ---- saved projects ---- */
.pname{background:none;border:none;border-bottom:1px dashed #5a6068;color:#9AA0A6;font:500 12.5px var(--mono);padding:2px 0;cursor:pointer;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pname:hover{color:#E8E6E1;border-bottom-color:#F5B301}
.pname.dirty::after{content:" \2022";color:#F5B301}
.btn.save.dirty{border-color:#F5B301;color:#F5B301}
.proj-box{max-width:620px}
.proj-head{display:flex;align-items:center;justify-content:space-between}
.proj-form{display:flex;gap:8px;margin-bottom:14px}
.proj-form input{flex:1;min-width:0;background:#101214;border:1px solid var(--line);border-radius:4px;color:var(--text);padding:9px 11px;font:inherit;font-size:14px}
.proj-form input:focus{outline:none;border-color:#F5B301}
.proj-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.proj-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.proj-row.cur{background:rgba(245,179,1,.07)}
.proj-row .pn{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-row .pm{font:11.5px var(--mono);color:var(--muted);white-space:nowrap}
.proj-row .btn.danger:hover{border-color:#E5484D;color:#E5484D}
.proj-empty{color:var(--muted);font-size:13.5px;padding:14px 4px}

/* ---- themed confirm dialog ---- */
.modal.ask{z-index:120;animation:askfade .12s ease-out}
.ask-box{max-width:440px;padding:22px 24px 18px;background:#ECE9E1;color:#141619;border:none;border-radius:8px;box-shadow:0 30px 60px rgba(0,0,0,.55);animation:popin .14s ease-out}
.ask-tag{display:inline-block;font:700 10.5px var(--mono);letter-spacing:.1em;background:#F5B301;color:#141619;padding:2px 7px;border-radius:2px;margin-bottom:10px}
.ask-box h2{margin:0 0 8px;font-weight:850;font-stretch:78%;font-size:26px;line-height:1.05;letter-spacing:-.01em;color:#141619}
.ask-box p{margin:0;font-size:14.5px;line-height:1.55;color:#2c2f33}
.ask-box p b{color:#141619}
.ask-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid #CFCABD}
.ask-box .btn{background:transparent;border:1.5px solid #141619;color:#141619;font-weight:600;padding:9px 16px}
.ask-box .btn:hover{background:#E2DED3}
.ask-box .btn.primary{background:#141619;color:#ECE9E1}
.ask-box .btn.primary:hover{background:#2a2e34}
.ask-box .btn.danger-solid{background:#b3262b;border-color:#b3262b;color:#fff}
.ask-box .btn.danger-solid:hover{background:#c9302f}
.ask-box .btn:focus-visible{outline:2px solid #F5B301;outline-offset:2px}
@keyframes askfade{from{opacity:0}}
.pg .ad-slot{margin:0 10px 12px;border-top-color:#2E3238}
.pg .ad-slot::before{color:#6b7178}
.pg-foot{margin:0 10px 28px;font-size:12.5px;color:#6b7178}
.pg-foot a{color:#9AA0A6}
/* rotate handle on the hovered / selected part + rotate buttons */
#bench .rot-btn{cursor:pointer}
#bench .rot-btn:hover circle{fill:#ffc21a}
.rot-grp{display:inline-flex;gap:2px}
.rot-grp .btn.sm:first-child{padding:4px 7px}
/* communication cables (Ethernet / PROFINET): teal, with moving dashes while the link is up */
#bench g.w.comm .wire{stroke:#14b8a6!important;stroke-width:4.2;stroke-dasharray:14 4;filter:none}
#bench g.w.comm .wcase{stroke:#0f3d3a;stroke-width:7}
#bench g.w.comm.link .wire{animation:commflow .8s linear infinite;filter:drop-shadow(0 0 3px rgba(20,184,166,.8))}
#bench g.w.comm.sel .wire{stroke-dasharray:6 4}
@keyframes commflow{to{stroke-dashoffset:-18}}