.connection-banner{z-index:20;justify-content:center;align-items:center;padding:12px 16px;animation:.3s ease-out slideDown;display:flex;position:absolute;top:64px;left:0;right:0}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.connection-banner.warning{color:#92400e;background-color:#fef3c7;border-bottom:1px solid #fde68a}.connection-banner.error{color:#991b1b;background-color:#fee2e2;border-bottom:1px solid #fecaca}.connection-banner-content{align-items:center;gap:8px;max-width:100%;display:flex}.connection-banner-icon{flex-shrink:0;justify-content:center;align-items:center;display:flex}.spinner{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.connection-banner-text{flex:1;font-size:14px;font-weight:500}.connection-banner-actions{align-items:center;gap:8px;display:flex}.connection-banner-btn{cursor:pointer;white-space:nowrap;border:none;border-radius:6px;padding:4px 12px;font-size:13px;font-weight:600;transition:all .2s}.connection-banner.warning .connection-banner-btn{color:#fff;background-color:#f59e0b}.connection-banner.warning .connection-banner-btn:hover{background-color:#d97706}.connection-banner.error .connection-banner-btn{color:#fff;background-color:#ef4444}.connection-banner.error .connection-banner-btn:hover{background-color:#dc2626}.connection-banner-close{cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;transition:background-color .2s;display:flex}.connection-banner.warning .connection-banner-close{color:#92400e}.connection-banner.error .connection-banner-close{color:#991b1b}.connection-banner-close:hover{background-color:#0000001a}@media (width<=768px){.connection-banner{padding:10px 12px}.connection-banner-text{font-size:13px}.connection-banner-btn{padding:3px 10px;font-size:12px}}