: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); }

.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;
}

.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-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-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); }

@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; }
}

@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; }
}


@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-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; } }


@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; }
}


@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-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); }

@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; }
}

@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; }
}


.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); }


.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); }

.graph-node.type-applied.bank-A {
  border-color: var(--bank-A);
  background: color-mix(in oklab, var(--bank-A) 12%, var(--bg-2));
}

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

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

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

.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; }

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

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

.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; }

.pal-group[data-group*="logic"] .pal-head,
.pal-item.gate { border-left-color: var(--border-hi) !important; }

.pal-group .pal-head { color: var(--fg-mute); }


.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; }
}


.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-btn {
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}

.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);
}

.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);
}

.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);
}

.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; }
}


.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;
}

.topbar-btn-compile {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@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;
  }
}

.modal {
  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;
}
.modal-body > div { min-height: 0; }

.device-info-table td {
  word-break: break-word;
  vertical-align: top;
}
.device-info-table tr:last-child td { border-bottom: none; }

@media (max-width: 900px) {
  .modal,
  .modal.wide {
    max-height: 92dvh;
    min-height: 0;
  }
  .modal-body { min-height: 0; }
}

.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); }

.rightbar {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.panel-body {
  max-height: none;
  overflow-y: visible;
}

.panel-body.capped {
  max-height: 40vh;
  overflow-y: auto;
}

.panel.collapsed .panel-body { display: none; }
.panel.collapsed .panel-head  { color: var(--fg-mute); }

.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); }

.panel-head {
  user-select: none;
  -webkit-user-select: none;
}
.panel-head:hover { background: var(--bg-2); }

@media (max-width: 900px) {
  .panel-body.capped { max-height: 32vh; }
}

.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; }
.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; }

  .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%; }
}

.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; }
}

.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;
}
.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 {
  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;
}

@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; }
}

.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); }

.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; }

.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; }


[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);
}

[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);
}

[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);
}

[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);
}

[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);
}

[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);
}

[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);
}

[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);
}

[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);
}

[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);
}


[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);
}

[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);
}

[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);
}

[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);
}

[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 {
  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);
}

.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; }

.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;
}

.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; }

.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;
  }
}

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;
  }
  body.wlc-manager-view .mgr-card {
    touch-action: pan-y !important;
  }
  body.wlc-manager-view .manager-grid {
    touch-action: pan-y !important;
  }
}

.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: background .1s linear,
              opacity .1s linear,
              color .1s linear,
              border-color .1s linear;
}
.monitor-badge-glyph {
  width: 11px;
  height: 11px;
  display: block;
  pointer-events: none;
}
.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); }
.monitor-badge.on {
  background: var(--green);
  color: #062a15;
  opacity: 1;
}
.monitor-badge.on:hover {
  transform: scale(1.18);
  box-shadow: 0 0 14px rgba(46,204,113,.9), 0 0 4px rgba(46,204,113,.9);
}
.monitor-badge.on:active { transform: scale(.98); }
.graph-node .force-badge {
  top: -9px;
  left: -9px;
  right: auto;
}
@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;
  }
}


.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; }

.graph-node .gnode-name {
  overflow: visible;
  text-overflow: clip;
}


.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;
}


.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; }


.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;
}


.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;
}


.monitor-badge.held {
  box-shadow: 0 0 0 1.2px #ff1a1a !important;
  border-color: #ff1a1a !important;
  outline: none !important;
}
.monitor-badge { position: absolute; }

.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; }


.shell,
.workspace,
.main,
.canvas-wrap {
  overflow: hidden;
}
.canvas-wrap { min-height: 0; }
.main        { min-height: 0; }
.workspace   { min-height: 0; }

.graph-canvas {
  overflow: auto;
}
.graph-canvas::-webkit-scrollbar { width: 10px; height: 10px; }

.canvas-scroll { overflow: visible; }

.graph-canvas { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

.mgr-card > .wifi-rail {
  top: auto;
  bottom: 68px;
}
.mgr-card.quiet > .wifi-rail {
  bottom: 64px;   /* QUIET badge sits slightly higher; nudge rail down */
}

.bound-device-card { position: relative; }
.bound-device-card > .wifi-rail {
  top: auto;
  bottom: 56px;
}
.bound-device-card.quiet > .wifi-rail {
  bottom: 52px;
}

.wifi-rail-seg {
  width: var(--seg-w);
  height: var(--seg-h);
  border-radius: 2px;
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
  transition: background .25s ease, opacity .25s ease,
              height .2s ease, width .2s ease;
  flex: 0 0 auto;
}

.wifi-rail.sig-5 .wifi-rail-seg[data-seg="1"],
.wifi-rail.sig-5 .wifi-rail-seg[data-seg="2"],
.wifi-rail.sig-5 .wifi-rail-seg[data-seg="3"],
.wifi-rail.sig-5 .wifi-rail-seg[data-seg="4"],
.wifi-rail.sig-5 .wifi-rail-seg[data-seg="5"] {
  background: var(--green);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15),
              0 0 4px rgba(46,204,113,.35);
}

.wifi-rail.sig-4 .wifi-rail-seg[data-seg="1"],
.wifi-rail.sig-4 .wifi-rail-seg[data-seg="2"],
.wifi-rail.sig-4 .wifi-rail-seg[data-seg="3"],
.wifi-rail.sig-4 .wifi-rail-seg[data-seg="4"] {
  background: var(--green);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15),
              0 0 3px rgba(46,204,113,.25);
}
.wifi-rail.sig-4 .wifi-rail-seg[data-seg="5"] { background: var(--bg-3); }

.wifi-rail.sig-3 .wifi-rail-seg[data-seg="1"],
.wifi-rail.sig-3 .wifi-rail-seg[data-seg="2"],
.wifi-rail.sig-3 .wifi-rail-seg[data-seg="3"] {
  background: var(--amber);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15),
              0 0 3px rgba(243,156,18,.30);
}
.wifi-rail.sig-3 .wifi-rail-seg[data-seg="4"],
.wifi-rail.sig-3 .wifi-rail-seg[data-seg="5"] { background: var(--bg-3); }

.wifi-rail.sig-2 .wifi-rail-seg[data-seg="1"],
.wifi-rail.sig-2 .wifi-rail-seg[data-seg="2"] {
  background: var(--amber);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15),
              0 0 3px rgba(243,156,18,.25);
}
.wifi-rail.sig-2 .wifi-rail-seg[data-seg="3"],
.wifi-rail.sig-2 .wifi-rail-seg[data-seg="4"],
.wifi-rail.sig-2 .wifi-rail-seg[data-seg="5"] { background: var(--bg-3); }

.wifi-rail.sig-1 .wifi-rail-seg[data-seg="1"] {
  background: var(--red);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15),
              0 0 3px rgba(231,76,60,.35);
}
.wifi-rail.sig-1 .wifi-rail-seg[data-seg="2"],
.wifi-rail.sig-1 .wifi-rail-seg[data-seg="3"],
.wifi-rail.sig-1 .wifi-rail-seg[data-seg="4"],
.wifi-rail.sig-1 .wifi-rail-seg[data-seg="5"] { background: var(--bg-3); }

.wifi-rail.sig-0 .wifi-rail-seg {
  background: var(--red);
  opacity: .5;
  box-shadow: none;
}

.wifi-rail.offline .wifi-rail-seg {
  background: var(--fg-mute);
  opacity: .28;
  box-shadow: none;
}

.wifi-rail-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  margin-top: 3px;
  gap: 0;
}
.wifi-rail-dbm {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  color: var(--fg-dim);
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.wifi-rail-unit {
  font-family: var(--mono);
  font-size: 6.5px;
  font-weight: 600;
  color: var(--fg-mute);
  margin-top: 1px;
  letter-spacing: .2px;
}
.wifi-rail.offline .wifi-rail-dbm,
.wifi-rail.offline .wifi-rail-unit { color: var(--fg-mute); opacity: .75; }
.wifi-rail.compact .wifi-rail-dbm { font-size: 8px; }
.wifi-rail.compact .wifi-rail-unit { font-size: 6px; }

@media (max-width: 900px) {
  .wifi-rail { --seg-h: 15px; --seg-w: 12px; min-width: 26px; }
  .wifi-rail.compact { --seg-h: 11px; --seg-w: 10px; }
  .wifi-rail-dbm { font-size: 10px; }
  .wifi-rail-unit { font-size: 7px; }
  .mgr-card > .wifi-rail { bottom: 72px; }
  .mgr-card.quiet > .wifi-rail { bottom: 68px; }
  .bound-device-card > .wifi-rail { bottom: 60px; }
  .bound-device-card.quiet > .wifi-rail { bottom: 56px; }
}


.wifi-rail {
  position: absolute;
  right: 0;                       /* flush to the inner edge of card border */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-end;          /* segments flush to the right */
  gap: 3px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 4;
  pointer-events: none;           /* let clicks pass through to the card */
  user-select: none;
  -webkit-user-select: none;
}

.wifi-rail-seg {
  width: 100%;                    /* full rail width, right edge at border */
  height: 14px;
  border-radius: 0;               /* sharp on all corners — no widget look */
  background: var(--bg-3);
  box-shadow: none;
  transition: background .25s ease, opacity .25s ease,
              height .2s ease, width .2s ease;
  flex: 0 0 auto;
}

.wifi-rail-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;          /* right-align the readout */
  line-height: 1;
  margin-top: 3px;
  gap: 0;
  min-width: 100%;
  white-space: nowrap;
}
.wifi-rail-dbm {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  color: var(--fg-dim);
  letter-spacing: -0.4px;
}
.wifi-rail-unit {
  font-family: var(--mono);
  font-size: 6px;
  font-weight: 600;
  color: var(--fg-mute);
  letter-spacing: .2px;
  margin-top: 1px;
}
.wifi-rail.offline .wifi-rail-dbm,
.wifi-rail.offline .wifi-rail-unit { color: var(--fg-mute); opacity: .7; }

.mgr-card > .wifi-rail {
  top: 46px;
  bottom: 96px;
  width: 14px;
}
.mgr-card.quiet > .wifi-rail {
  top: 46px;
  bottom: 96px;
}

.bound-device-card > .wifi-rail {
  top: 40px;
  bottom: 52px;
  width: 10px;
}
.bound-device-card.quiet > .wifi-rail {
  top: 40px;
  bottom: 52px;
}

.wifi-rail.compact .wifi-rail-seg {
  width: 65%;
  height: 11px;
}
.wifi-rail.compact .wifi-rail-dbm  { font-size: 8px; }
.wifi-rail.compact .wifi-rail-unit { font-size: 5.5px; }

.wifi-rail.sig-5 .wifi-rail-seg[data-seg="1"],
.wifi-rail.sig-5 .wifi-rail-seg[data-seg="2"],
.wifi-rail.sig-5 .wifi-rail-seg[data-seg="3"],
.wifi-rail.sig-5 .wifi-rail-seg[data-seg="4"],
.wifi-rail.sig-5 .wifi-rail-seg[data-seg="5"] { background: var(--green); }

.wifi-rail.sig-4 .wifi-rail-seg[data-seg="1"],
.wifi-rail.sig-4 .wifi-rail-seg[data-seg="2"],
.wifi-rail.sig-4 .wifi-rail-seg[data-seg="3"],
.wifi-rail.sig-4 .wifi-rail-seg[data-seg="4"] { background: var(--green); }
.wifi-rail.sig-4 .wifi-rail-seg[data-seg="5"] { background: var(--bg-3); }

.wifi-rail.sig-3 .wifi-rail-seg[data-seg="1"],
.wifi-rail.sig-3 .wifi-rail-seg[data-seg="2"],
.wifi-rail.sig-3 .wifi-rail-seg[data-seg="3"] { background: var(--amber); }
.wifi-rail.sig-3 .wifi-rail-seg[data-seg="4"],
.wifi-rail.sig-3 .wifi-rail-seg[data-seg="5"] { background: var(--bg-3); }

.wifi-rail.sig-2 .wifi-rail-seg[data-seg="1"],
.wifi-rail.sig-2 .wifi-rail-seg[data-seg="2"] { background: var(--amber); }
.wifi-rail.sig-2 .wifi-rail-seg[data-seg="3"],
.wifi-rail.sig-2 .wifi-rail-seg[data-seg="4"],
.wifi-rail.sig-2 .wifi-rail-seg[data-seg="5"] { background: var(--bg-3); }

.wifi-rail.sig-1 .wifi-rail-seg[data-seg="1"] { background: var(--red); }
.wifi-rail.sig-1 .wifi-rail-seg[data-seg="2"],
.wifi-rail.sig-1 .wifi-rail-seg[data-seg="3"],
.wifi-rail.sig-1 .wifi-rail-seg[data-seg="4"],
.wifi-rail.sig-1 .wifi-rail-seg[data-seg="5"] { background: var(--bg-3); }

.wifi-rail.sig-0 .wifi-rail-seg { background: var(--red); opacity: .5; }

.wifi-rail.offline .wifi-rail-seg { background: var(--fg-mute); opacity: .28; }

@media (max-width: 900px) {
  .mgr-card > .wifi-rail { top: 50px; bottom: 104px; width: 16px; }
  .bound-device-card > .wifi-rail { top: 44px; bottom: 58px; width: 12px; }
  .wifi-rail-seg { height: 15px; }
  .wifi-rail.compact .wifi-rail-seg { height: 12px; width: 65%; }
  .wifi-rail-dbm  { font-size: 10px; }
  .wifi-rail-unit { font-size: 6.5px; }
}


.wifi-rail {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
}

.wifi-rail-seg {
  flex: 1 1 0;
  min-height: 3px;
  max-height: 16px;
  width: 100%;
  border-radius: 0;
  background: var(--bg-3);
  transition: background .25s ease, opacity .25s ease, width .2s ease;
}

.wifi-rail-readout {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}
.wifi-rail-dbm {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  color: var(--fg-dim);
  letter-spacing: -0.4px;
}
.wifi-rail-unit {
  font-family: var(--mono);
  font-size: 6px;
  font-weight: 600;
  color: var(--fg-mute);
  letter-spacing: .2px;
  margin-top: 1px;
}
.wifi-rail.offline .wifi-rail-dbm,
.wifi-rail.offline .wifi-rail-unit { color: var(--fg-mute); opacity: .7; }

.mgr-card > .wifi-rail {
  top: 46px;
  bottom: 100px;
  width: 6px;
}

.bound-device-card > .wifi-rail {
  top: 40px;
  bottom: 58px;
  width: 4px;
}

.bound-device-card .wifi-rail.compact .wifi-rail-seg {
  width: 65%;
  min-width: 3px;
}
.bound-device-card .wifi-rail.compact .wifi-rail-dbm  { font-size: 8px; }
.bound-device-card .wifi-rail.compact .wifi-rail-unit { font-size: 5.5px; }

