*{box-sizing:border-box}
:root{font-family:Inter,Segoe UI,Arial,sans-serif;color-scheme:dark}
html,body{margin:0;min-height:100%;background:#071426;color:#f8fafc}
body{min-height:100vh;background:radial-gradient(circle at 20% 10%,#162846 0,#0c1b32 34%,#071426 72%);}
.status-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.status-card{width:min(620px,100%);text-align:center;padding:38px 34px 32px;background:rgba(15,30,52,.92);border:1px solid rgba(148,163,184,.18);border-radius:20px;box-shadow:0 28px 70px rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.brand-logo{width:76px;height:76px;object-fit:contain;margin-bottom:10px}
.status-icon{width:72px;height:72px;margin:8px auto 16px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:36px;background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.32);color:#fbbf24}
.eyebrow{font-size:.78rem;letter-spacing:.16em;font-weight:800;color:#93c5fd;margin-bottom:10px}
h1{font-size:clamp(1.65rem,4vw,2.25rem);line-height:1.18;margin:0 0 14px}
.lead{max-width:500px;margin:0 auto 26px;color:#cbd5e1;line-height:1.65;font-size:1rem}
.connection-list{margin:0 auto 24px;padding:8px 16px;background:rgba(2,6,23,.38);border:1px solid rgba(148,163,184,.12);border-radius:14px;text-align:left}
.connection-row{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid rgba(148,163,184,.10)}
.connection-row:last-child{border-bottom:0}
.signal{width:11px;height:11px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 4px rgba(255,255,255,.03)}
.signal.online{background:#22c55e}.signal.offline{background:#ef4444}
.connection-name{flex:1;color:#e2e8f0}.online{color:#86efac}.offline{color:#fca5a5}
.retry-button{border:0;border-radius:11px;padding:13px 24px;min-width:180px;background:#2563eb;color:#fff;font-size:.98rem;font-weight:800;cursor:pointer;transition:transform .15s ease,background .15s ease}
.retry-button:hover{background:#1d4ed8;transform:translateY(-1px)}
.retry-note{margin:18px 0 0;color:#94a3b8;font-size:.82rem}
@media(max-width:520px){.status-card{padding:30px 20px 26px}.connection-list{padding:7px 12px}.connection-row{font-size:.9rem}}

/* v2: immediate routing/loading UI */
.hidden { display: none !important; }

.loader {
    width: 52px;
    height: 52px;
    margin: 0 auto 22px;
    border-radius: 50%;
    border: 5px solid rgba(37, 99, 235, 0.18);
    border-top-color: #2563eb;
    animation: neust-spin .85s linear infinite;
}

@keyframes neust-spin {
    to { transform: rotate(360deg); }
}

.signal.checking {
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148,163,184,.12);
    animation: neust-pulse 1.2s ease-in-out infinite;
}

.checking-text { color: #94a3b8; }

@keyframes neust-pulse {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}

.progress-text {
    margin: 18px 0 2px;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}