.service-status { padding-top:20px; padding-bottom:56px; }
.status-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.status-eyebrow { color:var(--accent); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; margin:0 0 10px; }
.status-heading h2 { font-size:28px; letter-spacing:-.03em; font-weight:500; margin:0; }
.status-refresh { background:#252525; color:var(--text); border:1px solid var(--border-2); border-radius:7px; padding:10px 17px; cursor:pointer; font:inherit; font-size:13px; min-width:104px; }
.status-refresh:disabled { opacity:.6; cursor:wait; }
.service-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.service-card { padding:22px 18px; border:1px solid #3b3b3b; border-radius:12px; background:#222; }
.service-card .service-category { color:var(--text-3); font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px; }
.service-card h3 { font-size:15px; font-weight:500; margin:0 0 22px; line-height:1.4; }
.service-state { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:#ffb3b3; background:#ed777710; border:1px solid #ed77772b; border-radius:20px; padding:5px 9px; }
.service-state::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.service-card[data-online="true"] .service-state { color:#9fdfb9; background:#58c38c0c; border-color:#58c38c2b; }
.status-updated { color:var(--text-3); font-size:12px; margin:18px 0 0; }
@media(max-width:950px) { .service-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .service-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .service-card { padding:18px 14px; } .status-heading h2 { font-size:25px; } }
@media(max-width:360px) { .service-cards { grid-template-columns:1fr; } }