.wifi-rail.sig-8 .wifi-rail-seg { background: var(--green); }

.wifi-rail.sig-7 .wifi-rail-seg:nth-child(n+2) { background: var(--green); }
.wifi-rail.sig-6 .wifi-rail-seg:nth-child(n+3) { background: var(--green); }
.wifi-rail.sig-5 .wifi-rail-seg:nth-child(n+4) { background: var(--amber); }
.wifi-rail.sig-4 .wifi-rail-seg:nth-child(n+5) { background: var(--amber); }
.wifi-rail.sig-3 .wifi-rail-seg:nth-child(n+6) { background: var(--amber); }
.wifi-rail.sig-2 .wifi-rail-seg:nth-child(n+7) { background: var(--red); }
.wifi-rail.sig-1 .wifi-rail-seg:nth-child(n+8) { background: var(--red); }

.wifi-rail.sig-0 .wifi-rail-seg { background: var(--red); opacity: .5; }
.wifi-rail.offline .wifi-rail-seg { background: var(--fg-mute); opacity: .28; }

@media (max-width: 900px) {
  .mgr-card > .wifi-rail {
    top: 50px;
    bottom: 130px;
    width: 7px;
  }
  .bound-device-card > .wifi-rail {
    top: 44px;
    bottom: 80px;
    width: 5px;
  }
  .wifi-rail-dbm  { font-size: 10px; }
  .wifi-rail-unit { font-size: 6.5px; }
  .bound-device-card .wifi-rail.compact .wifi-rail-dbm  { font-size: 8.5px; }
  .bound-device-card .wifi-rail.compact .wifi-rail-unit { font-size: 5.5px; }
}


.wifi-rail {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
}

.wifi-rail-seg {
  flex: 1 1 0;
  min-height: 3px;
  max-height: 16px;
  width: 65%;
  min-width: 3px;
  border-radius: 0;
  background: var(--bg-3);
  transition: background .25s ease, opacity .25s ease;
}

.wifi-rail-readout {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}
.wifi-rail-dbm {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  color: var(--fg-dim);
  letter-spacing: -0.4px;
}
.wifi-rail-unit {
  font-family: var(--mono);
  font-size: 5.5px;
  font-weight: 600;
  color: var(--fg-mute);
  letter-spacing: .2px;
  margin-top: 1px;
}
.wifi-rail.offline .wifi-rail-dbm,
.wifi-rail.offline .wifi-rail-unit { color: var(--fg-mute); opacity: .7; }

.mgr-card > .wifi-rail {
  top: 46px;
  bottom: 100px;
  width: 6px;
}

.bound-device-card > .wifi-rail {
  top: 40px;
  bottom: 58px;
  width: 4px;
}

.wifi-rail.sig-8 .wifi-rail-seg { background: var(--green); }

.wifi-rail.sig-7 .wifi-rail-seg:nth-child(n+2) { background: var(--green); }
.wifi-rail.sig-6 .wifi-rail-seg:nth-child(n+3) { background: var(--green); }
.wifi-rail.sig-5 .wifi-rail-seg:nth-child(n+4) { background: var(--amber); }
.wifi-rail.sig-4 .wifi-rail-seg:nth-child(n+5) { background: var(--amber); }
.wifi-rail.sig-3 .wifi-rail-seg:nth-child(n+6) { background: var(--amber); }
.wifi-rail.sig-2 .wifi-rail-seg:nth-child(n+7) { background: var(--red); }
.wifi-rail.sig-1 .wifi-rail-seg:nth-child(n+8) { background: var(--red); }

.wifi-rail.sig-0 .wifi-rail-seg { background: var(--red); opacity: .5; }
.wifi-rail.offline .wifi-rail-seg { background: var(--fg-mute); opacity: .28; }

@media (max-width: 900px) {
  .mgr-card > .wifi-rail {
    top: 50px;
    bottom: 130px;
    width: 7px;
  }
  .bound-device-card > .wifi-rail {
    top: 44px;
    bottom: 80px;
    width: 5px;
  }
}


.wifi-rail {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
}

.wifi-rail-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 3px;
  min-height: 0;
}

.wifi-rail-segs {
  margin-left: auto;
  flex: 0 0 auto;
  width: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  min-height: 0;
}
.bound-device-card .wifi-rail-segs { width: 4px; }

.wifi-rail-seg {
  flex: 1 1 0;
  min-height: 3px;
  max-height: 16px;
  width: 100%;
  border-radius: 0;
  background: var(--bg-3);
  transition: background .25s ease, opacity .25s ease;
}

.wifi-rail-pct {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: none;

  align-self: flex-start;           /* top of the rail body */
  text-align: right;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;

  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--fg-dim);
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  transition: color .25s ease, opacity .25s ease;
}
.bound-device-card .wifi-rail-pct {
  font-size: 14px;
}

.wifi-rail-readout {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}
.wifi-rail-dbm {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  color: var(--fg-dim);
  letter-spacing: -0.4px;
}
.wifi-rail-unit {
  font-family: var(--mono);
  font-size: 5.5px;
  font-weight: 600;
  color: var(--fg-mute);
  letter-spacing: .2px;
  margin-top: 1px;
}
.wifi-rail.offline .wifi-rail-dbm,
.wifi-rail.offline .wifi-rail-unit { color: var(--fg-mute); opacity: .7; }

.mgr-card > .wifi-rail {
  top: 46px;
  bottom: 100px;
  width: 26px;
}

.bound-device-card > .wifi-rail {
  top: 40px;
  bottom: 58px;
  width: 24px;
}

.wifi-rail.sig-8 .wifi-rail-seg { background: var(--green); }
.wifi-rail.sig-7 .wifi-rail-seg:nth-child(n+2) { background: var(--green); }
.wifi-rail.sig-6 .wifi-rail-seg:nth-child(n+3) { background: var(--green); }
.wifi-rail.sig-5 .wifi-rail-seg:nth-child(n+4) { background: var(--amber); }
.wifi-rail.sig-4 .wifi-rail-seg:nth-child(n+5) { background: var(--amber); }
.wifi-rail.sig-3 .wifi-rail-seg:nth-child(n+6) { background: var(--amber); }
.wifi-rail.sig-2 .wifi-rail-seg:nth-child(n+7) { background: var(--red); }
.wifi-rail.sig-1 .wifi-rail-seg:nth-child(n+8) { background: var(--red); }
.wifi-rail.sig-0 .wifi-rail-seg { background: var(--red); opacity: .5; }
.wifi-rail.offline .wifi-rail-seg { background: var(--fg-mute); opacity: .28; }

.wifi-rail.sig-8 .wifi-rail-pct,
.wifi-rail.sig-7 .wifi-rail-pct,
.wifi-rail.sig-6 .wifi-rail-pct { color: var(--green); }

.wifi-rail.sig-5 .wifi-rail-pct,
.wifi-rail.sig-4 .wifi-rail-pct,
.wifi-rail.sig-3 .wifi-rail-pct { color: var(--amber); }

.wifi-rail.sig-2 .wifi-rail-pct,
.wifi-rail.sig-1 .wifi-rail-pct { color: var(--red); }

.wifi-rail.sig-0 .wifi-rail-pct { color: var(--red); opacity: .6; }
.wifi-rail.offline .wifi-rail-pct { color: var(--fg-mute); opacity: .6; }

@media (max-width: 900px) {
  .mgr-card > .wifi-rail {
    top: 50px;
    bottom: 130px;
  }
  .bound-device-card > .wifi-rail {
    top: 44px;
    bottom: 80px;
  }
}

.wifi-rail-body > .wifi-rail-segs { margin-left: auto; }


.wifi-rail {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
}

.wifi-rail-seg {
  flex: 1 1 0;
  min-height: 3px;
  max-height: 16px;
  width: 65%;
  min-width: 3px;
  border-radius: 0;
  background: var(--bg-3);
  transition: background .25s ease, opacity .25s ease;
}

.wifi-rail-readout {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}
.wifi-rail-dbm {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  color: var(--fg-dim);
  letter-spacing: -0.4px;
}
.wifi-rail-unit {
  font-family: var(--mono);
  font-size: 5.5px;
  font-weight: 600;
  color: var(--fg-mute);
  letter-spacing: .2px;
  margin-top: 1px;
}
.wifi-rail.offline .wifi-rail-dbm,
.wifi-rail.offline .wifi-rail-unit { color: var(--fg-mute); opacity: .7; }

.mgr-card > .wifi-rail {
  top: 46px;
  bottom: 100px;
  width: 6px;
}

.bound-device-card > .wifi-rail {
  top: 40px;
  bottom: 58px;
  width: 4px;
}

.wifi-rail.sig-8 .wifi-rail-seg { background: var(--green); }

.wifi-rail.sig-7 .wifi-rail-seg:nth-child(n+2) { background: var(--green); }
.wifi-rail.sig-6 .wifi-rail-seg:nth-child(n+3) { background: var(--green); }
.wifi-rail.sig-5 .wifi-rail-seg:nth-child(n+4) { background: var(--amber); }
.wifi-rail.sig-4 .wifi-rail-seg:nth-child(n+5) { background: var(--amber); }
.wifi-rail.sig-3 .wifi-rail-seg:nth-child(n+6) { background: var(--amber); }
.wifi-rail.sig-2 .wifi-rail-seg:nth-child(n+7) { background: var(--red); }
.wifi-rail.sig-1 .wifi-rail-seg:nth-child(n+8) { background: var(--red); }

.wifi-rail.sig-0 .wifi-rail-seg { background: var(--red); opacity: .5; }
.wifi-rail.offline .wifi-rail-seg { background: var(--fg-mute); opacity: .28; }

@media (max-width: 900px) {
  .mgr-card > .wifi-rail {
    top: 50px;
    bottom: 130px;
    width: 7px;
  }
  .bound-device-card > .wifi-rail {
    top: 44px;
    bottom: 80px;
    width: 5px;
  }
}


.wifi-rail {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
}

.wifi-rail-seg {
  flex: 1 1 0;
  min-height: 3px;
  max-height: 16px;
  width: 65%;
  min-width: 3px;
  border-radius: 0;
  background: var(--bg-3);
  transition: background .25s ease, opacity .25s ease;
}

.wifi-rail-readout {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}
.wifi-rail-dbm {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  color: var(--fg-dim);
  letter-spacing: -0.4px;
}
.wifi-rail-unit {
  font-family: var(--mono);
  font-size: 5.5px;
  font-weight: 600;
  color: var(--fg-mute);
  letter-spacing: .2px;
  margin-top: 1px;
}
.wifi-rail.offline .wifi-rail-dbm,
.wifi-rail.offline .wifi-rail-unit { color: var(--fg-mute); opacity: .7; }

.mgr-card > .wifi-rail {
  top: 46px;
  bottom: 100px;
  width: 6px;
}

.bound-device-card > .wifi-rail {
  top: 40px;
  bottom: 58px;
  width: 4px;
}

.wifi-rail.sig-8 .wifi-rail-seg { background: var(--green); }

.wifi-rail.sig-7 .wifi-rail-seg:nth-child(n+2) { background: var(--green); }
.wifi-rail.sig-6 .wifi-rail-seg:nth-child(n+3) { background: var(--green); }
.wifi-rail.sig-5 .wifi-rail-seg:nth-child(n+4) { background: var(--amber); }
.wifi-rail.sig-4 .wifi-rail-seg:nth-child(n+5) { background: var(--amber); }
.wifi-rail.sig-3 .wifi-rail-seg:nth-child(n+6) { background: var(--amber); }
.wifi-rail.sig-2 .wifi-rail-seg:nth-child(n+7) { background: var(--red); }
.wifi-rail.sig-1 .wifi-rail-seg:nth-child(n+8) { background: var(--red); }

.wifi-rail.sig-0 .wifi-rail-seg { background: var(--red); opacity: .5; }
.wifi-rail.offline .wifi-rail-seg { background: var(--fg-mute); opacity: .28; }

@media (max-width: 900px) {
  .mgr-card > .wifi-rail {
    top: 50px;
    bottom: 130px;
    width: 7px;
  }
  .bound-device-card > .wifi-rail {
    top: 44px;
    bottom: 80px;
    width: 5px;
  }
}


.mgr-card-grip {
  width: 30px; height: 30px;
  padding: 0; margin: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent;
  color: var(--fg-mute);
  cursor: grab;
  font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  transition: background .12s, color .12s, border-color .12s;
}
.mgr-card-grip:hover {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--fg);
}
.mgr-card-grip:active { cursor: grabbing; }

.mgr-card-dragging {
  opacity: 0.4;
}
.mgr-card-ghost {
  box-shadow: 0 12px 40px rgba(0,0,0,.6) !important;
  border-color: var(--accent) !important;
  border-style: dashed !important;
  transition: none !important;
}

@media (max-width: 900px) {
  .mgr-card-grip {
    width: 38px; height: 38px; font-size: 20px;
    touch-action: none;
  }
}


mark.mgr-match {
  background: rgba(243,156,18,.35);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
  font-weight: inherit;
}
[data-theme="light"] mark.mgr-match { background: rgba(243,156,18,.45); }

.mon-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.mon-btn-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.mon-icon-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background .1s linear, border-color .1s linear, color .1s linear;
}
.mon-icon-btn:hover:not(:disabled) {
  background: var(--bg-3);
  border-color: var(--border-hi);
}
.mon-icon-btn:active:not(:disabled) {
  background: var(--bg-3);
}
.mon-icon-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.mon-icon-btn.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
  box-shadow: 0 0 8px rgba(31,111,235,.45);
}
.mon-stats {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  white-space: nowrap;
}
.mon-live-badge, .mon-dev-label, .mon-holds-badge { display: none !important; }

@media (max-width: 900px) {
  .mon-toolbar {
    padding: 6px 8px;
    gap: 6px;
  }
  .mon-icon-btn {
    width: 42px;
    height: 42px;
    font-size: 20px;
    touch-action: manipulation;
  }
  .mon-btn-row { gap: 5px; }
  .mon-stats { font-size: 11px; }
}

