/* UI-only reference redesign for the top hiring hero/KPI section */
body.hiring-mode {
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%) !important;
}

body.hiring-mode .main {
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%) !important;
}

body.hiring-mode .hiring-screen {
  gap: 26px !important;
  background: transparent !important;
}

body.hiring-mode .hiring-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 18px 0 8px !important;
  padding: 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.hiring-mode .hiring-head h1 {
  margin: 0 0 10px !important;
  color: #101b33 !important;
  font-size: 38px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}

body.hiring-mode .hiring-head p {
  margin: 0 !important;
  color: #52617a !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

body.hiring-mode .hiring-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding-top: 2px !important;
}

body.hiring-mode .hiring-actions .icon-btn {
  width: 46px !important;
  height: 46px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #2262e9 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 30px rgba(36, 69, 117, 0.08) !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

body.hiring-mode .hiring-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding: 0 14px !important;
  margin: 0 0 2px !important;
  overflow: visible !important;
}

body.hiring-mode .hire-kpi {
  position: relative !important;
  min-height: 214px !important;
  padding: 38px 28px 28px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 38px rgba(31, 52, 85, 0.07) !important;
  overflow: hidden !important;
  display: block !important;
  transform: none !important;
  transition: box-shadow .18s ease, transform .18s ease !important;
}

body.hiring-mode .hire-kpi:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 48px rgba(31, 52, 85, 0.1) !important;
}

