/* PaperDesk auth shell: restrained, responsive, and accessible. */

:root {
  --paperdesk-auth-blue: #1d4ed8;
  --paperdesk-auth-blue-hover: #1e40af;
  --paperdesk-auth-submit-fill: #172554;
  --paperdesk-auth-ink: #111827;
  --paperdesk-auth-muted: #64748b;
  --paperdesk-auth-line: #d8e0ea;
  --paperdesk-auth-surface: #ffffff;
  --paperdesk-auth-canvas: #eef2f6;
  --paperdesk-auth-danger: #b42318;
  --paperdesk-auth-success: #157347;
}

html.paperdesk-protected-login-required,
html.paperdesk-protected-login-required body,
body.app-is-locked {
  overflow: hidden !important;
}

#appLockOverlay.app-lock-overlay {
  isolation: isolate !important;
  padding: 36px !important;
  background: var(--paperdesk-auth-canvas) !important;
  color: var(--paperdesk-auth-ink) !important;
  font-family: "Segoe UI", "Khmer OS Siemreap", "Noto Sans Khmer", Arial, sans-serif !important;
}

#appLockOverlay .app-lock-interactive-grid-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0.34 !important;
}

#appLockOverlay .app-lock-interactive-grid-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.55 !important;
}

#appLockOverlay .app-lock-card.app-lock-card-v2 {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: 52px minmax(0, 1fr) !important;
  width: min(1040px, calc(100dvw - 72px)) !important;
  height: min(680px, calc(100dvh - 72px)) !important;
  min-height: min(600px, calc(100dvh - 72px)) !important;
  max-width: 1040px !important;
  max-height: calc(100dvh - 72px) !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: var(--paperdesk-auth-surface) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14) !important;
  transform: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#appLockOverlay .app-lock-card::before,
#appLockOverlay .app-lock-card::after,
#appLockOverlay .app-lock-brand-panel::before,
#appLockOverlay .app-lock-brand-panel::after,
#appLockOverlay .app-lock-form-panel::before,
#appLockOverlay .app-lock-form-panel::after {
  display: none !important;
  content: none !important;
}

#appLockOverlay .app-lock-window-title {
  position: static !important;
  z-index: auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 12px !important;
  height: 52px !important;
  border-bottom: 1px solid var(--paperdesk-auth-line) !important;
  background: #ffffff !important;
  color: var(--paperdesk-auth-ink) !important;
  padding: 0 20px !important;
}

#appLockOverlay .app-lock-product-mark,
#appLockOverlay .app-lock-window-status,
#appLockOverlay .app-lock-window-title-text {
  display: inline-flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

#appLockOverlay .app-lock-product-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  border-radius: 4px !important;
  object-fit: contain !important;
}

#appLockOverlay .app-lock-product-mark {
  display: none !important;
  justify-self: end !important;
}

#appLockOverlay .app-lock-window-status {
  justify-self: start !important;
  color: #16a34a !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

#appLockOverlay .app-lock-live-label {
  display: inline !important;
  line-height: 1 !important;
}

#appLockOverlay .app-lock-status-dot {
  position: relative !important;
  display: inline-grid !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(34, 197, 94, 0.14) !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08) !important;
}

#appLockOverlay .app-lock-status-dot::before {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: inherit !important;
  background: rgba(34, 197, 94, 0.16) !important;
  animation: appLockLivePulse 1.65s ease-out infinite !important;
}

#appLockOverlay .app-lock-status-dot::after {
  content: "" !important;
  position: relative !important;
  z-index: 1 !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: inherit !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.13) !important;
}

@keyframes appLockLivePulse {
  0% {
    opacity: 0.75;
    transform: scale(0.72);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

#appLockOverlay .app-lock-window-title-text {
  grid-column: 3 !important;
  justify-self: end !important;
  overflow: hidden !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#appLockOverlay .app-lock-close,
#appLockOverlay .app-lock-glow {
  display: none !important;
}

#appLockOverlay .app-lock-body {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

#appLockOverlay .app-lock-brand-panel {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 28px !important;
  border: 0 !important;
  border-right: 4px solid var(--paperdesk-auth-blue) !important;
  border-radius: 0 !important;
  background: #172033 !important;
  color: #ffffff !important;
  padding: 48px !important;
  text-align: left !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#appLockOverlay .app-lock-brand-panel::after {
  content: none !important;
  display: none !important;
}

#appLockOverlay .app-lock-atlas-accent {
  position: absolute !important;
  right: 38px !important;
  bottom: 34px !important;
  z-index: 1 !important;
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 3px !important;
  opacity: 0.48 !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}

#appLockOverlay .app-lock-atlas-accent > i {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid rgba(125, 211, 252, 0.88) !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.14) !important;
  opacity: 0.52;
  transform: scale(0.84);
  transform-origin: center !important;
  animation: appLockAtlasAccentCell 5.2s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
  animation-delay: var(--app-lock-atlas-delay, 0s) !important;
}

#appLockOverlay .app-lock-atlas-accent > i:nth-child(2),
#appLockOverlay .app-lock-atlas-accent > i:nth-child(4) {
  --app-lock-atlas-delay: 0.12s;
}

#appLockOverlay .app-lock-atlas-accent > i:nth-child(3),
#appLockOverlay .app-lock-atlas-accent > i:nth-child(5),
#appLockOverlay .app-lock-atlas-accent > i:nth-child(7) {
  --app-lock-atlas-delay: 0.24s;
}

#appLockOverlay .app-lock-atlas-accent > i:nth-child(6),
#appLockOverlay .app-lock-atlas-accent > i:nth-child(8) {
  --app-lock-atlas-delay: 0.36s;
}

#appLockOverlay .app-lock-atlas-accent > i:nth-child(9) {
  --app-lock-atlas-delay: 0.48s;
}

@keyframes appLockAtlasAccentCell {
  0%,
  26%,
  100% {
    opacity: 0.52;
    transform: scale(0.84);
  }

  8% {
    opacity: 1;
    transform: scale(1);
  }

  16% {
    opacity: 0.72;
    transform: scale(0.92);
  }
}

#appLockOverlay .app-lock-logo-ring {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  display: grid !important;
  width: 132px !important;
  height: 132px !important;
  flex: 0 0 132px !important;
  place-items: center !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 30px !important;
  background: transparent !important;
  padding: 8px !important;
  transform: none !important;
}

#appLockOverlay .app-lock-logo-ring::before {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  display: block !important;
  border: 1px solid rgba(125, 211, 252, 0.72) !important;
  border-radius: 34px !important;
  transform: rotate(7deg) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#appLockOverlay .app-lock-logo-ring::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  border-radius: inherit !important;
  background: #ffffff !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24) !important;
  transform: rotate(-2deg) !important;
  pointer-events: none !important;
}

#appLockOverlay .app-lock-logo {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 96px !important;
  height: 96px !important;
  border: 0 !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

#appLockOverlay .app-lock-title-block {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  width: 100% !important;
  justify-items: start !important;
  gap: 8px !important;
  margin: 0 !important;
  text-align: left !important;
}

#appLockOverlay .app-lock-security-badge {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #e0f2fe !important;
  padding: 8px 13px !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#appLockOverlay .app-lock-kicker,
#appLockOverlay .app-lock-form-heading > span {
  display: block !important;
  margin: 0 !important;
  color: #93c5fd !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
}

#appLockOverlay .app-lock-kicker {
  width: auto !important;
  justify-self: start !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#appLockOverlay .app-lock-title-block h2 {
  max-width: 100% !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-family: "Khmer OS Muol Light", "Noto Serif Khmer", serif !important;
  font-size: min(var(--login-title-line1-size, 27px), 32px) !important;
  font-weight: 500 !important;
  letter-spacing: var(--login-title-line1-spacing, 0) !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  text-wrap: balance !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-shadow: none !important;
  text-align: left !important;
}

#appLockOverlay .app-lock-line-two,
#appLockOverlay .app-lock-line-three {
  max-width: 100% !important;
  margin: 0 !important;
  color: #dbeafe !important;
  font-family: "Khmer OS Siemreap", "Noto Sans Khmer", "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
  text-shadow: none !important;
  text-align: left !important;
}

#appLockOverlay .app-lock-line-two {
  font-size: min(var(--login-title-line2-size, 16px), 20px) !important;
  line-height: 1.65 !important;
}

#appLockOverlay .app-lock-line-three {
  color: #bfdbfe !important;
  font-size: min(var(--login-title-line3-size, 14px), 17px) !important;
  line-height: 1.55 !important;
}

#appLockOverlay .app-lock-trust-list {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  width: 100% !important;
  gap: 10px !important;
  margin: auto 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding: 22px 0 0 !important;
  list-style: none !important;
}

#appLockOverlay .app-lock-trust-list li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #dbeafe !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

#appLockOverlay .app-lock-trust-list i {
  width: 18px !important;
  color: #93c5fd !important;
  font-size: 15px !important;
  text-align: center !important;
}

#appLockOverlay .app-lock-form-panel {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  padding: 40px 48px !important;
  box-shadow: none !important;
  text-align: left !important;
}

#appLockOverlay .app-lock-form-heading {
  display: grid !important;
  width: 100% !important;
  align-items: start !important;
  justify-items: start !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
  text-align: left !important;
}

#appLockOverlay .app-lock-form-heading > span {
  color: var(--paperdesk-auth-blue) !important;
  text-align: left !important;
}

#appLockOverlay .app-lock-form-heading h1 {
  margin: 0 !important;
  color: var(--paperdesk-auth-ink) !important;
  font-family: "Segoe UI", "Khmer OS Siemreap", sans-serif !important;
  font-size: 30px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

#appLockOverlay .app-lock-form-heading p {
  margin: 2px 0 0 !important;
  color: var(--paperdesk-auth-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

#appLockOverlay .app-lock-field-group {
  display: grid !important;
  min-width: 0 !important;
  gap: 6px !important;
  margin: 0 !important;
}

#appLockOverlay .app-lock-field-label-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#appLockOverlay .app-lock-field-label-row label,
#appLockOverlay .app-lock-field-label-row span {
  margin: 0 !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}

#appLockOverlay .app-lock-field-label-row label {
  font-family: "Segoe UI", Arial, sans-serif !important;
}

#appLockOverlay .app-lock-field-label-row span {
  color: #718096 !important;
  font-family: "Khmer OS Siemreap", "Noto Sans Khmer", "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
}

#appLockOverlay .app-lock-field {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  min-height: 48px !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}

#appLockOverlay .app-lock-field:focus-within {
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.13) !important;
}

#appLockOverlay .app-lock-field-group.is-invalid .app-lock-field {
  border-color: var(--paperdesk-auth-danger) !important;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.1) !important;
}

#appLockOverlay .app-lock-field-icon {
  position: static !important;
  display: grid !important;
  width: 44px !important;
  height: 46px !important;
  place-items: center !important;
  border: 0 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  box-shadow: none !important;
  transform: none !important;
}

#appLockOverlay .app-lock-field-icon::before,
#appLockOverlay .app-lock-field-icon::after {
  display: none !important;
  content: none !important;
}

