.network-status-banner{position:fixed;top:0;left:0;right:0;z-index:var(--z-toast);padding:0 var(--space-4);padding-top:env(safe-area-inset-top,0);animation:slide-down .3s ease-out}@keyframes slide-down{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.network-status-content{display:flex;align-items:center;justify-content:center;gap:10px;padding:var(--space-3) var(--space-4);border-radius:0 0 var(--radius-md) var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium)}.network-status-banner.offline .network-status-content{background:var(--gradient-hot);color:var(--text-primary);box-shadow:var(--glow-warning)}.network-status-banner.online .network-status-content{background:var(--gradient-brand);color:var(--text-on-brand);box-shadow:var(--glow-green)}.network-status-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.network-status-text{flex:1;text-align:center}.network-status-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:rgba(var(--black-rgb),.1);border-radius:var(--radius-circle);cursor:pointer;transition:background var(--transition-normal);flex-shrink:0}.network-status-banner.offline .network-status-close{color:var(--text-primary)}.network-status-banner.online .network-status-close{color:var(--text-on-brand)}@media (hover:hover){.network-status-close:hover{background:rgba(var(--black-rgb),.2)}}@media (min-width:768px){.network-status-banner{padding:var(--space-2) var(--space-6);padding-top:max(var(--space-2),env(safe-area-inset-top,0))}.network-status-content{max-width:500px;margin:0 auto;border-radius:var(--radius-md)}}@media (prefers-reduced-motion:reduce){.network-status-banner{animation:none}}