/* ============================================================
   ФРДО-песочница — новый дизайн (по макету new_design/).
   Инлайн-стили макета намеренно не переносим: там это экспорт
   визуального билдера, здесь — классы.
   ============================================================ */

:root {
    --ink:        #1f2733;
    --ink-h:      #1a2330;
    --ink-2:      #2a3543;
    --sec:        #5a6676;
    --mut:        #8792a2;
    --mut-2:      #a3adba;

    --blue:       #2b6cb0;
    --blue-d:     #1e4f83;
    --blue-br:    #9dc0e4;
    --blue-bg:    #eff5fc;

    --green:      #2e9e57;
    --green-d:    #1f7a45;
    --green-br:   #a9d6ba;
    --green-bg:   #eef8f1;

    --red:        #d64545;
    --red-tx:     #b23434;

    --cell-err:   #fbe0e0;  --cell-err-br:  #eeb4b4;
    --cell-fix:   #fdf0c8;  --cell-fix-br:  #f0d281;
    --cell-done:  #dff3e5;  --cell-done-br: #a9d6ba;

    --up-bg:      #f2f7fc;  --up-br: #dce8f4;
    --th-bg:      #f4f7fa;
    --br-1:       #dbe2ea;  --br-2: #eef2f6;  --br-3: #e7edf3;
    --card-br:    #e1e7ee;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #fff;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); text-decoration: underline; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 28px 32px 56px; }

/* ---------- Шапка ---------- */
.hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.hdr__title {
    margin: 0; max-width: 520px;
    font-size: 19px; font-weight: 700; line-height: 1.35;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ink-h);
}
.hdr__side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }

.tpl__toggle {
    font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--sec); background: none; border: 0; padding: 2px 0 3px; cursor: pointer;
    /* Штрихи заданы вручную (у text-decoration:dashed длина фиксирована): штрих 8px, промежуток 6px.
       currentColor → цвет штрихов меняется вместе с ховером. padding-bottom = отступ пунктира от слова. */
    text-decoration: none;
    background-image: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 14px);
    background-repeat: repeat-x;
    background-size: 100% 2px;
    background-position: left bottom;
}
.tpl__toggle:hover { color: var(--blue); }
.tpl.is-collapsed { display: none; }

