.candidate1-photo-verify-page {
  min-height: 100vh;
  padding: 26px;
  background: radial-gradient(circle at 0 0, #dcecff 0, transparent 28%), linear-gradient(135deg, #f7faff, #edf3fa);
}

/* Candidate 2 verification result */
.candidate2-result-page {
  min-height: 100vh;
  padding: 28px;
  background: linear-gradient(145deg, #edf5ff 0%, #f8fbff 48%, #eefaf4 100%);
  color: #102b4e;
}

.candidate2-result-shell {
  width: min(1180px, 100%);
  margin: auto;
  overflow: hidden;
  border: 1px solid #dce6f2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 65px #183b6520;
}

.candidate2-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 106px;
  padding: 18px 30px;
  border-bottom: 1px solid #e2e9f2;
}

.candidate2-result-brand { display: flex; align-items: center; gap: 18px; }
.candidate2-result-brand > img { width: 76px; height: 76px; object-fit: contain; }
.candidate2-result-brand > div > img { width: min(500px, 54vw); max-height: 72px; object-fit: contain; object-position: left center; }
.candidate2-result-brand h2 { margin: 0; font-size: 21px; }
.candidate2-result-brand span { display: block; margin-top: 5px; color: #2d6bb2; font-size: 10px; font-weight: 900; letter-spacing: 1.3px; }

.candidate2-result-secure { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #eefaf4; }
.candidate2-result-secure > i { width: 10px; height: 10px; border-radius: 50%; background: #20b56a; box-shadow: 0 0 0 5px #20b56a1c; }
.candidate2-result-secure span { display: grid; }
.candidate2-result-secure b { font-size: 12px; }
.candidate2-result-secure small { color: #6c7f93; font-size: 10px; }

.candidate2-result-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px 24px;
  background: #f8fbff;
  border-bottom: 1px solid #e5ebf3;
}
.candidate2-result-progress > div { display: flex; align-items: center; gap: 7px; color: #4c6b8d; font-size: 11px; font-weight: 800; }
.candidate2-result-progress > div > b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #22aa65; color: #fff; font-size: 12px; }
.candidate2-result-progress > i { width: 62px; height: 2px; margin: 0 10px; background: #88d5ad; }
.candidate2-result-progress .current { color: #16874d; }

.candidate2-result-card {
  width: min(760px, calc(100% - 36px));
  margin: 38px auto 44px;
  padding: 34px 42px;
  text-align: center;
  border: 1px solid #dfe8f1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 48px #1b416d18;
}
.candidate2-result-check { width: 92px; height: 92px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 50%; background: #e9f9f0; box-shadow: 0 0 0 10px #f5fcf8; }
.candidate2-result-check span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #28bc70, #139154); color: #fff; font-size: 33px; font-weight: 900; }
.candidate2-result-eyebrow { color: #168f52; font-size: 11px; font-weight: 900; letter-spacing: 1.7px; }
.candidate2-result-card > h1 { margin: 8px 0 8px; color: #102b4e; font-size: 31px; }
.candidate2-result-intro { max-width: 610px; margin: 0 auto 24px; color: #60748b; font-size: 15px; line-height: 1.65; }

.candidate2-result-profile { display: flex; align-items: center; gap: 17px; padding: 17px; text-align: left; border: 1px solid #dce6f1; border-radius: 15px; background: #f8fbff; }
.candidate2-result-profile img { width: 82px; height: 82px; flex: none; border: 4px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 7px 18px #183b6525; }
.candidate2-result-profile span { color: #2671c9; font-size: 9px; font-weight: 900; letter-spacing: 1.1px; }
.candidate2-result-profile h2 { margin: 4px 0 2px; font-size: 21px; }
.candidate2-result-profile p { margin: 0; color: #3d5878; font-size: 13px; font-weight: 700; }
.candidate2-result-profile small { color: #73869a; font-size: 11px; }

.candidate2-result-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.candidate2-result-status > div { display: flex; align-items: center; gap: 9px; padding: 13px; text-align: left; border: 1px solid #d5eddf; border-radius: 12px; background: #f2fbf6; }
.candidate2-result-status i { width: 27px; height: 27px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #20aa62; color: #fff; font-style: normal; font-size: 12px; }
.candidate2-result-status span { display: grid; }
.candidate2-result-status b { color: #24415f; font-size: 11px; }
.candidate2-result-status small { color: #1b9959; font-size: 10px; font-weight: 800; }

.candidate2-result-note { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; border-radius: 13px; background: #edf5ff; }
.candidate2-result-note > i { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #2479d7; color: #fff; font-style: normal; font-weight: 900; }
.candidate2-result-note p { display: grid; margin: 0; }
.candidate2-result-note b { font-size: 12px; }
.candidate2-result-note small { color: #667b92; font-size: 10px; line-height: 1.45; }
.candidate2-result-logout { display: flex; align-items: center; justify-content: center; gap: 22px; width: min(330px, 100%); margin: 22px auto 0; padding: 13px 20px; background: linear-gradient(135deg, #1671dc, #0f55af); }

@media (max-width: 760px) {
  .candidate2-result-page { padding: 0; }
  .candidate2-result-shell { min-height: 100vh; border: 0; border-radius: 0; }
  .candidate2-result-header { padding: 14px 17px; }
  .candidate2-result-brand > img { width: 58px; height: 58px; }
  .candidate2-result-brand > div > img { width: 56vw; }
  .candidate2-result-secure { display: none; }
  .candidate2-result-progress > div > span { display: none; }
  .candidate2-result-progress > i { flex: 1; width: auto; margin: 0 5px; }
  .candidate2-result-card { margin: 20px auto 28px; padding: 26px 18px; }
  .candidate2-result-card > h1 { font-size: 25px; }
  .candidate2-result-status { grid-template-columns: 1fr; }
}

.candidate1-photo-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px #1938581f;
}

.candidate1-photo-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 28px;
  border-bottom: 1px solid #dfe7f0;
  background: linear-gradient(100deg, #fff, #f7fbff);
}

.candidate1-photo-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.candidate1-photo-brand > img {
  width: 66px;
  height: 66px;
  flex: none;
  object-fit: contain;
}

.candidate1-photo-brand > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.candidate1-photo-brand > div > img {
  display: block;
  width: min(600px, 100%);
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
}

.candidate1-photo-brand h2 {
  margin: 0;
  color: #1b324f;
  font-size: 19px;
}

.candidate1-photo-brand span {
  color: #146cf5;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.3px;
}

.candidate1-photo-secure {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #dce8e1;
  border-radius: 11px;
  background: #f2fbf5;
  flex: none;
}

.candidate1-photo-secure > i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #21ad5b;
  box-shadow: 0 0 0 5px #21ad5b18;
}

.candidate1-photo-secure > span {
  display: grid;
}

.candidate1-photo-secure b {
  color: #23603b;
  font-size: 11px;
}

.candidate1-photo-secure small {
  color: #6b8a76;
  font-size: 8px;
}

.candidate1-photo-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px 26px;
  border-bottom: 1px solid #e5ebf2;
  background: #fbfcfe;
}

.candidate1-photo-progress > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7c899a;
  font-size: 10px;
  font-weight: 800;
}

.candidate1-photo-progress > div > b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #ccd6e1;
  border-radius: 50%;
  background: #fff;
  font-size: 10px;
}

.candidate1-photo-progress > i {
  width: 60px;
  height: 2px;
  margin: 0 12px;
  background: #dce4ed;
}

.candidate1-photo-progress .complete > b {
  border-color: #25a862;
  background: #25a862;
  color: #fff;
}

.candidate1-photo-progress .complete {
  color: #28704a;
}

.candidate1-photo-progress .current > b {
  border-color: #146cf5;
  background: #146cf5;
  color: #fff;
  box-shadow: 0 0 0 5px #146cf515;
}

.candidate1-photo-progress .current {
  color: #174c91;
}

.candidate1-photo-content {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 22px;
  padding: 26px;
}

.candidate1-photo-summary,
.candidate1-capture-card {
  border: 1px solid #e0e7f0;
  border-radius: 17px;
  background: #fff;
}

.candidate1-photo-summary {
  overflow: hidden;
}

.candidate1-photo-summary-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
  background: linear-gradient(145deg, #0e438b, #1474df);
  color: #fff;
}

.candidate1-photo-summary-head > img {
  width: 88px;
  height: 88px;
  flex: none;
  border: 4px solid #ffffffd9;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 25px #06295455;
}

.candidate1-photo-summary-head span {
  color: #bcdcff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.candidate1-photo-summary-head h1 {
  margin: 5px 0 4px;
  font-size: 25px;
}

.candidate1-photo-summary-head p {
  margin: 0;
  color: #d9ebff;
  font-size: 13px;
}

.candidate1-photo-details {
  padding: 14px 22px;
}

.candidate1-photo-details p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px dashed #dce3ec;
}

.candidate1-photo-details span {
  color: #8391a3;
  font-size: 13px;
  font-weight: 800;
}

.candidate1-photo-details b {
  max-width: 190px;
  color: #233a58;
  font-size: 14px;
  text-align: right;
  overflow-wrap: anywhere;
}

.candidate1-photo-post {
  display: grid !important;
}

.candidate1-photo-post b {
  max-width: none;
  margin-top: 5px;
  color: #111827;
  font-size: 12px;
  text-align: left;
}

.candidate1-photo-guidance {
  margin: 0 18px 18px;
  padding: 15px;
  border-radius: 12px;
  background: #f5f8fc;
}

.candidate1-photo-guidance > b {
  color: #344b68;
  font-size: 11px;
}

.candidate1-photo-guidance ul {
  margin: 9px 0 0;
  padding-left: 17px;
  color: #6f7e91;
  font-size: 9px;
  line-height: 1.8;
}

.candidate1-capture-card {
  padding: 25px;
}

.candidate1-capture-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.candidate1-capture-heading span {
  color: #146cf5;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.1px;
}

.candidate1-capture-heading h2 {
  margin: 5px 0;
  color: #172d4b;
  font-size: 23px;
}

.candidate1-capture-heading p {
  margin: 0;
  color: #7a889a;
  font-size: 10px;
}

.candidate1-camera-live {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  background: #fff0f0;
  color: #cc3c3c;
  font-size: 8px;
  font-weight: 900;
}

.candidate1-camera-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e33f3f;
  box-shadow: 0 0 0 4px #e33f3f18;
}

.candidate1-camera-frame {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  overflow: hidden;
  border: 4px solid #dbe8f8;
  border-radius: 18px;
  background: #101722;
  box-shadow: inset 0 0 0 1px #ffffff38;
}

.candidate1-camera-frame video,
.candidate1-camera-frame canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.candidate1-face-guide {
  position: absolute;
  z-index: 2;
  inset: 11% 27%;
  border: 2px dashed #ffffffb8;
  border-radius: 48% 48% 42% 42%;
  pointer-events: none;
  box-shadow: 0 0 0 999px #00000016;
}

.candidate1-capture-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 17px;
}

.candidate1-capture-actions button {
  min-width: 155px;
  padding: 11px 16px;
  border-radius: 10px;
  background: linear-gradient(90deg, #125ec4, #1679ed);
}

.candidate1-capture-actions button:disabled {
  opacity: .55;
}

.candidate1-capture-actions p {
  margin: 0;
  color: #6e7c8e;
  font-size: 9px;
}

.candidate1-saved-photo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid #d8eadf;
  border-radius: 12px;
  background: #f3fbf6;
}

.candidate1-saved-photo > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.candidate1-saved-photo > div > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #27ad60;
  color: #fff;
}

.candidate1-saved-photo p {
  display: grid;
  margin: 0;
}

.candidate1-saved-photo b {
  color: #28603d;
  font-size: 10px;
}

.candidate1-saved-photo small {
  color: #769080;
  font-size: 8px;
}

.candidate1-saved-photo > img {
  width: 62px;
  height: 50px;
  border-radius: 7px;
  object-fit: cover;
}

.candidate1-photo-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid #e4eaf1;
}

.candidate1-photo-next > p {
  margin: 0;
  color: #8793a3;
  font-size: 8px;
}

.candidate1-photo-next > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 10px;
  white-space: nowrap;
}

.candidate1-photo-next > a > b {
  font-size: 18px;
}

@media (max-width: 900px) {
  .candidate1-photo-verify-page { padding: 15px; }
  .candidate1-photo-header { padding: 15px 20px; }
  .candidate1-photo-secure { display: none; }
  .candidate1-photo-content { grid-template-columns: 1fr; padding: 20px; }
  .candidate1-photo-summary-head { justify-content: center; }
  .candidate1-photo-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .candidate1-photo-post { grid-column: 1 / -1; }
}

@media (max-width: 590px) {
  .candidate1-photo-verify-page { padding: 0; background: #fff; }
  .candidate1-photo-shell { border: 0; border-radius: 0; box-shadow: none; }
  .candidate1-photo-header { padding: 12px; }
  .candidate1-photo-brand { gap: 9px; }
  .candidate1-photo-brand > img { width: 44px; height: 44px; }
  .candidate1-photo-brand > div > img { max-height: 39px; }
  .candidate1-photo-brand span { font-size: 7px; }
  .candidate1-photo-progress { justify-content: space-between; padding: 13px 10px; }
  .candidate1-photo-progress > div > span { display: none; }
  .candidate1-photo-progress > i { flex: 1; width: auto; margin: 0 7px; }
  .candidate1-photo-content { padding: 12px; gap: 12px; }
  .candidate1-photo-summary-head { justify-content: flex-start; padding: 17px; }
  .candidate1-photo-summary-head > img { width: 72px; height: 72px; }
  .candidate1-photo-details { grid-template-columns: 1fr; }
  .candidate1-photo-post { grid-column: auto; }
  .candidate1-capture-card { padding: 18px 13px; }
  .candidate1-capture-heading h2 { font-size: 20px; }
  .candidate1-camera-live { display: none; }
  .candidate1-camera-frame { border-width: 3px; border-radius: 13px; }
  .candidate1-capture-actions { flex-direction: column; gap: 8px; }
  .candidate1-capture-actions button { width: 100%; }
  .candidate1-photo-next { align-items: stretch; flex-direction: column; }
  .candidate1-photo-next > a { justify-content: center; }
}

.candidate1-bio-page {
  min-height: 100vh;
  padding: 26px;
  background: radial-gradient(circle at 0 0, #dcecff 0, transparent 28%), linear-gradient(135deg, #f7faff, #edf3fa);
}

.candidate1-bio-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px #1938581f;
}

.candidate1-bio-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 28px;
  border-bottom: 1px solid #dfe7f0;
  background: linear-gradient(100deg, #fff, #f7fbff);
}

.candidate1-bio-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.candidate1-bio-brand > img {
  width: 66px;
  height: 66px;
  flex: none;
  object-fit: contain;
}

.candidate1-bio-brand > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.candidate1-bio-brand > div > img {
  display: block;
  width: min(580px, 100%);
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
}

.candidate1-bio-brand h2 {
  margin: 0;
  color: #1b324f;
  font-size: 19px;
}

.candidate1-bio-brand span {
  color: #146cf5;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.3px;
}

.candidate1-bio-security {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #dce8e1;
  border-radius: 11px;
  background: #f2fbf5;
  flex: none;
}

.candidate1-bio-security > i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #21ad5b;
  box-shadow: 0 0 0 5px #21ad5b18;
}

.candidate1-bio-security > span {
  display: grid;
}

.candidate1-bio-security b {
  color: #23603b;
  font-size: 11px;
}

.candidate1-bio-security small {
  color: #6b8a76;
  font-size: 8px;
}

.candidate1-bio-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px 24px;
  border-bottom: 1px solid #e5ebf2;
  background: #fbfcfe;
}

.candidate1-bio-progress > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7c899a;
  font-size: 10px;
  font-weight: 800;
}

.candidate1-bio-progress > div > b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #ccd6e1;
  border-radius: 50%;
  background: #fff;
  font-size: 10px;
}

.candidate1-bio-progress > i {
  width: 45px;
  height: 2px;
  margin: 0 10px;
  background: #dce4ed;
}

.candidate1-bio-progress .complete > b {
  border-color: #25a862;
  background: #25a862;
  color: #fff;
}

.candidate1-bio-progress .complete { color: #28704a; }

.candidate1-bio-progress .current > b {
  border-color: #146cf5;
  background: #146cf5;
  color: #fff;
  box-shadow: 0 0 0 5px #146cf515;
}

.candidate1-bio-progress .current { color: #174c91; }

.candidate1-bio-content {
  display: grid;
  grid-template-columns: 315px minmax(0, 1fr);
  gap: 24px;
  padding: 28px;
}

.candidate1-bio-candidate,
.candidate1-bio-panel {
  border: 1px solid #e0e7f0;
  border-radius: 17px;
  background: #fff;
}

.candidate1-bio-candidate {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 22px 22px;
  text-align: center;
}

.candidate1-bio-photo {
  position: relative;
  width: 132px;
  height: 132px;
}

.candidate1-bio-photo img {
  width: 100%;
  height: 100%;
  border: 5px solid #e7f0fc;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 28px #173b641f;
}

.candidate1-bio-photo span {
  position: absolute;
  right: 2px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #28ad61;
  color: #fff;
  font-size: 12px;
}

.candidate1-bio-label {
  margin-top: 17px;
  color: #146cf5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.candidate1-bio-candidate h1 {
  margin: 6px 0 5px;
  color: #1d3553;
  font-size: 24px;
}

.candidate1-bio-candidate > p {
  margin: 0;
  color: #77869a;
  font-size: 13px;
}

.candidate1-bio-meta {
  width: 100%;
  margin-top: 20px;
  border-top: 1px solid #e4eaf1;
}

.candidate1-bio-meta p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px dashed #dce3ec;
}

.candidate1-bio-meta span {
  color: #8492a4;
  font-size: 11px;
}

.candidate1-bio-meta b {
  color: #2c415c;
  font-size: 11px;
  text-align: right;
  overflow-wrap: anywhere;
}

.candidate1-bio-safe {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 14px;
  border-radius: 11px;
  background: #f1faf4;
  text-align: left;
}

.candidate1-bio-safe > i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #27ad60;
  color: #fff;
  font-style: normal;
  flex: none;
}

.candidate1-bio-safe > span { display: grid; }
.candidate1-bio-safe b { color: #28603d; font-size: 11px; }
.candidate1-bio-safe small { margin-top: 2px; color: #769080; font-size: 9px; line-height: 1.35; }

.candidate1-bio-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px;
  text-align: center;
}

.candidate1-bio-panel-heading > span {
  color: #146cf5;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.candidate1-bio-panel-heading h2 {
  margin: 6px 0 5px;
  color: #172d4b;
  font-size: 25px;
}

.candidate1-bio-panel-heading p {
  margin: 0;
  color: #7a889a;
  font-size: 10px;
}

.candidate1-bio-scanner {
  position: relative;
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
  margin: 24px auto 15px;
}

.candidate1-bio-scanner:before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #dce9f8;
  border-radius: 50%;
  background: radial-gradient(circle, #f9fcff 0, #edf5ff 72%, #fff 73%);
}

.candidate1-bio-scanner > i {
  position: absolute;
  z-index: 3;
  left: 35px;
  right: 35px;
  top: 50%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #17b56c, transparent);
  box-shadow: 0 0 10px #17b56c;
}

.candidate1-bio-scanner.active > i {
  opacity: 1;
  animation: candidate1-bio-scan 2s ease-in-out infinite;
}

.candidate1-bio-rings {
  position: relative;
  z-index: 2;
  width: 138px;
  height: 138px;
  display: grid;
  place-items: center;
}

.candidate1-bio-rings span {
  position: absolute;
  border: 3px solid #72a9eb;
  border-radius: 50%;
}

.candidate1-bio-rings span:nth-child(1) { width: 132px; height: 132px; border-style: dashed; }
.candidate1-bio-rings span:nth-child(2) { width: 100px; height: 100px; border-color: #3983d8; }
.candidate1-bio-rings span:nth-child(3) { width: 67px; height: 67px; border-color: #166bc7; border-style: dotted; }

.candidate1-bio-rings b {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #146cf5;
  color: #fff;
  font-size: 8px;
  letter-spacing: .6px;
  box-shadow: 0 8px 18px #146cf53d;
}

.candidate1-bio-scanner.active .candidate1-bio-rings span:nth-child(1) { animation: candidate1-bio-spin 4s linear infinite; }
.candidate1-bio-scanner.active .candidate1-bio-rings span:nth-child(3) { animation: candidate1-bio-spin-reverse 3s linear infinite; }
.candidate1-bio-scanner.complete .candidate1-bio-rings span { border-color: #28ad61; }
.candidate1-bio-scanner.complete .candidate1-bio-rings b { background: #28ad61; font-size: 0; }
.candidate1-bio-scanner.complete .candidate1-bio-rings b:after { content: "✓"; font-size: 25px; }

@keyframes candidate1-bio-scan {
  0%, 100% { transform: translateY(-55px); }
  50% { transform: translateY(55px); }
}

@keyframes candidate1-bio-spin { to { transform: rotate(360deg); } }
@keyframes candidate1-bio-spin-reverse { to { transform: rotate(-360deg); } }

.candidate1-bio-status {
  min-height: 20px;
  color: #6e7c8e;
  font-size: 10px;
  font-weight: 800;
}

.candidate1-bio-status.scanning { color: #146cf5; }
.candidate1-bio-status.verified { color: #239253; }

.candidate1-bio-start {
  min-width: 240px;
  margin-top: 13px;
  padding: 12px 18px;
  border-radius: 10px;
  background: linear-gradient(90deg, #125ec4, #1679ed);
  box-shadow: 0 11px 23px #146cf529;
}

.candidate1-bio-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 11px 14px;
  border-radius: 10px;
  background: #fff8e8;
  text-align: left;
}

.candidate1-bio-note > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #efac29;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  flex: none;
}

.candidate1-bio-note p { display: grid; margin: 0; }
.candidate1-bio-note b { color: #76591d; font-size: 9px; }
.candidate1-bio-note small { color: #9a844e; font-size: 7px; }

.candidate1-bio-next {
  width: 100%;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid #e3e9f0;
  text-align: right;
}

.candidate1-bio-next > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 17px;
  border-radius: 10px;
}

.candidate1-bio-next > a > b { font-size: 18px; }

@media (max-width: 850px) {
  .candidate1-bio-page { padding: 15px; }
  .candidate1-bio-header { padding: 15px 20px; }
  .candidate1-bio-security { display: none; }
  .candidate1-bio-progress > i { width: 25px; margin: 0 7px; }
  .candidate1-bio-content { grid-template-columns: 1fr; padding: 20px; }
  .candidate1-bio-candidate { padding: 22px; }
}

@media (max-width: 570px) {
  .candidate1-bio-page { padding: 0; background: #fff; }
  .candidate1-bio-shell { border: 0; border-radius: 0; box-shadow: none; }
  .candidate1-bio-header { padding: 12px; }
  .candidate1-bio-brand { gap: 9px; }
  .candidate1-bio-brand > img { width: 44px; height: 44px; }
  .candidate1-bio-brand > div > img { max-height: 39px; }
  .candidate1-bio-brand span { font-size: 7px; }
  .candidate1-bio-progress { justify-content: space-between; padding: 13px 10px; }
  .candidate1-bio-progress > div > span { display: none; }
  .candidate1-bio-progress > i { flex: 1; width: auto; margin: 0 6px; }
  .candidate1-bio-content { padding: 12px; gap: 12px; }
  .candidate1-bio-photo { width: 105px; height: 105px; }
  .candidate1-bio-panel { padding: 22px 13px; }
  .candidate1-bio-scanner { width: 185px; height: 185px; }
  .candidate1-bio-start { width: 100%; min-width: 0; }
  .candidate1-bio-next > a { width: 100%; justify-content: center; }
}