@import url("//fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap");

/* Публичная часть rabsmena.ru — поверх bootstrap.css темы first.

   Раскладка, типографика и формы перенесены из макета «Дизайн калькулятора смен»
   (design system Modernist): гарнитура Archivo, тяжёлые заголовки с плотным
   трекингом, нулевые радиусы, плоские плашки без рамок и теней, структурные
   линии в 2px, микро-заголовки капслоком.

   Палитра оставлена своя, из темы first: accent — #13c4a5 (.btn-primary/.text-primary),
   navy — #233445 (.nav-primary), divider — #e3e8ed (.panel), bg — #f5f6f7 (html). */

:root {
    --rs-accent: #13c4a5;
    --rs-accent-dark: #0fa88e;
    --rs-accent-darker: #0c8a74;
    --rs-navy: #233445;
    --rs-work: var(--rs-accent);
    --rs-night: #0c5c4e;
    --rs-off-bg: #e9edf1;
    --rs-off-text: #4a5568;
    --rs-off-weekend-bg: #d9e0e6;
    --rs-holiday: var(--rs-accent-darker);
    --rs-today: var(--rs-navy);
    --rs-surface: #ffffff;
    /*--rs-bg: #f5f6f7;*/
    --rs-bg: #f6f8fa;
    --rs-divider: #e3e8ed;
    /* Структурная линия макета (там — 40% от цвета текста): рамки полей и кнопок,
       подчёркивание шапки, отбивка подвала. --rs-divider для неё слишком светлый. */
    --rs-line: #aab4bd;
    --rs-text: #313a42;
    --rs-text-muted: #7c8a97;
    --rs-edge: clamp(20px, 5vw, 56px);
}

body {
    background: var(--rs-bg);
    color: var(--rs-text);
    font-family: "Archivo", "Open Sans", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    text-wrap: pretty;
}

.rs-header h1, .rs-main h1, .rs-footer h1,
.rs-header h2, .rs-main h2, .rs-footer h2,
.rs-header h3, .rs-main h3, .rs-footer h3,
.rs-header h4, .rs-main h4, .rs-footer h4,
.rs-header h5, .rs-main h5, .rs-footer h5,
.rs-header h6, .rs-main h6, .rs-footer h6 {
    font-family: inherit;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--rs-text);
}

/* Ширина полосы набора — из макета (.wrap: 1180px + боковой отступ по вьюпорту).
   Строка навигации в макете идёт во всю ширину окна, вне этой полосы. */
.rs-main > .container,
.rs-footer > .container {
    max-width: 1180px;
    width: 100%;
    /*padding-left: var(--rs-edge);
    padding-right: var(--rs-edge);*/
}

/* ---- шапка ---- */

.rs-header {
    background: transparent;
    border-bottom: 2px solid var(--rs-line);
}

.rs-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
}

.rs-nav__brand {
    font-weight: 800;
    font-size: 18px;
    color: var(--rs-text);
    margin-right: auto;
    text-decoration: none;
}

.rs-nav__brand:hover,
.rs-nav__brand:focus {
    color: var(--rs-text);
    text-decoration: none;
}

.rs-nav__link {
    font-size: 14px;
    color: var(--rs-text);
    text-decoration: none;
}

.rs-nav__link:hover,
.rs-nav__link:focus,
.rs-nav__link[aria-current="page"] {
    color: var(--rs-accent-darker);
    text-decoration: none;
}

