.employers-page {
  display: grid;
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: 28px;
}
.employers-page.hidden {
  display: none;
}
.employers-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 2px 2px;
}
.employers-hero p {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.employers-snapshot {
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.employers-snapshot strong {
  font-size: 17px;
}
.employers-snapshot span {
  color: var(--muted);
  font-size: 12px;
}
.employers-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(150px, 210px)) auto;
  align-items: end;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.employers-sector {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.employers-sector select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text);
  padding: 0 38px 0 12px;
}
.employers-toolbar > button {
  min-height: 44px;
  position: relative;
  top: -1px;
}
.employers-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid
    color-mix(in srgb, var(--atsrs-field-accent, #2563eb) 26%, var(--line));
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--atsrs-field-accent, #2563eb) 7%,
    var(--surface)
  );
  color: var(--text);
}
.employers-notice > i {
  margin-top: 2px;
  color: var(--atsrs-field-accent, #2563eb);
  font-size: 21px;
}
.employers-notice div {
  display: grid;
  gap: 2px;
}
.employers-notice span {
  color: var(--muted);
  font-size: 13px;
}
.employers-message {
  min-height: 0;
  color: var(--muted);
  font-size: 13px;
}
.employers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.employer-card {
  display: grid;
  gap: 17px;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.employer-card-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.employer-mark {
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--atsrs-field-accent, #2563eb) 13%,
    var(--surface-2)
  );
  color: var(--atsrs-field-accent, #2563eb);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.employer-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.employer-card-copy h4 {
  margin: 0;
  color: #fff!important;
  font-size: 20px;
}
html[data-theme="light"] .employer-card-copy h4 {
  color: #13233c!important;
}
html[data-theme="dark"] body.personal-mode #app.app:not(.hidden) > .main :is(#employersPage,#recruitersPage) .employer-card-copy h4 {
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html[data-theme="light"] body.personal-mode #app.app:not(.hidden) > .main :is(#employersPage,#recruitersPage) .employer-card-copy h4 {
  color:#13233c!important;
  -webkit-text-fill-color:#13233c!important;
}
.employer-detail-label {
  margin-top: 4px;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.employer-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.employer-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  color: var(--atsrs-field-accent, #2563eb);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.employer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.employer-tag {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.employer-vacancy-count {
  border-color: color-mix(in srgb, var(--atsrs-field-accent, #2563eb) 38%, var(--line));
  background: color-mix(in srgb, var(--atsrs-field-accent, #2563eb) 10%, var(--surface-2));
  color: var(--atsrs-field-accent, #2563eb);
}
.employer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.employer-actions a,
.employer-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}
.employer-actions a {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}
.employer-actions a:hover {
  border-color: var(--atsrs-field-accent, #2563eb);
  color: var(--atsrs-field-accent, #2563eb);
}
.employer-actions button {
  margin-left: auto;
}
.employer-actions button:disabled {
  cursor: not-allowed;
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
  opacity: .55;
}
.employer-verified {
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.employers-empty {
  place-items: center;
  text-align: center;
  padding: 44px 20px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
}
.employers-empty:not(.hidden) {
  display: grid;
}
.employers-empty i {
  font-size: 34px;
}
.employers-empty h2 {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 19px;
}
.employers-empty p {
  margin: 3px 0 0;
}
@media (max-width: 900px) {
  .employers-grid {
    grid-template-columns: 1fr;
  }
  .employers-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .employers-toolbar > button {
    grid-column: 1/-1;
  }
  .employers-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .employers-snapshot {
    width: 100%;
  }
}
@media (max-width: 620px) {
  .employers-toolbar {
    grid-template-columns: 1fr;
  }
  .employers-toolbar > button {
    grid-column: auto;
  }
  .employer-actions button {
    width: 100%;
    margin-left: 0;
  }
  .employer-actions a {
    flex: 1;
  }
  .employer-card {
    padding: 16px;
  }
}

.employer-card { position: relative; padding-left: 23px; border-color: #242a27; background: #080a09; color: #f8fafc; box-shadow: 0 12px 28px rgba(0,0,0,.2); overflow: hidden; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.employer-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: #22c55e; box-shadow: 2px 0 13px rgba(34,197,94,.24); }
.employer-card:hover, .employer-card:focus-within { transform: translateY(-2px); border-color: rgba(34,197,94,.58); box-shadow: 0 17px 38px rgba(0,0,0,.28), 0 0 0 1px rgba(34,197,94,.12); }
.employer-card:focus-visible { outline: 2px solid #22c55e; outline-offset: 3px; }
html[data-theme="light"] .employer-card { background: rgba(255,255,255,.96); color: #13233c; border-color: #d8e1ee; box-shadow: 0 10px 25px rgba(15,23,42,.09); }
html[data-theme="light"] .employer-card::before { background: #2563eb; box-shadow: 2px 0 12px rgba(37,99,235,.2); }
html[data-theme="light"] .employer-card:hover, html[data-theme="light"] .employer-card:focus-within { border-color: rgba(37,99,235,.52); box-shadow: 0 15px 32px rgba(15,23,42,.14), 0 0 0 1px rgba(37,99,235,.1); }

/* Companies directory — logo-led official source cards (V5945). */
#employersPage .employers-grid {
  gap: 24px;
}
#employersPage .employer-card {
  --company-card-art: url("../assets/company-card-backgrounds/corporate-network.webp");
  --company-card-tone: #48d46b;
  --company-card-tone-rgb: 72, 212, 107;
  --company-card-surface-rgb: 6, 22, 14;
  --company-card-light-surface: #edf9f1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: 108px minmax(0, 1fr) 128px;
  grid-template-rows: minmax(112px, auto) auto 44px;
  column-gap: 24px;
  row-gap: 11px;
  min-height: 270px;
  padding: 24px 24px 18px;
  border-color: #28302c;
  border-radius: 14px;
  background: rgb(var(--company-card-surface-rgb));
  box-shadow: none;
  content-visibility: auto;
  contain-intrinsic-block-size: 270px;
}
#employersPage .employer-card::before {
  z-index: 2;
  width: 4px;
  background: var(--company-card-tone);
  box-shadow: none;
}
#employersPage .employer-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(var(--company-card-surface-rgb), .99) 0%, rgba(var(--company-card-surface-rgb), .86) 43%, rgba(var(--company-card-surface-rgb), .30) 100%),
    linear-gradient(135deg, rgba(var(--company-card-tone-rgb), .22), transparent 68%),
    var(--company-card-art);
  background-position: center, center, right center;
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  background-blend-mode: normal, color, luminosity;
  opacity: .56;
  pointer-events: none;
}
#employersPage .employer-card > * {
  position: relative;
  z-index: 1;
}
#employersPage .employer-card[data-company-visual="offshore"] { --company-card-art: url("../assets/company-card-backgrounds/offshore-energy.webp"); }
#employersPage .employer-card[data-company-visual="energy"] { --company-card-art: url("../assets/company-card-backgrounds/energy-refinery.webp"); }
#employersPage .employer-card[data-company-visual="industrial"] { --company-card-art: url("../assets/company-card-backgrounds/energy-refinery.webp"); }
#employersPage .employer-card[data-company-visual="technology"] { --company-card-art: url("../assets/company-card-backgrounds/telecom-towers.webp"); }
#employersPage .employer-card[data-company-visual="development"] { --company-card-art: url("../assets/company-card-backgrounds/coastal-development.webp"); }
#employersPage .employer-card[data-company-visual="infrastructure"] { --company-card-art: url("../assets/company-card-backgrounds/infrastructure-bridge.webp"); }
#employersPage .employer-card[data-company-visual="science"] { --company-card-art: url("../assets/company-card-backgrounds/science-laboratory.webp"); }
#employersPage .employer-card[data-company-visual="hospitality"] { --company-card-art: url("../assets/company-card-backgrounds/hospitality-hotel.webp"); }
#employersPage .employer-card[data-company-visual="logistics"] { --company-card-art: url("../assets/company-card-backgrounds/logistics-port.webp"); }
#employersPage .employer-card[data-company-visual="network"] { --company-card-art: url("../assets/company-card-backgrounds/corporate-network.webp"); }
#employersPage .employer-card[data-company-tone="cyan"] { --company-card-tone:#22d3ee; --company-card-tone-rgb:34,211,238; --company-card-surface-rgb:4,25,32; --company-card-light-surface:#eaf9fc; }
#employersPage .employer-card[data-company-tone="purple"] { --company-card-tone:#a855f7; --company-card-tone-rgb:168,85,247; --company-card-surface-rgb:24,12,40; --company-card-light-surface:#f5effc; }
#employersPage .employer-card[data-company-tone="red"] { --company-card-tone:#fb5f57; --company-card-tone-rgb:251,95,87; --company-card-surface-rgb:38,12,12; --company-card-light-surface:#fcefed; }
#employersPage .employer-card[data-company-tone="amber"] { --company-card-tone:#f59e0b; --company-card-tone-rgb:245,158,11; --company-card-surface-rgb:31,20,5; --company-card-light-surface:#fff7e6; }
#employersPage .employer-card:hover,
#employersPage .employer-card:focus-within {
  transform: translateY(-1px);
  border-color: rgba(72, 212, 107, .58);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
#employersPage .employer-card-head {
  display: contents;
}
#employersPage .employer-mark {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  align-self: start;
  width: 104px;
  height: 104px;
  overflow: hidden;
  border: 1px solid #303834;
  border-radius: 6px;
  background: #0b1210;
  color: #48d46b;
  font-size: 25px;
  letter-spacing: .025em;
}
#employersPage .employer-logo {
  display: block;
  width: 74px;
  height: 74px;
  object-fit: contain;
}
#employersPage .employer-mark-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
#employersPage .employer-mark.has-official-logo .employer-mark-fallback {
  display: none;
}
#employersPage .employer-card-copy {
  grid-column: 2;
  grid-row: 1;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding-top: 0;
}
#employersPage .employer-source {
  color: #b9c5bf;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}
#employersPage .employer-source > i {
  color: #48d46b;
  font-size: 14px;
}
#employersPage .employer-card-copy h4 {
  margin-top: 7px;
  font-size: 16px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
#employersPage .employer-sector-label {
  color: #d8dfdb;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}
#employersPage .employer-card-copy p {
  max-width: 390px;
  color: #aab3ae;
  font-size: 12px;
  line-height: 1.38;
}
#employersPage .employer-vacancy-panel {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 10px 0 0 18px;
  border-left: 1px solid #303733;
}
#employersPage .employer-vacancy-panel > span:first-child {
  color: #d9e0dc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
