:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e4e6eb;
  --border-strong: #d6d9e0;
  --text: #1f2328;
  --text-dim: #4a5160;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-tint: #eff4ff;
  --success: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;

  --radius: 8px;
  --radius-lg: 10px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lift: 0 4px 12px rgba(16, 24, 40, .10);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.6rem; margin: 0 0 var(--s-2); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 var(--s-2); font-weight: 600; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .35);
  border-radius: var(--radius);
}

/* --- Layout --- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 224px;
  flex: 0 0 224px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--s-6) var(--s-3);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 650;
  font-size: 1.02rem;
  color: var(--text);
  padding: 0 var(--s-2) var(--s-6);
}
.sidebar .brand:hover { text-decoration: none; }
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  flex: 0 0 22px;
}
.nav-label {
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-2);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  color: var(--text-dim);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  font-size: .92rem;
}
.sidebar nav a:hover { background: #f2f4f7; text-decoration: none; }
.sidebar nav a.active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}

main {
  flex: 1 1 auto;
  max-width: 880px;
  min-width: 0;
  width: 100%;
  margin: 0 auto;
  padding: var(--s-8) var(--s-6) 48px;
  overflow-x: hidden;
}

footer {
  color: var(--muted);
  font-size: .82rem;
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%;
    flex-basis: auto;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--s-3) var(--s-4);
  }
  .sidebar .brand { padding-bottom: var(--s-3); }
  .nav-label { display: none; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; gap: var(--s-2); }
}

/* --- Cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--s-6);
  margin: 0 0 var(--s-4);
  min-width: 0;
  overflow-x: hidden;
}
.card h2 a { color: var(--text); }

a.card-link { display: block; color: inherit; }
a.card-link:hover { text-decoration: none; }
.run-card { transition: transform 120ms ease, box-shadow 120ms ease; }
a.card-link:hover .run-card {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}

/* --- Text helpers --- */
.muted { color: var(--muted); font-size: .9rem; }
.help { color: var(--muted); font-size: .78rem; margin: var(--s-1) 0 var(--s-3); }
.intro { color: var(--muted); margin: 0 0 var(--s-6); max-width: 60ch; }
.flow-note {
  color: var(--muted);
  font-size: .85rem;
  margin: 0 0 var(--s-4);
}