@media (max-width: 900px) {
  .sim-toolbar:not(.mon-toolbar) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px !important;
    gap: 6px !important;
    row-gap: 0 !important;
  }
  .sim-toolbar:not(.mon-toolbar) .btn {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  .sim-toolbar:not(.mon-toolbar) .speed-group {
    flex: 0 0 auto !important;
    padding: 4px 10px !important;
    gap: 8px !important;
    min-height: 36px;
    white-space: nowrap;
  }
  .sim-toolbar:not(.mon-toolbar) input[type=range] {
    width: 110px !important;
  }
  .sim-toolbar:not(.mon-toolbar) .speed-val { min-width: 48px; }
  .sim-toolbar:not(.mon-toolbar) .sim-state-badge {
    font-size: 11px;
    padding: 5px 12px;
    flex: 0 0 auto;
  }
  .sim-toolbar:not(.mon-toolbar) .sim-stats {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11px;
  }
  .sim-toolbar:not(.mon-toolbar) .spacer {
    flex: 0 0 6px !important;
  }
}

.view-toggle {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.view-toggle::-webkit-scrollbar { height: 6px; }
.view-toggle::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: 3px;
}
.view-toggle > * { flex: 0 0 auto; }
.view-toggle > span[style*="margin-left:auto"] {
  margin-left: 12px !important;
}
@media (max-width: 900px) {
  .view-toggle { padding: 6px 8px; gap: 6px; }
  .view-toggle .tool-btn,
  .view-toggle .btn.ghost.sm { padding: 6px 10px; font-size: 12px; min-height: 34px; }
  .view-toggle .tool-select { font-size: 12px; min-height: 34px; }
  .view-toggle .tool-color { width: 34px; height: 34px; }
}


.io-view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  overflow: hidden;
}
.io-modebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  overflow-x: auto;
}
.io-mode-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--fg-dim);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.io-mode-btn.active {
  background: var(--accent-2);
  color: #fff;
  border-color: var(--accent-2);
}
.io-hint {
  font-size: 12px;
  color: var(--fg-mute);
  white-space: nowrap;
  flex: 0 0 auto;
}
.io-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.io-group { display: flex; flex-direction: column; gap: 8px; }
.io-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fg-mute);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.io-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.io-tile-wrap { display: flex; flex-direction: column; gap: 2px; }
.io-tile-wrap .io-tile-label { font-size: 11px; color: var(--fg-mute); }
.io-tile {
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--fg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--mono);
  transition: background .1s linear, border-color .1s linear;
}
.io-tile:hover:not(:disabled) { background: var(--bg-3); }
.io-tile-label { font-size: 11px; color: var(--fg-mute); }
.io-tile-value { font-size: 15px; font-weight: 700; color: var(--fg-dim); }
.io-tile.on { background: var(--green); border-color: var(--green); color: #001a0d; }
.io-tile.on .io-tile-value { color: #001a0d; }
.io-tile.on .io-tile-label { color: rgba(0,26,13,.7); }
.io-bank-X .io-tile.on { background: var(--bank-X); border-color: var(--bank-X); }
.io-bank-Y .io-tile.on { background: var(--bank-Y); border-color: var(--bank-Y); }
.io-bank-M .io-tile.on { background: var(--bank-M); border-color: var(--bank-M); }
.io-bank-T .io-tile.on { background: var(--bank-T); border-color: var(--bank-T); }
.io-bank-C .io-tile.on { background: var(--bank-C); border-color: var(--bank-C); }
.io-tile.io-word {
  cursor: text;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  font-family: var(--mono);
}
.io-tile.io-word:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88,166,255,.25);
}
.io-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--fg-mute);
  font-size: 13px;
}
.io-hmi-wrap {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 160px 1fr 240px;
  min-height: 0;
  overflow: hidden;
}
.io-hmi-palette {
  border-right: 1px solid var(--border);
  background: var(--bg-1);
  padding: 10px;
  overflow-y: auto;
}
.io-hmi-pal-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
  color: var(--fg-mute);
  margin-bottom: 8px;
}
.io-hmi-pal-item {
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: grab;
  margin-bottom: 6px;
  user-select: none;
  -webkit-user-select: none;
}
.io-hmi-pal-item:hover { background: var(--bg-3); border-color: var(--border-hi); }
.io-hmi-canvas {
  position: relative;
  overflow: auto;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 20px 20px;
  min-height: 0;
}
[data-theme="light"] .io-hmi-canvas {
  background-image:
    linear-gradient(rgba(0,0,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.055) 1px, transparent 1px);
}
.io-hmi-side {
  border-left: 1px solid var(--border);
  background: var(--bg-1);
  padding: 12px 14px;
  overflow-y: auto;
}
.io-hmi-side-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
  color: var(--fg-mute);
  margin-bottom: 10px;
}
.io-hmi-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.io-hmi-field label { font-size: 11px; color: var(--fg-mute); }
.io-hmi-field input {
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  outline: none;
}
.io-hmi-field input:focus { border-color: var(--accent); }
.io-hmi-hint { font-size: 12px; color: var(--fg-dim); line-height: 1.5; }
.io-hmi-obj {
  position: absolute;
  background: var(--bg-2);
  border: 2px solid var(--border-hi);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: border-color .1s linear;
}
.io-hmi-obj.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(88,166,255,.35); }
.io-obj-label { font-size: 11px; color: var(--fg-dim); text-align: center; }
.io-obj-addr { font-size: 10px; color: var(--fg-mute); font-family: var(--mono); }
.io-lamp-light {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bg-3);
  border: 3px solid var(--border-hi);
  transition: background .1s linear, box-shadow .1s linear;
}
.io-lamp-light.on {
  background: radial-gradient(circle at 35% 30%, #a7ffb6, var(--green) 65%);
  box-shadow: 0 0 16px rgba(46,204,113,.85), inset 0 0 8px rgba(255,255,255,.45);
}
.io-switch-btn {
  min-width: 78px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--fg-dim);
  background: var(--bg-3);
  border: 2px solid var(--border-hi);
  border-radius: 8px;
  cursor: pointer;
}
.io-switch-btn.on {
  background: var(--green);
  color: #001a0d;
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(46,204,113,.55);
}
.io-num-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--green);
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 90px;
  text-align: center;
}
.io-slider-row { width: 100%; }
.io-slider-input { width: 100%; accent-color: var(--accent); }
@media (max-width: 900px) {
  .io-hmi-wrap { grid-template-columns: 120px 1fr; }
  .io-hmi-side {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--border);
    max-height: 34vh;
  }
  .io-tiles { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .io-tile { min-height: 52px; }
  .io-hmi-pal-item { padding: 12px 10px; font-size: 12px; }
}
.gnode-out-value.pending {
  background: var(--bg-3);
  color: var(--fg-mute);
  border-color: var(--border);
  box-shadow: none;
}


.panel-toggle.collapsed {
  background: var(--accent-2);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 12px rgba(88,166,255,.75), 0 0 4px rgba(88,166,255,.5) inset;
  animation: wlcTogglePulse 1.6s ease-in-out infinite;
}
.panel-toggle.collapsed:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(88,166,255,1);
  animation: none;
}
.panel-toggle.collapsed::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(88,166,255,.35);
  border-radius: inherit;
  pointer-events: none;
}
@keyframes wlcTogglePulse {
  0%,100% { box-shadow: 0 0 12px rgba(88,166,255,.75); }
  50%     { box-shadow: 0 0 18px rgba(88,166,255,1), 0 0 4px rgba(88,166,255,.8) inset; }
}
.panel-toggle.hmi-pos { transition: left .18s ease, background .12s, border-color .12s; }

.io-hmi-obj {
  background: transparent; border: none; border-radius: 0;
  padding: 2px; box-shadow: none;
  transition: box-shadow .12s, outline-color .12s;
}
.io-hmi-obj.selected {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  background: rgba(88,166,255,.04);
}

.io-lamp-light {
  width: 46px; height: 46px; border-radius: 50%;
  background: #1a1f29; border: 2px solid #3a3f45;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55);
  transition: background .12s, box-shadow .12s, border-color .12s;
  align-self: center;
}
.io-btn {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2); color: var(--fg);
  cursor: pointer; min-width: 60px; align-self: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: background .12s, color .12s, border-color .12s;
  touch-action: manipulation;
}
.io-btn:hover { background: var(--bg-3); }
.io-btn:active { transform: translateY(1px); }
.io-btn-word { background: rgba(88,166,255,.14); border-color: rgba(88,166,255,.4); color: var(--accent); }
.io-num-value {
  font-family: var(--mono); font-size: 20px; font-weight: 800;
  color: var(--green); padding: 2px 10px; background: var(--bg);
  border-radius: 6px; border: 1px solid var(--border);
  text-align: center; min-width: 70px; align-self: center;
}
.io-char-value {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--accent); padding: 4px 10px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
  text-align: center; align-self: center; min-width: 80px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.io-color-swatch {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-3); border: 2px solid var(--border-hi);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight: 800;
  color: #fff; align-self: center; transition: background .12s;
}
.io-range-bar {
  width: 100%; height: 12px; border-radius: 6px;
  background: var(--bg-3); overflow: hidden; border: 1px solid var(--border);
}
.io-range-fill {
  height: 100%; background: linear-gradient(90deg, var(--green-dim), var(--green));
  transition: width .15s;
}
.io-meter {
  width: 90px; height: 90px; position: relative; align-self: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 80%, var(--bg-2), var(--bg));
  border: 3px solid var(--border-hi); overflow: hidden;
}
.io-meter-needle {
  position: absolute; left: 50%; bottom: 50%;
  width: 2px; height: 40px; background: var(--red);
  transform-origin: 50% 100%;
  transition: transform .18s ease-out; border-radius: 2px;
}
.io-bar {
  width: 100%; height: 100%; background: var(--bg-3);
  border-radius: 6px; position: relative; overflow: hidden;
  border: 1px solid var(--border);
}
.io-bar-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, var(--green), var(--green-dim));
  transition: height .15s;
}
.io-pipe {
  width: 100%; height: 100%; background: var(--bg-3);
  border-radius: 4px 4px 8px 8px; position: relative;
  overflow: hidden; border: 1px solid var(--border);
}
.io-pipe-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, #58a6ff, #1f6feb);
  transition: height .15s;
}
.io-pie { display: block; }
.io-dyn-line { align-self: center; border-radius: 3px; transition: width .15s, background .15s; }
.io-dyn-rect, .io-dyn-ellipse {
  width: 100%; height: 100%; background: var(--accent-2);
  opacity: .85; transition: transform .15s; align-self: center;
}
.io-dyn-rect { border-radius: 6px; }
.io-dyn-ellipse { border-radius: 50%; }
.io-state-graphic {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--bg-2); border: 2px dashed var(--border-hi);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 22px; font-weight: 800;
  color: var(--accent); align-self: center;
}
.io-slider-row { width: 100%; padding: 0 4px; }
.io-slider-input { width: 100%; accent-color: var(--accent); }
.io-entry-input {
  width: 100%; padding: 6px 8px; box-sizing: border-box;
  background: var(--bg); color: var(--fg);
  font-family: var(--mono); font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px; align-self: stretch;
}
.io-select {
  width: 100%; padding: 6px 8px; box-sizing: border-box;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; align-self: stretch;
}

.io-hmi-pal-group {
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--fg-mute);
  padding: 10px 4px 4px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}

.io-hmi-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.io-hmi-color-row { display: flex; flex-direction: row !important; align-items: center; gap: 10px; }
.io-hmi-color-row label { flex: 1; }
.io-hmi-color-row input[type=color] {
  width: 42px; height: 30px; padding: 2px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--border); cursor: pointer;
}

.io-hmi-marquee { pointer-events: none; }

.io-hmi-obj svg { display: block; margin: 0 auto; }
.io-hmi-obj.io-obj-rect > svg,
.io-hmi-obj.io-obj-circle > svg,
.io-hmi-obj.io-obj-line > svg,
.io-hmi-obj.io-obj-diamond > svg,
.io-hmi-obj.io-obj-triangle > svg,
.io-hmi-obj.io-obj-rightTri > svg,
.io-hmi-obj.io-obj-pentagon > svg,
.io-hmi-obj.io-obj-hexagon > svg,
.io-hmi-obj.io-obj-star > svg,
.io-hmi-obj.io-obj-polygon > svg,
.io-hmi-obj.io-obj-arc > svg,
.io-hmi-obj.io-obj-scale > svg,
.io-hmi-obj.io-obj-table > svg,
.io-hmi-obj.io-obj-hollowCircle > svg { position: static; inset: auto; }

@media (max-width: 900px) {
  .io-hmi-pal-item { min-height: 40px; padding: 12px 12px; font-size: 13px; }
  .io-hmi-pal-group { font-size: 11px; }
  .io-btn { min-height: 40px; font-size: 13px; }
  .panel-toggle.collapsed { width: 22px; height: 58px; font-size: 15px; }
}

.toolbar-view-btn { flex: 0 0 auto !important; }
.editor-tabs .tab { position: relative; transition: background .12s, color .12s; }
.editor-tabs .tab[style*="--tab-color"] {
  background: color-mix(in oklab, var(--tab-color) 22%, transparent);
  border-color: color-mix(in oklab, var(--tab-color) 50%, var(--border));
}
.editor-tabs .tab[style*="--tab-color"]:hover {
  background: color-mix(in oklab, var(--tab-color) 32%, transparent);
}
.editor-tabs .tab[style*="--tab-color"].active {
  background: color-mix(in oklab, var(--tab-color) 38%, transparent);
  border-color: var(--tab-color);
  box-shadow: 0 -1px 0 0 var(--tab-color) inset;
}
.editor-tabs .tab-name { display:inline-block; }
.editor-tabs .tab-name-input { vertical-align: middle; }

.io-hmi-canvas { position: relative; overflow: auto; }
.io-hmi-canvas-scale { position: relative; min-width: 100%; min-height: 100%; }

.io-hmi-area {
  position: absolute; box-sizing: border-box; z-index: 1;
  pointer-events: auto; cursor: move; touch-action: none;
  transition: box-shadow .12s;
}
.io-hmi-area:hover    { box-shadow: 0 0 0 1px rgba(88,166,255,.35); }
.io-hmi-area.selected { box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(88,166,255,.45); }
.io-hmi-area-resize   { z-index: 90; }

.io-hmi-wrap { display: grid; grid-template-columns: 180px 1fr 340px;
               min-height: 0; overflow: hidden; }
.io-hmi-wrap.hmi-view-only { grid-template-columns: 0 1fr 0; }
.io-hmi-palette { display: flex; flex-direction: column; min-height: 0;
                  overflow: hidden; background: var(--bg-1);
                  border-right: 1px solid var(--border); }
.io-hmi-pal-fixed { flex: 0 0 auto; background: var(--bg-1);
                    border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.io-hmi-pal-title { padding: 10px 12px 6px; font-size: 11px;
                    text-transform: uppercase; letter-spacing: .8px;
                    font-weight: 700; color: var(--fg-mute); }
.io-hmi-pal-search {
  width: calc(100% - 16px); margin: 0 8px 4px;
  padding: 6px 10px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--fg); font-size: 12px; outline: none; box-sizing: border-box;
}
.io-hmi-pal-search:focus { border-color: var(--accent); }
.io-hmi-pal-list { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
                   min-height: 0; scrollbar-gutter: stable; scrollbar-width: thin; }