#employersPage .employer-vacancy-panel > strong {
  color: #f7faf8;
  font-size: 30px;
  line-height: 1;
}
#employersPage .employer-vacancy-panel > span:last-child {
  color: #8f9a94;
  font-size: 11px;
  line-height: 1.3;
}
#employersPage .employer-tags {
  grid-column: 1 / -1;
  grid-row: 2;
  align-content: center;
  min-height: 38px;
  padding: 9px 0 8px;
  border-top: 1px solid #282f2b;
  border-bottom: 1px solid #282f2b;
}
#employersPage .employer-tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d6ded9;
  font-size: 12px;
  font-weight: 600;
}
html[data-theme] body #app.app:not(.hidden) #employersPage .employer-tag {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #d6ded9 !important;
  box-sizing: border-box !important;
}
#employersPage .employer-tag + .employer-tag::before {
  content: "·";
  margin: 0 9px;
  color: var(--company-card-tone);
}
#employersPage .employer-actions {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(5, 40px);
  justify-content: end;
  align-items: center;
  gap: 8px;
  margin: 0;
}
#employersPage .employer-actions a,
#employersPage .employer-actions button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid #37413c;
  border-radius: 5px;
  background: #090c0b;
  color: #f0f5f2;
  font-size: 0;
}
#employersPage .employer-actions :is(a, button) > i {
  color: #48d46b;
  font-size: 19px;
}
#employersPage .employer-actions :is(a, button) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
#employersPage .employer-actions :is(a, button):hover,
#employersPage .employer-actions :is(a, button):focus-visible {
  border-color: #48d46b;
  background: rgba(72, 212, 107, .08);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(72, 212, 107, .12);
}
#employersPage .employer-actions .employer-action-jobs {
  grid-column: auto;
  justify-self: stretch;
  width: 40px;
  min-width: 40px;
  justify-content: center;
  gap: 0;
  border-color: #37413c;
  background: #090c0b;
  color: #48d46b;
}
#employersPage .employer-actions .employer-action-jobs:hover,
#employersPage .employer-actions .employer-action-jobs:focus-visible {
  border-color: #37413c;
  background: #090c0b;
  color: #62df7e;
}
html[data-theme="light"] #employersPage .employer-card {
  border-color: rgba(var(--company-card-tone-rgb), .34);
  background: var(--company-card-light-surface);
  box-shadow: 0 10px 25px rgba(15, 23, 42, .07);
}
html[data-theme="light"] #employersPage .employer-card::before {
  background: var(--company-card-tone);
}
html[data-theme="light"] #employersPage .employer-card::after {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.84) 48%, rgba(255,255,255,.46) 100%),
    linear-gradient(135deg, rgba(var(--company-card-tone-rgb), .18), transparent 68%),
    var(--company-card-art);
  background-size: cover, cover, cover;
  opacity: .48;
  filter: saturate(.82) contrast(1.05);
}
html[data-theme="light"] #employersPage .employer-mark {
  border-color: #d6dfeb;
  background: #f8fafc;
  color: #2563eb;
}
html[data-theme="light"] #employersPage .employer-source {
  color: #64748b;
}
html[data-theme="light"] body #app.app:not(.hidden) #employersPage .employer-tag {
  color: #334155 !important;
}
html[data-theme="light"] #employersPage .employer-source > i {
  color: #2563eb;
}
html[data-theme="light"] #employersPage .employer-sector-label {
  color: #334155;
}
html[data-theme="light"] #employersPage .employer-card-copy p,
html[data-theme="light"] #employersPage .employer-vacancy-panel > span:last-child {
  color: #64748b;
}
html[data-theme="light"] #employersPage .employer-vacancy-panel {
  border-color: #e2e8f0;
}
html[data-theme="light"] #employersPage .employer-vacancy-panel > span:first-child {
  color: #475569;
}
html[data-theme="light"] #employersPage .employer-vacancy-panel > strong {
  color: #13233c;
}
html[data-theme="light"] #employersPage .employer-tags {
  border-color: #e2e8f0;
}
html[data-theme="light"] #employersPage .employer-tag {
  border-color: #cbd5e1;
  background: #fff;
  color: #475569;
}
html[data-theme="light"] body #app.app:not(.hidden) #employersPage .employer-tag {
  border-color: #cbd5e1 !important;
  background: #fff !important;
  color: #475569 !important;
}
html[data-theme="light"] #employersPage .employer-actions a,
html[data-theme="light"] #employersPage .employer-actions button {
  border-color: #cbd5e1;
  background: #fff;
  color: #172033;
}
html[data-theme="light"] #employersPage .employer-actions :is(a, button) > i,
html[data-theme="light"] #employersPage .employer-actions .employer-action-jobs {
  color: #2563eb;
}
html[data-theme="light"] #employersPage .employer-actions :is(a, button):hover,
html[data-theme="light"] #employersPage .employer-actions :is(a, button):focus-visible {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
html[data-theme="light"] #employersPage .employer-actions .employer-action-jobs {
  border-color: transparent;
  background: transparent;
}
html[data-theme] body #app.app:not(.hidden) #employersPage .employer-actions .employer-action-jobs {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body #app.app:not(.hidden) #employersPage .employer-actions .employer-action-jobs {
  color: #48d46b !important;
}
html[data-theme="light"] body #app.app:not(.hidden) #employersPage .employer-actions .employer-action-jobs {
  color: #2563eb !important;
}
#employersPage .employer-actions button:disabled {
  border-color: #2b332f;
  background: #090c0b;
  color: #737c77;
  opacity: .58;
}

