.offline-banner{z-index:1001;animation:.3s ease-out slideIn;position:fixed;left:0;right:0}.offline-banner.top{top:0}.offline-banner.bottom{bottom:0}@keyframes slideIn{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.offline-banner.bottom{animation-name:slideInBottom}@keyframes slideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.offline-banner-content{color:#92400e;background:#fef3c7;border-bottom:1px solid #fbbf24;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;display:flex}.offline-banner.bottom .offline-banner-content{border-top:1px solid #fbbf24;border-bottom:none}.offline-banner.reconnected .offline-banner-content{color:#065f46;background:#d1fae5;border-color:#34d399}.offline-icon{flex-shrink:0}.offline-icon.spinning{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.offline-message{white-space:nowrap}.sync-status{background:#0000001a;border-radius:9999px;align-items:center;gap:.25rem;padding:.125rem .5rem;font-size:.75rem;font-weight:500;display:inline-flex}.retry-button{border-radius:var(--radius);width:28px;height:28px;color:inherit;cursor:pointer;background:#0000001a;border:none;justify-content:center;align-items:center;margin-left:.25rem;padding:0;transition:background .2s;display:inline-flex}.retry-button:hover{background:#00000026}.retry-button:disabled{opacity:.6;cursor:not-allowed}.retry-button .spinning{animation:1s linear infinite spin}.offline-indicator{color:#f59e0b;justify-content:center;align-items:center;padding:.375rem;animation:2s ease-in-out infinite pulse;display:inline-flex}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (width<=480px){.offline-banner-content{gap:.375rem;padding:.375rem .75rem;font-size:.8125rem}.sync-status{display:none}}@media (prefers-color-scheme:dark){.offline-banner-content{color:#fde68a;background:#422006;border-color:#854d0e}.offline-banner.reconnected .offline-banner-content{color:#a7f3d0;background:#064e3b;border-color:#047857}.sync-status,.retry-button{background:#ffffff1a}.retry-button:hover{background:#ffffff26}}
