max-width: 500px; margin: 0 auto 32px; } @media (max-width: 480px) { .uptime-overview { grid-template-columns: repeat(3, 1fr); gap: 8px; } } .uptime-ov-card { background: var(--card-bg, #fff); border: 1px solid var(--border-color, rgba(0,0,0,0.08)); border-radius: 12px; padding: 18px 12px; text-align: center; } .uptime-ov-card .ov-icon { font-size: 1.4rem; margin-bottom: 6px; } .uptime-ov-card .ov-value { font-size: 1.5rem; font-weight: 800; } .uptime-ov-card .ov-label { font-size: 0.75rem; color: var(--text-muted, #6c757d); margin-top: 2px; } .uptime-monitor-list { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .uptime-monitor-item { background: var(--card-bg, #fff); border: 1px solid var(--border-color, rgba(0,0,0,0.08)); border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: transform 0.2s; } .uptime-monitor-item:hover { transform: translateY(-2px); } .uptime-monitor-item .mon-info { display: flex; align-items: center; gap: 12px; min-width: 0; } .uptime-monitor-item .mon-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .uptime-monitor-item .mon-dot.online { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.4); } .uptime-monitor-item .mon-dot.offline { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.4); } .uptime-monitor-item .mon-dot.unknown { background: #6b7280; } .uptime-monitor-item .mon-name { font-weight: 700; font-size: 0.95rem; } .uptime-monitor-item .mon-url { font-size: 0.75rem; color: var(--text-muted, #6c757d); } .uptime-monitor-item .mon-status { text-align: right; flex-shrink: 0; }