/* =========================================================
   Дизайн-система «РаботаПросто»
   - Единая палитра, типографика, отступы
   - Все компоненты ниже описаны один раз и переиспользуются
   - Никаких inline-стилей в шаблонах
   ========================================================= */

@font-face {
    font-family: "Bebas Neue Pro Book";
    src: url("/fonts/Bebas%20Neue%20Pro%20Book.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Bebas Neue Cyrillic";
    src: url("/fonts/Bebas%20Neue%20Cyrillic.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aempirial";
    src: url("/fonts/aempirial.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Шапка — бренд; фон страницы #ABBFD6; блоки светлее фона (не белые) */
    --brand: #028DA4;
    --brand-hover: #017a90;
    --brand-soft: rgba(2, 141, 164, .22);

    --bg: #ABBFD6;
    --bg-deep: #9eb3c9;
    --bg-strong: #8fa6bb;
    --bg-soft: #c5d4e5;

    /* Поверхности контента: светлее --bg */
    --surface: #d4e4f2;
    --surface-alt: #c8d8ea;
    --border: #a3b8ce;
    --border-strong: #94abc4;

    /* Высота строки шапки: +30% к базе 72px */
    --app-header-row-min: calc(72px * 1.3);
    --app-header-pad-y: calc(8px * 1.3);
    /* Единый размер текста в шапке (город, вакансии, кабинет, выход) */
    --app-header-nav-fs: calc(var(--fs-16) * 1.4);

    /* Текст */
    --text: #1f2937;
    --text-muted: #6b7280;
    --text-on-dark: #f5f7fa;
    --text-on-dark-muted: #cbd0d8;

    /* Состояния */
    --danger: #b42318;
    --danger-bg: #fde8e6;
    --success: #027a48;
    --success-bg: #d8f5e6;

    /* Радиусы и тени */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow: 0 4px 12px rgba(15, 23, 42, .08);

    /* Типографика (локальные шрифты в /public/fonts/) */
    --font-sans: "Bebas Neue Pro Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-accent: "Bebas Neue Cyrillic", "Bebas Neue Pro Book", sans-serif;
    --font-brand: "Aempirial", "Bebas Neue Pro Book", sans-serif;
    /* Укрупнённая шкала под display-шрифты (Bebas и т.п.) */
    --fs-12: 14px;
    --fs-14: 17px;
    --fs-16: 20px;
    --fs-18: 24px;
    --fs-22: 30px;
    --fs-28: 38px;
    --fs-36: 46px;
}

/* ---------- База ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    font-size: var(--fs-16);
    line-height: 1.5;
    letter-spacing: 0.015em;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
img { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

h1, h2, h3, h4 {
    margin: 0 0 12px;
    line-height: 1.15;
    font-family: var(--font-accent);
    font-weight: 400;
    letter-spacing: 0.03em;
}

strong,
b {
    font-family: var(--font-accent);
    font-weight: 400;
}
h1 { font-size: var(--fs-36); }
h2 { font-size: var(--fs-28); }
h3 { font-size: var(--fs-22); }
h4 { font-size: var(--fs-18); }

/* Главный заголовок страницы — единый стиль (как «Моё резюме») */
.page-title {
    font-family: var(--font-accent);
    font-size: var(--fs-36);
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.15;
    color: var(--text);
    margin: 0 0 8px;
}

/* Подзаголовок секции под главным (шаги мастера, блоки кабинета) */
.section-title {
    font-family: var(--font-accent);
    font-size: var(--fs-28);
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.15;
    color: var(--text);
    margin: 0 0 16px;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Шапка / навигация ---------- */

.app-header {
    background: var(--brand);
    border-bottom: 1px solid rgba(0, 0, 0, .18);
    font-family: var(--font-sans);
    font-size: var(--app-header-nav-fs);
    font-weight: 500;
    line-height: 1.35;
}
.app-header .mode-switch__btn.is-active {
    background: transparent;
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .95);
}
.app-header .mode-switch__btn.is-active:hover {
    background: transparent;
    color: #fff;
    border-bottom-color: #fff;
}
.app-header .brand__mark {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
}
.app-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--app-header-row-min);
    padding: var(--app-header-pad-y) 0;
}
.app-header__left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 28px;
    min-width: 0;
}
@media (max-width: 640px) {
    .app-header__row {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 0;
        gap: 10px;
    }
    .app-header__left {
        flex: 1 1 100%;
    }
    .app-header .nav-main {
        flex-wrap: wrap;
        row-gap: 4px;
        column-gap: 14px;
    }
    .app-header__right {
        width: 100%;
        justify-content: flex-end;
    }
}
.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-on-dark);
    text-decoration: none;
}
.brand:hover { color: var(--text-on-dark); }