#appLockOverlay .app-lock-field-icon i {
  font-size: 16px !important;
}

#appLockOverlay .app-lock-input-wrap {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#appLockOverlay .app-lock-field input,
#appLockOverlay .app-lock-field input:focus,
#appLockOverlay .app-lock-field input:focus-visible {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--paperdesk-auth-ink) !important;
  padding: 0 12px !important;
  box-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}

#appLockOverlay .app-lock-field input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

#appLockOverlay .app-lock-field input:disabled {
  cursor: not-allowed !important;
  opacity: 0.68 !important;
}

#appLockOverlay .app-lock-eye-button {
  position: static !important;
  display: grid !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  place-items: center !important;
  margin: 0 2px 0 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #475569 !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 17px !important;
}

#appLockOverlay .app-lock-eye-button:hover:not(:disabled) {
  background: #eef2ff !important;
  color: var(--paperdesk-auth-blue) !important;
}

#appLockOverlay .app-lock-eye-button:focus-visible,
#appLockOverlay .lock-recovery-button:focus-visible,
#appLockOverlay .app-lock-submit:focus-visible,
#appLockOverlay .app-lock-recovery-dialog button:focus-visible,
#appLockOverlay .app-lock-otp-modal-fallback button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.32) !important;
  outline-offset: 2px !important;
}

#appLockOverlay .app-lock-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

#appLockOverlay .app-lock-field-error {
  min-height: 16px !important;
  margin: 0 !important;
  color: var(--paperdesk-auth-danger) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#appLockOverlay .app-lock-field-error[hidden],
#appLockOverlay [data-login-submit-spinner][hidden] {
  display: none !important;
}

#appLockOverlay .lock-message {
  display: block !important;
  min-height: 38px !important;
  margin: 0 !important;
  border: 1px solid #dbe5f1 !important;
  border-left: 3px solid var(--paperdesk-auth-blue) !important;
  border-radius: 4px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  box-shadow: none !important;
}

#appLockOverlay .lock-message[data-state="error"] {
  border-color: #fecaca !important;
  border-left-color: var(--paperdesk-auth-danger) !important;
  background: #fff7f7 !important;
  color: #8f1d16 !important;
}

#appLockOverlay .lock-message[data-state="success"] {
  border-color: #bbf7d0 !important;
  border-left-color: var(--paperdesk-auth-success) !important;
  background: #f0fdf4 !important;
  color: #166534 !important;
}

#appLockOverlay .lock-message[data-state="loading"] {
  border-left-color: #0369a1 !important;
  background: #f0f9ff !important;
  color: #075985 !important;
}

#appLockOverlay .app-lock-submit {
  --paperdesk-auth-submit-fill-x: 50%;
  --paperdesk-auth-submit-fill-y: 50%;
  --paperdesk-auth-submit-fill-size: 0px;
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 !important;
  border: 1px solid var(--paperdesk-auth-blue) !important;
  border-radius: 6px !important;
  background: var(--paperdesk-auth-blue) !important;
  color: #ffffff !important;
  padding: 6px 18px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 140ms ease, border-color 140ms ease !important;
}

#appLockOverlay .app-lock-submit-fill {
  position: absolute !important;
  z-index: 0 !important;
  left: var(--paperdesk-auth-submit-fill-x) !important;
  top: var(--paperdesk-auth-submit-fill-y) !important;
  width: var(--paperdesk-auth-submit-fill-size) !important;
  height: var(--paperdesk-auth-submit-fill-size) !important;
  border-radius: 50% !important;
  background: var(--paperdesk-auth-submit-fill) !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0) !important;
  transform-origin: center !important;
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform !important;
}

#appLockOverlay .app-lock-submit[data-origin-active="true"] .app-lock-submit-fill {
  transform: translate(-50%, -50%) scale(1) !important;
}

#appLockOverlay .app-lock-submit:disabled .app-lock-submit-fill {
  transform: translate(-50%, -50%) scale(0) !important;
}

#appLockOverlay .app-lock-submit:hover:not(:disabled) {
  border-color: var(--paperdesk-auth-blue) !important;
  background: var(--paperdesk-auth-blue) !important;
  color: #ffffff !important;
  transform: none !important;
}

#appLockOverlay .app-lock-submit:disabled {
  cursor: wait !important;
  border-color: #94a3b8 !important;
  background: #94a3b8 !important;
  opacity: 1 !important;
}

#appLockOverlay .app-lock-submit-copy {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 1px !important;
  text-align: center !important;
}

#appLockOverlay .app-lock-submit-copy > span {
  color: inherit !important;
  font-family: "Khmer OS Siemreap", "Noto Sans Khmer", "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

#appLockOverlay .app-lock-submit-copy small {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#appLockOverlay .app-lock-submit-spinner {
  position: relative !important;
  z-index: 1 !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  border: 2px solid rgba(255, 255, 255, 0.42) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: paperdesk-auth-spin 700ms linear infinite !important;
}

@keyframes paperdesk-auth-spin {
  to { transform: rotate(360deg); }
}

#appLockOverlay .lock-recovery-button {
  display: inline-flex !important;
  width: fit-content !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  align-self: center !important;
  margin: -2px 0 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #475569 !important;
  padding: 4px 8px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  text-decoration: none !important;
}

#appLockOverlay .lock-recovery-button:hover:not(:disabled) {
  background: #eef2ff !important;
  color: var(--paperdesk-auth-blue) !important;
}

#appLockOverlay .app-lock-access-note {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

#appLockOverlay .app-lock-access-note > span {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: none !important;
}

#appLockOverlay .app-lock-access-note::before,
#appLockOverlay .app-lock-access-note::after {
  display: none !important;
  content: none !important;
}

#appLockOverlay .app-lock-recovery-dialog,
#appLockOverlay .app-lock-otp-modal-fallback {
  width: min(480px, calc(100dvw - 32px)) !important;
  max-width: 480px !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--paperdesk-auth-ink) !important;
  font-family: "Segoe UI", "Khmer OS Siemreap", "Noto Sans Khmer", Arial, sans-serif !important;
  padding: 0 !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24) !important;
  overflow: auto !important;
}

#appLockOverlay .app-lock-recovery-dialog::backdrop,
#appLockOverlay .app-lock-otp-modal-fallback::backdrop {
  background: rgba(15, 23, 42, 0.62) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#appLockOverlay .app-lock-form-inert {
  pointer-events: none !important;
  user-select: none !important;
}

#appLockOverlay .app-lock-otp-modal-fallback {
  width: min(440px, calc(100dvw - 24px)) !important;
  max-width: 440px !important;
}

#appLockOverlay .app-lock-otp-modal-shell {
  display: grid !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 26px !important;
}

#appLockOverlay .app-lock-otp-modal-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

#appLockOverlay .app-lock-otp-modal-header > div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#appLockOverlay .app-lock-otp-modal-kicker {
  color: var(--paperdesk-auth-blue) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

#appLockOverlay .app-lock-otp-modal-header h2 {
  margin: 0 !important;
  color: var(--paperdesk-auth-ink) !important;
  font-family: "Segoe UI", "Khmer OS Siemreap", "Noto Sans Khmer", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

#appLockOverlay .app-lock-otp-modal-close {
  display: grid !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  place-items: center !important;
  border: 1px solid #dbe4f0 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

#appLockOverlay .app-lock-otp-modal-close:hover:not(:disabled) {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
  color: var(--paperdesk-auth-blue) !important;
}

#appLockOverlay .app-lock-otp-modal-copy {
  margin: 0 !important;
  color: var(--paperdesk-auth-muted) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

#appLockOverlay .app-lock-otp-modal-code-wrap {
  display: grid !important;
  gap: 7px !important;
}

#appLockOverlay .app-lock-otp-modal-code-wrap label {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#appLockOverlay .app-lock-otp-modal-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--paperdesk-auth-ink) !important;
  padding: 0 16px !important;
  box-shadow: none !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  line-height: 1 !important;
  text-align: center !important;
}

#appLockOverlay .app-lock-otp-modal-input:focus-visible {
  border-color: var(--paperdesk-auth-blue) !important;
  outline: 3px solid rgba(37, 99, 235, 0.2) !important;
  outline-offset: 0 !important;
}

#appLockOverlay .app-lock-otp-modal-input[aria-invalid="true"] {
  border-color: var(--paperdesk-auth-danger) !important;
}

#appLockOverlay .app-lock-otp-modal-status {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px 16px !important;
  min-height: 18px !important;
  margin: -8px 0 0 !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
}

#appLockOverlay .app-lock-otp-modal-status [hidden],
#appLockOverlay .app-lock-otp-modal-error[hidden] {
  display: none !important;
}

#appLockOverlay .app-lock-otp-modal-error {
  margin: -6px 0 0 !important;
  border-left: 3px solid var(--paperdesk-auth-danger) !important;
  border-radius: 4px !important;
  background: #fff7f7 !important;
  color: #8f1d16 !important;
  padding: 9px 10px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

#appLockOverlay .app-lock-otp-modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

#appLockOverlay .app-lock-otp-modal-actions button {
  min-height: 42px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #334155 !important;
  padding: 0 16px !important;
  box-shadow: none !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

#appLockOverlay .app-lock-otp-modal-actions .app-lock-otp-modal-submit {
  border-color: var(--paperdesk-auth-blue) !important;
  background: var(--paperdesk-auth-blue) !important;
  color: #ffffff !important;
}

#appLockOverlay .app-lock-otp-modal-actions button:hover:not(:disabled) {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}

#appLockOverlay .app-lock-otp-modal-actions .app-lock-otp-modal-submit:hover:not(:disabled) {
  border-color: var(--paperdesk-auth-blue-hover) !important;
  background: var(--paperdesk-auth-blue-hover) !important;
}

#appLockOverlay .app-lock-otp-modal-close:disabled,
#appLockOverlay .app-lock-otp-modal-input:disabled,
#appLockOverlay .app-lock-otp-modal-actions button:disabled {
  cursor: not-allowed !important;
  opacity: 0.56 !important;
}

@media (max-width: 520px) {
  #appLockOverlay .app-lock-otp-modal-shell {
    gap: 16px !important;
    padding: 20px !important;
  }

  #appLockOverlay .app-lock-otp-modal-header h2 {
    font-size: 21px !important;
  }

  #appLockOverlay .app-lock-otp-modal-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  #appLockOverlay .app-lock-otp-modal-actions button {
    width: 100% !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
}

#appLockOverlay .app-lock-recovery-shell {
  display: grid !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 24px !important;
}

#appLockOverlay .app-lock-recovery-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

#appLockOverlay .app-lock-recovery-header span {
  color: var(--paperdesk-auth-blue) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

#appLockOverlay .app-lock-recovery-header h2 {
  margin: 4px 0 0 !important;
  color: var(--paperdesk-auth-ink) !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}

#appLockOverlay .app-lock-recovery-close {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  padding: 0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

