/* Auth left-panel app animation — peach/orange glass, no dark pit. */

@media (min-width: 992px) {
  .pw-auth-aside--photo .pw-auth-photos {
    min-height: 300px;
  }

  .pw-auth-signup .pw-auth-stage {
    font-size: clamp(7.5px, min(2.35cqh, 9cqw), 18px);
  }
}

.pw-auth-photos {
  container-type: size;
}

.pw-auth-stage {
  --pw-orange: #ff6a00;
  --pw-pink: #ee0979;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 8% 0%, rgba(255, 255, 255, 0.85) 0%, transparent 48%),
    radial-gradient(80% 70% at 100% 100%, rgba(238, 9, 121, 0.22) 0%, transparent 55%),
    linear-gradient(165deg, #fff4e8 0%, #ffd4b0 42%, #ffc1c8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    0 12px 28px rgba(255, 106, 0, 0.16);
  font-size: clamp(5px, 2.5cqh, 8px);
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  color: #172033;
  line-height: 1.15;
  letter-spacing: 0;
  isolation: isolate;
}

.pw-auth-stage__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(1px);
}

.pw-auth-stage__orb--a {
  width: 16em;
  height: 16em;
  left: -5em;
  top: -4em;
  background: rgba(255, 255, 255, 0.7);
}

.pw-auth-stage__orb--b {
  width: 14em;
  height: 14em;
  right: -4em;
  bottom: -5em;
  background: rgba(255, 106, 0, 0.32);
}

