.monitor-catalog .server-list { gap: 16px; }
.monitor-catalog .server-row.server-entry.catalog-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(240px, 32%); grid-template-rows: auto auto; gap: 12px 20px; padding: 16px 18px; border-radius: 8px; position: relative; align-items: start; box-shadow: 0 2px 5px #00000008; }
.catalog-card > * { min-width: 0; }
.catalog-card .card-emblem { grid-column: 1; grid-row: 1 / 3; display: grid; gap: 12px; justify-items: center; }
.catalog-card .card-rank { position: absolute; top: -9px; left: 11px; min-width: 22px; height: 22px; padding: 0 4px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 5px; font-size: 11px; font-weight: 600; }
.catalog-card .card-icon, .catalog-card .card-icon img { display: block; width: 64px; height: 64px; border-radius: 8px; }
.catalog-card .card-icon img { image-rendering: pixelated; }
.catalog-card .card-votes { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 64px; min-height: 32px; border: 1px solid #459dbe66; border-radius: 5px; color: #2386aa; background: #459dbe0d; font-size: 12px; }
:root[data-theme=dark] .catalog-card .card-votes { color: #7cc7e3; }
.catalog-card .card-votes .icon { width: 15px; height: 15px; }
.catalog-card .card-main { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.monitor-catalog .catalog-card .card-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; }
.monitor-catalog .catalog-card .server-name { font-size: 17px; line-height: 1.45; font-weight: 700; overflow-wrap: anywhere; white-space: normal; }
.catalog-card .card-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }
.catalog-card .card-metrics { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px; margin: 0; font-size: 11px; }
.catalog-card .card-metrics > span { display: inline-flex; align-items: center; gap: 6px; min-height: 27px; max-width: 100%; padding: 4px 7px; border-radius: 4px; background: var(--soft); overflow-wrap: anywhere; }
.catalog-card .card-metrics .icon { width: 13px; height: 13px; flex: none; }
.catalog-card .card-metrics .card-online { background: var(--green-soft); }
.catalog-card .card-online strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.catalog-card .card-online > span:last-child { color: var(--muted); }
.catalog-card .card-version { flex-wrap: wrap; }
.catalog-card .card-version strong { font-weight: 500; }
.catalog-card .card-wipe { color: var(--muted); }
.catalog-card .card-connect { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.catalog-card .card-banner { display: block; width: 100%; max-width: 468px; aspect-ratio: 468 / 60; overflow: hidden; border-radius: 6px; background: var(--soft); }
.catalog-card .card-banner img, .catalog-card .card-banner picture { display: block; width: 100%; height: 100%; object-fit: contain; }
.catalog-card .card-tags { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.catalog-card .card-tags a { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.catalog-card .card-tags a:hover { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.catalog-card .card-actions { display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: center; justify-content: space-between; }
.catalog-card .copy-ip.card-address { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; min-height: 42px; gap: 10px; padding: 9px 11px; border: 1px solid var(--green); border-radius: 5px; background: var(--green-soft); color: var(--ink); font-size: 12px; text-align: left; }
.catalog-card .card-address span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.catalog-card .card-address .icon { display: block; width: 16px; height: 16px; flex: none; color: var(--green); }
.catalog-card .card-copy-count { font-size: 10px; text-align: center; color: var(--muted); }
.catalog-card .card-copy-count strong { font-weight: 600; }
.catalog-card .card-project { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; font-size: 11px; color: var(--muted); }
.catalog-card .card-project:hover { color: var(--green); }
.catalog-card .card-project .icon { width: 14px; height: 14px; }
.monitor-catalog .catalog-card .card-facts { grid-column: 2; grid-row: 2; margin: 0; align-self: center; gap: 7px 16px; }
.monitor-catalog .catalog-card .entry-overview { grid-column: 3; grid-row: 2; margin: 0; align-self: center; }
.monitor-catalog .catalog-card .entry-overview[open] { grid-column: 2 / -1; grid-row: 3; }
.catalog-card .entry-overview summary { min-height: 24px; }
.catalog-card .entry-overview-body { padding-top: 16px; font-size: 13px; }
.catalog-card .entry-overview-body p { max-width: 780px; }
.catalog-card a:focus-visible, .catalog-card button:focus-visible, .catalog-card summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@container server-cards (max-width: 650px) {
    .monitor-catalog .server-row.server-entry.catalog-card { grid-template-columns: 48px minmax(0, 1fr); gap: 14px 12px; padding: 16px; }
    .catalog-card .card-emblem { grid-column: 1; grid-row: 1; }
    .catalog-card .card-icon, .catalog-card .card-icon img { width: 48px; height: 48px; border-radius: 6px; }
    .catalog-card .card-votes { width: 48px; }
    .monitor-catalog .catalog-card .server-name { font-size: 16px; }
    .catalog-card .card-main { grid-column: 2; grid-row: 1; }
    .catalog-card .card-description { font-size: 12px; -webkit-line-clamp: 3; }
    .catalog-card .card-connect { grid-column: 1 / -1; grid-row: 2; }
    .catalog-card .card-copy-count { text-align: left; }
    .catalog-card .card-project { justify-content: flex-start; }
    .monitor-catalog .catalog-card .card-facts { grid-column: 1 / -1; grid-row: 3; border-top: 1px solid var(--line); padding-top: 12px; }
    .monitor-catalog .catalog-card .entry-overview,
    .monitor-catalog .catalog-card .entry-overview[open] { grid-column: 1 / -1; grid-row: 4; }
}