/* Минимальный стиль без зависимостей. */
:root { --fg:#1a1a1a; --muted:#6b7280; --bg:#fafafa; --card:#fff; --accent:#2563eb;
        --border:#e5e7eb; --ok:#16a34a; --warn:#d97706; --bad:#dc2626; }
* { box-sizing: border-box; }
body { font: 15px/1.5 system-ui, "Segoe UI", Arial, sans-serif; color: var(--fg);
       background: var(--bg); margin: 0; }
.wrap { max-width: 820px; margin: 0 auto; padding: 24px 16px 64px; }
header.bar { display: flex; gap: 16px; align-items: baseline; margin-bottom: 24px; }
header.bar h1 { font-size: 20px; margin: 0; }
header.bar nav a { color: var(--accent); text-decoration: none; margin-right: 14px; }
h2 { font-size: 17px; }
label { display: block; font-weight: 600; margin: 14px 0 4px; }
.hint { color: var(--muted); font-weight: 400; font-size: 13px; }
input[type=text], textarea, select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: #fff; }
textarea { min-height: 90px; resize: vertical; }
button { background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; }
button.ghost { background: #fff; color: var(--accent); border: 1px solid var(--border); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin: 12px 0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* radius 999px рисует ТАБЛЕТКУ — это верно для короткого статуса в одну строку, но
   плашка атрибута с длинным текстом переносится на 2-3 строки, и такой радиус делает
   из неё ОВАЛ: углы съедают фон, текст оказывается на белом (замечание пользователя
   с телефона 2026-07-21). Поэтому таблетка — только для однострочных статусов
   (.badge.status ниже), а обычная плашка — прямоугольник со скруглением. */
.badge { display: inline-block; padding: 3px 9px; border-radius: 8px; font-size: 12px;
  font-weight: 600; background: #eef2ff; color: #3730a3;
  overflow-wrap: anywhere; max-width: 100%; }
.badge.status, .badge.queued, .badge.claimed, .badge.running,
.badge.done, .badge.partial, .badge.failed { border-radius: 999px; white-space: nowrap; }
/* Длинные URL и слова без пробелов не должны распирать страницу на узком экране. */
.brk, a.offer-link, .rejected-target { overflow-wrap: anywhere; word-break: break-word; }
.badge.queued { background:#fef9c3; color:#854d0e; }
.badge.claimed, .badge.running { background:#dbeafe; color:#1e40af; }
.badge.done { background:#dcfce7; color:#166534; }
.badge.partial { background:#fef3c7; color:#92400e; }
.badge.failed { background:#fee2e2; color:#991b1b; }
.muted { color: var(--muted); }
.price { font-weight: 700; font-size: 16px; }
a.offer-link { color: var(--accent); text-decoration: none; }
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 14px; align-items: end; }
.filters > div { min-width: 0; }
.filters label { margin: 0 0 4px; }
.filters .frange > .lbl { display: block; font-weight: 600; font-size: 13px; margin: 0 0 4px; }
.filters .frange .pair { display: flex; gap: 8px; }
.filters .frange .pair label { flex: 1; margin: 0; }
.filters .frange .checks { display: flex; flex-wrap: wrap; gap: 3px 12px;
  max-height: 132px; overflow: auto; }
.filters .frange .chk { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 400; margin: 0; }
.filters .frange .chk input[type=checkbox] { width: auto; }
.small { font-size: 13px; }
.rej { color: var(--bad); }
.notice { padding: 10px 14px; border-radius: 8px; background:#eff6ff; color:#1e3a8a;
  border: 1px solid #bfdbfe; }
.err { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
code.mono { background:#f3f4f6; padding:1px 6px; border-radius:6px; }