body { font-family: Arial, sans-serif; margin: 16px; color:#1f2328; }
.page { display:block; }
.topline { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom: 12px; }
.pill { background:#f2f2f2; padding:4px 8px; border-radius:999px; font-size:12px; }
.pill.mini { font-size:11px; padding:3px 7px; }
.muted { color:#666; font-size:12px; }

.stats-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin: 10px 0 18px; }
.stat-card { border:1px solid #e6e6e6; border-radius:10px; padding:12px 14px; background:#fff; }
.stat-label { font-size:12px; color:#666; margin-bottom:6px; }
.stat-value { font-size:22px; font-weight:700; }
.stat-up { color:#1a7f37; }
.stat-down { color:#cf222e; }

.filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin: 12px 0 18px; }
.field { display:flex; flex-direction:column; gap:4px; }
.field-multi select { min-width:180px; }
label { font-size:12px; color:#333; display:block; }
select, input { padding:8px; font-size:14px; max-width: 520px; border:1px solid #d0d7de; border-radius:8px; background:#fff; }
button, .btn-secondary { padding:9px 12px; font-size:14px; cursor:pointer; border-radius:8px; border:1px solid #d0d7de; text-decoration:none; display:inline-block; }
button { background:#111827; color:#fff; border-color:#111827; }
.btn-secondary { background:#fff; color:#111827; }
.actions { display:flex; gap:10px; align-items:flex-end; }

.hintline { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin: 0 0 10px; font-size:12px; color:#666; }

.table-wrap { overflow:auto; border:1px solid #e6e6e6; border-radius:10px; }
table { border-collapse: collapse; width:100%; min-width: 1100px; }
th, td { border-bottom:1px solid #eee; padding:8px 10px; white-space:nowrap; }
thead th { position:sticky; top:0; background:#f7f7f7; z-index:3; border-bottom:1px solid #e3e3e3; }

th.sticky1, td.sticky1 { position:sticky; left:0; z-index:4; background:#fff; border-right:1px solid #eee; }
th.sticky2, td.sticky2 { position:sticky; left:64px; z-index:4; background:#fff; border-right:1px solid #eee; max-width:760px; overflow:hidden; text-overflow:ellipsis; }
thead th.sticky1, thead th.sticky2 { background:#f7f7f7; }

td.num, th.num { text-align:right; }
td.zero { color:#bbb; }
.sort-col a { color:inherit; text-decoration:none; }
.sort-col a:hover { text-decoration:underline; }

.url-main { overflow:hidden; text-overflow:ellipsis; }
.url-host { font-size:11px; color:#666; margin-top:2px; }

.delta-head .subhead { display:block; font-size:11px; color:#666; font-weight:400; margin-top:2px; }
.delta-up { color:#1a7f37; font-weight:700; }
.delta-down { color:#cf222e; font-weight:700; }
.delta-flat { color:#6b7280; }

td.heat {
  background:
    linear-gradient(
      0deg,
      rgba(33, 110, 57, calc(var(--heat) / 140)) 0%,
      rgba(33, 110, 57, calc(var(--heat) / 140)) 100%
    );
}

tr.brand td { background:#eaf3ff; }
tr.brand td.sticky1, tr.brand td.sticky2 { background:#eaf3ff; font-weight:600; }
tr.brand td.heat {
  background:
    linear-gradient(
      0deg,
      rgba(33, 110, 57, calc(var(--heat) / 140)) 0%,
      rgba(33, 110, 57, calc(var(--heat) / 140)) 100%
    ),
    #eaf3ff;
}