/* Стандартные маршруты (флаг standard_routes_v1): блок «Маршрут» карточки документа — components/sr-route.js.
   Цвет шага задаёт --k (вид шага); цвета рабочего стола документа --dmwv4-* с запасными значениями. */
.sr { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 20px 14px; box-sizing: border-box; border-bottom: 1px solid var(--dmwv4-line2, rgba(255,255,255,.07)); background: var(--dmwv4-chrome2, rgba(8,14,24,.35)); }
.sr__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr__h { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.sr__ver { margin-left: auto; font: 10.5px 'JetBrains Mono', monospace; color: var(--dmwv4-fg3, #7A8BA3); }
.sr__pill { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--tone); border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); background: color-mix(in srgb, var(--tone) 14%, transparent); }

.sr__chain { list-style: none; margin: 0; padding: 2px 0 4px; display: flex; align-items: flex-start; gap: 0; overflow-x: auto; scrollbar-width: thin; }
.sr__col { position: relative; flex: 0 0 auto; min-width: 150px; max-width: 220px; display: flex; flex-direction: column; gap: 6px; padding: 0 22px 0 0; }
.sr__col:not(:last-child)::after { content: ''; position: absolute; top: 1.5px; right: 5px; width: 12px; height: 12px; border-top: 2px solid var(--dmwv4-line5, rgba(255,255,255,.18)); border-right: 2px solid var(--dmwv4-line5, rgba(255,255,255,.18)); transform: translateY(-5px) rotate(45deg); }
.sr__bar { display: block; height: 4px; border-radius: 2px; background: var(--k); }
.sr__kind { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k); }
.sr__stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.sr__step { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--dmwv4-line2, rgba(255,255,255,.08)); background: var(--dmwv4-card, rgba(255,255,255,.03)); }
.sr__mark { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--k); color: #06121F; box-sizing: border-box; }
.sr__txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sr__role { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.sr__who { font-size: 11.5px; color: var(--dmwv4-fg2, #B4C4D6); overflow-wrap: anywhere; }
.sr__note, .sr__cond { font-size: 10.5px; color: var(--dmwv4-fg3, #7A8BA3); overflow-wrap: anywhere; }
.sr__cond { font-style: italic; }

.sr__step--done .sr__mark { background: #2BD98A; border-color: #2BD98A; }
.sr__step--rejected { border-color: rgba(255,92,108,.5); }
.sr__step--rejected .sr__mark { background: #FF5C6C; border-color: #FF5C6C; }
.sr__step--pending .sr__role { font-weight: 500; color: var(--dmwv4-fg2, #B4C4D6); }
.sr__step--skipped { opacity: .45; border-style: dashed; }
.sr__step--skipped .sr__mark { border-style: dashed; border-color: var(--dmwv4-fg4, #5C7189); }

/* текущий шаг: крупнее и с мягкой пульсацией кольца (только пока пользователь не отключил анимацию) */
.sr__step--now { padding: 11px 12px; border-color: var(--k); background: color-mix(in srgb, var(--k) 10%, var(--dmwv4-card, transparent)); }
.sr__step--now .sr__mark { width: 22px; height: 22px; background: var(--k); animation: sr-pulse 1.8s ease-out infinite; }
.sr__step--now .sr__role { font-size: 13.5px; font-weight: 700; }
.sr__step--now .sr__who { font-size: 12.5px; color: var(--dmwv4-fg, #E8F1FA); }
@keyframes sr-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--k) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .sr__step--now .sr__mark { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 35%, transparent); } }

/* телефон: отдельная вертикальная раскладка — шаги друг под другом, стрелок нет */
@media (max-width: 768px) {
  .sr { padding: 12px 14px; }
  .sr__chain { flex-direction: column; overflow: visible; gap: 12px; }
  .sr__col { max-width: none; width: 100%; padding: 0; }
  .sr__col:not(:last-child)::after { display: none; }
  .sr__step { min-height: 44px; }
  .sr__role { font-size: 13px; } .sr__who { font-size: 12.5px; } .sr__note, .sr__cond { font-size: 12px; }
}

/* действия по маршруту: кнопки по видам шагов; «Подписать» — жёлтая, «Отклонить» — красная */
.sr__num { font: 600 12px 'JetBrains Mono', monospace; color: var(--dmwv4-fg, #E8F1FA); padding: 3px 9px; border-radius: 7px; border: 1px solid var(--dmwv4-line4, rgba(255,255,255,.14)); }
.sr__acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.sr__btn { cursor: pointer; min-height: 40px; padding: 0 18px; border-radius: 10px; font: 600 13px/1 inherit; font-family: inherit; color: var(--b); border: 1px solid color-mix(in srgb, var(--b) 55%, transparent); background: color-mix(in srgb, var(--b) 14%, transparent); }
.sr__btn:hover { background: color-mix(in srgb, var(--b) 24%, transparent); }
.sr__btn:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }
.sr__btn--visa { --b: #2BD98A; } .sr__btn--sign { --b: #F5C542; background: #F5C542; color: #1B1500; border-color: #F5C542; }
.sr__btn--sign:hover { background: #FFD65E; } .sr__btn--resolution { --b: #A78BFA; } .sr__btn--ack { --b: #3DD6E8; }
.sr__btn--danger { --b: #FF5C6C; } .sr__btn--neutral { --b: #8A9BB0; }
@media (max-width: 768px) { .sr__acts { flex-direction: column; } .sr__btn { min-height: 46px; width: 100%; font-size: 14px; } }

/* диалоги действий (components/sr-actions.js) — вне рабочего стола документа, цвета свои */
.sr-dlg__err { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #B3261E; background: rgba(255,92,108,.12); }
.sr-dlg__note { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.sr-dlg__sw { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; cursor: pointer; }
.sr-dlg__ok--sign { background: #F5C542; border-color: #F5C542; color: #1B1500; } .sr-dlg__ok--danger { background: #D93B4C; border-color: #D93B4C; color: #fff; }
.sr-dlg__ok--visa { background: #1E9E66; border-color: #1E9E66; color: #fff; } .sr-dlg__ok--resolution { background: #7C5CE0; border-color: #7C5CE0; color: #fff; }
.sr-pick { list-style: none; margin: 8px 0 0; padding: 4px; max-height: 180px; overflow-y: auto; border: 1px solid var(--border, rgba(127,140,160,.35)); border-radius: 8px; }
.sr-pick li label { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px; cursor: pointer; font-size: 14px; }
.sr-pick__none { padding: 8px; font-size: 13px; opacity: .7; }

/* форма создания (components/sr-form.js): блок «Маршрут» в левой колонке и превью цепочки без «текущего» шага */
.srf { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; padding: 14px; border-radius: 11px; border: 1px solid var(--dmw-line2, rgba(255,255,255,.08)); background: var(--dmw-card, rgba(255,255,255,.03)); }
.srf__h { font-size: 13px; font-weight: 700; } .srf__sub { margin-top: -6px; font-size: 12px; line-height: 1.45; color: var(--dmw-fg3, #7A8BA3); }
.srf__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .srf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.srf__l { font-size: 12px; color: var(--dmw-fg3, #7A8BA3); } .srf__s { font-size: 11.5px; color: var(--dmw-fg3, #7A8BA3); }
.srf__chk { display: flex; align-items: flex-start; gap: 8px; min-height: 36px; font-size: 13px; cursor: pointer; }
.srf__note { font-size: 12.5px; line-height: 1.45; color: var(--dmw-fg2, #B4C4D6); }
.srf__hint { align-self: flex-start; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #F5C542; background: rgba(245,197,66,.12); border: 1px solid rgba(245,197,66,.35); }
.sr--preview { padding: 0; border: 0; background: transparent; }
.sr--preview .sr__col { min-width: 124px; max-width: 170px; padding-right: 18px; }
.sr--preview .sr__step { padding: 6px 8px; } .sr--preview .sr__step--now { padding: 6px 8px; background: var(--dmwv4-card, rgba(255,255,255,.03)); border-color: var(--dmwv4-line2, rgba(255,255,255,.08)); }
.sr--preview .sr__step--now .sr__mark { width: 18px; height: 18px; background: transparent; animation: none; } .sr--preview .sr__step--now .sr__role { font-size: 12px; font-weight: 600; } .sr--preview .sr__step--now .sr__who { font-size: 11.5px; color: var(--dmwv4-fg2, #B4C4D6); }
@media (max-width: 768px) { .srf__row { grid-template-columns: 1fr; } .sr--preview .sr__col { min-width: 0; max-width: none; padding-right: 0; } }

/* Лист ознакомления (вкладка карточки): прогресс, «Напомнить всем», адресаты со статусом. Цвет ознакомления — бирюзовый, как в цепочке. */
.sra { display: flex; flex-direction: column; gap: 12px; }
.sra__top { display: flex; flex-direction: column; gap: 8px; } .sra__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; } .sra__sum span { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--dmwv4-fg3, #7A8BA3); }
.sra__bar { height: 6px; border-radius: 3px; background: var(--dmwv4-btn2, rgba(255,255,255,.08)); overflow: hidden; } .sra__bar span { display: block; height: 100%; border-radius: 3px; background: #3DD6E8; transition: width .3s ease; }
.sra__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sra__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sra__row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--dmwv4-line2, rgba(255,255,255,.08)); background: var(--dmwv4-card, rgba(255,255,255,.03)); }
.sra__row--me { border-color: rgba(61,214,232,.4); }
.sra__av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--dmwv4-fg2, #B4C4D6); background: var(--dmwv4-btn, rgba(255,255,255,.06)); }
.sra__row--done .sra__av { color: #04202B; background: #3DD6E8; }
.sra__name { min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; } .sra__me { margin-left: 7px; font-size: 11px; font-weight: 500; color: #3DD6E8; }
.sra__st { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.sra__chip { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; color: var(--dmwv4-fg2, #B4C4D6); background: var(--dmwv4-btn2, rgba(255,255,255,.08)); } .sra__chip--done { color: #3DD6E8; background: rgba(61,214,232,.14); }
.sra__when { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--dmwv4-fg3, #7A8BA3); }
.sra__empty { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dmwv4-fg2, #B4C4D6); }
@media (max-width: 560px) { .sra__row { grid-template-columns: 30px 1fr; } .sra__st { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .sra__bar span { transition: none; } }

/* ── «Типовые маршруты» (/management/workflow-templates): цепочка шагов с перетаскиванием, панель шага, пороги суммы ── */
.wf { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wf-tabs { margin-bottom: 4px; }
.wf-f { display: grid; gap: 4px; min-width: 0; align-content: start; } .wf-f > span { font-size: 12px; color: var(--text-muted); }
.wf-f .form-input, .wf-rule .form-input, .wf-th__row .form-input { width: 100%; box-sizing: border-box; min-height: 40px; }
.wf-meta { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px; align-items: end; }
.wf-banner { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--text-primary); background: color-mix(in srgb, var(--status-warning, #F5C542) 16%, transparent); border: 1px solid color-mix(in srgb, var(--status-warning, #F5C542) 45%, transparent); }
.wf-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); max-width: 68ch; } .wf-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); max-width: 72ch; }

.wf-board { display: flex; align-items: stretch; padding: 14px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-secondary); overflow-x: auto; }
.wf-slot { flex: none; width: 14px; min-height: 76px; border-radius: 8px; display: grid; place-items: center; position: relative; transition: width .15s ease, background-color .15s ease; }
.wf-slot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-top: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); transform: rotate(45deg); opacity: .55; }
.wf-slot span { display: none; font-size: 10.5px; letter-spacing: .02em; color: var(--text-muted); writing-mode: vertical-rl; }
.wf-board.is-dragging .wf-slot { width: 46px; border: 1px dashed var(--border-strong); } .wf-board.is-dragging .wf-slot::before { display: none; } .wf-board.is-dragging .wf-slot span { display: block; }
.wf-slot.is-hot, .wf-col.is-hot { background: color-mix(in srgb, var(--accent-primary) 14%, transparent); border-color: var(--accent-primary); }
.wf-col { flex: none; width: 188px; display: flex; flex-direction: column; gap: 8px; padding: 2px; border-radius: 12px; border: 1px solid transparent; }
.wf-col.is-par { border: 1px dashed var(--border-strong); padding: 8px; } .wf-col__par { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.wf-step { position: relative; display: grid; gap: 2px; width: 100%; box-sizing: border-box; text-align: left; padding: 10px 12px 10px 17px; border-radius: 10px; border: 1px solid var(--border-default); background: var(--surface-elevated, var(--bg-secondary)); color: var(--text-primary); font: inherit; cursor: grab; }
.wf-step:active { cursor: grabbing; } .wf-step.is-cond { border-style: dashed; }
.wf-step__bar { position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--k); }
.wf-step__kind { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k); }
.wf-step__role { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .wf-step__cond { font-size: 12px; line-height: 1.4; color: var(--text-secondary); overflow-wrap: anywhere; }
.wf-step:hover { border-color: var(--border-strong); } .wf-step.is-sel { border-color: var(--accent-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 28%, transparent); }
.wf-add { flex: none; align-self: flex-start; margin-left: 6px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-secondary); font: inherit; font-weight: 600; cursor: pointer; } .wf-add:hover { color: var(--text-primary); border-color: var(--accent-primary); }

.wf-insp { display: grid; gap: 14px; padding: 14px 16px; border: 1px solid var(--border-default); border-left: 4px solid var(--k, var(--border-strong)); border-radius: 12px; background: var(--bg-secondary); }
.wf-insp--empty { border-left-color: var(--border-default); }
.wf-insp__head { display: flex; align-items: center; gap: 10px; } .wf-insp__head h3 { margin: 0; flex: 1 1 auto; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; } .wf-insp__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--k); flex: none; }
.wf-insp__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wf-insp__act { display: flex; flex-wrap: wrap; gap: 8px; } .wf-danger { color: var(--status-danger, #E5484D); }
.wf-seg { display: inline-flex; border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; width: fit-content; margin-bottom: 8px; }
.wf-seg__b { min-height: 38px; padding: 0 14px; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .wf-seg__b + .wf-seg__b { border-left: 1px solid var(--border-default); }
.wf-seg__b.is-on { background: color-mix(in srgb, var(--accent-primary) 16%, transparent); color: var(--text-primary); }
.wf-rule { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, .8fr) minmax(0, 1.6fr) auto; gap: 8px; align-items: start; margin-bottom: 8px; }
.wf-chips { display: flex; flex-wrap: wrap; gap: 6px; } .wf-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 10px; font-size: 13px; cursor: pointer; } .wf-chip:has(input:checked) { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 12%, transparent); }
.wf-rule-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .wf-join { width: auto; min-width: 220px; } .wf-cond-text { margin: 6px 0 0; font-size: 13px; color: var(--text-primary); }

.wf-th { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-secondary); } .wf-th h3 { margin: 0; font-size: 15px; }
.wf-th__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wf-th__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: end; }

.wf-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--border-default); background: var(--bg-primary, var(--bg-secondary)); }
.wf-bar__msg { flex: 1 1 280px; font-size: 13px; color: var(--text-secondary); } .wf-bar__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.wf-errs { margin: 0; padding-left: 18px; color: var(--status-danger, #E5484D); display: grid; gap: 2px; }

@media (max-width: 768px) {
  .wf-meta, .wf-insp__row { grid-template-columns: 1fr; }
  .wf-board { flex-direction: column; padding: 10px; overflow-x: visible; }
  .wf-slot { display: none; } .wf-col { width: 100%; box-sizing: border-box; } .wf-add { align-self: stretch; margin: 8px 0 0; }
  .wf-step { cursor: pointer; }
  .wf-rule { grid-template-columns: 1fr; } .wf-th__row { grid-template-columns: 1fr 1fr; grid-template-areas: 'from to' 'cur role' 'del del'; } .wf-th__row > :nth-child(1) { grid-area: cur; } .wf-th__row > :nth-child(2) { grid-area: from; } .wf-th__row > :nth-child(3) { grid-area: to; } .wf-th__row > :nth-child(4) { grid-area: role; } .wf-th__row > :nth-child(5) { grid-area: del; justify-self: end; }
  .wf-f .form-input, .wf-rule .form-input, .wf-th__row .form-input, .wf-meta .form-input, .wf-insp .form-input { font-size: 16px; min-height: 44px; }
  .wf-bar__btns { width: 100%; flex-direction: column-reverse; } .wf-bar__btns .btn { width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .wf-slot { transition: none; } }

/* ── «Типы документов» (/management/document-types): список шаблонов с пометкой «Устарел» ── */
.dt-search { flex: 0 0 auto; max-width: 420px; }
.dt-row { align-items: center; gap: 12px; padding: 10px 14px; }
.dt-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.dt-row.is-dep .dh-row__t { color: var(--text-secondary); }
.dt-tag { flex: none; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 10px; color: var(--text-secondary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.dt-tag--warn { color: var(--status-warning, #F5C542); background: color-mix(in srgb, var(--status-warning, #F5C542) 16%, transparent); }
.dt-act { flex: none; min-height: 40px; }
@media (max-width: 768px) { .dt-row { flex-wrap: wrap; } .dt-main { flex-basis: 100%; } .dt-act { margin-left: auto; min-height: 44px; } }

/* Расширенная резолюция (B4, флаг document_forms_v2): окно «Наложить резолюцию» */
.sr-rf__row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; }
.sr-rf__hint { display: block; margin-top: 4px; font-size: 12px; opacity: .65; font-weight: 400; }
.sr-rf__hint--inline { display: inline; margin: 0 0 0 4px; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 28px; align-items: center; }
.sr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 13px; background: rgba(124,92,224,.14); border: 1px solid rgba(124,92,224,.35); }
.sr-chip__x { min-width: 28px; min-height: 28px; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; border-radius: 50%; }
.sr-chip__x:hover, .sr-chip__x:focus-visible { background: rgba(255,92,108,.18); }
.sr-rf__tblwrap { overflow-x: auto; margin-bottom: 8px; }
.sr-rf__tbl { width: 100%; border-collapse: separate; border-spacing: 0 6px; min-width: 520px; }
.sr-rf__tbl th { text-align: left; font-size: 11.5px; font-weight: 600; opacity: .65; padding: 0 4px 2px; }
.sr-rf__tbl td { padding: 0 4px 0 0; vertical-align: middle; } .sr-rf__tbl td:last-child { width: 36px; }
@media (max-width: 560px) { .sr-rf__row { grid-template-columns: 1fr; } }