.io-hmi-pal-list::-webkit-scrollbar { width: 6px; }
.io-hmi-pal-list::-webkit-scrollbar-thumb {
  background: rgba(139,150,165,.30); border-radius: 3px;
}
.io-hmi-side {
  width: 340px !important; min-width: 340px; max-width: 340px;
  overflow-y: auto; overflow-x: hidden;
  padding: 14px 16px 24px; background: var(--bg-1);
  border-left: 1px solid var(--border);
  scrollbar-gutter: stable; scrollbar-width: thin; box-sizing: border-box;
}
.io-hmi-side::-webkit-scrollbar { width: 6px; }
.io-hmi-side::-webkit-scrollbar-thumb {
  background: rgba(139,150,165,.30); border-radius: 3px;
}
.io-hmi-side-title { font-size: 13px; font-weight: 700; color: var(--fg);
                     margin-bottom: 12px; padding-bottom: 6px;
                     border-bottom: 1px solid var(--border); }
.io-hmi-field { display: flex; flex-direction: column; margin-bottom: 12px; gap: 4px; }
.io-hmi-field-head { display: flex; align-items: center;
                     justify-content: space-between; gap: 8px; }
.io-hmi-field-head > label:first-child {
  font-size: 11px; color: var(--fg-mute);
  text-transform: uppercase; letter-spacing: .4px; flex: 1 1 auto;
}
.io-hmi-check { display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--fg-mute); text-transform: none;
  letter-spacing: 0; cursor: pointer; user-select: none; }
.io-hmi-check input[type="checkbox"] { margin: 0; accent-color: var(--accent); cursor: pointer; }
.io-hmi-field > label { font-size: 11px; color: var(--fg-mute);
                        text-transform: uppercase; letter-spacing: .4px; }
.io-hmi-field > input, .io-hmi-field > select {
  width: 100%; padding: 6px 9px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--fg); font-family: var(--mono); font-size: 12px;
  outline: none; box-sizing: border-box;
}
.io-hmi-field > input:focus, .io-hmi-field > select:focus { border-color: var(--accent); }
.io-hmi-field.io-hmi-color-row { flex-direction: row !important; align-items: center; }
.io-hmi-field.io-hmi-color-row > label { flex: 1; }
.io-hmi-field.io-hmi-color-row > input[type="color"] {
  width: 48px; height: 30px; padding: 2px; cursor: pointer;
}
.io-hmi-obj { overflow: visible !important; }
.io-hmi-obj-resize {
  position: absolute; width: 14px; height: 14px;
  background: var(--bg-1); border: 2px solid var(--accent);
  border-radius: 3px; z-index: 60;
  box-shadow: 0 1px 4px rgba(0,0,0,.4); touch-action: none;
}
.io-hmi-resize-nw { top: -7px;    left: -7px;   cursor: nwse-resize; }
.io-hmi-resize-ne { top: -7px;    right: -7px;  cursor: nesw-resize; }
.io-hmi-resize-sw { bottom: -7px; left: -7px;   cursor: nesw-resize; }
.io-hmi-resize-se { bottom: -7px; right: -7px;  cursor: nwse-resize; }
.io-hmi-obj.selected .io-hmi-obj-resize { display: block; }
.io-hmi-obj .io-hmi-obj-resize { display: none; }
.io-hmi-guides { position: absolute; top: 0; left: 0; width: 0; height: 0;
                 pointer-events: none; z-index: 500; }
.io-hmi-guide { position: absolute; background: var(--amber);
                pointer-events: none; box-shadow: 0 0 4px rgba(243,156,18,.8); }
.io-hmi-guide-v { width: 1px; top: 0; height: 8000px; }
.io-hmi-guide-h { height: 1px; left: 0; width: 8000px; }
.io-hmi-obj > *:not(.io-hmi-obj-resize):not(.io-hmi-guides) {
  max-width: 100%; max-height: 100%;
}
.io-hmi-obj .io-btn, .io-hmi-obj .io-lamp-light,
.io-hmi-obj .io-num-value, .io-hmi-obj .io-char-value,
.io-hmi-obj .io-color-swatch, .io-hmi-obj .io-range-bar,
.io-hmi-obj .io-bar, .io-hmi-obj .io-pipe, .io-hmi-obj .io-meter,
.io-hmi-obj .io-entry-input, .io-hmi-obj .io-select {
  width: 100%; height: 100%; min-width: 0; min-height: 0; box-sizing: border-box;
}
.io-hmi-obj .io-num-value, .io-hmi-obj .io-char-value, .io-hmi-obj .io-color-swatch {
  display: flex; align-items: center; justify-content: center;
}
.io-hmi-obj .io-slider-row { width: 100%; padding: 0; }
.io-hmi-obj svg { display: block; max-width: 100%; max-height: 100%; }
.io-hmi-obj .io-pie, .io-hmi-obj .io-trend { width: 100% !important; height: 100% !important; }
.panel-toggle.hmi-pos { z-index: 300; }
@media (max-width: 900px) {
  .io-hmi-wrap { grid-template-columns: 140px 1fr 280px; }
  .io-hmi-side { width: 280px !important; min-width: 280px; padding: 12px; }
}
@media (max-width: 640px) {
  .io-hmi-wrap { grid-template-columns: 1fr; grid-template-rows: 130px 1fr 1fr; }
  .io-hmi-palette { border-right: none; border-bottom: 1px solid var(--border); }
  .io-hmi-side { width: 100% !important; min-width: 0;
                 border-left: none; border-top: 1px solid var(--border); }
}



.view-toggle {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  align-items: center;
  padding: 6px 10px;
  box-sizing: border-box;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.view-toggle > * { flex-shrink: 0; }
.view-toggle .tool-btn,
.view-toggle .btn.ghost.sm,
.view-toggle .tool-select,
.view-toggle .tool-color {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.view-toggle .tool-color { padding: 2px; }
.view-toggle .tool-sep { height: 24px; align-self: center; }

.io-hmi-wrap.hmi-view-only { grid-template-columns: 1fr; }
.io-hmi-wrap.hmi-view-only .io-hmi-palette,
.io-hmi-wrap.hmi-view-only .io-hmi-side {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.io-hmi-area { z-index: 1 !important; }
.io-hmi-obj  { z-index: 10 !important; }
.io-hmi-area.locked {
  cursor: default !important;
  box-shadow: 0 0 0 1px var(--amber) !important;
  opacity: 0.96;
}
.io-hmi-area.locked:hover { box-shadow: 0 0 0 2px var(--amber) !important; }

.io-hmi-canvas {
  overflow: auto;
  scrollbar-gutter: stable;
}
.io-hmi-canvas::-webkit-scrollbar { width: 10px; height: 10px; }
.io-hmi-canvas::-webkit-scrollbar-thumb {
  background: rgba(139,150,165,.35);
  border-radius: 6px;
  border: 2px solid var(--bg);
}

.editor-tabs .tab {
  position: relative;
  padding-right: 24px !important;
}
.editor-tabs .tab-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  line-height: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  color: var(--fg-mute);
  cursor: pointer;
  opacity: 0.4;
  transition: background .12s, color .12s, opacity .12s;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}
.editor-tabs .tab:hover .tab-close { opacity: 1; }
.editor-tabs .tab-close:hover {
  background: var(--red);
  color: #fff;
  opacity: 1;
}

.wlc-inline-confirm-back {
  animation: wlcInlineFade .12s ease;
}
@keyframes wlcInlineFade { from { opacity: 0; } }



.io-hmi-wrap.hmi-view-only {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}
.io-hmi-wrap.hmi-view-only > .io-hmi-palette,
.io-hmi-wrap.hmi-view-only > .io-hmi-side {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}
.io-hmi-wrap.hmi-view-only > .io-hmi-canvas {
  grid-column: 1 / -1;
}

#wlcTabCloseConfirm button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}




body.wlc-hmi-view-only .io-hmi-wrap {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}
body.wlc-hmi-view-only .io-hmi-palette,
body.wlc-hmi-view-only .io-hmi-side {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
body.wlc-hmi-view-only .io-hmi-canvas {
  grid-column: 1 / -1 !important;
  grid-row:    1 / -1 !important;
}

.io-hmi-pal-list {
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}
.io-hmi-pal-list::-webkit-scrollbar { width: 4px; }
.io-hmi-pal-list::-webkit-scrollbar-track { background: transparent; }
.io-hmi-pal-list::-webkit-scrollbar-thumb {
  background: rgba(139,150,165,.35);
  border-radius: 2px;
}

.panel-toggle.hmi-pos {
  z-index: 300;
  width: 14px;
  height: 52px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.panel-toggle.hmi-pos.collapsed {
  background: var(--accent-2);
  border-color: var(--accent);
  color: #fff;
}



body.wlc-hmi-view-only .io-hmi-wrap {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}
body.wlc-hmi-view-only .io-hmi-palette,
body.wlc-hmi-view-only .io-hmi-side {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
body.wlc-hmi-view-only .io-hmi-canvas {
  grid-column: 1 / -1 !important;
  grid-row: 1 / -1 !important;
}

.panel-toggle.hmi-pos {
  z-index: 300;
  width: 14px;
  height: 52px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.panel-toggle.hmi-pos.collapsed {
  background: var(--accent-2);
  border-color: var(--accent);
  color: #fff;
}

.io-hmi-pal-list::-webkit-scrollbar { width: 4px; }
.io-hmi-pal-list::-webkit-scrollbar-track { background: transparent; }
.io-hmi-pal-list::-webkit-scrollbar-thumb {
  background: rgba(139,150,165,.35);
  border-radius: 2px;
}

.topbar,
.editor-tabs {
  scrollbar-width: none;                 /* Firefox */
  -ms-overflow-style: none;              /* old IE/Edge */
}
.topbar::-webkit-scrollbar,
.editor-tabs::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                         /* Chromium / WebKit */
}

.hmi-file-name-display {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  border: 1px solid var(--border);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .12s, background .12s;
}
.hmi-file-name-display:hover {
  border-color: var(--border-hi);
  background: color-mix(in oklab, var(--fg) 9%, transparent);
}
.hmi-file-name-input {
  width: 100%;
  min-width: 140px;
  padding: 3px 8px;
  font: inherit;
  font-family: var(--mono);
  font-weight: 600;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  outline: none;
  color: var(--fg);
  box-sizing: border-box;
}
.io-hmi-ctx .ctx-item.active {
  background: var(--accent-2);
  color: #fff;
}
.io-hmi-ctx .io-hmi-search-row {
  cursor: pointer;
}

body.wlc-hmi-screen-active > .toast-wrap,
body.wlc-hmi-screen-active > .ctx-menu:not(.io-hmi-ctx),
body.wlc-hmi-screen-active > .device-switcher,
body.wlc-hmi-screen-active > .node-tooltip,
body.wlc-hmi-screen-active > .mobile-nav,
body.wlc-hmi-screen-active > .sidebar-backdrop {
  display: none !important;
}
body.wlc-hmi-screen-active {
  overflow: hidden !important;
  background: #000 !important;
}
body.wlc-hmi-screen-active #app {
  overflow: hidden !important;
  background: #000 !important;
}
.hmi-fullscreen-frame {
  box-shadow: 0 0 40px rgba(0,0,0,.85);
}


.io-hmi-obj {
}
.io-hmi-obj .io-hmi-obj-hitpad {
  position: absolute;
  inset: -6px;
  border-radius: 8px;
  background: transparent;
  z-index: 0;
  pointer-events: auto;
}

.io-hmi-obj:hover::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 8px;
  border: 1px dashed var(--accent);
  opacity: .55;
  pointer-events: none;
  z-index: 30;
}
.io-hmi-obj.selected:hover::after {
  border-color: var(--accent);
  border-style: solid;
  opacity: .85;
}

.io-hmi-area-hotzone {
  background: transparent;
  z-index: 200 !important;
}
.io-hmi-area { touch-action: none; }
.io-hmi-area-hotzone { touch-action: none; }

.hmi-fullscreen-header {
  font-family: var(--sans);
}
#hmiFsHeaderCenter { color: #e6edf3; }
#hmiFsHeaderRight  { font-variant-numeric: tabular-nums; }
.hmi-fullscreen-frame { box-shadow: 0 0 40px rgba(0,0,0,.85); }

.io-hmi-obj-resize {
  width: 18px !important;
  height: 18px !important;
  border-width: 3px !important;
}


.io-hmi-obj > .io-hmi-obj-hitpad {
  position: absolute;
  inset: -9px;
  background: transparent;
  border-radius: 12px;
  z-index: 0;
  pointer-events: auto;
}
.io-hmi-obj > *:not(.io-hmi-obj-hitpad):not(.io-hmi-obj-resize) {
  z-index: 1;
}
.io-hmi-obj.selected {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}
.io-hmi-obj .io-hmi-obj-resize {
  width: 20px !important;
  height: 20px !important;
  border-width: 3px !important;
}

.io-hmi-area.locked,
.io-hmi-area.locked > * {
  pointer-events: none !important;
}

.hmi-fullscreen-header {
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.25)) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.io-modebar .io-tool-btn {
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--fg);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  white-space: nowrap;
}
.io-modebar .io-tool-btn:hover { background: var(--bg-3); border-color: var(--border-hi); }
.io-modebar .io-tool-btn:active { transform: translateY(1px); }
.io-modebar .io-tool-btn:disabled { opacity: .4; cursor: not-allowed; }

.io-hmi-setvalue {
  position: fixed;
  z-index: 2147483647;
  background: var(--bg-1);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 8px;
  min-width: 200px;
  color: var(--fg);
  font-family: var(--sans);
}
.io-hmi-setvalue input {
  width: 100%; padding: 6px 8px; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px; color: var(--fg);
  font-family: var(--mono); font-size: 13px; outline: none;
}
.io-hmi-setvalue .err { color: var(--red); font-size: 11.5px; min-height: 14px; }


.io-modebar > div { display: none !important; }

.hmi-fs-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: rgba(0,0,0,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #e6edf3;
  font-family: var(--sans);
  font-size: 13px;
  box-sizing: border-box;
}
.hmi-fs-exit-btn {
  flex: 0 0 auto;
  background: transparent;
  color: #e6edf3;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .12s, border-color .12s, color .12s;
}
.hmi-fs-exit-btn:hover {
  background: rgba(231,76,60,.35);
  border-color: rgba(231,76,60,.65);
  color: #fff;
}
.hmi-fs-center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.hmi-fs-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto;
  background: #8b96a5;
  box-shadow: 0 0 0 2px rgba(255,255,255,.10);
  transition: background .2s, box-shadow .2s;
}
.hmi-fs-text {
  overflow: hidden; text-overflow: ellipsis;
}
.hmi-fs-wifi {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .3px;
  color: #5b6878;
  transition: color .2s;
}

