@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f7f7f4;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e8e8e3;
  --accent: #2457f5;
  --accent-dark: #173bc0;
  --success-bg: #edf8f1;
  --success: #26704a;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.8px;
}

.brand span {
  color: var(--accent);
}

nav {
  display: flex;
  gap: 28px;
  color: var(--muted);
  font-size: 15px;
}

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 28px 80px;
}

.hero {
  min-height: 620px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 72px;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(52px, 7vw, 84px);
  line-height: .98;
  letter-spacing: -4px;
  margin: 0;
  max-width: 780px;
}

.hero-text {
  font-size: 20px;
  color: var(--muted);
  max-width: 620px;
  margin: 28px 0 30px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  border: 0;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--accent);
  color: white;
}

.btn-primary:hover {
  background: var(--accent-dark);
}

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
}

.btn-dark {
  width: 100%;
  background: var(--text);
  color: white;
  margin-top: 18px;
}

.trust-row {
  margin-top: 20px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  font-size: 14px;
}

.hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 24px 70px rgba(0,0,0,.06);
}

.match-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.match-score {
  background: var(--success-bg);
  color: var(--success);
  padding: 8px 11px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}

.fresh {
  color: var(--muted);
  font-size: 13px;
}

.hero-card h2 {
  margin: 26px 0 4px;
  font-size: 28px;
  letter-spacing: -1px;
}

.company {
  color: var(--muted);
  margin-top: 0;
}

.meta,
.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meta span,
.skills span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 13px;
}

.match-reason {
  margin: 24px 0;
  font-size: 15px;
}

.how-section {
  padding: 90px 0;
}

.section-heading {
  max-width: 700px;
  margin-bottom: 40px;
}

.section-heading h2,
.install-card h2 {
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -2px;
  margin: 0;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 26px;
}

.step-number {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 34px;
}

.step h3 {
  margin-bottom: 8px;
}

.step p {
  color: var(--muted);
  margin-bottom: 0;
}

.install-card {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 56px 0;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
}

.install-card p {
  color: var(--muted);
  max-width: 620px;
}

footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 14px;
}

footer div {
  display: flex;
  gap: 20px;
}

@media (max-width: 800px) {
  nav a:first-child {
    display: none;
  }

  main {
    padding-top: 10px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 60px 0 40px;
    gap: 42px;
  }

  .hero h1 {
    font-size: 52px;
    letter-spacing: -2.5px;
  }

  .hero-text {
    font-size: 18px;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .install-card {
    align-items: flex-start;
    flex-direction: column;
  }

  footer {
    flex-direction: column;
    gap: 16px;
  }
}

.alert-preview {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.alert-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--success-bg);
  color: var(--success);
  font-weight: 800;
}

.alert-preview div:last-child {
  display: flex;
  flex-direction: column;
}

.alert-preview strong {
  font-size: 14px;
}

.alert-preview span {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 800px) {
  .site-header {
    padding: 20px;
  }

  main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero {
    padding-top: 40px;
  }

  .hero h1 {
    font-size: 48px;
    line-height: 1;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
    text-align: center;
  }

  .hero-card {
    padding: 22px;
    border-radius: 22px;
  }

  .section-heading h2,
  .install-card h2 {
    font-size: 34px;
  }

  .trust-row {
    flex-wrap: wrap;
  }

  .alert-preview {
    width: 100%;
  }
}

/* FindJobs alert preview refinement */
.hero-copy .alert-preview {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 13px 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.hero-copy .alert-preview .alert-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  font-size: 15px;
  font-weight: 800;
}

.hero-copy .alert-preview > div:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-copy .alert-preview strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
}

.hero-copy .alert-preview span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 800px) {
  .hero-copy .alert-preview {
    width: 100%;
  }
}

.auth-shell {
  max-width: 520px;
  margin: 60px auto 120px;
  padding: 0 20px;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 24px 70px rgba(0,0,0,.05);
}

.auth-card h1 {
  margin: 0;
  font-size: 42px;
  letter-spacing: -2px;
}

.auth-lead {
  color: var(--muted);
  margin: 12px 0 26px;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-form label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.auth-form input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
  font: inherit;
  color: var(--text);
  outline: none;
}

.auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(36,87,245,.10);
}

.auth-form .btn {
  margin-top: 4px;
  min-height: 48px;
}

.auth-switch {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.auth-switch a {
  color: var(--accent);
  font-weight: 700;
}

.form-error {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff1f1;
  color: #a52a2a;
  font-size: 14px;
}

@media (max-width: 600px) {
  .auth-shell {
    margin-top: 30px;
  }

  .auth-card {
    padding: 24px;
    border-radius: 22px;
  }

  .auth-card h1 {
    font-size: 36px;
  }
}

.onboarding-step {
  color: var(--muted);
  font-size: 14px;
}

.onboarding-shell {
  max-width: 720px;
  margin: 55px auto 120px;
  padding: 0 20px;
}

.onboarding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 40px;
  box-shadow: 0 24px 70px rgba(0,0,0,.05);
}

.onboarding-card h1 {
  margin: 0;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -2.5px;
}

.onboarding-lead {
  max-width: 590px;
  margin: 16px 0 30px;
  color: var(--muted);
  font-size: 17px;
}

.cv-form {
  display: grid;
  gap: 16px;
}

.cv-drop {
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  gap: 7px;
  padding: 30px;
  border: 1.5px dashed #cfd3da;
  border-radius: 22px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.cv-drop:hover {
  border-color: var(--accent);
  background: #f7f9ff;
}

.cv-drop-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 7px;
  border-radius: 14px;
  background: #edf2ff;
  color: var(--accent);
  font-size: 22px;
  font-weight: 800;
}

.cv-drop strong {
  font-size: 17px;
}

.cv-drop span {
  color: var(--muted);
  font-size: 13px;
}

.cv-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.selected-file {
  padding: 12px 15px;
  background: var(--success-bg);
  color: var(--success);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.onboarding-submit {
  min-height: 52px;
  font-size: 16px;
}

.privacy-note {
  margin-top: 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.onboarding-success {
  text-align: center;
}

.success-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  font-size: 24px;
  font-weight: 900;
}

.processing-note {
  margin-top: 26px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f5f6f8;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 600px) {
  .onboarding-shell {
    margin-top: 28px;
  }

  .onboarding-card {
    padding: 25px;
    border-radius: 23px;
  }

  .onboarding-card h1 {
    font-size: 38px;
    letter-spacing: -2px;
  }

  .cv-drop {
    min-height: 200px;
  }
}

.profile-form {
  display: grid;
  gap: 20px;
}

.profile-form label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.profile-form input,
.profile-form textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
  color: var(--text);
  font: inherit;
  outline: none;
}

.profile-form input {
  min-height: 48px;
}

.profile-form textarea {
  min-height: 105px;
  resize: vertical;
}

.profile-form input:focus,
.profile-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(36,87,245,.10);
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.skill-check {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 7px !important;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-weight: 500 !important;
  cursor: pointer;
}

.skill-check input {
  width: auto;
  min-height: auto;
  margin: 0;
}

@media (max-width: 600px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

.site-header nav,
.account-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-logout-form {
  margin: 0;
}

.nav-link-button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.nav-link-button:hover,
.site-header nav a:hover {
  color: var(--text);
}

@media (max-width: 700px) {
  .account-nav {
    gap: 14px;
    font-size: 13px;
  }

  .account-nav a:first-child {
    display: none;
  }
}

.onboarding-step-inline {
  float: right;
  color: var(--muted);
  font-size: 13px;
}

.profile-form select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.field-help {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.preference-section {
  margin-top: 4px;
}

.preference-options,
.notification-options {
  display: grid;
  gap: 10px;
}

.preference-options {
  grid-template-columns: repeat(3, 1fr);
}

.notification-options {
  grid-template-columns: 1fr 1fr;
}

.choice-card {
  display: flex !important;
  align-items: flex-start;
  gap: 11px !important;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
}

.choice-card input {
  width: auto !important;
  min-height: auto !important;
  margin-top: 3px;
}

.choice-card span {
  display: flex;
  flex-direction: column;
}

.choice-card strong {
  font-size: 14px;
}

.choice-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

@media (max-width: 650px) {
  .preference-options,
  .notification-options {
    grid-template-columns: 1fr;
  }
}

.dashboard-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 55px 28px 100px;
}

.dashboard-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 36px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--border);
}

.dashboard-hero h1 {
  margin: 0;
  font-size: clamp(46px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -3px;
}

.dashboard-hero > div:first-child > p {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
}

.alert-status-card {
  min-width: 300px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.alert-status-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  font-weight: 800;
}

.alert-status-card strong,
.alert-status-card span {
  display: block;
}

.alert-status-card strong {
  font-size: 14px;
}

.alert-status-card span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.alert-status-card a {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.dashboard-section {
  padding: 48px 0;
}

.dashboard-section-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.dashboard-section-head h2 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -1.5px;
}

.dashboard-section-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.empty-matches {
  padding: 70px 28px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 26px;
}

.empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #eef2ff;
  color: var(--accent);
  font-size: 28px;
}

.empty-matches h3 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -1px;
}

.empty-matches > p {
  max-width: 620px;
  margin: 12px auto 24px;
  color: var(--muted);
}

.empty-alert-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
}

.empty-alert-summary strong {
  color: var(--text);
}

.match-list {
  display: grid;
  gap: 16px;
}

.dashboard-job-card {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
}

.dashboard-job-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-job-card h3 {
  margin: 20px 0 4px;
  font-size: 26px;
  letter-spacing: -1px;
}

.dashboard-job-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
}

.dashboard-job-actions form {
  margin: 0;
}

.dashboard-job-actions .btn-dark {
  width: auto;
  margin: 0;
}

.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.dashboard-info-card {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
}

.dashboard-info-card h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.7px;
}

.dashboard-info-card p {
  color: var(--muted);
}

.dashboard-info-card a {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

.nav-active {
  color: var(--text) !important;
  font-weight: 700;
}

@media (max-width: 760px) {
  .dashboard-shell {
    padding: 30px 20px 80px;
  }

  .dashboard-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-hero h1 {
    font-size: 48px;
  }

  .alert-status-card {
    min-width: 0;
    width: 100%;
  }

  .dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-job-actions {
    flex-direction: column;
  }

  .dashboard-job-actions .btn,
  .dashboard-job-actions form,
  .dashboard-job-actions form .btn {
    width: 100%;
  }
}

.dashboard-page {
  background: #f7f8fb;
}

.dashboard-header {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid #e8ebf0;
}

.dashboard-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 24px 100px;
}

.dashboard-welcome {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 34px;
}

.dashboard-welcome h1 {
  margin: 6px 0 12px;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -2px;
}

.dashboard-welcome p {
  max-width: 620px;
  margin: 0;
  color: #667085;
  font-size: 16px;
}

.dashboard-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #ecfdf3;
  border: 1px solid #d1fadf;
  border-radius: 999px;
  color: #087443;
  font-size: 13px;
  font-weight: 700;
}

.status-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #12b76a;
  box-shadow: 0 0 0 5px rgba(18,183,106,.10);
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 30px;
}

.stat-card {
  padding: 20px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(16,24,40,.025);
}

.stat-card span,
.stat-card small {
  display: block;
  color: #7a8494;
}

.stat-card span {
  font-size: 13px;
  font-weight: 600;
}

.stat-card strong {
  display: block;
  margin: 8px 0 5px;
  color: #101828;
  font-size: 28px;
  letter-spacing: -1px;
}

.stat-card small {
  font-size: 12px;
}

.alert-stat {
  background: #111827;
}

.alert-stat span,
.alert-stat small {
  color: #aeb7c7;
}

.alert-stat strong {
  color: #fff;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
}

.section-title-row h2 {
  margin: 4px 0 0;
  color: #101828;
  font-size: 30px;
  letter-spacing: -1.2px;
}

.section-count {
  color: #667085;
  font-size: 13px;
}

.scanning-card {
  position: relative;
  overflow: hidden;
  padding: 54px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 8px 28px rgba(16,24,40,.035);
}

.scan-graphic {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
}

.scan-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid #dce5ff;
}

.ring-one {
  width: 104px;
  height: 104px;
}

.ring-two {
  width: 76px;
  height: 76px;
}

.scan-center {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #edf3ff;
  color: #2f63f5;
  font-size: 24px;
}

.scanning-card h3 {
  margin: 0;
  color: #101828;
  font-size: 25px;
  letter-spacing: -.7px;
}

.scanning-card > p {
  max-width: 600px;
  margin: 12px auto 28px;
  color: #667085;
  line-height: 1.65;
}

.scan-criteria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.scan-criteria > div {
  padding: 14px 16px;
  background: #f8f9fb;
  border: 1px solid #edf0f4;
  border-radius: 14px;
}

.scan-criteria span,
.scan-criteria strong {
  display: block;
}

.scan-criteria span {
  margin-bottom: 4px;
  color: #8a94a3;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.scan-criteria strong {
  color: #1d2939;
  font-size: 14px;
}

.scan-footer {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  color: #667085;
  font-size: 13px;
}

.dashboard-sidebar {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.sidebar-card {
  padding: 22px;
  background: #fff;
  border: 1px solid #e5e8ed;
  border-radius: 20px;
  box-shadow: 0 5px 18px rgba(16,24,40,.025);
}

.sidebar-card-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.sidebar-card-head h3 {
  margin: 5px 0 0;
  color: #101828;
  font-size: 19px;
}

.sidebar-card-head a {
  color: #2f63f5;
  font-size: 13px;
  font-weight: 700;
}

.profile-info-list {
  margin-top: 20px;
}

.profile-info-list > div {
  padding: 13px 0;
  border-top: 1px solid #eef0f3;
}

.profile-info-list span,
.profile-info-list strong {
  display: block;
}

.profile-info-list span {
  margin-bottom: 3px;
  color: #8a94a3;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.profile-info-list strong {
  color: #344054;
  font-size: 13px;
}

.notification-card {
  background: #edf3ff;
  border-color: #dce6ff;
}

.notification-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 12px;
  color: #2f63f5;
}

.notification-card h3 {
  margin: 0 0 8px;
  color: #101828;
}

.notification-card p {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

.notification-types {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  color: #344054;
  font-size: 12px;
  font-weight: 600;
}

.premium-job-card {
  padding: 24px;
  background: #fff;
  border: 1px solid #e5e8ed;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(16,24,40,.03);
}

.job-card-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}

.company-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: #edf3ff;
  border-radius: 14px;
  color: #2f63f5;
  font-weight: 800;
}

.job-card-title h3 {
  margin: 0;
  font-size: 19px;
  color: #101828;
}

.job-card-title p {
  margin: 4px 0 0;
  color: #667085;
  font-size: 13px;
}

.match-badge {
  min-width: 66px;
  padding: 9px 10px;
  text-align: center;
  background: #ecfdf3;
  border-radius: 12px;
}

.match-badge strong,
.match-badge span {
  display: block;
}

.match-badge strong {
  color: #087443;
  font-size: 17px;
}

.match-badge span {
  color: #39916b;
  font-size: 10px;
}

.job-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 17px 0;
}

.job-meta-row span {
  padding: 6px 10px;
  background: #f5f7fa;
  border-radius: 999px;
  color: #667085;
  font-size: 11px;
}

.why-match {
  padding: 14px 16px;
  background: #f8fafc;
  border-radius: 12px;
}

.why-match strong {
  font-size: 12px;
  color: #344054;
}

.why-match p {
  margin: 5px 0 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.job-card-footer {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.job-view-btn {
  width: auto !important;
  margin: 0 !important;
}

.save-job-btn {
  height: 44px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #d9dde5;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

@media (max-width: 900px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    position: static;
  }
}

@media (max-width: 600px) {
  .dashboard-shell {
    padding: 30px 18px 70px;
  }

  .dashboard-welcome {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-welcome h1 {
    font-size: 40px;
  }

  .dashboard-stats {
    grid-template-columns: 1fr 1fr;
  }

  .scanning-card {
    padding: 35px 20px;
  }

  .scan-criteria {
    grid-template-columns: 1fr;
  }
}

.alert-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.alert-toggle-row form {
  margin: 0;
}

.alert-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d0d5dd;
  cursor: pointer;
  transition: background .2s ease;
}

.alert-toggle span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .2s ease;
}

.alert-toggle.is-active {
  background: #12b76a;
}

.alert-toggle.is-active span {
  transform: translateX(20px);
}

.dashboard-status-pill.is-paused {
  background: #f2f4f7;
  border-color: #e4e7ec;
  color: #667085;
}

.dashboard-status-pill.is-paused .status-dot {
  background: #98a2b3;
  box-shadow: none;
}

.alert-preview-paused .alert-check {
  background: #f2f4f7;
  color: #667085;
}

.alert-preview-paused strong {
  color: #475467;
}

.alert-preview-paused .alert-icon {
  background: #f2f4f7;
  color: #667085;
}

.alert-preview-paused strong {
  color: #475467;
}

.near-matches-section {
  margin-top: 34px;
}

.near-title-row p {
  margin: 7px 0 0;
  color: #667085;
  font-size: 13px;
}

.near-match-badge {
  background: #fff7ed;
}

.near-match-badge strong {
  color: #b54708;
}

.near-match-badge span {
  color: #c26720;
}

.save-job-btn.is-saved {
  background: #fff1f3;
  border-color: #fecdd6;
  color: #be123c;
}

.save-job-btn.is-saved:hover {
  background: #ffe4e8;
}

.job-card-footer form {
  margin: 0;
}

.findjobs-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 9999;
  transform: translate(-50%, 20px);
  padding: 11px 16px;
  background: #101828;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, .22);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.findjobs-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.findjobs-toast.is-error {
  background: #b42318;
}

.saved-toggle-form button:disabled {
  opacity: .65;
  cursor: wait;
}

.premium-job-card {
  transition: opacity .18s ease, transform .18s ease;
}

.job-detail-shell {
  max-width: 1160px;
  margin: 0 auto;
  padding: 38px 24px 100px;
}

.job-back-link {
  display: inline-block;
  margin-bottom: 24px;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
}

.job-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 315px;
  gap: 24px;
  align-items: start;
}

.job-detail-main {
  display: grid;
  gap: 18px;
}

.job-detail-header,
.job-description-card,
.job-match-panel {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 24px;
}

.job-detail-header {
  padding: 34px;
}

.job-detail-company-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.job-detail-avatar {
  width: 52px;
  height: 52px;
}

.job-detail-company {
  color: #344054;
  font-size: 15px;
  font-weight: 750;
}

.job-source {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 11px;
}

.job-detail-header h1 {
  max-width: 760px;
  margin: 25px 0 18px;
  color: #101828;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -2px;
}

.job-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.job-detail-meta span {
  padding: 7px 11px;
  background: #f5f7fa;
  border-radius: 999px;
  color: #667085;
  font-size: 12px;
  text-transform: capitalize;
}

.job-match-panel {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: center;
  padding: 25px;
}

.job-match-score {
  padding: 17px 12px;
  text-align: center;
  border-radius: 18px;
}

.job-match-score.strong {
  background: #ecfdf3;
}

.job-match-score.potential {
  background: #fff7ed;
}

.job-match-score strong,
.job-match-score span {
  display: block;
}

.job-match-score strong {
  color: #101828;
  font-size: 30px;
  letter-spacing: -1px;
}

.job-match-score span {
  margin-top: 3px;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}

.job-match-copy p {
  margin: 7px 0 0;
  color: #475467;
  line-height: 1.65;
}

.job-description-card {
  padding: 34px;
}

.job-description-card h2 {
  margin: 0 0 24px;
  color: #101828;
  font-size: 27px;
  letter-spacing: -1px;
}

.job-description {
  color: #475467;
  font-size: 15px;
  line-height: 1.78;
  white-space: pre-line;
}

.job-detail-sidebar {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
}

.job-action-card {
  padding: 20px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(16, 24, 40, .04);
}

.job-apply-btn {
  width: 100% !important;
  margin: 0 !important;
}

.job-save-large {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  display: grid;
  place-items: center;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #fff;
  color: #344054;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.job-save-large.is-saved {
  background: #fff1f3;
  border-color: #fecdd6;
  color: #be123c;
}

.job-action-note {
  margin-top: 14px;
  color: #98a2b3;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.match-breakdown {
  margin-top: 16px;
}

.match-breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 0;
  border-top: 1px solid #eef0f3;
}

.match-breakdown span {
  color: #667085;
  font-size: 12px;
}

.match-breakdown strong {
  color: #101828;
  font-size: 13px;
}

@media (max-width: 850px) {
  .job-detail-grid {
    grid-template-columns: 1fr;
  }

  .job-detail-sidebar {
    position: static;
  }
}

@media (max-width: 600px) {
  .job-detail-shell {
    padding: 25px 17px 70px;
  }

  .job-detail-header,
  .job-description-card {
    padding: 23px;
  }

  .job-match-panel {
    grid-template-columns: 1fr;
  }

  .job-match-score {
    max-width: 120px;
  }
}

/* --- Job detail finishing polish --- */

.job-detail-header,
.job-match-panel,
.job-description-card,
.job-action-card,
.job-detail-sidebar .sidebar-card {
  box-shadow: 0 8px 28px rgba(16, 24, 40, .035);
}

.job-detail-header {
  position: relative;
  overflow: hidden;
}

.job-detail-header::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -110px;
  top: -120px;
  border-radius: 50%;
  background: rgba(47, 99, 245, .045);
  pointer-events: none;
}

.job-detail-company-row,
.job-detail-header h1,
.job-detail-meta {
  position: relative;
  z-index: 1;
}

.job-apply-btn {
  min-height: 50px;
  border-radius: 13px !important;
  box-shadow: 0 6px 16px rgba(47, 99, 245, .18);
  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.job-apply-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(47, 99, 245, .24);
}

.job-save-large {
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.job-save-large:hover {
  transform: translateY(-1px);
  border-color: #98a2b3;
}

.job-save-large.is-saved:hover {
  border-color: #fda4af;
}

.job-match-panel {
  border-color: #e8eaf0;
}

.job-match-copy {
  min-width: 0;
}

.job-match-copy p {
  font-size: 15px;
}

.job-description-card {
  overflow: hidden;
}

.job-description-card h2 {
  padding-bottom: 18px;
  border-bottom: 1px solid #eef0f3;
}

.job-description-wrap {
  position: relative;
}

.job-description {
  overflow: hidden;
  transition: max-height .35s ease;
}

/*
  Around 8 readable lines on desktop.
  Because imported descriptions contain paragraph breaks,
  the exact visual line count may vary slightly.
*/
.job-description.job-description-collapsed {
  max-height: 14.5em;
}

.job-description:not(.job-description-collapsed) {
  max-height: 5000px;
}

.job-description-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 54px;
  height: 95px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,.94) 65%,
    #fff
  );
}

.job-description-toggle {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: #f8fafc;
  color: #344054;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition:
    background .15s ease,
    border-color .15s ease;
}

.job-description-toggle:hover {
  background: #f2f4f7;
  border-color: #cfd4dc;
}

.description-toggle-icon {
  color: #2f63f5;
  font-size: 16px;
}

.job-detail-sidebar .sidebar-card h3 {
  margin-bottom: 10px;
}

.job-detail-sidebar .sidebar-card p {
  color: #667085;
  line-height: 1.55;
}

.job-detail-sidebar .sidebar-card a {
  color: #2f63f5;
  font-size: 13px;
  font-weight: 700;
}

.match-breakdown > div:last-child {
  padding-bottom: 0;
}

@media (max-width: 600px) {
  .job-description.job-description-collapsed {
    max-height: 17em;
  }

  .job-description-fade {
    bottom: 53px;
  }
}

.job-action-card {
  padding: 22px 24px;
  text-align: center;
}

.job-apply-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 210px;
  margin: 0 auto !important;
  padding-left: 24px;
  padding-right: 24px;
}

.job-save-large {
  margin-left: auto;
  margin-right: auto;
}



/* Web Push settings */
.push-settings-row {
  position: relative;
}

.push-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
}

