.offline-indicator{position:fixed;top:0;left:0;right:0;z-index:9999;padding:12px 20px;box-shadow:0 2px 8px rgba(0,0,0,.15);animation:slideDown .3s ease-out}.offline-indicator-offline{background-color:#ff6b6b;color:#fff}.online-indicator{background-color:#51cf66;color:#fff}.offline-indicator-content{display:flex;align-items:center;gap:12px;max-width:1200px;margin:0 auto}.offline-indicator-icon{font-size:24px;flex-shrink:0}.offline-indicator-text{display:flex;flex-direction:column;gap:2px}.offline-indicator-text strong{font-size:14px;font-weight:600}.offline-indicator-subtext{font-size:12px;opacity:.9}@media (max-width:768px){.offline-indicator{padding:10px 16px}.offline-indicator-icon{font-size:20px}.offline-indicator-text strong{font-size:13px}.offline-indicator-subtext{font-size:11px}}.preload-indicator{position:-webkit-sticky;position:sticky;top:0;left:0;right:0;z-index:9998;padding:10px 20px;box-shadow:0 2px 8px rgba(0,0,0,.1);animation:slideDown .3s ease-out;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.preload-indicator--loading{background-color:#4dabf7;color:#fff}.preload-indicator--success{background-color:#51cf66;color:#fff}.preload-indicator--warning{background-color:#ffa94d;color:#fff}.preload-indicator--error{background-color:#ff6b6b;color:#fff}.preload-indicator__content{display:flex;align-items:center;justify-content:center;gap:10px;max-width:1200px;margin:0 auto;position:relative}.preload-indicator__spinner{width:16px;height:16px;border:2px solid hsla(0,0%,100%,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(1turn)}}.preload-indicator__message{font-size:14px;font-weight:500;flex-grow:1;text-align:center}.preload-indicator__close{position:absolute;right:0;background:none;border:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s}.preload-indicator__close:hover{opacity:1}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width:768px){.preload-indicator{padding:8px 16px}.preload-indicator__message{font-size:13px}.preload-indicator__spinner{width:14px;height:14px}.preload-indicator__close{font-size:20px;width:20px;height:20px}}