.io-hmi-canvas { overflow-anchor: none; }

.io-hmi-ctx {
  min-width: 280px !important;
  max-width: 340px !important;
}


.panel-body#watchBody {
  max-height: none !important;
  overflow: visible !important;
}

.view-toggle,
.editor-tabs,
.topbar {
  overflow-anchor: none;
}

.io-hmi-ctx {
  min-width: 280px !important;
  max-width: 340px !important;
}


@media (max-width: 900px) {
  .mobile-nav-item {
    padding: 6px 1px;
    min-width: 0;
  }
  .mobile-nav-item .mnav-label {
    font-size: 9px;
    line-height: 1.05;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 1px;
    box-sizing: border-box;
  }
  .mobile-nav-item .mnav-icon { font-size: 18px; }
  .mobile-nav-item.active .mnav-label { font-weight: 700; }
}
@media (max-width: 420px) {
  .mobile-nav-item .mnav-label { font-size: 8.5px; }
  .mobile-nav-item .mnav-icon  { font-size: 17px; }
}

@media (max-width: 900px) {
  .io-hmi-wrap.mobile-hmi {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-canvas {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .io-hmi-wrap.mobile-hmi .io-hmi-palette {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    width: 88vw !important;
    max-width: 340px !important;
    min-width: 0 !important;
    z-index: 150 !important;
    background: var(--bg-1) !important;
    border-right: 1px solid var(--border-hi) !important;
    border-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    transform: translateX(-100%);
    transition: transform .22s ease, box-shadow .22s ease;
    box-shadow: none;
  }
  .io-hmi-wrap.mobile-hmi.mobile-palette-open .io-hmi-palette {
    transform: translateX(0);
    box-shadow: 6px 0 24px rgba(0,0,0,.55);
  }

  .io-hmi-wrap.mobile-hmi .io-hmi-side {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important;
    width: 90vw !important;
    max-width: 360px !important;
    min-width: 0 !important;
    z-index: 150 !important;
    background: var(--bg-1) !important;
    border-left: 1px solid var(--border-hi) !important;
    border-top: 0 !important;
    display: block !important;
    padding: 12px 14px 24px !important;
    overflow-y: auto !important;
    transform: translateX(100%);
    transition: transform .22s ease, box-shadow .22s ease;
    box-shadow: none;
  }
  .io-hmi-wrap.mobile-hmi.mobile-side-open .io-hmi-side {
    transform: translateX(0);
    box-shadow: -6px 0 24px rgba(0,0,0,.55);
  }

  .io-hmi-wrap.mobile-hmi .io-hmi-pal-item {
    min-height: 42px;
    padding: 11px 12px;
    font-size: 13.5px;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-pal-group {
    font-size: 11px;
    padding: 10px 6px 4px;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-side-title {
    font-size: 13.5px;
    padding-bottom: 8px;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-field {
    margin-bottom: 10px;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-field > input,
  .io-hmi-wrap.mobile-hmi .io-hmi-field > select {
    min-height: 40px;
    font-size: 15px;
    padding: 8px 10px;
  }
}

@media (max-width: 900px) {
  .mobile-nav { z-index: 180 !important; }
}


@media (max-width: 900px) {
  .io-hmi-wrap.mobile-hmi .io-hmi-side {
    width: 92vw !important;
    max-width: 380px !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: var(--bg-1) !important;
    border-left: 1px solid var(--border-hi) !important;
    box-shadow: none;
    transform: translateX(100%);
    transition: transform .22s ease, box-shadow .22s ease;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .io-hmi-wrap.mobile-hmi.mobile-side-open .io-hmi-side {
    transform: translateX(0);
    box-shadow: -6px 0 24px rgba(0,0,0,.55);
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-side > * {
    padding-left: 14px;
    padding-right: 14px;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-side-title {
    padding: 12px 14px 10px !important;
    margin: 0 !important;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
  }

  .mobile-nav-item .mnav-icon {
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
  }

  .io-hmi-obj .io-hmi-obj-resize {
    z-index: 120 !important;
  }

  .io-hmi-obj > [data-part="btn"] { cursor: pointer; }
}

.io-hmi-obj .io-hmi-obj-resize { z-index: 120 !important; }
.io-hmi-obj > [data-part="btn"] { cursor: pointer; }


@media (max-width: 900px) {
  .io-modebar .io-mode-btn .io-mode-text {
    display: none !important;
  }
  .io-modebar .io-mode-btn {
    padding: 6px 8px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 900px) {
  .io-hmi-wrap.mobile-hmi > .io-hmi-side,
  body .io-hmi-wrap.mobile-hmi > .io-hmi-side {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 64px !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 92vw !important;
    max-width: 380px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    z-index: 150 !important;
    background: var(--bg-1) !important;
    border-left: 1px solid var(--border-hi) !important;
    padding: 0 !important;
    transform: translateX(100%);
    transition: transform .22s ease, box-shadow .22s ease;
  }
  .io-hmi-wrap.mobile-hmi.mobile-side-open > .io-hmi-side {
    transform: translateX(0) !important;
    box-shadow: -6px 0 24px rgba(0,0,0,.55);
  }

  .io-hmi-wrap.mobile-hmi .io-hmi-side-title {
    margin: 0 !important;
    padding: 12px 14px 12px !important;
    border-bottom: 1px solid var(--border);
    background: var(--bg-1);
    font-size: 13.5px;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-side > .io-hmi-tabs {
    padding: 0 8px !important;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 48px;
    z-index: 2;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-side > .io-hmi-tab-content {
    padding: 12px 14px 24px !important;
  }

  .io-hmi-wrap.mobile-hmi .io-hmi-field > input,
  .io-hmi-wrap.mobile-hmi .io-hmi-field > select,
  .io-hmi-wrap.mobile-hmi .io-hmi-field input[type="text"],
  .io-hmi-wrap.mobile-hmi .io-hmi-field input[type="number"] {
    min-height: 42px !important;
    font-size: 15px !important;
    padding: 9px 11px !important;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-field > label {
    font-size: 11.5px;
    margin-bottom: 4px;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-field { margin-bottom: 12px; }

  .io-hmi-wrap.mobile-hmi .io-hmi-field.io-hmi-color-row > input[type="color"],
  .io-hmi-wrap.mobile-hmi .io-hmi-field [data-color-key] {
    min-width: 56px !important;
    min-height: 40px !important;
  }
}

.io-hmi-sync-overlay {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
  z-index: 90;
  pointer-events: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
}
.io-hmi-sync-overlay span {
  padding: 8px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.inline-file-picker {
  min-width: 280px;
  max-width: 360px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  -webkit-overflow-scrolling: touch;
  animation: inlinePickerIn .12s ease;
}
@keyframes inlinePickerIn {
  from { opacity: 0; transform: translateY(-4px); }
}
.inline-file-picker .ifp-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fg-mute);
  padding: 6px 10px 4px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.inline-file-picker .ifp-count {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.inline-file-picker .ifp-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .1s;
}
.inline-file-picker .ifp-row:hover { background: var(--bg-2); }
.inline-file-picker .ifp-row.current {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.inline-file-picker .ifp-row.current .ifp-name { color: var(--accent); }
.inline-file-picker .ifp-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.inline-file-picker .ifp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.inline-file-picker .ifp-current {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  flex: 0 0 auto;
}
.inline-file-picker .ifp-meta {
  font-size: 10.5px;
  color: var(--fg-mute);
  font-family: var(--mono);
  padding-left: 0;
}
.inline-file-picker .ifp-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--fg-mute);
  font-size: 12px;
  line-height: 1.5;
}
.inline-file-picker .ifp-actions {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 4px;
}
@media (max-width: 900px) {
  .inline-file-picker { min-width: 260px; max-width: calc(100vw - 24px); }
  .inline-file-picker .ifp-row { padding: 12px 10px; min-height: 46px; }
  .inline-file-picker .ifp-name { font-size: 14px; }
}


.mgr-card-actions .mgr-btn.hmi-btn-pending {
  opacity: .55;
}

@media (max-width: 900px) {
  .io-hmi-wrap.mobile-hmi .io-hmi-canvas {
    padding: 0 !important;
  }
}


@media (max-width: 900px) {
  .io-modebar .io-mode-btn .io-mode-text {
    display: none !important;
  }
  .io-modebar .io-mode-btn {
    padding: 6px 8px !important;
    min-width: 0 !important;
  }
}

.io-hmi-wrap.io-hmi-palette-hidden > .io-hmi-palette {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.io-hmi-wrap.io-hmi-side-hidden > .io-hmi-side {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.io-hmi-wrap.hmi-view-only:not(.io-hmi-palette-hidden):not(.io-hmi-side-hidden) {
  grid-template-columns: 180px 1fr 340px !important;
}
.io-hmi-wrap.hmi-view-only:not(.io-hmi-palette-hidden):not(.io-hmi-side-hidden)
  > .io-hmi-palette,
.io-hmi-wrap.hmi-view-only:not(.io-hmi-palette-hidden):not(.io-hmi-side-hidden)
  > .io-hmi-side {
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 12px 14px 24px !important;
  border: 0 !important;
  overflow-y: auto !important;
}
.io-hmi-wrap.hmi-view-only:not(.io-hmi-palette-hidden):not(.io-hmi-side-hidden)
  > .io-hmi-palette {
  border-right: 1px solid var(--border) !important;
  padding: 0 !important;
}
.io-hmi-wrap.hmi-view-only:not(.io-hmi-palette-hidden):not(.io-hmi-side-hidden)
  > .io-hmi-side {
  border-left: 1px solid var(--border) !important;
}
.io-hmi-wrap.io-hmi-palette-hidden.io-hmi-side-hidden {
  grid-template-columns: 1fr !important;
}
#panelToggleLeft.hmi-pos,
#panelToggleRight.hmi-pos {
  z-index: 300;
  touch-action: manipulation;
}


:root { color-scheme: dark; }
[data-theme="light"], [data-theme="porcelain"] { color-scheme: light; }

.io-hmi-side,
.io-hmi-palette,
.io-hmi-pal-list,
.io-hmi-pal-search,
.io-hmi-side *,
.io-hmi-palette * {
  color-scheme: dark;
}
[data-theme="light"] .io-hmi-side,
[data-theme="light"] .io-hmi-palette,
[data-theme="light"] .io-hmi-side *,
[data-theme="light"] .io-hmi-palette *,
[data-theme="porcelain"] .io-hmi-side,
[data-theme="porcelain"] .io-hmi-palette,
[data-theme="porcelain"] .io-hmi-side *,
[data-theme="porcelain"] .io-hmi-palette * { color-scheme: light; }

.io-hmi-side-title,
.io-hmi-field > label,
.io-hmi-field label,
.io-hmi-check,
.io-hmi-hint,
.io-hmi-tab,
.io-hmi-tab-content {
  color: var(--fg) !important;
}
.io-hmi-field > input,
.io-hmi-field > select,
.io-hmi-field > textarea,
.io-hmi-pal-search,
.io-hmi-side input[type="text"],
.io-hmi-side input[type="number"],
.io-hmi-side input[type="color"],
.io-hmi-side select,
.io-hmi-side textarea {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  -moz-appearance: none;
  appearance: none;
}
.io-hmi-side input[type="color"] {
  -moz-appearance: auto;
  appearance: auto;
  padding: 2px;
}
.io-hmi-side input:focus,
.io-hmi-side select:focus,
.io-hmi-side textarea:focus {
  border-color: var(--accent) !important;
  outline: none;
}
.io-hmi-side input::placeholder,
.io-hmi-pal-search::placeholder { color: var(--fg-mute) !important; opacity: 1; }

.io-hmi-tabs {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border) !important;
}
.io-hmi-tab {
  background: var(--bg-1) !important;
  color: var(--fg-dim) !important;
  border-bottom: 2px solid transparent !important;
}
.io-hmi-tab:hover { background: var(--bg-2) !important; color: var(--fg) !important; }
.io-hmi-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background: var(--bg-2) !important;
}
.io-hmi-field-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fg-mute);
  font-weight: 700;
  padding: 10px 2px 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.io-hmi-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 0;
  cursor: pointer;
  user-select: none;
}
.io-hmi-check input[type="checkbox"] {
  accent-color: var(--accent);
  margin: 0;
  cursor: pointer;
}

@media (min-width: 901px) {
  .io-hmi-side {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    padding: 10px 10px 20px !important;
  }
  .io-hmi-wrap { grid-template-columns: 180px 1fr 200px; }
  .io-hmi-side-title { font-size: 12px; padding-bottom: 6px; margin-bottom: 8px; }
  .io-hmi-field { margin-bottom: 6px; gap: 2px; }
  .io-hmi-field > label,
  .io-hmi-field label {
    font-size: 10px;
    letter-spacing: .3px;
  }
  .io-hmi-field > input,
  .io-hmi-field > select,
  .io-hmi-side input[type="text"],
  .io-hmi-side input[type="number"] {
    padding: 4px 6px !important;
    font-size: 11px !important;
    min-height: 0 !important;
  }
  .io-hmi-side .io-hmi-field.io-hmi-color-row > input[type="color"] {
    width: 38px; height: 24px; min-width: 0;
  }
}

.io-hmi-canvas { cursor: grab; }
.io-hmi-canvas.u_22_2_panning { cursor: grabbing; }
.io-hmi-canvas.u_22_2_panning * { cursor: grabbing !important; }


.io-hmi-wrap { position: relative; }

#hmiPropsToggle {
  position: absolute;
  top: 8px;
  right: 200px;               /* left edge of the 200 px properties pane */
  z-index: 320;
  width: 14px;
  height: 46px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px 0 0 4px;
  color: var(--fg-dim);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, right .18s ease;
}
#hmiPropsToggle:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
}
#hmiPropsToggle.collapsed {
  right: 0;
  border-radius: 4px;
  background: var(--accent-2);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 10px rgba(88,166,255,.6);
}
.io-hmi-wrap.io-hmi-side-hidden #hmiPropsToggle { right: 0; }

@media (max-width: 900px) {
  #hmiPropsToggle {
    top: 6px;
    right: 6px;
    width: 34px;
    height: 34px;
    font-size: 16px;
    border-radius: 8px;
    touch-action: manipulation;
  }
  #hmiPropsToggle.collapsed { right: 6px; }
}

#panelToggleRight {
  z-index: 320;
}

.io-hmi-wrap.io-hmi-palette-hidden.io-hmi-side-hidden {
  grid-template-columns: 1fr !important;
}
.io-hmi-wrap.io-hmi-palette-hidden:not(.io-hmi-side-hidden) {
  grid-template-columns: 1fr 200px !important;
}
.io-hmi-wrap.io-hmi-side-hidden:not(.io-hmi-palette-hidden) {
  grid-template-columns: 180px 1fr !important;
}
.io-hmi-wrap:not(.io-hmi-palette-hidden):not(.io-hmi-side-hidden) {
  grid-template-columns: 180px 1fr 200px !important;
}

.io-hmi-wrap.io-hmi-side-hidden > .io-hmi-side {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
}
.io-hmi-wrap.io-hmi-palette-hidden > .io-hmi-palette {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
}


#hmiPropsToggle {
  top: 40px !important;
}
@media (max-width: 900px) {
  #hmiPropsToggle { top: 6px !important; }
}

.io-hmi-obj-display {
  padding: 2px;
  box-sizing: content-box;
}

body.wlc-hmi-pan .io-hmi-canvas,
body.wlc-hmi-pan .io-hmi-canvas * {
  cursor: grab !important;
}
body.wlc-hmi-pan .io-hmi-canvas.u_22_2_panning,
body.wlc-hmi-pan .io-hmi-canvas.u_22_2_panning * {
  cursor: grabbing !important;
}
body.wlc-hmi-pan .io-hmi-obj-resize {
  cursor: nwse-resize !important;
}

#hmiToolToggle.active {
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(31,111,235,.55);
}

#panelToggleRight.u_22_4-owned {
  transition: none;
}


.io-hmi-canvas,
.io-hmi-canvas.u_22_2_panning {
  cursor: default !important;
}
.io-hmi-canvas * { cursor: default; }
.io-hmi-canvas input,
.io-hmi-canvas button,
.io-hmi-canvas select,
.io-hmi-canvas textarea { cursor: auto; }

body.wlc-hmi-pan .io-hmi-canvas,
body.wlc-hmi-pan .io-hmi-canvas * {
  cursor: grab !important;
}
body.wlc-hmi-pan .io-hmi-canvas input,
body.wlc-hmi-pan .io-hmi-canvas button,
body.wlc-hmi-pan .io-hmi-canvas select,
body.wlc-hmi-pan .io-hmi-canvas textarea {
  cursor: auto !important;
}
body.wlc-hmi-pan .io-hmi-canvas.u_22_2_panning,
body.wlc-hmi-pan .io-hmi-canvas.u_22_2_panning * {
  cursor: grabbing !important;
}
body.wlc-hmi-pan .io-hmi-obj-resize { cursor: nwse-resize !important; }
body.wlc-hmi-pan .io-hmi-area-hotzone { cursor: nwse-resize !important; }

body.wlc-hmi-view-only:not(.wlc-hmi-palette-hidden) .io-hmi-palette {
  display: flex !important;
  visibility: visible !important;
  overflow: hidden !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  padding: 0 !important;
  border-right: 1px solid var(--border) !important;
}
body.wlc-hmi-view-only:not(.wlc-hmi-side-hidden) .io-hmi-side {
  display: block !important;
  visibility: visible !important;
  overflow-y: auto !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  padding: 10px 10px 20px !important;
  border-left: 1px solid var(--border) !important;
}

.io-hmi-obj,
.io-hmi-obj-display {
  padding: 0 !important;
  box-sizing: border-box !important;
}

#hmiPropsToggle { top: 62px !important; }
@media (max-width: 900px) { #hmiPropsToggle { top: 6px !important; } }

@media (max-width: 900px) {
  #hmiPropsToggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 900px) {
  .io-hmi-wrap.mobile-hmi > .io-hmi-side,
  body .io-hmi-wrap.mobile-hmi > .io-hmi-side,
  .io-hmi-wrap.mobile-hmi .io-hmi-side {
    width: 34vw !important;
    max-width: 150px !important;
    min-width: 120px !important;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-side > * {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-side-title {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-field > label,
  .io-hmi-wrap.mobile-hmi .io-hmi-field label {
    font-size: 10.5px !important;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-field > input,
  .io-hmi-wrap.mobile-hmi .io-hmi-field > select,
  .io-hmi-wrap.mobile-hmi .io-hmi-field input[type="text"],
  .io-hmi-wrap.mobile-hmi .io-hmi-field input[type="number"] {
    min-height: 32px !important;
    font-size: 12.5px !important;
    padding: 5px 7px !important;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-tab {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
  .io-hmi-wrap.mobile-hmi .io-hmi-field-section {
    font-size: 9px;
    padding: 8px 2px 3px;
  }
}



[data-theme="espresso"] {
  --bg:#14100c; --bg-1:#1c1712; --bg-2:#26201a; --bg-3:#332a22;
  --border:#3d3126; --border-hi:#5a4835;
  --fg:#f5ead6; --fg-dim:#bfb098; --fg-mute:#7d6f5a;
  --accent:#d4a24e; --accent-2:#a87a2a;
  --green:#8fbf5a; --green-dim:#5c8a34; --amber:#e0b257; --red:#d96d5a; --purple:#c9a0e8;
  --bank-X:#8fbf5a; --bank-Y:#e0b257; --bank-M:#6fa8d6; --bank-D:#c9a0e8;
  --bank-T:#d96d5a; --bank-C:#e08a4e; --bank-S:#5fc4b8; --bank-K:#8a7a62;
  --bank-P:#c9a0e8; --bank-I:#8fbf5a; --bank-F:#d4a24e; --bank-A:#5fc4b8;
  --shadow:0 12px 34px rgba(20,10,0,.78);
}

[data-theme="sage"] {
  --bg:#f2f5ee; --bg-1:#fbfdf8; --bg-2:#e8ede0; --bg-3:#dae1cc;
  --border:#c9d2b8; --border-hi:#a4b090;
  --fg:#2a3420; --fg-dim:#5e6b4d; --fg-mute:#8b9878;
  --accent:#5f8a3a; --accent-2:#3f6020;
  --green:#5f8a3a; --green-dim:#3f6020; --amber:#a87a2a; --red:#b04a3f; --purple:#7a5a9e;
  --bank-X:#5f8a3a; --bank-Y:#a87a2a; --bank-M:#2e6f96; --bank-D:#7a5a9e;
  --bank-T:#b04a3f; --bank-C:#c1622f; --bank-S:#3d8a80; --bank-K:#7d8a6b;
  --bank-P:#7a5a9e; --bank-I:#5f8a3a; --bank-F:#a3376b; --bank-A:#3d8a80;
  --shadow:0 10px 28px rgba(80,90,60,.20);
}
[data-theme="sage"] .graph-canvas {
  background-image:
    linear-gradient(rgba(42,52,32,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,52,32,.06) 1px, transparent 1px);
}
[data-theme="sage"] .io-hmi-canvas {
  background-image:
    linear-gradient(rgba(42,52,32,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,52,32,.06) 1px, transparent 1px);
}

[data-theme="sakura"] {
  --bg:#161320; --bg-1:#1e1a2c; --bg-2:#2a233c; --bg-3:#3a3050;
  --border:#3f3355; --border-hi:#5a4a75;
  --fg:#f0e7f5; --fg-dim:#b8a9c9; --fg-mute:#7a6d8f;
  --accent:#e8a8be; --accent-2:#b26882;
  --green:#8fd4a8; --green-dim:#5ea078; --amber:#e8c890; --red:#e88a92; --purple:#c4a8e8;
  --bank-X:#8fd4a8; --bank-Y:#e8c890; --bank-M:#a8b8e8; --bank-D:#c4a8e8;
  --bank-T:#e88a92; --bank-C:#e8a878; --bank-S:#88c4d4; --bank-K:#8a7da0;
  --bank-P:#c4a8e8; --bank-I:#8fd4a8; --bank-F:#e8a8be; --bank-A:#88c4d4;
  --shadow:0 12px 34px rgba(20,10,30,.72);
}

[data-theme="sage"] { color-scheme: light; }
[data-theme="espresso"], [data-theme="sakura"] { color-scheme: dark; }

.theme-swatch-espresso {
  background: linear-gradient(135deg, #14100c 0%, #2c1e10 100%);
  color: #d4a24e;
}
.theme-swatch-espresso::before { background: #f5ead6; }
.theme-swatch-espresso::after  { background: #d4a24e; color: #d4a24e; }

.theme-swatch-sage {
  background: linear-gradient(135deg, #f2f5ee 0%, #dae1cc 100%);
  color: #5f8a3a;
}
.theme-swatch-sage::before { background: #2a3420; }
.theme-swatch-sage::after  { background: #5f8a3a; color: #5f8a3a; }

.theme-swatch-sakura {
  background: linear-gradient(135deg, #161320 0%, #3a1f36 100%);
  color: #e8a8be;
}
.theme-swatch-sakura::before { background: #f0e7f5; }
.theme-swatch-sakura::after  { background: #e8a8be; color: #e8a8be; box-shadow: 0 22px 0 -2px #c4a8e8; }

.theme-swatch-sm.theme-swatch-espresso { background: #d4a24e; }
.theme-swatch-sm.theme-swatch-sage     { background: #5f8a3a; }
.theme-swatch-sm.theme-swatch-sakura   { background: #e8a8be; }



.io-hmi-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 8px 8px 6px !important;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 7%, var(--bg-2)),
      var(--bg-1)) !important;
  border-bottom: 1px solid var(--border) !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: relative;
  overflow: hidden;
}
.io-hmi-tabs::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--accent) 55%, transparent) 50%,
    transparent);
  pointer-events: none;
}
.io-hmi-tab {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--fg-mute) !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 1 auto;
  min-height: 22px;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .1s ease !important;
}
.io-hmi-tab:hover {
  background: color-mix(in oklab, var(--fg) 8%, transparent) !important;
  color: var(--fg) !important;
  border-color: color-mix(in oklab, var(--border-hi) 55%, transparent) !important;
}
.io-hmi-tab:active {
  transform: translateY(1px);
}
.io-hmi-tab.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
  box-shadow:
    0 2px 10px color-mix(in oklab, var(--accent) 48%, transparent),
    0 1px 2px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  font-weight: 800 !important;
}

.io-hmi-tab-content {
  padding: 12px 4px 6px !important;
}



@media (max-width: 900px) {
  .io-hmi-wrap.mobile-hmi > .io-hmi-side,
  body .io-hmi-wrap.mobile-hmi > .io-hmi-side,
  .io-hmi-wrap.mobile-hmi .io-hmi-side {
    width: 41vw !important;
    max-width: 180px !important;
    min-width: 144px !important;
  }
}


.io-hmi-obj.u238-blink,
.io-hmi-obj-display.u238-blink {
  animation: u238-blink 1s steps(2, start) infinite;
}
@keyframes u238-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.12; }
}

.io-hmi-obj.u238-smooth,
.io-hmi-obj-display.u238-smooth {
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    opacity .25s ease;
}

.io-hmi-obj.u238-invisible,
.io-hmi-obj-display.u238-invisible {
  visibility: hidden !important;
}

.io-hmi-obj.u238-raised,
.io-hmi-obj-display.u238-raised {
  box-shadow:
    0 3px 6px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.io-hmi-obj.u238-round,
.io-hmi-obj-display.u238-round {
  border-radius: 14px !important;
}



.wlc-tab-close-pop {
  animation: wlcSignoutIn .12s ease;
}
@keyframes wlcSignoutIn {
  from { opacity: 0; transform: translateY(-4px); }
}

.editor-tabs .tab {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.editor-tabs .tab * {
  user-select: none;
  -webkit-user-select: none;
}
.editor-tabs .tab.dragging {
  opacity: 0.45;
  cursor: grabbing;
}
.editor-tabs .tab.u239-drag-ready {
  cursor: grab;
}
.tab-drag-ghost {
  position: fixed;
  z-index: 10050;
  pointer-events: none;
  padding: 6px 14px;
  background: var(--bg-1);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  box-shadow: 0 8px 20px rgba(0,0,0,.55);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  opacity: 0.94;
}
.tab-drop-indicator {
  position: fixed;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 4px rgba(255,255,255,.35);
  pointer-events: none;
  z-index: 10040;
  border-radius: 1px;
}

.modal-back.u239-challenge { z-index: 10060; }



.editor-tabs .tab {
}
.editor-tabs .tab.u2310-dragging {
  cursor: grabbing;
  z-index: 20;
  opacity: 0.94;
  box-shadow:
    0 8px 22px rgba(0,0,0,.55),
    0 0 0 2px var(--accent),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.wlc-user-tooltip {
  position: fixed;
  z-index: 20000;
  background: var(--bg-1);
  color: var(--fg);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  max-width: 340px;
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
.wlc-user-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}
.wlc-user-tooltip strong {
  color: var(--accent);
  font-weight: 700;
}
.wlc-user-tooltip .tt-sub {
  color: var(--fg-mute);
  font-size: 11px;
}

.u2310-uname-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  margin-top: 6px;
  min-height: 15px;
  color: var(--fg-mute);
  transition: color .15s;
}
.u2310-uname-status .icon {
  display: inline-flex;
  width: 14px;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}
.u2310-uname-status.checking { color: var(--fg-mute); }
.u2310-uname-status.checking .icon {
  animation: u2310-spin 1s linear infinite;
  transform-origin: 50% 50%;
}
.u2310-uname-status.ok       { color: var(--green); }
.u2310-uname-status.bad      { color: var(--red); }
@keyframes u2310-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.u2310-pw-checklist {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
}
.u2310-pw-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-mute);
  transition: color .15s;
}
.u2310-pw-rule .icon {
  display: inline-flex;
  width: 14px;
  justify-content: center;
  font-weight: 800;
}
.u2310-pw-rule.ok {
  color: var(--green);
}
.u2310-pw-rule.ok .icon::before { content: '\2713'; }
.u2310-pw-rule:not(.ok) .icon::before { content: '\2717'; }



.topbar .user .u2312-role,
.manager-topbar .user .u2312-role {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
}

.admin-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}
.admin-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
}
.admin-brand .admin-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 55%, transparent);
}

.admin-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.admin-nav {
  width: 200px;
  flex: 0 0 auto;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 54px;
  height: calc(100vh - 54px);
  overflow-y: auto;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.admin-nav-item:hover {
  background: var(--bg-2);
  color: var(--fg);
}
.admin-nav-item.active {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 700;
}
.admin-nav-item .an-icon {
  display: inline-flex;
  width: 18px;
  justify-content: center;
  font-size: 15px;
}
.admin-nav-item .an-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
}

.admin-main {
  flex: 1 1 auto;
  padding: 22px 26px 60px;
  min-width: 0;
  overflow-x: hidden;
}
.admin-h1 {
  font-size: 20px;
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.admin-sub {
  color: var(--fg-dim);
  font-size: 13px;
  margin: 0 0 20px;
}

.admin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.admin-kpi {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.admin-kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--border-hi);
}
.admin-kpi.kpi-accent::before { background: var(--accent); }
.admin-kpi.kpi-green::before  { background: var(--green); }
.admin-kpi.kpi-amber::before  { background: var(--amber); }
.admin-kpi.kpi-red::before    { background: var(--red); }
.admin-kpi.kpi-purple::before { background: var(--purple); }
.admin-kpi-value {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--mono);
  line-height: 1;
  color: var(--fg);
}
.admin-kpi.kpi-accent .admin-kpi-value { color: var(--accent); }
.admin-kpi.kpi-green  .admin-kpi-value { color: var(--green); }
.admin-kpi.kpi-amber  .admin-kpi-value { color: var(--amber); }
.admin-kpi.kpi-red    .admin-kpi-value { color: var(--red); }
.admin-kpi.kpi-purple .admin-kpi-value { color: var(--purple); }
.admin-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.admin-kpi-sub {
  font-size: 11.5px;
  color: var(--fg-dim);
  margin-top: 2px;
}

.admin-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.admin-card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--fg);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-card-title .spacer { flex: 1; }
.admin-card-title .hint { font-size: 11.5px; color: var(--fg-mute); font-weight: 400; letter-spacing: 0; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.admin-table th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
  color: var(--fg-mute);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--bg-2);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.admin-table .mono  { font-family: var(--mono); font-size: 11.5px; }
.admin-table .dim   { color: var(--fg-dim); }
.admin-table .mute  { color: var(--fg-mute); font-size: 11.5px; }

.admin-role-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.admin-role-pill.r-admin    { background: color-mix(in oklab, var(--red)     22%, transparent); color: var(--red);    border: 1px solid color-mix(in oklab, var(--red) 45%, transparent); }
.admin-role-pill.r-engineer { background: color-mix(in oklab, var(--accent)  22%, transparent); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); }
.admin-role-pill.r-operator { background: color-mix(in oklab, var(--amber)   22%, transparent); color: var(--amber);  border: 1px solid color-mix(in oklab, var(--amber) 45%, transparent); }
.admin-role-pill.r-viewer   { background: color-mix(in oklab, var(--fg-mute) 22%, transparent); color: var(--fg-dim); border: 1px solid var(--border-hi); }

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.admin-btn {
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--fg);
  font-size: 11px;
  cursor: pointer;
  font-weight: 500;
  transition: background .12s, border-color .12s, color .12s;
}
.admin-btn:hover:not(:disabled) { background: var(--bg-3); border-color: var(--border-hi); }
.admin-btn:disabled { opacity: .45; cursor: not-allowed; }
.admin-btn.danger { background: rgba(231,76,60,.14); border-color: rgba(231,76,60,.4); color: var(--red); }
.admin-btn.danger:hover:not(:disabled) { background: var(--red); color: #fff; border-color: var(--red); }
.admin-btn.primary { background: color-mix(in oklab, var(--accent) 18%, transparent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); color: var(--accent); }
.admin-btn.primary:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }

.admin-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.admin-filter-row input[type="text"] {
  flex: 1 1 240px;
  min-width: 160px;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 12.5px;
  outline: none;
}
.admin-filter-row input[type="text"]:focus { border-color: var(--accent); }

.admin-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--fg-mute);
  font-size: 13px;
}

