:root {
  --bg:#0b0f14; --bg-1:#131923; --bg-2:#1a2230; --bg-3:#232d3d;
  --border:#2a3546; --border-hi:#3d4a60;
  --fg:#e6edf3; --fg-dim:#8b96a5; --fg-mute:#5b6878;
  --accent:#58a6ff; --accent-2:#1f6feb;
  --green:#2ecc71; --green-dim:#1e8449;
  --amber:#f39c12; --red:#e74c3c; --purple:#a371f7;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 10px 30px rgba(0,0,0,.6);
  --bank-X:#22d3a7; --bank-Y:#fbbf24; --bank-M:#60a5fa; --bank-D:#c084fc;
  --bank-T:#fb7185; --bank-C:#fb923c; --bank-S:#22d3ee; --bank-K:#94a3b8;
  --bank-P:#818cf8; --bank-I:#a3e635; --bank-F:#e879f9;
  --NODE_W:112px;
}
[data-theme="light"] {
  --bg:#f6f8fa; --bg-1:#ffffff; --bg-2:#eef1f5; --bg-3:#e1e6ec;
  --border:#d0d7de; --border-hi:#aeb6c0;
  --fg:#1f2328; --fg-dim:#57606a; --fg-mute:#8c95a0;
  --accent:#0969da; --accent-2:#0550ae;
  --green:#1a7f37; --green-dim:#2da44e; --amber:#9a6700; --red:#cf222e;
  --shadow:0 10px 30px rgba(140,149,159,.2);
  --bank-X:#059669; --bank-Y:#b45309; --bank-M:#1d4ed8; --bank-D:#7c3aed;
  --bank-T:#be123c; --bank-C:#c2410c; --bank-S:#0e7490; --bank-K:#475569;
  --bank-P:#3730a3; --bank-I:#4d7c0f; --bank-F:#a21caf; --bank-A:#0d9488;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; margin:0; }
body { font-family:var(--sans); background:var(--bg); color:var(--fg);
       font-size:14px; line-height:1.5; overflow:hidden; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
a { color:var(--accent); text-decoration:none; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg-3); border-radius:6px; border:2px solid var(--bg); }
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
       border:1px solid var(--border); border-radius:6px; background:var(--bg-2);
       color:var(--fg); cursor:pointer; font-size:13px; font-weight:500;
       white-space:nowrap; transition:background .12s,border-color .12s; }