/* Плейсхолдер, если файла лого нет */
.brand__mark {
    box-sizing: border-box;
    width: calc(var(--app-header-row-min) * 0.84);
    height: calc(var(--app-header-row-min) * 0.84);
    border-radius: 8px;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .28);
    display: inline-block;
}
/* Лого в шапке: ~84% высоты строки шапки (70% + 20%), ширина по пропорциям файла */
.brand__logo {
    height: calc(var(--app-header-row-min) * 0.84);
    width: auto;
    max-width: min(52vw, 360px);
    flex-shrink: 0;
    display: block;
    object-fit: contain;
    border-radius: 4px;
}

.app-header .nav-main {
    display: flex;
    gap: 18px;
    align-items: center;
    min-width: 0;
}
.app-header .nav-main a {
    color: var(--text-on-dark);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color .12s ease, border-color .12s ease;
}
.app-header .nav-main__geo {
    max-width: min(220px, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-header .nav-main a:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .75);
}

.app-header__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---------- Режимы кабинета в шапке (как город / вакансии) ---------- */

.app-header .mode-switch {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}
.mode-switch__form {
    display: contents;
    margin: 0;
    padding: 0;
}
.app-header .mode-switch button.mode-switch__btn {
    margin: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
}
.app-header .mode-switch button.mode-switch__btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .65);
    outline-offset: 2px;
}
.app-header .mode-switch__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 0;
    padding: 8px 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--text-on-dark);
    border-radius: 0;
    border-bottom: 2px solid transparent;
    transition: color .12s ease, border-color .12s ease;
    text-decoration: none;
    white-space: nowrap;
}
.app-header .mode-switch__btn:hover {
    color: #fff;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .75);
    text-decoration: none;
}
@media (max-width: 720px) {
    .app-header {
        font-size: var(--fs-16);
    }
}

/* ---------- Кнопки ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 500;
    font-size: var(--fs-16);
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.btn--primary {
    font-family: var(--font-accent);
    letter-spacing: 0.04em;
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; text-decoration: none; }

.btn--secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }

.btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }

.btn--danger {
    background: var(--surface);
    color: var(--danger);
    border-color: #f3c4c0;
}
.btn--danger:hover { background: var(--danger-bg); color: var(--danger); text-decoration: none; }

.btn--sm { height: 38px; padding: 0 14px; font-size: var(--fs-14); }
.btn--lg { height: 52px; padding: 0 24px; font-size: var(--fs-18); }
.btn--block { display: flex; width: 100%; }

/* Скрытие текста кнопки внутри inline-формы (logout) */
.inline-form { display: inline; }

/* ---------- Поля формы ---------- */

.field { margin-bottom: 14px; }
.field__label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-14);
    font-weight: 500;
    color: var(--text);
}
.field__hint {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: var(--fs-12);
}

.input,
.select,
.textarea {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-16);
    line-height: 1.4;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.textarea {
    height: auto;
    min-height: 160px;
    padding: 12px 14px;
    resize: vertical;
}
.select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%234b5d6e' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.input::placeholder { color: var(--text-muted); }

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 600px) {
    .field-grid { grid-template-columns: 1fr; }
}