.admin-load-more {
  display: flex;
  justify-content: center;
  padding: 12px 0 0;
}

@media (max-width: 900px) {
  .admin-nav {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px 6px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    gap: 4px;
  }
  .admin-nav-item {
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
    font-size: 12.5px;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .admin-nav-item.active {
    border-left: 0;
    border-bottom-color: var(--accent);
  }
  .admin-nav-item .an-count { display: none; }
  .admin-body { flex-direction: column; }
  .admin-main { padding: 14px 12px calc(30px + env(safe-area-inset-bottom, 0px)); }
  .admin-topbar { padding: 8px 12px calc(8px + env(safe-area-inset-top, 0px)); }
  .admin-topbar .btn.ghost { min-height: 40px; min-width: 40px; padding: 8px 10px; font-size: 15px; }
  .admin-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .admin-kpi { padding: 10px 12px; }
  .admin-kpi-value { font-size: 20px; }
  .admin-table { font-size: 12px; }
  .admin-table th, .admin-table td { padding: 7px 5px; }
  .admin-table .mono { font-size: 11px; }
  .admin-row-actions { gap: 3px; }
  .admin-btn { padding: 5px 8px; font-size: 10.5px; }
}


.u2316-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  margin-right: 4px;
  border-right: 1px solid var(--border);
}
.u2316-scope-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--fg-mute);
}
.u2316-scope .chip {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
}
.u2316-scope .chip.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
}