#appLockOverlay .app-lock-recovery-copy {
  margin: 0 !important;
  color: var(--paperdesk-auth-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

#appLockOverlay .app-lock-recovery-assistance {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 14px !important;
  border: 1px solid #dbe4f0 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: var(--paperdesk-auth-ink) !important;
}

#appLockOverlay .app-lock-recovery-assistance > .fi {
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  place-items: center !important;
  border-radius: 8px !important;
  background: #e0f2fe !important;
  color: #0369a1 !important;
  font-size: 16px !important;
}

#appLockOverlay .app-lock-recovery-assistance > div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

#appLockOverlay .app-lock-recovery-assistance strong {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#appLockOverlay .app-lock-recovery-assistance span {
  color: var(--paperdesk-auth-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

#appLockOverlay .app-lock-recovery-assistance.is-success {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
}

#appLockOverlay .app-lock-recovery-assistance.is-success > .fi {
  background: #dcfce7 !important;
  color: #15803d !important;
}

#appLockOverlay .app-lock-recovery-form {
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
}

#appLockOverlay .app-lock-recovery-fields {
  display: grid !important;
  grid-template-columns: minmax(130px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px 12px !important;
}

#appLockOverlay .app-lock-recovery-fields.is-single-column {
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

#appLockOverlay .app-lock-recovery-fields label {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#appLockOverlay .app-lock-recovery-fields input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--paperdesk-auth-ink) !important;
  padding: 0 11px !important;
  box-shadow: none !important;
}

#appLockOverlay .app-lock-recovery-fields input:focus-visible {
  border-color: var(--paperdesk-auth-blue) !important;
  outline: 3px solid rgba(29, 78, 216, 0.13) !important;
  outline-offset: 0 !important;
}

#appLockOverlay .app-lock-recovery-fields .app-lock-recovery-code {
  text-align: center !important;
  font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  padding-left: calc(11px + 0.32em) !important;
}

#appLockOverlay .app-lock-recovery-error {
  margin: 0 !important;
  border-left: 3px solid var(--paperdesk-auth-danger) !important;
  background: #fff7f7 !important;
  color: #8f1d16 !important;
  padding: 9px 10px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#appLockOverlay .app-lock-recovery-error[hidden] {
  display: none !important;
}

#appLockOverlay .app-lock-recovery-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

#appLockOverlay .app-lock-recovery-actions button {
  min-height: 40px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #334155 !important;
  padding: 0 14px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

#appLockOverlay .app-lock-recovery-actions button[type="submit"] {
  border-color: var(--paperdesk-auth-blue) !important;
  background: var(--paperdesk-auth-blue) !important;
  color: #ffffff !important;
}

#appLockOverlay .app-lock-recovery-actions button:disabled {
  cursor: wait !important;
  opacity: 0.68 !important;
}

@media (max-width: 900px) {
  #appLockOverlay.app-lock-overlay {
    padding: 18px !important;
  }

  #appLockOverlay .app-lock-card.app-lock-card-v2 {
    width: min(680px, calc(100dvw - 36px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;
  }

  #appLockOverlay .app-lock-body {
    grid-template-columns: 1fr !important;
  }

  #appLockOverlay .app-lock-brand-panel {
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 16px 20px !important;
    border-right: 0 !important;
    border-bottom: 4px solid var(--paperdesk-auth-blue) !important;
    padding: 24px 32px !important;
  }

  #appLockOverlay .app-lock-logo-ring {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    flex-basis: 70px !important;
    grid-row: 1 !important;
    border-radius: 22px !important;
    padding: 5px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
  }

  #appLockOverlay .app-lock-logo-ring::before {
    inset: -5px !important;
    border-radius: 26px !important;
  }

  #appLockOverlay .app-lock-logo {
    width: 54px !important;
    height: 54px !important;
  }

  #appLockOverlay .app-lock-title-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    gap: 3px !important;
  }

  #appLockOverlay .app-lock-security-badge {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    padding: 7px 12px !important;
  }

  #appLockOverlay .app-lock-title-block h2 {
    font-size: min(var(--login-title-line1-size, 23px), 26px) !important;
    line-height: 1.45 !important;
  }

  #appLockOverlay .app-lock-line-two {
    font-size: min(var(--login-title-line2-size, 14px), 17px) !important;
  }

  #appLockOverlay .app-lock-line-three {
    font-size: min(var(--login-title-line3-size, 12px), 15px) !important;
  }

  #appLockOverlay .app-lock-trust-list {
    display: none !important;
  }

  #appLockOverlay .app-lock-form-panel {
  }
}

@media (max-width: 600px) {
  #appLockOverlay.app-lock-overlay {
    align-content: center !important;
    padding: 10px !important;
  }

  #appLockOverlay .app-lock-card.app-lock-card-v2 {
    grid-template-rows: 46px minmax(0, 1fr) !important;
    width: calc(100dvw - 20px) !important;
    max-width: calc(100dvw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 6px !important;
  }

  #appLockOverlay .app-lock-window-title {
    height: 46px !important;
    gap: 9px !important;
    padding: 0 12px !important;
  }

  #appLockOverlay .app-lock-window-title-text {
    font-size: 10px !important;
  }

  #appLockOverlay .app-lock-product-mark > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
  }

  #appLockOverlay .app-lock-product-icon {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
  }

  #appLockOverlay .app-lock-brand-panel {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 16px 18px !important;
  }

  #appLockOverlay .app-lock-logo-ring {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    flex-basis: 54px !important;
    border-radius: 18px !important;
    padding: 4px !important;
  }

  #appLockOverlay .app-lock-logo-ring::before {
    inset: -4px !important;
    border-radius: 21px !important;
  }

  #appLockOverlay .app-lock-logo {
    width: 42px !important;
    height: 42px !important;
  }

  #appLockOverlay .app-lock-security-badge {
    padding: 6px 10px !important;
    font-size: 9px !important;
  }

  #appLockOverlay .app-lock-kicker {
    font-size: 9px !important;
  }

  #appLockOverlay .app-lock-title-block h2 {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  #appLockOverlay .app-lock-line-two {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  #appLockOverlay .app-lock-line-three {
    display: none !important;
  }

  #appLockOverlay .app-lock-form-panel {
    gap: 11px !important;
    padding: 22px 20px 20px !important;
  }

  #appLockOverlay .app-lock-form-heading {
    margin-bottom: 4px !important;
  }

  #appLockOverlay .app-lock-form-heading h1 {
    font-size: 25px !important;
  }

  #appLockOverlay .app-lock-form-heading p {
    font-size: 12px !important;
  }

  #appLockOverlay .app-lock-field,
  #appLockOverlay .app-lock-field input,
  #appLockOverlay .app-lock-field input:focus,
  #appLockOverlay .app-lock-field input:focus-visible {
    min-height: 46px !important;
    height: 46px !important;
  }

  #appLockOverlay .app-lock-field-icon {
    height: 44px !important;
  }

  #appLockOverlay .app-lock-submit {
    min-height: 48px !important;
  }

  #appLockOverlay .app-lock-recovery-shell {
    padding: 20px !important;
  }

  #appLockOverlay .app-lock-recovery-fields {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  #appLockOverlay .app-lock-recovery-fields input + label {
    margin-top: 6px !important;
  }

  #appLockOverlay .app-lock-recovery-actions {
    align-items: stretch !important;
    flex-direction: column-reverse !important;
  }

  #appLockOverlay .app-lock-recovery-actions button {
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  #appLockOverlay .app-lock-window-title {
    gap: 7px !important;
    padding: 0 10px !important;
  }

  #appLockOverlay .app-lock-window-status {
    gap: 6px !important;
    font-size: 9px !important;
  }

  #appLockOverlay .app-lock-status-dot {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
  }

  #appLockOverlay .app-lock-window-title-text {
    font-size: 9px !important;
  }

  #appLockOverlay .app-lock-form-panel {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
}

@media (max-height: 700px) and (min-width: 901px) {
  #appLockOverlay .app-lock-brand-panel {
    gap: 20px !important;
    padding: 40px 48px !important;
  }
}

@media (max-height: 650px) and (min-width: 901px) {
  #appLockOverlay .app-lock-card.app-lock-card-v2 {
    min-height: 0 !important;
  }

  #appLockOverlay .app-lock-brand-panel {
    gap: 18px !important;
    padding: 30px 40px !important;
  }

  #appLockOverlay .app-lock-logo-ring {
    width: 76px !important;
    height: 76px !important;
    flex-basis: 76px !important;
    border-radius: 24px !important;
  }

  #appLockOverlay .app-lock-logo-ring::before {
    inset: -5px !important;
    border-radius: 28px !important;
  }

  #appLockOverlay .app-lock-logo {
    width: 58px !important;
    height: 58px !important;
  }

  #appLockOverlay .app-lock-trust-list {
    padding-top: 14px !important;
  }

  #appLockOverlay .app-lock-form-panel {
    gap: 10px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* Keep the desktop ministry brand on one line without clipping inside the fixed card. */
@media (min-width: 901px) {
  #appLockOverlay .app-lock-brand-panel {
    padding-right: 24px !important;
    padding-left: 32px !important;
  }

  #appLockOverlay .app-lock-title-block h2 {
    max-width: 100% !important;
    font-size: min(var(--login-title-line1-size, 22px), 16px) !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    overflow-wrap: normal !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #appLockOverlay .app-lock-status-dot::before {
    animation: none !important;
  }

  #appLockOverlay .app-lock-atlas-accent > i {
    opacity: 0.72 !important;
    transform: none !important;
    animation: none !important;
  }

  #appLockOverlay .app-lock-submit-spinner {
    animation: none !important;
  }

  #appLockOverlay .app-lock-field,
  #appLockOverlay .app-lock-submit {
    transition: none !important;
  }

  #appLockOverlay .app-lock-submit-fill {
    transition: none !important;
  }
}

html[data-theme="dark"] #appLockOverlay.app-lock-overlay,
body[data-theme="dark"] #appLockOverlay.app-lock-overlay,
body.dark-mode #appLockOverlay.app-lock-overlay {
  --paperdesk-auth-ink: #f8fafc;
  --paperdesk-auth-muted: #a8b3c4;
  --paperdesk-auth-line: #334155;
  --paperdesk-auth-surface: #111827;
  --paperdesk-auth-canvas: #0b1220;
  background: var(--paperdesk-auth-canvas) !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-card.app-lock-card-v2,
html[data-theme="dark"] #appLockOverlay .app-lock-window-title,
html[data-theme="dark"] #appLockOverlay .app-lock-body,
html[data-theme="dark"] #appLockOverlay .app-lock-form-panel,
body[data-theme="dark"] #appLockOverlay .app-lock-card.app-lock-card-v2,
body[data-theme="dark"] #appLockOverlay .app-lock-window-title,
body[data-theme="dark"] #appLockOverlay .app-lock-body,
body[data-theme="dark"] #appLockOverlay .app-lock-form-panel,
body.dark-mode #appLockOverlay .app-lock-card.app-lock-card-v2,
body.dark-mode #appLockOverlay .app-lock-window-title,
body.dark-mode #appLockOverlay .app-lock-body,
body.dark-mode #appLockOverlay .app-lock-form-panel {
  border-color: #334155 !important;
  background: #111827 !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-form-heading h1,
