/* ============================================================
           CSS-ПЕРЕМЕННЫЕ (тёмная тема)
           ============================================================ */
:root {
    --bg: #0a0e14;
    --surface: #131820;
    --surface2: #1a1f2b;
    --border: #252b36;
    --accent: #4f8fff;
    --accent2: #7c5cfc;
    --gold: #f0b90b;
    --green: #2ecc71;
    --red: #e74c3c;
    --text: #dde1e8;
    /* WCAG AA on --bg (#0a0e14): raised from #8b92a2 / #5c6370 */
    --text2: #a8b0c0;
    --text3: #7a8494;
    --radius-card: 14px;
    --radius-btn: 10px;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    --transition: 0.3s ease;
    --header-blur: 12px;
    /* нативные контролы (стрелка select, date-picker, спиннеры, скроллбары) — в тёмной теме */
    color-scheme: dark;
}

/* ============================================================
           СБРОС И БАЗА
           ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

/* EN i18n: do not use visibility:hidden — blank first paint hurts mobile LCP */

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    padding-top: 72px;
    /* место под фикс. хедер */
    line-height: 1.6;
    /* Sticky footer: #app-main тянется, футер всегда прижат к низу экрана,
       даже когда контента страницы мало. Фикс. хедер/меню/модалки — position:fixed,
       поэтому во flex-поток не попадают. */
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
    color: var(--accent2);
}

/* ============================================================
           ПОЛЯ ВВОДА — базовая тёмная стилизация (перебивается
           более специфичными правилами модалок/форм при желании)
           ============================================================ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select,
textarea {
    padding: 11px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):hover,
select:hover,
textarea:hover {
    border-color: var(--text3);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(79, 143, 255, 0.18);
    background: var(--surface);
}
::placeholder {
    color: var(--text3);
    opacity: 1;
}
textarea {
    resize: vertical;
    min-height: 96px;
}
/* Автозаполнение WebKit красит поле белым — возвращаем тёмный фон */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset;
    box-shadow: 0 0 0 1000px var(--surface2) inset;
    caret-color: var(--text);
    transition: background-color 9999s ease-out 0s;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    outline: none;
    background: none;
    color: inherit;
    transition: var(--transition);
}

/* ============================================================
           ХЕДЕР (фиксированный, с блюром)
           ============================================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(10, 14, 20, 0.78);
    backdrop-filter: blur(var(--header-blur));
    -webkit-backdrop-filter: blur(var(--header-blur));
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
}

.header__logo {
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.header__logo {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.header__logo:hover {
    opacity: 0.92;
}

a.header__logo:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.beta-badge {
    display: inline-block;
    flex-shrink: 0;
    margin-left: 8px;
    padding: 0 6px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    max-height: 1.4em;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    background-clip: border-box;
    border-radius: 4px;
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap;
    transition: opacity 0.2s;
}

@media (max-width: 860px) {
    .header__brand {
        max-width: calc(100% - 52px);
    }
    .header__logo {
        font-size: 1.2rem;
    }
    .beta-badge {
        margin-left: 6px;
        padding: 0 5px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .header__brand {
        max-width: calc(100% - 48px);
    }
    .header__logo {
        font-size: 1.05rem;
        letter-spacing: -0.3px;
    }
    .beta-badge {
        margin-left: 5px;
        padding: 0 4px;
        font-size: 12px;
        line-height: 1.35;
        border-radius: 3px;
    }
}

.header__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 20px;
    margin: 0 16px;
}

.header__nav a {
    color: var(--text2);
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    padding: 4px 0;
    white-space: nowrap;
}
.header__nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transition: var(--transition);
}
.header__nav a:hover::after,
.header__nav a.active::after {
    width: 100%;
}
.header__nav a.active {
    color: var(--text);
}

/* Бургер: скрыт на десктопе; показ — в @media 1279px ниже (правило должно
   стоять до media, иначе display:none перебьёт блок). */
.burger {
    display: none;
    font-size: 1.6rem;
    color: var(--text);
    background: none;
    border: none;
    padding: 4px;
}

/* Пять публичных пунктов не помещаются в 72px-хедер до ~1280px — бургер,
   чтобы шапка не росла и не ломала top: 72px у .mobile-menu.
   CTA шапки тоже уходим в меню: иначе на 861–1279px кнопки дублируются. */
@media (max-width: 1279px) {
    .header__nav {
        display: none;
    }
    .burger {
        display: block;
    }
    .header > .header__actions > .btn {
        display: none;
    }
    .header > .header__actions > .user-greeting {
        display: none !important;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .header__nav {
        gap: 12px 14px;
        margin: 0 10px;
    }
    .header__nav a {
        font-size: 0.84rem;
    }
}

.header__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
}

a.user-greeting {
    display: none;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text2);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
}
a.user-greeting[hidden],
a.user-greeting:not(.is-visible) {
    display: none !important;
}
a.user-greeting.is-visible {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}
a.user-greeting:hover,
a.user-greeting.active {
    color: var(--text);
}
a.user-greeting:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.energy-widget {
    position: relative;
    display: none;
    flex-shrink: 0;
}
.energy-widget.is-visible {
    display: block;
}
.energy-widget__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
}
.energy-widget__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.energy-widget__btn .fa-bolt {
    color: var(--accent2);
}
.energy-widget--ok .energy-widget__fill {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.energy-widget--full .energy-widget__fill,
.energy-widget--unlimited .energy-widget__fill {
    background: linear-gradient(90deg, var(--accent2), #a78bfa);
}
.energy-widget--low .energy-widget__fill {
    background: var(--gold);
}
.energy-widget--low .energy-widget__btn .fa-bolt {
    color: var(--gold);
}
.energy-widget--empty .energy-widget__fill {
    background: #e5484d;
    width: 0% !important;
}
.energy-widget--empty .energy-widget__btn .fa-bolt {
    color: #e5484d;
}
.energy-widget__bar {
    display: inline-block;
    width: 52px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.energy-widget__fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    transition: width 0.35s ease;
}
.energy-widget__value {
    min-width: 2.4em;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.energy-widget__pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: min(280px, calc(100vw - 24px));
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface, #121822);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    color: var(--text2);
    font-size: 0.85rem;
    line-height: 1.4;
}
.energy-widget__pop[hidden] {
    display: none !important;
}
.energy-widget__status,
.energy-widget__timer,
.energy-widget__streak,
.energy-widget__hint {
    margin: 0 0 8px;
}
.energy-widget__cta {
    display: inline-flex;
    margin-top: 4px;
    color: var(--gold);
    font-weight: 700;
    text-decoration: none;
}
.energy-widget__cta[hidden] {
    display: none !important;
}
.energy-widget--pulse {
    animation: energyPulse 0.7s ease;
}
@keyframes energyPulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.energy-streak,
.energy-quiz-block {
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: var(--text2);
}
.energy-quiz-block a {
    color: var(--gold);
    font-weight: 700;
}

@media (max-width: 1279px) {
    .header > .header__actions > .energy-widget .energy-widget__bar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .energy-widget__fill {
        transition: none;
    }
    .energy-widget--pulse {
        animation: none;
    }
}

/* Кнопки в хедере */
.btn {
    padding: 8px 18px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    box-shadow: 0 4px 16px rgba(79, 143, 255, 0.25);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(79, 143, 255, 0.35);
}
.btn-outline {
    border: 1.5px solid var(--border);
    color: var(--text2);
    background: transparent;
}
.btn-outline:hover {
    border-color: var(--accent);
    color: var(--text);
}
.btn-gold {
    background: linear-gradient(135deg, var(--gold), #f5a623);
    color: #0a0e14;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(240, 185, 11, 0.25);
}
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(240, 185, 11, 0.35);
}
.btn-small {
    padding: 13px 14px;
    font-size: 0.8rem;
}
.header__actions .btn.is-current,
.mobile-menu .btn.is-current {
    background: var(--surface2);
    border: 1.5px solid var(--accent);
    color: var(--text);
    box-shadow: none;
}
.header__actions .btn.is-current:hover,
.mobile-menu .btn.is-current:hover {
    transform: none;
}

/* Язык: компактная utility-кнопка (глобус + код), не сегмент RU|EN */
button.lang-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button.lang-toggle:hover {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}
button.lang-toggle:hover .lang-toggle__glyph {
    transform: scale(1.08);
}
button.lang-toggle:focus {
    outline: none;
}
button.lang-toggle:focus-visible {
    color: var(--text);
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
button.lang-toggle:active {
    transform: none;
}
.lang-toggle__glyph {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}
.lang-toggle__globe {
    display: block;
    width: 20px;
    height: 20px;
}
.lang-toggle__code {
    position: absolute;
    right: -5px;
    bottom: -4px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    color: inherit;
    pointer-events: none;
}
.lang-toggle__ru {
    display: none;
}
html.lang-ru .lang-toggle__en {
    display: none;
}
html.lang-ru .lang-toggle__ru {
    display: inline;
}

/* Мобильное меню */
.mobile-menu {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 72px);
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
    flex-direction: column;
    gap: 16px;
    z-index: 999;
    backdrop-filter: blur(var(--header-blur));
    -webkit-backdrop-filter: blur(var(--header-blur));
    -webkit-overflow-scrolling: touch;
}
.mobile-menu.open {
    display: flex;
}
/* Только пункты навигации: не трогать .btn внутри .mobile-menu__auth */
.mobile-menu > a {
    color: var(--text2);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.mobile-menu > a.active {
    color: var(--text);
}
.mobile-menu__auth {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 4px;
}
.mobile-menu__auth .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
}
.mobile-menu__auth .btn-primary,
.mobile-menu__auth .btn-primary:hover {
    color: #fff;
}
.mobile-menu__auth .btn:hover {
    transform: none;
}
.mobile-menu__auth .user-greeting.is-visible {
    display: flex !important;
    max-width: 100%;
    min-height: 44px;
}

/* ============================================================
           СТРАНИЦЫ (контейнер)
           ============================================================ */
#app-main {
    /* body — flex-колонка; без min-width:0 / width:100% min-content длинного
       заголовка раздувает лейаут вправо на узких экранах. */
    flex: 1 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.page {
    display: none;
    animation: fadeUp 0.5s ease forwards;
    width: 100%;
    max-width: min(1280px, 100%);
    min-width: 0;
    margin: 0 auto;
    padding: 40px 24px 60px;
    overflow-wrap: break-word;
}
.page.active {
    display: block;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    max-width: 100%;
    overflow-wrap: break-word;
    background: linear-gradient(135deg, var(--text), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.page-subtitle {
    color: var(--text2);
    margin-bottom: 32px;
    font-size: 1.05rem;
    max-width: 100%;
    overflow-wrap: break-word;
}
#page-quizzes .page-subtitle:has(+ .quiz-bank-stat:not([hidden])) {
    margin-bottom: 8px;
}
.quiz-bank-stat {
    color: var(--text3);
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0 0 32px;
    max-width: 100%;
    overflow-wrap: break-word;
}
.quiz-bank-stat[hidden] {
    display: none !important;
}
.quiz-bank-stat__n {
    font-weight: 600;
    color: var(--text);
}

/* Secondary nav: find ↔ subscriptions ↔ history, jobs hub.
   Narrow: wrapping chips (same idea as #quizTabs) so labels stay on
   screen without a scrollport — overflow-x:auto was promoting overflow-y
   and drawing a vertical scrollbar inside the nav.
   Desktop (≥860px, same as burger): underline row. */
.match-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: -12px 0 28px;
    font-size: 0.95rem;
    max-width: 100%;
    min-width: 0;
    scroll-margin-top: 80px;
}
.match-subnav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    color: var(--text2);
    text-decoration: none;
    padding: 10px 12px;
    min-height: 44px;
    font-size: 0.85rem;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-btn);
    background: var(--surface);
}
.match-subnav a:hover {
    color: var(--text);
    border-color: var(--text3);
}
.match-subnav a.active {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(79, 143, 255, 0.12);
    font-weight: 600;
}
.match-subnav a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.match-subnav__sep {
    display: none;
}
@media (min-width: 860px) {
    .match-subnav {
        flex-wrap: nowrap;
        gap: 6px 4px;
        border-bottom: 1px solid var(--border);
    }
    .match-subnav a {
        justify-content: flex-start;
        min-height: 0;
        padding: 10px 2px;
        font-size: 0.95rem;
        text-align: left;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        margin-bottom: -1px;
        background: none;
    }
    .match-subnav a:hover {
        border-color: transparent;
    }
    .match-subnav a.active {
        border-color: transparent;
        border-bottom-color: var(--accent);
        background: none;
    }
    .match-subnav__sep {
        display: inline-flex;
        align-items: center;
        color: var(--text3);
        padding: 0 4px;
        user-select: none;
        flex: 0 0 auto;
    }
}

.find-guest-cta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    margin: 0 auto 24px;
    max-width: 760px;
    text-align: center;
}
.find-guest-cta p {
    margin: 0 0 14px;
    color: var(--text2);
    font-size: 0.95rem;
    line-height: 1.5;
}
.find-guest-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.find-guest-cta .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
@media (max-width: 720px) {
    .find-guest-cta {
        padding: 16px;
    }
    .find-guest-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .find-guest-cta__actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
}

.find-seo {
    max-width: 760px;
    margin: 40px auto 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--text2);
    font-size: 0.95rem;
    line-height: 1.65;
}
.find-seo h2 {
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 28px 0 12px;
}
.find-seo h2:first-child {
    margin-top: 24px;
}
.find-seo p {
    margin: 0 0 14px;
}
.find-seo a {
    color: var(--accent);
}

/* ============================================================
           ГЛАВНАЯ – HERO
           ============================================================ */
.hero {
    padding: 28px 0 28px;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}
.hero__copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero h1 {
    font-size: clamp(1.1rem, 2.1vw, 1.5rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    max-width: 34rem;
    margin-bottom: 20px;
    color: var(--text);
    text-wrap: pretty;
}
.hero h1 .highlight {
    font-weight: 600;
    color: var(--accent);
    background: none;
    -webkit-text-fill-color: unset;
}
.hero p {
    font-size: 1.05rem;
    color: var(--text2);
    max-width: 32rem;
    line-height: 1.55;
    margin-bottom: 18px;
}
.hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 0;
}
.hero__products {
    display: none !important;
}
.hero__visual {
    position: relative;
    min-height: 220px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.hero-stage {
    position: relative;
    height: 220px;
}
.hero-card {
    position: absolute;
    left: 50%;
    width: min(240px, 78%);
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    text-align: left;
    transform: translateX(-50%);
}
.hero-card__eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 4px;
}
.hero-card__title {
    display: block;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.hero-card__meta {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text2);
    line-height: 1.35;
}
.hero-card__avatars {
    display: flex;
    margin-top: 10px;
}
.hero-card__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: 2px solid var(--surface);
}
.hero-card__avatar--b {
    margin-left: -8px;
    background: linear-gradient(135deg, #2ecc71, #1f9d55);
}
.hero-card__bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface2);
    margin: 10px 0 8px;
    overflow: hidden;
}
.hero-card__bar span {
    display: block;
    height: 100%;
    width: var(--hero-progress, 70%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.hero-card__badge {
    display: inline-flex;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #0a0e14;
    background: var(--gold);
}
.hero-card--match {
    top: 0;
    z-index: 3;
}
.hero-card--quiz {
    top: 78px;
    left: calc(50% - 42px);
    z-index: 2;
    width: min(220px, 72%);
}
.hero-card--job {
    top: 148px;
    left: calc(50% + 36px);
    z-index: 1;
    width: min(210px, 70%);
}
@media (prefers-reduced-motion: no-preference) {
    .hero-card--match {
        animation: hero-card-float 5.5s ease-in-out infinite;
    }
    .hero-card--quiz {
        animation: hero-card-float 6.2s ease-in-out infinite 0.4s;
    }
    .hero-card--job {
        animation: hero-card-float 5.8s ease-in-out infinite 0.8s;
    }
}
@keyframes hero-card-float {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-6px);
    }
}
@media (min-width: 900px) {
    .hero {
        padding: 36px 0 32px;
    }
    .hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
        gap: 36px;
        text-align: left;
    }
    .hero__copy {
        align-items: flex-start;
        text-align: left;
    }
    .hero h1,
    .hero p {
        max-width: none;
    }
    .hero__btns {
        justify-content: flex-start;
    }
    .hero__visual {
        max-width: none;
        min-height: 250px;
    }
    .hero-stage {
        height: 250px;
    }
    .hero-card--match {
        left: 42%;
        top: 8px;
    }
    .hero-card--quiz {
        left: 28%;
        top: 92px;
    }
    .hero-card--job {
        left: 62%;
        top: 168px;
    }
}
.hero__emoji-strip {
    font-size: 2.2rem;
    letter-spacing: 8px;
    animation: float 3s ease-in-out infinite;
    margin-top: 8px;
}
@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* ============================================================
           СЕКЦИИ ОБЩИЕ
           ============================================================ */
.section {
    margin-top: 72px;
}
.section-header {
    text-align: center;
    margin-bottom: 36px;
}
.section-header h2 {
    font-size: 2rem;
    font-weight: 700;
}
.section-header p {
    color: var(--text2);
    max-width: 560px;
    margin: 6px auto 0;
}

/* ============================================================
           КАРТОЧКИ ВОЗМОЖНОСТЕЙ (сетка 4 колонки)
           ============================================================ */
.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

