.connection-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .75rem;
    border: 1px solid var(--border-primary);
    border-radius: 9999px;
    background: var(--bg-login-form);
    color: var(--text-disabled);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}
.connection-status[data-state="online"] { color: var(--text-confirm); }
.connection-status[data-state="offline"] { color: var(--text-cancel); }
.connection-status[data-state="syncing"] { color: var(--text-sync, #2563eb); }
.connection-status[data-state="downloading"] { color: var(--text-download, #b45309); }
.connection-status[data-state="attention"] { color: var(--text-attention, #c2410c); }
.connection-status[data-state="syncing"] .connection-status__dot, .connection-status[data-state="downloading"] .connection-status__dot { animation: connection-status-pulse 1.2s ease-in-out infinite; }
@keyframes connection-status-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .connection-status__dot { animation: none !important; } }
.connection-status__dot { width: .6rem; height: .6rem; flex: 0 0 .6rem; border-radius: 50%; background: currentColor; }
.connection-status--login { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 30; }
.connection-status--mobile { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.btndropkey .connection-status { border: 0; background: transparent; padding: .25rem .65rem .25rem .45rem; }
@media (min-width: 640px) { .connection-status--mobile { display: none; } }

.connection-reconnect { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 2rem); padding: .6rem 1rem; border-radius: .75rem; background: var(--bg-login-form, #fff); color: var(--text-primary, #1f2937); border: 1px solid var(--text-sync, #2563eb); box-shadow: 0 6px 20px rgba(0,0,0,.15); font-size: .875rem; }
.connection-reconnect a { color: var(--text-sync, #2563eb); font-weight: 700; text-decoration: underline; }

#offline-progress { height: 1rem; border: 0; border-radius: .5rem; overflow: hidden; background: var(--bg-disabled); accent-color: var(--bg-primary); }
#offline-progress::-webkit-progress-bar { background: var(--bg-disabled); border-radius: .5rem; }
#offline-progress::-webkit-progress-value { background: var(--bg-primary); border-radius: .5rem; }
#offline-progress::-moz-progress-bar { background: var(--bg-primary); border-radius: .5rem; }
#offline-progress-percent { min-width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; }