/*
 * Стили сайта bizlida.by (публичная часть и кабинет). Без сборки: один файл, порядок слоёв ниже.
 *
 * Слои по возрастанию приоритета (правило из более позднего слоя побеждает независимо от специфичности):
 *   reset      — сброс браузерных стилей
 *   base       — элементы, типографика, поля ввода, иконочный шрифт
 *   layout     — каркас страницы: контейнер, шапка, колонки, подвал
 *   components — общие компоненты: кнопки, уведомления, формы, списки, карточки, тексты из CMS (.prose)
 *   modules    — страницы модулей
 *   utilities  — вспомогательные классы
 *
 * Без вложенности CSS (nesting): Safari до 16.5 её не поддерживает. Ширины — в rem, брейкпоинты — в em:
 * 36em (576px), 48em (768px), 64em (1024px), 78.75em (1260px).
 */
@layer reset, base, layout, components, modules, utilities;

/* Иконочные шрифты */
@font-face {
    font-family: 'bl-icons';
    src: url('../fonts/bl-icons.woff?v1.3') format('woff'), url('../fonts/bl-icons.ttf?v1.3') format('truetype');
    font-display: block;
}

@font-face {
    font-family: 'weather';
    src: url('../fonts/weather.woff?v2') format('woff'), url('../fonts/weather.ttf?v2') format('truetype');
    font-display: block;
}


/* Токены */
:root {
    /* Цвета. Текст на фирменной бирюзе — тёмный (--c-on-brand): белый на #00c3ac нечитаем (2.2:1) */
    --c-ink: #1a2632;
    --c-text-soft: #3d4852;
    --c-muted: #66707a;
    --c-muted-soft: #a2aab1;
    --c-brand: #00c3ac;
    --c-brand-hover: #00ad99;
    --c-brand-soft: #e8f8f5;
    --c-brand-text: #00796b;
    --c-on-brand: #1a2632;
    --c-accent: #fe4a4a;
    --c-accent-text: #d93030;
    --c-navy: #1e3652;
    --c-info: #0b6fa4;
    --c-info-soft: #e8f3fa;
    --c-dark: #1d232f;
    --c-bg: #fff;
    --c-bg-page: #f6f6f6;
    --c-bg-header: #f1f0ed;
    --c-bg-soft: #f9f8f5;
    --c-bg-muted: #f7f7f7;
    --c-border: #e7eaec;
    --c-border-strong: #d5dadd;
    --c-input-border: #8a939b;
    --c-success: #2e7d4f;
    --c-success-soft: #e9f6ee;
    --c-danger: #c62828;
    --c-danger-soft: #fdeceb;
    --c-warning: #b35f0c;
    --c-warning-soft: #fff3e3;
    --c-price: #ffdf7f;
    --c-hot: #ffb400;
    --c-premium: #ff9800;
    --c-favorite: #ff8100;

    /* Шрифт */
    --font: Arimo, Arial, sans-serif;
    --fs-caps: .75rem;
    --fs-meta: .8125rem;
    --fs-small: .875rem;
    --fs-base: .9375rem;
    --fs-prose: 1.0625rem;
    --fs-lead: 1.125rem;
    --fs-title: 1.25rem;
    --fs-h3: clamp(1.1875rem, 1.05rem + .6vw, 1.375rem);
    --fs-h2: clamp(1.3125rem, 1.1rem + 1vw, 1.625rem);
    --fs-h1: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
    --lh-tight: 1.2;
    --lh-base: 1.5;
    --lh-prose: 1.65;

    /* Отступы и размеры */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --gutter: clamp(1rem, .5rem + 1.5vw, 1.5rem);
    --container: 78.75rem;
    --sidebar: 18.125rem;
    --header-h: 3.75rem;
    --radius-s: 3px;
    --radius: 4px;
    --radius-l: 8px;
    --control-h: 2.5rem;
    --transition: .2s ease;

    /* Галочка списков .record-list */
    --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300796b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}


