.network-status-notification{position:fixed;top:20px;right:20px;left:20px;max-width:400px;margin:0 auto;padding:16px 20px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.15);display:none;align-items:center;gap:12px;z-index:10000;font-family:'Cairo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;line-height:1.5;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateY(-100px);opacity:0;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);pointer-events:auto}.network-status-notification.show{transform:translateY(0);opacity:1}.network-status-online{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#ffffff;border:1px solid rgba(255,255,255,0.2)}.network-status-offline{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#ffffff;border:1px solid rgba(255,255,255,0.2)}body.dark .network-status-online{background:linear-gradient(135deg,#10b981 0%,#047857 100%);box-shadow:0 4px 20px rgba(16,185,129,0.3)}body.dark .network-status-offline{background:linear-gradient(135deg,#ef4444 0%,#b91c1c 100%);box-shadow:0 4px 20px rgba(239,68,68,0.3)}.network-status-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.network-status-icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.network-status-message{flex:1;font-weight:500;text-align:right}.network-status-close{flex-shrink:0;width:24px;height:24px;padding:0;border:none;background:rgba(255,255,255,0.2);color:#ffffff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:all 0.2s ease;margin-right:auto}.network-status-close:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}.network-status-close:active{transform:scale(0.95)}.network-status-close:focus{outline:2px solid rgba(255,255,255,0.5);outline-offset:2px}.network-status-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;transition:all 0.3s ease}.network-status-indicator.network-status-online{background-color:#10b981;box-shadow:0 0 8px rgba(16,185,129,0.5)}.network-status-indicator.network-status-offline{background-color:#ef4444;box-shadow:0 0 8px rgba(239,68,68,0.5)}@media (max-width:768px){.network-status-notification{top:10px;right:10px;left:10px;padding:14px 16px;font-size:13px;max-width:100%}.network-status-icon{width:20px;height:20px}.network-status-close{width:20px;height:20px;font-size:18px}}@media (max-width:480px){.network-status-notification{top:5px;right:5px;left:5px;padding:12px 14px;font-size:12px;border-radius:8px}.network-status-message{font-size:12px}}@keyframes networkStatusPulse{0%,100%{opacity:1}50%{opacity:0.7}}.network-status-notification.network-status-offline .network-status-icon{animation:networkStatusPulse 2s ease-in-out infinite}@media (prefers-reduced-motion:reduce){.network-status-notification{transition:opacity 0.2s ease}.network-status-notification.show{transform:none}.network-status-icon{animation:none}}@media (prefers-contrast:high){.network-status-online{border:2px solid #ffffff}.network-status-offline{border:2px solid #ffffff}.network-status-close{border:1px solid #ffffff}}@media print{.network-status-notification{display:none!important}}