@media (max-width: 560px) {
    .rs-nav {
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .rs-nav__brand {
        flex: 0 0 100%;
        margin-right: 0;
    }
}

/* ---- полоса контента ---- */

.rs-main {
    padding: 0 0 32px;
    min-height: 60vh;
}

/* Текстовые ссылки — акцентом темы, как в макете (там ссылка красится в accent). */
.rs-main p a,
.rs-main li a,
.rs-main td a {
    color: var(--rs-accent-darker);
}

.rs-main .breadcrumbs {
    font-size: 13px;
    padding: 12px 0 0;
    color: var(--rs-text-muted);
}

.rs-main .breadcrumbs a {
    color: var(--rs-accent-darker);
    text-decoration: none;
}

.rs-main .breadcrumbs a:hover {
    text-decoration: underline;
}

.rs-page-title,
.rs-main h1 {
    /*
      - Минимум: 26px (на мобилках)
      - Плавающий размер: 2.5vw
      - Максимум: 34px (на десктопе)
    */
    font-size: clamp(26px, 2.5vw, 34px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #1e293b; /* Мягкий тёмный вместо чисто чёрного */
    margin: 8px 0 24px; /* Увеличили нижний отступ до сетки карточек */
}

.rs-page-sub,
.rs-main .lead {
    font-size: 17px;
    line-height: 1.6;
    max-width: 68ch;
    color: var(--rs-off-text);
    margin: 0 0 32px;
}

/* ---- подвал ---- */

.rs-footer {
    background: transparent;
    color: var(--rs-text-muted);
    font-size: 13px;
    padding: 32px 0;
    margin-top: 32px;
    border-top: 2px solid var(--rs-line);
}

.rs-footer p {
    margin: 0;
}

.rs-footer a {
    color: var(--rs-accent-darker);
}

/* Витрина сервисов на главной. Грид вместо .row/.col-sm-*: карточек стало три,
   и на флоатах у них разъезжается нижняя граница — height: 100% на плавающей
   колонке не работает. */
.rs-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.rs-service-card {
    display: block;
    background: var(--rs-surface);
    border: 1px solid var(--rs-divider);
    border-radius: 0;
    padding: 24px;
    transition: border-color .2s ease, box-shadow .2s ease;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.rs-service-card:hover {
    border-color: var(--rs-accent);
    box-shadow: 0 4px 14px rgba(19, 196, 165, .12);
    text-decoration: none;
    color: inherit;
}

.rs-service-card .rs-service-icon {
    font-size: 28px;
    color: var(--rs-accent);
    margin-bottom: 12px;
}

/* ---- кнопки ----
   bootstrap.css в public/themes/first/ — немодифицированный вендорный файл,
   акцентные цвета темы (style.css) на публичной части не подключены,
   поэтому .btn-primary/.btn-white переопределяем явно, без расчёта на каскад.
   Форма кнопки — из макета: без скруглений, заголовочное начертание, 14px. */

/* ---- поля форм по макету: подпись 12px без выключки вправо, поле без скруглений.
   Правила общие для всей публичной части — шапка/подвал/типографика тоже общие,
   иначе соседние сервисы (отпускные, бланки) выглядят наполовину перерисованными. */

.rs-main .control-label,
.rs-main .form-horizontal .control-label {
    display: block;
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    color: var(--rs-off-text);
}

.rs-main .form-control {
    height: 36px;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--rs-text);
    background: var(--rs-surface);
    border: 1px solid var(--rs-line);
    border-radius: 0;
    box-shadow: none;
}

.rs-main textarea.form-control {
    height: auto;
}

.rs-main .form-control:hover {
    border-color: var(--rs-off-text);
}

.rs-main .form-control:focus {
    border-color: var(--rs-accent);
    box-shadow: none;
}

.rs-main .alert,
.rs-main .checkbox,
.rs-main .radio-inline {
    margin-top: 0;
}

.rs-main .alert {
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    font-size: 14px;
    padding: 12px 16px;
}

.rs-main .alert ul {
    margin: 0;
    padding-left: 18px;
}

/* Инфо-плашка по макету: подложка акцентом, отбивка слева 2px.
   Голубой .alert-info из вендорного bootstrap с бирюзой темы не сочетается. */
.rs-main .alert-info {
    background: rgba(19, 196, 165, .1);
    color: var(--rs-accent-darker);
    border-left: 2px solid var(--rs-accent);
}

.rs-main .alert-info a {
    color: var(--rs-accent-darker);
    text-decoration: underline;
}

.rs-main .errorMessage {
    font-size: 13px;
    color: #b94a48;
    margin-top: 4px;
}

.rs-main .btn {
    border-radius: 0;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
    padding: 9px 15px;
    text-shadow: none;
    box-shadow: none;
}

.rs-main .btn-sm {
    padding: 6px 10px;
    font-size: 13px;
}

.rs-main .btn-lg {
    padding: 12px 20px;
    font-size: 16px;
}

/* В макете кнопка — flex с gap 6px; у Font Awesome своего отступа нет. */
.rs-main .btn .fa {
    margin-right: 6px;
}

.btn-primary {
    color: #fff;
    background-color: var(--rs-accent);
    border-color: var(--rs-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #fff;
    background-color: var(--rs-accent-dark);
    border-color: var(--rs-accent-dark);
}

/* В теме first .btn-info — акцентная кнопка (style.css), а на публичной части
   подключён только вендорный bootstrap.css, где она голубая. Красим как в теме. */
.btn-info {
    color: #fff;
    background-color: var(--rs-accent);
    border-color: var(--rs-accent);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
    color: #fff;
    background-color: var(--rs-accent-dark);
    border-color: var(--rs-accent-dark);
}

.btn-white {
    box-shadow: none;
    border: 1px solid var(--rs-line);
    color: var(--rs-text);
    background-color: transparent;
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white.active {
    border-color: var(--rs-line);
    color: var(--rs-text);
    background-color: rgba(49, 58, 66, .07);
}

/* ---- .block и .line ----
   Классы темы first, их описывает themes/first/css/style.css. На публичной
   части подключён только вендорный bootstrap.css, поэтому обёртки приезжали
   вовсе без стилей — поля в бланках шли впритык, а разделитель не рисовался.
   Там, где раскладку держит грид (.rs-form-grid), отступ снимается ниже. */

.rs-main .block {
    display: block;
    margin-bottom: 16px;
}

/* Только у блока, которым заканчивается тело панели: нижний отступ там уже
   даёт padding самой панели. Внутри колонок .row отступ нужен — им держится
   расстояние от двухколоночной строки до следующего поля. */
.rs-main .panel-body > .block:last-child {
    margin-bottom: 0;
}

.rs-main .line {
    height: 0;
    margin: 24px 0;
    border-top: 1px solid var(--rs-divider);
}

.rs-main .line-dashed {
    border-top-style: dashed;
}

/* ---- панели ----
   Плоская плашка из макета: без рамки, скругления и тени, заголовок —
   микро-капслок акцентом. Правила общие для всей публичной части, чтобы
   бланки, график смен и отпускные выглядели одинаково. */

.rs-main .panel {
    background: var(--rs-surface);
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 24px;
}

.rs-main .panel-heading {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 24px 24px 0;
}

.rs-main .panel-body {
    padding: 0 24px 24px;
}

/* Верхний отступ телу панели даёт .panel-heading. Там, где заголовка нет
   (карточка ближайшей смены, блок перехода в калькулятор зарплаты), содержимое
   иначе прилипает к верхней кромке плашки. */
.rs-main .panel > .panel-body:first-child {
    padding-top: 24px;
}

.rs-main .panel-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rs-accent-darker);
    margin: 0 0 16px;
}

/* ---- текстовые страницы (политика конфиденциальности, обратная связь) ----
   Без .panel: это не карточка/форма, а просто текст, а .panel-body без
   .panel-heading даёт нулевой верхний паддинг (см. правило выше). */
.rs-text-page h3 {
    margin: 32px 0 12px;
}

.rs-text-page h3:first-child {
    margin-top: 0;
}

.rs-text-page ul {
    padding-left: 22px;
}

.rs-text-page li + li {
    margin-top: 8px;
}

/* Класс темы first (style.css), не подключённого на публичной части.
   Используется формами модуля user (логин/регистрация/восстановление
   пароля), чтобы отбить панель от шапки. */
.rs-main .m-t-large {
    margin-top: 32px;
}

/* ==================== Калькулятор графика смен ==================== */

.rs-schedule-page .rs-field-title .form-control {
    max-width: 420px;
}

/* ---- сетка полей формы «Параметры графика» (по мотивам дизайн-макета калькулятора) ---- */

.rs-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
}

/* Убираем clearfix .panel-body:before/:after — в grid-раскладке он
   попадает в сетку как лишний пустой элемент и создаёт пустую колонку. */
.panel-body.rs-form-grid:before,
.panel-body.rs-form-grid:after {
    display: none;
    content: none;
}

.rs-form-grid > .alert,
.rs-form-grid > .rs-field-wide {
    grid-column: 1 / -1;
}

.rs-form-grid .block {
    margin-bottom: 0;
}

@media (max-width: 860px) {
    .rs-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .rs-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- переключатель типа графика ---- */

.rs-preset-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.rs-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--rs-text);
    cursor: pointer;
}

.rs-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.rs-radio-dot {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--rs-line);
}

.rs-radio:hover .rs-radio-dot {
    border-color: var(--rs-accent);
}

.rs-radio input:checked + .rs-radio-dot {
    border-color: var(--rs-accent);
    background: var(--rs-accent);
    box-shadow: inset 0 0 0 4px #fff;
}

.rs-radio input:focus-visible + .rs-radio-dot {
    outline: 2px solid var(--rs-accent);
    outline-offset: 2px;
}

.rs-custom-cycle-raw {
    display: none;
}

.rs-cycle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.rs-cycle-chip {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 0;
    color: #fff;
    font-weight: 600;
    cursor: grab;
    user-select: none;
}

.rs-cycle-chip--day { background: var(--rs-work); }
.rs-cycle-chip--night { background: var(--rs-night); }
.rs-cycle-chip--off { background: var(--rs-off-bg); color: var(--rs-off-text); }

.rs-cycle-chip__label {
    padding: 8px 10px;
    cursor: pointer;
}

.rs-cycle-chip__arrow {
    background: rgba(0, 0, 0, .15);
    border: 0;
    color: inherit;
    width: 22px;
    height: 100%;
    padding: 8px 0;
    cursor: pointer;
    display: none;
}

.rs-cycle-actions {
    margin-bottom: 10px;
}

/* Ряд кнопок экспорта: flex с gap вместо инлайновых отступов — иначе поле
   со ссылкой, появляясь по кнопке «Ссылка», переносится на новую строку
   вплотную к кнопкам, без вертикального просвета. */
.rs-main .rs-export-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.rs-share-result {
    display: inline-block;
    width: 320px;
    max-width: 100%;
    vertical-align: middle;
}

@media (max-width: 480px) {
    .rs-cycle-chip__arrow {
        display: block;
    }
}

/* ---- настройки отображения: раскрывающийся блок + легенда + баннер ---- */

.rs-settings-toggle {
    cursor: pointer;
}

/* Три колонки: переключатель начала недели и два столбца по два чекбокса.
   Пустая подпись-распорка в чекбоксных колонках ставит их первую строку
   на одну линию с радиокнопками, а не с подписью «Начало недели». */
.rs-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 24px;
}

.rs-settings-body .control-label {
    display: block;
}

.rs-settings-grid .checkbox {
    margin: 0 0 4px;
}

.rs-settings-body .radio-inline,
.rs-settings-body .checkbox label {
    font-size: 14px;
    color: var(--rs-text);
}

@media (max-width: 640px) {
    .rs-settings-grid {
        grid-template-columns: 1fr;
    }

    .rs-settings-grid .rs-settings-spacer {
        display: none;
    }
}