/* --- Badges / pills --- */
.badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  vertical-align: middle;
}
.badge.neutral { background: #f0f2f5; color: var(--muted); }

.pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .1rem .5rem;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.5;
}
.pill-neutral { background: #f0f2f5; color: var(--muted); }
.pill-blue { background: var(--accent-tint); color: var(--accent); }
.pill-amber { background: #fef3c7; color: #92400e; }
.pill-green { background: #dcfce7; color: #166534; }
.pill-danger { background: #fee2e2; color: #b91c1c; }

.check-row {
  display: block;
  font-size: .9rem;
  padding: .15rem 0;
  cursor: pointer;
}

.exclude-set {
  margin: var(--s-3) 0;
  padding: var(--s-3);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}
.exclude-set legend { padding: 0 .4rem; }

.step-group {
  margin-top: 1rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border, #e5e7eb);
}
.step-group-title {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 .4rem;
}
.step-group.current .step-group-title { color: var(--accent); }

.chip {
  display: inline-block;
  font-size: .74rem;
  padding: .12rem .55rem;
  border-radius: 999px;
  background: #f0f2f5;
  color: var(--muted);
  text-decoration: none;
  margin: 0 .25rem .25rem 0;
  border: none;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.6;
}
.chip:hover { background: #e6e9ee; }
.chip-on { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
button.chip.chip-on:hover { background: var(--accent-tint); }
.tag-filters { margin: .4rem 0 1rem; }
.card-tags { margin: .25rem 0 0; }

/* --- Index header --- */
.index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--s-4);
}
.index-header h1 { margin: 0; }

/* --- Filter panel --- */
.filter-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.filter-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 28px;
}
.filter-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  min-width: 112px;
  flex-shrink: 0;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.fchip {
  display: inline-block;
  font-size: .78rem;
  padding: .18rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 80ms, background 80ms;
}
.fchip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.fchip-on {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.fchip-reset { border-color: transparent; color: var(--muted); font-size: .74rem; }
.fchip-reset:hover { color: var(--danger); border-color: var(--danger); }

/* --- Compact run cards --- */
.run-card-compact {
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-2);
}
.run-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.run-brand {
  font-weight: 600;
  font-size: .95rem;
}
.badge-sm {
  font-size: .68rem;
  padding: .1rem .45rem;
}
.run-geo {
  font-size: .78rem;
  color: var(--muted);
}
.run-status-pill {
  font-size: .72rem;
  font-weight: 600;
  padding: .12rem .5rem;
  border-radius: 999px;
  margin-left: auto;
}
.run-status-done   { background: #dcfce7; color: #15803d; }
.run-status-error  { background: #fee2e2; color: #b91c1c; }
.run-status-running { background: #fef9c3; color: #a16207; }
.run-status-draft  { background: #f1f5f9; color: var(--muted); }

.run-detail {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-1);
  flex-wrap: wrap;
}
.run-query {
  font-size: .82rem;
  color: var(--text-dim);
  font-style: italic;
}
.run-meta-pills {
  display: flex;
  gap: var(--s-2);
  font-size: .76rem;
  color: var(--muted);
}
.run-meta-pills span::before { content: "·"; margin-right: var(--s-2); }
.run-meta-pills span:first-child::before { content: ""; margin: 0; }
.run-owner { font-weight: 500; color: var(--text-dim); }
.run-time { color: var(--muted); }
.dfs-row { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 0; }
.btn-dfs {
  font-size: .82rem;
  padding: .3rem .9rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}
.btn-dfs:hover { background: var(--accent); color: #fff; }
.btn-dfs:disabled { opacity: .5; cursor: default; }
.dfs-status { font-size: .8rem; color: var(--muted); }

.date-group-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: var(--s-4) 0 var(--s-2);
}
.card-tags { margin: .35rem 0 0; }
.date-group {
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  margin: 1.4rem 0 .5rem;
}

.tag-slug {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .72rem;
  color: var(--muted);
  background: #f4f5f7;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .05rem .4rem;
  vertical-align: middle;
}

/* --- Status dot --- */
.dot {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--muted);
  margin-right: var(--s-1);
  vertical-align: middle;
}
.dot.done { background: var(--success); }
.dot.running { background: var(--warn); }
.dot.error { background: var(--danger); }

/* --- Buttons --- */
.btn, button {
  display: inline-block;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  line-height: 1.3;
}
.btn:hover, button:hover { background: #f2f4f7; text-decoration: none; }
.btn-primary, button.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover, button.btn-primary:hover { background: var(--accent-dark); }

/* --- Forms --- */
label {
  display: block;
  margin: var(--s-3) 0 var(--s-1);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dim);
}
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%;
  height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
}
textarea {
  height: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

fieldset {
  border: none;
  margin: 0 0 var(--s-4);
  padding: 0;
}
fieldset legend {
  font-weight: 600;
  font-size: 1rem;
  padding: 0;
  margin-bottom: var(--s-1);
}

.notice {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  font-size: .9rem;
  margin-bottom: var(--s-4);
}

/* --- Stage stepper --- */
.stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  margin: var(--s-3) 0 var(--s-4);
  padding: 0;
  list-style: none;
}
.stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1 1 0;
  min-width: 62px;
  text-align: center;
  padding-top: var(--s-1);
}
.stepper .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.stepper .step.done:not(:last-child)::after { background: var(--accent); }
.step-dot {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  margin-bottom: var(--s-1);
}
.step-label {
  font-size: .68rem;
  color: var(--muted);
  line-height: 1.2;
  max-width: 8ch;
}
.stepper .step.done .step-dot {
  background: var(--accent);
  border-color: var(--accent);
}
.stepper .step.done .step-dot::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
}
.stepper .step.current .step-dot {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.stepper .step.current .step-label {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 720px) {
  .stepper .step { flex: 1 1 22%; min-width: 0; margin-bottom: var(--s-2); }
}

.checkpoint-label {
  color: var(--warn);
  font-size: .75rem;
  font-weight: 600;
}
.stage-state { margin: 0 0 var(--s-1); }

.toolbar {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  margin: var(--s-4) 0;
}

/* --- Stage result rendering --- */
.stage-result { margin: var(--s-3) 0; }
.bot-summary {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--border);
  background: var(--surface-2, transparent);
}
.bot-summary .result-caption { margin-bottom: var(--s-2); }
.result-caption {
  font-size: .9rem;
  color: var(--text-dim);
  margin: 0 0 var(--s-3);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.data-table th {
  text-align: left;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 600;
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr:nth-child(even) { background: #fafbfc; }

.preview { margin: var(--s-1) 0; }
.preview summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 500;
  padding: var(--s-1) 0;
}

.substage-progress {
  list-style: none;
  margin: var(--s-3) 0;
  padding: 0;
}
.substage {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: .2rem 0;
  font-size: .9rem;
  color: var(--muted);
}
.substage.done { color: var(--text, #111827); }
.substage.current { color: var(--accent, #2563eb); font-weight: 500; }
.substage.error { color: #b91c1c; }
.substage-mark { width: 1.1rem; text-align: center; }

.competitor-list {
  list-style: none;
  margin: var(--s-3) 0;
  padding: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}
.competitor-row { border-top: 1px solid var(--border, #e5e7eb); }
.competitor-row:first-child { border-top: 0; }
.competitor-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: .9rem;
  cursor: pointer;
}
.competitor-host { font-weight: 500; color: inherit; text-decoration: none; }
.competitor-host:hover { text-decoration: underline; color: var(--accent); }
.competitor-detail { padding: 0 var(--s-3) var(--s-2) calc(var(--s-3) + 1.4rem); }
.competitor-detail summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--muted);
  padding: var(--s-1) 0;
}
.competitor-headings { margin: var(--s-1) 0; padding-left: var(--s-4); font-size: .85rem; }
.competitor-headings li { margin-bottom: .15rem; }
.competitor-preview { margin-top: var(--s-1); }

.outline { margin: 0; padding-left: var(--s-4); }
.outline > li { margin-bottom: var(--s-2); }
.outline-h2 { font-weight: 600; }
.outline-h3 { margin: var(--s-1) 0 0; padding-left: var(--s-4); color: var(--text-dim); }
.outline-h3 li { font-size: .88rem; }

.tiles { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.tile {
  display: flex;
  flex-direction: column;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  min-width: 96px;
}
.tile-num { font-size: 1.15rem; font-weight: 600; }
.tile-label { font-size: .74rem; color: var(--muted); }

.note-list { margin: 0; padding-left: var(--s-4); }
.note-list li { margin-bottom: var(--s-2); }

pre.md {
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3);
  overflow: auto;
  max-height: 22rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .82rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: var(--s-1) 0;
}

pre.artifact {
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3);
  overflow: auto;
  max-height: 18rem;
  font-size: .82rem;
  margin: var(--s-1) 0;
}

.edit-block { margin-top: var(--s-4); }
.edit-block summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--muted);
  padding: var(--s-1) 0;
}

/* ---- ТЗ (brief) page ---- */
.tz-section {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.tz-h {
  margin: 0 0 var(--s-2);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
}
.kw-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.kw-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: .82rem;
}
.kw-freq { font-size: .72rem; color: var(--muted); }
.comp-brief { list-style: none; margin: 0; padding: 0; }
.comp-brief-row { border-top: 1px solid var(--border); }
.comp-brief-row:first-child { border-top: none; }
.comp-brief-detail summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
}
.comp-vol { font-size: .82rem; color: var(--muted); }

/* --- Output page: rendered preview + export blocks --- */
.btn-sm {
  font-size: .8rem;
  padding: 4px 10px;
}
.rendered-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-3) 0 var(--s-4);
}
.rendered-preview > :first-child { margin-top: 0; }
.rendered-preview h1 { font-size: 1.4rem; }
.rendered-preview h2 { font-size: 1.1rem; margin-top: var(--s-4); }
.rendered-preview h3 { font-size: 1rem; }
.export-tabs {
  display: grid;
  gap: var(--s-4);
}
.export-block {
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
}
.export-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
}
.export-head strong { margin-right: auto; }
.export-label {
  margin: var(--s-2) 0 var(--s-1);
  font-size: 12px;
  color: var(--text-dim);
}
.export-field {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.export-field input { flex: 1; }

/* --- Final review: formatted hero text + collapsed bot details --- */
.final-rendered {
  padding: var(--s-3) var(--s-4);
}
.final-rendered > :first-child { margin-top: 0; }
.final-rendered > :last-child { margin-bottom: 0; }
.final-rendered h1 { font-size: 1.35rem; }
.final-rendered h2 { font-size: 1.05rem; margin-top: var(--s-4); }
.final-rendered h3 { font-size: 1rem; }
.bot-details {
  margin-top: var(--s-3);
}
.bot-details > summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--text-dim);
  padding: var(--s-2) 0;
}

