/* Standalone modal foundation for pages that do not load the dashboard stylesheet. */
#passcode-modal.modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(16 17 15 / 48%);
  backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

#passcode-modal.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

#passcode-modal .passcode-modal {
  position: relative;
  width: min(100%, 460px);
  max-height: min(720px, calc(100dvh - 32px));
  overflow: auto;
  padding: 31px;
  border: 1px solid var(--line, #dedfd6);
  border-radius: 19px;
  background: var(--surface, #fff);
  color: var(--ink, #10110f);
  box-shadow: 0 25px 80px rgb(0 0 0 / 22%);
  transform: translateY(8px);
  transition: transform .22s ease;
}

#passcode-modal.modal-backdrop.open .passcode-modal { transform: translateY(0); }

#passcode-modal .passcode-modal h2 {
  max-width: 330px;
  margin: 12px 0 0;
  color: var(--ink, #10110f);
  font-family: Rubik, Calibri, sans-serif;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -.055em;
}

#passcode-modal .modal-copy {
  margin: 11px 0 25px;
  color: var(--muted, #72756d);
  font-size: 13px;
  line-height: 1.55;
}

#passcode-modal .modal-close {
  position: absolute;
  top: 17px;
  right: 17px;
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--muted, #72756d);
  background: transparent;
  font-size: 23px;
  line-height: 1;
}

#passcode-modal .modal-close:hover,
#passcode-modal .modal-close:focus-visible {
  border-color: var(--line, #dedfd6);
  background: color-mix(in srgb, var(--surface, #fff) 82%, var(--gold, #e7c56c) 18%);
}

#passcode-modal .passcode-actions .button {
  display: inline-flex;
  width: 100%;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  color: var(--ink, #10110f);
  background: var(--gold, #e7c56c);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .2s ease, opacity .2s ease;
}

#passcode-modal .passcode-actions .button:hover:not(:disabled) { filter: brightness(.96); }
#passcode-modal .passcode-actions .button:disabled { cursor: not-allowed; }

.passcode-modal { width: min(100%, 460px); }
.passcode-summary { margin: 0 0 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--line, #e2e8f0) 80%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--surface, #fff) 82%, var(--gold, #e6bc58) 18%); color: var(--ink, #10110f); font-size: 13px; line-height: 1.5; }
.passcode-fields { display: grid; gap: 12px; }
.otp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.otp-grid input { text-align: center; padding-inline: 0; letter-spacing: 0; }
.passcode-field { display: grid; gap: 6px; }
.passcode-field span { color: var(--muted, #64748b); font-size: 11px; font-weight: 700; }
.passcode-field input { width: 100%; min-height: 47px; border: 1px solid var(--line, #d9dee8); border-radius: 11px; padding: 0 14px; color: var(--ink, #10110f); background: var(--surface, #fff); font: 700 20px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .2em; outline: 0; }
.passcode-field input:focus-visible { border-color: var(--gold-deep, #9b6c17); outline: 3px solid color-mix(in srgb, var(--gold, #e6bc58) 38%, transparent); outline-offset: 2px; }
.passcode-status { min-height: 22px; margin: 13px 0 0; color: var(--muted, #64748b); font-size: 12px; line-height: 1.45; }
.passcode-status.error { color: var(--error, #b44e46); }
.passcode-status.success { color: var(--success, #45765f); }
.passcode-actions { display: grid; gap: 9px; margin-top: 16px; }
.passcode-actions [data-passcode-submit][data-ready="false"] { cursor: not-allowed; opacity: .58; }
.passcode-forgot, .passcode-resend { width: max-content; justify-self: center; border: 0; padding: 3px 6px; color: var(--gold-deep, #9b6c17); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.passcode-forgot:hover, .passcode-resend:hover:not(:disabled) { text-decoration: underline; }
.passcode-resend:disabled { cursor: not-allowed; opacity: .55; }
.passcode-lock-note { display: inline-block; margin-top: 3px; color: inherit; font-weight: 700; }
html[data-theme="dark"] .passcode-summary { background: color-mix(in srgb, var(--surface, #1d211c) 88%, var(--gold, #edc967) 12%); }
@media (max-width: 480px) {
  #passcode-modal.modal-backdrop { padding: 12px; }
  #passcode-modal .passcode-modal,
  .passcode-modal { padding: 23px; border-radius: 16px; }
  #passcode-modal .modal-close { top: 12px; right: 12px; }
  .passcode-field input { min-height: 44px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #passcode-modal,
  #passcode-modal *
  { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}