/* Ads Command Center — desktop-first (1280–1600 px), responsive down to a phone. */
/* ==========================================================================
   THEME TOKENS — "Clean Studio". The only place a colour is written.
   Two complete sets; <html data-theme> picks one (set before first paint).
   ========================================================================== */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --text: #141833;
  --muted: #555c6b;
  --line: #e8eaf3;
  --hover: #f3f3fe;
  --accent: #5b5bd6;
  --accent-soft: #eef0fe;
  --on-accent: #ffffff;
  --red: #c02626;
  --red-soft: #fdeded;
  --on-red: #ffffff;
  --green: #136f37;
  --green-soft: #e6f5eb;
  --orange: #8f4700;
  --orange-soft: #fff1df;
  --series-1: #2a78d6;  /* spend */
  --series-2: #eb6834;  /* sales */
  --grid: #eceefa;
  --shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 1px 3px rgba(17, 24, 39, .04);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f16;
  --surface: #161a23;
  --surface-2: #1b2029;
  --text: #eef1f8;
  --muted: #a4abba;
  --line: #242a38;
  --hover: #1f2335;
  --accent: #9aa1ff;
  --accent-soft: #1e2246;
  --on-accent: #0e1016;
  --red: #ff8080;
  --red-soft: #3b1a1d;
  --on-red: #0e1016;
  --green: #5fd68e;
  --green-soft: #12301f;
  --orange: #ffb468;
  --orange-soft: #3a2712;
  --series-1: #3987e5;
  --series-2: #d95926;
  --grid: #242936;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
:root { --radius: 14px; --side: 216px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
h2 { text-transform: uppercase; font-size: .76rem; letter-spacing: .07em; margin: 0 0 .75rem; color: var(--muted); font-weight: 800; }
h3 { text-transform: uppercase; font-size: .72rem; letter-spacing: .07em; margin: 0 0 .5rem; color: var(--muted); font-weight: 800; }
h3.mt { margin-top: 18px; }
.eyebrow { margin: 0 0 8px; }
.urgent > .row-head h2, .urgent > h2 { color: var(--red); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }

/* -- shell: sidebar + content ------------------------------------------- */
.shell {
  display: flex; min-height: 100vh;
  /* the sidebar's panel continues below the fold */
  background: linear-gradient(90deg, var(--surface) calc(var(--side) - 1px), var(--line) calc(var(--side) - 1px),
    var(--line) var(--side), transparent var(--side));
}
.signed-out .shell { background: none; }
.side {
  width: var(--side); flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 18px; padding: 20px 14px;
  background: var(--surface); border-right: 1px solid var(--line);
}
.brand { font-weight: 800; letter-spacing: .06em; color: var(--text); text-decoration: none; font-size: .9rem; padding: 0 10px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav-later {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600;
}
.nav a:hover { background: var(--hover); }
.nav a.active { background: var(--accent-soft); color: var(--accent); }
.nav .count { background: var(--red); color: var(--on-red); border-radius: 999px; font-size: .75rem; padding: 0 7px; min-width: 22px; text-align: center; }
.nav-later { color: var(--muted); font-weight: 500; cursor: default; }
.nav-later em { font-style: normal; font-size: .72rem; border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 10px; font-size: .88rem; }
.content { flex: 1; min-width: 0; }
main { max-width: 1600px; margin: 0 auto; padding: 20px 28px 48px; }
.signed-out main { max-width: 480px; }

.status { font-weight: 700; }
.status.good, .status-box.good { color: var(--green); }
.status.bad, .status-box.bad { color: var(--red); }
.status-box { font-weight: 800; padding: 8px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); white-space: nowrap; }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: currentColor; margin-right: .45em; vertical-align: .05em; }