/* --- Auth: sidebar footer (user + logout) --- */
.sidebar-foot {
  padding: var(--s-3) var(--s-2) 0;
  border-top: 1px solid var(--border);
}
.sidebar-version {
  margin-top: auto;
  margin-bottom: var(--s-2);
  padding: 0 var(--s-2);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar-user {
  margin: var(--s-3) 0 0;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
}
.sidebar-role {
  margin: 0 0 var(--s-2);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar-logout {
  display: inline-block;
  font-size: .85rem;
  color: var(--text-dim);
}

/* --- Auth: login screen --- */
.login-body { background: var(--bg); }
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
}
.login-card {
  width: 100%;
  max-width: 340px;
}
.login-title {
  font-size: 1.25rem;
  margin: 0 0 var(--s-4);
}
.login-submit { width: 100%; margin-top: var(--s-4); }
.login-error {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  background: #fef2f2;
  color: var(--danger);
  font-size: .88rem;
}

/* --- Users admin table --- */
.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.users-table th,
.users-table td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
}
.users-table th {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.run-owner { color: var(--muted); }

/* --- Wizard step indicator --- */
.wizard-header {
  margin: 0 0 var(--s-4);
}
.wizard-steps {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.wizard-step {
  font-size: .82rem;
  font-weight: 600;
  padding: .2rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--bg);
}
.wizard-step-current {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}
.wizard-step-done {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.wizard-sep {
  color: var(--muted);
  font-size: .85rem;
}
.wizard-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* --- Seed keyword rows (step 2) --- */
.seed-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.seed-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
}
.seed-row-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.seed-num {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-dim);
}
.seed-required {
  font-size: .72rem;
  color: var(--accent);
  background: var(--accent-tint);
  padding: .1rem .45rem;
  border-radius: 999px;
}
.seed-query-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  flex-wrap: wrap;
}
.seed-query-input {
  flex: 1;
  min-width: 160px;
}
.btn-ahrefs {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.btn-ahrefs:hover {
  background: #fde68a;
  border-color: #f59e0b;
}
.seed-textarea {
  width: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .82rem;
  resize: vertical;
}

@media (max-width: 560px) {
  .seed-query-row { flex-direction: column; align-items: stretch; }
  .seed-query-input { min-width: 0; }
  .wizard-steps { flex-wrap: wrap; }
}

/* Balance table in Settings */
.balance-table {
  border-collapse: collapse;
  width: 100%;
  font-size: .9rem;
  margin-top: .5rem;
}
.balance-table th, .balance-table td {
  text-align: left;
  padding: .35rem .6rem;
  border-bottom: 1px solid var(--border);
}
.balance-table th { color: var(--muted); font-weight: 500; }
.balance-ok { color: var(--success); font-weight: 500; }
.balance-err { color: var(--danger); }

/* ── Compact new-run form ─────────────────────────── */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: 0;
}
.form-row-2 > div { display: flex; flex-direction: column; gap: 4px; }
.form-row-2 label { margin-bottom: 0; }
.label-hint { font-weight: 400; color: var(--muted); font-size: .82em; }