body[data-theme="dark"] #appLockOverlay .app-lock-form-heading h1,
body.dark-mode #appLockOverlay .app-lock-form-heading h1 {
  color: #f8fafc !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-field,
html[data-theme="dark"] #appLockOverlay .app-lock-field input,
body[data-theme="dark"] #appLockOverlay .app-lock-field,
body[data-theme="dark"] #appLockOverlay .app-lock-field input,
body.dark-mode #appLockOverlay .app-lock-field,
body.dark-mode #appLockOverlay .app-lock-field input {
  border-color: #475569 !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-field-icon,
body[data-theme="dark"] #appLockOverlay .app-lock-field-icon,
body.dark-mode #appLockOverlay .app-lock-field-icon {
  border-color: #334155 !important;
  background: #172033 !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] #appLockOverlay .lock-message,
body[data-theme="dark"] #appLockOverlay .lock-message,
body.dark-mode #appLockOverlay .lock-message {
  border-color: #334155 !important;
  border-left-color: #60a5fa !important;
  background: #172033 !important;
  color: #cbd5e1 !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-window-status,
body[data-theme="dark"] #appLockOverlay .app-lock-form-heading p,
body[data-theme="dark"] #appLockOverlay .app-lock-field-label-row label,
body[data-theme="dark"] #appLockOverlay .app-lock-field-label-row span,
body[data-theme="dark"] #appLockOverlay .app-lock-eye-button,
body[data-theme="dark"] #appLockOverlay .lock-recovery-button,
body[data-theme="dark"] #appLockOverlay .app-lock-access-note,
body.dark-mode #appLockOverlay .app-lock-window-status,
body.dark-mode #appLockOverlay .app-lock-form-heading p,
body.dark-mode #appLockOverlay .app-lock-field-label-row label,
body.dark-mode #appLockOverlay .app-lock-field-label-row span,
body.dark-mode #appLockOverlay .app-lock-eye-button,
body.dark-mode #appLockOverlay .lock-recovery-button,
body.dark-mode #appLockOverlay .app-lock-access-note {
  color: #cbd5e1 !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-form-heading > span,
body.dark-mode #appLockOverlay .app-lock-form-heading > span {
  color: #60a5fa !important;
}

body[data-theme="dark"] #appLockOverlay .lock-message[data-state="error"],
body.dark-mode #appLockOverlay .lock-message[data-state="error"] {
  border-color: #7f1d1d !important;
  border-left-color: #f87171 !important;
  background: #32191d !important;
  color: #fecaca !important;
}

body[data-theme="dark"] #appLockOverlay .lock-message[data-state="success"],
body.dark-mode #appLockOverlay .lock-message[data-state="success"] {
  border-color: #166534 !important;
  border-left-color: #4ade80 !important;
  background: #102a20 !important;
  color: #bbf7d0 !important;
}

body[data-theme="dark"] #appLockOverlay .lock-message[data-state="loading"],
body.dark-mode #appLockOverlay .lock-message[data-state="loading"] {
  border-color: #075985 !important;
  border-left-color: #38bdf8 !important;
  background: #102638 !important;
  color: #bae6fd !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-dialog,
body[data-theme="dark"] #appLockOverlay .app-lock-otp-modal-fallback,
body[data-theme="dark"] #appLockOverlay .app-lock-recovery-shell,
body.dark-mode #appLockOverlay .app-lock-recovery-dialog,
body.dark-mode #appLockOverlay .app-lock-otp-modal-fallback,
body.dark-mode #appLockOverlay .app-lock-recovery-shell {
  border-color: #334155 !important;
  background: #111827 !important;
  color: #f8fafc !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-header h2,
body[data-theme="dark"] #appLockOverlay .app-lock-recovery-fields label,
body.dark-mode #appLockOverlay .app-lock-recovery-header h2,
body.dark-mode #appLockOverlay .app-lock-recovery-fields label {
  color: #f8fafc !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-copy,
body.dark-mode #appLockOverlay .app-lock-recovery-copy {
  color: #a8b3c4 !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-assistance,
body.dark-mode #appLockOverlay .app-lock-recovery-assistance {
  border-color: #334155 !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-assistance.is-success,
body.dark-mode #appLockOverlay .app-lock-recovery-assistance.is-success {
  border-color: #166534 !important;
  background: #102a20 !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-assistance.is-success > .fi,
body.dark-mode #appLockOverlay .app-lock-recovery-assistance.is-success > .fi {
  background: #14532d !important;
  color: #bbf7d0 !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-assistance > .fi,
body.dark-mode #appLockOverlay .app-lock-recovery-assistance > .fi {
  background: #0c4a6e !important;
  color: #bae6fd !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-assistance span,
body.dark-mode #appLockOverlay .app-lock-recovery-assistance span {
  color: #a8b3c4 !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-close,
body[data-theme="dark"] #appLockOverlay .app-lock-recovery-actions button,
body.dark-mode #appLockOverlay .app-lock-recovery-close,
body.dark-mode #appLockOverlay .app-lock-recovery-actions button {
  border-color: #475569 !important;
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-fields input,
body.dark-mode #appLockOverlay .app-lock-recovery-fields input {
  border-color: #475569 !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-actions button[type="submit"],
body.dark-mode #appLockOverlay .app-lock-recovery-actions button[type="submit"] {
  border-color: var(--paperdesk-auth-blue) !important;
  background: var(--paperdesk-auth-blue) !important;
  color: #ffffff !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-recovery-error,
body.dark-mode #appLockOverlay .app-lock-recovery-error {
  border-left-color: #f87171 !important;
  background: #32191d !important;
  color: #fecaca !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-otp-modal-header h2,
body[data-theme="dark"] #appLockOverlay .app-lock-otp-modal-code-wrap label,
body.dark-mode #appLockOverlay .app-lock-otp-modal-header h2,
body.dark-mode #appLockOverlay .app-lock-otp-modal-code-wrap label {
  color: #f8fafc !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-otp-modal-copy,
body[data-theme="dark"] #appLockOverlay .app-lock-otp-modal-status,
body.dark-mode #appLockOverlay .app-lock-otp-modal-copy,
body.dark-mode #appLockOverlay .app-lock-otp-modal-status {
  color: #a8b3c4 !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-otp-modal-close,
body[data-theme="dark"] #appLockOverlay .app-lock-otp-modal-actions button,
body.dark-mode #appLockOverlay .app-lock-otp-modal-close,
body.dark-mode #appLockOverlay .app-lock-otp-modal-actions button {
  border-color: #475569 !important;
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-otp-modal-input,
body.dark-mode #appLockOverlay .app-lock-otp-modal-input {
  border-color: #475569 !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-otp-modal-actions .app-lock-otp-modal-submit,
body.dark-mode #appLockOverlay .app-lock-otp-modal-actions .app-lock-otp-modal-submit {
  border-color: var(--paperdesk-auth-blue) !important;
  background: var(--paperdesk-auth-blue) !important;
  color: #ffffff !important;
}

body[data-theme="dark"] #appLockOverlay .app-lock-otp-modal-error,
body.dark-mode #appLockOverlay .app-lock-otp-modal-error {
  border-left-color: #f87171 !important;
  background: #32191d !important;
  color: #fecaca !important;
}

/* Recover account mirrors the directional Profile-row interaction without
   coupling the signed-out auth surface to sidebar markup or JavaScript. */
#appLockOverlay .lock-recovery-button {
  --paperdesk-auth-recovery-fill: #2563eb;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 34px !important;
  border: 1px solid #d7e0eb !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 4px 30px 4px 6px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07) !important;
}

#appLockOverlay .lock-recovery-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--paperdesk-auth-recovery-fill);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}

#appLockOverlay .lock-recovery-button::after {
  content: "\2192";
  position: absolute;
  right: 9px;
  z-index: 1;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
}

#appLockOverlay .lock-recovery-button > :is(i, span) {
  position: relative !important;
  z-index: 1 !important;
}

#appLockOverlay .lock-recovery-button > i {
  display: inline-grid !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  place-items: center !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

#appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled) {
  border-color: #1d4ed8 !important;
  background: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2) !important;
}

#appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled)::before {
  transform: scaleX(1);
}

#appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled)::after {
  opacity: 1;
  transform: translateX(0);
}

#appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled) > i {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

#appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled) > span {
  transform: translateX(4px);
}

@media (hover: hover) and (pointer: fine) {
  #appLockOverlay .lock-recovery-button {
    transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease !important;
  }

  #appLockOverlay .lock-recovery-button::before {
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #appLockOverlay .lock-recovery-button::after {
    transition: opacity 180ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #appLockOverlay .lock-recovery-button > i {
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
  }

  #appLockOverlay .lock-recovery-button > span {
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms ease;
  }
}

body[data-theme="dark"] #appLockOverlay .lock-recovery-button,
body.dark-mode #appLockOverlay .lock-recovery-button {
  border-color: #334155 !important;
  background: #111827 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

body[data-theme="dark"] #appLockOverlay .lock-recovery-button > i,
body.dark-mode #appLockOverlay .lock-recovery-button > i {
  border-color: #334155 !important;
  background: #172033 !important;
  color: #cbd5e1 !important;
}

body[data-theme="dark"] #appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled),
body.dark-mode #appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled) {
  border-color: #60a5fa !important;
  background: #111827 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28) !important;
}

body[data-theme="dark"] #appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled) > i,
body.dark-mode #appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled) > i {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

@media (hover: none), (pointer: coarse) {
  #appLockOverlay .lock-recovery-button::before {
    transform: scaleX(0) !important;
    transition: none !important;
  }

  #appLockOverlay .lock-recovery-button::after {
    display: none !important;
  }

  #appLockOverlay .lock-recovery-button > span {
    transform: none !important;
    transition: none !important;
  }

  #appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled) {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #0f172a !important;
    box-shadow: inset 3px 0 0 #2563eb, 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  }

  #appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled) > i {
    border-color: rgba(147, 197, 253, 0.9) !important;
    background: #ffffff !important;
    color: #1d4ed8 !important;
  }

  body[data-theme="dark"] #appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled),
  body.dark-mode #appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled) {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #e2e8f0 !important;
    box-shadow: inset 3px 0 0 #60a5fa, 0 1px 2px rgba(0, 0, 0, 0.24) !important;
  }

  body[data-theme="dark"] #appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled) > i,
  body.dark-mode #appLockOverlay .lock-recovery-button:is(:hover, :focus-visible):not(:disabled) > i {
    border-color: #475569 !important;
    background: #0f172a !important;
    color: #93c5fd !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #appLockOverlay .lock-recovery-button,
  #appLockOverlay .lock-recovery-button::before,
  #appLockOverlay .lock-recovery-button::after,
  #appLockOverlay .lock-recovery-button > i,
  #appLockOverlay .lock-recovery-button > span {
  }
}

@media (max-width: 900px) {
  #appLockOverlay .app-lock-atlas-accent {
    right: 22px !important;
    bottom: 18px !important;
    width: 27px !important;
    height: 27px !important;
  }
}