/* ============================================================
   Trusted By — social proof на главной (#page-home)
   ============================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.trusted-by {
    margin-top: 56px;
    padding: 48px 16px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(19, 24, 32, 0.5);
    background: color-mix(in srgb, var(--surface) 50%, transparent);
    text-align: center;
}

@media (min-width: 768px) {
    .trusted-by {
        margin-top: 72px;
        padding: 56px 24px;
    }
}

.trusted-by__inner {
    max-width: 1280px;
    margin-inline: auto;
}

.trusted-by__title {
    max-width: 640px;
    margin: 0 auto 28px;
    font-size: clamp(0.72rem, 2vw, 0.85rem);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text3);
}

@media (min-width: 768px) {
    .trusted-by__title {
        margin-bottom: 32px;
    }
}

.trusted-by__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 20px 28px;
    max-width: 1100px;
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .trusted-by__logos {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 16px 24px;
        padding-inline: 8px;
    }
}

.trusted-by__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    font-size: clamp(1.05rem, 2.5vw, 1.45rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    opacity: 0.85;
    white-space: nowrap;
    transition: opacity var(--transition), color var(--transition);
}

@media (min-width: 1024px) {
    .trusted-by__logo {
        flex: 1 1 0;
        min-height: 2.75rem;
    }
}

.trusted-by__logo:hover {
    opacity: 1;
    color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .trusted-by__logo {
        transition: none;
    }
}

.feature-card {
    flex: 0 1 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px 20px;
    transition: var(--transition);
    cursor: default;
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    opacity: 0;
    transition: var(--transition);
    z-index: 0;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
}
.feature-card:hover::before {
    opacity: 0.06;
}
.feature-card>* {
    position: relative;
    z-index: 1;
}
.feature-card .icon {
    font-size: 2.2rem;
    margin-bottom: 10px;
    display: block;
}
.feature-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.feature-card p {
    color: var(--text2);
    font-size: 0.9rem;
}
.feature-card .badge-soon {
    display: inline-block;
    background: var(--gold);
    color: #0a0e14;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

/* ============================================================
           ТАРИФЫ
           ============================================================ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 28px;
}
.pricing-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 28px 24px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.pricing-card.popular {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), var(--shadow);
}
.pricing-card .name {
    font-size: 1.2rem;
    font-weight: 700;
}
.pricing-card .price {
    font-size: 2rem;
    font-weight: 800;
    margin: 8px 0 4px;
}
.pricing-card .price small {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text2);
}
.pricing-card .desc {
    color: var(--text2);
    font-size: 0.9rem;
    margin-bottom: 16px;
}
.pricing-card ul {
    list-style: none;
    margin: 0 0 20px;
    flex: 1;
}
.pricing-card ul li {
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text2);
    font-size: 0.92rem;
}
.pricing-card ul li.muted {
    color: var(--text3);
}
.pricing-card ul li.muted i {
    color: var(--text3);
}

.challenges-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
    margin: 0 0 24px;
    padding: 16px 20px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.challenges-page {
    max-width: 1120px;
}
.challenges-page__header {
    margin: 8px 0 28px;
}
.challenges-day-progress {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px 20px;
    margin: 0 0 28px;
}
.challenges-day-progress__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--text2);
    font-size: 0.95rem;
}
.challenges-day-progress__pct {
    color: var(--text);
}
.challenges-day-progress__track {
    width: 100%;
    height: 6px;
    background: var(--surface2);
    border-radius: 999px;
    overflow: hidden;
}
.challenges-day-progress__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius: 999px;
    transition: width 0.6s ease;
}
.challenges-day-progress__fill.is-gold {
    background: linear-gradient(90deg, var(--gold), #f5a623);
}
.challenges-more {
    margin: 8px 0 0;
    text-align: center;
}
.challenges-more a {
    color: var(--accent);
    font-weight: 600;
}
.challenges-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.challenges-seo {
    margin-top: 28px;
}
.challenges-grid.pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-width: none;
}
@media (max-width: 860px) {
    .challenges-grid.pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
        margin: 0;
    }
}
@media (max-width: 520px) {
    .challenges-grid.pricing-grid {
        grid-template-columns: 1fr;
    }
}
.challenge-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}
.challenge-stat .label {
    display: inline;
    color: var(--text2);
    font-size: 1rem;
}
.challenge-stat .value {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text);
}
.challenge-stat .value.is-gold {
    color: var(--gold);
}
.challenge-stat .value.is-accent {
    color: var(--accent);
}
.challenge-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: challengesFadeUp 0.4s ease both;
}
.challenge-card:nth-child(2) {
    animation-delay: 0.08s;
}
.challenge-card:nth-child(3) {
    animation-delay: 0.16s;
}
@keyframes challengesFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .challenge-card {
        animation: none;
    }
    .challenge-card:hover {
        transform: none;
    }
    .challenges-day-progress__fill {
        transition: none;
    }
}
.challenge-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}
.challenge-card.is-done {
    border-color: var(--gold);
}
.challenge-card.challenge-card--today {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(79, 143, 255, 0.35);
}
.challenge-card.challenge-card--boss {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(240, 185, 11, 0.08), var(--surface));
}
.challenge-card.challenge-card--mini-boss {
    border-color: var(--accent2);
}
.challenge-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.challenge-role,
.challenge-today,
.challenge-day {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
}
.challenge-role--boss,
.challenge-today {
    background: rgba(240, 185, 11, 0.2);
    color: var(--gold);
}
.challenge-role--mini {
    background: rgba(124, 92, 252, 0.2);
    color: var(--accent2);
}
.challenge-day {
    background: var(--surface2);
    color: var(--text2);
}
.challenges-week-banner {
    margin: 0 0 24px;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: linear-gradient(120deg, rgba(79, 143, 255, 0.12), rgba(124, 92, 252, 0.12));
}
.challenges-week-banner__kicker {
    margin: 0 0 6px;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.challenges-week-banner h2 {
    margin: 0 0 8px;
    font-size: 1.4rem;
}
.challenges-sprint {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    list-style: none;
    margin: 0 0 20px;
    padding: 0 0 4px;
}
.challenges-sprint__day {
    flex: 0 0 auto;
    min-width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface2);
    color: var(--text2);
    font-size: 0.8rem;
}
.challenges-sprint__day.is-today {
    border-color: var(--accent);
    color: var(--text);
    animation: challengesPulse 1.6s ease-in-out infinite;
}
.challenges-sprint__day.is-done {
    border-color: var(--gold);
    color: var(--gold);
}
@keyframes challengesPulse {
    50% { box-shadow: 0 0 0 4px rgba(79, 143, 255, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
    .challenges-sprint__day.is-today {
        animation: none;
    }
}
.challenges-vote,
.challenges-referral {
    margin: 28px 0 0;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}
.challenges-vote__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.challenges-vote__opt {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    text-align: left;
}
.challenges-vote__opt.is-selected,
.challenges-vote__opt:hover {
    border-color: var(--accent);
}
.challenges-vote__opt span {
    display: block;
    color: var(--text3);
    font-size: 0.8rem;
    margin-top: 6px;
}
.challenges-referral__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.challenges-referral__url {
    flex: 1 1 220px;
    padding: 8px 10px;
    background: var(--surface2);
    border-radius: 8px;
    word-break: break-all;
}
.challenge-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(5, 8, 14, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.challenge-overlay[hidden] {
    display: none;
}
.challenge-overlay__dialog {
    position: relative;
    width: min(560px, 100%);
    max-height: min(86vh, 720px);
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px 24px 20px;
    box-shadow: var(--shadow);
}
.challenge-overlay__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: 0;
    color: var(--text2);
    font-size: 1.6rem;
    cursor: pointer;
}
.challenge-overlay__title {
    margin: 0 32px 12px 0;
    font-size: 1.2rem;
}
.challenge-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 16px;
}
.challenge-option {
    text-align: left;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
}
.challenge-option.is-selected {
    border-color: var(--accent);
    background: rgba(79, 143, 255, 0.12);
}
.challenge-practice-note {
    width: 100%;
    margin: 8px 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    resize: vertical;
}
.challenge-overlay__actions {
    display: flex;
    justify-content: flex-end;
}
.energy-widget--shake {
    animation: energyShake 0.45s ease;
}
@keyframes energyShake {
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .energy-widget--shake {
        animation: none;
    }
}
@media (max-width: 860px) {
    .challenges-vote__grid {
        grid-template-columns: 1fr;
    }
}
.challenge-card.is-locked {
    opacity: 0.85;
}
.challenge-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.challenge-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
.challenge-status {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 12px;
    border-radius: 20px;
    white-space: nowrap;
    background: var(--border);
    color: var(--text3);
}
.challenge-status.is-active {
    background: rgba(46, 204, 113, 0.2);
    color: var(--green);
}
.challenge-status.is-completed {
    background: rgba(240, 185, 11, 0.2);
    color: var(--gold);
}
.challenge-status.is-locked {
    background: var(--border);
    color: var(--text3);
}
.challenge-desc {
    color: var(--text2);
    font-size: 0.9rem;
    margin: 0;
}
.challenge-progress {
    display: flex;
    align-items: center;
    gap: 14px;
}
.challenge-card .challenge-bar {
    flex: 1;
    width: auto;
    height: 6px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
    margin: 0;
}
.challenge-card .challenge-bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 99px;
}
.challenge-card.is-done .challenge-bar span {
    background: var(--gold);
}
.challenge-progress-label {
    font-size: 0.85rem;
    color: var(--text2);
    min-width: 44px;
    text-align: right;
}
.challenge-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.challenge-xp {
    font-weight: 700;
    color: var(--gold);
    font-size: 0.95rem;
}
.challenges-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.challenges-cta p {
    margin: 0;
    color: var(--text2);
    font-size: 0.95rem;
}
@media (max-width: 560px) {
    .challenges-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 14px 16px;
        gap: 12px;
    }
    .challenges-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
           ОПЛАТА ПОДПИСКИ
           ============================================================ */
.payment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
    gap: 32px;
    align-items: start;
}
.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.payment-methods button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 10px 16px;
    color: var(--text2);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}
.payment-methods button.active,
.payment-methods button:hover {
    border-color: var(--accent);
    color: var(--text);
    background: var(--surface);
}
.pay-form .form-group,
.pay-donate .form-group {
    margin-bottom: 14px;
}
.pay-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 4px;
}
.pay-form input {
    width: 100%;
}
.pay-form input.error {
    border-color: var(--red);
}
.pay-hint {
    display: block;
    margin-top: 6px;
    color: var(--text3);
    font-size: 0.8rem;
}
.pay-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.pay-promo-action {
    display: flex;
    align-items: flex-end;
}
.pay-promo-action .btn {
    width: 100%;
    justify-content: center;
}
.pay-submit {
    width: 100%;
    justify-content: center;
    padding: 12px;
    margin-top: 4px;
}
.pay-submit.is-busy {
    opacity: 0.7;
    pointer-events: none;
}
.pay-result {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
}
.pay-result.is-ok {
    border-color: var(--green);
}
.pay-result.is-fail {
    border-color: var(--red);
}
.pay-result__icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
}
.pay-result.is-ok .pay-result__icon { color: var(--green); }
.pay-result.is-fail .pay-result__icon { color: var(--red); }
.pay-result.is-pending .pay-result__icon { color: var(--gold); }
.pay-result h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}
.pay-result p {
    margin: 0 0 12px;
    color: var(--text2);
}
.pay-result__meta {
    font-weight: 700;
    color: var(--text);
}
.pay-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.pay-alt {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
    color: var(--text2);
}
.pay-donate {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
}
.pay-donate h3 {
    margin: 0 0 12px;
    font-size: 1.05rem;
}
.pay-donate h3 i {
    color: var(--red);
    margin-right: 6px;
}
.donate-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0;
    color: var(--text2);
    font-size: 0.92rem;
}
.donate-row i {
    color: var(--accent);
    width: 18px;
    text-align: center;
}
.order-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
}
.order-summary h3 {
    margin: 0 0 12px;
    font-size: 1.1rem;
}
.order-summary .item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}
.order-summary .features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 12px 0;
    color: var(--text2);
    font-size: 0.85rem;
}
.order-summary .features i {
    margin-right: 4px;
}
.order-summary .features .muted {
    color: var(--text3);
}
.order-summary .total {
    display: flex;
    justify-content: space-between;
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 8px;
}
.order-summary .secure {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    color: var(--text3);
    font-size: 0.8rem;
}
.order-summary .secure i {
    color: var(--green);
    margin-top: 2px;
}
@media (max-width: 860px) {
    .payment-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .pay-form-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
           ПЛАШКИ «СКОРО»
           ============================================================ */
.soon-block {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-card);
    padding: 32px 24px;
    text-align: center;
}
.soon-block .badge {
    display: inline-block;
    background: var(--gold);
    color: #0a0e14;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.soon-block h3 {
    font-size: 1.3rem;
    margin-bottom: 4px;
}
.soon-block p {
    color: var(--text2);
    max-width: 500px;
    margin: 0 auto;
}

/* ============================================================
           СТРАНИЦА РЕЙТИНГА
           ============================================================ */
#page-rating {
    scroll-margin-top: 80px;
}
.rating-landing {
    max-width: 1040px;
    margin: 0 auto;
    text-align: left;
}
.rating-landing__hero {
    margin: 0 0 28px;
    padding-bottom: 4px;
}
.rating-landing__title,
#page-rating .page-title {
    max-width: 22ch;
    line-height: 1.2;
    background: none;
    -webkit-text-fill-color: var(--text);
    color: var(--text);
}
.rating-landing__title::before,
#page-rating .rating-landing__title::before {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin-bottom: 16px;
    border-radius: 2px;
    background: var(--accent);
}
.rating-landing__sub,
#page-rating .rating-landing__sub {
    max-width: 54ch;
    margin: 0 0 20px;
    color: var(--text2);
}
.rating-landing__hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 12px;
}
#ratingMeBanner:empty {
    display: none;
}
#ratingMeBanner:not(:empty) {
    margin: 0 0 20px;
}
#page-rating .rating-landing__guest {
    max-width: none;
    text-align: left;
    margin: 0 0 28px;
}
#page-rating .rating-landing__guest .find-guest-cta__actions,
#page-rating .rating-landing__guest.rating-landing__guest .find-guest-cta__actions {
    justify-content: flex-start;
}
#page-rating .find-guest-cta__actions {
    justify-content: flex-start;
}
.rating-landing__how {
    margin: 36px 0 28px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.rating-landing__how h2,
.rating-landing__faq h2 {
    font-size: 1.25rem;
    margin: 0 0 10px;
    color: var(--text);
}
.rating-landing__how p {
    margin: 0;
    max-width: 62ch;
    color: var(--text2);
    line-height: 1.6;
}
.rating-landing__how a {
    color: var(--accent);
}
.rating-landing__faq {
    margin: 0 0 12px;
}
.rating-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}
.rating-search {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.rating-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    text-align: center;
    color: var(--text3);
    font-size: 0.9rem;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}
/* Полный padding + та же :not()-цепочка, что у базового input —
   иначе padding: 11px 14px сбрасывает отступ и «Поиск» наползает на лупу */
.rating-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]) {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 11px 14px 11px 56px;
}
.rating-search input[type="search"]::-webkit-search-decoration,
.rating-search input[type="search"]::-webkit-search-cancel-button,
.rating-search input[type="search"]::-webkit-search-results-button,
.rating-search input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.rating-search input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.rating-controls label {
    color: var(--text2);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* ---- Подиум топ-3 ---- */
.rating-podium {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.rating-podium__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.rating-podium__item--1 {
    border-color: rgba(240, 185, 11, 0.55);
    box-shadow: 0 0 0 1px rgba(240, 185, 11, 0.18);
}
.rating-podium__item--2 {
    border-color: rgba(176, 186, 201, 0.45);
}
.rating-podium__item--3 {
    border-color: rgba(205, 127, 50, 0.45);
}
.rating-podium__place {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text3);
}
.rating-podium__place i {
    font-size: 1.15rem;
}
.rating-podium__item--1 .rating-podium__place i { color: var(--gold); }
.rating-podium__item--2 .rating-podium__place i { color: #b0bac9; }
.rating-podium__item--3 .rating-podium__place i { color: #cd7f32; }
.rating-podium__name {
    font-weight: 700;
    color: var(--text);
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}
.rating-podium__spec {
    color: var(--text2);
    font-size: 0.88rem;
}
.rating-podium__score {
    margin-top: auto;
    font-weight: 700;
    color: var(--gold);
    font-size: 1.2rem;
}

.rating-ssr-top {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rating-ssr-top__item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px 14px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 12px 16px;
}
.rating-ssr-top__rank {
    font-weight: 700;
    color: var(--text3);
}
.rating-ssr-top__name {
    font-weight: 600;
    color: var(--text);
}
.rating-ssr-top__prof {
    grid-column: 2;
    color: var(--text2);
    font-size: 0.85rem;
}
.rating-ssr-top__score {
    grid-row: 1 / span 2;
    grid-column: 3;
    font-weight: 700;
    color: var(--gold);
}

/* ---- Лидерборд ---- */
.leaderboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
}
.lb-head,
.lb-row {
    display: grid;
    grid-template-columns: 36px 44px minmax(0, 1fr) 90px 80px 80px;
    align-items: center;
    gap: 14px;
}
.lb-head {
    padding: 2px 20px 4px;
    color: var(--text3);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.lb-head .lb-level {
    white-space: nowrap;
}
.lb-head .lb-quizzes,
.lb-head .lb-score {
    text-align: right;
}
.lb-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 12px 20px;
    transition: border-color var(--transition);
}
.lb-row:hover {
    border-color: var(--accent);
}
.lb-rank {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb-num {
    font-weight: 700;
    color: var(--text3);
    font-size: 1rem;
}
.lb-medal {
    color: var(--gold);
    font-size: 1.05rem;
}
.lb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.lb-user {
    min-width: 0;
}
.lb-name {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-spec {
    color: var(--text2);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-muted {
    color: var(--text3);
}
.lb-you {
    background: var(--accent);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
}
.lb-chip {
    display: inline-block;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: 0.78rem;
    padding: 3px 11px;
    border-radius: 20px;
    white-space: nowrap;
}
.lb-chip-muted {
    color: var(--text3);
}
.lb-quizzes {
    color: var(--text2);
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: right;
}
.lb-quizzes i {
    color: var(--text3);
    margin-right: 5px;
}
.lb-score-val {
    font-weight: 700;
    color: var(--gold);
    font-size: 1.05rem;
    text-align: right;
    margin-bottom: 6px;
}
.lb-bar {
    height: 6px;
    background: var(--surface2);
    border-radius: 20px;
    overflow: hidden;
}
.lb-bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 20px;
}
.lb-row.me {
    border-color: var(--accent);
    background: linear-gradient(90deg, rgba(79, 143, 255, 0.14), rgba(79, 143, 255, 0.03));
    box-shadow: inset 3px 0 0 0 var(--accent);
}
.rating-podium__item.lb-flash {
    animation: lbFlash 1.3s ease;
}
@keyframes lbFlash {
    0%, 100% { box-shadow: inset 3px 0 0 0 var(--accent); }
    30% { box-shadow: inset 3px 0 0 0 var(--accent), 0 0 0 3px rgba(79, 143, 255, 0.45); }
}

.lb-me-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid rgba(79, 143, 255, 0.35);
    border-radius: var(--radius-card);
    padding: 12px 18px;
    margin-bottom: 12px;
    color: var(--text);
    font-size: 0.95rem;
}
.lb-me-banner b {
    color: var(--accent);
    font-size: 1.05rem;
}
.lb-me-banner i {
    color: var(--accent);
    margin-right: 6px;
}
.lb-me-total {
    color: var(--text3);
    font-size: 0.85rem;
}
.lb-me-banner-muted {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text2);
}
.lb-me-banner-muted i {
    color: var(--text3);
}
.lb-me-banner .btn {
    min-height: 44px;
}

@media (max-width: 859px) {
    .rating-podium {
        grid-template-columns: 1fr;
    }
    .lb-head,
    .lb-row {
        grid-template-columns: 36px 40px minmax(0, 1fr) 80px;
        gap: 12px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .lb-level { display: none; }
    .lb-head .lb-quizzes { display: none; }
    .lb-quizzes { display: none; }
}
@media (max-width: 519px) {
    .lb-head { display: none; }
    .lb-row {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        gap: 8px 12px;
        padding: 12px 14px;
    }
    .lb-avatar { display: none; }
    .lb-user { grid-column: 2; }
    .lb-score { grid-column: 3; grid-row: 1; }
    .lb-quizzes {
        display: block;
        grid-column: 2;
        text-align: left;
        font-size: 0.82rem;
    }
    .lb-name,
    .lb-spec {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
    .lb-score-val { margin-bottom: 0; text-align: right; }
    .lb-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lb-row { transition: none; }
    .lb-row.lb-flash { animation: none; }
}

.pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.pagination button {
    padding: 6px 14px;
    border-radius: var(--radius-btn);
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    font-weight: 600;
}
.pagination button.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.pagination button:hover:not(.active):not(:disabled) {
    border-color: var(--accent);
    color: var(--text);
}
.pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.quiz-history-pagination {
    margin-top: 20px;
}

/* ============================================================
           СТРАНИЦА ВАКАНСИИ (форма)
           ============================================================ */
.vacancy-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 32px 28px;
    max-width: 760px;
    margin: 0 auto;
}
.vacancy-form .form-group {
    margin-bottom: 18px;
}
.vacancy-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text2);
    font-size: 0.9rem;
}
.vacancy-form input,
.vacancy-form textarea,
.vacancy-form select {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text);
    font-size: 0.95rem;
    transition: var(--transition);
    font-family: inherit;
}
.vacancy-form input:focus,
.vacancy-form textarea:focus,
.vacancy-form select:focus {
    border-color: var(--accent);
    outline: none;
}
.vacancy-form textarea {
    resize: vertical;
    min-height: 100px;
}
.vacancy-form .error {
    border-color: var(--red) !important;
}
.vacancy-form .error-msg {
    color: var(--red);
    font-size: 0.8rem;
    margin-top: 4px;
    display: none;
}
.vacancy-form .error-msg.show {
    display: block;
}

/* ============================================================
           СТРАНИЦА МЭТЧЕЙ
           ============================================================ */
.match-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin-bottom: 28px;
    background: var(--surface);
    padding: 16px 20px;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
}
.match-filter label {
    color: var(--text2);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.match-filter input[type="range"] {
    width: 160px;
    accent-color: var(--accent);
    background: var(--surface2);
    height: 4px;
    border-radius: 4px;
}

.matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 20px;
}

.match-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
    transition: var(--transition);
}
.match-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
}
.match-card .title {
    font-size: 1.1rem;
    font-weight: 700;
}
.match-card .company {
    color: var(--text2);
    font-size: 0.9rem;
}
.match-card .desc {
    margin: 8px 0 10px;
    color: var(--text2);
    font-size: 0.92rem;
}
.match-card .match-pct {
    display: inline-block;
    background: var(--surface2);
    padding: 2px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    margin-bottom: 12px;
}
.match-card .match-pct.high {
    color: var(--green);
    border-color: var(--green);
}
.match-card .match-pct.mid {
    color: var(--gold);
    border-color: var(--gold);
}
.match-card .match-pct.low {
    color: var(--text3);
    border-color: var(--border);
}
.match-card .result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.match-card .vac-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--text2);
    font-size: 0.82rem;
}

/* ============================================================
           СТРАНИЦА ПАРТНЁРОВ
           ============================================================ */
.partner-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    background: var(--surface);
    padding: 20px;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    margin-bottom: 28px;
}
.partner-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 0 150px;
}
.partner-filters .filter-group label {
    font-size: 0.8rem;
    color: var(--text2);
    font-weight: 600;
}
.partner-filters .filter-group input,
.partner-filters .filter-group select {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: var(--radius-btn);
    font-size: 0.9rem;
}
.partner-filters .filter-group input:focus,
.partner-filters .filter-group select:focus {
    border-color: var(--accent);
    outline: none;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 20px;
}

.partner-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.partner-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
}
.partner-card .avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface2);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text2);
    margin-bottom: 10px;
}
.partner-card .pname {
    font-size: 1.05rem;
    font-weight: 700;
}
.partner-card .pprof {
    color: var(--text2);
    font-size: 0.9rem;
}
.partner-card .pdetails {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 8px 0 10px;
    font-size: 0.85rem;
    color: var(--text2);
}
.partner-card .pdetails span i {
    margin-right: 4px;
    color: var(--accent);
}
.partner-card .pdesc {
    color: var(--text2);
    font-size: 0.9rem;
    flex: 1;
    margin-bottom: 12px;
}

