:root {
  --bg: #020607;
  --surface: #0a0f10;
  --surface-active: #121a1c;
  --ink: #f7f8f2;
  --muted: #9da39f;
  --line: rgba(231, 237, 232, 0.18);
  --line-strong: rgba(231, 237, 232, 0.32);
  --accent: #c8ff13;
  --accent-ink: #111700;
  --font: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --max-width: 1560px;
}

* { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font);
  text-rendering: geometricPrecision;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.careers-shell {
  width: min(100%, 1920px);
  min-height: 100svh;
  margin: 0 auto;
  padding: 22px 34px 32px;
}

.careers-nav,
.jobs-intro,
.jobs-workspace,
.apply-guide,
.careers-footer {
  width: min(100%, var(--max-width));
  margin-inline: auto;
}

.careers-nav {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.careers-brand { display: inline-flex; align-items: center; min-height: 40px; }
.brand-logo { display: none; }
.brand-logo-nova { display: block; width: 220px; height: auto; }
.brand-logo-voya, .brand-logo-nex { display: none; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; line-height: 1; }
.brand-logo-voya img, .brand-logo-nex img { display: block; width: 38px; height: 38px; border-radius: 5px; object-fit: cover; }
.brand-logo-voya { font-size: 22px; }
.brand-logo-voya > span { color: var(--ink); }
.brand-logo-nex { font-size: 29px; }

.nav-utilities { display: flex; align-items: center; gap: 24px; }
.nav-link { color: var(--muted); font-size: 14px; line-height: 1; }
.nav-link:hover, .nav-link:focus-visible { color: var(--ink); }

.theme-preview { position: relative; }
.theme-preview-toggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.theme-preview-toggle:hover,
.theme-preview-toggle:focus-visible,
.theme-preview-toggle[aria-expanded="true"] { color: var(--ink); border-color: var(--accent); }
.theme-preview-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.theme-preview-current { color: var(--accent); }
.theme-preview-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  right: 0;
  min-width: 138px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
}

.theme-preview-menu button {
  width: 100%;
  min-height: 32px;
  padding: 0 9px;
  color: var(--muted);
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
}

.theme-preview-menu button:hover,
.theme-preview-menu button:focus-visible,
.theme-preview-menu button.is-active { color: var(--accent-ink); background: var(--accent); outline: none; }

.language-switch {
  display: inline-flex;
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  overflow: hidden;
}

.language-switch button {
  min-width: 38px;
  padding: 0 10px;
  color: var(--muted);
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.language-switch button:last-child { border-right: 0; }
.language-switch button.is-active { color: var(--accent-ink); background: var(--accent); }

.jobs-intro { padding: 78px 0 42px; }
.kicker { margin: 0; color: var(--accent); font-size: 13px; font-weight: 750; line-height: 1.3; }
.jobs-intro h1 { max-width: 860px; margin: 18px 0 0; font-size: 62px; font-weight: 680; line-height: 1.05; letter-spacing: 0; }
.intro-copy { max-width: 600px; margin: 24px 0 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.intro-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; color: var(--muted); font-size: 13px; }
.status-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.data-mode { color: var(--accent); }

.jobs-workspace { border-top: 1px solid var(--line-strong); }
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0 0;
}
.category-filter:empty { display: none; }
.category-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}
.category-button:hover,
.category-button:focus-visible {
  color: var(--ink);
  border-color: var(--accent);
  outline: none;
}
.category-button.is-active {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent);
}
.category-count {
  min-width: 20px;
  padding: 3px 6px;
  border-radius: 999px;
  color: currentColor;
  background: color-mix(in srgb, currentColor 13%, transparent);
  font-size: 11px;
  text-align: center;
}
.jobs-toolbar { display: grid; grid-template-columns: minmax(250px, 1.8fr) repeat(2, minmax(130px, 0.7fr)) auto; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }

.search-control, .select-control, .clear-filters {
  height: 46px;
  display: flex;
  align-items: center;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: transparent;
}