/* ---------- Карточки ---------- */

.card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
}
.card--flat { box-shadow: none; }
.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.card__title {
    margin: 0;
    font-size: var(--fs-22);
    font-family: var(--font-accent);
    letter-spacing: 0.03em;
}
.card__meta {
    color: var(--text-muted);
    font-size: var(--fs-14);
    margin-bottom: 8px;
}

/* ---------- Бейджи ---------- */

.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--text);
    font-size: var(--fs-14);
    font-weight: 500;
    border: 1px solid var(--border);
}
.badge--brand {
    background: var(--brand-soft);
    color: var(--brand-hover);
    border-color: transparent;
}

/* ---------- Уведомления ---------- */

.alert {
    padding: 14px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    font-size: var(--fs-14);
}
.alert--success { background: var(--success-bg); color: var(--success); border-color: transparent; }
.alert--error { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.alert ul { margin: 6px 0 0 18px; padding: 0; }

/* ---------- Сетки ---------- */

.layout-2col {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 24px;
}
@media (max-width: 900px) {
    .layout-2col { grid-template-columns: 1fr; }
}

/* Панель «Должность + сортировка» над списком вакансий */
.vac-search-toolbar__grid {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 280px);
    gap: 16px 24px;
    align-items: end;
}
@media (max-width: 600px) {
    .vac-search-toolbar__grid {
        grid-template-columns: 1fr;
    }
}

.vac-search-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    align-items: stretch;
}

.vac-search-toolbar__actions .btn {
    flex: 1 1 0;
    min-width: min(140px, 100%);
    justify-content: center;
}

/* ---------- Модальные окна (native <dialog>) ---------- */

dialog.modal {
    border: none;
    padding: 0;
    border-radius: var(--radius-lg);
    max-width: min(440px, calc(100vw - 32px));
    width: 100%;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}
dialog.modal::backdrop {
    background: rgba(15, 23, 42, 0.45);
}
.modal__body {
    padding: 22px 22px 20px;
}
.modal__title {
    margin: 0 0 16px;
    font-size: var(--fs-20);
    font-weight: 600;
}
.modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.modal__actions .btn {
    flex: 1 1 auto;
    min-width: 120px;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.toolbar .page-title {
    margin-bottom: 0;
}

/* ---------- Hero ---------- */

.hero {
    background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-soft) 100%);
    border-radius: var(--radius-lg);
    padding: 48px 36px;
    margin: 24px 0;
    color: var(--text);
    box-shadow: var(--shadow);
}
.hero__title {
    font-family: var(--font-accent);
    letter-spacing: 0.04em;
    font-size: var(--fs-36);
    margin-bottom: 8px;
    color: var(--text);
}
.hero__subtitle {
    color: var(--text-muted);
    margin: 0 0 20px;
    max-width: 640px;
    font-size: var(--fs-16);
}
.hero__form {
    display: flex;
    gap: 8px;
    background: var(--surface);
    padding: 8px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    max-width: 720px;
}
.hero__form .input {
    border: none;
    height: 48px;
    box-shadow: none;
    flex: 1;
}
.hero__form .input:focus { box-shadow: none; }
.hero__form .btn { height: 48px; }

/* ---------- Сетка популярных категорий ---------- */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.cards-grid .card { margin: 0; }
.cards-grid a.card { color: var(--text); }
.cards-grid a.card:hover { text-decoration: none; border-color: var(--brand); }

/* ---------- Пагинация (Tailwind-стиль Laravel'а) ---------- */

