.category-button { display:grid; width:100%; min-height:94px; grid-template-columns:24px minmax(0,1fr) 33px; align-items:center; column-gap:12px; padding:0 16px 0 20px; border:1px solid var(--line); border-radius:18px; color:#1d1d1f; background:#fff; box-shadow:0 7px 18px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04); text-align:left; font-size:18px; font-weight:600; letter-spacing:-.1px; transition:transform 120ms ease,box-shadow 120ms ease; -webkit-tap-highlight-color:transparent; }
.category-button__main { display:contents; }
.category-button__icon { grid-column:1; }
.category-button__copy { display:grid; min-width:0; grid-column:2; gap:4px; }
.category-button__subtitle { color:#5f5f5f; font-size:14px; font-weight:400; letter-spacing:0; line-height:1.25; }
.category-button__icon { display:grid; width:24px; height:24px; flex:0 0 24px; place-items:center; }
.category-button__icon svg { width:28px; height:28px; fill:none; stroke:#F97316; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.category-button__arrow,.vacancy-card__arrow { display:grid; width:33px; height:33px; place-items:center; border:1px solid rgba(0,0,0,.10); border-radius:50%; color:#F97316; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.06); line-height:1; transition:transform 120ms ease; }
.category-button__arrow { grid-column:3; }
.category-button__arrow svg,.vacancy-card__arrow svg { display:block; width:22px; height:22px; }
.text-button span { color:var(--orange); font-size:1.25rem; }
.vacancies-content { position:relative; padding-top:28px; }
/* This is deliberately limited to the root catalog. SEO collections keep
   their established bottom spacing. The shared footer owns the catalog gap. */
body.app-has-footer.app-has-bottom-nav .vacancies-screen:not(.vacancy-collection-screen) > .screen-content.vacancies-content { padding-bottom:0; }
.vacancies-hero { position:relative; z-index:0; isolation:isolate; }
.vacancies-badge { display:inline-flex; width:max-content; align-items:center; margin:0 0 14px; padding:6px 12px; border-radius:7px; color:#fff; background:#F97316; font-size:12px; font-weight:600; letter-spacing:.5px; line-height:1; }
.vacancies-content h1 { margin:0 0 8px; color:var(--text-primary); font-family:var(--font-sans); font-size:var(--font-size-page-title); font-weight:var(--font-weight-bold); letter-spacing:-.6px; line-height:var(--line-height-page-title); }
.vacancies-lead { margin:0; color:#4b4b4d; font-size:16px; font-weight:400; line-height:1.4; }
.vacancy-collection-intro { max-width:720px; margin:14px 0 0; color:#4b4b4d; font-size:16px; font-weight:400; line-height:1.55; }
.vacancy-collection-empty { display:grid; gap:16px; padding:20px; border:1px solid rgba(249,115,22,.16); border-radius:20px; background:#fff5eb; box-shadow:0 5px 14px rgba(0,0,0,.045); }
.vacancy-collection-empty p { margin:0; color:var(--text-secondary); font-size:16px; line-height:1.5; }
.vacancy-collection-empty .button { justify-self:start; }
.vacancies-info-row { display:flex; align-items:baseline; justify-content:flex-start; margin-top:14px; color:var(--text-muted); font-size:13px; font-weight:400; line-height:1.35; }
.vacancies-info-row p { margin:0; }
.vacancies-info-row strong { color:#2e2e30; font-weight:600; }
.vacancy-filters { display:grid; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:18px 0 23px; padding:0; border:0; border-radius:0; background:transparent; }
.vacancy-filter { display:flex; min-width:0; min-height:42px; align-items:center; justify-content:center; padding:5px 1px; border:1px solid rgba(17,17,17,.08); border-radius:14px; color:#252527; background:rgba(255,255,255,.96); box-shadow:0 6px 16px rgba(17,17,17,.08),0 2px 5px rgba(17,17,17,.04); font:inherit; font-size:14.5px; font-weight:500; letter-spacing:-.3px; line-height:1; white-space:nowrap; cursor:pointer; transition:background 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease,transform 160ms ease; -webkit-tap-highlight-color:transparent; }
.vacancy-filter.is-active { border-color:rgba(249,115,22,.50); color:#F97316; background:rgba(249,115,22,.11); box-shadow:0 7px 18px rgba(249,115,22,.14),0 2px 5px rgba(17,17,17,.04); }
.vacancy-filter:active { transform:translateY(1px); background:rgba(249,115,22,.08); }
.vacancy-filter:focus-visible { outline:3px solid rgba(249,115,22,.28); outline-offset:2px; }
.vacancy-list { width:100%; min-width:0; max-width:100%; gap:14px; }
.vacancy-card { position:relative; display:block; width:100%; min-width:0; max-width:100%; padding:20px 10px 20px 20px; border:1px solid var(--line); border-radius:18px; box-sizing:border-box; color:#1d1d1f; background:#fff; box-shadow:0 7px 18px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04); text-align:left; text-decoration:none; font-family:inherit; cursor:pointer; transition:transform 120ms ease,box-shadow 120ms ease; -webkit-tap-highlight-color:transparent; }
.category-button:active,.vacancy-card:active { transform:scale(.99); }
.category-button:active { box-shadow:0 5px 14px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.03); }
.category-button:active .category-button__arrow { transform:translateX(1px); }
.vacancy-card__content { display:block; min-width:0; max-width:100%; padding-right:36px; box-sizing:border-box; }
.vacancy-title-row { display:grid; min-width:0; grid-template-columns:minmax(0,1fr); }
.vacancy-title { display:block; min-width:0; overflow-wrap:anywhere; color:#1d1d1f; font-size:20px; font-weight:700; letter-spacing:-.25px; line-height:1.25; }
.vacancy-meta-list { display:grid; min-width:0; gap:9px; margin-top:22px; padding-bottom:0; box-sizing:border-box; }
.vacancy-meta { display:grid; min-width:0; grid-template-columns:20px minmax(0,1fr); align-items:start; column-gap:9px; color:#3a3a3c; font-size:16px; font-weight:400; line-height:1.35; }
.vacancy-meta>span:last-child { min-width:0; }
.vacancy-meta__label { color:#2e2e30; font-weight:600; }
.vacancy-rate { min-width:0; }
.vacancy-rate__label { color:#2e2e30; font-weight:600; }
.vacancy-rate__amount { color:#F97316; font-weight:600; white-space:nowrap; }
.vacancy-rate__netto { color:#3a3a3c; font-weight:400; white-space:nowrap; }
.vacancy-meta svg,.vacancy-meta__icon-spacer { width:20px; height:20px; flex:0 0 20px; fill:none; stroke:#F97316; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.vacancy-meta--badge { display:inline-grid; width:max-content; max-width:100%; grid-template-columns:20px minmax(0,1fr); align-items:center; justify-self:start; column-gap:7px; padding:7px 10px; border-radius:999px; box-sizing:border-box; line-height:1.25; }
.vacancy-meta--badge svg { stroke:currentColor; }
.vacancy-meta--badge .vacancy-rate,.vacancy-meta__badge-value { color:#1d1d1f; font-size:16px; font-weight:600; }
.vacancy-meta--badge .vacancy-rate__amount,.vacancy-meta--badge .vacancy-rate__netto { color:inherit; font-weight:inherit; white-space:normal; }
.vacancy-meta--salary { color:#16A34A; background:rgba(22,163,74,.11); }
.vacancy-meta--housing { color:#F97316; background:rgba(249,115,22,.11); }
.vacancy-meta--audience { color:#6B7280; background:#F3F4F6; }
.vacancy-meta--urgency { margin-top:5px; }
.vacancy-meta__urgency-icon { display:grid; width:20px; height:20px; place-items:center; color:#EA580C; font-size:16px; line-height:1; }
.vacancy-urgency { color:#EA580C; font-size:16px; font-weight:600; line-height:1.35; }
.vacancy-meta--location .city-main { color:#2e2e30; font-weight:600; line-height:1.35; }
.vacancy-meta--location>span:last-child { width:100%; min-width:0; }
.vacancy-meta--location { margin-right:0; }
.city-note { display:block; color:#5f5f5f; font-size:15px; font-weight:400; line-height:1.35; white-space:nowrap; }
.vacancy-card__arrow { position:absolute; top:50%; right:16px; bottom:auto; width:20px; height:20px; border:0; border-radius:0; color:#F97316; background:transparent; box-shadow:none; transform:translateY(-50%); transition:none; }
.vacancy-card__arrow svg { width:20px; height:20px; }
.vacancy-card__chevron { display:block; width:20px; height:20px; color:#F97316; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.vacancy-card:active { transform:scale(.99); box-shadow:0 5px 14px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.03); }
.vacancy-card:active .vacancy-card__arrow { transform:translateY(-50%); }
.vacancy-card:focus-visible { outline:3px solid rgba(249,115,22,.35); outline-offset:2px; }
.vacancy-salary,.modal-salary { color:var(--orange); font-weight:600; }
.vacancy-telegram-cta { display:grid; gap:12px; margin-top:16px; }
.vacancy-telegram-cta--empty { margin-top:0; }
.vacancy-telegram-cta__info { display:grid; justify-items:center; gap:10px; padding:22px 18px; border:1px solid rgba(249,115,22,.14); border-radius:20px; background:#fffaf6; text-align:center; }
.vacancy-telegram-cta__bell { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; color:#f97316; background:rgba(249,115,22,.1); }
.vacancy-telegram-cta__bell svg { display:block; width:23px; height:23px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.vacancy-telegram-cta__copy { display:grid; gap:10px; }
.vacancy-telegram-cta__copy h3 { margin:0; color:var(--text-primary); font-family:var(--font-sans); font-size:20px; font-weight:700; line-height:1.2; text-align:center; }
.vacancy-telegram-cta__copy p { margin:0; color:#4b4b51; font-family:var(--font-sans); font-size:15px; font-weight:400; line-height:1.45; text-align:center; }
.vacancy-telegram-cta__card { width:100%; box-sizing:border-box; }
.vacancy-telegram-cta__card .contacts-card__copy strong { font-size:16px; }
.vacancy-telegram-cta__card .contacts-card__icon { color:#229ED9; background:rgba(34,158,217,.12); }
.vacancy-telegram-cta__card .contacts-card__icon svg { display:block; }
@media (min-width:360px) { .vacancy-filters { gap:8px; } .vacancy-filter { padding-inline:6px; letter-spacing:-.15px; } }
@media (max-width:359px) { .city-note { max-width:calc(100vw - 100px); white-space:normal; overflow-wrap:anywhere; } }
@media (hover:hover) { .vacancy-filter:hover { border-color:rgba(249,115,22,.28); box-shadow:0 7px 18px rgba(17,17,17,.08),0 2px 5px rgba(17,17,17,.04); } }