.connectivity-banner{z-index:500;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 96%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:13px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:min(620px,100vw - 28px);padding:11px 13px;display:grid;position:fixed;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 18px 46px #00000038}.connectivity-banner>svg{font-size:21px}.connectivity-banner b,.connectivity-banner span{display:block}.connectivity-banner b{font-size:11px}.connectivity-banner span{color:var(--muted);margin-top:3px;font-size:9px;line-height:1.4}.connectivity-banner.offline{border-color:color-mix(in srgb,var(--warning,#c58b2a) 48%,var(--border))}.connectivity-banner.offline>svg{color:var(--warning,#c58b2a)}.connectivity-banner.online{border-color:color-mix(in srgb,var(--success,#35a56b) 48%,var(--border))}.connectivity-banner.online>svg{color:var(--success,#35a56b)}.connectivity-banner button{border:1px solid var(--border);background:var(--surface-soft);color:var(--text);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:8px 10px;display:flex}@media (max-width:600px){.connectivity-banner{grid-template-columns:auto 1fr;bottom:10px}.connectivity-banner button{grid-column:1/-1;justify-content:center}}