html[data-theme="light"] #employersPage .employer-actions button:disabled {
  border-color: #d8e1ee;
  background: #fff;
  color: #94a3b8;
}

/* V6189: company cards retain the dark sector artwork treatment in light mode. */
html[data-theme="light"] body #app.app:not(.hidden) #employersPage .employer-card {
  border-color:rgba(var(--company-card-tone-rgb),.34) !important;
  background:rgb(var(--company-card-surface-rgb)) !important;
  color:#f7faf8 !important;
  box-shadow:0 12px 30px rgba(0,0,0,.24) !important;
}
html[data-theme="light"] #employersPage .employer-card::after {
  background-image:linear-gradient(90deg,rgba(var(--company-card-surface-rgb),.99) 0%,rgba(var(--company-card-surface-rgb),.86) 43%,rgba(var(--company-card-surface-rgb),.30) 100%),linear-gradient(135deg,rgba(var(--company-card-tone-rgb),.22),transparent 68%),var(--company-card-art);
  opacity:.56;
  filter:none;
}
html[data-theme="light"] #employersPage .employer-mark { border-color:#303834; background:#0b1210; color:#48d46b; }
html[data-theme="light"] #employersPage .employer-source { color:#b9c5bf; }
html[data-theme="light"] #employersPage .employer-source > i { color:#48d46b; }
html[data-theme="light"] #employersPage .employer-card-copy h4 { color:#f7faf8 !important; }
html[data-theme="light"] #employersPage .employer-sector-label { color:#d8dfdb; }
html[data-theme="light"] #employersPage .employer-card-copy p,
html[data-theme="light"] #employersPage .employer-vacancy-panel > span:last-child { color:#aab3ae; }
html[data-theme="light"] #employersPage .employer-vacancy-panel { border-color:#303733; }
html[data-theme="light"] #employersPage .employer-vacancy-panel > span:first-child { color:#d9e0dc; }
html[data-theme="light"] #employersPage .employer-vacancy-panel > strong { color:#f7faf8; }
html[data-theme="light"] #employersPage .employer-tags { border-color:#282f2b; }
html[data-theme="light"] body #app.app:not(.hidden) #employersPage .employer-tag { border:0 !important; background:transparent !important; color:#d6ded9 !important; }
html[data-theme="light"] #employersPage .employer-actions a,
html[data-theme="light"] #employersPage .employer-actions button { border-color:#37413c; background:#090c0b; color:#f0f5f2; }
html[data-theme="light"] #employersPage .employer-actions :is(a,button) > i,
html[data-theme="light"] #employersPage .employer-actions .employer-action-jobs { color:#48d46b !important; }
html[data-theme="light"] #employersPage .employer-actions :is(a,button):hover,
html[data-theme="light"] #employersPage .employer-actions :is(a,button):focus-visible { border-color:#48d46b; background:rgba(72,212,107,.08); color:#fff; box-shadow:0 0 0 3px rgba(72,212,107,.12); }
html[data-theme="light"] #employersPage .employer-actions button:disabled { border-color:#2b332f; background:#090c0b; color:#737c77; }
@media (max-width: 1180px) {
  #employersPage .employer-card {
    grid-template-columns: 82px minmax(0, 1fr) 108px;
    column-gap: 17px;
    padding-inline: 20px;
  }
  #employersPage .employer-mark {
    width: 78px;
    height: 78px;
  }
  #employersPage .employer-logo {
    width: 58px;
    height: 58px;
  }
  #employersPage .employer-actions {
    grid-template-columns: repeat(5, 40px);
  }
  #employersPage .employer-actions .employer-action-jobs {
    grid-column: auto;
    justify-content: center;
  }
}
@media (max-width: 620px) {
  #employersPage .employer-card {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 13px;
    min-height: 0;
    padding: 18px 16px 16px 20px;
  }
  #employersPage .employer-mark {
    width: 60px;
    height: 60px;
    font-size: 18px;
  }
  #employersPage .employer-logo {
    width: 44px;
    height: 44px;
  }
  #employersPage .employer-card-copy h4 {
    font-size: 16px;
  }
  #employersPage .employer-vacancy-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 0 0;
    border-top: 1px solid #303733;
    border-left: 0;
  }
  #employersPage .employer-vacancy-panel > strong {
    font-size: 24px;
  }
  #employersPage .employer-tags {
    grid-row: 3;
  }
  #employersPage .employer-actions {
    grid-row: 4;
    grid-template-columns: repeat(5, 40px);
    justify-content: end;
    height: auto;
  }
  #employersPage .employer-actions .employer-action-jobs {
    grid-column: auto;
  }
}

/* Recruiter directory — compact contact-ready cards (V5924). */
#recruitersPage .employers-grid {
  gap: 18px;
}
#recruitersPage .employer-card {
  grid-template-rows: auto auto auto;
  gap: 0;
  height: 286px;
  min-height: 286px;
  padding: 20px 22px 15px 27px;
  border-radius: 15px;
  background: #080a09;
}
#recruitersPage .employer-card::before {
  width: 4px;
  box-shadow: none;
}
#recruitersPage .employer-card-head {
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #202522;
}
#recruitersPage .employer-mark {
  flex-basis: 64px;
  width: 64px;
  height: 64px;
  border: 1px solid #303734;
  border-radius: 10px;
  background: #090c0b;
  color: #48d46b;
  font-size: 22px;
}
#recruitersPage .employer-card-copy {
  align-self: center;
  gap: 6px;
}
#recruitersPage .employer-card-copy h4 {
  font-size: 20px;
  line-height: 1.2;
}
#recruitersPage .employer-card-copy p {
  font-size: 13px;
  line-height: 1.45;
}
#recruitersPage .employer-source {
  color: #48d46b;
  font-size: 11px;
}
#recruitersPage .employer-tags {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid #202522;
}
#recruitersPage .employer-tags > i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(34, 197, 94, .08);
  color: #48d46b;
  font-size: 20px;
}
#recruitersPage .employer-vacancy-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
#recruitersPage .employer-tag {
  width: max-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#recruitersPage .employer-vacancy-count {
  color: #48d46b;
  font-size: 12px;
}
#recruitersPage .employer-vacancy-hint {
  color: #aab3ae;
  font-size: 12px;
}
#recruitersPage .employer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}
#recruitersPage .employer-actions a,
#recruitersPage .employer-actions button {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 13px;
  border: 1px solid #2c3430;
  border-radius: 9px;
  background: #090c0b;
  color: #f4f7f5;
  font-size: 12px;
  white-space: nowrap;
}
#recruitersPage .employer-actions .employer-action-linkedin {
  justify-content: center;
}
#recruitersPage .employer-actions .employer-action-share {
  grid-column: 1 / -1;
}
html[data-theme="dark"] body #app.app:not(.hidden) #recruitersPage
  .employer-actions > :is(a, button):not(:disabled) {
  border-color: rgba(72, 212, 107, .58) !important;
  background: #090c0b !important;
  color: #e8f8ec !important;
  box-shadow: inset 0 0 0 1px rgba(72, 212, 107, .05) !important;
}
html[data-theme="dark"] body #app.app:not(.hidden) #recruitersPage
  .employer-actions > :is(a, button):not(:disabled) > i {
  color: #48d46b;
}
html[data-theme="dark"] body #app.app:not(.hidden) #recruitersPage
  .employer-actions > :is(a, button):not(:disabled):hover,