.tpl { display: grid; grid-template-columns: auto auto auto; gap: 10px 12px; align-items: center; }
.tpl__lbl { font-size: 13px; font-weight: 700; color: #3a4656; justify-self: end; }
.tpl__file, .tpl__doc {
    font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    background: #fff; border-radius: 5px; padding: 9px 16px; white-space: nowrap; text-decoration: none;
}
.tpl__file { color: var(--blue); border: 1px solid var(--blue-br); }
.tpl__file:hover { background: var(--blue-bg); border-color: var(--blue); text-decoration: none; }
.tpl__doc { color: var(--green); border: 1px solid var(--green-br); }
.tpl__doc:hover { background: var(--green-bg); border-color: var(--green); color: var(--green); text-decoration: none; }

.cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: #fff; background: var(--blue); border: 1px solid var(--blue);
    border-radius: 5px; padding: 11px 20px; white-space: nowrap; text-decoration: none;
}
.cta:hover { background: var(--blue-d); border-color: var(--blue-d); color: #fff; text-decoration: none; }

/* ---------- Как это работает / ВАЖНО ---------- */
.howto {
    position: relative; margin-top: 22px; max-width: 640px;
    border: 1px solid var(--card-br); border-radius: 10px; padding: 20px 44px 20px 24px;
    box-shadow: 0 1px 2px rgba(20,40,70,.04);
}
.howto__close {
    position: absolute; top: 14px; right: 14px; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: #b3bcc7; font-size: 22px; line-height: 1;
    cursor: pointer; border-radius: 5px;
}
.howto__close:hover { background: #f0f3f7; color: var(--sec); }
.howto__title { font-size: 16px; font-weight: 700; color: var(--green); }
.howto__steps { margin: 12px 0 0; padding-left: 24px; font-size: 15px; line-height: 1.85; color: var(--ink-2); }

/* Свёрнутое состояние: карточка убирается целиком —
   «ВАЖНО!» к этому моменту уже перенесён скриптом под загрузчик. */
.howto.is-collapsed { display: none; }

.important {
    margin-top: 16px; padding: 14px 16px;
    background: var(--green-bg); border: 1px solid #c4e6d1; border-radius: 8px;
}
.important { max-width: 640px; }
.important__ttl { font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--green); }
.important__txt { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* ---------- Загрузчик ---------- */
.up {
    margin-top: 22px; background: var(--up-bg); border: 1px solid var(--up-br); border-radius: 8px;
    padding: 24px 26px; display: flex; gap: 26px; align-items: center;
}
.up.is-drag { border-color: var(--blue); background: var(--blue-bg); }
.up__logo { width: 118px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.up__logo img { width: 64px; height: auto; display: block; }
.up__logoTxt { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #333a48; text-align: center; line-height: 1.25; }
.up__main { flex: 1; min-width: 0; }
.up__lead { font-size: 16px; font-weight: 700; color: #26313f; }
.up__ext { color: var(--blue); }
.up__row { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.up__btn {
    display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--green); background: #fff; border: 1.5px solid var(--green);
    border-radius: 5px; padding: 10px 20px; cursor: pointer;
}
.up__btn:hover { background: var(--green); color: #fff; }
.up__status { font-size: 13px; font-weight: 600; color: #98a2b0; }
.up__status.is-loaded { color: var(--green); }

/* ---------- Служебные состояния ---------- */
.busy { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--card-br); border-radius: 8px; color: var(--sec); }
.err  { margin-top: 18px; padding: 14px 16px; background: #fdecea; border: 1px solid var(--cell-err-br); border-radius: 8px; color: var(--red-tx); }

/* ---------- Результаты ---------- */
.res { margin-top: 30px; }
.res__head { font-size: 16px; font-weight: 700; color: var(--ink); }
.res__head .err  { all: unset; color: var(--red); font-weight: 700; }
.res__head .fix  { color: var(--green); }
.res__head .total { color: var(--sec); font-weight: 400; }

.res__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.legend { display: flex; gap: 22px; align-items: center; font-size: 13px; color: var(--sec); flex-wrap: wrap; }
.legend__i { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 15px; height: 15px; border-radius: 3px; display: inline-block; }
.sw--err  { background: var(--cell-err);  border: 1px solid var(--cell-err-br); }
.sw--fix  { background: var(--cell-fix);  border: 1px solid var(--cell-fix-br); }
.sw--done { background: var(--cell-done); border: 1px solid var(--cell-done-br); }
/* Подсвечиваем «маркером» — фильтр легко теряется среди легенды. */
.onlyerr {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--ink-2);
    cursor: pointer; user-select: none;
    background: var(--cell-fix); border: 1px solid var(--cell-fix-br);
    border-radius: 5px; padding: 7px 12px;
}
.onlyerr:hover { border-color: #d9b45c; background: #fdeab4; }
.onlyerr input { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; }

/* ---------- Таблица ----------
   Раскладку из макета НЕ берём: там table-layout:fixed на 6 колонок.
   В живом файле ФРДО их 30–40 → нужен горизонтальный скролл,
   залипающая шапка и залипающий столбец «№». */
.grid-wrap {
    margin-top: 12px; max-height: 60vh; overflow: auto;
    border: 1px solid var(--br-1); border-radius: 8px; background: #fff;
}
.frdo-grid { border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.frdo-grid th, .frdo-grid td {
    text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--br-2); border-left: 1px solid var(--br-3);
    max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.frdo-grid thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--th-bg); font-weight: 700; color: #3a4656; border-bottom: 1px solid var(--br-1);
}
.frdo-grid th .cl { color: #9aa4b2; font-weight: 700; margin-right: 3px; }
.frdo-grid .rownum {
    position: sticky; left: 0; z-index: 1;
    background: var(--th-bg); color: var(--sec); text-align: left; border-left: 0;
    font-variant-numeric: tabular-nums;
}
.frdo-grid thead .rownum { z-index: 3; }
.frdo-grid td { cursor: text; }
.frdo-grid td.rownum { cursor: default; }
.frdo-grid td.c-err  { background: var(--cell-err);  color: var(--red-tx);   font-weight: 700; cursor: pointer; }
.frdo-grid td.c-fix  { background: var(--cell-fix);  color: #7a5c00;         cursor: pointer; }
.frdo-grid td.c-done { background: var(--cell-done); color: var(--green-d); }
.frdo-grid td.c-check { background: #f8f8f8; color: var(--sec); }
.frdo-grid td.is-editing { outline: 2px solid var(--blue); outline-offset: -2px; }

/* ---------- Кнопки результата ---------- */
.res__more { margin-top: 10px; font-size: 13px; color: var(--mut); }
.res__btns { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.btn {
    font-size: 14px; font-weight: 700; border-radius: 5px; padding: 12px 24px;
    border: none; cursor: pointer; font-family: inherit;
}
.btn--go { background: var(--green); color: #fff; }
.btn--go:hover { background: var(--green-d); }
.btn[disabled] { background: #bfe0cb; cursor: default; }
/* Вторичная кнопка: рамка без заливки — не спорит с главной зелёной. */
.btn--sec { background: #fff; color: var(--sec); border: 1.5px solid #cfd6de; font-weight: 700; }
.btn--sec:hover { border-color: #9aa4b2; color: var(--ink-2); background: #fff; }
.btn--sec[disabled] { background: #f4f6f8; color: #aab3bd; border-color: #d7dde4; }

/* ---------- Форма отчёта об ошибке ---------- */
.rep {
    margin-top: 16px; max-width: 640px;
    border: 1px solid var(--card-br); border-radius: 10px; padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(20,40,70,.04);
}
.rep__lbl { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.rep__lbl + .rep__inp, .rep__area + .rep__lbl { margin-top: 0; }
.rep__opt { font-weight: 400; color: var(--mut); }
.rep__area, .rep__inp {
    display: block; width: 100%; box-sizing: border-box; font: inherit;
    border: 1px solid var(--br-1); border-radius: 5px; padding: 8px 10px; outline: none;
    margin-bottom: 14px;
}
.rep__area { resize: vertical; min-height: 84px; line-height: 1.45; }
.rep__area:focus, .rep__inp:focus { border-color: var(--blue); }
.rep__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rep__err { font-size: 13px; color: var(--red); }
.rep__note { margin-top: 12px; font-size: 12px; color: var(--mut); }
.rep__ok { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--green); }
.res__status { font-size: 14px; font-weight: 700; }
.res__status .allok { color: var(--green); }
.res__status .still { color: var(--red); font-weight: 400; }
.res__note { margin-top: 16px; font-size: 13px; color: var(--mut); line-height: 1.6; }
.res__note b { font-weight: 700; color: var(--sec); }

/* ---------- Тултип ячейки (из макета: тёмный, следует за курсором) ---------- */
.frdo-tip {
    position: fixed; z-index: 100011; max-width: 280px;
    background: var(--ink); color: #fff; font-size: 13px; line-height: 1.5;
    padding: 9px 12px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.22);
    pointer-events: none; white-space: pre-line;
}

/* ---------- Панель правки ячейки (в body, position:fixed) ---------- */
.frdo-edit {
    position: fixed; z-index: 100012; width: 340px; max-width: calc(100vw - 16px);
    background: #fff; border: 1px solid var(--br-1); border-radius: 8px;
    box-shadow: 0 10px 32px rgba(20,40,70,.22); padding: 12px 14px;
    font-size: 13px; color: var(--ink);
}
.frdo-edit__head { font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.frdo-edit__issue { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--br-2); }
.frdo-edit__reason { font-weight: 700; margin-bottom: 3px; }
.frdo-edit__reason.err { color: var(--red-tx); }
.frdo-edit__reason.fix { color: #7a5c00; }
.frdo-edit__can { color: var(--sec); word-break: break-word; }
.frdo-edit__can b { color: var(--green-d); }
.frdo-edit__hint { color: var(--sec); }
.frdo-edit__field { margin-bottom: 10px; }
.frdo-cell-inp {
    display: block; width: 100%; box-sizing: border-box; font: inherit;
    border: 1px solid var(--br-1); border-radius: 4px; padding: 6px 8px; outline: none;
}
.frdo-cell-inp:focus { border-color: var(--blue); }
.frdo-cell-area { min-height: 90px; resize: vertical; line-height: 1.35; }
.frdo-edit__bar { display: flex; gap: 8px; justify-content: flex-end; }
.frdo-edit__apply { background: var(--green); color: #fff; border: 0; border-radius: 4px; padding: 7px 14px; cursor: pointer; font: inherit; }
.frdo-edit__apply:hover { background: var(--green-d); }
.frdo-edit__cancel { background: #fff; color: var(--sec); border: 1px solid var(--br-1); border-radius: 4px; padding: 7px 12px; cursor: pointer; font: inherit; }
.frdo-edit__cancel:hover { border-color: var(--sec); }

/* ---------- Выпадающий справочник ----------
   z-index ОБЯЗАН быть выше панели правки, иначе список ею перекроется. */
.frdo-combo {
    position: fixed; z-index: 100013; box-sizing: border-box; overflow-y: auto;
    background: #fff; border: 1px solid var(--br-1); border-radius: 6px;
    box-shadow: 0 8px 28px rgba(20,40,70,.18); font-size: 13px;
}
.frdo-combo__opt { padding: 7px 11px; cursor: pointer; white-space: normal; line-height: 1.3; border-bottom: 1px solid var(--br-2); }
.frdo-combo__opt:last-child { border-bottom: 0; }
.frdo-combo__opt:hover { background: var(--green-bg); }
.frdo-combo__empty { padding: 7px 11px; color: var(--mut); }

/* ---------- Промо ---------- */
.promo { margin-top: 24px; }
.promo__box {
    max-width: 640px; background: #fff; border: 1px solid var(--card-br); border-radius: 10px;
    padding: 28px 26px; box-shadow: 0 1px 2px rgba(20,40,70,.04);
}
.promo__title { font-size: 19px; font-weight: 700; color: var(--ink-h); margin-bottom: 8px; }
.promo__text { color: var(--sec); margin: 0 0 18px; line-height: 1.6; }

/* ---------- Футер ---------- */
.foot { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--br-2); font-size: 12px; color: var(--mut-2); }

/* ---------- Мобильные ---------- */
@media (max-width: 900px) {
    .hdr { gap: 18px; }
    .hdr__side { align-items: flex-start; width: 100%; }
}
@media (max-width: 640px) {
    .wrap { padding: 20px 14px 40px; }
    .hdr__title { font-size: 17px; }
    .tpl { grid-template-columns: auto 1fr; gap: 8px 10px; }
    .tpl__doc { grid-column: 2; }
    .tpl__file, .tpl__doc { white-space: normal; }
    .cta { width: 100%; justify-content: center; text-align: center; }
    .howto { padding: 18px 40px 18px 16px; }
    .up { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px; }
    .up__logo { flex-direction: row; width: auto; gap: 12px; }
    .up__btn { width: 100%; text-align: center; }
    .res__bar { align-items: flex-start; }
    .grid-wrap { max-height: 70vh; }
    .frdo-grid th, .frdo-grid td { padding: 10px; max-width: 190px; }
    .btn { width: 100%; }
    .frdo-edit { width: calc(100vw - 16px); }
}

/* ── Расхождение шапки с эталоном ФРДО ──────────────────────────────────────
   Жёлтый — испорчено только написание, чиним при выгрузке.
   Красный (.bad) — нарушен состав/порядок колонок, чинить нельзя: заголовки
   легли бы над чужими данными. */
.hdrdiff {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--cell-fix-br);
    border-left: 4px solid var(--cell-fix-br);
    border-radius: 6px;
    background: var(--cell-fix);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}
/* Испорчено только написание — мы уже починили. Зелёный: это не предупреждение, а отчёт о сделанном. */
.hdrdiff.fixed {
    border-color: var(--green-br);
    border-left-color: var(--green);
    background: var(--green-bg);
}
.hdrdiff.fixed .t { color: var(--green-d); }
.hdrdiff__next { font-weight: 600; color: var(--green-d) !important; }
.hdrdiff.bad {
    border-color: var(--cell-err-br);
    border-left-color: var(--red);
    background: var(--cell-err);
}
.hdrdiff .t     { font-weight: 700; margin-bottom: 6px; }
.hdrdiff.bad .t { color: var(--red-tx); }
.hdrdiff p      { margin: 0 0 8px; color: var(--ink-2); }
.hdrdiff ul     { margin: 0; padding-left: 20px; }
.hdrdiff li     { margin: 4px 0; }
.hdrdiff .was   { color: var(--sec); font-size: 13px; }

/* ── Тестовый режим (ОО/СПО/ВО) ────────────────────────────────────────────
   Заметный, но не тревожный: синий информационный, а не жёлтый предупреждающий —
   с файлом всё в порядке, предупреждаем о зрелости проверок. */
.betabox {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--blue-br);
    border-left: 4px solid var(--blue);
    border-radius: 6px;
    background: var(--blue-bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}
.betabox .t { font-weight: 700; margin-bottom: 4px; color: var(--blue-d); }
.betabox p  { margin: 0; color: var(--ink-2); }

/* Кнопка выбора файла на время обработки: гасим и запрещаем повторный выбор. */
.up__btn.is-busy {
    pointer-events: none;
    opacity: .65;
    cursor: default;
}

/* ---------- Массовая правка списковой колонки ---------- */
/* Чекбокс и № слитно в липкой ячейке — без зазора между столбцами. */
.rownum__wrap { display: inline-flex; align-items: center; gap: 5px; cursor: default; white-space: nowrap; }
.rownum__wrap input { margin: 0; cursor: pointer; flex: 0 0 auto; }

/* Заголовок списковой колонки кликабелен — пунктир как сигнал. */
th.js-masshdr { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
th.js-masshdr:hover { color: var(--blue); }

/* Модалка массовой правки. z-index выше комбо (100013), панели (100012), тултипа (100011). */
.frdo-dlg { position: fixed; inset: 0; z-index: 100014; display: flex; align-items: center; justify-content: center; }
.frdo-dlg__bd { position: absolute; inset: 0; background: rgba(20,32,48,.42); }
.frdo-dlg__box {
    position: relative; width: 420px; max-width: calc(100vw - 24px);
    background: #fff; border-radius: 10px; box-shadow: 0 16px 48px rgba(20,40,70,.3); padding: 16px 18px;
}
.frdo-mass__hdr { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.frdo-mass__inp { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.frdo-mass__list { max-height: 260px; overflow-y: auto; border: 1px solid var(--br-1); border-radius: 6px; margin-bottom: 12px; }
.frdo-mass__opt { padding: 7px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--br-2); }
.frdo-mass__opt:last-child { border-bottom: 0; }
.frdo-mass__opt:hover { background: var(--blue-bg); }
.frdo-mass__opt--sel { background: var(--blue-bg); font-weight: 700; }
.frdo-dlg__btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.frdo-dlg__btns .btn { font-size: 13px; padding: 8px 14px; }

/* ---------- Файл проверен, замечаний нет ---------- */
/* Показывается вместо пустого грида: у полностью чистого файла ядро не отдаёт детальных строк,
   и пустая таблица читалась как «сервис не обработал файл». */
.cleanbox {
    margin: 14px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--green-br);
    border-left: 4px solid var(--green);
    border-radius: 8px;
    background: var(--green-bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
}
.cleanbox .t { font-weight: 700; font-size: 15px; color: var(--green-d); margin-bottom: 5px; }
.cleanbox p  { margin: 0; color: var(--ink-2); }

/* ---------- Выбор сертификата для подписи ---------- */
.frdo-cert { padding: 10px 12px; border-bottom: 1px solid var(--br-2); cursor: pointer; }
.frdo-cert:last-child { border-bottom: 0; }
.frdo-cert:hover { background: var(--blue-bg); }
.frdo-cert__cn { font-size: 13px; font-weight: 700; color: var(--ink); }
.frdo-cert__meta { font-size: 12px; color: var(--sec); margin-top: 2px; }

/* ---------- Файл пришёл подписанным (.sig) ---------- */
/* Правки ломают исходную ЭП — предупреждаем, что подписать надо заново. */
.sigbox {
    margin: 14px 0 0;
    padding: 11px 14px;
    border: 1px solid var(--cell-fix-br);
    border-left: 4px solid var(--cell-fix-br);
    border-radius: 6px;
    background: var(--cell-fix);
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
}

/* ---------- Форма «Написать разработчику» ---------- */
.cform {
    max-width: 560px; margin: 18px 0 0;
    border: 1px solid var(--card-br); border-radius: 10px; padding: 18px 20px;
    background: #fff; box-shadow: 0 1px 2px rgba(20,40,70,.04);
}
.cform__ttl { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.cform__lbl { display: block; font-size: 13px; font-weight: 700; color: var(--sec); margin: 10px 0 4px; }
.cform__inp, .cform__area {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
    border: 1px solid var(--br-1); border-radius: 5px; padding: 8px 10px; outline: none;
}
.cform__inp:focus, .cform__area:focus { border-color: var(--blue); }
.cform__area { resize: vertical; }
.cform__bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.cform__bar .btn { font-size: 13px; padding: 9px 18px; }
.cform__err { font-size: 13px; color: var(--red-tx); }
.cform__ok  { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--green); }

/* Ловушка для ботов: человек этих полей не видит и не заполнит.
   Не display:none — часть ботов такие поля пропускает; уводим за пределы экрана. */
.cform__trap {
    position: absolute; left: -9999px; top: -9999px;
    width: 1px; height: 1px; overflow: hidden; opacity: 0;
}