.offline-indicator{position:fixed;left:0;right:0;z-index:1000;display:flex;justify-content:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:transform .3s ease,opacity .3s ease,background-color .3s ease;animation:slideIn .3s ease forwards}.offline-indicator--top{top:0}.offline-indicator--bottom{bottom:0}.offline-indicator--offline{background-color:var(--color-error-bg,#fee2e2);color:var(--color-error-text,#dc2626);border-bottom:1px solid var(--color-error-border,#fca5a5)}.offline-indicator--syncing{background-color:var(--color-warning-bg,#fef3c7);color:var(--color-warning-text,#d97706);border-bottom:1px solid var(--color-warning-border,#fcd34d)}.offline-indicator--back-online{background-color:var(--color-success-bg,#d1fae5);color:var(--color-success-text,#059669);border-bottom:1px solid var(--color-success-border,#6ee7b7)}:root[data-theme=dark] .offline-indicator--offline{background-color:rgba(239,68,68,.15);color:#fca5a5;border-bottom-color:rgba(239,68,68,.3)}:root[data-theme=dark] .offline-indicator--syncing{background-color:rgba(245,158,11,.15);color:#fcd34d;border-bottom-color:rgba(245,158,11,.3)}:root[data-theme=dark] .offline-indicator--back-online{background-color:rgba(16,185,129,.15);color:#6ee7b7;border-bottom-color:rgba(16,185,129,.3)}.offline-indicator-content{display:flex;align-items:center;gap:.5rem;max-width:100%}.offline-indicator-icon{width:1rem;height:1rem;flex-shrink:0}.offline-indicator-icon--spinning{animation:spin 1s linear infinite}.offline-indicator-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes slideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.offline-indicator--bottom.slideIn{animation-name:slideInBottom}@keyframes slideInBottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:640px){.offline-indicator{padding:.375rem .75rem;font-size:.8125rem}}@media (prefers-reduced-motion:reduce){.offline-indicator{animation:none;transition:none}.offline-indicator-icon--spinning{animation:none}}