.salary-page { max-width: 1140px; margin: 16px auto 52px; scroll-margin-top: 22px; }
.salary-heading { margin-bottom: 24px; }
.salary-heading h2 { margin: 7px 0 8px; font-size: clamp(1.8rem,3vw,2.5rem); letter-spacing: -.04em; }
.salary-workbench { padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 12px 36px rgba(24,55,85,.045); }
.salary-selector-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.salary-selector-heading h3 { margin: 0; font-size: .94rem; }
.salary-company-picker { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 3px 2px 10px; scroll-snap-type: x proximity; }
.salary-company { position: relative; display: flex; flex: 1 0 130px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 135px; padding: 17px 9px 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); color: var(--ink); cursor: pointer; scroll-snap-align: start; transition: border-color .16s,background .16s,box-shadow .16s; }
.salary-company .company-logo { margin-bottom: 2px; width: 38px; height: 38px; }
.salary-company strong { font-size: .87rem; font-weight: 650; white-space: nowrap; }
.salary-company > span:last-child { min-height: 1.5em; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.salary-company:hover { border-color: var(--blue); }
.salary-company.selected { border-color: var(--blue); background: color-mix(in srgb,var(--blue) 7%,var(--surface)); box-shadow: inset 0 0 0 1px var(--blue); }
.salary-company.selected::after { content: ''; position: absolute; right: 10px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.salary-company:focus-visible,.salary-input-shell:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }
.salary-base-row { display: grid; grid-template-columns: minmax(220px,.9fr) minmax(0,1.1fr); gap: 32px; align-items: center; padding: 32px 0 27px; margin-top: 4px; }
.salary-base-label { display: flex; align-items: center; gap: 9px; font-size: .84rem; font-weight: 600; }
.salary-base-label span { color: var(--muted); font-weight: 400; font-size: .74rem; }
.salary-input-shell { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; margin-top: 9px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.salary-input-shell input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: 2.3rem; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.salary-input-unit { flex-shrink: 0; color: var(--ink); font-size: 1rem; font-weight: 600; }
.salary-input-unit > span { margin-left: 5px; color: var(--muted); font-size: .75rem; font-weight: 400; }
.salary-input-hint { margin: 9px 0 0; color: var(--red); font-size: .73rem; }
.salary-input-hint:empty { display: none; }
.salary-input-shell:has([aria-invalid="true"]) { border-color: var(--red); }
.salary-preset-copy { border-left: 1px solid var(--line); padding-left: 32px; }
.salary-preset-copy > strong { font-size: 1.14rem; }
.salary-preset-copy p { margin: 10px 0 8px; font-size: .8rem; line-height: 1.6; }
.salary-preset-copy > span { display: block; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.salary-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.salary-result-card { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; padding: 25px 22px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.salary-result-label { color: var(--muted); font-size: .82rem; }
.salary-result-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.salary-result-value strong { font-size: clamp(1.8rem,2.9vw,2.55rem); letter-spacing: -.05em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.salary-result-value > span { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.salary-result-net { background: color-mix(in srgb,var(--blue) 8%,var(--surface)); border-color: color-mix(in srgb,var(--blue) 26%,var(--line)); }
.salary-result-net .salary-result-value strong { color: var(--blue); }
@media (max-width: 1050px) {
  .salary-workbench { padding: 24px; }
  .salary-base-row { gap: 22px; }
  .salary-preset-copy { padding-left: 22px; }
  .salary-result-card { padding: 22px 17px; }
}
@media (max-width: 760px) {
  .mobile-nav { grid-template-columns: repeat(4,1fr); }
  .salary-page { margin-top: 10px; margin-bottom: 40px; }
  .salary-heading { margin-bottom: 19px; }
  .salary-heading h2 { font-size: 1.8rem; }
  .salary-workbench { padding: 20px 16px; border-radius: 20px; }
  .salary-company { flex: 0 0 109px; min-height: 124px; }
  .salary-company-picker { gap: 8px; margin: 0 -3px; }
  .salary-company .company-logo { width: 34px; height: 34px; }
  .salary-base-row { grid-template-columns: 1fr; gap: 16px; padding: 23px 0; }
  .salary-preset-copy { padding: 0; border: 0; }
  .salary-preset-copy > strong { display: none; }
  .salary-preset-copy p { margin: 0 0 5px; font-size: .76rem; }
  .salary-preset-copy > span { font-size: .71rem; }
  .salary-results { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .salary-result-card { min-height: 120px; padding: 19px 14px; gap: 12px; }
  .salary-result-value { flex-direction: column; gap: 7px; }
  .salary-result-value strong { font-size: 1.85rem; }
  .salary-result-card:last-child { grid-column: 1 / -1; min-height: 96px; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .salary-result-card:last-child .salary-result-value { flex-direction: row; align-items: baseline; justify-content: flex-end; }
  .salary-result-label { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) { .salary-company { transition: none; } }