.totp-code {position:relative;width:min(100%,22rem);margin:1.75rem auto 0;color:#111827}
.totp-slots {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.65rem;pointer-events:none}
.totp-slots span {display:flex;align-items:center;justify-content:center;height:3.5rem;border-bottom:2px solid #111827;font-size:2rem;font-weight:600;line-height:1;transition:color .15s,border-color .15s;font-variant-numeric:tabular-nums}
.totp-code-input {position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;color:transparent!important;caret-color:transparent;font-size:2rem;letter-spacing:.5rem;outline:none!important;-webkit-text-fill-color:transparent}
.totp-code:not([data-state="success"]):not([data-state="error"]):focus-within .totp-slots span[data-cursor] {border-color:#2563eb}
.totp-code[data-state="success"] {color:#15803d}
.totp-code[data-state="success"] .totp-slots span {border-color:#15803d}
.totp-code[data-state="error"] {color:#dc2626;animation:totp-shake .36s ease-in-out}
.totp-code[data-state="error"] .totp-slots span {border-color:#dc2626}
.totp-code[data-state="pending"] {opacity:.6}
.totp-feedback {min-height:1.5rem;margin:.8rem 0 1rem;font-size:.875rem;color:#475569;text-align:center}
.totp-feedback[data-error="true"] {color:#b91c1c}
.totp-dialog {max-width:min(34rem,calc(100vw - 3rem));width:34rem;padding:0;border:0;border-radius:1.75rem;background:#fff;color:#0f172a;box-shadow:0 25px 80px #0f172a38;overflow:visible}
.totp-dialog::backdrop {background:#0f172a70;backdrop-filter:blur(5px)}
.totp-dialog-card {width:100%;border-radius:1.75rem;background:white}
.totp-dialog-controls {display:flex;justify-content:space-between;align-items:center;padding:.75rem}
.totp-dialog-control {display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:44px;min-height:44px;padding:.6rem;border:0;border-radius:.75rem;background:transparent;font-size:.9rem;color:#475569;cursor:pointer;text-decoration:none}
.totp-dialog-control span[aria-hidden] {font-size:1.5rem;line-height:1}
.totp-dialog-control:hover {background:#f1f5f9}
.totp-dialog-control:focus-visible {outline:2px solid #2563eb;outline-offset:2px}
.totp-dialog-content {padding:.5rem 2.5rem 2rem;text-align:center}
.totp-dialog-content h1,.totp-dialog-content h2 {margin:1.25rem 0 .75rem;font-size:1.75rem;font-weight:800;line-height:1.4;letter-spacing:-.02em}
.totp-security-mark {display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:auto;border:2px solid #bfdbfe;border-radius:1rem;background:#eff6ff;color:#2563eb;font-size:1.65rem}
.totp-description {margin:.75rem 0;color:#64748b;font-size:.95rem;line-height:1.7}
.totp-submit {display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px}
.totp-fallback {display:flex;align-items:center;justify-content:center;min-height:65vh;padding:2rem}
.totp-fallback .totp-dialog-card {max-width:34rem;border:1px solid #e2e8f0;box-shadow:0 15px 50px #0f172a15}
.totp-qr-card {padding:1.5rem;border:1px solid #e2e8f0;border-radius:1.5rem;background:white;text-align:center}
.totp-enrollment-qr {display:block;width:280px;height:auto;max-width:100%;margin:1.25rem auto;image-rendering:pixelated}
.totp-app-option {display:flex;flex-direction:column;gap:.3rem;padding:1rem;border:1px solid #cbd5e1;border-radius:1rem;min-height:44px}
.totp-app-option:hover {border-color:#2563eb;background:#eff6ff}
.totp-app-option span {font-size:.8rem;color:#64748b}
body:has(.totp-dialog[open]) {overflow:hidden}
@keyframes totp-shake {0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@media(max-width:640px){
  .totp-dialog {position:fixed;inset:0;max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;border-radius:0;overflow-y:auto}
  .totp-dialog-card {min-height:100%;border-radius:0}
  .totp-dialog-controls {padding:calc(.5rem + env(safe-area-inset-top)) .75rem .5rem}
  .totp-dialog-content {padding:2rem 1.5rem calc(2rem + env(safe-area-inset-bottom));max-width:30rem;margin:auto}
  .totp-dialog-content h1,.totp-dialog-content h2 {font-size:1.65rem}
  .totp-fallback {padding:0;min-height:100dvh;background:#fff}
  .totp-fallback .totp-dialog-card {min-height:100dvh;max-width:none;border:0;border-radius:0;box-shadow:none}
  .totp-slots {gap:.5rem}
}
@media(prefers-reduced-motion:reduce){.totp-code[data-state="error"]{animation:none}.totp-slots span{transition:none}}