.u2316-owner-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  width: fit-content;
  transition: filter .12s, transform .12s;
  user-select: none;
  -webkit-user-select: none;
}
.u2316-owner-pill:hover  { filter: brightness(1.18); }
.u2316-owner-pill:active { transform: translateY(1px); }
.u2316-owner-pill .u2316-op-label {
  opacity: .72;
  font-weight: 500;
}
.u2316-owner-pill.mine {
  background: color-mix(in oklab, var(--green) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--green) 42%, transparent);
  color: var(--green);
}
.u2316-owner-pill.other {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 42%, transparent);
  color: var(--accent);
}
.u2316-owner-pill.unowned {
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  color: var(--fg-mute);
}
.u2316-owner-pill .u2316-you-tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--green);
  color: #001a0d;
  font-weight: 800;
  letter-spacing: .5px;
}
.u2316-owner-pill .u2316-filter-hint {
  font-size: 9.5px;
  opacity: .55;
  margin-left: 2px;
}

.u2316-empty-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 16px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  border-radius: 8px;
  color: var(--fg-dim);
  font-size: 12.5px;
  line-height: 1.5;
}
.u2316-empty-hint .btn { flex: 0 0 auto; }

@media (max-width: 900px) {
  .u2316-scope {
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
    flex: 0 0 auto;
  }
  .u2316-scope .chip {
    padding: 8px 14px;
    min-height: 36px;
  }
  .u2316-owner-pill {
    padding: 5px 10px;
    font-size: 12px;
  }
}



.device-switcher.u2317-switcher {
  padding: 8px;
  max-height: 78vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.u2317-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--fg-mute);
  font-weight: 700;
  flex: 0 0 auto;
}
.u2317-scope-pill {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  user-select: none;
  -webkit-user-select: none;
}
.u2317-scope-pill:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.u2317-search-wrap {
  padding: 0 4px 8px;
  flex: 0 0 auto;
}
.u2317-search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 12.5px;
  outline: none;
  transition: border-color .12s;
}
.u2317-search:focus { border-color: var(--accent); }
.u2317-search::placeholder { color: var(--fg-mute); }

.u2317-list {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 56vh;
  min-height: 60px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  padding: 2px;
  -webkit-overflow-scrolling: touch;
}
.u2317-list .device-switcher-item {
  padding: 8px 10px;
  border-radius: 5px;
  margin-bottom: 1px;
}
.u2317-list .device-switcher-item.current {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.u2317-list .sw-main {
  flex: 1 1 auto;
  min-width: 0;
}
.u2317-list .sw-name,
.u2317-list .sw-uid {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u2317-list mark.mgr-match,
mark.mgr-match.u2317-hl {
  background: color-mix(in oklab, var(--amber) 62%, transparent);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: inherit;
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--amber) 90%, transparent);
}

.u2317-footer {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 4px;
  flex: 0 0 auto;
}

.u2317-switcher .device-switcher-empty {
  padding: 18px 12px;
  font-size: 12.5px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .device-switcher.u2317-switcher {
    max-height: 82vh;
  }
  .u2317-list {
    max-height: 52vh;
  }
  .u2317-search {
    font-size: 16px;   /* prevents iOS zoom-on-focus */
    padding: 9px 11px;
  }
  .u2317-list .device-switcher-item {
    padding: 11px 10px;
    min-height: 52px;
  }
}



.bound-device-card .bd-uid {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
.bound-device-card .bd-uid > .u2318-uid-text {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.u2318-owner-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  transition: filter .12s;
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 42%, transparent);
}
.u2318-owner-badge:hover { filter: brightness(1.15); }
.u2318-owner-badge.mine {
  background: color-mix(in oklab, var(--green) 16%, transparent);
  color: var(--green);
  border-color: color-mix(in oklab, var(--green) 42%, transparent);
}
.u2318-owner-badge .u2318-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  opacity: .9;
}
.u2318-owner-badge .u2318-name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u2318-owner-badge .u2318-you {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .6px;
  padding: 0 4px;
  border-radius: 2px;
  background: var(--green);
  color: #001a0d;
  margin-left: 2px;
}

@media (max-width: 900px) {
  .u2318-owner-badge {
    font-size: 10.5px;
    padding: 3px 9px 3px 7px;
  }
  .u2318-owner-badge .u2318-name { max-width: 90px; }
}



.u2319-bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 16%, var(--bg-1)),
    var(--bg-1));
  border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border));
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 12.5px;
}
.u2319-bulkbar .u2319-bulk-count {
  font-weight: 700;
  font-family: var(--mono);
  color: var(--accent);
  letter-spacing: .3px;
}
.u2319-bulkbar .u2319-bulk-spacer { flex: 1; }
.u2319-bulkbar select {
  padding: 5px 9px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--fg);
  font-size: 12px;
  outline: none;
}
.u2319-bulkbar select:focus { border-color: var(--accent); }

.u2319-cbcol { width: 32px; text-align: center; }
.u2319-cb {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}

.u2319-live-list {
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: 4px;
}
.u2319-live-row {
  display: grid;
  grid-template-columns: 84px 130px 1fr;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--bg-2);
  font-size: 12px;
  align-items: baseline;
}
.u2319-live-row:last-child { border-bottom: none; }
.u2319-live-row .lr-ts {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
}
.u2319-live-row .lr-user {
  font-weight: 600;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u2319-live-row .lr-body {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.u2319-live-row .lr-kind {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: .3px;
}
.u2319-live-row.src-audit  .lr-kind { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.u2319-live-row.src-login  .lr-kind { background: color-mix(in oklab, var(--purple) 16%, transparent); color: var(--purple); }
.u2319-live-row.src-device .lr-kind { background: color-mix(in oklab, var(--green) 16%, transparent); color: var(--green); }
.u2319-live-row .lr-target {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
}
.u2319-live-row .lr-message {
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.u2319-live-row.sev-error .lr-message,
.u2319-live-row.sev-fail  .lr-message { color: var(--red); }
.u2319-live-row.sev-warn  .lr-message { color: var(--amber); }
.u2319-live-empty { padding: 30px; text-align: center; color: var(--fg-mute); font-size: 13px; }
.u2319-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: u2319-pulse 1.4s ease-in-out infinite;
  margin-left: 6px;
}
@keyframes u2319-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .35; }
}

.u2319-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bg-2);
  font-size: 12.5px;
}
.u2319-metric:last-child { border-bottom: none; }
.u2319-metric .m-label { color: var(--fg-dim); }
.u2319-metric .m-value { font-family: var(--mono); font-weight: 700; }
.u2319-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-3);
  overflow: hidden;
  margin-top: 6px;
  width: 100%;
}
.u2319-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--green-dim));
  transition: width .3s ease;
}
.u2319-bar-fill.warn { background: linear-gradient(90deg, var(--amber), #b57614); }
.u2319-bar-fill.bad  { background: linear-gradient(90deg, var(--red), #8b1a1a); }
.u2319-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.u2319-kv {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
}
.u2319-kv .k { color: var(--fg-mute); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.u2319-kv .v { font-family: var(--mono); margin-top: 2px; word-break: break-all; }

.u2319-pending-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  margin-bottom: 10px;
}
.u2319-pending-card .pc-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.u2319-pending-card .pc-uid {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
}
.u2319-pending-card .pc-meta {
  font-size: 11.5px;
  color: var(--fg-mute);
  font-family: var(--mono);
}
.u2319-pending-card .pc-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.u2319-pending-card select {
  padding: 5px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--fg);
  font-size: 12px;
  outline: none;
  min-width: 160px;
}

.u2319-maint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.u2319-maint-tile {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.u2319-maint-tile h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}
.u2319-maint-tile p {
  margin: 0;
  font-size: 11.5px;
  color: var(--fg-mute);
  line-height: 1.5;
  flex: 1;
}

.u2319-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.u2319-export-tile {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .08s;
}
.u2319-export-tile:hover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, var(--bg-1));
}
.u2319-export-tile:active { transform: translateY(1px); }
.u2319-export-tile .et-title { font-size: 13px; font-weight: 700; }
.u2319-export-tile .et-sub { font-size: 11.5px; color: var(--fg-mute); line-height: 1.5; }
.u2319-export-tile .et-icon { font-size: 22px; }

@media (max-width: 900px) {
  .u2319-live-row { grid-template-columns: 74px 1fr; }
  .u2319-live-row .lr-user { grid-column: 2; }
  .u2319-live-row .lr-body { grid-column: 1 / -1; }
  .u2319-bulkbar { padding: 8px 10px; gap: 6px; }
  .u2319-bulkbar select { min-height: 34px; font-size: 13px; }
}



.u2321-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: color-mix(in oklab, currentColor 22%, transparent);
  color: currentColor;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1;
  flex: 0 0 auto;
}


.bound-device-card .bd-head,
.bound-device-card .bd-info,
.bound-device-card .bd-actions {
  padding-right: 24px;
}
.bound-device-card .u2318-owner-badge {
  border-radius: 3px;
  padding: 2px 7px 2px 3px;
  gap: 6px;
  font-size: 10.5px;
  max-width: 130px;
}
.bound-device-card .u2318-owner-badge .u2318-icon {
  display: none !important;
}
.bound-device-card .u2318-owner-badge::before {
  content: attr(data-avatar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: color-mix(in oklab, currentColor 22%, transparent);
  color: currentColor;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  flex: 0 0 auto;
}
.bound-device-card .u2318-owner-badge .u2318-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
}


.mgr-card .mgr-card-info {
  padding-right: 26px;
}

