@font-face { font-family: "Roboto"; src: url("/__catalog/assets/Roboto-Variable.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { color-scheme: light; font-family: Roboto, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #171717; background: #f9fafb; --line: #cfd8e3; --muted: #697282; --link: #1769c2; --selection: #eaf3ff; --primary: #1878ed; --line-hover: #b6c4d5; --icon-muted: #b3bcc8; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; font-size: 14px; line-height: 20px; }
button, summary { font: inherit; }
.outline-icon { display: block; width: 18px; height: 18px; flex: none; color: var(--icon-muted); }
a { color: var(--link); text-decoration: none; overflow-wrap: anywhere; }
a:hover { text-decoration: underline; }
a:focus-visible, summary:focus-visible { outline: 2px solid #1878ed; outline-offset: 3px; }
:root { --sidebar-width: 283.2px; --sidebar-space: clamp(80px, calc(100vw - 1032px), 283.2px); }
.desktop-rail { position: fixed; z-index: 92; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 20px 12px 16px; background: #fff; border-right: 1px solid #e7ebf1; transition: width 180ms ease; }
.rail-content { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.rail-head { width: min(100%, 208px); margin: 0 auto; display: grid; gap: 8px; }
.rail-logo { display: flex; justify-content: center; align-items: center; min-height: 45px; }
.rail-logo img { display: block; object-fit: contain; }
.rail-symbol { display: none !important; }
.rail-role { height: 330px; display: grid; grid-template-rows: 84px minmax(0, 1fr) 38px; justify-items: center; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; color: #171717; background: #fff; }
.rail-role-employer { height: 290px; }
.rail-role:hover { border-color: var(--line-hover); text-decoration: none; }
.rail-role-icon { display: block; width: 84px; height: 84px; object-fit: contain; }
.rail-role-copy { display: grid; align-content: start; align-self: center; justify-self: stretch; gap: 4px; }
.rail-role-copy strong { font-size: 14px; line-height: 18px; font-weight: 500; }
.rail-role-caption { font-size: 12px; line-height: 16px; color: var(--muted); }
.rail-role-benefits { display: grid; gap: 4px; font-size: 13px; line-height: 17px; color: var(--muted); }
.rail-role-benefits > span { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 2px; }
.rail-role-benefits > span::before { content: "-"; }
.rail-role-cta { width: 100%; display: grid; place-items: center; border-radius: 10px; background: #f2f4f7; font-size: 13px; line-height: 16px; font-weight: 500; }
.rail-role:hover .rail-role-cta { background: #e9edf3; }
.rail-download { width: 246.4px; align-self: center; flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding: 14px 4px 0; border-top: 1px solid #eff1f4; }
.rail-download img { display: block; width: 100%; height: auto; }
.page-shell { margin-left: var(--sidebar-space); padding: 28px 24px 32px; }
.catalog-header { max-width: 984px; margin: 0 auto 28px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; color: #ff4646; font-size: 24px; font-weight: 700; }
.brand img { display: block; object-fit: contain; }
.city-picker { position: relative; margin-left: auto; color: var(--muted); }
.city-picker summary { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #171717; cursor: pointer; list-style: none; }
.city-picker summary::-webkit-details-marker { display: none; }
.city-picker summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.city-picker[open] summary { border-color: #c8ddfa; background: var(--selection); }
.city-picker nav { position: absolute; z-index: 10; right: 0; top: 100%; min-width: 210px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.city-option { display: block; padding: 9px 12px; border-radius: 8px; color: #4d535d; }
.city-option:hover, .city-option[aria-current] { background: var(--selection); color: var(--link); text-decoration: none; }
.rail-city { margin: -6px 0 0; }
.rail-city summary { min-height: 24px; padding: 0 7px; border: 0; background: transparent; font-size: 13px; line-height: 17px; color: var(--muted); justify-content: flex-start; gap: 6px; }
.rail-city nav { left: 0; right: auto; min-width: 195px; }
.mobile-categories { display: none; }
.layout { max-width: 984px; margin: auto; display: grid; grid-template-columns: minmax(0, 640px) 320px; gap: 24px; align-items: start; }
main { min-width: 0; }
h1 { font-size: 28px; line-height: 32px; letter-spacing: -.3px; margin: 0 0 20px; font-weight: 600; overflow-wrap: anywhere; }
.vacancy-list { display: grid; gap: 12px; }
.b-vacancy-item { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; column-gap: 20px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: none; transition: border-color 160ms ease; }
.b-vacancy-item:hover { border-color: var(--line-hover); }
.wrap-logo { grid-column: 1; grid-row: 1 / 3; width: 80px; height: 80px; }
.wrap-logo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.logo-placeholder { background: #f9fafb; border-radius: 50%; }
.vacancy-content { min-width: 0; }
.title { font-size: 16px; line-height: 20px; font-weight: 600; }
.title a { color: #171717; }
.title a:hover { color: var(--link); }
.celery { font-size: 20px; line-height: 24px; font-weight: 500; margin: 8px 0; color: #ff3036; overflow-wrap: anywhere; }
.brend { display: inline-block; color: #171717; margin: 0 0 10px; }
.addresses { padding: 0; list-style: none; margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 18px; }
.address { display: flex; align-items: start; gap: 6px; }
.address .outline-icon { width: 14px; height: 14px; margin-top: 2px; }
.address + .address { margin-top: 4px; }
.vacancy-metro { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 18px; }
.metro-station { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; overflow-wrap: anywhere; }
.metro-mark { position: relative; display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 999px; background: var(--metro-color); align-self: flex-start; margin-top: 2px; }
.metro-mark::before { content: attr(data-label); position: absolute; left: 50%; top: 50%; color: #fff; font-size: 9px; font-weight: 700; line-height: 1; transform: translate(-50%, -47%); }
.metro-mark.transport-mcd, .metro-mark.transport-mcc { width: auto; min-width: 18px; padding: 0 1px; border-radius: 3px; }
.metro-mark.transport-mcd::before, .metro-mark.transport-mcc::before { position: static; display: block; font-size: 8px; line-height: 14px; text-align: center; transform: none; }
.prop { font-size: 13px; line-height: 18px; color: var(--muted); border-collapse: collapse; }
.prop tbody { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.prop tr { display: flex; gap: 6px; }
.prop td { padding: 0; vertical-align: top; }
.time { grid-column: 2; color: var(--muted); font-size: 12px; line-height: 16px; margin-top: 8px; }
.b-category-list { position: sticky; top: 28px; max-height: calc(100dvh - 56px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d5dbe3 transparent; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px; scroll-margin-top: 28px; box-shadow: none; }
.b-category-list:focus { outline: none; }
.all-vacancies { min-height: 42px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #171717; border-radius: 9px; font-weight: 500; }
.all-vacancies:hover { background: #f1f6ff; text-decoration: none; }
.b-category-list-category { border-top: 1px solid #edf0f4; margin-top: 10px; padding-top: 10px; }
.b-category-list-category-title { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; margin: 0; padding: 10px 12px; }
.b-category-list-category-title .outline-icon, .all-vacancies .outline-icon { width: 18px; height: 18px; }
.b-category-list ul { list-style: none; padding: 0; margin: 4px 0 0; }
.b-category-list li { position: relative; }
.category-link { display: block; padding: 10px 48px 10px 12px; min-height: 40px; border-radius: 9px; color: #171717; line-height: 20px; }
.category-link:hover, .category-link[aria-current] { background: var(--selection); color: var(--link); text-decoration: none; }
.category-link[aria-current] { font-weight: 500; }
.vacancy-count { position: absolute; right: 12px; top: 10px; font-size: 12px; color: var(--muted); pointer-events: none; }
.pagination { padding: 20px 0; }
.pagination:empty { display: none; }
.catalog-more-result { display: block; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; text-align: center; font-weight: 500; }
.catalog-more-result:hover { background: var(--selection); border-color: #c8ddfa; text-decoration: none; }
.specialization-description { color: var(--muted); font-size: 14px; line-height: 22px; }
.specialization-description:not(:empty) { margin-top: 8px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.specialization-description h2 { color: #171717; font-size: 20px; line-height: 25px; font-weight: 700; }
.b-footer { display: none; max-width: 984px; margin: 32px auto 0; padding: 18px 0 34px; border-top: 1px solid #e5e8ee; color: #626a75; }
.desktop-site-footer-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.b-footer a { color: #6b7280; text-decoration: none; transition: color 160ms ease; }
.b-footer a:hover { color: #4b5563; }
.b-footer a.desktop-site-footer-logo { display: inline-block; color: #616a75; font-size: 22px; line-height: 1; font-weight: 900; letter-spacing: 0; }
.desktop-site-footer-brand p { margin: 10px 0 0; font-size: 13px; line-height: 20px; font-weight: 400; }
.desktop-site-footer-col { display: grid; align-content: start; gap: 9px; min-width: 0; font-size: 13px; line-height: 17px; font-weight: 400; }
.snapshot { max-width: 984px; margin: 0 auto; color: var(--muted); font-size: 12px; }
.header-inner { max-width: 1400px; margin: auto; padding: 24px; display: flex; align-items: center; gap: 24px; }
.audit { max-width: 1400px; margin: 24px auto; padding: 0 24px; }
.warning { border-left: 3px solid #ff4646; padding: 8px 12px; }
.table-scroll { overflow-x: auto; }
.audit table { border-collapse: collapse; width: 100%; font-size: 13px; }
.audit th, .audit td { text-align: left; border-bottom: 1px solid var(--line); padding: 10px 12px; vertical-align: top; }
.audit th { background: #eaf3ff; }
/* Match the app's initial compact breakpoint; this SSR preview needs no JS. */
@media (min-width: 900px) {
  .catalog-header { display: none; }
  .b-footer { display: block; }
}
@media (min-width: 900px) and (max-width: 1319px) {
  .desktop-rail { width: 80px; }
  .desktop-rail:is(:hover, :has(:focus-visible)) { width: var(--sidebar-width); }
  .desktop-rail:not(:hover):not(:has(:focus-visible)) .rail-head { width: 100%; gap: 8px; }
  .desktop-rail:not(:hover):not(:has(:focus-visible)) :is(.rail-wordmark, .rail-city, .rail-role-copy, .rail-role-cta, .rail-download) { display: none; }
  .desktop-rail:not(:hover):not(:has(:focus-visible)) .rail-symbol { display: block !important; }
  .desktop-rail:not(:hover):not(:has(:focus-visible)) .rail-role { width: 52px; height: 52px; min-height: 52px; grid-template-rows: auto; align-items: center; gap: 0; padding: 0; border: 0; justify-self: center; }
  .desktop-rail:not(:hover):not(:has(:focus-visible)) .rail-role-icon { width: 40px; height: 40px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .page-shell { padding-right: 24px; padding-left: 24px; }
  h1 { font-size: 25px; line-height: 29px; }
  .layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
  .b-category-list { padding: 12px; }
  .b-vacancy-item { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; padding: 18px; }
  .wrap-logo { width: 64px; height: 64px; }
}
@media (max-width: 899px) {
  .desktop-rail { display: none; }
  .page-shell { margin: 0; padding: 20px; }
  .catalog-header { flex-wrap: wrap; gap: 8px 20px; margin-bottom: 24px; }
  .brand img { width: 146px; height: 32px; }
  .city-picker { font-size: 13px; }
  .mobile-categories { display: block; width: 100%; font-size: 13px; padding-top: 8px; }
  .layout { display: flex; flex-direction: column; gap: 28px; }
  .results, .b-category-list { width: 100%; }
  .b-category-list { position: static; max-height: none; }
  h1 { font-size: 22px; line-height: 28px; }
  .b-vacancy-item { grid-template-columns: minmax(0, 1fr) 56px; gap: 0 12px; padding: 18px; }
  .wrap-logo { grid-column: 2; grid-row: 1; width: 56px; height: 56px; }
  .vacancy-content { grid-column: 1; grid-row: 1; }
  .time { grid-column: 1 / -1; }
  .prop tbody { display: table-row-group; }
  .prop tr { display: table-row; }
  .prop td { padding-right: 8px; }
  .celery { font-size: 18px; line-height: 24px; }
}
@media (max-width: 359px) { .page-shell { padding: 14px; } .catalog-header { gap: 4px 10px; } .brand img { width: 126px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.native-catalog-total{color:var(--muted);margin:8px 0 20px}.native-catalog-back{display:inline-block;margin:0 0 8px}.native-catalog-description{white-space:pre-wrap;margin-top:24px;line-height:1.6}.pagination{display:flex;align-items:center;justify-content:center;gap:24px}.pagination a{padding:12px}.logo-placeholder{display:grid;place-items:center;color:var(--muted);font-size:20px;font-weight:500}h1{letter-spacing:0}