.btn:hover:not(:disabled) { background:var(--bg-3); border-color:var(--border-hi); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.primary { background:var(--green-dim); border-color:var(--green-dim); color:#fff; }
.btn.primary:hover:not(:disabled) { background:var(--green); }
.btn.danger { background:#6e1c1c; border-color:#8b2c2c; color:#ffd7d5; }
.btn.ghost { background:transparent; border-color:transparent; }
.btn.ghost:hover:not(:disabled) { background:var(--bg-3); }
.btn.sm { padding:4px 9px; font-size:12px; }
.btn.active { background:var(--accent-2); color:#fff; border-color:var(--accent-2); }
.shell { display:flex; flex-direction:column; height:100vh; }
.topbar { display:flex; align-items:center; gap:8px; padding:8px 14px;
          border-bottom:1px solid var(--border); background:var(--bg-1); flex:0 0 auto;
          overflow-x:auto; }
.brand { font-weight:700; font-size:14px; letter-spacing:.3px;
         display:flex; align-items:center; gap:8px; margin-right:8px; flex:0 0 auto; }
.brand .dot { width:8px; height:8px; border-radius:50%; background:var(--green);
              box-shadow:0 0 8px var(--green); }
.spacer { flex:1; }
.topbar .user { font-size:12px; color:var(--fg-dim); padding:4px 10px;
                border:1px solid var(--border); border-radius:999px; flex:0 0 auto; }
.workspace { display:flex; flex:1; min-height:0; position:relative; }
.sidebar { width:250px; flex:0 0 auto; border-right:1px solid var(--border);
           background:var(--bg-1); display:flex; flex-direction:column; min-height:0;
           transition:margin-left .18s ease; }
.sidebar.hidden { display:none; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0;
        position:relative; }
.rightbar { width:340px; flex:0 0 auto; border-left:1px solid var(--border);
            background:var(--bg-1); display:flex; flex-direction:column; min-height:0;
            transition:margin-right .18s ease; }
.rightbar.hidden { display:none; }
.panel-toggle {
  position:absolute; top:50%; transform:translate(-50%, -50%);
  width:14px; height:46px; padding:0; z-index:55;
  background:var(--bg-2); border:1px solid var(--border);
  color:var(--fg-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; line-height:1; border-radius:4px;
  transition:background .12s, color .12s, border-color .12s;
}
.panel-toggle:hover { background:var(--accent-2); border-color:var(--accent-2); color:#fff; }
.panel-toggle-left  { left:0; transform:translate(-50%, -50%); }
.panel-toggle-right { right:0; transform:translate(50%, -50%); }
.search-wrap { padding:10px; border-bottom:1px solid var(--border); background:var(--bg-1); z-index:5; }
.search-wrap input { width:100%; padding:8px 10px; background:var(--bg);
                     border:1px solid var(--border); border-radius:6px; font-size:13px; outline:none; }
.palette { flex:1; overflow-y:auto; padding:4px 0 20px; }
.pal-group { margin-bottom:4px; }
.pal-head { display:flex; align-items:center; gap:6px; padding:6px 12px 6px 14px;
            font-size:11px; font-weight:700; text-transform:uppercase;
            letter-spacing:.6px; cursor:pointer; user-select:none;
            border-left:3px solid transparent; }
.pal-head .arrow { font-size:9px; transition:transform .15s; }
.pal-group.collapsed .arrow { transform:rotate(-90deg); }
.pal-group.collapsed .pal-items { display:none; }
.pal-item { padding:6px 12px 6px 22px; font-size:12.5px; cursor:grab;
            border-left:3px solid transparent; color:var(--fg-dim); user-select:none;
            display:flex; align-items:center; gap:8px; }
.pal-item:hover { background:var(--bg-2); color:var(--fg); }
.pal-item svg { flex:0 0 auto; }
.pal-item.bank-X { border-left-color:var(--bank-X); }
.pal-item.bank-Y { border-left-color:var(--bank-Y); }
.pal-item.bank-M { border-left-color:var(--bank-M); }
.pal-item.bank-D { border-left-color:var(--bank-D); }
.pal-item.bank-T { border-left-color:var(--bank-T); }
.pal-item.bank-C { border-left-color:var(--bank-C); }
.pal-item.bank-S { border-left-color:var(--bank-S); }
.pal-item.bank-K { border-left-color:var(--bank-K); }
.pal-item.bank-P { border-left-color:var(--bank-P); }
.pal-item.bank-I { border-left-color:var(--bank-I); }
.pal-item.bank-F { border-left-color:var(--bank-F); }
.pal-item.gate   { border-left-color:var(--border-hi); }
.editor-tabs { display:flex; align-items:center; gap:2px; padding:6px 10px 0;
               background:var(--bg-1); border-bottom:1px solid var(--border);
               flex:0 0 auto; overflow-x:auto; }
.tab { padding:6px 14px; font-size:12px; border:1px solid transparent;
       border-bottom:none; border-radius:6px 6px 0 0; color:var(--fg-dim);
       cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.tab.active { background:var(--bg); border-color:var(--border); color:var(--fg); margin-bottom:-1px; }
.tab:hover:not(.active) { color:var(--fg); }
.tab.disabled { opacity:.5; text-decoration:line-through; }
.tab .tab-lock { font-size:10px; opacity:.8; }
.view-toggle { display:flex; gap:6px; padding:6px 10px;
               border-bottom:1px solid var(--border); background:var(--bg-1);
               align-items:center; flex-wrap:wrap; }
.tool-sep { width:1px; height:22px; background:var(--border); margin:0 4px; }
.tool-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
            border:1px solid var(--border); border-radius:6px; background:var(--bg-2);
            cursor:pointer; font-size:12px; color:var(--fg-dim);
            transition:background .12s,color .12s,border-color .12s; }
.tool-btn:hover { background:var(--bg-3); color:var(--fg); }
.tool-btn.active { background:var(--accent-2); color:#fff; border-color:var(--accent-2); }
.tool-color { width:30px; height:26px; border:1px solid var(--border); border-radius:6px;
              cursor:pointer; background:var(--bg-2); padding:2px; }
.tool-select { padding:5px 8px; border:1px solid var(--border); border-radius:6px;
               background:var(--bg-2); color:var(--fg); font-size:12px; cursor:pointer; }
.canvas-wrap { flex:1; position:relative; overflow:hidden; min-height:0; background:var(--bg);
               display:flex; flex-direction:column; }
.graph-canvas { position:relative; flex:1; min-height:200px; overflow:auto;
                -webkit-overflow-scrolling:touch;
                background-color:var(--bg);
                background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                                 linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
                background-size:20px 20px; outline:none; }
[data-theme="light"] .graph-canvas {
  background-image:linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px); }
.canvas-scroll { position:relative; }
.canvas-surface { position:absolute; top:0; left:0; transform-origin:0 0; }
.graph-svg { position:absolute; top:0; left:0; width:100%; height:100%;
             pointer-events:none; overflow:visible; z-index:1; }
.graph-node-layer { position:absolute; top:0; left:0; width:100%; height:100%;
                    z-index:10; pointer-events:none; }
.graph-node-layer > * { pointer-events:auto; }
.zone-layer { position:absolute; top:0; left:0; width:100%; height:100%;
              z-index:5; pointer-events:none; }
.tab-lock-overlay { position:absolute; inset:0; z-index:80;
                    backdrop-filter:blur(8px) saturate(.6);
                    -webkit-backdrop-filter:blur(8px) saturate(.6);
                    background:rgba(11,15,20,.35);
                    display:flex; align-items:flex-start; justify-content:flex-start;
                    padding:24px; pointer-events:auto; }
.tab-lock-card { pointer-events:auto; width:100%; max-width:320px;
                 background:var(--bg-1); border:1px solid var(--border-hi);
                 border-radius:10px; padding:16px 18px; box-shadow:var(--shadow);
                 display:flex; flex-direction:column; gap:10px; }
.tab-lock-card h3 { margin:0; font-size:13px; }
.tab-lock-card p  { margin:0; font-size:12px; color:var(--fg-dim); }
.tab-lock-card input { width:100%; padding:9px 11px; background:var(--bg);
                       border:1px solid var(--border); border-radius:6px;
                       font-family:var(--mono); outline:none; }
.tab-lock-card input:focus { border-color:var(--accent); }
.tab-lock-card .err { margin-top:0; }
.marquee-count { position:absolute; padding:4px 10px; background:var(--accent-2);
                 color:#fff; font-size:11px; font-weight:700; border-radius:999px;
                 pointer-events:none; z-index:100; font-family:var(--mono);
                 box-shadow:0 4px 12px rgba(0,0,0,.5); }
.zone { position:absolute; border-radius:12px;
        background:color-mix(in oklab, var(--zone-color) 14%, transparent);
        border:2px dashed var(--zone-color);
        pointer-events:none; transition:background .15s; }
.zone-header { position:absolute; top:-14px; left:10px;
               display:flex; align-items:center; gap:6px;
               padding:2px 10px 2px 10px; background:var(--bg-1);
               border:1px solid var(--zone-color); border-radius:6px;
               font-size:11px; font-weight:600; color:var(--zone-color);
               cursor:grab; white-space:nowrap; pointer-events:auto;
               box-shadow:0 2px 6px rgba(0,0,0,.35); user-select:none; }
.zone-header:active { cursor:grabbing; }
.zone-actions { display:flex; gap:2px; margin-left:4px; }
.zone-btn { width:16px; height:16px; padding:0; border:0; border-radius:3px;
            background:transparent; color:var(--zone-color); cursor:pointer;
            font-size:11px; line-height:1; }
.zone-btn.danger:hover { background:var(--red); color:#fff; }
.zone-resize {
  position:absolute; width:12px; height:12px;
  background:var(--bg-1);
  border:2px solid var(--zone-color, var(--accent));
  border-radius:3px; z-index:10; pointer-events:auto;
  opacity:0; transition:opacity .15s, background .15s, border-color .15s;
}
.zone:hover .zone-resize { opacity:1; }
.zone-resize:hover { background:var(--accent); border-color:var(--accent); }
.zone-resize-nw { top:-6px;    left:-6px;   cursor:nwse-resize; }
.zone-resize-ne { top:-6px;    right:-6px;  cursor:nesw-resize; }
.zone-resize-sw { bottom:-6px; left:-6px;   cursor:nesw-resize; }
.zone-resize-se { bottom:-6px; right:-6px;  cursor:nwse-resize; }
.marquee-box { position:absolute; pointer-events:none; z-index:40;
               border:1.5px dashed var(--accent); background:rgba(88,166,255,.06);
               border-radius:4px; }
.marquee-box.filter-blocks { border-color:var(--green); background:rgba(46,204,113,.06); }
.marquee-box.filter-wires  { border-color:var(--amber); background:rgba(243,156,18,.06); }
.graph-wire { fill:none; stroke:#5c7cfa; stroke-width:2.5; stroke-linecap:round;
              transition:stroke .15s, stroke-width .15s;
              filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.graph-wire-hit { fill:none; stroke:transparent; stroke-width:14; stroke-linecap:round;
                  cursor:pointer; pointer-events:stroke; }
.graph-wire.selected { stroke:#f0a020 !important; stroke-width:3.5;
                       filter:drop-shadow(0 0 6px #f0a020); }
.graph-wire.temp   { stroke:var(--accent); stroke-dasharray:6 4; }
.graph-wire.live {
  stroke:#2ecc71; stroke-width:3; stroke-dasharray:8 5;
  animation: currentFlow .7s linear infinite;
  filter:drop-shadow(0 0 6px rgba(46,204,113,.95));
}
@keyframes currentFlow { to { stroke-dashoffset:-26; } }
.graph-wire.magnet { stroke:#2ecc71; stroke-width:3; stroke-dasharray:6 5; opacity:.9;
                     filter:drop-shadow(0 0 8px #2ecc71); animation:magnetPulse 1s infinite; }
@keyframes magnetPulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.wire-end { fill:#5c7cfa; }
.wire-end.selected { fill:#f0a020; }
.wire-end.live { fill:#2ecc71; }
.guide-line { stroke:#f0a020; stroke-width:1; stroke-dasharray:5 5; opacity:.9; }
.rung-rail {
  position:absolute; left:22px; top:15px; bottom:15px; width:6px;
  background:linear-gradient(180deg, #4c8bf5 0%, #1f6feb 100%);
  border-radius:3px;
  box-shadow:0 0 14px rgba(88,166,255,.45), inset 0 0 6px rgba(255,255,255,.25);
  z-index:2; pointer-events:none; transition:background .25s, box-shadow .25s;
}
.rung-rail::after { content:''; position:absolute; inset:-3px;
  border:1px solid rgba(88,166,255,.25); border-radius:6px; transition:border-color .25s; }
.rung-rail.state-run { background:linear-gradient(180deg, #2ecc71 0%, #1e8449 100%);
  box-shadow:0 0 22px rgba(46,204,113,.85); }
.rung-rail.state-pause { background:linear-gradient(180deg, #f39c12 0%, #b8770a 100%);
  box-shadow:0 0 18px rgba(243,156,18,.65); }
.rung-rail.state-monitor { background:linear-gradient(180deg, #a371f7 0%, #6b3dbf 100%);
  box-shadow:0 0 18px rgba(163,113,247,.65); }
.rung-connector { fill:none; stroke:#2ecc71; stroke-width:3; stroke-linecap:round;
                  filter:drop-shadow(0 0 4px rgba(46,204,113,.7)); }
.rung-connector.idle { stroke:#2a3546; filter:none; }
.graph-node.on-rail { border-color:#2ecc71 !important;
                     box-shadow:0 0 0 2px rgba(46,204,113,.35), 0 2px 8px rgba(0,0,0,.4); }
.graph-node {
  position:absolute; width:var(--NODE_W); min-height:46px;
  padding:2px 7px;
  background:var(--bg-2); border:2px solid var(--border-hi);
  border-radius:8px; cursor:grab; user-select:none; font-size:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  transition:border-color .12s, background .12s;
}
.graph-node:hover { border-color:var(--accent); }
.graph-node.selected { outline:2px dashed var(--accent); outline-offset:2px; }
.graph-node.type-coil  { border-radius:14px; }
.graph-node.type-AND,.graph-node.type-OR,.graph-node.type-NOT,
.graph-node.type-XOR,.graph-node.type-NAND,.graph-node.type-NOR,
.graph-node.type-XNOR { border-radius:4px; }
.graph-node.bank-X { border-color:var(--bank-X); background:color-mix(in oklab, var(--bank-X) 10%, var(--bg-2)); }
.graph-node.bank-Y { border-color:var(--bank-Y); background:color-mix(in oklab, var(--bank-Y) 10%, var(--bg-2)); }
.graph-node.bank-M { border-color:var(--bank-M); background:color-mix(in oklab, var(--bank-M) 10%, var(--bg-2)); }
.graph-node.bank-D { border-color:var(--bank-D); background:color-mix(in oklab, var(--bank-D) 10%, var(--bg-2)); }
.graph-node.bank-T { border-color:var(--bank-T); background:color-mix(in oklab, var(--bank-T) 10%, var(--bg-2)); }
.graph-node.bank-C { border-color:var(--bank-C); background:color-mix(in oklab, var(--bank-C) 10%, var(--bg-2)); }
.graph-node.bank-S { border-color:var(--bank-S); background:color-mix(in oklab, var(--bank-S) 10%, var(--bg-2)); }
.graph-node.bank-K { border-color:var(--bank-K); background:color-mix(in oklab, var(--bank-K) 10%, var(--bg-2)); }
.graph-node.bank-P { border-color:var(--bank-P); background:color-mix(in oklab, var(--bank-P) 10%, var(--bg-2)); }
.graph-node.bank-I { border-color:var(--bank-I); background:color-mix(in oklab, var(--bank-I) 10%, var(--bg-2)); }
.graph-node.bank-F { border-color:var(--bank-F); background:color-mix(in oklab, var(--bank-F) 10%, var(--bg-2)); }
.graph-node.is-on  { box-shadow:0 0 0 2px currentColor, 0 0 20px -2px currentColor; }
.gnode-name { font-family:var(--mono); font-size:12px; font-weight:700;
              letter-spacing:.2px; text-align:center; width:100%;
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
              color:var(--accent); line-height:1.15; }
.graph-node.bank-X .gnode-name { color:var(--bank-X); }
.graph-node.bank-Y .gnode-name { color:var(--bank-Y); }
.graph-node.bank-M .gnode-name { color:var(--bank-M); }
.graph-node.bank-D .gnode-name { color:var(--bank-D); }
.graph-node.bank-T .gnode-name { color:var(--bank-T); }
.graph-node.bank-C .gnode-name { color:var(--bank-C); }
.graph-node.bank-S .gnode-name { color:var(--bank-S); }
.graph-node.bank-K .gnode-name { color:var(--bank-K); }
.graph-node.bank-P .gnode-name { color:var(--bank-P); }
.graph-node.bank-I .gnode-name { color:var(--bank-I); }
.graph-node.bank-F .gnode-name { color:var(--bank-F); }
.gnode-icon { display:flex; justify-content:center; align-items:center;
              margin:1px 0; min-height:0; width:100%; color:var(--fg); }
.gnode-icon svg { display:block; height:22px; width:44px; }
.gnode-comment { font-size:8px; color:var(--fg-mute); font-style:italic;
                 text-align:center; width:100%; min-height:9px; line-height:1.1;
                 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gnode-out-value { position:absolute; right:6px; top:50%; transform:translateY(-50%);
                   font-family:var(--mono); font-size:9px; font-weight:800;
                   padding:1px 4px; border-radius:3px;
                   background:var(--bg-1); color:var(--fg-mute);
                   pointer-events:none; z-index:5;
                   border:1px solid var(--border);
                   min-width:24px; text-align:center; letter-spacing:.3px; }
.gnode-out-value.on   { color:#0a2a12; background:var(--green); border-color:var(--green);
                        box-shadow:0 0 8px rgba(46,204,113,.6); }
.gnode-out-value.off  { color:var(--fg-mute); }
.gnode-out-value.word { color:#0a2a12; background:var(--green); border-color:var(--green);
                        box-shadow:0 0 8px rgba(46,204,113,.6); }
.force-badge { position:absolute; top:-8px; right:-8px; width:18px; height:18px;
               border-radius:50%; background:var(--red); color:#fff;
               font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center;
               border:2px solid var(--bg-1); cursor:pointer; z-index:20;
               box-shadow:0 0 10px rgba(231,76,60,.9); }
.force-badge:hover { transform:scale(1.2); }
.port { position:absolute; width:14px; height:14px; border-radius:50%;
        background:var(--bg-3); border:2px solid var(--border-hi);
        cursor:crosshair; transition:transform .1s, background .1s, border-color .1s, box-shadow .15s; }
.port:hover { background:var(--accent); border-color:var(--accent); transform:translateY(-50%) scale(1.35); }
.port.connected { background:var(--green); border-color:var(--green); }
.port.in  { left:-8px; top:50%; transform:translateY(-50%); }
.port.out { right:-8px; top:50%; transform:translateY(-50%); }
.port.magnet-target { background:#2ecc71 !important; border-color:#2ecc71 !important;
                      transform:translateY(-50%) scale(1.55) !important;
                      box-shadow:0 0 14px #2ecc71, 0 0 26px rgba(46,204,113,.65); }
.port.snap-target   { background:var(--accent) !important; border-color:var(--accent) !important;
                      transform:translateY(-50%) scale(1.45) !important;
                      box-shadow:0 0 14px var(--accent); }
.port.plus { background:transparent; border:1.5px dashed var(--border-hi);
             width:12px; height:12px; font-size:10px; line-height:1;
             display:flex; align-items:center; justify-content:center;
             color:var(--fg-mute); font-weight:700; }
.port.plus:hover { background:var(--green-dim); border-color:var(--green); color:#fff;
                   transform:translateY(-50%) scale(1.4); }
.palette-ghost { position:fixed; z-index:9999; pointer-events:none;
                 padding:6px 12px; background:var(--bg-1); border:2px dashed var(--accent);
                 border-radius:8px; font-size:12px; color:var(--fg-dim);
                 box-shadow:0 8px 24px rgba(0,0,0,.5); opacity:.9; transform:translate(-50%,-50%); }
.graph-node.palette-preview { pointer-events:none; opacity:.75; border-style:dashed !important; }
.sim-toolbar { display:flex; gap:6px; padding:8px 12px; align-items:center;
               border-top:1px solid var(--border); background:var(--bg-1);
               flex:0 0 auto; flex-wrap:wrap; }
.sim-toolbar .speed-group { display:flex; align-items:center; gap:8px;
                            padding:4px 12px; border:1px solid var(--border);
                            border-radius:8px; background:var(--bg-2); }
.sim-toolbar input[type=range] { width:180px; accent-color:var(--accent); }
.sim-toolbar .speed-val { font-family:var(--mono); font-size:12px;
                          color:var(--accent); min-width:56px; text-align:right; }
.sim-state-badge { padding:5px 14px; border-radius:999px; font-weight:800; font-size:12px;
                   font-family:var(--mono); letter-spacing:1.5px; text-transform:uppercase;
                   border:1px solid var(--border-hi); }
.sim-state-badge { font-size:13px; padding:7px 18px; letter-spacing:2px;
                   box-shadow:0 0 0 1px rgba(255,255,255,.06) inset; }
.sim-state-badge.state-RUN   { background:var(--green); color:#001a0d; border-color:var(--green);
                               box-shadow:0 0 18px rgba(46,204,113,.55); }
.sim-state-badge.state-STOP  { background:var(--bg-3); color:var(--fg-dim); }
.sim-state-badge.state-PAUSE { background:var(--amber); color:#1a0f00; border-color:var(--amber);
                               box-shadow:0 0 18px rgba(243,156,18,.55); }

.sim-btn-run   { background:rgba(46,204,113,.14);  border-color:var(--green); color:var(--green); font-weight:700; }
.sim-btn-run:hover:not(:disabled)   { background:rgba(46,204,113,.28); }
.sim-btn-run.active   { background:var(--green); color:#001a0d; box-shadow:0 0 12px rgba(46,204,113,.6); }
.sim-btn-pause { background:rgba(243,156,18,.14);  border-color:var(--amber); color:var(--amber); font-weight:700; }
.sim-btn-pause:hover:not(:disabled) { background:rgba(243,156,18,.28); }
.sim-btn-pause.active { background:var(--amber); color:#1a0f00; box-shadow:0 0 12px rgba(243,156,18,.6); }
.sim-btn-stop  { background:rgba(231,76,60,.14);   border-color:var(--red);   color:var(--red);   font-weight:700; }
.sim-btn-stop:hover:not(:disabled)  { background:rgba(231,76,60,.28); }
.sim-btn-stop.active  { background:var(--red);   color:#fff;    box-shadow:0 0 12px rgba(231,76,60,.6); }

/* ---- Monitor tab --------------------------------------------------------
   Monitor buttons reuse the same semantics as Simulate but with a colored
   left bar, a slightly squarer shape, and a purple accent for Refresh so
   the tab is visually distinct at a glance. */
.mon-btn-refresh,
.mon-btn-run,
.mon-btn-pause,
.mon-btn-stop {
  border-radius: 5px;
  padding: 5px 12px 5px 10px;
  border-left-width: 3px;
  border-left-style: solid;
  font-weight: 700;
  letter-spacing: .3px;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.mon-btn-refresh {
  background: rgba(163,113,247,.14);
  border-color: var(--border);
  border-left-color: var(--purple);
  color: var(--purple);
}
.mon-btn-refresh:hover:not(:disabled) { background: rgba(163,113,247,.26); }
.mon-btn-refresh:active:not(:disabled) {
  background: var(--purple); color: #0d0817;
  box-shadow: 0 0 12px rgba(163,113,247,.65);
}
.mon-btn-run {
  background: rgba(46,204,113,.14);
  border-color: var(--border);
  border-left-color: var(--green);
  color: var(--green);
}
.mon-btn-run:hover:not(:disabled) { background: rgba(46,204,113,.26); }
.mon-btn-run.active {
  background: var(--green); color: #001a0d; border-left-color: var(--green);
  box-shadow: 0 0 12px rgba(46,204,113,.65);
}
.mon-btn-pause {
  background: rgba(243,156,18,.14);
  border-color: var(--border);
  border-left-color: var(--amber);
  color: var(--amber);
}
.mon-btn-pause:hover:not(:disabled) { background: rgba(243,156,18,.26); }
.mon-btn-pause.active {
  background: var(--amber); color: #1a0f00; border-left-color: var(--amber);
  box-shadow: 0 0 12px rgba(243,156,18,.65);
}
.mon-btn-stop {
  background: rgba(231,76,60,.14);
  border-color: var(--border);
  border-left-color: var(--red);
  color: var(--red);
}
.mon-btn-stop:hover:not(:disabled) { background: rgba(231,76,60,.26); }
.mon-btn-stop.active {
  background: var(--red); color: #fff; border-left-color: var(--red);
  box-shadow: 0 0 12px rgba(231,76,60,.65);
}
.mon-btn-refresh:disabled,
.mon-btn-run:disabled,
.mon-btn-pause:disabled,
.mon-btn-stop:disabled {
  opacity: .38; cursor: not-allowed; box-shadow: none;
}

/* LIVE / OFFLINE pill next to the run-state badge */
.mon-live-badge {
  padding: 5px 12px; border-radius: 999px; font-family: var(--mono);
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  border: 1px solid var(--border);
  transition: background .2s, color .2s, border-color .2s;
}
.mon-live-badge.live {
  background: rgba(46,204,113,.15); color: var(--green);
  border-color: rgba(46,204,113,.45);
  animation: monLivePulse 1.6s ease-in-out infinite;
}
.mon-live-badge.offline {
  background: var(--bg-3); color: var(--fg-dim);
  border-color: var(--border-hi);
}
@keyframes monLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(46,204,113,0); }
}
.mon-dev-label {
  font-size: 12px; color: var(--fg-dim); font-family: var(--mono);
  padding-left: 4px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 40vw;
}
.sim-stats { font-size:12px; color:var(--fg-dim); font-family:var(--mono); }
.sim-io-bar { display:flex; gap:14px; padding:10px 12px; overflow-x:auto;
              border-top:1px solid var(--border); background:var(--bg-1);
              flex:0 0 auto; min-height:52px; align-items:center; flex-wrap:wrap; }
.sim-io-group { display:flex; gap:4px; align-items:center; padding:4px 8px;
                border-radius:8px; background:var(--bg-2);
                border:1px solid var(--border); flex:0 0 auto; flex-wrap:wrap; }
.sim-io-group .sim-io-label { font-family:var(--mono); font-size:11px; font-weight:800;
                             padding-right:8px; border-right:1px solid var(--border);
                             margin-right:4px; letter-spacing:.5px; }
.sim-io-group.bank-X .sim-io-label { color:var(--bank-X); }
.sim-io-group.bank-Y .sim-io-label { color:var(--bank-Y); }
.sim-io-group.bank-M .sim-io-label { color:var(--bank-M); }
.sim-io-group.bank-T .sim-io-label { color:var(--bank-T); }
.sim-io-group.bank-C .sim-io-label { color:var(--bank-C); }
.sim-io-group.bank-S .sim-io-label { color:var(--bank-S); }
.sim-io-btn { padding:5px 9px; font-family:var(--mono); font-size:11px;
              background:var(--bg); border:1px solid var(--border);
              border-radius:5px; cursor:pointer; color:var(--fg-dim);
              transition:background .1s, color .1s, border-color .1s, box-shadow .1s; position:relative; }
.sim-io-btn:hover { border-color:var(--border-hi); color:var(--fg); }
.sim-io-btn.active { background:var(--green); color:#001a0d; border-color:var(--green);
                    font-weight:800; box-shadow:0 0 10px rgba(46,204,113,.65); }
.sim-io-btn.forced { border-color:var(--red) !important; color:var(--red); }
.sim-io-btn.forced.active { background:var(--red); color:#fff; border-color:var(--red); }
.sim-io-btn.forced::after { content:'●'; position:absolute; top:-6px; right:-4px;
                            color:var(--red); font-size:10px; }
.panel { border-bottom:1px solid var(--border); }
.panel-head { display:flex; align-items:center; gap:8px; padding:8px 12px;
              font-size:11px; font-weight:700; text-transform:uppercase;
              letter-spacing:.6px; color:var(--fg-mute); background:var(--bg-1);
              cursor:pointer; user-select:none; }
.panel-body { padding:10px 12px; max-height:340px; overflow-y:auto; }
.device-card { position:relative; background:var(--bg-2); border:1px solid var(--border);
               border-radius:8px; padding:10px 12px; margin-bottom:8px; cursor:pointer; }
.device-card:hover { border-color:var(--border-hi); }
.device-card.active { border-color:var(--accent); }
.device-card .row1 { display:flex; align-items:center; gap:8px; margin-bottom:4px; padding-right:26px; }
.device-card .name { font-weight:600; font-size:13px; }
.device-card .uid  { font-family:var(--mono); font-size:11px; color:var(--fg-mute); }
.device-card .meta { font-size:11px; color:var(--fg-dim); display:flex; gap:10px; flex-wrap:wrap; }
.device-card .gear-btn { position:absolute; top:6px; right:6px; width:24px; height:24px;
                         padding:0; border-radius:6px; background:var(--bg-1); border:1px solid var(--border);
                         color:var(--fg-dim); cursor:pointer; font-size:13px; line-height:1;
                         display:flex; align-items:center; justify-content:center; }
.device-card .gear-btn:hover { background:var(--accent-2); color:#fff; border-color:var(--accent-2); }
.state-pill { font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px;
              text-transform:uppercase; letter-spacing:.4px; }
.state-pill.online  { background:rgba(46,204,113,.15); color:var(--green); }
.state-pill.offline { background:rgba(139,150,165,.15); color:var(--fg-dim); }
.state-pill.RUN     { background:rgba(46,204,113,.15); color:var(--green); }
.state-pill.STOP    { background:rgba(139,150,165,.15); color:var(--fg-dim); }
.state-pill.PAUSE   { background:rgba(243,156,18,.15); color:var(--amber); }
.state-pill.FAULT   { background:rgba(231,76,60,.15);  color:var(--red); }
.watch-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.watch-table th { text-align:left; font-size:10px; text-transform:uppercase;
                  letter-spacing:.5px; color:var(--fg-mute); font-weight:600;
                  padding:4px 6px; border-bottom:1px solid var(--border); }
.watch-table td { padding:5px 6px; font-family:var(--mono); border-bottom:1px solid var(--bg-2); }
.watch-table .val-true  { color:var(--green); font-weight:700; }
.watch-table .val-false { color:var(--fg-mute); }
.watch-table .val-word  { color:var(--green); font-weight:700; }
.watch-empty { color:var(--fg-mute); font-size:12px; padding:8px 2px; }
.log-list { font-family:var(--mono); font-size:11.5px; line-height:1.7; }
.log-line { display:flex; gap:8px; padding:1px 0; }
.log-line .t { color:var(--fg-mute); flex:0 0 auto; }
.log-line.info .m     { color:var(--fg-dim); }
.log-line.warn .m     { color:var(--amber); }
.log-line.error .m,
.log-line.critical .m { color:var(--red); }
.log-line.ok .m       { color:var(--green); }
.auth-wrap { display:flex; align-items:center; justify-content:center; height:100vh;
             background:radial-gradient(circle at 50% 0%, #16202f 0%, var(--bg) 55%);
             padding:16px; }
.auth-card { width:100%; max-width:400px; background:var(--bg-1);
             border:1px solid var(--border); border-radius:14px;
             padding:34px 30px; box-shadow:var(--shadow); }
.auth-card h1 { font-size:22px; margin:0 0 4px; letter-spacing:-.3px; }
.auth-card .sub { color:var(--fg-dim); font-size:13px; margin:0 0 24px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; color:var(--fg-dim);
               margin-bottom:5px; font-weight:500; }
.field input, .field textarea, .field select { width:100%; padding:10px 12px; background:var(--bg);
               border:1px solid var(--border); border-radius:6px;
               font-size:14px; outline:none; transition:border-color .12s;
               font-family:var(--mono); }
.field textarea { resize:vertical; min-height:60px; font-size:13px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(88,166,255,.12); }
.auth-card .btn { width:100%; justify-content:center; padding:11px; margin-top:8px; }
.auth-alt { text-align:center; margin-top:18px; font-size:13px; color:var(--fg-dim); }
.err { color:var(--red); font-size:13px; margin-top:12px; padding:8px 12px;
       background:rgba(231,76,60,.1); border-radius:6px; border:1px solid rgba(231,76,60,.25); }
.info { color:var(--accent); font-size:13px; margin-top:12px; padding:8px 12px;
        background:rgba(88,166,255,.1); border-radius:6px; border:1px solid rgba(88,166,255,.25); }
.ok-msg { color:var(--green); font-size:13px; margin-top:12px; padding:8px 12px;
          background:rgba(46,204,113,.1); border-radius:6px; border:1px solid rgba(46,204,113,.25); }
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.7);
              display:flex; align-items:center; justify-content:center;
              z-index:100; animation:fade .15s; padding:16px; }
@keyframes fade { from { opacity:0 } }
.modal { background:var(--bg-1); border:1px solid var(--border);
         border-radius:12px; width:100%; max-width:520px; max-height:82vh;
         overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.modal.wide { max-width:720px; }
.modal-head { padding:16px 20px; border-bottom:1px solid var(--border);
              font-weight:600; display:flex; align-items:center; justify-content:space-between; }
.modal-body { padding:20px; overflow-y:auto; flex:1; }
.modal-foot { padding:14px 20px; border-top:1px solid var(--border);
              display:flex; gap:8px; justify-content:flex-end; }
.modal-tabs { display:flex; border-bottom:1px solid var(--border); background:var(--bg-2); overflow-x:auto; }
.modal-tab { flex:0 0 auto; padding:10px 18px; font-size:12px; font-weight:600;
             text-transform:uppercase; letter-spacing:.5px;
             background:transparent; border:0; cursor:pointer; color:var(--fg-mute);
             border-bottom:2px solid transparent; }
.modal-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.toast-wrap { position:fixed; bottom:20px; right:20px; z-index:200;
              display:flex; flex-direction:column; gap:8px; }
.toast { padding:10px 16px; border-radius:8px; background:var(--bg-2);
         border:1px solid var(--border); font-size:13px; box-shadow:var(--shadow);
         animation:slide .2s; max-width:380px; }
@keyframes slide { from { transform:translateY(8px); opacity:0 } }
.toast.ok    { border-color:var(--green-dim); }
.toast.error { border-color:var(--red); }
.toast.warn  { border-color:var(--amber); }
.banner { padding:8px 14px; background:rgba(243,156,18,.12);
          border-bottom:1px solid rgba(243,156,18,.35); color:var(--amber);
          font-size:12.5px; display:flex; align-items:center; gap:10px; }
.empty { color:var(--fg-mute); font-size:12.5px; text-align:center; padding:24px 12px; }
.ctx-menu { position:fixed; z-index:9999; min-width:200px; padding:4px;
            background:var(--bg-1); border:1px solid var(--border-hi);
            border-radius:8px; box-shadow:0 12px 32px rgba(0,0,0,.55); }
.ctx-item { padding:7px 12px; border-radius:6px; font-size:13px; cursor:pointer; color:var(--fg); }
.ctx-item:hover { background:var(--accent-2); color:#fff; }
.ctx-item.danger { color:var(--red); }
.ctx-item.danger:hover { background:var(--red); color:#fff; }
.ctx-sep { height:1px; background:var(--border); margin:4px 6px; }
.node-tooltip { position:fixed; z-index:9999; pointer-events:none;
                max-width:280px; padding:8px 12px; background:var(--bg-2);
                border:1px solid var(--border-hi); border-radius:8px;
                font-size:12px; color:var(--fg); box-shadow:0 6px 20px rgba(0,0,0,.5); }
.node-tooltip .tt-title { font-size:10px; color:var(--fg-mute);
                          text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.file-list { display:flex; flex-direction:column; gap:6px; }
.file-row { display:flex; align-items:center; gap:10px; padding:10px 12px;
            background:var(--bg-2); border:1px solid var(--border); border-radius:8px; flex-wrap:wrap; }
.file-row .fname { font-family:var(--mono); font-size:13px; flex:1;
                   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:100px; }
.file-row .fmeta { font-size:11px; color:var(--fg-mute); flex:0 0 auto; }
.qr-wrap { display:flex; flex-direction:column; align-items:center; gap:12px;
           padding:14px; background:#fff; border-radius:10px; margin-bottom:16px; }
.qr-wrap img { display:block; width:220px; height:220px; }
.secret-box { font-family:var(--mono); font-size:12px; padding:8px 12px;
              background:var(--bg-2); border:1px solid var(--border); border-radius:6px;
              word-break:break-all; }
.mobile-only { display:none; }
.sidebar-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:140;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.sidebar-backdrop.show { opacity:1; pointer-events:auto; }
@media (max-width: 900px) {
  .shell.mobile { height: 100vh; height: 100dvh;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box; }
  .sidebar { position: fixed; top: 0; left: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 150; width: 86vw; max-width: 340px;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 6px 0 24px rgba(0,0,0,.55); border-right: 1px solid var(--border-hi); }
  .sidebar.open { transform: translateX(0); }
  .rightbar { position: fixed; top: 0; right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 150; width: 92vw; max-width: 380px;
    transform: translateX(100%); transition: transform .22s ease;
    box-shadow: -6px 0 24px rgba(0,0,0,.55); border-left: 1px solid var(--border-hi); }
  .rightbar.open { transform: translateX(0); }
  .sidebar-backdrop { z-index: 140; }
  .panel-toggle { display: none !important; }
  .mobile-only { display: inline-flex; }
  .topbar { padding: 6px 10px calc(6px + env(safe-area-inset-top, 0px)); gap: 6px; min-height: 48px; }
  .topbar .user { display: none; }
  .topbar .btn.ghost { padding: 8px 10px; font-size: 15px; min-height: 38px; }
  .brand { font-size: 13px; }
  .editor-tabs { padding: 8px 10px 0; gap: 4px; }
  .tab { padding: 10px 14px; font-size: 13px; }
  .view-toggle { padding: 8px 10px; gap: 8px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .view-toggle::-webkit-scrollbar { display: none; }
  .tool-btn { min-height: 38px; padding: 8px 12px; font-size: 13px; flex: 0 0 auto; }
  .btn { min-height: 38px; padding: 9px 14px; font-size: 13px; }
  .btn.sm { min-height: 34px; padding: 7px 12px; font-size: 12px; }
  .tool-select { min-height: 38px; font-size: 13px; }
  .tool-sep { display: none; }
  :root { --NODE_W: 118px; }
  .graph-node { width: 118px; min-height: 50px; padding: 4px 8px; }
  .gnode-name { font-size: 12px; }
  .gnode-icon svg { height: 20px; width: 40px; }
  .port { width: 20px; height: 20px; }
  .port.in  { left: -11px; }
  .port.out { right: -11px; }
  .port.plus { width: 18px; height: 18px; font-size: 13px; }
  .graph-wire-hit { stroke-width: 26; }
  .graph-canvas { touch-action: pan-x pan-y; }
  .sim-toolbar { padding: 8px 10px; gap: 6px; flex-wrap: wrap; row-gap: 8px; }
  .sim-toolbar .btn { flex: 1 1 auto; min-width: 66px; min-height: 40px; }
  .sim-toolbar .speed-group { flex: 1 1 100%; }
  .sim-toolbar input[type=range] { width: 100%; }
  .sim-io-bar { padding: 8px 10px; gap: 8px; }
  .sim-io-group { padding: 6px 8px; gap: 6px; }
  .sim-io-btn { padding: 8px 10px; min-width: 44px; min-height: 36px; font-size: 12px; }
  .panel-body { max-height: 240px; }
  .modal-back { align-items: flex-end !important; padding: 0 !important; z-index: 220 !important; }
  .modal, .modal.wide { max-width: 100% !important; max-height: 92dvh;
    border-radius: 16px 16px 0 0; border-bottom: none; margin: 0; width: 100% !important; }
  .modal-head { padding: 14px 16px; font-size: 15px; }
  .modal-body { padding: 14px 16px; }
  .modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; min-width: 110px; }
  .modal-tabs { overflow-x: auto; scrollbar-width: none; }
  .modal-tabs::-webkit-scrollbar { display: none; }
  .modal-tab { padding: 12px 14px; font-size: 12px; }
  input, select, textarea { font-size: 16px !important; }
  .field input, .field textarea, .field select { padding: 11px 13px; }
  .field label { font-size: 12.5px; }
  .watch-table th, .watch-table td { padding: 10px 8px; font-size: 12.5px; }
  .file-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; }
  .file-row .fname { white-space: normal; word-break: break-all; }
  .file-row .btn { width: 100%; justify-content: center; }
  .search-wrap { padding: 8px 10px; }
  .search-wrap input { padding: 11px 12px; font-size: 16px; }
  .pal-item { padding: 12px 12px 12px 22px; font-size: 14px; }
  .pal-head { padding: 10px 12px 10px 14px; font-size: 12px; }
  .btn, .tool-btn, .mobile-nav-item, .tab, .pal-item, .sim-io-btn,
  input, select, textarea, button { touch-action: manipulation; }
}
.device-info-table { width:100%; border-collapse:collapse; font-size:13px; }
.device-info-table td { padding:6px 8px; border-bottom:1px solid var(--bg-2); font-family:var(--mono); }
.device-info-table td.k { color:var(--fg-mute); font-family:var(--sans); width:45%; }
.device-info-table tr:last-child td { border-bottom:none; }
.info-chip { display:inline-block; padding:3px 8px; border-radius:6px; background:var(--bg-2);
             border:1px solid var(--border); font-family:var(--mono); font-size:11.5px;
             margin:2px 4px 2px 0; }


/* =========================================================================
   Mobile bottom navigation (phones only)
   ========================================================================= */
.mobile-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg-1); border-top: 1px solid var(--border-hi);
  display: flex; align-items: stretch; z-index: 180;
  box-shadow: 0 -4px 16px rgba(0,0,0,.35);
  user-select: none; -webkit-user-select: none;
}
.mobile-nav-item {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  padding: 6px 4px; background: transparent; border: 0;
  color: var(--fg-dim); cursor: pointer;
  transition: background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mobile-nav-item:active { background: var(--bg-2); }
.mobile-nav-item.active { color: var(--accent); }
.mobile-nav-item.disabled, .mobile-nav-item:disabled { opacity: .35; cursor: not-allowed; }
.mobile-nav-item.active::before {
  content: ''; position: absolute; top: 0; left: 22%; right: 22%;
  height: 2px; background: var(--accent);
  border-radius: 0 0 3px 3px; box-shadow: 0 0 8px var(--accent);
}
.mnav-icon { font-size: 22px; line-height: 1; font-weight: 500; }
.mnav-label { font-size: 10px; font-weight: 600; letter-spacing: .3px;
              text-transform: uppercase; line-height: 1; }

/* =========================================================================
   Node "..." menu button — mobile only
   ========================================================================= */
.node-menu-btn {
  position: absolute; top: -10px; right: -10px;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: var(--bg-1); border: 1.5px solid var(--border-hi);
  color: var(--fg-dim); font-size: 15px; font-weight: 700; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 15; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  touch-action: manipulation;
}
.node-menu-btn:active { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }

/* =========================================================================
   Landscape phones
   ========================================================================= */
@media (max-width: 900px) and (orientation: landscape) {
  .shell.mobile { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
  .mobile-nav { height: calc(44px + env(safe-area-inset-bottom, 0px)); }
  .mnav-icon { font-size: 16px; }
  .mnav-label { display: none; }
  .topbar { padding: 4px 8px; min-height: 40px; }
  .brand span:not(.dot) { display: none; }
  .editor-tabs { padding: 4px 8px 0; }
  .tab { padding: 6px 10px; }
  .view-toggle { padding: 4px 8px; gap: 4px; }
  .tool-btn { min-height: 32px; padding: 5px 8px; font-size: 12px; }
  .btn { min-height: 32px; padding: 6px 10px; font-size: 12px; }
  .btn.sm { min-height: 28px; padding: 4px 8px; font-size: 11px; }
  .panel-body { max-height: 160px; }
  .sim-io-bar { padding: 4px 8px; }
  .sim-io-btn { padding: 6px 8px; min-width: 34px; min-height: 30px; }
  .sim-toolbar .btn { min-height: 32px; }
  .port { width: 16px; height: 16px; }
}

/* =========================================================================
   Very small phones
   ========================================================================= */
@media (max-width: 420px) {
  :root { --NODE_W: 108px; }
  .graph-node { width: 108px; }
  .topbar .btn.ghost { padding: 6px 8px; font-size: 14px; }
  .tab { padding: 8px 10px; font-size: 12px; }
  .tool-btn { padding: 7px 9px; font-size: 12px; }
  .mnav-label { font-size: 9px; }
  .mnav-icon { font-size: 20px; }
  .brand { font-size: 12px; }
  .modal { max-height: 95dvh; }
}

@media (max-width: 900px) and (hover: none) {
  .modal-head button[title="Close"] { display: none; }
}


/* ==== mobile touch ============================================ */
@media (max-width: 900px) {
  .graph-node   { touch-action: none; }
  .port         { touch-action: none; }
  .node-menu-btn{ touch-action: manipulation; width:32px; height:32px;
                  font-size:18px; }
  .pal-item     { touch-action: manipulation; }
}


/* ==== Mobile "More" sheet ===================================== */
.mobile-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mobile-more-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 8px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--fg); cursor: pointer;
  font-size: 12px; font-weight: 600; min-height: 76px;
  font-family: inherit;
  touch-action: manipulation;
}
.mobile-more-item:active { background: var(--bg-3); }
.mobile-more-item.danger { color: var(--red); border-color: rgba(231,76,60,.4); }
.mmi-icon { font-size: 22px; line-height: 1; }
.mmi-label { text-align: center; }
@media (max-width: 420px) { .mobile-more-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }


/* ==== watch add button (mobile) =============================== */
@media (max-width: 900px) {
  .watch-add-btn {
    min-width: 40px; min-height: 40px;
    padding: 0 12px; font-size: 22px; line-height: 1;
    touch-action: manipulation;
  }
  .sidebar.open, .rightbar.open { pointer-events: auto; }
  .sidebar, .rightbar { pointer-events: auto; }
  .sidebar-backdrop { z-index: 140; }
}


/* ==== device-card long-press ================================== */
@media (max-width: 900px) {
  .device-card {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }
  .device-card .uid, .device-card .name {
    -webkit-user-select: none;
    user-select: none;
  }
}


/* ==== topbar dropdown menus ==================================== */
.topbar-menu-btn { font-size: 13px; padding: 6px 10px; }
.topbar-menu .ctx-item { padding: 9px 12px; }
.topbar-menu .ctx-item.disabled { opacity: .45; cursor: not-allowed; }
.topbar-menu .ctx-item.disabled:hover { background: transparent; color: var(--fg); }

/* ==== mobile toast — top-left behind the Compile button ======== */
@media (max-width: 900px) {
  .toast-wrap {
    bottom: auto;
    top: calc(54px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: auto;
    align-items: flex-start;
    max-width: calc(100vw - 20px);
  }
  .toast { max-width: calc(100vw - 20px); }
  .topbar-menu-btn { padding: 6px 8px; font-size: 12px; min-height: 36px; }
}

/* ==== print: hide chrome ======================================= */
@media print {
  .topbar, .sidebar, .rightbar, .sim-toolbar, .sim-io-bar,
  .view-toggle, .mobile-nav, .panel-toggle, .toast-wrap { display: none !important; }
  .canvas-wrap { position: static; height: auto; }
  .graph-canvas { overflow: visible; height: auto; }
}


/* ==== analog channel input ==================================== */
.sim-io-group.bank-A .sim-io-label { color: var(--bank-A); }
.sim-io-analog {
  width: 74px; padding: 5px 6px; font-family: var(--mono); font-size: 12px;
  background: var(--bg); color: var(--bank-A); font-weight: 700;
  border: 1px solid var(--border); border-radius: 5px; text-align: center;
  outline: none;
}
.sim-io-analog:focus { border-color: var(--bank-A); }
.graph-node.bank-A { border-color: var(--bank-A); background: color-mix(in oklab, var(--bank-A) 10%, var(--bg-2)); }
.graph-node.bank-A .gnode-name { color: var(--bank-A); }


/* ==== ANA section bar (analog group) ========================== */
.pal-group[data-group*="analog"] .pal-head {
  color: var(--bank-A) !important;
  border-left-color: var(--bank-A) !important;
}
.pal-item.bank-A { border-left-color: var(--bank-A); }

/* ANA applied instruction: teal tint to make it stand apart */
.graph-node.type-applied.bank-A {
  border-color: var(--bank-A);
  background: color-mix(in oklab, var(--bank-A) 12%, var(--bg-2));
}
/* ==== palette group colour mapping =======================================
   Every section's header bar matches the colour of the items inside it.
   Text colour is kept neutral (grey) so the bar is what carries the
   meaning; only the ANALOGS section gets a highlighted label because its
   near-white bar disappears on some displays. */

/* Inputs (X) — emerald */
.pal-group[data-group*="input"] .pal-head,
.pal-item.bank-X { border-left-color: var(--bank-X) !important; }

/* Outputs (Y) — amber */
.pal-group[data-group*="output"] .pal-head,
.pal-item.bank-Y { border-left-color: var(--bank-Y) !important; }

/* Internal (M) — sky blue */
.pal-group[data-group*="internal"] .pal-head,
.pal-item.bank-M { border-left-color: var(--bank-M) !important; }

/* Analogs (ANA) — near-white (matches the A bank, but as a light neutral) */
.pal-group[data-group*="analog"] .pal-head,
.pal-item.bank-A { border-left-color: var(--fg) !important; }
.pal-group[data-group*="analog"] .pal-head { color: var(--fg) !important; }

/* Timers (T) — rose */
.pal-group[data-group*="timer"] .pal-head,
.pal-item.bank-T { border-left-color: var(--bank-T) !important; }

/* Counters (C) — orange */
.pal-group[data-group*="counter"] .pal-head,
.pal-item.bank-C { border-left-color: var(--bank-C) !important; }

/* Math / Data / Compare all operate on D registers — violet */
.pal-group[data-group*="math"] .pal-head,
.pal-group[data-group*="data"] .pal-head,
.pal-group[data-group*="compare"] .pal-head,
.pal-item.bank-D { border-left-color: var(--bank-D) !important; }

/* Logic — neutral grey, matching the .pal-item.gate bar */
.pal-group[data-group*="logic"] .pal-head,
.pal-item.gate { border-left-color: var(--border-hi) !important; }

/* Header text stays neutral for every group so the bar is the signal */
.pal-group .pal-head { color: var(--fg-mute); }


/* ==== saved-indicator + Deploy & Run ========================== */
.saved-indicator {
  font-family: var(--mono); font-size: 11px; color: var(--fg-mute);
  white-space: nowrap; margin-right: 6px; letter-spacing: .3px;
  padding: 4px 8px; border-radius: 4px;
  background: color-mix(in oklab, var(--fg) 4%, transparent);
}
.saved-indicator:empty { display: none; }

.btn-deploy-run {
  border-color: var(--green) !important;
  color: var(--green) !important;
}
.btn-deploy-run:hover:not(:disabled) {
  background: color-mix(in oklab, var(--green) 18%, transparent) !important;
}

@media (max-width: 900px) {
  .saved-indicator { display: none !important; }
  .btn-deploy-run  { display: none !important; }
}


/* ==== topbar: centered project name =========================== */
.project-name-display {
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  padding: 4px 12px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  border: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
  letter-spacing: .3px;
}
.project-name-display:empty { display: none; }

/* ==== topbar: action button styles ============================ */
.topbar-btn {
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}

/* Compile — blue */
.topbar-btn-compile {
  background: rgba(88,166,255,.12);
  border-color: rgba(88,166,255,.45);
  color: var(--accent);
}
.topbar-btn-compile:hover:not(:disabled) {
  background: rgba(88,166,255,.22);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(88,166,255,.30);
}

/* Deploy — amber */
.topbar-btn-deploy {
  background: rgba(243,156,18,.12);
  border-color: rgba(243,156,18,.45);
  color: var(--amber);
}
.topbar-btn-deploy:hover:not(:disabled) {
  background: rgba(243,156,18,.22);
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(243,156,18,.30);
}

/* Deploy & Run — green, emphasised */
.topbar-btn-deploy-run {
  background: rgba(46,204,113,.14);
  border-color: var(--green);
  color: var(--green);
  font-weight: 700;
}
.topbar-btn-deploy-run:hover:not(:disabled) {
  background: rgba(46,204,113,.26);
  border-color: var(--green);
  box-shadow: 0 0 10px rgba(46,204,113,.40);
}

/* Override the old .btn-deploy-run rule if it's still around */
.btn-deploy-run { background: transparent; border-color: var(--border); color: inherit; }

@media (max-width: 900px) {
  .project-name-display { display: none; }
  .topbar-btn { padding: 6px 8px; }
}


/* ==== inline project name editor ============================== */
.project-name-display {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.project-name-display.editing {
  background: var(--bg-1) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(88,166,255,.20);
  padding: 0 !important;
}
.project-name-input {
  width: 100%;
  padding: 3px 10px;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: var(--mono);
  font-weight: 600;
  text-align: center;
  outline: none;
  box-sizing: border-box;
}

/* Compile button: prevent long-press callout / selection on mobile */
.topbar-btn-compile {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Show the project name on mobile so users can tap / long-press to rename */
@media (max-width: 900px) {
  .project-name-display {
    display: inline-block !important;
    font-size: 11px;
    padding: 3px 8px;
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =========================================================================
   u_10_12-modal-overflow
   ---------------------------------------------------------------------------
   A flex child with overflow:auto does not shrink below its content size
   unless min-height:0 is also declared.  Without it, .modal-body grew past
   the modal frame when the Info or Variables tab produced many rows, and
   the content spilled over the rest of the page.
   ========================================================================= */
.modal {
  /* give the modal a hard upper bound that flex can respect */
  max-height: min(82vh, 900px);
  min-height: 0;
}
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.modal-tabs {
  flex: 0 0 auto;
}
.modal-head,
.modal-foot {
  flex: 0 0 auto;
}
/* Settings tab body wraps content in a plain div; keep it from growing the
   outer scroll container. */
.modal-body > div { min-height: 0; }

/* Info table can be very tall; keep it inside the scrollable body. */
.device-info-table td {
  word-break: break-word;
  vertical-align: top;
}
.device-info-table tr:last-child td { border-bottom: none; }

/* Same fix on mobile — modal is anchored to the bottom of the viewport
   there, so 92dvh is the hard ceiling. */
@media (max-width: 900px) {
  .modal,
  .modal.wide {
    max-height: 92dvh;
    min-height: 0;
  }
  .modal-body { min-height: 0; }
}

/* =========================================================================
   u_10_14-health — Device Health panel
   ========================================================================= */
.health-sec {
  margin: 10px 0 4px;
  padding: 2px 0 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fg-mute);
  border-bottom: 1px solid var(--border);
}
.health-sec:first-child { margin-top: 0; }
.health-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.5;
}
.health-label {
  color: var(--fg-dim);
  flex: 0 0 auto;
}
.health-value {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.health-row.health-warn .health-value { color: var(--amber); }
.health-row.health-bad  .health-value { color: var(--red); }

/* =========================================================================
   u_10_15-panels — collapsible sidebar sections + outer scroll
   ---------------------------------------------------------------------------
   The .rightbar is the only scroll container when several panels are
   expanded.  Each .panel-body flows freely (no internal cap) so the whole
   sidebar scrolls as one column.  Watch and Event log keep their own
   internal cap because their contents grow continuously.
   ========================================================================= */
.rightbar {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Body flows by default — no max-height, no internal scroll */
.panel-body {
  max-height: none;
  overflow-y: visible;
}

/* Optional cap for panels whose content is unbounded (Watch, Event log) */
.panel-body.capped {
  max-height: 40vh;
  overflow-y: auto;
}

/* Collapsed: hide the body, dim the head slightly */
.panel.collapsed .panel-body { display: none; }
.panel.collapsed .panel-head  { color: var(--fg-mute); }

/* Chevron rotates to point right when collapsed */
.panel-chevron {
  display: inline-block;
  width: 10px;
  font-size: 10px;
  line-height: 1;
  color: var(--fg-mute);
  transition: transform .12s ease;
  transform-origin: 50% 50%;
  text-align: center;
}
.panel.collapsed .panel-chevron { transform: rotate(-90deg); }

/* Head should always have enough click surface */
.panel-head {
  user-select: none;
  -webkit-user-select: none;
}
.panel-head:hover { background: var(--bg-2); }

/* Mobile: the drawer is fixed and already has a bottom bound — just keep
   the outer scroll and drop the panel-body cap a little tighter. */
@media (max-width: 900px) {
  .panel-body.capped { max-height: 32vh; }
}

/* =========================================================================
   u_11_1-manager — full-screen Device Manager
   ========================================================================= */
.manager-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); }
.manager-topbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--bg-1); flex: 0 0 auto; }
.manager-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.manager-brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.manager-body { flex: 1 1 auto; overflow-y: auto; padding: 28px 24px 60px; max-width: 1400px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.manager-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.manager-header h1 { font-size: 24px; margin: 0 0 2px; font-weight: 700; letter-spacing: -.3px; }
.manager-sub { margin: 0; color: var(--fg-dim); font-size: 13px; }
.manager-add-btn { padding: 10px 18px; font-weight: 600; }
.manager-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-hi); }
.stat-card.stat-green::before  { background: var(--green); }
.stat-card.stat-blue::before   { background: var(--accent); }
.stat-card.stat-red::before    { background: var(--red); }
.stat-value { font-size: 26px; font-weight: 700; font-family: var(--mono); line-height: 1; color: var(--fg); }
.stat-green .stat-value { color: var(--green); }
.stat-blue  .stat-value { color: var(--accent); }
.stat-red   .stat-value { color: var(--red); }
.stat-label { font-size: 11px; color: var(--fg-mute); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.manager-filters { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.manager-search { flex: 1 1 280px; min-width: 200px; padding: 10px 14px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; color: var(--fg); font-size: 14px; outline: none; }
.manager-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,.12); }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 7px 14px; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--border); color: var(--fg-dim); font-size: 12.5px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.chip:hover { background: var(--bg-2); color: var(--fg); }
.chip.active { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.manager-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.mgr-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; transition: border-color .12s, box-shadow .12s; position: relative; }
.mgr-card.online:hover { border-color: var(--border-hi); box-shadow: 0 4px 20px rgba(0,0,0,.35); }
.mgr-card.unpaired { opacity: .85; }
.mgr-card-head { display: flex; align-items: center; gap: 10px; }
.mgr-status-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--fg-mute); box-shadow: 0 0 0 3px color-mix(in oklab, var(--fg-mute) 20%, transparent); }
.mgr-status-dot.run     { background: var(--green); box-shadow: 0 0 0 3px rgba(46,204,113,.25), 0 0 12px rgba(46,204,113,.55); }
.mgr-status-dot.stop    { background: var(--amber); box-shadow: 0 0 0 3px rgba(243,156,18,.25); }
.mgr-status-dot.pause   { background: var(--amber); box-shadow: 0 0 0 3px rgba(243,156,18,.25); }
.mgr-status-dot.fault   { background: var(--red);   box-shadow: 0 0 0 3px rgba(231,76,60,.30); }
.mgr-status-dot.offline { background: var(--fg-mute); }
.mgr-status-dot.unpaired { background: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,.25); }
.mgr-card-title { flex: 1 1 auto; min-width: 0; }
.mgr-card-name { font-size: 15px; font-weight: 600; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-card-uid { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-card-menu { width: 30px; height: 30px; padding: 0; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--fg-dim); cursor: pointer; font-size: 20px; line-height: 1; }
.mgr-card-menu:hover { background: var(--bg-2); border-color: var(--border); color: var(--fg); }
.mgr-card-info { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--fg-dim); }
.mgr-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow: hidden; }
.mgr-sep { color: var(--fg-mute); }
.mgr-label { color: var(--fg-mute); }
.mgr-program span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.mgr-online-dot { font-size: 11px; }
.mgr-online-dot.on  { color: var(--green); }
.mgr-online-dot.off { color: var(--fg-mute); }
.mgr-detail-line { color: var(--fg-mute); font-size: 12px; }
.mgr-detail-line .info-chip { margin: 0; }
.mgr-card-actions { display: flex; gap: 6px; margin-top: 2px; }
.mgr-btn { flex: 1 1 0; justify-content: center; font-size: 12.5px; padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--border); color: var(--fg); border-radius: 6px; font-weight: 500; }
.mgr-btn:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.mgr-unpaired-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px; background: rgba(88,166,255,.10); border: 1px solid rgba(88,166,255,.30); color: var(--accent); font-size: 12.5px; }
.manager-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 60px 20px; border: 2px dashed var(--border-hi); border-radius: 12px; color: var(--fg-dim); text-align: center; }
.manager-empty .empty-icon { font-size: 42px; color: var(--fg-mute); line-height: 1; }
.manager-empty h2 { font-size: 18px; margin: 4px 0 0; color: var(--fg); }
.manager-empty p { margin: 0 0 10px; font-size: 13px; }
.topbar-back-btn { margin-right: 4px; font-weight: 600; }
/* u_12_4 — device name pinned to the left of the project name in the
   topbar. Deliberately NOT interactive: no hover-affordance styling that
   would suggest it can be clicked/edited, unlike .project-name-display. */
.topbar-device-name {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--fg-dim);
  padding: 4px 2px; white-space: nowrap; overflow: hidden;
  max-width: 220px; flex: 0 1 auto;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: default;
}
.topbar-device-name-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--fg-mute);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--fg-mute) 25%, transparent);
}
.topbar-device-name-dot.online  { background: var(--green); box-shadow: 0 0 0 2px rgba(46,204,113,.25); }
.topbar-device-name-dot.run     { background: var(--green); box-shadow: 0 0 0 2px rgba(46,204,113,.30), 0 0 7px rgba(46,204,113,.7); }
.topbar-device-name-dot.stop    { background: var(--amber); box-shadow: 0 0 0 2px rgba(243,156,18,.30); }
.topbar-device-name-dot.pause   { background: var(--amber); box-shadow: 0 0 0 2px rgba(243,156,18,.30); }
.topbar-device-name-dot.fault   { background: var(--red);   box-shadow: 0 0 0 2px rgba(231,76,60,.30); }
.topbar-device-name-dot.offline { background: var(--fg-mute); }
.topbar-device-name-dot.unpaired{ background: var(--accent); box-shadow: 0 0 0 2px rgba(88,166,255,.30); }
.topbar-device-name-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg);
}
.topbar-device-name-sep { color: var(--border-hi); font-weight: 400; margin-left: 2px; }
@media (max-width: 900px) {
  .topbar-device-name { max-width: 120px; font-size: 12px; }
  .topbar-device-name-sep { display: none; }
}
@media (max-width: 420px) {
  .topbar-device-name { max-width: 84px; }
  .topbar-device-name-text { display: none; }
}
@media (max-width: 900px) {
  .manager-body { padding: 14px 10px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .manager-topbar { padding: 10px 12px calc(8px + env(safe-area-inset-top, 0px)); }
  .manager-topbar .btn.ghost { min-height: 40px; min-width: 40px; padding: 8px 10px; font-size: 15px; touch-action: manipulation; }
  .manager-brand { font-size: 13px; }
  .manager-header { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 16px; }
  .manager-header h1 { font-size: 19px; }
  .manager-sub { font-size: 12.5px; }
  .manager-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
  .stat-card { padding: 10px 12px; }
  .stat-value { font-size: 20px; }
  .manager-grid { grid-template-columns: 1fr; gap: 12px; }
  .manager-filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .manager-search { flex-basis: auto; width: 100%; min-height: 42px; font-size: 16px; touch-action: manipulation; }
  .manager-add-btn { width: 100%; justify-content: center; min-height: 44px; font-size: 14px; }
  .filter-chips { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 2px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; padding: 9px 14px; font-size: 12.5px; min-height: 36px;
    touch-action: manipulation; }

  /* Cards: bigger everything, generous hit areas, no reliance on hover */
  .mgr-card { padding: 14px; gap: 10px; border-radius: 14px; touch-action: manipulation;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .mgr-card-name { font-size: 16px; }
  .mgr-card-menu { width: 40px; height: 40px; font-size: 22px; touch-action: manipulation; }
  .mgr-card-info { font-size: 13px; gap: 8px; }
  .mgr-program span:last-child { max-width: 60vw; }
  .mgr-card-state { gap: 8px; }
  .mgr-state-btn { min-height: 44px; font-size: 12.5px; touch-action: manipulation; }
  .mgr-card-actions { gap: 8px; }
  .mgr-btn { min-height: 42px; font-size: 13px; touch-action: manipulation; }
  .mgr-unpaired-banner { flex-direction: column; align-items: stretch; text-align: center; gap: 8px; }
  .mgr-unpaired-banner .btn { min-height: 40px; }
  .manager-empty { padding: 40px 16px; }
  .manager-empty .btn { min-height: 44px; width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .manager-stats { grid-template-columns: repeat(2, 1fr); }
  .mgr-card-actions { flex-wrap: wrap; }
  .mgr-btn { flex: 1 1 45%; }
}

/* =========================================================================
   u_11_1d-state — quick state buttons on manager cards
   ========================================================================= */
.mgr-card-state {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.mgr-state-btn {
  flex: 1 1 0;
  justify-content: center;
  font-size: 11.5px;
  padding: 7px 8px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--mono);
}
.mgr-state-btn.run:hover:not(:disabled)  { background: rgba(46,204,113,.20); border-color: var(--green); color: var(--green); }
.mgr-state-btn.run.active                { background: var(--green); color: #001a0d; border-color: var(--green);
                                           box-shadow: 0 0 10px rgba(46,204,113,.45); }
.mgr-state-btn.stop:hover:not(:disabled) { background: rgba(231,76,60,.20); border-color: var(--red); color: var(--red); }
.mgr-state-btn.stop.active               { background: var(--red); color: #fff; border-color: var(--red);
                                           box-shadow: 0 0 10px rgba(231,76,60,.45); }
.mgr-state-btn.reset:hover:not(:disabled){ background: rgba(243,156,18,.20); border-color: var(--amber); color: var(--amber); }
.mgr-state-btn:disabled                  { opacity: .40; cursor: not-allowed; }

.ctx-item.disabled { opacity: .45; cursor: not-allowed; }
.ctx-item.disabled:hover { background: transparent; color: var(--fg-dim); }
@media (max-width: 900px) {
  .ctx-menu { min-width: 220px; padding: 6px; max-width: calc(100vw - 24px); }
  .ctx-item { padding: 12px 14px; font-size: 14px; min-height: 44px; display: flex; align-items: center;
    touch-action: manipulation; }
}

/* =========================================================================
   u_11_1g-pill — professional topbar pill + device switcher
   ========================================================================= */
.topbar-device-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s, box-shadow .12s;
  white-space: nowrap;
  flex: 0 0 auto;
  font-family: var(--sans);
  letter-spacing: .2px;
}
.topbar-device-pill:hover {
  background: var(--bg-3);
  border-color: var(--border-hi);
}
.topbar-device-pill:active { transform: translateY(1px); }
.topbar-device-pill .device-pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-mute);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--fg-mute) 25%, transparent);
  transition: background .2s, box-shadow .2s;
}
.topbar-device-pill .device-pill-dot.online  { background: var(--green);  box-shadow: 0 0 0 2px rgba(46,204,113,.25); }
.topbar-device-pill .device-pill-dot.run     { background: var(--green);  box-shadow: 0 0 0 2px rgba(46,204,113,.30), 0 0 8px rgba(46,204,113,.70); }
.topbar-device-pill .device-pill-dot.stop    { background: var(--amber);  box-shadow: 0 0 0 2px rgba(243,156,18,.30); }
.topbar-device-pill .device-pill-dot.pause   { background: var(--amber);  box-shadow: 0 0 0 2px rgba(243,156,18,.30); }
.topbar-device-pill .device-pill-dot.fault   { background: var(--red);    box-shadow: 0 0 0 2px rgba(231,76,60,.30); }
.topbar-device-pill .device-pill-dot.offline { background: var(--fg-mute); }
.topbar-device-pill .device-pill-dot.unpaired{ background: var(--accent); box-shadow: 0 0 0 2px rgba(88,166,255,.30); }
.topbar-device-pill .device-pill-label {
  letter-spacing: .2px;
}
/* u_12_5 — the chevron is the dedicated "switch device" control, so it
   gets its own visible, comfortably-sized tap target (was a bare 9px
   glyph that was easy to miss, especially on touch). */
.topbar-device-pill .device-pill-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--fg-dim);
  margin-left: 3px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 6px;
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  border: 1px solid transparent;
  transition: transform .15s ease, color .12s, background .12s, border-color .12s;
}
.topbar-device-pill .device-pill-chevron:hover {
  color: #fff;
  background: var(--accent-2);
  border-color: var(--accent-2);
}
@media (max-width: 900px) {
  .topbar-device-pill .device-pill-chevron {
    min-width: 32px; min-height: 32px; font-size: 17px;
    touch-action: manipulation;
  }
}

/* Device switcher dropdown */
.device-switcher {
  position: fixed;
  z-index: 9998;
  min-width: 300px;
  max-width: 380px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  padding: 6px;
  animation: switcherIn .12s ease;
}
@keyframes switcherIn {
  from { opacity: 0; transform: translateY(-4px); }
}
.device-switcher-header {
  padding: 8px 12px 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--fg-mute);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.device-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .1s;
}
.device-switcher-item:hover { background: var(--bg-2); }
.device-switcher-item.current {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.device-switcher-item.current .sw-name { color: var(--accent); }
.device-switcher-item.current::after {
  content: '\2713';
  color: var(--accent);
  font-weight: 700;
  margin-left: auto;
  font-size: 14px;
}
.device-switcher-item .sw-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--fg-mute);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--fg-mute) 22%, transparent);
}
.device-switcher-item .sw-dot.online  { background: var(--green);  box-shadow: 0 0 0 2px rgba(46,204,113,.25); }
.device-switcher-item .sw-dot.run     { background: var(--green);  box-shadow: 0 0 0 2px rgba(46,204,113,.30), 0 0 6px rgba(46,204,113,.65); }
.device-switcher-item .sw-dot.stop    { background: var(--amber);  box-shadow: 0 0 0 2px rgba(243,156,18,.28); }
.device-switcher-item .sw-dot.pause   { background: var(--amber);  box-shadow: 0 0 0 2px rgba(243,156,18,.28); }
.device-switcher-item .sw-dot.fault   { background: var(--red);    box-shadow: 0 0 0 2px rgba(231,76,60,.30); }
.device-switcher-item .sw-dot.offline { background: var(--fg-mute); }
.device-switcher-item .sw-main {
  flex: 1 1 auto;
  min-width: 0;
}
.device-switcher-item .sw-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}
.device-switcher-item .sw-uid {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.device-switcher-item .sw-state {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--fg-dim);
  text-transform: uppercase;
  flex: 0 0 auto;
}
.device-switcher-item.current .sw-state {
  background: color-mix(in oklab, var(--accent) 20%, transparent);
  color: var(--accent);
}
.device-switcher-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}
.device-switcher-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--fg-dim);
  transition: background .1s, color .1s;
}
.device-switcher-action:hover {
  background: var(--bg-2);
  color: var(--fg);
}
.device-switcher-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--fg-mute);
  font-size: 12px;
  line-height: 1.5;
}

