/* Verified-response fallback when optional motion cannot run. */
body.lio-account-surface .lio-ae-accepted-feedback { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin: 0; border-radius: inherit; background: var(--lio-ae-surface, #ececec); color: var(--lio-ae-ink, #202020); font-size: 18px; }
body.lio-account-surface .lio-ae-accepted-feedback > span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #85465a; color: #fff; font-size: 46px; }
/* A verified login remains verified while its destination loads or needs a manual link. */
body.lio-account-surface [data-lio-account][data-lio-login-accepted="true"] .lio-ae-face--otp :is(.lio-ae-lead,.lio-ae-resend,.lio-ae-primary,.lio-ae-back),
body.lio-account-surface [data-lio-account][data-lio-login-accepted="true"] .lio-ae-email-toggle { visibility: hidden; pointer-events: none; }
/* Video2 Pacman integration candidate. This stylesheet only applies after the adapter marks
 * the existing AccountView root as motion-active; the surrounding white account panel is untouched. */
body.lio-account-surface [data-lio-account][data-lio-pacman-motion="true"] {
  --lio-ae-pacman-red: var(--lio-ae-login-red, var(--lio-ae-accent, #650d27));
  --lio-ae-pacman-green: #85465a;
}
body.lio-account-surface [data-lio-account] .lio-ae-otp-heading .lio-ae-pacman__title-stack {
  grid-column: 2;
  display: grid;
  min-width: 0;
  min-height: 1.3em;
}
body.lio-account-surface [data-lio-account] .lio-ae-pacman__title-stack > h2 {
  grid-area: 1 / 1;
  margin: 0;
  white-space: nowrap;
  grid-column: 1 !important;
  font-size: clamp(16px, 4.7vw, 20px);
  overflow: hidden;
  text-overflow: clip;
}
body.lio-account-surface [data-lio-account] .lio-ae-pacman__success-title { opacity: 0; }
body.lio-account-surface [data-lio-account] .lio-ae-pacman-host {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
body.lio-account-surface [data-lio-account] .lio-ae-pacman__actor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  perspective: 500px;
  will-change: transform, opacity;
}
body.lio-account-surface [data-lio-account] .lio-ae-pacman__actor > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
body.lio-account-surface [data-lio-account] .lio-ae-pacman__foreground {
  z-index: 2;
  fill: var(--lio-ae-pacman-red);
  transform-origin: 50% 50%;
  backface-visibility: visible;
  will-change: transform, opacity;
}
body.lio-account-surface [data-lio-account] .lio-ae-pacman__edge { z-index: 3; fill: var(--lio-ae-pacman-red); opacity: 0; }
body.lio-account-surface [data-lio-account] .lio-ae-pacman__green {
  z-index: 1;
  fill: var(--lio-ae-pacman-green);
  opacity: 0;
  filter: none;
}
body.lio-account-surface [data-lio-account] .lio-ae-pacman__check {
  z-index: 4;
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.lio-account-surface [data-lio-account] [data-check] { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
body.lio-account-surface [data-lio-account] .lio-ae-pacman__ring {
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 102%;
  height: 102%;
  border: 1px solid var(--lio-ae-pacman-green);
  border-radius: 24%;
  opacity: 0;
}
body.lio-account-surface [data-lio-account] .lio-ae-pacman__particles { position: absolute; z-index: 0; top: 50%; left: 50%; opacity: 0; }
body.lio-account-surface [data-lio-account] .lio-ae-pacman__particles .lio-particle {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--lio-ae-pacman-green);
  opacity: 0;
}
body.lio-account-surface [data-lio-account] .lio-ae-pacman__support {
  display: grid;
  min-height: 22px;
  margin: 8px 0 0;
  place-items: start center;
  color: #650d27;
  font-size: 12px;
  line-height: 1.8;
  opacity: 0;
}
/* The legacy success overlay and cell keyframes may coexist in 0.8.26. They are suppressed
 * only for this adapter's active attempt, leaving identifier, error and ordinary OTP states intact. */
body.lio-account-surface [data-lio-account][data-lio-pacman-motion="true"] .lio-ae-login-success { display: none !important; }
body.lio-account-surface [data-lio-account][data-lio-pacman-motion="true"] .lio-ae-otp__cell,
body.lio-account-surface [data-lio-account][data-lio-pacman-motion="true"][data-lio-login-success="true"] .lio-ae-otp__cell,
body.lio-account-surface [data-lio-account][data-lio-pacman-motion="true"][data-lio-login-merge="true"] .lio-ae-otp__cell {
  animation: none !important;
  will-change: transform, opacity;
}
body.lio-account-surface [data-lio-account][data-lio-pacman-motion="true"] .lio-ae-spinner { display: none !important; }
body.lio-account-surface [data-lio-account][data-lio-pacman-motion="true"] [data-lio-otp-shell] > input {
  cursor: default;
  opacity: 0 !important;
  color: transparent;
  caret-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  body.lio-account-surface [data-lio-account] .lio-ae-pacman__actor,
  body.lio-account-surface [data-lio-account] .lio-ae-pacman__foreground { will-change: auto; }
}

/* Busy keeps the original OTP layout reserved while the real engine owns its cell opacity. */
body.lio-account-surface [data-lio-account][data-lio-pacman-motion="true"][aria-busy="true"] .lio-ae-face--otp .lio-ae-lead,
body.lio-account-surface [data-lio-account][data-lio-pacman-motion="true"][aria-busy="true"] .lio-ae-face--otp .lio-ae-resend,
body.lio-account-surface [data-lio-account][data-lio-pacman-motion="true"][aria-busy="true"] .lio-ae-face--otp .lio-ae-primary {
  opacity: 0;
  pointer-events: none;
}

/* The new Pacman AccountView opts out of the legacy 180-degree card flip from its first paint.
 * That prevents a valid OTP start from measuring projected/mirrored cells during the old 520ms transition. */
body.lio-account-surface [data-lio-account][data-lio-pacman-layout] .lio-ae-card {
  transform: none !important;
  transform-style: flat;
  transition: none !important;
}
body.lio-account-surface [data-lio-account][data-lio-pacman-layout] .lio-ae-face {
  transform: none !important;
  transition: none !important;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
body.lio-account-surface [data-lio-account][data-lio-pacman-layout][data-lio-current-step="otp"] .lio-ae-face--identifier,
body.lio-account-surface [data-lio-account][data-lio-pacman-layout]:not([data-lio-current-step="otp"]) .lio-ae-face--otp {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
body.lio-account-surface [data-lio-account][data-lio-pacman-layout][data-lio-current-step="otp"] .lio-ae-face--otp,
body.lio-account-surface [data-lio-account][data-lio-pacman-layout]:not([data-lio-current-step="otp"]) .lio-ae-face--identifier {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

body.lio-account-surface [data-lio-account][data-lio-pacman-layout][data-lio-entry-mode="email"] .lio-ae-face--identifier,
body.lio-account-surface [data-lio-account][data-lio-pacman-layout][data-lio-entry-mode="email"] .lio-ae-face--otp {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Keep the original row stationary while digits arrive separately or by paste.
 * A legacy 2px fill lift can otherwise be captured halfway through its transition. */
body.lio-account-surface [data-lio-account][data-lio-pacman-layout] .lio-ae-otp__cell {
  transform: none;
  transition: background 150ms ease, border-color 150ms ease;
}

/* The approved four-cell design keeps digits charcoal; the moving actor owns the burgundy accent. */
body.lio-account-surface [data-lio-account][data-lio-pacman-layout] .lio-ae-otp__cell.is-filled {
  color: var(--lio-ae-ink, #292929);
}