@media (max-width: 600px) {
  #appLockOverlay .app-lock-atlas-accent {
    right: 18px !important;
    bottom: 16px !important;
    width: 24px !important;
    height: 24px !important;
    gap: 2px !important;
    opacity: 0.4 !important;
  }
}

@media (forced-colors: active) {
  #appLockOverlay .app-lock-atlas-accent > i {
    border-color: CanvasText !important;
    background: Canvas !important;
    box-shadow: none !important;
    animation: none !important;
  }
}

/* Landing return action: paired with account recovery without changing auth state. */
#appLockOverlay .app-lock-secondary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  width: 100%;
}

#appLockOverlay .app-lock-secondary-actions > :is(.lock-recovery-button, .app-lock-landing-link) {
  width: 100% !important;
  min-width: 0;
  min-height: 44px !important;
  margin: 0 !important;
}

#appLockOverlay .app-lock-landing-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.78);
  color: #1e4fbf;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

#appLockOverlay .app-lock-landing-link:is(:hover, :focus-visible) {
  border-color: rgba(37, 99, 235, 0.46);
  background: rgba(219, 234, 254, 0.96);
  color: #173e9c;
  outline: none;
  transform: translateY(-1px);
}

body[data-theme="dark"] #appLockOverlay .app-lock-landing-link,
body.dark-mode #appLockOverlay .app-lock-landing-link {
  border-color: rgba(125, 211, 252, 0.2);
  background: rgba(15, 38, 78, 0.7);
  color: #bae6fd;
}

body[data-theme="dark"] #appLockOverlay .app-lock-landing-link:is(:hover, :focus-visible),
body.dark-mode #appLockOverlay .app-lock-landing-link:is(:hover, :focus-visible) {
  border-color: rgba(125, 211, 252, 0.46);
  background: rgba(21, 52, 99, 0.92);
  color: #e0f2fe;
}

@media (max-width: 420px) {
  #appLockOverlay .app-lock-secondary-actions { gap: 8px; }
  #appLockOverlay .app-lock-landing-link { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #appLockOverlay .app-lock-landing-link { transition: none !important; }
}

@media (forced-colors: active) {
  #appLockOverlay .app-lock-landing-link {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}

/* PaperDesk premium auth visual contract.
   This final layer deliberately changes presentation only; the classic
   recovery, OTP, session, submit-origin, and credential-hardening contracts
   remain owned by app.js. */
#appLockOverlay.app-lock-overlay {
  --paperdesk-auth-blue: #2558e6;
  --paperdesk-auth-blue-hover: #1d47c8;
  --paperdesk-auth-submit-fill: #0b1f4f;
  --paperdesk-auth-navy: #0e1a33;
  --paperdesk-auth-navy-deep: #081226;
  --paperdesk-auth-radius: 22px;
  background:
    radial-gradient(circle at 18% 14%, rgba(96, 165, 250, 0.11), transparent 29%),
    radial-gradient(circle at 84% 88%, rgba(37, 99, 235, 0.09), transparent 34%),
    #eff4fa !important;
}

#appLockOverlay .app-lock-interactive-grid-layer {
  opacity: 0.25 !important;
}

#appLockOverlay .app-lock-interactive-grid-canvas {
  opacity: 0.48 !important;
}

#appLockOverlay .app-lock-card.app-lock-card-v2 {
  grid-template-rows: 62px minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-color: rgba(148, 163, 184, 0.52) !important;
  border-radius: var(--paperdesk-auth-radius) !important;
  box-shadow:
    0 34px 80px rgba(15, 23, 42, 0.18),
    0 4px 16px rgba(15, 23, 42, 0.07) !important;
}

#appLockOverlay .app-lock-window-title {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 20px !important;
  height: 62px !important;
  border-bottom-color: rgba(203, 213, 225, 0.72) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  padding-right: 24px !important;
  padding-left: 24px !important;
}

#appLockOverlay .app-lock-window-status {
  min-height: 34px !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(240, 253, 244, 0.92) !important;
  color: #16803a !important;
  padding: 0 11px 0 8px !important;
  letter-spacing: 0.045em !important;
  white-space: nowrap !important;
}

#appLockOverlay .app-lock-window-status[data-state="checking"] {
  border-color: rgba(217, 119, 6, 0.22) !important;
  background: rgba(255, 251, 235, 0.94) !important;
  color: #a16207 !important;
}

#appLockOverlay .app-lock-window-status[data-state="checking"] .app-lock-status-dot {
  background: rgba(245, 158, 11, 0.14) !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.08) !important;
}

#appLockOverlay .app-lock-window-status[data-state="checking"] .app-lock-status-dot::before {
  background: rgba(245, 158, 11, 0.16) !important;
}

#appLockOverlay .app-lock-window-status[data-state="checking"] .app-lock-status-dot::after {
  background: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.13) !important;
}

#appLockOverlay .app-lock-window-status[data-state="unavailable"] {
  border-color: rgba(185, 28, 28, 0.2) !important;
  background: rgba(254, 242, 242, 0.94) !important;
  color: #b42318 !important;
}

#appLockOverlay .app-lock-window-status[data-state="unavailable"] .app-lock-status-dot {
  background: rgba(220, 38, 38, 0.12) !important;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.08) !important;
}

#appLockOverlay .app-lock-window-status[data-state="unavailable"] .app-lock-status-dot::before {
  display: none !important;
}

#appLockOverlay .app-lock-window-status[data-state="unavailable"] .app-lock-status-dot::after {
  background: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

#appLockOverlay .app-lock-utility-actions {
  display: inline-flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-self: end !important;
  gap: 8px !important;
}

#appLockOverlay .app-lock-theme-button,
#appLockOverlay .app-lock-locale-badge,
#appLockOverlay .app-lock-product-mark {
  display: inline-flex !important;
  min-height: 36px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(203, 213, 225, 0.82) !important;
  border-radius: 10px !important;
  background: rgba(248, 250, 252, 0.9) !important;
  color: #172033 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

#appLockOverlay .app-lock-theme-button {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  cursor: pointer !important;
  perspective: 80px !important;
  transform-style: preserve-3d !important;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

#appLockOverlay .app-lock-theme-button:hover:not(:disabled) {
  border-color: rgba(37, 88, 230, 0.5) !important;
  background: #ffffff !important;
  color: #2558e6 !important;
  box-shadow: 0 6px 16px rgba(37, 88, 230, 0.1) !important;
}

#appLockOverlay .app-lock-theme-button:focus-visible {
  border-color: #2558e6 !important;
  outline: 3px solid rgba(37, 88, 230, 0.15) !important;
  outline-offset: 1px !important;
}

#appLockOverlay .app-lock-theme-button:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

#appLockOverlay .app-lock-theme-cosmos {
  --app-lock-theme-energy: rgba(37, 88, 230, 0.58);
  --app-lock-theme-particle: #e7a821;
  --app-lock-theme-ring: rgba(245, 158, 11, 0.38);
  position: relative !important;
  display: block !important;
  width: 30px !important;
  height: 18px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(37, 88, 230, 0.24) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #dbeafe 0%, #f8fafc 58%, #fef3c7 100%) !important;
  box-shadow:
    inset 0 1px 2px rgba(37, 88, 230, 0.08),
    0 1px 2px rgba(15, 23, 42, 0.08) !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  animation: appLockThemeCosmicTilt 5.6s ease-in-out infinite !important;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease !important;
}

#appLockOverlay .app-lock-theme-energy-lines,
#appLockOverlay .app-lock-theme-particles {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

#appLockOverlay .app-lock-theme-energy-lines {
  z-index: 1 !important;
}

#appLockOverlay .app-lock-theme-energy-lines > i {
  position: absolute !important;
  left: -4px !important;
  width: 38px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0.86 !important;
  transform: rotate(var(--app-lock-theme-line-angle, 0deg)) !important;
}

#appLockOverlay .app-lock-theme-energy-lines > i::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 14px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, var(--app-lock-theme-energy) 50%, transparent 100%) !important;
  opacity: 0.12;
  transform: translateX(-14px);
  animation: appLockThemeEnergyFlow 2.4s linear infinite !important;
}

#appLockOverlay .app-lock-theme-energy-lines > i:nth-child(1) {
  --app-lock-theme-line-angle: 7deg;
  top: 4px !important;
}

#appLockOverlay .app-lock-theme-energy-lines > i:nth-child(2) {
  top: 9px !important;
}

#appLockOverlay .app-lock-theme-energy-lines > i:nth-child(2)::before {
  animation-delay: -0.8s !important;
}

#appLockOverlay .app-lock-theme-energy-lines > i:nth-child(3) {
  --app-lock-theme-line-angle: -7deg;
  top: 14px !important;
}

#appLockOverlay .app-lock-theme-energy-lines > i:nth-child(3)::before {
  animation-delay: -1.6s !important;
}

#appLockOverlay .app-lock-theme-particles {
  z-index: 2 !important;
}

#appLockOverlay .app-lock-theme-particles > i {
  --app-lock-theme-particle-x: 5px;
  --app-lock-theme-particle-y: -4px;
  position: absolute !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  background: var(--app-lock-theme-particle) !important;
  box-shadow: 0 0 3px color-mix(in srgb, var(--app-lock-theme-particle) 72%, transparent) !important;
  opacity: 0;
  animation: appLockThemeParticleDrift 2.8s ease-out infinite !important;
}

#appLockOverlay .app-lock-theme-particles > i:nth-child(1) {
  top: 4px !important;
  left: 5px !important;
}

#appLockOverlay .app-lock-theme-particles > i:nth-child(2) {
  --app-lock-theme-particle-x: 6px;
  --app-lock-theme-particle-y: 3px;
  top: 11px !important;
  left: 8px !important;
  animation-delay: -0.45s !important;
}

#appLockOverlay .app-lock-theme-particles > i:nth-child(3) {
  --app-lock-theme-particle-x: -4px;
  --app-lock-theme-particle-y: -5px;
  top: 8px !important;
  left: 16px !important;
  animation-delay: -0.9s !important;
}

#appLockOverlay .app-lock-theme-particles > i:nth-child(4) {
  --app-lock-theme-particle-x: 4px;
  --app-lock-theme-particle-y: 4px;
  top: 5px !important;
  left: 21px !important;
  animation-delay: -1.35s !important;
}

#appLockOverlay .app-lock-theme-particles > i:nth-child(5) {
  --app-lock-theme-particle-x: -5px;
  --app-lock-theme-particle-y: 3px;
  top: 12px !important;
  left: 23px !important;
  animation-delay: -1.8s !important;
}

#appLockOverlay .app-lock-theme-particles > i:nth-child(6) {
  --app-lock-theme-particle-x: 3px;
  --app-lock-theme-particle-y: -5px;
  top: 9px !important;
  left: 13px !important;
  animation-delay: -2.25s !important;
}