/* Mobile: pill shrinks, chevron still tappable */
@media (max-width: 900px) {
  .topbar-device-pill { padding: 5px 8px; font-size: 12px; }
  .topbar-device-pill .device-pill-label { display: none; }
  .topbar-device-pill .device-pill-chevron { margin-left: 0; }
  .device-switcher { min-width: 260px; max-width: calc(100vw - 24px); max-height: 50vh; }
  .device-switcher-item { padding: 12px 10px; min-height: 48px; touch-action: manipulation; }
  .device-switcher-action { padding: 12px 10px; min-height: 46px; touch-action: manipulation; }
  .sw-name { font-size: 14px; }
}

/* =========================================================================
   u_11_1i-bound — single-device card shown in the workspace sidebar
   ========================================================================= */
.bound-device-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bound-device-card.offline { opacity: .82; }
.bd-head { display: flex; align-items: center; gap: 10px; }
.bd-title { min-width: 0; flex: 1 1 auto; }
.bd-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-uid { font-family: var(--mono); font-size: 10.5px; color: var(--fg-mute); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-info { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--fg-dim); }
.bd-row { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.bd-program { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.bd-actions { display: flex; gap: 6px; }
.bd-actions .btn { flex: 1 1 0; justify-content: center; padding: 6px 8px; font-size: 11.5px; }
.bd-actions .btn.danger { background: rgba(231,76,60,.12); border-color: rgba(231,76,60,.35); color: var(--red); }
.bd-actions .btn.danger:hover:not(:disabled) { background: var(--red); color: #fff; border-color: var(--red); }

/* =========================================================================
   u_11_4-quiet — debug-off indicator
   ========================================================================= */
.mgr-card.quiet,
.bound-device-card.quiet {
  border-left: 3px solid var(--amber);
}
.mgr-card.quiet::after {
  content: 'QUIET';
  position: absolute;
  top: 10px; right: 48px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--amber);
  background: rgba(243,156,18,.15);
  border: 1px solid rgba(243,156,18,.40);
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}
.bound-device-card.quiet .bd-head::after {
  content: 'QUIET';
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--amber);
  background: rgba(243,156,18,.15);
  border: 1px solid rgba(243,156,18,.40);
  padding: 2px 5px;
  border-radius: 3px;
}
.monitor-quiet-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(243,156,18,.10);
  border-top: 1px solid rgba(243,156,18,.35);
  border-bottom: 1px solid rgba(243,156,18,.35);
  color: var(--amber);
  font-size: 12.5px;
  flex: 0 0 auto;
}
.monitor-quiet-banner .mqb-icon { font-size: 16px; }
.monitor-quiet-banner .mqb-text { flex: 1 1 auto; }
.monitor-quiet-banner .btn { flex: 0 0 auto; }

/* u_11_6 — Monitor divergence pill */
.monitor-diverged-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(243,156,18,.10);
  border-bottom: 1px solid rgba(243,156,18,.35);
  color: var(--amber);
  font-size: 12.5px;
  flex: 0 0 auto;
}
.monitor-diverged-pill .mdp-icon { font-size: 16px; }
.monitor-diverged-pill .mdp-text { flex: 1 1 auto; }

/* =========================================================================
   u_11_7-themes — 10 additional themes on top of Dark + White.
   Each block overrides the same set of tokens so components pick up the
   new palette automatically.  Adding a theme = one block + one entry in
   State.availableThemes.
   ========================================================================= */

/* ---- Dracula (#282a36 bg, #f8f8f2 fg, #bd93f9 accent) ---- */
[data-theme="dracula"] {
  --bg:#191a21; --bg-1:#21222c; --bg-2:#282a36; --bg-3:#343746;
  --border:#44475a; --border-hi:#6272a4;
  --fg:#f8f8f2; --fg-dim:#c8cad6; --fg-mute:#6272a4;
  --accent:#bd93f9; --accent-2:#9d6fdb;
  --green:#50fa7b; --green-dim:#2ea84b; --amber:#ffb86c; --red:#ff5555; --purple:#bd93f9;
  --bank-X:#50fa7b; --bank-Y:#ffb86c; --bank-M:#8be9fd; --bank-D:#bd93f9;
  --bank-T:#ff79c6; --bank-C:#ffb86c; --bank-S:#8be9fd; --bank-K:#6272a4;
  --bank-P:#ff79c6; --bank-I:#50fa7b; --bank-F:#bd93f9; --bank-A:#8be9fd;
  --shadow:0 10px 30px rgba(0,0,0,.65);
}

/* ---- Nord (#2e3440 bg, #d8dee9 fg, #88c0d0 accent) ---- */
[data-theme="nord"] {
  --bg:#242933; --bg-1:#2e3440; --bg-2:#3b4252; --bg-3:#434c5e;
  --border:#4c566a; --border-hi:#5e6a7d;
  --fg:#eceff4; --fg-dim:#d8dee9; --fg-mute:#7a889c;
  --accent:#88c0d0; --accent-2:#5e81ac;
  --green:#a3be8c; --green-dim:#6c8f56; --amber:#ebcb8b; --red:#bf616a; --purple:#b48ead;
  --bank-X:#a3be8c; --bank-Y:#ebcb8b; --bank-M:#81a1c1; --bank-D:#b48ead;
  --bank-T:#bf616a; --bank-C:#d08770; --bank-S:#88c0d0; --bank-K:#7a889c;
  --bank-P:#b48ead; --bank-I:#a3be8c; --bank-F:#b48ead; --bank-A:#88c0d0;
  --shadow:0 10px 30px rgba(0,0,0,.55);
}

/* ---- Monokai (#272822 bg, #f8f8f2 fg, #a6e22e accent) ---- */
[data-theme="monokai"] {
  --bg:#1e1f1c; --bg-1:#272822; --bg-2:#3e3d32; --bg-3:#49483e;
  --border:#49483e; --border-hi:#75715e;
  --fg:#f8f8f2; --fg-dim:#cfcfc2; --fg-mute:#75715e;
  --accent:#a6e22e; --accent-2:#7eb320;
  --green:#a6e22e; --green-dim:#5f8f12; --amber:#e6db74; --red:#f92672; --purple:#ae81ff;
  --bank-X:#a6e22e; --bank-Y:#e6db74; --bank-M:#66d9ef; --bank-D:#ae81ff;
  --bank-T:#f92672; --bank-C:#fd971f; --bank-S:#66d9ef; --bank-K:#75715e;
  --bank-P:#ae81ff; --bank-I:#a6e22e; --bank-F:#ae81ff; --bank-A:#66d9ef;
  --shadow:0 10px 30px rgba(0,0,0,.55);
}