.search-control { gap: 11px; padding: 0 14px; }
.search-control svg, .clear-filters svg, .row-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.search-control input { width: 100%; min-width: 0; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 14px; }
.search-control input::placeholder { color: #737a76; }
.select-control { position: relative; }
.select-control::after { content: ""; position: absolute; right: 14px; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); pointer-events: none; }
.select-control select { width: 100%; height: 100%; padding: 0 36px 0 13px; color: var(--ink); border: 0; outline: 0; background: transparent; appearance: none; cursor: pointer; font-size: 14px; }
.select-control option { color: #101214; background: #ffffff; }
.clear-filters { gap: 8px; padding: 0 14px; color: var(--muted); cursor: pointer; }
.clear-filters:hover, .clear-filters:focus-visible { color: var(--accent); border-color: var(--accent); }

.jobs-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(340px, 0.75fr); height: clamp(900px, 86svh, 1040px); min-height: 0; overflow: hidden; }
.jobs-list-region { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding-right: 32px; border-right: 1px solid var(--line); }
.jobs-table-head, .job-row { display: grid; grid-template-columns: minmax(200px, 2.1fr) minmax(100px, 0.9fr) minmax(128px, 1fr) minmax(66px, 0.55fr) 28px; align-items: center; column-gap: 14px; }
.jobs-table-head { min-height: 52px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.jobs-list { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.jobs-list::-webkit-scrollbar, .job-detail::-webkit-scrollbar { width: 7px; }
.jobs-list::-webkit-scrollbar-thumb, .job-detail::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--line-strong); }
.jobs-list::-webkit-scrollbar-track, .job-detail::-webkit-scrollbar-track { background: transparent; }
.job-row { width: 100%; min-height: 78px; padding: 14px 0; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; text-align: left; }
.job-row:hover, .job-row:focus-visible, .job-row.is-active { background: var(--surface-active); outline: none; }
.job-row.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.job-row-title { display: grid; gap: 5px; min-width: 0; padding-left: 16px; }
.job-row-title strong { overflow-wrap: anywhere; font-size: 16px; font-weight: 670; line-height: 1.25; }
.job-row-title small, .job-row-location, .job-row-salary, .job-row-vacancy { color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.job-row-location, .job-row-salary, .job-row-vacancy { padding-right: 4px; }
.row-arrow { color: var(--muted); }
.job-row:hover .row-arrow, .job-row.is-active .row-arrow { color: var(--accent); }

.job-detail { min-width: 0; min-height: 0; overflow-y: auto; padding: 35px 0 35px 32px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.job-detail-placeholder { display: grid; gap: 16px; max-width: 310px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.detail-mark { width: 42px; height: 4px; background: var(--accent); }
.detail-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--accent); font-size: 12px; font-weight: 750; line-height: 1.2; }
.detail-close { display: none; width: 32px; height: 32px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; background: transparent; cursor: pointer; }
.detail-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.job-detail h2 { margin: 18px 0 0; font-size: 31px; font-weight: 680; line-height: 1.16; overflow-wrap: anywhere; }
.detail-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.detail-facts span { padding: 6px 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; font-size: 12px; line-height: 1.2; }
.detail-summary { margin: 24px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.detail-section { margin-top: 28px; }
.detail-section h3 { margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.3; }
.detail-section h3::before { content: ""; display: inline-block; width: 13px; height: 3px; margin: 0 9px 3px 0; background: var(--accent); vertical-align: middle; }
.detail-section ul { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.detail-section li { position: relative; padding-left: 13px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.detail-section li::before { content: ""; position: absolute; top: 9px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.detail-tags span { padding: 6px 8px; color: var(--muted); background: var(--surface); border-radius: 4px; font-size: 12px; line-height: 1.2; }
.apply-action { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; padding: 0 16px; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 5px; background: var(--accent); cursor: pointer; font-size: 15px; font-weight: 750; text-align: left; }
.apply-action svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.apply-action:hover, .apply-action:focus-visible { filter: brightness(1.07); }
.form-entry { margin-top: 13px; padding: 0; color: var(--muted); border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; cursor: pointer; font-size: 13px; line-height: 1.75; }
.form-entry:hover, .form-entry:focus-visible { color: var(--accent); border-bottom-color: var(--accent); outline: none; }
.apply-note { min-height: 18px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.application-modal[hidden] { display: none; }
.application-modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 22px; }
.application-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, 0.7); cursor: default; }
.application-dialog { position: relative; width: min(100%, 560px); max-height: min(760px, calc(100svh - 44px)); overflow: auto; padding: 24px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42); }
.application-close { position: absolute; top: 16px; right: 16px; display: inline-grid; width: 32px; height: 32px; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; background: transparent; cursor: pointer; }
.application-close:hover, .application-close:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.application-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.application-dialog h2 { max-width: calc(100% - 46px); margin: 14px 0 0; font-size: 30px; font-weight: 680; line-height: 1.16; }
.application-role { margin: 14px 0 0; color: var(--accent); font-size: 14px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.application-intro { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.application-form { display: grid; gap: 12px; margin-top: 18px; }
.application-form > label:not(.application-trap) { display: grid; gap: 6px; }
.application-form > label > span { color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.3; }
.application-form > label:not(.application-trap) input, .application-form textarea { width: 100%; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; outline: none; background: transparent; font-size: 14px; line-height: 1.45; }
.application-form > label:not(.application-trap) input { height: 40px; padding: 0 12px; }
.application-form textarea { min-height: 92px; padding: 10px 12px; resize: vertical; }
.application-form input::placeholder, .application-form textarea::placeholder { color: #737a76; }
.application-form input:focus, .application-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent); }
.application-form .apply-action { margin-top: 2px; }
.application-form .apply-action:disabled { cursor: wait; filter: saturate(0.55); }
.application-status { min-height: 21px; margin: -5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.application-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
body.application-modal-open { overflow: hidden; }

.empty-state { padding: 55px 0; color: var(--muted); text-align: center; }
.empty-state p { margin: 0; font-size: 15px; }
.empty-state button { margin-top: 16px; padding: 0; color: var(--accent); border: 0; background: transparent; cursor: pointer; font-size: 14px; font-weight: 700; }

.apply-guide { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr); gap: 32px; margin-top: 80px; padding: 32px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.apply-guide h2 { margin: 14px 0 0; font-size: 30px; font-weight: 680; line-height: 1.2; }
.apply-guide > p { max-width: 600px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.careers-footer { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; color: var(--muted); font-size: 13px; }
.careers-footer a:hover, .careers-footer a:focus-visible { color: var(--accent); }

body[data-theme="voya"] { --bg: #10203e; --surface: #152644; --surface-active: #1b2e4e; --ink: #f2ecdf; --muted: #c0c4cb; --line: rgba(242, 236, 223, 0.18); --line-strong: rgba(242, 236, 223, 0.32); --accent: #df7b47; --accent-ink: #1b2437; }
body[data-theme="voya"] .brand-logo-nova { display: none; }
body[data-theme="voya"] .brand-logo-voya { display: inline-flex; }
body[data-theme="voya"] .careers-shell { padding-top: 0; }
body[data-theme="voya"] .careers-nav { min-height: 76px; border-top: 3px solid var(--accent); }
body[data-theme="voya"] .jobs-intro { padding-top: 92px; }
body[data-theme="voya"] .jobs-intro h1 { font-weight: 760; }
body[data-theme="voya"] .job-row.is-active { box-shadow: inset 4px 0 0 var(--accent); }
body[data-theme="nex"] { --bg: #061314; --surface: #0b1c1c; --surface-active: #102727; --ink: #f5f8f5; --muted: #b1c2bc; --line: rgba(178, 212, 201, 0.17); --line-strong: rgba(178, 212, 201, 0.3); --accent: #6ad5b5; --accent-ink: #06201b; }
body[data-theme="nex"] .brand-logo-nova { display: none; }
body[data-theme="nex"] .brand-logo-nex { display: inline-flex; }
body[data-theme="nex"] .careers-nav { min-height: 76px; }
body[data-theme="nex"] .jobs-intro { padding-top: 96px; }
body[data-theme="nex"] .jobs-intro h1 { font-size: 56px; font-weight: 620; }
body[data-theme="nex"] .jobs-workspace { border-top-color: rgba(106, 213, 181, 0.32); }

@media (max-width: 1080px) {
  .jobs-toolbar { grid-template-columns: minmax(220px, 1.8fr) repeat(2, minmax(130px, 1fr)) auto; }
  .jobs-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .jobs-list-region { padding-right: 24px; }
  .job-detail { padding-left: 24px; }
  .jobs-table-head, .job-row { grid-template-columns: minmax(140px, 1.45fr) minmax(76px, 0.76fr) minmax(100px, 0.9fr) minmax(54px, 0.5fr) 24px; column-gap: 12px; }
}

@media (max-width: 760px) {
  .careers-shell { padding: 14px 18px 24px; }
  .careers-nav { min-height: 58px; }
  .brand-logo-nova { width: 160px; }
  .brand-logo-voya, .brand-logo-nex { gap: 8px; }
  .brand-logo-voya img, .brand-logo-nex img { width: 32px; height: 32px; }
  .brand-logo-voya { font-size: 19px; }
  .brand-logo-nex { font-size: 25px; }
  .nav-utilities { gap: 12px; }
  .nav-link { display: none; }
  .theme-preview-toggle { min-width: 34px; justify-content: center; padding: 0 8px; }
  .theme-preview-toggle > span[data-copy] { display: none; }
  .theme-preview-current { display: none; }
  .theme-preview-menu { right: 0; }
  .language-switch { min-height: 32px; }
  .language-switch button { min-width: 34px; padding: 0 8px; }
  .jobs-intro { padding: 58px 0 30px; }
  .jobs-intro h1 { font-size: 42px; }
  .intro-copy { margin-top: 18px; font-size: 16px; }
  .category-filter { flex-wrap: nowrap; overflow-x: auto; padding: 14px 0 0; scrollbar-width: none; }
  .category-filter::-webkit-scrollbar { display: none; }
  .category-button { min-height: 32px; padding: 0 10px; }
  .jobs-toolbar { grid-template-columns: 1fr 1fr; gap: 10px; }
  .search-control { grid-column: 1 / -1; }
  .clear-filters { justify-content: center; padding: 0 10px; }
  .jobs-layout { display: block; height: auto; min-height: auto; overflow: visible; }
  .jobs-list-region { display: block; padding-right: 0; border-right: 0; }
  .jobs-list { overflow: visible; }
  .jobs-table-head { display: none; }
  .job-row { grid-template-columns: minmax(0, 1fr) 24px; column-gap: 12px; min-height: 92px; }
  .job-row-title { padding-left: 12px; }
  .job-row-location, .job-row-salary, .job-row-vacancy { display: none; }
  .job-row-title small { display: block; }
  .job-detail { height: auto; overflow: visible; margin-top: 18px; padding: 26px 0 8px; border-top: 1px solid var(--line-strong); }
  .job-detail h2 { font-size: 27px; }
  .detail-close { display: inline-grid; place-items: center; }
  .apply-guide { grid-template-columns: 1fr; gap: 18px; margin-top: 52px; padding: 26px 0; }
  .apply-guide h2 { font-size: 27px; }
  .apply-guide > p { font-size: 15px; }
  .careers-footer { padding-top: 18px; }
  .application-modal { align-items: end; padding: 12px; }
  .application-dialog { width: 100%; max-height: calc(100svh - 24px); padding: 26px 20px 20px; }
  .application-dialog h2 { font-size: 27px; }
}

@media (max-width: 430px) {
  .jobs-toolbar { grid-template-columns: 1fr; }
  .clear-filters { grid-column: auto; }
  .jobs-intro h1 { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }