* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f8fafc;
    color: #333;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

.navbar {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: white;
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links {
    display: flex;
    gap: 25px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a:hover {
    opacity: 0.8;
}

main {
    flex: 1;
    padding: 30px 0;
}

/* Стили для главной страницы */
.hero {
    background: linear-gradient(rgba(106, 17, 203, 0.9), rgba(37, 117, 252, 0.9)), url('/images/hero-bg.jpg');
    background-size: cover;
    color: white;
    text-align: center;
    padding: 80px 20px;
    border-radius: 15px;
    margin-bottom: 40px;
	margin-top: 40px;
}

.hero h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 18px;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background: white;
    color: #2575fc;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: #ff8c00;
    color: white;
}

.btn-outline {
    background: transparent;
    color: white;
    border-color: white;
}

.vacancies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.vacancy-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
    border: 1px solid #e8e8e8;
}

.vacancy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.vacancy-header {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    padding: 20px;
}

.vacancy-header h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.salary {
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0;
    color: #ffeb3b;
}

.vacancy-body {
    padding: 20px;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.badge {
    background: #f0f7ff;
    color: #2575fc;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.features {
    list-style: none;
    margin-bottom: 20px;
}

.features li {
    padding: 5px 0;
    padding-left: 25px;
    position: relative;
}

.features li:before {
    content: "✓";
    color: #4caf50;
    position: absolute;
    left: 0;
}

.card-actions {
    display: flex;
    gap: 10px;
}

.btn-small {
    padding: 8px 15px;
    font-size: 14px;
    flex: 1;
    text-align: center;
}

/* Стили для детальной страницы вакансии */
.vacancy-detail {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.vacancy-title {
    color: #2575fc;
    margin-bottom: 10px;
}

.meta-info {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    color: #666;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.section {
    margin-bottom: 30px;
}

.section-title {
    color: #2575fc;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f4f8;
    display: flex;
    align-items: center;
    gap: 10px;
}

.grades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.grade-item {
    background: #f8fafc;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #2575fc;
}

.grade-item ul {
    padding-left: 18px;
    
}

.grade-item h4 {
    color: #2575fc;
    margin-bottom: 10px;
}

/* Детальная вакансия WB — стиль офера */
.vacancy-detail--wb {
    padding: 0;
    overflow: hidden;
}

/* Страница вакансии WB: навбар и hero как единый блок */
body.rabota-page--vacancy-wb {
    background: #f1edf5;
}

body.rabota-page--vacancy-wb .navbar {
    background: linear-gradient(135deg, #3f1560 0%, #5c1f8c 100%);
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 0;
}

body.rabota-page--vacancy-wb main.container {
    padding-top: 0;
    padding-bottom: 40px;
    max-width: 1100px;
}

body.rabota-page--vacancy-wb .vacancy-detail--wb {
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 40px rgba(63, 21, 96, 0.12);
}

.vacancy-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 300px;
    background: linear-gradient(135deg, #3f1560 0%, #5c1f8c 50%, #6a2a94 100%);
    color: #fff;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.vacancy-hero__content {
    padding: 36px 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.vacancy-hero__eyebrow {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    margin-bottom: 8px;
}

.vacancy-detail--wb .vacancy-title {
    color: #fff;
    font-size: clamp(24px, 3.2vw, 32px);
    line-height: 1.15;
    margin-bottom: 8px;
}

.vacancy-hero__subtitle {
    font-size: 15px;
    opacity: 0.92;
    margin-bottom: 18px;
    max-width: 480px;
}

.vacancy-hero__salary {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    color: #ffd0ec;
    line-height: 1.15;
}

.vacancy-hero__salary span {
    font-size: 16px;
    font-weight: 600;
    opacity: 0.9;
}

.vacancy-hero__salary-note {
    font-size: 14px;
    opacity: 0.85;
    margin-top: 6px;
    margin-bottom: 18px;
}

.vacancy-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.vacancy-hero__actions .btn {
    font-size: 14px;
    padding: 10px 16px;
}

.vacancy-hero__visual {
    background: center right / cover no-repeat;
    min-height: 220px;
    position: relative;
}

.vacancy-hero__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, #5c1f8c 0%, rgba(92, 31, 140, 0.55) 28%, rgba(92, 31, 140, 0.1) 55%, transparent 72%);
    pointer-events: none;
}

.meta-info--wb {
    flex-wrap: wrap;
    padding: 18px 24px;
    margin: -22px 24px 0;
    background: #fff;
    border: 1px solid #eadff0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(63, 21, 96, 0.1);
    color: #4a3560;
    position: relative;
    z-index: 3;
    gap: 16px 24px;
}

.meta-info--wb .meta-item i {
    color: #e91e8c;
}

body.rabota-page--vacancy-wb .vacancy-detail--wb .section:first-of-type {
    padding-top: 28px;
}

.btn-cta-wb {
    background: linear-gradient(135deg, #e91e8c 0%, #c2186f 100%) !important;
    color: #fff !important;
    border: none !important;
}

.btn-cta-wb--lg {
    padding: 14px 28px;
    font-size: 16px;
}

.btn-outline-wb {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.75) !important;
}

.btn-outline-wb-dark {
    background: #fff !important;
    color: #5c1f8c !important;
    border: 2px solid #d8c4e8 !important;
}

body.rabota-page--vacancy-wb footer {
    margin-top: 0;
}

.section-title--wb {
    color: #5c1f8c;
    border-bottom-color: #eadff0;
}

.vacancy-lead {
    font-size: 16px;
    line-height: 1.55;
    color: #334155;
}

.vacancy-lead--muted {
    margin-top: 10px;
    color: #64748b;
}

.vacancy-lead--growth {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--rabota-lead-soft, #f0fdf4);
    border: 1px solid var(--rabota-lead-border, #bbf7d0);
    border-left: 4px solid var(--rabota-lead-accent, #00a651);
    border-radius: 10px;
    color: #166534;
    font-size: 15px;
}

.vacancy-lead--growth i {
    color: var(--rabota-lead-accent-dark, #00875a);
    margin-right: 6px;
}

.vacancy-detail--wb .section {
    padding: 0 28px;
}

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

.benefit-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    background: #faf7fc;
    border: 1px solid #eadff0;
    border-radius: 10px;
}

.benefit-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #5c1f8c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.benefit-card__title {
    font-weight: 700;
    color: #3f1560;
    margin-bottom: 4px;
}

.benefit-card__text {
    font-size: 14px;
    color: #64748b;
    line-height: 1.35;
}

.salary-highlight {
    padding: 20px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff4fa 0%, #f7ecff 100%);
    border: 1px solid rgba(233, 30, 140, 0.2);
    margin-bottom: 16px;
}

.salary-highlight__value {
    font-size: 28px;
    font-weight: 800;
    color: #c2186f;
}

.salary-highlight__note {
    margin-top: 6px;
    font-size: 14px;
    color: #64748b;
}

.compensation-list {
    margin-left: 20px;
    line-height: 1.7;
    color: #475569;
}

.grades-grid--wb .grade-item--wb {
    border-left: none;
    border: 1px solid #eadff0;
    background: #faf7fc;
}

.grade-item--wb h4 {
    color: #5c1f8c;
}

.grade-item__note {
    font-size: 13px;
    color: #e91e8c;
    font-weight: 600;
    margin-bottom: 10px;
}

.section--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.requirements-list--wb {
    columns: 1;
    list-style: none;
    padding: 0;
}

.requirements-list--wb li {
    padding: 8px 0 8px 22px;
    position: relative;
    font-size: 15px;
    color: #475569;
}

.requirements-list--wb li::before {
    content: "✓";
    color: #5c1f8c;
    font-weight: 700;
    position: absolute;
    left: 0;
}

.apply-section {
    background: #faf7fc;
    margin: 0;
    padding: 28px !important;
    border-top: 1px solid #eadff0;
}

.apply-steps-list--wb {
    margin: 0 0 20px 22px;
    line-height: 1.7;
    color: #334155;
}

.apply-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.apply-qr {
    text-align: center;
}

.apply-qr span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #5c1f8c;
}

.vacancy-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid #eadff0;
    background: #fff;
}

.vacancy-values__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #3f1560;
    border-right: 1px solid #eadff0;
    text-align: center;
}

.vacancy-values__item:last-child {
    border-right: none;
}

.vacancy-values__item i {
    color: #5c1f8c;
    font-size: 18px;
}

.print-section--wb {
    margin: 0;
    border-radius: 0 0 12px 12px;
    background: #f3ebf8;
    text-align: left;
    padding: 24px 28px;
}

.print-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.print-section__contacts {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.print-section__contacts a {
    color: #5c1f8c;
}

@media (max-width: 900px) {
    body.rabota-page--vacancy-wb main.container {
        padding-left: 0;
        padding-right: 0;
    }

    body.rabota-page--vacancy-wb .vacancy-detail--wb {
        border-radius: 0;
    }

    .vacancy-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .vacancy-hero__content {
        padding: 28px 20px 24px;
        max-width: none;
        order: 2;
    }

    .vacancy-hero__visual {
        min-height: 200px;
        order: 1;
    }

    .vacancy-hero__visual::before {
        background: linear-gradient(180deg, transparent 40%, #5c1f8c 100%);
    }

    .meta-info--wb {
        margin: -16px 16px 0;
        padding: 16px;
    }

    .vacancy-detail--wb .section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section--two-col {
        grid-template-columns: 1fr;
    }

    .vacancy-values {
        grid-template-columns: 1fr;
    }

    .vacancy-values__item {
        border-right: none;
        border-bottom: 1px solid #eadff0;
    }
}

.print-section {
    background: #f8fafc;
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
    text-align: center;
}

.qr-code {
    width: 150px;
    height: 150px;
    margin: 15px auto;
    background: #f0f0f0;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

/* Стили для формы анкеты */
.application-form {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    max-width: 800px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: #2575fc;
    box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.1);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.upload-area {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s;
}

.upload-area:hover {
    border-color: #2575fc;
}

.file-input {
    display: none;
}

/* Футер */
footer {
    background: #2c3e50;
    color: white;
    padding: 40px 0 20px;
    margin-top: 50px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-section h3 {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-section p {
    margin-bottom: 10px;
    opacity: 0.9;
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.8;
}

.footer-legal {
    margin-top: 12px;
    font-size: 13px;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.footer-legal a:hover {
    text-decoration: underline;
}

/* Адаптивность */
@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
        gap: 15px;
    }
    
    .hero h1 {
        font-size: 28px;
    }
    
    .vacancies-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .hero-buttons, .form-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
}

.requirements-list, .responsibilities-list {
    list-style-type: none;
    font-size: 14px;
    columns: 2;
    column-gap: 30px;
}

.requirements-list li, .responsibilities-list li {
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
    break-inside: avoid;
}

.requirements-list li:before, .responsibilities-list li:before {
    content: "•";
    color: #2575fc;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: 5px;
}

/* Усиленная подсветка ошибок для ActiveForm */
.form-group.has-error .form-control,
.form-group.has-error .form-control:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25);
    background-color: #fff5f5;
}

.form-group.has-error .help-block {
    color: #c0392b;
    font-weight: bold;
    padding: 6px 10px;
    background: #fce4e4;
    border-left: 4px solid #e74c3c;
    margin-top: 6px;
}

.form-group.has-error .control-label {
    color: #e74c3c;
}

.alert-danger {
    background-color: #f8d7da;
    border-left: 5px solid #e74c3c;
    border-radius: 6px;
    color: #721c24;
    padding: 15px 20px;
    margin-bottom: 25px;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.alert-danger i {
    margin-right: 8px;
    font-size: 1.2rem;
}

.alert-danger strong {
    font-weight: 600;
}

/* Универсальный менеджер — смешанный стиль WB + СДЭК + LogiPoint */
:root {
    --rabota-wb: #5c1f8c;
    --rabota-wb-dark: #3f1560;
    --rabota-wb-accent: #e91e8c;
    --rabota-wb-soft: #faf7fc;
    --rabota-cdek: #00a651;
    --rabota-cdek-dark: #00875a;
    --rabota-cdek-soft: #ecfdf3;
    --rabota-lp: #16a34a;
    --rabota-lp-soft: #dcfce7;
}

body.rabota-page--vacancy-universal {
    background: linear-gradient(180deg, #ecfdf3 0%, #f0fdf4 40%, #f8fafc 100%);
}

body.rabota-page--vacancy-universal .navbar {
    background: linear-gradient(135deg, #006b3f 0%, var(--rabota-cdek-dark) 45%, var(--rabota-cdek) 100%);
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 0;
}

body.rabota-page--vacancy-universal main.container {
    padding-top: 0;
    padding-bottom: 40px;
    max-width: 1100px;
}

body.rabota-page--vacancy-universal footer {
    margin-top: 0;
}

.vacancy-detail--universal {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 40px rgba(0, 135, 90, 0.12), 0 4px 20px rgba(0, 166, 81, 0.08);
}

.vacancy-hero--universal {
    background: #0f2920;
}

.vacancy-hero--universal .vacancy-hero__content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #004d2e 0%, var(--rabota-cdek-dark) 42%, var(--rabota-cdek) 100%);
    z-index: -1;
}

.vacancy-hero--universal .vacancy-hero__visual::before {
    background: linear-gradient(90deg, rgba(0, 77, 46, 0.72) 0%, rgba(0, 107, 63, 0.22) 14%, rgba(0, 135, 90, 0.06) 26%, transparent 40%);
}

.vacancy-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.vacancy-brand {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vacancy-brand--wb {
    background: linear-gradient(135deg, var(--rabota-wb-dark) 0%, var(--rabota-wb) 100%);
    border: 1px solid rgba(255, 176, 220, 0.35);
    color: #fff;
    box-shadow: 0 2px 8px rgba(92, 31, 140, 0.3);
}

.vacancy-hero--universal .vacancy-brand--wb {
    background: linear-gradient(135deg, var(--rabota-wb-dark) 0%, var(--rabota-wb) 55%, #6a2a94 100%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    box-shadow: 0 2px 10px rgba(63, 21, 96, 0.45);
}

.vacancy-brand--cdek {
    background: rgba(0, 166, 81, 0.3);
    border: 1px solid rgba(134, 239, 172, 0.45);
    color: #dcfce7;
}

.vacancy-brand--lp {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}

.vacancy-detail--universal .vacancy-title {
    color: #fff;
    font-size: clamp(24px, 3.2vw, 32px);
    line-height: 1.15;
    margin-bottom: 8px;
}

.vacancy-hero--universal .vacancy-hero__salary {
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.15);
}

.vacancy-hero--universal .vacancy-hero__salary span {
    color: #bbf7d0;
}

.btn-cta-universal {
    background: linear-gradient(135deg, var(--rabota-cdek-dark) 0%, var(--rabota-cdek) 100%) !important;
    color: #fff !important;
    border: none !important;
}

.btn-cta-universal:hover {
    background: linear-gradient(135deg, #006b3f 0%, var(--rabota-cdek-dark) 100%) !important;
}

.btn-cta-universal--lg {
    padding: 14px 28px;
    font-size: 16px;
}

.btn-outline-universal {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.75) !important;
}

.btn-outline-universal-dark {
    background: #fff !important;
    color: var(--rabota-wb) !important;
    border: 2px solid #d8c4e8 !important;
}

.btn-outline-universal-dark:hover {
    border-color: var(--rabota-cdek) !important;
    color: var(--rabota-cdek-dark) !important;
}

.meta-info--universal {
    flex-wrap: wrap;
    padding: 18px 24px;
    margin: -22px 24px 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 135, 90, 0.1);
    color: #334155;
    position: relative;
    z-index: 3;
    gap: 16px 24px;
}

.meta-item--wb i { color: var(--rabota-wb-accent); }
.meta-item--cdek i { color: var(--rabota-cdek); }
.meta-item--lp i { color: var(--rabota-lp); }

body.rabota-page--vacancy-universal .vacancy-detail--universal .section:first-of-type {
    padding-top: 28px;
}

.section-title--universal {
    color: var(--rabota-wb);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--rabota-wb) 0%, var(--rabota-cdek) 100%) 1;
}

.section-title--cdek {
    color: var(--rabota-cdek-dark);
    border-bottom-color: #bbf7d0;
}

.vacancy-detail--universal .section {
    padding: 0 28px;
}

.benefits-grid--universal .benefit-card {
    border-radius: 10px;
}

.benefit-card--wb {
    background: var(--rabota-wb-soft);
    border: 1px solid #eadff0;
}

.benefit-card--wb .benefit-card__icon {
    background: var(--rabota-wb);
}

.benefit-card--cdek {
    background: var(--rabota-cdek-soft);
    border: 1px solid #bbf7d0;
}

.benefit-card--cdek .benefit-card__icon {
    background: var(--rabota-cdek);
}

.benefit-card--mixed {
    background: linear-gradient(135deg, var(--rabota-wb-soft) 0%, var(--rabota-cdek-soft) 100%);
    border: 1px solid #d8c4e8;
}

.benefit-card--mixed .benefit-card__icon {
    background: linear-gradient(135deg, var(--rabota-wb) 0%, var(--rabota-cdek) 100%);
}

.benefit-card--logipoint {
    background: var(--rabota-lp-soft);
    border: 1px solid #bbf7d0;
}

.benefit-card--logipoint .benefit-card__icon {
    background: var(--rabota-lp);
}

.benefit-card--wb .benefit-card__title { color: var(--rabota-wb-dark); }
.benefit-card--cdek .benefit-card__title { color: var(--rabota-cdek-dark); }
.benefit-card--mixed .benefit-card__title { color: var(--rabota-wb-dark); }
.benefit-card--logipoint .benefit-card__title { color: #15803d; }

.salary-highlight--universal {
    background: linear-gradient(135deg, #fff4fa 0%, #ecfdf3 55%, #f7ecff 100%);
    border: 1px solid rgba(233, 30, 140, 0.15);
    border-left: 4px solid var(--rabota-cdek);
}

.salary-highlight--universal .salary-highlight__value {
    background: linear-gradient(90deg, var(--rabota-wb-accent) 0%, var(--rabota-cdek) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.compensation-list--universal li::marker {
    color: var(--rabota-cdek);
}

.grades-grid--universal .grade-item--universal {
    border-left: none;
    border: 1px solid #e5e7eb;
    background: #fafafa;
}

.grade-item--wb {
    border-top: 3px solid var(--rabota-wb) !important;
}

.vacancy-detail--universal .grade-item--wb {
    background: var(--rabota-wb-soft);
    border: 1px solid #eadff0 !important;
    border-top: 3px solid var(--rabota-wb) !important;
}

.grade-item--wb h4 { color: var(--rabota-wb); }
.grade-item--wb .grade-item__note { color: var(--rabota-wb-accent); }

.vacancy-detail--universal .grade-item--wb ul li::marker {
    color: var(--rabota-wb);
}

.grade-item--cdek {
    border-top: 3px solid var(--rabota-cdek) !important;
    background: var(--rabota-cdek-soft);
}

.grade-item--cdek h4 { color: var(--rabota-cdek-dark); }
.grade-item--cdek .grade-item__note { color: var(--rabota-cdek); }

.grade-item--mixed {
    border-top: 3px solid transparent !important;
    border-image: linear-gradient(90deg, var(--rabota-wb) 0%, var(--rabota-cdek) 100%) 1 !important;
    background: linear-gradient(135deg, var(--rabota-wb-soft) 0%, var(--rabota-cdek-soft) 100%);
}

.grade-item--mixed h4 { color: var(--rabota-wb-dark); }
.grade-item--mixed .grade-item__note { color: var(--rabota-cdek-dark); }

.section--universal-duties {
    gap: 20px;
}

.duty-col {
    padding: 20px;
    border-radius: 12px;
}

.duty-col--wb {
    background: var(--rabota-wb-soft);
    border: 1px solid #eadff0;
}

.vacancy-detail--universal .duty-col--wb {
    border-left: 4px solid var(--rabota-wb);
    box-shadow: 0 4px 16px rgba(92, 31, 140, 0.07);
}

.vacancy-detail--universal .duty-col--wb .section-title--wb {
    color: var(--rabota-wb);
    border-bottom-color: #eadff0;
}

.vacancy-detail--universal .duty-col--wb .section-title--wb i {
    color: var(--rabota-wb-accent);
}

.vacancy-detail--universal .benefit-card--wb {
    border-top: 3px solid var(--rabota-wb);
}

.vacancy-detail--universal .benefit-card--wb .benefit-card__icon {
    background: var(--rabota-wb);
    color: #fff;
}

.duty-col--cdek {
    background: var(--rabota-cdek-soft);
    border: 1px solid #bbf7d0;
}

.requirements-list--cdek li {
    padding: 8px 0 8px 22px;
    position: relative;
    font-size: 15px;
    color: #475569;
}

.requirements-list--cdek li::before {
    content: "✓";
    color: var(--rabota-cdek);
    font-weight: 700;
    position: absolute;
    left: 0;
}

.requirements-list--universal {
    list-style: none;
    padding: 0;
}

.requirements-list--universal li {
    padding: 8px 0 8px 22px;
    position: relative;
    font-size: 15px;
    color: #475569;
}

.requirements-list--universal li::before {
    content: "✓";
    color: var(--rabota-lp);
    font-weight: 700;
    position: absolute;
    left: 0;
}

.apply-section--universal {
    background: linear-gradient(135deg, var(--rabota-wb-soft) 0%, var(--rabota-cdek-soft) 100%);
    border-top: 1px solid #e5e7eb;
}

.apply-steps-list--universal li::marker {
    color: var(--rabota-wb);
    font-weight: 700;
}

.apply-section--universal .apply-qr span {
    color: var(--rabota-cdek-dark);
}

.vacancy-values--universal .vacancy-values__item i {
    color: var(--rabota-cdek);
}

.vacancy-values--universal .vacancy-values__item:nth-child(1) i {
    color: var(--rabota-wb);
}

.print-section--universal {
    margin: 0;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(135deg, #f3ebf8 0%, #ecfdf3 100%);
    text-align: left;
    padding: 24px 28px;
}

.print-section--universal h3 {
    color: var(--rabota-wb-dark);
}

.print-section--universal .print-section__contacts a {
    color: var(--rabota-cdek-dark);
}

@media (max-width: 900px) {
    body.rabota-page--vacancy-universal main.container {
        padding-left: 0;
        padding-right: 0;
    }

    body.rabota-page--vacancy-universal .vacancy-detail--universal {
        border-radius: 0;
    }

    .vacancy-hero--universal {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .vacancy-hero--universal .vacancy-hero__visual::before {
        background: linear-gradient(180deg, transparent 55%, rgba(0, 77, 46, 0.35) 100%);
    }

    .meta-info--universal {
        margin: -16px 16px 0;
        padding: 16px;
    }

    .vacancy-detail--universal .section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section--universal-duties {
        grid-template-columns: 1fr;
    }
}

/* Помощник руководителя — зелёный LogiPoint/СДЭК; фиолетовый WB только в WB-блоках */
:root {
    --rabota-lead-bg: #004d2e;
    --rabota-lead-surface: #006b3f;
    --rabota-lead-accent: #00a651;
    --rabota-lead-accent-dark: #00875a;
    --rabota-lead-gold: #ca8a04;
    --rabota-lead-gold-soft: #fef9c3;
    --rabota-lead-soft: #f0fdf4;
    --rabota-lead-border: #bbf7d0;
    --rabota-lead-wb: #5c1f8c;
    --rabota-lead-wb-accent: #e91e8c;
    --rabota-lead-wb-soft: #faf7fc;
}

body.rabota-page--vacancy-lead {
    background: linear-gradient(180deg, #ecfdf3 0%, #f0fdf4 40%, #f8fafc 100%);
}

body.rabota-page--vacancy-lead .navbar {
    background: linear-gradient(135deg, var(--rabota-lead-bg) 0%, var(--rabota-lead-surface) 50%, var(--rabota-lead-accent) 100%);
    box-shadow: 0 2px 12px rgba(0, 107, 63, 0.2);
    border-bottom: 2px solid var(--rabota-lead-accent);
    padding: 10px 0;
}

body.rabota-page--vacancy-lead main.container {
    padding-top: 0;
    padding-bottom: 40px;
    max-width: 1100px;
}

body.rabota-page--vacancy-lead footer {
    margin-top: 0;
}

.vacancy-detail--lead {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 16px 48px rgba(0, 135, 90, 0.12);
}

.vacancy-hero--lead {
    background: #0f2920;
}

.vacancy-hero--lead .vacancy-hero__content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--rabota-lead-bg) 0%, var(--rabota-lead-surface) 42%, var(--rabota-lead-accent) 100%);
    z-index: -1;
}

.vacancy-hero--lead .vacancy-hero__visual::before {
    background: linear-gradient(90deg, rgba(0, 77, 46, 0.72) 0%, rgba(0, 107, 63, 0.22) 14%, rgba(0, 135, 90, 0.06) 26%, transparent 40%);
}

.vacancy-lead-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--rabota-lead-gold-soft);
    color: #92400e;
    border: 1px solid #fcd34d;
    margin-bottom: 12px;
}

.vacancy-detail--lead .vacancy-title {
    color: #fff;
    font-size: clamp(24px, 3.2vw, 32px);
    line-height: 1.15;
    margin-bottom: 8px;
}

.vacancy-hero--lead .vacancy-hero__salary {
    color: #fde68a;
    font-weight: 800;
}

.vacancy-hero--lead .vacancy-hero__salary span {
    color: #bbf7d0;
    font-size: 16px;
}

.btn-cta-lead {
    background: linear-gradient(135deg, var(--rabota-lead-accent-dark) 0%, var(--rabota-lead-accent) 100%) !important;
    color: #fff !important;
    border: none !important;
}

.btn-cta-lead:hover {
    background: linear-gradient(135deg, var(--rabota-lead-bg) 0%, var(--rabota-lead-accent-dark) 100%) !important;
}

.btn-cta-lead--lg {
    padding: 14px 28px;
    font-size: 16px;
}

.btn-outline-lead {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
}

.btn-outline-lead-dark {
    background: #fff !important;
    color: var(--rabota-lead-accent-dark) !important;
    border: 2px solid var(--rabota-lead-border) !important;
}

.btn-outline-lead-dark:hover {
    border-color: var(--rabota-lead-accent) !important;
    color: var(--rabota-lead-accent-dark) !important;
}

.meta-info--lead {
    flex-wrap: wrap;
    padding: 18px 24px;
    margin: -22px 24px 0;
    background: #fff;
    border: 1px solid var(--rabota-lead-border);
    border-left: 4px solid var(--rabota-lead-accent);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 135, 90, 0.1);
    color: #334155;
    position: relative;
    z-index: 3;
    gap: 16px 24px;
}

.meta-info--lead .meta-item i {
    color: var(--rabota-lead-accent);
}

body.rabota-page--vacancy-lead .vacancy-detail--lead .section:first-of-type {
    padding-top: 28px;
}

.section-title--lead {
    color: var(--rabota-lead-accent-dark);
    border-bottom-color: var(--rabota-lead-border);
}

.section-title--lead i {
    color: var(--rabota-lead-accent);
}

.section--alt-lead {
    background: var(--rabota-lead-soft);
    margin: 0;
    padding: 28px !important;
    border-top: 1px solid var(--rabota-lead-border);
    border-bottom: 1px solid var(--rabota-lead-border);
}

.vacancy-detail--lead .section {
    padding: 0 28px;
    margin-bottom: 0;
    padding-bottom: 28px;
}

.vacancy-schedule-total {
    font-weight: 700;
    color: var(--rabota-lead-surface);
    margin-bottom: 16px;
    font-size: 15px;
}

.lead-schedule-table-wrap,
.lead-salary-table-wrap,
.lead-kpi-table-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
    border-radius: 10px;
    border: 1px solid var(--rabota-lead-border);
}

.lead-schedule-table,
.lead-salary-table,
.lead-kpi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
}

.lead-schedule-table th,
.lead-salary-table th,
.lead-kpi-table th {
    background: var(--rabota-lead-surface);
    color: #fff;
    text-align: left;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 13px;
}

/* --- WB-блоки: единственное место с фиолетовым на странице lead --- */
.vacancy-detail--lead .lead-schedule-table__row--wb td:first-child {
    border-left: 3px solid var(--rabota-lead-wb);
}

.vacancy-detail--lead .lead-schedule-table__row--wb td strong {
    color: var(--rabota-lead-wb);
}

.vacancy-detail--lead .lead-duty-card--wb {
    border-top: 3px solid var(--rabota-lead-wb);
    border-left: 4px solid var(--rabota-lead-wb);
    background: linear-gradient(180deg, var(--rabota-lead-wb-soft) 0%, #fff 100%);
}

.vacancy-detail--lead .lead-duty-card--wb .lead-duty-card__title {
    color: var(--rabota-lead-wb);
}

.vacancy-detail--lead .lead-duty-card--wb .lead-duty-card__title i {
    color: var(--rabota-lead-wb-accent);
}

.vacancy-detail--lead .lead-duty-card--wb .lead-duty-card__list li::before {
    color: var(--rabota-lead-wb);
}

.vacancy-detail--lead .lead-kpi-table__row--wb td:first-child {
    color: var(--rabota-lead-wb);
    font-weight: 600;
}

.vacancy-detail--lead .lead-salary-table__row--wb td:first-child {
    color: var(--rabota-lead-wb);
    border-left: 3px solid var(--rabota-lead-wb);
}

.vacancy-detail--lead .lead-salary-table__row--cdek td:first-child {
    color: var(--rabota-cdek, #00a651);
    border-left: 3px solid var(--rabota-cdek, #00a651);
}

.vacancy-detail--lead .lead-schedule-table__row--cdek td:first-child {
    border-left: 3px solid var(--rabota-cdek, #00a651);
}

.vacancy-detail--lead .lead-schedule-table__row--cdek td strong {
    color: var(--rabota-cdek, #00a651);
}

.lead-schedule-table td,
.lead-salary-table td,
.lead-kpi-table td {
    padding: 12px 14px;
    border-top: 1px solid #f1f5f9;
    color: #475569;
    vertical-align: top;
}

.lead-salary-table__total {
    background: #f0fdf4;
}

.lead-salary-table__total td {
    color: var(--rabota-lead-surface);
    font-size: 15px;
}

.vacancy-detail--lead .lead-kpi-table__row--cdek td:first-child {
    color: var(--rabota-cdek, #00a651);
    font-weight: 600;
}

.vacancy-detail--lead .lead-kpi-table__row--lead td:first-child {
    color: var(--rabota-lead-accent-dark);
    font-weight: 600;
}

.benefits-grid--lead {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.benefit-card--lead {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--rabota-lead-border);
    border-radius: 10px;
    border-top: 3px solid var(--rabota-lead-accent);
}

.benefit-card--lead .benefit-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--rabota-lead-surface);
    color: var(--rabota-lead-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-card--lead .benefit-card__title {
    font-weight: 700;
    color: var(--rabota-lead-surface);
    margin-bottom: 4px;
}

.benefit-card--lead .benefit-card__text {
    font-size: 14px;
    color: #64748b;
}

.lead-duties-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.lead-duty-card {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--rabota-lead-border);
    background: #fff;
}

.lead-duty-card--cdek {
    border-top: 3px solid var(--rabota-cdek, #00a651);
    background: linear-gradient(180deg, #ecfdf3 0%, #fff 100%);
}

.lead-duty-card--lead,
.lead-duty-card--logipoint {
    border-top: 3px solid var(--rabota-lead-gold);
}

.lead-duty-card__title {
    font-size: 16px;
    color: var(--rabota-lead-surface);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lead-duty-card--cdek .lead-duty-card__title i { color: var(--rabota-cdek, #00a651); }
.lead-duty-card--lead .lead-duty-card__title i,
.lead-duty-card--logipoint .lead-duty-card__title i { color: var(--rabota-lead-gold); }

.lead-duty-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lead-duty-card__list li {
    padding: 6px 0 6px 18px;
    position: relative;
    font-size: 14px;
    color: #475569;
    line-height: 1.45;
}

.lead-duty-card__list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--rabota-lead-accent);
    font-weight: 700;
}

.requirements-list--lead {
    list-style: none;
    padding: 0;
}

.requirements-list--lead li {
    padding: 8px 0 8px 22px;
    position: relative;
    font-size: 15px;
    color: #475569;
}

.requirements-list--lead li::before {
    content: "✓";
    color: var(--rabota-lead-accent);
    font-weight: 700;
    position: absolute;
    left: 0;
}

.compensation-list--lead {
    margin-left: 20px;
    line-height: 1.7;
    color: #475569;
}

.apply-section--lead {
    background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%);
    margin: 0;
    padding: 28px !important;
    border-top: 2px solid var(--rabota-lead-accent);
}

.apply-steps-list--lead {
    margin: 0 0 20px 22px;
    line-height: 1.7;
    color: #334155;
}

.apply-steps-list--lead li::marker {
    color: var(--rabota-lead-gold);
    font-weight: 700;
}

.apply-section--lead .apply-qr span {
    color: var(--rabota-lead-accent-dark);
    font-weight: 600;
}

.vacancy-values--lead {
    border-top: 1px solid var(--rabota-lead-border);
    background: var(--rabota-lead-surface);
}

.vacancy-values--lead .vacancy-values__item {
    color: #e2e8f0;
    border-right-color: rgba(255, 255, 255, 0.1);
}

.vacancy-values--lead .vacancy-values__item i {
    color: var(--rabota-lead-gold);
}

.print-section--lead {
    margin: 0;
    border-radius: 0 0 12px 12px;
    background: #f8fafc;
    text-align: left;
    padding: 24px 28px;
    border-top: 1px solid var(--rabota-lead-border);
}

.print-section--lead h3 {
    color: var(--rabota-lead-surface);
}

.print-section--lead .print-section__contacts a {
    color: var(--rabota-lead-accent-dark);
}

@media (max-width: 900px) {
    body.rabota-page--vacancy-lead main.container {
        padding-left: 0;
        padding-right: 0;
    }

    body.rabota-page--vacancy-lead .vacancy-detail--lead {
        border-radius: 0;
    }

    .vacancy-hero--lead {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .meta-info--lead {
        margin: -16px 16px 0;
        padding: 16px;
    }

    .vacancy-detail--lead .section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .lead-duties-grid {
        grid-template-columns: 1fr;
    }

    .section--lead-rights {
        grid-template-columns: 1fr;
    }

    .lead-schedule-table th,
    .lead-salary-table th,
    .lead-kpi-table th,
    .lead-schedule-table td,
    .lead-salary-table td,
    .lead-kpi-table td {
        padding: 10px 8px;
        font-size: 12px;
    }
}