/* ---- легенда ---- */

.rs-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
    margin: 0;
    font-size: 13px;
    color: var(--rs-off-text);
}

.rs-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rs-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 0;
    background: var(--rs-off-bg);
}

.rs-swatch--work { background: var(--rs-work); }
.rs-swatch--night {
    background: var(--rs-night);
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .18) 0 4px, transparent 4px 9px);
}
.rs-swatch--off { background: var(--rs-off-bg); border: 1px solid var(--rs-divider); }
.rs-swatch--today { background: transparent; border: 2px solid var(--rs-today); }
.rs-swatch--holiday { background: transparent; border: 2px dashed var(--rs-holiday); }

/* ---- баннер "ближайший выходной" ---- */

.rs-banner {
    background: rgba(19, 196, 165, .1);
    color: var(--rs-accent-darker);
    border: none;
    border-left: 2px solid var(--rs-accent);
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    font-size: 14px;
    padding: 12px 16px;
    margin: 16px 0 0;
}

/* ---- календарь ----
   По макету — CSS-сетка с автозаполнением (minmax(300px, 1fr)) вместо
   Bootstrap-колонок. Колонки (.col-lg-4/.col-md-6) внутри .rs-calendar-grid —
   плавающие, а карточки месяцев разной высоты (4–6 недель) ломали float-раскладку;
   grid снимает эту проблему и заодно сам подбирает число колонок по ширине.
   Классы .col-* остаются в разметке обоих рендереров (SSR и JS) — гасим их здесь. */

.rs-calendar-grid,
.rs-cmp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin: 0 0 24px;
}

.rs-calendar-grid::before,
.rs-calendar-grid::after,
.rs-cmp-calendar-grid::before,
.rs-cmp-calendar-grid::after {
    display: none;
}

.rs-calendar-grid > [class*="col-"],
.rs-cmp-calendar-grid > [class*="col-"] {
    display: block;
    float: none;
    width: auto;
    padding: 0;
}

.rs-month {
    width: 100%;
    height: 100%;
    background: var(--rs-surface);
    border: none;
    border-radius: 0;
    padding: 16px;
    margin-bottom: 0;
}

.rs-month__title {
    margin: 0 0 12px;
    font-size: 18px;
    color: var(--rs-text);
    text-transform: capitalize;
}

.rs-month__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    table-layout: fixed;
    margin: 0 -3px;
}

.rs-month__table th {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rs-text-muted);
    padding: 0 0 4px;
    text-align: center;
}

.rs-day {
    text-align: center;
    vertical-align: middle;
    height: 40px;
    border-radius: 0;
    background: var(--rs-off-bg);
    color: var(--rs-off-text);
    font-size: 13px;
    font-weight: 600;
}

.rs-day--pad {
    background: transparent;
}

.rs-day--work { background: var(--rs-work); color: #fff; }
.rs-day--night {
    background: var(--rs-night);
    color: #fff;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .15) 0 5px, transparent 5px 11px);
}
.rs-day--off { background: var(--rs-off-bg); color: var(--rs-off-text); }
.rs-day--off-schedule { background: transparent; color: #c3c9d1; font-weight: 400; }

.rs-day--weekend.rs-day--off { background: var(--rs-off-weekend-bg); }

.rs-day--today {
    box-shadow: inset 0 0 0 2px var(--rs-today);
}

.rs-day--holiday-holiday,
.rs-day--holiday-short {
    outline: 2px dashed var(--rs-holiday);
    outline-offset: -2px;
}

.rs-day__num {
    display: block;
    font-weight: 600;
    line-height: 1.1;
}

.rs-day__hours {
    display: block;
    font-size: 10px;
    font-weight: 400;
    opacity: .9;
    margin-top: 1px;
}

.rs-calendar-grid--compact .rs-day {
    height: 30px;
}

.rs-week__num {
    color: var(--rs-text-muted);
    font-size: 11px;
    text-align: center;
    width: 22px;
}

.rs-month__totals {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--rs-text-muted);
}

.rs-month__totals b {
    color: var(--rs-text);
}

.rs-totals {
    background: var(--rs-surface);
    border: none;
    border-radius: 0;
    padding: 24px 10px;
    margin: 0 0 24px;
}

.rs-totals__value {
    font-size: 26px;
    font-weight: 700;
    color: var(--rs-text);
}

.rs-totals__value--small {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.rs-totals__label {
    font-size: 12px;
    color: var(--rs-text-muted);
}

@media (max-width: 767px) {
    .rs-day {
        height: 36px;
        font-size: 11px;
    }
}

.rs-zp-cta .rs-zp-month-select {
    max-width: 320px;
    display: inline-block;
    margin-right: 12px;
}

.rs-zp-hint {
    margin: 8px 0 12px;
}

/* ==================== Сравнение графиков (/grafik-smen/sravnenie) ==================== */

:root {
    --rs-cmp-both-off: var(--rs-accent);
    --rs-cmp-both-work: var(--rs-navy);
    --rs-cmp-only-a: #2f6fed;
    --rs-cmp-only-b: #d97b1f;
}

.rs-cmp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
}

/* Тот же случай, что и у .rs-form-grid: клирфикс .panel-body:before/:after
   попадает в сетку отдельными элементами, из-за чего вторая колонка формы
   съезжала на строку ниже вместо того, чтобы встать рядом с первой. */
.panel-body.rs-cmp-form-grid:before,
.panel-body.rs-cmp-form-grid:after {
    display: none;
    content: none;
}

.rs-cmp-form-grid .rs-cmp-column {
    min-width: 0;
}

/* Количество месяцев и ряд кнопок — общие для обеих колонок, во всю ширину.
   Расстояние между ними держит gap сетки, собственный отступ блоку не нужен. */
.rs-cmp-form-grid > .rs-field-wide {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.rs-cmp-column__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--rs-text);
}

@media (max-width: 767px) {
    .rs-cmp-form-grid {
        grid-template-columns: 1fr;
    }
}

.rs-cmp-day--both-off { background: var(--rs-cmp-both-off); color: #fff; }
.rs-cmp-day--both-work { background: var(--rs-cmp-both-work); color: #fff; }
.rs-cmp-day--only-a { background: var(--rs-cmp-only-a); color: #fff; }
.rs-cmp-day--only-b { background: var(--rs-cmp-only-b); color: #fff; }

.rs-cmp-day--streak {
    box-shadow: inset 0 3px 0 0 rgba(255, 255, 255, .7), inset 0 -3px 0 0 rgba(255, 255, 255, .7);
}
.rs-cmp-day--streak-start { box-shadow: inset 3px 3px 0 0 rgba(255, 255, 255, .7), inset 0 -3px 0 0 rgba(255, 255, 255, .7); }
.rs-cmp-day--streak-end { box-shadow: inset -3px -3px 0 0 rgba(255, 255, 255, .7), inset 0 3px 0 0 rgba(255, 255, 255, .7); }

.rs-cmp-day__marks {
    display: block;
    font-size: 9px;
    letter-spacing: .08em;
    opacity: .9;
    margin-top: 1px;
}

.rs-cmp-day__marks b {
    font-weight: 700;
    margin: 0 1px;
}

.rs-cmp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--rs-off-text);
}

.rs-cmp-legend .rs-swatch--both-off { background: var(--rs-cmp-both-off); }
.rs-cmp-legend .rs-swatch--both-work { background: var(--rs-cmp-both-work); }
.rs-cmp-legend .rs-swatch--only-a { background: var(--rs-cmp-only-a); }
.rs-cmp-legend .rs-swatch--only-b { background: var(--rs-cmp-only-b); }

.rs-cmp-summary__next {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--rs-text);
}

.rs-cmp-nearest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
}