/* Org partners catalog */
.org-events {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}
.org-events__title {
    margin: 0 0 6px;
    font-size: 1.05rem;
}
.org-events__empty { margin: 0; }
.org-tag-toggles { flex: 2 0 220px; }
.org-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.org-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text2);
    cursor: pointer;
}
.org-chip-static {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text2);
    background: var(--surface2);
}
.org-partners-grid { margin-top: 8px; }
.org-pager { margin: 16px 0 8px; text-align: center; }

/* Partner landing (/partners/) — distinct blocks, left-aligned, not a centered AI column */
#page-partners .breadcrumbs__list {
    justify-content: flex-start;
}
.partner-landing {
    max-width: 1040px;
    margin: 0 auto;
    text-align: left;
}
.partner-landing__hero {
    margin: 0 0 40px;
    padding-bottom: 8px;
}
.partner-landing__hero .page-title {
    max-width: 18ch;
    line-height: 1.2;
    background: none;
    -webkit-text-fill-color: var(--text);
    color: var(--text);
}
.partner-landing__hero .page-title::before {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin-bottom: 16px;
    border-radius: 2px;
    background: var(--accent);
}
.partner-landing__hero .page-subtitle {
    max-width: 54ch;
    margin: 0 0 22px;
    color: var(--text2);
}
.partner-landing__hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 12px;
}
.partner-landing__hero-actions .btn {
    min-height: 44px;
}
.partner-landing__block {
    margin: 0 0 48px;
}
.partner-landing__block > h2 {
    font-size: 1.35rem;
    font-weight: 650;
    margin: 0 0 18px;
    letter-spacing: -0.02em;
    color: var(--text);
}
.partner-landing__lead {
    color: var(--text2);
    margin: 0 0 18px;
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: 58ch;
}

/* Audience — three tiles with different mark colors */
.partner-landing__who {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.partner-landing__who-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 18px 18px;
    min-width: 0;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.partner-landing__who-item:hover,
.partner-landing__who-item:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.partner-landing__who-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1rem;
    margin-bottom: 12px;
}
.partner-landing__who-item--company .partner-landing__who-mark {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.partner-landing__who-item--uni .partner-landing__who-mark {
    color: var(--accent2);
    background: color-mix(in srgb, var(--accent2) 16%, transparent);
}
.partner-landing__who-item--school .partner-landing__who-mark {
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 16%, transparent);
}
.partner-landing__who-item h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 650;
}
.partner-landing__who-item p {
    margin: 0;
    color: var(--text2);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Steps — timeline, not a third card grid */
.partner-landing__block--steps {
    padding: 22px 20px 20px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.partner-landing__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px 16px;
    counter-reset: none;
}
.partner-landing__steps > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    position: relative;
}
.partner-landing__steps > li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 36px;
    right: -12px;
    height: 1px;
    background: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.partner-landing__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 0;
    background: var(--accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.partner-landing__steps strong {
    display: block;
    font-size: 0.98rem;
    margin-bottom: 2px;
}
.partner-landing__steps p {
    margin: 0;
    color: var(--text2);
    font-size: 0.88rem;
    line-height: 1.45;
}

/* Logo band */
.partner-landing__block--logos {
    margin: 0 0 48px;
    padding: 28px 24px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    text-align: center;
}
.partner-landing__logos-title {
    font-size: 1.2rem !important;
    font-weight: 650 !important;
    color: var(--text) !important;
    margin: 0 auto 22px !important;
    max-width: 36em;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-transform: none;
}
.partner-landing__logos {
    justify-content: center;
    gap: 12px 28px;
}

/* Capabilities — 2×2 with marks, not a centered list */
.partner-landing__feats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.partner-landing__feats > li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 16px 16px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-card);
    min-width: 0;
}
.partner-landing__feats > li:nth-child(2) { border-left-color: var(--accent2); }
.partner-landing__feats > li:nth-child(3) { border-left-color: var(--gold); }
.partner-landing__feats > li:nth-child(4) { border-left-color: var(--green); }
.partner-landing__feat-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--accent);
    font-size: 0.95rem;
    margin-top: 2px;
}
.partner-landing__feats > li:nth-child(2) .partner-landing__feat-mark { color: var(--accent2); }
.partner-landing__feats > li:nth-child(3) .partner-landing__feat-mark { color: var(--gold); }
.partner-landing__feats > li:nth-child(4) .partner-landing__feat-mark { color: var(--green); }
.partner-landing__feats h3 {
    margin: 0 0 6px;
    font-size: 1.02rem;
    font-weight: 650;
}
.partner-landing__feats p {
    margin: 0;
    color: var(--text2);
    font-size: 0.92rem;
    line-height: 1.5;
}
.partner-landing__mid-cta {
    margin: 18px 0 0;
    font-size: 0.95rem;
}
.partner-landing__mid-cta a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.partner-landing__mid-cta a:hover,
.partner-landing__mid-cta a:focus-visible {
    color: var(--accent2);
}

.partner-landing__faq {
    margin: 0;
    max-width: 100%;
    text-align: left;
}
.partner-landing__faq .faq-item .question {
    font-size: 1rem;
}

/* Apply panel — conversion block */
.partner-landing__block--apply {
    scroll-margin-top: 88px;
    padding: 28px 24px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius-card);
}
.partner-join-form {
    max-width: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    text-align: left;
}
.partner-join-form > .btn {
    display: inline-flex;
    width: auto;
    min-height: 44px;
    max-width: 100%;
    margin: 4px 0 0;
}
.partner-join-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    margin-bottom: 12px;
}
.partner-join-form__full { grid-column: 1 / -1; }
.partner-join-form textarea,
.partner-join-form input,
.partner-join-form select {
    width: 100%;
}
.partner-join-form__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.partner-join-form__error {
    color: #f87171;
    margin: 0 0 12px;
    font-size: 0.9rem;
}
.partner-join-form__ok {
    color: #34d399;
    margin: 0 0 12px;
    font-size: 0.9rem;
}
.partner-join-form .filter-group input.is-invalid,
.partner-join-form .filter-group select.is-invalid,
.partner-join-form .filter-group textarea.is-invalid {
    border-color: #f87171;
}
.partner-landing__preview {
    margin-bottom: 12px;
    max-height: none;
}
.partner-landing__preview .org-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.partner-landing__more { margin-top: 12px; }
.partner-landing__cta-final {
    margin: 8px 0 8px;
    padding: 28px 24px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    text-align: center;
}
.partner-landing__cta-final h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
}
.partner-landing__cta-final p {
    margin: 0 auto 16px;
    color: var(--text2);
    font-size: 0.98rem;
    max-width: 48ch;
}
.partner-landing__cta-final .btn {
    min-height: 44px;
}
@media (prefers-reduced-motion: reduce) {
    .partner-landing__who-item {
        transition: none;
    }
}
@media (max-width: 900px) {
    .partner-landing__who,
    .partner-landing__feats {
        grid-template-columns: 1fr 1fr;
    }
    .partner-landing__steps {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .partner-landing__steps > li {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 12px 0 12px 8px;
    }
    .partner-landing__steps > li:not(:last-child)::after {
        display: none;
    }
    .partner-landing__steps > li:not(:last-child)::before {
        content: '';
        position: absolute;
        top: 36px;
        left: 23px;
        bottom: 0;
        width: 1px;
        background: color-mix(in srgb, var(--accent) 40%, var(--border));
    }
}
@media (max-width: 720px) {
    .partner-landing__who,
    .partner-landing__feats,
    .partner-join-form__grid {
        grid-template-columns: 1fr;
    }
    .partner-landing__hero .page-title {
        max-width: none;
    }
    .partner-landing__block--apply,
    .partner-landing__block--steps,
    .partner-landing__block--logos,
    .partner-landing__cta-final {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.org-card { padding: 0; overflow: hidden; }
.org-card__link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    color: inherit;
    text-decoration: none;
    height: 100%;
}
.org-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.org-card__logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
}
.org-card__logo--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text2);
}
.org-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.org-card__name {
    margin: 0;
    font-size: 1.05rem;
}
.org-card__desc {
    margin: 0;
    color: var(--text2);
    font-size: 0.9rem;
    flex: 1;
}
.org-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.org-card__foot {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: auto;
}
.org-card__score {
    font-weight: 700;
    color: var(--accent);
}
.org-tier {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.org-tier--basic { background: var(--surface2); }
.org-tier--gold {
    background: color-mix(in srgb, #c9a227 18%, var(--surface));
    border-color: color-mix(in srgb, #c9a227 45%, var(--border));
    color: #8a6d12;
}
.org-tier--platinum {
    background: color-mix(in srgb, #6b7cff 16%, var(--surface));
    border-color: color-mix(in srgb, #6b7cff 40%, var(--border));
    color: #3d4db8;
}
.org-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #1f7a3f;
}
.org-online__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22a34a;
    flex: 0 0 auto;
}
.org-detail__head {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.org-detail__logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface2);
}
.org-detail__title { margin-bottom: 4px; }
.org-detail__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.org-detail__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.org-detail__metrics > div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 12px 14px;
}
.org-detail__metrics strong {
    display: block;
    font-size: 1.25rem;
}
.org-detail__metrics span {
    color: var(--text2);
    font-size: 0.8rem;
}
.org-detail__section {
    margin: 22px 0;
}
.org-detail__section h2 {
    font-size: 1.1rem;
    margin: 0 0 8px;
}
.org-request,
.org-cabinet__form,
.org-recommend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 720px;
}
.org-request label,
.org-cabinet__form label,
.org-recommend label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text2);
}
.org-request select,
.org-request textarea,
.org-cabinet__form input,
.org-cabinet__form select,
.org-cabinet__form textarea,
.org-recommend select,
.org-recommend input {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: var(--radius-btn);
    font: inherit;
}
.org-cabinet__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.org-req-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.org-req-list li {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 12px;
    background: var(--surface);
}
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .org-tier--gold { background: #f7efd2; color: #8a6d12; }
    .org-tier--platinum { background: #e8ecff; color: #3d4db8; }
}
@media (max-width: 640px) {
    .org-detail__head { flex-direction: column; }
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 16px 8px;
    color: var(--text2);
}
.empty-state i {
    display: block;
    font-size: 2.25rem;
    margin-bottom: 14px;
    color: var(--text3);
    line-height: 1;
}
.empty-state h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text);
}
.empty-state p {
    margin: 8px 0 0;
    max-width: 22rem;
    width: 100%;
    line-height: 1.5;
}
.empty-state .btn {
    margin-top: 18px;
}
.empty-state__link {
    display: inline-block;
    margin-top: 16px;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}
.empty-state__link:hover {
    color: var(--accent2);
    text-decoration: underline;
}
/* Пустое состояние внутри сетки карточек — на всю ширину, не в первую колонку */
.matches-grid > .empty-state,
.partners-grid > .empty-state {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
}

/* ============================================================
           ФУТЕР
           ============================================================ */
.footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 48px 24px 24px;
    margin-top: auto;
    /* auto прижимает футер к низу, когда страница короткая; на длинных отступ даёт
       нижний padding .page (60px). Не даём футеру сжиматься по высоте. */
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.footer__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 32px;
}
.footer-layout-default {
    display: none;
}
.footer-layout-specialist {
    display: grid;
}
.footer.is-hr-footer .footer-layout-default {
    display: grid;
}
.footer.is-hr-footer .footer-layout-specialist {
    display: none;
}
.footer__col h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text);
}
.footer__col a,
.footer__col p {
    display: block;
    color: var(--text2);
    font-size: 0.9rem;
    margin-bottom: 6px;
    transition: var(--transition);
}
.footer__col a.org-partners-link[hidden],
.footer__col a.org-partners-link.is-hidden,
.header__nav a.org-partners-link[hidden],
.header__nav a.org-partners-link.is-hidden,
.mobile-menu > a.org-partners-link[hidden],
.mobile-menu > a.org-partners-link.is-hidden,
a.org-partners-link[hidden],
a.org-partners-link.is-hidden {
    display: none !important;
}
.footer__col a:hover {
    color: var(--accent);
}
.footer__tg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer__col .footer__tg + .footer__tg {
    margin-top: 8px;
}
.footer__tg i {
    width: 18px;
    font-size: 1.1rem;
    color: #2AABEE;
}
.footer__bot {
    margin: 0;
    cursor: pointer;
}
.footer__col .footer__bot + .footer__tg {
    margin-top: 8px;
}
.footer__bottom {
    max-width: 1280px;
    margin: 32px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text3);
    font-size: 0.85rem;
}

/* ============================================================
           МОДАЛЬНЫЕ ОКНА
           ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal-overlay.open {
    display: flex;
}

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    max-width: 440px;
    width: 100%;
    padding: 32px 28px;
    position: relative;
    animation: fadeUp 0.3s ease forwards;
    max-height: 90vh;
    overflow-y: auto;
}
.modal .close {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 1.6rem;
    color: var(--text2);
    background: none;
    border: none;
    transition: var(--transition);
}
.modal .close:hover {
    color: var(--text);
    transform: rotate(90deg);
}
.modal h2 {
    font-size: 1.6rem;
    margin-bottom: 4px;
}
.modal .sub {
    color: var(--text2);
    margin-bottom: 20px;
}
.modal .form-group {
    margin-bottom: 14px;
}
.modal .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 2px;
}
.modal .form-group input,
.modal .form-group select {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text);
    font-size: 0.95rem;
}
.modal .form-group input:focus,
.modal .form-group select:focus {
    border-color: var(--accent);
    outline: none;
}
.modal .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 1rem;
    margin-top: 6px;
}
.modal .btn:focus-visible,
.modal .close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.auth-role-modal .sub {
    margin-top: 8px;
}
.auth-role-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.auth-role-choices .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    margin-top: 0;
}
.auth-role-choices .btn.is-preferred {
    border-color: var(--accent);
}
.modal .alt-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: var(--text2);
    font-size: 0.9rem;
}
.modal .alt-link a {
    color: var(--accent);
    font-weight: 600;
}
.modal .divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text3);
    font-size: 0.8rem;
    margin: 16px 0;
}
.modal .divider::before,
.modal .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ============================================================
           TOAST
           ============================================================ */
.toast-container {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    width: 100%;
}
.toast {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 14px 20px;
    color: var(--text);
    font-size: 0.95rem;
    box-shadow: var(--shadow);
    animation: slideIn 0.35s ease forwards;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid var(--accent);
}
.toast i {
    font-size: 1.2rem;
    color: var(--accent);
}
.toast.hide {
    animation: slideOut 0.3s ease forwards;
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* ============================================================
           COOKIE-УВЕДОМЛЕНИЕ
           ============================================================ */
html.cookie-ok #cookie-notice,
#cookie-notice[hidden] {
    display: none !important;
}
#cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 3500;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 12px 12px 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
    color: var(--text2);
    font-size: 0.85rem;
    line-height: 1.4;
}
#cookie-notice p {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    color: var(--text2);
    overflow-wrap: anywhere;
}
#cookie-notice a {
    color: var(--accent);
    text-decoration: underline;
}
#cookie-notice a:hover {
    color: var(--accent);
}
#cookie-notice .cookie-notice__ok,
#cookie-notice .cookie-notice__ok:hover,
#cookie-notice .cookie-notice__ok:active {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 6px 14px;
    min-height: 36px;
    font-size: 0.8rem;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: none;
    transform: none;
    transition: none;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}
@media (max-width: 830px) {
    #cookie-notice {
        gap: 12px;
        border-radius: 0;
        box-shadow: none;
    }
}
@media (max-width: 800px) {
    #cookie-notice {
        max-width: 100%;
        bottom: 72px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
    #cookie-notice p {
        flex: 1 1 auto;
        min-width: 0;
        height: auto;
    }
}
@supports (bottom: max(0px)) {
    @media (max-width: 800px) {
        #cookie-notice {
            bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        }
    }
}
@media (prefers-reduced-motion: reduce) {
    #cookie-notice,
    #cookie-notice .cookie-notice__ok,
    #cookie-notice .cookie-notice__ok:hover {
        transform: none;
        transition: none;
    }
}

/* ============================================================
           БАННЕР .tech → .ru (IP России)
           ============================================================ */
html.ru-mirror-ok #ru-mirror-banner,
#ru-mirror-banner[hidden] {
    display: none !important;
}
html.ru-mirror-on {
    --ru-mirror-h: 48px;
}
html.ru-mirror-on body {
    padding-top: calc(72px + var(--ru-mirror-h));
}
html.ru-mirror-on .header {
    top: var(--ru-mirror-h);
}
#ru-mirror-banner {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0;
    background: var(--surface);
    color: var(--text2);
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 8px 16px 8px 13px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#ru-mirror-banner p {
    margin: 0;
    flex: 1 1 12rem;
    min-width: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}
#ru-mirror-banner a.ru-mirror-banner__link {
    color: var(--accent);
    text-decoration: underline;
}
#ru-mirror-banner .ru-mirror-banner__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}
#ru-mirror-banner .ru-mirror-banner__go,
#ru-mirror-banner .ru-mirror-banner__go:hover,
#ru-mirror-banner .ru-mirror-banner__go:active {
    transform: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
#ru-mirror-banner .ru-mirror-banner__stay {
    background: transparent;
    border: 0;
    color: var(--text2);
    cursor: pointer;
    font: 600 0.8rem/1.2 inherit;
    padding: 6px 8px;
    text-decoration: underline;
    -webkit-appearance: none;
    appearance: none;
}
#ru-mirror-banner .ru-mirror-banner__stay:hover {
    color: var(--text);
}
#ru-mirror-banner .ru-mirror-banner__stay:focus-visible,
#ru-mirror-banner .ru-mirror-banner__go:focus-visible,
#ru-mirror-banner a.ru-mirror-banner__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
@media (max-width: 600px) {
    html.ru-mirror-on {
        --ru-mirror-h: 72px;
    }
    #ru-mirror-banner .ru-mirror-banner__go {
        width: auto;
    }
}
@supports (padding-top: max(0px)) {
    #ru-mirror-banner {
        padding-top: max(8px, env(safe-area-inset-top, 0px));
    }
}
@media (prefers-reduced-motion: reduce) {
    #ru-mirror-banner,
    html.ru-mirror-on .header {
        transition: none;
    }
}

/* ============================================================
           АДАПТИВНОСТЬ (до 860px — сетки и типографика;
           бургер/CTA шапки — max-width: 1279px выше)
           ============================================================ */
@media (max-width: 860px) {
    .hero h1 {
        font-size: clamp(1.1rem, 3.8vw, 1.35rem);
        max-width: 21rem;
        padding: 0 8px;
    }
    .page-title {
        font-size: clamp(1.35rem, 6vw, 1.8rem);
    }
    .features-grid {
        grid-template-columns: 1fr 1fr;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    .challenges-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .rating-grid,
    .matches-grid,
    .partners-grid {
        grid-template-columns: 1fr;
    }
    .partner-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .partner-filters .filter-group {
        flex: 1 1 auto;
    }
}

@media (max-width: 520px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    .hero h1 {
        font-size: 1.125rem;
        max-width: 19rem;
    }
    .header {
        padding: 0 16px;
    }
    .page {
        padding: 24px 16px 40px;
    }
    .modal {
        padding: 24px 18px;
    }
    .vacancy-form {
        padding: 20px 16px;
    }
    .rating-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .rating-podium {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
           ПРИЛОЖЕНИЕ (КАБИНЕТ) — ОБЩЕЕ
           ============================================================ */
/* по умолчанию app-навигация скрыта, показываем через JS */
.nav-app {
    display: none;
}
/* /for-employers/ не в шапке/футере: гость, specialist, HR */
.nav-guest-only {
    display: none !important;
}
.faq-seo-employers {
    max-width: 760px;
    margin: 20px auto 0;
    color: var(--text2);
    font-size: 0.95rem;
    line-height: 1.65;
}
.faq-seo-employers a {
    color: var(--accent);
}

/* ВИЗАРД (мультишаговые формы) */
.wizard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 28px 24px;
    max-width: 760px;
    margin: 0 auto;
}
.wizard-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.wizard-progress .step-dot {
    flex: 1 1 0;
    min-width: 24px;
    height: 6px;
    border-radius: 4px;
    background: var(--surface2);
    border: 1px solid var(--border);
    transition: var(--transition);
}
.wizard-progress .step-dot.active {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-color: transparent;
}
.wizard-progress .step-dot.done {
    background: var(--green);
    border-color: transparent;
}
.wizard-step-label {
    color: var(--text2);
    font-size: 0.85rem;
    margin-bottom: 6px;
}
.wizard-step-note {
    color: var(--text2);
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0 0 8px;
    max-width: 40rem;
}
.wizard-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
}
.wizard-body .form-group {
    min-width: 0;
}
.wizard-body .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text2);
    font-size: 0.9rem;
    line-height: 1.3;
}
.wizard-body .form-group input {
    display: block;
    width: 100%;
    min-width: 0;
}
.wizard-place-fields {
    margin-top: 4px;
}
.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    scroll-margin-top: 80px;
}
.wizard-nav .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