html[data-theme="dark"] body #app.app:not(.hidden) #recruitersPage
  .employer-actions > :is(a, button):not(:disabled):focus-visible {
  border-color: #48d46b !important;
  background: rgba(72, 212, 107, .11) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(72, 212, 107, .13) !important;
}
html[data-theme] body #app.app:not(.hidden) #recruitersPage .employer-actions .employer-action-jobs.is-active {
  flex-direction: row-reverse;
  justify-content: space-between;
  border-color: #2c3430 !important;
  background: #090c0b !important;
  color: #48d46b !important;
  box-shadow: none !important;
}
html[data-theme] body #app.app:not(.hidden) #recruitersPage
  .employer-actions .employer-action-jobs.is-active > i {
  color: inherit;
}
html[data-theme] body #app.app:not(.hidden) #recruitersPage .employer-actions .employer-action-jobs.is-active:hover,
html[data-theme] body #app.app:not(.hidden) #recruitersPage .employer-actions .employer-action-jobs.is-active:focus-visible {
  border-color: var(--atsrs-field-focus-block-line) var(--atsrs-field-focus-inline-line) !important;
  background: var(--atsrs-field-surface) !important;
  color: var(--atsrs-field-accent) !important;
  box-shadow: var(--atsrs-field-focus-shadow) !important;
}
#recruitersPage .employer-actions .employer-action-jobs:disabled {
  display: inline-flex;
  opacity: .48;
  cursor: not-allowed;
}
html[data-theme="dark"] body #app.app:not(.hidden) #recruitersPage
  .employer-actions > button:disabled {
  border-color: #29312d !important;
  background: #0a0d0c !important;
  color: #7f8983 !important;
  box-shadow: none !important;
}
html[data-theme="light"] #recruitersPage .employer-card {
  background: #fff;
}
html[data-theme="light"] #recruitersPage .employer-card-head,
html[data-theme="light"] #recruitersPage .employer-tags {
  border-color: #e2e8f0;
}
html[data-theme="light"] #recruitersPage .employer-mark {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #2563eb;
}
html[data-theme="light"] #recruitersPage .employer-source,
html[data-theme="light"] #recruitersPage .employer-vacancy-count,
html[data-theme="light"] #recruitersPage .employer-tags > i {
  color: #2563eb;
}
html[data-theme="light"] #recruitersPage .employer-tags > i {
  background: rgba(37, 99, 235, .08);
}
html[data-theme="light"] #recruitersPage .employer-vacancy-hint {
  color: #64748b;
}
html[data-theme="light"] #recruitersPage .employer-actions a,
html[data-theme="light"] #recruitersPage .employer-actions button {
  border-color: #cbd5e1;
  background: #fff;
  color: #172033;
}
html[data-theme="light"] body #app.app:not(.hidden) #recruitersPage
  .employer-actions > :is(a, button):not(:disabled) {
  border-color: rgba(37, 99, 235, .5) !important;
  background: #fff !important;
  color: #1e40af !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .04) !important;
}
html[data-theme="light"] body #app.app:not(.hidden) #recruitersPage
  .employer-actions > :is(a, button):not(:disabled) > i {
  color: #2563eb;
}
html[data-theme="light"] body #app.app:not(.hidden) #recruitersPage
  .employer-actions > :is(a, button):not(:disabled):hover,
