.maintenance-status-banner { flex: 1 1 auto; min-width: 0; max-width: min(46vw, 620px); display: flex; align-items: center; gap: 8px; overflow: hidden; padding: 6px 10px; border-radius: 8px; background: #5b1519; color: #fff; font-size: .78rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.maintenance-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #ff7777; }
.maintenance-clip { min-width: 0; overflow: hidden; }
.maintenance-track { display: inline-flex; align-items: center; gap: 28px; width: max-content; white-space: nowrap; animation: maintenance-ticker 28s linear infinite; }
.maintenance-status-banner:hover .maintenance-track, .maintenance-status-banner:focus-within .maintenance-track { animation-play-state: paused; }
@keyframes maintenance-ticker { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .maintenance-status-banner { flex: 0 1 132px; max-width: 132px; cursor: pointer; } .maintenance-clip { font-size: 0; } .maintenance-clip::after { content: 'Maintenance active'; font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { .maintenance-track { animation: none; } }