#appLockOverlay .app-lock-theme-cosmos::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 5px 5px, rgba(255, 255, 255, 0.96) 0 1px, transparent 1.3px),
    radial-gradient(circle at 10px 12px, rgba(191, 219, 254, 0.9) 0 0.8px, transparent 1.1px),
    radial-gradient(circle at 15px 7px, rgba(255, 255, 255, 0.82) 0 0.7px, transparent 1px) !important;
  opacity: 0 !important;
  transition: opacity 180ms ease !important;
}

#appLockOverlay .app-lock-theme-orb {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 14px !important;
  height: 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #fde68a 0%, #f6c453 62%, #e7a821 100%) !important;
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.12),
    0 1px 3px rgba(120, 53, 15, 0.24) !important;
  transform: translateX(0) !important;
  z-index: 3 !important;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

#appLockOverlay .app-lock-theme-orb::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 50% !important;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 18deg, rgba(15, 23, 42, 0.2) 18deg 28deg, transparent 28deg 48deg) !important;
  opacity: 0.28 !important;
  animation: appLockThemeOrbPattern 4.8s linear infinite !important;
}

#appLockOverlay .app-lock-theme-orb::after {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #1e3a8a !important;
  opacity: 0 !important;
  transition: opacity 180ms ease !important;
}

#appLockOverlay .app-lock-theme-ring {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 18px !important;
  height: 18px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--app-lock-theme-ring) !important;
  border-radius: 50% !important;
  opacity: 0.34;
  pointer-events: none !important;
  transform: translateX(0) !important;
  z-index: 4 !important;
  animation: appLockThemeRingPulse 2.2s ease-in-out infinite !important;
  transition: border-color 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

#appLockOverlay .app-lock-theme-button:hover:not(:disabled) .app-lock-theme-cosmos {
  border-color: rgba(37, 88, 230, 0.52) !important;
  box-shadow:
    inset 0 1px 2px rgba(37, 88, 230, 0.1),
    0 2px 5px rgba(37, 88, 230, 0.14) !important;
  animation-duration: 3.6s !important;
}

#appLockOverlay .app-lock-theme-button:active:not(:disabled) .app-lock-theme-cosmos {
  animation-play-state: paused !important;
  transform: perspective(80px) rotateX(0deg) rotateY(0deg) scale(0.96) !important;
}

#appLockOverlay .app-lock-theme-button[data-theme="dark"] .app-lock-theme-cosmos {
  --app-lock-theme-energy: rgba(96, 165, 250, 0.76);
  --app-lock-theme-particle: #bfdbfe;
  --app-lock-theme-ring: rgba(96, 165, 250, 0.54);
  border-color: rgba(96, 165, 250, 0.42) !important;
  background: linear-gradient(135deg, #0f172a 0%, #172554 48%, #1e3a8a 100%) !important;
  box-shadow:
    inset 0 1px 3px rgba(2, 6, 23, 0.46),
    0 1px 3px rgba(2, 6, 23, 0.28) !important;
}

#appLockOverlay .app-lock-theme-button[data-theme="dark"] .app-lock-theme-cosmos::before {
  opacity: 1 !important;
}

#appLockOverlay .app-lock-theme-button[data-theme="dark"] .app-lock-theme-orb {
  border-color: rgba(255, 255, 255, 0.78) !important;
  background: linear-gradient(145deg, #ffffff 0%, #dbeafe 62%, #bfdbfe 100%) !important;
  box-shadow:
    0 0 0 2px rgba(96, 165, 250, 0.12),
    0 1px 3px rgba(2, 6, 23, 0.34) !important;
  transform: translateX(12px) !important;
}

#appLockOverlay .app-lock-theme-button[data-theme="dark"] .app-lock-theme-orb::after {
  opacity: 1 !important;
}

#appLockOverlay .app-lock-theme-button[data-theme="dark"] .app-lock-theme-ring {
  transform: translateX(12px) !important;
}

@keyframes appLockThemeCosmicTilt {
  0%,
  100% {
    transform: perspective(80px) rotateX(0deg) rotateY(0deg) scale(1);
  }
  34% {
    transform: perspective(80px) rotateX(3deg) rotateY(-4deg) scale(1.01);
  }
  68% {
    transform: perspective(80px) rotateX(-3deg) rotateY(4deg) scale(1.01);
  }
}

@keyframes appLockThemeEnergyFlow {
  0% {
    transform: translateX(-14px);
    opacity: 0.08;
  }
  50% {
    opacity: 0.72;
  }
  100% {
    transform: translateX(38px);
    opacity: 0.08;
  }
}

@keyframes appLockThemeParticleDrift {
  0%,
  18% {
    opacity: 0;
    transform: translate(0, 0) scale(0.45);
  }
  34% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translate(var(--app-lock-theme-particle-x), var(--app-lock-theme-particle-y)) scale(0.1);
  }
}

@keyframes appLockThemeOrbPattern {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes appLockThemeRingPulse {
  0%,
  100% {
    opacity: 0.26;
    box-shadow: 0 0 0 0 var(--app-lock-theme-ring);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 0 2px transparent;
  }
}

#appLockOverlay .app-lock-locale-badge {
  gap: 7px !important;
  padding: 0 10px 0 7px !important;
  font-family: "Khmer OS Siemreap", "Noto Sans Khmer", "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#appLockOverlay .app-lock-locale-symbol {
  display: inline-grid !important;
  width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: rgba(37, 88, 230, 0.1) !important;
  color: #2558e6 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

#appLockOverlay .app-lock-product-mark {
  gap: 9px !important;
  justify-self: auto !important;
  padding: 0 11px !important;
}

#appLockOverlay a.app-lock-product-mark {
  cursor: pointer !important;
  text-decoration: none !important;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
}

#appLockOverlay a.app-lock-product-mark:hover {
  border-color: rgba(37, 88, 230, 0.42) !important;
  background: rgba(239, 246, 255, 0.96) !important;
  box-shadow: 0 4px 12px rgba(37, 88, 230, 0.12) !important;
}

#appLockOverlay a.app-lock-product-mark:focus-visible {
  outline: 3px solid rgba(37, 88, 230, 0.3) !important;
  outline-offset: 2px !important;
}

#appLockOverlay a.app-lock-product-mark:active {
  background: rgba(219, 234, 254, 0.96) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

#appLockOverlay .app-lock-product-mark > i {
  color: #2558e6 !important;
  font-size: 15px !important;
}

#appLockOverlay .app-lock-product-mark > span {
  display: grid !important;
  gap: 1px !important;
  text-align: left !important;
}

#appLockOverlay .app-lock-product-mark strong,
#appLockOverlay .app-lock-product-mark small {
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

#appLockOverlay .app-lock-product-mark strong {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

#appLockOverlay .app-lock-product-mark small {
  color: #64748b !important;
  font-size: 8px !important;
  font-weight: 650 !important;
}

#appLockOverlay .app-lock-body {
  overflow: auto !important;
  background: #ffffff !important;
}

#appLockOverlay .app-lock-brand-panel {
  border-right-width: 3px !important;
  border-right-color: #2e61ee !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(96, 165, 250, 0.18), transparent 31%),
    radial-gradient(ellipse at 112% 92%, transparent 0 34%, rgba(125, 211, 252, 0.13) 34.3% 34.8%, transparent 35.1% 48%, rgba(125, 211, 252, 0.08) 48.3% 48.7%, transparent 49%),
    linear-gradient(145deg, var(--paperdesk-auth-navy) 0%, #122344 58%, var(--paperdesk-auth-navy-deep) 100%) !important;
  padding: 52px 48px !important;
}

#appLockOverlay .app-lock-brand-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  background-image:
    linear-gradient(rgba(148, 197, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 197, 255, 0.055) 1px, transparent 1px) !important;
  background-position: center !important;
  background-size: 24px 24px !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.9), transparent 74%) !important;
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.9), transparent 74%) !important;
}

#appLockOverlay .app-lock-brand-orbits {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: visible !important;
  opacity: 0.86 !important;
  pointer-events: none !important;
}

@keyframes appLockBrandContourSpin {
  from {
    transform: translate(-50%, -50%) rotate(var(--app-lock-orbit-angle, 0deg));
  }

  to {
    transform: translate(-50%, -50%) rotate(calc(var(--app-lock-orbit-angle, 0deg) + 360deg));
  }
}

#appLockOverlay .app-lock-brand-orbits > i {
  --app-lock-orbit-angle: 12deg;
  --app-lock-orbit-duration: 16s;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: calc(100% + 28px) !important;
  height: calc(100% + 28px) !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(125, 211, 252, 0.26) !important;
  border-radius: 43% 57% 52% 48% / 47% 44% 56% 53% !important;
  transform: translate(-50%, -50%) rotate(var(--app-lock-orbit-angle, 0deg));
  transform-origin: center !important;
  animation: appLockBrandContourSpin var(--app-lock-orbit-duration) linear infinite !important;
  animation-direction: normal !important;
  will-change: transform !important;
}

#appLockOverlay .app-lock-brand-orbits > i:nth-child(2) {
  --app-lock-orbit-angle: -18deg;
  --app-lock-orbit-duration: 22s;
  width: calc(100% + 8px) !important;
  height: calc(100% + 8px) !important;
  border-color: rgba(243, 198, 95, 0.34) !important;
  border-radius: 57% 43% 46% 54% / 44% 55% 45% 56% !important;
  animation-direction: reverse !important;
}

#appLockOverlay .app-lock-logo-ring {
  border-radius: 34px !important;
  box-shadow: none !important;
}

#appLockOverlay .app-lock-logo-ring::after {
  box-shadow:
    0 24px 52px rgba(2, 8, 23, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

#appLockOverlay .app-lock-logo-ring::before {
  border-color: rgba(125, 211, 252, 0.58) !important;
  border-radius: 38px !important;
}

#appLockOverlay .app-lock-form-panel {
  gap: 16px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  padding: 46px 52px !important;
}

#appLockOverlay .app-lock-form-heading {
  gap: 7px !important;
  margin-bottom: 10px !important;
}

#appLockOverlay .app-lock-form-heading h1 {
  font-size: 32px !important;
  letter-spacing: -0.025em !important;
}

#appLockOverlay .app-lock-field {
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  min-height: 52px !important;
  border-color: #cbd5e1 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important;
}

#appLockOverlay .app-lock-field:focus-within {
  border-color: var(--paperdesk-auth-blue) !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 4px rgba(37, 88, 230, 0.13),
    0 8px 20px rgba(37, 88, 230, 0.08) !important;
}

#appLockOverlay .app-lock-field-group.is-invalid .app-lock-field {
  box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.1) !important;
}

#appLockOverlay .app-lock-field-icon {
  width: 48px !important;
  height: 50px !important;
  border-right-color: #e2e8f0 !important;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%) !important;
}

#appLockOverlay .app-lock-field input,
#appLockOverlay .app-lock-field input:focus,
#appLockOverlay .app-lock-field input:focus-visible {
  height: 50px !important;
  min-height: 50px !important;
  padding-right: 14px !important;
  padding-left: 14px !important;
  font-size: 15px !important;
}

