/* A small, self-contained connection check on the welcome page. */
.connection-card{margin:0 0 46px;padding:25px 28px;border:1px solid var(--line,#ede5ed);border-radius:22px;background:linear-gradient(115deg,#fffafddd,#f8f5fddd);scroll-margin-top:24px}
.connection-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}
.connection-heading h2{font-size:19px;font-weight:500;letter-spacing:1px}
.connection-heading p{margin-top:5px;color:var(--sub,#706678);font-size:12px}
.connection-heading .btn{flex-shrink:0}
.connection-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:25px auto 18px;max-width:760px;padding:0}
.connection-node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0;padding:0 8px;color:var(--sub,#706678)}
.connection-node:not(:last-child)::after{content:"";position:absolute;top:15px;left:calc(50% + 19px);width:calc(100% - 38px);height:2px;background:#e2d8e6;transition:background .2s}
.connection-dot{position:relative;display:grid;place-items:center;width:32px;height:32px;border:2px solid #d7c9dd;border-radius:50%;background:#fff;color:#a899b2;margin-bottom:3px}
.connection-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.connection-node strong{font-size:13px;font-weight:500;color:var(--ink,#332c40)}
.connection-detail{font-size:11px;min-height:18px;overflow-wrap:anywhere}
.connection-node[data-state="checking"] .connection-dot{border-color:#c98ba8;color:#ba5e83;box-shadow:0 0 0 5px #f6e7ef}
.connection-node[data-state="checking"] .connection-dot::before{animation:connection-pulse 1s ease-in-out infinite}
.connection-node[data-state="ok"] .connection-dot{border-color:#7aa99b;color:#508877;background:#f1faf5}
.connection-node[data-state="ok"]:not(:last-child)::after{background:#a6c8bb}
.connection-node[data-state="warning"] .connection-dot{border-color:#d3ae73;color:#a17c42;background:#fffaf0}
.connection-node[data-state="error"] .connection-dot{border-color:#d88a93;color:#b74e60;background:#fff2f4}
.connection-summary{font-size:12px;color:var(--ink,#332c40);text-align:center;min-height:20px}
.connection-note{margin-top:7px;color:var(--sub,#706678);font-size:10px;line-height:1.8;text-align:center}
@keyframes connection-pulse{50%{opacity:.35;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){.connection-node[data-state="checking"] .connection-dot::before{animation:none}}
@media(max-width:600px){.connection-card{padding:21px 15px;margin-bottom:32px}.connection-heading{align-items:flex-start;flex-direction:column;gap:14px}.connection-heading h2{font-size:18px}.connection-heading .btn{width:100%}.connection-node{padding:0 3px}.connection-node strong{font-size:12px}.connection-detail{font-size:10px}.connection-note{text-align:left}.connection-chain{margin-top:23px}}