@media (max-width: 859px) {
    .wizard {
        padding: 20px 16px;
        width: 100%;
        max-width: 100%;
    }
    .wizard-nav {
        flex-wrap: wrap;
    }
    .wizard-nav .btn {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
    }
    .choice-list {
        grid-template-columns: 1fr;
    }
}

/* СПИСОК ВЫБОРА (опции визарда) */
.choice-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 12px;
}
.choice-item {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 14px 16px;
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    text-align: left;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 2.75rem;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}
.choice-item__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    word-break: break-word;
}
.choice-item__desc {
    display: block;
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text3);
}
.choice-item:hover {
    border-color: var(--accent);
    color: var(--text);
    transform: translateY(-2px);
}
.choice-item.selected {
    border-color: var(--accent);
    background: rgba(79, 143, 255, 0.12);
    box-shadow: 0 0 0 1px var(--accent);
}

/* СВОДКА / ПОДТВЕРЖДЕНИЕ */
.summary-box {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px 20px;
    margin-bottom: 16px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.92rem;
}
.summary-row:last-child {
    border-bottom: none;
}
.summary-row .k {
    color: var(--text2);
}
.summary-row .v {
    color: var(--text);
    font-weight: 600;
    text-align: right;
}
/* Точки-выноски между подписью и значением (только в сводных таблицах).
   Заполнитель растягивается во flex: точки появляются лишь при наличии
   свободного пространства и схлопываются, когда его нет. Невыделяемые. */
.summary-box .summary-row {
    align-items: baseline;
    gap: 0;
}
.summary-box .summary-row .k {
    flex: 0 0 auto;
}
.summary-box .summary-row .v {
    flex: 0 1 auto;
}
.summary-box .summary-row .leader {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 8px;
    align-self: baseline;
    border-bottom: 2px dotted var(--text3);
    user-select: none;
    pointer-events: none;
}

/* ТУМБЛЕР */
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 12px 16px;
    margin-bottom: 16px;
}
.switch-row .label {
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
}
.switch {
    position: relative;
    width: 48px;
    height: 26px;
    flex: 0 0 auto;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch .slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 26px;
    transition: var(--transition);
}
.switch .slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    top: 3px;
    background: var(--text);
    border-radius: 50%;
    transition: var(--transition);
}
.switch input:checked + .slider {
    background: var(--accent);
}
.switch input:checked + .slider::before {
    transform: translateX(22px);
    background: #fff;
}

/* РЕЗУЛЬТАТ-КАРТА */
.result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 32px 24px;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.result-card .result-emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
}
.result-card h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}
.result-card p {
    color: var(--text2);
    margin-bottom: 18px;
}
.result-card .result-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
/* Результат мэтча: полный (зелёный) / частичный (жёлтый) */
.result-card--full {
    border-color: var(--green);
    box-shadow: 0 0 0 1px var(--green), 0 12px 40px rgba(46, 204, 113, 0.12);
}
.result-card--partial {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 12px 40px rgba(240, 185, 11, 0.12);
}

/* Контакт партнёра — в результате мэтча и в карточке подписки */
.contact-box {
    text-align: left;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 14px 16px;
    margin: 6px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.result-card .contact-box {
    max-width: 420px;
    margin: 6px auto 18px;
}
.contact-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9rem;
}
.contact-row .k {
    color: var(--text2);
}
.contact-row .v {
    color: var(--text);
    font-weight: 600;
    text-align: right;
}
.contact-row .v a {
    color: var(--accent);
}
.material-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.material-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--accent);
}
.material-links a:hover {
    color: var(--accent2);
}

/* Блок «Курсы и материалы» на главной */
/* ============================================================
           ВИТРИНА «КУРСЫ И МАТЕРИАЛЫ» — статьи и гайды одной сеткой.
           Карточки одной формы: у статей обложка-картинка, у материалов
           градиентная плашка с иконкой той же высоты — сетка не рвётся.
           ============================================================ */
/* Карточки статей живут в горизонтальной ленте (.gal-track), поэтому
   ширина фиксированная, а не резиновая как в гриде. */
.lib-card {
    flex: 0 0 clamp(260px, 80vw, 320px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition);
}
.lib-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}
.lib-card__cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: none;
    background: var(--surface2);
    cursor: pointer;
    overflow: hidden;
}
.section-header__more {
    margin-top: 8px;
    display: block;
    width: 100%;
    max-width: none;
    text-align: center;
}

#librarySection .section-header__more {
    max-width: none;
    text-align: center;
}

.section-header__link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin: 4px 10px;
}

.section-header__link:hover {
    color: var(--accent2);
}

.lib-card__cover picture {
    display: block;
    width: 100%;
    height: 100%;
}
.lib-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
#librarySection .lib-card__cover:not(.lib-card__cover--icon),
#library .lib-card__cover:not(.lib-card__cover--icon) {
    aspect-ratio: 16 / 9;
    background: var(--surface2);
}
#librarySection .lib-card__cover:not(.lib-card__cover--icon) img,
#library .lib-card__cover:not(.lib-card__cover--icon) img {
    object-fit: cover;
    object-position: center;
}
#librarySection .lib-card:hover .lib-card__cover:not(.lib-card__cover--icon) img,
#library .lib-card:hover .lib-card__cover:not(.lib-card__cover--icon) img {
    transform: scale(1.04);
}
.lib-card:hover .lib-card__cover img {
    transform: scale(1.04);
}
.lib-card__cover--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    cursor: default;
}
.lib-card__tag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    background: rgba(10, 14, 20, 0.78);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
}
.lib-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}
.lib-card__body h3 {
    font-size: 1.05rem;
    line-height: 1.35;
    margin-bottom: 8px;
}
.lib-card__title {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition);
}
a.lib-card__cover {
    text-decoration: none;
    color: inherit;
}
a.lib-card__title {
    display: inline;
}
.lib-card__title:hover {
    color: var(--accent);
}
.lib-card__body p {
    color: var(--text2);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 14px;
    flex: 1;
}
.lib-card__meta {
    color: var(--text3);
    font-size: 0.78rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    flex-shrink: 0;
    margin-top: auto;
}
.lib-card__views,
.post__views,
.blog-card-meta .views {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    white-space: nowrap;
    color: var(--text3);
    visibility: visible;
    opacity: 1;
}
.blog-card-views,
.blog-view-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text2);
}
.lib-gallery {
    margin-top: 28px;
}

/* Системные материалы — статичный контент, поэтому обычные блоки рядом,
   а не лента: листать там нечего, а «карточка с обложкой» вводила в
   заблуждение, будто это тоже статья. */
.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 24px;
}
.material-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}
.material-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
}
/* Иконка в строке с заголовком — карточка ниже, чем при иконке сверху */
.material-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.material-card__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.material-card h3 {
    font-size: 1.15rem;
    line-height: 1.25;
}
.material-card p {
    color: var(--text2);
    font-size: 0.92rem;
    margin-bottom: 14px;
    flex: 1;
}
.material-card .material-links {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    flex-direction: column;
    gap: 10px;
}
.material-card .material-links a {
    font-size: 0.95rem;
}
.material-cta {
    font-weight: 600;
}

/* БЕЙДЖИ СТАТУСА */
.status-badge {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid var(--border);
}
.status-badge.active {
    color: var(--green);
    border-color: var(--green);
}
.status-badge.matched {
    color: var(--accent);
    border-color: var(--accent);
}
.status-badge.status-badge--new {
    color: var(--green);
    border-color: var(--green);
    margin-left: 0.35rem;
}
.status-badge.flag {
    color: var(--gold);
    border-color: var(--gold);
}

/* ГРУППА (направление) */
.app-group {
    margin-bottom: 28px;
}
.app-group-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ГРУППА ПОДПИСОК — заголовок направления с иконкой и разделителем */
.sub-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.sub-group-head i {
    color: var(--text);
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
}

/* Сетка карточек: несколько в ряд, компактнее, с min-width */
.sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
    gap: 16px;
}
.sub-show-more {
    margin-top: 14px;
}

/* Окно подробностей подписки */
.modal.modal--wide {
    max-width: 600px;
}
.sub-detail__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.sub-detail__subtitle {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 20px 0 12px;
}
.match-item {
    margin-bottom: 14px;
}
.match-item--current .contact-box {
    border-color: var(--accent);
}
.sub-detail__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 10px;
}
.sub-detail__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 9px 8px;
    white-space: nowrap;
}
.sub-detail__status {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text2);
}

/* КАРТОЧКА ПОДПИСКИ */
.sub-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius-card);
    padding: 16px 18px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
}
.sub-card:hover {
    border-color: var(--accent);
}
.sub-card--active {
    border-left-color: var(--green);
}
.sub-card--off {
    border-left-color: var(--text3);
}
.sub-card--matched {
    border-left-color: var(--accent);
}
.sub-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.sub-card__title {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
    min-width: 0;
}
.sub-card__badges {
    margin-top: -4px;
}

/* Меню «три точки» */
.sub-kebab {
    position: relative;
    flex-shrink: 0;
}
.sub-kebab__btn {
    background: transparent;
    border: none;
    color: var(--text2);
    cursor: pointer;
    padding: 4px 9px;
    border-radius: var(--radius-btn);
    font-size: 1rem;
    transition: var(--transition);
    min-width: 44px;
    min-height: 44px;
}
.sub-kebab__btn:hover {
    background: var(--surface2);
    color: var(--text);
}
.sub-kebab__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    min-width: 150px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    box-shadow: var(--shadow);
    padding: 6px;
}
.sub-kebab__menu.open {
    display: block;
}
.sub-kebab__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.88rem;
    text-align: left;
}
.sub-kebab__item:hover {
    background: var(--surface);
}
.sub-kebab__item.danger {
    color: var(--red);
}
.sub-kebab__item.danger:hover {
    background: rgba(231, 76, 60, 0.12);
}

/* Поля грейдов */
.sub-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.sub-field__label {
    font-size: 0.82rem;
    color: var(--text2);
    font-weight: 600;
    flex-shrink: 0;
}
.sub-field__value {
    font-size: 0.88rem;
    color: var(--text);
    text-align: right;
    overflow-wrap: anywhere;
    min-width: 0;
}
.sub-select {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: var(--radius-btn);
    font-size: 0.82rem;
    cursor: pointer;
}
.sub-range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sub-range .sub-select {
    min-width: 82px;
}
.sub-range__dash {
    color: var(--text3);
}

/* Тумблеры активности / повторов */
.sub-card__toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.sub-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--text2);
    user-select: none;
    min-height: 44px;
}
.sub-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.sub-toggle__track {
    position: relative;
    width: 38px;
    height: 20px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    transition: var(--transition);
    flex-shrink: 0;
}
.sub-toggle__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--text3);
    border-radius: 50%;
    transition: var(--transition);
}
.sub-toggle input:checked + .sub-toggle__track {
    background: rgba(79, 143, 255, 0.25);
    border-color: var(--accent);
}
.sub-toggle input:checked + .sub-toggle__track::after {
    transform: translateX(18px);
    background: var(--accent);
}
.sub-toggle input:checked ~ .sub-toggle__text {
    color: var(--text);
}
.sub-toggle input:focus-visible + .sub-toggle__track {
    box-shadow: 0 0 0 2px var(--accent);
}

.subs-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.subs-head__copy {
    flex: 1 1 16rem;
    min-width: 0;
}
.subs-head .page-title {
    margin-bottom: 8px;
}
.subs-head .page-subtitle {
    margin-bottom: 0;
}
.subs-head__actions {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex: 0 0 auto;
    white-space: nowrap;
    margin-top: 0.45em;
}
.subs-action {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text2);
    line-height: 1.3;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.subs-action:hover,
.subs-action:focus-visible {
    color: var(--text);
    border-color: var(--text3);
}
.subs-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.subs-action:disabled {
    opacity: 0.4;
    cursor: default;
    border-color: var(--border);
    color: var(--text3);
}
.subs-action--quiet {
    font-weight: 500;
    color: var(--text3);
    padding: 5px 0;
    border: 0;
    border-radius: 0;
}
.subs-action--quiet:hover,
.subs-action--quiet:focus-visible {
    color: var(--text2);
    border-color: transparent;
}

/* ТАБЫ */
.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.tabs .tab {
    padding: 10px 18px;
    color: var(--text2);
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tabs .tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.tabs .tab:hover:not(.active) {
    color: var(--text);
}

/* Quiz format tabs: mobile-first chips so all 5 labels stay on screen.
   Desktop (≥860px, same as burger) restores the underline row. */
#quizTabs {
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: none;
}
#quizTabs .tab {
    flex: 1 1 calc(50% - 8px);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.85rem;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-btn);
    margin-bottom: 0;
    background: var(--surface);
    color: var(--text2);
}
#quizTabs .tab.active {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(79, 143, 255, 0.12);
}
#quizTabs .tab:hover:not(.active) {
    color: var(--text);
    border-color: var(--text3);
}
#quizTabs .tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (min-width: 860px) {
    #quizTabs {
        flex-wrap: nowrap;
        border-bottom: 1px solid var(--border);
    }
    #quizTabs .tab {
        flex: 0 0 auto;
        min-height: 0;
        padding: 10px 18px;
        font-size: 0.95rem;
        text-align: left;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        margin-bottom: -1px;
        background: none;
    }
    #quizTabs .tab.active {
        color: var(--text);
        border-color: transparent;
        border-bottom-color: var(--accent);
        background: none;
    }
    #quizTabs .tab:hover:not(.active) {
        border-color: transparent;
        border-bottom-color: transparent;
    }
}

/* ТАБЛИЦЫ ПРИЛОЖЕНИЯ */
.app-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}
.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.app-table th,
.app-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.app-table th {
    color: var(--text2);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.app-table tbody tr {
    transition: var(--transition);
}
.app-table tbody tr.clickable {
    cursor: pointer;
}
.app-table tbody tr.clickable:hover {
    background: var(--surface2);
}
.app-table tbody tr:last-child td {
    border-bottom: none;
}

/* ТЕГ НАПРАВЛЕНИЯ */
.dir-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--accent);
}

/* КВИЗ — вопрос и опции */
.quiz-question {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 28px 24px;
    max-width: 760px;
    margin: 0 auto;
    overflow: hidden;
}
.quiz-watermark {
    position: absolute;
    inset: 12px;
    pointer-events: none;
    opacity: 0.06;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-18deg);
    user-select: none;
}
.quiz-text-answer {
    width: 100%;
    min-height: 96px;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text);
    font: inherit;
    resize: vertical;
}
.quiz-integrity-note {
    color: var(--text2);
    font-size: 0.92rem;
    max-width: 420px;
    margin: 8px auto 0;
}
.quiz-count-group {
    max-width: 360px;
}
.quiz-count-input {
    min-height: 44px;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text);
    font: inherit;
}
.quiz-question .q-counter {
    color: var(--text2);
    font-size: 0.85rem;
    margin-bottom: 8px;
}
.quiz-question .q-text {
    user-select: none;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    white-space: pre-wrap;
}
.quiz-options {
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.quiz-option {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 14px 16px;
    color: var(--text);
    text-align: left;
    font-size: 0.95rem;
    transition: var(--transition);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.quiz-option .opt-letter {
    font-weight: 700;
    color: var(--accent);
    flex: 0 0 auto;
}
.quiz-option:hover {
    border-color: var(--accent);
}
.quiz-option.selected {
    border-color: var(--accent);
    background: rgba(79, 143, 255, 0.12);
    box-shadow: 0 0 0 1px var(--accent);
}
.quiz-option.correct {
    border-color: var(--green);
    background: rgba(46, 204, 113, 0.12);
}
.quiz-option.wrong {
    border-color: var(--red);
    background: rgba(231, 76, 60, 0.12);
}
.quiz-format-cards {
    margin-bottom: 18px;
}
.quiz-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.quiz-format-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-card);
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text);
}
.quiz-format-card:hover,
.quiz-format-card.selected {
    border-color: var(--accent);
    background: rgba(79, 143, 255, 0.08);
}
.quiz-format-card__title {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
}
.quiz-format-card__desc,
.quiz-format-card__meta {
    display: block;
    font-size: 0.85rem;
    color: var(--text2);
}
.quiz-format-card--ghost {
    border-style: dashed;
}
.quiz-block-meta {
    font-size: 0.8rem;
    color: var(--text3);
    font-weight: 500;
}

/* КВИЗ — обзор результатов */
.review-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px 20px;
    margin-bottom: 14px;
}
.review-item .r-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}
.review-item .r-text {
    font-weight: 600;
    white-space: pre-wrap;
}
.review-item .r-expl {
    color: var(--text2);
    font-size: 0.9rem;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    white-space: pre-wrap;
}

/* ЗВЁЗДЫ */
.stars {
    display: inline-flex;
    gap: 4px;
    font-size: 1.6rem;
}
.stars .star {
    color: var(--text3);
    transition: var(--transition);
}
.stars .star.on {
    color: var(--gold);
}
.stars.clickable .star {
    cursor: pointer;
}

/* ПЕРЕКЛЮЧАТЕЛЬ РОЛИ */
.role-switch {
    display: inline-flex;
    gap: 4px;
    background: var(--surface2);
    border-radius: var(--radius-btn);
    padding: 4px;
    border: 1px solid var(--border);
}
.role-switch button {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text3);
}
.role-switch button.active {
    background: var(--accent);
    color: #fff;
}
/* Переключатель канала уведомлений: 4 опции — переносим на узких экранах */
.notify-switch {
    display: flex;
    flex-wrap: wrap;
}

/* ПРОФИЛЬ: меню разделов + карточки */
.profile-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 100%;
}
.profile-nav {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.profile-nav-link {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-btn);
    color: var(--text2);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    border: 1.5px solid transparent;
    background: none;
    cursor: pointer;
    transition: var(--transition);
}
.profile-nav-link:hover:not(.active) {
    color: var(--text);
    background: var(--surface2);
}
.profile-nav-link.active {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(79, 143, 255, 0.12);
}
.profile-nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.profile-panel[hidden] {
    display: none !important;
}
.profile-secure-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 959px) {
    .profile-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .profile-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
    }
    .profile-nav-link {
        flex: 1 1 calc(33.33% - 8px);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 0.85rem;
        text-align: center;
        white-space: nowrap;
        border: 1.5px solid var(--border);
        background: var(--surface);
    }
    .profile-nav-link.active {
        border-color: var(--accent);
        background: rgba(79, 143, 255, 0.12);
    }
}

@media (max-width: 640px) {
    .profile-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        margin: 0 -4px;
        padding: 0 4px 4px;
    }
    .profile-nav-link {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

.profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
    margin-bottom: 24px;
}
.profile-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.profile-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.profile-field__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 6px;
}
.profile-field__hint {
    margin: 8px 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text3);
}
.profile-field__value {
    color: var(--text);
    font-weight: 600;
    word-break: break-word;
}
.profile-field__value.is-empty {
    color: var(--text3);
    font-weight: 400;
}
.profile-name-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.profile-name-row input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text);
    font-size: 1rem;
}
.profile-name-row input:focus {
    border-color: var(--accent);
    outline: none;
}
.profile-name-row .btn {
    align-self: flex-start;
    min-height: 44px;
    white-space: nowrap;
}
.profile-card .role-switch {
    display: flex;
    width: 100%;
    max-width: 360px;
}
.profile-card .role-switch button {
    flex: 1;
    min-height: 44px;
    padding: 8px 12px;
}
@media (min-width: 768px) {
    .profile-name-row {
        flex-direction: row;
        align-items: center;
    }
    .profile-name-row input {
        flex: 1;
        min-width: 0;
        width: auto;
    }
    .profile-name-row .btn {
        flex: 0 0 auto;
    }
}
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
}
.stat-box {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px;
    text-align: center;
}
.stat-box .num {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent);
}
.stat-box .lbl {
    color: var(--text2);
    font-size: 0.85rem;
}
.spec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.spec-tags span {
    background: var(--surface2);
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text2);
}

/* форма отзыва */
.review-form {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px 20px;
    margin-top: 16px;
}
.review-form textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    margin: 12px 0;
}
.review-form textarea:focus {
    border-color: var(--accent);
    outline: none;
}

/* ============================================================
           УТИЛИТЫ
           ============================================================ */
.text-center {
    text-align: center;
}
.mt-16 {
    margin-top: 16px;
}
.mb-8 {
    margin-bottom: 8px;
}
.gap-8 {
    gap: 8px;
}
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.justify-center {
    justify-content: center;
}

/* ============================================================
           ОТЗЫВЫ О БОТЕ (компактный блок)
           ============================================================ */
/* ============================================================
           ОТЗЫВЫ НА ГЛАВНОЙ — горизонтальная галерея.
           Лента бесконечная: карточки дублируются в JS, позиция
           прокрутки нормализуется по длине одного набора
           (см. initReviewsGallery в platform.js).
           ============================================================ */
.rev-header {
    text-align: center;
}

.gal {
    position: relative;
}
.gal-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    /* прокрутку ведём сами: без snap и без smooth, иначе рвётся склейка */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px;
    cursor: grab;
}
.gal-track::-webkit-scrollbar {
    display: none;
}
.gal-track.is-dragging {
    cursor: grabbing;
    user-select: none;
}
/* Картинки в ленте не должны «отрываться» при перетаскивании: без этого
   браузер начинает нативный drag изображения вместо листания. */
