body.kbm-auth-recode-active {
  background: #f4f7fb;
  overflow-x: hidden;
}

.kbm-auth-recode,
.kbm-auth-recode * {
  box-sizing: border-box;
}

.kbm-auth-recode {
  --kbm-auth-navy: #081f31;
  --kbm-auth-yellow: #ffcd11;
  --kbm-auth-border: #e2e8f0;
  --kbm-auth-muted: #64748b;
  --kbm-auth-safe-top: env(safe-area-inset-top, 0px);
  --kbm-auth-safe-bottom: env(safe-area-inset-bottom, 0px);
  direction: rtl;
  min-height: calc(100dvh - 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: calc(34px + var(--kbm-auth-safe-top)) 16px calc(34px + var(--kbm-auth-safe-bottom));
  overflow-x: clip;
  background: radial-gradient(circle at top right, rgba(255, 205, 17, .18), transparent 34%), linear-gradient(180deg, #f8fafc, #eef4fb);
  font-family: var(--kbm-font-family, var(--kbm-font-lock, inherit));
}

.kbm-auth-recode.has-visual-background{
  position:relative;isolation:isolate;
  background-image:linear-gradient(110deg,rgba(4,25,42,.90),rgba(8,42,65,.48)),var(--kbm-auth-visual);
  background-size:cover;background-position:center;min-height:calc(100dvh - 80px)
}
.kbm-auth-recode.has-visual-background::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 82% 18%,rgba(255,205,17,.24),transparent 30%)
}
.kbm-auth-recode.has-visual-background .kbm-auth-recode-card{background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}

.kbm-auth-recode-card {
  width: min(480px, 100%);
  max-width: calc(100vw - 24px);
  min-width: 0;
  background: #fff;
  border: 1px solid var(--kbm-auth-border);
  border-radius: 28px;
  padding: 26px;
  box-shadow: 0 30px 80px rgba(8, 31, 49, .14);
  overflow: hidden;
}

.kbm-auth-recode-head {
  text-align: right;
  margin-bottom: 20px;
  min-width: 0;
}

.kbm-auth-recode-pill {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid #ffe08a;
  background: #fff8d9;
  color: var(--kbm-auth-navy);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 900;
  margin-bottom: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.kbm-auth-recode h1 {
  margin: 0 0 8px;
  color: var(--kbm-auth-navy);
  font-size: 28px;
  line-height: 1.45;
  font-weight: 1000;
  overflow-wrap: anywhere;
}

.kbm-auth-recode p {
  margin: 0;
  color: var(--kbm-auth-muted);
  line-height: 2;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.kbm-auth-recode-form,
.kbm-auth-recode-step,
.kbm-auth-recode-field {
  display: grid;
  min-width: 0;
}

.kbm-auth-recode-form {
  gap: 14px;
}

.kbm-auth-recode-step {
  gap: 12px;
}

.kbm-auth-recode-field {
  gap: 8px;
}

.kbm-auth-recode-field span {
  font-size: 13px;
  font-weight: 900;
  color: #0f2537;
  overflow-wrap: anywhere;
}

.kbm-auth-recode-field input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 54px;
  border-radius: 16px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: var(--kbm-auth-navy);
  padding: 0 14px;
  font-size: 18px;
  font-weight: 900;
  direction: ltr;
  text-align: left;
  outline: none;
  -webkit-text-size-adjust: 100%;
}

.kbm-auth-recode-field input:focus {
  border-color: var(--kbm-auth-yellow);
  box-shadow: 0 0 0 4px rgba(255, 205, 17, .22);
}

.kbm-auth-recode-field input[data-kbm-divar-locked="1"] {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px rgba(8,31,49,.02);
}

.kbm-auth-recode-lock-note {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: 14px;
  background: #fffbeb;
  color: #713f12;
  line-height: 1.85;
}

.kbm-auth-recode-lock-note strong {
  color: var(--kbm-auth-navy);
  font-size: 13px;
  font-weight: 1000;
}

.kbm-auth-recode-lock-note span {
  font-size: 12px;
  font-weight: 800;
}

.kbm-auth-recode-btn,
.kbm-auth-recode-link {
  max-width: 100%;
  min-width: 0;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}

.kbm-auth-recode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid #dbe3ef;
  background: #fff;
  color: var(--kbm-auth-navy);
  text-decoration: none;
  font-weight: 1000;
  cursor: pointer;
  padding: 9px 18px;
  transition: .15s ease;
}

.kbm-auth-recode-btn--primary {
  background: var(--kbm-auth-yellow);
  border-color: var(--kbm-auth-yellow);
  color: var(--kbm-auth-navy);
  box-shadow: 0 14px 30px rgba(255, 205, 17, .22);
}

.kbm-auth-recode-btn[disabled] {
  opacity: .58;
  cursor: not-allowed;
}

.kbm-auth-recode-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: #0b4b68;
  font-weight: 900;
  cursor: pointer;
  min-height: 38px;
  padding: 6px 8px;
}