.push-notification-button {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 7px 12px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.push-notification-button:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.push-notification-button.is-enabled {
  border-color: #b9e6d3;
  background: #ecf9f3;
  color: #16855b;
}

.push-notification-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.push-help-text {
  display: block;
  margin-top: 7px;
  color: #7b8799;
  font-size: 11px;
  line-height: 1.45;
}


/* Unified Job Search & Alerts settings */
.job-search-alert-settings {
  margin-top: 18px;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.job-search-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
}

.job-search-setting-row + .job-search-setting-row {
  border-top: 1px solid #e8ecf2;
}

.job-search-setting-row > div:first-child {
  min-width: 0;
}

.job-search-setting-row > div:first-child > strong {
  display: block;
  color: #111827;
  font-size: 14px;
}

.job-search-setting-row > div:first-child > small {
  display: block;
  margin-top: 4px;
  color: #7b8799;
  font-size: 12px;
  line-height: 1.45;
}

.job-search-setting-row .push-control-row,
.job-search-setting-row .alert-toggle-row {
  flex: 0 0 auto;
}

@media (max-width: 650px) {
  .job-search-setting-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .job-search-setting-row .push-control-row,
  .job-search-setting-row .alert-toggle-row {
    width: 100%;
  }
}


/* Closed job state */
.job-unavailable-banner {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.job-unavailable-banner strong,
.job-unavailable-banner span {
  display: block;
}

.job-unavailable-banner span {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
}

.job-unavailable-banner a {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}

.job-closed-action {
  margin-bottom: 14px;
  text-align: center;
}

.job-closed-action strong,
.job-closed-action span {
  display: block;
}

.job-closed-action strong {
  font-size: 15px;
}

.job-closed-action span {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}


/* Signup account type */
.account-type-picker {
  display: grid;
  gap: 12px;
  margin-bottom: 4px;
}

.account-type-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
}

.account-type-card input {
  margin-top: 3px;
}

.account-type-card strong,
.account-type-card small {
  display: block;
}

.account-type-card strong {
  font-size: 14px;
}

.account-type-card small {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}


/* Employer setup */
.employer-setup-shell {
  width: min(900px, calc(100% - 32px));
  margin: 48px auto;
}

.employer-setup-card {
  padding: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
}

.employer-setup-card h1 {
  margin-bottom: 8px;
}

.employer-setup-lead {
  margin-bottom: 26px;
  color: #64748b;
}

.employer-form-section {
  margin-bottom: 28px;
}

.employer-form-section h2 {
  margin-bottom: 16px;
  font-size: 18px;
}

.employer-job-list {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.employer-job-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
}

.employer-job-row + .employer-job-row {
  border-top: 1px solid #edf0f4;
}

.employer-job-row strong,
.employer-job-row small {
  display: block;
}

.employer-job-row small {
  margin-top: 5px;
  color: #64748b;
}

.employer-job-row-meta {
  white-space: nowrap;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 650px) {
  .employer-setup-card {
    padding: 22px;
  }

  .employer-job-row {
    flex-direction: column;
  }
}


/* Employer dashboard layout fix */
.dashboard-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.dashboard-intro > div:first-child {
  min-width: 0;
}

.dashboard-intro .btn {
  flex: 0 0 auto;
  margin-top: 8px;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 36px;
}

.dashboard-stat-card {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.dashboard-stat-card span {
  display: block;
  color: #64748b;
  font-size: 13px;
  margin-bottom: 8px;
}

.dashboard-stat-card strong {
  display: block;
  font-size: 28px;
  line-height: 1;
}

.dashboard-section {
  clear: both;
}

@media (max-width: 760px) {
  .dashboard-intro {
    flex-direction: column;
  }

  .dashboard-intro .btn {
    width: 100%;
  }

  .dashboard-stats {
    grid-template-columns: 1fr;
  }
}


/* Employer job form */
.employer-job-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.form-help {
  display: block;
  margin: -4px 0 18px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 650px) {
  .employer-job-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .employer-job-form-actions .btn {
    width: 100%;
    text-align: center;
  }
}


/* Employer skill tags */
.job-skills-field {
  margin-bottom: 18px;
}

.job-skills-field > label {
  display: block;
  margin-bottom: 7px;
}

.job-skill-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  background: #fff;
}

.job-skill-tags {
  display: contents;
}

.job-skill-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 13px;
  line-height: 1;
}

.job-skill-tag button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

#job-skill-input {
  flex: 1 1 180px;
  min-width: 160px;
  border: 0;
  outline: 0;
  padding: 5px 2px;
}


/* Premium employer post-job form */
.employer-setup-shell {
  width: min(980px, calc(100% - 32px));
  margin: 42px auto 72px;
}

.employer-setup-card {
  padding: 0;
  border: 0;
  background: transparent;
}

.employer-setup-card > .eyebrow {
  margin-bottom: 10px;
}

.employer-setup-card > h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.employer-setup-lead {
  max-width: 720px;
  margin: 12px 0 30px;
  font-size: 15px;
  line-height: 1.65;
  color: #64748b;
}

.employer-form-section {
  margin: 0 0 20px;
  padding: 26px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.035);
}

.employer-form-section h2 {
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
  font-size: 18px;
  line-height: 1.2;
}

.auth-form label,
.job-skills-field > label {
  display: block;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
  width: 100%;
  margin-top: 7px;
  border: 1px solid #dbe2ea;
  border-radius: 11px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.auth-form input,
.auth-form select {
  min-height: 48px;
  padding: 0 14px;
}

.auth-form textarea {
  padding: 13px 14px;
  line-height: 1.6;
  resize: vertical;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus,
.job-skill-input-wrap:focus-within {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
}

.auth-form input::placeholder,
.auth-form textarea::placeholder,
#job-skill-input::placeholder {
  color: #94a3b8;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.job-skills-field {
  margin: 0 0 20px;
}

.job-skill-input-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid #dbe2ea;
  border-radius: 11px;
  background: #fff;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.job-skill-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.job-skill-tag button {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

#job-skill-input {
  flex: 1 1 180px;
  min-width: 160px;
  min-height: 34px;
  padding: 4px 2px;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
}

.form-help {
  display: block;
  margin: -8px 0 18px;
  color: #8491a3;
  font-size: 12px;
  line-height: 1.5;
}

.employer-job-form-actions {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.09);
  backdrop-filter: blur(10px);
}

.employer-job-form-actions .btn {
  min-height: 44px;
}

.employer-job-form-actions .btn-primary {
  min-width: 150px;
}

@media (max-width: 720px) {
  .employer-setup-shell {
    width: min(100% - 22px, 980px);
    margin-top: 24px;
  }

  .employer-form-section {
    padding: 20px;
    border-radius: 15px;
  }

  .profile-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .employer-job-form-actions {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }

  .employer-job-form-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* Fix employer skill tag spacing */
.job-skills-field {
  margin-bottom: 24px;
}

.job-skills-field > label {
  margin-bottom: 8px;
}

.job-skill-input-wrap {
  margin-bottom: 8px;
}

.job-skills-field .form-help {
  margin: 0;
  padding-top: 2px;
  display: block;
  clear: both;
}

.job-skill-tags {
  align-items: center;
}

.job-skill-tag {
  margin: 0;
}

#job-skill-input {
  margin: 0 !important;
  min-height: 32px;
}

@media (max-width: 650px) {
  .job-skills-field {
    margin-bottom: 22px;
  }

  .job-skill-input-wrap {
    align-items: flex-start;
  }
}


/* Public job skills */
.public-job-skills {
  margin: 20px 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eef2f7;
}

.public-job-skills .eyebrow {
  margin-bottom: 10px;
}

.public-job-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.public-job-skill {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.job-apply-btn[disabled] {
  cursor: default;
  opacity: 0.8;
}

/* Force public job skills to render as pills */
.public-job-skill-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px;
}

.public-job-skill-list .public-job-skill {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}


/* Employer applicants */
.employer-applicant-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-decoration: none;
}

.employer-applicant-link strong {
  color: #0f172a;
  font-size: 13px;
}

.employer-applicant-link span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
}

.employer-applicants-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 30px 0;
}

.employer-applicants-head h1 {
  margin: 8px 0;
  font-size: 32px;
}

.employer-applicants-head p {
  margin: 0;
  color: #64748b;
}

.employer-applicant-list {
  display: grid;
  gap: 16px;
}

.employer-applicant-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 24px;
  padding: 22px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}

.employer-applicant-main {
  display: flex;
  gap: 16px;
  min-width: 0;
}

.employer-applicant-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 800;
}

.employer-applicant-copy {
  flex: 1;
  min-width: 0;
}

.employer-applicant-title-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.employer-applicant-title-row h2 {
  margin: 0;
  font-size: 18px;
}

.employer-applicant-title-row p {
  margin: 4px 0 0;
  color: #64748b;
}

.employer-match-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #ecfdf5;
}

.employer-match-pill strong {
  color: #047857;
  font-size: 17px;
}

.employer-match-pill span {
  color: #059669;
  font-size: 10px;
}

.employer-applicant-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
  color: #64748b;
  font-size: 12px;
}

.employer-applicant-fit {
  margin-top: 16px;
  padding: 13px 14px;
  border-radius: 10px;
  background: #f8fafc;
}

.employer-applicant-fit strong {
  display: block;
  font-size: 12px;
}

.employer-applicant-fit p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.employer-applicant-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.employer-applicant-breakdown span {
  padding: 7px 9px;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
}

.employer-applicant-breakdown strong {
  margin-left: 4px;
  color: #0f172a;
}

.employer-applicant-actions {
  padding-left: 20px;
  border-left: 1px solid #edf0f4;
}

.employer-applicant-actions label {
  display: block;
  font-size: 12px;
  font-weight: 700;
}

.employer-applicant-actions select {
  width: 100%;
  min-height: 42px;
  margin-top: 6px;
  padding: 0 10px;
  border: 1px solid #dbe2ea;
  border-radius: 9px;
  background: #fff;
}

.employer-cv-info {
  margin-top: 20px;
}

.employer-cv-info strong,
.employer-cv-info span {
  display: block;
}

.employer-cv-info strong {
  font-size: 12px;
}

.employer-cv-info span {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #64748b;
  font-size: 11px;
}

@media (max-width: 800px) {
  .employer-applicants-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .employer-applicant-card {
    grid-template-columns: 1fr;
  }

  .employer-applicant-actions {
    padding: 18px 0 0;
    border-top: 1px solid #edf0f4;
    border-left: 0;
  }
}

/* Employer CV actions */
.employer-cv-actions {
  display: flex;
  gap: 10px;
  margin-top: 9px;
  flex-wrap: wrap;
}

.employer-cv-actions a {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: #fff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.employer-cv-actions a:hover {
  background: #f8fafc;
}


/* Employer applicant inbox */
.employer-inbox-heading {
  margin: 34px 0 26px;
}

.employer-inbox-heading h1 {
  margin: 8px 0;
  font-size: 34px;
}

.employer-inbox-heading p {
  margin: 0;
  color: #64748b;
}