.rs-cmp-nearest-list li {
    padding: 4px 0;
    border-bottom: 1px solid var(--rs-divider);
    break-inside: avoid;
}

@media (max-width: 480px) {
    .rs-cmp-nearest-list {
        columns: 1;
    }
}

/* ==================== Калькулятор отпускных (/otpusknye) ==================== */

.rv-mode-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 16px 0;
}

.rv-advanced-toggle {
    margin-top: 4px;
}

.rv-advanced-toggle a {
    color: var(--rs-accent-darker);
    font-size: 13px;
    text-decoration: none;
}

.rv-advanced-toggle a:hover {
    text-decoration: underline;
}

.rv-advanced-block {
    margin-top: 8px;
}

/* ---- результат ---- */

/* Не .panel по разметке, но по роли — такая же плашка результата, как .rs-totals. */
.rv-result {
    background: var(--rs-surface);
    border: none;
    border-radius: 0;
    padding: 24px;
    margin: 24px 0;
}

.rv-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 16px;
}

.rv-breakdown {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rv-breakdown__item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--rs-divider);
    font-size: 14px;
}

.rv-breakdown__label {
    color: var(--rs-text-muted);
}

.rv-summary__net {
    flex-shrink: 0;
    text-align: right;
    padding-left: 24px;
    border-left: 1px solid var(--rs-divider);
}

.rv-summary__net-label {
    display: block;
    font-size: 13px;
    color: var(--rs-text-muted);
    margin-bottom: 6px;
}

.rv-summary__net-value {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--rs-accent-darker);
    white-space: nowrap;
}

.rv-warning {
    margin-bottom: 10px;
}

.rv-period {
    margin: 20px 0;
    padding-top: 16px;
    border-top: 1px solid var(--rs-divider);
}

.rv-period__title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--rs-accent-darker);
    margin: 0 0 12px;
}

.rv-period__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px dashed var(--rs-divider);
}

.rv-period__row span {
    color: var(--rs-text-muted);
}

.rv-period__row--holidays b {
    text-align: right;
}

.rv-period__note {
    font-size: 12px;
    margin-top: 8px;
}

.rv-howto {
    margin-top: 20px;
}

.rv-howto summary {
    cursor: pointer;
    color: var(--rs-accent-darker);
    font-weight: 600;
    margin-bottom: 10px;
}

.rv-howto__table td {
    font-size: 13px;
    vertical-align: top;
}

.rv-howto__table td:first-child {
    color: var(--rs-text-muted);
    white-space: nowrap;
    width: 1%;
    padding-right: 16px;
}

/* На узком экране таблица «Как посчитано» не помещается: подписи в первой
   колонке идут через white-space: nowrap и распирают страницу (на 375px —
   до 424px, с горизонтальным выездом всей вёрстки). Складываем строку в две:
   подпись сверху, формула снизу. */
@media (max-width: 560px) {
    .rv-howto__table,
    .rv-howto__table > tbody,
    .rv-howto__table > tbody > tr,
    .rv-howto__table > tbody > tr > td {
        display: block;
        width: auto;
    }

    .rv-howto__table > tbody > tr {
        padding: 8px 0;
        border-top: 1px solid var(--rs-divider);
    }

    .rv-howto__table > tbody > tr:first-child {
        border-top: none;
        padding-top: 0;
    }

    .rv-howto__table > tbody > tr > td {
        border-top: none;
        padding: 0;
    }

    /* width: auto нужен именно здесь: правило .rv-howto__table td:first-child
       с width: 1% специфичнее селектора строкой выше и иначе побеждает —
       подпись сжимается в столбик по одному слову. */
    .rv-howto__table > tbody > tr > td:first-child {
        white-space: normal;
        width: auto;
        padding-right: 0;
        margin-bottom: 2px;
    }
}

/* .rv- — калькуляторы, .rs- — график смен и сравнение: типографика общая,
   иначе на странице сравнения h2 оставались бутстраповского размера (30px). */
.rv-seo-text,
.rs-seo-text {
    margin-top: 32px;
}

.rv-seo-text h2,
.rs-seo-text h2 {
    font-size: 18px;
    margin-top: 28px;
}

.rv-faq,
.rs-faq {
    margin-top: 32px;
}

.rv-faq__item {
    margin-bottom: 16px;
}

.rv-faq__item h3 {
    font-size: 15px;
    margin-bottom: 4px;
}

/* Аккордеон FAQ в стиле bootstrap panel-group, но на нативном <details> —
   на публичной части нет jQuery/bootstrap.js, поэтому data-toggle="collapse" не сработал бы. */
.rs-accordion {
    margin-top: 16px;
    border: 1px solid var(--rs-divider);
    background: var(--rs-surface);
}

.rs-accordion__item + .rs-accordion__item {
    border-top: 1px solid var(--rs-divider);
}

.rs-accordion__head {
    position: relative;
    display: block;
    padding: 14px 44px 14px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Родной маркер-треугольник убираем — рисуем свою стрелку */
.rs-accordion__head::-webkit-details-marker {
    display: none;
}

.rs-accordion__head::marker {
    content: '';
}

.rs-accordion__head:hover h3,
.rs-accordion__item[open] > .rs-accordion__head h3 {
    color: var(--rs-accent-darker);
}

.rs-main .rs-accordion__head h3 {
    display: inline;
    font-size: 15px;
    margin: 0;
}

.rs-accordion__head::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--rs-text-muted);
    border-bottom: 2px solid var(--rs-text-muted);
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.rs-accordion__item[open] > .rs-accordion__head::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

.rs-accordion__body {
    padding: 0 16px 14px;
}

.rs-accordion__body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .rv-summary {
        flex-direction: column;
        align-items: stretch;
    }

    .rv-summary__net {
        order: -1;
        text-align: center;
        padding-left: 0;
        padding-bottom: 16px;
        border-left: none;
        border-bottom: 1px solid var(--rs-divider);
    }

    .rv-summary__net-value {
        font-size: 32px;
    }
}

@media print {
    .rv-page .rs-header,
    .rv-page .panel,
    .rv-mode-toggle,
    .rv-advanced-toggle,
    .rv-seo-text,
    .rv-faq {
        display: none !important;
    }
    .rv-result {
        border: none;
        padding: 0;
    }
}

@media print {
    .rs-header, .rs-footer, .panel, .rs-legend, #rs-nearest, .rs-export-actions {
        display: none !important;
    }
    .rs-month {
        box-shadow: none;
        break-inside: avoid;
    }
    /* Всегда 3 колонки в печати, независимо от того, как их разрешит
       посчитать браузер для медиа print (col-lg-4 не всегда срабатывает).
       grid/flex ненадёжны при разрывах страниц — возвращаем float. */
    .rs-calendar-grid,
    .rs-cmp-calendar-grid {
        display: block;
    }
    .rs-calendar-grid > [class*="col-"],
    .rs-cmp-calendar-grid > [class*="col-"] {
        display: block;
        width: 33.333% !important;
        float: left !important;
        padding: 0 5px;
    }
    .rs-day {
        color: #000 !important;
        background: #fff !important;
        border: 1px solid #ccc;
    }
    .rs-day--work, .rs-day--night { font-weight: 700; }
    .rs-day--off { background: #f2f2f2 !important; }
    .rs-day--holiday-holiday,
    .rs-day--holiday-short {
        outline: 2px dashed #000;
    }
}

/* Печать страницы калькулятора (кнопка «Печать» в помесячной таблице взносов).
   Правило печати графика смен выше прячет .panel без ограничения по странице —
   на калькуляторе панели с параметрами и результатом нужно вернуть, иначе
   печатается пустой лист. Специфичность .calc-page .panel перебивает его. */