.gal-track img {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.lib-card__cover {
    user-select: none;
}

.review-card {
    flex: 0 0 clamp(260px, 78vw, 340px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    transition: border-color var(--transition);
}
.gal-track:not(.is-dragging) .review-card:hover {
    border-color: var(--accent);
}
.review-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.review-card__stars {
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 2px;
}
.review-card__date {
    color: var(--text3);
    font-size: 0.75rem;
    white-space: nowrap;
}
.review-card__text {
    color: var(--text2);
    font-size: 0.92rem;
    line-height: 1.6;
    /* длина отзывов сильно разная — держим карточки одной высоты */
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-card__author {
    margin: 0.55rem 0 0;
    font-size: 0.82rem;
    color: var(--text3);
}
.review-card__images {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.review-card__images img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
}

#reviewForm {
    position: relative;
}
.hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#reviewModal .review-form {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}
#reviewModal .modal {
    max-width: 480px;
    max-height: min(92dvh, 92vh);
}
#reviewModal textarea {
    min-height: 120px;
    font-size: 1rem;
    margin: 8px 0 6px;
}
#reviewModal .form-group select,
#reviewModal .form-group input[type="file"] {
    min-height: 44px;
    font-size: 1rem;
}
.review-counter {
    text-align: right;
    font-size: 0.8rem;
    color: var(--text3);
}
.review-counter.is-short {
    color: #e07070;
}
.review-counter.is-ok {
    color: var(--text2);
}
.review-files-hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--text3);
}
.review-previews {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.review-preview {
    position: relative;
    width: 72px;
    height: 72px;
}
.review-preview img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.review-preview__remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 0 0 1px var(--border);
}
.review-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    font-weight: 700;
}
.review-submit.is-loading {
    opacity: 0.85;
    pointer-events: none;
}

@media (max-width: 640px) {
    #reviewModal.modal-overlay {
        padding: 0;
        align-items: stretch;
    }
    #reviewModal .modal {
        max-width: none;
        width: 100%;
        max-height: 100dvh;
        border-radius: 0;
        padding: 22px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }
    #reviewModal textarea,
    #reviewModal .form-group select,
    #reviewModal .form-group input,
    #reviewModal .review-submit {
        min-height: 44px;
        font-size: 16px;
    }
    #reviewModal textarea {
        min-height: 140px;
    }
    .reviews-block__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .reviews-block__actions .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* Кнопки листания по бокам */
.gal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow);
}
.gal-nav:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.gal-nav--prev {
    left: -10px;
}
.gal-nav--next {
    right: -10px;
}

/* Скрыть стрелки галереи (на главной нет .home / .page-id-2) */
.gal-nav--prev,
.gal-nav--next {
    display: none;
}

/* Набор поместился целиком — лента не нужна: центрируем и прячем кнопки
   (класс ставит initGallery, см. platform.js) */
.gal--fits .gal-track {
    justify-content: center;
    cursor: default;
    overflow-x: hidden;
}
.gal--fits .gal-clone {
    display: none;
}
.gal--fits .gal-nav {
    display: none;
}

@media (max-width: 860px) {
    .gal-nav {
        display: none;
    }
    .gal-track {
        /* на тач-устройствах листаем нативно */
        cursor: default;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 560px) {
    /* лента упирается в края экрана — так видно, что её можно листать */
    .gal-track {
        margin: 0 -16px;
        padding: 2px 16px;
    }
    .reviews-block {
        padding: 14px 16px;
        gap: 12px;
    }
    .reviews-block__actions {
        width: 100%;
    }
    .reviews-block__actions .btn {
        flex: 1;
        justify-content: center;
    }
    .lib-gallery {
        margin-bottom: 20px;
    }
    .material-card {
        padding: 18px 16px;
    }
}
@media (max-width: 400px) {
    /* совсем узкий экран — иконка и заголовок в колонку */
    .material-card__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Заголовок переехал над галереей, здесь остались текст и кнопки —
   поэтому блок ниже прежнего. */
.reviews-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.reviews-block__text p {
    color: var(--text2);
    font-size: 0.95rem;
    max-width: 560px;
}
.reviews-block__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ============================================================
           ЗВЁЗДНЫЙ РЕЙТИНГ (модалка отзыва)
           ============================================================ */
.star-rating {
    display: flex;
    gap: 4px;
    font-size: 1.8rem;
    flex-wrap: wrap;
}
.star-rating__btn {
    background: none;
    border: none;
    padding: 8px;
    margin: 0;
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
    border-radius: 8px;
}
.star-rating__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.star-rating i,
.star-rating__btn i {
    color: var(--border);
    pointer-events: none;
    transition: color 0.15s ease, transform 0.15s ease;
}
.star-rating i {
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    .star-rating i:hover,
    .star-rating__btn:hover i {
        transform: scale(1.12);
    }
}
.star-rating i.on,
.star-rating__btn.on i,
.star-rating__btn.on {
    color: var(--gold);
}
.star-rating__btn.on i {
    color: var(--gold);
}
@media (hover: hover) and (pointer: fine) {
    .star-rating:hover i,
    .star-rating:hover .star-rating__btn i {
        color: var(--border);
    }
    .star-rating:hover i.hover,
    .star-rating:hover .star-rating__btn.hover i,
    .star-rating:hover .star-rating__btn.hover {
        color: var(--gold);
    }
}

/* ============================================================
           ЧЕКБОКСЫ СОГЛАСИЯ (регистрация / отзыв)
           ============================================================ */
.consent-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 18px;
}
.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--text2);
    cursor: pointer;
}
.consent-row input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.consent-row a {
    color: var(--accent);
}
.consent-row a:hover {
    color: var(--accent2);
}

/* ============================================================
           ЮРИДИЧЕСКИЕ СТРАНИЦЫ (оферта / политика / условия)
           ============================================================ */
.legal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 32px 28px;
    max-width: 820px;
}
.legal h2 {
    font-size: 1.3rem;
    margin: 24px 0 10px;
}
.legal h2:first-child {
    margin-top: 0;
}
.legal p {
    color: var(--text2);
    margin-bottom: 12px;
}
.legal ul {
    margin: 0 0 16px;
    padding-left: 20px;
}
.legal li {
    color: var(--text2);
    margin-bottom: 8px;
}

/* ============================================================
           СТРАНИЦА СТАТЬИ (#post-*) — Mobile-First
           ============================================================ */
.post {
    max-width: min(780px, 100%);
    margin: 0 auto;
    padding-inline: 0;
    box-sizing: border-box;
}
.post__head {
    margin-bottom: 1.5rem;
}
.post__tag {
    display: inline-block;
    padding: 0.25rem 0.875rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(79, 143, 255, 0.1);
    border: 1px solid rgba(79, 143, 255, 0.25);
    margin-bottom: 0.875rem;
}
.post__title {
    font-size: clamp(1.4rem, 5vw, 2.1rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    overflow-wrap: anywhere;
}
.post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--text3);
    font-size: clamp(0.85rem, 2vw, 0.9rem);
}
.post__views {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    white-space: nowrap;
    visibility: visible;
    opacity: 1;
}
.post__dot {
    opacity: 0.5;
}

.post-figure {
    margin: 1.5rem 0;
}
.post-figure img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    background: var(--surface);
}
.post-figure figcaption {
    margin-top: 0.5rem;
    color: var(--text3);
    font-size: 0.82rem;
    text-align: center;
}
.post-figure--cover {
    margin: 0 0 1.75rem;
}
.post-figure--cover img {
    aspect-ratio: auto;
    object-fit: contain;
    height: auto;
    background: #fff;
}
.post-figure--cover-full img {
    aspect-ratio: auto;
    object-fit: contain;
    height: auto;
    background: #fff;
}

.lib-card__cover--full {
    aspect-ratio: 1 / 1;
    background: #fff;
}
.lib-card__cover--full img {
    object-fit: contain;
}

/* --- типографика тела статьи --- */
.post__body {
    color: var(--text2);
    font-size: clamp(1rem, 2.2vw, 1.05rem);
    line-height: 1.75;
}
.post__body section {
    margin-bottom: 0.5rem;
}
.post__body p {
    margin-bottom: 1rem;
}
.post__body strong {
    color: var(--text);
}
.post__body em {
    color: var(--text);
}
.post__body a:not(.btn) {
    color: var(--accent);
}
.post__body a:not(.btn):hover {
    text-decoration: underline;
}
.post__body h2 {
    color: #fff;
    font-size: clamp(1.2rem, 3.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 2rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    scroll-margin-top: 5rem;
}
.post__body h3 {
    color: var(--text);
    font-size: 1.18rem;
    font-weight: 700;
    margin: 26px 0 10px;
}
.post__body h4 {
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    margin: 18px 0 6px;
}
.post__body ul,
.post__body ol {
    margin: 0 0 16px;
    padding-left: 22px;
}
.post__body li {
    margin-bottom: 6px;
}
.post__body ul li::marker {
    color: var(--accent);
}
.post__body blockquote {
    margin: 18px 0;
    padding: 12px 18px;
    border-left: 3px solid var(--accent);
    background: var(--surface);
    border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
    color: var(--text);
    font-style: italic;
}
.post__body blockquote p:last-child {
    margin-bottom: 0;
}
.post-lead {
    font-size: 1.05rem;
    color: var(--text2);
}
.post-muted {
    color: var(--text3);
}
.post-hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 28px 0;
}

/* Врезки */
.post-callout {
    margin: 22px 0;
    padding: 16px 20px;
    border-radius: var(--radius-card);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
}
.post-callout--warn {
    border-left-color: var(--gold);
}
.post-callout--danger {
    border-left-color: var(--red);
}
.post-callout__label {
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}
.post-callout p:last-child {
    margin-bottom: 0;
}

/* Цитата-пример (заголовок истории) */
.post-quote {
    margin: 14px 0 18px;
    padding: 14px 18px;
    border-radius: var(--radius-card);
    background: var(--surface2);
    border: 1px dashed var(--border);
    color: var(--text);
    font-style: italic;
}
.post-story-title {
    color: var(--text);
    font-weight: 600;
}
.post-list {
    list-style: none;
    padding-left: 0;
}
.post-list li {
    position: relative;
    padding-left: 22px;
}
.post-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 700;
}

/* Сравнение «до / после» */
.post-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 18px 0;
}
.post-compare__card {
    padding: 16px 18px;
    border-radius: var(--radius-card);
    background: var(--surface);
    border: 1px solid var(--border);
}
.post-compare__card h4 {
    margin-top: 0;
}
.post-compare__card ul {
    margin-bottom: 0;
}
.post-compare__card.is-bad {
    border-left: 3px solid var(--red);
}
.post-compare__card.is-good {
    border-left: 3px solid var(--green);
}

/* Вопрос-ответ внутри статьи */
.post-faq {
    padding: 14px 0;
    border-bottom: 1px solid rgba(37, 43, 54, 0.5);
}
.post-faq:last-of-type {
    border-bottom: none;
}
.post-faq h4 {
    margin-top: 0;
    color: #fff;
}
.post-faq p:last-child {
    margin-bottom: 0;
}

/* Таблицы в статье */
.post-table-wrap {
    overflow-x: auto;
    margin: 18px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.post__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 480px;
}
.post__body th {
    background: var(--bg);
    color: var(--text);
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.post__body td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(37, 43, 54, 0.35);
    vertical-align: top;
}
.post__body tbody tr:last-child td {
    border-bottom: none;
}

/* Цифры-факты */
.post-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 12px;
    margin: 22px 0;
}
.post-stat {
    padding: 16px 14px;
    text-align: center;
    border-radius: var(--radius-card);
    background: var(--surface);
    border: 1px solid var(--border);
}
.post-stat__num {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.post-stat__label {
    margin-top: 6px;
    color: var(--text3);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Примеры «плохо / хорошо» */
.post-example-group {
    margin-bottom: 12px;
}
.post-example__label {
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.post-example__label.is-bad {
    color: var(--red);
}
.post-example__label.is-good {
    color: var(--green);
}
.post-example {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 14px;
    padding: 14px 16px;
    border-radius: var(--radius-card);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    color: var(--text2);
    font-size: 0.92rem;
    line-height: 1.6;
}
.post-example.is-bad {
    border-left-color: var(--red);
}
.post-example.is-good {
    border-left-color: var(--green);
}
.post-example__badge {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    background: var(--surface2);
    border: 1px solid var(--border);
}
.post-example__text {
    display: block;
}

/* Пронумерованные советы */
.post-tip {
    margin: 26px 0;
    padding: 20px 22px;
    border-radius: var(--radius-card);
    background: var(--surface);
    border: 1px solid var(--border);
}
.post-tip__num {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(79, 143, 255, 0.1);
    border: 1px solid rgba(79, 143, 255, 0.25);
}
.post-tip h3 {
    margin-top: 0;
}
.post-tip > p:last-child {
    margin-bottom: 0;
}

/* Призыв к действию в конце статьи */
.post-cta {
    margin: 32px 0 8px;
    padding: 24px;
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, rgba(79, 143, 255, 0.12), rgba(124, 92, 252, 0.12));
    border: 1px solid var(--border);
    text-align: center;
}
.post-cta h2,
.post-cta h3 {
    margin: 0 0 8px;
    color: #fff;
}
.post-cta p {
    margin-bottom: 16px;
}
.post-cta__actions {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.post-cta__actions .btn {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* .post__body a { color: accent } ломает контраст кнопок в CTA-блоке */
.post__body .post-cta a.btn {
    text-decoration: none;
}
.post__body .post-cta a.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 4px 16px rgba(79, 143, 255, 0.25);
}
.post__body .post-cta a.btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(79, 143, 255, 0.35);
}
.post__body .post-cta a.btn-outline {
    color: var(--text2);
    background: transparent;
}
.post__body .post-cta a.btn-outline:hover {
    color: var(--text);
    border-color: var(--accent);
}
@media (min-width: 768px) {
    .post-cta__actions {
        flex-direction: row;
    }
}

@media (max-width: 640px) {
    .post__meta {
        gap: 6px;
    }
    .post-figure,
    .post-callout,
    .post-cta {
        margin-left: 0;
        margin-right: 0;
    }
    .post-cta {
        padding: 18px 16px;
    }
    .post-compare {
        grid-template-columns: 1fr;
    }
    .post__body blockquote {
        padding: 10px 14px;
    }
}
@media (max-width: 420px) {
    .post-figure figcaption {
        font-size: 0.78rem;
    }
}

/* ============================================================
           ДОКУМЕНТ С ОГЛАВЛЕНИЕМ (#terms) — макет в стиле swagger:
           липкое меню слева, длинный текст справа, активный пункт
           подсвечивается при прокрутке (см. initDocNav в platform.js).
           ============================================================ */
.doc-layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 1120px;
}

.doc-nav {
    position: sticky;
    /* 72px — высота фиксированной шапки, +24px воздуха */
    top: 96px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px 14px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.doc-nav__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text3);
    padding: 0 10px 10px;
}
.doc-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.doc-nav__link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
    background: none;
    color: var(--text2);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
    transition: var(--transition);
}
.doc-nav__link:hover {
    color: var(--text);
    background: var(--surface2);
}
.doc-nav__num {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text3);
    min-width: 14px;
    transition: var(--transition);
}
.doc-nav__link.active {
    color: var(--text);
    background: rgba(79, 143, 255, 0.08);
    border-left-color: var(--accent);
    font-weight: 600;
}
.doc-nav__link.active .doc-nav__num {
    color: var(--accent);
}

.doc-content {
    max-width: none;
}
/* Отступ, чтобы заголовок раздела не уезжал под фиксированную шапку */
.doc-content .pp-block {
    scroll-margin-top: 96px;
}

@media (max-width: 900px) {
    .doc-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    /* На узких экранах оглавление превращается в горизонтальную ленту,
       прилипшую под шапкой. */
    .doc-nav {
        position: sticky;
        top: 72px;
        z-index: 5;
        max-height: none;
        overflow: visible;
        padding: 10px 10px 12px;
        /* фон непрозрачный: под лентой проезжает текст */
        background: var(--bg);
        border-color: var(--border);
    }
    .doc-nav__title {
        display: none;
    }
    .doc-nav__list {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }
    .doc-nav__list::-webkit-scrollbar {
        display: none;
    }
    .doc-nav__link {
        flex: 0 0 auto;
        white-space: nowrap;
        border-left: none;
        border-radius: 999px;
        border: 1px solid var(--border);
        padding: 7px 14px;
        font-size: 0.85rem;
    }
    .doc-nav__link.active {
        border-color: var(--accent);
        background: rgba(79, 143, 255, 0.12);
    }
}

/* ============================================================
           ЧАСТЫЕ ВОПРОСЫ (#faq) — аккордеон
           ============================================================ */
.faq-title,
.faq-sub {
    text-align: center;
}
.faq-sub {
    margin-bottom: 24px;
}
#page-faq:has(#faqRoleFilter[hidden]) .faq-sub {
    margin-bottom: 48px;
}
.faq-role-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 32px;
    max-width: 800px;
}
.faq-role-filter[hidden] {
    display: none;
}
.faq-role-filter__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text2);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: var(--transition);
}
.faq-item:hover {
    border-color: var(--accent);
}
.faq-item .question {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
    font-weight: 600;
    font-size: 1.05rem;
    gap: 16px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
}
.faq-item .question:hover {
    background: var(--surface2);
}
.faq-item .question .icon {
    font-size: 1.2rem;
    color: var(--text2);
    transition: var(--transition);
    flex-shrink: 0;
}
.faq-item.active .question .icon {
    transform: rotate(180deg);
    color: var(--accent);
}
.faq-item .answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 24px;
    color: var(--text2);
    line-height: 1.7;
}
.faq-item.active .answer {
    max-height: 600px;
    padding: 0 24px 20px 24px;
}
.faq-item .answer p {
    margin-bottom: 10px;
}
.faq-item .answer p:last-child {
    margin-bottom: 0;
}
.faq-item .answer a {
    color: var(--accent);
    text-decoration: underline;
}

@media (max-width: 860px) {
    .faq-item .question {
        font-size: 0.95rem;
        padding: 16px 18px;
    }
    .faq-item .answer {
        padding: 0 18px;
    }
    .faq-item.active .answer {
        padding: 0 18px 16px 18px;
    }
}
@media (max-width: 540px) {
    .faq-item .question {
        font-size: 0.9rem;
        padding: 14px 16px;
    }
    .faq-item .answer {
        padding: 0 16px;
    }
    .faq-item.active .answer {
        padding: 0 16px 14px 16px;
    }
}

/* ============================================================
           ПОЛИТИКА ОБРАБОТКИ ПЕРСОНАЛЬНЫХ ДАННЫХ (#privacy)
           Отдельный неймспейс pp-*, чтобы не конфликтовать
           с общими .section / .section-title / .container.
           ============================================================ */
.pp-head {
    max-width: 1000px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.pp-head .page-subtitle {
    margin-bottom: 0;
}
.pp-version {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--text3);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 16px;
}
/* Пояснение для англоязычного режима: документ ведётся на русском */
.pp-en-note {
    display: none;
    margin-top: 12px;
    color: var(--text3);
    font-size: 0.9rem;
    max-width: 640px;
}
html[lang="en"] .pp-en-note {
    display: block;
}

.pp-doc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 40px 44px 48px;
    max-width: 1000px;
    line-height: 1.7;
}

.pp-block {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(37, 43, 54, 0.3);
}
.pp-block:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.pp-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pp-num {
    color: var(--accent);
    font-weight: 800;
    margin-right: 4px;
}

.pp-doc p {
    color: var(--text2);
    margin-bottom: 8px;
    font-size: 0.95rem;
}
.pp-doc p strong {
    color: var(--text);
}
.pp-doc a {
    color: var(--accent);
    text-decoration: none;
}
.pp-doc a:hover {
    text-decoration: underline;
}
.pp-mt {
    margin-top: 8px;
}
.pp-muted {
    color: var(--text3);
}

/* Списки */
.pp-doc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pp-doc ul li {
    padding: 3px 0 3px 24px;
    position: relative;
    color: var(--text2);
    font-size: 0.93rem;
}
.pp-doc ul li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--accent);
    font-weight: 700;
}
.pp-doc ul li strong {
    color: var(--text);
}
/* Вложенный список (например, условия цитирования в разделе 3) */
.pp-doc ul ul {
    margin: 4px 0 2px;
    padding-left: 12px;
}
.pp-doc ul ul li::before {
    content: '–';
    color: var(--text3);
}

/* Таблицы */
.pp-table-wrap {
    overflow-x: auto;
    margin: 12px 0 8px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border);
}
.pp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 480px;
}
.pp-table thead {
    background: var(--bg);
}
.pp-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pp-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(37, 43, 54, 0.2);
    color: var(--text2);
    vertical-align: top;
}
.pp-table tbody tr:last-child td {
    border-bottom: none;
}
.pp-table tbody tr:hover {
    background: rgba(79, 143, 255, 0.03);
}
.pp-table td:first-child {
    font-weight: 500;
    color: var(--text);
}

