.connection-status[hidden]{display:none}
.connection-status{display:flex;align-items:center;gap:11px;padding:12px 34px;background:var(--warning-bg,#faf6eb);border-bottom:1px solid var(--warning-border,#eee4c6);color:var(--warning-ink,#796538);font-size:11px;line-height:1.55;min-width:0}
.connection-status-icon{flex:none;display:flex}.connection-status-icon svg{width:18px;height:18px}
.connection-status>div{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1;flex-wrap:wrap}
.connection-status strong{font-weight:650}.connection-status span{overflow-wrap:anywhere}
.connection-retry{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;padding:6px 9px;font-size:10px;flex:none;min-height:32px}
.connection-retry svg{width:13px;height:13px}.connection-retry:disabled{opacity:.6}
.page-heading>div:first-child{min-width:0;flex:1}.page-heading .sync{max-width:48%;min-width:0;text-align:right}.page-heading .sync>span:not(.sync-dot){min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.6}.page-heading .sync-dot,.page-heading .refresh-button{flex-shrink:0}
@media(min-width:1450px){.connection-status{padding-inline:48px}}
@media(max-width:1150px){.connection-status{padding-inline:25px}}
@media(max-width:700px){.connection-status{padding:11px 18px;gap:8px;font-size:10px;align-items:flex-start}.connection-status>div{display:block}.connection-status strong,.connection-status>div>span{display:block}.connection-status-icon{padding-top:2px}.connection-status-icon svg{width:15px;height:15px}.connection-retry{font-size:9px;padding:5px 7px}.page-heading .sync{max-width:43%}}