.employer-applicant-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.employer-applicant-filters {
  display: grid;
  grid-template-columns:
    minmax(160px, 1.4fr)
    repeat(3, minmax(130px, 1fr))
    auto
    auto;
  align-items: end;
  gap: 12px;
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.employer-applicant-filters label {
  font-size: 12px;
  font-weight: 700;
}

.employer-applicant-filters select {
  width: 100%;
  min-height: 42px;
  margin-top: 6px;
  padding: 0 10px;
  border: 1px solid #dbe2ea;
  border-radius: 9px;
  background: #fff;
}

.employer-inbox-list {
  display: grid;
  gap: 12px;
}

.employer-inbox-card {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(190px, 0.7fr)
    minmax(280px, 0.85fr);
  align-items: start;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.employer-inbox-candidate {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.employer-inbox-candidate > div:last-child {
  flex: 1;
  min-width: 0;
}

.employer-inbox-name-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.employer-inbox-job {
  min-width: 0;
}

.employer-inbox-job > span,
.employer-inbox-job small {
  display: block;
  color: #64748b;
  font-size: 11px;
}

.employer-inbox-job a {
  display: block;
  margin: 4px 0;
  color: #0f172a;
  text-decoration: none;
}

.employer-inbox-actions {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  align-items: center;
}

.employer-inbox-actions .application-status-form,
.employer-inbox-actions .application-status-feedback,
.employer-inbox-actions .candidate-notify-control {
  grid-column: 1 / -1;
}

.employer-inbox-actions .application-status-form {
  margin: 0;
}

.employer-inbox-actions .application-status-feedback {
  min-width: 0;
  min-height: 18px;
}

.employer-inbox-actions .candidate-notify-control {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.employer-inbox-actions .candidate-notify-control
.employer-notify-candidate-btn {
  width: 100%;
  min-width: 0;
}

.employer-inbox-actions .candidate-notify-control
.employer-notify-candidate-btn[hidden],
.employer-applicant-actions .candidate-notify-control
.employer-notify-candidate-btn[hidden] {
  display: none !important;
}

.employer-inbox-actions
.employer-interview-btn[hidden],
.employer-applicant-actions
.employer-interview-btn[hidden] {
  display: none !important;
}

.employer-inbox-actions .candidate-notify-state {
  max-width: none;
  width: 100%;
  color: var(--fj-text-muted);
  font-size: var(--fj-xs);
  font-weight: 600;
  line-height: 1.4;
}

.application-status-feedback {
  color: var(--fj-text-muted);
  font-size: var(--fj-xs);
  font-weight: 700;
  line-height: 1.35;
}

.application-status-feedback.is-success {
  color: #15803d;
}

.employer-inbox-actions .employer-inbox-button {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.employer-inbox-actions select {
  width: 100%;
  min-height: 40px;
  padding: 0 9px;
  border: 1px solid #dbe2ea;
  border-radius: 9px;
  background: #fff;
}

.employer-inbox-button {
  min-height: 38px;
  padding: 8px 10px;
  text-align: center;
}

/* =========================================================
   Employer private applicant notes
   Compact rail + modal editor
   ========================================================= */

.employer-private-note {
  width: 100%;
  min-width: 0;

  margin-top: 4px;
  padding-top: 16px;

  border-top:
    1px solid #edf0f4;

  box-sizing: border-box;
}


.employer-inbox-actions
.employer-private-note {
  grid-column: 1 / -1;
}


.employer-private-note-compact {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 12px;

  min-width: 0;
}


.employer-private-note-compact-copy {
  min-width: 0;
  flex: 1;
}


.employer-private-note-compact-title {
  display: flex;
  align-items: center;

  gap: 7px;

  color: var(--fj-text, #0f172a);

  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}


.employer-private-note-help {
  display: block;

  margin-top: 2px;

  color: var(--fj-text-muted, #64748b);

  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}


.employer-private-note-lock {
  display: inline-flex;
  align-items: center;

  padding: 3px 7px;

  border-radius: 999px;

  background: #f1f5f9;

  color: #64748b;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}


.employer-private-note-preview {
  display: block;

  max-width: 100%;

  margin-top: 8px;

  overflow: hidden;

  color: #475569;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.employer-private-note-preview.is-error {
  color: #b42318;
}


.employer-private-note-open {
  flex: 0 0 auto;

  min-height: 36px;

  padding: 0 11px;

  border-radius: 9px;

  font-size: 12px;
  font-weight: 700;
}


.employer-private-note.is-loading
.employer-private-note-open {
  opacity: .6;
}


.employer-private-note-modal[hidden] {
  display: none !important;
}


.employer-private-note-modal {
  position: fixed;
  inset: 0;

  z-index: 10050;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
}


.employer-private-note-modal
.app-confirm-backdrop {
  position: absolute;
  inset: 0;
}


.employer-private-note-dialog {
  position: relative;

  width: min(620px, 100%);

  max-height:
    calc(100vh - 48px);

  overflow-y: auto;

  padding: 28px;

  border-radius: 16px;

  background: #fff;
}


.employer-private-note-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 20px;
}


.employer-private-note-modal-head h2 {
  margin: 6px 0 6px;

  color: var(--fj-text, #0f172a);

  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
}


.employer-private-note-modal-head p {
  margin: 0;

  color: var(--fj-text-muted, #64748b);

  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}


.employer-private-note-modal-close {
  flex: 0 0 auto;

  width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border:
    1px solid var(--fj-border, #e2e8f0);

  border-radius: 10px;

  background: #fff;

  color: #475569;

  font-family: inherit;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;
}


.employer-private-note-modal-close:hover {
  background: #f8fafc;
}


.employer-private-note-textarea {
  display: block;

  width: 100%;
  min-height: 170px;

  resize: vertical;

  box-sizing: border-box;
}


.employer-private-note-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 16px;
}


.employer-private-note-status {
  min-width: 0;

  color: #64748b;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}


.employer-private-note-status.is-success {
  color: #047857;
}


.employer-private-note-status.is-error {
  color: #b42318;
}


.employer-private-note-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  margin-left: auto;
}


.employer-private-note-modal-actions
.btn {
  min-width: 100px;
}


@media (max-width: 600px) {

  .employer-private-note-compact {
    align-items: stretch;
    flex-direction: column;
  }


  .employer-private-note-open {
    width: 100%;
  }


  .employer-private-note-modal {
    padding: 14px;
  }


  .employer-private-note-dialog {
    padding: 20px;
  }


  .employer-private-note-modal-footer {
    align-items: stretch;
    flex-direction: column;
  }


  .employer-private-note-modal-actions {
    width: 100%;
    margin-left: 0;
  }


  .employer-private-note-modal-actions
  .btn {
    flex: 1;
  }
}


/* =========================================================
   Employer applicant workflow actions
   FindJobs standard
   ========================================================= */

.employer-applicant-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;

  min-width: 220px;

  padding-left: 22px;

  border-left:
    1px solid var(--fj-border, #e2e8f0);
}


.employer-applicant-actions
.application-status-form {
  margin: 0;
}


.employer-applicant-actions
.application-status-form label {
  display: block;

  color: var(--fj-text, #0f172a);

  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}


.employer-applicant-actions
.application-status-form select,
.employer-inbox-actions
.application-status-form select {
  width: 100%;

  height: 44px;
  min-height: 44px;

  margin-top: 7px;

  padding: 0 12px;

  border:
    1px solid #dbe2ea;

  border-radius: 10px;

  background: #fff;

  color: var(--fj-text, #0f172a);

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}


.employer-applicant-actions
.candidate-notify-control,
.employer-inbox-actions
.candidate-notify-control {
  display: flex;
  flex-direction: column;

  gap: 10px;

  width: 100%;
  min-width: 0;
}


.employer-applicant-actions
.candidate-notify-state,
.employer-inbox-actions
.candidate-notify-state {
  display: block;

  width: 100%;

  padding: 12px 13px;

  border:
    1px solid #e2e8f0;

  border-radius: 10px;

  background: #f8fafc;

  box-sizing: border-box;
}


.employer-applicant-actions
.candidate-notify-state strong,
.employer-inbox-actions
.candidate-notify-state strong {
  display: block;

  margin: 0 0 3px;

  color: var(--fj-text, #0f172a);

  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}


.employer-applicant-actions
.candidate-notify-state span,
.employer-inbox-actions
.candidate-notify-state span {
  display: block;

  color: var(--fj-text-muted, #64748b);

  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}


.employer-applicant-actions
.candidate-notify-state[hidden],
.employer-inbox-actions
.candidate-notify-state[hidden] {
  display: none !important;
}


.employer-applicant-actions
.employer-notify-candidate-btn,
.employer-inbox-actions
.employer-notify-candidate-btn {
  width: 100%;

  height: 44px;
  min-height: 44px;

  padding: 0 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  font-size: 14px;
  font-weight: 700;

  line-height: 1;
  text-align: center;
}


.employer-applicant-actions
.application-status-feedback {
  min-height: 0;
}


.employer-applicant-actions
.employer-cv-info {
  margin-top: 4px;

  padding-top: 16px;

  border-top:
    1px solid #edf0f4;
}


.employer-applicant-actions
.employer-cv-info strong {
  font-size: 13px;
}


.employer-applicant-actions
.employer-cv-info span {
  margin-top: 5px;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}


.employer-applicant-actions
.employer-cv-actions {
  margin-top: 10px;

  gap: 8px;
}


.employer-applicant-actions
.employer-cv-actions a {
  min-height: 36px;

  padding: 0 11px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  font-size: 12px;
  font-weight: 700;
}


@media (max-width: 800px) {

  .employer-applicant-actions {
    min-width: 0;

    padding:
      20px 0 0;

    border-left: 0;

    border-top:
      1px solid #edf0f4;
  }

}


/* Fix per-job applicant heading collision */
.employer-applicants-head .job-back-link {
  display: block;
  margin-bottom: 18px;
}

.employer-applicants-head .eyebrow {
  display: block;
  margin-bottom: 8px;
}

@media (max-width: 1000px) {
  .employer-applicant-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employer-applicant-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employer-inbox-card {
    grid-template-columns: 1fr;
  }

  .employer-inbox-actions {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

@media (max-width: 600px) {
  .employer-applicant-stats,
  .employer-applicant-filters {
    grid-template-columns: 1fr;
  }
}


/* Employer job management */
.employer-job-main {
  min-width: 0;
}

.employer-job-row-meta {
  display: flex;
  align-items: center;
  gap: 22px;
}

.employer-job-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.employer-job-status-form {
  margin: 0;
}

.employer-job-action {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.employer-job-action:hover {
  background: #f8fafc;
}

.employer-job-action.danger {
  color: #b91c1c;
}

@media (max-width: 760px) {
  .employer-job-row-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .employer-applicant-link {
    align-items: flex-start;
  }
}


/* Admin */
.admin-shell {
  padding-bottom: 80px;
}

.admin-heading {
  margin: 36px 0 26px;
}

.admin-heading h1 {
  margin: 8px 0;
  font-size: 36px;
}

.admin-heading p {
  margin: 0;
  color: #64748b;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 36px;
}

.admin-section {
  scroll-margin-top: 90px;
  margin-top: 34px;
}

.admin-section-head {
  margin-bottom: 14px;
}

.admin-section-head h2 {
  margin: 5px 0 0;
  font-size: 22px;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.admin-table th,
.admin-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #edf0f4;
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #f8fafc;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table a {
  color: #0f172a;
  text-decoration: none;
}

.admin-action-button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #dbe2ea;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.admin-action-button.danger {
  color: #b91c1c;
}

.admin-error-cell {
  max-width: 280px;
  overflow-wrap: anywhere;
  color: #64748b;
}

@media (max-width: 1100px) {
  .admin-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   Admin shell v2
   ========================================================= */

.admin-body {
  margin: 0;
  background: #f6f8fb;
  color: #0f172a;
}

.admin-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 26px 18px 18px;
  border-right: 1px solid #e5e7eb;
  background: #fff;
}

.admin-sidebar-brand {
  padding: 4px 10px 28px;
}

.admin-sidebar-brand > a {
  color: #07111f;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.7px;
  text-decoration: none;
}

.admin-sidebar-brand > a span {
  color: #2563eb;
}

.admin-sidebar-brand small {
  display: block;
  margin-top: 5px;
  color: #94a3b8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.admin-sidebar-nav {
  display: grid;
  gap: 5px;
}

.admin-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 43px;
  padding: 0 11px;
  border-radius: 9px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.admin-sidebar-nav a:hover {
  background: #f8fafc;
  color: #0f172a;
}

.admin-sidebar-nav a.active {
  background: #eff6ff;
  color: #2563eb;
}

.admin-nav-icon {
  width: 18px;
  text-align: center;
  font-size: 15px;
}

.admin-sidebar-bottom {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #edf0f4;
}

.admin-sidebar-bottom a,
.admin-sidebar-bottom button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.admin-sidebar-bottom a:hover,
.admin-sidebar-bottom button:hover {
  color: #0f172a;
}

.admin-sidebar-bottom form {
  margin: 0;
}


.admin-content {
  width: 100%;
  max-width: 1450px;
  padding: 48px 46px 80px;
  overflow: hidden;
}

.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}

.admin-page-header h1 {
  margin: 7px 0 5px;
  font-size: 32px;
  line-height: 1.15;
}

.admin-page-header p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}


.admin-stat-grid-new {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 34px;
}

.admin-stat {
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 13px;
  background: #fff;
}

.admin-stat span {
  display: block;
  margin-bottom: 6px;
  color: #64748b;
  font-size: 11px;
}

.admin-stat strong {
  font-size: 27px;
  line-height: 1;
}


.admin-panel {
  margin-top: 24px;
}

.admin-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 11px;
}

.admin-panel-head h2 {
  margin: 0;
  font-size: 18px;
}

.admin-panel-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.admin-panel-head > a {
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}


.admin-filters {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.admin-filters input,
.admin-filters select {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.admin-filters input[type="search"] {
  min-width: 250px;
  flex: 1;
}


.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 20px;
}

.admin-pagination a {
  display: inline-flex;
  min-width: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.admin-pagination a.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}


.admin-source-grid {
  display: grid;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  gap: 16px;
}

.admin-source-card {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.admin-source-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-source-top h2 {
  margin: 0;
  font-size: 17px;
}

.admin-source-top p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.admin-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.admin-status-pill.success {
  background: #ecfdf5;
  color: #047857;
}

.admin-status-pill.muted {
  background: #f1f5f9;
  color: #64748b;
}

.admin-source-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.admin-source-details div {
  min-width: 0;
}

.admin-source-details dt {
  color: #94a3b8;
  font-size: 10px;
}

.admin-source-details dd {
  margin: 4px 0 0;
  color: #334155;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.admin-source-error {
  margin: 0 0 15px;
  padding: 10px;
  border-radius: 8px;
  background: #fff7ed;
}

.admin-source-error strong {
  color: #9a3412;
  font-size: 10px;
}

.admin-source-error p {
  margin: 4px 0 0;
  color: #9a3412;
  font-size: 10px;
  overflow-wrap: anywhere;
}


@media (max-width: 1200px) {
  .admin-stat-grid-new {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


@media (max-width: 850px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: relative;
    width: auto;
    height: auto;
    padding: 16px;
  }

  .admin-sidebar-brand {
    padding-bottom: 14px;
  }

  .admin-sidebar-nav {
    display: flex;
    overflow-x: auto;
  }

  .admin-sidebar-nav a {
    flex: 0 0 auto;
  }

  .admin-sidebar-bottom {
    display: none;
  }

  .admin-content {
    padding: 28px 18px 60px;
  }

  .admin-source-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 600px) {
  .admin-stat-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-filters input,
  .admin-filters select,
  .admin-filters .btn {
    width: 100%;
    min-width: 0;
  }

  .admin-source-details {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   FindJobs homepage v2
   ========================================================= */

.home-page {
  margin: 0;
  background: #ffffff;
  color: #0f172a;
}

.home-page * {
  box-sizing: border-box;
}


/* Header */
.home-header {
  max-width: 1240px;
  margin: 0 auto;
}

.home-nav {
  display: flex;
  align-items: center;
  gap: 23px;
}

.home-nav > a {
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.home-nav > a:hover {
  color: #0f172a;
}

.home-nav .home-nav-cta {
  padding: 9px 14px;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
}


/* Hero */
.home-hero {
  width: min(1240px, calc(100% - 48px));
  min-height: 650px;
  margin: 0 auto;
  padding: 80px 0 74px;
  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(420px, .92fr);
  align-items: center;
  gap: 82px;
}

.home-hero-copy {
  max-width: 660px;
}

.home-kicker {
  display: inline-flex;
  padding: 7px 11px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.home-hero h1 {
  max-width: 650px;
  margin: 0;
  color: #07111f;
  font-size: clamp(48px, 5vw, 70px);
  font-weight: 760;
  letter-spacing: -3.7px;
  line-height: .98;
}

.home-hero h1 span {
  color: #2563eb;
}

.home-hero-text {
  max-width: 610px;
  margin: 25px 0 0;
  color: #64748b;
  font-size: 18px;
  line-height: 1.65;
}

.home-hero-actions {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 30px;
}

.home-primary-btn {
  min-width: 150px;
}

.home-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
  color: #64748b;
  font-size: 11px;
}

.home-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.home-benefits b {
  color: #10b981;
}


/* Candidate alert status */
.home-alert-status {
  max-width: 540px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 25px;
  padding: 14px 15px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f8fbff;
}

.home-alert-status.paused {
  border-color: #e5e7eb;
  background: #f8fafc;
}

.home-alert-status-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dbeafe;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
}

.home-alert-status.paused .home-alert-status-icon {
  background: #e2e8f0;
  color: #64748b;
}

.home-alert-status strong,
.home-alert-status span {
  display: block;
}

.home-alert-status strong {
  margin-bottom: 2px;
  font-size: 12px;
}

.home-alert-status span {
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
}


/* Hero visual */
.home-match-visual {
  position: relative;
  max-width: 500px;
  width: 100%;
  justify-self: end;
  padding: 28px 10px 32px;
}

.home-match-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35px -25px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at center,
      rgba(37,99,235,.11),
      rgba(37,99,235,0) 65%
    );
}

.home-match-card {
  position: relative;
  z-index: 2;
  padding: 27px;
  border: 1px solid #dfe5ec;
  border-radius: 20px;
  background: rgba(255,255,255,.97);
  box-shadow:
    0 30px 80px rgba(15,23,42,.12),
    0 4px 16px rgba(15,23,42,.04);
}

.home-match-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.home-match-score {
  padding: 7px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11px;
  font-weight: 800;
}

.home-new-pill {
  color: #2563eb;
  font-size: 10px;
  font-weight: 800;
}

.home-example-company {
  margin-bottom: 6px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}

.home-match-card h2 {
  margin: 0 0 11px;
  color: #0f172a;
  font-size: 24px;
  letter-spacing: -.5px;
}

.home-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.home-job-meta span {
  padding: 5px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-size: 10px;
}

.home-match-reason {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 0 17px;
  padding: 13px;
  border-radius: 10px;
  background: #f8fafc;
}

.home-match-reason-icon {
  color: #2563eb;
}

.home-match-reason p {
  margin: 0;
  color: #475569;
  font-size: 11px;
  line-height: 1.55;
}

.home-skill-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.home-skill-row span {
  padding: 5px 8px;
  border: 1px solid #dbe2ea;
  border-radius: 6px;
  color: #475569;
  font-size: 10px;
  font-weight: 600;
}

.home-match-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 18px;
  border-top: 1px solid #edf0f4;
}

.home-match-breakdown div {
  padding: 0 13px;
  border-right: 1px solid #edf0f4;
}

.home-match-breakdown div:first-child {
  padding-left: 0;
}

.home-match-breakdown div:last-child {
  border-right: 0;
}

.home-match-breakdown span,
.home-match-breakdown strong {
  display: block;
}

.home-match-breakdown span {
  margin-bottom: 3px;
  color: #94a3b8;
  font-size: 9px;
}

.home-match-breakdown strong {
  font-size: 14px;
}

.home-floating-label {
  position: absolute;
  z-index: 3;
  padding: 9px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
  color: #475569;
  font-size: 10px;
  font-weight: 700;
}

.home-floating-label-top {
  top: 0;
  right: -15px;
}

.home-floating-label-bottom {
  bottom: 0;
  left: -25px;
}


/* Value strip */
.home-value-strip {
  width: min(1240px, calc(100% - 48px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.home-value-strip > div {
  padding: 24px 30px;
  border-right: 1px solid #e5e7eb;
}

.home-value-strip > div:first-child {
  padding-left: 0;
}

.home-value-strip > div:last-child {
  border-right: 0;
}

.home-value-strip strong,
.home-value-strip span {
  display: block;
}

.home-value-strip strong {
  margin-bottom: 4px;
  font-size: 12px;
}

.home-value-strip span {
  color: #64748b;
  font-size: 10px;
}


/* Shared homepage section */
.home-section {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 105px 0;
}

.home-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 45px;
}

.home-section-heading h2 {
  margin: 8px 0 0;
  color: #0f172a;
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -2px;
  line-height: 1.08;
}

.home-section-heading > p {
  max-width: 440px;
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}


/* How */
.home-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.home-step-card {
  position: relative;
  min-height: 285px;
  padding: 27px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}

.home-step-number {
  position: absolute;
  top: 22px;
  right: 23px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 800;
}

.home-step-icon {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  margin-bottom: 55px;
  border-radius: 11px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 17px;
  font-weight: 700;
}

.home-step-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.home-step-card p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.65;
}


/* Intelligence */
.home-intelligence {
  padding-top: 25px;
}

.home-intelligence-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 65px;
  border-radius: 24px;
  background: #0d1726;
  color: #fff;
}

.home-intelligence-copy h2 {
  max-width: 500px;
  margin: 10px 0 17px;
  color: #fff;
  font-size: 44px;
  letter-spacing: -1.8px;
}

.home-intelligence-copy p {
  max-width: 510px;
  margin: 0 0 23px;
  color: #a8b4c6;
  font-size: 14px;
  line-height: 1.75;
}

.home-intelligence-card .eyebrow {
  color: #60a5fa;
}

.home-intelligence-card .home-text-link {
  color: #fff;
}

.home-text-link {
  color: #2563eb;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.home-score-demo {
  padding: 27px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 17px;
  background: rgba(255,255,255,.06);
}

.home-score-main {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.home-score-main strong {
  display: block;
  color: #6ee7b7;
  font-size: 52px;
  letter-spacing: -2px;
}

.home-score-main span {
  color: #cbd5e1;
  font-size: 11px;
}

.home-score-lines {
  display: grid;
  gap: 14px;
  padding-top: 22px;
}

.home-score-lines > div {
  display: grid;
  grid-template-columns: 75px 1fr 30px;
  align-items: center;
  gap: 10px;
  font-size: 10px;
}

.home-score-lines > div > span {
  color: #cbd5e1;
}

.home-score-lines > div > div {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
}

.home-score-lines i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #60a5fa;
}


/* Alerts */
.home-alert-section {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 95px;
}

.home-alert-art {
  min-height: 380px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 50% 35%,
      #dbeafe 0,
      #eff6ff 40%,
      #f8fafc 75%
    );
}

.home-alert-phone {
  width: min(360px, calc(100% - 50px));
  padding: 20px;
  border: 1px solid #dbe2ea;
  border-radius: 17px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 25px 60px rgba(15,23,42,.12);
}

.home-alert-phone-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 13px;
  color: #64748b;
  font-size: 10px;
}

.home-alert-phone strong {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
}

.home-alert-phone p {
  margin: 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
}

.home-notification-action {
  display: inline-block;
  margin-top: 13px;
  color: #2563eb;
  font-size: 10px;
  font-weight: 800;
}

.home-alert-copy h2 {
  max-width: 580px;
  margin: 10px 0 17px;
  font-size: 43px;
  letter-spacing: -1.8px;
  line-height: 1.08;
}

.home-alert-copy > p {
  max-width: 580px;
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.75;
}

.home-alert-features {
  display: grid;
  gap: 15px;
  margin-top: 29px;
}

.home-alert-features > div {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.55;
}

.home-alert-features > div > b {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ecfdf5;
  color: #047857;
  font-size: 10px;
}

.home-alert-features strong {
  display: block;
  margin-bottom: 1px;
  color: #0f172a;
  font-size: 11px;
}


/* Latest jobs */
.home-latest {
  padding-top: 50px;
}

.home-latest-heading {
  align-items: flex-end;
}

.home-job-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.home-job-card {
  min-height: 225px;
  display: flex;
  flex-direction: column;
  padding: 21px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  text-decoration: none;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.home-job-card:hover {
  transform: translateY(-2px);
  border-color: #bfdbfe;
  box-shadow: 0 15px 35px rgba(15,23,42,.07);
}

.home-job-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home-company-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
}

.home-direct-pill {
  padding: 4px 7px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 9px;
  font-weight: 800;
}

.home-job-card h3 {
  margin: 20px 0 5px;
  font-size: 16px;
  line-height: 1.3;
}

.home-job-company {
  margin: 0;
  color: #64748b;
  font-size: 11px;
}

.home-company-verified {
  color: #2563eb;
  font-weight: 900;
}

.home-job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.home-job-card-meta span {
  padding: 4px 7px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 9px;
}

.home-job-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  color: #2563eb;
  font-size: 10px;
  font-weight: 750;
}

.home-empty-jobs {
  padding: 30px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  text-align: center;
}


/* Employer */
.home-employer {
  padding-top: 50px;
}

.home-employer-inner {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 90px;
  align-items: center;
  padding: 66px;
  border-radius: 24px;
  background: #f8fafc;
}

.home-employer-inner h2 {
  max-width: 600px;
  margin: 10px 0 17px;
  font-size: 43px;
  letter-spacing: -1.8px;
  line-height: 1.08;
}

.home-employer-inner p {
  max-width: 590px;
  margin: 0 0 25px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.75;
}

.home-employer-preview {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 45px rgba(15,23,42,.06);
}

.home-employer-preview-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
}

.home-employer-preview-head span {
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.home-employer-preview-head strong {
  font-size: 10px;
}

.home-candidate-mini {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #edf0f4;
  border-radius: 10px;
}

.home-candidate-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
}

.home-candidate-mini strong,
.home-candidate-mini span {
  display: block;
}

.home-candidate-mini strong {
  font-size: 10px;
}

.home-candidate-mini span {
  margin-top: 2px;
  color: #64748b;
  font-size: 9px;
}

.home-candidate-mini > b {
  color: #047857;
  font-size: 12px;
}


/* FAQ */
.home-faq {
  padding-top: 65px;
}

.home-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.home-faq details {
  padding: 18px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  background: #fff;
}

.home-faq summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.home-faq details p {
  margin: 12px 0 2px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.65;
}


/* Final CTA */
.home-final-cta {
  width: min(1240px, calc(100% - 48px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin: 10px auto 90px;
  padding: 45px 48px;
  border-radius: 20px;
  background: #0d1726;
}

.home-final-cta .eyebrow {
  color: #60a5fa;
}

.home-final-cta h2 {
  max-width: 670px;
  margin: 8px 0 0;
  color: #fff;
  font-size: 34px;
  letter-spacing: -1.3px;
}

.home-final-actions {
  display: flex;
  gap: 9px;
  flex: 0 0 auto;
}

.home-final-cta .btn-secondary {
  border-color: rgba(255,255,255,.22);
  background: transparent;
  color: #fff;
}


/* Footer */
.home-footer {
  width: min(1240px, calc(100% - 48px));
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 30px;
  margin: 0 auto;
  padding: 32px 0 40px;
  border-top: 1px solid #e5e7eb;
}

.home-footer > div:first-child p {
  margin: 6px 0 0;
  color: #94a3b8;
  font-size: 10px;
}

.home-footer-links {
  display: flex;
  gap: 20px;
}

.home-footer-links a {
  color: #64748b;
  font-size: 10px;
  text-decoration: none;
}

.home-footer-copy {
  grid-column: 1 / -1;
  margin-top: 12px;
  color: #94a3b8;
  font-size: 9px;
}

.home-install-wrap {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
}

.home-install-button {
  padding: 9px 13px;
  border: 0;
  border-radius: 9px;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 10px 30px rgba(15,23,42,.2);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}


/* Homepage responsive */
@media (max-width: 1000px) {

  .home-hero {
    grid-template-columns: 1fr;
    gap: 55px;
    padding-top: 60px;
  }

  .home-hero-copy {
    max-width: 750px;
  }

  .home-match-visual {
    max-width: 580px;
    justify-self: center;
  }

  .home-intelligence-card,
  .home-alert-section,
  .home-employer-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .home-job-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 760px) {

  .home-header {
    align-items: flex-start;
  }

  .home-nav {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .home-nav > a:nth-child(2) {
    display: none;
  }

  .home-hero {
    width: min(100% - 32px, 1240px);
    padding: 50px 0 55px;
  }

  .home-hero h1 {
    font-size: 48px;
    letter-spacing: -2.5px;
  }

  .home-hero-text {
    font-size: 15px;
  }

  .home-section,
  .home-value-strip,
  .home-final-cta,
  .home-footer {
    width: min(100% - 32px, 1240px);
  }

  .home-value-strip {
    grid-template-columns: 1fr;
  }

  .home-value-strip > div {
    padding: 17px 0;
    border-right: 0;
    border-bottom: 1px solid #e5e7eb;
  }

  .home-value-strip > div:last-child {
    border-bottom: 0;
  }

  .home-section {
    padding: 75px 0;
  }

  .home-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .home-step-grid,
  .home-job-grid,
  .home-faq-grid {
    grid-template-columns: 1fr;
  }

  .home-intelligence-card,
  .home-employer-inner {
    padding: 35px 25px;
  }

  .home-intelligence-copy h2,
  .home-alert-copy h2,
  .home-employer-inner h2 {
    font-size: 34px;
  }

  .home-alert-section {
    gap: 45px;
  }

  .home-final-cta {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 60px;
    padding: 34px 25px;
  }

  .home-final-actions {
    width: 100%;
    flex-direction: column;
  }

  .home-final-actions .btn {
    width: 100%;
    text-align: center;
  }

  .home-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .home-footer-links {
    flex-wrap: wrap;
  }

}


@media (max-width: 520px) {

  .home-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .home-header .brand {
    font-size: 18px;
  }

  .home-nav > a {
    font-size: 10px;
  }

  .home-nav > a:first-child {
    display: none;
  }

  .home-nav form {
    display: none;
  }

  .home-hero h1 {
    font-size: 42px;
  }

  .home-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-hero-actions .btn {
    width: 100%;
    text-align: center;
  }

  .home-benefits {
    gap: 10px 15px;
  }

  .home-match-card {
    padding: 20px;
  }

  .home-floating-label {
    display: none;
  }

  .home-match-breakdown {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .home-alert-art {
    min-height: 300px;
  }

  .home-score-lines > div {
    grid-template-columns: 60px 1fr 25px;
  }

}

/* Keep top Get started CTA white on hover */
.home-nav .home-nav-cta,
.home-nav .home-nav-cta:hover,
.home-nav .home-nav-cta:focus {
  background: #0f172a;
  color: #fff;
}


/* =========================================================
   Global site width normalization
   ========================================================= */

:root {
  --site-max-width: 1400px;
  --site-gutter: 32px;
}

/* Shared public/header width */
.site-header,
.home-header,
.dashboard-shell,
.home-hero,
.home-value-strip,
.home-section,
.home-final-cta,
.home-footer {
  width: min(
    var(--site-max-width),
    calc(100% - (var(--site-gutter) * 2))
  );
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Inner pages that already rely on max-width */
.dashboard-shell {
  max-width: var(--site-max-width);
}

/* Admin content can use the same wider working area */
.admin-content {
  max-width: var(--site-max-width);
}

/* Keep the homepage hero from being narrower than other sections */
.home-hero {
  width: min(
    var(--site-max-width),
    calc(100% - (var(--site-gutter) * 2))
  );
}

/* Responsive gutters */
@media (max-width: 900px) {
  :root {
    --site-gutter: 24px;
  }
}

@media (max-width: 600px) {
  :root {
    --site-gutter: 16px;
  }
}

/* =========================================================
   Homepage spacing + width polish
   ========================================================= */

:root {
  --site-max-width: 1500px;
}

/* Slightly wider overall public layout */
.site-header,
.home-header,
.dashboard-shell,
.home-hero,
.home-value-strip,
.home-section,
.home-final-cta,
.home-footer {
  width: min(
    var(--site-max-width),
    calc(100% - (var(--site-gutter) * 2))
  );
  max-width: var(--site-max-width);
}

/* Hero: keep breathing room, but use width better */
.home-hero {
  min-height: 610px;
  padding-top: 58px;
  padding-bottom: 58px;
  gap: 70px;
}

/* General section rhythm */
.home-section {
  padding-top: 78px;
  padding-bottom: 78px;
}

/* Reduce especially large transitions */
.home-how {
  padding-top: 82px;
  padding-bottom: 62px;
}

.home-intelligence {
  padding-top: 20px;
  padding-bottom: 68px;
}

.home-alert-section {
  padding-top: 70px;
  padding-bottom: 70px;
}

.home-latest {
  padding-top: 55px;
  padding-bottom: 65px;
}

.home-employer {
  padding-top: 45px;
  padding-bottom: 68px;
}

.home-faq {
  padding-top: 55px;
  padding-bottom: 60px;
}

/* Section headings: less empty space underneath */
.home-section-heading {
  margin-bottom: 34px;
}

/* How it works cards: tighter and more deliberate */
.home-step-card {
  min-height: 245px;
  padding: 24px;
}

.home-step-icon {
  margin-bottom: 38px;
}

.home-step-card h3 {
  margin-bottom: 8px;
}

/* Dark intelligence section */
.home-intelligence-card {
  padding: 56px 60px;
  gap: 65px;
}

/* Alerts section */
.home-alert-section {
  gap: 72px;
}

.home-alert-art {
  min-height: 340px;
}

/* Latest jobs: give real listings more presence */
.home-job-grid {
  gap: 16px;
}

.home-job-card {
  min-height: 245px;
  padding: 24px;
}

.home-job-card h3 {
  margin-top: 22px;
  font-size: 17px;
}

.home-job-card-meta {
  margin-top: 16px;
}

.home-job-card-bottom {
  padding-top: 20px;
}

/* Employer block */
.home-employer-inner {
  padding: 56px 60px;
  gap: 70px;
}

/* FAQ tighter */
.home-faq-grid {
  gap: 9px 12px;
}

/* Final CTA closer to FAQ */
.home-final-cta {
  margin-top: 0;
  margin-bottom: 70px;
  padding: 40px 44px;
}

/* Footer */
.home-footer {
  padding-top: 28px;
  padding-bottom: 34px;
}

/* Keep mobile spacing comfortable */
@media (max-width: 1000px) {
  .home-section {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .home-hero {
    min-height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width: 760px) {
  .home-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .home-step-card {
    min-height: auto;
  }

  .home-intelligence-card,
  .home-employer-inner {
    padding: 32px 24px;
  }
}

/* =========================================================
   Browse Jobs polish
   ========================================================= */

/* If the page uses a nested content wrapper, let it breathe */
.jobs-page .jobs-content,
.jobs-page .jobs-container {
  max-width: none;
  width: 100%;
}

/* Browse Jobs intro follows the standard signed-in page hierarchy */
.jobs-page .jobs-page-intro {
  padding-top: 40px;
  padding-bottom: 28px;
}

.jobs-page .jobs-page-intro h1 {
  margin: 8px 0 9px;
  color: var(--fj-text);
  font-size: var(--fj-h1);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.jobs-page .jobs-page-intro p {
  max-width: 650px;
  margin: 0;
  color: var(--fj-text-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

/* Search/filter card */
.jobs-page .job-filters,
.jobs-page .jobs-filter-card,
.jobs-page .browse-filters {
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,.035);
}

.jobs-page .job-filters input,
.jobs-page .job-filters select,
.jobs-page .jobs-filter-card input,
.jobs-page .jobs-filter-card select,
.jobs-page .browse-filters input,
.jobs-page .browse-filters select {
  min-height: 44px;
}

/* Results heading */
.jobs-page .jobs-results-head,
.jobs-page .jobs-list-heading {
  margin-top: 20px;
  margin-bottom: 12px;
}

.jobs-page .jobs-results-head h2,
.jobs-page .jobs-list-heading h2 {
  margin-bottom: 3px;
}

/* Job results now use the shared premium-job-card system. */

/* Mobile */

/* =========================================================
   Signup / auth page polish
   ========================================================= */

.auth-page {
  min-height: 100vh;
  background: #fafafa;
}

.auth-page .site-header {
  width: min(
    var(--site-max-width),
    calc(100% - (var(--site-gutter) * 2))
  );
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
}

.auth-page .auth-shell,
.auth-page .auth-container,
.auth-page main {
  width: min(
    620px,
    calc(100% - (var(--site-gutter) * 2))
  );
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* Reduce excessive desktop whitespace */
.auth-page .auth-shell,
.auth-page .auth-container {
  padding-top: 58px;
  padding-bottom: 58px;
}

/* Main signup card */
.auth-page .auth-card {
  width: 100%;
  max-width: none;
  padding: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(15,23,42,.07);
}

.auth-page .auth-card h1 {
  margin-top: 8px;
  margin-bottom: 10px;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.auth-page .auth-card > p,
.auth-page .auth-intro {
  margin-bottom: 22px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.65;
}

/* Candidate / employer role cards */
.auth-page .account-type-options,
.auth-page .account-type-grid,
.auth-page .signup-role-options {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.auth-page .account-type-option,
.auth-page .signup-role-option {
  position: relative;
  min-height: 92px;
  display: flex;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid #dfe5ec;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.auth-page .account-type-option:hover,
.auth-page .signup-role-option:hover {
  border-color: #bfdbfe;
  background: #fbfdff;
}

.auth-page .account-type-option:has(input:checked),
.auth-page .signup-role-option:has(input:checked) {
  border-color: #3b82f6;
  background: #f8fbff;
  box-shadow: 0 0 0 1px rgba(59,130,246,.08);
}

.auth-page .account-type-option input,
.auth-page .signup-role-option input {
  margin-left: auto;
  transform: scale(1.15);
  accent-color: #2563eb;
}

/* Form spacing */
.auth-page .auth-form {
  display: grid;
  gap: 18px;
}

.auth-page .auth-form label {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}

.auth-page .auth-form input,
.auth-page .auth-form select {
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid #dbe2ea;
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.auth-page .auth-form .btn-primary {
  min-height: 48px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 750;
}

/* Bottom sign-in link */
.auth-page .auth-footer,
.auth-page .auth-switch {
  margin-top: 17px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
}

.auth-page .auth-footer a,
.auth-page .auth-switch a {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

/* Mobile */
@media (max-width: 650px) {
  .auth-page .auth-shell,
  .auth-page .auth-container {
    padding-top: 30px;
    padding-bottom: 35px;
  }

  .auth-page .auth-card {
    padding: 24px 20px;
    border-radius: 14px;
  }

  .auth-page .auth-card h1 {
    font-size: 31px;
  }

  .auth-page .account-type-option,
  .auth-page .signup-role-option {
    min-height: 82px;
    padding: 15px 16px;
  }
}

/* Final signup alignment polish */
.auth-page .auth-shell,
.auth-page .auth-container {
  padding-top: 72px;
  padding-bottom: 72px;
}

.auth-page .account-type-option,
.auth-page .signup-role-option {
  min-height: 82px;
  padding: 16px 18px;
}

.auth-page .account-type-option input,
.auth-page .signup-role-option input {
  width: 22px;
  height: 22px;
  margin-left: auto;
  flex: 0 0 auto;
}

.auth-page .auth-form {
  gap: 16px;
}

.auth-page .auth-card {
  padding-top: 32px;
  padding-bottom: 28px;
}

@media (min-width: 900px) {
  .auth-page main {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}


/* =========================================================
   Signup page — two-column desktop layout
   ========================================================= */

.signup-page {
  min-height: 100vh;
  background: #f8fafc;
}

.signup-page .auth-header {
  width: min(
    var(--site-max-width),
    calc(100% - (var(--site-gutter) * 2))
  );
  max-width: var(--site-max-width);
  margin: 0 auto;
}


.signup-shell {
  width: min(
    1080px,
    calc(100% - (var(--site-gutter) * 2))
  );
  margin: 0 auto;
  padding: 62px 0 80px;
}


.signup-card {
  display: grid;
  grid-template-columns:
    minmax(0, .92fr)
    minmax(420px, 1.08fr);
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 25px 70px rgba(15,23,42,.08);
}


/* Left */
.signup-intro {
  padding: 54px 48px;
  background:
    linear-gradient(
      145deg,
      #f8fbff 0%,
      #eef5ff 100%
    );
  border-right: 1px solid #e2e8f0;
}

.signup-intro h1 {
  margin: 12px 0 16px;
  color: #0f172a;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -1.8px;
}

.signup-intro > p {
  max-width: 430px;
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}


.signup-role-summary {
  display: grid;
  gap: 20px;
  margin-top: 52px;
}

.signup-role-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.signup-summary-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  color: #2563eb;
  box-shadow:
    0 4px 12px rgba(15,23,42,.05);
  font-size: 15px;
  font-weight: 800;
}

.signup-role-summary-item strong,
.signup-role-summary-item span {
  display: block;
}

.signup-role-summary-item strong {
  margin-bottom: 4px;
  color: #0f172a;
  font-size: 13px;
}

.signup-role-summary-item span {
  color: #64748b;
  font-size: 11px;
  line-height: 1.55;
}


/* Right */
.signup-form-side {
  padding: 48px;
}

.signup-form-heading {
  margin-bottom: 26px;
}

.signup-form-heading h2 {
  margin: 0 0 7px;
  color: #0f172a;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -1px;
}

.signup-form-heading p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}


.signup-form {
  display: grid;
  gap: 20px;
}


/* Role cards */
.signup-page .account-type-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin: 0;
}

.signup-page .account-type-card {
  position: relative;
  min-height: 112px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.signup-page .account-type-card:hover {
  border-color: #bfdbfe;
}

.signup-page .account-type-card:has(input:checked) {
  border-color: #2563eb;
  background: #f8fbff;
  box-shadow:
    0 0 0 1px rgba(37,99,235,.08);
}

.signup-page .account-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.account-type-radio {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: block;
  margin-top: 1px;
  border: 1.5px solid #94a3b8;
  border-radius: 50%;
  background: #fff;
}

.account-type-card:has(input:checked)
.account-type-radio {
  border: 6px solid #2563eb;
}

.account-type-copy {
  min-width: 0;
}

.signup-page .account-type-copy strong,
.signup-page .account-type-copy small {
  display: block;
}

.signup-page .account-type-copy strong {
  margin-bottom: 5px;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.35;
}

.signup-page .account-type-copy small {
  color: #64748b;
  font-size: 10px;
  line-height: 1.5;
}


/* Fields */
.signup-field {
  display: grid;
  gap: 7px;
}

.signup-page .signup-field label {
  color: #0f172a;
  font-size: 11px;
  font-weight: 750;
}

.signup-page .signup-field input {
  width: 100%;
  min-height: 47px;
  padding: 0 13px;
  border: 1px solid #dbe2ea;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  outline: none;
}

.signup-page .signup-field input:focus {
  border-color: #60a5fa;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.09);
}

.signup-password-hint {
  color: #94a3b8;
  font-size: 9px;
}


.signup-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  justify-content: center;
}


.signup-page .auth-switch {
  margin: 19px 0 0;
  color: #64748b;
  font-size: 11px;
  text-align: center;
}

.signup-page .auth-switch a {
  color: #2563eb;
  font-weight: 750;
  text-decoration: none;
}


/* Mobile */
@media (max-width: 900px) {

  .signup-shell {
    padding-top: 35px;
  }

  .signup-card {
    grid-template-columns: 1fr;
  }

  .signup-intro {
    padding: 36px 30px;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  .signup-intro h1 {
    font-size: 34px;
  }

  .signup-role-summary {
    margin-top: 30px;
  }

  .signup-form-side {
    padding: 36px 30px;
  }

}


@media (max-width: 560px) {

  .signup-shell {
    width: calc(100% - 28px);
    padding: 22px 0 45px;
  }

  .signup-card {
    border-radius: 16px;
  }

  .signup-intro,
  .signup-form-side {
    padding: 27px 20px;
  }

  .signup-intro h1 {
    font-size: 30px;
  }

  .signup-page .account-type-picker {
    grid-template-columns: 1fr;
  }

  .signup-page .account-type-card {
    min-height: 82px;
  }

}

/* Signup final proportion fix */

.signup-shell {
  width: min(
    1180px,
    calc(100% - (var(--site-gutter) * 2))
  );
  padding-top: 48px;
  padding-bottom: 60px;
}

.signup-card {
  grid-template-columns:
    minmax(380px, .95fr)
    minmax(500px, 1.05fr);
}

.signup-intro {
  padding: 46px 42px;
}

.signup-intro h1 {
  max-width: 390px;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1.7px;
}

.signup-intro > p {
  max-width: 390px;
  font-size: 13px;
  line-height: 1.65;
}

.signup-role-summary {
  margin-top: 38px;
  gap: 16px;
}

.signup-role-summary-item span {
  max-width: 300px;
}

.signup-form-side {
  padding: 42px 46px;
}

.signup-page .account-type-picker {
  gap: 12px;
}

.signup-page .account-type-card {
  min-height: 96px;
}

@media (max-width: 900px) {
  .signup-card {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Signup width conflict fix
   Old auth CSS was limiting auth-page main to 620px
   ========================================================= */

.signup-page main.signup-shell {
  width: min(
    1180px,
    calc(100% - (var(--site-gutter) * 2))
  );
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.signup-page .signup-card {
  width: 100%;
  max-width: none;
  grid-template-columns:
    minmax(380px, .95fr)
    minmax(500px, 1.05fr);
}

@media (max-width: 900px) {
  .signup-page main.signup-shell {
    width: min(
      100% - 32px,
      720px
    );
    max-width: 720px;
  }

  .signup-page .signup-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .signup-page main.signup-shell {
    width: calc(100% - 28px);
  }
}


/* =========================================================
   Login page — matching signup visual system
   ========================================================= */

.login-page {
  min-height: 100vh;
  background: #f8fafc;
}

.login-page .auth-header {
  width: min(
    var(--site-max-width),
    calc(100% - (var(--site-gutter) * 2))
  );
  max-width: var(--site-max-width);
  margin: 0 auto;
}


.login-page main.login-shell {
  width: min(
    1040px,
    calc(100% - (var(--site-gutter) * 2))
  );
  max-width: 1040px;
  margin: 0 auto;
  padding: 70px 0 80px;
}


.login-card {
  display: grid;
  grid-template-columns:
    minmax(360px, .95fr)
    minmax(440px, 1.05fr);
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 25px 70px rgba(15,23,42,.08);
}


/* Left panel */
.login-intro {
  padding: 52px 46px;
  background:
    linear-gradient(
      145deg,
      #f8fbff 0%,
      #eef5ff 100%
    );
  border-right: 1px solid #e2e8f0;
}

.login-intro h1 {
  margin: 12px 0 16px;
  color: #0f172a;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -1.8px;
}

.login-intro > p {
  max-width: 390px;
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}


.login-benefits {
  display: grid;
  gap: 20px;
  margin-top: 44px;
}

.login-benefits > div {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.login-benefit-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  color: #2563eb;
  box-shadow:
    0 4px 12px rgba(15,23,42,.05);
  font-size: 11px;
  font-weight: 800;
}

.login-benefits strong,
.login-benefits span {
  display: block;
}

.login-benefits strong {
  margin-bottom: 4px;
  color: #0f172a;
  font-size: 12px;
}

.login-benefits div div span {
  max-width: 300px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.55;
}


/* Right panel */
.login-form-side {
  padding: 50px 48px;
}

.login-form-heading {
  margin-bottom: 28px;
}

.login-form-heading h2 {
  margin: 0 0 7px;
  color: #0f172a;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -1px;
}

.login-form-heading p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}


.login-form {
  display: grid;
  gap: 20px;
}

.login-field {
  display: grid;
  gap: 7px;
}

.login-page .login-field label {
  color: #0f172a;
  font-size: 11px;
  font-weight: 750;
}

.login-page .login-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #dbe2ea;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  outline: none;
}

.login-page .login-field input:focus {
  border-color: #60a5fa;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.09);
}

.login-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  justify-content: center;
}


.login-page .auth-switch {
  margin: 20px 0 0;
  color: #64748b;
  font-size: 11px;
  text-align: center;
}

.login-page .auth-switch a {
  color: #2563eb;
  font-weight: 750;
  text-decoration: none;
}


/* Responsive */
@media (max-width: 900px) {

  .login-page main.login-shell {
    width: min(
      720px,
      calc(100% - 32px)
    );
    padding-top: 38px;
  }

  .login-card {
    grid-template-columns: 1fr;
  }

  .login-intro {
    padding: 36px 30px;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  .login-intro h1 {
    font-size: 34px;
  }

  .login-benefits {
    margin-top: 30px;
  }

  .login-form-side {
    padding: 36px 30px;
  }

}


@media (max-width: 560px) {

  .login-page main.login-shell {
    width: calc(100% - 28px);
    padding: 22px 0 45px;
  }

  .login-card {
    border-radius: 16px;
  }

  .login-intro,
  .login-form-side {
    padding: 27px 20px;
  }

  .login-intro h1 {
    font-size: 30px;
  }

}

/* Fix login benefit tick alignment */
.login-benefits .login-benefit-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  border-radius: 9px;
  background: #fff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
}

/* =========================================================
   Candidate dashboard polish
   ========================================================= */

/* Wider candidate dashboard */
.dashboard-page .dashboard-shell {
  width: min(
    var(--site-max-width),
    calc(100% - (var(--site-gutter) * 2))
  );
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Top dashboard hero */
.dashboard-page .dashboard-hero {
  padding-top: 34px;
  margin-bottom: 24px;
}

.dashboard-page .dashboard-hero h1 {
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 40px;
  letter-spacing: -1.6px;
}

.dashboard-page .dashboard-hero > div:first-child > p {
  max-width: 720px;
  font-size: 14px;
  line-height: 1.6;
}

/* Keep search status aligned nicely */
.dashboard-page .alert-status-card {
  align-self: center;
}

/* Stats: always use one clean row on desktop */
.dashboard-page .dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 34px;
}

.dashboard-page .dashboard-stat-card {
  min-height: 112px;
  padding: 20px;
}

.dashboard-page .dashboard-stat-card strong {
  font-size: 28px;
}

/* Main layout */
.dashboard-page .dashboard-content-grid,
.dashboard-page .dashboard-main-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    300px;
  gap: 22px;
  align-items: start;
}

/* Main match sections */
.dashboard-page .matches-section,
.dashboard-page .dashboard-match-section {
  margin-bottom: 36px;
}

.dashboard-page .matches-section-header,
.dashboard-page .section-heading-row {
  margin-bottom: 14px;
}

/* Match cards */
.dashboard-page .match-card,
.dashboard-page .job-match-card {
  padding: 20px;
  border-radius: 14px;
}

.dashboard-page .match-card + .match-card,
.dashboard-page .job-match-card + .job-match-card {
  margin-top: 12px;
}

/* Reduce unnecessary vertical height */
.dashboard-page .match-card-header,
.dashboard-page .job-match-card-header {
  margin-bottom: 12px;
}

.dashboard-page .match-card h3,
.dashboard-page .job-match-card h3 {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 18px;
}

/* Match metadata */
.dashboard-page .match-meta,
.dashboard-page .job-match-meta {
  gap: 6px;
  margin-top: 9px;
}

/* Explanation box */
.dashboard-page .match-reason,
.dashboard-page .match-explanation,
.dashboard-page .job-match-reason {
  margin-top: 13px;
  margin-bottom: 13px;
  padding: 12px 14px;
  border-radius: 9px;
}

/* Match buttons */
.dashboard-page .match-actions,
.dashboard-page .job-match-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.dashboard-page .match-actions .btn,
.dashboard-page .job-match-actions .btn {
  min-height: 38px;
  padding: 8px 14px;
}

/* Score pill */
.dashboard-page .match-score,
.dashboard-page .match-score-badge {
  min-width: 58px;
  padding: 9px 10px;
  text-align: center;
}

/* Sidebar */
.dashboard-page .profile-summary-card,
.dashboard-page .profile-card {
  padding: 20px;
  border-radius: 14px;
}

.dashboard-page .dashboard-sidebar {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 20px;
}

/* Keep-watch card tighter */
.dashboard-page .watch-card,
.dashboard-page .keep-watch-card {
  padding: 20px;
  border-radius: 14px;
}

/* Section spacing */
.dashboard-page .section-eyebrow {
  margin-bottom: 6px;
}

.dashboard-page .matches-title,
.dashboard-page .potential-title {
  margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 1050px) {
  .dashboard-page .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-page .dashboard-content-grid,
  .dashboard-page .dashboard-main-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-page .dashboard-sidebar {
    position: static;
  }
}

@media (max-width: 600px) {
  .dashboard-page .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .dashboard-page .dashboard-hero h1 {
    font-size: 34px;
  }

  .dashboard-page .match-card,
  .dashboard-page .job-match-card {
    padding: 16px;
  }
}

/* =========================================================
   FindJobs shared design system
   ========================================================= */

:root {
  --fj-max-width: 1500px;
  --fj-gutter: 32px;

  --fj-bg: #f8fafc;
  --fj-surface: #ffffff;
  --fj-surface-soft: #f8fafc;

  --fj-text: #0f172a;
  --fj-text-muted: #64748b;
  --fj-text-faint: #94a3b8;

  --fj-primary: #2563eb;
  --fj-primary-hover: #1d4ed8;
  --fj-success: #047857;
  --fj-danger: #b91c1c;

  --fj-border: #e2e8f0;
  --fj-border-soft: #edf0f4;

  --fj-radius-sm: 8px;
  --fj-radius-md: 12px;
  --fj-radius-lg: 16px;
  --fj-radius-xl: 22px;

  --fj-shadow-sm: 0 8px 24px rgba(15,23,42,.04);
  --fj-shadow-md: 0 18px 50px rgba(15,23,42,.07);

  --fj-h1: 40px;
  --fj-h2: 28px;
  --fj-h3: 18px;

  --fj-body: 14px;
  --fj-small: 12px;
  --fj-xs: 10px;

  --fj-section-gap: 34px;
  --fj-card-pad: 20px;
}

/* Shared width */
.site-header,
.dashboard-shell,
.profile-shell,
.jobs-shell,
.home-header,
.home-hero,
.home-section,
.home-footer {
  width: min(
    var(--fj-max-width),
    calc(100% - (var(--fj-gutter) * 2))
  );
  max-width: var(--fj-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Shared headings */
.eyebrow {
  color: var(--fj-primary);
  font-size: var(--fj-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dashboard-page h1,
.profile-page h1,
.jobs-page h1 {
  color: var(--fj-text);
  font-size: var(--fj-h1);
  line-height: 1.1;
  letter-spacing: -1.6px;
}

.dashboard-page h2,
.profile-page h2,
.jobs-page h2 {
  color: var(--fj-text);
  font-size: var(--fj-h2);
  line-height: 1.15;
  letter-spacing: -1px;
}

.dashboard-page h3,
.profile-page h3,
.jobs-page h3 {
  color: var(--fj-text);
  font-size: var(--fj-h3);
  line-height: 1.25;
}

/* Shared body copy */
.dashboard-page p,
.profile-page p,
.jobs-page p {
  color: var(--fj-text-muted);
  font-size: var(--fj-body);
  line-height: 1.6;
}

/* Shared buttons */
.btn {
  min-height: 40px;
  padding: 9px 14px;
  border-radius: var(--fj-radius-sm);
  font-size: var(--fj-small);
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
}

.btn-primary {
  border: 1px solid var(--fj-primary);
  background: var(--fj-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--fj-primary-hover);
  background: var(--fj-primary-hover);
  color: #fff;
}

.btn-secondary {
  border: 1px solid var(--fj-border);
  background: #fff;
  color: var(--fj-text);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--fj-surface-soft);
  color: var(--fj-text);
}

/* Shared cards */
.fj-card,
.profile-card,
.dashboard-stat-card,
.job-card,
.profile-section-card {
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);
  background: var(--fj-surface);
  box-shadow: none;
}

/* Shared form controls */
input,
select,
textarea {
  border-color: var(--fj-border);
  border-radius: var(--fj-radius-sm);
  font: inherit;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59,130,246,.08);
  outline: none;
}

@media (max-width: 900px) {
  :root {
    --fj-gutter: 24px;
    --fj-h1: 36px;
  }
}

@media (max-width: 600px) {
  :root {
    --fj-gutter: 16px;
    --fj-h1: 32px;
    --fj-h2: 24px;
  }
}


/* =========================================================
   Profile page polish
   ========================================================= */

.profile-page {
  background: var(--fj-bg);
}

.profile-page .profile-shell {
  padding-top: 40px;
  padding-bottom: 70px;
}

.profile-page .profile-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.profile-page .profile-header-row h1 {
  margin: 8px 0 0;
}

.profile-page .profile-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    300px;
  gap: 22px;
  align-items: start;
}

.profile-page .profile-main-card,
.profile-page .profile-search-card {
  padding: 20px;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);
  background: #fff;
}

.profile-page .profile-main-card {
  padding: 20px 20px 14px;
}

.profile-page .profile-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--fj-border-soft);
}

.profile-page .profile-row:last-child {
  border-bottom: 0;
}

.profile-page .profile-row-label {
  display: block;
  margin-bottom: 4px;
  color: var(--fj-text-faint);
  font-size: var(--fj-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.profile-page .profile-row-value {
  color: var(--fj-text);
  font-size: var(--fj-small);
  font-weight: 700;
}

.profile-page .profile-search-card {
  position: sticky;
  top: 20px;
}

.profile-page .profile-search-card .eyebrow {
  margin-bottom: 16px;
}

.profile-page .profile-search-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--fj-border-soft);
}

.profile-page .profile-search-item:last-child {
  border-bottom: 0;
}

.profile-page .profile-search-item span {
  display: block;
  margin-bottom: 4px;
  color: var(--fj-text-faint);
  font-size: var(--fj-xs);
  text-transform: uppercase;
}

.profile-page .profile-search-item strong {
  color: var(--fj-text);
  font-size: var(--fj-small);
}

.profile-page .profile-edit-button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-sm);
  background: #fff;
  color: var(--fj-text);
  font-size: var(--fj-small);
  font-weight: 750;
  text-decoration: none;
}

.profile-page .profile-edit-button:hover {
  background: var(--fj-surface-soft);
}

@media (max-width: 1000px) {
  .profile-page .profile-layout {
    grid-template-columns: 1fr;
  }

  .profile-page .profile-search-card {
    position: static;
  }
}

@media (max-width: 600px) {
  .profile-page .profile-header-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-page .profile-edit-button {
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   Profile pages — design system implementation
   ========================================================= */

.profile-page {
  min-height: 100vh;
  background: var(--fj-bg);
}

.profile-page .profile-shell {
  padding-top: 42px;
  padding-bottom: 76px;
}


/* Page heading */
.profile-page .profile-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.profile-page .profile-header-row h1 {
  margin: 8px 0 0;
  font-size: var(--fj-h1);
  line-height: 1.1;
  letter-spacing: -1.6px;
}

.profile-page .profile-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   Profile read-only page
   ========================================================= */

.profile-page .profile-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    300px;
  gap: 22px;
  align-items: start;
}


/* Main profile information */
.profile-page .profile-main-card {
  padding: 28px 28px 20px;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);
  background: var(--fj-surface);
}

.profile-page .profile-main-card .profile-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 42px;
}

.profile-page .profile-main-card .profile-info-list > div {
  min-height: 72px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fj-border-soft);
}

.profile-page .profile-main-card .profile-info-list > div:nth-last-child(-n+2) {
  border-bottom: 0;
}

.profile-page .profile-info-list span {
  display: block;
  margin-bottom: 5px;
  color: var(--fj-text-faint);
  font-size: var(--fj-xs);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.profile-page .profile-info-list strong {
  display: block;
  color: var(--fj-text);
  font-size: var(--fj-small);
  font-weight: 700;
  line-height: 1.5;
}


/* Right-side job search summary */
.profile-page .profile-sidebar {
  display: grid;
  gap: 14px;
}

.profile-page .profile-search-card {
  position: sticky;
  top: 20px;
  padding: 22px;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);
  background: var(--fj-surface);
}

.profile-page .profile-search-card .eyebrow {
  margin-bottom: 17px;
}

.profile-page .profile-search-card .profile-info-list > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--fj-border-soft);
}

.profile-page .profile-search-card .profile-info-list > div:first-child {
  border-top: 1px solid var(--fj-border-soft);
}

.profile-page .profile-search-card .profile-info-list > div:last-child {
  border-bottom: 0;
}


/* =========================================================
   Edit Profile
   ========================================================= */

.profile-edit-page .profile-shell {
  max-width: 1180px;
}

.profile-edit-page .profile-edit-card {
  width: 100%;
  padding: 30px;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);
  background: var(--fj-surface);
}


/* Main form */
.profile-edit-page .profile-edit-form {
  display: grid;
  gap: 22px;
}

.profile-edit-page .profile-edit-form > label,
.profile-edit-page .profile-grid > label {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--fj-text);
  font-size: var(--fj-small);
  font-weight: 700;
}

.profile-edit-page .profile-edit-form input,
.profile-edit-page .profile-edit-form select,
.profile-edit-page .profile-edit-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-sm);
  background: #fff;
  color: var(--fj-text);
  font: inherit;
  font-size: var(--fj-small);
  font-weight: 400;
}

.profile-edit-page .profile-edit-form textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.55;
}

.profile-edit-page .profile-edit-form input:focus,
.profile-edit-page .profile-edit-form select:focus,
.profile-edit-page .profile-edit-form textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59,130,246,.08);
  outline: none;
}


/* Two-column field rows */
.profile-edit-page .profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}


/* Work type choices */
.profile-edit-page .preference-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.profile-edit-page .choice-card {
  min-height: 88px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 16px;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-md);
  background: #fff;
  cursor: pointer;
}

.profile-edit-page .choice-card:hover {
  border-color: #bfdbfe;
}

.profile-edit-page .choice-card:has(input:checked) {
  border-color: var(--fj-primary);
  background: #f8fbff;
}

.profile-edit-page .choice-card input {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--fj-primary);
  flex: 0 0 auto;
}

.profile-edit-page .choice-card strong,
.profile-edit-page .choice-card small {
  display: block;
}

.profile-edit-page .choice-card strong {
  margin-bottom: 3px;
  color: var(--fj-text);
  font-size: var(--fj-small);
}

.profile-edit-page .choice-card small {
  color: var(--fj-text-muted);
  font-size: var(--fj-xs);
  line-height: 1.45;
}


/* Job search + browser notification settings */
.profile-edit-page .job-search-alert-settings {
  overflow: hidden;
  margin-top: 3px;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-md);
  background: var(--fj-surface-soft);
}

.profile-edit-page .job-search-setting-row {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--fj-border);
}

.profile-edit-page .job-search-setting-row:last-child {
  border-bottom: 0;
}

.profile-edit-page .job-search-setting-row > div:first-child {
  min-width: 0;
}

.profile-edit-page .job-search-setting-row > div:first-child strong,
.profile-edit-page .job-search-setting-row > div:first-child small {
  display: block;
}

.profile-edit-page .job-search-setting-row > div:first-child strong {
  margin-bottom: 4px;
  color: var(--fj-text);
  font-size: var(--fj-small);
}

.profile-edit-page .job-search-setting-row > div:first-child small {
  max-width: 650px;
  color: var(--fj-text-muted);
  font-size: var(--fj-xs);
  line-height: 1.5;
}


/* Save / cancel */
.profile-edit-page .dashboard-job-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--fj-border-soft);
}