@media print {
    .calc-page .panel {
        display: block !important;
        break-inside: avoid;
    }

    .calc-page .rv-seo-text,
    .calc-page .rv-faq,
    .calc-page .calc-related-block,
    .calc-page .rs-comments,
    .calc-page .rs-export-actions {
        display: none !important;
    }

    .calc-table th,
    .calc-table td {
        border-bottom: 1px solid #ccc;
    }
}

/* ==================== Бланки документов (/blanki/...) ==================== */

/* Кнопка сабмита живёт внутри <form>, ссылка на пустой бланк — тоже,
   чтобы обе оказались в одном ряду, а не двумя блоками друг под другом. */
.rs-main .docs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0;
}

.docs-actions .btn {
    flex: 0 1 auto;
}

@media (max-width: 480px) {
    .docs-actions .btn {
        flex: 1 1 100%;
    }
}

/* Предпросмотр PDF на странице готового документа (/d/<hash>) */
.docs-pdf-preview {
    display: block;
    width: 100%;
    height: 400px;
    border: 1px solid #ddd;
}

/* Блок «Пример заполненного документа» в SEO-тексте бланка
   (класс .form-img-example пришёл вместе с текстами донора). */
.form-img-example {
    margin: 1.5rem 0;
    text-align: center;
}

.form-img-example img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--rs-divider, #e3e8ed);
    border-radius: 3px;
}


/* Шапка и ограничение ширины в контентный контейнер */
.rs-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
}

.rs-nav {
    max-width: 1200px; /* Совпадает с шириной основного контента */
    margin: 0 auto;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Логотип */
.rs-nav__brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
}

.rs-nav__brand:hover {
    color: #00a884; /* Фирменный зеленый */
}

/* Контейнер ссылок (при желании можно обернуть ссылки на PHP в div) */
.rs-nav__link {
    font-size: 0.95rem;
    font-weight: 500;
    color: #4a5568;
    text-decoration: none;
    margin-left: 24px;
    padding: 18px 0; /* Расширяет кликабельную область */
    position: relative;
    transition: color 0.2s ease;
}

.rs-nav__link:hover {
    color: #00a884;
}

/* Активное состояние (уже поддерживается через aria-current) */
.rs-nav__link[aria-current="page"] {
    color: #00a884;
    font-weight: 600;
}

/* Подчеркивание для активного пункта */
.rs-nav__link[aria-current="page"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
   /* background-color: #00a884;
    border-radius: 2px 2px 0 0;*/
}

/* Адаптив для мобильных устройств */
@media (max-width: 640px) {
    .rs-nav {
        height: auto;
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .rs-nav__link {
        margin-left: 0;
        margin-right: 16px;
        padding: 4px 0;
        display: inline-block;
    }

    .rs-nav__link[aria-current="page"]::after {
        display: none; /* Убираем полоску снизу на мобилках */
    }
}


.breadcrumbs {
    font-size: 0.85rem;
    color: #a0aec0; /* Серый цвет для разделителей » */
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Ссылки в хлебных крошках */
.breadcrumbs a {
    color: #00a884; /* Фирменный изумрудный цвет */
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.breadcrumbs a:hover {
    color: #007a60; /* Металлический темно-зеленый при наведении */
    text-decoration: underline;
}

/* Текущая (активная) страница */
.breadcrumbs span {
    color: #718096; /* Нейтральный серый для текущего раздела */
    font-weight: 400;
}


/* Контейнер карточки сайдбара */
.rs-related-panel {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Заголовок сайдбара */
.rs-related-panel__title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #00a884; /* Изумрудный акцент сайдбара */
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0fdf4; /* Легкая линия под заголовком */
}

/* Список */
.rs-related-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Расстояние между элементами списка */
}

.rs-related-panel__item {
    margin: 0;
    padding: 0;
}

/* Ссылки */
.rs-related-panel__link {
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #00a884;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.15s ease;
}

.rs-related-panel__link:hover {
    color: #007a60; /* Более темный зеленый при наведении */
    text-decoration: underline;
}

/* Блок "Похожие бланки" под контентом (не сайдбар) */
.rs-related-panel--bottom {
    margin-top: 24px;
}

.rs-related-panel__list--grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 24px;
}

@media (min-width: 768px) {
    .rs-related-panel__list--grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: column;
        grid-template-rows: repeat(4, auto);
    }
}

.rs-related-panel__list--grid .rs-related-panel__item {
    background-color: #f0fdf4;
    border-radius: 6px;
}

.rs-related-panel__list--grid .rs-related-panel__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
}

.rs-related-panel__icon {
    color: #00a884;
    flex: 0 0 auto;
}


/* Контейнер футера */
.rs-footer {
    background-color: #f8fafc; /* Светло-серый ненавязчивый фон */
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    margin-top: 60px;
    padding: 40px 0 24px 0;
    font-size: 0.875rem;
}

/* Ограничитель ширины (соответствует ширине шапки и контента) */
.rs-footer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Верхняя часть футера */
.rs-footer__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 24px;
    /*border-bottom: 1px solid #cbd5e1;*/
    gap: 24px;
}

/* Блок бренда */
.rs-footer__brand {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a202c;
    text-decoration: none;
    transition: color 0.2s ease;
}

.rs-footer__brand:hover {
    color: #00a884;
}

.rs-footer__description {
    margin: 6px 0 0 0;
    color: #64748b;
    max-width: 380px;
    line-height: 1.4;
}

/* Колонки навигации — повторяют разделы шапки */
.rs-footer__nav {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.rs-footer__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 140px;
}

/* Колонка калькуляторов: их 12 против 2-4 ссылок в соседних колонках, поэтому
   ссылки внутри неё раскладываются в две колонки — высота блоков сходится. */
.rs-footer__col--calculators {
    min-width: 280px;
}

.rs-footer__col-links--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 8px 24px;
}