/* ---- Solarized Dark (#002b36 bg, #839496 fg, #268bd2 accent) ---- */
[data-theme="solarized"] {
  --bg:#00252e; --bg-1:#002b36; --bg-2:#073642; --bg-3:#094552;
  --border:#0d4f5f; --border-hi:#586e75;
  --fg:#eee8d5; --fg-dim:#93a1a1; --fg-mute:#586e75;
  --accent:#268bd2; --accent-2:#1a6ea8;
  --green:#859900; --green-dim:#5f6d00; --amber:#b58900; --red:#dc322f; --purple:#6c71c4;
  --bank-X:#859900; --bank-Y:#b58900; --bank-M:#268bd2; --bank-D:#6c71c4;
  --bank-T:#dc322f; --bank-C:#cb4b16; --bank-S:#2aa198; --bank-K:#586e75;
  --bank-P:#6c71c4; --bank-I:#859900; --bank-F:#6c71c4; --bank-A:#2aa198;
  --shadow:0 10px 30px rgba(0,0,0,.55);
}

/* ---- Catppuccin Mocha (#1e1e2e bg, #cdd6f4 fg, #89b4fa accent) ---- */
[data-theme="catppuccin"] {
  --bg:#11111b; --bg-1:#1e1e2e; --bg-2:#313244; --bg-3:#45475a;
  --border:#45475a; --border-hi:#585b70;
  --fg:#cdd6f4; --fg-dim:#bac2de; --fg-mute:#7f849c;
  --accent:#89b4fa; --accent-2:#74c7ec;
  --green:#a6e3a1; --green-dim:#4caf50; --amber:#f9e2af; --red:#f38ba8; --purple:#cba6f7;
  --bank-X:#a6e3a1; --bank-Y:#f9e2af; --bank-M:#89b4fa; --bank-D:#cba6f7;
  --bank-T:#f38ba8; --bank-C:#fab387; --bank-S:#94e2d5; --bank-K:#7f849c;
  --bank-P:#cba6f7; --bank-I:#a6e3a1; --bank-F:#cba6f7; --bank-A:#94e2d5;
  --shadow:0 10px 30px rgba(0,0,0,.55);
}