/* Responsive */
@media (max-width: 1000px) {

  .profile-page .profile-layout {
    grid-template-columns: 1fr;
  }

  .profile-page .profile-search-card {
    position: static;
  }

}


@media (max-width: 700px) {

  .profile-page .profile-header-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-page .profile-main-card .profile-info-list {
    grid-template-columns: 1fr;
  }

  .profile-page .profile-main-card .profile-info-list > div {
    border-bottom: 1px solid var(--fj-border-soft);
  }

  .profile-page .profile-main-card .profile-info-list > div:last-child {
    border-bottom: 0;
  }

  .profile-edit-page .profile-grid,
  .profile-edit-page .preference-options {
    grid-template-columns: 1fr;
  }

  .profile-edit-page .job-search-setting-row {
    align-items: flex-start;
    flex-direction: column;
  }

}


@media (max-width: 600px) {

  .profile-page .profile-shell {
    padding-top: 28px;
  }

  .profile-edit-page .profile-edit-card,
  .profile-page .profile-main-card,
  .profile-page .profile-search-card {
    padding: 20px;
  }

  .profile-page .profile-edit-button {
    width: 100%;
  }

  .profile-edit-page .dashboard-job-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-edit-page .dashboard-job-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

}

/* =========================================================
   Saved Jobs — design system consistency
   ========================================================= */

.saved-page .dashboard-shell,
.dashboard-page.saved-page .dashboard-shell {
  width: min(
    var(--fj-max-width),
    calc(100% - (var(--fj-gutter) * 2))
  );
  max-width: var(--fj-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-top: 40px;
  padding-bottom: 70px;
}

.saved-page .section-title-row {
  margin-bottom: 18px;
}

.saved-page .section-title-row h1,
.saved-page .section-title-row h2 {
  margin: 8px 0 0;
  color: var(--fj-text);
  font-size: var(--fj-h1);
  line-height: 1.1;
  letter-spacing: -1.6px;
}

.saved-page .match-list {
  display: grid;
  gap: 12px;
}

.saved-page .premium-job-card {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  grid-template-areas:
    "header footer"
    "meta footer";
  align-items: center;
  gap: 10px 28px;
  min-height: 126px;
  padding: 20px 22px;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);
  background: var(--fj-surface);
}

.saved-page .premium-job-card:hover {
  border-color: #bfdbfe;
  box-shadow: var(--fj-shadow-sm);
}

.saved-page .job-card-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.saved-page .company-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--fj-primary);
  font-size: 13px;
  font-weight: 800;
}

.saved-page .job-card-title h3 {
  margin: 0 0 4px;
  color: var(--fj-text);
  font-size: var(--fj-h3);
  line-height: 1.25;
}

.saved-page .job-card-title p {
  margin: 0;
  color: var(--fj-text-muted);
  font-size: var(--fj-small);
}

.saved-page .job-meta-row {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 50px;
}

.saved-page .job-meta-row span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--fj-text-muted);
  font-size: var(--fj-xs);
}

.saved-page .job-card-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

.saved-page .job-view-btn {
  min-width: 96px;
  justify-content: center;
}

.saved-page .saved-toggle-form {
  margin: 0;
}

.saved-page .save-job-btn {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-sm);
  background: #fff;
  color: var(--fj-text);
  font: inherit;
  font-size: var(--fj-small);
  font-weight: 750;
  cursor: pointer;
}

.saved-page .save-job-btn.is-saved {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

.saved-page .save-job-btn.is-saved:hover {
  background: #ffe4e6;
}

/* Empty state consistency */
.saved-page .scanning-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 42px 30px;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);
  background: var(--fj-surface);
  text-align: center;
}