.mgr-card .u2316-owner-pill {
  border-radius: 3px;
  padding: 2px 8px 2px 3px;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  max-width: 200px;
}
.mgr-card .u2316-owner-pill .u2316-op-label,
.mgr-card .u2316-owner-pill .u2316-filter-hint {
  display: none !important;
}
.mgr-card .u2316-owner-pill::before {
  content: attr(data-avatar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: color-mix(in oklab, currentColor 22%, transparent);
  color: currentColor;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  flex: 0 0 auto;
}
.mgr-card .u2316-owner-pill > span:not([class]) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.u2321-owner-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 3px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
}
.u2321-owner-cell.mine {
  background: color-mix(in oklab, var(--green) 14%, transparent);
  color: var(--green);
  border: 1px solid color-mix(in oklab, var(--green) 38%, transparent);
}
.u2321-owner-cell.other {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent);
}
.u2321-owner-cell .u2321-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .bound-device-card .bd-head,
  .bound-device-card .bd-info,
  .bound-device-card .bd-actions { padding-right: 26px; }
  .mgr-card .mgr-card-info        { padding-right: 28px; }
  .bound-device-card .u2318-owner-badge { font-size: 11px; max-width: 140px; }
  .mgr-card .u2316-owner-pill           { font-size: 11.5px; max-width: 220px; }
}

.modal-back.u2324-modal { z-index: 10060; }

.u2324-pick-row {
  transition: background .1s;
}
.u2324-pick-row:hover { background: var(--bg-2); }
.u2324-pick-row.selected { background: var(--accent-2); color: #fff; }

.ctx-menu {
  scrollbar-width: thin;
}
.ctx-menu::-webkit-scrollbar { width: 8px; height: 8px; }
.ctx-menu::-webkit-scrollbar-thumb {
  background: rgba(139,150,165,.35);
  border-radius: 4px;
}

.u2326-status-line {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--fg-mute);
  font-family: var(--mono);
  margin-top: 2px;
}
.u2326-status-line .u2326-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.u2326-status-line .u2326-chip.ok    { border-color: color-mix(in oklab, var(--green) 45%, transparent); color: var(--green); }
.u2326-status-line .u2326-chip.warn  { border-color: color-mix(in oklab, var(--amber) 45%, transparent); color: var(--amber); }
.u2326-status-line .u2326-chip.bad   { border-color: color-mix(in oklab, var(--red)   45%, transparent); color: var(--red); }



@media (max-width: 900px) {

  .u2319-bulkbar {
    padding: 10px 12px;
    gap: 8px;
  }
  .u2319-bulkbar .u2319-bulk-spacer { flex: 1 1 100%; height: 0; }
  .u2319-bulkbar .admin-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
    min-height: 38px;
    font-size: 12px;
  }

  .admin-filter-row { gap: 6px; }
  .admin-filter-row input[type="text"] {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 16px;      /* prevent iOS zoom-on-focus */
    padding: 9px 11px;
    min-height: 40px;
  }
  .admin-filter-row .admin-btn {
    flex: 1 1 auto;
    min-height: 38px;
  }

  .admin-table.u2327-cards {
    display: block;
    width: 100%;
  }
  .admin-table.u2327-cards thead { display: none; }
  .admin-table.u2327-cards tbody { display: block; }
  .admin-table.u2327-cards tr {
    display: block;
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 14px 12px;
    padding-right: 46px;   /* room for the checkbox in the top-right */
    margin-bottom: 10px;
  }
  .admin-table.u2327-cards tr:hover td { background: transparent; }

  .admin-table.u2327-cards td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    border: none;
    font-size: 12.5px;
    text-align: left;
    vertical-align: baseline;
  }
  .admin-table.u2327-cards td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--fg-mute);
    flex: 0 0 auto;
    min-width: 78px;
  }

  .admin-table.u2327-cards td.u2327-cbcol {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 0;
    margin: 0;
    display: block;
    width: 24px;
    height: 24px;
    border: none;
  }
  .admin-table.u2327-cards td.u2327-cbcol::before { display: none; }
  .admin-table.u2327-cards td.u2327-cbcol .u2319-cb {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .admin-table.u2327-cards td.u2327-primary {
    display: block;
    padding: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -.1px;
    font-family: var(--sans);
  }
  .admin-table.u2327-cards td.u2327-primary::before { display: none; }

  .admin-table.u2327-cards td.u2327-secondary {
    display: block;
    padding: 0 0 10px;
    font-size: 12px;
    font-family: var(--mono);
    color: var(--fg-mute);
    border-bottom: 1px dashed var(--border);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-table.u2327-cards td.u2327-secondary::before { display: none; }

  .admin-table.u2327-cards td.u2327-actions {
    display: block;
    padding: 10px 0 0;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
  .admin-table.u2327-cards td.u2327-actions::before { display: none; }
  .admin-table.u2327-cards td.u2327-actions .admin-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .admin-table.u2327-cards td.u2327-actions .admin-row-actions > * {
    flex: 1 1 auto;
    min-width: 110px;
  }
  .admin-table.u2327-cards td.u2327-actions .admin-btn {
    min-height: 38px;
    font-size: 12.5px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }
  .admin-table.u2327-cards td.u2327-actions select {
    min-height: 38px;
    font-size: 13px;
  }

  @media (max-width: 480px) {
    .admin-table.u2327-cards td {
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }
    .admin-table.u2327-cards td::before {
      min-width: 0;
    }
    .admin-table.u2327-cards td.u2327-actions .admin-row-actions > * {
      flex: 1 1 100%;
      min-width: 0;
    }
  }
}



.u2328-area {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.u2328-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 14px;
  flex-wrap: wrap;
}
.u2328-searchbar .u2328-field {
  position: relative;
  flex: 1 1 320px;
  min-width: 200px;
}
.u2328-searchbar input.u2328-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 34px 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font-size: 13px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.u2328-searchbar input.u2328-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.u2328-searchbar input.u2328-input::placeholder { color: var(--fg-mute); }

.u2328-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-mute);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .1s, color .1s;
}
.u2328-clear:hover { background: var(--bg-3); color: var(--fg); }
.u2328-clear[hidden] { display: none; }

.u2328-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  white-space: nowrap;
}
.u2328-count b { color: var(--accent); font-weight: 700; }

mark.u2328-hl {
  background: color-mix(in oklab, var(--amber) 60%, transparent);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: inherit;
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--amber) 90%, transparent);
}
[data-theme="light"] mark.u2328-hl,
[data-theme="sage"]  mark.u2328-hl,
[data-theme="porcelain"] mark.u2328-hl {
  background: color-mix(in oklab, var(--amber) 55%, transparent);
}

.admin-table tbody tr.u2328-hidden { display: none !important; }
.u2319-pending-card.u2328-hidden { display: none !important; }
.u2319-live-row.u2328-hidden { display: none !important; }

.u2328-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--fg-mute);
  font-size: 13px;
  line-height: 1.6;
}
.u2328-empty b { color: var(--fg); }

@media (max-width: 900px) {
  .u2328-searchbar {
    padding: 0 0 10px;
    gap: 8px;
  }
  .u2328-searchbar .u2328-field { flex: 1 1 100%; }
  .u2328-searchbar input.u2328-input {
    font-size: 16px;         /* prevents iOS zoom-on-focus */
    padding: 11px 40px 11px 12px;
    min-height: 44px;
  }
  .u2328-clear { width: 32px; height: 32px; right: 6px; font-size: 16px; }
  .u2328-count { font-size: 11px; }
}


.u2328-area > .u2328-searchbar {
  min-height: 50px;
  padding-top: 0;
  padding-bottom: 12px;
  box-sizing: border-box;
}

.u2328-area > .u2328-searchbar {
  padding-left:  26px;
  padding-right: 26px;
}

@media (max-width: 900px) {
  .u2328-area > .u2328-searchbar {
    min-height: 56px;
    padding-left:  12px;
    padding-right: 12px;
    padding-bottom: 10px;
  }
}


.u2328-area > .u2328-searchbar { display: none !important; }

.u2330-row .u2330-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  white-space: nowrap;
  padding: 0 4px;
}
.u2330-row .u2330-count b {
  color: var(--accent);
  font-weight: 700;
}
.u2330-row .u2330-count:empty { display: none; }

@media (max-width: 900px) {
  .u2330-row {
    gap: 8px;
  }
  .u2330-row input[type="text"] {
    flex: 1 1 100%;
    font-size: 16px;             /* iOS no-zoom */
    padding: 10px 12px;
    min-height: 42px;
  }
  .u2330-row .admin-btn {
    flex: 1 1 auto;
    min-height: 40px;
  }
  .u2330-row .u2330-count {
    flex: 1 1 auto;
    text-align: right;
    font-size: 11.5px;
  }
}


.u2328-area > .u2328-searchbar { display: none !important; }
.admin-main > .u2330-row       { display: none !important; }

.u2331-row .u2331-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  white-space: nowrap;
  padding: 0 4px;
}
.u2331-row .u2331-count b { color: var(--accent); font-weight: 700; }
.u2331-row .u2331-count:empty { display: none; }

@media (max-width: 900px) {
  .u2331-row input[type="text"] {
    flex: 1 1 100%;
    font-size: 16px;
    padding: 10px 12px;
    min-height: 42px;
  }
  .u2331-row .admin-btn {
    flex: 1 1 auto;
    min-height: 40px;
  }
  .u2331-row .u2331-count {
    flex: 1 1 auto;
    text-align: right;
    font-size: 11.5px;
  }
}



.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  accent-color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}

.field label:has(> input[type="checkbox"]),
.field label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding: 2px 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.wlc-webhook-events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  padding: 4px 0;
}

.wlc-webhook-events-grid > label {
  min-width: 0;
}

.wlc-webhook-events-grid > label.wlc-webhook-event-all {
  grid-column: 1 / -1;
  font-weight: 600;
  font-size: 13.5px;
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 900px) {
  .field input[type="checkbox"],
  .field input[type="radio"] {
    font-size: 13px !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .wlc-webhook-events-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .field label:has(> input[type="checkbox"]),
  .field label:has(> input[type="radio"]) {
    padding: 8px 0;
    min-height: 36px;
    font-size: 14px;
  }
}



.topbar,
.manager-topbar,
.admin-topbar {
  position: relative;
}

.topbar::after,
.manager-topbar::after,
.admin-topbar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: var(--alarm-tint, transparent);
  z-index: 5;
}

.topbar.has-alarm-critical,
.manager-topbar.has-alarm-critical,
.admin-topbar.has-alarm-critical {
  border-bottom-color: var(--red);
  box-shadow: inset 0 -2px 0 0 var(--red), 0 0 22px -8px var(--red);
}
.topbar.has-alarm-critical::after,
.manager-topbar.has-alarm-critical::after,
.admin-topbar.has-alarm-critical::after {
  --alarm-tint: linear-gradient(180deg,
    rgba(231,76,60,.38) 0%,
    rgba(231,76,60,.10) 55%,
    rgba(231,76,60,0) 100%);
  animation: alarmPulseOverlay 1.6s ease-in-out infinite;
}

.topbar.has-alarm-warning,
.manager-topbar.has-alarm-warning,
.admin-topbar.has-alarm-warning {
  border-bottom-color: var(--amber);
  box-shadow: inset 0 -2px 0 0 var(--amber), 0 0 22px -8px var(--amber);
}
.topbar.has-alarm-warning::after,
.manager-topbar.has-alarm-warning::after,
.admin-topbar.has-alarm-warning::after {
  --alarm-tint: linear-gradient(180deg,
    rgba(243,156,18,.34) 0%,
    rgba(243,156,18,.08) 55%,
    rgba(243,156,18,0) 100%);
  animation: alarmPulseOverlay 2s ease-in-out infinite;
}

.topbar.has-alarm-info,
.manager-topbar.has-alarm-info,
.admin-topbar.has-alarm-info {
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -2px 0 0 var(--accent), 0 0 22px -8px var(--accent);
}
.topbar.has-alarm-info::after,
.manager-topbar.has-alarm-info::after,
.admin-topbar.has-alarm-info::after {
  --alarm-tint: linear-gradient(180deg,
    rgba(88,166,255,.28) 0%,
    rgba(88,166,255,.06) 55%,
    rgba(88,166,255,0) 100%);
  animation: alarmPulseOverlay 3s ease-in-out infinite;
}

@keyframes alarmPulseOverlay {
  0%, 100% { opacity: .30; }
  50%      { opacity: 1;   }
}

.topbar > *,
.manager-topbar > *,
.admin-topbar > * {
  position: relative;
  z-index: 10;
}

.alarm-topbar-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--fg);
  flex: 0 0 auto;
  white-space: nowrap;
  transition: filter .12s ease, transform .08s ease;
  outline: none;
}
.alarm-topbar-badge:hover  { filter: brightness(1.15); }
.alarm-topbar-badge:active { transform: translateY(1px); }

.alarm-topbar-badge.critical {
  background: rgba(231,76,60,.20);
  border-color: rgba(231,76,60,.65);
  color: var(--red);
  animation: alarmBadgeBreathe 1.6s ease-in-out infinite;
}
.alarm-topbar-badge.warning {
  background: rgba(243,156,18,.20);
  border-color: rgba(243,156,18,.65);
  color: var(--amber);
  animation: alarmBadgeBreathe 2s ease-in-out infinite;
}
.alarm-topbar-badge.info {
  background: rgba(88,166,255,.20);
  border-color: rgba(88,166,255,.65);
  color: var(--accent);
}

@keyframes alarmBadgeBreathe {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.06); }
}

@media (max-width: 900px) {
  .alarm-topbar-badge {
    font-size: 10.5px;
    padding: 3px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar::after,
  .manager-topbar::after,
  .admin-topbar::after {
    animation: none !important;
    opacity: .55 !important;
  }
  .alarm-topbar-badge.critical,
  .alarm-topbar-badge.warning {
    animation: none !important;
  }
}


/* u_47: HMI button anti-flash.
   The 250 ms sweep used to repaint every button from raw telemetry.
   A soft CSS transition plus the u_47 optimistic hold (below) makes
   set-on / set-off buttons look stable even when the echo lags. */
.io-hmi-obj [data-part="btn"],
.io-hmi-obj-display [data-part="btn"] {
  transition: background-color .35s ease, color .35s ease,
              border-color .35s ease, box-shadow .35s ease;
}
.io-hmi-obj [data-part="btn"][data-u47-optimistic="1"],
.io-hmi-obj-display [data-part="btn"][data-u47-optimistic="1"] {
  /* the JS keeps the colour pinned for ~1.5 s after a click */
}


/* u_47_3: OFFLINE state pill */
.state-pill.OFFLINE { background: rgba(139,150,165,.18); color: var(--fg-dim); }
[data-theme="light"] .state-pill.OFFLINE,
[data-theme="sage"]  .state-pill.OFFLINE,
[data-theme="porcelain"] .state-pill.OFFLINE {
  background: rgba(87,96,106,.14); color: #57606a;
}