.network-status-notification{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);max-width:380px;width:calc(100vw - 32px);padding:16px 18px;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.12);display:none;align-items:center;gap:14px;z-index:999999;font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;line-height:1.5;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);pointer-events:auto;direction:ltr}.network-status-notification.show{transform:translateX(-50%) translateY(0);opacity:1}.network-status-online{background:linear-gradient(135deg,rgba(16,185,129,0.95) 0%,rgba(5,150,105,0.95) 100%);color:#ffffff;border:1px solid rgba(255,255,255,0.25)}.network-status-offline{background:linear-gradient(135deg,rgba(239,68,68,0.95) 0%,rgba(220,38,38,0.95) 100%);color:#ffffff;border:1px solid rgba(255,255,255,0.25)}body.dark .network-status-online{background:linear-gradient(135deg,rgba(16,185,129,0.9) 0%,rgba(4,120,87,0.9) 100%);box-shadow:0 8px 32px rgba(16,185,129,0.25)}body.dark .network-status-offline{background:linear-gradient(135deg,rgba(239,68,68,0.9) 0%,rgba(185,28,28,0.9) 100%);box-shadow:0 8px 32px rgba(239,68,68,0.25)}.network-status-icon{flex-shrink:0;width:28px;height:28px;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:600;text-align:left}.network-status-close{flex-shrink:0;width:28px;height:28px;padding:0;border:none;background:rgba(255,255,255,0.25);color:#ffffff;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:all 0.2s ease}.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:14px;width:calc(100vw - 24px);padding:14px 16px;font-size:13px}.network-status-icon{width:24px;height:24px}.network-status-close{width:26px;height:26px;font-size:18px}}@media (max-width:480px){.network-status-notification{top:10px;width:calc(100vw - 20px);padding:12px 14px;font-size:12px;border-radius:14px}.network-status-message{font-size:13px}}@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:translateX(-50%) translateY(0)}.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}}