/* ---- Gruvbox Dark (#282828 bg, #ebdbb2 fg, #d79921 accent) ---- */
[data-theme="gruvbox"] {
  --bg:#1d2021; --bg-1:#282828; --bg-2:#32302f; --bg-3:#3c3836;
  --border:#504945; --border-hi:#665c54;
  --fg:#ebdbb2; --fg-dim:#d5c4a1; --fg-mute:#928374;
  --accent:#d79921; --accent-2:#b57614;
  --green:#98971a; --green-dim:#6d6c13; --amber:#d79921; --red:#cc241d; --purple:#b16286;
  --bank-X:#98971a; --bank-Y:#d79921; --bank-M:#458588; --bank-D:#b16286;
  --bank-T:#cc241d; --bank-C:#d65d0e; --bank-S:#689d6a; --bank-K:#928374;
  --bank-P:#b16286; --bank-I:#98971a; --bank-F:#b16286; --bank-A:#689d6a;
  --shadow:0 10px 30px rgba(0,0,0,.55);
}

/* ---- Rosé Pine (#191724 bg, #e0def4 fg, #eb6f92 accent) ---- */
[data-theme="rosepine"] {
  --bg:#16141f; --bg-1:#191724; --bg-2:#1f1d2e; --bg-3:#26233a;
  --border:#26233a; --border-hi:#403d52;
  --fg:#e0def4; --fg-dim:#908caa; --fg-mute:#6e6a86;
  --accent:#eb6f92; --accent-2:#c4a7e7;
  --green:#9ccfd8; --green-dim:#56949f; --amber:#f6c177; --red:#eb6f92; --purple:#c4a7e7;
  --bank-X:#9ccfd8; --bank-Y:#f6c177; --bank-M:#31748f; --bank-D:#c4a7e7;
  --bank-T:#eb6f92; --bank-C:#f6c177; --bank-S:#9ccfd8; --bank-K:#6e6a86;
  --bank-P:#c4a7e7; --bank-I:#9ccfd8; --bank-F:#c4a7e7; --bank-A:#9ccfd8;
  --shadow:0 10px 30px rgba(0,0,0,.55);
}

/* ---- GitHub Dark (#0d1117 bg, #c9d1d9 fg, #58a6ff accent) ---- */
[data-theme="github"] {
  --bg:#010409; --bg-1:#0d1117; --bg-2:#161b22; --bg-3:#21262d;
  --border:#30363d; --border-hi:#484f58;
  --fg:#c9d1d9; --fg-dim:#8b949e; --fg-mute:#6e7681;
  --accent:#58a6ff; --accent-2:#1f6feb;
  --green:#3fb950; --green-dim:#2da44e; --amber:#d29922; --red:#f85149; --purple:#a371f7;
  --bank-X:#3fb950; --bank-Y:#d29922; --bank-M:#58a6ff; --bank-D:#a371f7;
  --bank-T:#f85149; --bank-C:#db6d28; --bank-S:#33b3ae; --bank-K:#6e7681;
  --bank-P:#a371f7; --bank-I:#3fb950; --bank-F:#a371f7; --bank-A:#33b3ae;
  --shadow:0 10px 30px rgba(0,0,0,.65);
}

/* ---- Tokyo Night (#1a1b26 bg, #c0caf5 fg, #7aa2f7 accent) ---- */
[data-theme="tokyonight"] {
  --bg:#16161e; --bg-1:#1a1b26; --bg-2:#24283b; --bg-3:#2f334d;
  --border:#2f334d; --border-hi:#565f89;
  --fg:#c0caf5; --fg-dim:#a9b1d6; --fg-mute:#565f89;
  --accent:#7aa2f7; --accent-2:#2ac3de;
  --green:#9ece6a; --green-dim:#5c8b3e; --amber:#e0af68; --red:#f7768e; --purple:#bb9af7;
  --bank-X:#9ece6a; --bank-Y:#e0af68; --bank-M:#7aa2f7; --bank-D:#bb9af7;
  --bank-T:#f7768e; --bank-C:#ff9e64; --bank-S:#73daca; --bank-K:#565f89;
  --bank-P:#bb9af7; --bank-I:#9ece6a; --bank-F:#bb9af7; --bank-A:#73daca;
  --shadow:0 10px 30px rgba(0,0,0,.55);
}

/* ---- Ayu Mirage (#1f2430 bg, #cbccc6 fg, #ffcc66 accent) ---- */
[data-theme="ayu"] {
  --bg:#171b24; --bg-1:#1f2430; --bg-2:#242936; --bg-3:#2d3343;
  --border:#2d3343; --border-hi:#3d4354;
  --fg:#cbccc6; --fg-dim:#a0a6b3; --fg-mute:#6c7380;
  --accent:#ffcc66; --accent-2:#ffb454;
  --green:#bae67e; --green-dim:#7fa848; --amber:#ffcc66; --red:#f07178; --purple:#d4bfff;
  --bank-X:#bae67e; --bank-Y:#ffcc66; --bank-M:#73d0ff; --bank-D:#d4bfff;
  --bank-T:#f07178; --bank-C:#ffb454; --bank-S:#95e6cb; --bank-K:#6c7380;
  --bank-P:#d4bfff; --bank-I:#bae67e; --bank-F:#d4bfff; --bank-A:#95e6cb;
  --shadow:0 10px 30px rgba(0,0,0,.55);
}

/* =========================================================================
   u_12_1-themes-pro — 5 additional "Pro" themes.
   Same token contract as the block above: one CSS block + one entry in
   State.availableThemes + one .theme-swatch-<id> pair below.
   ========================================================================= */

/* ---- Obsidian Gold — graphite + warm 24k gold accent ---- */
[data-theme="obsidiangold"] {
  --bg:#08080a; --bg-1:#111114; --bg-2:#1b1b1f; --bg-3:#26262b;
  --border:#333338; --border-hi:#4d4d55;
  --fg:#f3efe4; --fg-dim:#b3ad9d; --fg-mute:#726c5f;
  --accent:#e0b84b; --accent-2:#c79a2e;
  --green:#8fbf7a; --green-dim:#5f8a4d; --amber:#e0a458; --red:#d9636f; --purple:#b494e0;
  --bank-X:#8fbf7a; --bank-Y:#e0a458; --bank-M:#6fa8d6; --bank-D:#b494e0;
  --bank-T:#d9636f; --bank-C:#e0824b; --bank-S:#5fc4c0; --bank-K:#8a8577;
  --bank-P:#b494e0; --bank-I:#8fbf7a; --bank-F:#e0b84b; --bank-A:#5fc4c0;
  --shadow:0 12px 34px rgba(0,0,0,.7);
}

/* ---- Aurora — deep indigo night sky + teal / violet northern-lights glow ---- */
[data-theme="aurora"] {
  --bg:#080c18; --bg-1:#0e1526; --bg-2:#152038; --bg-3:#1d2c4a;
  --border:#2a3c60; --border-hi:#3e5580;
  --fg:#e7eefb; --fg-dim:#a3b6d6; --fg-mute:#657897;
  --accent:#2dd4bf; --accent-2:#22b8a3;
  --green:#4ade80; --green-dim:#2f9e5a; --amber:#fbbf24; --red:#fb7185; --purple:#a78bfa;
  --bank-X:#4ade80; --bank-Y:#fbbf24; --bank-M:#60a5fa; --bank-D:#a78bfa;
  --bank-T:#fb7185; --bank-C:#fb923c; --bank-S:#2dd4bf; --bank-K:#7186ac;
  --bank-P:#a78bfa; --bank-I:#4ade80; --bank-F:#f472b6; --bank-A:#2dd4bf;
  --shadow:0 12px 34px rgba(4,10,30,.7);
}

/* ---- Crimson Steel — brushed gunmetal + crimson accent ---- */
[data-theme="crimsonsteel"] {
  --bg:#0d0e10; --bg-1:#16181b; --bg-2:#1f2226; --bg-3:#292d32;
  --border:#3a3f45; --border-hi:#53595f;
  --fg:#edeff1; --fg-dim:#aab0b6; --fg-mute:#6f757b;
  --accent:#f43f5e; --accent-2:#be123c;
  --green:#22c55e; --green-dim:#178a44; --amber:#f59e0b; --red:#f43f5e; --purple:#c084fc;
  --bank-X:#22c55e; --bank-Y:#f59e0b; --bank-M:#38bdf8; --bank-D:#c084fc;
  --bank-T:#f43f5e; --bank-C:#fb7a3c; --bank-S:#2dd4bf; --bank-K:#7b8288;
  --bank-P:#c084fc; --bank-I:#22c55e; --bank-F:#f43f5e; --bank-A:#38bdf8;
  --shadow:0 12px 34px rgba(0,0,0,.65);
}

/* ---- Cyber Void — near-black violet + neon cyan / magenta ---- */
[data-theme="cybervoid"] {
  --bg:#07040d; --bg-1:#0f0919; --bg-2:#181026; --bg-3:#221836;
  --border:#382a54; --border-hi:#503c76;
  --fg:#f1ecff; --fg-dim:#b6a6df; --fg-mute:#79699e;
  --accent:#00e5ff; --accent-2:#00b8cc;
  --green:#39ff88; --green-dim:#25a85c; --amber:#ffd166; --red:#ff2ec4; --purple:#c77dff;
  --bank-X:#39ff88; --bank-Y:#ffd166; --bank-M:#00e5ff; --bank-D:#c77dff;
  --bank-T:#ff2ec4; --bank-C:#ff8f3c; --bank-S:#5cf2e6; --bank-K:#8b7ab0;
  --bank-P:#c77dff; --bank-I:#39ff88; --bank-F:#ff2ec4; --bank-A:#5cf2e6;
  --shadow:0 12px 36px rgba(0,0,0,.75), 0 0 40px rgba(0,229,255,.06);
}

/* ---- Porcelain Pro — warm ivory light theme + deep navy accent ---- */
[data-theme="porcelain"] {
  --bg:#f7f4ee; --bg-1:#ffffff; --bg-2:#f0eae0; --bg-3:#e5dccb;
  --border:#ddd0b8; --border-hi:#c3b291;
  --fg:#292319; --fg-dim:#6c6250; --fg-mute:#9a8f78;
  --accent:#1e3a5f; --accent-2:#16304e;
  --green:#3f7d4f; --green-dim:#2e5e3a; --amber:#b7791f; --red:#b03a2e; --purple:#6c4f8c;
  --bank-X:#3f7d4f; --bank-Y:#b7791f; --bank-M:#2a5d8c; --bank-D:#6c4f8c;
  --bank-T:#b03a2e; --bank-C:#c1622f; --bank-S:#1f7d7a; --bank-K:#7a7160;
  --bank-P:#6c4f8c; --bank-I:#3f7d4f; --bank-F:#a3376b; --bank-A:#1f7d7a;
  --shadow:0 10px 28px rgba(90,76,45,.18);
}

/* =========================================================================
   Theme grid + swatches (Themes tab in Settings)
   ========================================================================= */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .12s, transform .08s, box-shadow .12s;
  position: relative;
}
.theme-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.theme-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent);
}
.theme-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  text-align: center;
}
.theme-active-badge {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: #000;
  letter-spacing: .3px;
}
.theme-swatch {
  height: 56px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.25);
}
.theme-swatch::before,
.theme-swatch::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.theme-swatch::before {
  width: 26px; height: 26px;
  left: 12px; top: 10px;
}
.theme-swatch::after {
  width: 14px; height: 14px;
  right: 14px; top: 12px;
  box-shadow: 0 22px 0 -2px currentColor;
}
.theme-swatch-sm {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.35);
}

