.component-groups { display: grid; gap: 14px; }
.component-group { background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.component-group summary { display: flex; justify-content: space-between; align-items: center; padding: 21px 28px; cursor: pointer; list-style: none; font: 700 14px Manrope, sans-serif; }
.component-group summary::-webkit-details-marker { display: none; }
.component-group summary::after { content: '+'; margin-left: 18px; font-size: 18px; font-weight: 400; }
.component-group[open] summary::after { content: '−'; }
.component-group summary span { flex: 1; }
.component-group summary small { color: var(--muted); font: 400 11px "DM Sans", sans-serif; }
.component-group .component-list { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.ungrouped-components > h3 { margin: 24px 0 12px; color: var(--muted); font: 700 11px Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.component h3 a { color: inherit; text-decoration: none; }
.component h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.state.performance_issues, .state.partial_outage { color: var(--orange); }
.state.unknown { color: var(--muted); }
.overall.performance_issues, .overall.maintenance { background: #9a6525; }
.overall.unknown { background: #657069; }