.offline-banner{position:fixed;top:0;left:0;right:0;z-index:9999;padding:12px 20px;animation:slideDown .3s ease-out;box-shadow:0 2px 8px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.offline-banner.offline{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff}.offline-banner.online{background:linear-gradient(135deg,#51cf66,#37b24d);color:#fff;animation:slideDown .3s ease-out,slideUp .3s ease-in 2.7s forwards}.offline-banner-content{display:flex;align-items:center;justify-content:center;gap:12px;max-width:1200px;margin:0 auto}.offline-icon,.online-icon{width:24px;height:24px;flex-shrink:0}.offline-text{display:flex;flex-direction:column;gap:2px}.offline-text strong{font-size:14px;font-weight:600;letter-spacing:.3px}.offline-text span{font-size:12px;opacity:.95}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUp{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@media (max-width: 768px){.offline-banner{padding:10px 16px}.offline-banner-content{gap:10px}.offline-icon,.online-icon{width:20px;height:20px}.offline-text strong{font-size:13px}.offline-text span{font-size:11px}}.offline-banner *{transition:all .2s ease}