body.hiring-mode .hire-kpi:before {
  content: '' !important;
  position: absolute !important;
  right: -18px !important;
  bottom: -26px !important;
  width: 205px !important;
  height: 170px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.hiring-mode .hire-kpi:after {
  content: none !important;
  display: none !important;
}

body.hiring-mode .hire-kpi.blue:before {
  background: radial-gradient(circle, rgba(75, 137, 255, 0.19), transparent 64%) !important;
}

body.hiring-mode .hire-kpi.violet:before {
  background: radial-gradient(circle, rgba(147, 99, 255, 0.19), transparent 64%) !important;
}

body.hiring-mode .hire-kpi.orange:before {
  background: radial-gradient(circle, rgba(255, 160, 92, 0.2), transparent 64%) !important;
}

body.hiring-mode .hire-kpi.green:before {
  background: radial-gradient(circle, rgba(57, 209, 128, 0.22), transparent 64%) !important;
}

body.hiring-mode .hire-kpi > div {
  position: relative !important;
  z-index: 2 !important;
  max-width: 58% !important;
  min-width: 0 !important;
  transform: none !important;
}

body.hiring-mode .hire-kpi span {
  display: block !important;
  margin: 0 0 16px !important;
  color: #17233a !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  letter-spacing: -0.01em !important;
}

body.hiring-mode .hire-kpi strong {
  display: block !important;
  margin: 0 0 10px !important;
  color: #0c172c !important;
  font-size: 38px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
}

body.hiring-mode .hire-kpi em {
  display: block !important;
  margin: 0 0 16px !important;
  color: #1dbf73 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

body.hiring-mode .hire-kpi small {
  display: block !important;
  margin: 0 !important;
  color: #283650 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

body.hiring-mode .hire-kpi i {
  position: absolute !important;
  right: 28px !important;
  bottom: 33px !important;
  z-index: 1 !important;
  width: 116px !important;
  height: 116px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: block !important;
  opacity: .96 !important;
  filter: drop-shadow(0 18px 22px rgba(40, 86, 160, 0.16)) !important;
}

body.hiring-mode .hire-kpi .kpi-spark {
  display: none !important;
}

body.hiring-mode .hire-kpi.blue i {
  transform: rotate(-4deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='18' y1='18' x2='118' y2='125' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2399c4ff'/%3E%3Cstop offset='.55' stop-color='%234b82ff'/%3E%3Cstop offset='1' stop-color='%23dce9ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='28' y1='74' x2='108' y2='118'%3E%3Cstop stop-color='%237caeff'/%3E%3Cstop offset='1' stop-color='%23d9e7ff'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='0' dy='12' stdDeviation='8' flood-color='%232563eb' flood-opacity='.20'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cellipse cx='68' cy='111' rx='52' ry='15' fill='%23cfe0ff' opacity='.75'/%3E%3Ccircle cx='70' cy='38' r='22' fill='url(%23a)'/%3E%3Ccircle cx='104' cy='56' r='15' fill='%23a9c9ff'/%3E%3Ccircle cx='36' cy='62' r='16' fill='%238ebaff'/%3E%3Cpath d='M35 97c4-22 19-35 35-35s32 13 36 35c-15 9-56 9-71 0z' fill='url(%23b)'/%3E%3Cpath d='M82 98c3-17 13-27 26-27s24 10 27 27c-12 8-41 8-53 0z' fill='%23bed6ff'/%3E%3Cpath d='M7 101c4-16 14-26 28-26s23 10 27 26c-12 8-43 8-55 0z' fill='%23d6e7ff'/%3E%3C/g%3E%3C/svg%3E") !important;
}

body.hiring-mode .hire-kpi.violet i {
  right: 34px !important;
  bottom: 38px !important;
  transform: rotate(-12deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='27' y1='19' x2='111' y2='120'%3E%3Cstop stop-color='%23d9c5ff'/%3E%3Cstop offset='.52' stop-color='%238a62ff'/%3E%3Cstop offset='1' stop-color='%23eee6ff'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='0' dy='15' stdDeviation='9' flood-color='%237c3aed' flood-opacity='.22'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cellipse cx='72' cy='112' rx='45' ry='14' fill='%23e9ddff' opacity='.8'/%3E%3Cpath d='M44 23c15-9 36-7 50 7l12 12c6 6 5 15-1 21l-12 12c-6 6-15 6-21 0L61 64c-4 12-3 23 8 34l12-12c6-6 16-6 22 0l12 12c6 6 7 15 1 21l-10 10c-6 6-15 7-23 3C48 113 28 71 37 37c2-6 4-11 7-14z' fill='url(%23a)'/%3E%3Cpath d='M78 24l24 24-16 16-24-24z' fill='%23c5adff' opacity='.75'/%3E%3Cpath d='M88 91l23 23-15 15-23-23z' fill='%23c5adff' opacity='.72'/%3E%3C/g%3E%3C/svg%3E") !important;
}

body.hiring-mode .hire-kpi.orange i {
  right: 30px !important;
  bottom: 34px !important;
  transform: rotate(0deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='29' y1='14' x2='112' y2='125'%3E%3Cstop stop-color='%23ffe3c7'/%3E%3Cstop offset='.58' stop-color='%23ff8f48'/%3E%3Cstop offset='1' stop-color='%23fff4ea'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='0' dy='16' stdDeviation='8' flood-color='%23f97316' flood-opacity='.22'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cellipse cx='76' cy='112' rx='42' ry='13' fill='%23ffe3cf' opacity='.85'/%3E%3Cpath d='M38 14h58l20 22v84H38z' fill='url(%23a)'/%3E%3Cpath d='M96 14v25h20' fill='%23ffd3aa'/%3E%3Cpath d='M55 51h41' stroke='%23ffffff' stroke-width='8' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M55 72h32' stroke='%23ffffff' stroke-width='8' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M55 93h41' stroke='%23ffffff' stroke-width='8' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M31 22h55v88H31z' fill='%23fff1e6' opacity='.42'/%3E%3C/g%3E%3C/svg%3E") !important;
}

body.hiring-mode .hire-kpi.green i {
  right: 28px !important;
  bottom: 36px !important;
  transform: rotate(-8deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='24' y1='16' x2='119' y2='126'%3E%3Cstop stop-color='%23c7fbdc'/%3E%3Cstop offset='.52' stop-color='%2322c76d'/%3E%3Cstop offset='1' stop-color='%23e8fff0'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='0' dy='16' stdDeviation='9' flood-color='%2316a34a' flood-opacity='.22'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cellipse cx='72' cy='111' rx='46' ry='13' fill='%23d7fbe6' opacity='.8'/%3E%3Cpath d='M15 60L122 17 95 124 65 84 25 103z' fill='url(%23a)'/%3E%3Cpath d='M65 84l57-67-43 78z' fill='%23b7f4cf' opacity='.7'/%3E%3Cpath d='M25 103l40-19 15 21z' fill='%2388e7ae' opacity='.8'/%3E%3C/g%3E%3C/svg%3E") !important;
}

body.hiring-mode .hire-kpi.green > div {
  transform: none !important;
}

body.hiring-mode .hire-kpi.green small {
  margin-top: 0 !important;
}

@media (max-width: 1380px) {
  body.hiring-mode .hiring-kpis {
    gap: 14px !important;
  }

  body.hiring-mode .hire-kpi {
    min-height: 196px !important;
    padding: 30px 22px 24px !important;
  }

  body.hiring-mode .hire-kpi > div {
    max-width: 62% !important;
  }

  body.hiring-mode .hire-kpi i {
    right: 18px !important;
    bottom: 28px !important;
    width: 92px !important;
    height: 92px !important;
  }

  body.hiring-mode .hire-kpi strong {
    font-size: 34px !important;
  }
}

@media (max-width: 1040px) {
  body.hiring-mode .hiring-head {
    flex-direction: column !important;
    padding: 0 !important;
  }

  body.hiring-mode .hiring-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 0 !important;
  }
}

@media (max-width: 720px) {
  body.hiring-mode .hiring-head h1 {
    font-size: 30px !important;
  }

  body.hiring-mode .hiring-kpis {
    grid-template-columns: 1fr !important;
  }

  body.hiring-mode .hire-kpi {
    min-height: 190px !important;
  }
}