:root { color-scheme: dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #14161a; color: #e6e6e6; }
header { padding: 12px 16px; background: #1d2026; font-weight: 600; }
.card { background: #1d2026; margin: 12px; padding: 14px; border-radius: 10px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
button { background: #2f7; color: #06250f; border: 0; border-radius: 8px;
  padding: 9px 14px; font-weight: 600; cursor: pointer; }
button.stop { background: #f55; color: #2a0606; }
input { background: #14161a; color: #e6e6e6; border: 1px solid #333;
  border-radius: 6px; padding: 7px; }
pre.log { background: #0e0f12; height: 220px; overflow: auto; padding: 8px;
  border-radius: 8px; font-size: 12px; white-space: pre-wrap; }
.stat { font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
td, th { border-bottom: 1px solid #2a2d34; padding: 4px 6px; text-align: left; }
summary { cursor: pointer; padding: 6px 0; font-weight: 600; }
details { margin: 6px 0; }
tr.reached td { background: #16331d; color: #b8f5c6; }

/* ---- мозаичная раскладка карточек: 1 колонка на узком, 2-3 на широком ---- */
/* align-items:stretch — карточки в одной строке тянутся на всю высоту строки,
   поэтому под короткими блоками не остаётся пустого фона между строками. */
.grid { display: grid; align-items: stretch; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.grid > .card.wide { grid-column: 1 / -1; }   /* Каналы и обзор — во всю ширину */
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

/* ---- сворачиваемые отчёты со скроллом по высоте (кнопки «Показать отчёт») ---- */
details.report { margin: 8px 0 0; border: 1px solid #2a2d34; border-radius: 8px; overflow: hidden; }
details.report > summary { list-style: none; padding: 8px 10px; background: #23262e; }
details.report > summary::-webkit-details-marker { display: none; }
details.report > summary::before { content: "▼ "; opacity: .6; }
details.report[open] > summary::before { content: "▲ "; }
details.report .scroller { max-height: 320px; overflow: auto; padding: 8px 10px; }

/* ---- блок «Каналы: кап и онлайн» ---- */
.ov-scroller { max-height: 340px; overflow: auto; margin-top: 8px;
  border: 1px solid #2a2d34; border-radius: 8px; }
.ov-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border-bottom: 1px solid #23262e; }
.ov-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ov-slug { font-weight: 600; }
.ov-on .dot { background: #2f7; box-shadow: 0 0 6px #2f7a; }
.ov-off { opacity: .5; } .ov-off .dot { background: #666; }
.ov-unknown { opacity: .6; } .ov-unknown .dot { background: #888; }
.ov-cap { font-variant-numeric: tabular-nums; opacity: .85; }
.ov-cap.ov-full { color: #2f7; opacity: 1; font-weight: 600; }