/* AdWatch panel — design system D2 (docs/SPEC-D2.md). No build step; IBM Plex is self-hosted (fonts/fonts.css).
 * Tokens: neutrals, the workspace accent and its derivatives (core.js setAccent), six statuses + info, the chart
 * palette; one scale of type, spacing, radii, shadows and motion. The dark theme redefines the same tokens
 * (system preference or data-theme on <html>). Components: status · tag · chip · stat · message · tabs · btn ·
 * field · tbl · card · dropdown · modal · toast · lightbox. The R1–R5 class names stay valid as aliases
 * (.pill → .status, .badge → .status.sm, .kpi → .stat, .epom-box/.banner → .message, .subtabs → .tabs …). */

/* ---------- tokens: light ---------- */
:root {
  color-scheme: light;
  --bg: #f3f5f7; --surface: #ffffff; --surface-alt: #f8fafc; --border: #dfe4ea; --border-strong: #c9d1db;
  --text: #1f2933; --muted: #5b6672; --faint: #6b7684;
  --primary: #2563eb; --primary-hover: #1d4ed8; --primary-soft: #e8effd; --primary-ink: #1e40af;
  --ok: #15803d; --ok-bg: #dcfce7; --ok-fg: #166534;
  --warn: #a16207; --warn-bg: #fef3c7; --warn-fg: #854d0e;
  --nofill: #ea580c; --nofill-bg: #ffedd5; --nofill-fg: #9a3412;
  --crit: #dc2626; --crit-bg: #fee2e2; --crit-fg: #991b1b;
  --blocked: #7c3aed; --blocked-bg: #ede9fe; --blocked-fg: #5b21b6;
  --na: #6b7280; --na-bg: #eceff3; --na-fg: #4b5563;
  --info: #2563eb; --info-bg: #dbeafe; --info-fg: #1e40af;
  --thumb: #e4e8ee; --thumb-line: #d3d9e1; --log-bg: #0f172a; --log-fg: #e2e8f0;
  --chart-0: #2563eb; --chart-1: #0f766e; --chart-2: #b45309; --chart-3: #7c3aed; --chart-4: #be185d;
  --chart-5: #0369a1; --chart-6: #4d7c0f; --chart-7: #9a3412; --chart-8: #334155; --chart-9: #a16207;
  --on-solid: #ffffff;  /* text / icons on a solid status colour (dots, stack segments, timeline cells) */
  --overlay: rgba(15, 23, 42, 0.45);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-dropdown: 0 8px 24px rgba(16, 24, 40, 0.14); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.28);
  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px;
  --t-fast: 120ms; --t: 200ms; --t-slow: 300ms;
  /* the workspace accent per theme: core.js setAccent writes the pairs --accent-light-set / --accent-dark-set (the dark
     one lightened to ≥ 4.5:1 on the dark surface), -hover, -soft, -ink and -fg (the text on the solid accent); without
     them the accent is --primary and the derivatives are mixed here from it */
  --accent: var(--accent-light-set, var(--primary));
  --accent-fg: var(--accent-fg-light-set, #ffffff);
  --accent-hover: var(--accent-hover-light-set, color-mix(in srgb, var(--accent) 88%, #000));
  --accent-soft: var(--accent-soft-light, color-mix(in srgb, var(--accent) 12%, var(--surface)));
  --accent-ink: var(--accent-ink-light, color-mix(in srgb, var(--accent) 72%, var(--text)));
  /* legacy aliases (R1–R5 rules and inline styles) */
  --shadow: var(--shadow-card); --shadow-lg: var(--shadow-dropdown); --radius: var(--r-md); --radius-lg: var(--r-lg);
  --green: var(--ok); --amber: var(--warn); --gray: var(--na); --purple: var(--blocked); --red: var(--crit); --blue: var(--primary);
}

/* ---------- tokens: dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111417; --surface: #171c22; --surface-alt: #1c222a; --border: #2b3340; --border-strong: #3a4454;
    --text: #e6e9ee; --muted: #a3adba; --faint: #8e99a6;
    --primary: #3b82f6; --primary-hover: #60a5fa; --primary-soft: #1a2946; --primary-ink: #93c5fd;
    --ok: #4ade80; --ok-bg: #12351f; --ok-fg: #86efac;
    --warn: #fbbf24; --warn-bg: #3b2f0b; --warn-fg: #fde68a;
    --nofill: #fb923c; --nofill-bg: #3d2210; --nofill-fg: #fdba74;
    --crit: #f87171; --crit-bg: #3f1517; --crit-fg: #fca5a5;
    --blocked: #a78bfa; --blocked-bg: #2b1d4d; --blocked-fg: #c4b5fd;
    --na: #9ca3af; --na-bg: #242a33; --na-fg: #c3cad3;
    --info: #60a5fa; --info-bg: #172554; --info-fg: #bfdbfe;
    --thumb: #262c35; --thumb-line: #323a45; --log-bg: #0b0f14; --log-fg: #d6dde6;
    --chart-0: #60a5fa; --chart-1: #2dd4bf; --chart-2: #f59e0b; --chart-3: #a78bfa; --chart-4: #f472b6;
    --chart-5: #38bdf8; --chart-6: #a3e635; --chart-7: #fb923c; --chart-8: #94a3b8; --chart-9: #fbbf24;
    --on-solid: #111417;
    --overlay: rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6);
    --accent: var(--accent-dark-set, var(--primary));
    --accent-fg: var(--accent-fg-dark-set, #ffffff);
    --accent-hover: var(--accent-hover-dark-set, color-mix(in srgb, var(--accent) 85%, #fff));
    --accent-soft: var(--accent-soft-dark, color-mix(in srgb, var(--accent) 18%, var(--surface)));
    --accent-ink: var(--accent-ink-dark, color-mix(in srgb, var(--accent) 55%, #fff));
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111417; --surface: #171c22; --surface-alt: #1c222a; --border: #2b3340; --border-strong: #3a4454;
  --text: #e6e9ee; --muted: #a3adba; --faint: #8e99a6;
  --primary: #3b82f6; --primary-hover: #60a5fa; --primary-soft: #1a2946; --primary-ink: #93c5fd;
  --ok: #4ade80; --ok-bg: #12351f; --ok-fg: #86efac;
  --warn: #fbbf24; --warn-bg: #3b2f0b; --warn-fg: #fde68a;
  --nofill: #fb923c; --nofill-bg: #3d2210; --nofill-fg: #fdba74;
  --crit: #f87171; --crit-bg: #3f1517; --crit-fg: #fca5a5;
  --blocked: #a78bfa; --blocked-bg: #2b1d4d; --blocked-fg: #c4b5fd;
  --na: #9ca3af; --na-bg: #242a33; --na-fg: #c3cad3;
  --info: #60a5fa; --info-bg: #172554; --info-fg: #bfdbfe;
  --thumb: #262c35; --thumb-line: #323a45; --log-bg: #0b0f14; --log-fg: #d6dde6;
  --chart-0: #60a5fa; --chart-1: #2dd4bf; --chart-2: #f59e0b; --chart-3: #a78bfa; --chart-4: #f472b6;
  --chart-5: #38bdf8; --chart-6: #a3e635; --chart-7: #fb923c; --chart-8: #94a3b8; --chart-9: #fbbf24;
  --on-solid: #111417;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6);
  --accent: var(--accent-dark-set, var(--primary));
  --accent-fg: var(--accent-fg-dark-set, #ffffff);
  --accent-hover: var(--accent-hover-dark-set, color-mix(in srgb, var(--accent) 85%, #fff));
  --accent-soft: var(--accent-soft-dark, color-mix(in srgb, var(--accent) 18%, var(--surface)));
  --accent-ink: var(--accent-ink-dark, color-mix(in srgb, var(--accent) 55%, #fff));
}

/* ---------- base + type scale ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 13px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: var(--mono); font-size: 12px; }
code { background: var(--na-bg); color: var(--text); padding: 1px 5px; border-radius: var(--r-sm); }
/* display 24 / h1 20·700 / h2 16·600 / h3 13·600 / body-lg 14 / body 13 / label 12·600 / caption 11 */
h1, .h1 { font-size: 20px; margin: 0; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
h2, .h2 { font-size: 16px; margin: 0 0 10px; font-weight: 600; line-height: 1.3; }
h3, .h3 { font-size: 13px; margin: 0; font-weight: 600; color: var(--text); line-height: 1.4; }
.display { font-size: 24px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.body-lg { font-size: 14px; }
.label { font-size: 12px; font-weight: 600; color: var(--muted); }
.caption { font-size: 11px; color: var(--muted); }
.tnum, .num { font-variant-numeric: tabular-nums; }
p { margin: 0 0 8px; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 0 3px var(--accent-soft); border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- icons (js/icons.js sprite: <svg class="ic"><use href="#i-name"/></svg>) ---------- */
svg.ic { display: inline-block; flex: none; vertical-align: -0.2em; overflow: visible; }
.ic.muted { color: var(--muted); } .ic.faint { color: var(--faint); }
.ic.spin { animation: spin 1.1s linear infinite; }
svg.ic.xs { width: 11px; height: 11px; } svg.ic.sm { width: 12px; height: 12px; } svg.ic.md { width: 14px; height: 14px; } svg.ic.lg { width: 20px; height: 20px; }
span.ic { display: inline-block; text-align: center; } /* legacy text glyph slot of the old .pill markup */
/* spacing scale as classes (instead of inline margins in the js templates) */
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.ml-1 { margin-left: var(--space-1); } .ml-2 { margin-left: var(--space-2); } .mr-1 { margin-right: var(--space-1); } .mr-2 { margin-right: var(--space-2); }
.m-0 { margin: 0; } .mb-0 { margin-bottom: 0; } .mt-0 { margin-top: 0; }
.flex { display: flex; align-items: center; } .flex.wrap { flex-wrap: wrap; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
/* static layout of the form templates (instead of inline max-width / flex / padding in the js) */
.w-220 { max-width: 220px; } .w-280 { max-width: 280px; } .w-320 { max-width: 320px; }
.grow { flex: 1 1 260px; }
.self-center { align-self: center; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
ul.hint.indent { padding-left: 18px; }

/* ---------- top navigation ---------- */
.topnav { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-card); }
.topnav-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 14px; height: 48px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
/* the logo mark: an accent rounded square with a white ring (= the favicon) */
.brand-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.brand-mark::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--accent-fg); box-sizing: border-box; }
.brand-mark.lg { width: 30px; height: 30px; border-radius: 8px; } .brand-mark.lg::before { width: 13px; height: 13px; border-width: 3px; }
.nav-links { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { padding: 6px 10px; border-radius: var(--r-md); color: var(--muted); font-weight: 500; white-space: nowrap; }
.nav-links a:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
.nav-links a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav-status { font-size: 12px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.nav-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.nav-status.offline { color: var(--crit-fg); }
.nav-status.offline::before { background: var(--crit); }
.nav-status.idle::before { background: var(--na); }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: var(--r-md); width: 30px; height: 30px; padding: 0; cursor: pointer; flex: none; }
.theme-btn:hover { background: var(--surface-alt); color: var(--text); }

/* ---------- layout ---------- */
.container { max-width: 1440px; margin: 0 auto; padding-block: 16px; padding-inline: 16px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.page-head .back { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.page-head .lead, .page-lead { color: var(--muted); }
.spacer { flex: 1 1 auto; }
.row { display: flex; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.gap { gap: 8px; }
.gap-lg { gap: 16px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.card.flat { box-shadow: none; }
.card-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -12px -14px 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.card-h h2 { margin: 0; flex: 1; min-width: 120px; }
.card-h .hint, .card-h .muted.small { font-size: 12px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.two-col > * { min-width: 0; }
.two-col.wide-left { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 960px) { .two-col, .two-col.wide-left { grid-template-columns: minmax(0, 1fr); } }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.toolbar input[type="search"] { max-width: 280px; }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12px; }
.tiny, .xs { font-size: 11px; }
.nowrap { white-space: nowrap; }
.upper { text-transform: uppercase; }
.ok { color: var(--ok-fg); font-weight: 600; }
.err-text { color: var(--crit-fg); }
.crit-text { color: var(--crit-fg); font-weight: 600; }
.warn-text { color: var(--warn-fg); }
.via-nested { color: var(--warn-fg); }
.break { word-break: break-all; }
.ell { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.hint { font-size: 12px; color: var(--muted); }
.hint code { font-size: 11px; }
.empty-state { padding: 28px 12px; text-align: center; color: var(--muted); }
.empty-state h2 { color: var(--text); margin-bottom: 4px; }
.empty-state .ic.big { width: 52px; height: 52px; color: var(--faint); display: block; margin: 0 auto 10px; }
.empty-state .btn { margin-top: 4px; }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; color: var(--muted); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; }
/* skeleton (loading state of a card / table) */
.skeleton { display: flex; flex-direction: column; gap: 7px; }
.sk-line { height: 11px; border-radius: var(--r-sm); background: var(--na-bg); animation: pulse 1.4s ease-in-out infinite; }
.sk-line.w40 { width: 40%; } .sk-line.w66 { width: 66%; } .sk-line.w88 { width: 88%; } .sk-line.tall { height: 30px; border-radius: var(--r-md); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 12px; box-shadow: var(--shadow-card); -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; font-size: 13px; }
.tbl th, .tbl td { padding: 7px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.tbl th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--surface-alt); white-space: nowrap; position: sticky; top: 0; z-index: 2; }
.tbl th.num, .tbl th.right { text-align: right; }
.tbl td { background: var(--surface); }
.tbl tbody tr:nth-child(even) td { background: var(--surface-alt); }
.tbl tbody tr:hover td { background: var(--accent-soft); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr.disabled td:not(.actions):not(.toggle) > * { opacity: 0.55; }
.tbl tr.disabled td:not(.actions):not(.toggle) { color: var(--muted); }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.actions { white-space: nowrap; text-align: right; }
.tbl td.actions .btn + .btn { margin-left: 4px; }
.tbl td.empty { padding: 28px 12px; text-align: center; color: var(--muted); }
.tbl .id { color: var(--muted); font-variant-numeric: tabular-nums; }
.tbl td .sub { font-size: 11px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.tbl td .sub.prose { word-break: normal; overflow-wrap: anywhere; }
.tbl td.when { white-space: nowrap; }
.tbl td.clip { max-width: 260px; }
.tbl td.clip > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }

/* ======================================================================
   D2 §04: three chips — status (state of an object, icon + text), tag (a data label, never clicked),
   chip (an interactive filter / tab). Legacy: .pill/.pill.big = status md/big · .badge.st-* = status sm ·
   .hdot = status sm icon-only · .fmt/.fchip/.bchip/.role-chip/.ocr-tag/.delta/.kind-badge/.preroll-badge = tag.
   ====================================================================== */
.status, .pill, .badge {
  display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); padding: 2px 10px 2px 8px;
  font-size: 12px; font-weight: 600; line-height: 1.5; border: 1px solid transparent; white-space: nowrap; vertical-align: middle;
  background: var(--na-bg); color: var(--na-fg); border-color: var(--border);
}
.status.sm, .badge { gap: 4px; padding: 1px 8px 1px 6px; font-size: 11px; line-height: 16px; }
.status.big, .pill.big { gap: 6px; padding: 4px 13px 4px 10px; font-size: 14px; }
.status .ic, .pill .ic { flex: none; }
.status.sm .ic { width: 12px; height: 12px; } .status.md .ic, .pill .ic { width: 14px; height: 14px; } .status.big .ic, .pill.big .ic { width: 16px; height: 16px; }
.status.icon-only, .hdot { padding: 0; width: 18px; height: 18px; justify-content: center; gap: 0; border: 0; }
.status.icon-only .ic { width: 12px; height: 12px; }
.status.ok, .pill.ok, .badge.st-found, .badge.st-done, .badge.st-scanned, .badge.st-finished { background: var(--ok-bg); color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.status.warn, .status.partial, .pill.warn, .pill.partial, .badge.st-tag_only { background: var(--warn-bg); color: var(--warn-fg); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.status.nofill, .pill.nofill, .badge.st-no_fill, .badge.st-no_ads { background: var(--nofill-bg); color: var(--nofill-fg); border-color: color-mix(in srgb, var(--nofill) 40%, transparent); }
.status.crit, .pill.crit, .badge.st-not_found, .badge.st-error { background: var(--crit-bg); color: var(--crit-fg); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.status.blocked, .pill.blocked, .badge.st-blocked { background: var(--blocked-bg); color: var(--blocked-fg); border-color: color-mix(in srgb, var(--blocked) 40%, transparent); }
.status.na, .pill.na, .badge.st-queued, .badge.st-none, .badge.st-cancelled { background: var(--na-bg); color: var(--na-fg); border-color: var(--border); }
.status.info, .pill.info, .badge.st-running { background: var(--info-bg); color: var(--info-fg); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.status.accent { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.status.st-running, .pill.st-running, .badge.st-running { animation: pulse 1.3s ease-in-out infinite; }
.status.st-running .ic, .pill.st-running .ic { animation: spin 1.1s linear infinite; }
.badge.st-cancelled, .status.st-cancelled { text-decoration: line-through; }
.badge.moved, .status.moved { background: var(--warn-bg); color: var(--warn-fg); border: 1px dashed var(--warn); }
.badge.new-badge { background: var(--ok-bg); color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.badge.ours-badge { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.badge.sim-badge { background: var(--info-bg); color: var(--info-fg); }
a .badge:hover, a .status:hover { filter: brightness(0.95); }
/* solid dots (a status without its label: table rows, legends, the stat marker) */
.hdot, .dot, .ldot, .ddot, .marker { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--na); flex: none; font-size: 0; color: transparent; }
.hdot { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--on-solid); }
.hdot .ic { width: 9px; height: 9px; color: var(--on-solid); }
.ddot, .marker { width: 10px; height: 10px; }
.hdot.ok, .dot.ok, .ldot.ok, .ddot.ok, .marker.ok, .dot.st-found, .dot.st-scanned, .dot.st-done { background: var(--ok); }
.hdot.partial, .hdot.warn, .dot.warn, .ldot.warn, .ddot.warn, .marker.warn, .marker.partial, .dot.st-tag_only { background: var(--warn); }
.hdot.crit, .hdot.problem, .dot.crit, .ldot.crit, .ddot.crit, .marker.crit, .marker.problem, .dot.st-not_found, .dot.st-error { background: var(--crit); }
.hdot.nofill, .dot.nofill, .ddot.nofill, .marker.nofill, .dot.st-no_fill, .dot.st-no_ads { background: var(--nofill); }
.hdot.blocked, .dot.blocked, .ddot.blocked, .marker.blocked, .dot.st-blocked { background: var(--blocked); }
.hdot.na, .hdot.unknown, .dot.na, .ldot.na, .ldot.off, .ddot.na, .marker.na, .marker.unknown, .dot.st-queued, .dot.st-cancelled { background: var(--na); }
.hdot.info, .dot.info, .ddot.info, .marker.info, .marker.accent, .dot.accent, .ldot.accent, .dot.st-running { background: var(--accent); }
.dot.st-none { background: var(--border-strong); }
.dot.kind-ours_client { background: var(--accent); } .dot.kind-competitor { background: var(--na-fg); } .dot.kind-unknown { background: transparent; border: 1px dashed var(--na); }

/* tag: radius 4 · 11 px · 600 · no hover */
.tag, .fmt, .fchip, .bchip, .role-chip, .ocr-tag, .delta, .kind-badge, .preroll-badge, .fill-chip, .hop-kind, .ro-badge {
  display: inline-flex; align-items: center; gap: 4px; border-radius: var(--r-sm); padding: 1px 6px; font-size: 11px; font-weight: 600; line-height: 16px;
  background: var(--na-bg); color: var(--na-fg); white-space: nowrap; vertical-align: middle; border: 1px solid transparent; text-decoration: none; max-width: 100%;
}
.tag .ic, .bchip .ic { width: 11px; height: 11px; flex: none; }
.tag.ok, .fmt.ok, .fchip.ok, .delta.ok, .tag.found, .tag.ready, .preroll-badge.pr-found_ours { background: var(--ok-bg); color: var(--ok-fg); }
.tag.crit, .tag.miss, .fmt.miss, .fchip.miss, .delta.crit, .tag.error, .preroll-badge.pr-error { background: var(--crit-bg); color: var(--crit-fg); }
.tag.warn, .tag.moved, .tag.stale, .fill-chip { background: var(--warn-bg); color: var(--warn-fg); }
.tag.nofill, .fill-chip.none, .preroll-badge.pr-found_other { background: var(--nofill-bg); color: var(--nofill-fg); }
.tag.blocked, .tag.preroll, .hop-kind.kind-nav { background: var(--blocked-bg); color: var(--blocked-fg); }
.tag.info, .ocr-tag, .hop-kind.kind-start { background: var(--info-bg); color: var(--info-fg); }
.tag.pending, .tag.na, .fmt.pending, .fchip.na, .tag.ocr-na, .preroll-badge.pr-player_not_found { background: var(--na-bg); color: var(--na-fg); border: 1px dashed var(--border-strong); }
.tag.extra, .fmt.extra, .fchip.extra, .ocr-tag.more, .preroll-badge.pr-skipped { background: var(--na-bg); color: var(--muted); }
.tag.expected, .fmt.expected, .tag.ours, .tag.accent, .kind-badge.ours, .role-chip.admin, .tag.lclass.ours { background: var(--accent-soft); color: var(--accent-ink); }
.tag.accent-dashed, .tag.ack { background: var(--accent-soft); color: var(--accent-ink); border: 1px dashed var(--accent); }
.tag.neutral, .bchip.neutral, .tag.muted-tag { background: var(--na-bg); color: var(--text); }
.tag.outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.tag.tnum, .delta, .delta.na { font-variant-numeric: tabular-nums; }
.delta.na, .tag.delta-na { background: transparent; color: var(--muted); font-weight: 500; padding-left: 0; padding-right: 0; }
.tag.dist, .tag.hamming, .tag.mono { font-family: var(--mono); }
.tag.dist.close { background: var(--ok-bg); color: var(--ok-fg); }
.tag.lclass { font-weight: 600; }
.tag.hosting { background: var(--warn-bg); color: var(--warn-fg); }
/* brand tags: solid outline — ours, thin — competitors, dashed — unknown (plus the ring marker icon) */
.tag.brand-ours, .bchip.ours, .tag.brand-ours a { background: var(--accent-soft); color: var(--accent-ink); border: 1.5px solid var(--accent); }
.tag.brand-competitor, .bchip.competitor { background: var(--na-bg); color: var(--na-fg); border: 1px solid var(--border-strong); }
.tag.brand-unknown, .bchip.unknown, .kind-badge.unknown, .bchip.unk { background: var(--surface-alt); color: var(--muted); border: 1px dashed var(--border-strong); }
.bchip.unk { border-color: var(--crit); color: var(--crit-fg); }
.kind-badge.competitor { background: var(--na-bg); color: var(--na-fg); }
.kind-badge.tiny { font-size: 11px; line-height: 16px; }
.tag b, .bchip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.tag .share, .bchip .share { font-weight: 500; opacity: 0.8; font-variant-numeric: tabular-nums; }
.tag .since, .fchip .since { font-weight: 400; opacity: 0.85; }
.tag .ours-dot, .bchip .ours-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
a.tag:hover, a.bchip:hover, a.ocr-tag:hover, a.role-chip:hover { text-decoration: none; filter: brightness(0.96); }
.tags, .fmts, .fchips, .brands, .ocr-tags, .nets { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
/* D2 integration: the auto layout of the list tables squeezes the name column first — give it a floor (a wider one
   from 1400 px, where the reference layout lives; the expected-formats column then also stays one line) */
@media (min-width: 640px) and (max-width: 1399px) { .tbl th, .tbl td { padding-left: 10px; padding-right: 10px; } }
@media (min-width: 640px) { .tbl.schedules td:nth-child(2) { min-width: 140px; } .tbl.reports td:first-child, .tbl.report-schedules td:first-child { min-width: 200px; } .tbl.market-sites td:first-child { min-width: 150px; } }
@media (min-width: 1400px) { .tbl.schedules td:nth-child(2), .tbl.reports td:first-child, .tbl.report-schedules td:first-child { min-width: 240px; } .tbl.market-sites td:first-child { min-width: 200px; } .tbl.schedules td:nth-child(5) { white-space: nowrap; } .tbl td > .fmts { flex-wrap: nowrap; } .site-cell { max-width: 320px; } .site-cell .meta.ell { max-width: 280px; } }
.fchips { max-width: 190px; } .fmts { gap: 3px; }
.tbl td.formats-cell { max-width: 210px; }
.role-chip { display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; line-height: 16px; }
.role-chip.editor { background: var(--ok-bg); color: var(--ok-fg); }
.role-chip.sysadmin { background: var(--blocked-bg); color: var(--blocked-fg); }
.role-chip.off { background: var(--crit-bg); color: var(--crit-fg); }
.preroll-badge .pr-adv { font-weight: 500; }
h2 .preroll-badge { margin-left: 6px; }
.tbl td .sub .preroll-badge { vertical-align: baseline; }
.hop-kind { font-weight: 600; padding: 1px 6px; }
.hop-kind.kind-http { background: var(--warn-bg); color: var(--warn-fg); } .hop-kind.kind-final { background: var(--ok-bg); color: var(--ok-fg); }
.ro-badge { flex: none; border-color: var(--border); gap: 5px; }
.fill-sub { background: none; padding: 0; font-weight: 500; font-size: 11px; color: inherit; border: 0; }
.fill-sub.none { color: var(--nofill-fg); }
.fill-headline { font-weight: 600; margin: 0 0 8px; }
.fill-headline.warn-text { color: var(--nofill-fg); }
.antibot-vendor { color: var(--blocked-fg); font-weight: 600; }
.antibot-ok { color: var(--ok-fg); font-weight: 600; }
.landing-ok { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.moved-line { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; word-break: normal; }
/* device mark: icon + «моб / деск» */
.dev-ico { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; line-height: 1; vertical-align: middle; cursor: default; color: var(--muted); white-space: nowrap; }
.dev-ico .ic { width: 14px; height: 14px; }
.dev-ico.txt { color: inherit; }
.dev-src { white-space: nowrap; }
.tbl td .sub.dev-src { word-break: normal; }
.ip-type { font-weight: 600; white-space: nowrap; }
.ip-type.residential { color: var(--ok-fg); } .ip-type.mobile { color: var(--accent-ink); } .ip-type.hosting { color: var(--warn-fg); cursor: help; } .ip-type.unknown { color: var(--muted); }
.tbl td.ip-type-cell { max-width: 220px; }

/* chip: pill radius · button · 28 px (44 on touch) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); font: inherit; font-size: 12px; cursor: pointer; color: var(--text); min-height: 28px; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast); }
.chip:hover { background: var(--surface-alt); text-decoration: none; }
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.chip.off, .chip:disabled { opacity: 0.5; cursor: not-allowed; }
.chip .n, .chip b { font-variant-numeric: tabular-nums; font-weight: 600; }
.chip .ic { width: 14px; height: 14px; }
.chip .dot, .chip .sw { width: 8px; height: 8px; }
.chip .sw.ok { background: var(--ok); } .chip .sw.warn { background: var(--warn); } .chip .sw.crit { background: var(--crit); } .chip .sw.na { background: var(--na); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 0 4px var(--accent-soft); }
/* the site chips of a «Требует действия» card: a filter of the table (device mark + host); «+N ещё» is dashed */
.chip.site-chip { padding: 3px 9px; }
.chip.site-chip .ic { color: var(--muted); }
.chip.site-chip.more { border-style: dashed; color: var(--muted); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; line-height: 18px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast); }
.btn:hover { background: var(--surface-alt); text-decoration: none; }
.btn .ic { width: 16px; height: 16px; color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.btn.primary .ic { color: var(--accent-fg); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--crit-fg); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.btn.danger .ic { color: var(--crit-fg); }
.btn.danger:hover { background: var(--crit-bg); }
.btn.sm { padding: 3px 9px; font-size: 12px; line-height: 16px; min-height: 24px; gap: 5px; }
.btn.sm .ic { width: 14px; height: 14px; }
.btn.icon { padding-left: 6px; padding-right: 6px; min-width: 28px; justify-content: center; }
.btn.icon.sm { min-width: 26px; width: 26px; height: 26px; padding: 0; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--accent-ink); }
.btn.ghost .ic { color: currentColor; }
.btn.soft { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.soft .ic { color: currentColor; }
.btn:disabled, .btn.busy, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; background: var(--surface-alt); color: var(--faint); border-color: var(--border); }
.btn.primary:disabled, .btn.primary.busy { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.busy { cursor: progress; }
.btn.busy::after { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; flex: none; }
.btn .caret { color: currentColor; opacity: 0.8; }
@media (pointer: coarse) { .btn { min-height: 44px; } .btn.sm { min-height: 40px; padding: 6px 10px; } .btn.icon.sm { width: auto; height: auto; min-width: 40px; } }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--muted); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; vertical-align: middle; }
.icon-btn .ic { width: 14px; height: 14px; }
.icon-btn:hover { background: var(--na-bg); color: var(--text); border-color: var(--border); }
.link-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: var(--accent-ink); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-btn .ic { width: 14px; height: 14px; }
.copy { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); font-size: 11px; padding: 1px 7px; cursor: pointer; color: var(--muted); }
.copy:hover { color: var(--text); }
.copy .ic { width: 12px; height: 12px; }

/* dropdown (details-based) */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; user-select: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown .menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 190px; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-dropdown); z-index: 60; padding: 4px; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; color: var(--text); cursor: pointer; text-decoration: none; }
.menu-item .ic { width: 14px; height: 14px; color: var(--muted); }
.menu-item:hover { background: var(--surface-alt); text-decoration: none; }
.menu-item.danger { color: var(--crit-fg); }
.menu-item.danger .ic { color: var(--crit-fg); }
.menu-item:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; box-shadow: 0 0 0 3px var(--accent-soft); }
.menu-empty { padding: 6px 10px; color: var(--muted); }
.dropdown.sub { display: block; position: static; }
.dropdown.sub > summary.menu-item { display: flex; align-items: center; gap: 4px; }
.dropdown.sub > summary .caret { margin-left: auto; color: var(--muted); font-size: 11px; transition: transform var(--t-fast); }
.dropdown.sub[open] > summary { background: var(--surface-alt); }
.dropdown.sub[open] > summary .caret { transform: rotate(90deg); }
.dropdown.sub > .menu { position: static; min-width: 0; max-height: none; margin: 2px 0 4px 12px; padding: 2px 0 2px 6px; border: 0; border-left: 2px solid var(--border); border-radius: 0; box-shadow: none; }
.device-menu .menu-item { white-space: nowrap; }
.dropdown.fixed > .menu { position: fixed; left: 0; top: 0; right: auto; visibility: hidden; }

/* split button: main action + caret device menu */
.split { display: inline-flex; align-items: stretch; vertical-align: middle; }
.split > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split > .dropdown { display: inline-flex; }
.split > .dropdown > summary.btn { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; padding-left: 6px; padding-right: 6px; height: 100%; color: var(--muted); }
.split > .dropdown > summary.btn.primary { border-left: 1px solid color-mix(in srgb, var(--accent-fg) 35%, transparent); color: var(--accent-fg); }
.split > .dropdown[open] > summary.btn { background: var(--na-bg); }
.split > .dropdown[open] > summary.btn.primary { background: var(--accent-hover); }
.split > .dropdown > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 0 3px var(--accent-soft); border-radius: var(--r-md); }
.tbl td.actions .split + .btn, .tbl td.actions .btn + .split, .tbl td.actions .split + .split, .tbl td.actions .split + .dropdown { margin-left: 4px; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.form-grid .span2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span2 { grid-column: auto; } }
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field > label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.field .hint, .field-hint { font-size: 12px; color: var(--muted); }
.field .field-error, .field-error { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--crit-fg); }
.field.invalid input, .field.invalid select, .field.invalid textarea, input.invalid { border-color: var(--crit); }
.field.check { justify-content: flex-end; padding-bottom: 4px; }
.check-label, .field > label.check-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 400; color: var(--text); text-transform: none; letter-spacing: 0; }
input[type="text"], input[type="number"], input[type="password"], input[type="url"], input[type="search"], input[type="email"], input[type="date"], select, textarea {
  font: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); width: 100%; min-width: 0; min-height: 30px;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[disabled], select[disabled], textarea[disabled] { background: var(--surface-alt); color: var(--muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
textarea { min-height: 90px; resize: vertical; }
textarea.mono, input.mono { font-family: var(--mono); font-size: 12px; }
select[multiple] { min-height: 180px; font-size: 12px; padding: 4px; }
select[multiple] option { padding: 2px 6px; }
select.auto { width: auto; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.switch { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 10px; background: var(--border-strong); position: relative; cursor: pointer; transition: background var(--t-fast); vertical-align: middle; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left var(--t-fast); }
.switch:checked { background: var(--ok); }
.switch:checked::after { left: 16px; }
.switch:disabled { opacity: 0.5; cursor: progress; }
.switch:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 10px; }
details.collapsible > summary { cursor: pointer; font-weight: 600; user-select: none; }
details.collapsible[open] > summary { margin-bottom: 10px; }
.search-box { display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); min-height: 30px; color: var(--faint); }
.search-box input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; font: inherit; color: var(--text); padding: 4px 0; min-height: 0; }
.search-box input:focus { outline: none; box-shadow: none; }
.search-box:focus-within { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.search-box .kbd, .kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 4px; color: var(--faint); line-height: 16px; }

/* settings page */
.settings-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.setting-row { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(140px, 220px); gap: 4px 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .label { font-weight: 600; color: var(--text); font-size: 13px; }
.setting-row .key { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: 6px; font-weight: 400; }
.setting-row .hint { grid-column: 1; }
.setting-row .control { grid-row: 1 / span 2; grid-column: 2; display: flex; justify-content: flex-end; }
@media (max-width: 560px) { .setting-row { grid-template-columns: 1fr; } .setting-row .control { grid-row: auto; grid-column: 1; justify-content: flex-start; } }
.setting-row.wide { grid-template-columns: 1fr; }
.setting-row.wide .control { grid-row: auto; grid-column: 1; justify-content: stretch; }

/* ======================================================================
   D2 §05: one stat tile — .stat (slots .lbl · .marker/.dot · .val · .of · .sub · .spark / .meter; states sel ·
   warned · clickable · disabled). Legacy: .kpi · .kpi.cov · .dyn-stat · .cmp-stat.
   ====================================================================== */
.stat-grid, .kpis, .stats-row, .cmp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.stats-row, .cmp-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 4px; }
.cmp-stats { margin: 10px 0; }
@media (max-width: 1023px) { .stat-grid, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stat-grid, .kpis, .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.stat, .kpi, .dyn-stat, .cmp-stat {
  display: block; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 13px 15px; margin: 0; box-shadow: var(--shadow-card); min-width: 0; position: relative; text-decoration: none; width: 100%;
}
button.stat { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }  /* a <button> centres its content vertically — keep the slots at the top like the other tiles */
.stat.compact, .dyn-stat, .cmp-stat, .stats-row .stat { padding: 10px 12px; border-radius: 8px; box-shadow: none; background: var(--surface-alt); }
.stat.clickable, .kpi, .stat[data-action], a.stat, button.stat { cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.stat.clickable:hover, .kpi:hover, .stat[data-action]:hover, a.stat:hover, button.stat:hover { border-color: var(--border-strong); text-decoration: none; box-shadow: var(--shadow-dropdown); }
.stat.sel, .kpi.sel { outline: 2px solid var(--accent); outline-offset: -1px; }
.stat.warned, .kpi.warned { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.stat.disabled, .kpi.disabled { opacity: 0.55; cursor: default; }
.stat .lbl, .kpi .lbl, .dyn-stat .lbl, .cmp-stat .lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-height: 16px; text-transform: none; letter-spacing: 0; }
.stat .lbl .ic, .kpi .lbl .ic { width: 14px; height: 14px; }
.stat .lbl .hdot, .kpi .lbl .hdot, .stat .lbl .marker, .stat .lbl .dot { width: 10px; height: 10px; font-size: 0; }
.stat .val, .kpi .val, .dyn-stat .val, .cmp-stat .vals { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin-top: 5px; font-size: 24px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat.compact .val, .dyn-stat .val, .stats-row .stat .val { font-size: 20px; margin-top: 3px; }
.cmp-stat .vals { font-size: 16px; }
.stat .val .of, .stat .val small, .kpi .val small, .dyn-stat .val small, .stat .val .unit { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.stat.compact .val .of, .stat.compact .val small, .dyn-stat .val small { font-size: 12px; }
.stat .val .spark, .stat .val .aw-spark { margin-left: 4px; }
.stat .sub, .kpi .sub, .cmp-stat .sub { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.35; }
.stat .sub b, .kpi .sub b, .stat .val b { color: var(--text); }
.stat .meter { margin-top: 8px; }
.stat.t-ok .val, .kpi.cov.t-ok .val { color: var(--ok-fg); } .stat.t-warn .val, .kpi.cov.t-warn .val { color: var(--warn-fg); } .stat.t-crit .val { color: var(--crit-fg); } .stat.t-na .val, .kpi.cov.t-na .val { color: var(--muted); }
.kpi-extra { margin: -6px 0 12px; }
.kpi-extra .link-btn { color: var(--muted); }
.kpis.cov-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) { .kpis.cov-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpis.cov-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.kpi.cov { color: inherit; display: block; text-decoration: none; }
.kpi.cov .val small { white-space: nowrap; }
.stat.warned.compact, .stat.warned.stats-row { background: color-mix(in srgb, var(--warn-bg) 55%, var(--surface-alt)); }
.brand-stats { margin-bottom: 12px; }
.brand-head .watch-btn.lg { font-size: 20px; }
.brand-meta { padding-top: 10px; }
.system-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 12px; }
.traffic-stats { margin-bottom: 12px; }
.cmp-stat .vals > * { white-space: nowrap; }
.cmp-stat .vals b { font-size: 16px; }
.cmp-stat .vals .a { color: var(--muted); }
.cmp-stat .vals .arrow { color: var(--faint); }
.dyn-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.dyn-grid .dyn-side { display: grid; gap: 8px; align-content: start; }
@media (max-width: 900px) { .dyn-grid { grid-template-columns: minmax(0, 1fr); } .dyn-grid .dyn-side { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

/* a plain proportional meter (traffic share, disk usage) */
.meter { display: block; height: 8px; border-radius: 4px; background: var(--na-bg); overflow: hidden; min-width: 60px; margin: 3px 0; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.meter.warn > span { background: var(--warn); }
.meter.crit > span { background: var(--crit); }
.traffic-tbl td.share-cell { min-width: 110px; }
.traffic-tbl td.share-cell .meter { display: inline-block; width: 70px; vertical-align: middle; margin-right: 6px; }

/* ======================================================================
   D2 §07: one inline message — .message.info/.warn/.err/.partial (icon + body + actions). Legacy: .epom-box.err/.ok ·
   .err-box · .banner · .auth-error · .card.error-card. The toast stays a separate component (below).
   ====================================================================== */
.message, .epom-box, .err-box, .banner, .auth-error, .card.error-card {
  display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); font-size: 13px; word-break: break-word; text-wrap: pretty; box-shadow: none;
}
.message > .ic, .banner > .ic, .banner .banner-ic { flex: none; margin-top: 1px; width: 16px; height: 16px; font-size: 16px; line-height: 1; }
.message-body, .message > div, .banner > div { flex: 1 1 200px; min-width: 0; }
.message-actions, .message .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.message-actions .btn, .message .actions .btn { background: var(--surface); }
.message.info, .banner.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info-fg); }
.message.warn, .banner.warn, .epom-box.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn-fg); }
.message.err, .message.error, .banner.err, .epom-box.err, .err-box, .auth-error, .card.error-card { background: var(--crit-bg); border-color: color-mix(in srgb, var(--crit) 35%, transparent); color: var(--crit-fg); }
.message.ok, .message.success, .epom-box.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok-fg); }
.message.partial { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn-fg); }
.message.neutral { background: var(--surface-alt); border-color: var(--border); color: var(--text); }
.message a, .banner a { color: inherit; text-decoration: underline; }
.message a.btn, .banner a.btn { text-decoration: none; }
.message a > .ic:first-child { margin-right: 4px; vertical-align: -2px; }
.message-actions .btn.primary, .message .actions .btn.primary { background: var(--accent); color: var(--accent-fg); }
.message .small, .banner .small { color: inherit; opacity: 0.9; margin-top: 2px; }
.message.err .btn, .card.error-card .btn { color: var(--crit-fg); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.message code, .epom-box code { background: rgba(0, 0, 0, 0.06); color: inherit; font-size: 11px; }
.epom-box { margin-top: 8px; font-size: 12px; display: block; }
.card.error-card { display: block; margin-bottom: 12px; padding: 12px 14px; }
.card.error-card .muted { color: inherit; opacity: 0.85; }
.auth-error { font-size: 13px; display: block; padding: 8px 10px; }
.banner { flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; }
.banner > div { flex: 1 1 260px; }

/* ======================================================================
   D2 §3: tabs — .tabs.level-1 (underlined section tabs), .tabs.level-2 (a chip row); legacy .subtabs / .subtabs.sub.
   ====================================================================== */
/* R8.8: ряд вкладок раздела живёт вне `#app` (страницы перерисовывают его целиком), поэтому у
   него свой контейнер той же ширины. Пустой он скрыт (`hidden`) и места не занимает; когда он
   есть, верхний отступ страницы ниже — иначе между вкладками и заголовком зиял бы двойной. */
.section-tabs { padding-block: 14px 0; }
.section-tabs .tabs { margin-bottom: 0; }
.section-tabs:not([hidden]) + main#app { padding-top: 10px; }
/* R8.8: шестерёнка настроек в шапке — такая же кнопка, как переключатель темы, но ссылка; на
   своих страницах она подсвечена, иначе в настройках непонятно, где ты. */
#settings-btn.active { color: var(--accent-ink); background: var(--surface-alt); }
.tabs, .subtabs { display: flex; gap: 2px; margin: -4px 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar, .subtabs::-webkit-scrollbar { display: none; }
.tab, .subtab { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; white-space: nowrap; text-decoration: none; background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; cursor: pointer; }
.tab:hover, .subtab:hover { color: var(--text); text-decoration: none; background: var(--surface-alt); border-radius: var(--r-md) var(--r-md) 0 0; }
.tab.active, .subtab.active { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }
.tab b, .subtab b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tab .ic, .subtab .ic { width: 14px; height: 14px; }
.tabs.level-2, .subtabs.sub { margin-top: -6px; border-bottom: 0; gap: 6px; }
.tabs.level-2 .tab, .subtabs.sub .subtab { padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); font-size: 12px; margin-bottom: 0; min-height: 28px; background: var(--surface); }
.tabs.level-2 .tab:hover, .subtabs.sub .subtab:hover { background: var(--surface-alt); }
.tabs.level-2 .tab.active, .subtabs.sub .subtab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; z-index: 5; }

/* ---------- progress ---------- */
.progress { position: relative; height: 18px; background: var(--na-bg); border-radius: 9px; overflow: hidden; min-width: 140px; flex: 1 1 140px; max-width: 420px; }
.progress .bar { height: 100%; background: var(--accent); transition: width 0.4s ease; }
.progress.done .bar { background: var(--ok); }
.progress.cancelled .bar { background: var(--na); }
/* the label sits on a translucent surface pill: readable over both the track and the (accent / ok) bar in either theme */
.progress-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 82%, transparent); font-size: 11px; line-height: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress.sm { height: 14px; min-width: 100px; }
.progress.sm .progress-label { font-size: 10px; line-height: 12px; padding: 0 5px; }
.run-card { border-left: 4px solid var(--accent); }
.run-card.done { border-left-color: var(--ok); }
.run-card.cancelled { border-left-color: var(--na); }
.counters { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.counters b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- thumbnails ---------- */
.thumbs { display: inline-flex; gap: 4px; }
.thumb { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 30px; border: 1px solid var(--thumb-line); border-radius: var(--r-sm); overflow: hidden; background: var(--thumb); background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--surface) 45%, transparent) 4px 8px); flex: none; color: var(--faint); font-size: 11px; font-weight: 600; text-decoration: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
img.broken { visibility: hidden; }  /* the file is gone: the hatched box / placeholder background stays (pages.js boot) */
.thumb.empty { border-style: dashed; background-image: none; background: var(--surface-alt); }
a.thumb:hover { outline: 2px solid var(--accent); text-decoration: none; }
.thumbs.md .thumb { width: 84px; height: 60px; }
.thumbs.lg .thumb { width: 56px; height: 40px; }
.thumb.contain img, .tile-img.contain img { object-fit: contain; object-position: center; background: #fff; }

/* ---------- check cards (run detail / history) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.check-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r-lg); padding: 10px 12px; color: inherit; box-shadow: var(--shadow-card); min-width: 0; }
.check-card:hover { text-decoration: none; box-shadow: var(--shadow-dropdown); }
.check-card.st-found, .check-card.st-scanned { border-left-color: var(--ok); }
.check-card.st-tag_only { border-left-color: var(--warn); }
.check-card.st-no_fill, .check-card.st-no_ads { border-left-color: var(--nofill); }
.check-card.st-not_found, .check-card.st-error { border-left-color: var(--crit); }
.check-card.st-blocked { border-left-color: var(--blocked); }
.check-card.st-running { border-left-color: var(--accent); }
.check-card.st-queued { border-left-color: var(--border-strong); }
.check-card.st-cancelled { border-left-color: var(--na); opacity: 0.75; }
.check-card .site { min-width: 0; word-break: break-all; }
.check-card .meta { font-size: 12px; color: var(--muted); }
.check-card .meta div { word-break: break-word; }
.check-card .meta .diag { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-bottom: 2px; }
.table-wrap.flat { box-shadow: none; margin-bottom: 0; }
table.tbl.compact { min-width: 0; }
table.tbl.compact th, table.tbl.compact td { padding: 5px 8px; font-size: 12px; }
table.tbl.compact th { position: static; }
.tbl tr.nofill td:not(.fill-col) { color: var(--muted); }
.tbl td.fill-col { text-align: center; font-weight: 700; }
code.pkey { font-size: 11px; }
.tbl td.creative-col { max-width: 340px; word-break: break-all; }
.check-group { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 0; }
.check-label.inline { font-size: 13px; }
.check-label.inline input[type="checkbox"] { margin: 0; }

/* ======================================================================
   Список площадок «Наших» (SPEC D3 §2): строка идущего запуска, таблица площадок, точки устройств,
   легенда точек; плюс общий блок аннотаций (.page-hint / .help).
   ====================================================================== */
/* D3 §6: аннотация под заголовком страницы и значок «?» у заголовка секции */
.page-hint { display: flex; gap: 7px; align-items: flex-start; margin: -4px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--muted); max-width: 900px; }
.page-hint .ic { flex: none; margin-top: 2px; }
.help { display: inline-flex; align-items: center; color: var(--faint); cursor: help; }
.help:hover, .help:focus-visible { color: var(--accent-ink); }
.help .ic { width: 14px; height: 14px; }

/* D3 §2: одна строка про идущий запуск вместо карточки на пол-экрана */
.run-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; }
.run-line .progress { flex: 1 1 220px; max-width: 360px; }

/* D3 §2: таблица площадок — пять колонок, без цветных фонов */
table.tbl.sites-list { font-size: 13px; }
.tbl.sites-list th, .tbl.sites-list td { vertical-align: middle; padding: 9px 12px; }
.tbl.sites-list td.site-td { min-width: 220px; }
.tbl.sites-list .site-name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.tbl.sites-list .site-name:hover { color: var(--accent-ink); }
.tbl.sites-list td.when { white-space: nowrap; color: var(--muted); }
.tbl.sites-list td.dev { width: 110px; }
.tbl.sites-list td.brands-td { max-width: 340px; }
.tbl.sites-list .brand-cell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tbl.sites-list td.actions { width: 1%; white-space: nowrap; text-align: right; }
.tbl.sites-list td.actions .btn.go { color: var(--muted); }
.tbl.sites-list tr.disabled td { opacity: 0.55; }
.sort-field { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sort-field select { width: auto; }
.tbl.sites-list .when-cell .sub { font-size: 11px; color: var(--faint); margin-top: 1px; }
.tbl.sites-list .dev-dots { gap: 14px; }
.tbl.sites-list .dev-dots .dot { width: 9px; height: 9px; }
.dots-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
.dots-legend .dl { display: inline-flex; align-items: center; gap: 5px; }
.dots-legend .dot { width: 8px; height: 8px; }
.dev-dots .dot.none, .dots-legend .dot.none { background: transparent; border: 1px dashed var(--border-strong); }

/* D3 §3: «Последние проверки» в карточке площадки — блок на устройство */
.devices-card .dev-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .devices-card .dev-blocks { grid-template-columns: 1fr; } }
.dev-block { border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 12px; background: var(--surface-alt); display: flex; flex-direction: column; gap: 8px; }
.dev-block.empty { color: var(--muted); }
.dev-block-h { display: flex; align-items: center; gap: 7px; }
.dev-block-h b { font-weight: 600; }
.dev-line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.dev-line.sub { font-size: 12px; color: var(--muted); }
.dev-brands { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dev-block .thumbs { margin: 0; }

/* D3 §5: история запусков — пять колонок, один индикатор результата */
table.tbl.runs-list { font-size: 13px; }
.tbl.runs-list th, .tbl.runs-list td { vertical-align: middle; padding: 9px 12px; }
.tbl.runs-list td.id { white-space: nowrap; font-weight: 600; }
.tbl.runs-list td.when { white-space: nowrap; }
.tbl.runs-list td.stack-cell { min-width: 220px; }
.tbl.runs-list .sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.tbl.runs-list td.actions { width: 1%; white-space: nowrap; text-align: right; }
@media (max-width: 639px) {
  table.tbl.sites-list, table.tbl.runs-list { min-width: 0; }
  .tbl.sites-list td.brands-td, .tbl.runs-list td.stack-cell { max-width: none; }
  /* карточка строки: действия в один ряд (иначе `width: 1%` колонки ставит их друг под другом) */
  .tbl.sites-list td.actions, .tbl.runs-list td.actions { width: auto; justify-content: flex-start; align-items: center; }
  .tbl.sites-list td.dev, .tbl.sites-list td.when { width: auto; }
}
/* R8.1: строка состояния над таблицей площадок — счётчики слева, топ причин справа */
.card.sites-state { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 9px 14px; }
.card.sites-state .counts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card.sites-state .reasons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 639px) { .card.sites-state .reasons { margin-left: 0; } }

/* R8.1: карточки «Требует действия» на первом экране «Площадок» (вернулись после D3) */
.actions-card { padding: 0; }
.actions-card .card-h { margin: 0; }
.act { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); align-items: start; }
.act:last-child { border-bottom: 0; }
.act.more { grid-template-columns: 1fr; padding: 9px 14px; }
.act .sev { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; background: var(--na-bg); color: var(--na-fg); flex: none; }
.act .sev .ic { width: 14px; height: 14px; }
.act .sev.crit { background: var(--crit-bg); color: var(--crit-fg); } .act .sev.nofill { background: var(--nofill-bg); color: var(--nofill-fg); } .act .sev.blocked { background: var(--blocked-bg); color: var(--blocked-fg); }
.act .sev.warn { background: var(--warn-bg); color: var(--warn-fg); } .act .sev.info { background: var(--info-bg); color: var(--info-fg); } .act .sev.ok { background: var(--ok-bg); color: var(--ok-fg); }
.act .t { font-weight: 600; }
.act .t .muted { font-weight: 400; }
.act .sites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.act .a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 639px) { .act { grid-template-columns: auto 1fr; } .act .a { grid-column: 1 / -1; justify-content: flex-start; } }

.table-card { padding: 0; }
.table-card .card-h { margin: 0; }
.table-card .table-wrap { border: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); margin: 0; box-shadow: none; }
.filters { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.filters .search { flex: 1; min-width: 160px; max-width: 280px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 0 9px; min-height: 30px; background: var(--surface); color: var(--faint); }
.filters .search:focus-within { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.filters .search .ic { width: 16px; height: 16px; }
.filters .search input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; font: inherit; color: var(--text); padding: 4px 0; min-height: 0; }
.filters .search input:focus { outline: none; box-shadow: none; }
.filters .sort { margin-left: auto; font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.filters select { font: inherit; font-size: 12px; padding: 3px 6px; min-height: 28px; width: auto; }
/* the legacy share bar of a table card (the dashboard now uses .tbl-foot); scoped so `.tag .share` (a brand share) is untouched */
.table-card > .share { font-size: 12px; color: var(--muted); padding: 7px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.table-card > .share code { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }

/* ======================================================================
   Check card (REF_SCREENS): verdict block, screenshots, the chain as a table of nodes, technical details
   ====================================================================== */
.summary-card { padding: 0; }
.summary { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; padding: 14px 16px; }
@media (max-width: 760px) { .summary { grid-template-columns: 1fr; } }
.summary-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.summary-head .when { margin-left: auto; font-size: 11px; color: var(--muted); }
.summary .rows { display: grid; grid-template-columns: 104px 1fr; gap: 6px 12px; margin-top: 10px; font-size: 14px; align-items: start; }
.summary .rows .k { color: var(--muted); font-weight: 600; white-space: nowrap; font-size: 12px; padding-top: 2px; }
.summary .btns { display: flex; flex-direction: column; gap: 7px; min-width: 220px; }
.summary .btns .btn { justify-content: center; }
@media (max-width: 760px) { .summary .btns { flex-direction: row; flex-wrap: wrap; min-width: 0; } .summary .rows { grid-template-columns: 1fr; gap: 2px 0; } .summary .rows .k { margin-top: 6px; } }
.why-list { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 13px; }
.why-list dt { color: var(--muted); }
.why-list dd { margin: 0; min-width: 0; word-break: break-word; }

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.shots.u5 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.shots-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (max-width: 960px) { .shots, .shots.u5 { grid-template-columns: 1fr; } }
.shot { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); min-width: 0; }
.shot header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 500; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface); }
.shot header b { color: var(--text); font-weight: 600; font-size: 14px; }
.shot header .mono { font-size: 11px; }
.shot header a.small { white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.shot-img { height: 460px; overflow: auto; background: var(--thumb); background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--surface) 45%, transparent) 5px 10px); cursor: zoom-in; display: flex; justify-content: center; align-items: flex-start; }
.shot-img img { max-width: 100%; height: auto; display: block; }
.shot-img.big { height: auto; max-height: 70vh; overflow: hidden; }
.shot-img.fit { height: auto; min-height: 72px; max-height: 460px; }  /* a creative crop: the box hugs the image */
.shot-img.big img { width: 100%; max-height: 70vh; object-fit: contain; object-position: top center; }
.shot-empty { height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); padding: 0 12px; text-align: center; background: var(--surface-alt); border-top: 1px dashed var(--thumb-line); }
.shot-empty .ic { width: 22px; height: 22px; color: var(--faint); }
.shot .cap { padding: 7px 12px; font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.shot .cap .mono { font-size: 11px; }

.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 14px; margin: 0; }
.kv dt { color: var(--muted); font-size: 12px; white-space: nowrap; padding-top: 1px; }
.kv dd { margin: 0; min-width: 0; word-break: break-all; }
.kv dd .icon-btn { margin-left: 4px; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 6px; } }