.pagination,
nav[aria-label="Pagination Navigation"] ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
    list-style: none;
    padding: 0;
}
.pagination a,
.pagination span,
nav[aria-label="Pagination Navigation"] a,
nav[aria-label="Pagination Navigation"] span {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    font-size: var(--fs-16);
    text-decoration: none;
}
.pagination a:hover,
nav[aria-label="Pagination Navigation"] a:hover { background: var(--surface-alt); }
.pagination .active span,
[aria-current="page"] span {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

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

.app-footer {
    background: var(--bg);
    color: var(--text-muted);
    padding: 24px 0;
    margin-top: auto;
    font-size: var(--fs-14);
    border-top: 1px solid var(--border-strong);
}
.app-footer__row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    text-align: center;
}
.app-footer__sep { opacity: .55; }
.app-footer a { color: var(--brand); }
.app-footer a:hover { color: var(--brand-hover); }

/* ---------- Утилиты ---------- */

main.app-main { padding: 28px 0 56px; flex: 1; }
.muted { color: var(--text-muted); font-size: var(--fs-14); }
.muted--light { color: var(--text-muted); }
.stack > * + * { margin-top: 14px; }
.stack-lg > * + * { margin-top: 24px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.text-right { text-align: right; }
.spacer { flex: 1; }
.no-margin { margin: 0; }
.text-white { color: #fff; }

/* ---------- Выбор города (комбобокс) ---------- */

.location-combobox {
    position: relative;
}

.location-combobox__input {
    width: 100%;
}

.location-combobox__panel {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: min(320px, 50vh);
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.location-combobox__item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: var(--fs-14);
    line-height: 1.35;
}

.location-combobox__item:hover,
.location-combobox__item.is-active {
    background: var(--surface-alt);
}

.location-combobox__empty {
    padding: 12px 14px;
    font-size: var(--fs-14);
}

/* ---------- Формы входа / онбординг ---------- */

.narrow-panel {
    max-width: 560px;
    margin: 32px auto;
}

.login-panel {
    max-width: 520px;
    margin: 24px auto;
}

.login-divider {
    text-align: center;
    margin: 12px 0;
    font-size: var(--fs-14);
}

/* Контейнер VK ID One Tap: рендерится скриптом, фиксируем размеры, чтобы шапка не «прыгала» */
.vkid-onetap { display: inline-flex; align-items: center; min-height: 46px; }
.vkid-onetap--header { min-width: 200px; }
.vkid-onetap--page { min-height: 44px; }

/* ---------- Дашборд / админ ---------- */

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.dash-stat {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}

/* ---------- Таблицы данных ---------- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text);
}
.data-table thead th {
    text-align: left;
    font-size: var(--fs-14);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
}
.data-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    font-size: var(--fs-14);
}
.data-table tbody tr:last-child td { border-bottom: none; }

.field--inline { flex: 1; margin: 0; }

/* ---------- Главная (минималистичная) ---------- */

.page-home-minimal {
    background: var(--bg);
}
.page-home-minimal .app-main .container {
    max-width: 960px;
}
.home-search-panel {
    text-align: center;
    padding: 32px 0 12px;
}
.home-search-panel .page-title {
    margin-bottom: 48px;
}
.home-search-panel__form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    margin-top: 0;
}
.home-search-panel__input {
    flex: 1;
    min-width: 330px;
    max-width: 780px;
    height: 56px;
    border-radius: 999px;
    padding: 0 24px;
    font-size: var(--fs-18);
    border: 1px solid var(--border-strong);
}
.home-search-panel__submit {
    height: 56px;
    padding: 0 30px;
    font-size: var(--fs-16);
    border-radius: 999px;
}
.home-search-panel__foot {
    margin-top: 12px;
    font-size: var(--fs-14);
}
.home-search-panel__foot a {
    color: var(--text-muted);
}
.home-search-panel__foot a:hover {
    color: var(--brand);
}

.home-recent {
    margin-top: 14px;
    padding-bottom: 32px;
    text-align: left;
}
.home-recent__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
/* ---------- Кабинет соискателя (вкладки под заголовком) ---------- */

.seeker-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 22px;
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-strong);
}
.seeker-tabs a {
    font-family: var(--font-sans);
    font-size: calc(var(--fs-16) * 1.12);
    font-weight: 500;
    color: var(--text-muted);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -13px;
    text-decoration: none;
    transition: color .12s ease, border-color .12s ease;
}
.seeker-tabs a:hover {
    color: var(--brand);
    border-bottom-color: rgba(2, 141, 164, .45);
}
.seeker-tabs a.is-active {
    color: var(--text);
    border-bottom-color: var(--brand);
}

