/* ===== Downradar cards in new style ===== */
.dr-monitor{
    --card-bg:#fff; --border:#dfe3e8; --text-primary:#111827; --text-secondary:#6b7280;
    --accent-green:#16a34a; --card-down:#f43f5e; --card-down-bg:#fff8f6;
    --card-shadow:0 1px 2px rgba(0,0,0,.04),0 1px 6px rgba(0,0,0,.02);
    --card-shadow-hover:0 8px 24px rgba(0,0,0,.08);
    --radius:12px; --font-small:13px;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:10px;
    margin:0 0 3rem;
    font-family:Roboto,Arial,sans-serif;
    font-size:15px; line-height:1.5; text-align:left;
}
.dr-monitor>h2{grid-column:1 / -1;text-align:center;margin-bottom:1rem}

.dr-monitor .card{
    position:relative; overflow:hidden;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    grid-template-rows:auto auto 44px var(--font-small);
    grid-template-areas:"icon name" "icon status" "graph graph" "count count";
    padding:12px 12px 8px;
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--card-shadow);
    color:var(--text-primary); text-decoration:none;
    transition:transform .3s,box-shadow .3s;
    --graph:#94a3b8; --em:#1e293b;
}
.dr-monitor .card:hover,.dr-monitor .card:focus-visible{transform:translateY(-2px);box-shadow:var(--card-shadow-hover)}

.dr-monitor .card>img{grid-area:icon;width:44px;height:44px;object-fit:contain;align-self:center;border-radius:8px}
.dr-monitor .card>img.nologo{opacity:.5;padding:6px;box-sizing:border-box}

.dr-monitor .card .name{grid-area:name;align-self:end;padding-left:10px;font-size:var(--font-small);font-weight:500;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-monitor .card .indicator{grid-area:status;align-self:start;padding-left:10px;font-size:var(--font-small);
    color:var(--accent-green);white-space:nowrap}
.dr-monitor .card .indicator::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;vertical-align:1px;
    border-radius:50%;background:currentColor;box-shadow:0 0 6px rgba(22,163,74,.4)}

.dr-monitor .card .graph{grid-area:graph;margin-block:4px;min-width:0}
.dr-monitor .card .graph svg{display:block;width:100%;height:36px;margin:0}
.dr-monitor .card .sparkline--line{stroke:var(--graph);stroke-width:1.5;fill:none}
.dr-monitor .card .sparkline--fill{fill:var(--graph);fill-opacity:.25;stroke:none}
.dr-monitor .card .sparkline--cursor,.dr-monitor .card .sparkline--spot{display:none}

.dr-monitor .card .count{grid-area:count;font-size:var(--font-small);line-height:var(--font-small);color:var(--text-secondary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-monitor .card .count b{color:var(--em);font-weight:700}

/* spike / down state */
.dr-monitor .card.down{background:var(--card-down-bg);border-color:rgba(244,63,94,.18);--graph:var(--card-down);--em:var(--card-down)}
.dr-monitor .card.down::before{content:"";position:absolute;top:0;left:0;bottom:0;width:2px;background:var(--card-down)}
.dr-monitor .card.down .indicator{color:var(--card-down)}
.dr-monitor .card.down .indicator::before{box-shadow:0 0 6px rgba(244,63,94,.4);animation:dr-pulse 1.75s ease-in infinite}
@keyframes dr-pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(244,63,94,.7)}30%{transform:scale(.75);box-shadow:0 0 0 0 rgba(244,63,94,.7)}100%{transform:scale(1);box-shadow:0 0 0 6px rgba(244,63,94,0)}}

@media (max-width:450px){
    .dr-monitor{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dr-monitor .card{grid-template-columns:32px minmax(0,1fr)}
    .dr-monitor .card{padding:10px 10px 8px}
    .dr-monitor .card>img{width:32px;height:32px}
    .dr-monitor .card .name,.dr-monitor .card .indicator{padding-left:8px}
    .dr-monitor .card .lbl{display:none}
}
/* empty chart (sparklineHome.js swaps the svg for div.sparkline.zero) */
.dr-monitor .card .graph .sparkline.zero{height:36px;box-sizing:border-box;border-bottom:1.5px solid var(--graph);margin:0}
/* "nothing found" message spans the full grid width */
.dr-monitor>p{grid-column:1 / -1}