.kbm-auth-recode-link[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.kbm-auth-recode-status {
  display: none;
  max-width: 100%;
  padding: 11px 13px;
  border-radius: 16px;
  background: #eef6ff;
  border: 1px solid #dbeafe;
  color: #0f2537;
  line-height: 1.8;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.kbm-auth-recode-status.is-visible,
.kbm-auth-recode-status--success,
.kbm-auth-recode-status--warn {
  display: block;
}

.kbm-auth-recode-status--success {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #14532d;
}

.kbm-auth-recode-status--warn,
.kbm-auth-recode-status.is-error {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.kbm-auth-recode-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  min-width: 0;
}

.kbm-auth-recode-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  color: var(--kbm-auth-muted);
  font-size: 12px;
  line-height: 1.9;
  font-weight: 800;
  min-width: 0;
}

.kbm-auth-recode-foot span {
  flex: 1 1 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.kbm-auth-recode-foot a {
  color: #0b4b68;
  font-weight: 1000;
}

.kbm-auth-recode.is-loading .kbm-auth-recode-btn--primary {
  filter: saturate(.8);
  opacity: .7;
}

@media (max-width: 640px) {
  .kbm-auth-recode {
    align-items: flex-start;
    min-height: calc(100dvh - 96px);
    padding: calc(22px + var(--kbm-auth-safe-top)) 12px calc(30px + var(--kbm-auth-safe-bottom));
  }

  .kbm-auth-recode-card {
    border-radius: 24px;
    padding: 20px;
  }

  .kbm-auth-recode h1 {
    font-size: 23px;
  }

  .kbm-auth-recode-actions {
    grid-template-columns: 1fr;
  }

  .kbm-auth-recode-field input {
    height: 52px;
    font-size: 17px;
  }
}

@media (max-width: 430px) {
  .kbm-auth-recode {
    padding-inline: 10px;
  }

  .kbm-auth-recode-card {
    max-width: calc(100vw - 20px);
    border-radius: 20px;
    padding: 18px 16px;
  }

  .kbm-auth-recode-head {
    margin-bottom: 16px;
  }

  .kbm-auth-recode h1 {
    font-size: 21px;
  }

  .kbm-auth-recode p {
    font-size: 13px;
    line-height: 1.9;
  }

  .kbm-auth-recode-btn {
    width: 100%;
    min-height: 50px;
    padding-inline: 12px;
  }

  .kbm-auth-recode-link {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .kbm-auth-recode {
    padding-inline: 8px;
  }

  .kbm-auth-recode-card {
    max-width: calc(100vw - 16px);
    border-radius: 18px;
    padding: 16px 14px;
  }

  .kbm-auth-recode-pill {
    font-size: 11px;
    padding-inline: 10px;
  }

  .kbm-auth-recode h1 {
    font-size: 19px;
  }

  .kbm-auth-recode-field input {
    height: 50px;
    font-size: 16px;
    padding-inline: 12px;
  }
}

@media (max-width: 340px) {
  .kbm-auth-recode-card {
    max-width: calc(100vw - 12px);
    padding: 14px 12px;
  }
}


/* LIVE-F :: Auth visual stability guard */
body.kbm-route-auth,
body.kbm-auth-recode-active{
  min-height:100dvh;
  background:#f4f7fb!important;
}
body.kbm-route-auth :where(.site-main,.entry-content,.kbm-theme-main,.kbm-shell-main){
  min-width:0;
  overflow-x:clip;
}
.kbm-auth-recode-card{
  position:relative;
  isolation:isolate;
}
.kbm-auth-recode-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg,var(--kbm-auth-yellow),#22c55e,#0b4b68);
  border-radius:28px 28px 0 0;
  z-index:0;
  pointer-events:none;
}
.kbm-auth-recode-card > *{position:relative;z-index:1}
.kbm-auth-recode-trust{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:14px;
}
.kbm-auth-recode-trust span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:4px 10px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid var(--kbm-auth-border);
  color:#334155;
  font-size:11px;
  font-weight:900;
  line-height:1.7;
  overflow-wrap:anywhere;
}
.kbm-auth-recode-step[hidden]{display:none!important}
.kbm-auth-recode.is-loading{cursor:progress}
.kbm-auth-recode.is-loading .kbm-auth-recode-card{box-shadow:0 30px 80px rgba(8,31,49,.16),0 0 0 4px rgba(255,205,17,.14)}
.kbm-auth-recode-status{min-height:0}
.kbm-auth-recode-field input::placeholder{color:#94a3b8;font-weight:800}
.kbm-auth-recode-field input[name="otp"]{letter-spacing:.22em;text-align:center;font-variant-numeric:tabular-nums}
@media (max-width:480px){
  .kbm-auth-recode-trust{display:grid;grid-template-columns:1fr;gap:7px}
  .kbm-auth-recode-trust span{justify-content:center;text-align:center;width:100%}
  .kbm-auth-recode-foot{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .kbm-auth-recode *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* A4-R3 canonical auth isolation — supersedes retired Phase-08/AHC page layouts. */
body.kbm-auth-recode-active .kbm-theme-main,
body.kbm-auth-recode-active .kbm-theme-shell,
body.kbm-auth-recode-active .kbm-theme-content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
body.kbm-auth-recode-active .kbm-auth-recode{width:100%!important;max-width:none!important;margin:0!important;min-height:calc(100dvh - var(--kbm-header-height,68px))!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:32px 16px!important}
body.kbm-auth-recode-active .kbm-auth-recode-card{width:min(480px,calc(100vw - 24px))!important;margin:0 auto!important}
@media(max-width:640px){body.kbm-auth-recode-active .kbm-auth-recode{min-height:calc(100dvh - var(--kbm-header-height,58px))!important;align-items:flex-start!important;padding:22px 12px 28px!important}}