.saved-page .scanning-card h3 {
  margin: 12px 0 8px;
}

.saved-page .scanning-card p {
  max-width: 520px;
  margin: 0 auto 20px;
}

@media (max-width: 760px) {
  .saved-page .premium-job-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "meta"
      "footer";
  }

  .saved-page .job-meta-row {
    margin-left: 0;
  }

  .saved-page .job-card-footer {
    justify-content: flex-start;
  }
}

/* Saved Jobs final alignment polish */

.saved-page .premium-job-card {
  min-height: 112px;
  padding: 18px 20px;
  row-gap: 7px;
}

/* Keep metadata closer to title/company */
.saved-page .job-meta-row {
  margin-top: 0;
}

/* Normalize both action buttons */
.saved-page .job-card-footer .btn,
.saved-page .job-card-footer .save-job-btn {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  vertical-align: middle;
}

/* View Job */
.saved-page .job-view-btn {
  min-width: 96px;
  text-align: center;
}

/* Remove */
.saved-page .save-job-btn {
  min-width: 92px;
  text-align: center;
}

/* Keep right-side actions perfectly centered */
.saved-page .job-card-footer {
  align-self: center;
}

/* =========================================================
   Header / nav consistency across homepage + inner pages
   ========================================================= */

.site-header,
.home-header,
.dashboard-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Same navigation typography everywhere */
.home-nav > a,
.account-nav > a,
.nav-link-button {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

/* Active nav item */
.account-nav .nav-active,
.home-nav .nav-active {
  font-weight: 700;
  color: var(--fj-text);
}

/* Keep homepage spacing identical to inner navigation */
.home-nav,
.account-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Keep logout button aligned with text links */
.nav-logout-form {
  display: flex;
  align-items: center;
  margin: 0;
}

.nav-link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fj-text-muted);
  cursor: pointer;
}

/* Homepage links should use same text tone as inner pages */
.home-nav > a {
  color: var(--fj-text-muted);
}

.home-nav > a:hover,
.account-nav > a:hover,
.nav-link-button:hover {
  color: var(--fj-text);
}

/* Keep the special top CTA visually distinct */
.home-nav .home-nav-cta {
  padding: 9px 14px;
  border-radius: var(--fj-radius-sm);
  background: var(--fj-text);
  color: #fff;
  font-weight: 700;
}

.home-nav .home-nav-cta:hover,
.home-nav .home-nav-cta:focus {
  background: var(--fj-text);
  color: #fff;
}

@media (max-width: 760px) {
  .home-nav,
  .account-nav {
    gap: 14px;
  }

  .home-nav > a,
  .account-nav > a,
  .nav-link-button {
    font-size: 12px;
  }
}

/* =========================================================
   Homepage header + hero button final consistency fix
   ========================================================= */

/* Homepage navigation must match inner-page navigation exactly */
body.home-page header.site-header.home-header nav.home-nav > a,
body.home-page header.site-header.home-header nav.home-nav .nav-link-button {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* Match spacing used by inner account navigation */
body.home-page .home-nav {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

/* Keep active/signed-in navigation visually consistent */
body.home-page .home-nav > a:hover,
body.home-page .home-nav .nav-link-button:hover {
  color: var(--fj-text) !important;
}

/* Homepage logo follows same size as inner-page logo */
body.home-page .home-header .brand {
  font-size: 21px !important;
  line-height: 1 !important;
}


/* ---------------------------------------------------------
   Hero buttons
   --------------------------------------------------------- */

/* Primary + secondary must have identical physical dimensions */
body.home-page .home-hero-actions .btn {
  height: 44px !important;
  min-height: 44px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 18px !important;
  margin: 0 !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--fj-radius-sm) !important;

  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  box-sizing: border-box !important;
  vertical-align: middle !important;
  text-decoration: none !important;
}

/* Don't let an older minimum-width rule distort just one button */
body.home-page .home-hero-actions .home-primary-btn {
  min-width: 0 !important;
}

/* Keep the two buttons sitting on exactly the same baseline */
body.home-page .home-hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Primary */
body.home-page .home-hero-actions .btn-primary {
  border-color: var(--fj-primary) !important;
  background: var(--fj-primary) !important;
  color: #fff !important;
}

/* Secondary */
body.home-page .home-hero-actions .btn-secondary {
  border-color: var(--fj-border) !important;
  background: #fff !important;
  color: var(--fj-text) !important;
}


/* Mobile */
@media (max-width: 760px) {
  body.home-page header.site-header.home-header nav.home-nav > a,
  body.home-page header.site-header.home-header nav.home-nav .nav-link-button {
    font-size: 12px !important;
  }
}

@media (max-width: 520px) {
  body.home-page .home-hero-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.home-page .home-hero-actions .btn {
    width: 100% !important;
  }
}

/* =========================================================
   Homepage final CTA button consistency
   ========================================================= */

body.home-page .home-final-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.home-page .home-final-actions .btn {
  height: 44px !important;
  min-height: 44px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 18px !important;
  margin: 0 !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--fj-radius-sm) !important;

  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  box-sizing: border-box !important;
  vertical-align: middle !important;
  text-decoration: none !important;
}

body.home-page .home-final-actions .btn-primary {
  border-color: var(--fj-primary) !important;
  background: var(--fj-primary) !important;
  color: #fff !important;
}

body.home-page .home-final-actions .btn-secondary {
  border-color: rgba(255,255,255,.22) !important;
  background: transparent !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  body.home-page .home-final-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.home-page .home-final-actions .btn {
    width: 100% !important;
  }
}

/* =========================================================
   Homepage header — exact inner-header sizing
   ========================================================= */