/* chain: summary path + table of nodes */
.path { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; margin-bottom: 8px; }
.path .node { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 3px 8px; background: var(--surface); }
.path .node.ours { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.path .node.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok-fg); }
.path .node.blocked { border-style: dashed; }
.path .arrow { color: var(--faint); }
.chain-tbl td { vertical-align: top; }
.chain-tbl td.ell { max-width: 170px; }
.chain-tbl td.node-k { color: var(--muted); }
.chain-tbl td.node-k.ours { color: var(--accent-ink); font-weight: 600; }
.chain-tbl td.host { font-family: var(--mono); font-size: 11px; }
.chain-tbl td.code.bad { color: var(--crit-fg); font-weight: 600; }
.chain-note { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; font-size: 11px; }
.chain-note .warn-text { color: var(--warn-fg); }
.url-cell { min-width: 160px; max-width: 360px; }
.url-cell .url { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; color: inherit; text-decoration: none; text-align: left; }
.url-cell .url .host { font-weight: 600; }
.url-cell .url .path { color: var(--muted); font-family: var(--mono); font-size: 11px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; margin: 0; }
.url-cell .full { display: none; font-size: 12px; }
.url-cell.open .short { display: none; }
.url-cell.open .full { display: block; }
ol.chain { margin: 0; padding-left: 26px; }
ol.chain li { padding: 5px 0; border-bottom: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
ol.chain li:last-child { border-bottom: 0; }
.hop-status { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.hop-ts { font-size: 11px; color: var(--muted); white-space: nowrap; }
.hop-url { flex: 1 1 240px; word-break: break-all; font-family: var(--mono); font-size: 12px; min-width: 0; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 3px 0; border-bottom: 1px dashed var(--border); word-break: break-all; }
ul.plain li:last-child { border-bottom: 0; }
pre.log, .log-box { margin: 0; padding: 9px 11px; background: var(--log-bg); color: var(--log-fg); border-radius: var(--r-md); max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 11px; line-height: 1.6; }
pre.html { margin: 0; padding: 10px 12px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
details.block > summary { cursor: pointer; font-weight: 600; padding: 4px 0; user-select: none; }
details.block[open] > summary { margin-bottom: 8px; }
details.tech { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.tech-card > details.tech { margin-top: 0; padding-top: 0; border-top: 0; }  /* its own card: no divider above the summary */
details.tech > summary { cursor: pointer; color: var(--text); font-weight: 600; font-size: 13px; padding: 2px 0; list-style: none; display: flex; align-items: center; gap: 6px; user-select: none; }
details.tech > summary::-webkit-details-marker { display: none; }
details.tech > summary::before { content: ""; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--t-fast); flex: none; }
details.tech[open] > summary::before { transform: rotate(90deg); }
details.tech[open] > summary { margin-bottom: 8px; }
details.tech h3 { margin: 10px 0 6px; }
details.tech h3:first-child { margin-top: 0; }

/* ---------- modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 100; }
.modal { position: fixed; z-index: 101; top: 5vh; left: 50%; transform: translateX(-50%); width: min(600px, calc(100vw - 24px)); max-height: 90vh; background: var(--surface); color: var(--text); border-radius: var(--r-lg); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); }
.modal.wide { width: min(900px, calc(100vw - 24px)); }
.modal form { display: flex; flex-direction: column; max-height: 90vh; min-height: 0; }
.modal header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.modal header h3 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 14px; }
.modal header .icon-btn { width: 28px; height: 28px; }
.modal header .icon-btn .ic { width: 16px; height: 16px; }
.modal-body { padding: 14px 16px; overflow: auto; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface-alt); }
body.modal-open { overflow: hidden; }

/* ---------- toasts (REF_DS §07: a surface card with a status edge, the icon, one link-action) ---------- */
.toasts { position: fixed; right: 16px; top: 60px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(440px, calc(100vw - 32px)); }
.toast { display: flex; gap: 9px; align-items: center; padding: 9px 11px; border-radius: var(--r-md); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--accent); box-shadow: var(--shadow-dropdown); font-size: 13px; cursor: pointer; animation: toast-in var(--t) ease-out; word-break: break-word; white-space: pre-line; transition: opacity var(--t-slow); }
.toast > .ic { flex: none; width: 16px; height: 16px; color: var(--accent-ink); }
.toast > .body, .toast > div { flex: 1; min-width: 0; }
.toast .sub { font-size: 11px; color: var(--muted); }
.toast.error { border-left-color: var(--crit); } .toast.error > .ic { color: var(--crit-fg); }
.toast.success { border-left-color: var(--ok); } .toast.success > .ic { color: var(--ok-fg); }
.toast.warn { border-left-color: var(--warn); } .toast.warn > .ic { color: var(--warn-fg); }
.toast a { color: var(--accent-ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.toast a:hover { text-decoration: underline; }
.toast .toast-close { padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex; flex: none; }
.toast .toast-close .ic { width: 14px; height: 14px; }
.toast.hide { opacity: 0; }
@keyframes toast-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(2, 6, 23, 0.88); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow: auto; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; background: #fff; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }
.lightbox figcaption { color: #e2e8f0; font-size: 13px; }
.lightbox-close { position: absolute; top: 12px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lightbox-close .ic { width: 18px; height: 18px; }
.lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }

/* ---------- pagination ---------- */
.pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

/* ---------- responsive tweaks ---------- */
@media (max-width: 640px) {
  .topnav-inner { gap: 8px; padding: 0 12px; }
  .nav-status { display: none; }
  .container { padding-inline: 12px; }
  .page-head .btn { padding: 5px 9px; }
  .modal { top: 2vh; max-height: 96vh; }
  .modal form { max-height: 96vh; }
  .toasts { right: 12px; left: 12px; top: 56px; max-width: none; }
}

/* ======================================================================
   Advertisers / rotation / observations / player / Epom (SPEC v3)
   ====================================================================== */
.net { font-weight: 600; color: var(--text); white-space: nowrap; }
.net.ours { color: var(--accent-ink); }
.nets { display: inline-flex; flex-wrap: wrap; gap: 3px 8px; }
.tbl td.brands-cell { max-width: 260px; }
.tbl td.brands-cell .brands { max-width: 100%; }
.tbl td.brands-cell.wide { max-width: none; min-width: 260px; }
.tbl td .sub .preroll-badge { vertical-align: baseline; }

/* filters (advertisers / rotation) */
.market-filters { gap: 6px 8px; }
.market-filters select.auto, .market-filters input.geo-input { width: auto; max-width: 220px; }
.market-filters input.geo-input { width: 64px; text-align: center; }
.market-filters input[type="search"] { max-width: 240px; }

/* advertiser cards */
.adv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 12px; }
.adv-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r-lg); padding: 10px 12px; color: inherit; box-shadow: var(--shadow-card); min-width: 0; }
.adv-card:hover { text-decoration: none; box-shadow: var(--shadow-dropdown); }
.adv-card.ours { border-left-color: var(--accent); }
.adv-card.competitor { border-left-color: var(--na-fg); }
.adv-card.unknown { border-left-style: dashed; border-left-color: var(--na); }
.adv-card.disabled { opacity: 0.6; }
.adv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adv-head strong { font-size: 14px; word-break: break-word; }
.adv-thumbs { display: flex; gap: 4px; }
.adv-thumbs .thumb { width: 25%; height: 64px; flex: 1 1 0; }
.adv-thumbs .thumb.empty { width: 100%; flex: 1 1 100%; }
.adv-stats { font-size: 12px; color: var(--muted); }
.adv-stats b { color: var(--text); }
.adv-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 11px; }
.adv-foot { margin-top: auto; }

/* observation cards */
.obs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.obs-card { display: flex; gap: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-alt); padding: 8px; min-width: 0; }
.obs-card.ours { border-color: var(--accent); }
.obs-shot { width: 120px; height: 90px; flex: none; border: 1px solid var(--thumb-line); border-radius: 4px; overflow: hidden; background: var(--thumb); cursor: zoom-in; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 11px; }
.obs-shot img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.obs-shot.empty { border-style: dashed; cursor: default; }
.obs-body { flex: 1 1 auto; min-width: 0; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.obs-head { display: flex; align-items: center; gap: 6px; }
.obs-line { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; word-break: break-all; }
.obs-line .lbl { color: var(--muted); font-size: 11px; min-width: 52px; }
.obs-meta { font-size: 11px; color: var(--muted); margin-top: auto; word-break: break-word; }
@media (max-width: 480px) { .obs-card { flex-direction: column; } .obs-shot { width: 100%; height: 140px; } }

/* player / preroll frames */
.frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
@media (max-width: 900px) { .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.frame { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); min-width: 0; }
.frame.main { border-color: var(--accent); }
.frame.missing { display: none; }
.frames.all-missing::after { content: "Кадры плеера не найдены на сервере (файлы preroll_*.png не сохранились)"; grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.frame-img { height: 170px; background: var(--log-bg); cursor: zoom-in; display: flex; align-items: center; justify-content: center; }
.frame-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.frame-cap { padding: 4px 8px; font-size: 11px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--border); }
.player-card .kv dd .bchip { vertical-align: middle; }

/* advertiser detail: gallery */
.gallery-group + .gallery-group { margin-top: 12px; }
.gallery-group h3 { margin-bottom: 6px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.tile { margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-alt); min-width: 0; }
.tile.ours { border-color: var(--accent); }
.tile-img { height: 130px; background: var(--thumb); cursor: zoom-in; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; background: #fff; }
.tile figcaption { padding: 5px 8px; font-size: 11px; line-height: 1.4; word-break: break-word; }
.tile figcaption .sub { color: var(--muted); }
.tbl td .thumb { width: 44px; height: 32px; vertical-align: middle; cursor: zoom-in; }
.tbl tr.ours-row td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* rotation */
.tbl.rotation tr.expanded td { background: var(--accent-soft); }
.tbl tr.detail-row > td { background: var(--surface-alt); padding: 8px 12px 10px 24px; }
table.tbl.inner { min-width: 0; width: 100%; }
table.tbl.inner th { position: static; }
.share-bar { position: relative; display: inline-block; min-width: 56px; padding: 0 6px; font-variant-numeric: tabular-nums; z-index: 0; }
.share-bar i { position: absolute; left: 0; top: 2px; bottom: 2px; width: var(--w, 0%); background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 3px; z-index: -1; }
table.tbl.matrix { min-width: 0; width: auto; }
.tbl.matrix th.site-col, .tbl.matrix td.site-col { position: sticky; left: 0; background: var(--surface); z-index: 2; min-width: 160px; box-shadow: inset -1px 0 0 var(--border); }
.tbl.matrix thead th.site-col { z-index: 3; background: var(--surface-alt); }
.tbl.matrix th.adv-col { height: 110px; vertical-align: bottom; padding: 4px 2px; text-align: center; min-width: 30px; }
.tbl.matrix th .rot { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); text-transform: none; letter-spacing: 0; font-size: 11px; max-height: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 0; }
.tbl.matrix th .rot.ours { color: var(--accent-ink); }
.tbl.matrix th .rot.unknown { color: var(--faint); }
.tbl.matrix td.heat { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; min-width: 30px; color: var(--text); }
.tbl.matrix td.heat.zero { background: transparent; }
.tbl.matrix tfoot th { font-size: 11px; background: var(--surface-alt); position: static; }
.tbl.matrix th.num, .tbl.matrix tfoot th:not(.site-col) { text-align: right; font-variant-numeric: tabular-nums; }
.tbl.matrix tbody tr:nth-child(even) td.site-col { background: var(--surface-alt); }

/* settings: Epom tools, password control */
.pw-control { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; width: 100%; }
.pw-control .check-label.tiny { font-size: 11px; color: var(--muted); }
.epom-tools { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.epom-tools select.auto { width: auto; }
.epom-tools .split-gap { flex: 1 1 auto; }
.epom-preview pre.html { max-height: 420px; }

/* ======================================================================
   Events, site card timeline, run diff / stacked bars, schedule form (SPEC R2)
   ====================================================================== */
/* event lines (U1b / U6a / #/events): icon by kind, title, meta line */
.ev-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; font-size: 11px; font-weight: 800; line-height: 1; color: var(--on-solid); flex: none; background: var(--na); text-decoration: none; }
.ev-ic.crit { background: var(--crit); } .ev-ic.warn { background: var(--warn); } .ev-ic.ok { background: var(--ok); } .ev-ic.info { background: var(--accent); }
.ev-ic.blocked { background: var(--blocked); } .ev-ic.nofill { background: var(--nofill); } .ev-ic.na { background: var(--na); }
.ev-ic.mk { width: 12px; height: 12px; border-radius: 3px; }
a.ev-ic:hover { filter: brightness(1.1); text-decoration: none; outline: 2px solid var(--accent-soft); }
.ev-list { display: flex; flex-direction: column; }
.ev { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); align-items: start; }
.ev:last-child { border-bottom: 0; }
.ev.compact { padding: 6px 14px; }
.ev .ev-ic { margin-top: 1px; }
.ev-b { min-width: 0; }
.ev-t { font-weight: 600; word-break: break-word; }
.ev.sev-critical .ev-t { color: var(--crit-fg); }
.ev.sev-warning .ev-t { color: var(--warn-fg); }
.ev-t .tag { margin-left: 4px; vertical-align: middle; }
.ev-k { font-weight: 400; margin-left: 4px; }
.ev-m { font-size: 12px; color: var(--muted); margin-top: 1px; word-break: break-word; }
.ev-m a { color: var(--accent-ink); }
.ev-empty { padding: 12px 14px; font-size: 13px; }
.changes-card { padding: 0; }
.changes-card .card-h { margin: 0; }
.changes-counters { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.changes-counters b { font-weight: 700; }
.ev-day { margin-bottom: 12px; }
.ev-day h3 { margin-bottom: 6px; }
.ev-day .ev-list.card { padding: 0; margin: 0; }
.ev-top { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ev-top .link-btn { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.ev-top .link-btn.active, .ev-top .link-btn:hover { color: var(--accent-ink); }
.ev-top .link-btn b { color: var(--text); }
.events-filters { padding: 10px 14px; }
.events-filters .toolbar select.auto { max-width: 260px; }
.state .it.bad { color: var(--crit-fg); }
.state .it.bad .btn { margin-left: 2px; }

/* stacked status bar (U8) */
.stack-wrap { min-width: 140px; }
.stack { display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: hidden; background: var(--surface-alt); }
.stack.empty .seg { background: var(--na-bg); }
.seg { display: flex; align-items: center; justify-content: center; min-width: 3px; overflow: hidden; background: var(--na); color: var(--on-solid); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
.seg.ok { background: var(--ok); } .seg.warn { background: var(--warn); } .seg.nofill { background: var(--nofill); } .seg.crit { background: var(--crit); } .seg.blocked { background: var(--blocked); } .seg.na { background: var(--na); }
.seg.st-queued, .seg.st-running { background: repeating-linear-gradient(135deg, var(--na) 0 4px, var(--border-strong) 4px 8px); color: var(--text); }
.seg-l { padding: 0 4px; }
.stack-wrap.sm .stack { height: 12px; }
.stack-wrap.sm .seg-l { font-size: 10px; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; font-size: 11px; font-variant-numeric: tabular-nums; }
.sk { font-weight: 600; white-space: nowrap; }
.sk.ok { color: var(--ok-fg); } .sk.warn { color: var(--warn-fg); } .sk.nofill { color: var(--nofill-fg); } .sk.crit { color: var(--crit-fg); } .sk.blocked { color: var(--blocked-fg); } .sk.na { color: var(--muted); }
.tbl td.stack-cell { min-width: 170px; max-width: 260px; }
.tbl td.stack-cell .progress { margin-bottom: 4px; }
.run-stack { margin-top: 8px; max-width: 640px; }
.run-stack .stack { height: 20px; }
table.tbl.runs { min-width: 900px; }

/* run diff sections (U8) */
.section-h { margin: 14px 0 8px; font-size: 16px; }
.diff-card { padding: 0; border-left: 4px solid var(--border-strong); }
.diff-card.sev-crit { border-left-color: var(--crit); } .diff-card.sev-ok { border-left-color: var(--ok); } .diff-card.sev-warn { border-left-color: var(--warn); }
.diff-card.sev-nofill { border-left-color: var(--nofill); } .diff-card.sev-info { border-left-color: var(--accent); } .diff-card.sev-na { border-left-color: var(--na); }
details.diff > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; list-style: none; user-select: none; }
details.diff > summary::-webkit-details-marker { display: none; }
details.diff > summary::before { content: ""; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--t-fast); flex: none; }
details.diff[open] > summary::before { transform: rotate(90deg); }
details.diff > summary .hint { flex-basis: 100%; margin-left: 20px; }
@media (min-width: 900px) { details.diff > summary .hint { flex-basis: auto; margin-left: auto; } }
details.diff[open] > summary { border-bottom: 1px solid var(--border); }
.ddot { width: 10px; height: 10px; border-radius: 50%; background: var(--na); display: inline-block; flex: none; }
.ddot.crit { background: var(--crit); } .ddot.ok { background: var(--ok); } .ddot.warn { background: var(--warn); } .ddot.nofill { background: var(--nofill); } .ddot.info { background: var(--accent); }
.diff-card .table-wrap.flat { border: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.diff-tbl td.site-col { min-width: 160px; }
.diff-tbl td.diff-st { display: flex; align-items: center; gap: 4px; }
.diff-tbl .arrow { color: var(--faint); }
.diff-tbl td.diff-reasons { max-width: 320px; }
.diff-tbl td.diff-reasons .why { margin-top: 1px; max-width: none; }
.diff-tbl td.diff-events { max-width: 260px; }
.diff-tbl td.diff-events .tag { margin: 1px 2px 1px 0; }
.diff-empty { padding: 12px 14px; }
/* site card (U6a) */
.site-head .ext-url { color: var(--muted); font-size: 13px; }
.site-head .ext-url:hover { color: var(--accent-ink); }
.site-head .site-meta { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-head .site-meta .fmts { vertical-align: middle; }
/* «Плеер» в карточке площадки: строка на устройство */
.hdev { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hdev .lab { color: var(--muted); font-size: 11px; }
.checks-card { padding-bottom: 12px; }
.checks-card .card-h .chips { margin-right: 4px; }
.checks-card .empty-state { padding: 20px 12px; }
/* schedule form (U11): segmented control, cron presets, site checklist */
.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.seg-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 13px; cursor: pointer; border-right: 1px solid var(--border); color: var(--text); white-space: nowrap; user-select: none; min-height: 30px; }
.seg-item:last-child { border-right: 0; }
.seg-item input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.seg-item:hover { background: var(--surface-alt); }
.seg-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.seg-item:focus-within { outline: 1px solid var(--accent); outline-offset: -1px; box-shadow: inset 0 0 0 3px var(--accent-soft); }
@media (pointer: coarse) { .seg-item { min-height: 40px; } }
.cron-preview { margin-top: 6px; min-height: 16px; }
.cron-preview b { color: var(--text); }
.checklist { max-height: 260px; overflow: auto; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); padding: 4px; display: flex; flex-direction: column; }
.cl-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 13px; min-height: 26px; }
.cl-item:hover { background: var(--surface-alt); }
.cl-item input { margin: 0; flex: none; }
.cl-item .cl-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-item .cl-sub { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-item.muted .cl-text { color: var(--muted); }
@media (pointer: coarse) { .cl-item { min-height: 40px; } }

/* proxies: the auto-disabled badge wraps inside the clipped «Ошибка» cell (a nowrap tag would overlap the buttons) */
.tbl td.clip > .sub.auto-off { white-space: normal; overflow: hidden; }
.tbl td.clip > .sub.auto-off .tag { display: inline; white-space: normal; line-height: 1.6; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* SPEC R6 B.5: аренда asocks — бейджи «asocks» / «занят прогоном #N» в колонке «Метка» и строка
   освобождённого порта (скрыта по умолчанию, а показанная — приглушена, как выключенная) */
.tbl.proxies td .sub.proxy-source { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; white-space: normal; }
.tbl.proxies tr.released td:not(.actions):not(.toggle) > * { opacity: 0.55; }
.tbl.proxies tr.released td:not(.actions):not(.toggle) { color: var(--muted); }
/* «Запустить гео» → второй пункт гео: аренда у asocks читается как вариант пункта выше (отступ и
   линия слева), иконка прокси акцентом — чтобы платный запуск не нажимался случайно */
.geo-menu > .dropdown.sub.asocks-sub > summary.menu-item { margin-left: 10px; border-left: 2px solid var(--border); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.geo-menu > .dropdown.sub.asocks-sub > summary .ic:first-child { color: var(--accent); }

/* settings: Telegram tools reuse the Epom box styles */
.telegram-tools .hint { flex: 1 1 260px; }

/* ======================================================================
   IA: filters panel, bottom navigation, responsive tables, phones (SPEC R3 U10)
   ====================================================================== */
/* filters: inline on wide screens, a slide-in panel on phones */
.filters-btn { display: none; }
.filters-panel { display: contents; }
.filters-panel .fp-head { display: none; }
.filters-panel .fp-body { display: contents; }
.filters-panel.inline .fp-body { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; flex: 1 1 auto; min-width: 0; }
.filters-panel.inline { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; flex: 1 1 auto; min-width: 0; }
.fp-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 118; }
.ads-toolbar { align-items: center; }
.ads-toolbar input[type="search"] { max-width: 260px; }
.site-filter .link-btn { color: inherit; margin-left: 4px; }

/* bottom navigation (phones only) and the «Ещё» sheet */
.bottom-nav { display: none; }
.more-sheet { position: fixed; inset: 0; z-index: 130; }
.more-backdrop { position: absolute; inset: 0; background: var(--overlay); }
.more-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 14px 14px 0 0; box-shadow: var(--shadow-dropdown); padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px)); max-height: 80vh; overflow: auto; }
.more-h { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; font-size: 14px; }
.more-group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); padding: 10px 10px 4px; }
.more-item { display: block; width: 100%; text-align: left; padding: 11px 12px; min-height: 44px; border: 0; border-radius: var(--r-md); background: none; font: inherit; font-size: 14px; color: var(--text); text-decoration: none; cursor: pointer; }
.more-item:hover, .more-item.active { background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; }
body.more-open, body.fp-open { overflow: hidden; }