/* ── Keywords step 2 ──────────────────────────────── */
.markers-list { display: flex; flex-direction: column; gap: var(--s-4); }

.marker-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
}

.marker-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.marker-num { font-weight: 600; font-size: .9rem; }
.marker-kw-count {
  font-size: .8rem;
  color: var(--accent);
  font-weight: 500;
}

.marker-fetch-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.marker-seed-input {
  flex: 1;
  min-width: 180px;
}
.marker-status { font-size: .82rem; color: var(--muted); }

/* Two tables side by side */
.kw-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-3);
}
.kw-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.kw-table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .35rem .6rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-dim);
}
.kw-select-all {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
}
.kw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}
.kw-table thead th {
  text-align: left;
  padding: .25rem .5rem;
  color: var(--muted);
  font-weight: 500;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
}
.kw-table tbody tr:hover { background: var(--accent-tint); }
.kw-table tbody td { padding: .28rem .5rem; border-bottom: 1px solid var(--border); }
.kw-table tbody tr:last-child td { border-bottom: none; }
.kw-word { word-break: break-word; }
.kw-vol { white-space: nowrap; color: var(--text-dim); text-align: right; min-width: 52px; }
.kw-empty { color: var(--muted); font-size: .82rem; padding: .75rem .5rem !important; text-align: center; }