.pw-auth-phone {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 19.2em;
  height: 37.4em;
  margin: -18.7em 0 0 -9.6em;
  padding: 0.7em;
  border-radius: 3em;
  background: linear-gradient(145deg, #3a3e48 0%, #1a1d24 55%, #101216 100%);
  box-shadow:
    0 1.6em 3em rgba(255, 106, 0, 0.22),
    0 0 0 0.12em #4a4f5a;
}

.pw-auth-phone__screen {
  position: relative;
  height: 100%;
  border-radius: 2.35em;
  overflow: hidden;
  background: linear-gradient(180deg, #fff8f2 0%, #f7f5fb 48%, #fff 100%);
}

.pw-auth-status {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.5em;
  padding: 0 1.2em;
  font-size: 1em;
  font-weight: 700;
  color: #111827;
}

.pw-auth-status__cam {
  position: absolute;
  left: 50%;
  top: 0.85em;
  width: 0.8em;
  height: 0.8em;
  margin-left: -0.4em;
  border-radius: 50%;
  background: #111318;
}

.pw-auth-status__sys { display: flex; align-items: flex-end; gap: 0.18em; }
.pw-auth-status__sys i { display: block; width: 0.32em; background: #111827; border-radius: 0.08em; }
.pw-auth-status__sys i:nth-child(1) { height: 0.45em; }
.pw-auth-status__sys i:nth-child(2) { height: 0.7em; }
.pw-auth-status__sys i:nth-child(3) { height: 0.95em; }

.pw-auth-app {
  position: absolute;
  inset: 2.5em 0 0;
  padding: 0.4em 1.15em 1.1em;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8%);
  transition: opacity 0.38s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pw-auth-stage.is-send .pw-auth-app--send,
.pw-auth-stage.is-recv .pw-auth-app--recv,
.pw-auth-stage.is-pay .pw-auth-app--pay,
.pw-auth-stage.is-static .pw-auth-app--send {
  opacity: 1;
  pointer-events: none;
  transform: none;
}

.pw-auth-app__bar {
  display: flex;
  align-items: center;
  height: 2.2em;
  margin-bottom: 0.6em;
}

.pw-auth-app__bar b {
  font-size: 1.55em;
  font-weight: 800;
  color: #111827;
}

.pw-auth-avatar,
.pw-auth-hello__av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4em;
  height: 4.4em;
  margin: 0.4em auto 0.7em;
  border-radius: 50%;
  background: linear-gradient(135deg, #ee0979, #ff6a00);
  color: #fff;
  font-size: 1.35em;
  font-weight: 800;
}

.pw-auth-who {
  display: block;
  text-align: center;
  font-size: 1.45em;
  font-weight: 800;
  color: #111827;
}

.pw-auth-handle {
  display: block;
  margin-top: 0.35em;
  text-align: center;
  color: #6b7288;
  font-size: 1em;
}

.pw-auth-amt {
  margin: 1.4em 0 1.2em;
  text-align: center;
  font-size: 3.4em;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
}

.pw-auth-amt span { font-size: 0.48em; color: #6b7288; font-weight: 700; }

.pw-auth-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.5em;
  border: 0;
  border-radius: 1.1em;
  background: linear-gradient(90deg, #ee0979 0%, #ff6a00 100%);
  color: #fff;
  font-size: 1.25em;
  font-weight: 800;
  box-shadow: 0 0.7em 1.4em rgba(238, 9, 121, 0.28);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.pw-auth-stage.is-send-go .pw-auth-cta {
  transform: scale(0.96);
  filter: brightness(0.92);
}

.pw-auth-ok {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  background: rgba(255, 248, 242, 0.96);
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.pw-auth-stage.is-send-ok .pw-auth-app--send .pw-auth-ok,
.pw-auth-stage.is-pay-ok .pw-auth-ok--pay {
  opacity: 1;
  transform: none;
}

.pw-auth-ok svg { width: 4.2em; height: 4.2em; }
.pw-auth-ok b { font-size: 1.7em; font-weight: 800; color: #111827; }
.pw-auth-ok span { color: #4b5568; font-size: 1.15em; }
.pw-auth-ok small { color: #9aa3b5; font-size: 0.95em; }

.pw-auth-hello {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.9em;
}

.pw-auth-hello__av { width: 3.2em; height: 3.2em; margin: 0; font-size: 1.1em; }
.pw-auth-hello small { display: block; color: #6b7288; font-size: 0.95em; }
.pw-auth-hello b { display: block; font-size: 1.45em; color: #111827; }

.pw-auth-bal {
  padding: 1em 1.1em 1.05em;
  border-radius: 1.3em;
  background: linear-gradient(135deg, #1f2742 0%, #131a2e 100%);
  color: #fff;
  box-shadow: 0 0.8em 1.6em rgba(19, 26, 46, 0.18);
}

.pw-auth-bal small { display: block; opacity: 0.7; font-size: 0.95em; }
.pw-auth-bal strong { display: block; margin: 0.35em 0 0.25em; font-size: 2em; font-weight: 800; }
.pw-auth-bal em { font-style: normal; opacity: 0.62; font-size: 0.95em; }

.pw-auth-stage.is-recv-toast .pw-auth-bal strong { animation: pwAuthBal 0.6s ease both; }

@keyframes pwAuthBal {
  from { filter: brightness(1); }
  40% { filter: brightness(1.25); }
  to { filter: brightness(1); }
}

.pw-auth-toast {
  position: absolute;
  left: 0.7em;
  right: 0.7em;
  top: 2.7em;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 0.95em;
  border-radius: 1.2em;
  background: #fff;
  box-shadow: 0 1em 2.2em rgba(15, 23, 42, 0.16);
  opacity: 0;
  transform: translateY(-140%);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.05), opacity 0.3s ease;
}

.pw-auth-toast svg { flex: 0 0 1.8em; width: 1.8em; height: 1.8em; }
.pw-auth-toast b { display: block; font-size: 1.15em; color: #111827; }
.pw-auth-toast small { display: block; margin-top: 0.15em; color: #6b7288; font-size: 0.95em; }

.pw-auth-stage.is-recv-toast .pw-auth-toast {
  opacity: 1;
  transform: none;
}

.pw-auth-rows { margin-top: 0.9em; display: flex; flex-direction: column; gap: 0.45em; }

.pw-auth-row {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.55em 0.2em;
}

.pw-auth-row i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 0.75em;
  background: #ffe4d4;
  color: #c2410c;
  font-size: 1em;
  font-style: normal;
  font-weight: 800;
}

.pw-auth-row.is-in i { background: #dcfce7; color: #15803d; }
.pw-auth-row span { flex: 1; min-width: 0; }
.pw-auth-row b { display: block; font-size: 1.12em; color: #111827; }
.pw-auth-row small { display: block; margin-top: 0.12em; color: #8b92a5; font-size: 0.9em; }
.pw-auth-row em { font-style: normal; font-weight: 800; font-size: 1.1em; color: #111827; }
.pw-auth-row.is-in em { color: #16a34a; }

.pw-auth-stage.is-recv-toast .pw-auth-row.is-in {
  animation: pwAuthRowIn 0.45s ease both;
}

@keyframes pwAuthRowIn {
  from { opacity: 0; transform: translateY(-0.6em); }
  to { opacity: 1; transform: none; }
}

.pw-auth-wallet {
  position: relative;
  height: 15.5em;
  margin: 0.6em 0 1em;
  perspective: 500px;
}

.pw-auth-wallet__mc,
.pw-auth-wallet__visa {
  position: absolute;
  left: 50%;
  top: 0.4em;
  margin-left: -9.5em;
  font-size: 1em;
  transform-origin: center center;
}

.pw-auth-wallet__mc { transform: translate(-1.4em, -0.3em) rotate(-11deg); z-index: 1; }
.pw-auth-wallet__visa { transform: translate(1.1em, 2.4em) rotate(7deg); z-index: 2; }

.pw-auth-stage.is-pay-tap .pw-auth-wallet__visa {
  animation: pwAuthTap 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes pwAuthTap {
  50% { transform: translate(1.1em, 4.2em) rotate(3deg) scale(0.94); }
  100% { transform: translate(1.1em, 2.4em) rotate(7deg); }
}

.pw-auth-hold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  color: #c2410c;
  font-size: 1.1em;
  font-weight: 700;
}

.pw-auth-hold svg { width: 2.2em; height: 2.2em; }

.pw-auth-stage.is-pay-tap .pw-auth-hold svg {
  animation: pwAuthWave 0.9s ease-out;
}

@keyframes pwAuthWave {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Card faces (scoped; navy Visa + white Mastercard stay as-is) */
.pw-auth-stage .pw-pcard {
  position: relative;
  display: block;
  width: 19em;
  height: 12em;
  border-radius: 1.2em;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(88, 112, 255, 0.22) 0%, rgba(88, 112, 255, 0) 55%),
    linear-gradient(145deg, #1f2742 0%, #131a2e 48%, #0b0f1c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0.8em 1.6em rgba(19, 26, 46, 0.22);
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  line-height: 1;
  letter-spacing: 0 !important;
}

.pw-auth-stage .pw-pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
}

.pw-auth-stage .pw-pcard__chip {
  position: absolute;
  left: 1.5em;
  top: 1.4em;
  width: 2.3em;
  height: 1.7em;
  border-radius: 0.35em;
  background: linear-gradient(135deg, #e9d19a 0%, #c9a75a 50%, #e4c98a 100%);
}

.pw-auth-stage .pw-pcard__visa {
  position: absolute;
  right: 1.4em;
  top: 1.3em;
  font-size: 1.5em;
  font-style: italic;
  font-weight: 800;
}

.pw-auth-stage .pw-pcard__logo {
  position: absolute;
  left: 1.5em;
  top: 4.1em;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.pw-auth-stage .pw-pcard__logo img { display: block; width: 3em; height: 3em; }
.pw-auth-stage .pw-pcard__logo b { font-size: 1.35em; font-weight: 700; letter-spacing: 0.08em !important; }

.pw-auth-stage .pw-pcard__nfc {
  position: absolute;
  right: 1.6em;
  top: 4.6em;
  width: 1.6em;
  height: 1.8em;
}

.pw-auth-stage .pw-pcard__name,
.pw-auth-stage .pw-pcard__pan {
  position: absolute;
  bottom: 1.2em;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.95em;
  font-weight: 500;
}

.pw-auth-stage .pw-pcard__name { left: 1.6em; }
.pw-auth-stage .pw-pcard__pan { right: 1.5em; }

.pw-auth-stage .pw-pcard--mc {
  color: #2c2c2c;
  background:
    repeating-linear-gradient(-22deg, transparent, transparent 0.5em, rgba(80, 70, 60, 0.02) 0.5em, rgba(80, 70, 60, 0.02) 0.6em),
    linear-gradient(180deg, #f7f5f0 0%, #efebe3 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 110, 98, 0.14), 0 0.8em 1.6em rgba(19, 26, 46, 0.16);
}

.pw-auth-stage .pw-pcard--mc::after {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%);
}

.pw-auth-stage .pw-pcard__arc {
  position: absolute;
  border: 1px solid rgba(120, 110, 98, 0.16);
  border-radius: 50%;
  aspect-ratio: 1;
  z-index: 0;
}

.pw-auth-stage .pw-pcard__arc--a { width: 210%; right: -118%; top: 46%; transform: translateY(-58%); }
.pw-auth-stage .pw-pcard__arc--b { width: 148%; right: -82%; top: 46%; transform: translateY(-58%); }

.pw-auth-stage .pw-pcard__lockup {
  position: absolute;
  top: 1.1em;
  right: 1.1em;
  z-index: 2;
  width: 6.4em;
  height: 2em;
  object-fit: cover;
  object-position: left center;
}

.pw-auth-stage .pw-pcard__mid {
  position: absolute;
  left: 1.3em;
  top: 3.3em;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.pw-auth-stage .pw-pcard__nfc-mc { width: 1.3em; height: 1.6em; }

.pw-auth-stage .pw-pcard__chip-mc {
  position: relative;
  width: 2.7em;
  height: 2.05em;
  border-radius: 0.35em;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f1ea 0%, #d8d3c9 22%, #bdb8ae 52%, #e7e2d8 78%, #c9c4ba 100%);
}

.pw-auth-stage .pw-pcard__chip-mc::before {
  content: "";
  position: absolute;
  inset: 0.4em 0.32em;
  border: 1px solid rgba(90, 80, 70, 0.32);
  border-radius: 0.15em;
}

.pw-auth-stage .pw-pcard__pan-mc,
.pw-auth-stage .pw-pcard__holder-mc { display: none; }

.pw-auth-stage .pw-pcard__network {
  position: absolute;
  right: 1.1em;
  bottom: 0.9em;
  z-index: 2;
  width: 3.4em;
  height: 2.1em;
  object-fit: contain;
}

.pw-auth-stage .pw-pcard--mini .pw-pcard__chip,
.pw-auth-stage .pw-pcard--mini .pw-pcard__nfc { display: none; }

@media (max-width: 991px) {
  .pw-auth-stage { font-size: clamp(3.8px, 3.6cqh, 5.4px); }
  .pw-auth-phone { box-shadow: 0 0.8em 1.6em rgba(255, 106, 0, 0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .pw-auth-stage *,
  .pw-auth-stage *::before,
  .pw-auth-stage *::after {
    animation: none !important;
    transition: none !important;
  }
}