/* ---------- Мастер резюме ---------- */

.resume-wizard__ghost-form {
    display: none;
}

.resume-wizard__progress {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}
.resume-wizard__dot {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
}
.resume-wizard__dot.is-done {
    background: var(--brand);
}
.resume-wizard__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.resume-wizard__list li + li {
    border-top: 1px solid var(--border);
}
.resume-wizard__pick {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--fs-16);
    cursor: pointer;
    color: var(--text);
}
.resume-wizard__pick:hover {
    background: var(--surface-alt);
}

/* Водительское удостоверение (шаг 2 резюме) */
.resume-driving-section {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.resume-driving-car {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-size: var(--fs-16);
}
.resume-driving-license {
    margin-bottom: 10px;
}
.resume-driving-block {
    transition: opacity .15s ease;
}
.resume-driving-block.is-muted {
    opacity: .45;
    pointer-events: none;
}
.resume-driving-cats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}
@media (max-width: 520px) {
    .resume-driving-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.resume-driving-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-size: var(--fs-16);
    min-height: 44px;
}
.resume-driving-cat:hover {
    background: var(--surface-alt);
}

/* Навыки резюме (шаг 4, подсказки hh.ru) */
.resume-skills-page-title {
    margin-bottom: 6px;
}
.resume-skills-context {
    margin: 0 0 16px;
    font-size: var(--fs-14);
}
.resume-skills-search-field {
    margin-bottom: 4px;
}
.resume-skills-search-wrap {
    position: relative;
}
.resume-skills-search-input {
    width: 100%;
    padding-right: 40px;
}
.resume-skills-search-wrap:focus-within .resume-skills-search-input {
    border-color: var(--accent, #2a6edb);
    box-shadow: 0 0 0 1px var(--accent, #2a6edb);
}
.resume-skills-search-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    pointer-events: none;
    opacity: .7;
}
.resume-skills-dropdown {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.resume-skills-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    font: inherit;
    cursor: pointer;
    color: var(--text);
}
.resume-skills-suggest-item:last-child {
    border-bottom: 0;
}
.resume-skills-suggest-item:hover {
    background: var(--surface-alt);
}
.resume-skills-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
    align-items: center;
}
.resume-skills-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    font-size: var(--fs-14);
    max-width: 100%;
}
.resume-skills-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.resume-skills-chip-remove {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 2px;
    color: var(--muted);
}
.resume-skills-chip-remove:hover {
    color: var(--danger);
}
.resume-skills-recommended-wrap {
    margin-top: 4px;
}
.resume-skills-rec-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.resume-skills-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    font: inherit;
    font-size: var(--fs-14);
    cursor: pointer;
    color: var(--text);
    text-align: left;
}
.resume-skills-pill:hover:not(:disabled) {
    background: var(--surface-alt);
}
.resume-skills-pill.is-selected,
.resume-skills-pill:disabled {
    opacity: .55;
    cursor: default;
}

/* Отладочный поповер для событий VK ID (видно ТОЛЬКО при APP_DEBUG=true в шаблоне) */
.vkid-debug {
    position: fixed;
    right: 16px;
    bottom: 16px;
    max-width: 460px;
    background: rgba(20, 24, 35, .92);
    color: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    font: 12px/1.45 var(--font-sans, monospace);
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    pointer-events: none;
}
.vkid-debug__line + .vkid-debug__line { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 4px; }