/* Swatch previews — one per theme, hand-tuned to show bg + accent */
.theme-swatch-dark      { background:#0b0f14; color:#58a6ff; }
.theme-swatch-dark::before      { background:#e6edf3; }
.theme-swatch-dark::after       { background:#58a6ff; color:#58a6ff; }
.theme-swatch-light     { background:#f6f8fa; color:#0969da; }
.theme-swatch-light::before     { background:#1f2328; }
.theme-swatch-light::after      { background:#0969da; color:#0969da; }
.theme-swatch-dracula   { background:#282a36; color:#bd93f9; }
.theme-swatch-dracula::before   { background:#f8f8f2; }
.theme-swatch-dracula::after    { background:#bd93f9; color:#bd93f9; }
.theme-swatch-nord      { background:#2e3440; color:#88c0d0; }
.theme-swatch-nord::before      { background:#eceff4; }
.theme-swatch-nord::after       { background:#88c0d0; color:#88c0d0; }
.theme-swatch-monokai   { background:#272822; color:#a6e22e; }
.theme-swatch-monokai::before   { background:#f8f8f2; }
.theme-swatch-monokai::after    { background:#a6e22e; color:#a6e22e; }
.theme-swatch-solarized { background:#002b36; color:#268bd2; }
.theme-swatch-solarized::before { background:#eee8d5; }
.theme-swatch-solarized::after  { background:#268bd2; color:#268bd2; }
.theme-swatch-catppuccin { background:#1e1e2e; color:#89b4fa; }
.theme-swatch-catppuccin::before{ background:#cdd6f4; }
.theme-swatch-catppuccin::after { background:#89b4fa; color:#89b4fa; }
.theme-swatch-gruvbox   { background:#282828; color:#d79921; }
.theme-swatch-gruvbox::before   { background:#ebdbb2; }
.theme-swatch-gruvbox::after    { background:#d79921; color:#d79921; }
.theme-swatch-rosepine  { background:#191724; color:#eb6f92; }
.theme-swatch-rosepine::before  { background:#e0def4; }
.theme-swatch-rosepine::after   { background:#eb6f92; color:#eb6f92; }
.theme-swatch-github    { background:#0d1117; color:#58a6ff; }
.theme-swatch-github::before    { background:#c9d1d9; }
.theme-swatch-github::after     { background:#58a6ff; color:#58a6ff; }
.theme-swatch-tokyonight{ background:#1a1b26; color:#7aa2f7; }
.theme-swatch-tokyonight::before{ background:#c0caf5; }
.theme-swatch-tokyonight::after { background:#7aa2f7; color:#7aa2f7; }
.theme-swatch-ayu       { background:#1f2430; color:#ffcc66; }
.theme-swatch-ayu::before       { background:#cbccc6; }
.theme-swatch-ayu::after        { background:#ffcc66; color:#ffcc66; }

/* ---- Pro theme swatches ---- */
.theme-swatch-obsidiangold { background:linear-gradient(135deg,#08080a,#1b1611); color:#e0b84b; }
.theme-swatch-obsidiangold::before { background:#f3efe4; }
.theme-swatch-obsidiangold::after  { background:#e0b84b; color:#e0b84b; }
.theme-swatch-aurora   { background:linear-gradient(135deg,#080c18,#123326); color:#2dd4bf; }
.theme-swatch-aurora::before   { background:#e7eefb; }
.theme-swatch-aurora::after    { background:#a78bfa; color:#a78bfa; box-shadow:0 22px 0 -2px #2dd4bf; }
.theme-swatch-crimsonsteel { background:linear-gradient(135deg,#0d0e10,#2a1216); color:#f43f5e; }
.theme-swatch-crimsonsteel::before { background:#edeff1; }
.theme-swatch-crimsonsteel::after  { background:#f43f5e; color:#f43f5e; }
.theme-swatch-cybervoid { background:linear-gradient(135deg,#07040d,#1c0a2e); color:#00e5ff; }
.theme-swatch-cybervoid::before { background:#f1ecff; }
.theme-swatch-cybervoid::after  { background:#ff2ec4; color:#ff2ec4; box-shadow:0 22px 0 -2px #00e5ff; }
.theme-swatch-porcelain { background:linear-gradient(135deg,#f7f4ee,#ede1c8); color:#1e3a5f; }
.theme-swatch-porcelain::before { background:#292319; }
.theme-swatch-porcelain::after  { background:#1e3a5f; color:#1e3a5f; }

.theme-card.pro { border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
.theme-card .theme-pro-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 6px; border-radius: 4px;
  background: linear-gradient(135deg, #e0b84b, #b8912c);
  color: #1a1400; text-transform: uppercase;
}

/* Small circular swatch (context menu) */
.theme-swatch-sm.theme-swatch-dark      { background:#58a6ff; }
.theme-swatch-sm.theme-swatch-light     { background:#0969da; }
.theme-swatch-sm.theme-swatch-dracula   { background:#bd93f9; }
.theme-swatch-sm.theme-swatch-nord      { background:#88c0d0; }
.theme-swatch-sm.theme-swatch-monokai   { background:#a6e22e; }
.theme-swatch-sm.theme-swatch-solarized { background:#268bd2; }
.theme-swatch-sm.theme-swatch-catppuccin{ background:#89b4fa; }
.theme-swatch-sm.theme-swatch-gruvbox   { background:#d79921; }
.theme-swatch-sm.theme-swatch-rosepine  { background:#eb6f92; }
.theme-swatch-sm.theme-swatch-github    { background:#58a6ff; }
.theme-swatch-sm.theme-swatch-tokyonight{ background:#7aa2f7; }
.theme-swatch-sm.theme-swatch-ayu       { background:#ffcc66; }
.theme-swatch-sm.theme-swatch-obsidiangold { background:#e0b84b; }
.theme-swatch-sm.theme-swatch-aurora       { background:#2dd4bf; }
.theme-swatch-sm.theme-swatch-crimsonsteel { background:#f43f5e; }
.theme-swatch-sm.theme-swatch-cybervoid    { background:#00e5ff; }
.theme-swatch-sm.theme-swatch-porcelain    { background:#1e3a5f; }

/* u_13_6 — dismissible banner pills (appended; order-safe) */
.banner-dismiss, .mdp-close, .mqb-close {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  padding: 0; margin-left: 4px;
  border: 0; border-radius: 6px;
  background: transparent;
  font-size: 16px; line-height: 1; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .75;
  transition: background .12s, opacity .12s;
}
.banner-dismiss, .mdp-close, .mqb-close { color: var(--amber); }
.banner-dismiss:hover, .mdp-close:hover, .mqb-close:hover {
  opacity: 1; background: rgba(243,156,18,.20);
}
.banner-dismiss:active, .mdp-close:active, .mqb-close:active {
  background: rgba(243,156,18,.35);
}
@media (max-width: 900px) {
  .banner-dismiss, .mdp-close, .mqb-close {
    width: 34px; height: 34px; font-size: 18px;
    touch-action: manipulation;
  }
}

/* u_13_7 ─ Device Manager: page-level scroll on mobile.
   The global body { overflow:hidden } (from i_all_13.sh) clips content
   taller than the viewport, freezing the manager list on phones.  When
   the manager is showing, we let the whole page scroll like an ordinary
   web page.  Scoped by html.wlc-manager-view / body.wlc-manager-view so
   the workspace editor keeps its overflow:hidden layout.

   Do NOT use height: 100vh / 100dvh on the shell here — on mobile
   browsers with a visible URL bar those are the LARGE viewport height
   and the bottom of the page becomes unreachable.  Let everything grow
   with content and let the viewport do the scrolling. */
html.wlc-manager-view,
body.wlc-manager-view {
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible !important;
}
body.wlc-manager-view {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
body.wlc-manager-view .manager-shell {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body.wlc-manager-view .manager-topbar {
  position: sticky !important;
  top: 0;
  z-index: 50;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
body.wlc-manager-view .manager-body {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}
@media (max-width: 900px) {
  body.wlc-manager-view .manager-topbar {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: 8px;
  }
  body.wlc-manager-view .manager-body {
    padding: 14px 10px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Cards remain tappable; explicitly allow vertical panning so a
     finger-drag on a card scrolls the page instead of being trapped. */
  body.wlc-manager-view .mgr-card {
    touch-action: pan-y !important;
  }
  body.wlc-manager-view .manager-grid {
    touch-action: pan-y !important;
  }
}

/* =========================================================================
   u_13_11-monitor-badge
   -------------------------------------------------------------------------
   Every block carries a small badge in its top-right corner.  OFF (default)
   is a muted grey signal icon; ON is bright green with a pulsing glow.
   Turning the badge on adds the block's operand addresses to the tab's
   watch list, so the device streams them to the dashboard's Monitor view.
   ========================================================================= */
.monitor-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 26;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1),
              background .15s ease,
              box-shadow .2s ease,
              opacity .15s ease,
              color .15s ease,
              border-color .15s ease;
}
.monitor-badge-glyph {
  width: 11px;
  height: 11px;
  display: block;
  pointer-events: none;
}
/* OFF — subtle, muted */
.monitor-badge.off {
  background: var(--bg-3);
  color: var(--fg-mute);
  opacity: .6;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.monitor-badge.off:hover {
  opacity: 1;
  background: var(--bg-2);
  color: var(--fg-dim);
  border-color: var(--border-hi);
  transform: scale(1.18);
}
.monitor-badge.off:active { transform: scale(.98); }
/* ON — bright green with pulsing glow */
.monitor-badge.on {
  background: var(--green);
  color: #062a15;
  opacity: 1;
  animation: monitorBadgePulse 2.4s ease-in-out infinite;
}
.monitor-badge.on:hover {
  transform: scale(1.18);
  animation-play-state: paused;
  box-shadow: 0 0 16px rgba(46,204,113,1), 0 0 4px rgba(46,204,113,1);
}
.monitor-badge.on:active { transform: scale(.98); }
@keyframes monitorBadgePulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(46,204,113,.55), 0 0 0 0 rgba(46,204,113,.35);
  }
  50% {
    box-shadow: 0 0 14px rgba(46,204,113,.95), 0 0 0 5px rgba(46,204,113,0);
  }
}
/* Move the force badge to top-LEFT so it never collides with the monitor badge */
.graph-node .force-badge {
  top: -9px;
  left: -9px;
  right: auto;
}
/* Mobile: badge grows, ⋯ menu moves to bottom-right to keep corners free */
@media (max-width: 900px) {
  .monitor-badge {
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    touch-action: manipulation;
  }
  .monitor-badge-glyph { width: 13px; height: 13px; }
  .graph-node .node-menu-btn {
    top: auto;
    bottom: -12px;
    right: -12px;
  }
}


/* u_13_13-inline-set */
.wlc-inline-set {
  position: absolute;
  z-index: 900;
  min-width: 200px;
  max-width: 280px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--sans);
}
.wlc-is-row { display: flex; flex-direction: column; gap: 2px; }
.wlc-is-row label {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--fg-dim);
  display: flex; justify-content: space-between; gap: 8px;
}
.wlc-is-cur { color: var(--fg-mute); font-weight: 400; font-family: var(--mono); }
.wlc-is-row input {
  width: 100%; box-sizing: border-box;
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
  outline: none;
}
.wlc-is-row input:focus { border-color: var(--accent); }
.wlc-is-err { color: var(--red); font-size: 11px; min-height: 0; }
.wlc-is-actions {
  display: flex; gap: 6px; justify-content: flex-end;
  margin-top: 4px;
}
.wlc-is-actions .btn.sm { padding: 4px 10px; font-size: 11px; }

/* Adaptive block width — allow the name text to use the full measured
   width without clipping. */
.graph-node .gnode-name {
  overflow: visible;
  text-overflow: clip;
}


/* u_13_14 — system M register subtitle on a block */
.gnode-special {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--amber);
  text-align: center;
  width: 100%;
  padding: 0 2px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .1px;
}


/* u_13_15 — Hold checkbox inside the inline set-values popup */
.wlc-is-hold {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--fg-dim);
  margin: 6px 0 2px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.wlc-is-hold.disabled {
  opacity: .55;
  cursor: default;
}
.wlc-is-hold input {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.wlc-is-hold.disabled input { cursor: default; }


/* u_13_18 — holds indicator on the Monitor toolbar */
.mon-holds-badge {
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  background: rgba(243,156,18,.18);
  color: var(--amber);
  border: 1px solid rgba(243,156,18,.45);
  white-space: nowrap;
}


/* u_13_19 — self-overwrite hint inside the inline Set values popup */
.wlc-is-hint {
  font-size: 10.5px;
  color: var(--amber);
  background: rgba(243,156,18,.10);
  border: 1px solid rgba(243,156,18,.35);
  border-radius: 4px;
  padding: 4px 8px;
  line-height: 1.35;
  margin: 4px 0 2px;
}


/* u_13_21 — thin, deep-red ring for held addresses */
.monitor-badge.held {
  box-shadow: 0 0 0 1.2px #ff1a1a !important;
  border-color: #ff1a1a !important;
  outline: none !important;
}
.monitor-badge { position: absolute; }

/* u_13_20 — live operand strip inside the Set values dialog */
.wlc-is-strip-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fg-mute);
  font-weight: 700;
  margin: 6px 0 2px;
}
.wlc-is-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0 2px;
}
.wlc-is-strip-item {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  white-space: nowrap;
}
.wlc-is-strip-item.is-on  { background: rgba(46,204,113,.18); border-color: rgba(46,204,113,.5); color: var(--green); font-weight: 700; }
.wlc-is-strip-item.is-off { background: var(--bg-3); color: var(--fg-mute); }
.wlc-is-strip-item.is-const { opacity: .7; }


/* u_13_25-single-scroll
   Defensive: only .graph-canvas is ever a scroll container.  Every
   ancestor is overflow:hidden, so a stray oversize child cannot create
   a second scrollbar anywhere up the tree. */
.shell,
.workspace,
.main,
.canvas-wrap {
  overflow: hidden;
}
.canvas-wrap { min-height: 0; }
.main        { min-height: 0; }
.workspace   { min-height: 0; }

/* .graph-canvas is the one scroller.  auto shows bars only when needed. */
.graph-canvas {
  overflow: auto;
}
.graph-canvas::-webkit-scrollbar { width: 10px; height: 10px; }

/* u_13_28 — the wrapper is sized to content by _resizeSurface().  It
   should NOT clip, so marquee boxes and inline popups that extend past
   its bounds are still rendered. */
.canvas-scroll { overflow: visible; }

/* iOS Safari: keep scroll bounce off the canvas so it does not flash a
   horizontal scroll indicator when the wrap is touched. */
.graph-canvas { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }