.filters { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; max-width: 76rem; margin: 1rem auto 0; padding: 0 1.5rem; }
.filter-label { font-size: 0.8rem; color: var(--muted); }
.filter-chip {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 999px; padding: 0.2rem 0.6rem;
}
.filter-clear {
    font: inherit; font-size: 0.78rem; color: var(--muted); background: none;
    border: 1px solid var(--border); border-radius: 8px; padding: 0.2rem 0.6rem; cursor: pointer;
}
.filter-clear:hover { color: var(--fg); border-color: var(--accent); }
.filter-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.group { margin-top: 1.75rem; }
.group-head { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; }
.group-title {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    border-radius: 999px; padding: 0.24rem 0.7rem;
    font-family: inherit; cursor: pointer;
}
.group-title:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); }
.group-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.group-count { font-size: 0.8rem; color: var(--muted); }
.group-rule { flex: 1; height: 1px; background: var(--border); }

.subgroup { margin-top: 1.15rem; }
.subgroup-head { display: flex; align-items: baseline; gap: 0.55rem; margin: 0 0 0.7rem; }
.subgroup-title { font-size: 0.85rem; font-weight: 600; color: var(--fg); letter-spacing: 0.005em; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }
.subgroup-title:hover { color: var(--accent); }
.subgroup-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.subgroup-count { font-size: 0.75rem; color: var(--muted); }

.grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow);
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.card:hover { transform: translateY(-2px); border-color: var(--accent); }
.card.down { opacity: 0.72; }
.card.no-ui { cursor: default; }
.card.no-ui:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--muted) 45%, var(--border)); }
.card.no-ui:hover .tag { border-color: var(--muted); color: var(--muted); }

.tag {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.35rem;
}

.icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 12px; background: var(--icon-bg); box-shadow: inset 0 0 0 1px var(--icon-ring); overflow: hidden; }
.icon-img { object-fit: contain; padding: 6px; }
.icon-letter {
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
}

.meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.name { font-weight: 600; font-size: 0.95rem; }
.host { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--unknown); --pulse: var(--unknown); }
.dot.up { background: var(--up); --pulse: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 22%, transparent); }
.dot.down { background: var(--down); box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 22%, transparent); }
.dot.up, .dot.unknown { animation: dot-pulse 2.4s ease-out infinite; }
@keyframes dot-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse) 45%, transparent); }
    70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--pulse) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .dot.up, .dot.unknown { animation: none; }
}