html[data-theme="light"] body #app.app:not(.hidden) #recruitersPage
  .employer-actions > :is(a, button):not(:disabled):focus-visible {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
html[data-theme="light"] body #app.app:not(.hidden) #recruitersPage
  .employer-actions > button:disabled {
  border-color: #d8dee8 !important;
  background: #f8fafc !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}
html[data-theme="light"] body #app.app:not(.hidden) #recruitersPage .employer-actions .employer-action-jobs.is-active {
  border-color: #cbd5e1 !important;
  background: #fff !important;
  color: var(--atsrs-field-accent) !important;
  box-shadow: none !important;
}
@media (max-width: 1180px) {
  #recruitersPage .employer-actions {
    grid-template-columns: 1fr 1fr;
  }
  #recruitersPage .employer-actions .employer-action-jobs.is-active {
    grid-column: auto;
  }
}
@media (max-width: 620px) {
  #recruitersPage .employer-card {
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 21px 16px 16px 20px;
  }
  #recruitersPage .employer-card-head {
    gap: 14px;
    min-width: 0;
  }
  #recruitersPage .employer-mark {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    font-size: 19px;
  }
  #recruitersPage .employer-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
  #recruitersPage .employer-actions .employer-action-jobs.is-active {
    grid-column: auto;
  }
  #recruitersPage .employer-actions a,
  #recruitersPage .employer-actions button {
    min-width: 0;
  }
  #recruitersPage .employer-source {
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    line-height: 1.35;
  }
  #recruitersPage .employer-card-copy :is(h4, p) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  #recruitersPage .employer-actions a,
  #recruitersPage .employer-actions button {
    padding-inline: 8px;
    white-space: normal;
    text-align: center;
  }
}