.banner { margin: 0; padding: 10px 32px; font-weight: 600; font-size: .9rem; }
.banner.dry { background: var(--orange-soft); color: var(--orange); }
.banner.ok { background: var(--green-soft); color: var(--green); }
.banner.bad { background: var(--red-soft); color: var(--red); }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 6px 0 18px; }
.page-head p { margin: 0; }
.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.crumbs { font-size: .88rem; color: var(--muted); margin-top: 4px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* -- cards & grids --------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; min-width: 0; box-shadow: var(--shadow); }
.card.urgent { border-color: var(--red); }
.card.narrow { max-width: 460px; margin: 48px auto; }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
.grid-2-1 > .card { margin-bottom: 18px; }
.row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: .75rem; }
.row-head h2, .row-head h1 { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.big { font-size: 1.15rem; font-weight: 700; }
.nowrap { white-space: nowrap; }
.bad-text { color: var(--red); font-weight: 600; }
.notice { background: var(--orange-soft); color: var(--orange); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.lock { font-weight: 700; color: var(--orange); white-space: nowrap; font-size: .85rem; }
.back { display: inline-block; margin: 4px 0 12px; text-decoration: none; font-weight: 600; }

.kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; color: var(--text); text-decoration: none; min-width: 0; }
.kpi-card.link:hover { border-color: var(--accent); }
.kpi-card.alarm { border-color: var(--red); background: var(--red-soft); }
.kpi-card.alarm .kpi { color: var(--red); }
.kpi { font-size: 1.7rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label { font-size: .78rem; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.sub { font-size: .8rem; }

/* -- tables ---------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table.data { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.data th { text-align: left; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
table.data td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; white-space: nowrap; }
table.data tbody tr:hover { background: var(--hover); }
tr.clickable { cursor: pointer; }
tr.inactive td { opacity: .65; }
table.sortable th[data-type] { cursor: pointer; user-select: none; }
table.sortable th[data-type]:hover { color: var(--text); }
table.sortable th[data-type]::after { content: " ↕"; opacity: .35; }
table.sortable th[aria-sort=ascending]::after { content: " ↑"; opacity: 1; }
table.sortable th[aria-sort=descending]::after { content: " ↓"; opacity: 1; }
table.compact td, table.compact th { padding: 6px 8px; }
.actions-col { width: 1%; white-space: nowrap; }
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.row-actions form { margin: 0; }
.name { font-weight: 700; overflow-wrap: break-word; color: var(--text); text-decoration: none; }
table.data td:first-child { min-width: 180px; }
a.name:hover { color: var(--accent); text-decoration: underline; }
.pill { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; text-transform: capitalize; }
.pill.st-active, .pill.st-ok { background: var(--green-soft); color: var(--green); border-color: transparent; }
.pill.st-paused, .pill.st-campaign_paused, .pill.st-adset_paused { color: var(--muted); }
.pill.st-warn, .pill.st-auth_failed, .pill.st-error, .pill.st-no_access { background: var(--orange-soft); color: var(--orange); border-color: transparent; }
.pill.res { text-transform: none; }
.tag { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.cls-winner { color: var(--green); font-weight: 800; }
.cls-test { color: var(--orange); font-weight: 800; }
.res-refused .pill, .res-failed .pill { background: var(--red-soft); color: var(--red); border-color: transparent; }
.res-success .pill { color: var(--green); }
.audit-table td { vertical-align: top; overflow-wrap: anywhere; }

.filters { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; flex-wrap: wrap; }
.filters label { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: .88rem; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.seg a { padding: 8px 14px; text-decoration: none; color: var(--text); font-weight: 600; font-size: .88rem; }
.seg a + a { border-left: 1px solid var(--line); }
.seg a.on { background: var(--accent); color: var(--on-accent); }

/* -- alerts ------------------------------------------------------------------ */
.alert-title { font-weight: 700; }
.alert-msg { margin: 2px 0; }
.sev { font-size: .72rem; font-weight: 800; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.sev-critical .sev { background: var(--red); color: var(--on-red); }
.sev-action .sev { background: var(--red-soft); color: var(--red); }
.sev-warning .sev { background: var(--orange-soft); color: var(--orange); }
.sev-info .sev { background: var(--green-soft); color: var(--green); }

/* -- system panel -------------------------------------------------------------- */
.system { list-style: none; margin: 0; padding: 0; }
.system li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.system li:first-child { border-top: 0; }
.system .small { grid-column: 1 / -1; }
.health { font-weight: 700; white-space: nowrap; }
.h-healthy { color: var(--green); }
.h-late { color: var(--orange); }
.h-dead, .h-unknown { color: var(--red); }

/* -- charts -------------------------------------------------------------------- */
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.chart .tick { fill: var(--muted); font-size: 11px; }
.chart .nodata { fill: var(--muted); font-size: 11px; font-style: italic; }
.chart .s1 { fill: var(--series-1); }
.chart .s2 { fill: var(--series-2); }
.chart .line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .ref { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1; }
.chart .reflabel { fill: var(--muted); font-size: 11px; }
.chart .direct { fill: var(--text); font-size: 12px; font-weight: 700; }
.chart .hit { fill: transparent; }
.chart .hit.on { fill: var(--text); opacity: .05; }
.legend { display: flex; gap: 14px; font-size: .82rem; color: var(--text); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.sw.s1 { background: var(--series-1); }
.sw.s2 { background: var(--series-2); }
.table-view summary { cursor: pointer; font-size: .85rem; color: var(--accent); margin-top: 8px; }
.tip { position: fixed; z-index: 10; pointer-events: none; background: var(--text); color: var(--surface); padding: 6px 10px; border-radius: 8px; font-size: .8rem; max-width: 360px; }

/* -- controls ------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 800; letter-spacing: .03em; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn.small { min-height: 32px; padding: 0 10px; font-size: .78rem; }
.btn.big { width: 100%; min-height: 52px; font-size: 1.05rem; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.danger { background: var(--red); border-color: var(--red); color: var(--on-red); }
.btn.danger:hover { filter: brightness(1.08); }
.btn.quiet { color: var(--muted); }
.btn.stop { color: var(--red); border-color: var(--red); }
.btn.stop:hover { background: var(--red-soft); }
.btn.go { color: var(--green); border-color: var(--green); }
.btn.go:hover { background: var(--green-soft); }
button.link { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; text-align: left; }
form.inline { display: flex; gap: 6px; align-items: center; margin: 0; }
select, input[type=password] {
  font: inherit; min-height: 36px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.stack { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 12px 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 6px 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* -- narrower screens: still usable, not the target ----------------------------- */
@media (max-width: 1200px) {
  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2-1 { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 960px) {
  .shell { flex-direction: column; background: none; }
  .side { position: static; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 4px; width: 100%; order: 3; }
  .nav a, .nav-later { padding: 6px 10px; font-size: .88rem; }
  .side-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: 14px; padding: 0; }
  main { padding: 16px 16px 40px; }
  .banner { padding: 10px 16px; }
}
@media (max-width: 560px) {
  table.data td:first-child { min-width: 150px; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page-head { flex-direction: column; }
  .head-actions { justify-content: flex-start; }
  .kpi { font-size: 1.35rem; }
  .card { padding: 14px; }
}

/* --- Phase 1.5: clone, activate, jobs, posters --------------------------- */
input[type=text], input[type=url], input[type=file] {
  font: inherit; min-height: 44px; padding: 8px 10px; border-radius: 10px; width: 100%;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.field { display: flex; flex-direction: column; gap: 4px; font-weight: 600; border: 0; padding: 0; margin: 0; min-width: 0; }
.field select { width: 100%; }
.field legend { padding: 0; margin-bottom: 6px; }
.choice { display: flex; gap: 8px; align-items: center; font-weight: 500; min-height: 40px; }
.risk { border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.risk.zero { background: var(--green-soft); color: var(--green); }
.risk.live { background: var(--red-soft); color: var(--red); }
.risk-label { font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.risk-value { font-size: 1.5rem; font-weight: 800; overflow-wrap: anywhere; }
.locked-facts dt { white-space: nowrap; }
.locked-facts dd { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .locked-facts { grid-template-columns: 1fr; }
  .locked-facts dd { margin-bottom: 6px; }
}
.mark { display: inline-block; width: 1.3em; font-weight: 800; }
.mark-ok, .st-done .mark { color: var(--green); }
.mark-bad, .st-failed .mark { color: var(--red); }
.mark-unknown, .st-running .mark { color: var(--orange); }
.steps { margin: 0; padding-left: 0; list-style: none; }
.steps li { display: flex; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.steps li:first-child { border-top: 0; }
.jstatus { font-size: .75rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; white-space: nowrap; background: var(--line); }
.js-succeeded, .rq-ready { background: var(--green-soft); color: var(--green); }
.js-failed { background: var(--red-soft); color: var(--red); }
.js-running, .js-queued, .rq-requested, .rq-in_progress { background: var(--orange-soft); color: var(--orange); }
.joblist li { padding: 10px 0; border-top: 1px solid var(--line); }
.joblist li:first-child { border-top: 0; }
.joblist a { display: flex; justify-content: space-between; gap: 8px; color: var(--text); text-decoration: none; }
.poster-grid, .poster-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.poster-card, .poster-option { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; min-width: 0; }
.poster-card img, .poster-option img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.poster-option { position: relative; }
.poster-option input { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; }
.poster-option:has(input:checked) img { outline: 3px solid var(--accent); }
.poster-full { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: var(--bg); }
.pc-ok { color: var(--green); }
.pc-bad { color: var(--red); font-weight: 800; }
.warn-price p { margin: 0 0 6px; }

/* Flow screens (clone, activate): facts on the left, the decision on the right. */
.flow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr); gap: 18px; align-items: start; }
.flow-side { position: sticky; top: 16px; }
.page-narrow { max-width: 1040px; }
@media (max-width: 1100px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-side { position: static; }
}

/* On a phone, alert rows stack instead of becoming a narrow table. */
@media (max-width: 700px) {
  .alerts-table thead { display: none; }
  .alerts-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .alerts-table td { display: block; border: 0; padding: 3px 0; min-width: 0 !important; }
  .alerts-table td.actions-col { width: auto; padding-top: 8px; }
}

/* -- v4: top bar, theme switch, Command Center panels, Settings, empty states -- */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 5; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar form { margin: 0; }
.chip { font-size: .75rem; font-weight: 800; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.chip.warn { background: var(--orange-soft); color: var(--orange); }
.chip.live { background: var(--green-soft); color: var(--green); }
.seg button { font: inherit; font-size: .82rem; font-weight: 700; padding: 6px 12px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.seg button:hover { color: var(--text); }
.theme-form { margin: 0; }
.kpi-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-2 > .card, .grid-3 > .card { margin-bottom: 18px; }
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: 24px; }
.status-panel { border-left: 1px solid var(--line); padding-left: 20px; }
.roas-list { list-style: none; margin: 0; padding: 0; }
.roas-list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 6px; margin: 0 -6px; border-radius: 10px; color: var(--text); text-decoration: none; }
.roas-list a:hover { background: var(--hover); }
.roas-name { font-weight: 700; }
.roas-value { text-align: right; font-weight: 800; }
.roas-track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.roas-bar { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.roas-bar.below { background: var(--red); }
.roas-meta { grid-column: 1 / -1; }
.warn-text { color: var(--orange); font-weight: 700; }
.inv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.small-kpi { font-size: 1.5rem; }
.muted-kpi { font-size: 1.1rem; color: var(--muted); }
.cls-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.cls-counts .tag { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.cls-normal { color: var(--muted); font-weight: 800; }
.facts.compact { gap: 6px 14px; }
.row-actions.wrap { flex-wrap: wrap; }
.row-actions.center { justify-content: center; }
.sessions li { padding: 6px 0; border-top: 1px solid var(--line); }
.sessions li:first-child { border-top: 0; }
input[type=password] { width: 100%; min-height: 42px; }
.empty { text-align: center; padding: 36px 16px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface-2); }
.empty h3 { color: var(--text); font-size: 1.05rem; margin: 6px 0; text-transform: none; letter-spacing: 0; }
.empty p { max-width: 520px; margin: 0 auto 14px; }
.empty-mark { font-size: 2rem; color: var(--accent); line-height: 1; }
.btn.primary:hover { filter: brightness(1.06); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1200px) {
  .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kpi-row.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .status-panel { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .topbar { padding: 10px 16px; flex-wrap: wrap; position: static; }
}
table.data.alerts-table td:first-child { min-width: 0; width: 1%; white-space: nowrap; }
.alerts-table td:nth-child(2) { min-width: 220px; }
.alerts-table td:nth-child(3) { min-width: 90px; }
table.data td.num.na { white-space: normal; min-width: 90px; }
@media (max-width: 1366px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .status-panel { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
  table.data th, table.data td { padding-left: 6px; padding-right: 6px; }
  main { padding-left: 22px; padding-right: 22px; }
}
.grid-2-1 { align-items: start; }
.rules-table th, .rules-table td { padding-left: 4px; padding-right: 4px; }
.rules-table th { white-space: normal; }