:root {
  color-scheme: light;
  --bg: #edf0f2;
  --surface: #ffffff;
  --ink: #18202a;
  --muted: #5e6a78;
  --line: #d3d9df;
  --accent: #1f5fbf;
  --warn: #b5541c;
  --bad: #b8322f;

  --c-human: #2e8b6e;
  --c-search: #3b6fd6;
  --c-social: #7b61c9;
  --c-ai: #d98b1a;
  --c-seo: #8a9a2e;
  --c-monitor: #7c8a99;
  --c-suspect: #c2603a;
  --c-tool: #a0567a;
  --c-scanner: #c23b3b;
  --c-bot: #9a7b5b;
  --c-fake: #8e1f2f;
  --c-self: #a9b4bf;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #13171c;
    --surface: #1b2128;
    --ink: #e3e8ed;
    --muted: #8c98a5;
    --line: #2b333c;
    --accent: #6e9bea;
    --warn: #e08a52;
    --bad: #e2625f;
    --c-self: #4e5966;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* ---------- шапка ---------- */
.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 10px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 700; font-size: 16px; color: var(--ink); }
.top nav { display: flex; gap: 4px; }
.top nav a { padding: 6px 10px; border-radius: 6px; color: var(--muted); }
.top nav a[aria-current] { color: var(--ink); background: var(--bg); }
.period { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.period a { padding: 5px 10px; color: var(--muted); }
.period a + a { border-left: 1px solid var(--line); }
.period a[aria-current] { background: var(--ink); color: var(--surface); }
.fresh { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.fresh.stale { color: var(--warn); }
.logout { margin: 0; }
button, .btn {
  font: inherit; cursor: pointer;
  padding: 6px 12px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

main { padding: 24px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 26px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 650; margin: 0 0 10px; }
.sub { color: var(--muted); margin: 0 0 20px; }

/* ---------- состав трафика ---------- */
.bar {
  display: flex; gap: 1px;
  height: 10px; width: 100%;
  background: var(--line);
}
.bar.big { height: 30px; }
.bar.bar-empty { opacity: .5; }
.seg { display: block; min-width: 2px; height: 100%; }
.seg.cat-human, .dot.cat-human { background: var(--c-human); }
.seg.cat-search, .dot.cat-search { background: var(--c-search); }
.seg.cat-social, .dot.cat-social { background: var(--c-social); }
.seg.cat-ai, .dot.cat-ai { background: var(--c-ai); }
.seg.cat-seo, .dot.cat-seo { background: var(--c-seo); }
.seg.cat-monitor, .dot.cat-monitor { background: var(--c-monitor); }
.seg.cat-suspect, .dot.cat-suspect { background: var(--c-suspect); }
.seg.cat-tool, .dot.cat-tool { background: var(--c-tool); }
.seg.cat-scanner, .dot.cat-scanner { background: var(--c-scanner); }
.seg.cat-bot, .dot.cat-bot { background: var(--c-bot); }
.seg.cat-fake, .dot.cat-fake { background: var(--c-fake); }
.seg.cat-self, .dot.cat-self { background: var(--c-self); }

.legend { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legend li { display: flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 10px; height: 10px; }

.cat { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 12px; white-space: nowrap;
  border-left: 3px solid; background: var(--bg); }
.cat-human { border-color: var(--c-human); }
.cat-search { border-color: var(--c-search); }
.cat-social { border-color: var(--c-social); }
.cat-ai { border-color: var(--c-ai); }
.cat-seo { border-color: var(--c-seo); }
.cat-monitor { border-color: var(--c-monitor); }
.cat-suspect { border-color: var(--c-suspect); }
.cat-tool { border-color: var(--c-tool); }
.cat-scanner { border-color: var(--c-scanner); }
.cat-bot { border-color: var(--c-bot); }
.cat-fake { border-color: var(--c-fake); }
.cat-self { border-color: var(--c-self); }

/* ---------- список сайтов ---------- */
.sites { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.site {
  display: grid; grid-template-columns: minmax(180px, 1.2fr) 3fr repeat(5, minmax(70px, .6fr));
  align-items: center; gap: 16px;
  padding: 14px 16px; background: var(--surface); color: var(--ink);
}
.site:hover { text-decoration: none; background: color-mix(in srgb, var(--surface) 92%, var(--accent)); }
.site .domain { font-weight: 650; font-size: 15px; }
.site .num { text-align: right; }
.site .num b { display: block; font-size: 15px; font-weight: 600; }
.site .num span { font-size: 12px; color: var(--muted); }
.site.head { background: var(--bg); padding-top: 8px; padding-bottom: 8px; font-size: 12px; color: var(--muted); }
.site.head:hover { background: var(--bg); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }

/* ---------- блоки и таблицы ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); padding: 16px; margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.grid2 > .panel { margin-bottom: 0; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0 0 16px; }
.stats div b { display: block; font-size: 22px; font-weight: 600; }
.stats div span { color: var(--muted); font-size: 12.5px; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-weight: 600; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
td.r, th.r { text-align: right; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.path { max-width: 520px; overflow-wrap: anywhere; }
.ua { max-width: 380px; overflow-wrap: anywhere; color: var(--muted); font-size: 12.5px; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 16px; font-size: 13px; }
.pager-info { color: var(--muted); }
.pager .per { display: flex; align-items: center; gap: 8px; }
.pagination { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pagination li a, .pagination li span {
  display: block; min-width: 34px; padding: 5px 10px; text-align: center;
  border: 1px solid var(--line); margin-left: -1px; background: var(--surface); color: var(--accent);
}
.pagination li:first-child a, .pagination li:first-child span { border-radius: 6px 0 0 6px; margin-left: 0; }
.pagination li:last-child a, .pagination li:last-child span { border-radius: 0 6px 6px 0; }
.pagination li a:hover { background: var(--bg); text-decoration: none; }
.pagination li.active a, .pagination li.active span { background: var(--accent); border-color: var(--accent); color: #fff; position: relative; z-index: 1; }
.pagination li.disabled span { color: var(--muted); background: var(--bg); }
.pager .per .pagination li a, .pager .per .pagination li span { min-width: 40px; color: var(--ink); }
.pager .per .pagination li.active span { color: #fff; }
.path a { overflow-wrap: anywhere; }

.chart { width: 100%; height: auto; display: block; }
.chart .c-human { fill: var(--c-human); }
.chart .c-bots { fill: var(--c-ai); opacity: .85; }
.chart text { font-size: 10px; fill: var(--muted); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ln { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.chart circle.ln { fill: currentColor; }
.chart .hit { fill: transparent; }
.chart .hit:hover { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.chart .ln.s1 { stroke: var(--c-search); }
.chart .ln.s2 { stroke: var(--c-ai); }
.chart .ln.s3 { stroke: var(--c-human); }
.chart .c-sent { fill: var(--c-human); }
.chart .c-deferred { fill: var(--c-ai); }
.chart .c-failed { fill: var(--bad); }
.meter { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.meter span { display: block; height: 100%; background: var(--c-human); }
.meter.warn span { background: var(--c-ai); }
.meter.bad span { background: var(--bad); }
.ev-in { color: var(--accent); }
.ev-sent { color: var(--c-human); }
.ev-deferred { color: var(--warn); }
.ev-failed { color: var(--bad); font-weight: 600; }
.chart-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 16px; }
.filters a.btn { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.filters a.btn:hover { text-decoration: none; border-color: var(--muted); }
.filters a.btn[aria-current] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.filters a.btn .muted { font-size: 12.5px; }
.filters label { display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); }
select, input[type=text], input[type=password] {
  font: inherit; padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}

.err-msg { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.5em; overflow: hidden; }
details.err-msg-full summary { cursor: pointer; color: var(--accent); font-size: 12.5px; }
details.err-msg-full pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; }
.lvl-fatal, .lvl-crit, .lvl-alert, .lvl-emerg { color: var(--bad); font-weight: 600; }
.lvl-error { color: var(--bad); }
.lvl-warning, .lvl-warn { color: var(--warn); }

.prio { display: inline-block; min-width: 22px; text-align: center; border-radius: 4px; font-weight: 600; }
.prio-1 { background: var(--bad); color: #fff; }
.prio-2 { background: var(--warn); color: #fff; }
.prio-3 { background: var(--line); }
.risk-high { color: var(--bad); }
.risk-medium { color: var(--warn); }
.note { border-left: 3px solid var(--accent); padding: 8px 12px; background: var(--bg); margin: 0 0 16px; }
.alert { border-left: 3px solid var(--bad); padding: 8px 12px; background: var(--bg); margin: 0 0 16px; }

/* ---------- вход ---------- */
.login { max-width: 340px; margin: 12vh auto; background: var(--surface); border: 1px solid var(--line); padding: 24px; }
.login form { display: grid; gap: 12px; }
.login label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }

@media (max-width: 900px) {
  main { padding: 16px; }
  .site { grid-template-columns: 1fr 1fr 1fr; }
  .site .bar { grid-column: 1 / -1; order: 2; }
  .site.head { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .fresh { margin-left: 0; }
}