@layer reset {
    *, *::before, *::after                  { box-sizing: border-box; }
    html                                    { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body                                    { margin: 0; }
    img, svg, video, canvas, iframe, embed, object { max-width: 100%; }
    img, video                              { height: auto; }
    img                                     { border: 0; }
    input, button, textarea, select         { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
    button, [type=button], [type=submit]    { cursor: pointer; }
    button[disabled]                        { cursor: default; }
    textarea                                { resize: vertical; }
    table                                   { border-collapse: collapse; border-spacing: 0; }
    fieldset                                { min-width: 0; margin: 0; padding: 0; border: 0; }
    legend                                  { padding: 0; }
    b, strong                               { font-weight: 700; }
    small                                   { font-size: 80%; }
    sub, sup                                { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
    sup                                     { top: -.5em; }
    sub                                     { bottom: -.25em; }
    abbr[title]                             { text-decoration: underline dotted; }
    [hidden]                                { display: none !important; }
    input:-webkit-autofill                  { box-shadow: 0 0 0 1000px #fff inset; }
}


@layer base {
    html                                    { color-scheme: light; scroll-padding-top: var(--sp-4); }
    @media (prefers-reduced-motion: no-preference) {
        html                                { scroll-behavior: smooth; }
    }
    body                                    { color: var(--c-ink); font: var(--fs-base)/var(--lh-base) var(--font); background: var(--c-bg-page); overflow-wrap: break-word; }

    /* Заголовки */
    h1, h2, h3, h4, h5, h6                  { margin: 1.5em 0 .75em; font-weight: 700; line-height: var(--lh-tight); text-wrap: balance; }
    h1                                      { margin-top: 0; font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -.01em; }
    /* Счётчик в заголовке: <h1>Вакансии <sup>620</sup></h1> */
    h1 sup                                  { top: 0; display: inline-block; margin-left: .25rem; padding: .1875rem .5rem; color: var(--c-muted); font-size: var(--fs-meta); font-weight: 700; line-height: 1.2; letter-spacing: 0; vertical-align: .75em; background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: 999px; }
    h2                                      { font-size: var(--fs-h2); }
    h3                                      { font-size: var(--fs-h3); }
    h4                                      { font-size: var(--fs-lead); }
    h5, h6                                  { font-size: var(--fs-base); }

    p                                       { margin: 1em 0; }
    ul                                      { list-style: square outside; }
    hr                                      { margin: var(--sp-5) 0; border: 0; border-top: 1px solid var(--c-border-strong); }
    blockquote, q                           { display: block; margin: 1.5em 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); color: var(--c-text-soft); font-style: italic; border-left: 4px solid var(--c-border-strong); }
    blockquote p, q p                       { margin: 0; }
    blockquote p + p, q p + p               { margin-top: 1em; }

    /* Ссылки и фокус */
    a                                       { color: var(--c-brand-text); text-underline-offset: .15em; transition: color var(--transition); }
    a:hover                                 { color: var(--c-accent-text); }
    :focus-visible                          { outline: 2px solid var(--c-info); outline-offset: 2px; }

    /* Таблицы */
    table                                   { width: 100%; }
    th                                      { font-weight: 700; }
    th, td                                  { padding: 5px; vertical-align: top; }

    /* Поля ввода. Размер шрифта 1rem: в iOS поле мельче 16px увеличивает страницу при фокусе */
    input, textarea, select                 { width: 100%; min-height: var(--control-h); padding: .4375rem .625rem; font-size: 1rem; line-height: 1.3; background: var(--c-bg); border: 1px solid var(--c-input-border); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); }
    input:focus, textarea:focus, select:focus { border-color: var(--c-ink); outline: 0; box-shadow: 0 0 0 3px rgb(11 111 164 / .25); }
    input[type=checkbox], input[type=radio] { width: auto; min-height: 0; margin: 0 .375rem 0 0; padding: 0; vertical-align: -.125em; accent-color: var(--c-brand-text); box-shadow: none; }
    input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--c-info); outline-offset: 2px; }
    input[type=file]                        { padding: .3125rem; }
    input[type=file]::file-selector-button  { margin-right: .75rem; padding: .375rem .75rem; color: var(--c-ink); font: 700 var(--fs-caps)/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--radius-s); cursor: pointer; }
    input[type=file]::file-selector-button:hover { background: var(--c-brand); border-color: var(--c-brand); }
    textarea                                { min-height: 6.25rem; }
    select                                  { padding-right: 2rem; appearance: none; background: var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231a2632' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .75rem center; }
    select[multiple]                        { padding-right: .625rem; background-image: none; }
    ::placeholder                           { color: var(--c-muted); opacity: 1; }
    label                                   { line-height: 1.3; }

    /* Иконочный шрифт: <span class="bl-f-ico bl-i-…" aria-hidden="true"> */
    .bl-f-ico, .bl-weather-ico              { display: inline-block; color: #000; font-weight: 400 !important; font-style: normal; line-height: 1; text-decoration: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color var(--transition); }
    .bl-f-ico                               { font-family: bl-icons !important; }
    .bl-weather-ico                         { font-family: weather !important; cursor: help; }
    .bl-i-dislike::before                 { content: "\e901"; }
    .bl-i-dollar::before                  { content: "$"; }
    .bl-i-drink::before                   { content: "\e1026"; }
    .bl-i-enter::before                   { content: "\e1030"; }
    .bl-i-house::before                   { content: "\e1028"; }
    .bl-i-like::before                    { content: "\e900"; }
    .bl-i-list::before                    { content: "\e1027"; }
    .bl-i-magnifier::before               { content: "\e1025"; }
    .bl-i-speaker::before                 { content: "\e102f"; }
    .bl-i-tr-down::before                 { content: "\e1029"; }
    .bl-i-draft::before                   { content: "\e101e"; }
    .bl-i-facebook::before                { content: "\e103e"; }
    .bl-i-gplus::before                   { content: "\e103c"; }
    .bl-i-odk::before                     { content: "\e1033"; }
    .bl-i-vk::before                      { content: "\e103d"; }
    .bl-i-close::before                   { content: "\e102b"; }
    .bl-i-edit::before                    { content: "\e101f"; }
    .bl-i-location2::before               { content: "\e1037"; }
    .bl-i-star::before                    { content: "\e101d"; }
    .bl-i-user::before                    { content: "\e1021"; }
    .bl-i-up::before                      { content: "\e102c"; }
    .bl-i-comments::before                { content: "\e102d"; }
    .wt-sun::before                       { content: "\e600"; }
    .wt-moon::before                      { content: "\e601"; }
    .wt-partly-cloudy-day::before         { content: "\e602"; }
    .wt-partly-cloudy-night::before       { content: "\e603"; }
    .wt-cloudy::before                    { content: "\e604"; }
    .wt-occasional-rain-day::before       { content: "\e605"; }
    .wt-occasional-rain-night::before     { content: "\e606"; }
    .wt-rain::before                      { content: "\e607"; }
    .wt-occasional-downpour-day::before   { content: "\e608"; }
    .wt-occasional-downpour-night::before { content: "\e609"; }
    .wt-downpour::before                  { content: "\e60a"; }
    .wt-snow::before                      { content: "\e60b"; }
    .svg-ico                                { display: inline-block; width: 1em; height: 1em; fill: currentColor; stroke: currentColor; stroke-width: 0; }

    /* Значки типов файлов */
    .bl-file                                { display: inline-block; width: 23px; height: 28px; margin-right: 10px; vertical-align: -9px; background: url(../images/element/format-icon.png) 0 0 no-repeat; }
    .bl-rar                                 { background-position: 0 0; }
    .bl-jpeg                                { background-position: -23px 0; }
    .bl-gif                                 { background-position: -46px 0; }
    .bl-pdf                                 { background-position: -69px 0; }
    .bl-word                                { background-position: -92px 0; }
    .bl-excel                               { background-position: -115px 0; }
    .bl-powerpoint                          { background-position: -138px 0; }
    .bl-file-size                           { margin-left: 10px; color: var(--c-muted); font-size: var(--fs-caps); }
}


@layer layout {
    .skip-link                              { position: absolute; top: -10rem; left: var(--sp-2); z-index: 1000; padding: var(--sp-2) var(--sp-4); color: var(--c-on-brand); font-weight: 700; background: var(--c-brand); }
    .skip-link:focus                        { top: var(--sp-2); }

    /* Страница: белая колонка до 1260px на сером фоне */
    .site-wrap                              { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; background: var(--c-bg); }
    .bl-container                           { padding-inline: var(--gutter); }

    /* Верхний баннер A1 (1260×90): картинка ужимается под ширину контейнера */
    .banner-a1 .banner__image               { width: 100%; }

    /* Шапка */
    .site-header                            { position: relative; z-index: 100; margin-bottom: var(--sp-3); }
    .site-header__bar                       { position: relative; display: flex; align-items: stretch; min-height: var(--header-h); background: var(--c-bg-header); }
    .site-logo                              { flex: none; width: var(--header-h); height: var(--header-h); background: url(../images/logo.svg) center / cover; }
    .site-header__menu                      { display: flex; flex: 1; align-items: center; min-width: 0; }
    .main-menu__list                        { display: flex; margin: 0; padding: 0; list-style: none; }
    .main-menu__link                        { display: flex; align-items: center; height: var(--header-h); padding: 0 .9375rem; color: var(--c-ink); font-size: .875rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; transition: background-color var(--transition); }
    .main-menu__link:hover,
    .main-menu__link.sel                    { color: var(--c-on-brand); background: var(--c-brand); }
    .header-info                            { display: flex; gap: var(--sp-5); margin: 0 var(--sp-5) 0 auto; padding: 0; font-weight: 700; list-style: none; white-space: nowrap; }
    .header-info a                          { color: var(--c-brand-text); text-decoration: none; }
    .header-info a:hover                    { color: var(--c-accent-text); }
    .header-info .bl-i-dollar::before       { content: "$\00a0"; }
    .header-info .bl-weather-ico            { margin-right: .1875rem; color: inherit; font-size: 1.25rem; vertical-align: -.1875rem; }
    .site-header__burger                    { display: none; }

    /* Выбор языка в шапке: РУС БЕЛ, текущий подчёркнут, другой — ссылка */
    .lang-switch                            { display: flex; flex: none; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3); font-size: .875rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
    .lang-switch__item                      { color: var(--c-brand-text); text-decoration: none; }
    a.lang-switch__item:hover               { color: var(--c-accent-text); }
    .lang-switch__item[aria-current]        { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }

    /* Вход и меню пользователя в шапке */
    .site-user                              { display: flex; flex: none; align-items: stretch; }
    .site-user__login                       { display: flex; align-items: center; gap: .375rem; padding: 0 var(--sp-4); color: var(--c-ink); font-size: .875rem; font-weight: 700; text-decoration: none; text-transform: uppercase; }
    .site-user__login .bl-f-ico             { color: var(--c-brand-text); font-size: 1rem; }
    .site-user__login:hover,
    .site-user__login[aria-expanded=true]   { color: var(--c-on-brand); background: var(--c-brand); }
    .site-user__login:hover .bl-f-ico,
    .site-user__login[aria-expanded=true] .bl-f-ico { color: inherit; }
    .site-user__avatar                      { position: relative; display: block; width: var(--header-h); height: var(--header-h); background: url(../images/element/user.jpg) center / cover; }
    .site-user__avatar img                  { display: block; width: 100%; height: 100%; object-fit: cover; }
    .msg-num                                { position: absolute; right: .25rem; bottom: .25rem; min-width: 1.25rem; padding: .1875rem; color: #fff; font-size: var(--fs-caps); line-height: 1; text-align: center; background: rgb(26 38 50 / .8); border: 1px solid rgb(255 255 255 / .5); border-radius: var(--radius-s); }
    .site-user__toggle                      { width: 2.75rem; padding: 0; color: var(--c-ink); background: none; border: 0; }
    .site-user__toggle:hover,
    .site-user__toggle[aria-expanded=true]  { background: var(--c-brand); }
    .site-user__toggle .bl-f-ico            { color: inherit; font-size: .875rem; transition: transform var(--transition); }
    .site-user__toggle[aria-expanded=true] .bl-f-ico { transform: rotate(180deg); }

    .site-user__panel                       { position: absolute; top: 100%; right: 0; z-index: 200; display: none; color: var(--c-ink); background: var(--c-brand); box-shadow: 0 .75rem 1.5rem rgb(26 38 50 / .2); }
    .site-user__panel.is-open               { display: block; }
    .user-box                               { width: 13rem; padding: var(--sp-4) var(--sp-5); }
    .user-menu                              { margin: 0; padding: 0; list-style: none; }
    .user-menu li + li                      { margin-top: var(--sp-3); }
    .user-menu a                            { display: block; color: var(--c-ink); font-size: .8125rem; font-weight: 700; text-decoration: none; text-transform: uppercase; }
    .user-menu a:hover                      { text-decoration: underline; }

    .login-box                              { width: min(46rem, 100vw); gap: var(--sp-5) var(--sp-6); padding: var(--sp-5) var(--sp-6); }
    .login-box.is-open                      { display: grid; grid-template-columns: 1fr 1fr; }
    .login-box__title                       { margin: 0 0 var(--sp-3); font-size: var(--fs-title); }
    .login-box__col > * + .login-box__title { margin-top: var(--sp-5); }
    .login-box__form                        { display: grid; gap: var(--sp-3); }
    .login-box__form input:not([type=checkbox]) { border-color: transparent; }
    .login-box__row                         { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-small); }
    .login-box a:not(.bl-btn)               { color: var(--c-ink); }
    .login-box p                            { margin: 0 0 var(--sp-3); font-size: var(--fs-small); }
    .login-box .bl-btn                      { justify-self: start; color: var(--c-ink); background: transparent; border-color: var(--c-ink); }
    .login-box .bl-btn:hover                { color: var(--c-brand); background: var(--c-ink); }

    /* Кнопки входа через соцсети (шапка, вход, регистрация) */
    .social-login                           { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
    .social-login a                         { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; font-size: 1.75rem; text-decoration: none; background: #fff; border-radius: var(--radius); }
    .social-login .bl-i-facebook            { color: #45619d; }
    .social-login .bl-i-vk                  { color: #54769a; }
    .social-login .bl-i-gplus               { color: #df5138; }
    .social-login .bl-i-odk                 { color: #ee8208; }

    /* Подменю раздела: всегда одна строка, что не поместилось — прокручивается, край ленты затухает */
    /* Текущий пункт — белая вкладка со скруглёнными верхними углами, сливается с контентом: нижняя линия полосы
       нарисована тенью под пунктами */
    .subnav                                 { background: var(--c-bg-soft); border-top: 1px solid rgb(26 38 50 / .06); box-shadow: inset 0 -1px 0 var(--c-border); }
    .subnav__list                           { position: relative; display: flex; overflow-x: auto; margin: 0; padding: .375rem calc(var(--gutter) - .875rem) 0; font-size: var(--fs-small); list-style: none; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
    .subnav__list::-webkit-scrollbar        { display: none; }
    .subnav__link                           { display: block; padding: .5rem .875rem .5625rem; color: var(--c-text-soft); text-decoration: none; white-space: nowrap; border-radius: var(--radius-l) var(--radius-l) 0 0; transition: color var(--transition), background-color var(--transition); }
    .subnav__link:hover                     { color: var(--c-ink); background: rgb(26 38 50 / .04); }
    .subnav__link[aria-current]             { color: var(--c-ink); font-weight: 700; background: var(--c-bg); box-shadow: inset 0 2px 0 var(--c-brand), inset 1px 0 0 var(--c-border), inset -1px 0 0 var(--c-border); }

    /* Основная часть: крошки, заголовок, контент и сайдбар */
    .site-main                              { padding: 0 var(--gutter); }
    .breadcrumbs                            { margin: var(--sp-4) 0 var(--sp-2); color: var(--c-muted); font-size: var(--fs-meta); }
    .breadcrumbs__list                      { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
    .breadcrumbs__list > li + li::before    { display: inline-block; margin: 0 .4375rem; content: ""; border-style: solid; border-width: 4px 0 4px 5px; border-color: transparent transparent transparent currentColor; }
    .breadcrumbs a                          { color: var(--c-muted); text-decoration: none; }
    .breadcrumbs a:hover                    { color: var(--c-accent-text); }

    .page-title                             { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin: var(--sp-6) 0 var(--sp-5); }
    .breadcrumbs + .page-title              { margin-top: var(--sp-3); }
    .page-title h1                          { margin: 0; }
    .page-title__actions                    { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
    .page-title .link                       { color: var(--c-ink); text-decoration: none; }
    .page-title .link .bl-f-ico             { margin-right: .3125rem; color: var(--c-muted); font-size: .75rem; }
    .page-title .link:hover,
    .page-title .link:hover .bl-f-ico       { color: var(--c-accent-text); }

    .site-columns                           { display: grid; gap: var(--sp-6) var(--gutter); }
    .site-content, .site-sidebar            { min-width: 0; }
    .site-content                           { container: content / inline-size; }

    /* Подвал */
    .site-footer                            { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); padding: var(--sp-5) var(--gutter); color: var(--c-muted); font-size: var(--fs-meta); border-top: 1px solid var(--c-border); }
    .site-footer p                          { margin: .3125rem 0 0; }
    .site-footer a                          { color: var(--c-ink); }
    .site-footer a:hover                    { color: var(--c-accent-text); }
    .footer-menu                            { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-3); padding: 0; font-size: var(--fs-small); list-style: none; }
    .site-footer__up                        { justify-self: start; }
    .bl-social                              { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; font-size: var(--fs-small); list-style: none; }
    .bl-social a                            { display: inline-flex; align-items: center; gap: .3125rem; text-decoration: none; }
    .bl-social span                         { flex: none; width: 20px; height: 20px; background: url(../images/element/social-icon.png?v1) 0 0 no-repeat; }
    .bl-social .bl-vk-new                   { background-position: -20px 0; }
    .bl-social .bl-rss-new                  { background-position: -40px 0; }
    .bl-social .bl-telegram-new             { background-position: -60px 0; }

    /* Рекламный постер внизу: лежит под страницей и открывается при прокрутке до конца */
    .big-poster                             { position: sticky; bottom: 0; z-index: 0; max-width: var(--container); margin: 0 auto; text-align: center; }
    .big-poster *                           { margin: 0; }
    .big-poster img                         { display: block; max-width: 100% !important; height: auto !important; margin: 0 auto; }

    /* Страницы ошибок 403, 404 */
    .error-page                             { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4) var(--sp-7); padding: clamp(2rem, 6vw, 4rem) 0; }
    .error-page__code                       { color: var(--c-navy); font-size: clamp(5rem, 18vw, 11rem); font-weight: 700; line-height: 1; }
    .error-page__title                      { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
    .error-page__image                      { width: 230px; height: 245px; background: url(../images/errro-page.jpg) 0 0 no-repeat; }

    @media (min-width: 48em) {
        .site-footer                        { grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; }
    }

    @media (min-width: 64em) {
        .site-columns                       { grid-template-columns: minmax(0, 1fr) var(--sidebar); }
    }

    /* Шапка на планшете и телефоне: меню, курс и погода — в выпадающей панели */
    @media (max-width: 63.99em) {
        .site-logo                          { margin-right: auto; }
        .site-header__burger                { display: flex; flex: none; align-items: center; justify-content: center; width: var(--header-h); padding: 0; color: var(--c-ink); background: none; border: 0; }
        .site-header__burger:hover,
        .site-header__burger[aria-expanded=true] { background: var(--c-brand); }
        .burger, .burger::before, .burger::after { display: block; width: 1.375rem; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--transition), background-color var(--transition); }
        .burger                             { position: relative; }
        .burger::before, .burger::after     { position: absolute; left: 0; content: ""; }
        .burger::before                     { top: -7px; }
        .burger::after                      { top: 7px; }
        [aria-expanded=true] > .burger      { background: transparent; }
        [aria-expanded=true] > .burger::before { transform: translateY(7px) rotate(45deg); }
        [aria-expanded=true] > .burger::after { transform: translateY(-7px) rotate(-45deg); }

        .site-header__menu                  { position: absolute; top: 100%; right: 0; left: 0; z-index: 200; display: none; flex-direction: column; align-items: stretch; padding: var(--sp-2) 0 var(--sp-4); background: var(--c-bg-header); box-shadow: 0 .75rem 1.5rem rgb(26 38 50 / .18); }
        .site-header__menu.is-open          { display: flex; }
        .main-menu__list                    { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
        .main-menu__link                    { height: auto; padding: .875rem var(--gutter); font-size: 1rem; }
        .header-info                        { margin: var(--sp-3) 0 0; padding: var(--sp-4) var(--gutter) 0; border-top: 1px solid rgb(26 38 50 / .1); }

        .login-box                          { left: 0; width: auto; max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: var(--sp-5) var(--gutter); }
        .login-box.is-open                  { grid-template-columns: 1fr; }

        .subnav__link                       { padding-block: .625rem .6875rem; }
    }

    @media (max-width: 35.99em) {
        .site-user__login                   { padding: 0 var(--sp-3); }
        .lang-switch                        { padding: 0 var(--sp-2); }
        .error-page__image                  { display: none; }
    }
}


@layer components {
    /* Кнопки */
    .bl-btn                                 { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2.25rem; padding: .4375rem .875rem; color: var(--c-ink); font: 700 var(--fs-caps)/1.2 var(--font); letter-spacing: .04em; text-align: center; text-decoration: none; text-transform: uppercase; vertical-align: middle; background: var(--c-bg); border: 1px solid #d9dee1; border-radius: var(--radius-s); cursor: pointer; transition: color var(--transition), background-color var(--transition), border-color var(--transition); }
    .bl-btn:hover                           { color: var(--c-on-brand); background: var(--c-brand); border-color: var(--c-brand); }
    .bl-btn:active                          { background: var(--c-brand-hover); border-color: var(--c-brand-hover); }
    .bl-btn .bl-f-ico                       { color: inherit; font-size: 1.125em; }
    @media (pointer: coarse) {
        .bl-btn                             { min-height: 2.75rem; }
    }

    /* Главное действие страницы и сайдбара: заливка фирменным цветом */
    .bl-btn-sidebar                         { width: 100%; padding: .75rem 1rem; font-size: var(--fs-meta); color: var(--c-on-brand); background: var(--c-brand); border-color: var(--c-brand); }
    .bl-btn-sidebar:hover                   { color: var(--c-on-brand); background: var(--c-brand-hover); border-color: var(--c-brand-hover); }

    /* Отправка формы: заливка фирменным цветом */
    .bl-btn-primary                         { color: var(--c-on-brand); background: var(--c-brand); border-color: var(--c-brand); }
    .bl-btn-primary:hover                   { color: var(--c-on-brand); background: var(--c-brand-hover); border-color: var(--c-brand-hover); }

    /* Второстепенное действие с акцентом */
    .bl-btn-green                           { color: var(--c-brand-text); background: var(--c-brand-soft); border-color: var(--c-brand); }
    .bl-btn-green:hover                     { color: var(--c-on-brand); background: var(--c-brand); border-color: var(--c-brand); }

    .bl-btn-blue                            { color: var(--c-info); background: var(--c-info-soft); border-color: #72bee9; }
    .bl-btn-blue:hover                      { color: #fff; background: var(--c-info); border-color: var(--c-info); }

    /* Продвижение (премиум) */
    .bl-premium-btn                         { min-height: 1.875rem; padding: 0 .875rem; color: var(--c-ink); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; text-transform: none; background: var(--c-premium); border-color: var(--c-premium); border-radius: var(--radius); }
    .bl-premium-btn:hover                   { color: var(--c-ink); background: #ee8600; border-color: #ee8600; }
    .bl-premium-btn svg                     { width: .75rem; height: .75rem; fill: #fdd835; stroke: #fdd835; }

    .bl-btn-clear                           { background: none; border-color: transparent; }
    .bl-btn-up                              { font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; text-transform: none; }
    .bl-btn-up .bl-i-up                     { color: var(--c-muted); }
    .bl-btn-up:hover .bl-i-up               { color: inherit; }
    h1 .bl-btn                              { margin-left: var(--sp-3); vertical-align: middle; }

    /* Списки-меню (старая разметка ul.nav) */
    .nav                                    { margin: 0; padding: 0; list-style: none; }
    .nav a                                  { text-decoration: none; }
    .nav-horizontal li                      { display: inline-block; }

    /* Блоки контента и сайдбара */
    .bl-blk + .bl-blk                       { margin-top: var(--sp-5); }
    .bl-blk-title                           { margin: 0 0 .8125rem; color: var(--c-ink); font-size: var(--fs-title); font-weight: 700; line-height: 1.25; }
    .bl-blk-title a                         { color: inherit; text-decoration: none; }
    .bl-blk-title a:hover                   { color: var(--c-accent-text); }
    .bl-blk-title .bl-btn                   { margin-left: var(--sp-4); vertical-align: middle; }
    .bl-blk-title .bl-btn:hover             { color: var(--c-on-brand); }
    .bl-gray                                { color: var(--c-muted); }
    /* Пустой список: «Ничего не найдено», «Пока нет сообщений»; .bl-btn внутри — действие */
    .label-not-found                        { margin: 0; padding: var(--sp-5) var(--sp-4); color: var(--c-muted); font-size: var(--fs-base); text-align: center; background: var(--c-bg-soft); border: 1px dashed var(--c-border-strong); border-radius: var(--radius); }
    .label-not-found .bl-btn                { display: flex; width: max-content; margin: var(--sp-3) auto 0; }
    .bl-disclaimer                          { padding-top: .3125rem; color: var(--c-muted); font-size: var(--fs-small); font-style: italic; border-top: 1px solid var(--c-border); }
    .bl-inline-elem > *                     { display: inline-block; }
    .bl-inline-elem > * + *                 { margin-left: .3125rem; }
    .bl-vk-widget                           { min-height: 3rem; padding: .625rem; border: 1px solid #eff2f4; }
    .bl-blk-share                           { margin-top: 1.25rem; }

    /* Ссылки на разделы: каталог, автобусы, кафе, усадьбы (сайдбар — столбиком, главная — в строку) */
    .bl-info-board                          { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-4) var(--sp-5); margin: 0; padding: var(--sp-5) 0 0; list-style: none; border-top: 1px solid #f0eee8; }
    .bl-info-board__item                    { display: flex; align-items: center; gap: .625rem; }
    .bl-info-board__item a                  { color: var(--c-ink); font-size: var(--fs-base); font-weight: 700; line-height: 1.3; text-decoration: none; }
    .bl-info-board .bl-f-ico                { flex: none; width: 2.75rem; color: var(--c-brand); font-size: 2.75rem; text-align: center; }
    .bl-info-board__item:hover a,
    .bl-info-board__item:hover .bl-f-ico    { color: var(--c-accent-text); }
    .bl-vertical-info-board                 { grid-template-columns: 1fr; gap: 0; padding: 0; border: 0; }
    .bl-vertical-info-board .bl-info-board__item { padding: .9375rem; border-top: 1px solid #f0eee8; }
    .bl-vertical-info-board .bl-info-board__item:first-child { border-top: 0; }
    /* Главная: плитки, вся плитка — ссылка */
    .bl-info-board--tiles                   { gap: var(--sp-3) var(--gutter); padding: 0; border: 0; }
    .bl-info-board--tiles .bl-info-board__item { position: relative; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-l); transition: border-color var(--transition), background-color var(--transition); }
    .bl-info-board--tiles .bl-info-board__item:hover { background: var(--c-bg-soft); border-color: var(--c-brand); }
    .bl-info-board--tiles a::after          { position: absolute; inset: 0; content: ""; }
    .bl-info-board--tiles .bl-f-ico,
    .bl-info-board--tiles .bl-info-board__item:hover .bl-f-ico { display: grid; place-items: center; width: 3rem; height: 3rem; color: var(--c-brand-text); font-size: 1.75rem; background: var(--c-brand-soft); border-radius: 50%; }

    /* Вкладки внутри страницы (кабинет: настройки, опубликованные/закрытые, избранное). Линии — тенью, чтобы
       подчёркивание текущей вкладки не обрезалось прокруткой ленты на телефоне */
    .tabs                                   { display: flex; gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-5); overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--c-border); }
    .tabs::-webkit-scrollbar                { display: none; }
    .tabs__link                             { flex: none; padding: .5rem 1rem .5625rem; color: var(--c-muted); font-weight: 700; text-decoration: none; border-radius: var(--radius-l) var(--radius-l) 0 0; transition: color var(--transition), background-color var(--transition), box-shadow var(--transition); }
    .tabs__link:hover                       { color: var(--c-ink); background: var(--c-bg-soft); }
    .tabs__link[aria-current]               { color: var(--c-brand-text); background: var(--c-brand-soft); box-shadow: inset 0 -2px 0 var(--c-brand); }

    /* Меню раздела (site/block/_side_nav.html.twig): в сайдбаре — карточкой; на телефоне и планшете оно скрыто,
       а под заголовком страницы выводится лентой (.side-nav-strip) или раскрывающимся списком (.side-nav-drop) */
    .side-nav                               { overflow: hidden; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); }
    .side-nav__title                        { padding: .75rem var(--sp-4); color: var(--c-muted); font-size: var(--fs-caps); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border); }
    .side-nav__title a                      { color: inherit; text-decoration: none; }
    .side-nav__title a:hover                { color: var(--c-accent-text); }
    .side-nav__list                         { margin: 0; padding: .375rem 0; list-style: none; }
    .side-nav__link                         { position: relative; display: flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; padding: .5rem var(--sp-4); color: var(--c-ink); font-size: var(--fs-base); line-height: 1.3; text-decoration: none; transition: color var(--transition), background-color var(--transition); }
    .side-nav__link::before                 { position: absolute; top: .375rem; bottom: .375rem; left: 0; width: 3px; content: ""; border-radius: 0 2px 2px 0; }
    .side-nav__link:hover                   { color: var(--c-accent-text); background: var(--c-bg-soft); }
    .side-nav__link:focus-visible           { outline-offset: -2px; }
    .side-nav__link[aria-current]           { color: var(--c-ink); font-weight: 700; background: var(--c-brand-soft); }
    .side-nav__link[aria-current]::before   { background: var(--c-brand); }
    .side-nav__text                         { flex: 1; min-width: 0; }
    .side-nav__note                         { display: block; margin-top: .125rem; color: var(--c-muted); font-size: var(--fs-meta); font-weight: 400; }
    .side-nav__badge                        { flex: none; padding: .125rem .5rem; color: var(--c-ink); font-size: var(--fs-caps); font-weight: 700; line-height: 1.4; white-space: nowrap; background: var(--c-bg); border: 1px solid var(--c-brand); border-radius: 999px; }
    .side-nav__separated                    { margin-top: .375rem; padding-top: .375rem; border-top: 1px solid var(--c-border); }
    .side-nav__separated ~ li .side-nav__link,
    .side-nav__separated .side-nav__link    { color: var(--c-muted); font-size: var(--fs-small); }

    .side-nav-strip,
    .side-nav-drop                          { margin: calc(-1 * var(--sp-2)) 0 var(--sp-5); }
    .side-nav-strip .side-nav               { overflow: visible; background: none; border: 0; border-radius: 0; }
    .side-nav-strip .side-nav__title,
    .side-nav-strip .side-nav__note         { display: none; }
    .side-nav-strip .side-nav__list         { position: relative; display: flex; gap: var(--sp-2); padding: 0 2rem 0 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
    .side-nav-strip .side-nav__list::-webkit-scrollbar { display: none; }
    .side-nav-strip .side-nav__separated    { margin: 0; padding: 0; border: 0; }
    .side-nav-strip .side-nav__link         { min-height: 2.25rem; padding: .375rem .875rem; font-size: var(--fs-small); font-weight: 400; white-space: nowrap; border: 1px solid var(--c-border-strong); border-radius: 999px; }
    .side-nav-strip .side-nav__link::before { content: none; }
    .side-nav-strip .side-nav__link:hover   { background: none; border-color: var(--c-accent); }
    .side-nav-strip .side-nav__link[aria-current] { color: var(--c-on-brand); background: var(--c-brand); border-color: var(--c-brand); }

    .side-nav-drop                          { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); }
    .side-nav-drop__summary                 { display: flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; padding: .5rem var(--sp-4); font-weight: 700; list-style: none; cursor: pointer; background: var(--c-bg-soft); border-radius: var(--radius); }
    .side-nav-drop__summary::-webkit-details-marker { display: none; }
    .side-nav-drop__summary::after          { flex: none; width: .5rem; height: .5rem; margin: 0 .25rem 0 auto; content: ""; border: solid var(--c-muted); border-width: 0 2px 2px 0; transform: translateY(-25%) rotate(45deg); transition: transform var(--transition); }
    .side-nav-drop[open] .side-nav-drop__summary { border-radius: var(--radius) var(--radius) 0 0; }
    .side-nav-drop[open] .side-nav-drop__summary::after { transform: translateY(25%) rotate(-135deg); }
    .side-nav-drop__label                   { min-width: 0; }
    .side-nav-drop .side-nav                { border: 0; border-top: 1px solid var(--c-border); border-radius: 0 0 var(--radius) var(--radius); }

    @media (min-width: 64em) {
        .side-nav-strip,
        .side-nav-drop                      { display: none; }
    }
    @media (max-width: 63.99em) {
        .site-sidebar .side-nav             { display: none; }
    }

    /* Панель автора и администратора в карточке: изменить, поднять, удалить, продвинуть */
    .bl-control-menu                        { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-5); padding: .375rem; background: var(--c-warning-soft); border: 1px solid #f3dcc0; border-radius: var(--radius-l); }
    .bl-control-menu li                     { display: block; }
    .bl-control-menu li:last-child          { margin-left: auto; }
    .bl-control-menu a                      { display: flex; align-items: center; gap: .3125rem; padding: .4375rem .625rem; color: var(--c-ink); font-size: var(--fs-small); text-decoration: none; border-radius: var(--radius); transition: background-color var(--transition); }
    .bl-control-menu a:hover                { color: var(--c-ink); background: var(--c-bg); }
    .bl-control-menu .bl-f-ico              { color: #8a7a4a; font-size: .6875rem; }
    .bl-control-menu .update                { font-weight: 700; background: var(--c-bg); box-shadow: inset 0 0 0 1px #f9b369; }
    .bl-control-menu .update .bl-f-ico      { color: #c77b1c; }
    .bl-control-menu .delete                { color: var(--c-danger); }
    .bl-control-menu .delete:hover          { color: #fff; background: var(--c-danger); }
    .bl-control-menu .delete .bl-f-ico      { color: inherit; font-size: .5rem; }

    /* Постраничная навигация */
    .pagination__list                       { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: 0; padding: 0; font-size: var(--fs-base); list-style: none; }
    .pagination a, .pagination span         { display: grid; place-items: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0 .5rem; color: var(--c-ink); text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-s); }
    .pagination a:hover                     { color: var(--c-brand-text); border-color: var(--c-border-strong); }
    .pagination [aria-current]              { font-weight: 700; border-color: var(--c-brand); }
    .pagination__step a                     { padding: 0 .75rem; color: var(--c-brand-text); }
    .pagination__gap                        { padding: 0 .25rem; color: var(--c-muted); }
    @media (max-width: 35.99em) {
        .pagination__far                    { display: none; }
    }

    /* Таблицы данных */
    .bl-table-striped tr:nth-child(2n),
    .bl-admin-table tbody tr:nth-child(2n)  { background: #f8f8f8; }
    .bl-table-dotted tr, .table-dotted tr   { border-bottom: 1px dotted #ddd; }
    .bl-admin-table                         { text-align: left; }
    .bl-admin-table thead tr                { background: #f8f8f8; border-bottom: 1px solid var(--c-border); }
    .bl-admin-table th, .bl-admin-table td  { padding: .625rem; vertical-align: middle; }
    .bl-admin-table thead th                { font-weight: 400; }
    .bl-admin-table thead a                 { color: var(--c-muted); text-decoration: none; }
    .bl-admin-table thead a:hover           { color: var(--c-accent-text); }

    /* Формы: метка слева от поля на широком экране, над полем на узком */
    .control-row + .control-row             { margin-top: var(--sp-4); }
    .control-label                          { margin-bottom: var(--sp-1); }
    .control-label:empty                    { display: none; }
    .control-label .required::after         { margin-left: .1875rem; color: var(--c-danger); content: "*"; }
    .control-widget > label,
    .control-item > label                   { margin-left: .125rem; }
    .control-item                           { display: flex; align-items: baseline; }
    .control-item + .control-item           { margin-top: var(--sp-1); }
    .control-description                    { margin: var(--sp-1) 0 0; color: var(--c-muted); font-size: var(--fs-meta); }
    .control-errors                         { margin: var(--sp-1) 0 0; padding: 0; color: var(--c-danger); font-size: var(--fs-small); list-style: none; }
    .has-error input, .has-error textarea, .has-error select { border-color: var(--c-danger); }
    .control-submit                         { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-4); }
    .control-submit .bl-btn                 { min-height: var(--control-h); padding-inline: 1.25rem; }
    .control-submit .other-links            { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
    .control-submit .other-links a          { color: var(--c-muted); }
    .control-submit .other-links a:hover    { color: var(--c-ink); }
    .control-row.f-middle-control input     { width: 6.25rem; }
    @media (min-width: 48em) {
        .control-row                        { display: grid; grid-template-columns: 25% minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; }
        .control-row > *                    { grid-column: 1 / -1; }
        .control-row > .control-label       { grid-column: 1; display: block; margin: 0; padding-top: .5625rem; }
        .control-row > .control-widget      { grid-column: 2; }
    }

    form .section + .section                { margin-top: var(--sp-5); }
    form .section-gray                      { padding: var(--sp-5); }
    form .section .control-submit           { margin-top: 0; }
    /* Кнопка отправки — под полями, а не под метками */
    .bl-section-action                      { max-width: 48rem; }
    @media (min-width: 48em) {
        .bl-section-action .control-submit,
        .bl-middle-form .control-submit:not(.control-widget),
        .bl-large-form .control-submit:not(.control-widget) { padding-left: calc(25% + var(--sp-4)); }
    }
    form .headline                          { margin: var(--sp-5) 0; padding-bottom: .3125rem; font-size: var(--fs-lead); font-weight: 700; border-bottom: 1px solid #ddd; }
    form .section .headline                 { margin-top: 0; }
    form .section-gray                      { background: #f3f4f4; }
    form .subtitle                          { margin: var(--sp-5) 0; font-size: var(--fs-h3); }
    .bl-middle-form, .bl-large-form, form .section .control-row { max-width: 48rem; }
    .form-confirm                           { margin-bottom: var(--sp-5); }
    .form-confirm p                         { margin: .1875rem 0; }
    .form-confirm a                         { font-weight: 700; }

    /* Поля-коллекции (site/theme/form_theme.html.twig) */
    .item-collection                        { display: flex; align-items: center; gap: var(--sp-2); }
    .item-collection + .item-collection     { margin-top: var(--sp-2); }
    .item-collection > :first-child         { flex: 1; min-width: 0; }
    .control-item-delete                    { flex: none; width: 2.25rem; height: 2.25rem; padding: 0; color: var(--c-danger); font-family: bl-icons; font-size: .625rem; background: none; border: 1px solid transparent; border-radius: var(--radius-s); }
    .control-item-delete::before            { content: "\e102b"; }
    .control-item-delete:hover              { border-color: var(--c-danger); }
    .item-collection:only-child .control-item-delete { visibility: hidden; }
    .control-collection-add-link            { margin-top: var(--sp-2); }
    .control-collection-add-link .bl-btn    { padding-inline: 0; color: var(--c-brand-text); }
    .control-collection-add-link .bl-btn:hover { color: var(--c-accent-text); background: none; }
    .control-collection-add-link .bl-btn::before { content: "+"; font-size: 1.125rem; line-height: 1; }

    /*
     * Форма подачи .edit-form (объявление, вакансия, резюме, заявка компании): шаги-карточки .form-card с номером
     * и подсказкой, метки над полями, соседние поля — в сетке .form-grid (колонки по ширине формы, container query).
     * Ошибки собраны в .form-alert над формой (site/form/_error_summary.html.twig), кнопка — в .form-actions
     */
    .edit-form                              { display: grid; gap: var(--sp-4); container-type: inline-size; }
    * + .edit-form                          { margin-top: var(--sp-5); }
    .form-card                              { padding: var(--sp-5) var(--sp-4); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-l); box-shadow: 0 1px 2px rgb(26 38 50 / .04); }
    .form-card:has(.has-error)              { border-color: #f1b8b3; }
    .form-card__head                        { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .125rem var(--sp-3); align-items: center; margin-bottom: var(--sp-5); }
    .form-card__num                         { grid-row: span 2; align-self: start; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--c-brand-text); font-weight: 700; background: var(--c-brand-soft); border-radius: 50%; }
    .form-card__title                       { display: block; margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: 1.3; }
    .form-card__hint                        { display: block; grid-column: 2; margin: 0; color: var(--c-muted); font-size: var(--fs-small); }
    /* Необязательный шаг свёрнут в <details>: заголовок — <summary> со стрелкой */
    .form-card--optional > summary          { grid-template-columns: 2rem minmax(0, 1fr) auto; margin: 0; list-style: none; cursor: pointer; }
    .form-card--optional > summary::-webkit-details-marker { display: none; }
    .form-card--optional > summary::after   { grid-column: 3; grid-row: 1 / span 2; width: .5rem; height: .5rem; margin-right: .25rem; content: ""; border: solid var(--c-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--transition); }
    .form-card--optional[open] > summary    { margin-bottom: var(--sp-5); }
    .form-card--optional[open] > summary::after { transform: rotate(-135deg); }
    .form-card--optional .form-card__num    { color: var(--c-muted); background: var(--c-bg-soft); }
    @media (min-width: 36em) {
        .form-card                          { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
    }

    .edit-form .control-row,
    .edit-form .control-row > .control-label { display: block; max-width: none; margin: 0; padding: 0; }
    .edit-form .control-row                 { scroll-margin-top: var(--sp-5); }
    .edit-form .control-label:empty         { display: none; }
    .edit-form .control-row + .control-row,
    .edit-form .control-row + .form-grid,
    .edit-form .form-grid + .control-row,
    .edit-form .form-grid + .form-grid,
    .edit-form .control-row + .photo-field,
    .edit-form .form-grid + .photo-field    { margin-top: 1.25rem; }
    .edit-form .control-row > .control-label { margin-bottom: .375rem; font-weight: 700; }
    .edit-form .control-description         { margin-top: .375rem; }
    .edit-form input[type=checkbox]         { width: 1.125rem; height: 1.125rem; vertical-align: -.25rem; }
    .edit-form textarea                     { line-height: var(--lh-base); }

    .form-grid                              { display: grid; gap: 1.25rem var(--sp-4); align-items: start; }
    .edit-form .form-grid > .control-row    { margin: 0; }
    @container (min-width: 30rem) {
        .form-grid--2                       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .form-grid--wide                    { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    }
    @container (min-width: 38rem) {
        .form-grid--3                       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    /* Флажок под полем (торг) */
    .control-check                          { display: flex; align-items: center; gap: .125rem; margin-top: var(--sp-3); }

    /* Сводка ошибок над формой */
    .form-alert                             { padding: var(--sp-4) var(--sp-5); background: var(--c-danger-soft); border: 1px solid #f1b8b3; border-left: 4px solid var(--c-danger); border-radius: var(--radius-l); }
    .form-alert:focus                       { outline: 0; box-shadow: 0 0 0 3px rgb(198 40 40 / .2); }
    .form-alert__title                      { margin: 0 0 var(--sp-2); font-weight: 700; }
    .form-alert__list                       { margin: 0; padding-left: 1.25rem; }
    .form-alert__list a                     { color: var(--c-danger); }

    /* Кнопка отправки и пояснение к ней */
    .form-actions                           { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); padding: var(--sp-2) 0 0; }
    .form-actions > .control-row            { flex: 1 1 100%; }
    .form-actions .bl-btn-primary           { min-height: 3rem; padding-inline: 2rem; font-size: var(--fs-small); }
    .form-actions__note                     { flex: 1 1 16rem; margin: 0; color: var(--c-muted); font-size: var(--fs-small); }
    .form-actions__cancel                   { color: var(--c-muted); }
    .form-actions__cancel:hover             { color: var(--c-ink); }
    @media (max-width: 35.99em) {
        .form-actions .bl-btn-primary       { width: 100%; }
    }

    /* Выбор одного из вариантов «чипами» (тип объявления, зарплата, пол): радиокнопки поверх меток, работают с клавиатуры */
    .choice-chips                           { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
    .choice-chips .control-item             { position: relative; display: block; margin: 0; }
    .choice-chips .control-item input       { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
    .choice-chips .control-item label       { display: flex; align-items: center; gap: .375rem; min-height: var(--control-h); margin: 0; padding: .375rem 1rem; background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: 999px; transition: border-color var(--transition), background-color var(--transition); }
    .choice-chips .control-item input:hover + label { border-color: var(--c-brand); }
    .choice-chips .control-item input:checked + label { font-weight: 700; background: var(--c-brand-soft); border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
    .choice-chips .control-item input:checked + label::before { width: 1rem; height: 1rem; margin-left: -.25rem; content: ""; background: var(--ico-check) center / contain no-repeat; }
    .choice-chips .control-item input:focus-visible + label { outline: 2px solid var(--c-info); outline-offset: 2px; }
    .has-error .choice-chips .control-item label { border-color: var(--c-danger); }

    /* Поле и список, слитые в одно (цена и валюта) */
    .input-join                             { display: flex; max-width: 20rem; }
    .input-join > input                     { flex: 1; min-width: 0; border-radius: var(--radius) 0 0 var(--radius); }
    .input-join > select                    { flex: none; width: auto; margin-left: -1px; background-color: var(--c-bg-soft); border-radius: 0 var(--radius) var(--radius) 0; }
    .input-join > :focus                    { position: relative; z-index: 1; }

    /* Вилка «от … до …» (зарплата) */
    .input-range                            { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
    .input-range input                      { flex: 1 1 5rem; width: auto; max-width: 9rem; text-align: right; }
    .input-range__unit                      { color: var(--c-text-soft); }

    /* Дата рождения: три списка в строку */
    .date-birth .control-widget > div       { display: flex; gap: var(--sp-2); }
    .date-birth select                      { flex: 1 1 auto; min-width: 0; }

    /* Фото с превью (резюме): выбранный файл site.js сразу показывает в кружке */
    .photo-field                            { display: flex; align-items: center; gap: var(--sp-4); }
    .photo-field__image                     { flex: none; width: 4.5rem; height: 4.5rem; overflow: hidden; background: var(--c-bg-muted) url(../images/user-men.jpg) center / cover no-repeat; border-radius: 50%; }
    .photo-field__image.user-women          { background-image: url(../images/user-women.jpg); }
    .photo-field__image img                 { display: block; width: 100%; height: 100%; object-fit: cover; }
    .photo-field .control-row               { flex: 1; min-width: 0; }

    /*
     * Фото объявления. Без JS — поле файла на каждое фото. С JS (.is-enhanced, site.js) — плитки с превью и плитка
     * «Добавить фото» (выбор нескольких файлов, перетаскивание); первое фото — обложка
     */
    .photo-upload .item-collection .control-row { display: block; margin: 0; }
    .photo-upload .item-collection .control-label { display: none; }
    .photo-upload .item-collection img      { display: block; max-width: 8rem; border-radius: var(--radius-s); }
    .photo-upload.is-enhanced .control-collection-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--sp-2); }
    .photo-upload.is-enhanced .control-collection-add-link { display: none; }
    .photo-upload.is-enhanced .item-collection { position: relative; display: block; aspect-ratio: 1; margin: 0; overflow: hidden; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius-l); }
    .photo-upload.is-enhanced .item-collection > :first-child,
    .photo-upload.is-enhanced .item-collection > :first-child > div { height: 100%; }
    .photo-upload.is-enhanced .item-collection img { width: 100%; max-width: none; height: 100%; object-fit: cover; border-radius: 0; }
    .photo-upload.is-enhanced .item-collection:first-child::after { position: absolute; left: .375rem; bottom: .375rem; padding: .125rem .375rem; color: #fff; font-size: var(--fs-caps); font-weight: 700; content: "Обложка"; background: rgb(26 38 50 / .7); border-radius: var(--radius-s); }
    .photo-upload.is-enhanced .control-item-delete { position: absolute; top: .375rem; right: .375rem; z-index: 1; visibility: visible; width: 1.75rem; height: 1.75rem; color: #fff; font-size: .5rem; background: rgb(26 38 50 / .7); border: 0; border-radius: 50%; }
    .photo-upload.is-enhanced .control-item-delete:hover { background: var(--c-danger); }
    .photo-upload__add                      { position: relative; display: grid; place-content: center; justify-items: center; gap: .375rem; aspect-ratio: 1; padding: var(--sp-2); color: var(--c-brand-text); font-size: var(--fs-small); font-weight: 700; text-align: center; border: 2px dashed var(--c-border-strong); border-radius: var(--radius-l); cursor: pointer; transition: border-color var(--transition), background-color var(--transition); }
    .photo-upload__add:hover,
    .photo-upload.is-dragover .photo-upload__add { background: var(--c-brand-soft); border-color: var(--c-brand); }
    .photo-upload__add:focus-within         { outline: 2px solid var(--c-info); outline-offset: 2px; }
    .photo-upload__add input                { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; opacity: 0; }
    .photo-upload__add .ico                 { width: 1.75rem; height: 1.75rem; }

    /* Фильтры над списками: поле поиска растягивается, на телефоне всё в столбик */
    .bl-filter                              { padding: var(--sp-4) var(--sp-5); background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); }
    .bl-filter-form .bl-elem + .bl-elem     { margin-top: var(--sp-3); }
    .bl-filter-form .df-clear-wrap          { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
    .bl-filter-form .control-row            { display: block; margin: 0; }
    .bl-filter-form .control-row--grow      { flex: 1 1 16rem; }
    .bl-filter-form select                  { width: auto; min-width: 10rem; max-width: 100%; }
    .bl-filter-form .bl-btn                 { min-height: var(--control-h); padding-inline: 2rem; color: #fff; background: var(--c-navy); border-color: var(--c-navy); }
    .bl-filter-form .bl-btn:hover           { color: #fff; background: var(--c-ink); border-color: var(--c-ink); }
    .bl-filter label                        { color: var(--c-text-soft); }
    .bl-filter-form .advanced               { column-gap: var(--sp-5); }
    @media (max-width: 35.99em) {
        .bl-filter                          { padding: var(--sp-4); }
        .bl-filter-form .df-clear-wrap > .control-row { flex: 1 1 100%; }
        .bl-filter-form select, .bl-filter-form .bl-btn { width: 100%; }
    }

    /* Карточка .module: картинка с рубриками и комментариями поверх, дата, заголовок, анонс (новости, каталог) */
    .module                                 { position: relative; min-width: 0; }
    .module a                               { text-decoration: none; }
    .module .image                          { position: relative; overflow: hidden; background: #e9ebee url(../images/no-photo.png) center no-repeat; border-radius: var(--radius-l); }
    .module .image a                        { display: block; height: 100%; }
    .module .image img                      { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
    .module:hover .image img                { transform: scale(1.04); }
    .module .info                           { position: absolute; top: .5rem; right: .5rem; left: .5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .25rem; }
    .module .info .category                 { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
    .module .info .category > *,
    .module .info .comments                 { display: flex; align-items: center; gap: .25rem; padding: .1875rem .5rem; color: #fff; font-size: var(--fs-caps); font-weight: 700; line-height: 1.35; white-space: nowrap; background: rgb(17 22 30 / .72); border-radius: 999px; }
    .module .info .category > *             { padding: .125rem .4375rem; font-size: .6875rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
    .module .info .comments:hover           { background: rgb(17 22 30 / .9); }
    .module .info .bl-i-comments            { color: #fff; font-size: .875rem; }
    .module .body                           { display: grid; gap: .375rem; padding: .75rem .125rem 0; }
    .module__title                          { margin: 0; font-size: 1rem; line-height: 1.3; }
    .module .headline                       { display: block; color: var(--c-ink); font-size: 1rem; font-weight: 700; line-height: 1.3; }
    .module .headline:hover                 { color: var(--c-accent-text); }
    .module .summary                        { color: var(--c-text-soft); font-size: var(--fs-small); line-height: 1.45; }

    /* Дата и служебная строка публикации */
    .date, .publication-info, .publication-info a { color: var(--c-muted); font-size: var(--fs-meta); text-decoration: none; }
    .publication-info a:hover               { color: var(--c-accent-text); }

    /* Голосование «интересно / не интересно» */
    .c-likes .action                        { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
    .c-likes button                         { display: inline-flex; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .375rem 0 .75rem; color: #fff; font-size: var(--fs-small); background: #315597; border: 0; border-radius: 999px; opacity: .9; transition: opacity var(--transition); }
    .c-likes button:hover                   { opacity: 1; }
    .c-likes .bl-f-ico                      { color: #fff; }
    .c-likes .text                          { min-width: 6.25rem; text-align: center; }
    .c-likes .counter                       { min-width: 1.625rem; height: 1.625rem; padding: 0 .25rem; color: #315597; font-weight: 700; line-height: 1.625rem; text-align: center; background: #fff; border-radius: 999px; }
    .c-likes .dislike                       { background: #a3000c; }
    .c-likes .dislike .counter              { color: #a3000c; }
    .c-likes .msg                           { margin-top: var(--sp-3); }
    .c-likes .msg div                       { display: none; color: #315597; font-size: var(--fs-lead); }
    .c-likes .msg .status-dislike           { color: #a3000c; }
    .c-likes:not([data-status=""]) button   { cursor: default; opacity: .85; }
    .c-likes[data-status="like"] .status-like,
    .c-likes[data-status="dislike"] .status-dislike { display: block; }

    /* Ссылка администратора «Редактировать» на странице записи */
    .panel-control                          { margin: 0 0 var(--sp-4); }
    .panel-control a                        { display: inline-block; padding: .375rem .875rem; color: #fff; font-size: var(--fs-small); text-decoration: none; background: #2e7d32; border-radius: var(--radius-s); }
    .panel-control a:hover                  { color: #fff; background: #1b5e20; }

    /*
     * Страница записи .record (объявление, вакансия, резюме, компания): верх __top (галерея, ключевые факты), основная
     * часть __main и колонка __aside (карточка с ценой и контактами, автор, статистика). Колонка встаёт справа, когда
     * контент шире 46rem (container query по .site-content), и прилипает при прокрутке; уже — стоит между __top и
     * __main, чтобы цена и телефон были на первом экране. Без поддержки container queries — всегда одна колонка
     */
    .record                                 { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "aside" "main"; gap: var(--sp-5) var(--gutter); margin-bottom: var(--sp-6); }
    .record--no-top                         { grid-template-areas: "aside" "main"; }
    .record__top                            { grid-area: top; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
    .record__main                           { grid-area: main; min-width: 0; }
    .record__aside                          { grid-area: aside; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sp-4); min-width: 0; }
    /* Средняя ширина: карточка слева, автор и статистика справа от неё */
    @container content (min-width: 34rem) {
        .record__aside                      { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--gutter); }
        .record-card                        { grid-row: span 2; }
        /* Без автора и статистики (событие, площадка) карточка — на всю ширину */
        .record-card:only-child             { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; column-gap: var(--sp-5); }
    }
    @container content (min-width: 46rem) {
        .record                             { grid-template-columns: minmax(0, 1fr) 17.5rem; grid-template-rows: auto 1fr; grid-template-areas: "top aside" "main aside"; }
        .record--no-top                     { grid-template-rows: 1fr; grid-template-areas: "main aside"; }
        .record__aside                      { position: sticky; top: var(--sp-4); align-self: start; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
        .record-card                        { grid-row: auto; }
        .record-card:only-child             { grid-template-columns: minmax(0, 1fr); }
    }
    .record__lead                           { margin: 0; color: var(--c-text-soft); font-size: var(--fs-lead); line-height: var(--lh-base); }

    /* Разделы основной части */
    .record-section + .record-section       { margin-top: var(--sp-6); }
    .record-section__title                  { margin: 0 0 var(--sp-3); font-size: var(--fs-title); }
    .record-section__note                   { margin-left: .375rem; color: var(--c-muted); font-size: var(--fs-small); font-weight: 400; }
    .record-text                            { font-size: 1rem; line-height: var(--lh-prose); }
    .record-quote                           { margin: 0; padding: var(--sp-4) var(--sp-5); font-size: 1rem; line-height: var(--lh-prose); background: var(--c-bg-soft); border-left: 3px solid var(--c-brand); border-radius: 0 var(--radius-l) var(--radius-l) 0; }

    /* Список с галочками */
    .record-list                            { display: grid; gap: var(--sp-2); margin: 0; padding: 0; font-size: 1rem; list-style: none; }
    .record-list li                         { position: relative; padding-left: 1.75rem; }
    .record-list li::before                 { position: absolute; top: .2rem; left: 0; width: 1.125rem; height: 1.125rem; content: ""; background: var(--c-brand-soft) var(--ico-check) center / .75rem no-repeat; border-radius: 50%; }

    /* Метки: навыки, рубрики */
    .chips                                  { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
    .chips > li                             { display: block; }
    .chip                                   { display: inline-block; padding: .3125rem .75rem; color: var(--c-ink); font-size: var(--fs-small); line-height: 1.3; text-decoration: none; background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: 999px; }
    a.chip:hover                            { color: var(--c-on-brand); background: var(--c-brand-soft); border-color: var(--c-brand); }

    /* Ключевые факты плитками: опыт, город, график... */
    .record-facts                           { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--sp-2); margin: 0; }
    .record-fact                            { min-width: 0; padding: .75rem .875rem; background: var(--c-bg-soft); border: 1px solid #efede7; border-radius: var(--radius-l); }
    .record-fact dt                         { color: var(--c-muted); font-size: var(--fs-meta); }
    .record-fact dd                         { margin: .125rem 0 0; font-weight: 700; line-height: 1.35; }
    .record-fact__note                      { display: block; color: var(--c-muted); font-size: var(--fs-meta); font-weight: 400; }

    /* Галерея: главное фото и полоса миниатюр, последняя миниатюра показывает «+N»; все ссылки открывают GLightbox */
    .record-gallery                         { display: grid; gap: var(--sp-2); }
    .record-gallery__main                   { display: grid; place-items: center; aspect-ratio: 4 / 3; max-height: 32rem; overflow: hidden; background: #eef0f1; border-radius: var(--radius-l); }
    .record-gallery__main img               { display: block; width: 100%; height: 100%; object-fit: contain; }
    .record-gallery__thumbs                 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
    .record-gallery__thumb                  { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #eef0f1; border-radius: var(--radius); }
    .record-gallery__thumb img              { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
    .record-gallery a:hover img             { transform: scale(1.03); }
    .record-gallery__more                   { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: var(--fs-title); font-weight: 700; background: rgb(26 38 50 / .55); }

    /* Карточка в колонке: цена или зарплата, контакты, действия */
    .record-card                            { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-5); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-l); box-shadow: 0 1px 2px rgb(26 38 50 / .04), 0 10px 28px -14px rgb(26 38 50 / .18); }
    .record-card > * + *                    { margin: 0; }
    .record-card__price                     { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
    .record-card__amount                    { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
    .record-card__amount--salary            { color: var(--c-success); font-size: 1.5rem; line-height: 1.2; }
    .record-card .salary--interview         { color: var(--c-muted); font-size: var(--fs-lead); font-weight: 400; }
    .record-card__amount--none              { color: var(--c-muted); font-size: var(--fs-lead); font-weight: 400; }
    .record-card__badge                     { padding: .125rem .5rem; color: var(--c-warning); font-size: var(--fs-caps); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--c-warning-soft); border-radius: 999px; }
    .record-card__logo                      { display: grid; place-items: center; min-height: 7.5rem; padding: var(--sp-3); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); }
    .record-card__logo img                  { display: block; width: auto; max-height: 9rem; }
    .record-card__logo--empty               { justify-self: start; width: 4.5rem; min-height: 0; aspect-ratio: 1; color: var(--c-brand-text); font-size: 2rem; font-weight: 700; background: var(--c-brand-soft); border-color: transparent; border-radius: var(--radius-l); }
    .record-card__caption                   { color: var(--c-muted); font-size: var(--fs-meta); }
    .record-card__actions                   { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
    .record-card__actions > *               { flex: 1 1 8rem; }
    .record-card__actions .bl-blk           { margin: 0; }
    .record-card__actions .bl-btn           { width: 100%; }
    .record-card__actions .bl-i-comments    { color: var(--c-muted); }
    .record-card__actions .bl-btn:hover .bl-f-ico { color: inherit; }

    /* Персона или организация вверху карточки: фото (логотип, первая буква) и подписи */
    .record-person                          { display: flex; align-items: center; gap: var(--sp-3); }
    .record-person__image                   { display: grid; flex: none; place-items: center; width: 3.5rem; height: 3.5rem; overflow: hidden; background: var(--c-bg-muted) url(../images/user-men.jpg) center / cover no-repeat; border-radius: 50%; }
    .record-person__image.user-women        { background-image: url(../images/user-women.jpg); }
    .record-person__image--photo            { width: 5rem; height: 5rem; }
    .record-person__image img               { display: block; width: 100%; height: 100%; object-fit: cover; }
    .record-person__image--initial          { color: var(--c-brand-text); font-size: 1.5rem; font-weight: 700; background: var(--c-brand-soft); border-radius: var(--radius-l); }
    .record-person__name                    { font-size: var(--fs-lead); font-weight: 700; line-height: 1.25; }
    .record-person__info                    { color: var(--c-muted); font-size: var(--fs-small); }
    .record-person__info a                  { color: inherit; }
    .record-person__info a:hover            { color: var(--c-accent-text); }

    /* Телефоны — крупные кнопки tel: */
    .record-phones                          { display: grid; gap: var(--sp-2); }
    .record-phone                           { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .5rem .875rem; color: var(--c-ink); font-size: 1.0625rem; font-weight: 700; text-decoration: none; background: var(--c-brand-soft); border: 1px solid var(--c-brand); border-radius: var(--radius); transition: background-color var(--transition); }
    .record-phone:hover                     { color: var(--c-on-brand); background: var(--c-brand); }
    .record-phone .ico                      { flex: none; color: var(--c-brand-text); }
    .record-phone:hover .ico                { color: inherit; }
    .record-phone__body                     { display: grid; min-width: 0; line-height: 1.3; }
    .record-phone__number                   { white-space: nowrap; }
    .record-phone__note,
    .record-phones__note                    { font-size: var(--fs-meta); font-weight: 400; overflow-wrap: anywhere; }
    .record-phone__note                     { color: var(--c-muted); }
    .record-phone:hover .record-phone__note { color: inherit; }
    .record-phones__note                    { margin: -.125rem 0 .25rem; padding: 0 .125rem; color: var(--c-muted); }

    /* Контакты строками с иконкой: адрес, сайт, время работы */
    .record-contacts                        { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
    .record-contacts li                     { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .625rem; }
    .record-contacts .ico                   { margin-top: .125rem; color: var(--c-brand-text); }
    .record-contacts__label                 { display: block; color: var(--c-muted); font-size: var(--fs-meta); }
    .record-contacts__value--strong         { font-weight: 700; }
    .record-contacts__value                 { overflow-wrap: anywhere; }

    /* Автор и статистика под карточкой */
    .record-author                          { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-1); }
    .record-author__avatar                  { flex: none; width: 2.75rem; height: 2.75rem; overflow: hidden; background: url(../images/element/user.jpg) center / cover; border-radius: 50%; }
    .record-author__avatar img              { display: block; width: 100%; height: 100%; object-fit: cover; }
    .record-author__name                    { color: var(--c-ink); font-weight: 700; text-decoration: none; }
    .record-author__name:hover              { color: var(--c-accent-text); }
    .record-author__info                    { color: var(--c-muted); font-size: var(--fs-meta); }
    .record-author__info a                  { color: inherit; }
    .record-author__info a:hover            { color: var(--c-accent-text); }
    .record-stats                           { display: grid; align-content: start; gap: .375rem; margin: 0; padding: var(--sp-3) var(--sp-1) 0; font-size: var(--fs-meta); border-top: 1px solid var(--c-border); }
    .record-stats > div                     { display: flex; justify-content: space-between; gap: var(--sp-3); }
    .record-stats dt                        { color: var(--c-muted); }
    .record-stats dd                        { margin: 0; text-align: right; }

    /* Подвал записи: «поделиться», сообщение об ошибке */
    .record-footer                          { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
    .record-footer .bl-blk-share            { margin: 0; }
    .record-footer .bl-disclaimer           { padding: 0; border: 0; }

    /* Тип объявления в заголовке — плашка цвета типа */
    .record-type                            { display: inline-block; margin-right: .375rem; padding: .25rem .625rem; font-size: var(--fs-caps); font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; vertical-align: .3em; background: color-mix(in srgb, currentColor 9%, transparent); border: 1px solid currentColor; border-radius: 999px; }

    /* Иконки контура: <span class="ico ico--phone" aria-hidden="true">, цвет — currentColor */
    .ico                                    { display: inline-block; flex: none; width: 1.25rem; height: 1.25rem; vertical-align: -.25rem; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
    .ico--phone                             { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
    .ico--pin                               { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
    .ico--globe                             { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18'/%3E%3C/svg%3E"); }
    .ico--clock                             { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
    .ico--card                              { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 10h6M7 14h10'/%3E%3C/svg%3E"); }
    .ico--link                              { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1 1M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1-1'/%3E%3C/svg%3E"); }
    .ico--swap                              { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4L3 8l4 4M3 8h14M17 12l4 4-4 4M21 16H7'/%3E%3C/svg%3E"); }
    .ico--toward                            { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
    .ico--camera                            { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E"); }

    /* Знак белорусского рубля byn_sign() (inline SVG): высотой с заглавную букву, стоит на базовой линии */
    .byn-sign                               { display: inline-block; width: .63em; height: .72em; vertical-align: baseline; }

    /*
     * Элемент списка .item (объявления, вакансии, резюме, компании). Вся карточка — ссылка: ::after заголовка .headline
     * растянут на элемент, остальные ссылки и кнопки лежат над ним. Сетку колонок задаёт модуль; .item__aside — правая
     * колонка (цена или зарплата сверху, дата снизу), на мобильных — строка под текстом
     */
    .items                                  { border-top: 1px solid var(--c-border); }
    .items:has(> .label-not-found)          { border-top: 0; }
    .item                                   { position: relative; display: grid; gap: .375rem var(--sp-4); padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--c-border); transition: background-color var(--transition); }
    .item:hover, .item:focus-within         { background: var(--c-bg-soft); }
    .item > *                               { min-width: 0; }
    .item__body                             { display: grid; align-content: start; gap: .25rem; }
    .item__title                            { margin: 0; font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
    .item .headline                         { color: var(--c-ink); font-weight: 700; text-decoration: none; transition: color var(--transition); }
    .item .headline::after                  { position: absolute; inset: 0; content: ""; }
    .item:hover .headline                   { color: var(--c-accent-text); }
    .item a:not(.headline), .item button    { position: relative; z-index: 1; }
    .item .summary                          { display: -webkit-box; overflow: hidden; color: var(--c-text-soft); font-size: var(--fs-small); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .item__meta                             { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .375rem; color: var(--c-muted); font-size: var(--fs-meta); }
    .item__meta > * + *::before             { margin-right: .375rem; color: var(--c-muted); content: "·"; }
    .item__meta a                           { color: inherit; text-decoration: none; }
    .item__meta a:hover                     { color: var(--c-ink); }
    .item__image                            { overflow: hidden; background: var(--c-bg-muted); border-radius: var(--radius); }
    .item__image img                        { display: block; width: 100%; height: 100%; object-fit: cover; }
    .item__aside                            { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem var(--sp-4); }
    .item .date                             { color: var(--c-muted); font-size: var(--fs-meta); white-space: nowrap; }
    .item .tag, .advert-mini .tag           { font-size: var(--fs-caps); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
    .item.hot                               { background: #fffcf4; box-shadow: inset 3px 0 0 var(--c-hot); }
    .item.hot:hover, .item.hot:focus-within { background: #fff5de; }
    @media (min-width: 48em) {
        .item__aside                        { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; text-align: right; }
        .item__aside > :last-child          { margin-top: auto; }
    }

    /* Цвета типов объявлений: продам, куплю, обмен, сдам, услуга */
    .tag-advert-1                           { color: #bc0c21; }
    .tag-advert-2                           { color: #4f7a14; }
    .tag-advert-3                           { color: #2f6fa8; }
    .tag-advert-4                           { color: #9640aa; }
    .tag-advert-5                           { color: #b35f0c; }

    /* Сортировка списка (ссылки KnpPaginator: класс asc/desc у выбранной) */
    .sort-bar                               { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); margin: var(--sp-4) 0 0; padding: .4375rem var(--sp-3); font-size: var(--fs-small); }
    .sort-bar__label                        { color: var(--c-muted); }
    .sort-bar a                             { color: var(--c-text-soft); text-decoration: none; }
    .sort-bar a::after                      { margin-left: .375rem; font-family: bl-icons; font-size: .75rem; content: "\e1022"; opacity: .35; }
    .sort-bar a:hover                       { color: var(--c-ink); }
    .sort-bar a.asc, .sort-bar a.desc       { color: var(--c-ink); font-weight: 700; }
    .sort-bar a:hover::after, .sort-bar a.asc::after, .sort-bar a.desc::after { opacity: 1; }

    /* Кнопка «Избранное» на странице записи */
    .c-favorites-widget a                   { text-decoration: none; }
    .c-favorites-widget a .bl-f-ico         { color: var(--c-favorite); }
    .c-favorites-widget a:hover             { color: #b35a00; background: #fff; border-color: var(--c-favorite); }
    .c-favorites-widget a.active            { color: var(--c-ink); background: var(--c-favorite); border-color: var(--c-favorite); }
    .c-favorites-widget a.active .bl-f-ico  { color: var(--c-ink); }

    /* Комментарии */
    .comment-title                          { margin: var(--sp-6) 0 0; font-size: var(--fs-h3); }
    .comment-send-bottom                    { padding: 0; color: inherit; font: inherit; background: none; border: 0; cursor: pointer; }
    .comment-send-bottom:hover              { color: var(--c-accent-text); }
    .comment-num                            { margin-left: .75rem; color: var(--c-muted); font-size: var(--fs-meta); font-weight: 400; }
    .comment-num .bl-f-ico                  { color: var(--c-muted); font-size: 1.0625rem; vertical-align: -.25rem; }
    .bl-comments-not-comments               { color: var(--c-muted); }
    .comments-login                         { display: inline-flex; gap: .5rem; margin: 0 .25rem; vertical-align: middle; }
    .comments-login .bl-f-ico               { font-size: 1.5rem; text-decoration: none; }
    .comment-notice-moderated               { padding: .625rem .875rem; font-size: var(--fs-small); background: var(--c-warning-soft); border-left: 3px solid var(--c-warning); }
    .comment-form                           { padding: .625rem; background: var(--c-bg-page); }
    .comment-form .control-row              { display: flex; align-items: flex-start; gap: .75rem; }
    .comment-form .comment-avatar           { flex: none; width: 3.75rem; height: 3.75rem; background-size: cover; }
    .comment-form .comment-textarea         { flex: 1; min-width: 0; }
    .comment-form .control-submit           { margin-top: .5rem; }
    .comment-form .bl-btn                   { border-color: var(--c-brand); }
    @media (max-width: 35.99em) {
        .comment-form .comment-avatar       { display: none; }
    }

    .bl-comments                            { --comment-indent: 2.8125rem; }
    .comment-first-level                    { border-top: 1px solid #eee; }
    .comment-container                      { padding: .625rem 0; font-size: var(--fs-small); }
    .comment-container .comment-container   { margin-left: var(--comment-indent); }
    .comment                                { padding: .3125rem 0; }
    .comment-info                           { color: var(--c-muted); font-size: var(--fs-meta); }
    .comment-avatar                         { display: inline-block; width: 2.1875rem; height: 2.1875rem; margin-right: .625rem; overflow: hidden; vertical-align: top; background: url(../images/element/user.jpg) center / cover no-repeat; }
    .comment-avatar img                     { display: block; width: 100%; height: 100%; object-fit: cover; }
    .comment .comment-date                  { margin-right: .625rem; }
    .comment .comment-user-title            { color: var(--c-ink); font-weight: 700; }
    .comment .comment-message               { margin: -.625rem 0 0 2.8125rem; color: var(--c-ink); font-size: var(--fs-base); overflow-wrap: anywhere; }
    .comment .comment-message-admin         { color: #a41e22; }
    .comment .comment-reply                 { margin: .3125rem 0 0 2.8125rem; font-size: var(--fs-meta); }
    .comment .comment-reply a,
    .comment .comment-link                  { color: var(--c-muted); text-decoration: none; }
    .comment a:hover                        { color: var(--c-accent-text); }
    .comment .form-reply                    { margin-left: 3.125rem; }
    .comment-control                        { float: right; font-size: var(--fs-meta); }
    .comment-control a                      { margin-left: .3125rem; color: var(--c-muted); text-decoration: none; }
    .comment-not-active,
    .comment-not-active .comment-user-title { color: #aaa; }
    .comment-not-active .comment-avatar     { opacity: .3; }
    .new-comment                            { background: #fffacd; }
    @media (max-width: 47.99em) {
        .bl-comments                        { --comment-indent: .75rem; }
        .comment-container .comment-container { padding-left: .625rem; border-left: 2px solid var(--c-border); }
        .comment .form-reply                { margin-left: 0; }
    }

    /* Уведомления (site/block/notices.html.twig) */
    .c-notice                               { padding: var(--sp-3) var(--gutter); color: var(--c-ink); font-size: var(--fs-small); text-align: center; background: var(--c-info-soft); border-bottom: 2px solid var(--c-info); }
    .c-notice--success                      { background: var(--c-success-soft); border-color: var(--c-success); }
    .c-notice--danger                       { background: var(--c-danger-soft); border-color: var(--c-danger); }
    .c-notice--warning                      { background: var(--c-warning-soft); border-color: var(--c-warning); }
    .c-notice a                             { color: inherit; font-weight: 700; }

    /* Тексты из CMS (новости, страницы, описания): размеры картинок, видео и таблиц из редактора
       подгоняются под ширину колонки (!important перекрывает размеры в атрибутах style) */
    .prose                                  { overflow-wrap: break-word; }
    .prose--large                           { max-width: 46rem; font-size: var(--fs-prose); line-height: var(--lh-prose); }
    .prose > :first-child                   { margin-top: 0; }
    .prose > :last-child                    { margin-bottom: 0; }
    .prose p, .prose ul, .prose ol          { margin: 0 0 1em; }
    .prose li + li                          { margin-top: .25em; }
    .prose h2, .prose h3, .prose h4         { margin: 1.5em 0 .5em; }
    .prose img                              { max-width: 100% !important; height: auto !important; }
    .prose p, .prose li, .prose div, .prose td { line-height: inherit !important; }
    @media (max-width: 47.99em) {
        .prose img                          { margin-inline: 0 !important; }
    }
    .prose iframe, .prose video, .prose embed, .prose object { max-width: 100% !important; }
    .prose iframe[src*="youtube"], .prose iframe[src*="youtu.be"], .prose iframe[src*="vk.com/video"], .prose iframe[src*="rutube"], .prose video { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
    .prose table                            { width: auto; min-width: 50%; margin: 1em 0; }
    .prose td, .prose th                    { padding: .375rem .625rem; border: 1px solid var(--c-border); }
    .prose figure                           { margin: 1.5em 0; }
    .prose figcaption                       { margin-top: .5em; color: var(--c-muted); font-size: var(--fs-meta); }
    @media (max-width: 35.99em) {
        .prose img[style*="float"], .prose img[align] { float: none !important; display: block; margin: 1em auto !important; }
    }

    /* Рекламные места ([data-banner], модуль Banners): баннер — картинка, в колонке 240×400 */
    .banner__link                           { display: block; }
    .banner__image                          { display: block; max-width: 100%; height: auto; }
    .bl-side-banner                         { display: flex; justify-content: center; padding: 1.25rem; border: 1px solid #e3e6e7; }

    /* Списки категорий в несколько колонок (объявления, каталог) */
    .bl-category-list                       { columns: 2 16rem; column-gap: var(--sp-6); }
    .bl-category-list .category-item        { padding-bottom: 1.625rem; break-inside: avoid; }
    .bl-category-list .headline             { margin: 0 0 .4375rem; font-size: var(--fs-base); font-weight: 700; text-transform: uppercase; }
    .bl-category-list ul                    { margin: 0; padding-left: .9375rem; }
    .bl-category-list li + li               { margin-top: .3125rem; }
    .bl-category-list ul a                  { color: var(--c-ink); text-decoration: none; }
    .bl-category-list sup                   { top: -.3125rem; color: var(--c-muted); }
    .bl-category-list ul a:hover,
    .bl-category-list ul a:hover sup        { color: var(--c-accent-text); }

    /* Галерея фото */
    .photo-gallery                          { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .625rem; }
    .photo-gallery .image                   { display: grid; place-items: center; padding: .3125rem; background: #f3f4f5; border-radius: var(--radius); }


    /* Сегментный переключатель */
    .bl-segmented                           { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; }
    .bl-segmented label                     { cursor: pointer; }
    .bl-segmented input                     { position: absolute; opacity: 0; pointer-events: none; }
    .bl-segmented span                      { display: block; padding: .5rem .875rem; font-weight: 700; font-size: .8125rem; border: 1px solid #e7eaec; border-radius: 3px; }
    .bl-segmented input:checked + span      { color: #1a2632; background: #00c3ac; border-color: #00c3ac; }
    .bl-segmented input:focus-visible + span { outline: 2px solid #1a2632; outline-offset: 2px; }

    /* Курсы банков: видны столбцы выбранной валюты */
    .bl-rates-table:has(input[value=usd]:checked) [data-currency]:not([data-currency=usd]),
    .bl-rates-table:has(input[value=eur]:checked) [data-currency]:not([data-currency=eur]),
    .bl-rates-table:has(input[value=rur]:checked) [data-currency]:not([data-currency=rur]),
    .bl-rates-table:has(input[value=eurUsd]:checked) [data-currency]:not([data-currency=eurUsd]) { display: none; }
    [data-sort-column]                      { padding: 0; color: inherit; font: inherit; background: none; border: 0; border-bottom: 1px dashed currentColor; cursor: pointer; }
    [data-sort-column][aria-sort=descending]::after { content: " ↓"; }
    [data-sort-column][aria-sort=ascending]::after { content: " ↑"; }

    /* Таблица с прокруткой по горизонтали на узком экране */
    .table-scroll                           { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* График статистики */
    .bl-chart                               { position: relative; height: clamp(18rem, 50vw, 26rem); }

    /* Модальное окно (сообщение об опечатке) */
    .c-dialog                               { width: min(36rem, calc(100vw - 2rem)); padding: 0; color: #1a2632; border: 0; border-radius: 8px; box-shadow: 0 .5rem 2rem rgb(0 0 0 / .25); }
    .c-dialog::backdrop                     { background: rgb(26 38 50 / .5); }
    .c-dialog__body                         { display: grid; gap: .75rem; padding: 1.5rem; }
    .c-dialog__title                        { margin: 0; font-size: 1.25rem; line-height: 1.25; }
    .c-dialog__quote                        { margin: 0; padding: .75rem 1rem; background: #f9f8f5; border-left: 3px solid #00c3ac; }
    .c-dialog__quote mark                   { font-weight: 700; background: #ffdf7f; }
    .c-dialog textarea                      { width: 100%; }
    .c-dialog__status:empty                 { display: none; }
    .c-dialog__status                       { margin: 0; color: #00796b; }
    .c-dialog__actions                      { display: flex; flex-wrap: wrap; gap: .5rem; }

    /* Календарь афиши в боковой колонке (рисует site.js, [data-calendar]) */
    .calendar                               { padding: var(--sp-3) var(--sp-3) var(--sp-4); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); }
    .calendar__head                         { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
    .calendar__title                        { margin: 0; font-size: var(--fs-base); font-weight: 700; }
    .calendar__title:focus                  { outline: 0; }
    .calendar__nav                          { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; padding: 0; color: var(--c-text-soft); background: none; border: 0; border-radius: 50%; cursor: pointer; transition: background-color var(--transition); }
    .calendar__nav:hover                    { color: var(--c-ink); background: var(--c-bg-muted); }
    .calendar__nav::before                  { width: 1.125rem; height: 1.125rem; content: ""; background: currentColor; -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; }
    .calendar__nav--prev                    { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E"); }
    .calendar__nav--next                    { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
    .calendar__weekdays,
    .calendar__days                         { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .125rem; }
    .calendar__weekdays                     { margin-bottom: .25rem; color: var(--c-muted); font-size: var(--fs-caps); text-align: center; }
    .calendar__weekdays span:nth-child(n+6) { color: var(--c-accent-text); }
    .calendar__day                          { position: relative; display: grid; place-items: center; aspect-ratio: 1; color: var(--c-ink); font-size: var(--fs-small); text-decoration: none; border-radius: 50%; transition: background-color var(--transition), color var(--transition); }
    a.calendar__day:hover                   { color: var(--c-ink); background: var(--c-brand-soft); }
    .calendar__day.is-weekend               { color: var(--c-accent-text); }
    .calendar__day.is-past                  { color: var(--c-muted-soft); }
    /* Дни с событиями — точка под числом */
    .calendar__day.has-events               { font-weight: 700; }
    .calendar__day.has-events::after,
    .calendar__legend::before               { width: .3125rem; height: .3125rem; content: ""; background: var(--c-brand); border-radius: 50%; }
    .calendar__day.has-events::after        { position: absolute; bottom: 12%; left: 50%; translate: -50% 0; }
    .calendar__day.is-past.has-events::after { background: var(--c-muted-soft); }
    .calendar__day.is-today                 { box-shadow: inset 0 0 0 2px var(--c-brand); }
    .calendar__day[aria-current]            { color: var(--c-on-brand); background: var(--c-brand); box-shadow: none; }
    .calendar__day[aria-current]::after     { background: var(--c-on-brand); }
    .calendar__foot                         { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-3) .25rem 0; font-size: var(--fs-meta); border-top: 1px solid var(--c-border); }
    .calendar__legend                       { display: inline-flex; align-items: center; gap: .375rem; color: var(--c-muted); }
    .calendar__today                        { padding: 0; color: var(--c-brand-text); font: inherit; font-weight: 700; background: none; border: 0; cursor: pointer; }
    .calendar__today:hover                  { text-decoration: underline; }

    /* jQuery UI 1.14: автодополнение */
    .ui-autocomplete                        { position: absolute; top: 0; left: 0; z-index: 300; max-height: 20rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; background: #fff; border: 1px solid #00c3ac; cursor: default; }
    .ui-autocomplete li + li                { border-top: 1px solid #ececec; }
    .ui-menu-item-wrapper                   { display: block; padding: .5rem .75rem; font-size: .9375rem; cursor: pointer; }
    .ui-menu-item-wrapper.ui-state-active   { background: #ececec; }
    .ui-helper-hidden-accessible            { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}


@layer modules {
    /* Новости: список (первая крупно), архив, статья, «Самое обсуждаемое» */
    .news-list                              { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: var(--sp-6) var(--gutter); }
    .news-module .image                     { aspect-ratio: 29 / 20; }
    .top-news-module .image                 { aspect-ratio: 151 / 79; }
    .top-news-module .module__title,
    .top-news-module .headline              { font-size: var(--fs-lead); }
    @media (min-width: 36em) {
        .news-list__item--top               { grid-column: span 2; }
    }

    .news-archive__year + .news-archive__year { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
    .news-archive__title                    { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
    .news-archive__months                   { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; }
    .news-archive__months a                 { color: var(--c-muted); }
    .news-archive__months a:hover           { color: var(--c-accent-text); }

    .news-article                           { padding: clamp(1rem, 4vw, 2.5rem); border: 1px solid #efefef; }
    .news-article .publication-info         { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-3); }
    .news-article .publication-info .bl-f-ico { margin-right: .3125rem; color: var(--c-muted); font-size: 1.0625rem; vertical-align: -.25rem; }
    .news-article .publication-info a:hover .bl-f-ico { color: var(--c-accent-text); }
    .news-article h1                        { margin-bottom: var(--sp-5); }
    .news-article > .bl-blk,
    .news-article > .bl-gray                { margin-top: var(--sp-5); }
    .bl-article-source                      { color: var(--c-muted); }
    @media (max-width: 47.99em) {
        .news-article                       { padding: 0; border: 0; }
    }

    /* На телефоне лента новостей — компактные карточки: картинка слева, заголовок справа */
    @media (max-width: 35.99em) {
        .home-news__list .news-module,
        .news-list__item:not(.news-list__item--top) .news-module { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: start; }
        .home-news__list .news-module .info,
        .news-list__item:not(.news-list__item--top) .info,
        .home-news__list .news-module .summary,
        .news-list__item:not(.news-list__item--top) .summary { display: none; }
        .home-news__list .news-module .body,
        .news-list__item:not(.news-list__item--top) .body { margin: 0; padding: 0; }
        .home-news__list,
        .news-list                          { gap: var(--sp-4); }
    }

    .bl-related-news                        { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: var(--sp-5) var(--gutter); }
    .bl-related-news .news-module .image    { aspect-ratio: 29 / 20; }

    /* «Происшествия» (news/block/incidents.html.twig): карточка как меню раздела, вся строка — ссылка */
    .incident-news                         { display: flex; flex-direction: column; overflow: hidden; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-l); }
    .incident-news__title                  { display: flex; align-items: center; gap: .4375rem; padding: .75rem var(--sp-4); color: var(--c-muted); font-size: var(--fs-caps); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border); }
    .incident-news__title .bl-f-ico        { color: var(--c-brand-text); font-size: 1.125rem; }
    .incident-news__list                   { margin: 0; padding: .25rem 0; list-style: none; }
    .incident-news__item                   { position: relative; display: grid; gap: .1875rem; padding: .5625rem var(--sp-4); transition: background-color var(--transition); }
    .incident-news__item:hover             { background: var(--c-bg-soft); }
    .incident-news__meta                   { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-muted); font-size: var(--fs-caps); }
    .incident-news__meta .bl-f-ico         { margin-right: .25rem; color: inherit; font-size: .875rem; vertical-align: -.125rem; }
    .incident-news__link                   { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--c-ink); font-size: var(--fs-small); font-weight: 700; line-height: 1.35; text-decoration: none; transition: color var(--transition); }
    .incident-news__link::after            { position: absolute; inset: 0; content: ""; }
    .incident-news__item:hover .incident-news__link { color: var(--c-accent-text); }
    .incident-news__more                   { margin-top: auto; padding: .75rem var(--sp-4); color: var(--c-brand-text); font-size: var(--fs-small); font-weight: 700; text-decoration: none; border-top: 1px solid var(--c-border); transition: color var(--transition), background-color var(--transition); }
    .incident-news__more::after            { margin-left: .375rem; content: "→"; }
    .incident-news__more:hover             { color: var(--c-accent-text); background: var(--c-bg-soft); }

    /* Афиша: карточки событий в списках (afisha/_event_card.html.twig) */
    .event-grid                             { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: var(--sp-6) var(--gutter); }
    .event-grid--compact                    { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
    @media (max-width: 35.99em) {
        .event-grid                         { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); }
    }
    .event-card                             { position: relative; display: flex; flex-direction: column; min-width: 0; }
    .event-card__poster                     { position: relative; aspect-ratio: 290 / 414; overflow: hidden; background: #e9ebee url(../images/no-photo.png) center no-repeat; border-radius: var(--radius-l); box-shadow: 0 1px 3px rgb(26 38 50 / .12); }
    .event-card__poster img                 { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
    .event-card:hover .event-card__poster img { transform: scale(1.04); }
    .event-card__category,
    .event-card__comments                   { position: absolute; top: .5rem; display: flex; align-items: center; gap: .25rem; max-width: calc(100% - 1rem); padding: .1875rem .5rem; overflow: hidden; color: #fff; font-size: var(--fs-caps); font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; background: rgb(17 22 30 / .72); border-radius: 999px; }
    .event-card__category                   { left: .5rem; letter-spacing: .04em; text-transform: uppercase; }
    .event-card__comments                   { right: .5rem; }
    .event-card__comments .bl-f-ico         { font-size: .875rem; }
    .event-card__body                       { display: grid; gap: .3125rem; padding: .75rem .125rem 0; }
    .event-card__date                       { color: var(--c-accent-text); font-size: var(--fs-small); font-weight: 700; }
    .event-card__time                       { display: flex; gap: .3125rem; color: var(--c-text-soft); font-size: var(--fs-meta); line-height: 1.35; }
    .event-card__time .ico                  { width: 1rem; height: 1rem; margin-top: .0625rem; color: var(--c-muted); }
    .event-card__title                      { margin: .125rem 0 0; font-size: 1rem; line-height: 1.3; }
    .event-card__title a                    { color: var(--c-ink); text-decoration: none; }
    /* Вся карточка — ссылка на событие */
    .event-card__title a::after             { position: absolute; inset: 0; content: ""; }
    .event-card:hover .event-card__title a  { color: var(--c-accent-text); }
    .event-card__title a:focus-visible      { outline: 0; }
    .event-card:has(.event-card__title a:focus-visible) { outline: 2px solid var(--c-info); outline-offset: 4px; border-radius: var(--radius-l); }
    .event-card__place                      { display: flex; gap: .25rem; color: var(--c-muted); font-size: var(--fs-meta); line-height: 1.35; }
    .event-card__place .ico                 { width: 1rem; height: 1rem; margin-top: .0625rem; }
    .event-card__price                      { justify-self: start; margin-top: .125rem; padding: .125rem .5rem; color: var(--c-ink); font-size: var(--fs-caps); font-weight: 700; line-height: 1.4; background: #fff6d9; border-radius: 999px; }
    .event-card__price--free                { color: var(--c-success); background: var(--c-success-soft); }
    @media (max-width: 35.99em) {
        .event-card__title                  { font-size: var(--fs-base); }
        .event-card__category               { top: .375rem; left: .375rem; }
        .event-card__comments               { top: .375rem; right: .375rem; }
    }

    /* Разделы списка: «Сегодня», «На этой неделе» */
    .events-section + .events-section       { margin-top: var(--sp-7); }
    .events-section__title                  { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); margin: 0 0 var(--sp-4); font-size: var(--fs-h3); }
    .events-section__note                   { color: var(--c-muted); font-size: var(--fs-base); font-weight: 400; }
    .events-about                           { margin-top: var(--sp-7); padding-top: var(--sp-5); color: var(--c-text-soft); border-top: 1px solid var(--c-border); }

    /* Лента ближайших дней (afisha/block/days.html.twig): на телефоне прокручивается */
    .afisha-days                            { margin: 0 0 var(--sp-5); }
    .afisha-days__list                      { display: flex; gap: .375rem; margin: 0; padding: 0 0 .25rem; overflow-x: auto; list-style: none; scrollbar-width: none; scroll-snap-type: x proximity; }
    .afisha-days__list::-webkit-scrollbar   { display: none; }
    .afisha-days__list > li                 { flex: 1 0 3rem; scroll-snap-align: start; }
    .afisha-days__day                       { display: grid; justify-items: center; gap: .125rem; padding: .4375rem .25rem .5rem; color: var(--c-ink); text-decoration: none; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-l); transition: border-color var(--transition), background-color var(--transition); }
    .afisha-days__day:hover                 { color: var(--c-ink); border-color: var(--c-brand); }
    .afisha-days__weekday                   { color: var(--c-muted); font-size: var(--fs-caps); line-height: 1.2; white-space: nowrap; }
    .afisha-days__number                    { font-size: var(--fs-lead); font-weight: 700; line-height: 1.2; }
    .afisha-days__day--weekend .afisha-days__weekday,
    .afisha-days__day--weekend .afisha-days__number { color: var(--c-accent-text); }
    .afisha-days__day[aria-current]         { background: var(--c-brand); border-color: var(--c-brand); }
    .afisha-days__day[aria-current] .afisha-days__weekday,
    .afisha-days__day[aria-current] .afisha-days__number { color: var(--c-on-brand); }
    .afisha-days__list > li:first-child .afisha-days__weekday { color: var(--c-brand-text); font-weight: 700; }

    /* Соседние дни на странице дня */
    .day-pager                              { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-small); }
    .day-pager a                            { padding: .3125rem .75rem; color: var(--c-ink); text-decoration: none; white-space: nowrap; border: 1px solid var(--c-border-strong); border-radius: 999px; }
    .day-pager a:hover                      { border-color: var(--c-brand); }

    /* Страница события: постер и «когда» вверху .record, расписание */
    .event-hero                             { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--sp-4); }
    .event-hero--poster                     { grid-template-columns: 7.5rem minmax(0, 1fr); }
    .event-hero__poster                     { display: block; overflow: hidden; border-radius: var(--radius-l); box-shadow: 0 6px 20px rgb(26 38 50 / .18); }
    .event-hero__poster img                 { display: block; width: 100%; height: auto; }
    .event-hero__info                       { display: grid; align-content: start; justify-items: start; gap: var(--sp-3); min-width: 0; }
    .event-hero__info > *                   { margin: 0; }
    .event-hero__when                       { color: var(--c-accent-text); font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; }
    .event-hero__today                      { display: flex; align-items: center; gap: .375rem; padding: .375rem .75rem; color: var(--c-success); font-weight: 700; background: var(--c-success-soft); border-radius: var(--radius); }
    .event-hero__past                       { padding: .375rem .75rem; color: var(--c-muted); background: var(--c-bg-muted); border-radius: var(--radius); }
    @container content (min-width: 30rem) {
        .event-hero                         { gap: var(--sp-5); }
        .event-hero--poster                 { grid-template-columns: 13rem minmax(0, 1fr); }
    }
    @container content (max-width: 29.99rem) {
        .event-hero__when                   { font-size: var(--fs-lead); }
        .event-hero .record__lead           { font-size: var(--fs-base); }
    }
    .record-card__amount--text              { font-size: var(--fs-title); line-height: 1.3; }
    .record-card__amount--free              { color: var(--c-success); }
    .record-person__image--place            { background: #e9ebee; border-radius: var(--radius-l); }
    .record-person__name--link              { color: var(--c-ink); text-decoration: none; }
    .record-person__name--link:hover        { color: var(--c-accent-text); }
    .record-section__disclaimer             { margin: var(--sp-5) 0 var(--sp-2); padding-top: var(--sp-3); color: var(--c-muted); font-size: var(--fs-meta); font-style: italic; border-top: 1px solid var(--c-border); }
    .event-schedule__list                   { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
    .event-schedule__day                    { display: grid; gap: .125rem; padding: .625rem .875rem; background: var(--c-bg-soft); border: 1px solid #efede7; border-radius: var(--radius-l); }
    .event-schedule__date                   { font-weight: 700; }
    .event-schedule__time                   { color: var(--c-text-soft); font-size: var(--fs-small); }
    .event-schedule__day.is-today           { background: var(--c-brand-soft); border-color: var(--c-brand); }
    .event-schedule__day.is-today .event-schedule__date { color: var(--c-brand-text); }
    .event-schedule__day.is-past            { opacity: .6; }
    .event-schedule.is-collapsible:not(.is-expanded) .is-past { display: none; }
    .event-schedule__toggle                 { margin-top: var(--sp-3); padding: 0; color: var(--c-brand-text); font: inherit; font-size: var(--fs-small); background: none; border: 0; border-bottom: 1px dashed currentColor; cursor: pointer; }

    /* Площадка: фото, контакты, события */
    .location-record__image                 { overflow: hidden; background: #e9ebee; border-radius: var(--radius-l); }
    .location-record__image img             { display: block; width: 100%; height: auto; }
    .events-head                            { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); }
    .events-head .record-section__title     { margin: 0; }
    .events-head__switch                    { display: flex; gap: var(--sp-2); }
    .chip[aria-current]                     { color: var(--c-on-brand); font-weight: 700; background: var(--c-brand); border-color: var(--c-brand); }

    /* Объявления: элемент списка, короткий список, страница объявления, форма */
    .advert-item                            { grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-areas: "image body body" "image aside actions"; }
    .advert-item .item__image               { grid-area: image; align-self: start; aspect-ratio: 4 / 3; }
    .advert-item .item__image--empty        { background: var(--c-bg-muted) url(../images/no-photo.png) center / 60% auto no-repeat; }
    .advert-item .item__body                { grid-area: body; }
    .advert-item .item__aside               { grid-area: aside; }
    .advert-item .item__actions             { grid-area: actions; align-self: center; }
    .advert-item .item__price,
    .advert-item .item__info                { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .625rem; }
    .advert-item .price                     { padding: .125rem .5rem; color: var(--c-ink); font-size: var(--fs-base); font-weight: 700; white-space: nowrap; background: var(--c-price); border-radius: var(--radius-s); }
    .advert-item .auction                   { color: var(--c-muted); font-size: var(--fs-meta); }
    .advert-item .comments                  { color: var(--c-muted); font-size: var(--fs-meta); font-weight: 700; text-decoration: none; }
    .advert-item .comments:hover            { color: var(--c-ink); }
    .advert-item .bl-i-comments             { margin-right: .3125rem; color: inherit; font-size: 1.0625rem; vertical-align: -.25rem; }
    .advert-item .update                    { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; text-decoration: none; border-radius: var(--radius-s); }
    .advert-item .update:hover              { background: var(--c-bg); }
    .advert-item .update .bl-f-ico          { color: var(--c-brand-text); font-size: 1.125rem; }
    .advert-item .update:hover .bl-f-ico    { color: var(--c-accent-text); }
    .advert-item .date.is-updated           { color: var(--c-brand-text); font-weight: 700; }
    @media (min-width: 48em) {
        .advert-item                        { grid-template-columns: 6rem minmax(0, 1fr) minmax(8rem, auto) auto; grid-template-areas: "image body aside actions"; }
        .advert-item .item__price,
        .advert-item .item__info            { flex-direction: column; align-items: flex-end; gap: .125rem; }
    }

    /* Короткий список (advert-mini): объявления в сайдбаре и на главной, похожие вакансии. Вся строка — ссылка */
    .advert-mini                            { position: relative; display: grid; justify-items: start; gap: .1875rem; padding: .625rem 0; }
    .advert-mini + .advert-mini             { border-top: 1px solid var(--c-border); }
    .advert-mini__meta                      { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .375rem; color: var(--c-muted); font-size: var(--fs-meta); }
    .advert-mini__meta > * + *::before      { margin-right: .375rem; content: "·"; }
    .advert-mini__title                     { display: -webkit-box; margin: 0; overflow: hidden; font-size: var(--fs-base); line-height: 1.3; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .advert-mini .headline                  { color: var(--c-ink); font-weight: 700; text-decoration: none; transition: color var(--transition); }
    .advert-mini .headline::after           { position: absolute; inset: 0; content: ""; }
    .advert-mini:hover .headline            { color: var(--c-accent-text); }
    .advert-mini .summary                   { display: -webkit-box; overflow: hidden; color: var(--c-text-soft); font-size: var(--fs-small); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .advert-mini__price                     { margin-top: .125rem; padding: .0625rem .4375rem; color: var(--c-ink); font-size: var(--fs-small); font-weight: 700; white-space: nowrap; background: var(--c-price); border-radius: var(--radius-s); }
    .adverts-module .extra,
    .similar-vacancies-module .extra        { margin-top: .75rem; color: var(--c-muted); font-size: var(--fs-meta); }
    .adverts-module .extra .elem + .elem    { margin-top: .5rem; }
    .adverts-module .link,
    .similar-vacancies-module .link         { color: var(--c-muted); font-size: var(--fs-meta); font-weight: 700; text-decoration: none; text-transform: uppercase; }
    .adverts-module .link:hover,
    .similar-vacancies-module .link:hover   { color: var(--c-accent-text); }


    /* Работа: вакансии и резюме — списки, страницы, формы */
    /* Вакансии и резюме — ровная сетка: заголовок и подпись в одну строку с многоточием (на телефоне заголовок до двух строк),
       полное название — в title. Колонка зарплаты фиксированной ширины */
    .vacancy-item                           { grid-template-areas: "body" "aside"; }
    .vacancy-item .item__body               { grid-area: body; }
    .vacancy-item .item__aside              { grid-area: aside; }
    .vacancy-item .item__title,
    .resume-item .item__title               { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .vacancy-item .item__meta,
    .resume-item .item__meta                { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
    .vacancy-item .item__meta > *,
    .resume-item .item__meta > *            { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .vacancy-item .item__meta > :last-child,
    .resume-item .item__meta > :last-child  { flex: none; }
    /* Зарплата указана — зелёная плашка, «З/п не указана» — нейтральная */
    .vacancy-item .salary,
    .resume-item .salary                    { display: inline-block; padding: .125rem .5rem; color: var(--c-success); font-size: var(--fs-base); font-weight: 700; line-height: 1.35; background: var(--c-success-soft); border-radius: var(--radius-s); }
    .vacancy-item .salary--interview        { color: var(--c-muted); font-size: var(--fs-meta); font-weight: 400; background: #f0f2f3; }
    .item.hot .salary--interview            { background: rgb(26 38 50 / .06); }
    @media (min-width: 48em) {
        .vacancy-item                       { grid-template-columns: minmax(0, 1fr) 11.5rem; grid-template-areas: "body aside"; }
        .vacancy-item .item__title,
        .resume-item .item__title           { display: block; white-space: nowrap; text-overflow: ellipsis; }
        .vacancy-item .salary,
        .resume-item .salary                { white-space: nowrap; }
    }

    .resume-item                            { grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-areas: "image body" "image aside"; }
    .resume-item .item__image               { grid-area: image; align-self: start; aspect-ratio: 1; background: var(--c-bg-muted) url(../images/user-men.jpg) center / cover no-repeat; border-radius: 50%; }
    .resume-item .item__image.user-women    { background-image: url(../images/user-women.jpg); }
    .resume-item .item__image.has-photo     { background-image: none; }
    .resume-item .item__body                { grid-area: body; }
    .resume-item .item__aside               { grid-area: aside; }
    .resume-item .experience                { color: var(--c-text-soft); font-size: var(--fs-small); }
    @media (min-width: 48em) {
        .resume-item                        { grid-template-columns: 4.5rem minmax(0, 1fr) 10rem; grid-template-areas: "image body aside"; }
    }

    /* Каталог: список компаний, страница компании, рубрики, промо-блоки */
    .company-item                           { grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-areas: "image body" "image admin"; }
    .company-item .item__image              { grid-area: image; align-self: start; display: grid; place-items: center; aspect-ratio: 1; padding: .25rem; background: var(--c-bg); border: 1px solid var(--c-border); }
    .company-item .item__image img          { object-fit: contain; }
    .company-item .item__image--empty       { background: var(--c-brand-soft); border-color: transparent; }
    .company-item .item__initial            { color: var(--c-brand-text); font-size: 1.5rem; font-weight: 700; line-height: 1; }
    .company-item .item__body               { grid-area: body; }
    .company-item .item__admin              { grid-area: admin; justify-self: start; font-size: var(--fs-meta); }
    @media (min-width: 48em) {
        .company-item                       { grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-areas: "image body admin"; }
    }

    .bl-category-menu ul                    { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
    .bl-category-menu a                     { position: relative; display: block; padding: .25rem .625rem; color: var(--c-ink); font-size: var(--fs-small); font-weight: 700; text-decoration: none; border-radius: var(--radius-s); transition: background-color var(--transition); }
    .bl-category-menu a:hover,
    .bl-category-menu .sel                  { color: var(--c-on-brand); background: var(--c-brand); }
    .bl-category-menu .sel::after           { position: absolute; bottom: -5px; left: 50%; width: 0; height: 0; margin-left: -5px; content: ""; border-style: solid; border-width: 5px 5px 0; border-color: var(--c-brand) transparent transparent; }

    .company-module                         { background: #fff; border: 1px solid #f1f1f1; }
    .company-module + .company-module       { margin-top: .9375rem; }
    .company-module .image                  { display: grid; place-items: center; min-height: 7.1875rem; padding: .625rem .625rem .3125rem; background: #fff; }
    .company-module .image a                { height: auto; }
    .company-module .image img              { width: auto; height: auto; max-width: 100%; object-fit: contain; }
    .company-module .body                   { margin: 0; padding: .625rem .9375rem .5625rem; background: #fbfbfb; }
    .company-module .headline               { font-size: var(--fs-small); }

    /* Справочные страницы: подразделы */
    .sub-items                              { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-3) var(--gutter); margin: 0; padding: 0; list-style: none; }
    .sub-items .title                       { font-size: var(--fs-base); }
    .sub-items__item                        { min-width: 0; }
    .sub-items .description                 { margin-top: .125rem; color: var(--c-muted); font-size: var(--fs-meta); }
    .bl-city-info .info-item + .info-item   { margin-top: var(--sp-5); }
    .bl-city-info .info-item > .description { margin-bottom: var(--sp-3); }

    /*
     * Автобусы /bus: маршруты, направление, остановка. Номер маршрута — .bus-num, остановки направления — линия .bus-line
     * с точками (конечные крупнее, выбранная — красная). Обратный отсчёт до рейса [data-bus-wait], поиск маршрута
     * и недавние остановки — в site.js
     */
    .bus                                    { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-6); }
    .bus > *                                { min-width: 0; }
    .bus-num                                { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .375rem; color: #fff; font-size: 1rem; font-weight: 700; line-height: 1; background: var(--c-navy); border-radius: var(--radius-l); }
    .bus-num--l                             { min-width: 3rem; height: 3rem; font-size: 1.25rem; border-radius: .625rem; }
    .bus-section-title                      { margin: 0 0 var(--sp-3); font-size: var(--fs-title); }
    .bus-note                               { margin: var(--sp-3) 0 0; color: var(--c-muted); font-size: var(--fs-small); }
    .bus-note sup, .bus-hours sup, .bus-next sup { color: var(--c-accent-text); font-weight: 700; }
    .bus-empty                              { margin: 0; color: var(--c-muted); }
    .bus-empty--box                         { padding: var(--sp-5); color: var(--c-ink); background: var(--c-bg-soft); border: 1px solid #efede7; border-radius: var(--radius-l); }
    .bus-empty--box p                       { margin: 0; }
    .bus-empty--box p + p                   { margin-top: var(--sp-2); }

    /* Заголовок: номер маршрута и направление или остановка с уточнением места */
    .bus-title                              { display: flex; align-items: center; gap: var(--sp-3); }
    .bus-title__text                        { min-width: 0; }
    .bus-title__note                        { display: block; margin-top: .25rem; color: var(--c-muted); font-size: var(--fs-base); font-weight: 400; }
    .bus-route-tag                          { display: inline-flex; align-items: center; gap: var(--sp-2); justify-self: start; max-width: 100%; padding: .25rem 1rem .25rem .25rem; color: var(--c-ink); font-weight: 700; line-height: 1.25; text-decoration: none; background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: 999px; transition: border-color var(--transition); }
    .bus-route-tag .bus-num                 { border-radius: 999px; }
    .bus-route-tag:hover                    { color: var(--c-ink); border-color: var(--c-brand); }

    /* Поиск маршрута */
    .bus-search input                       { min-height: 3rem; padding-left: 2.75rem; background: var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366707a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") .875rem center / 1.25rem no-repeat; border-color: var(--c-border-strong); border-radius: var(--radius-l); }

    /* Маршруты: карточка с номером и ссылками на направления */
    .bus-routes                             { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
    .bus-route                              { display: flex; gap: var(--sp-3); padding: var(--sp-3); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-l); transition: border-color var(--transition), box-shadow var(--transition); }
    .bus-route:hover                        { border-color: var(--c-border-strong); box-shadow: 0 2px 12px rgb(26 38 50 / .07); }
    .bus-route__body                        { flex: 1; min-width: 0; }
    .bus-route__directions                  { margin: 0; padding: 0; list-style: none; }
    .bus-route__direction                   { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: .4375rem .5rem; color: var(--c-ink); line-height: 1.3; text-decoration: none; border-radius: var(--radius); transition: background-color var(--transition); }
    .bus-route__direction::after            { flex: none; width: .5rem; height: .5rem; content: ""; border: solid var(--c-muted-soft); border-width: 2px 2px 0 0; transform: rotate(45deg); }
    .bus-route__direction:hover             { color: var(--c-ink); background: var(--c-brand-soft); }
    .bus-route__direction:hover::after      { border-color: var(--c-brand-text); }
    .bus-route__note                        { margin: .25rem .5rem 0; color: var(--c-warning); font-size: var(--fs-meta); }

    /* Недавние остановки: список в сайдбаре */
    .bus-recent__head                       { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
    .bus-recent__title                      { margin: 0; }
    .bus-recent__clear                      { padding: 0; color: var(--c-muted); font-size: var(--fs-small); text-decoration: underline; background: none; border: 0; }
    .bus-recent__clear:hover                { color: var(--c-accent-text); }
    .bus-recent__list                       { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
    .bus-recent__link                       { display: flex; align-items: center; gap: var(--sp-2); padding: .5rem .75rem .5rem .5rem; color: var(--c-ink); text-decoration: none; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-l); transition: border-color var(--transition); }
    .bus-recent__link:hover                 { color: var(--c-ink); border-color: var(--c-brand); }
    .bus-recent__text                       { display: grid; min-width: 0; line-height: 1.3; }
    .bus-recent__stop,
    .bus-recent__direction                  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bus-recent__stop                       { font-weight: 700; }
    .bus-recent__direction                  { color: var(--c-muted); font-size: var(--fs-meta); }

    /* Будни / выходные и строка «сейчас» */
    .bus-toolbar                            { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); }
    .bus-days                               { display: inline-flex; padding: 3px; background: var(--c-bg-header); border-radius: 999px; }
    .bus-days__item                         { min-width: 6.5rem; padding: .5rem 1rem; color: var(--c-text-soft); font-size: var(--fs-small); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; border-radius: 999px; transition: background-color var(--transition), color var(--transition); }
    a.bus-days__item:hover                  { color: var(--c-ink); background: rgb(255 255 255 / .6); }
    .bus-days__item[aria-current]           { color: var(--c-ink); background: var(--c-bg); box-shadow: 0 1px 3px rgb(26 38 50 / .16); }
    .bus-days__item.is-disabled             { color: var(--c-muted-soft); cursor: not-allowed; }
    .bus-toolbar__status                    { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--c-muted); font-size: var(--fs-small); }
    .bus-live                               { width: .5rem; height: .5rem; background: var(--c-success); border-radius: 50%; }
    @media (prefers-reduced-motion: no-preference) {
        .bus-live                           { animation: bus-live 2s infinite; }
    }
    @keyframes bus-live {
        0%                                  { box-shadow: 0 0 0 0 rgb(46 125 79 / .5); }
        70%, 100%                           { box-shadow: 0 0 0 .5rem rgb(46 125 79 / 0); }
    }

    /* Линия маршрута: точки остановок на вертикальной линии, справа — ближайший рейс */
    .bus-line                               { margin: 0; padding: .375rem 0; list-style: none; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-l); }
    .bus-line__stop                         { position: relative; }
    .bus-line__stop::before                 { position: absolute; top: 0; bottom: 0; left: calc(1.5rem - 1.5px); width: 3px; content: ""; background: var(--c-brand); }
    .bus-line__stop:first-child::before     { top: 50%; }
    .bus-line__stop:last-child::before      { bottom: 50%; }
    .bus-line__stop::after                  { position: absolute; top: 50%; left: 1.5rem; width: .875rem; height: .875rem; content: ""; background: var(--c-bg); border: 3px solid var(--c-brand); border-radius: 50%; transform: translate(-50%, -50%); }
    .bus-line__stop:first-child::after,
    .bus-line__stop:last-child::after       { width: 1.125rem; height: 1.125rem; border-color: var(--c-navy); }
    .bus-line__stop.is-current::after       { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 4px rgb(254 74 74 / .2); }
    .bus-line__link                         { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 3.25rem; padding: .5rem 1rem .5rem 2.75rem; color: var(--c-ink); text-decoration: none; transition: background-color var(--transition); }
    .bus-line__link:hover                   { color: var(--c-ink); background: var(--c-bg-soft); }
    .is-current > .bus-line__link           { background: var(--c-brand-soft); }
    .bus-line__name                         { min-width: 0; font-size: 1rem; line-height: 1.3; }
    .is-current .bus-line__name             { font-weight: 700; }
    .bus-line__desc                         { display: block; color: var(--c-muted); font-size: var(--fs-meta); font-weight: 400; }
    .bus-line__desc .ico,
    .bus-title__note .ico                   { width: 1em; height: 1em; margin-right: .25em; vertical-align: -.125em; }
    .bus-line__time                         { display: grid; flex: none; justify-items: end; line-height: 1.3; text-align: right; }
    .bus-line__time b                       { font-size: 1rem; font-variant-numeric: tabular-nums; }
    .bus-line__none,
    .bus-line__count                        { color: var(--c-muted); font-size: var(--fs-meta); }
    .bus-wait                               { color: var(--c-brand-text); font-size: var(--fs-meta); font-weight: 700; }

    /* Остановка: ближайший рейс, расписание по часам, справа — остановки маршрута */
    .bus-stop                               { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6) var(--gutter); }
    .bus-stop__main                         { display: grid; align-content: start; gap: var(--sp-5); min-width: 0; }
    .bus-stop__aside                        { min-width: 0; }
    .bus-stop__aside .bus-line__link        { min-height: 2.875rem; }
    @container content (min-width: 46rem) {
        .bus-stop                           { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
    }
    .bus-next                               { padding: var(--sp-4) var(--sp-5); background: var(--c-brand-soft); border: 1px solid #bfe9e1; border-radius: var(--radius-l); }
    .bus-next__label                        { margin: 0; color: var(--c-text-soft); font-size: var(--fs-small); }
    .bus-next__main                         { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem var(--sp-3); margin: .25rem 0 0; }
    .bus-next__time                         { font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
    .bus-next .bus-wait                     { font-size: 1.0625rem; }
    .bus-next__more                         { margin: var(--sp-2) 0 0; color: var(--c-text-soft); }
    .bus-hours                              { background: var(--c-bg); border: 1px solid var(--c-border); border-collapse: separate; border-radius: var(--radius-l); }
    .bus-hours th,
    .bus-hours td                           { padding: .375rem .5rem; vertical-align: middle; border-bottom: 1px solid var(--c-border); }
    .bus-hours tr:last-child > *            { border-bottom: 0; }
    .bus-hours th                           { width: 3.25rem; padding-right: .75rem; font-size: 1.0625rem; text-align: right; font-variant-numeric: tabular-nums; background: var(--c-bg-soft); border-right: 1px solid var(--c-border); }
    .bus-hours tr:first-child th            { border-top-left-radius: var(--radius-l); }
    .bus-hours tr:last-child th             { border-bottom-left-radius: var(--radius-l); }
    .bus-hours tr.is-past th                { color: var(--c-muted); font-weight: 400; }
    .bus-hours__list                        { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
    .bus-hours__time                        { min-width: 2.5rem; padding: .25rem .375rem; font-size: 1rem; line-height: 1.3; text-align: center; font-variant-numeric: tabular-nums; background: var(--c-bg-header); border-radius: var(--radius); }
    .bus-hours__time.is-past                { color: var(--c-muted); background: none; }
    .bus-hours__time.is-next                { font-weight: 700; background: var(--c-brand); }

    /* Источник данных и приложения */
    .bus-about                              { padding-top: var(--sp-4); color: var(--c-muted); font-size: var(--fs-small); border-top: 1px solid var(--c-border); }
    .bus-about p                            { max-width: 46rem; margin: 0 0 var(--sp-2); }
    .bus-about__stores                      { display: flex; flex-wrap: wrap; gap: .75rem; }
    .bus-about__stores img                  { display: block; border-radius: var(--radius-s); }

    /* Курсы валют /kurs */
    .bl-rates-exchange > .bl-elem + .bl-elem { margin-top: .625rem; }
    .bl-rates-exchange .headline            { margin: 0; padding: .25rem .625rem; color: #fff; font-size: var(--fs-title); background: var(--c-info); }
    .bl-rates-exchange td                   { padding: .3125rem; vertical-align: middle; border-bottom: 1px solid #eee; }
    .bl-rates-exchange td:first-child       { width: 3.5rem; }
    .bl-rates-exchange td:last-child        { text-align: right; }
    .bl-rates-exchange .rate,
    .bl-rates-exchange .letter-code         { font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); line-height: 1.1; }
    .bl-rates-exchange .name                { color: var(--c-muted); font-size: var(--fs-meta); }
    .bl-rates-exchange .image               { width: 45px; height: 29px; background: url(../images/element/flag-icon.jpg) 0 0 no-repeat; border: 1px solid #e5e5e5; }
    .bl-rates-exchange tr:nth-child(2) .image { background-position: -45px 0; }
    .bl-rates-exchange tr:nth-child(3) .image { background-position: -90px 0; }
    .bl-rates-exchange tr:nth-child(4) .image { background-position: -135px 0; }
    .bl-rates-exchange tr:last-child .image { background-position: -180px 0; }
    .bl-rates-table th, .bl-rates-table td  { padding: .3125rem .625rem; text-align: center; border-bottom: 1px solid #eaeaea; }
    .bl-rates-table th:first-child,
    .bl-rates-table td:first-child          { text-align: left; }
    .bl-rates-table .bank-name              { font-weight: 700; }
    .bl-rates-table .bank-info              { color: var(--c-muted); font-size: var(--fs-meta); }

    /* Погода: день — карточка с четырьмя периодами */
    .weather-forecast                       { display: grid; gap: var(--sp-5); }
    .weather-day                            { border: 1px solid var(--c-border); }
    .weather-day__title                     { margin: 0; padding: .5rem .75rem; color: var(--c-brand-text); font-size: var(--fs-base); background: #f8f8f8; }
    .weather-day__steps                     { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .weather-step                           { padding: .75rem; text-align: center; }
    .weather-step + .weather-step           { border-left: 1px solid var(--c-border); }
    .weather-step__time                     { color: var(--c-muted); font-size: var(--fs-meta); text-transform: uppercase; }
    .weather-step .image                    { font-size: 3rem; line-height: 1.2; }
    .weather-step .image .bl-weather-ico    { color: var(--c-ink); }
    .weather-step .temperature              { color: var(--c-brand-text); font-size: var(--fs-title); font-weight: 700; }
    .weather-step .wind                     { margin: .375rem 0; padding: .375rem 0; font-size: var(--fs-small); border-block: 1px solid #eaeaea; }
    .weather-step .extra                    { color: var(--c-muted); font-size: var(--fs-meta); }
    @media (max-width: 35.99em) {
        .weather-day__steps                 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .weather-step:nth-child(3)          { border-left: 0; }
        .weather-step:nth-child(n + 3)      { border-top: 1px solid var(--c-border); }
    }

    /* Вход, регистрация, восстановление пароля: карточка по центру, без сайдбара (site-columns--single),
       метки над полями, кнопка во всю ширину */
    .site-columns--single                   { grid-template-columns: minmax(0, 1fr); }
    .site-columns--single .site-sidebar     { display: none; }
    .auth-page                              { width: 100%; max-width: 27rem; margin: var(--sp-6) auto var(--sp-7); }
    .auth-card                              { padding: var(--sp-6) var(--sp-5); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-l); box-shadow: 0 .5rem 2rem rgb(26 38 50 / .06); }
    .auth-card h1                           { margin: 0 0 var(--sp-2); font-size: var(--fs-h2); text-align: center; }
    .auth-card__lead                        { margin: 0 0 var(--sp-5); color: var(--c-text-soft); font-size: var(--fs-small); text-align: center; }
    .auth-card__lead p                      { margin: 0; }
    .auth-card__lead p + p                  { margin-top: var(--sp-2); }
    .auth-card .control-row                 { display: block; }
    .auth-card .control-row + .control-row  { margin-top: var(--sp-3); }
    .auth-card .control-label               { margin: 0 0 var(--sp-1); padding: 0; font-size: var(--fs-small); font-weight: 700; }
    .auth-card .control-submit              { display: grid; margin-top: var(--sp-5); }
    .auth-card .control-submit .bl-btn      { width: 100%; min-height: 2.75rem; }
    .auth-card .headline                    { margin: var(--sp-5) 0 var(--sp-3); padding: 0; font-size: var(--fs-base); border: 0; }
    .auth-card__aside                       { display: flex; justify-content: flex-end; margin-top: var(--sp-2); font-size: var(--fs-small); }
    .auth-card__aside a, .auth-card__footer a { color: var(--c-brand-text); font-weight: 700; }
    .auth-card__footer                      { margin: var(--sp-5) 0 0; padding-top: var(--sp-4); color: var(--c-text-soft); font-size: var(--fs-small); text-align: center; border-top: 1px solid var(--c-border); }
    .auth-page__note                        { margin-top: var(--sp-5); color: var(--c-muted); font-size: var(--fs-small); }
    .auth-social                            { margin-top: var(--sp-5); }
    .auth-social__title                     { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); color: var(--c-muted); font-size: var(--fs-meta); }
    .auth-social__title::before,
    .auth-social__title::after              { flex: 1; content: ""; border-top: 1px solid var(--c-border); }
    .auth-social .social-login              { justify-content: center; }
    .auth-social .social-login a            { border: 1px solid var(--c-border); transition: border-color var(--transition); }
    .auth-social .social-login a:hover      { border-color: var(--c-border-strong); }
    @media (max-width: 35.99em) {
        .auth-page                          { margin-top: var(--sp-4); }
        .auth-card                          { padding: var(--sp-5) var(--sp-4); }
    }
    .form-confirm                           { padding: .625rem .875rem; background: var(--c-warning-soft); border-left: 3px solid var(--c-warning); }

    /* Действие только для вошедших: «Войдите или зарегистрируйтесь» */
    .auth-prompt                            { padding: var(--sp-5); text-align: center; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); }
    .auth-prompt .prose                     { margin-bottom: var(--sp-4); }
    .auth-prompt__actions                   { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
    .auth-prompt__actions .bl-btn           { min-width: 9rem; min-height: var(--control-h); }

    /* Кабинет: карточка пользователя, настройки, разделы */
    .account-card                           { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); align-items: start; padding: var(--sp-5); background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); }
    .account-card__avatar                   { width: 4rem; aspect-ratio: 1; overflow: hidden; background: var(--c-bg-muted) url(../images/element/user.jpg) center / cover; border-radius: 50%; }
    .account-card__avatar img               { display: block; width: 100%; height: 100%; object-fit: cover; }
    .account-card__name                     { margin: 0; font-size: var(--fs-title); }
    .account-card__info                     { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem var(--sp-3); margin: var(--sp-2) 0 0; font-size: var(--fs-small); }
    .account-card__info dt                  { color: var(--c-muted); }
    .account-card__info dd                  { margin: 0; overflow-wrap: anywhere; }
    .account-card__about                    { grid-column: 1 / -1; margin: 0; color: var(--c-text-soft); font-size: var(--fs-small); }
    .account-card__actions                  { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
    @media (min-width: 36em) {
        .account-card                       { grid-template-columns: 5rem minmax(0, 1fr) auto; }
        .account-card__avatar               { width: 5rem; grid-row: span 2; }
        .account-card__actions              { grid-column: 3; grid-row: 1; }
        .account-card__about                { grid-column: 2 / -1; }
    }
    .section-title                          { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-title); }
    .section-title:first-child              { margin-top: 0; }
    .section-title__count                   { color: var(--c-muted); font-size: var(--fs-base); font-weight: 400; }
    .settings-cards                         { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--sp-4); }
    .settings-card                          { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-5); border: 1px solid var(--c-border); border-radius: var(--radius); }
    .settings-card h2                       { margin: 0; font-size: var(--fs-lead); }
    .settings-card p                        { flex: 1; margin: 0 0 var(--sp-2); color: var(--c-text-soft); font-size: var(--fs-small); }
    .settings-card__value                   { color: var(--c-ink); font-weight: 700; overflow-wrap: anywhere; }
    .form-intro                             { max-width: 48rem; margin: 0 0 var(--sp-5); color: var(--c-text-soft); font-size: var(--fs-small); }

    .profile-head                           { display: grid; gap: var(--sp-4) var(--gutter); }
    .profile-head h1                        { margin-bottom: var(--sp-3); }
    .profile-head p                         { margin: .25rem 0; }
    @media (min-width: 48em) {
        .profile-head                       { grid-template-columns: minmax(0, 1fr) 9.375rem; }
    }
    .bl-profile-description                 { padding: .9375rem; background: #faf7f1; border-radius: var(--radius-l); }
    .profile-stats                          { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--sp-3); margin-top: .9375rem; padding: .625rem 0 .9375rem; border-block: 1px solid #eee; }
    .bl-profile-stat                        { color: var(--c-muted); text-align: center; }
    .bl-profile-stat p                      { margin: 0; }
    .bl-profile-stat .title                 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 700; line-height: 1.2; }
    .bl-profile-stat .title a               { color: var(--c-info); text-decoration: none; }

    .c-msg-list                             { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-border); }
    .c-msg-list__item                       { display: grid; grid-template-columns: 1.875rem minmax(0, 1fr) auto; grid-template-areas: "avatar user date" "avatar title title"; align-items: center; gap: .125rem .75rem; padding: .625rem .5rem; font-size: var(--fs-small); border-bottom: 1px solid var(--c-border); }
    .c-msg-list__item                       { position: relative; transition: background-color var(--transition); }
    .c-msg-list__item:hover                 { background: var(--c-bg-soft); }
    .c-msg-list .title::after               { position: absolute; inset: 0; content: ""; }
    .c-msg-list .avatar                     { grid-area: avatar; width: 1.875rem; height: 1.875rem; overflow: hidden; }
    .c-msg-list .avatar img                 { display: block; width: 100%; height: 100%; object-fit: cover; }
    .c-msg-list .no-avatar, .c-msg .no-avatar { background: url(../images/element/user.jpg) center / cover no-repeat; }
    .c-msg-list .user                       { grid-area: user; color: var(--c-muted); }
    .c-msg-list .title                      { grid-area: title; color: var(--c-ink); text-decoration: none; }
    .c-msg-list__item:hover .title          { color: var(--c-accent-text); }
    .c-msg-list .data                       { grid-area: date; color: var(--c-muted); font-size: var(--fs-meta); }
    .c-msg-list .new-msg .title             { color: var(--c-brand-text); font-weight: 700; }
    @media (min-width: 48em) {
        .c-msg-list__item                   { grid-template-columns: 1.875rem 10rem minmax(0, 1fr) auto; grid-template-areas: "avatar user title date"; }
    }

    .c-msg .msg-info, .c-msg .msg-body      { padding: .75rem; }
    .c-msg .msg-info                        { display: flex; gap: .75rem; background: #f9f9f9; border-bottom: 1px solid var(--c-border); }
    .c-msg .avatar                          { flex: none; width: 3.125rem; height: 3.125rem; overflow: hidden; }
    .c-msg .avatar img                      { display: block; width: 100%; height: 100%; object-fit: cover; }
    .c-msg .published > * + *               { margin-left: .375rem; }
    .c-msg .message-date                    { color: var(--c-muted); }
    .c-msg .title                           { margin: .375rem 0 0; font-size: var(--fs-base); }

    /* Продвижение: тарифы, выбор способа оплаты, счёт */
    .bl-tariffs-blk                         { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: var(--sp-5) var(--gutter); }
    .c-tariff__card                         { --tariff: #023d5f; --tariff-dark: #023253; display: flex; flex-direction: column; }
    .bl-tariffs-blk .c-tariff__card:nth-child(1) { --tariff: #fb8c00; --tariff-dark: #b45f06; }
    .bl-tariffs-blk .c-tariff__card:nth-child(2) { --tariff: #2196f3; --tariff-dark: #1565c0; }
    .bl-tariffs-blk .c-tariff__card:nth-child(3) { --tariff: #ab47bc; --tariff-dark: #7b1fa2; }
    .bl-tariffs-blk .c-tariff__card:nth-child(4) { --tariff: #8bc34a; --tariff-dark: #4f7a14; }
    .c-tariff__card .card__image            { padding: 1.25rem; color: var(--tariff); text-align: center; background: var(--tariff); border-radius: var(--radius) var(--radius) 0 0; }
    .c-tariff__card .card__image ._image    { display: inline-grid; place-items: center; width: 6.25rem; height: 6.25rem; background: #fff; border-radius: 50%; }
    .c-tariff__card .card__image svg        { width: 3.125rem; height: 3.125rem; fill: currentColor; }
    .c-tariff__card .card__info             { display: flex; flex: 1; flex-direction: column; padding-top: .3125rem; text-align: center; border: 1px solid var(--c-border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
    .c-tariff__card .card__info > *         { padding: .625rem 1.25rem; }
    .c-tariff__card ._headline              { margin: 0; font-size: var(--fs-base); text-transform: uppercase; }
    .c-tariff__card ._description           { color: var(--c-muted); font-size: var(--fs-small); background: #e6e8e9; }
    .c-tariff__card ._price                 { flex: 1; font-size: var(--fs-title); font-weight: 700; }
    .c-tariff__card ._price .__old          { color: var(--c-muted); font-size: var(--fs-base); text-decoration: line-through; }
    .c-tariff__card ._more                  { padding: 0; }
    .c-tariff__card ._more a                { display: block; padding: .625rem 1.25rem; color: #fff; font-weight: 700; text-decoration: none; text-transform: uppercase; background: var(--tariff-dark); border-radius: 0 0 var(--radius) var(--radius); }
    .c-tariff__card ._more a:hover          { color: #fff; filter: brightness(.9); }

    .c-pay-sys                              { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: var(--sp-4) var(--gutter); }
    .c-pay-sys a                            { display: grid; gap: .625rem; padding: .9375rem 1.25rem; color: inherit; font-weight: 700; text-align: center; text-decoration: none; text-transform: uppercase; border: 1px solid var(--c-border); border-radius: var(--radius); }
    .c-pay-sys img                          { display: block; width: 100%; }
    .c-pay-sys a:hover                      { border-color: var(--c-brand); }
    .c-pay-sys a._disabled                  { color: #555; cursor: default; opacity: .45; }
    .c-pay-sys a._disabled:hover            { border-color: var(--c-border); }

    .c-invoice                              { max-width: 20rem; padding: 1.25rem 1.25rem .9375rem; border: 1px solid var(--c-border); border-radius: var(--radius); }
    .c-invoice ._headline                   { margin: 0 0 .625rem; padding: .3125rem; font-size: var(--fs-title); text-align: center; background: #f2f2f2; }
    .c-invoice dl                           { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
    .c-invoice dt, .c-invoice dd            { margin: 0; padding: .625rem .125rem; border-top: 1px solid var(--c-border); }
    .c-invoice dt:first-of-type, .c-invoice dd:first-of-type { border-top: 0; }
    .c-invoice dt                           { color: var(--c-muted); text-align: right; }
    .c-invoice dt::after                    { content: ":"; }
    .c-invoice dd                           { font-weight: 700; }

    /*
     * Главная: секции .home-section с заголовком .home-head (название, число, рубрики-чипы, действие, ссылка «все»),
     * ряды .home-row (широкая ячейка на две колонки и две узкие), карточки-списки .home-card со ссылкой внизу
     */
    .home                                   { padding-top: var(--sp-5); }
    .home-section + .home-section           { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

    .home-head                              { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); min-height: 2.25rem; margin-bottom: var(--sp-4); }
    .home-head__title                       { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; font-size: var(--fs-h3); line-height: 1.25; }
    .home-head__title a                     { color: var(--c-ink); text-decoration: none; }
    .home-head__title a:hover               { color: var(--c-accent-text); }
    /* Рубрики: лента с прокруткой, край затухает; на телефоне — отдельной строкой под заголовком */
    .home-head__chips                       { display: flex; flex: 1 1 0; gap: var(--sp-2); min-width: 0; margin: 0; padding: 0 2rem 0 0; overflow-x: auto; list-style: none; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
    .home-head__chips::-webkit-scrollbar    { display: none; }
    .home-head__chips .chip                 { white-space: nowrap; }
    .home-head__actions                     { display: flex; align-items: center; gap: var(--sp-2) var(--sp-4); margin-left: auto; }
    .home-head__actions .bl-btn             { min-height: 2rem; padding-block: .3125rem; }
    .home-head__more                        { color: var(--c-brand-text); font-size: var(--fs-small); font-weight: 700; text-decoration: none; white-space: nowrap; }
    .home-head__more::after                 { margin-left: .375rem; content: "→"; }
    .home-head__more:hover                  { color: var(--c-accent-text); }
    .home-head--spacer                      { visibility: hidden; }
    @media (max-width: 47.99em) {
        .home-head__chips                   { flex-basis: 100%; order: 1; }
        .home-head--spacer                  { display: none; }
    }

    .home-row,
    .home-news__top                         { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6) var(--gutter); align-items: start; }
    .home-row__head                         { grid-column: 1 / -1; margin-bottom: calc(var(--sp-4) - var(--sp-6)); }
    .home-row__wide,
    .home-news__main                        { grid-column: span 2; }
    @media (max-width: 63.99em) {
        .home-row, .home-news__top          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 47.99em) {
        .home-row, .home-news__top          { grid-template-columns: minmax(0, 1fr); }
        .home-row__wide, .home-news__main   { grid-column: auto; }
    }

    .home-card                              { display: flex; flex-direction: column; overflow: hidden; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-l); }
    .home-card .items                       { border-top: 0; }
    .home-card .item:last-child             { border-bottom: 0; }
    .home-card .item .summary               { -webkit-line-clamp: 1; }
    .home-card > .advert-mini               { padding-inline: var(--sp-4); transition: background-color var(--transition); }
    .home-card > .advert-mini:hover         { background: var(--c-bg-soft); }
    .home-card__more                        { margin-top: auto; padding: .75rem var(--sp-4); color: var(--c-brand-text); font-size: var(--fs-small); font-weight: 700; text-decoration: none; border-top: 1px solid var(--c-border); transition: color var(--transition), background-color var(--transition); }
    .home-card__more::after                 { margin-left: .375rem; content: "→"; }
    .home-card__more:hover                  { color: var(--c-accent-text); background: var(--c-bg-soft); }
    .home .bl-side-banner                   { align-items: flex-start; border-radius: var(--radius-l); }
    .home .bl-vk-widget                     { border-radius: var(--radius-l); }

    /* Новости: главная новость на две колонки, «Происшествия» и баннер — во всю высоту ряда */
    .home-news__top                         { align-items: stretch; }
    .home-news__incidents .bl-blk,
    .home-news__incidents .incident-news,
    .home-news__banner .bl-blk,
    .home-news__banner .bl-side-banner      { height: 100%; }
    .home-news__list                        { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-6) var(--gutter); margin-top: var(--sp-6); }
    .home-promo .home-news__list            { margin-top: 0; }

    /* Афиша: тёмная полоса во всю ширину колонки (узнаваемый блок главной), четыре карточки в ряд, на телефоне — по две.
       Компоненты раздела (чипы, лента дней, .event-card) перекрашены под тёмный фон */
    .home-afisha                            { margin-inline: calc(-1 * var(--gutter)); padding: var(--sp-5) var(--gutter) var(--sp-6); color: #fff; background: var(--c-dark); }
    .home-afisha .home-head__title a        { color: #fff; }
    .home-afisha .home-head__title a:hover,
    .home-afisha .home-head__more:hover     { color: var(--c-accent); }
    .home-afisha .home-head__more           { color: var(--c-brand); }
    .home-afisha .chip                      { color: #c9cdd2; background: transparent; border-color: rgb(255 255 255 / .2); }
    .home-afisha a.chip:hover               { color: #fff; background: rgb(255 255 255 / .08); border-color: var(--c-brand); }
    .home-afisha .afisha-days__day          { color: #fff; background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .12); }
    .home-afisha .afisha-days__day:hover    { color: #fff; background: rgb(255 255 255 / .1); border-color: var(--c-brand); }
    .home-afisha .afisha-days__weekday      { color: #a4a8ad; }
    .home-afisha .afisha-days__day--weekend .afisha-days__weekday,
    .home-afisha .afisha-days__day--weekend .afisha-days__number { color: #ff6b6b; }
    .home-afisha .afisha-days__list > li:first-child .afisha-days__weekday { color: var(--c-brand); }
    .home-afisha .event-grid                { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (min-width: 48em) {
        .home-afisha .event-grid            { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    .home-afisha .event-card__poster        { box-shadow: none; }
    .home-afisha .event-card__date          { color: #ff6b6b; }
    .home-afisha .event-card__title a       { color: #fff; }
    .home-afisha .event-card:hover .event-card__title a { color: var(--c-accent); }
    .home-afisha .event-card:has(.event-card__title a:focus-visible) { outline-color: var(--c-brand); }
    .home-afisha .event-card__time,
    .home-afisha .event-card__place,
    .home-afisha .event-card__time .ico     { color: #a4a8ad; }
    .home-afisha .event-card__price         { color: #f5d67b; background: rgb(245 214 123 / .14); }
    .home-afisha .event-card__price--free   { color: #7fd6a0; background: rgb(127 214 160 / .14); }

    /* Объявления: компактные элементы списка; рубрики — карточки с картинкой рубрики в шапке */
    .home-card .advert-item .item__title    { font-size: var(--fs-base); }
    @media (min-width: 36em) {
        .home-card .advert-item             { grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-areas: "image body aside"; }
        .home-card .advert-item .item__aside,
        .home-card .advert-item .item__price,
        .home-card .advert-item .item__info { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: .125rem; text-align: right; }
    }
    .home-cat__head                         { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 8rem; padding: var(--sp-4); color: #fff; background: var(--c-dark) center / cover no-repeat; }
    .home-cat__head--6                      { background-image: linear-gradient(to top, rgb(17 22 30 / .85), rgb(17 22 30 / .1)), url(../images/estate.jpg); }
    .home-cat__head--3                      { background-image: linear-gradient(to top, rgb(17 22 30 / .85), rgb(17 22 30 / .1)), url(../images/auto.jpg?v6); }
    .home-cat__title                        { margin: 0; font-size: var(--fs-lead); line-height: 1.25; }
    .home-cat__summary                      { margin: .25rem 0 0; color: rgb(255 255 255 / .85); font-size: var(--fs-meta); line-height: 1.4; }
    .home-cat__empty                        { margin: 0; padding: var(--sp-4); color: var(--c-muted); font-size: var(--fs-small); }

    /* Каталог: компании премиум-каталога с логотипом */
    .home-company                           { position: relative; display: grid; gap: .25rem; padding: var(--sp-4); transition: background-color var(--transition); }
    .home-company + .home-company           { border-top: 1px solid var(--c-border); }
    .home-company:hover                     { background: var(--c-bg-soft); }
    /* Flex, а не grid: в grid-ячейке max-height: 100% считается от строки, растянутой по картинке, и логотип вылезает */
    .home-company__logo                     { display: flex; align-items: center; justify-content: center; height: 5.5rem; margin-bottom: var(--sp-2); }
    .home-company__logo img                 { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
    .home-company__title                    { margin: 0; font-size: var(--fs-base); line-height: 1.3; }
    .home-company__title a                  { color: var(--c-ink); text-decoration: none; transition: color var(--transition); }
    .home-company__title a::after           { position: absolute; inset: 0; content: ""; }
    .home-company:hover .home-company__title a { color: var(--c-accent-text); }
    .home-company__summary                  { display: -webkit-box; margin: 0; overflow: hidden; color: var(--c-text-soft); font-size: var(--fs-small); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .home-row__banner .bl-side-banner       { padding: 0; border: 0; }

}


@layer utilities {
    .df-align-l                             { text-align: left; }
    .df-align-r                             { text-align: right; }
    .df-align-c                             { text-align: center; }
    .df-bold                                { font-weight: 700; }
    .df-italic                              { font-style: italic; }
    .df-uppercase                           { text-transform: uppercase; }
    .df-width50                             { width: 50%; }
    .df-float-left                          { float: left; }
    .df-float-right                         { float: right; }
    .df-float-none                          { float: none; }
    .df-clear-fix                           { clear: both; }
    .df-clear-wrap::after                   { display: table; clear: both; content: ""; }
    .df-overflow-h                          { overflow: hidden; }
    .df-inline-elem > *                     { display: inline-block; margin-left: 1.25rem; vertical-align: top; }
    .df-inline-elem > :first-child          { margin-left: 0; }
    .df-horizontal-label label              { margin-bottom: .625rem; }
    .df-hidden                              { display: none; }
    .df-border-none                         { border: 0; }
    .df-elem-first                          { margin-top: 0; }
    .df-elem-last                           { margin-bottom: 0; }
    .df-elem-alone                          { margin: 0; }
    .nowrap                                 { white-space: nowrap; }
    .visually-hidden                        { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}