.balance-connection-banner {
    position: fixed;
    inset-inline: 16px;
    top: 12px;
    z-index: 1200;
    display: none;
    max-width: 620px;
    margin-inline: auto;
    padding: 11px 16px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .2);
    color: #fff;
    text-align: center;
    font-weight: 800;
}

.balance-connection-banner.visible { display: block; }
.balance-connection-banner.offline { background: #b91c1c; }
.balance-connection-banner.reconnecting { background: #c2410c; }
.balance-connection-banner.restored { background: #15803d; }

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, .5);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: grid; }

#components-reconnect-modal.components-reconnect-hide { display: none; }

.balance-reconnect-card {
    width: min(430px, 100%);
    padding: 24px;
    border-radius: 14px;
    background: #fff;
    color: #172554;
    text-align: center;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}

.balance-reconnect-card p { margin: 12px 0; font-weight: 800; }
.balance-reconnect-card button { border: 0; border-radius: 8px; padding: 10px 16px; background: #172554; color: #fff; font-weight: 800; cursor: pointer; }
#components-reconnect-modal .components-reconnect-show,
#components-reconnect-modal .components-reconnect-failed,
#components-reconnect-modal .components-reconnect-rejected { display: none; }
#components-reconnect-modal.components-reconnect-show .components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-rejected { display: block; }

.balance-reconnect-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border: 4px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: balance-spin .8s linear infinite;
}

.components-reconnect-failed .balance-reconnect-spinner,
.components-reconnect-rejected .balance-reconnect-spinner { display: none; }

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