.rs-footer__col-title {
    font-weight: 700;
    color: #1a202c;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}

/* Навигация / Ссылки */
.rs-footer__links,
.rs-footer__legal {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.rs-footer__legal {
    justify-content: center;
    margin-bottom: 12px;
}

.rs-footer__link {
    color: #475569;
    text-decoration: none;
    transition: color 0.2s ease;
}

.rs-footer__link:hover {
    color: #00a884;
    text-decoration: underline;
}

/* Нижняя часть футера (Копирайт) */
.rs-footer__bottom {
    padding-top: 20px;
    text-align: center;
}

.rs-footer__copyright {
    margin: 0;
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Адаптив под мобильные устройства */
@media (max-width: 640px) {
    .rs-footer__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .rs-footer__nav {
        justify-content: flex-start;
        gap: 24px;
        width: 100%;
    }

    .rs-footer__links,
    .rs-footer__legal {
        flex-direction: column;
        gap: 10px;
    }

    .rs-footer__legal {
        justify-content: flex-start;
    }

    .rs-footer__bottom {
        text-align: left;
    }
}


/* Общий контейнер страницы */
.rs-category {
    margin-bottom: 60px;
}

/* Главный заголовок категории */
.rs-category__title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1a202c;
    margin: 0 0 32px 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Поиск по каталогу бланков */
.rs-category__search {
    margin-bottom: 24px;
}

.rs-category__search-input {
    width: 100%;
    max-width: 420px;
    padding: 12px 16px;
    font-size: 15px;
    color: #1a202c;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease-in-out;
}

.rs-category__search-input:focus {
    outline: none;
    border-color: #00a884;
}

/* Сетка карточек */
.rs-category__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Карточка документа */
.rs-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.rs-card:hover {
    border-color: #00a884;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 168, 132, 0.08);
}

/* Иконка файла */
.rs-card__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background-color: #f0fdf4;
    color: #00a884;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-card__content {
    flex-grow: 1;
}

/* Название бланка (убран капс) */
.rs-card__title {
    font-size: 17px;
    font-weight: normal;
    color: #1e293b;
    margin: 0 0 6px 0;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.rs-card:hover .rs-card__title {
    color: #00a884;
}

/* Ссылка на закон */
.rs-card__law {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

/* Блок, если бланков нет */
.rs-category__empty {
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    color: #64748b;
}

/* Адаптив для планшетов и мобилок */
@media (max-width: 768px) {
    .rs-category__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rs-category__title {
        font-size: 1.75rem;
        margin-bottom: 20px;
    }

    .rs-category__search-input {
        max-width: none;
    }

    .rs-card {
        padding: 16px;
    }
}

a.rs-card {
    text-decoration: none;
}

/* ---- личный кабинет ---- */

.rs-cabinet-nav {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--rs-line, #e2e8f0);
}

.rs-cabinet-nav__link {
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--rs-text, #4a5568);
    text-decoration: none;
}

.rs-cabinet-nav__link:hover,
.rs-cabinet-nav__link:focus {
    color: var(--rs-accent-darker, #00a884);
    text-decoration: none;
}

.rs-cabinet-nav__link[aria-current="page"] {
    color: var(--rs-accent-darker, #00a884);
    border-bottom: 2px solid var(--rs-accent-darker, #00a884);
}

.rs-inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---- выпадающее меню шапки («Калькуляторы» и т.д.) ---- */

.rs-nav__dropdown {
    position: relative;
    display: inline-block;
    margin-left: 24px;
}

.rs-nav__dropdown .rs-nav__dropdown-toggle {
    margin-left: 0;
}

.rs-nav__dropdown-toggle::after {
    content: '▾';
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    vertical-align: middle;
}

.rs-nav__dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--rs-surface, #fff);
    border: 1px solid var(--rs-divider, #e3e8ed);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 200;
}

.rs-nav__dropdown:hover .rs-nav__dropdown-menu,
.rs-nav__dropdown:focus-within .rs-nav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rs-nav__dropdown-link {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--rs-text, #313a42);
    text-decoration: none;
    white-space: nowrap;
}

.rs-nav__dropdown-link:hover,
.rs-nav__dropdown-link:focus {
    color: var(--rs-accent-darker, #0c8a74);
    background: var(--rs-bg, #f6f8fa);
    text-decoration: none;
}

.rs-nav__dropdown--current > .rs-nav__dropdown-toggle {
    color: var(--rs-accent-darker, #0c8a74);
    font-weight: 600;
}

.rs-nav__dropdown-link[aria-current="page"] {
    color: var(--rs-accent-darker, #0c8a74);
    font-weight: 600;
}

@media (max-width: 640px) {
    .rs-nav__dropdown {
        margin-left: 0;
        width: 100%;
    }

    .rs-nav__dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        box-shadow: none;
        padding: 0 0 0 12px;
        display: none;
    }

    .rs-nav__dropdown:hover .rs-nav__dropdown-menu,
    .rs-nav__dropdown:focus-within .rs-nav__dropdown-menu {
        display: block;
    }
}

/* ---- страницы раздела «Калькуляторы» ---- */

.calc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.calc-list__item {
    display: block;
    background: var(--rs-surface);
    padding: 20px;
    text-decoration: none;
    border: 1px solid var(--rs-divider);
}

.calc-list__item:hover,
.calc-list__item:focus {
    border-color: var(--rs-accent-darker);
    text-decoration: none;
}

.calc-list__title {
    display: block;
    font-weight: 700;
    color: var(--rs-text);
    margin-bottom: 6px;
}

.calc-list__desc {
    display: block;
    font-size: 13px;
    color: var(--rs-text-muted);
}

.calc-rate-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.calc-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Grid/flex-элементы по умолчанию min-width: auto — не сжимаются меньше
   min-content своего содержимого (длинная подпись строки результата), из-за
   чего трек 1fr растягивает карточку сверх ширины экрана на узких мобильных
   (tz-kalkulyatory §13.8). min-width: 0 разрешает картам и строкам сжиматься
   и переносить текст по границе колонки. */
.calc-results > * {
    min-width: 0;
}

@media (max-width: 720px) {
    .calc-results {
        grid-template-columns: 1fr;
    }
}

.calc-result-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--rs-divider);
    font-size: 14px;
    min-width: 0;
}

.calc-result-row__label {
    color: var(--rs-text-muted);
    min-width: 0;
}

/* Лента /grafik-smen/istoriya оформлена как каталог дат /grafik/<slug>/daty/<месяц>:
   тот же список с иконкой-календарём и тот же внутренний отступ панели. Время
   расчёта прижато вправо и переносится под ссылку на узком экране. */
.rs-history-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rs-history-feed-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    padding: 10px 0;
}

.rs-history-feed-icon {
    color: var(--rs-accent);
    flex: none;
}

.rs-history-feed-date {
    margin-left: auto;
    font-size: 13px;
    white-space: nowrap;
}

/* Пагинация ленты — своих стилей у неё не было, ссылки шли слипшейся строкой */
.rs-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 24px 0;
}

.rs-pagination > a,
.rs-pagination > b {
    display: inline-block;
    min-width: 36px;
    padding: 6px 10px;
    border: 1px solid var(--rs-divider);
    background: var(--rs-surface);
    text-align: center;
    font-weight: 600;
}

.rs-pagination > a:hover {
    border-color: var(--rs-accent);
    text-decoration: none;
}

.rs-pagination > b {
    border-color: var(--rs-accent);
    background: var(--rs-accent);
    color: #fff;
}

.rs-nearest-shifts,
.rs-holiday-list {
    font-size: 18px;
    font-weight: 600;
}

.rs-holiday-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rs-holiday-list li {
    padding: 6px 0;
}

.rs-holiday-list-icon {
    color: var(--rs-holiday);
    margin-right: 8px;
}

.rs-date-catalog-list,
.rs-month-catalog-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rs-date-catalog-list li,
.rs-month-catalog-list li {
    padding: 10px 0;
}

.rs-date-catalog-icon,
.rs-month-catalog-icon {
    color: var(--rs-accent);
    margin-right: 8px;
}

.rs-main .panel-body.rs-date-catalog-body {
    padding: 24px;
}

.calc-result-row--total {
    font-size: 18px;
    font-weight: 700;
    color: var(--rs-accent-darker);
    border-bottom: none;
}

/* Витрина /kalkulyatory — группы «Зарплата и налоги» / «Пособия и отпуск» / «Санкции и просрочка» (tz-kalkulyatory §11) */
.calc-group {
    margin-bottom: 32px;
}

.calc-group__title {
    margin-bottom: 12px;
}

/* Блок «Ещё калькуляторы» — перелинковка над комментариями (tz-kalkulyatory §11).
   Без панели и белого фона: заголовок и карточки лежат прямо на фоне страницы. */
.calc-related-block {
    margin: 48px 0 24px;
}

/* Селектор с .rs-main — иначе цвет и трекинг перебивает общее правило `.rs-main h2` */
.rs-main .calc-related__title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rs-accent-darker);
    margin: 0 0 16px;
}

.calc-related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* Широкие таблицы результата (подпериоды ставок, помесячные взносы) — скролл
   внутри своего контейнера, а не выезд за экран на узких экранах (tz-kalkulyatory §13.8) */
.calc-table-wrap {
    overflow-x: auto;
}

.calc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.calc-table th,
.calc-table td {
    padding: 8px 10px;
    text-align: right;
    border-bottom: 1px dashed var(--rs-divider);
    white-space: nowrap;
}

.calc-table th:first-child,
.calc-table td:first-child {
    text-align: left;
}

.calc-multi-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

.calc-multi-row .block,
.calc-multi-row__field {
    margin-bottom: 0;
    flex: 1 1 160px;
}

/* Подпись отдельного поля внутри пары (годы/месяцы стажа, дети/дети-инвалиды):
   у пары есть общая .control-label, но без подписей у каждого поля непонятно,
   что куда вводить — плейсхолдер пропадает, как только введено значение. */
.calc-multi-row__label {
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rs-text-muted);
}

/* Одиночное числовое поле в своей панели (ключевая ставка) — на всю ширину
   панели оно выглядит как ошибка вёрстки */
.calc-field-narrow {
    max-width: 200px;
}

/* Пустое состояние таблиц результата — вместо панели с одним заголовком */
.calc-empty {
    margin: 0;
    color: var(--rs-text-muted);
    font-size: 14px;
}

.rs-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: var(--rs-accent);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    z-index: 1000;
}

.rs-to-top:hover {
    background-color: var(--rs-accent-dark);
}

.rs-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 720px) {
    .rs-to-top {
        right: 16px;
        bottom: 16px;
    }
}

/* ---- Панель выбора карточек «Организация / Сотрудник» над формой бланка
   (tz-spravochniki §7.1) ---- */

.rs-entity-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding: 12px 16px;
    background-color: #f0fdf4;
    border: 1px solid var(--rs-line, #e2e8f0);
    border-radius: 8px;
}

.rs-entity-picker__group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
}