body.home-page .home-header .brand {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.home-page .home-nav > a,
body.home-page .home-nav .nav-link-button {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
}

body.home-page .home-nav .nav-active {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Prevent any old homepage scaling from making nav appear smaller */
body.home-page .home-header,
body.home-page .home-nav,
body.home-page .home-nav > a {
  zoom: 1 !important;
  transform: none !important;
}

/* =========================================================
   Global header width lock
   Keep logo/nav aligned on every page
   ========================================================= */

.site-header,
.home-header,
.dashboard-header,
.auth-page .site-header {
  width: min(
    var(--fj-max-width),
    calc(100% - (var(--fj-gutter) * 2))
  ) !important;

  max-width: var(--fj-max-width) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  box-sizing: border-box !important;
}

/* Prevent page-specific shells from nudging header content inward */
.saved-page .site-header,
.signup-page .site-header,
.login-page .site-header,
.profile-page .site-header,
.jobs-page .site-header,
.dashboard-page .site-header {
  width: min(
    var(--fj-max-width),
    calc(100% - (var(--fj-gutter) * 2))
  ) !important;

  max-width: var(--fj-max-width) !important;

  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile gutter */
@media (max-width: 760px) {
  .site-header,
  .home-header,
  .dashboard-header,
  .auth-page .site-header {
    width: calc(100% - 32px) !important;
  }
}

/* =========================================================
   Header spacing restoration
   Keep widths consistent WITHOUT removing inner padding
   ========================================================= */

.site-header,
.home-header,
.dashboard-header,
.auth-page .site-header {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Keep the same padding on the page-specific headers too */
.saved-page .site-header,
.signup-page .site-header,
.login-page .site-header,
.profile-page .site-header,
.jobs-page .site-header,
.dashboard-page .site-header {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Make width calculation include the padding */
.site-header,
.home-header,
.dashboard-header,
.auth-page .site-header {
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  .site-header,
  .home-header,
  .dashboard-header,
  .auth-page .site-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* =========================================================
   FINDJOBS SHARED APPLICATION HEADER
   Single source of truth
   ========================================================= */

.app-header {
  width: min(
    var(--fj-max-width, 1500px),
    calc(100% - 64px)
  ) !important;

  max-width: var(--fj-max-width, 1500px) !important;

  min-height: 72px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding: 0 24px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  box-sizing: border-box !important;

  background: #fff;
}


/* Logo */

.app-header .app-header-brand {
  flex: 0 0 auto;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.6px !important;

  color: #0f172a;
  text-decoration: none;
}

.app-header .app-header-brand span {
  color: var(--fj-primary, #2563eb);
}


/* Navigation */

.app-header .app-nav {
  display: flex !important;
  align-items: center !important;

  gap: 24px !important;

  margin: 0 !important;
  padding: 0 !important;
}

.app-header .app-nav > a,
.app-header .nav-link-button {
  margin: 0 !important;
  padding: 0 !important;

  border: 0;

  background: transparent;

  color: var(--fj-text-muted, #64748b);

  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;

  text-decoration: none;

  white-space: nowrap;

  cursor: pointer;
}

.app-header .app-nav > a:hover,
.app-header .nav-link-button:hover {
  color: var(--fj-text, #0f172a);
}

.app-header .app-nav > .nav-active {
  color: var(--fj-text, #0f172a) !important;
  font-weight: 700 !important;
}


/* Sign-out form */

.app-header .nav-logout-form {
  display: flex !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Public Get Started CTA */

.app-header .app-nav > a.app-nav-cta {
  height: 38px !important;
  min-height: 38px !important;

  padding: 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;

  border-radius: var(--fj-radius-sm, 8px);

  background: #0f172a !important;
  color: #fff !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}

.app-header .app-nav > a.app-nav-cta:hover,
.app-header .app-nav > a.app-nav-cta:focus {
  background: #1e293b !important;
  color: #fff !important;
}


/* Onboarding header state */

.app-header-step {
  color: var(--fj-text-muted, #64748b);

  font-size: 12px;
  font-weight: 700;
}


/* =========================================================
   FINDJOBS SHARED APPLICATION FOOTER
   ========================================================= */

.site-footer {
  width: min(
    var(--fj-max-width, 1500px),
    calc(100% - 64px)
  );

  max-width: var(--fj-max-width, 1500px);

  margin: 72px auto 0;

  padding: 30px 0 34px;

  border-top: 1px solid var(--fj-border, #e2e8f0);

  color: var(--fj-text-muted, #64748b);
}

.site-footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 32px;
}

.site-footer-brand {
  display: flex;
  align-items: center;

  gap: 18px;
}

.site-footer .brand {
  font-size: 22px;
  font-weight: 800;

  color: #0f172a;

  text-decoration: none;
}

.site-footer .brand span {
  color: var(--fj-primary, #2563eb);
}

.site-footer-brand p {
  margin: 4px 0 0;

  font-size: 12px;
}

.site-footer-links {
  display: flex;
  align-items: center;

  gap: 24px;
}

.site-footer-links a {
  color: var(--fj-text-muted, #64748b);

  font-size: 12px;
  font-weight: 500;

  text-decoration: none;
}

.site-footer-links a:hover {
  color: var(--fj-text, #0f172a);
}

.site-footer-bottom {
  margin-top: 34px;

  font-size: 10px;

  color: var(--fj-text-faint, #94a3b8);
}


/* =========================================================
   Shared button vertical alignment
   ========================================================= */

.btn {
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
}


/* =========================================================
   Responsive shared shell
   ========================================================= */

@media (max-width: 900px) {

  .app-header {
    width: calc(100% - 32px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .app-header .app-nav {
    gap: 15px !important;
  }

  .site-footer {
    width: calc(100% - 32px);
  }

}


@media (max-width: 700px) {

  .app-header {
    min-height: 64px !important;
  }

  .app-header .app-header-brand {
    font-size: 21px !important;
  }

  .app-header .app-nav {
    gap: 12px !important;

    overflow-x: auto;
    scrollbar-width: none;
  }

  .app-header .app-nav::-webkit-scrollbar {
    display: none;
  }

  .app-header .app-nav > a,
  .app-header .nav-link-button {
    font-size: 12px !important;
  }

  .site-footer-main {
    flex-direction: column;
  }

  .site-footer-links {
    flex-wrap: wrap;
  }

}

/* =========================================================
   Stable viewport width across all pages
   Prevent header/container shifting when scrollbar appears
   ========================================================= */

html {
  scrollbar-gutter: stable;
}

/* Fallback for browsers without scrollbar-gutter support */
@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

/* =========================================================
   Unified application content width
   Saved Jobs is the reference width
   ========================================================= */

.dashboard-shell,
.saved-page .dashboard-shell,
.profile-shell,
.jobs-shell,
.jobs-page .jobs-shell,
.home-hero,
.home-value-strip,
.home-section,
.home-final-cta {
  width: min(
    var(--fj-max-width, 1500px),
    calc(100% - 64px)
  ) !important;

  max-width: var(--fj-max-width, 1500px) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  box-sizing: border-box !important;
}

/* Remove narrower nested Browse Jobs wrappers */
.jobs-page .jobs-page-shell,
.jobs-page .jobs-container,
.jobs-page .jobs-content {
  max-width: none !important;
}

/* Home sections should use the same horizontal footprint */
.home-page .home-hero,
.home-page .home-value-strip,
.home-page .home-section,
.home-page .home-final-cta {
  max-width: var(--fj-max-width, 1500px) !important;
}

/* Same mobile gutter everywhere */
@media (max-width: 900px) {
  .dashboard-shell,
  .profile-shell,
  .jobs-shell,
  .home-hero,
  .home-value-strip,
  .home-section,
  .home-final-cta {
    width: calc(100% - 32px) !important;
  }
}

/* =========================================================
   Unified public/candidate content width
   Reference: Saved Jobs
   Outer = 1500px, inner = 1452px
   ========================================================= */

/* ---------------------------------------------------------
   Browse Jobs
   --------------------------------------------------------- */

/*
 * Browse Jobs now uses the same dashboard-shell/jobs-shell
 * geometry as the rest of the signed-in application.
 */

/* ---------------------------------------------------------
   Homepage
   --------------------------------------------------------- */

body.home-page > main {
  width: min(
    var(--fj-max-width, 1500px),
    calc(100% - 64px)
  ) !important;

  max-width: var(--fj-max-width, 1500px) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 24px !important;
  padding-right: 24px !important;

  box-sizing: border-box !important;
}

body.home-page .home-hero,
body.home-page .home-value-strip,
body.home-page .home-section,
body.home-page .home-final-cta {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   Responsive gutters
   --------------------------------------------------------- */

@media (max-width: 900px) {

  body.home-page > main {
    width: calc(100% - 32px) !important;

    padding-left: 16px !important;
    padding-right: 16px !important;
  }

}

/* =========================================================
   Job Detail — unified FindJobs content system
   Reference width: Saved Jobs / Dashboard
   ========================================================= */

.job-detail-shell {
  width: min(
    var(--fj-max-width, 1500px),
    calc(100% - 64px)
  ) !important;

  max-width: var(--fj-max-width, 1500px) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding: 38px 24px 90px !important;

  box-sizing: border-box !important;
}


/* Back link lines up with page content */
.job-detail-shell .job-back-link {
  margin-bottom: 20px;
}


/* Main + sidebar proportions */
.job-detail-grid {
  grid-template-columns: minmax(0, 1fr) 350px !important;
  gap: 24px !important;
  align-items: start;
}


/* Main content spacing */
.job-detail-main {
  gap: 16px !important;
}


/* Consistent FindJobs card geometry */
.job-detail-header,
.job-match-panel,
.job-description-card,
.job-action-card,
.job-detail-sidebar .sidebar-card {
  border-radius: var(--fj-radius-lg, 16px) !important;
}


/* ---------------------------------------------------------
   Job header
   --------------------------------------------------------- */

.job-detail-header {
  padding: 30px !important;
}

.job-detail-header h1 {
  max-width: 980px !important;

  margin-top: 22px !important;
  margin-bottom: 18px !important;

  font-size: clamp(34px, 3vw, 48px) !important;
  line-height: 1.06 !important;
}


/* Slightly tighter metadata */
.job-detail-meta span {
  padding: 6px 10px !important;
}


/* ---------------------------------------------------------
   Match explanation
   --------------------------------------------------------- */

.job-match-panel {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 22px !important;

  padding: 22px 24px !important;
}

.job-match-score {
  min-height: 96px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.job-match-copy p {
  max-width: 900px;

  margin-bottom: 0;
}


/* ---------------------------------------------------------
   Job description
   --------------------------------------------------------- */

.job-description-card {
  padding: 28px !important;
}

.job-description-card h2 {
  margin-top: 0;
  margin-bottom: 24px;
}

.job-description {
  max-width: none !important;

  font-size: 14px !important;
  line-height: 1.75 !important;
}


/* Full-description control */
.job-description-toggle {
  min-height: 44px;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px;

  border-radius: var(--fj-radius-sm, 8px) !important;

  font-size: 12px !important;
  font-weight: 700 !important;
}


/* ---------------------------------------------------------
   Right sidebar
   --------------------------------------------------------- */

.job-detail-sidebar {
  gap: 14px !important;
}

.job-action-card {
  padding: 20px !important;
}

.job-apply-btn,
.job-save-large {
  min-height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;

  box-sizing: border-box !important;
}

.job-apply-btn {
  border-radius: var(--fj-radius-sm, 8px) !important;
}

.job-save-large {
  border-radius: var(--fj-radius-sm, 8px) !important;
}


/* Sidebar information cards */
.job-detail-sidebar .sidebar-card {
  padding: 20px !important;
}


/* Match breakdown stays compact */
.match-breakdown > div {
  padding: 10px 0 !important;
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1000px) {
  .job-detail-grid {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 850px) {
  .job-detail-shell {
    width: calc(100% - 32px) !important;
    padding: 28px 16px 70px !important;
  }

  .job-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .job-detail-sidebar {
    position: static !important;
  }
}

@media (max-width: 600px) {
  .job-detail-header,
  .job-description-card {
    padding: 22px !important;
  }

  .job-match-panel {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
  }

  .job-match-score {
    width: 112px;
  }
}

/* =========================================================
   Onboarding Step 1 — Upload CV polish
   ========================================================= */

.onboarding-shell {
  max-width: 720px;
  margin: 48px auto 80px;
  padding: 0 20px;
}

.onboarding-card {
  background: var(--fj-surface, #fff);
  border: 1px solid var(--fj-border, #e2e8f0);
  border-radius: var(--fj-radius-lg, 16px);
  padding: 34px;

  box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
}

.onboarding-card h1 {
  margin: 0;

  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -2px;

  color: var(--fj-text, #0f172a);
}

.onboarding-lead {
  max-width: 590px;

  margin: 14px 0 24px;

  color: var(--fj-text-muted, #64748b);

  font-size: 15px;
  line-height: 1.65;
}


/* Upload area */

.cv-drop {
  min-height: 190px;

  display: grid;
  place-items: center;
  align-content: center;

  gap: 8px;

  padding: 24px;

  border: 1px dashed #cbd5e1;
  border-radius: var(--fj-radius-lg, 16px);

  background: #f8fafc;

  text-align: center;

  cursor: pointer;

  transition:
    border-color .15s ease,
    background .15s ease,
    transform .15s ease;
}

.cv-drop:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}

.cv-drop:active {
  transform: translateY(1px);
}

.cv-drop-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  margin-bottom: 2px;

  border-radius: 12px;

  background: #eff6ff;
  color: var(--fj-primary, #2563eb);

  font-size: 20px;
  font-weight: 700;
}

.cv-drop strong {
  color: var(--fj-text, #0f172a);

  font-size: 15px;
  font-weight: 750;
}

.cv-drop span {
  color: var(--fj-text-muted, #64748b);

  font-size: 12px;
}

.cv-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}


/* Selected file */

.selected-file {
  padding: 11px 13px;

  border: 1px solid var(--fj-border, #e2e8f0);
  border-radius: var(--fj-radius-sm, 8px);

  background: #fff;

  color: var(--fj-text, #0f172a);

  font-size: 12px;
  font-weight: 650;

  overflow-wrap: anywhere;
}


/* Continue button */

.onboarding-submit {
  min-height: 44px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  border-radius: var(--fj-radius-sm, 8px) !important;
}


/* Privacy note */

.privacy-note {
  margin-top: 16px;

  color: var(--fj-text-muted, #64748b);

  font-size: 12px;
  line-height: 1.55;
}


/* Short onboarding pages should breathe properly */

body:has(.onboarding-shell) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body:has(.onboarding-shell) .onboarding-shell {
  flex: 1 0 auto;
}

body:has(.onboarding-shell) .site-footer {
  margin-top: auto;
}


/* Mobile */

@media (max-width: 600px) {
  .onboarding-shell {
    margin-top: 28px;
    margin-bottom: 50px;
    padding: 0 16px;
  }

  .onboarding-card {
    padding: 24px;
    border-radius: var(--fj-radius-lg, 16px);
  }

  .onboarding-card h1 {
    font-size: 36px;
    letter-spacing: -1.6px;
  }

  .onboarding-lead {
    font-size: 14px;
  }

  .cv-drop {
    min-height: 170px;
  }
}

/* =========================================================
   Onboarding — use canonical FindJobs application background
   ========================================================= */

body:has(.onboarding-shell) {
  background: var(--fj-bg, #f8fafc) !important;
}

/* =========================================================
   FindJobs multi-path profile builder
   ========================================================= */

.onboarding-page {
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  background: var(--fj-bg, #f8fafc) !important;
}

.onboarding-page .onboarding-shell {
  flex: 1 0 auto;
}

.onboarding-page .site-footer {
  margin-top: auto;
}


/* Wider first step because it contains the choice grid */

.onboarding-builder-shell {
  max-width: 820px;
}


/* Four profile-builder choices */

.profile-builder-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin: 26px 0 18px;
}

.profile-builder-option {
  width: 100%;
  min-height: 94px;

  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;

  gap: 12px;

  padding: 16px;

  border: 1px solid var(--fj-border, #e2e8f0);
  border-radius: var(--fj-radius-lg, 16px);

  background: #fff;

  color: var(--fj-text, #0f172a);

  font: inherit;
  text-align: left;
  text-decoration: none;

  cursor: pointer;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.profile-builder-option:hover {
  border-color: #bfdbfe;

  box-shadow: 0 5px 16px rgba(15, 23, 42, .045);

  transform: translateY(-1px);
}

.profile-builder-option.is-active {
  border-color: #93c5fd;
  background: #f8fbff;
}


.profile-builder-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: #eff6ff;
  color: var(--fj-primary, #2563eb);

  font-size: 14px;
  font-weight: 800;
}


.profile-builder-option-copy {
  min-width: 0;

  display: grid;

  gap: 3px;
}

.profile-builder-option-copy strong {
  color: var(--fj-text, #0f172a);

  font-size: 13px;
}

.profile-builder-option-copy small {
  color: var(--fj-text-muted, #64748b);

  font-size: 11px;
  line-height: 1.45;
}


.profile-builder-arrow {
  color: #94a3b8;

  font-size: 15px;
}


/* Active CV area */

.profile-builder-panel {
  margin-top: 12px;

  padding: 18px;

  border: 1px solid var(--fj-border, #e2e8f0);
  border-radius: var(--fj-radius-lg, 16px);

  background: #fff;
}

.profile-builder-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 12px;
}

.profile-builder-panel-head strong {
  font-size: 13px;
}

.profile-builder-panel-head span {
  color: var(--fj-text-muted, #64748b);

  font-size: 11px;
}


/* Back links */

.onboarding-back-link {
  display: inline-flex;

  margin-bottom: 20px;

  color: var(--fj-text-muted, #64748b);

  font-size: 12px;
  font-weight: 650;
}

.onboarding-back-link:hover {
  color: var(--fj-text, #0f172a);
}


/* LinkedIn instructions */

.linkedin-help-card {
  margin-bottom: 18px;

  padding: 16px 18px;

  border: 1px solid var(--fj-border, #e2e8f0);
  border-radius: var(--fj-radius-lg, 16px);

  background: #f8fafc;
}

.linkedin-help-card strong {
  font-size: 13px;
}

.linkedin-help-card ol {
  margin: 10px 0 0;
  padding-left: 20px;

  color: var(--fj-text-muted, #64748b);

  font-size: 12px;
  line-height: 1.7;
}


/* Paste-resume form */

.paste-resume-form {
  display: grid;

  gap: 14px;
}

.paste-resume-form label {
  display: grid;

  gap: 7px;

  color: var(--fj-text, #0f172a);

  font-size: 12px;
  font-weight: 650;
}

.paste-resume-form textarea {
  width: 100%;

  min-height: 310px;

  padding: 14px 15px;

  resize: vertical;

  border: 1px solid var(--fj-border, #e2e8f0);
  border-radius: var(--fj-radius-md, 12px);

  background: #fff;

  color: var(--fj-text, #0f172a);

  font: inherit;
  font-size: 13px;
  line-height: 1.6;

  outline: none;
}

.paste-resume-form textarea:focus {
  border-color: #93c5fd;

  box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}


@media (max-width: 680px) {

  .profile-builder-options {
    grid-template-columns: 1fr;
  }

  .profile-builder-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

}

/* =========================================================
   Onboarding — one consistent width across every step
   ========================================================= */

.onboarding-page .onboarding-shell,
.onboarding-shell,
.onboarding-builder-shell {
  width: min(820px, calc(100% - 40px)) !important;
  max-width: 820px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  box-sizing: border-box !important;
}

.onboarding-page .onboarding-card,
.onboarding-card,
.onboarding-builder-card {
  width: 100% !important;
  max-width: none !important;

  box-sizing: border-box !important;
}

@media (max-width: 600px) {
  .onboarding-page .onboarding-shell,
  .onboarding-shell,
  .onboarding-builder-shell {
    width: calc(100% - 32px) !important;
  }
}

/* =========================================================
   Onboarding skills builder
   Works for manual + extracted profiles
   ========================================================= */

.skills-builder {
  display: grid;
  gap: 10px;
}

.skills-builder .field-help {
  margin: -2px 0 2px;

  color: var(--fj-text-muted, #64748b);

  font-size: 11px;
  line-height: 1.5;
}

.skills-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;

  gap: 8px;
}

.skills-entry-input {
  width: 100%;
  min-height: 44px;

  padding: 10px 12px;

  border: 1px solid var(--fj-border, #e2e8f0);
  border-radius: var(--fj-radius-md, 12px);

  background: #fff;

  color: var(--fj-text, #0f172a);

  font: inherit;
  font-size: 13px;

  outline: none;
}

.skills-entry-input:focus {
  border-color: #93c5fd;

  box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.skills-add-button {
  min-height: 44px !important;
  white-space: nowrap;
}

.skill-tag-list {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  min-height: 8px;
}

.skill-edit-tag {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 6px 8px 6px 10px;

  border: 1px solid #dbeafe;
  border-radius: 999px;

  background: #eff6ff;

  color: #1e40af;

  font-size: 11px;
  font-weight: 650;
}

.skill-remove-button {
  width: 18px;
  height: 18px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: transparent;

  color: #64748b;

  font-size: 15px;
  line-height: 1;

  cursor: pointer;
}

.skill-remove-button:hover {
  background: #dbeafe;
  color: #1e3a8a;
}

@media (max-width: 600px) {
  .skills-entry-row {
    grid-template-columns: 1fr;
  }

  .skills-add-button {
    width: 100%;
  }
}

/* =========================================================
   Candidate location autocomplete
   ========================================================= */

.location-field-wrap {
  position: relative;
}

.location-autocomplete {
  position: relative;
}

.location-autocomplete > input {
  width: 100%;
}

.location-results {
  position: absolute;
  z-index: 50;

  top: calc(100% + 6px);
  left: 0;
  right: 0;

  max-height: 290px;

  overflow-y: auto;

  border: 1px solid var(--fj-border, #e2e8f0);
  border-radius: var(--fj-radius-md, 12px);

  background: #fff;

  box-shadow: 0 14px 32px rgba(15, 23, 42, .10);
}

.location-result {
  width: 100%;

  display: grid;

  gap: 3px;

  padding: 11px 13px;

  border: 0;
  border-bottom: 1px solid #f1f5f9;

  background: #fff;

  text-align: left;

  cursor: pointer;
}

.location-result:last-child {
  border-bottom: 0;
}

.location-result:hover {
  background: #f8fafc;
}

.location-result strong {
  color: var(--fj-text, #0f172a);

  font-size: 12px;
}

.location-result span {
  color: var(--fj-text-muted, #64748b);

  font-size: 10px;
  line-height: 1.45;
}

.location-empty {
  padding: 13px;

  color: var(--fj-text-muted, #64748b);

  font-size: 11px;
}

/* =========================================================
   Preferred location multi-select
   ========================================================= */

.preferred-location-field {
  display: grid;
  gap: 8px;
}

.preferred-location-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.preferred-location-chips:empty {
  display: none;
}

.preferred-location-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  min-height: 32px;

  padding: 5px 8px 5px 11px;

  border: 1px solid #dbeafe;
  border-radius: 999px;

  background: #eff6ff;

  color: #1e3a8a;

  font-size: 12px;
  font-weight: 600;
}

.preferred-location-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  padding: 0;

  border: 0;
  border-radius: 999px;

  background: transparent;

  color: #64748b;

  font-size: 17px;
  line-height: 1;

  cursor: pointer;
}

.preferred-location-chip button:hover {
  background: rgba(37, 99, 235, .10);
  color: #1d4ed8;
}

.location-attribution {
  font-size: 10px;
}

/* =========================================================
   Form field validation
   ========================================================= */

.field-validation-error {
  margin-top: 6px;

  color: #dc2626;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

input.field-invalid,
textarea.field-invalid,
select.field-invalid {
  border-color: #dc2626 !important;

  box-shadow:
    0 0 0 3px rgba(220, 38, 38, .08) !important;
}

.location-autocomplete
input.field-invalid {
  border-color: #dc2626 !important;
}

.field-error-group {
  padding: 8px;

  border: 1px solid #dc2626 !important;
  border-radius: 14px;

  background:
    rgba(220, 38, 38, .025);
}

.field-error-group
.field-validation-error {
  flex-basis: 100%;
}

.field-invalid:focus {
  outline: none;
}

/* =========================================================
   FindJobs form readability pass
   Larger, calmer typography for long sessions
   ========================================================= */

.profile-edit-card,
.onboarding-card {
  font-size: 15px;
}


/* Main field labels */
.profile-form > label,
.profile-grid > label,
.location-field-wrap > label,
.preferred-location-field > .field-label,
.preference-section > .field-label,
.skills-review > .field-label {
  color: #0f172a;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.45;
}


/* Inputs should be comfortable to read, not tiny */
.profile-form input:not([type="checkbox"]):not([type="hidden"]),
.profile-form select,
.profile-form textarea {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.profile-form input:not([type="checkbox"]):not([type="hidden"]),
.profile-form select {
  min-height: 46px;
}

.profile-form textarea {
  padding-top: 12px;
  padding-bottom: 12px;
}


/* Supporting/help copy */
.profile-form .field-help,
.profile-form .privacy-note,
.profile-form label > small,
.profile-form .choice-card small,
.profile-form .job-search-setting-row small,
.profile-form .onboarding-lead {
  color: #64748b;

  font-size: 13px !important;
  line-height: 1.55 !important;
}


/* Inline validation must be easy to notice/read */
.profile-form .field-validation-error,
.onboarding-card .field-validation-error {
  margin-top: 7px;

  color: #dc2626;

  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.45;
}


/* Choice cards */
.profile-form .choice-card {
  min-height: 74px;

  padding: 14px 16px;
}

.profile-form .choice-card strong {
  color: #0f172a;

  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.35;
}

.profile-form .choice-card small {
  margin-top: 3px;
}


/* Preferred location chips */
.preferred-location-chip {
  min-height: 34px;

  padding: 6px 9px 6px 12px;

  font-size: 13px !important;
}


/* Location results */
.location-result {
  padding: 13px 15px;
}

.location-result strong {
  font-size: 14px !important;
  line-height: 1.35;
}

.location-result span {
  margin-top: 3px;

  font-size: 12px !important;
  line-height: 1.5;
}

.location-empty {
  padding: 14px;

  font-size: 13px !important;
}


/* Edit-profile setting rows */
.profile-edit-page .job-search-setting-row strong {
  font-size: 14px;
}

.profile-edit-page .job-search-setting-row small {
  font-size: 13px !important;
}


/* Buttons */
.profile-form .btn,
.onboarding-submit {
  min-height: 44px;

  font-size: 14px !important;
  font-weight: 700;
}


/* Slightly more breathing room between major fields */
.profile-edit-form {
  gap: 22px;
}

.onboarding-card .profile-form {
  gap: 20px;
}


/* Onboarding explanatory copy */
.onboarding-card .onboarding-lead {
  font-size: 15px !important;
  line-height: 1.65 !important;

  max-width: 680px;
}


/* Profile heading hierarchy */
.profile-edit-page .profile-header-row .eyebrow,
.onboarding-card .eyebrow {
  font-size: 12px !important;
  letter-spacing: .06em;
}

.profile-edit-page h1 {
  line-height: 1.1;
}


/* Preserve readability on smaller screens */
@media (max-width: 700px) {
  .profile-form input:not([type="checkbox"]):not([type="hidden"]),
  .profile-form select,
  .profile-form textarea {
    font-size: 16px !important;
  }

  .profile-form > label,
  .profile-grid > label,
  .location-field-wrap > label,
  .preferred-location-field > .field-label,
  .preference-section > .field-label {
    font-size: 14px !important;
  }

  .profile-form .field-help,
  .profile-form .choice-card small {
    font-size: 13px !important;
  }
}

/* =========================================================
   FindJobs standard form system
   Reusable across onboarding, profile, employer forms, etc.
   ========================================================= */

/* Base field typography */
.fj-form-field,
.profile-form > label,
.profile-grid > label,
.location-field-wrap > label,
.preferred-location-field {
  color: #0f172a;
}


/* Field labels */
.fj-field-label,
.profile-form > label,
.profile-grid > label,
.location-field-wrap > label,
.preferred-location-field > .field-label,
.preference-section > .field-label,
.skills-review > .field-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.45;
}


/* Standard text controls */
.fj-input,
.fj-select,
.fj-textarea,
.profile-form input:not([type="checkbox"]):not([type="hidden"]),
.profile-form select,
.profile-form textarea {
  width: 100%;

  border: 1px solid #dbe2ea;
  border-radius: 12px;

  background: #fff;

  color: #0f172a;

  font-family: inherit;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.5;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}


/* Input/select dimensions */
.fj-input,
.fj-select,
.profile-form input:not([type="checkbox"]):not([type="hidden"]),
.profile-form select {
  min-height: 46px;
  padding: 10px 14px;
}


/* Textareas */
.fj-textarea,
.profile-form textarea {
  padding: 12px 14px;
}


/* Placeholder consistency */
.fj-input::placeholder,
.fj-textarea::placeholder,
.profile-form input::placeholder,
.profile-form textarea::placeholder {
  color: #64748b;

  opacity: 1;

  font-size: 15px !important;
  font-weight: 600 !important;
}


/* Focus state */
.fj-input:focus,
.fj-select:focus,
.fj-textarea:focus,
.profile-form input:not([type="checkbox"]):not([type="hidden"]):focus,
.profile-form select:focus,
.profile-form textarea:focus {
  outline: none;

  border-color: #2563eb;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, .10);
}


/* Helper copy */
.fj-field-help,
.profile-form .field-help,
.profile-form .privacy-note,
.profile-form label > small {
  color: #64748b;

  font-size: 13px !important;
  font-weight: 400;
  line-height: 1.55;
}


/* Validation copy */
.fj-field-error,
.profile-form .field-validation-error,
.onboarding-card .field-validation-error {
  margin-top: 7px;

  color: #dc2626;

  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.45;
}


/* Invalid controls */
.fj-input.is-invalid,
.fj-select.is-invalid,
.fj-textarea.is-invalid,
input.field-invalid,
select.field-invalid,
textarea.field-invalid {
  border-color: #dc2626 !important;

  box-shadow:
    0 0 0 3px rgba(220, 38, 38, .08) !important;
}


/* =========================================================
   Location fields
   Main location + preferred locations must feel identical
   ========================================================= */

#candidateLocationSearch,
#preferredLocationSearch {
  color: #0f172a;

  font-size: 15px !important;
  font-weight: 600 !important;
}

#candidateLocationSearch::placeholder,
#preferredLocationSearch::placeholder {
  color: #64748b;

  font-size: 15px !important;
  font-weight: 600 !important;

  opacity: 1;
}


/* Location dropdown */
.location-results {
  margin-top: 6px;

  overflow: hidden;

  border: 1px solid #dbe2ea;
  border-radius: 12px;

  background: #fff;

  box-shadow:
    0 14px 32px rgba(15, 23, 42, .10);
}

.location-result {
  padding: 13px 14px;
}

.location-result strong {
  color: #0f172a;

  font-size: 14px !important;
  font-weight: 700 !important;
}

.location-result span {
  color: #64748b;

  font-size: 12px !important;
  font-weight: 400;
  line-height: 1.5;
}


/* Preferred-location chips */
.preferred-location-chip {
  min-height: 34px;

  padding: 6px 9px 6px 12px;

  border: 1px solid #dbeafe;
  border-radius: 999px;

  background: #eff6ff;

  color: #1e3a8a;

  font-size: 13px !important;
  font-weight: 600;
}


/* =========================================================
   Standard form spacing
   ========================================================= */

.fj-form,
.profile-form {
  gap: 20px;
}

.fj-field-group,
.location-field-wrap,
.preferred-location-field {
  display: grid;
  gap: 7px;
}

.profile-grid {
  gap: 16px;
}


/* Choice cards */
.fj-choice,
.profile-form .choice-card {
  min-height: 74px;

  padding: 14px 16px;

  border-radius: 12px;
}

.fj-choice strong,
.profile-form .choice-card strong {
  font-size: 14px !important;
  font-weight: 700;
}

.fj-choice small,
.profile-form .choice-card small {
  font-size: 13px !important;
  line-height: 1.5;
}


/* Mobile readability */
@media (max-width: 700px) {
  .fj-input,
  .fj-select,
  .fj-textarea,
  .profile-form input:not([type="checkbox"]):not([type="hidden"]),
  .profile-form select,
  .profile-form textarea {
    font-size: 16px !important;
  }

  #candidateLocationSearch,
  #preferredLocationSearch {
    font-size: 16px !important;
  }
}

/* Preferred-location requirement hint */
#preferredLocationHelp.is-location-required {
  color: #475569;
  font-weight: 500;
}

/* =========================================================
   Employer job structured location
   ========================================================= */

.job-location-field {
  margin-bottom: 18px;
}

#jobLocationSearch {
  font-size: 15px !important;
  font-weight: 600 !important;
}

#jobLocationHelp {
  display: block;
  margin-top: 7px;
}

.employer-job-form .location-results {
  z-index: 80;
}


/* =========================================================
   FindJobs final typography system
   2026-09-03
   ========================================================= */

/*
 * Core typography
 */
html {
  font-size: 16px;
}

body {
  font-family:
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/*
 * Main navigation
 *
 * Previous 13px / 500 text was too light and
 * difficult to scan on larger displays.
 */
.app-nav > a,
.app-nav .nav-link-button,
.home-nav > a,
.home-nav .nav-link-button {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}


/*
 * Buttons
 */
.btn,
button,
input[type="submit"],
input[type="button"] {
  font-family: inherit;
}

.btn {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}


/*
 * Form labels
 */
label,
.field-label,
.fj-field-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}


/*
 * Inputs
 */
input,
select,
textarea {
  font-family: inherit;
  font-size: 15px;
}

.fj-input,
.fj-select,
.fj-textarea,
.profile-form input,
.profile-form select,
.profile-form textarea {
  font-size: 15px;
  font-weight: 500;
}


/*
 * Helper / supporting text
 */
.field-help,
.fj-field-help,
.onboarding-lead,
.cv-library-intro,
.profile-info-list span,
.cv-card-meta,
.privacy-note {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}


/*
 * Eyebrows / small section labels
 */
.eyebrow {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
}


/*
 * Profile and dashboard values
 */
.profile-info-list strong {
  font-weight: 700;
  line-height: 1.45;
}


/*
 * CV library
 */
.cv-card-name {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.cv-card-meta {
  font-size: 14px;
}

.cv-tag {
  font-size: 12px;
  font-weight: 700;
}


/*
 * Better placeholder readability without making
 * placeholders compete with entered values.
 */
input::placeholder,
textarea::placeholder {
  color: #64748b;
  opacity: 0.92;
  font-weight: 500;
}


/*
 * Keep headings strong and crisp.
 */
h1,
h2,
h3,
h4 {
  font-family: inherit;
  color: #0f172a;
}

h1 {
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 {
  font-weight: 800;
  letter-spacing: -0.025em;
}

h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
}


/*
 * Mobile:
 * keep controls >=16px to avoid mobile browser
 * zooming while preserving desktop density.
 */
@media (max-width: 720px) {
  input,
  select,
  textarea,
  .fj-input,
  .fj-select,
  .fj-textarea {
    font-size: 16px;
  }

  .app-nav > a,
  .app-nav .nav-link-button {
    font-size: 14px !important;
  }
}


/* =========================================================
   SAVED JOBS — FINAL FINDJOBS UI/UX
   ========================================================= */

.saved-page .section-title-row {
  margin-bottom: 20px;
}


/* ---------------------------------------------------------
   Saved job list
   --------------------------------------------------------- */

.saved-page .match-list {
  display: grid;
  gap: 14px;
}


/* ---------------------------------------------------------
   Card
   --------------------------------------------------------- */

.saved-page .premium-job-card {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  grid-template-areas:
    "header footer"
    "meta footer";

  align-items: center;

  min-height: 118px;

  padding: 20px 22px;

  gap: 9px 28px;

  border: 1px solid #e2e8f0;
  border-radius: 16px;

  background: #ffffff;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.saved-page .premium-job-card:hover {
  border-color: #bfdbfe;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, .055);

  transform: translateY(-1px);
}


/* ---------------------------------------------------------
   Company avatar
   --------------------------------------------------------- */

.saved-page .job-card-header {
  grid-area: header;

  display: flex;
  align-items: center;

  gap: 13px;

  margin: 0;
}

.saved-page .company-avatar {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: #eff6ff;

  color: #2563eb;

  font-size: 14px;
  font-weight: 800;
}


/* ---------------------------------------------------------
   Job typography
   --------------------------------------------------------- */

.saved-page .job-card-title {
  min-width: 0;
}

.saved-page .job-card-title h3 {
  margin: 0 0 4px;

  color: #0f172a;

  font-size: 17px;
  font-weight: 800;

  line-height: 1.35;

  letter-spacing: -0.015em;
}

.saved-page .job-card-title p {
  margin: 0;

  color: #64748b;

  font-size: 14px;
  font-weight: 500;

  line-height: 1.45;
}


/* ---------------------------------------------------------
   Metadata
   --------------------------------------------------------- */

.saved-page .job-meta-row {
  grid-area: meta;

  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin: 0 0 0 55px;
}

.saved-page .job-meta-row span {
  display: inline-flex;
  align-items: center;

  min-height: 28px;

  padding: 5px 10px;

  border-radius: 999px;

  background: #f1f5f9;

  color: #475569;

  font-size: 13px;
  font-weight: 600;

  line-height: 1;
}


/* ---------------------------------------------------------
   Actions
   --------------------------------------------------------- */

.saved-page .job-card-footer {
  grid-area: footer;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  margin: 0;

  align-self: center;
}

.saved-page .saved-toggle-form {
  margin: 0;
}

.saved-page .job-card-footer .btn,
.saved-page .job-card-footer .save-job-btn {
  height: 44px;
  min-height: 44px;

  padding: 0 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  font-family: inherit;

  font-size: 14px;
  font-weight: 700;

  line-height: 1;

  white-space: nowrap;
}


/* View job */

.saved-page .job-view-btn {
  min-width: 104px;

  background: #2563eb;

  border-color: #2563eb;

  color: #fff;
}

.saved-page .job-view-btn:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}


/* Remove saved job */

.saved-page .save-job-btn {
  min-width: 104px;

  border: 1px solid #fecdd3;

  background: #fff;

  color: #be123c;

  cursor: pointer;

  transition:
    background .16s ease,
    border-color .16s ease;
}

.saved-page .save-job-btn.is-saved {
  border-color: #fecdd3;

  background: #fff5f6;

  color: #be123c;
}

.saved-page .save-job-btn.is-saved:hover {
  border-color: #fda4af;

  background: #ffe4e6;
}


/* ---------------------------------------------------------
   Empty state typography
   --------------------------------------------------------- */

.saved-page .scanning-card h3 {
  font-size: 20px;
  font-weight: 800;
}

.saved-page .scanning-card p {
  color: #64748b;

  font-size: 15px;
  font-weight: 500;

  line-height: 1.6;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 760px) {

  .saved-page .premium-job-card {
    grid-template-columns: 1fr;

    grid-template-areas:
      "header"
      "meta"
      "footer";

    padding: 18px;
  }

  .saved-page .job-meta-row {
    margin-left: 55px;
  }

  .saved-page .job-card-footer {
    justify-content: flex-start;

    margin-top: 4px;
  }

}


@media (max-width: 520px) {

  .saved-page .job-meta-row {
    margin-left: 0;
  }

  .saved-page .job-card-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;

    width: 100%;
  }

  .saved-page .job-card-footer .btn,
  .saved-page .job-card-footer .save-job-btn {
    width: 100%;
  }

}


/* =========================================================
   PROFILE — FINAL FINDJOBS UI/UX
   Uses actual profile/index.ejs structure
   ========================================================= */


/* ---------------------------------------------------------
   Heading
   --------------------------------------------------------- */

.profile-page .profile-header-row {
  align-items: flex-end;
  margin-bottom: 20px;
}

.profile-page .profile-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-page .profile-header-actions .btn {
  height: 44px;
  min-height: 44px;

  padding: 0 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  font-size: 14px;
  font-weight: 700;
}


/* ---------------------------------------------------------
   Main profile layout
   --------------------------------------------------------- */

.profile-page .profile-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(280px, .8fr);

  gap: 18px;

  align-items: start;
}


/* ---------------------------------------------------------
   Main information card
   --------------------------------------------------------- */

.profile-page .profile-main-card {
  padding: 26px 28px;

  border: 1px solid #e2e8f0;
  border-radius: 16px;

  background: #fff;

  box-shadow:
    0 4px 18px rgba(15, 23, 42, .03);
}


/* Actual profile-info-list markup */

.profile-page
.profile-main-card
.profile-main-card
.profile-info-list {
  display: grid;
}

/*
 * The selector above is intentionally superseded below
 * with the actual direct structure.
 */

.profile-page
.profile-main-card
> .profile-info-list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 40px;
  row-gap: 0;
}

.profile-page
.profile-main-card
> .profile-info-list
> div {
  min-width: 0;

  padding: 15px 0;

  border-bottom: 1px solid #e2e8f0;
}

.profile-page
.profile-main-card
> .profile-info-list
> div:nth-last-child(-n + 2) {
  border-bottom-color: transparent;
}

.profile-page
.profile-main-card
> .profile-info-list
> div
> span {
  display: block;

  margin-bottom: 6px;

  color: #64748b;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.3;

  letter-spacing: .025em;

  text-transform: uppercase;
}

.profile-page
.profile-main-card
> .profile-info-list
> div
> strong {
  display: block;

  color: #0f172a;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.45;
}


/* ---------------------------------------------------------
   Job Search sidebar
   --------------------------------------------------------- */

.profile-page .profile-sidebar {
  min-width: 0;
}

.profile-page .profile-search-card {
  padding: 24px;

  border: 1px solid #e2e8f0;
  border-radius: 16px;

  background: #fff;

  box-shadow:
    0 4px 18px rgba(15, 23, 42, .03);
}

.profile-page
.profile-search-card
> .eyebrow {
  margin-bottom: 12px;
}

.profile-page
.profile-search-card
.profile-info-list {
  display: block;
}

.profile-page
.profile-search-card
.profile-info-list
> div {
  padding: 13px 0;

  border-bottom: 1px solid #e2e8f0;
}

.profile-page
.profile-search-card
.profile-info-list
> div:last-child {
  border-bottom: 0;

  padding-bottom: 0;
}

.profile-page
.profile-search-card
.profile-info-list
span {
  display: block;

  margin-bottom: 5px;

  color: #64748b;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: .02em;

  text-transform: uppercase;
}

.profile-page
.profile-search-card
.profile-info-list
strong {
  display: block;

  color: #0f172a;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.45;
}


/* ---------------------------------------------------------
   Work Experience
   --------------------------------------------------------- */

.profile-page .profile-experience-card {
  grid-column: 1 / -1;

  padding: 26px 28px;

  border: 1px solid #e2e8f0;
  border-radius: 16px;

  background: #fff;

  box-shadow:
    0 4px 18px rgba(15, 23, 42, .03);
}

.profile-page .profile-experience-eyebrow {
  margin-bottom: 16px;
}

.profile-page .profile-experience-list {
  display: grid;
}

.profile-page .profile-experience-item {
  padding: 0 0 20px;

  border-bottom: 1px solid #e2e8f0;
}

.profile-page
.profile-experience-item
+ .profile-experience-item {
  padding-top: 20px;
}

.profile-page
.profile-experience-item:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}

.profile-page .profile-experience-head {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 24px;
}

.profile-page .profile-experience-title {
  display: block;

  color: #0f172a;

  font-size: 17px;
  font-weight: 800;

  line-height: 1.35;

  letter-spacing: -0.015em;
}

.profile-page .profile-experience-company {
  margin-top: 4px;

  color: #475569;

  font-size: 15px;
  font-weight: 600;

  line-height: 1.45;
}

.profile-page .profile-experience-location {
  margin-top: 3px;

  color: #64748b;

  font-size: 13px;
  font-weight: 500;
}

.profile-page .profile-experience-date {
  flex: 0 0 auto;

  color: #64748b;

  font-size: 13px;
  font-weight: 600;

  line-height: 1.45;

  white-space: nowrap;
}

.profile-page .profile-experience-description {
  max-width: 1100px;

  margin: 11px 0 0;

  color: #475569;

  font-size: 14px;
  font-weight: 500;

  line-height: 1.65;

  white-space: pre-line;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .profile-page .profile-layout {
    grid-template-columns: 1fr;
  }

  .profile-page .profile-experience-card {
    grid-column: 1;
  }

}


@media (max-width: 640px) {

  .profile-page .profile-main-card,
  .profile-page .profile-search-card,
  .profile-page .profile-experience-card {
    padding: 20px;
  }

  .profile-page
  .profile-main-card
  > .profile-info-list {
    grid-template-columns: 1fr;
  }

  .profile-page
  .profile-main-card
  > .profile-info-list
  > div:nth-last-child(-n + 2) {
    border-bottom-color: #e2e8f0;
  }

  .profile-page
  .profile-main-card
  > .profile-info-list
  > div:last-child {
    border-bottom-color: transparent;
  }

  .profile-page .profile-experience-head {
    display: block;
  }

  .profile-page .profile-experience-date {
    margin-top: 7px;
  }

}


/* =========================================================
   PROFILE — sidebar scroll behavior
   Job Search belongs to the top profile row and must not
   float over Work Experience.
   ========================================================= */

.profile-page .profile-sidebar {
  position: static !important;
  top: auto !important;
  height: auto !important;
  max-height: none !important;
  align-self: start;
}

.profile-page .profile-search-card {
  position: static !important;
  top: auto !important;
}



/* =========================================================
   JOB DETAIL — intelligent description presentation
   ========================================================= */

/*
 * Short descriptions are complete content, not previews.
 * They should never be hidden beneath the fade treatment.
 */
.job-description-wrap.is-complete {
  position: relative;
}

.job-description-wrap.is-complete .job-description {
  max-height: none !important;
  overflow: visible !important;

  margin-bottom: 0;

  opacity: 1 !important;

  color: #475569 !important;

  -webkit-mask-image: none !important;
  mask-image: none !important;
}


/*
 * Preserve whitespace/newlines supplied by native employers
 * without breaking imported plain-text descriptions.
 */
.job-description {
  white-space: pre-line;

  color: #475569;

  font-size: 14px !important;
  font-weight: 500;

  line-height: 1.75 !important;
}


/*
 * A complete short description should have enough presence
 * that About the job does not look visually empty.
 */
.job-description-wrap.is-complete .job-description {
  min-height: 24px;
}


/*
 * Only genuinely collapsible descriptions need space for
 * the expansion control.
 */
.job-description-wrap.is-collapsible
.job-description-toggle {
  margin-top: 14px;
}



/* =========================================================
   EMPLOYER DASHBOARD — FINAL FINDJOBS UI/UX
   ========================================================= */

.employer-dashboard-page {
  background: var(--fj-bg);
}


/* ---------------------------------------------------------
   Shell / heading
   --------------------------------------------------------- */

.employer-dashboard-page .dashboard-shell {
  padding-top: 40px;
  padding-bottom: 76px;
}

.employer-dashboard-page .dashboard-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 26px;
}

.employer-dashboard-page .dashboard-intro h1 {
  margin: 9px 0 9px;

  color: var(--fj-text);

  font-size: var(--fj-h1);
  font-weight: 800;

  line-height: 1.08;
  letter-spacing: -0.035em;
}

.employer-dashboard-page .dashboard-intro p {
  max-width: 650px;

  margin: 0;

  color: var(--fj-text-muted);

  font-size: 15px;
  font-weight: 500;

  line-height: 1.6;
}

.employer-dashboard-page .employer-post-job-btn {
  height: 44px;
  min-height: 44px;

  padding: 0 18px;

  font-size: 14px;
  font-weight: 700;

  white-space: nowrap;
}


/* ---------------------------------------------------------
   Stats
   --------------------------------------------------------- */

.employer-dashboard-page .dashboard-stats {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 14px;

  max-width: 900px;

  margin: 0 0 42px;
}

.employer-dashboard-page .dashboard-stat-card {
  min-height: 106px;

  padding: 20px 22px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);

  background: var(--fj-surface);

  box-shadow: none;
}

.employer-dashboard-page .dashboard-stat-card span {
  margin-bottom: 6px;

  color: var(--fj-text-muted);

  font-size: 13px;
  font-weight: 600;

  line-height: 1.35;
}

.employer-dashboard-page .dashboard-stat-card strong {
  color: var(--fj-text);

  font-size: 30px;
  font-weight: 800;

  line-height: 1;
  letter-spacing: -0.03em;
}


/* ---------------------------------------------------------
   Listings section
   --------------------------------------------------------- */

.employer-dashboard-page .dashboard-section {
  margin-top: 0;
}

.employer-dashboard-page .dashboard-section-heading {
  margin-bottom: 16px;
}

.employer-dashboard-page .dashboard-section-heading h2 {
  margin: 8px 0 0;

  color: var(--fj-text);

  font-size: 28px;
  font-weight: 800;

  line-height: 1.2;
  letter-spacing: -0.025em;
}


/* ---------------------------------------------------------
   Job list
   --------------------------------------------------------- */

.employer-dashboard-page .employer-job-list {
  display: grid;

  gap: 12px;

  border: 0;
  background: transparent;
}

.employer-dashboard-page .employer-job-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 28px;

  min-height: 100px;

  padding: 18px 20px;

  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);

  background: var(--fj-surface);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.employer-dashboard-page .employer-job-row:hover {
  border-color: #bfdbfe;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, .045);

  transform: translateY(-1px);
}


/* ---------------------------------------------------------
   Job identity
   --------------------------------------------------------- */

.employer-dashboard-page .employer-job-main {
  min-width: 0;
}

.employer-dashboard-page .employer-job-main > a {
  display: inline-block;

  color: var(--fj-text);

  text-decoration: none;
}

.employer-dashboard-page .employer-job-main > a:hover {
  color: var(--fj-primary);
}

.employer-dashboard-page .employer-job-main > a strong {
  display: block;

  font-size: 17px;
  font-weight: 800;

  line-height: 1.35;
  letter-spacing: -0.015em;
}


/* ---------------------------------------------------------
   Job metadata / status
   --------------------------------------------------------- */

.employer-dashboard-page .employer-job-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 8px;
}

.employer-dashboard-page .employer-job-location,
.employer-dashboard-page .employer-job-status {
  display: inline-flex;
  align-items: center;

  min-height: 27px;

  padding: 5px 9px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;

  line-height: 1;
}

.employer-dashboard-page .employer-job-location {
  background: #f1f5f9;

  color: #475569;
}

.employer-dashboard-page .employer-job-status.status-active {
  background: #ecfdf5;

  color: #047857;
}

.employer-dashboard-page .employer-job-status.status-draft {
  background: #eff6ff;

  color: #2563eb;
}

.employer-dashboard-page .employer-job-status.status-closed,
.employer-dashboard-page .employer-job-status.status-expired {
  background: #f1f5f9;

  color: #64748b;
}


/* ---------------------------------------------------------
   Applicant count / actions
   --------------------------------------------------------- */

.employer-dashboard-page .employer-job-row-meta {
  display: flex;
  align-items: center;

  gap: 18px;
}

.employer-dashboard-page .employer-applicant-link {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  min-width: 118px;

  text-decoration: none;
}

.employer-dashboard-page .employer-applicant-link strong {
  color: var(--fj-text);

  font-size: 14px;
  font-weight: 700;

  line-height: 1.3;
}

.employer-dashboard-page .employer-applicant-link span {
  margin-top: 4px;

  color: var(--fj-primary);

  font-size: 13px;
  font-weight: 600;
}

.employer-dashboard-page .employer-applicant-link:hover span {
  text-decoration: underline;
}


/* ---------------------------------------------------------
   Action buttons
   --------------------------------------------------------- */

.employer-dashboard-page .employer-job-actions {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: nowrap;
}

.employer-dashboard-page .employer-job-status-form {
  margin: 0;
}

.employer-dashboard-page .employer-job-action {
  height: 40px;
  min-height: 40px;

  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--fj-border);
  border-radius: 9px;

  background: #fff;

  color: #334155;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;

  line-height: 1;

  text-decoration: none;

  cursor: pointer;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}

.employer-dashboard-page .employer-job-action:hover {
  border-color: #cbd5e1;

  background: #f8fafc;

  color: var(--fj-text);
}

.employer-dashboard-page .employer-job-action.danger {
  border-color: #fecdd3;

  color: #be123c;
}

.employer-dashboard-page .employer-job-action.danger:hover {
  border-color: #fda4af;

  background: #fff1f2;
}


/* ---------------------------------------------------------
   Empty state
   --------------------------------------------------------- */

.employer-dashboard-page .scanning-card {
  max-width: none;

  padding: 34px;

  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);

  background: #fff;
}

.employer-dashboard-page .scanning-card h3 {
  font-size: 18px;
  font-weight: 800;
}

.employer-dashboard-page .scanning-card p {
  color: var(--fj-text-muted);

  font-size: 14px;
  font-weight: 500;

  line-height: 1.6;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 950px) {

  .employer-dashboard-page .dashboard-stats {
    max-width: none;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .employer-dashboard-page .employer-job-row {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .employer-dashboard-page .employer-job-row-meta {
    justify-content: space-between;
  }

  .employer-dashboard-page .employer-applicant-link {
    align-items: flex-start;
  }

}


@media (max-width: 700px) {

  .employer-dashboard-page .dashboard-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .employer-dashboard-page .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .employer-dashboard-page .employer-post-job-btn {
    width: 100%;
  }

  .employer-dashboard-page .employer-job-row-meta {
    align-items: stretch;
    flex-direction: column;

    gap: 14px;
  }

  .employer-dashboard-page .employer-job-actions {
    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .employer-dashboard-page .employer-job-action {
    width: 100%;
  }

}


@media (max-width: 480px) {

  .employer-dashboard-page .employer-job-actions {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   EMPLOYER AI DASHBOARD — CANDIDATE DASHBOARD PARITY
   ========================================================= */


.employer-dashboard-page .employer-ai-dashboard {
  padding-top: 40px;
  padding-bottom: 80px;
}


/* Four equal cards, exactly like candidate dashboard */

.employer-dashboard-page .employer-ai-stats {
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  max-width: none !important;

  margin-bottom: 34px !important;
}


/* Main matching layout */

.employer-dashboard-page .employer-match-grid {
  align-items: start;
}


/* Candidate avatar */

.employer-dashboard-page .employer-candidate-avatar {
  background:
    linear-gradient(
      135deg,
      #eff6ff,
      #dbeafe
    );

  color: #1d4ed8;
}


/* Candidate/job relationship */

.employer-dashboard-page .employer-matched-role {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.employer-dashboard-page
.employer-matched-role strong {
  font-weight: 700;
}


/* Score breakdown chips */

.employer-dashboard-page .employer-match-signals {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 11px;
}

.employer-dashboard-page
.employer-match-signals > span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  min-height: 28px;

  padding: 5px 9px;

  border: 1px solid #e2e8f0;
  border-radius: 999px;

  background: #fff;

  color: #64748b;

  font-size: 12px;
  font-weight: 600;
}

.employer-dashboard-page
.employer-match-signals strong {
  color: #0f172a;

  font-weight: 800;
}


/* Future invite location — visible as roadmap, not clickable */

.employer-dashboard-page .employer-invite-placeholder {
  min-height: 42px;

  padding: 0 13px;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  border: 1px dashed #cbd5e1;
  border-radius: 10px;

  background: #f8fafc;

  color: #475569;

  font-size: 13px;
  font-weight: 700;
}

.employer-dashboard-page
.employer-invite-placeholder span {
  color: #94a3b8;

  font-size: 11px;
  font-weight: 600;
}


/* Recent listings now behave like recommendation cards */

.employer-dashboard-page .employer-recent-section {
  margin-top: 42px;
}

.employer-dashboard-page .employer-listing-status {
  align-self: flex-start;

  min-height: 28px;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;

  line-height: 1;
}

.employer-dashboard-page
.employer-listing-status.status-active {
  background: #ecfdf5;

  color: #047857;
}

.employer-dashboard-page
.employer-listing-status.status-draft {
  background: #eff6ff;

  color: #2563eb;
}

.employer-dashboard-page
.employer-listing-status.status-closed,
.employer-dashboard-page
.employer-listing-status.status-expired {
  background: #f1f5f9;

  color: #64748b;
}


/* Listing action row */

.employer-dashboard-page
.employer-listing-actions {
  flex-wrap: wrap;
}

.employer-dashboard-page
.employer-listing-actions form {
  margin: 0;
}

.employer-dashboard-page
.employer-dashboard-secondary-btn {
  min-height: 42px;

  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #e2e8f0;
  border-radius: 10px;

  background: #fff;

  color: #334155;

  font: inherit;
  font-size: 13px;
  font-weight: 700;

  line-height: 1;

  text-decoration: none;

  cursor: pointer;
}

.employer-dashboard-page
.employer-dashboard-secondary-btn:hover {
  border-color: #cbd5e1;

  background: #f8fafc;

  color: #0f172a;
}

.employer-dashboard-page
.employer-dashboard-secondary-btn.danger {
  border-color: #fecdd3;

  color: #be123c;
}

.employer-dashboard-page
.employer-dashboard-secondary-btn.danger:hover {
  background: #fff1f2;
}


/* Hiring sidebar */

.employer-dashboard-page .employer-hiring-sidebar {
  position: sticky;

  top: 20px;
}

.employer-dashboard-page
.employer-hiring-sidebar
.profile-info-list strong {
  font-size: 14px;
}


/* Give candidate cards exactly the same rhythm */

.employer-dashboard-page .employer-candidate-card,
.employer-dashboard-page .employer-listing-card {
  border-radius: 16px;
}


/* Responsive */

@media (max-width: 1050px) {

  .employer-dashboard-page .employer-ai-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .employer-dashboard-page .employer-hiring-sidebar {
    position: static;
  }

}


@media (max-width: 650px) {

  .employer-dashboard-page .employer-ai-stats {
    grid-template-columns: 1fr !important;
  }

  .employer-dashboard-page
  .employer-listing-actions {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    width: 100%;
  }

  .employer-dashboard-page
  .employer-listing-actions .btn,
  .employer-dashboard-page
  .employer-dashboard-secondary-btn {
    width: 100%;
  }

  .employer-dashboard-page
  .employer-invite-placeholder {
    width: 100%;

    justify-content: center;
  }

}


/* =========================================================
   EMPLOYER JOB MANAGEMENT PAGE
   ========================================================= */

.employer-jobs-page {
  background: var(--fj-bg);
}

.employer-jobs-page .employer-jobs-shell {
  padding-top: 40px;
  padding-bottom: 80px;
}

.employer-jobs-page .employer-jobs-header {
  align-items: flex-end;
  margin-bottom: 22px;
}

.employer-jobs-page .employer-jobs-header h1 {
  margin: 8px 0 7px;
}

.employer-jobs-page .employer-jobs-header p {
  margin: 0;

  color: var(--fj-text-muted);

  font-size: 15px;
  font-weight: 500;

  line-height: 1.6;
}

.employer-jobs-page .employer-job-management-list {
  gap: 14px;
}

.employer-dashboard-page .employer-view-all-jobs {
  color: var(--fj-primary);

  font-weight: 700;

  text-decoration: none;
}

.employer-dashboard-page
.employer-view-all-jobs:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {

  .employer-jobs-page .employer-jobs-header {
    align-items: flex-start;
    flex-direction: column;

    gap: 16px;
  }

  .employer-jobs-page
  .employer-jobs-header .btn {
    width: 100%;
  }

}


/* =========================================================
   EMPLOYER JOB CARDS — SHARED DASHBOARD + JOBS PAGE
   ========================================================= */


/* ---------------------------------------------------------
   Card geometry
   --------------------------------------------------------- */

.employer-jobs-page .employer-listing-card {
  padding: 20px 22px;

  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);

  background: var(--fj-surface);

  box-shadow: none;
}

.employer-jobs-page .employer-listing-card:hover {
  border-color: #bfdbfe;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, .04);
}


/* ---------------------------------------------------------
   Header / title
   --------------------------------------------------------- */

.employer-jobs-page
.employer-listing-card
.job-card-header {
  align-items: flex-start;
}

.employer-jobs-page
.employer-listing-card
.job-card-title h3 {
  font-size: 17px;
  font-weight: 800;

  line-height: 1.35;

  letter-spacing: -.015em;
}

.employer-jobs-page
.employer-listing-card
.job-card-title p {
  margin-top: 3px;

  color: var(--fj-text-muted);

  font-size: 14px;
  font-weight: 500;
}


/* ---------------------------------------------------------
   Status pills
   --------------------------------------------------------- */

.employer-jobs-page .employer-listing-status,
.employer-dashboard-page .employer-listing-status {
  align-self: flex-start;

  min-height: 28px;

  padding: 6px 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;

  line-height: 1;
}

.employer-jobs-page
.employer-listing-status.status-active,
.employer-dashboard-page
.employer-listing-status.status-active {
  background: #ecfdf5;

  color: #047857;
}

.employer-jobs-page
.employer-listing-status.status-draft,
.employer-dashboard-page
.employer-listing-status.status-draft {
  background: #eff6ff;

  color: #2563eb;
}

.employer-jobs-page
.employer-listing-status.status-closed,
.employer-jobs-page
.employer-listing-status.status-expired,
.employer-dashboard-page
.employer-listing-status.status-closed,
.employer-dashboard-page
.employer-listing-status.status-expired {
  background: #f1f5f9;

  color: #64748b;
}


/* ---------------------------------------------------------
   Metadata
   --------------------------------------------------------- */

.employer-jobs-page
.employer-listing-card
.job-meta-row {
  margin-top: 14px;

  gap: 7px;
}

.employer-jobs-page
.employer-listing-card
.job-meta-row span {
  min-height: 28px;

  padding: 6px 10px;

  display: inline-flex;
  align-items: center;

  border-radius: 999px;

  background: #f1f5f9;

  color: #64748b;

  font-size: 12px;
  font-weight: 600;
}


/* ---------------------------------------------------------
   Actions
   --------------------------------------------------------- */

.employer-jobs-page .employer-listing-actions,
.employer-dashboard-page .employer-listing-actions {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top: 16px;

  flex-wrap: wrap;
}

.employer-jobs-page .employer-listing-actions form,
.employer-dashboard-page .employer-listing-actions form {
  margin: 0;
}


/*
 * Shared employer secondary control.
 * Applies to BOTH links and buttons.
 */
.employer-jobs-page .employer-dashboard-secondary-btn,
.employer-dashboard-page .employer-dashboard-secondary-btn {
  height: 42px;
  min-height: 42px;

  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--fj-border);
  border-radius: 10px;

  background: #fff;

  color: #334155;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;

  line-height: 1;

  text-decoration: none;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  box-sizing: border-box;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}

.employer-jobs-page
.employer-dashboard-secondary-btn:hover,
.employer-dashboard-page
.employer-dashboard-secondary-btn:hover {
  border-color: #cbd5e1;

  background: #f8fafc;

  color: var(--fj-text);
}


/* Close */

.employer-jobs-page
.employer-dashboard-secondary-btn.danger,
.employer-dashboard-page
.employer-dashboard-secondary-btn.danger {
  border-color: #fecdd3;

  background: #fff;

  color: #be123c;
}

.employer-jobs-page
.employer-dashboard-secondary-btn.danger:hover,
.employer-dashboard-page
.employer-dashboard-secondary-btn.danger:hover {
  border-color: #fda4af;

  background: #fff1f2;
}


/* Primary View button aligned with secondary controls */

.employer-jobs-page
.employer-listing-actions
.job-view-btn {
  height: 42px;
  min-height: 42px;

  padding: 0 15px;
}


/* ---------------------------------------------------------
   List rhythm
   --------------------------------------------------------- */

.employer-jobs-page .employer-job-management-list {
  display: grid;

  gap: 14px;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 650px) {

  .employer-jobs-page
  .employer-listing-actions {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    width: 100%;
  }

  .employer-jobs-page
  .employer-listing-actions .btn,
  .employer-jobs-page
  .employer-dashboard-secondary-btn {
    width: 100%;
  }

}


/* =========================================================
   EMPLOYER CANDIDATE PROFILE
   ========================================================= */

.employer-candidate-page {
  background: var(--fj-bg);
}

.employer-candidate-shell {
  padding-top: 34px;
  padding-bottom: 80px;
}

.employer-candidate-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) 340px;

  gap: 24px;

  align-items: start;
}

.employer-candidate-main {
  display: grid;

  gap: 16px;
}

.employer-candidate-hero,
.employer-candidate-section {
  padding: 24px;

  border: 1px solid var(--fj-border);
  border-radius: 16px;

  background: #fff;
}

.employer-candidate-hero-row {
  display: flex;

  gap: 16px;

  align-items: flex-start;
}

.employer-candidate-avatar {
  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  font-size: 20px;
}

.employer-candidate-identity {
  min-width: 0;

  flex: 1;
}

.employer-candidate-identity h1 {
  margin: 5px 0 3px;

  font-size: 28px;
  font-weight: 800;

  line-height: 1.2;

  letter-spacing: -.025em;
}

.employer-candidate-title {
  margin: 0;

  color: #64748b;

  font-size: 15px;
  font-weight: 600;
}

.employer-candidate-score {
  flex: 0 0 auto;
}

.employer-candidate-meta {
  margin-top: 18px;
}

.employer-candidate-section h2 {
  margin: 6px 0 14px;

  font-size: 19px;
  font-weight: 800;
}

.employer-candidate-summary {
  margin: 0;

  color: #475569;

  font-size: 15px;

  line-height: 1.75;

  white-space: pre-line;
}

.employer-experience-list {
  display: grid;

  gap: 0;
}

.employer-experience-item {
  padding: 18px 0;

  border-top: 1px solid #e2e8f0;
}

.employer-experience-item:first-child {
  padding-top: 4px;

  border-top: 0;
}

.employer-experience-head {
  display: flex;

  gap: 20px;

  justify-content: space-between;

  align-items: flex-start;
}

.employer-experience-head h3 {
  margin: 0;

  font-size: 16px;
  font-weight: 800;
}

.employer-experience-head p {
  margin: 3px 0 0;

  color: #475569;

  font-size: 14px;
  font-weight: 600;
}

.employer-experience-date {
  flex: 0 0 auto;

  color: #64748b;

  font-size: 13px;
  font-weight: 600;
}

.employer-experience-location {
  margin-top: 7px;

  color: #64748b;

  font-size: 13px;
}

.employer-experience-description {
  margin: 10px 0 0;

  color: #475569;

  font-size: 14px;

  line-height: 1.65;

  white-space: pre-line;
}

.employer-candidate-sidebar {
  display: grid;

  gap: 14px;

  position: sticky;

  top: 92px;
}

.employer-match-detail-card h3 {
  margin: 7px 0 12px;

  font-size: 17px;
  font-weight: 800;
}

.employer-match-detail-score {
  margin-bottom: 14px;

  color: #64748b;

  font-size: 13px;
}

.employer-match-detail-score strong {
  margin-right: 4px;

  color: #16a34a;

  font-size: 20px;
  font-weight: 800;
}

.employer-match-signal-list {
  display: grid;

  gap: 8px;

  margin: 15px 0;
}

.employer-match-signal-list > div {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 8px 10px;

  border-radius: 9px;

  background: #f8fafc;

  color: #64748b;

  font-size: 13px;
}

.employer-match-signal-list strong {
  color: #0f172a;
}

.employer-profile-why-match {
  margin-top: 16px;
}

.employer-profile-job-link {
  width: 100%;

  margin-top: 14px;
}

.employer-other-match-list {
  display: grid;

  gap: 10px;

  margin-top: 12px;
}

.employer-other-match {
  display: flex;

  gap: 12px;

  align-items: center;
  justify-content: space-between;

  padding: 10px 0;

  border-top: 1px solid #e2e8f0;
}

.employer-other-match:first-child {
  border-top: 0;
}

.employer-other-match strong,
.employer-other-match span {
  display: block;
}

.employer-other-match strong {
  color: #0f172a;

  font-size: 13px;
  font-weight: 700;
}

.employer-other-match span {
  margin-top: 2px;

  color: #64748b;

  font-size: 12px;
}

.employer-other-match a {
  color: #2563eb;

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;
}

.employer-other-role-count {
  display: inline-flex;

  margin-left: 8px;

  color: #2563eb;

  font-size: 12px;
  font-weight: 700;
}


@media (max-width: 920px) {

  .employer-candidate-layout {
    grid-template-columns: 1fr;
  }

  .employer-candidate-sidebar {
    position: static;
  }

}


@media (max-width: 600px) {

  .employer-candidate-hero,
  .employer-candidate-section {
    padding: 18px;
  }

  .employer-candidate-hero-row {
    flex-wrap: wrap;
  }

  .employer-candidate-score {
    margin-left: 74px;
  }

  .employer-experience-head {
    flex-direction: column;

    gap: 6px;
  }

}


/* =========================================================
   CANDIDATE INVITATIONS
   ========================================================= */

.employer-invite-btn {
  height: 42px;

  padding: 0 14px;

  border: 1px solid #cbd5e1;
  border-radius: 10px;

  background: #fff;

  color: #334155;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}

.employer-invite-btn:hover:not(:disabled) {
  border-color: #93c5fd;

  background: #eff6ff;

  color: #1d4ed8;
}

.employer-invite-btn.is-invited,
.employer-profile-invite-btn.is-invited {
  border-color: #bbf7d0;

  background: #ecfdf5;

  color: #047857;

  cursor: default;

  opacity: 1;
}

.employer-profile-invite-btn {
  width: 100%;

  margin-top: 12px;
}

.candidate-invites-section {
  margin-bottom: 30px;
}

.candidate-invite-list {
  display: grid;

  gap: 12px;

  margin-top: 14px;
}

.candidate-invite-card {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 22px;

  padding: 20px 22px;

  border: 1px solid #bfdbfe;
  border-radius: 16px;

  background: #fff;
}

.candidate-invite-card-main {
  display: flex;

  gap: 14px;

  align-items: flex-start;

  min-width: 0;
}

.candidate-invite-copy {
  min-width: 0;
}

.candidate-invite-label {
  margin-bottom: 4px;

  color: #2563eb;

  font-size: 12px;
  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .025em;
}

.candidate-invite-copy h3 {
  margin: 0;

  color: #0f172a;

  font-size: 17px;
  font-weight: 800;
}

.candidate-invite-copy > p {
  margin: 3px 0 0;

  color: #64748b;

  font-size: 14px;
  font-weight: 500;
}

.candidate-invite-copy .job-meta-row {
  margin-top: 11px;
}

.candidate-invite-match {
  color: #047857 !important;

  background: #ecfdf5 !important;
}


@media (max-width: 700px) {

  .candidate-invite-card {
    align-items: stretch;

    flex-direction: column;
  }

  .candidate-invite-card > .btn {
    width: 100%;
  }

}


/* =========================================================
   Employer job requirements
   ========================================================= */

.job-skill-tag {
  gap: 7px;
}

.job-skill-tag-name {
  white-space: nowrap;
}

.job-skill-tag-importance {
  min-height: 28px;

  padding: 3px 24px 3px 8px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background: #fff;

  color: #334155;

  font-family: inherit;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}

.job-skill-tag-importance:focus {
  border-color: #60a5fa;
  outline: none;

  box-shadow:
    0 0 0 2px rgba(37, 99, 235, .10);
}


.employer-strict-requirement {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-top: 14px;

  padding: 13px 14px;

  border: 1px solid #e2e8f0;
  border-radius: 10px;

  background: #f8fafc;

  cursor: pointer;
}

.employer-strict-requirement input {
  width: 17px;
  height: 17px;

  margin-top: 2px;

  flex: 0 0 auto;
}

.employer-strict-requirement span {
  display: grid;

  gap: 3px;
}

.employer-strict-requirement strong {
  color: #0f172a;

  font-size: 13px;
  font-weight: 700;
}

.employer-strict-requirement small {
  color: #64748b;

  font-size: 12px;
  font-weight: 500;

  line-height: 1.45;
}


/* =========================================================
   Employer job skills — compact requirement controls
   ========================================================= */

.employer-job-form .job-skill-input-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  min-height: 52px;

  padding: 7px 9px;
}


.employer-job-form .job-skill-tags {
  display: contents;
}


.employer-job-form .job-skill-tag {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  min-height: 34px;

  padding: 4px 6px 4px 10px;

  border-radius: 999px;

  white-space: nowrap;
}


.employer-job-form .job-skill-tag-name {
  font-size: 12px;
  font-weight: 700;

  line-height: 1;
}


/* Compact Required / Preferred selector */

.employer-job-form .job-skill-tag-importance {
  width: auto;
  min-width: 82px;

  height: 26px;
  min-height: 26px;

  padding: 0 22px 0 8px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background-color: #fff;

  color: #334155;

  font-family: inherit;
  font-size: 11px;
  font-weight: 700;

  line-height: 1;

  cursor: pointer;

  box-shadow: none;
}


.employer-job-form
.job-skill-tag-importance:focus {
  border-color: #60a5fa;

  outline: none;

  box-shadow:
    0 0 0 2px rgba(37, 99, 235, .10);
}


/* Remove button */

.employer-job-form
.job-skill-tag > button {
  width: 20px;
  height: 20px;

  min-width: 20px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  font-size: 15px;
  font-weight: 500;

  line-height: 1;

  cursor: pointer;
}


/* Keep typing area usable even with many chips */

.employer-job-form #job-skill-input {
  flex: 1 1 190px;

  width: auto;
  min-width: 190px;

  height: 34px;

  padding: 4px 8px;

  border: 0;

  background: transparent;

  box-shadow: none;
}


.employer-job-form
#job-skill-input:focus {
  outline: none;
  box-shadow: none;
}


/* Mobile */

@media (max-width: 650px) {

  .employer-job-form
  .job-skill-tag {
    max-width: 100%;
  }

  .employer-job-form
  #job-skill-input {
    flex-basis: 100%;

    min-width: 100%;
  }

}


/* =========================================================
   EMPLOYER JOB SKILLS — MODERN TOKEN UI
   ========================================================= */

.employer-job-form .job-skill-input-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  min-height: 56px;

  padding: 9px 10px;

  border: 1px solid #dbe3ef;
  border-radius: 12px;

  background: #fff;

  box-shadow:
    0 1px 2px rgba(15, 23, 42, .02);

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}


.employer-job-form
.job-skill-input-wrap:focus-within {
  border-color: #93b4fa;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, .08);

  background: #fff;
}


.employer-job-form .job-skill-tags {
  display: contents;
}


/* Main skill token */

.employer-job-form
.modern-skill-tag {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  min-height: 34px;

  padding: 4px 5px 4px 11px;

  border: 1px solid #dbe7f5;
  border-radius: 10px;

  background: #f8fbff;

  box-shadow:
    0 1px 1px rgba(15, 23, 42, .02);

  white-space: nowrap;
}


.employer-job-form
.modern-skill-tag:hover {
  border-color: #c8daf3;

  background: #f5f9ff;
}


.employer-job-form
.job-skill-tag-name {
  color: #1d4ed8;

  font-size: 12px;
  font-weight: 700;

  line-height: 1;
}


/* Required / Preferred toggle */

.employer-job-form
.job-skill-importance-toggle {
  min-height: 25px;

  padding: 0 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 6px;

  font-family: inherit;
  font-size: 10px;
  font-weight: 800;

  line-height: 1;

  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease,
    transform .08s ease;
}


.employer-job-form
.job-skill-importance-toggle:active {
  transform: scale(.97);
}


.employer-job-form
.job-skill-importance-toggle.is-required {
  background: #e8efff;

  color: #1d4ed8;
}


.employer-job-form
.job-skill-importance-toggle.is-required:hover {
  background: #dce7ff;
}


.employer-job-form
.job-skill-importance-toggle.is-preferred {
  background: #f1f5f9;

  color: #475569;
}


.employer-job-form
.job-skill-importance-toggle.is-preferred:hover {
  background: #e8edf3;
}


/* Remove control */

.employer-job-form
.job-skill-remove {
  width: 23px;
  height: 23px;

  min-width: 23px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 6px;

  background: transparent;

  color: #94a3b8;

  font-family: inherit;
  font-size: 16px;
  font-weight: 500;

  line-height: 1;

  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease;
}


.employer-job-form
.job-skill-remove:hover {
  background: #fee2e2;

  color: #dc2626;
}


/* Skill text input */

.employer-job-form
#job-skill-input {
  flex: 1 1 190px;

  width: auto;
  min-width: 190px;

  height: 34px;

  margin: 0;

  padding: 0 8px;

  border: 0;

  background: transparent;

  color: #0f172a;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  box-shadow: none;
}


.employer-job-form
#job-skill-input::placeholder {
  color: #94a3b8;

  font-weight: 500;
}


.employer-job-form
#job-skill-input:focus {
  border: 0;

  outline: none;

  box-shadow: none;
}


/* Remove old select styling from layout */

.employer-job-form
.job-skill-tag-importance {
  display: none !important;
}


/* Help text below skill field */

.employer-job-form
.job-skills-field > .form-help {
  display: block;

  margin-top: 8px;

  color: #64748b;

  font-size: 12px;

  line-height: 1.45;
}


/* Mobile */

@media (max-width: 650px) {

  .employer-job-form
  .modern-skill-tag {
    max-width: 100%;
  }


  .employer-job-form
  #job-skill-input {
    flex-basis: 100%;

    min-width: 100%;
  }

}


/* =========================================================
   FIX: modern employer skill tag button overlap
   ========================================================= */

.employer-job-form
.modern-skill-tag {
  display: inline-flex !important;
  align-items: center !important;

  gap: 7px !important;

  min-height: 36px;

  padding: 5px 6px 5px 11px !important;

  position: relative;

  overflow: visible;
}


/*
 * Undo older generic:
 * .job-skill-tag > button
 * styling for the importance toggle.
 */
.employer-job-form
.modern-skill-tag
.job-skill-importance-toggle {
  position: static !important;

  width: auto !important;
  height: 26px !important;

  min-width: 68px !important;
  min-height: 26px !important;

  margin: 0 !important;

  padding: 0 9px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto !important;

  border: 0 !important;
  border-radius: 7px !important;

  font-size: 10px !important;
  font-weight: 800 !important;

  line-height: 1 !important;

  white-space: nowrap !important;

  transform: none;
}


/* Required state */

.employer-job-form
.modern-skill-tag
.job-skill-importance-toggle.is-required {
  background: #e8efff !important;

  color: #1d4ed8 !important;
}


/* Preferred state */

.employer-job-form
.modern-skill-tag
.job-skill-importance-toggle.is-preferred {
  background: #eef2f7 !important;

  color: #475569 !important;
}


/*
 * Only the X should use the compact square remove-button
 * dimensions.
 */
.employer-job-form
.modern-skill-tag
.job-skill-remove {
  position: static !important;

  width: 22px !important;
  height: 22px !important;

  min-width: 22px !important;
  min-height: 22px !important;

  margin: 0 !important;

  padding: 0 !important;

  flex: 0 0 22px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 6px !important;

  background: transparent !important;

  color: #94a3b8 !important;

  font-size: 15px !important;
  font-weight: 500 !important;

  line-height: 1 !important;
}


/* Skill name */

.employer-job-form
.modern-skill-tag
.job-skill-tag-name {
  position: static !important;

  display: inline-block !important;

  width: auto !important;

  margin: 0 !important;

  flex: 0 0 auto;

  color: #1d4ed8;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.2;

  white-space: nowrap;
}


/* Give the entry field breathing room */

.employer-job-form
.job-skill-input-wrap {
  gap: 8px !important;

  padding: 9px 10px !important;

  overflow: visible;
}


.employer-job-form
#job-skill-input {
  flex: 1 1 180px !important;

  min-width: 180px !important;

  width: auto !important;

  position: static !important;

  margin: 0 !important;
}


@media (max-width: 650px) {

  .employer-job-form
  #job-skill-input {
    flex-basis: 100% !important;

    min-width: 100% !important;
  }

}


/* =========================================================
   Employer skills — segmented importance control
   ========================================================= */

.employer-job-form
.modern-skill-tag {
  display: inline-flex !important;
  align-items: center !important;

  gap: 8px !important;

  min-height: 38px;

  padding: 5px 6px 5px 11px !important;

  border: 1px solid #dbe5f1;
  border-radius: 11px;

  background: #f8fbff;

  white-space: nowrap;
}


.employer-job-form
.modern-skill-tag
.job-skill-tag-name {
  display: inline-block !important;

  width: auto !important;

  margin: 0 !important;

  color: #1d4ed8;

  font-size: 12px;
  font-weight: 750;

  line-height: 1.2;
}


/* Required / Preferred segmented switch */

.employer-job-form
.job-skill-importance-segmented {
  display: inline-flex;

  align-items: center;

  padding: 2px;

  border: 1px solid #d7e0ec;
  border-radius: 8px;

  background: #eef2f7;

  flex: 0 0 auto;
}


.employer-job-form
.modern-skill-tag
.job-skill-segment {
  position: static !important;

  width: auto !important;
  height: 27px !important;

  min-width: 68px !important;
  min-height: 27px !important;

  margin: 0 !important;

  padding: 0 9px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 6px !important;

  background: transparent !important;

  color: #64748b !important;

  font-family: inherit;
  font-size: 10px !important;
  font-weight: 750 !important;

  line-height: 1 !important;

  white-space: nowrap;

  cursor: pointer;

  box-shadow: none !important;

  transition:
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}


.employer-job-form
.job-skill-segment:hover:not(.is-selected) {
  color: #334155 !important;

  background: rgba(255,255,255,.65) !important;
}


.employer-job-form
.job-skill-segment.is-selected {
  background: #fff !important;

  color: #1d4ed8 !important;

  box-shadow:
    0 1px 3px rgba(15, 23, 42, .10) !important;
}


/* X remains a clearly separate action */

.employer-job-form
.modern-skill-tag
.job-skill-remove {
  position: static !important;

  width: 23px !important;
  height: 23px !important;

  min-width: 23px !important;
  min-height: 23px !important;

  margin: 0 !important;

  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 23px !important;

  border: 0 !important;
  border-radius: 6px !important;

  background: transparent !important;

  color: #94a3b8 !important;

  font-size: 16px !important;
  font-weight: 500 !important;

  cursor: pointer;
}


.employer-job-form
.modern-skill-tag
.job-skill-remove:hover {
  background: #fee2e2 !important;

  color: #dc2626 !important;
}


/* Input area */

.employer-job-form
.job-skill-input-wrap {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  gap: 8px !important;

  min-height: 58px;

  padding: 9px 10px !important;

  border: 1px solid #d7e0ec;
  border-radius: 12px;

  background: #fff;
}


.employer-job-form
.job-skill-input-wrap:focus-within {
  border-color: #8fb3ff;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, .08);
}


.employer-job-form
#job-skill-input {
  flex: 1 1 210px !important;

  width: auto !important;
  min-width: 210px !important;

  height: 36px !important;

  margin: 0 !important;

  padding: 0 8px !important;

  position: static !important;

  border: 0 !important;

  background: transparent !important;

  color: #0f172a;

  font-size: 13px;
  font-weight: 500;

  box-shadow: none !important;
}


.employer-job-form
#job-skill-input::placeholder {
  color: #94a3b8;

  opacity: 1;
}


@media (max-width: 760px) {

  .employer-job-form
  .modern-skill-tag {
    max-width: 100%;

    flex-wrap: wrap;
  }


  .employer-job-form
  #job-skill-input {
    flex-basis: 100% !important;

    min-width: 100% !important;
  }

}


/* =========================================================
   Employer skills — maximum 5 state
   ========================================================= */

.employer-job-form
.job-skill-input-wrap.is-maxed {
  background: #f8fafc;

  border-color: #dbe3ee;

  box-shadow: none;
}


.employer-job-form
.job-skill-input-wrap.is-maxed:focus-within {
  border-color: #dbe3ee;

  box-shadow: none;
}


.employer-job-form
.job-skill-input-wrap.is-maxed
#job-skill-input {
  cursor: not-allowed !important;

  color: #64748b !important;

  opacity: 1 !important;
}


.employer-job-form
.job-skill-input-wrap.is-maxed
#job-skill-input::placeholder {
  color: #64748b !important;

  opacity: 1 !important;

  font-weight: 600;
}


/* =========================================================
   Employer job skills — hard maximum state
   ========================================================= */

.employer-job-form
.job-skill-limit-message {
  flex: 1 1 260px;

  min-height: 36px;

  align-items: center;

  padding: 0 10px;

  border-radius: 8px;

  background: #f1f5f9;

  color: #475569;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.35;
}


.employer-job-form
.job-skill-input-wrap.is-maxed {
  background: #f8fafc;

  border-color: #dbe3ee;
}


.employer-job-form
.job-skill-input-wrap.is-maxed
#job-skill-input {
  display: none !important;
}


.employer-job-form
.job-skill-input-wrap.is-maxed
.job-skill-limit-message {
  display: flex !important;
}


/* =========================================================
   Candidate onboarding — CV upload processing state
   ========================================================= */

.cv-processing-overlay {
  margin-top: 18px;

  padding: 16px 18px;

  display: none;
  align-items: center;

  gap: 14px;

  border: 1px solid #dbe7f5;
  border-radius: 14px;

  background: #f8fbff;

  opacity: 0;
  transform: translateY(3px);

  transition:
    opacity .18s ease,
    transform .18s ease;
}


.cv-processing-overlay.is-visible {
  display: flex;

  opacity: 1;
  transform: translateY(0);
}


.cv-processing-spinner {
  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  border: 3px solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 50%;

  animation:
    findjobsCvSpin .75s linear infinite;
}


.cv-processing-copy {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.cv-processing-copy strong {
  color: #0f172a;

  font-size: 14px;
  font-weight: 750;
}


.cv-processing-copy span {
  color: #64748b;

  font-size: 12px;
  line-height: 1.45;
}


.cv-button-spinner {
  width: 14px;
  height: 14px;

  display: inline-block;

  margin-right: 7px;

  vertical-align: -2px;

  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;

  animation:
    findjobsCvSpin .7s linear infinite;
}


.cv-form.is-processing,
.cv-form[data-submitting="1"] {
  pointer-events: none;
}


@keyframes findjobsCvSpin {
  to {
    transform: rotate(360deg);
  }
}


@media (prefers-reduced-motion: reduce) {
  .cv-processing-spinner,
  .cv-button-spinner {
    animation-duration: 1.5s;
  }
}


/* ==========================================================
   FINDJOBS IN-APP NOTIFICATIONS
   ========================================================== */

.app-notification-link {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 11px;
  color: #475569;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.app-notification-link:hover,
.app-notification-link.nav-active {
  background: #eff6ff;
  color: #2563eb;
}

.app-notification-link svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-notification-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.notifications-shell {
  max-width: var(--fj-max-width, 1500px);
}

.notifications-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.notifications-heading h1 {
  margin: 6px 0 7px;
  color: #0f172a;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.1;
}

.notifications-heading p {
  margin: 0;
  color: #64748b;
  font-size: 16px;
  line-height: 1.6;
}

.notifications-list {
  display: grid;
  gap: 12px;
}

.notification-card {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow:
    0 3px 14px rgba(15, 23, 42, 0.035);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.notification-card:hover {
  border-color: #bfdbfe;
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.notification-card.is-unread {
  border-color: #bfdbfe;
  background:
    linear-gradient(
      90deg,
      #f8fbff 0%,
      #fff 32%
    );
}

.notification-card-indicator {
  width: 9px;
  height: 9px;
  margin-top: 8px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: transparent;
}

.notification-card.is-unread
.notification-card-indicator {
  background: #2563eb;
}

.notification-card-copy {
  min-width: 0;
  flex: 1;
}

.notification-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.notification-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.4;
}

.notification-card time {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 13px;
  white-space: nowrap;
}

.notification-card p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.55;
}

.notification-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 700;
}

.notification-new-label {
  padding: 3px 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notifications-empty {
  padding: 64px 28px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

.notifications-empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  font-size: 24px;
  font-weight: 800;
}

.notifications-empty h2 {
  margin: 0 0 8px;
  color: #0f172a;
}

.notifications-empty p {
  max-width: 520px;
  margin: 0 auto;
  color: #64748b;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .notifications-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-card {
    padding: 17px;
  }

  .notification-card-top {
    gap: 7px;
    flex-direction: column;
  }

  .notification-card time {
    white-space: normal;
  }
}


/* =========================================================
   FindJobs notification detail
   ========================================================= */

.notification-detail-shell {
  padding-bottom: 80px;
}


.notification-detail-back {
  display: inline-block;

  margin-bottom: 24px;
}


.notification-detail-heading {
  max-width: 760px;

  margin-bottom: 26px;
}


.notification-detail-heading .eyebrow {
  margin-bottom: 9px;
}


.notification-detail-heading h1 {
  margin: 0;

  color: #0f172a;

  font-size:
    clamp(32px, 4vw, 44px);

  font-weight: 800;
  line-height: 1.08;

  letter-spacing: -1.4px;
}


.notification-detail-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 7px;

  margin: 11px 0 0;

  color: #64748b;

  font-size: 15px;
  line-height: 1.5;
}


.notification-detail-context strong {
  color: #334155;

  font-weight: 700;
}


.notification-detail-card {
  max-width: 820px;

  padding: 28px;

  border:
    1px solid #e2e8f0;

  border-radius: 16px;

  background: #fff;

  box-shadow:
    0 4px 18px
    rgba(15, 23, 42, .04);
}


.notification-detail-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}


.notification-detail-label {
  color: #0f172a;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}


.notification-detail-date {
  margin-top: 4px;

  color: #94a3b8;

  font-size: 13px;
  line-height: 1.5;
}


.notification-detail-message {
  padding: 18px 20px;

  border:
    1px solid #dbeafe;

  border-radius: 12px;

  background: #f8fbff;
}


.notification-detail-message p {
  margin: 0;

  color: #0f172a;

  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


.notification-detail-message.is-muted {
  border-color: #e2e8f0;

  background: #f8fafc;
}


.notification-detail-message.is-muted p {
  color: #64748b;
}


.notification-detail-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 22px;
}


.notification-detail-actions .btn {
  width: auto;

  min-height: 44px;

  margin: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding-left: 18px;
  padding-right: 18px;

  border-radius: 10px;

  font-size: 14px;
  font-weight: 700;
}


@media (max-width: 700px) {

  .notification-detail-shell {
    padding-bottom: 60px;
  }


  .notification-detail-card {
    padding: 20px;
  }


  .notification-detail-actions {
    flex-direction: column;
  }


  .notification-detail-actions .btn {
    width: 100%;
  }

}


/* =========================================================
   Employer candidate profile — Next Step card
   ========================================================= */

.employer-next-step-card {
  display: block;
  padding: 22px;
}

.employer-next-step-card .eyebrow {
  margin-bottom: 10px;
}

.employer-next-step-card h3 {
  margin: 0 0 8px;
  color: var(--fj-text, #0f172a);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.employer-next-step-card p {
  margin: 0;
  color: var(--fj-text-muted, #64748b);
  font-size: 14px;
  line-height: 1.6;
}

.employer-next-step-card .employer-profile-invite-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-align: center;
}

@media (max-width: 850px) {
  .employer-next-step-card {
    padding: 20px;
  }
}


/* =========================================================
   Employer interview center — lifecycle groups
   ========================================================= */

.interview-center-group-heading {
  margin-top: 14px;
  padding: 10px 2px 2px;
}

.interview-center-group-heading:first-child {
  margin-top: 0;
}

.interview-center-group-heading .eyebrow {
  margin-bottom: 5px;
}

.interview-center-group-heading h2 {
  margin: 0;
  color: var(--fj-text, #0f172a);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.interview-center-action-form {
  margin: 0;
}

.interview-center-action-form .btn {
  min-height: 42px;
}


/* =========================================================
   FindJobs confirmation modal
   ========================================================= */

.app-confirm-modal {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
}


.app-confirm-modal[hidden] {
  display: none;
}


.app-confirm-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(15, 23, 42, .52);

  backdrop-filter:
    blur(3px);
}


.app-confirm-dialog {
  position: relative;

  z-index: 1;

  width: 100%;
  max-width: 470px;

  padding: 28px;

  background: #fff;

  border:
    1px solid #e2e8f0;

  border-radius: 18px;

  box-shadow:
    0 24px 70px
    rgba(15, 23, 42, .22);
}


.app-confirm-icon {
  width: 46px;
  height: 46px;

  margin:
    0 auto 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #ecfdf5;
  color: #059669;

  font-size: 21px;
  font-weight: 800;
}


.app-confirm-copy {
  text-align: center;
}


.app-confirm-copy h2 {
  margin:
    7px 0 10px;

  color: #0f172a;

  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
}


.app-confirm-copy p {
  margin: 0;

  color: #64748b;

  font-size: 15px;
  line-height: 1.6;
}


.app-confirm-actions {
  margin-top: 26px;

  display: flex;
  justify-content: center;

  gap: 10px;
}


@media (max-width: 560px) {

  .app-confirm-dialog {
    padding: 22px;
  }


  .app-confirm-actions {
    flex-direction: column-reverse;
  }


  .app-confirm-actions .btn {
    width: 100%;
  }

}


/* =========================================================
   Employer final candidate decision modal
   ========================================================= */

.app-decision-dialog {
  max-width: 520px;
}

.app-decision-icon {
  background: #eff6ff;
  color: #2563eb;
}

.app-decision-message-field {
  margin-top: 22px;
  text-align: left;
}

.app-decision-message-field label {
  display: block;
}

.app-decision-message-field
.fj-field-label {
  display: block;
  margin-bottom: 8px;
}

.app-decision-message-field
.fj-field-label small {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

.app-decision-message-field
.fj-textarea {
  min-height: 120px;
  resize: vertical;
}

.app-decision-message-field
.fj-field-help {
  display: block;
  margin-top: 7px;
}

.app-decision-message-field
.fj-field-error {
  margin-top: 7px;
}


/* =========================================================
   Candidate application notification details
   ========================================================= */

.candidate-application-card {
  scroll-margin-top: 96px;
}


.candidate-application-card:target {
  border-color: #bfdbfe;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, .07),
    0 10px 28px rgba(15, 23, 42, .06);
}


.candidate-employer-message {
  margin-top: 14px;

  padding: 14px 16px;

  border:
    1px solid #dbeafe;

  border-radius: 12px;

  background: #f8fbff;
}


.candidate-employer-message-label {
  margin-bottom: 6px;

  color: #1e40af;

  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}


.candidate-employer-message p {
  margin: 0;

  color: var(--fj-text, #0f172a);

  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}


@media (max-width: 700px) {

  .candidate-application-card {
    scroll-margin-top: 82px;
  }

  .candidate-employer-message {
    padding: 13px 14px;
  }

}


/* =========================================================
   FINDJOBS INTERVIEW WORKFLOW
   ========================================================= */

.interview-response-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.interview-reschedule-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--fj-border, #e2e8f0);
}

.interview-reschedule-form textarea {
  width: 100%;
  min-height: 110px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--fj-border, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  color: var(--fj-text, #0f172a);
  font: inherit;
  line-height: 1.55;
  resize: vertical;
  box-sizing: border-box;
}

.interview-response-state {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 9px 12px;
  border: 1px solid var(--fj-border, #e2e8f0);
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
}

.interview-response-state.is-accepted {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

.interview-center-list {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.interview-center-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.interview-center-response {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--fj-border, #e2e8f0);
}




/* =========================================================
   Candidate application withdrawal
   ========================================================= */

.candidate-application-card
.job-card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.candidate-withdraw-button {
  border-color: #fecaca;
  color: #b42318;
}

.candidate-withdraw-button:hover,
.candidate-withdraw-button:focus {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.candidate-withdraw-dialog {
  max-width: 500px;
}

.candidate-withdraw-confirm {
  border: 1px solid #dc2626;
  background: #dc2626;
  color: #fff;
}

.candidate-withdraw-confirm:hover,
.candidate-withdraw-confirm:focus {
  border-color: #b91c1c;
  background: #b91c1c;
  color: #fff;
}

.candidate-withdraw-confirm:disabled {
  cursor: wait;
  opacity: .7;
}

.candidate-withdraw-error {
  margin-top: 14px;
  padding: 10px 12px;

  border: 1px solid #fecaca;
  border-radius: 10px;

  background: #fef2f2;

  color: #b42318;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.candidate-withdraw-error[hidden] {
  display: none !important;
}