.btn-promote {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .74rem;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.btn-promote:hover {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 720px) {
  .kw-tables { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
}

/* ── Run page header ──────────────────────────────── */
.run-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.run-page-header h1 { margin: 0 0 .25rem; }
.run-page-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.btn-danger-outline {
  background: none;
  color: var(--danger);
  border: 1px solid #fca5a5;
}
.btn-danger-outline:hover {
  background: #fef2f2;
  border-color: var(--danger);
}

/* Draft card */
.draft-card { text-align: center; padding: var(--s-8); }
.draft-title { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }

.kw-table-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 3px;
  background: #e5e7eb;
  color: var(--muted);
  vertical-align: middle;
  margin-left: 4px;
}
.kw-table-badge-geo {
  background: var(--accent-tint);
  color: var(--accent);
}

/* ── HTMX loading indicator ───────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request { display: inline-flex; align-items: center; gap: 6px; }

.serp-loading { font-size: .85rem; color: var(--muted); }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}

/* Marker label in page card h2 */
.marker-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
  margin-right: 4px;
}

/* ── Marker summary block ────────────────────────── */
.marker-summary.card { padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.marker-summary-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.marker-summary-title { font-weight: 600; font-size: 1rem; }
.marker-index { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.marker-index-row { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.marker-index-link { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; flex: 1; }
.marker-index-link:hover .marker-index-title { text-decoration: underline; }
.marker-index-n { font-weight: 600; color: var(--accent); min-width: 1.2rem; }
.marker-index-title { color: var(--text); }
.marker-index-status { font-size: .8rem; margin-left: auto; white-space: nowrap; }

/* ── Collapsible marker details ─────────────────── */
.marker-details { margin-bottom: 1rem; }
.marker-details > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer;
  list-style: none; padding: .6rem .75rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius); user-select: none; }
.marker-details > summary::-webkit-details-marker { display: none; }
.marker-details[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; }
.marker-details[open] > summary::before { content: '▾'; }
.marker-details:not([open]) > summary::before { content: '▸'; }
.marker-details > summary::before { color: var(--muted); font-size: .8rem; }
.marker-summary-name { font-weight: 500; flex: 1; }
.marker-sum-status { font-size: .78rem; white-space: nowrap; }
.marker-details[open] .page-card { border-top-left-radius: 0; border-top-right-radius: 0; }

/* ── Marker index status colours ────────────────── */
.mis-done { color: #16a34a; }
.mis-tz { color: #2563eb; }
.mis-review { color: #d97706; }
.mis-comp { color: var(--muted); }
.mis-pending { color: var(--muted); }

.ext-icon { font-size: .7rem; margin-left: 3px; opacity: .6; }
.outline-level { display: inline-block; font-size: .68rem; font-weight: 700;
  color: var(--accent); background: var(--accent-tint); border-radius: 3px;
  padding: 0 4px; margin-right: 4px; vertical-align: middle; line-height: 1.6; }
.outline-level-h3 { color: var(--muted); background: #f0f2f5; }

/* ── Write page ─────────────────────────────────── */
.write-header {
  margin-bottom: 1.25rem;
}
.write-header-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .75rem;
}
.write-back-link { color: var(--muted); font-size: .85rem; text-decoration: none; }
.write-back-link:hover { color: var(--text); }
.write-run-title { font-weight: 600; font-size: .95rem; flex: 1; }
.write-output-link { margin-left: auto; }

.write-tabs {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.write-tab {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-dim);
  font-size: .82rem;
  background: var(--surface);
  transition: border-color .12s;
}
.write-tab:hover { border-color: var(--accent); color: var(--text); }
.write-tab.active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); font-weight: 500; }
.write-tab-n { font-weight: 700; font-size: .78rem; color: var(--accent); }
.write-tab-title { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.write-tab-status { font-size: .7rem; padding: .1rem .35rem; border-radius: 999px; background: #f0f2f5; white-space: nowrap; }

.wts-done  { background: #dcfce7; color: #166534; }
.wts-final { background: var(--accent-tint); color: var(--accent); }
.wts-gen   { background: #fef3c7; color: #92400e; }
.wts-ready { background: #dbeafe; color: #1d4ed8; }
.wts-prep  { background: #f0f2f5; color: var(--muted); }

.write-model-bar {
  padding: .65rem 1rem !important;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem !important;
}
.write-model-label { font-size: .8rem; color: var(--muted); font-weight: 500; white-space: nowrap; }

.write-prep-notice { padding: 1.5rem !important; text-align: center; color: var(--muted); }

@media (max-width: 560px) {
  .write-tab-title { max-width: 90px; }
  .write-header-top { flex-wrap: wrap; }
}

/* --- Cluster page --- */
.cluster-blocks { display:flex; flex-direction:column; gap:.5rem; }
.cluster-block { padding:.5rem 0; border-bottom:1px solid var(--border); }
.cluster-block:last-child { border-bottom:none; }
.cluster-cards { display:flex; flex-direction:column; gap:.6rem; }
.cluster-card { cursor:pointer; display:block; padding:.75rem 1rem !important; transition:background .1s; }
.cluster-card:hover { background:var(--accent-tint); }
.cluster-card-top { display:flex; align-items:center; gap:.25rem; }
.cluster-name { font-size:.95rem; }

/* --- SEO table in bot-details --- */
.seo-table { width:100%; border-collapse:collapse; font-size:.85rem; margin-top:.25rem; }
.seo-table tr + tr { border-top:1px solid var(--border); }
.seo-sev { white-space:nowrap; padding:.3rem .5rem .3rem 0; vertical-align:top; }
.seo-cat { white-space:nowrap; padding:.3rem .5rem; font-size:.82rem; vertical-align:top; min-width:90px; }
.seo-finding { padding:.3rem 0 .3rem .5rem; color:var(--text); vertical-align:top; line-height:1.45; }

.cluster-del { border:none; background:none; cursor:pointer; color:var(--muted); font-size:1rem; line-height:1; padding:.15rem .35rem; margin-left:.4rem; flex-shrink:0; border-radius:4px; }
.cluster-del:hover { color:#c0392b; background:rgba(192,57,43,.08); }
.cluster-name-ru { font-weight:400; }

/* --- Output summary --- */
.output-summary { margin-bottom:1.25rem; }
.output-summary-head { margin-bottom:.6rem; font-size:.95rem; }
.output-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.output-table th { text-align:left; padding:.4rem .5rem; border-bottom:2px solid var(--border-strong); color:var(--muted); font-weight:600; }
.output-table td { padding:.4rem .5rem; border-bottom:1px solid var(--border); }
.output-table .ot-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.output-table .ot-model { color:var(--muted); font-size:.82rem; white-space:nowrap; }
.output-byline { font-size:.83rem; margin:.15rem 0 .75rem; }

.marker-index-ru { color: var(--muted); font-weight: 400; font-size: .92em; }

/* --- Пагинация списка --- */
.pagination { display:flex; gap:.35rem; justify-content:center; margin:1.5rem 0 .5rem; flex-wrap:wrap; }
.pg { min-width:2rem; text-align:center; padding:.35rem .55rem; border:1px solid var(--border); border-radius:var(--radius); color:var(--text-dim); font-size:.9rem; }
.pg:hover { background:#f2f4f7; text-decoration:none; }
.pg-on { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.pg-on:hover { background:var(--accent-dark); }

/* --- Чистка опубликованных --- */
.cleanup-bar { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border); }
.cleanup-bar form { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-size:.875rem; color:var(--text-dim); }
.cleanup-bar input { padding:.25rem .4rem; border:1px solid var(--border); border-radius:6px; }
.run-published { background:#dcfce7; color:#166534; }

.btn-ws { background:#e0e7ff; color:#3730a3; border:1px solid #c7d2fe; }
.btn-ws:hover { background:#c7d2fe; border-color:#6366f1; }
.btn-ws:disabled { opacity:.5; cursor:default; }