.rs-entity-picker__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--rs-text, #4a5568);
    margin: 0;
}

.rs-entity-picker__results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid var(--rs-line, #e2e8f0);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 240px;
    overflow-y: auto;
}

.rs-entity-picker__results--fio {
    min-width: 260px;
}

.rs-entity-picker__result {
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
}

.rs-entity-picker__result:hover {
    background-color: #f0fdf4;
    color: var(--rs-accent-darker, #0c8a74);
}

.rs-entity-picker__clear {
    align-self: flex-end;
}

/* Поле, подставленное выбором карточки — снимается при ручной правке (JS) */
.rs-autofilled {
    background-color: #f0fdf4;
}

/* ---- Модалка «Добавить из справочника» — массовый выбор в бланках
   с таблицами людей (tz-spravochniki §9) ---- */

.rs-bulk-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 16px;
}

.rs-bulk-modal {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rs-bulk-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rs-bulk-modal__header h3 {
    margin: 0;
    font-size: 18px;
}

.rs-bulk-modal__close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--rs-text, #4a5568);
}

.rs-bulk-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    border: 1px solid var(--rs-line, #e2e8f0);
    border-radius: 6px;
}

.rs-bulk-modal__list li {
    padding: 8px 12px;
    border-bottom: 1px solid var(--rs-line, #e2e8f0);
}

.rs-bulk-modal__list li:last-child {
    border-bottom: none;
}

.rs-bulk-modal__list label {
    font-weight: normal;
    display: block;
    cursor: pointer;
}

.rs-bulk-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ---- Кабинет: списки картотеки /cabinet/sotrudniki, /cabinet/organizacii
   (tz-spravochniki §8.1) ---- */

.rs-entity-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.rs-entity-delete {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.rs-entity-blank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- Обратная связь: тред обращения /cabinet/obrashcheniya/<id> ---- */

.rs-thread {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rs-thread-message {
    border-left: 2px solid var(--rs-line, #aab4bd);
    background: var(--rs-surface, #fff);
    padding: 12px 16px;
}

.rs-thread-message--admin {
    border-left-color: var(--rs-accent-darker, #0c8a74);
}

.rs-thread-message-meta {
    font-size: 12px;
    color: var(--rs-text-muted, #7c8a97);
    margin-bottom: 6px;
}

.rs-thread-message-meta strong {
    color: var(--rs-text, #313a42);
}

.rs-thread-message-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.6;
}

.rs-thread-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.rs-thread-message--reply {
    margin-left: 24px;
    border-left-color: var(--rs-line, #aab4bd);
}

/* ---- Комментарии к странице (бланки, калькуляторы, график смен) ----
   Перенесено с tamali.net, page-comments__* → rs-comments__*.
   Сообщения треда используют общие .rs-thread* стили выше. */

.rs-comments {
    margin: 32px 0 24px;
    padding: 22px;
    background: var(--rs-surface, #fff);
    border: 1px solid var(--rs-divider, #e3e8ed);
}

.rs-comments__title {
    font-size: 20px;
    margin: 0 0 16px;
    font-weight: 600;
}

.rs-comments__count {
    color: var(--rs-text-muted, #7c8a97);
    font-weight: 400;
}

.rs-comments__thread + .rs-comments__thread {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rs-divider, #e3e8ed);
}

.rs-comments__replies {
    margin-top: 8px;
}

.rs-comments__item-actions {
    margin-top: 8px;
}

.rs-comments__reply-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--rs-accent-darker, #0c8a74);
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
}

.rs-comments__reply-btn:hover {
    text-decoration: underline;
}

.rs-comments__form-wrap {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--rs-divider, #e3e8ed);
}

.rs-comments__form-title {
    font-size: 16px;
    margin: 0 0 14px;
}

.rs-comments__reply-banner {
    background: var(--rs-off-bg, #e9edf1);
    border: 1px solid var(--rs-divider, #e3e8ed);
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 13px;
}

.rs-comments__reply-banner[hidden] {
    display: none !important;
}

.rs-comments__reply-cancel {
    margin-left: 10px;
    background: none;
    border: none;
    color: #c00;
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
}

.rs-comments__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.rs-comments__login-link {
    font-size: 13px;
}

.rs-comments__captcha {
    margin: 12px 0;
}

.rs-comments__captcha[hidden] {
    display: none !important;
}

/* ---- Календарь bootstrap-datepicker (TbDatePicker) ----
   Виджет из yii1-core рассчитан на Bootstrap 2: таблица помечена только
   `table-condensed` (без `table`), поэтому в Bootstrap 3 ячейки остаются
   вообще без padding, а стрелки «назад/вперёд» рисуются иконками
   `icon-arrow-left/right` из спрайта BS2, которого на сайте нет — кнопки
   получаются пустыми. Обе дырки закрываем здесь; шаблон виджета в core/
   не трогаем. Селекторы глобальные (без .rs-main) — сам календарь JS
   вешает в конец <body>, вне контейнера страницы. */
.datepicker {
    /* min-width — чтобы вид «месяцы»/«годы» не схлопывался уже вида «дни» */
    min-width: 250px;
    padding: 8px;
    margin-top: 4px;
    font-size: 14px;
    color: var(--rs-text);
    background: var(--rs-surface);
    border: 1px solid var(--rs-line);
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(35, 52, 69, .12);
}

/* Треугольник-«носик» из BS2-стилей виджета — не вписывается в плоскую вёрстку */
.datepicker:before,
.datepicker:after {
    display: none;
}

.datepicker table {
    border-collapse: separate;
    border-spacing: 1px;
}

/* Селектор с `> tbody > tr >` — иначе `.table-condensed > tbody > tr > td`
   из bootstrap.css (в BS3 это правило не требует класса `table`) окажется
   специфичнее и добавит ячейкам свой padding поверх нашей сетки. */
.datepicker table > thead > tr > th,
.datepicker table > tbody > tr > td,
.datepicker table > tfoot > tr > th {
    width: 32px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 0;
    font-weight: 400;
    line-height: 30px;
    vertical-align: middle;
}

/* Шапка: месяц/год и стрелки */
.datepicker thead tr:first-child th {
    color: var(--rs-text);
    font-weight: 600;
}

.datepicker thead tr:first-child th:hover,
.datepicker tfoot th.today:hover {
    background: var(--rs-off-bg);
}

.datepicker th.switch {
    width: auto;
}

/* Стрелки навигации: подменяем BS2-спрайт на шевроны Font Awesome */
.datepicker th.prev i,
.datepicker th.next i {
    display: inline-block;
    font-style: normal;
    line-height: 1;
    color: var(--rs-accent-darker);
}

.datepicker th.prev i:before,
.datepicker th.next i:before {
    font-family: 'FontAwesome';
    font-size: 13px;
}

.datepicker th.prev i:before {
    content: '\f053';
}

.datepicker th.next i:before {
    content: '\f054';
}

/* Дни недели */
.datepicker thead tr + tr th.dow {
    color: var(--rs-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.datepicker td.day {
    cursor: pointer;
}

.datepicker td.day:hover,
.datepicker td span:hover {
    background: var(--rs-off-bg);
}

.datepicker td.old,
.datepicker td.new,
.datepicker td span.old {
    color: var(--rs-text-muted);
}

.datepicker td.today,
.datepicker td.today:hover {
    background: var(--rs-off-bg);
    color: var(--rs-text);
    font-weight: 600;
}

/* Выбранный день/месяц/год — градиент BS2 меняем на плоский акцент.
   Дубли `.active.active` нужны, чтобы перебить такие же селекторы в
   bootstrap-datepicker.css: у элемента класс `active` один, но два раза
   записанный класс поднимает специфичность. */
.datepicker td.active,
.datepicker td.active:hover,
.datepicker td.active.active,
.datepicker td span.active,
.datepicker td span.active.active,
.datepicker td span.active:hover {
    background: var(--rs-accent);
    background-image: none;
    border-color: var(--rs-accent);
    color: #fff;
    text-shadow: none;
    filter: none;
}

/* Сетка месяцев и годов — 4 колонки вместо фиксированных 47px из BS2 */
.datepicker td span {
    width: 23%;
    height: 36px;
    line-height: 36px;
    margin: 1%;
    border-radius: 0;
}

.datepicker tfoot th.today {
    padding: 6px 0;
    height: auto;
    line-height: 1.4;
    color: var(--rs-accent-darker);
    cursor: pointer;
}



.rs-footer {
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 40px 0 24px;
    font-family: inherit;
    color: #475569;
}

.rs-footer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Верхняя часть: Инфо + Навигация */
.rs-footer__top {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid #e2e8f0;
}

/* Блок бренда */
.rs-footer__info {
    flex: 0 0 280px;
}

.rs-footer__brand {
    font-size: 20px;
    font-weight: 700;
    color: #0d9488;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 8px;
}

.rs-footer__brand:hover {
    color: #0f766e;
}

.rs-footer__description {
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

/* Навигация */
.rs-footer__nav {
    display: flex;
    flex: 1;
    justify-content: space-between;
    gap: 32px;
    max-width: 760px;
}

.rs-footer__group + .rs-footer__group {
    margin-top: 24px;
}

.rs-footer__col-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f172a;
    margin: 0 0 12px 0;
}

/* Списки и ссылки */
.rs-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Калькуляторы в 2 колонки через CSS Grid */
.rs-footer__list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    column-gap: 24px;
    row-gap: 8px;
}

.rs-footer__link {
    font-size: 14px;
    color: #0d9488;
    text-decoration: none;
    transition: color 0.15s ease;
}

.rs-footer__link:hover {
    color: #0f766e;
    text-decoration: underline;
}

/* Нижняя часть: Legal & Copyright */
.rs-footer__bottom {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.rs-footer__legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.rs-footer__copyright {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

/* Адаптив под мобильные устройства */
@media (max-width: 900px) {
    .rs-footer__top {
        flex-direction: column;
        gap: 32px;
    }

    .rs-footer__info {
        flex: auto;
    }

    .rs-footer__nav {
        max-width: 100%;
        flex-direction: column;
        gap: 24px;
    }
}

@media (max-width: 600px) {
    .rs-footer__list--grid {
        grid-template-columns: 1fr;
    }

    .rs-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==================== Ревью главной страницы (2026-08-09) ====================
   Правки по UX-ревью первого экрана. Секция идёт последней и сознательно
   переопределяет более ранние правила (.rs-service-card, .rs-nav__link и др.) —
   так же, как это сделано в блоке «Шапка и ограничение ширины» выше. */

/* Полоса набора — в ширину шапки и подвала (1200/20px). Раньше контент был
   1180px с bootstrap-паддингом 15px и не совпадал по левому краю с логотипом,
   из-за чего страница выглядела зажатой между пустыми полями. */
.rs-main > .container,
.rs-footer > .container {
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Подзаголовок первого экрана: был мельче и бледнее строчного текста —
   не читался с первого взгляда. */
.rs-page-sub,
.rs-main .lead {
    font-size: 18px;
    line-height: 1.65;
    color: #475569;
}

/* ---- карточки витрины сервисов ---- */

/* Ссылка-действие прижата к нижнему краю: описания у карточек разной длины,
   и раньше «Построить график» / «Открыть каталог» стояли на разной высоте. */
.rs-service-card {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
}

.rs-service-card h3 {
    font-size: 19px;
    margin: 0 0 10px;
}

.rs-service-card p {
    flex: 1 1 auto;
    margin: 0 0 20px;
    color: #475569;
}

/* На /razrabotka-lichnogo-kabineta у карточек нет ссылки-действия —
   лишний отступ под последним абзацем там не нужен. */
.rs-service-card p:last-child {
    margin-bottom: 0;
}

.rs-service-card > span {
    margin-top: auto;
    font-weight: 600;
    color: var(--rs-accent-darker, #0c8a74);
}

/* Иконка — крупнее и в плашке с подложкой акцента (~12% от --rs-accent). */
.rs-service-card .rs-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: rgba(19, 196, 165, 0.12);
    font-size: 24px;
    color: var(--rs-accent-darker, #0c8a74);
}

/* ---- лента последних расчётов ---- */

/* Бейдж цикла («2/2», «1/3») справа от ссылки: показывает, что по клику
   откроется уже готовый шаблон графика. */
.rs-history-feed-badge {
    margin-left: auto;
    flex: none;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(19, 196, 165, 0.12);
    color: var(--rs-accent-darker, #0c8a74);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

/* Бейдж и дата на одной строке не спорят за margin-left: auto */
.rs-history-feed-badge + .rs-history-feed-date {
    margin-left: 12px;
}

/* ---- шапка ---- */

.rs-nav__menu {
    display: flex;
    align-items: center;
}

/* Пункты меню были мелковаты относительно высоты шапки */
.rs-nav__link {
    font-size: 16px;
}

.rs-nav__dropdown-link {
    font-size: 15px;
}

/* Вход/кабинет — акцентной кнопкой */
.rs-nav__link.rs-nav__cta {
    margin-left: 24px;
    padding: 9px 18px;
    border-radius: 6px;
    background: var(--rs-accent-darker, #0c8a74);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .2s ease;
}

.rs-nav__link.rs-nav__cta:hover,
.rs-nav__link.rs-nav__cta:focus,
.rs-nav__link.rs-nav__cta[aria-current="page"] {
    background: var(--rs-navy, #233445);
    color: #fff;
    text-decoration: none;
}

/* Подчёркивание активного пункта кнопке не нужно */
.rs-nav__cta[aria-current="page"]::after {
    display: none;
}

@media (max-width: 640px) {
    .rs-nav__menu {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .rs-nav__link.rs-nav__cta {
        margin-left: 0;
        margin-top: 8px;
    }
}