:root{
  --bg:#04060c;
  --bg2:#0a0f1c;
  --ink:#e8edf7;
  --muted:#7d8aa5;
  --line:rgba(255,255,255,.07);
  --card:rgba(16,22,38,.72);
  --accent:#4d9fff;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 700px at 80% -10%, #12203a 0%, transparent 60%),
    radial-gradient(900px 600px at 10% 110%, #171233 0%, transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  color:var(--ink);
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}

/* ambient */
.bg-glow{position:fixed;border-radius:50%;filter:blur(120px);opacity:.25;pointer-events:none;z-index:0}
.bg-glow-1{width:520px;height:520px;left:-120px;top:-80px;background:#1b4fa8}
.bg-glow-2{width:460px;height:460px;right:-100px;bottom:-120px;background:#5b2a86}
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;
  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:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 75%);
}

main{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 24px 48px}

/* header */
.page-header{text-align:center;padding:44px 16px 26px;position:relative;z-index:1}
.logo-shapes{display:flex;justify-content:center;gap:22px;margin-bottom:14px;font-size:20px}
.shape{opacity:.85;text-shadow:0 0 18px currentColor}
.shape.tri{color:#5ed0b8}
.shape.cir{color:#ff5f7a}
.shape.cro{color:#7f9dff}
.shape.squ{color:#d08bff}
.page-header h1{
  font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:.22em;
  background:linear-gradient(92deg,#9db8ff 0%,#e8edf7 45%,#b98bff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-header h1 em{font-style:normal;font-weight:300;letter-spacing:.3em}
.subtitle{margin-top:10px;color:var(--muted);font-size:13px;letter-spacing:.08em}

/* toolbar */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:8px 0 26px;padding:14px 20px;border:1px solid var(--line);border-radius:14px;
  background:rgba(10,15,28,.6);backdrop-filter:blur(10px);
}
.hint{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.45)}70%{box-shadow:0 0 0 12px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.actions{display:flex;gap:10px}
.btn{
  cursor:pointer;border-radius:10px;padding:9px 18px;font-size:13px;letter-spacing:.06em;
  border:1px solid var(--line);background:transparent;color:var(--ink);transition:all .18s;
}
.btn:hover{border-color:rgba(255,255,255,.25);transform:translateY(-1px)}
.btn.ghost.on{background:rgba(77,159,255,.18);border-color:#4d9fff;color:#bcd8ff}
.btn.danger:hover{border-color:#ff5f7a;color:#ff8aa0}

/* slots */
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(520px,1fr));gap:22px}
@media (max-width:1120px){.slots{grid-template-columns:1fr}}

.slot{
  --pc:#4d9fff;
  position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(22,29,48,.85),rgba(10,14,26,.85));
  backdrop-filter:blur(12px);
  transition:box-shadow .35s,border-color .35s;
}
.slot.connected{border-color:color-mix(in srgb,var(--pc) 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 25%,transparent),0 18px 60px -22px color-mix(in srgb,var(--pc) 40%,transparent)}
.slot.stale{border-color:rgba(255,150,60,.4)}
.slot.empty .pad-wrap{opacity:.10;filter:grayscale(1)}

.slot-head{
  display:flex;align-items:center;gap:12px;padding:14px 20px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 10%,transparent),transparent 60%);
}
.slot-badge{
  font-weight:800;font-size:13px;letter-spacing:.12em;color:#05070d;
  background:var(--pc);padding:5px 12px;border-radius:8px;min-width:38px;text-align:center;
  box-shadow:0 0 18px color-mix(in srgb,var(--pc) 55%,transparent);
}
.slot-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.status-dot{width:8px;height:8px;border-radius:50%;background:#3a4358;transition:background .2s}
.slot.connected .status-dot{background:#3ddc84;animation:pulse 2s infinite}
.slot.stale .status-dot{background:#ff9640}
.gp-name{font-size:12px;color:var(--ink);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.gp-idx{font-size:11px;color:var(--muted);font-family:Consolas,monospace;white-space:nowrap}
.gp-idx b{color:var(--pc)}

.pad-wrap{position:relative;padding:6px 10px 2px}
.pad-wrap svg{width:100%;height:auto;display:block;max-height:340px}

.waiting{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--muted);font-size:14px;letter-spacing:.25em;pointer-events:none;
}
.waiting .ring{width:52px;height:52px;border-radius:50%;border:2px dashed rgba(255,255,255,.18);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.slot.connected .waiting,.slot.stale .waiting{display:none}

.slot-foot{
  display:flex;justify-content:space-between;gap:14px;padding:12px 20px 16px;
  font-family:Consolas,monospace;font-size:11.5px;color:var(--muted);
  border-top:1px dashed var(--line);
}
.slot-foot .row{display:flex;gap:14px;flex-wrap:wrap}
.slot-foot b{color:var(--ink);font-weight:600}
.press-line{min-width:150px}
.press-line i{font-style:normal;color:var(--pc)}

/* ============ controller svg shared styles ============ */
svg .el{
  fill:#232a3a;stroke:#3a4358;stroke-width:1;
  transition:fill .07s linear,stroke .07s linear;
}
svg .el.act{fill:var(--pc);stroke:var(--pc);filter:drop-shadow(0 0 6px var(--pc))}
svg .sym{fill:none;stroke:#8fa4c8;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .07s,filter .07s;pointer-events:none}
svg .sym.act{stroke:#fff;filter:drop-shadow(0 0 5px var(--pc))}
svg .arm.act{fill:var(--pc);stroke:var(--pc);filter:drop-shadow(0 0 7px var(--pc))}
svg .arrow{transition:fill .07s}
svg .arrow.act{fill:#fff;filter:drop-shadow(0 0 4px var(--pc))}
svg .cap-base{stroke:#454f66;stroke-width:1.2}
svg .cap.act .cap-base{stroke:var(--pc);filter:drop-shadow(0 0 8px var(--pc))}
svg .cap-dish{fill:#141824;stroke:#39415a;stroke-width:1.4}
svg .cap-ridge{fill:none;stroke:#4a5570;stroke-width:1.6;stroke-dasharray:2.6 3.6}
svg .recess{fill:#10131c;stroke:#2b3244;stroke-width:1.5}
svg .ps-txt{fill:#9fb3d1;font:italic 800 11px "Segoe UI",sans-serif;letter-spacing:.02em;pointer-events:none;transition:fill .07s}
svg .ps-txt.act{fill:#fff;filter:drop-shadow(0 0 6px var(--pc))}
svg .tpad{fill:#1a1f2d;stroke:#333c55;stroke-width:1.4;transition:fill .07s}
svg .tpad.act{fill:color-mix(in srgb,var(--pc) 40%,#1a1f2d);stroke:var(--pc);filter:drop-shadow(0 0 8px var(--pc))}
svg .strip{fill:#2a3143;transition:fill .2s}
svg .strip.glow{fill:var(--pc);filter:drop-shadow(0 0 7px var(--pc))}
svg .trg-track{fill:#10131c;stroke:#2b3244;stroke-width:1.2}
svg .trg-fill{fill:var(--pc);opacity:.9;filter:drop-shadow(0 0 5px var(--pc))}
svg .lbl{fill:#5d6b8a;font:600 10px Consolas,monospace;letter-spacing:.08em;pointer-events:none}
svg .lbl.act{fill:#fff}
svg .dot{fill:#0d1018}
svg .port{fill:#0c0f16;stroke:#2b3244;stroke-width:1}

/* event log */
.eventlog-wrap{margin-top:26px;border:1px solid var(--line);border-radius:14px;background:rgba(8,12,22,.6);padding:14px 18px}
.eventlog-title{font-size:12px;letter-spacing:.15em;color:var(--muted);margin-bottom:8px}
.muted{opacity:.6}
.eventlog{list-style:none;font-family:Consolas,monospace;font-size:12px;line-height:1.9;max-height:150px;overflow-y:auto}
.eventlog li{color:var(--muted)}
.eventlog .t{opacity:.55;margin-right:10px}
.eventlog .ok{color:#3ddc84}
.eventlog .warn{color:#ff9640}
.eventlog .err{color:#ff5f7a}
.eventlog .info{color:#7f9dff}

.page-footer{margin-top:26px;text-align:center}
.legend{display:inline-flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;font-size:11px;color:#51607e;font-family:Consolas,monospace}
.legend b{color:#7d8aa5}