/* Контактный блок */
.pp-contact {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 16px 20px;
    margin: 10px 0 4px;
}
.pp-contact__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    color: var(--text2);
    font-size: 0.93rem;
    flex-wrap: wrap;
}
.pp-contact__label {
    font-weight: 600;
    color: var(--text);
    min-width: 70px;
}
.pp-contact__row a {
    word-break: break-all;
}

/* Кнопка «наверх» */
.pp-back-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    color: var(--text3);
    font-size: 0.85rem;
    transition: var(--transition);
    background: none;
    border: none;
    padding: 6px 0;
    cursor: pointer;
    font-family: inherit;
}
.pp-back-top:hover {
    color: var(--text);
}

@media (max-width: 860px) {
    .pp-doc {
        padding: 24px 20px 32px;
    }
    .pp-table {
        font-size: 0.8rem;
        min-width: 400px;
    }
    .pp-table th,
    .pp-table td {
        padding: 8px 12px;
    }
    .pp-contact__row {
        gap: 4px;
    }
    .pp-contact__label {
        min-width: 60px;
    }
}

@media (max-width: 540px) {
    .pp-doc {
        padding: 18px 14px 24px;
    }
    .pp-title {
        font-size: 1rem;
    }
    .pp-doc p,
    .pp-doc ul li {
        font-size: 0.88rem;
    }
    .pp-table {
        font-size: 0.75rem;
        min-width: 320px;
    }
    .pp-table th,
    .pp-table td {
        padding: 6px 10px;
    }
    .pp-contact {
        padding: 12px 14px;
    }
}

/* ============================================================
           ВИЗАРД КВИЗА — шапка, крошки, доступность, история
           ============================================================ */
.quiz-bar {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.quiz-bar__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.quiz-crumb {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}
.quiz-crumb:not(:last-child)::after {
    content: "\203A";
    margin-left: 8px;
    margin-right: -4px;
    color: var(--text3);
}
.quiz-bar__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.quiz-bar__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.quiz-bar__desc {
    font-size: 0.86rem;
    color: var(--text2);
}
.quiz-avail {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text2);
}
.quiz-hist-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.quiz-hist-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.quiz-hist-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px;
}
.quiz-hist-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.quiz-hist-card__format {
    font-weight: 700;
    color: var(--text);
}
.quiz-hist-card__score {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--accent);
}
.quiz-hist-card__meta {
    margin: 0 0 14px;
}
.quiz-hist-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.92rem;
}
.quiz-hist-card__row:last-child {
    border-bottom: none;
}
.quiz-hist-card__row dt {
    color: var(--text2);
    flex: 0 0 auto;
}
.quiz-hist-card__row dd {
    margin: 0;
    color: var(--text);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}
.quiz-hist-card .quiz-hist-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.quiz-hist-card .quiz-hist-actions .btn {
    min-height: 44px;
    justify-content: center;
    width: 100%;
}
.quiz-hist-card .quiz-hist-actions [data-quiz-hide] {
    grid-column: 1 / -1;
}
.quiz-hist-table {
    display: none;
}
.quiz-hist-table .quiz-hist-hide-label {
    display: none;
}

@media (min-width: 860px) {
    .quiz-hist-list {
        display: none;
    }
    .quiz-hist-table {
        display: block;
    }
}

@media (max-width: 859px) {
    #quizHistoryPane .quiz-history-pagination button {
        min-height: 40px;
        padding: 8px 12px;
    }
}

/* ==============================================================
   ВАКАНСИИ / РЕЗЮМЕ
   ============================================================== */

/* Раскладка страницы размещения вакансии: форма + предпросмотр */
.vac-post-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 28px;
    align-items: start;
}
.vac-post-layout .vacancy-form { margin: 0; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.vac-preview-col {
    position: sticky;
    top: 90px;
}
.preview-label,
.my-vac-title {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3);
    margin: 0 0 10px;
    font-weight: 700;
}
.my-vac-title { margin-top: 26px; }
.vac-preview-card .vac-card { cursor: default; }
.vac-preview-empty {
    border: 1px dashed var(--border);
    border-radius: var(--radius-card);
    padding: 28px 18px;
    text-align: center;
    color: var(--text3);
    font-size: 0.9rem;
}

/* Ввод тегов в форме работодателя */
.tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    background: var(--surface2);
    padding: 8px 10px;
}
.tag-input:focus-within { border-color: var(--accent); }
.tag-chips { display: contents; }
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(79, 143, 255, 0.15);
    color: var(--text);
    border: 1px solid rgba(79, 143, 255, 0.35);
    border-radius: 999px;
    padding: 3px 8px 3px 10px;
    font-size: 0.82rem;
}
.tag-chip button {
    background: none;
    border: none;
    color: var(--text2);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}
.tag-chip button:hover { color: var(--red); }
.tag-input input {
    flex: 1;
    min-width: 140px;
    border: none !important;
    background: transparent !important;
    padding: 4px !important;
    color: var(--text);
}
.tag-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.tag-suggest__item {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.8rem;
    color: var(--text2);
    cursor: pointer;
    transition: var(--transition);
}
.tag-suggest__item:hover { border-color: var(--accent); color: var(--text); }
.tag-hint {
    display: block;
    color: var(--text3);
    font-size: 0.78rem;
    margin-top: 6px;
}

/* Список «Мои вакансии» */
.my-vac-list { display: flex; flex-direction: column; gap: 10px; }
.my-vac-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    background: var(--surface);
    padding: 12px 14px;
    cursor: pointer;
    transition: var(--transition);
}
.my-vac-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.my-vac-item__title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.my-vac-item__meta { color: var(--text2); font-size: 0.82rem; margin-top: 4px; }
.my-vac-empty { color: var(--text3); font-size: 0.88rem; padding: 8px 2px; }

/* Фильтры на странице «Вакансии» */
.vac-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.vac-filters .vac-search {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.vac-filters .vac-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text3);
}
.vac-filters .vac-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]) {
    padding: 11px 14px 11px 42px;
    width: 100%;
}
.vac-filters input,
.vac-filters select { min-width: 130px; }

.vac-tagfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 22px;
}
.vtag-filter {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.82rem;
    color: var(--text2);
    cursor: pointer;
    transition: var(--transition);
}
.vtag-filter:hover { color: var(--text); }
.vtag-filter.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Карточка вакансии в списке */
.vac-list { display: flex; flex-direction: column; gap: 14px; }
.vac-loading { color: var(--text3); padding: 20px; text-align: center; }
.vac-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.vac-card:hover {
    border-color: var(--accent);
    background: var(--surface2);
}
.vac-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}
.vac-card__logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--surface2);
    flex-shrink: 0;
}
.vac-card__title { font-size: 1.08rem; font-weight: 700; word-break: break-word; }
.vac-card__company { color: var(--text2); font-size: 0.88rem; margin-top: 3px; }
.vac-card__salary {
    color: var(--green);
    font-weight: 700;
    white-space: nowrap;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.vac-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    color: var(--text2);
    font-size: 0.83rem;
}
.vac-card__meta i { color: var(--text3); margin-right: 4px; }
.vac-archived {
    background: rgba(231, 76, 60, 0.15);
    color: var(--red);
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Теги-бейджи (по категориям) */
.vtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vtag {
    font-size: 0.76rem;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
}
.vtag--tech { border-color: rgba(79, 143, 255, 0.4); color: #9cc0ff; }
.vtag--employment { border-color: rgba(240, 185, 11, 0.4); color: #f0cf6b; }
.vtag--format { border-color: rgba(124, 92, 252, 0.4); color: #b7a5ff; }
.vtag--grade { border-color: rgba(46, 204, 113, 0.4); color: #7fe0a8; }

/* Подробности вакансии */
.vac-detail {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    padding: 26px 28px;
    max-width: 820px;
}
.vac-detail__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.vac-detail__title { font-size: 1.6rem; margin: 0; word-break: break-word; }
.vac-detail__company { color: var(--text2); margin-top: 6px; }
.vac-detail__salary { color: var(--green); font-weight: 700; font-size: 1.15rem; white-space: nowrap; flex-shrink: 0; }
.vac-detail__meta { margin-top: 14px; }
.vac-detail__section { margin-top: 20px; color: var(--text); line-height: 1.6; }
.vac-detail__section h3 { font-size: 1.05rem; margin: 0 0 8px; }
.vac-detail__contact { margin-top: 18px; color: var(--text2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vac-detail__contact a { color: var(--accent); }
.vac-detail__actions { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.vac-detail__owner { display: flex; gap: 10px; flex-wrap: wrap; }
.resume-danger { color: var(--red); border-color: rgba(231, 76, 60, 0.4); }
.resume-danger:hover { border-color: var(--red); }

/* Отклики */
.applicants { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 18px; }
.applicants h3 { font-size: 1.05rem; margin: 0 0 12px; }
.applicant {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.applicant__name { font-weight: 600; }
.applicant__headline { color: var(--text2); font-size: 0.85rem; margin-top: 2px; }
.applicant__msg { color: var(--text3); font-size: 0.83rem; margin-top: 6px; }
.applicant__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.applicant__status select { font-size: 16px; min-height: 40px; }

/* Блок резюме на /matches/resume/ — та же колонка, что у SEO-текста */
.resume-panel { margin-bottom: 24px; max-width: 760px; }
#page-matches-resume .resume-panel,
#page-matches-resume .find-guest-cta {
    margin-left: auto;
    margin-right: auto;
}
#page-matches-resume .find-seo { max-width: 760px; }
.resume-panel__hint {
    border: 1px dashed var(--border);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    color: var(--text2);
    font-size: 0.9rem;
}
.resume-card,
.resume-form {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    padding: 18px 20px;
}
.resume-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.resume-card__title { font-weight: 700; }
.resume-card__title i { color: var(--accent); margin-right: 6px; }
.resume-card__headline { color: var(--text2); font-size: 0.9rem; margin-top: 4px; }
.resume-card__file { color: var(--text3); font-size: 0.83rem; margin-top: 6px; }
.resume-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.resume-form__title { font-weight: 700; margin-bottom: 8px; }
.resume-form__title i { color: var(--accent); margin-right: 6px; }
.resume-form__desc { color: var(--text2); font-size: 0.88rem; margin: 0 0 14px; }
.resume-form input[type="text"],
.resume-form textarea {
    width: 100%;
    margin-bottom: 12px;
}
.resume-form textarea { min-height: 70px; }
.resume-file-label {
    display: block;
    color: var(--text2);
    font-size: 0.85rem;
    margin-bottom: 14px;
}
.resume-file-label input[type="file"] {
    display: block;
    margin-top: 8px;
    color: var(--text2);
}
.resume-form__actions { display: flex; gap: 10px; }

@media (max-width: 860px) {
    .vac-post-layout { grid-template-columns: 1fr; }
    .vac-preview-col { position: static; }
    .form-row { grid-template-columns: 1fr; }
}

/* ==============================================================
   ВАКАНСИИ: сайдбар с фильтрами + фасеты + мобильная панель
   ============================================================== */
.vac-browse {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}
.vac-browse.no-filters { grid-template-columns: 1fr; }

.vac-sidebar {
    align-self: start;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}
.vac-sidebar.is-hidden { display: none; }
.vac-sidebar__head {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}
.vac-sidebar__close {
    display: none;
    background: none;
    border: none;
    color: var(--text2);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.vac-sidebar__scroll {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}
.vac-sidebar .vac-search { position: relative; }
.vac-sidebar .vac-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text3);
    pointer-events: none;
    z-index: 1;
    font-size: 0.9rem;
    width: 1em;
    text-align: center;
}
.vac-sidebar .vac-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]) {
    /* полный padding: иначе базовый input { padding: 11px 14px } сбрасывает padding-left */
    padding: 11px 14px 11px 42px;
    width: 100%;
}
.vac-sidebar > .vac-sidebar__scroll > input { width: 100%; }

.facet-group {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    padding-bottom: 14px;
}
.facet-group:first-of-type { border-top: none; padding-top: 0; }
.facet-group:last-child { padding-bottom: 0; }
.facet-group + .facet-group { padding-top: 14px; }
.facet-group__title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text3);
    font-weight: 700;
    margin-bottom: 9px;
}
.facet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.facet-chip {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 0.82rem;
    color: var(--text2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}
.facet-chip:hover { color: var(--text); border-color: var(--accent); }
.facet-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.facet-count { font-size: 0.72rem; opacity: 0.65; }
.facet-chip.active .facet-count { opacity: 0.9; }

.vac-results { min-width: 0; }

/* Мобильная sticky-кнопка фильтров + затемнение */
.vac-filter-bar {
    display: none;
}
.vac-filter-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-btn);
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.vac-filter-bar__btn:hover,
.vac-filter-bar__btn:focus-visible {
    filter: brightness(1.06);
    outline: none;
}
.vac-filter-bar__btn[aria-expanded="true"] {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}
.vac-filter-bar__label { line-height: 1; }
.vac-filter-bar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--gold);
    color: #14181f;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}
.vac-filter-bar__badge[hidden] { display: none !important; }
.vac-sidebar-backdrop { display: none; }

/* legacy FAB removed — keep no rules that resurrect floating circle */

/* Группы подсказок тегов в форме работодателя */
.tag-suggest-wrap { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.tag-suggest-group__title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text3);
    font-weight: 700;
    margin-bottom: 6px;
}

@media (max-width: 860px) {
    .vac-browse { grid-template-columns: 1fr; }
    .vac-filter-bar {
        display: block;
        position: sticky;
        top: 72px;
        z-index: 40;
        margin: 0 0 14px;
        padding: 8px 0 4px;
        background: var(--bg);
    }
    .vac-filter-bar[hidden] { display: none !important; }
    .vac-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        height: 100dvh;
        width: min(86%, 340px);
        max-width: 100%;
        z-index: 130;
        overflow: hidden;
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--border);
        transform: translateX(-105%);
        transition: transform 0.3s ease;
        padding-top: env(safe-area-inset-top);
    }
    .vac-sidebar.is-open { transform: translateX(0); }
    .vac-sidebar.is-hidden { display: none; }
    .vac-sidebar__head { display: flex; }
    .vac-sidebar__close {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .vac-sidebar__scroll {
        max-height: none;
        overflow-y: auto;
        height: calc(100% - 56px - env(safe-area-inset-top, 0px));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .vac-sidebar-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 125;
    }
    .vac-card { padding: 14px 16px; }
    .vac-card__head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .vac-card__salary { white-space: normal; }
    .vac-detail { padding: 18px 16px; }
    .vac-detail__head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .vac-detail__title { font-size: 1.3rem; }
    .vac-detail__salary { white-space: normal; }
    .resume-card,
    .resume-form { padding: 14px 16px; }
    .resume-card__actions { width: 100%; }
    .resume-card__actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .applicant {
        flex-direction: column;
        align-items: stretch;
    }
    #page-vacancies .page-title { font-size: 1.55rem; }
    .vacancies-seo-lead { font-size: 0.9rem; margin-bottom: 18px; }
    .pagination { flex-wrap: wrap; gap: 8px; justify-content: center; }
}

@media (max-width: 420px) {
    .vac-card__meta { gap: 8px 12px; }
    .facet-chip { padding: 5px 9px; font-size: 0.78rem; }
    .vac-filter-bar__btn {
        min-height: 52px;
        font-size: 1.05rem;
    }
    .vac-sidebar {
        width: calc(100% - 20px);
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vac-sidebar { transition: none; }
}

html.vac-filters-open,
body.vac-filters-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* SEO lead under vacancies subtitle */
.vacancies-seo-lead {
    max-width: 720px;
    margin: -6px 0 22px;
    color: var(--text2);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ============================================================
   Course Library (/courses/)
   ============================================================ */
.courses-library {
    max-width: 1160px;
    margin: 0 auto;
    padding-bottom: 8px;
}

.page-breadcrumbs,
.courses-breadcrumbs {
    margin: 0 0 20px;
}

.page-breadcrumbs .breadcrumbs__list,
.courses-breadcrumbs .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    color: var(--text3);
}

.page-breadcrumbs .breadcrumbs__item:not(:last-child)::after,
.courses-breadcrumbs .breadcrumbs__item:not(:last-child)::after {
    content: "→";
    margin-left: 6px;
    color: var(--text3);
}

.page-breadcrumbs .breadcrumbs__item a,
.courses-breadcrumbs .breadcrumbs__item a {
    color: var(--text2);
    text-decoration: none;
}

.page-breadcrumbs .breadcrumbs__item a:hover,
.courses-breadcrumbs .breadcrumbs__item a:hover {
    color: var(--accent);
}

.page-breadcrumbs .breadcrumbs__item[aria-current="page"],
.courses-breadcrumbs .breadcrumbs__item[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
}

.courses-library__hero {
    margin: 0 0 20px;
}

.courses-library__title {
    margin: 0 0 8px;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text);
}

.courses-library__lede {
    margin: 0;
    max-width: 40rem;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--text2);
}

.courses-toolbar {
    margin: 0 0 22px;
}

.courses-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.courses-filter {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text2);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.courses-filter:hover {
    border-color: var(--accent);
    color: var(--text);
}

.courses-filter:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.courses-filter.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.courses-library__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
}

.course-path-card[hidden] {
    display: none !important;
}

.course-path-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.course-path-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(79, 143, 255, 0.35);
}

.course-path-card--featured {
    border-color: rgba(79, 143, 255, 0.4);
}

.course-path-card__cover {
    position: relative;
    flex: 0 0 auto;
    height: 148px;
    overflow: hidden;
}

.course-path-card__art {
    display: block;
    width: 100%;
    height: 100%;
}

.course-path-card__badge {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 2;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(10, 14, 20, 0.78);
    backdrop-filter: blur(8px);
}

.course-path-card--external .course-path-card__badge {
    color: #c4b5fd;
}

.course-cover--mocks {
    background:
        radial-gradient(circle at 22% 38%, rgba(79, 143, 255, 0.22) 0 18%, transparent 19%),
        radial-gradient(circle at 78% 48%, rgba(124, 92, 252, 0.2) 0 16%, transparent 17%),
        linear-gradient(165deg, #152238 0%, #0e1522 100%);
}

.course-cover--mocks .course-path-card__art::before {
    content: "";
    position: absolute;
    left: 16%;
    top: 28%;
    width: 86px;
    height: 58px;
    border: 2px solid rgba(79, 143, 255, 0.7);
    border-radius: 14px 14px 14px 4px;
    background: rgba(79, 143, 255, 0.1);
    box-shadow: 92px 16px 0 -2px rgba(124, 92, 252, 0.12), 92px 16px 0 0 rgba(124, 92, 252, 0.7);
}

.course-cover--sd {
    background:
        repeating-linear-gradient(90deg, rgba(20, 184, 166, 0.12) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(0deg, rgba(20, 184, 166, 0.12) 0 1px, transparent 1px 24px),
        linear-gradient(180deg, #12302c 0%, #0d1a1c 100%);
}

.course-cover--sd .course-path-card__art::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 24%;
    height: 78px;
    border-radius: 10px;
    border: 2px solid rgba(45, 212, 191, 0.55);
    background:
        linear-gradient(rgba(45, 212, 191, 0.85), rgba(45, 212, 191, 0.85)) 12px 10px / 36% 7px no-repeat,
        linear-gradient(rgba(45, 212, 191, 0.28), rgba(45, 212, 191, 0.28)) 12px 28px / 26% 38px no-repeat,
        linear-gradient(rgba(45, 212, 191, 0.2), rgba(45, 212, 191, 0.2)) 40% 28px / 26% 38px no-repeat,
        linear-gradient(rgba(45, 212, 191, 0.2), rgba(45, 212, 191, 0.2)) 68% 28px / 24% 38px no-repeat,
        rgba(8, 20, 22, 0.45);
}

.course-cover--c4 {
    background: radial-gradient(circle at 50% 42%, #2a1f3d 0 28%, #14101c 70%);
}

.course-cover--c4 .course-path-card__art::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(240, 185, 11, 0.75);
    border-radius: 8px;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 12px rgba(20, 14, 28, 0.4),
        0 0 0 14px rgba(124, 92, 252, 0.7),
        0 0 0 28px rgba(20, 14, 28, 0.4),
        0 0 0 30px rgba(79, 143, 255, 0.55);
}

.course-path-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 16px 18px 18px;
}

.course-path-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px;
    min-height: 2.6em;
    font-size: 1.08rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text);
}

.course-path-card__meta {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text3);
}

.course-path-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 16px;
    min-height: 2.9em;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text2);
}

.course-path-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: auto;
}

.courses-library__below {
    margin-top: 48px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.courses-block {
    margin: 32px 0 0;
}

.courses-block:first-child {
    margin-top: 24px;
}

.courses-block__title {
    margin: 0 0 12px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}

.courses-block p {
    margin: 0 0 12px;
    max-width: 42rem;
    color: var(--text2);
    font-size: 0.95rem;
    line-height: 1.65;
}

.courses-block p:last-child {
    margin-bottom: 0;
}

.courses-block a {
    color: var(--accent);
}

#coursesEmptyState[hidden] {
    display: none !important;
}