/* VK ID FloatingOneTap: по горизонтали по центру вьюпорта (по умолчанию SDK — правый верхний угол) */
@media (min-width: 481px) {
    [data-test-id="floatingOneTap"] {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}

/* Полоса «Наверх» справа (как на VK): видна только после прокрутки вниз */
.scroll-top-rail {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    width: 136px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 14px 0 0;
    border: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.2;
    color: rgba(245, 247, 250, .92);
    background: rgba(30, 36, 48, .19);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease, background .15s ease;
}
.scroll-top-rail--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.scroll-top-rail:hover,
.scroll-top-rail:focus-visible {
    background: rgba(30, 36, 48, .26);
    color: #fff;
}
.scroll-top-rail:focus {
    outline: none;
}
.scroll-top-rail:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(2, 141, 164, .85);
}
.scroll-top-rail__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 4px 10px 0;
    max-width: 100%;
}
.scroll-top-rail__label {
    font-size: inherit;
    line-height: 1.2;
    word-break: normal;
}
@media (max-width: 480px) {
    .scroll-top-rail {
        width: 112px;
        font-size: 22px;
        padding-top: 10px;
    }
}
@media print {
    .scroll-top-rail {
        display: none !important;
    }
}

/* ---------- Страницы ошибок (404 / 500 / 503) ---------- */

.page-error-shell {
    background: var(--bg);
    min-height: 100vh;
}
.page-error-shell .app-header {
    margin-bottom: 0;
}
.error-page {
    padding: 40px 0 64px;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}
.error-page__code {
    font-family: var(--font-accent);
    font-size: var(--fs-36);
    letter-spacing: .08em;
    color: var(--brand);
    margin: 0 0 12px;
}
.error-page__title {
    font-family: var(--font-accent);
    font-size: var(--fs-28);
    font-weight: 400;
    letter-spacing: .03em;
    color: var(--text);
    margin: 0 0 12px;
}
.error-page__text {
    margin: 0 0 24px;
    font-size: var(--fs-16);
    line-height: 1.5;
}
.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ---------- Модалка дерева каталога (специализация / отрасль) ---------- */

body.catalog-tree-modal-open {
    overflow: hidden;
}

.catalog-tree-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px 32px;
    box-sizing: border-box;
}

.catalog-tree-modal[hidden] {
    display: none !important;
}

.catalog-tree-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 28, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.catalog-tree-modal__panel {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: min(85vh, 640px);
    margin-top: 4vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 14px;
    overflow: hidden;
}

.catalog-tree-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

.catalog-tree-sector {
    border: 1px solid var(--border, #e2e6ec);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.catalog-tree-sector__summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    padding: 10px 12px;
    background: var(--surface-2, #f4f6f9);
}

.catalog-tree-sector__summary::-webkit-details-marker {
    display: none;
}

.catalog-tree-sector__summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 8px;
    vertical-align: middle;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--brand, #028da4);
    transform: rotate(0deg);
    transition: transform 0.15s ease;
}

.catalog-tree-sector[open] > .catalog-tree-sector__summary::before {
    transform: rotate(90deg);
}

.catalog-tree-sector__items {
    padding: 4px 8px 10px 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.catalog-tree-item {
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    font-size: var(--fs-15, 15px);
    line-height: 1.35;
}

.catalog-tree-item input[type='radio'] {
    margin-top: 3px;
    flex-shrink: 0;
}

/* Мобильная шапка: отступы (дубль app-mobile.css, явные px) */
@media (max-width: 768px) {
    header.app-header .app-header__row .app-header__mobile-bar {
        padding-left: 8px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    header.app-header .app-header__row .app-header__mobile-bar .app-drawer-toggle {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        width: auto !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 6px !important;
        padding: 0 0 0 7px !important;
        border-radius: 0 !important;
    }

    header.app-header .app-header__row .app-header__mobile-bar .app-drawer-toggle svg {
        display: block;
        width: 24px;
        height: 24px;
    }
}