.connection-card{max-width:720px;margin:5vh auto;position:relative;overflow:hidden}
.connection-card h1{font-size:clamp(32px,5vw,48px)}
.connection-reason{color:var(--muted);max-width:580px}
.connection-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}
.connection-metrics div{padding:14px;border:1px solid var(--line);border-radius:10px;background:#0d1014}
.connection-metrics span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}
.connection-metrics strong{font-size:14px}
.connection-actions{display:flex;gap:10px}
.secondary{background:#252b33;color:var(--text)}
button:disabled{cursor:not-allowed;opacity:.45}
.button[aria-disabled="true"]{pointer-events:none;opacity:.45}
.connection-orbit{position:absolute;right:28px;top:28px;width:34px;height:34px;border:2px solid #3b444f;border-top-color:var(--accent);border-radius:50%;animation:connection-spin 1s linear infinite}
.connection-orbit span{position:absolute;inset:8px;border-radius:50%;background:var(--muted)}
.is-online .connection-orbit{animation:none;border-color:var(--accent)}
.is-online .connection-orbit span{background:var(--accent);box-shadow:0 0 18px var(--accent)}
.is-offline .connection-orbit{animation:none;border-color:var(--danger)}
.is-offline .connection-orbit span{background:var(--danger)}
.is-online #connection-state,.is-online #connection-database,.is-online #connection-redis,.is-online #connection-worker,.is-online #connection-gemini{color:var(--accent)}
.is-offline #connection-state{color:var(--danger)}
@keyframes connection-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.connection-metrics{grid-template-columns:repeat(2,1fr)}}