/* generic responsive tables → cards (sites / runs / schedules / proxies / domains / inner tables) */
@media (max-width: 639px) {
  table.tbl.m-cards { min-width: 0; display: block; }
  .tbl.m-cards thead { display: none; }
  .tbl.m-cards tbody { display: block; }
  .tbl.m-cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; border-bottom: 1px solid var(--border); padding: 10px 12px; }
  .tbl.m-cards tr:last-child { border-bottom: 0; }
  .tbl.m-cards td { display: block; border: 0; padding: 2px 0; position: static !important; box-shadow: none !important; background: transparent !important; min-width: 0; max-width: none; white-space: normal; }
  .tbl.m-cards td:first-child, .tbl.m-cards td.actions, .tbl.m-cards td.brands-cell, .tbl.m-cards td.site-td, .tbl.m-cards td.site-col, .tbl.m-cards td.stack-cell, .tbl.m-cards td.clip, .tbl.m-cards td.ws-cell, .tbl.m-cards td.spark-cell { grid-column: 1 / -1; }
  .tbl.m-cards td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
  .tbl.m-cards td.hide-m, .tbl.m-cards th.hide-m, .tbl.m-cards .hide-m { display: none; }
  .tbl.m-cards td.empty { grid-column: 1 / -1; }
  .tbl.m-cards td.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; text-align: left; }
  .tbl.m-cards td.actions .btn + .btn, .tbl.m-cards td.actions .split + .btn, .tbl.m-cards td.actions .btn + .split { margin-left: 0; }
  .tbl.m-cards td.num { text-align: left; }
  .tbl.m-cards td.id { color: var(--text); font-weight: 600; }
  .tbl.m-cards td.toggle { display: flex; align-items: center; gap: 8px; }
  .tbl.m-cards td.toggle::before { margin-top: 0; }
  .tbl.m-cards .stack-wrap { min-width: 0; }
  .tbl.m-cards .site-name { font-weight: 600; font-size: 14px; }
  .tbl.dash td.brands-cell { display: none; }
}
/* U10: phones — bottom nav, tap targets ≥ 44 px, slide-in filters */
@media (max-width: 639px) {
  .topnav .nav-links { display: none; }
  .topnav-inner { height: 44px; }
  .container { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -1px 6px rgba(16, 24, 40, 0.08); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .bottom-nav a, .bottom-nav .bn-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 4px; border: 0; background: none; font: inherit; font-size: 11px; color: var(--muted); text-decoration: none; cursor: pointer; }
  .bottom-nav .bn-ic { line-height: 1; display: inline-flex; } .bottom-nav .bn-ic .ic { width: 20px; height: 20px; }
  .bottom-nav a.active, .bottom-nav .bn-more.active { color: var(--accent-ink); }
  .bottom-nav a.active .bn-ic, .bottom-nav .bn-more.active .bn-ic { color: var(--accent); }
  .bottom-nav a:hover { text-decoration: none; }
  .btn, .chip, .tab, .subtab, .menu-item, .cl-item, .seg-item, .site-chip, .link-btn.big { min-height: 44px; }
  .btn.sm { min-height: 44px; padding: 8px 12px; font-size: 13px; }
  .btn.icon { min-width: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .chip { padding: 6px 12px; font-size: 13px; }
  .theme-btn { width: 40px; height: 40px; }
  input[type="text"], input[type="number"], input[type="password"], input[type="url"], input[type="search"], input[type="email"], select { min-height: 44px; font-size: 16px; }
  .filters select, select.auto { min-height: 44px; font-size: 14px; }
  .switch { width: 44px; height: 24px; }
  .switch::after { width: 20px; height: 20px; }
  .switch:checked::after { left: 22px; }
  .thumb, .tbl td .thumb { min-width: 56px; min-height: 44px; }
  .filters-btn { display: inline-flex; }
  .filters-panel, .filters-panel.inline { display: block; position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); z-index: 120; background: var(--surface); box-shadow: var(--shadow-dropdown); transform: translateX(105%); transition: transform var(--t) ease; overflow: auto; padding: 0 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .filters-panel.open { transform: none; }
  .filters-panel .fp-head { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; background: var(--surface); padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 10px; font-size: 14px; z-index: 1; }
  .filters-panel .fp-body, .filters-panel.inline .fp-body { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .filters-panel .fp-body > *, .filters-panel .fp-body select, .filters-panel .fp-body input { width: 100%; max-width: none; }
  .filters-panel .fp-body .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .filters-panel .fp-body .sort { margin-left: 0; flex-direction: column; align-items: stretch; }
  .filters .search { max-width: none; flex: 1 1 100%; }
  .filters { gap: 8px; }
  .filters .filters-btn { flex: 1 1 auto; justify-content: center; }
  .page-head .filters-btn { order: 5; }
  .market-filters input.geo-input { width: 100%; text-align: left; }
  .toolbar { gap: 8px; }
  .tbl.dash td.shots-cell { display: none; }
  .tbl.dash td.epom-td { grid-column: 1 / -1; }
  .kpi .val { font-size: 24px; }
  /* the modal sits *above* the bottom nav (z 110): its footer («Сохранить») was painted under the nav and a tap
     on the button navigated instead of saving; the nav is hidden while a modal is open, the backdrop covers all */
  .modal-backdrop { z-index: 140; }
  .modal { top: 0; left: 0; right: 0; transform: none; width: 100vw; max-height: 100vh; border-radius: 0; z-index: 141; }
  .modal form { max-height: 100vh; }
  .modal footer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .modal footer .btn { flex: 1; justify-content: center; }
  body.modal-open .bottom-nav { display: none; }
  .card-h { flex-wrap: wrap; }
  h1 { font-size: 20px; }
  .sh-actions .btn { flex: 1 1 45%; }
  .site-events .ev, .ev { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 639px) and (hover: none) { .dropdown .menu { min-width: 220px; } .menu-item { padding: 11px 12px; } }
/* D2 §7: tap targets ≥ 44 px follow the pointer, not the width — a tablet (768–1024, coarse pointer) gets them too */
@media (pointer: coarse) {
  .chip, .tab, .subtab, .tabs.level-2 .tab, .subtabs.sub .subtab, .menu-item, .site-chip, .link-btn.big, .cl-item, .seg-item, .more-item { min-height: 44px; }
  .chip { padding: 6px 12px; }
  .icon-btn, .theme-btn, .gsearch-toggle { width: 44px; height: 44px; }
  .switch { width: 44px; height: 24px; }
  .switch::after { width: 20px; height: 20px; }
  .switch:checked::after { left: 22px; }
  .split > .dropdown > summary.btn { min-width: 44px; padding-left: 10px; padding-right: 10px; }
  input[type="text"], input[type="number"], input[type="password"], input[type="url"], input[type="search"], input[type="email"], input[type="date"], select { min-height: 44px; }
  .filters select, select.auto { min-height: 44px; }
  .search-box, .filters .search { min-height: 44px; }
  .copy, .aw-lg { min-height: 40px; }
  .watch-btn, .brand-head .watch-btn.lg { min-width: 44px; min-height: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; }
  .df-cell { min-width: 44px; min-height: 44px; }
  .df-cell input { width: 22px; height: 22px; }
  .site-cell .ext, .site-col .ext, a.ext { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -14px -8px; padding: 14px 8px; }
  a.bchip, a.tag.brand-ours, a.tag.brand-competitor { min-height: 44px; padding: 4px 12px; font-size: 12px; }
  .thumb, .tbl td .thumb { min-width: 56px; min-height: 44px; }
  .dev-dots a.dev-ico { min-height: 44px; min-width: 44px; justify-content: center; }
  .modal header .icon-btn, .toast .toast-close, .lightbox-close { min-width: 44px; min-height: 44px; }
}
/* Epom on the dashboard / the site card */
.epom-cell b { font-variant-numeric: tabular-nums; font-size: 13px; }
.epom-cell a { color: inherit; text-decoration: none; }
.epom-cell a:hover b { text-decoration: underline; }
.tbl.dash td.epom-td { min-width: 110px; }
.epom-none { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; }
.epom-card .table-wrap.flat { border: 1px solid var(--border); }
/* watch star, «новый» badge */
.watch-btn { background: none; border: 0; padding: 0 4px; font-size: 16px; line-height: 1; color: var(--faint); cursor: pointer; vertical-align: middle; }
.watch-btn:hover, .watch-btn.on { color: var(--warn); }
.watch-mark { color: var(--warn); font-size: 12px; }
/* creatives: grid cards (SPEC R3 U7), site-card tiles, the creative card */
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cr-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--shadow-card); min-width: 0; }
.cr-card:hover { text-decoration: none; box-shadow: var(--shadow-dropdown); border-color: var(--border-strong); }
.cr-card.ours { border-color: var(--accent); }
.cr-card.merged { opacity: 0.6; }
.cr-img { height: 150px; background: var(--thumb); background-image: repeating-linear-gradient(45deg, transparent 0 10px, var(--thumb-line) 10px 11px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cr-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: #fff; }
.cr-img.empty { background-image: none; border-bottom: 1px dashed var(--border); }
.cr-empty { color: var(--faint); font-size: 12px; font-weight: 600; }
.cr-body { padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; min-width: 0; }
.cr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cr-stats b { color: var(--text); }
.cr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cr-tile { display: block; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-alt); color: inherit; text-decoration: none; min-width: 0; }
.cr-tile:hover { text-decoration: none; border-color: var(--accent); }
.cr-tile .cr-img { height: 110px; }
.cr-cap { padding: 6px 8px; font-size: 11px; line-height: 1.4; }
.cr-cap .sub { color: var(--muted); margin-top: 2px; }
.creative-view { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.creative-shot { background: var(--thumb); background-image: repeating-linear-gradient(45deg, transparent 0 10px, var(--thumb-line) 10px 11px); border: 1px solid var(--border); border-radius: var(--r-lg); min-height: 200px; max-height: 70vh; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; }
.creative-shot img { max-width: 100%; max-height: 70vh; object-fit: contain; display: block; background: #fff; }
.creative-shot.empty { cursor: default; color: var(--muted); flex-direction: column; gap: 6px; text-align: center; padding: 20px; }
.creative-meta .kv dd { word-break: break-word; }
.creative-meta .kv dd .btn { margin-left: 6px; vertical-align: middle; }

/* brands tab: the collapsed «Ещё не встречались» group */
.empty-brands > summary { padding: 2px 0; }
.empty-brands[open] > summary { margin-bottom: 10px; }
.empty-brands .adv-cards { margin-bottom: 0; }
.empty-brands .adv-card { opacity: 0.8; }

/* «Неизвестные» queue */
.unk-group { padding-bottom: 10px; }
.unk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.unk-head h2 { font-size: 14px; }
.unk-head .sub { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: center; }
.unk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.unk-shots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.unk-shots .thumb { width: 96px; height: 64px; cursor: zoom-in; }

/* site card: «Реклама на площадке» (shares strip, creatives tiles, preroll), «Настройки» */
.site-shares .kind-share { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.site-shares .kind-share b { color: var(--text); font-variant-numeric: tabular-nums; }
.ks-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--na-bg); display: inline-block; }
.kind-share.ours .ks-dot { background: var(--accent); border-color: var(--accent); }
.kind-share.competitor .ks-dot { background: var(--na-fg); border-color: var(--na-fg); }
.kind-share.unknown .ks-dot { background: transparent; border-style: dashed; }
.share-strip { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 8px; background: var(--surface-alt); }
.ss-seg { min-width: 3px; background: var(--na); }
.ss-seg.ours { background: var(--accent); }
.ss-seg.competitor { background: var(--na-fg); }
.ss-seg.unknown { background: repeating-linear-gradient(135deg, var(--na) 0 4px, var(--border-strong) 4px 8px); }
.site-preroll { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.preroll-last { display: inline-flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.frame-img.sm { width: 220px; max-width: 100%; height: 124px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); cursor: zoom-in; }
.ss-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.ss-block { min-width: 0; }
.ss-block h3 { margin-bottom: 4px; }
.df-grid { border-collapse: collapse; margin: 6px 0; }
.df-grid th, .df-grid td { padding: 4px 10px 4px 0; text-align: left; font-size: 13px; }
.df-grid th { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.df-grid td + td, .df-grid th + th { text-align: center; padding: 4px 8px; }
.df-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 28px; cursor: pointer; }
.df-cell input { margin: 0; width: 18px; height: 18px; }
.df-cell input[disabled] { opacity: 0.6; cursor: default; }
.site-settings-form .field > label { margin-bottom: 2px; }
.ads-card .brands { display: flex; }

/* phone overrides of the R3 components (after their base rules) */
@media (max-width: 639px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .creative-view { grid-template-columns: 1fr; }
  .creative-shot { max-height: 50vh; }
  .ss-grid { grid-template-columns: 1fr; }
  .cr-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .cr-img { height: 120px; }
  .unk-head { flex-direction: column; align-items: stretch; }
  .unk-actions .btn { flex: 1; justify-content: center; }
  .tabs.level-1, .subtabs { margin-left: -12px; margin-right: -12px; padding: 0 12px; }
  .sticky-actions { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .brand-head .btn { flex: 1 1 30%; justify-content: center; }
  /* U10 tap targets ≥ 44 px: device_formats cells, the watch star, the split-run caret, ↗ links, brand chips */
  .df-cell { min-width: 44px; min-height: 44px; }
  .df-grid td + td, .df-grid th + th { padding: 0 2px; }
  .df-cell input { width: 22px; height: 22px; }
  .watch-btn, .brand-head .watch-btn.lg { min-width: 44px; min-height: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; }
  .split > .dropdown > summary.btn { min-width: 44px; padding-left: 10px; padding-right: 10px; }
  .site-cell .ext, .site-col .ext, a.ext { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -14px -8px; padding: 14px 8px; font-size: 13px; }
  a.bchip { min-height: 44px; padding: 4px 12px; font-size: 12px; }
}

/* ======================================================================
   Workspaces: header switcher + user menu, login / choose pages, admin (SPEC R4 A)
   ====================================================================== */
/* workspace switcher (left of the sections) */
.ws-switch { flex: none; max-width: 40vw; }
.ws-current { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; color: var(--text); font-weight: 600; white-space: nowrap; max-width: 100%; }
.ws-current:hover, .ws-switch[open] > .ws-current { background: var(--surface-alt); border-color: var(--border); }
.ws-name { overflow: hidden; text-overflow: ellipsis; }
.ws-caret { color: var(--muted); font-size: 11px; }
.ws-switch.single .ws-current { cursor: default; pointer-events: none; }
.ws-switch.single .ws-caret { display: none; }
.dropdown .menu.left { right: auto; left: 0; }
.menu-head { padding: 6px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.menu-head b { display: block; color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item.ws-item { display: flex; align-items: center; gap: 8px; }
.menu-item.ws-item .ws-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.menu-item.ws-item .sub { margin-left: auto; font-size: 11px; color: var(--muted); }
.menu-item.ws-item.current { font-weight: 600; }
.menu-sep { border-top: 1px solid var(--border); margin: 4px 0; }
/* user menu (right) */
.user-menu { flex: none; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; max-width: 220px; }
.user-btn:hover, .user-menu[open] > .user-btn { background: var(--surface-alt); }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; text-transform: uppercase; }
.user-name { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-badge { flex: none; padding: 1px 7px; border-radius: 10px; background: var(--na-bg); color: var(--na-fg); font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); }
.settings-card.readonly fieldset[disabled] { opacity: 0.8; }
@media (max-width: 639px) {
  .ws-switch { max-width: none; flex: 1; min-width: 0; }
  .ro-badge { display: none; }
  .user-name { display: none; }
  .user-btn { padding: 3px; border-radius: 50%; }
  .avatar { width: 30px; height: 30px; }
}
@media (max-width: 900px) { .ws-current .ws-name { max-width: 160px; } }
/* login + choose (outside the SPA) */
.auth-page { min-height: 100vh; }
.auth-wrap { max-width: 420px; margin: 0 auto; padding: 8vh 16px 40px; }
.auth-card { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.auth-brand { display: flex; align-items: baseline; gap: 10px; }
.auth-card h1 { margin: 2px 0 4px; }
.auth-card .field input { width: 100%; }
.auth-error { padding: 8px 10px; border-radius: var(--r-md); background: var(--crit-bg); color: var(--crit-fg); font-size: 13px; }
.auth-submit { justify-content: center; min-height: 38px; font-size: 14px; }
.auth-hint { margin: 2px 0 0; }
.choose-wrap { max-width: 760px; padding-top: 6vh; }
.choose-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.choose-wrap h1 { margin-bottom: 4px; }
.ws-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 16px 0; }
.ws-tile { display: block; padding: 16px 18px; border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); color: var(--text); text-decoration: none; transition: transform 0.1s, box-shadow 0.1s; }
.ws-tile:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-dropdown); border-color: var(--accent); }
.ws-tile-h { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.ws-tile-h strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.ws-role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ws-tile-kind { margin-top: 4px; }
.ws-tile-stat { margin-top: 10px; font-size: 12px; color: var(--muted); }
.choose-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* «Администрирование»: users */
.users-tbl td.ws-cell .role-chip { margin: 1px 4px 1px 0; }
.member-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, max-content); gap: 6px 12px; align-items: center; }
.member-grid select { max-width: 100%; }
@media (max-width: 480px) { .member-grid { grid-template-columns: minmax(0, 1fr); gap: 4px 0; } .member-grid select { margin-bottom: 6px; } }
.member-grid .ws-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.member-grid .ws-label .ws-dot { width: 9px; height: 9px; }
.member-grid .ws-label .sub { font-size: 11px; color: var(--muted); }
.pw-reveal { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 10px 12px; border-radius: var(--r-md); border: 1px dashed var(--border-strong); background: var(--surface-alt); }
.pw-reveal code { font-size: 16px; letter-spacing: 0.06em; background: none; padding: 0; user-select: all; }
.moved-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.soon-card { text-align: center; padding: 40px 16px; }
.soon-card .big { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.soon-card ul { display: inline-block; text-align: left; margin: 12px 0 0; padding-left: 18px; color: var(--muted); }

/* ======================================================================
   «Рынок»: coverage, new blocks, who-table, shares, matrix, scan profile, loads, reports (SPEC R4 B)
   ====================================================================== */
.check-card.st-scanned { border-left-color: var(--ok); }
.check-card.st-no_ads { border-left-color: var(--nofill); }
.chip .dot.st-scanned { background: var(--ok); }
.chip .dot.st-no_ads { background: var(--nofill); }
.seg.st-scanned { background: var(--ok); }
.seg.st-no_ads { background: var(--nofill); }
/* «Новое за N дней»: four blocks */
.new-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1200px) { .new-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .new-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.new-block { margin-bottom: 0; display: flex; flex-direction: column; min-width: 0; }
.new-block .nb-head { margin-bottom: 8px; }
.new-block .nb-head h2 { margin: 0 0 2px; }
.new-block .nb-head .hint { margin: 0; font-size: 11px; }
.nb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nb-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 13px; min-width: 0; }
.nb-list li:first-child { border-top: 0; padding-top: 0; }
.nb-sites { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nb-when { margin-left: auto; color: var(--faint); font-size: 11px; white-space: nowrap; }
.nb-slot { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nb-slot .arrow { color: var(--faint); }
.nb-cr { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-width: 0; width: 100%; }
.nb-cr:hover { text-decoration: none; }
.nb-cr .thumb { width: 56px; height: 40px; flex: none; }
.nb-cr-b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.nb-cr-b .sub { width: 100%; }
.nb-empty { padding: 6px 0; }
.new-block .link-btn { margin-top: 8px; align-self: flex-start; }

/* «Кто крутится»: sortable headers, the search in the card head */
.who-card .card-h input[type="search"] { max-width: 220px; }
.tbl th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.tbl th.sortable:hover { color: var(--text); }
.tbl th.sortable.on { color: var(--accent-ink); }
.tbl th.sortable .sort-ic { font-size: 11px; } .tbl th.sortable .ic { width: 12px; height: 12px; vertical-align: -2px; }
.tbl.who td.brands-cell.wide { max-width: 520px; }

/* «Доли брендов»: horizontal bars with the delta to the previous period */
.share-rows { display: flex; flex-direction: column; gap: 6px; }
.share-row { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sr-name { min-width: 0; overflow: hidden; }
.sr-bar { height: 12px; border-radius: 6px; background: var(--surface-alt); overflow: hidden; }
.sr-bar i { display: block; height: 100%; border-radius: 6px; background: var(--accent); min-width: 2px; }
.sr-bar.ours i { background: var(--accent); }
.sr-bar.competitor i { background: var(--na-fg); }
.sr-bar.unknown i { background: repeating-linear-gradient(135deg, var(--na) 0 4px, var(--border-strong) 4px 8px); }
.sr-val { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-val b { font-size: 13px; }
.sr-val .sub { color: var(--faint); font-size: 11px; }
.delta.na { color: var(--muted); }
@media (max-width: 639px) { .share-row { grid-template-columns: minmax(0, 1fr) auto; } .sr-bar { grid-column: 1 / -1; } .sr-val .sub { display: none; } }
.shares-card .link-btn { margin-top: 8px; }

/* «Матрица» (collapsed): the accent heat colour */
.matrix-card > summary .muted { margin-left: 6px; font-weight: 400; }
.tbl.matrix td.heat.accent { color: var(--text); }

/* coverage line («3 ч назад ✓ · загрузок 21 · снято 84 · брендов 6 · новых 2») */
.cov-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; }
.cov-line .cov-last { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cov-line .cov-stat { color: var(--muted); white-space: nowrap; }
.cov-line .cov-stat b { color: var(--text); font-variant-numeric: tabular-nums; }
.cov-line .cov-stat.new b { color: var(--ok); }
.cov-line.compact { gap: 2px 8px; font-size: 12px; }
.cov-line.compact .cov-last { width: 100%; }
.cov-card { padding: 8px 14px; }
.tbl td.cov-td { min-width: 200px; }
.tbl td.prof-td { white-space: nowrap; }

/* the scan profile chip: devices · depth · loads/day · hours */
/* the scan profile is a data label: tag neutral (radius 4 · 11 px) with the device icons; «свой» — an accent tag inside */
.prof { display: inline-flex; align-items: center; gap: 6px; padding: 1px 6px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-alt); font-size: 11px; font-weight: 600; line-height: 16px; color: var(--muted); white-space: nowrap; vertical-align: middle; }
.prof.own { border-color: var(--accent); }
.prof .prof-n b { color: var(--text); }
.prof .prof-own { padding: 0 5px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; font-weight: 600; }
.site-head .site-meta .prof { margin-left: 2px; }

/* the profile editor (site card, modal, workspace defaults) */
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
@media (max-width: 639px) { .sp-grid { grid-template-columns: minmax(0, 1fr); } }
.sp-grid .field { margin: 0; }
.sp-grid .check-group { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0; }
.sp-out { display: inline-block; min-width: 26px; padding: 0 6px; margin-left: 6px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.scan-profile input[type="range"] { width: 100%; margin: 8px 0 2px; accent-color: var(--accent); }
.scan-profile .sp-hours select.auto { width: auto; }
.sp-custom { font-weight: 600; }
.profile-card.readonly fieldset[disabled] { opacity: 0.8; }
.scan-grid { align-items: start; }

/* the loads of the last 7 days (site card «Сканирование») */
.loads-hist td.dots { vertical-align: middle; }
.loads-hist .dots-wrap { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.loads-hist tr.before td { color: var(--faint); }
.ld-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: 11px; font-weight: 700; color: var(--on-solid); background: var(--na); text-decoration: none; }
.ld-dot:hover { text-decoration: none; outline: 2px solid var(--accent); outline-offset: 1px; }
.ld-dot.ok { background: var(--ok); }
.ld-dot.nofill { background: var(--nofill); }
.ld-dot.blocked { background: var(--blocked); }
.ld-dot.crit { background: var(--crit); }
.ld-dot.warn { background: var(--warn); }
.ld-dot.na { background: var(--na); }
.loads-hist tr.under td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.history-card .card-h .btn { flex: none; }

/* reports */
.tbl.reports tr.rep-error td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.tbl.reports tr.rep-queued td:first-child { box-shadow: inset 3px 0 0 var(--na); }
.period-presets { margin-bottom: 2px; }
input[type="date"] { border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 5px 8px; background: var(--surface); color: var(--text); font: inherit; min-height: 30px; }
input[type="date"]:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 0; box-shadow: 0 0 0 3px var(--accent-soft); }

/* market site table on phones */
@media (max-width: 639px) {
  .tbl.m-cards td.cov-td, .tbl.m-cards td.prof-td { grid-column: 1 / -1; white-space: normal; }
  .prof { white-space: normal; }
  .who-card .card-h input[type="search"] { max-width: none; width: 100%; }
  .who-card .card-h select.auto { width: 100%; }
  .tbl.m-cards td.dots { grid-column: auto; }
  .summary .btns .split { display: inline-flex; }
  input[type="date"] { min-height: 44px; font-size: 16px; }
}

/* ======================================================================
   Header search, movie page, API keys, report schedules, audit, system log (SPEC R5 A)
   ====================================================================== */
/* global search (header): the input on wide screens, a toggle button + a drop-down field on phones */
.gsearch { position: relative; flex: 0 1 250px; min-width: 120px; display: flex; align-items: center; }
.gsearch-box { flex: 1 1 auto; min-width: 0; padding: 0 6px 0 9px; cursor: text; }
.gsearch-box .ic { flex: none; }
.gsearch-box .kbd { flex: none; }
.gsearch-toggle { display: none; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: var(--r-md); width: 30px; height: 30px; cursor: pointer; font-size: 16px; line-height: 1; flex: none; }
.gsearch-toggle:hover { background: var(--surface-alt); color: var(--text); }
.gsearch-input { width: 100%; font-size: 13px; }
.gsearch-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gsearch-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 320px; max-height: min(70vh, 520px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-dropdown); z-index: 60; padding: 4px 0; }
.gs-group + .gs-group { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.gs-head { padding: 6px 12px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.gs-head b { color: var(--faint); font-weight: 600; }
.gs-item { display: flex; align-items: center; gap: 10px; padding: 6px 12px; color: var(--text); text-decoration: none; }
.gs-item .gs-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.gs-item .gs-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-item .gs-sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-item .gs-thumb { flex: none; width: 44px; height: 30px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 3px; }
.gs-item:hover, .gs-item.active { background: var(--accent-soft); text-decoration: none; }
.gs-item.active .gs-main { color: var(--accent-ink); }
.gs-empty { padding: 12px; font-size: 13px; color: var(--muted); }
/* R5 integration: with the workspace switcher («Наши размещения ▾»), five sections, the search and the
   worker line the 1280px header clipped «Настройки» — the worker line yields first (the dashboard strip
   and «Система» carry the same status), then the search narrows */
@media (max-width: 1360px) { body[data-kind="admin"] .nav-status { display: none; } .gsearch { flex-basis: 180px; } }
@media (max-width: 1180px) { .nav-status { display: none; } }
@media (max-width: 1100px) { .gsearch { flex-basis: 170px; } .gsearch-box .kbd { display: none; } }
@media (max-width: 1000px) { .gsearch { flex-basis: 140px; } .topnav-inner { gap: 10px; } }
@media (max-width: 639px) {
  .gsearch { flex: none; min-width: 0; }
  .gsearch-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
  .gsearch-box { display: none; }
  .gsearch.open .gsearch-box { display: flex; position: fixed; left: 8px; right: 8px; top: 50px; z-index: 61; min-height: 44px; background: var(--surface); box-shadow: var(--shadow-dropdown); border-radius: var(--r-md); }
  .gsearch.open .gsearch-box input { font-size: 16px; min-height: 44px; }
  .gsearch-menu { position: fixed; left: 8px; right: 8px; top: 100px; min-width: 0; max-height: calc(100vh - 120px); }
}
/* check page: «Страница фильма» (SPEC R5 A4) */
.movie-card .movie-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px 16px; align-items: start; }
.movie-card .movie-grid > .shot { margin: 0; }
.movie-card .movie-meta { min-width: 0; }
.movie-card h2 .fmts { vertical-align: middle; }
@media (max-width: 760px) { .movie-card .movie-grid { grid-template-columns: minmax(0, 1fr); } }

/* API keys modal (shown-once secret) */
.api-key-new .pw-reveal { margin: 8px 0 6px; background: var(--surface); }
.api-key-new .pw-reveal code { font-size: 13px; letter-spacing: 0.02em; word-break: break-all; white-space: normal; }
.api-key-new .small code { font-size: 11px; }
.tbl.api-keys td .sub.mono { font-size: 11px; }

/* report schedules */
.tbl.report-schedules td .sub .btn { margin: 2px 4px 0 0; }
.rs-drive { padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-alt); }
.rs-drive > label { margin-bottom: 4px; }
.gd-key-form textarea { font-size: 11px; min-height: 96px; }
/* audit log */
.audit-filters select.auto { max-width: 260px; }
.audit-tbl td.details-td { max-width: 420px; }
.audit-details > summary { cursor: pointer; color: var(--accent-ink); font-size: 12px; user-select: none; }
.audit-details[open] > summary { margin-bottom: 6px; }
.diff-kv { border-collapse: collapse; font-size: 12px; width: 100%; }
.diff-kv th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 2px 6px 2px 0; }
.diff-kv td { padding: 2px 6px 2px 0; vertical-align: top; word-break: break-word; }
.diff-kv td.old { color: var(--crit-fg); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--crit) 55%, transparent); }
.diff-kv td.new { color: var(--ok-fg); font-weight: 600; }
.diff-kv td.arr { color: var(--faint); }
.audit-details .kv.small { font-size: 12px; gap: 2px 10px; }

/* system: the log lines of the ring buffer */
.log-lines { max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--log-bg); color: var(--log-fg); font-family: var(--mono); font-size: 11px; padding: 6px 0; }
.log-line { display: grid; grid-template-columns: 82px 64px minmax(80px, 160px) minmax(0, 1fr); gap: 0 10px; padding: 2px 10px; align-items: baseline; }
.log-line .ts { color: #94a3b8; }
.log-line .lvl { font-weight: 700; }
.log-line.warn .lvl { color: #fde68a; }
.log-line.crit .lvl { color: #fca5a5; }
.log-line .lg { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-line .msg { white-space: pre-wrap; word-break: break-word; }
@media (max-width: 639px) { .log-line { grid-template-columns: 1fr; gap: 0; padding: 4px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } }

/* ======================================================================
   Charts, trends / compare, landings, creatives (SPEC R5 B) — colours from --chart-* / --muted / --border
   ====================================================================== */
.aw-chart { position: relative; min-width: 0; }
.aw-plot { position: relative; }
.aw-svg { display: block; width: 100%; height: auto; max-width: 100%; font-family: var(--font); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.aw-svg text { font-size: 11px; fill: var(--muted); }
.aw-grid line { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.aw-grid line.base { stroke: var(--border-strong); }
.aw-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.aw-line.dashed { stroke-dasharray: 4 3; }
.aw-fill { opacity: 0.14; }
.aw-area { opacity: 0.55; }
.aw-areas .aw-line { stroke-width: 1.2; opacity: 0.9; }
.aw-dot { stroke-width: 1.5; }
.aw-dot.approx { stroke-dasharray: 1.5 1.5; }
.aw-dot.partial { stroke-width: 2; } /* review R5b: the running bucket (today / this week) — hollow, on a dashed tail */
.aw-line.partial { stroke-dasharray: 3 3; opacity: 0.8; }
.aw-guide { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.aw-hit { cursor: crosshair; }
.aw-empty { fill: var(--faint); font-size: 12px; }
.aw-tip { position: absolute; z-index: 5; min-width: 150px; max-width: 260px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-dropdown); padding: 6px 8px; font-size: 12px; pointer-events: none; }
.aw-tip[hidden] { display: none; }
.aw-th { font-weight: 650; margin-bottom: 4px; color: var(--text); }
.aw-tr { display: flex; align-items: center; gap: 6px; line-height: 1.5; }
.aw-tr .aw-tl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.aw-tr b { font-variant-numeric: tabular-nums; }
.aw-tn { color: var(--faint); font-variant-numeric: tabular-nums; }
.aw-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.aw-sw.approx { background: transparent; border: 1px dashed var(--muted); }
.aw-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.aw-lg { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 999px; padding: 1px 8px 1px 5px; font-size: 12px; background: transparent; color: var(--text); cursor: pointer; line-height: 18px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-lg:hover { background: var(--surface-alt); border-color: var(--border); }
.aw-lg.off { color: var(--faint); text-decoration: line-through; }
.aw-lg.off .aw-sw { opacity: 0.3; }
.aw-lg.dashed .aw-sw { background-image: repeating-linear-gradient(90deg, transparent 0 2px, var(--surface) 2px 4px); }
.aw-lg b { font-variant-numeric: tabular-nums; }
.aw-lg.note { cursor: help; color: var(--muted); }
.aw-spark { display: inline-block; vertical-align: middle; height: 28px; width: auto; max-width: 100%; }
.aw-spark .aw-line { stroke-width: 1.6; }
.aw-spark .aw-fill { opacity: 0.12; }
.aw-spark.empty { color: var(--faint); font-size: 12px; }
.aw-spark-v { margin-left: 6px; font-variant-numeric: tabular-nums; font-size: 12px; vertical-align: middle; }
.spark-line { display: inline-flex; align-items: center; gap: 4px; }

/* trends tab / dynamics block */
.trends-card .aw-chart { margin-top: 6px; }
.trends-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.trends-toolbar .chips { gap: 4px; }
.trends-toolbar select.auto { max-width: 240px; }
.trends-totals { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.trends-totals b { color: var(--text); font-variant-numeric: tabular-nums; }
.trend-tbl td.num, .trend-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .trend-tbl.m-cards td.spark-cell { width: auto; } .trend-tbl.m-cards td.num { text-align: left; } }
.trend-tbl .spark-cell { width: 140px; }
/* compare periods */
.cmp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: end; }
.cmp-period { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; background: var(--surface-alt); display: grid; gap: 6px; }
.cmp-period > b { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cmp-period .dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cmp-period input[type="date"] { max-width: 160px; }
.cmp-period.a > b { color: var(--chart-9); }
.cmp-period.b > b { color: var(--accent-ink); }
.cmp-presets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cmp-tbl td.num, .cmp-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-tbl td.delta-cell { min-width: 130px; }
.cmp-bar { display: inline-block; vertical-align: middle; width: 60px; height: 8px; border-radius: 4px; background: var(--na-bg); position: relative; overflow: hidden; margin-right: 6px; }
.cmp-bar i { position: absolute; top: 0; bottom: 0; }
.cmp-bar i.pos { left: 50%; background: var(--ok); }
.cmp-bar i.neg { right: 50%; background: var(--crit); }
.cmp-bar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
.cmp-tbl tr.new td:first-child::before { content: "новый"; display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 600; padding: 0 5px; border-radius: 4px; background: var(--ok-bg); color: var(--ok-fg); vertical-align: middle; }
.cmp-tbl tr.gone td:first-child::before { content: "пропал"; display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 600; padding: 0 5px; border-radius: 4px; background: var(--crit-bg); color: var(--crit-fg); vertical-align: middle; }
.cmp-tbl tr.gone { opacity: 0.8; }
@media (max-width: 760px) { .cmp-form { grid-template-columns: minmax(0, 1fr); } }
/* landings over time (SPEC R5 B2): the gallery on the site card, the compare modal on the check card */
.landing-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.lg-item { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); min-width: 0; display: flex; flex-direction: column; }
.lg-item.changed { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn-bg); }
.lg-shot { height: 150px; background: var(--thumb); cursor: zoom-in; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
.lg-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.lg-cap { padding: 5px 7px 6px; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-cap .lg-date { font-weight: 650; color: var(--text); display: flex; align-items: center; gap: 4px; }
.lg-cap .lg-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-cap .lg-links { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.lg-day { grid-column: 1 / -1; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.lg-day:first-child { margin-top: 0; }
.tag.hamming { font-family: var(--mono); font-weight: 600; }
.lcmp { display: grid; gap: 10px; }
.lcmp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; }
.lcmp-modes { margin-left: auto; }
.lcmp-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lcmp-pane { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); min-width: 0; }
.lcmp-pane header { padding: 6px 10px; font-size: 12px; background: var(--surface-alt); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.lcmp-pane header b { color: var(--text); }
.lcmp-pane.b header { border-left: 3px solid var(--accent); }
.lcmp-pane.a header { border-left: 3px solid var(--chart-9); }
.lcmp-img { height: 420px; overflow: auto; background: var(--thumb); background-image: repeating-linear-gradient(0deg, transparent 0 23px, var(--thumb-line) 23px 24px); display: flex; justify-content: center; align-items: flex-start; cursor: zoom-in; }
.lcmp-img img { max-width: 100%; height: auto; display: block; }
.lcmp-overlay { position: relative; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--thumb); }
.lcmp-overlay .lcmp-stage { position: relative; height: 480px; overflow: auto; }
/* review R5b: the canvas is as tall as the picture (the bottom layer sizes it), so the top layer's clip-path box, the
   divider and the scrollable area all follow the image instead of the first 480 px of the stage */
.lcmp-overlay .lcmp-canvas { position: relative; min-height: 100%; }
.lcmp-overlay .lcmp-layer { display: flex; justify-content: center; align-items: flex-start; }
.lcmp-overlay .lcmp-layer.bottom { position: relative; min-height: 100%; }
.lcmp-overlay .lcmp-layer.top { position: absolute; top: 0; left: 0; right: 0; bottom: auto; }
.lcmp-overlay .lcmp-layer img { max-width: 100%; height: auto; display: block; }
.lcmp-overlay .lcmp-layer.top { clip-path: inset(0 50% 0 0); }
.lcmp-overlay .lcmp-layer.top.solo { clip-path: none; }
.lcmp-overlay .lcmp-layer.top.off { visibility: hidden; }
.lcmp-overlay .lcmp-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--accent); pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
.lcmp-overlay .lcmp-lab { position: absolute; top: 6px; z-index: 1; padding: 1px 6px; font-size: 11px; font-weight: 700; border-radius: 4px; background: rgba(15, 23, 42, 0.75); color: #fff; pointer-events: none; }
.lcmp-overlay .lcmp-lab.a { left: 6px; }
.lcmp-overlay .lcmp-lab.b { right: 6px; }
.lcmp-overlay.mode-toggle .lcmp-lab { display: none; }
.lcmp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface-alt); }
.lcmp-controls input[type="range"] { flex: 1; min-width: 140px; }
.lcmp-hidden { display: none; }
@media (max-width: 760px) { .lcmp-side { grid-template-columns: minmax(0, 1fr); } .lcmp-img { height: 300px; } .lcmp-overlay .lcmp-stage { height: 360px; } }

/* creatives (SPEC R5 B3): preroll frame strip, media, similar, OCR text and tags */
.frames { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 900px) { .frames { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
.frame-cap .ms { color: var(--faint); font-weight: 500; margin-left: 4px; }
.cr-frames { margin-top: 10px; }
.cr-frames .frames { margin-top: 6px; }
.cr-frames .frame-img { height: 110px; }
.cr-media { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.cr-video { display: block; width: 100%; max-height: 320px; background: #000; border-radius: var(--r-md); }
.ocr-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
/* .ocr-tag = tag.info (the base rule above); the «+N» rest is neutral */
.ocr-tag.more { background: var(--na-bg); color: var(--na-fg); }
.ocr-text { margin: 6px 0 0; padding: 8px 10px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
.ocr-off { color: var(--muted); }
.tag.ocr-na { background: var(--na-bg); color: var(--na-fg); border: 1px dashed var(--border-strong); }
.cr-card .cr-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.cr-card .cr-tags .ocr-tag { padding: 0 5px; }
.similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 8px; }
.sim-item { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; min-width: 0; }
.sim-item .cr-img { height: 110px; }
.sim-body { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.sim-body .sim-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sim-body .sim-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tag.dist { font-family: var(--mono); }
.tag.dist.close { background: var(--ok-bg); color: var(--ok-fg); }
.badge.sim-badge { background: var(--info-bg); color: var(--info-fg); }
.tag-chips .chip.off { opacity: 0.55; cursor: not-allowed; }

/* ---------- D2 overrides of the copied sections ---------- */
/* event icon: a coloured sprite icon (REF «Изменения»), the timeline marker keeps the small solid square */
.ev-ic { width: 18px; height: 18px; background: transparent; color: var(--muted); border-radius: 4px; font-size: 12px; font-weight: 700; }
.ev-ic .ic { width: 16px; height: 16px; }
.ev-ic.crit { background: transparent; color: var(--crit-fg); } .ev-ic.warn { background: transparent; color: var(--warn-fg); } .ev-ic.ok { background: transparent; color: var(--ok-fg); }
.ev-ic.info { background: transparent; color: var(--accent-ink); } .ev-ic.blocked { background: transparent; color: var(--blocked-fg); } .ev-ic.nofill { background: transparent; color: var(--nofill-fg); } .ev-ic.na { background: transparent; color: var(--muted); }
.ev-ic.mk { width: 12px; height: 12px; border-radius: 3px; color: var(--on-solid); background: var(--na); }
.ev-ic.mk .ic { width: 9px; height: 9px; }
.ev-ic.mk.crit { background: var(--crit); } .ev-ic.mk.warn { background: var(--warn); } .ev-ic.mk.ok { background: var(--ok); } .ev-ic.mk.info { background: var(--accent); }
.ev-ic.mk.blocked { background: var(--blocked); } .ev-ic.mk.nofill { background: var(--nofill); } .ev-ic.mk.na { background: var(--na); }
.ev .ev-ic { margin-top: 1px; }
.ev-t .ic { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); }
.ev-m .dev-ico { vertical-align: -2px; }
/* header user pill: avatar in the accent soft colour, the role after a divider */
.avatar { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; text-transform: none; }
.user-btn { padding: 3px 8px 3px 3px; gap: 7px; }
.user-btn .user-role { font-size: 11px; color: var(--muted); border-left: 1px solid var(--border); padding-left: 7px; white-space: nowrap; }
.ws-current { gap: 6px; padding: 4px 9px; border: 1px solid var(--border); font-weight: 500; }
.ws-current .ws-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; display: inline-block; }
.ws-caret { display: inline-flex; color: var(--muted); }
.ws-caret .ic { width: 14px; height: 14px; }
.topnav { border-top: 0; }
/* login / choose */
.auth-brand { align-items: center; gap: 10px; }
.auth-brand .brand { font-size: 20px; }
.auth-card h1 { margin: 6px 0 2px; }
.auth-card .field input { width: 100%; }
.ws-tile { border-left-width: 4px; }
.ws-tile .ws-tile-h strong { font-weight: 600; }
.choose-head .brand { font-size: 20px; }
@media (max-width: 639px) { .ws-current { padding: 4px 6px; } }
.dyn-card .aw-chart { margin-top: 4px; }
.preroll-badge.pr-none { background: var(--na-bg); color: var(--na-fg); }