.connection-status{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:5px 10px;border:1px solid #c9ddd0;border-radius:999px;background:#f1f8f3;color:#245b3c;font-size:14px;font-weight:600;white-space:nowrap}
.connection-status-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#27834d;box-shadow:0 0 0 3px #27834d20}
.connection-status[data-state=checking]{border-color:#d7dee5;background:#f5f7f9;color:#536579}
.connection-status[data-state=checking] .connection-status-dot{background:#74869a;box-shadow:0 0 0 3px #74869a20}
.connection-status[data-state=offline],.connection-status[data-state=unavailable]{border-color:#eccbc2;background:#fff4f0;color:#8a3826}
.connection-status[data-state=offline] .connection-status-dot,.connection-status[data-state=unavailable] .connection-status-dot{background:#bf4938;box-shadow:0 0 0 3px #bf493820}
.connection-status[data-state=signin],.connection-status[data-state=access]{border-color:#ead8aa;background:#fff8e8;color:#75531a}
.connection-status[data-state=signin] .connection-status-dot,.connection-status[data-state=access] .connection-status-dot{background:#b87b13;box-shadow:0 0 0 3px #b87b1320}
@media(max-width:760px){.connection-status{gap:6px;min-height:30px;padding:4px 8px;font-size:14px}}