/* (mcp1) /connections: the key panel, the app tabs and the copy boxes. The key panel and the code are dark boxes in both
   themes (light mode is dark boxes on the white page), with the brand green for what can be pressed. */
.cx-key{position:relative;margin:18px 0 8px;padding:22px 24px;border-radius:16px;background:#111118;color:#eef0f4;border:1px solid #1f1f2e;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.55);overflow:hidden}
html[data-theme="dark"] .cx-key{background:#0c0d12;border-color:var(--r-line,#1f1f2e)}
.cx-key::before{content:"";position:absolute;inset:-40% -10% auto auto;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,255,136,.16),transparent);pointer-events:none;animation:cxGlow 7s ease-in-out infinite alternate}
@keyframes cxGlow{from{transform:translate(0,0)}to{transform:translate(-40px,30px)}}
.cx-key>*{position:relative}
.cx-state{display:flex;align-items:center;gap:10px;font-size:15px;color:#d3d6df}
.cx-dot{width:9px;height:9px;border-radius:50%;background:#00ff88;box-shadow:0 0 0 0 rgba(0,255,136,.5);animation:cxPing 1.6s ease-out infinite}
@keyframes cxPing{0%{box-shadow:0 0 0 0 rgba(0,255,136,.55)}100%{box-shadow:0 0 0 10px rgba(0,255,136,0)}}
.cx-key h3{margin:0 0 6px;font-size:17px;color:#fff}
.cx-key p{margin:0 0 14px;color:#c3c7d1;font-size:15px}
.cx-plan{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.4px;color:#00ff88;background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.28)}
.cx-plan.off{color:#f5a524;background:rgba(245,165,36,.1);border-color:rgba(245,165,36,.3)}
.cx-row{display:flex;align-items:center;gap:8px;margin:10px 0;flex-wrap:wrap}
.cx-lbl{flex:0 0 100%;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#8b91a0}
.cx-val{flex:1 1 260px;min-width:0;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font:500 13px/1.4 var(--mono,'IBM Plex Mono',monospace);color:#eef0f4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#eef0f4;font:600 13.5px/1 inherit;font-family:inherit;cursor:pointer;text-decoration:none;
  transition:transform .15s,background-color .15s,border-color .15s,color .15s}
.cx-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.cx-btn:active{transform:scale(.96)}
.cx-btn:focus-visible{outline:2px solid #00ff88;outline-offset:2px}
.cx-btn.pri{background:#00ff88;border-color:#00ff88;color:#04120b}
.cx-btn.pri:hover{background:#00e87b;border-color:#00e87b}
.cx-btn.warn:hover{color:#ff5c7a;border-color:rgba(255,92,122,.5)}
.cx-btn.done{color:#00ff88;border-color:rgba(0,255,136,.5)}
.cx-btn[disabled]{opacity:.55;cursor:default}
.cx-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.cx-msg{margin-top:10px;font-size:13px;color:#8b91a0;min-height:1em}
.cx-msg.err{color:#ff5c7a}
.cx-in{animation:cxIn .35s cubic-bezier(.2,.8,.3,1) both}
@keyframes cxIn{from{opacity:0;transform:translateY(6px)}}

.cx-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 0}
.cx-tab{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--r-line2,#d5d8e2);background:transparent;color:var(--r-ink2,#2b3040);
  font:600 13.5px/1 inherit;font-family:inherit;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.cx-tab:hover{border-color:var(--r-ink,#14171f)}
.cx-tab:active{transform:scale(.96)}
.cx-tab.on{background:#111118;border-color:#111118;color:#fff}
html[data-theme="dark"] .cx-tab.on{background:#00ff88;border-color:#00ff88;color:#04120b}
.cx-tab:focus-visible{outline:2px solid #00c46e;outline-offset:2px}
.cx-pane{display:none;margin-top:14px}
.cx-pane.on{display:block;animation:cxIn .3s cubic-bezier(.2,.8,.3,1) both}

.cx-code{position:relative;margin:12px 0 16px}
.doc2 .dm .cx-code pre{margin:0;padding:16px 92px 16px 18px;border-radius:12px;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}   /* a long command wraps, so none of it hides under Copy */
.doc2 .dm .cx-code code{font:500 13px/1.65 var(--mono,'IBM Plex Mono',monospace);color:#d7dae2;background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.cx-code .cx-k{color:#00ff88}
.cx-copy{position:absolute;top:10px;right:10px;height:30px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);color:#eef0f4;font:600 12px/1 inherit;font-family:inherit;cursor:pointer;transition:background-color .15s,color .15s,transform .15s}
.cx-copy:hover{background:rgba(255,255,255,.16)}
.cx-copy:active{transform:scale(.94)}
.cx-copy.done{color:#00ff88;border-color:rgba(0,255,136,.5)}
@media (max-width:600px){
  .cx-key{padding:18px 16px}
  .doc2 .dm .cx-code pre{padding:44px 14px 14px}
  .cx-tab{height:34px;padding:0 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.cx-key::before,.cx-dot{animation:none}.cx-in,.cx-pane.on{animation:none}}
/* (mcpauth1) apps signed in with this account */
.cx-apps{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.cx-app{display:flex;align-items:center;gap:10px;padding:8px 0;flex-wrap:wrap}
.cx-app+.cx-app{border-top:1px solid rgba(255,255,255,.05)}
.cx-app-n{font-weight:700;color:#fff}
.cx-app-t{flex:1 1 160px;color:#8b91a0;font-size:13px}
.cx-btn.sm{height:32px;padding:0 11px;font-size:12.5px}