:root {
  --bg:#0d0f13;
  --card:#171a21;
  --card-raised:#1b1f27;
  --line:#303744;
  --control-line:#566174;
  --txt:#f3f5f8;
  --mut:#aeb6c5;
  --acc:#2563eb;
  --acc-hover:#1d4ed8;
  --acc-soft:#172554;
  --ok:#4ade80;
  --err:#fb7185;
  --warn:#fbbf24;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt); font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
button,input,select { font:inherit; }
:focus-visible { outline:3px solid rgba(96,165,250,.85); outline-offset:2px; }
.app-header { border-bottom:1px solid var(--line); }
.header-inner { max-width:1440px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px 28px; }
.brand { color:var(--txt); text-decoration:none; font-weight:750; font-size:17px; letter-spacing:.2px; white-space:nowrap; }
.app-nav { display:flex; align-items:center; gap:8px; }
.nav-link { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:9px 14px; border:1px solid transparent; border-radius:9px; color:var(--mut); text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; transition:background .15s ease,border-color .15s ease,color .15s ease; }
.nav-link:hover { color:var(--txt); background:var(--card); border-color:var(--line); }
.nav-link.is-active { color:#fff; background:var(--acc-soft); border-color:#3157a4; }
.nav-link.utility { margin-left:4px; border-color:var(--line); }
.nav-logout-form { margin:0; }
.nav-link-button { appearance:none; background:transparent; cursor:pointer; font:inherit; }
.nav-link[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
main { max-width:1240px; margin:0 auto; padding:38px 24px 56px; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.page-header h1,.page-header h2 { margin:0; }
.page-header .muted { max-width:720px; margin:6px 0 0; }
.btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--acc); color:#fff; border:1px solid var(--acc); padding:9px 16px; border-radius:9px; cursor:pointer; text-decoration:none; font-size:14px; font-weight:650; line-height:1.25; white-space:nowrap; transition:background .15s ease,border-color .15s ease,transform .15s ease; }
.btn:hover { background:var(--acc-hover); border-color:var(--acc-hover); }
.btn:active { transform:translateY(1px); }
.btn.sec { background:transparent; border-color:var(--control-line); color:var(--txt); }
.btn.sec:hover { background:var(--card-raised); border-color:#748097; }
.btn.result { background:rgba(37,99,235,.12); border-color:#3157a4; color:#b7ccff; }
.btn.result:hover { background:rgba(37,99,235,.22); border-color:#4971c7; }
.btn.danger { background:transparent; border-color:#6f3440; color:#ff9bad; }
.btn.danger:hover { background:rgba(248,81,73,.12); border-color:#a94a5a; }
.btn[disabled],.btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; pointer-events:none; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; padding:0; }
.icon-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; }
.table-wrap { width:100%; overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
.jobs-table,.matcher-table,.coverage-table { min-width:930px; }
th,td { text-align:left; padding:15px 12px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
/* Имя файла забирало всю свободную ширину, остальные колонки жались справа. */
.responsive-table th:first-child { width:28%; }
.responsive-table th:last-child { width:1%; }
.cell-actions { white-space:nowrap; }
th { color:var(--mut); font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; background:var(--card); }
tbody tr { transition:background .15s ease; }
tbody tr:hover { background:rgba(255,255,255,.018); }
tbody tr:last-child td { border-bottom:0; }
.bar { height:8px; background:var(--line); border-radius:6px; overflow:hidden; min-width:120px; }
.bar > i { display:block; height:100%; background:var(--acc); }
.bar.bar-lg { height:12px; }
.detail-card { margin-top:14px; }
.progress-copy { display:block; margin-top:6px; font-size:12px; white-space:nowrap; }
.progress-complete { display:inline-flex; align-items:center; gap:6px; color:var(--mut); white-space:nowrap; }
.progress-complete::before { content:"–"; color:var(--mut); font-weight:800; }
.progress-complete.tone-ok::before { content:"✓"; color:var(--ok); }
.progress-complete.tone-warn::before { content:"!"; color:var(--warn); }
.progress-complete.tone-err::before { content:"×"; color:var(--err); }
.pill { display:inline-flex; align-items:center; min-height:28px; padding:4px 9px; border-radius:7px; font-size:12px; font-weight:700; line-height:1.2; white-space:nowrap; }
.s-queued{ background:#2b2f3a; color:var(--mut);} .s-processing{ background:#13315c; color:#8cc4ff;}
.s-completed{ background:#16361f; color:var(--ok);} .s-completed_with_errors,.s-dispatch_failed{ background:#3a2e10; color:var(--warn);} .s-failed{ background:#3a1414; color:var(--err);} .s-cancelled{ background:#2b2f3a; color:var(--mut);}
/* статус кампании бренда в трекере: активна / отключена / неизвестна / не найдена */
.c-active{ background:#16361f; color:var(--ok);} .c-disabled{ background:#3a2e10; color:var(--warn);} .c-unknown,.c-missing{ background:#2b2f3a; color:var(--mut);}
label { display:block; margin:14px 0 4px; color:var(--mut); font-size:13px; }
input[type=text],input[type=password],input[type=file],select { width:100%; min-height:44px; padding:9px 11px; background:var(--bg); border:1px solid var(--control-line); border-radius:8px; color:var(--txt); }
.hint { color:var(--mut); font-size:12px; margin-top:4px; }
.muted { color:var(--mut); }
.link { color:#72a4ff; }
.link:hover { color:#a7c4ff; }
.alert { margin:14px 0 0; padding:10px 12px; border:1px solid transparent; border-radius:9px; font-size:13px; }
.alert.ok { background:rgba(74,222,128,.10); border-color:#2f6b45; color:#a9efc5; }
.alert.err { background:rgba(251,113,133,.10); border-color:#6f3440; color:#ffb4c1; }
.alert.warn { background:rgba(251,191,36,.10); border-color:#6d561b; color:#f7dc95; }
.alert.info { background:rgba(140,196,255,.10); border-color:#2c4a75; color:#8cc4ff; }
.field-error { color:var(--err); font-size:13px; margin:4px 0 0; }
.form-card { max-width:620px; }
.form-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:18px; }
.back-link { display:inline-flex; align-items:center; gap:6px; color:var(--mut); text-decoration:none; font-size:14px; font-weight:600; }
.back-link:hover { color:var(--txt); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.filename-link { color:#72a4ff; text-decoration:none; overflow-wrap:anywhere; word-break:break-word; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.45; }
.filename-link:hover { color:#a7c4ff; text-decoration:underline; text-underline-offset:3px; }
.tool-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:24px; }
.tool-card { display:flex; flex-direction:column; }
.tool-card > :last-child { margin-top:auto; }
.tool-card .job-actions { justify-content:flex-start; padding-top:18px; }
.metric-list { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
td .metric-list { flex-wrap:nowrap; }
.metric { display:flex; flex-direction:column; gap:1px; min-width:54px; }
.metric-label { color:var(--mut); font-size:11px; line-height:1.2; }
.metric strong { font-size:14px; font-weight:700; }
.metric.is-warning strong { color:var(--warn); }
.date-cell { white-space:nowrap; line-height:1.35; }
/* Разделитель рисуем стилями: в столбик он оказывался в начале строки. */
.job-meta .muted::before { content:"·"; margin:0 6px 0 4px; }
.job-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.job-actions form { margin:0; }
.detail-actions { justify-content:flex-start; margin-top:18px; }
.detail-metrics { gap:26px; margin-top:14px; }
.detail-metrics .metric strong { font-size:17px; }
.detail-metrics .metric-label { font-size:12px; }
.row-actions { flex-wrap:nowrap; }
.page-title { overflow-wrap:anywhere; word-break:break-word; }
.empty-row td { padding:28px 12px; text-align:center; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.section-head form { margin:0; }
.disclosure { margin-top:18px; border-top:1px solid var(--line); }
.disclosure > summary { display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; color:var(--mut); font-size:14px; font-weight:600; list-style:none; }
.disclosure > summary::-webkit-details-marker { display:none; }
.disclosure > summary::before { content:"▸"; font-size:11px; }
.disclosure[open] > summary::before { content:"▾"; }
.disclosure > summary:hover { color:var(--txt); }

/* Таблица уходит в карточки раньше, чем начнёт скроллиться вбок: при
   min-width 930px и отступах страницы строка перестаёт помещаться около
   1024px, и первым за край уезжал столбец действий. */
@media (max-width: 1023px) {
  .responsive-table thead { display:none; }
  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td { display:block; width:100%; }
  .responsive-table tr { padding:14px 0; border-bottom:1px solid var(--line); }
  .responsive-table tr:last-child { border-bottom:0; }
  .responsive-table td { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:6px 0; border-bottom:0; text-align:right; }
  .responsive-table td::before { content:attr(data-label); color:var(--mut); font-size:12px; font-weight:600; text-align:left; flex:0 0 92px; }
  .responsive-table td.cell-file,
  .responsive-table td.cell-actions,
  .responsive-table td.progress-cell { display:block; text-align:left; }
  .responsive-table td.cell-file::before,
  .responsive-table td.cell-actions::before,
  .responsive-table td.progress-cell::before { display:block; margin-bottom:6px; }
  .responsive-table td.progress-cell .bar { width:100%; min-width:0; }
  .responsive-table td.cell-actions .job-actions { justify-content:flex-start; flex-wrap:wrap; }
  .responsive-table td .metric-list { justify-content:flex-end; flex-wrap:wrap; }
  .responsive-table td.cell-file .filename-link { -webkit-line-clamp:3; }
  .jobs-table .empty-row td::before,
  .matcher-table .empty-row td::before,
  .coverage-table .empty-row td::before { content:none; }
  .jobs-table,.matcher-table,.coverage-table { min-width:0; }
}

/* На планшете и узком ноутбуке строка уже сложена в карточку, но экран
   широкий — без этого подпись и значение расходились по разным краям. */
@media (min-width: 721px) and (max-width: 1023px) {
  .responsive-table tr { max-width:620px; }
}

@media (max-width: 720px) {
  .header-inner { padding:14px 16px; flex-direction:column; align-items:flex-start; gap:10px; }
  .app-nav { width:100%; overflow-x:auto; padding-bottom:3px; }
  .nav-link { flex:0 0 auto; min-height:42px; padding:8px 12px; }
  .nav-link.utility { margin-left:0; }
  main { padding:24px 16px 40px; }
  .page-header { flex-direction:column; align-items:stretch; }
  .page-header .btn { align-self:flex-start; }
  .card { padding:14px; }
  .detail-metrics { gap:18px; }
  .job-meta { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
  .job-meta .muted::before { content:none; }
}