/* Role-based showcase: prepared sets and shared generated cache. */
.vacancies-v2 .section-heading { margin-bottom: 28px; }
.vacancies-v2 .muted-heading { color: #287bd5; }
.profession-search { padding: 25px; border: 1px solid #d9e6f6; border-radius: 22px; background: linear-gradient(120deg,#eef5ff,#f8fbff); }
.profession-search label { display: block; margin-bottom: 12px; color: #1d3461; font-size: 13px; font-weight: 700; }
.profession-search-field { display: flex; align-items: center; gap: 13px; padding: 7px 7px 7px 17px; border: 1px solid #cbdcf2; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px #1d346105; }
.profession-search-field:focus-within { border-color: #347bdf; box-shadow: 0 0 0 3px #347bdf13; }
.profession-search-field>svg { width: 22px; height: 22px; flex: 0 0 auto; color: #347bdf; }
.profession-search input { width: 100%; min-width: 0; padding: 12px 0; border: 0; outline: none; background: transparent; color: #1d3461; font: inherit; font-size: 15px; }
.profession-search input::placeholder { color: #8b9bb0; font-size: 13px; }
.profession-entry { position: relative; display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.profession-entry input { flex: 1; }
.profession-clear,.profession-toggle { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; color: #7890ad; background: transparent; cursor: pointer; transition: background .2s,color .2s; }
.profession-clear[hidden],.profession-options[hidden],.catalog-freshness[hidden] { display: none; }
.profession-clear:hover,.profession-toggle:hover { color: #2167d7; background: #edf4ff; }
.profession-clear svg,.profession-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profession-toggle svg { transition: transform .2s; }
.profession-toggle[aria-expanded="true"] { color: #2167d7; background: #edf4ff; }
.profession-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.profession-options { position: absolute; z-index: 30; top: calc(100% + 14px); left: -12px; width: min(100% + 12px,580px); max-height: 304px; overflow-y: auto; overscroll-behavior: contain; padding: 7px; border: 1px solid #d9e6f6; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px #1d346118,0 3px 8px #1d346108; scrollbar-width: thin; scrollbar-color: #cfdef1 transparent; animation: role-list-in .18s ease-out; }
.profession-options [role="option"] { padding: 13px 14px; border-radius: 10px; color: #27446c; font-size: 14px; line-height: 1.4; cursor: pointer; }
.profession-options [role="option"]:hover,.profession-options [aria-selected="true"] { color: #2167d7; background: #eef5ff; }
@keyframes role-list-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion:reduce) { .profession-options { animation: none; } }
.profession-search-field .button { flex: 0 0 auto; min-height: 48px; padding: 13px 21px; border-radius: 10px; font-size: 12px; }
.profession-search p { margin-top: 12px; color: #70839e; font-size: 11px; }
.profession-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 16px 0 25px; }
.profession-shortcuts + .profession-search { margin-bottom: 20px; }
.results-progress { display: block; padding-top: 9px; color: #347bdf; font-size: 19px; font-weight: 700; line-height: 1.4; }
.vacancy-skeleton { min-height: 415px; padding: 27px 24px; border: 1px solid #dce6f2; border-radius: 20px; background: #fff; }
.vacancy-skeleton>i,.vacancy-skeleton>span,.vacancy-skeleton>p,.vacancy-skeleton>div { display: block; height: 15px; margin-bottom: 12px; border-radius: 8px; background: linear-gradient(100deg,#edf3fb 20%,#f8fbff 45%,#edf3fb 70%); background-size: 240% 100%; animation: showcase-shimmer 1.8s ease-in-out infinite; }
.vacancy-skeleton>i:first-child { width: 85%; height: 23px; }.vacancy-skeleton>i:nth-child(2) { width: 60%; height: 23px; }
.vacancy-skeleton>span { width: 55%; height: 29px; margin-block: 32px; }
.vacancy-skeleton>p { width: 95%; }.vacancy-skeleton>p:nth-last-child(2) { width: 75%; }
.vacancy-skeleton>div { height: 42px; margin-top: 63px; }
@keyframes showcase-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.dialog-section-title { margin-top: 23px; font-size: 16px; color: #1d3461; }
.dialog-task-list { padding-left: 20px; margin: 10px 0 18px; color: #59718f; font-size: 13px; line-height: 1.8; }
.dialog-task-list li+li { margin-top: 5px; }
#job-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
#job-dialog .dialog-top { flex-shrink: 0; justify-content: flex-end; margin-bottom: 8px; }
#job-dialog .close-dialog:focus-visible { outline: 2px solid #347bdf; outline-offset: 3px; }
#job-dialog-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 10px; margin-right: -6px; scrollbar-width: thin; scrollbar-color: #b7cae3 transparent; scrollbar-gutter: stable; }
#job-dialog-content::-webkit-scrollbar { width: 6px; height: 6px; }
#job-dialog-content::-webkit-scrollbar-track { background: transparent; }
#job-dialog-content::-webkit-scrollbar-thumb { border: 1px solid var(--paper); border-radius: 999px; background: #b7cae3; }
#job-dialog-content::-webkit-scrollbar-thumb:hover { background: #8eaed5; }
#job-dialog-content::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
#job-dialog-content::-webkit-scrollbar-corner { background: transparent; }
@supports selector(::-webkit-scrollbar) { #job-dialog-content { scrollbar-width: auto; scrollbar-color: auto; } }
#job-dialog>.button { flex-shrink: 0; justify-content: center; gap: 10px; margin-top: 18px; }
.profession-shortcuts>span { margin-right: 3px; color: #7c8fa6; font-size: 11px; }
.profession-shortcuts button { padding: 9px 12px; border: 1px solid #dce6f2; border-radius: 10px; background: #fff; color: #405a7c; font: inherit; font-size: 11px; transition: background .2s, color .2s, border-color .2s; }
.profession-shortcuts button:hover { border-color: #92b7e5; }
.profession-shortcuts button[aria-pressed="true"] { color: #fff; background: #2167d7; border-color: #2167d7; }
.results-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-height: 78px; padding-bottom: 12px; margin-bottom: 18px; color: #1d3461; }
.results-summary[hidden] { display: none; }
.results-label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; }
.results-count { font-size: 13px; color: #7487a0; }
.results-count strong { margin-right: 6px; color: #1d3461; font-size: 42px; line-height: 1.15; letter-spacing: -.05em; font-weight: 800; }
.results-scope { padding-bottom: 6px; color: #7387a0; font-size: 11px; }
.catalog-freshness { color: #7b8fa8; font-size: 10px; line-height: 1.7; margin: 0 0 20px; }
.vacancies-v2 button:focus-visible, .vacancies-v2 a:focus-visible { outline: 2px solid #287bd5; outline-offset: 3px; }
.vacancies-v2 .jobs-grid.jobs-grid--empty { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.vacancies-v2 .jobs-grid.jobs-grid--invalid { grid-template-columns: 1fr; }
.vacancy-empty { min-height: 265px; }
.vacancy-empty .vacancy-retry { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.vacancy-empty .vacancy-retry svg { width: 17px; height: 17px; }
.vacancies-v2 .jobs-grid.jobs-grid--few { grid-template-columns: repeat(2,minmax(0,1fr)); }
.vacancy-source-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vacancy-empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px; border-radius: 20px; background: #fff; }
.vacancy-empty>span { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 16px; background: #edf4ff; color: #347bdf; }
.vacancy-empty svg { width: 26px; height: 26px; }
.vacancy-empty h3 { font-size: 28px; line-height: 1.3; letter-spacing: -.04em; }
.vacancy-empty p { margin-top: 14px; max-width: 390px; color: #7487a0; font-size: 13px; line-height: 1.8; }
.vacancy-retry { margin-top: 20px; padding: 12px 18px; border: 1px solid #cadaef; border-radius: 10px; color: #2167d7; background: #edf4ff; font: inherit; font-size: 12px; }
.vacancies-v2 .jobs-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 17px; border: 1px solid #e2eaf5; border-radius: 25px; background: #f0f5fb; }
.vacancies-v2 .vacancy-card { min-width: 0; min-height: 415px; padding: 24px 23px 21px; border: 1px solid #dce6f2; border-radius: 20px; background: #fff; box-shadow: 0 2px 6px #12265006; animation: none; }
.vacancies-v2 .vacancy-card:hover { transform: none; border-color: #b8cee9; box-shadow: 0 6px 19px #1d34610c; }
.vacancy-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 17px; }
.vacancies-v2 .vacancy-heading h3 { min-height: 52px; max-width: none; margin: 0; color: #1d3461; font-size: 18px; line-height: 1.45; letter-spacing: -.035em; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vacancy-favorite { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin: -6px -8px 0 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #7086a3; }
.vacancy-favorite svg { width: 21px; height: 21px; stroke-width: 1.6; }
.vacancy-favorite:hover { background: #f1f6fc; }
.vacancy-favorite[aria-pressed="true"] { color: #e74c5e; background: #fff4f5; }
.vacancy-favorite[aria-pressed="true"] svg { fill: #e74c5e; }
.vacancy-salary { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; row-gap: 1px; min-height: 33px; margin-bottom: 12px; color: #1d3461; font-size: 21px; font-weight: 800; letter-spacing: -.035em; line-height: 1.4; }
.vacancy-salary>span { font-size: 12px; font-weight: 400; color: #6c819b; letter-spacing: 0; white-space: nowrap; }
.vacancy-salary--unknown { align-items: center; font-size: 14px; font-weight: 500; color: #657b99; letter-spacing: 0; }
.vacancy-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }
.vacancy-meta>span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 7px; border-radius: 7px; color: #526c8d; background: #f1f5fc; font-size: 10px; line-height: 1.5; }
.vacancy-meta svg { width: 12px; height: 12px; flex-shrink: 0; }
.vacancy-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 64px; margin-bottom: 15px; color: #59718f; font-size: 12px; line-height: 1.8; }
.vacancy-skills { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 0 0 19px; }
.vacancy-skills>li { max-width: 100%; padding: 4px 7px; border: 1px solid #dce6f2; border-radius: 7px; background: #fff; color: #35577f; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.vacancy-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 13px; border-top: 1px solid #e0e9f5; }
.vacancy-source { display: flex; min-width: 0; max-width: 70%; align-items: center; gap: 8px; font-size: 10px; color: #526c8d; }
.vacancy-source-mark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #dce6f2; border-radius: 8px; color: #2f6197; font-weight: 800; font-size: 12px; background: linear-gradient(140deg,#fff,#c6e1f3); }
.vacancy-source-mark[data-tone="1"] { background: linear-gradient(140deg,#fff,#d0e6df); }
.vacancy-source-mark[data-tone="2"] { background: linear-gradient(140deg,#fff,#f0e0c7); }
.vacancy-example { font-size: 8px; color: #8b9bb0; white-space: nowrap; }
.vacancies-v2 .vacancy-details { justify-content: center; width: 100%; min-height: 44px; padding: 11px; margin-top: 14px; border: 1px solid #cbdcf3; border-radius: 11px; background: #ebf5ff; color: #244975; font-size: 12px; font-weight: 700; gap: 10px; }
.vacancies-v2 .vacancy-details:hover { background: #deeeff; border-color: #a9c7e9; }
.vacancies-v2 .vacancy-cta { position: relative; justify-content: flex-start; min-height: 415px; padding: 27px 27px 24px; border: 1px solid #2460c0; border-radius: 20px; background: radial-gradient(ellipse at 100% 0%,#4b95f8b3,transparent 70%),linear-gradient(150deg,#286bd0,#174497); color: #fff; box-shadow: inset 0 1px 0 #ffffff24; animation: none; }
.vacancies-v2 .vacancy-cta:hover { transform: none; border-color: #508ceb; box-shadow: 0 9px 26px #17449725, inset 0 1px 0 #ffffff30; }
.vacancies-v2 .vacancy-cta::before { content: ''; position: absolute; width: 235px; height: 235px; right: -120px; top: -120px; border: 1px solid #ffffff25; border-radius: 50%; pointer-events: none; }
.vacancies-v2 .vacancy-cta::after { content: ''; position: absolute; width: 310px; height: 310px; right: -158px; top: -158px; border: 1px solid #ffffff12; border-radius: 50%; pointer-events: none; }
.vacancy-cta-art { position: relative; display: block; flex-shrink: 0; height: 89px; margin-bottom: 20px; }
.vacancy-cta-plane { position: absolute; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; left: 0; top: 7px; border: 1px solid #ffe78d; border-radius: 20px; background: linear-gradient(145deg,#fff1a5,#ffce37 80%); color: #1e51a1; box-shadow: 0 12px 21px #123b8729,inset 0 1px 0 #fff7d2; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.vacancy-cta-plane svg { width: 35px; height: 35px; }
.vacancy-cta-paper { position: absolute; display: block; width: 83px; height: 50px; border: 1px solid #ffffff59; border-radius: 10px; background: #ffffff22; box-shadow: 0 6px 16px #0d388514; }
.paper-back { top: 0; left: 47px; transform: rotate(-8deg); }
.paper-front { top: 27px; left: 56px; padding: 12px 13px 8px 28px; transform: rotate(8deg); background: #dceaffeb; }
.paper-front i { display: block; height: 3px; margin-bottom: 5px; border-radius: 5px; background: #88aede; }
.paper-front i:last-child { width: 60%; background: #b0c9e9; }
.vacancy-cta-trial { position: absolute; right: 0; top: 59px; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #e1efff; }
.vacancy-cta-trial svg { width: 12px; height: 12px; color: #ffda51; }
.vacancies-v2 .vacancy-cta h3 { position: relative; color: #fff; font-size: 33px; min-height: 0; line-height: 1.08; margin-bottom: 16px; letter-spacing: -.05em; }
.vacancies-v2 .vacancy-cta p { position: relative; max-width: 270px; color: #d5e6ff; font-size: 12px; line-height: 1.8; margin-bottom: 25px; }
.vacancy-cta-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 47px; margin-top: auto; border: 1px solid #ffdf6b; border-radius: 11px; background: #ffda51; color: #173f82; font-size: 12px; font-weight: 800; box-shadow: 0 6px 14px #0e33761f, inset 0 1px 0 #fff0a5; transition: background .2s; }
.vacancy-cta-button svg { width: 18px; height: 18px; transition: transform .3s; }
.vacancy-cta:hover .vacancy-cta-button { background: #ffe477; }
@media (hover: hover) { .vacancy-cta:hover .vacancy-cta-plane { transform: translate(3px,-3px); } .vacancy-cta:hover .vacancy-cta-button svg { transform: translateX(3px); } }
@media (max-width: 1150px) {
 .vacancies-v2 .jobs-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .vacancies-v2 .vacancy-heading h3 { font-size: 20px; min-height: 56px; }
 .vacancy-description { font-size: 13px; min-height: 70px; }
}
@media (max-width: 800px) {
 .vacancies-v2 .vacancy-card { padding: 21px 19px; }
 .vacancies-v2 .vacancy-heading h3 { font-size: 18px; }
 .vacancy-salary { font-size: 20px; }
 .vacancy-salary--unknown { font-size: 14px; }
 .vacancy-example { font-size: 7px; }
}
@media (max-width: 680px) {
 .vacancies-v2 .section-heading { margin-bottom: 22px; }
 .vacancies-v2 .jobs-grid { grid-template-columns: 1fr; padding: 9px; gap: 11px; border-radius: 23px; }
 .vacancies-v2 .vacancy-card { min-height: 0; padding: 24px 20px 21px; border-radius: 19px; }
 .vacancies-v2 .vacancy-heading h3 { min-height: 0; font-size: 19px; }
 .vacancy-heading { margin-bottom: 17px; }
 .vacancy-salary { font-size: 22px; }
 .vacancy-salary--unknown { font-size: 14px; }
 .vacancy-description { font-size: 13px; min-height: 0; }
 .vacancy-skills { margin-bottom: 20px; }
 .vacancy-meta>span, .vacancy-skills>li { font-size: 10px; }
 .vacancy-example { font-size: 8px; }
 .vacancies-v2 .vacancy-cta { min-height: 410px; padding: 26px 24px; }
}
@media (max-width: 360px) {
 .vacancies-v2 .vacancy-card { padding-inline: 17px; }
 .vacancies-v2 .vacancy-heading h3 { font-size: 18px; }
 .vacancy-salary { font-size: 20px; }
 .vacancy-salary--unknown { font-size: 13px; }
 .vacancy-footer { flex-wrap: wrap; }
 .vacancies-v2 .vacancy-cta { padding-inline: 20px; }
 .vacancy-cta-trial { font-size: 8px; }
 .vacancy-cta-paper { width: 72px; }
 .paper-back { left: 42px; }
 .paper-front { left: 48px; }
}
.vacancies-v2 .jobs-grid.jobs-grid--fallback { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) { .vacancy-cta:hover .vacancy-cta-plane, .vacancy-cta:hover .vacancy-cta-button svg { transform: none; } }
@media (prefers-reduced-motion: reduce) { .vacancy-skeleton>* { animation: none; } }

@media (max-width:680px) {
 .profession-search { padding: 17px; border-radius: 18px; }
 .profession-search-field { flex-wrap: wrap; gap: 0; padding: 7px; }
 .profession-search-field>svg { display: none; }
 .profession-entry { flex: 1 0 100%; }
 .profession-search input { padding: 12px 8px; font-size: 16px; }
 .profession-options { left: -1px; width: calc(100% + 2px); top: calc(100% + 7px); }
 .profession-search input::placeholder { font-size: 11px; }
 .profession-search-field .button { width: 100%; min-height: 46px; margin-top: 5px; }
 .profession-search p { font-size: 10px; line-height: 1.7; }
 .profession-shortcuts { gap: 7px; padding-bottom: 18px; }
 .profession-shortcuts>span { flex-basis: 100%; }
 .profession-shortcuts button { min-height: 40px; padding: 8px 10px; font-size: 10px; }
 .results-summary { align-items: flex-start; flex-direction: column; gap: 7px; }
 .results-count strong { font-size: 38px; }
 .results-scope { font-size: 10px; }
 .catalog-freshness { font-size: 9px; }
 .vacancies-v2 .jobs-grid.jobs-grid--empty, .vacancies-v2 .jobs-grid.jobs-grid--few { grid-template-columns: 1fr; }
 .vacancy-empty { padding: 28px; min-height: 260px; }
 .vacancy-empty h3 { font-size: 25px; }
}
