/* All rules stay inside the code component; surrounding login styles own its theme. */
.email-code-input-v1 {
    --code-accent: var(--email-code-accent, #ffd700);
    --code-ease: cubic-bezier(.22, 1, .36, 1);
    position: relative; isolation: isolate; width: 100%; height: 62px; min-width: 0;
}
.email-code-input-v1 input[type="text"] {
    position: absolute; inset: 0; z-index: 4; width: 100%; height: 62px;
    padding: 0; border: 0; border-radius: 0; background: transparent; color: transparent;
    caret-color: transparent; box-shadow: none; font-size: 16px;
    --tw-ring-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000;
}
.email-code-input-v1 input[type="text"]:focus,
.email-code-input-v1 input[type="text"]:focus-visible { outline: none; background: transparent; border: 0; box-shadow: none; }
.email-code-input-v1 input::selection { color: transparent; background: transparent; }
.email-code-input-v1 .email-code-slots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; pointer-events: none; }
.email-code-input-v1 .email-code-slot {
    position: relative; display: grid; place-items: center; min-width: 0; height: 62px;
    border: 1px solid #ffffff28; border-radius: 8px; background: #ffffff0d;
    box-shadow: inset 0 1px #ffffff05; font-size: 23px; font-variant-numeric: tabular-nums;
    transition: border-color .2s, background-color .2s;
}
.email-code-input-v1 .email-code-slot b { font-weight: 500; }
.email-code-input-v1 .email-code-slot.is-code-selected { border-color: var(--code-accent); background: #ffd7001a; }
.email-code-input-v1 .email-code-slot.is-code-active b:empty::after { content: ''; display: block; width: 2px; height: 21px; background: var(--code-accent); animation: email-code-caret 1.1s step-end infinite; }
.email-code-input-v1 .email-code-guide {
    position: absolute; z-index: 1; left: 0; top: 0; height: 62px; width: var(--focus-w, 0px);
    border: 1px solid var(--code-accent); border-radius: 8px; opacity: 0;
    transform: translateX(var(--focus-x, 0px)); pointer-events: none;
    transition: transform .28s var(--code-ease), width .28s var(--code-ease), opacity .15s;
}
.email-code-input-v1.is-code-focused .email-code-guide { opacity: 1; }
.email-code-input-v1 .email-code-sweep { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; opacity: 0; pointer-events: none; }
.email-code-input-v1[data-state="verifying"] .email-code-sweep { opacity: 1; }
.email-code-input-v1[data-state="verifying"] .email-code-sweep::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffd70014, transparent); animation: email-code-sweep 1.4s ease-in-out infinite; }
.email-code-input-v1[data-state="error"] .email-code-slot,
.email-code-input-v1[data-state="input-error"] .email-code-slot,
.email-code-input-v1[data-state="expired"] .email-code-slot { border-color: #cb8b7066; }
.email-code-input-v1[data-state="merging"] .email-code-guide,
.email-code-input-v1[data-state="success"] .email-code-guide { opacity: 0; }
.email-code-input-v1[data-state="merging"] .email-code-slot { animation: email-code-gather .43s cubic-bezier(.45,0,.2,1) both; animation-delay: calc(var(--i)*9ms); }
.email-code-input-v1[data-state="merging"] .email-code-slot b { animation: email-code-ink-out .18s .03s ease-out forwards; }
.email-code-input-v1[data-state="success"] .email-code-slots { visibility: hidden; }
.email-code-input-v1 .email-code-core {
    position: absolute; z-index: 1; left: calc(50% - 26px); top: 5px; width: 52px; height: 52px;
    opacity: 0; border-radius: 9px; border: 1px solid #ffd70070; background: linear-gradient(105deg,#ffd70010,#ffd70003);
    box-shadow: inset 0 1px #ffffff08; pointer-events: none;
    transition: opacity .12s, left .46s var(--code-ease), top .46s var(--code-ease), width .46s var(--code-ease), height .46s var(--code-ease), border-radius .46s var(--code-ease);
}
.email-code-input-v1.is-code-core-visible .email-code-core { opacity: 1; }
.email-code-input-v1.is-code-opening .email-code-core { left: 0; top: 0; width: 100%; height: 62px; border-radius: 8px; border-color: #ffd70045; }
.email-code-input-v1 .email-code-receipt { position: absolute; inset: 0; z-index: 2; display: flex; gap: 12px; align-items: center; padding: 0 13px; opacity: 0; visibility: hidden; pointer-events: none; }
.email-code-input-v1.is-code-receipt-visible .email-code-receipt { visibility: visible; animation: email-code-receipt-in .2s ease-out both; }
.email-code-input-v1 .email-code-mark { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ffd70060; border-radius: 50%; background: #ffd7000d; }
.email-code-input-v1 .email-code-mark svg { width: 26px; height: 26px; fill: none; stroke: var(--code-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.email-code-input-v1.is-code-receipt-visible .email-code-mark { animation: email-code-mark-travel .46s var(--code-ease) both; }
.email-code-input-v1 .email-code-copy { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.email-code-input-v1 .email-code-copy strong { color: var(--code-accent); font-size: 14px; font-weight: 600; }
.email-code-input-v1 .email-code-copy > span { font-size: 11px; color: #c0c0c0; }
.email-code-input-v1.is-code-receipt-visible .email-code-copy { animation: email-code-copy-in .38s .18s var(--code-ease) both; }
@keyframes email-code-caret { 50% { opacity: 0; } }
@keyframes email-code-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes email-code-gather { 0% { transform: translateX(0) scale(1); opacity: 1; } 65% { opacity: .95; } 100% { transform: translateX(var(--gather-x)) scale(var(--gather-sx),.8387); opacity: 0; } }
@keyframes email-code-ink-out { to { opacity: 0; transform: translateY(-3px); } }
@keyframes email-code-receipt-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes email-code-mark-travel { from { transform: translateX(var(--mark-travel)) scale(.8); opacity: .1; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes email-code-copy-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 380px) { .email-code-input-v1 .email-code-slots { gap: 6px; } .email-code-input-v1 .email-code-slot { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) {
    .email-code-input-v1 *, .email-code-input-v1 *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition: none !important; }
    .email-code-input-v1 .email-code-sweep, .email-code-input-v1 .email-code-slot.is-code-active b:empty::after { animation: none; }
}

/* Binding-only adaptation: A's base component and all other account fields stay unchanged. */
.identity-email-code-region .email-code-input-v1 { --email-code-accent: #dfc282; display: block; overflow: clip; }
.identity-email-code-region .email-code-core, .identity-email-code-region .email-code-guide { box-sizing: border-box; }
.identity-dossier .identity-email-code-region .email-code-input-v1 input[type="text"],
.identity-dossier .identity-email-code-region .email-code-input-v1 input[type="text"]:focus,
.identity-dossier .identity-email-code-region .email-code-input-v1 input[type="text"]:focus-visible {
    position: absolute; inset: 0; height: 62px; padding: 0; border: 0; background: transparent;
    color: transparent; caret-color: transparent; outline: none; box-shadow: none;
}
.identity-email-code-region .email-code-slot { background: #11161d; border-color: #535862; color: #eff1f5; }
.identity-email-code-region .email-code-slot.is-code-selected { background: #dfc2821a; border-color: #dfc282; }
.identity-email-code-region .email-code-core { border-color: #dfc28270; background: linear-gradient(105deg,#dfc28210,#dfc28203); }
.identity-email-code-region .is-code-opening .email-code-core { border-color: #dfc28245; }
.identity-email-code-region .email-code-mark { border-color: #dfc28260; background: #dfc2820d; }
.identity-email-code-region [data-state="verifying"] .email-code-sweep::after { background: linear-gradient(90deg,transparent,#dfc28214,transparent); }
.identity-dossier .identity-email-code-region .identity-email-code-tools { min-height: 42px; align-items: center; justify-content: space-between; }
.identity-dossier .identity-email-code-region .identity-email-code-status { flex: 1; min-width: 0; margin: 0; color: #a7a39b; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.identity-dossier .identity-email-code-region .identity-email-code-status:is([data-state="error"],[data-state="unconfirmed"],[data-state="expired"]) { color: #e1a093; }