.spacer { flex: 1; }
.site-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; }
@media (max-width: 640px) { .site-row { grid-template-columns: 1fr; } }
.mon { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.mon .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mon .head b { font-size: 15px; }
.mon .head .host { color: var(--faint); font-size: 12px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--faint); flex: none; }
.dot.up { background: #13a10e; box-shadow: 0 0 0 3px color-mix(in srgb, #13a10e 25%, transparent); }
.dot.down { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .4; } }
.mon .stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 12px; color: var(--subtle); }
.mon .stats b { color: var(--text); font-size: 13px; }
.days { display: flex; gap: 2px; height: 30px; align-items: stretch; }
.days i { flex: 1; border-radius: 2px; background: var(--hover); min-width: 2px; }
.days i.g { background: #13a10e; } .days i.y { background: #ca5010; } .days i.r { background: var(--bad); }
.days-l { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 3px; }
.spark { width: 100%; height: 34px; margin-top: 8px; }
.inc { font-size: 12px; color: var(--subtle); margin-top: 8px; }
.inc li { padding: 3px 0; border: 0; }