.services-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.services-toolbar button { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 16px; cursor:pointer; }
.services-toolbar button:disabled { opacity:.6; cursor:wait; }
.services-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:28px 0; }
.service-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; overflow-wrap:anywhere; }
.service-card h2 { margin:8px 0 18px; }
.service-state { display:inline-block; border:1px solid currentColor; border-radius:20px; padding:4px 12px; color:#c4c4cc; }
.service-state[data-state=operational] { color:#8ce0b0; }
.service-state[data-state=degraded], .service-state[data-state=maintenance], .service-state[data-state=pending] { color:#f2cb7a; }
.service-state[data-state=outage] { color:#ff9b9b; }
.service-details, .service-incidents { padding-left:20px; }
.service-details li, .service-incidents li { margin:10px 0; }
.service-incidents { color:#f2cb7a; }
.service-checked { font-size:.85rem; }
@media (max-width:1100px) { .services-grid { grid-template-columns:1fr; } }

.service-details:has(.service-component) { padding-left:0; list-style:none; }
.service-details .service-component { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:10px 0; }
.service-component + .service-component { border-top:1px solid var(--line); }
.service-component-label { min-width:0; color:var(--text); }
.service-component-state { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:9rem; max-width:55%; height:3rem; text-align:center; font-size:.875rem; line-height:1.2; padding:4px 10px; }