#appLockOverlay .app-lock-eye-button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-right: 3px !important;
  border-radius: 9px !important;
}

#appLockOverlay .app-lock-caps-lock-status {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 20px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  background: #fff7ed !important;
  color: #9a3412 !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#appLockOverlay .app-lock-caps-lock-status[hidden] {
  display: none !important;
}

#appLockOverlay .app-lock-caps-lock-status i {
  color: #ea580c !important;
  font-size: 12px !important;
}

#appLockOverlay .lock-message {
  border-radius: 9px !important;
  padding: 10px 12px !important;
}

#appLockOverlay .app-lock-submit {
  min-height: 58px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #2b5ce5 0%, #2149c7 100%) !important;
  box-shadow: 0 14px 28px rgba(37, 88, 230, 0.22) !important;
}

#appLockOverlay .app-lock-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #2858dc 0%, #1b3fae 100%) !important;
  box-shadow: 0 17px 34px rgba(37, 88, 230, 0.28) !important;
}

#appLockOverlay .app-lock-submit:disabled {
  box-shadow: none !important;
}

#appLockOverlay .lock-recovery-button {
  min-height: 38px !important;
  border-radius: 10px !important;
}

#appLockOverlay .app-lock-recovery-dialog,
#appLockOverlay .app-lock-otp-modal-fallback {
  border-radius: 18px !important;
  box-shadow: 0 32px 84px rgba(15, 23, 42, 0.28) !important;
}

#appLockOverlay .app-lock-otp-modal-input {
  border-radius: 12px !important;
}

#appLockOverlay .app-lock-otp-modal-close,
#appLockOverlay .app-lock-otp-modal-actions button,
#appLockOverlay .app-lock-recovery-actions button {
  border-radius: 10px !important;
}

#appLockOverlay .paperdesk-email-otp-modal-content {
  border-color: rgba(148, 163, 184, 0.52) !important;
  border-radius: 20px !important;
  box-shadow: 0 32px 84px rgba(15, 23, 42, 0.28) !important;
}

#appLockOverlay .paperdesk-email-otp-modal-header {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  padding: 22px 24px 16px !important;
}

#appLockOverlay .paperdesk-email-otp-modal-body {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  padding: 22px 24px 24px !important;
}

#appLockOverlay .paperdesk-email-otp-pin-input {
  height: clamp(46px, 12vw, 52px) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

#appLockOverlay .paperdesk-email-otp-pin-input:focus,
#appLockOverlay .paperdesk-email-otp-pin:focus-within .paperdesk-email-otp-pin-slot[data-active="true"] {
  border-color: #2558e6 !important;
  box-shadow: 0 0 0 4px rgba(37, 88, 230, 0.13) !important;
}

#appLockOverlay .paperdesk-email-otp-actions button {
  min-height: 44px !important;
  border-radius: 10px !important;
}

html[data-theme="dark"] #appLockOverlay.app-lock-overlay,
body[data-theme="dark"] #appLockOverlay.app-lock-overlay,
body.dark-mode #appLockOverlay.app-lock-overlay {
  background:
    radial-gradient(circle at 18% 14%, rgba(59, 130, 246, 0.14), transparent 29%),
    radial-gradient(circle at 84% 88%, rgba(30, 64, 175, 0.13), transparent 34%),
    #08101f !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-card.app-lock-card-v2,
body[data-theme="dark"] #appLockOverlay .app-lock-card.app-lock-card-v2,
body.dark-mode #appLockOverlay .app-lock-card.app-lock-card-v2 {
  border-color: rgba(71, 85, 105, 0.78) !important;
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.48) !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-window-title,
body[data-theme="dark"] #appLockOverlay .app-lock-window-title,
body.dark-mode #appLockOverlay .app-lock-window-title,
html[data-theme="dark"] #appLockOverlay .app-lock-form-panel,
body[data-theme="dark"] #appLockOverlay .app-lock-form-panel,
body.dark-mode #appLockOverlay .app-lock-form-panel {
  background: linear-gradient(180deg, #111827 0%, #0d1525 100%) !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-theme-button,
body[data-theme="dark"] #appLockOverlay .app-lock-theme-button,
body.dark-mode #appLockOverlay .app-lock-theme-button,
html[data-theme="dark"] #appLockOverlay .app-lock-locale-badge,
body[data-theme="dark"] #appLockOverlay .app-lock-locale-badge,
body.dark-mode #appLockOverlay .app-lock-locale-badge,
html[data-theme="dark"] #appLockOverlay .app-lock-product-mark,
body[data-theme="dark"] #appLockOverlay .app-lock-product-mark,
body.dark-mode #appLockOverlay .app-lock-product-mark {
  border-color: rgba(71, 85, 105, 0.9) !important;
  background: rgba(30, 41, 59, 0.82) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-product-mark small,
body[data-theme="dark"] #appLockOverlay .app-lock-product-mark small,
body.dark-mode #appLockOverlay .app-lock-product-mark small {
  color: #94a3b8 !important;
}

html[data-theme="dark"] #appLockOverlay a.app-lock-product-mark:hover,
body[data-theme="dark"] #appLockOverlay a.app-lock-product-mark:hover,
body.dark-mode #appLockOverlay a.app-lock-product-mark:hover {
  border-color: rgba(96, 165, 250, 0.56) !important;
  background: rgba(30, 64, 175, 0.24) !important;
}

html[data-theme="dark"] #appLockOverlay a.app-lock-product-mark:active,
body[data-theme="dark"] #appLockOverlay a.app-lock-product-mark:active,
body.dark-mode #appLockOverlay a.app-lock-product-mark:active {
  background: rgba(30, 64, 175, 0.34) !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-window-status[data-state="ready"],
body[data-theme="dark"] #appLockOverlay .app-lock-window-status[data-state="ready"],
body.dark-mode #appLockOverlay .app-lock-window-status[data-state="ready"] {
  border-color: rgba(74, 222, 128, 0.24) !important;
  background: rgba(20, 83, 45, 0.34) !important;
  color: #86efac !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-window-status[data-state="checking"],
body[data-theme="dark"] #appLockOverlay .app-lock-window-status[data-state="checking"],
body.dark-mode #appLockOverlay .app-lock-window-status[data-state="checking"] {
  border-color: rgba(251, 191, 36, 0.24) !important;
  background: rgba(120, 53, 15, 0.32) !important;
  color: #fde68a !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-window-status[data-state="unavailable"],
body[data-theme="dark"] #appLockOverlay .app-lock-window-status[data-state="unavailable"],
body.dark-mode #appLockOverlay .app-lock-window-status[data-state="unavailable"] {
  border-color: rgba(248, 113, 113, 0.26) !important;
  background: rgba(127, 29, 29, 0.32) !important;
  color: #fecaca !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-caps-lock-status,
body[data-theme="dark"] #appLockOverlay .app-lock-caps-lock-status,
body.dark-mode #appLockOverlay .app-lock-caps-lock-status {
  background: #422006 !important;
  color: #fed7aa !important;
}

html[data-theme="dark"] #appLockOverlay .app-lock-caps-lock-status i,
body[data-theme="dark"] #appLockOverlay .app-lock-caps-lock-status i,
body.dark-mode #appLockOverlay .app-lock-caps-lock-status i {
  color: #fb923c !important;
}

html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-modal-content,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-modal-content,
body.dark-mode #appLockOverlay .paperdesk-email-otp-modal-content,
html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-modal-header,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-modal-header,
body.dark-mode #appLockOverlay .paperdesk-email-otp-modal-header,
html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-modal-body,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-modal-body,
body.dark-mode #appLockOverlay .paperdesk-email-otp-modal-body {
  border-color: #334155 !important;
  background: linear-gradient(180deg, #111827 0%, #0d1525 100%) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-title,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-title,
body.dark-mode #appLockOverlay .paperdesk-email-otp-title,
html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-delivery strong,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-delivery strong,
body.dark-mode #appLockOverlay .paperdesk-email-otp-delivery strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-message,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-message,
body.dark-mode #appLockOverlay .paperdesk-email-otp-message,
html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-delivery,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-delivery,
body.dark-mode #appLockOverlay .paperdesk-email-otp-delivery,
html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-status,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-status,
body.dark-mode #appLockOverlay .paperdesk-email-otp-status {
  color: #a8b5c7 !important;
}

html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-pin-input,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-pin-input,
body.dark-mode #appLockOverlay .paperdesk-email-otp-pin-input {
  border-color: #475569 !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-pin[data-error="true"] .paperdesk-email-otp-pin-slot,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-pin[data-error="true"] .paperdesk-email-otp-pin-slot,
body.dark-mode #appLockOverlay .paperdesk-email-otp-pin[data-error="true"] .paperdesk-email-otp-pin-slot {
  border-color: #f87171 !important;
}

html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-error,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-error,
body.dark-mode #appLockOverlay .paperdesk-email-otp-error {
  border-left-color: #f87171 !important;
  background: #32191d !important;
  color: #fecaca !important;
}

html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-actions button,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-actions button,
body.dark-mode #appLockOverlay .paperdesk-email-otp-actions button {
  border-color: #475569 !important;
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-actions button:last-child:not(:disabled),
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-actions button:last-child:not(:disabled),
body.dark-mode #appLockOverlay .paperdesk-email-otp-actions button:last-child:not(:disabled) {
  border-color: #2563eb !important;
  background: #2563eb !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-actions button:disabled,
body[data-theme="dark"] #appLockOverlay .paperdesk-email-otp-actions button:disabled,
body.dark-mode #appLockOverlay .paperdesk-email-otp-actions button:disabled {
  border-color: #334155 !important;
  background: #182235 !important;
  color: #94a3b8 !important;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  #appLockOverlay .app-lock-card.app-lock-card-v2 {
    grid-template-rows: 58px minmax(0, 1fr) !important;
    border-radius: 20px !important;
  }

  #appLockOverlay .app-lock-window-title {
    height: 58px !important;
    gap: 12px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  #appLockOverlay .app-lock-brand-orbits {
    display: none !important;
  }

  #appLockOverlay .app-lock-product-mark small {
    display: none !important;
  }

  #appLockOverlay .app-lock-brand-panel {
    padding: 22px 30px !important;
  }

  #appLockOverlay .app-lock-form-panel {
    gap: 14px !important;
    padding: 30px 36px !important;
  }
}