#coursesEmptyState {
    margin: 12px 0 0;
}

.courses-faq {
    max-width: 800px;
}

.courses-faq__sub {
    margin: 0 0 20px;
    max-width: 36rem;
    color: var(--text2);
    font-size: 0.95rem;
    line-height: 1.5;
}

#page-courses .faq-list {
    max-width: none;
    margin: 0;
}

.courses-related__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.courses-related__list a {
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.courses-related__list a:hover {
    text-decoration: underline;
}

@media (min-width: 640px) {
    .courses-library__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 22px;
    }
}

@media (min-width: 900px) {
    .courses-library__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .courses-filter,
    .course-path-card,
    .faq-item .answer,
    .faq-item .question .icon {
        transition: none;
    }
}

/* ===== PET projects ===== */
.feature-card--link {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}
.feature-card--link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.projects-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 24px 60px;
}

#page-projects .find-guest-cta {
    max-width: 760px;
}
#page-projects.is-projects-guest #projectsHeroActions,
#page-projects.is-projects-guest #projectsHeroCounter,
#page-projects.is-projects-guest #projectsCatalogSection {
    display: none !important;
}
#page-projects.is-projects-guest #projectsGuestCta,
#page-projects.is-projects-guest #projectsGuestPreview {
    display: block !important;
}
#page-projects:not(.is-projects-guest) #projectsGuestCta,
#page-projects:not(.is-projects-guest) #projectsGuestPreview {
    display: none !important;
}

.projects-hero--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 0 28px;
    gap: 0;
}
.projects-hero__icon {
    font-size: 3.4rem;
    display: inline-block;
    margin-bottom: 8px;
    animation: projectsFloat 3s ease-in-out infinite;
}
@keyframes projectsFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.projects-hero__title {
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--text), var(--accent2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.projects-hero__sub {
    margin: 8px 0 0;
    max-width: 560px;
    color: var(--text2);
    font-size: 1.05rem;
}
.projects-hero__counter {
    margin-top: 14px;
}
.projects-hero__counter span {
    display: inline-block;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 16px;
    color: var(--accent);
    font-weight: 600;
    font-size: 1rem;
}
.projects-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
}
.projects-hero__actions[hidden],
.projects-hero__counter[hidden],
.projects-hr-panel[hidden] {
    display: none !important;
}

.projects-hr-panel {
    max-width: 720px;
    margin: 1.25rem auto 0;
    padding: 1.15rem 1.25rem;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface2);
}
.projects-hr-panel__lead {
    margin: 0 0 0.85rem;
    color: var(--text2);
    line-height: 1.6;
}
.projects-hr-panel__steps {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    color: var(--text2);
    line-height: 1.65;
}
.projects-hr-panel__steps li + li {
    margin-top: 0.35rem;
}
.projects-hr-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.page.is-projects-hr .projects-filters__title {
    text-align: left;
}
#projectsCatalogSection[hidden],
#projectsGuestCta[hidden],
#projectsGuestPreview[hidden] {
    display: none !important;
}
#projectsGuestPreview {
    margin-bottom: 28px;
}
#projectsGuestPreview .projects-section__header h2 {
    font-size: 1.1rem;
    line-height: 1.35;
}
.projects-limits {
    margin: 12px 0 0;
    color: var(--text2);
    font-size: 0.9rem;
}

.projects-filters {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 26px;
    margin-bottom: 28px;
}
.projects-filters__title {
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}
.projects-filters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px 20px;
}
.projects-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.projects-filter-group--wide {
    grid-column: 1 / -1;
}
.projects-filter-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text2);
}
.projects-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.projects-filter-chip {
    padding: 4px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text2);
    background: var(--surface2);
    cursor: pointer;
    transition: 0.2s ease;
}
.projects-filter-chip:hover {
    border-color: var(--text3);
}
.projects-filter-chip.active {
    border-color: var(--accent);
    background: rgba(79, 143, 255, 0.15);
    color: var(--text);
}
.projects-search {
    position: relative;
}
.projects-search > i.fas,
.projects-search > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    text-align: center;
    color: var(--text3);
    font-size: 0.85rem;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}
.projects-search input,
.projects-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: 0.9rem;
}
/* Полный padding + та же :not()-цепочка, что у базового input —
   иначе padding: 11px 14px сбрасывает отступ под лупу */
.projects-search > input#projectsSearch:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.projects-search > input[type="search"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]) {
    padding: 8px 12px 8px 56px;
    box-sizing: border-box;
}
.projects-search input[type="search"]::-webkit-search-decoration,
.projects-search input[type="search"]::-webkit-search-cancel-button,
.projects-search input[type="search"]::-webkit-search-results-button,
.projects-search input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.projects-search input:focus,
.projects-select:focus {
    outline: none;
    border-color: var(--accent);
}
.projects-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.projects-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.projects-section__header h2 {
    margin: 0;
    font-size: 1.25rem;
}
.projects-section__count {
    color: var(--text2);
    font-size: 0.95rem;
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 700px) {
    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.projects-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    animation: projectsFadeUp 0.45s ease both;
}
.projects-card:nth-child(1) { animation-delay: 0.05s; }
.projects-card:nth-child(2) { animation-delay: 0.1s; }
.projects-card:nth-child(3) { animation-delay: 0.15s; }
.projects-card:nth-child(4) { animation-delay: 0.2s; }
.projects-card:nth-child(5) { animation-delay: 0.25s; }
.projects-card:nth-child(6) { animation-delay: 0.3s; }
@keyframes projectsFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.projects-card:hover {
    transform: translateY(-4px);
    border-color: rgba(79, 143, 255, 0.35);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
.projects-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.projects-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.projects-badge--status {
    background: rgba(79, 143, 255, 0.18);
    color: var(--accent);
}
.projects-badge--private {
    background: rgba(240, 185, 11, 0.18);
    color: var(--gold, #f0b90b);
}
.projects-badge--new {
    background: rgba(46, 204, 113, 0.18);
    color: var(--green, #2ecc71);
}
.projects-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}
.projects-card__desc {
    margin: 0;
    color: var(--text2);
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.05em;
}
.projects-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    color: var(--text3);
    font-size: 0.8rem;
}
.projects-card__meta i {
    margin-right: 4px;
    color: var(--text3);
}
.projects-card__stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.projects-chip {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 0.72rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
}
.projects-card__stats {
    display: flex;
    gap: 14px;
    color: var(--text2);
    font-size: 0.85rem;
}
.projects-card__stats .fa-heart { color: #e74c3c; }
.projects-card__stats .fa-comment { color: var(--accent); }
.projects-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
}
.projects-card__links a {
    color: var(--accent);
}
.projects-card__links a:hover {
    color: var(--accent2);
}
.projects-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}
.projects-card__actions .btn {
    flex: 1 1 auto;
}
.projects-card__author {
    color: var(--text2);
    font-size: 0.85rem;
}

.projects-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--text2);
    grid-column: 1 / -1;
}
.projects-empty i {
    font-size: 2.4rem;
    color: var(--text3);
    margin-bottom: 12px;
}
.projects-empty h3 {
    margin: 0 0 8px;
    color: var(--text);
}
.projects-empty p {
    margin: 0 0 18px;
}
.projects-empty[hidden] {
    display: none !important;
}

.projects-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}
.projects-pagination button {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text2);
    font-weight: 600;
}
.projects-pagination button:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--text);
}
.projects-pagination button.active {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-color: transparent;
    color: #fff;
}
.projects-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.projects-back { margin-bottom: 16px; }
.projects-detail__cover {
    height: 220px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    margin-bottom: 16px;
    border: 1px solid var(--border);
}
.projects-detail__by { color: var(--text2); }
.projects-detail__body {
    margin: 16px 0 20px;
    line-height: 1.65;
}
.projects-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.projects-comments h3 { margin-bottom: 12px; }
.projects-comment {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.projects-comment__time {
    margin-left: 8px;
    color: var(--text3);
    font-size: 0.8rem;
}
.projects-comment-form textarea {
    width: 100%;
    margin: 12px 0;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    resize: vertical;
}
.projects-form {
    max-width: 720px;
    display: grid;
    gap: 14px;
}
.projects-field {
    display: grid;
    gap: 6px;
    font-size: 0.9rem;
}
.projects-field input,
.projects-field textarea,
.projects-field select {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    width: 100%;
}
.projects-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.projects-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.projects-loading {
    padding: 48px;
    text-align: center;
    color: var(--text2);
    grid-column: 1 / -1;
}
.projects-spin {
    animation: projectsSpin 0.8s linear infinite;
}
@keyframes projectsSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Project detail (pd-*) ===== */
.pd-root { display: flex; flex-direction: column; gap: 24px; }
.pd-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 0 4px;
}
.pd-hero__icon {
    font-size: 3rem;
    animation: projectsFloat 3s ease-in-out infinite;
    margin-bottom: 8px;
}
.pd-hero__title {
    margin: 0;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--text), var(--accent2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pd-hero__sub {
    margin: 8px 0 0;
    max-width: 640px;
    color: var(--text2);
    font-size: 1.05rem;
}
.pd-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 14px;
}

.pd-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}
.pd-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}
.pd-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pd-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.pd-author__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pd-author__name {
    font-weight: 700;
    font-size: 1.05rem;
}
.pd-author__meta {
    margin-top: 4px;
    color: var(--text2);
    font-size: 0.85rem;
}
.pd-linkish {
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.pd-linkish:hover { color: var(--accent2); }

.pd-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text2);
    font-size: 0.9rem;
}
.pd-info-row i { margin-right: 6px; color: var(--text3); }
.pd-info-row strong { color: var(--text); }
.pd-info-row__stack { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pd-stack { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.pd-desc,
.pd-gallery,
.pd-comments,
.pd-card,
.pd-similar,
.pd-accordion {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
}
.pd-desc h2,
.pd-gallery h2,
.pd-comments h2,
.pd-similar h2 {
    margin: 0 0 12px;
    font-size: 1.15rem;
}
.pd-desc__body {
    color: var(--text2);
    line-height: 1.65;
}
.pd-desc__body p { margin: 0 0 12px; }
.pd-desc__body p:last-child { margin-bottom: 0; }
.pd-muted { color: var(--text3); font-size: 0.9rem; }

.pd-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.pd-gallery__item {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface2);
    cursor: zoom-in;
    aspect-ratio: 16 / 9;
}
.pd-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pd-gallery__item:hover { border-color: var(--accent); }
.pd-gallery__empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--text3);
}
.pd-gallery__empty i { font-size: 1.8rem; margin-bottom: 8px; }

.pd-links-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
}
.pd-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-stats-inline {
    display: flex;
    gap: 14px;
    color: var(--text2);
    font-size: 0.95rem;
}
.pd-stats-inline .fa-heart { color: #e74c3c; }

.pd-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.pd-card__head h2 {
    margin: 0;
    font-size: 1rem;
}
.pd-card__points {
    color: var(--gold, #f0b90b);
    font-weight: 800;
    font-size: 1.1rem;
}
.pd-progress__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface2);
    overflow: hidden;
    border: 1px solid var(--border);
}
.pd-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.pd-progress__labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text2);
}
.pd-xp-list { margin-top: 12px; display: grid; gap: 6px; }
.pd-xp-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.82rem;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--surface2);
}
.pd-xp-row.is-done { color: var(--text); }
.pd-xp-row.is-todo { color: var(--text3); opacity: 0.75; }
.pd-note {
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: var(--text3);
    line-height: 1.4;
}

.pd-achievements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.pd-ach {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    background: var(--surface2);
}
.pd-ach.is-on { border-color: rgba(79, 143, 255, 0.45); }
.pd-ach.is-off { opacity: 0.45; filter: grayscale(0.4); }
.pd-ach__icon { display: block; font-size: 1.2rem; margin-bottom: 4px; }
.pd-ach__name { font-size: 0.72rem; color: var(--text2); }

.pd-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pd-actions .btn { width: 100%; justify-content: center; }

.pd-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.pd-stat { text-align: center; }
.pd-stat__value {
    font-size: 1.25rem;
    font-weight: 700;
}
.pd-stat__value.accent { color: var(--accent); }
.pd-stat__value.gold { color: var(--gold, #f0b90b); }
.pd-stat__value.green { color: var(--green, #2ecc71); }
.pd-stat__label {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--text2);
}

.pd-similar__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.pd-similar__card {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface2);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.pd-similar__card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}
.pd-similar__card h3 {
    margin: 0 0 6px;
    font-size: 0.95rem;
}
.pd-similar__card p {
    margin: 0 0 10px;
    color: var(--text2);
    font-size: 0.82rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pd-similar__meta {
    display: flex;
    justify-content: space-between;
    color: var(--text3);
    font-size: 0.78rem;
}

.pd-accordion { padding: 0; overflow: hidden; }
.pd-accordion__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.pd-accordion__head h2 {
    margin: 0;
    font-size: 1.05rem;
}
.pd-accordion__head.is-open i { transform: rotate(180deg); }
.pd-accordion__head i { transition: transform 0.2s ease; color: var(--text2); }
.pd-accordion__body {
    padding: 0 20px 18px;
    color: var(--text2);
    font-size: 0.92rem;
}
.pd-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.85rem;
}
.pd-table th,
.pd-table td {
    border: 1px solid var(--border);
    padding: 8px 10px;
    text-align: left;
}
.pd-table th {
    background: var(--surface2);
    color: var(--text);
}

.pd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pd-lightbox[hidden] { display: none !important; }
.pd-lightbox img {
    max-width: min(960px, 100%);
    max-height: 85vh;
    border-radius: 12px;
    border: 1px solid var(--border);
}
.pd-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 2rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .pd-layout {
        grid-template-columns: 1fr;
    }
    .pd-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .pd-actions { grid-column: 1 / -1; }
    .pd-similar__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .projects-page {
        padding: 8px 16px 40px;
    }
    .projects-filters {
        padding: 16px;
    }
    .projects-filters__grid {
        grid-template-columns: 1fr;
    }
    .projects-filters__actions {
        flex-direction: column;
    }
    .projects-filters__actions .btn {
        width: 100%;
        justify-content: center;
    }
    .projects-card__actions .btn {
        flex: 1 1 100%;
    }
    .pd-side {
        grid-template-columns: 1fr;
    }
    .pd-gallery__grid {
        grid-template-columns: 1fr;
    }
    .pd-stats-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pd-similar__grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .projects-form__row {
        grid-template-columns: 1fr;
    }
}

/* ===== Project form (pf-*) ===== */
.pf-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px 0 20px;
}
.pf-hero__icon {
    font-size: 2.8rem;
    animation: projectsFloat 3s ease-in-out infinite;
    margin-bottom: 8px;
}
.pf-hero__title {
    margin: 0;
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--text), var(--accent2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pf-hero__sub {
    margin: 8px 0 0;
    max-width: 560px;
    color: var(--text2);
}
.pf-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
.pf-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.pf-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 88px;
}
.pf-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
}
.pf-section h2 {
    margin: 0 0 14px;
    font-size: 1.1rem;
}
.pf-group {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}
.pf-group:last-child { margin-bottom: 0; }
.pf-group label,
.pf-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text2);
}
.pf-req { color: var(--red, #e74c3c); }
.pf-group input[type="text"],
.pf-group input[type="url"],
.pf-group textarea,
.pf-group select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font: inherit;
}
.pf-group input:focus,
.pf-group textarea:focus,
.pf-group select:focus {
    outline: none;
    border-color: var(--accent);
}
.pf-group input[readonly] {
    opacity: 0.85;
    cursor: default;
}
.pf-group.is-invalid input,
.pf-group.is-invalid textarea,
.pf-group.is-invalid .pf-tags {
    border-color: var(--red, #e74c3c);
}
.pf-error {
    display: none;
    color: var(--red, #e74c3c);
    font-size: 0.8rem;
}
.pf-group.is-invalid .pf-error { display: block; }

.pf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    min-height: 48px;
}
.pf-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pf-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(79, 143, 255, 0.16);
    border: 1px solid rgba(79, 143, 255, 0.35);
    color: var(--text);
    font-size: 0.8rem;
}
.pf-tag button {
    border: none;
    background: none;
    color: var(--text2);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
}
.pf-tags input {
    flex: 1 1 120px;
    min-width: 100px;
    border: none !important;
    background: transparent !important;
    padding: 4px !important;
    outline: none;
}
.pf-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.pf-suggestion {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    font-size: 0.75rem;
    cursor: pointer;
}
.pf-suggestion:hover {
    border-color: var(--accent);
    color: var(--text);
}

.pf-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pf-toggles label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
}
.pf-toggles input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pf-toggles span {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    font-size: 0.85rem;
    font-weight: 600;
}
.pf-toggles input:checked + span {
    border-color: var(--accent);
    background: rgba(79, 143, 255, 0.18);
    color: var(--text);
}
.pf-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text2);
    font-weight: 500 !important;
}
.pf-check input { width: auto; }

.pf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pf-actions .btn { flex: 1 1 auto; justify-content: center; }

.pf-preview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 18px 16px;
}
.pf-preview h2 {
    margin: 0 0 12px;
    font-size: 1rem;
}
.pf-preview__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.pf-preview__title.is-placeholder,
.pf-preview__desc.is-placeholder {
    color: var(--text3);
    font-weight: 500;
}
.pf-preview__desc {
    color: var(--text2);
    font-size: 0.9rem;
    margin-bottom: 12px;
    min-height: 2.6em;
}
.pf-preview__author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}
.pf-preview__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-preview__stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.pf-preview__empty {
    color: var(--text3);
    font-size: 0.8rem;
}
.pf-preview__stats {
    display: flex;
    gap: 14px;
    color: var(--text2);
    font-size: 0.85rem;
}
.pf-similar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
}
.pf-similar h2 {
    margin: 0 0 10px;
    font-size: 1rem;
}
.pf-similar__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pf-similar__item {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    cursor: pointer;
    text-align: left;
    color: inherit;
    width: 100%;
}
.pf-similar__item:hover { border-color: var(--accent); }
.pf-similar__item strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 2px;
}
.pf-similar__item span {
    font-size: 0.78rem;
    color: var(--text3);
}

@media (max-width: 1024px) {
    .pf-layout { grid-template-columns: 1fr; }
    .pf-side { position: static; }
}
@media (max-width: 860px) {
    .pf-actions { flex-direction: column; }
    .pf-actions .btn { width: 100%; }
}

