/* 상단바 PC 선택: 음악 막대 왼쪽의 작은 알약. 다른 PC 를 고르면 청록 테두리로 지금 어디서 일하는지 드러낸다. */
.node-picker { position:relative; flex:none; }
.node-btn {
  display:flex; align-items:center; gap:6px; height:40px; padding:0 12px 0 10px;
  border:1px solid #eac9d32e; border-radius:12px; background:#00000040; color:#f4ecfa;
  font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap;
}
.node-btn b { font-weight:800; max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.node-btn::after { content:'▾'; font-size:10px; color:#cfaef5aa; }
.node-btn:hover { background:#ffffff14; }
.node-btn:focus-visible { outline:2px solid #d8c2f3; outline-offset:1px; }
.node-picker.remote .node-btn { border-color:#7fe0d199; box-shadow:0 0 12px -4px #7fe0d1aa; }
.node-btn[data-state="offline"] { border-color:#ff8a8a99; }
.node-icon { font-size:14px; }

.node-pop {
  display:none; position:absolute; z-index:31; top:calc(100% + 8px); left:0; width:min(320px, calc(100vw - 20px));
  gap:6px; padding:10px; border:1px solid #cfaef54d; border-radius:16px;
  background:linear-gradient(160deg,#3a2c45f7,#241c2cfa); box-shadow:0 18px 40px -12px #000c, 0 0 0 1px #00000040;
}
.node-picker.open .node-pop { display:grid; }
.node-row { display:flex; gap:4px; align-items:center; }
.node-item {
  flex:1; display:flex; align-items:center; gap:8px; min-height:36px; padding:0 10px; text-align:left;
  border:1px solid transparent; border-radius:10px; background:#ffffff0d; color:#f4ecfa; font:inherit; font-size:13px; cursor:pointer;
}
.node-item:hover { background:#ffffff1a; }
.node-item[aria-checked="true"] { border-color:#cfaef599; background:#cfaef51f; font-weight:800; }
.node-dot { width:8px; height:8px; border-radius:50%; background:#7fe0a3; box-shadow:0 0 6px #7fe0a3; flex:none; }
.node-item[data-state="offline"] .node-dot { background:#8f8597; box-shadow:none; }
.node-item[data-state="offline"] span { color:#b5aabd; }
.node-mini { width:30px; height:30px; padding:0; border:0; border-radius:8px; background:none; color:#cbbfd6; cursor:pointer; }
.node-mini:hover { background:#ffffff14; color:#fff; }
.node-action {
  height:32px; border:1px dashed #cfaef566; border-radius:10px; background:none; color:#e6d6f6; font:inherit; font-size:12.5px; cursor:pointer;
}
.node-action:disabled { opacity:.6; cursor:progress; }
.node-install { display:grid; gap:6px; padding:8px; border-radius:10px; background:#00000040; font-size:12px; color:#e9def3; }
.node-install p { margin:0; line-height:1.45; }
.node-install code { display:block; padding:7px 8px; border-radius:8px; background:#120e16; color:#a8f0e3; font-size:11px; word-break:break-all; user-select:all; }

@media (max-width: 760px) {
  .node-btn { height:34px; padding:0 9px; }
  .node-btn b { max-width:72px; }
}
.node-picker.switching .node-btn { opacity:.7; cursor:progress; }
.node-picker.switching .node-btn::after { content:'⋯'; }