@media (max-width: 600px) {
  #appLockOverlay .app-lock-card.app-lock-card-v2 {
    grid-template-rows: 52px minmax(0, 1fr) !important;
    border-radius: 16px !important;
  }

  #appLockOverlay .app-lock-window-title {
    height: 52px !important;
    gap: 8px !important;
    padding-right: 11px !important;
    padding-left: 11px !important;
  }

  #appLockOverlay .app-lock-window-status {
    min-height: 32px !important;
    gap: 6px !important;
    padding-right: 8px !important;
    padding-left: 7px !important;
    font-size: 9px !important;
  }

  #appLockOverlay .app-lock-status-dot {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
  }

  #appLockOverlay .app-lock-utility-actions {
    gap: 5px !important;
  }

  #appLockOverlay .app-lock-theme-button,
  #appLockOverlay .app-lock-locale-badge,
  #appLockOverlay .app-lock-product-mark {
    width: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
  }

  #appLockOverlay .app-lock-locale-badge > span:last-child,
  #appLockOverlay .app-lock-product-mark > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
  }

  #appLockOverlay .app-lock-locale-symbol {
    width: 22px !important;
    height: 22px !important;
  }

  #appLockOverlay .app-lock-brand-panel {
    padding: 14px 16px !important;
  }

  #appLockOverlay .app-lock-kicker,
  #appLockOverlay .app-lock-security-badge,
  #appLockOverlay .app-lock-line-three {
    display: none !important;
  }

  #appLockOverlay .app-lock-title-block {
    gap: 2px !important;
  }

  #appLockOverlay .app-lock-form-panel {
    gap: 10px !important;
    padding: 18px 18px 16px !important;
  }

  #appLockOverlay .app-lock-form-heading {
    margin-bottom: 2px !important;
  }

  #appLockOverlay .app-lock-field,
  #appLockOverlay .app-lock-field input,
  #appLockOverlay .app-lock-field input:focus,
  #appLockOverlay .app-lock-field input:focus-visible {
    min-height: 50px !important;
    height: 50px !important;
  }

  #appLockOverlay .app-lock-field-icon {
    height: 48px !important;
  }

  #appLockOverlay .app-lock-submit {
    min-height: 54px !important;
  }

  #appLockOverlay .app-lock-caps-lock-status {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* Phone viewport contract: the real login fills the visible phone viewport,
   while the built-in desktop Phone preview keeps a contained device frame. */
#appLockOverlay.app-lock-overlay[data-app-lock-layout="phone"] {
  padding: 0 !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-card.app-lock-card-v2 {
  grid-template-rows:
    calc(52px + env(safe-area-inset-top, 0px))
    minmax(0, 1fr) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

#appLockOverlay[data-app-lock-viewport="physical-phone"] .app-lock-card.app-lock-card-v2 {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#appLockOverlay[data-app-lock-viewport="phone-preview"] .app-lock-card.app-lock-card-v2 {
  border-radius: 20px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-window-title {
  height: auto !important;
  min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
  box-sizing: border-box !important;
  gap: 8px !important;
  padding:
    env(safe-area-inset-top, 0px)
    max(11px, env(safe-area-inset-right, 0px))
    0
    max(11px, env(safe-area-inset-left, 0px)) !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-window-status {
  min-height: 32px !important;
  gap: 6px !important;
  padding-right: 8px !important;
  padding-left: 7px !important;
  font-size: 9px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-status-dot {
  width: 15px !important;
  height: 15px !important;
  flex-basis: 15px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-utility-actions {
  gap: 5px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-theme-button,
#appLockOverlay[data-app-lock-layout="phone"] .app-lock-locale-badge,
#appLockOverlay[data-app-lock-layout="phone"] .app-lock-product-mark {
  width: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-locale-badge > span:last-child,
#appLockOverlay[data-app-lock-layout="phone"] .app-lock-product-mark > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-body {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(min-content, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* The software keyboard may cover the stable auth shell. Only the login body
   receives extra scroll range, so revealing a field never resizes the overlay. */
#appLockOverlay[data-app-lock-keyboard="open"] .app-lock-body {
  scroll-padding-block-end: calc(var(--app-lock-keyboard-inset, 0px) + 16px) !important;
}

#appLockOverlay[data-app-lock-keyboard="open"] .app-lock-body::after {
  content: "" !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  width: 1px !important;
  height: var(--app-lock-keyboard-inset, 0px) !important;
  pointer-events: none !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-brand-panel {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 12px !important;
  border-right: 0 !important;
  border-bottom: 3px solid var(--paperdesk-auth-blue) !important;
  padding:
    14px
    max(16px, env(safe-area-inset-right, 0px))
    14px
    max(16px, env(safe-area-inset-left, 0px)) !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-logo-ring {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  flex-basis: 54px !important;
  grid-row: 1 !important;
  border-radius: 18px !important;
  padding: 4px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-logo-ring::before {
  inset: -4px !important;
  border-radius: 21px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-logo {
  width: 42px !important;
  height: 42px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-title-block {
  grid-column: 2 !important;
  grid-row: 1 !important;
  gap: 2px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-kicker,
#appLockOverlay[data-app-lock-layout="phone"] .app-lock-security-badge,
#appLockOverlay[data-app-lock-layout="phone"] .app-lock-line-three,
#appLockOverlay[data-app-lock-layout="phone"] .app-lock-trust-list {
  display: none !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-title-block h2 {
  font-size: 18px !important;
  line-height: 1.4 !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-line-two {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-atlas-accent {
  right: max(18px, env(safe-area-inset-right, 0px)) !important;
  bottom: 16px !important;
  width: 24px !important;
  height: 24px !important;
  gap: 2px !important;
  opacity: 0.4 !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-form-panel {
  gap: 10px !important;
  padding:
    18px
    max(18px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px)) !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-form-heading {
  margin-bottom: 2px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-form-heading h1 {
  font-size: 25px !important;
}

/* Phone sign-in guidance is centered; actionable error text stays left aligned. */
#appLockOverlay[data-app-lock-layout="phone"] .lock-message[data-state="info"] {
  text-align: center !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-field,
#appLockOverlay[data-app-lock-layout="phone"] .app-lock-field input,
#appLockOverlay[data-app-lock-layout="phone"] .app-lock-field input:focus,
#appLockOverlay[data-app-lock-layout="phone"] .app-lock-field input:focus-visible {
  min-height: 50px !important;
  height: 50px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-field input,
#appLockOverlay[data-app-lock-layout="phone"] .app-lock-field input:focus,
#appLockOverlay[data-app-lock-layout="phone"] .app-lock-field input:focus-visible {
  font-size: 16px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-field-icon {
  height: 48px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-submit {
  min-height: 54px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .lock-recovery-button {
  min-height: 44px !important;
}

#appLockOverlay[data-app-lock-layout="phone"] .app-lock-caps-lock-status {
  max-width: 100% !important;
  white-space: normal !important;
}

/* Phone-only ministry title shimmer: keep the banner fixed while a restrained
   highlight crosses the primary Khmer text, matching the supplied reference. */
@keyframes appLockPhoneTitleShimmer {
  0%,
  10% {
    background-position: calc(0px - var(--app-lock-title-shimmer-width)) 50%, 0 0;
  }

  80%,
  100% {
    background-position: calc(100% + var(--app-lock-title-shimmer-width)) 50%, 0 0;
  }
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  #appLockOverlay[data-app-lock-layout="phone"] .app-lock-title-block h2 {
    --app-lock-title-shimmer-width: 100px;
    background-image:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 32%,
        #ffffff 50%,
        rgba(255, 255, 255, 0.2) 68%,
        transparent 100%
      ),
      linear-gradient(#dbeafe, #dbeafe) !important;
    background-repeat: no-repeat !important;
    background-position: calc(0px - var(--app-lock-title-shimmer-width)) 50%, 0 0;
    background-size: var(--app-lock-title-shimmer-width) 100%, 100% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    animation: appLockPhoneTitleShimmer 4.8s cubic-bezier(0.6, 0.6, 0, 1) infinite !important;
  }
}

@media (forced-colors: active) {
  #appLockOverlay .app-lock-brand-orbits {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #appLockOverlay .app-lock-brand-orbits > i {
    animation: none !important;
    will-change: auto !important;
  }

  #appLockOverlay .app-lock-field,
  #appLockOverlay .app-lock-submit,
  #appLockOverlay .app-lock-theme-button {
    transition: none !important;
  }

  #appLockOverlay .app-lock-theme-cosmos,
  #appLockOverlay .app-lock-theme-cosmos::before,
  #appLockOverlay .app-lock-theme-energy-lines > i::before,
  #appLockOverlay .app-lock-theme-particles > i,
  #appLockOverlay .app-lock-theme-orb,
  #appLockOverlay .app-lock-theme-orb::before,
  #appLockOverlay .app-lock-theme-orb::after,
  #appLockOverlay .app-lock-theme-ring {
    animation: none !important;
    transition: none !important;
  }

  #appLockOverlay .app-lock-theme-energy-lines,
  #appLockOverlay .app-lock-theme-particles,
  #appLockOverlay .app-lock-theme-ring {
    display: none !important;
  }

  #appLockOverlay .lock-recovery-button,
  #appLockOverlay .lock-recovery-button::before,
  #appLockOverlay .lock-recovery-button::after,
  #appLockOverlay .lock-recovery-button > i,
  #appLockOverlay .lock-recovery-button > span {
    transition-duration: 0.01ms !important;
  }

  #appLockOverlay[data-app-lock-layout="phone"] .app-lock-title-block h2 {
    background: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  #appLockOverlay .app-lock-theme-button,
  #appLockOverlay .app-lock-locale-badge,
  #appLockOverlay .app-lock-product-mark,
  #appLockOverlay .app-lock-window-status {
    border-color: CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
    box-shadow: none !important;
  }

  #appLockOverlay .app-lock-theme-cosmos {
    border-color: CanvasText !important;
    background: Canvas !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  #appLockOverlay .app-lock-theme-cosmos::before,
  #appLockOverlay .app-lock-theme-energy-lines,
  #appLockOverlay .app-lock-theme-particles,
  #appLockOverlay .app-lock-theme-orb::before,
  #appLockOverlay .app-lock-theme-orb::after {
    display: none !important;
  }

  #appLockOverlay .app-lock-theme-orb {
    border-color: CanvasText !important;
    background: CanvasText !important;
    box-shadow: none !important;
    transition: none !important;
  }

  #appLockOverlay .app-lock-theme-ring {
    display: none !important;
  }

  #appLockOverlay[data-app-lock-layout="phone"] .app-lock-title-block h2 {
    background: none !important;
    color: CanvasText !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
  }
}

/* Accessibility closure: solid focus indicators exceed 3:1 on auth surfaces. */
#appLockOverlay .app-lock-field:focus-within {
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px #1d4ed8, 0 0 0 5px #ffffff !important;
}

#appLockOverlay .app-lock-field input:focus-visible {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: -3px !important;
}

#appLockOverlay :is(
  .app-lock-eye-button,
  .lock-recovery-button,
  .app-lock-submit,
  .app-lock-recovery-dialog button,
  .app-lock-otp-modal-fallback button,
  .app-lock-theme-button,
  a.app-lock-product-mark
):focus-visible,
#appLockOverlay :is(
  .app-lock-otp-modal-input,
  .app-lock-recovery-fields input,
  .paperdesk-email-otp-pin-input
):focus-visible {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #ffffff !important;
}

#appLockOverlay .paperdesk-email-otp-pin:focus-within .paperdesk-email-otp-pin-slot[data-active="true"] {
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px #1d4ed8, 0 0 0 5px #ffffff !important;
}

@media (forced-colors: active) {
  #appLockOverlay :focus-visible {
    outline-color: Highlight !important;
    forced-color-adjust: auto !important;
  }
}