/* ============================================================
           AUTH PAGES (/login /register /forgot /reset)
           ============================================================ */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.auth-page .footer {
    margin-top: auto;
}
.auth-page .auth-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 16px max(16px, env(safe-area-inset-left)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
}
.auth-page .breadcrumbs {
    margin-bottom: 18px;
}
.auth-page .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.88rem;
    color: var(--text3);
}
.auth-page .breadcrumbs__item:not(:last-child)::after {
    content: "/";
    margin: 0 8px;
    color: var(--text3);
}
.auth-page .breadcrumbs__item a {
    color: var(--text2);
    text-decoration: none;
}
.auth-page .breadcrumbs__item a:hover {
    color: var(--accent);
}
.auth-page .breadcrumbs__item[aria-current="page"] {
    color: var(--text);
}
.auth-shell {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.auth-aside:empty {
    display: none;
}
.auth-card {
    order: -1;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px 16px 20px;
    box-shadow: var(--shadow);
}
.auth-aside {
    max-width: 420px;
    margin: 0 auto;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}
.auth-aside__title {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}
.auth-aside__lead {
    margin: 0 0 12px;
    color: var(--text2);
    font-size: 0.92rem;
    line-height: 1.5;
}
.auth-aside__list {
    margin: 0;
    padding: 0 0 0 1.1rem;
    color: var(--text2);
    font-size: 0.9rem;
    line-height: 1.55;
}
.auth-aside__list li + li {
    margin-top: 8px;
}
.auth-card__head {
    margin-bottom: 14px;
}
.auth-card .page-title {
    margin: 0 0 8px;
    font-size: 1.45rem;
    line-height: 1.25;
}
.auth-card__sub {
    margin: 0;
    color: var(--text2);
    font-size: 0.95rem;
    line-height: 1.45;
}
.auth-form .form-group {
    margin-bottom: 14px;
}
.auth-form .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 4px;
}
.auth-password__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.auth-password__label-row label {
    margin-bottom: 0;
}
.auth-forgot {
    margin: 0;
    font-size: 0.82rem;
    white-space: nowrap;
}
.auth-forgot a,
a.auth-forgot {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.auth-forgot a:hover,
a.auth-forgot:hover {
    color: var(--accent2);
}
.auth-form .form-group input,
.auth-form .form-group select {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text);
    font-size: 1rem;
}
.auth-form .form-group input:focus,
.auth-form .form-group select:focus {
    border-color: var(--accent);
    outline: none;
}
.auth-form .form-group input:focus-visible,
.auth-form .form-group select:focus-visible,
.auth-page .btn:focus-visible,
.auth-password__toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.auth-hint {
    margin: 6px 0 0;
    color: var(--text3);
    font-size: 0.8rem;
    line-height: 1.4;
}
.auth-password__wrap {
    position: relative;
}
.auth-password__wrap input {
    padding-right: 48px;
}
.auth-password__toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text3);
    cursor: pointer;
}
.auth-password__toggle::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-5 0-9.3 3.1-11 7 1.7 3.9 6 7 11 7s9.3-3.1 11-7c-1.7-3.9-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.2A2.8 2.8 0 1 0 12 9.2a2.8 2.8 0 0 0 0 5.6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-5 0-9.3 3.1-11 7 1.7 3.9 6 7 11 7s9.3-3.1 11-7c-1.7-3.9-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.2A2.8 2.8 0 1 0 12 9.2a2.8 2.8 0 0 0 0 5.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.auth-password__toggle[aria-pressed="true"] {
    color: var(--accent);
}
.auth-form .btn,
.auth-card > .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    margin-top: 4px;
}
.auth-card .btn-telegram {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    color: var(--text);
}
.auth-card .btn-telegram:hover {
    border-color: #2AABEE;
    color: var(--text);
    transform: none;
}
.auth-card .btn-telegram .icon-tg {
    color: #2AABEE;
    flex-shrink: 0;
}
.auth-oauth-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.auth-oauth-stack .btn-oauth,
.auth-card .btn-oauth {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    margin-top: 0;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    color: var(--text);
}
.auth-card .btn-oauth:hover {
    border-color: var(--accent);
    color: var(--text);
    transform: none;
}
.auth-card .btn-oauth .icon-oauth {
    flex-shrink: 0;
}
.auth-card .btn-oauth-github .icon-github {
    color: var(--text);
}
.auth-card .alt-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: var(--text2);
    font-size: 0.9rem;
}
.auth-card .alt-link a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.auth-card .divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text3);
    font-size: 0.8rem;
    margin: 16px 0;
}
.auth-card .divider::before,
.auth-card .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.auth-card .errorlist {
    list-style: none;
    color: var(--red);
    font-size: 0.85rem;
    margin: 6px 0 0;
    padding: 0;
}
.auth-alert,
.auth-success {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 14px;
}
.auth-alert {
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.35);
    color: #f5b7b1;
}
.auth-success {
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.35);
    color: #a8e6c1;
}
.auth-consent-notice {
    margin: 2px 0 12px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text3, #7a8494);
}
.auth-consent-notice p {
    margin: 0 0 0.35em;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.auth-consent-notice p:last-child {
    margin-bottom: 0;
}
.auth-consent-notice a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.auth-consent-notice a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
}
.auth-page .fa-telegram,
.auth-page .fa-envelope {
    display: inline-block;
    width: 18px;
    height: 18px;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    background: currentColor;
}
.auth-page .fa-telegram {
    color: #2AABEE;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.5 3.2 2.7 10.4c-1.3.5-1.3 1.2-.2 1.5l4.8 1.5 1.9 5.7c.2.7.4.9 1 .9.3 0 .5-.1.7-.4l2.7-2.6 5.6 4.1c.6.4 1.1.2 1.3-.6l3.3-15.6c.3-1.2-.4-1.8-1.3-1.4zM8.2 13.5l9.9-6.1c.5-.3.9 0 .6.4l-8 7.3-.3 3.3-2.2-4.9z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.5 3.2 2.7 10.4c-1.3.5-1.3 1.2-.2 1.5l4.8 1.5 1.9 5.7c.2.7.4.9 1 .9.3 0 .5-.1.7-.4l2.7-2.6 5.6 4.1c.6.4 1.1.2 1.3-.6l3.3-15.6c.3-1.2-.4-1.8-1.3-1.4zM8.2 13.5l9.9-6.1c.5-.3.9 0 .6.4l-8 7.3-.3 3.3-2.2-4.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.auth-page .fa-envelope {
    color: var(--text2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.auth-page .burger .fa-bars,
.auth-page .burger .fa-times {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    background: var(--text);
    box-shadow: 0 -6px 0 var(--text), 0 6px 0 var(--text);
    font-size: 0;
    position: relative;
}
.auth-page .burger .fa-times {
    background: transparent;
    box-shadow: none;
    height: 18px;
    width: 18px;
}
.auth-page .burger .fa-times::before,
.auth-page .burger .fa-times::after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 18px;
    height: 2px;
    background: var(--text);
}
.auth-page .burger .fa-times::before {
    transform: rotate(45deg);
}
.auth-page .burger .fa-times::after {
    transform: rotate(-45deg);
}
@media (min-width: 768px) {
    .auth-card {
        padding: 26px 24px 24px;
    }
    .auth-card .page-title {
        font-size: 1.65rem;
    }
}
@media (min-width: 900px) {
    .auth-page .auth-main {
        padding-top: 28px;
    }
    .auth-shell:has(.auth-aside:not(:empty)) {
        display: grid;
        grid-template-columns: minmax(240px, 1fr) minmax(320px, 400px);
        gap: 28px 40px;
        align-items: start;
    }
    .auth-card,
    .auth-aside {
        margin: 0;
        max-width: none;
    }
    .auth-card {
        order: 0;
    }
    .auth-aside {
        border-top: 0;
        border-left: 2px solid var(--border);
        padding: 10px 0 0 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .auth-page .btn,
    .auth-page .btn-primary:hover,
    .auth-password__toggle {
        transition: none;
        transform: none;
    }
}

/* HR cabinet */
.hr-subnav { margin-top: 0; }
.hr-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.hr-widget {
    flex: 1 1 140px;
    min-width: 132px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px 18px;
}
.hr-widget__num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.hr-widget__desc {
    font-size: 0.8rem;
    color: var(--text2);
}
/* Мои вакансии: рабочий список HR, без «AI SaaS»-карточек и градиентного H1 */
#page-my-vacancies .hr-mine-head {
    margin-bottom: 0;
}
#page-my-vacancies .hr-mine-head .page-title {
    background: none;
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--text);
    color: var(--text);
    font-size: clamp(1.65rem, 3.2vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 8px;
}
#page-my-vacancies .hr-mine-head .page-subtitle {
    max-width: 36rem;
    margin-bottom: 22px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text2);
}
#page-my-vacancies .hr-mine-guest {
    max-width: none;
    margin: 0 0 28px;
    padding: 0 0 22px;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}
#page-my-vacancies .hr-mine-guest p {
    margin: 0 0 14px;
    max-width: 38rem;
    color: var(--text2);
    font-size: 1rem;
    line-height: 1.55;
}
#page-my-vacancies .hr-mine-guest .find-guest-cta__actions {
    justify-content: flex-start;
}
/* Меньше «AI glow»: solid accent вместо фиолетового градиента с тенью */
#page-my-vacancies .btn-primary {
    background: var(--accent);
    box-shadow: none;
}
#page-my-vacancies .btn-primary:hover {
    background: #3d7aef;
    box-shadow: none;
    filter: none;
    transform: none;
}
#page-my-vacancies .btn-outline {
    border-color: var(--border);
    color: var(--text);
}
#page-my-vacancies .btn-outline:hover {
    border-color: var(--text3);
    color: var(--text);
    transform: none;
}
#page-my-vacancies .hr-mine-body {
    min-height: 160px;
}
#page-my-vacancies .hr-mine-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px 32px;
    margin-bottom: 18px;
    min-height: 72px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
#page-my-vacancies .hr-mine-summary__lead {
    min-width: 6.5rem;
}
#page-my-vacancies .hr-mine-summary__lead .hr-mine-summary__num {
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
#page-my-vacancies .hr-mine-summary__lead .hr-mine-summary__label {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--text2);
}
#page-my-vacancies .hr-mine-summary__rest {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#page-my-vacancies .hr-mine-summary__rest li {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#page-my-vacancies .hr-mine-summary__rest .hr-mine-summary__num {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
#page-my-vacancies .hr-mine-summary__rest .hr-mine-summary__label {
    font-size: 0.78rem;
    color: var(--text2);
}
#page-my-vacancies .hr-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}
#page-my-vacancies .hr-toolbar__filters .toggle-view {
    flex: 1 1 140px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
}
#page-my-vacancies .toggle-view .btn-small.active {
    background: var(--surface2);
    color: var(--text);
    box-shadow: none;
}
#page-my-vacancies .hr-vac-list {
    min-height: 96px;
}
#page-my-vacancies .hr-vac-item {
    align-items: flex-start;
    padding: 18px 0;
    gap: 14px 24px;
}
#page-my-vacancies .hr-vac-item__main {
    flex: 1 1 240px;
    min-width: 0;
}
#page-my-vacancies .hr-vac-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 10px;
}
#page-my-vacancies .hr-vac-item__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}
#page-my-vacancies .hr-vac-item h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}
#page-my-vacancies .hr-status {
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
#page-my-vacancies .hr-vac-item__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    flex: 1 1 260px;
    justify-content: flex-end;
}
#page-my-vacancies .hr-vac-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
#page-my-vacancies .hr-vac-item__actions .btn-small {
    min-height: 44px;
}
#page-my-vacancies .hr-vac-stats .stat {
    min-width: 3.2rem;
}
#page-my-vacancies .hr-vac-stats .num {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
#page-my-vacancies .hr-vac-stats .label {
    font-size: 0.72rem;
    color: var(--text2);
}
.hr-vac-more {
    position: relative;
}
.hr-vac-more__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 6;
    min-width: 168px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.hr-vac-more__menu button {
    display: block;
    width: 100%;
    text-align: left;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    border-radius: 6px;
}
.hr-vac-more__menu button:hover,
.hr-vac-more__menu button:focus-visible {
    background: var(--surface2);
}
.hr-vac-more__menu button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
#page-my-vacancies .hr-kanban-hint {
    margin: 0 0 8px;
    font-size: 0.85rem;
}
#page-my-vacancies .hr-kanban__col {
    border-radius: 8px;
    background: var(--bg);
}
#page-my-vacancies .hr-kanban__card {
    border-radius: 6px;
    border-left-width: 2px;
}
#page-my-vacancies .hr-mine-empty {
    padding: 36px 0 20px;
    align-items: flex-start;
    text-align: left;
    max-width: 28rem;
}
#page-my-vacancies .hr-mine-empty h3 {
    font-size: 1.1rem;
    font-weight: 600;
}
#page-my-vacancies .hr-mine-empty p {
    margin-top: 6px;
    max-width: none;
}
#page-my-vacancies .hr-mine-seo {
    max-width: none;
    margin-top: 40px;
    padding-top: 28px;
}
#page-my-vacancies .hr-mine-seo h2 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 32px 0 10px;
}
#page-my-vacancies .hr-mine-seo h2:first-child {
    margin-top: 0;
}
#page-my-vacancies .hr-mine-seo p {
    max-width: 42rem;
}
#page-my-vacancies .find-seo .faq-list {
    display: flex;
    flex-direction: column;
    margin: 4px 0 0;
    max-width: 42rem;
    gap: 0;
}
#page-my-vacancies .find-seo dt {
    color: var(--text);
    font-weight: 600;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
#page-my-vacancies .find-seo dt:first-of-type {
    border-top: none;
    padding-top: 0;
}
#page-my-vacancies .find-seo dd {
    margin: 6px 0 14px;
    color: var(--text2);
}
@media (prefers-reduced-motion: reduce) {
    #page-my-vacancies .toggle-view .btn-small,
    #page-my-vacancies .hr-vac-item__actions .btn-small {
        transition: none;
    }
}
.hr-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}
.toggle-view {
    display: flex;
    gap: 4px;
    background: var(--surface2);
    padding: 4px;
    border-radius: 10px;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    flex: 0 1 auto;
    min-width: 0;
}
.toggle-view .btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    min-height: 44px;
    min-width: 44px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text2);
    cursor: pointer;
    font-weight: 500;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}
.toggle-view .btn-small.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.toggle-view .btn-small:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
@media (max-width: 560px) {
    .hr-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .toggle-view {
        width: 100%;
    }
    .toggle-view .btn-small {
        flex: 1 1 0;
    }
    .hr-toolbar > .btn {
        width: 100%;
        justify-content: center;
    }
    #page-my-vacancies .hr-toolbar__filters {
        width: 100%;
    }
    #page-my-vacancies .hr-mine-guest .find-guest-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }
    #page-my-vacancies .hr-mine-guest .find-guest-cta__actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    #page-my-vacancies .hr-vac-item__aside {
        justify-content: flex-start;
        width: 100%;
    }
}
@media (max-width: 720px) {
    #page-my-vacancies .hr-mine-guest {
        padding-bottom: 18px;
    }
}
.hr-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    margin-bottom: 20px;
}
.hr-card__title {
    font-size: 1.05rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hr-vac-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.hr-vac-item:last-child { border-bottom: none; }
.hr-vac-item h3 {
    font-size: 1rem;
    font-weight: 600;
}
.hr-vac-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: var(--text2);
    font-size: 0.82rem;
    margin-top: 4px;
}
.hr-vac-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.hr-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.hr-status--on { background: rgba(46, 204, 113, 0.15); color: var(--green); }
.hr-status--off { background: rgba(240, 185, 11, 0.15); color: var(--gold); }
.hr-kanban {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}
.hr-kanban__col {
    flex: 0 0 min(240px, 80vw);
    scroll-snap-align: start;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    min-height: 120px;
}
.hr-kanban__col h3 {
    font-size: 0.85rem;
    margin-bottom: 10px;
    color: var(--text2);
}
.hr-kanban__card {
    background: var(--surface);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-left: 3px solid var(--accent);
    font-size: 0.88rem;
}
.hr-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.hr-form-actions .btn { min-height: 44px; }
.hr-ai-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.hr-ai-btn {
    background: rgba(79, 143, 255, 0.12);
    color: var(--accent);
    border: 1px solid rgba(79, 143, 255, 0.3);
    border-radius: 16px;
    padding: 6px 12px;
    min-height: 36px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.hr-ai-btn:hover { background: rgba(79, 143, 255, 0.2); }
.hr-internal {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 12px 0;
}
.hr-internal legend {
    padding: 0 6px;
    color: var(--text2);
    font-size: 0.85rem;
}
.hr-ats {
    background: var(--surface2);
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
}
.hr-ats__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.hr-score-bar {
    height: 8px;
    background: var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin: 8px 0;
}
.hr-score-bar__fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 8px;
    transition: width 0.25s ease;
}
.hr-ats__tips {
    list-style: none;
    font-size: 0.82rem;
    color: var(--text2);
}
.hr-ats__tips li { margin-top: 4px; }
.hr-heatmap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hr-heat {
    background: var(--surface2);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hr-heat i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.hr-heat--high i { background: var(--green); }
.hr-heat--mid i { background: var(--gold); }
.hr-heat--low i { background: var(--red); }
.hr-candidate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 768px) {
    .hr-candidate-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
    .hr-candidate-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.hr-cand {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hr-cand__head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hr-cand__av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
.hr-cand__score {
    margin-left: auto;
    font-weight: 700;
    color: var(--accent);
    font-size: 1.2rem;
}
.hr-cand__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hr-cand__skills span {
    background: var(--surface2);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.75rem;
}
.hr-cand__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.hr-funnel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.hr-funnel-row:last-child { border-bottom: none; }
.hr-funnel-label { width: 120px; flex-shrink: 0; font-size: 0.9rem; }
.hr-funnel-bar {
    flex: 1;
    height: 22px;
    background: var(--surface2);
    border-radius: 6px;
    overflow: hidden;
}
.hr-funnel-bar > span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 6px;
    min-width: 0;
}
.hr-funnel-count { width: 48px; text-align: right; font-weight: 600; }
.hr-know-form .form-group { margin-bottom: 12px; }
.hr-kanban__col.is-drop {
    outline: 2px dashed var(--accent);
}
.hr-kanban__card[draggable="true"] { cursor: grab; }
.hr-kanban__card select {
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
    font-size: 16px;
}
@media (max-width: 767px) {
    .hr-funnel-label { width: 96px; font-size: 0.8rem; }
    .vac-post-layout { grid-template-columns: 1fr; }
    .hr-vac-stats { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .hr-score-bar__fill { transition: none; }
}
.hr-cand__pick {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text2);
    margin-bottom: 8px;
    cursor: pointer;
}
.hr-compare-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .hr-compare-grid { grid-template-columns: 1fr 1fr; }
}
.vacancy-form input,
.vacancy-form textarea,
.vacancy-form select,
.hr-card input,
.hr-card select,
.hr-cand select {
    font-size: 16px;
}

/* ============================================================
   SUPER / ТАРИФЫ (/tariffs/)
   ============================================================ */
.tariffs-teaser {
    padding-top: 8px;
}
.tariffs-teaser__card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding: 18px 20px;
    border-radius: var(--radius-card);
    border: 1px solid rgba(240, 185, 11, 0.35);
    background: linear-gradient(135deg, rgba(240, 185, 11, 0.12), rgba(124, 92, 252, 0.08));
    color: var(--text);
    text-decoration: none;
}
.tariffs-teaser__card:hover {
    color: var(--text);
    border-color: var(--gold);
    box-shadow: 0 8px 28px rgba(240, 185, 11, 0.12);
}
.tariffs-teaser__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0a0e14;
    background: linear-gradient(135deg, #ffe08a, var(--gold) 40%, #7c5cfc);
}
.tariffs-teaser__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 220px;
    min-width: 0;
}
.tariffs-teaser__copy span {
    color: var(--text2);
    font-size: 0.92rem;
}
.tariffs-teaser__cta {
    font-weight: 700;
    color: var(--gold);
    margin-left: auto;
}

.super-page {
    padding-bottom: 24px;
}
.super-hero {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 40px 20px 0;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(240, 185, 11, 0.22), transparent 58%),
        linear-gradient(180deg, #0b1220 0%, var(--bg) 100%);
}
.super-hero__inner {
    max-width: 720px;
    margin: 0 auto;
}
.super-mascot {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
}
.super-mascot__glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 185, 11, 0.45), transparent 70%);
    animation: superGlow 2.8s ease-in-out infinite;
}
.super-mascot__badge {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: superBob 3.2s ease-in-out infinite;
}
.super-mascot__icon {
    display: block;
    filter: drop-shadow(0 0 12px rgba(240, 185, 11, 0.55));
}
.super-mascot__label {
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #ffe08a, #f0b90b, #7c5cfc, #4f8fff, #ffe08a);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: superShimmer 4s linear infinite;
}
.super-hero__kicker {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 10px;
}
.super-hero__title {
    font-size: clamp(1.55rem, 4.4vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 12px;
    text-wrap: pretty;
}
.super-hero__sub {
    color: var(--text2);
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 auto 18px;
    max-width: 36rem;
}
.super-progress {
    margin: 0 auto 16px;
    max-width: 32rem;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(240, 185, 11, 0.1);
    color: var(--text);
    font-size: 0.9rem;
}
.super-hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 8px;
}
.super-hero [data-ab="cta-b"] {
    display: none;
}
html.vq-tariffs-cta-b .super-hero [data-ab="cta-a"] {
    display: none;
}
html.vq-tariffs-cta-b .super-hero [data-ab="cta-b"] {
    display: inline;
}
.super-wave {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 28px;
    line-height: 0;
}
.super-wave svg {
    width: 100%;
    height: 48px;
    display: block;
}
.super-wave path {
    fill: var(--bg);
}

@keyframes superBob {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
    50% { transform: translate3d(0, 8px, 0) rotate(2deg); }
}
@keyframes superGlow {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}
@keyframes superShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

.super-why,
.super-plans,
.super-reviews,
.super-bottom-cta {
    padding: 40px 0 8px;
}
.super-why h2,
.super-plans h2,
.super-reviews h2,
.super-bottom-cta h2 {
    text-align: center;
    margin-bottom: 8px;
}
.super-why__grid {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
}
.super-why__grid li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 18px;
}
.super-why__icon {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 8px;
}
.super-why__grid strong {
    display: block;
    margin-bottom: 6px;
}
.super-why__grid p {
    color: var(--text2);
    font-size: 0.92rem;
    margin: 0;
}
.super-audience {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 20px;
}
.super-audience__btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text2);
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.super-audience__btn.active {
    border-color: var(--gold);
    color: var(--text);
    background: rgba(240, 185, 11, 0.12);
}
.super-plans .pricing-grid {
    margin-top: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 860px) {
    .super-plans .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}
.super-reviews__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
}
.super-quote {
    margin: 0;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.super-quote p {
    margin: 0;
    color: var(--text2);
    font-size: 0.95rem;
}
.super-bottom-cta {
    text-align: center;
    padding: 48px 16px 24px;
}
.super-bottom-cta p {
    color: var(--text2);
    margin: 0 auto 20px;
    max-width: 32rem;
}

@media (min-width: 700px) {
    .super-why__grid {
        grid-template-columns: 1fr 1fr;
    }
    .super-reviews__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (max-width: 699px) {
    .super-hero__btns .btn {
        width: 100%;
    }
    .tariffs-teaser__cta {
        margin-left: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .super-mascot__badge,
    .super-mascot__glow,
    .super-mascot__label {
        animation: none;
    }
}