/* Share the payment page's palette and surface treatment across both verification dialogs. */
body :is(#identity-dialog, .otp-bg .otp-box) {
    --identity-accent: var(--primary-gradient-start, var(--identity-p, #6366f1));
    --identity-secondary: var(--primary-gradient-end, var(--identity-s, #14b8a6));
    --identity-bg: #fff;
    --identity-ink: #20283b;
    --identity-muted: #58647b;
    --identity-line: color-mix(in srgb, var(--identity-accent) 18%, #dce2ec);
    --identity-field: color-mix(in srgb, var(--identity-accent) 3%, #f8fafc);
    --identity-surface: linear-gradient(145deg, color-mix(in srgb, var(--identity-accent) 5%, #fff), #fff 55%, color-mix(in srgb, var(--identity-secondary) 4%, #fff));
    --identity-action: linear-gradient(120deg, color-mix(in srgb, var(--identity-accent) 38%, #111827), color-mix(in srgb, var(--identity-secondary) 38%, #111827));
    --identity-shadow: 0 28px 90px rgba(18, 27, 53, .24), inset 0 1px rgba(255, 255, 255, .8);
    --identity-radius: 24px;
}
body.theme-1 :is(#identity-dialog, .otp-bg .otp-box) {
    --identity-bg: #10192b;
    --identity-ink: var(--text-primary, #fff);
    --identity-muted: #b8c4db;
    --identity-line: color-mix(in srgb, var(--identity-accent) 23%, #344159);
    --identity-field: rgba(255, 255, 255, .055);
    --identity-surface: linear-gradient(145deg, color-mix(in srgb, var(--identity-accent) 13%, #12192b), rgba(15, 25, 45, .98) 52%, color-mix(in srgb, var(--identity-secondary) 8%, #111827));
    --identity-shadow: 0 32px 100px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .08);
    --identity-radius: 32px;
    color-scheme: dark;
}
body.theme-2 :is(#identity-dialog, .otp-bg .otp-box) {
    --identity-accent: var(--fantasy-primary, #ffb8d6);
    --identity-secondary: var(--fantasy-secondary, #e0b0ff);
    --identity-bg: #1c1735;
    --identity-ink: var(--fantasy-text, #fff);
    --identity-muted: #e0d9ef;
    --identity-line: color-mix(in srgb, var(--identity-accent) 26%, #51426d);
    --identity-field: rgba(255, 255, 255, .065);
    --identity-surface: linear-gradient(140deg, color-mix(in srgb, var(--sibmo-fantasy-bg-1, #172554) 55%, #16172d), color-mix(in srgb, var(--sibmo-fantasy-bg-2, #6d28d9) 32%, #20172f) 60%, color-mix(in srgb, var(--sibmo-fantasy-bg-3, #ec4899) 20%, #241a35));
    --identity-shadow: 0 30px 100px rgba(15, 12, 55, .55), inset 0 1px rgba(255, 255, 255, .15), 0 0 40px color-mix(in srgb, var(--identity-accent) 8%, transparent);
    --identity-radius: 28px;
    color-scheme: dark;
}
body.theme-2.variant-fairy :is(#identity-dialog, .otp-bg .otp-box) {
    --identity-surface: linear-gradient(145deg, #18234f, #31164e);
    --identity-line: rgba(155, 225, 255, .28);
    --identity-radius: 24px;
}
body #identity-dialog, body .otp-bg .otp-box {
    position: relative;
    width: min(440px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    height: auto;
    overflow-y: auto;
    margin: auto;
    padding: 28px;
    border: 1px solid var(--identity-line) !important;
    border-radius: var(--identity-radius) !important;
    background: var(--identity-surface) !important;
    color: var(--identity-ink) !important;
    box-shadow: var(--identity-shadow) !important;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.9;
    text-align: right;
    box-sizing: border-box;
    backdrop-filter: blur(20px) saturate(125%);
}
body #identity-dialog::before, body .otp-bg .otp-box::before {
    content: '';
    display: block;
    height: 3px;
    margin: -8px 0 22px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--identity-accent), var(--identity-secondary));
    opacity: .9;
}
#identity-dialog *, .otp-box * { box-sizing: border-box; }
#identity-dialog [hidden] { display: none !important; }
#identity-dialog::backdrop { background: rgba(5, 9, 22, .64); backdrop-filter: blur(8px); }
html.identity-modal-open { overflow: hidden; overscroll-behavior: none; }
body #identity-dialog {
    position: fixed;
    inset-inline: 0;
    inset-block-start: var(--identity-viewport-top, 0px);
    inset-block-end: max(0px, calc(100% - var(--identity-viewport-top, 0px) - var(--identity-viewport-height, 100%)));
    width: min(440px, calc(100% - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(var(--identity-viewport-height, 100dvh) - 24px);
    padding: 0;
    overflow: hidden;
}
body #identity-dialog[open] { display: flex; flex-direction: column; }
body #identity-dialog::before { position: absolute; inset: 0 0 auto; margin: 0; z-index: 1; }
#identity-dialog #identity-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}
#identity-dialog .identity-top { flex: 0 0 auto; padding: 12px 20px 8px; }
#identity-dialog .identity-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    padding: 0 24px 8px;
    scroll-padding-block: 16px;
}
#identity-dialog .identity-footer {
    flex: 0 0 auto;
    padding: 14px 24px max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--identity-line);
    background: var(--identity-bg);
}
.identity-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.identity-step { padding: 5px 11px; border: 1px solid var(--identity-line); border-radius: 99px; background: var(--identity-field); font-size: 11px; color: var(--identity-muted); }
.identity-close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.identity-close svg, .identity-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.identity-mark { display: grid; place-items: center; width: 54px; height: 54px; margin-top: 20px; border-radius: 18px; border: 1px solid var(--identity-line); background: linear-gradient(135deg, color-mix(in srgb, var(--identity-accent) 14%, var(--identity-bg)), color-mix(in srgb, var(--identity-secondary) 8%, var(--identity-bg))); color: var(--identity-ink); }
#identity-dialog h2 { margin: 18px 0 8px; color: var(--identity-ink); font-size: 22px; font-weight: 700; line-height: 1.6; }
#identity-dialog p { margin: 0 0 16px; color: var(--identity-muted); font-size: 13px; line-height: 2; }
.identity-notice { margin: 20px 0; padding: 14px 16px; border: 1px solid var(--identity-line); border-radius: 16px; background: var(--identity-field); color: var(--identity-muted); font-size: 12px; line-height: 2; }
.identity-notice strong { color: var(--identity-ink); }
#identity-dialog label { display: block; margin: 18px 0 8px; font-size: 13px; font-weight: 700; }
body #identity-dialog input, body .otp-bg .otp-box input#smscode {
    display: block; width: 100%; height: 54px; padding: 12px 15px;
    border: 1px solid var(--identity-line) !important; border-radius: 14px !important;
    background: var(--identity-field) !important; color: var(--identity-ink) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04) !important;
    font-family: inherit; font-size: 17px; font-weight: 400; line-height: 1.5;
    direction: ltr; text-align: left; transform: none !important; backdrop-filter: none !important;
    transition: border-color .15s, box-shadow .15s;
}
body #identity-dialog input:focus, body .otp-bg .otp-box input#smscode:focus {
    outline: 2px solid var(--identity-accent) !important; outline-offset: 3px;
    border-color: var(--identity-accent) !important;
}
body #identity-dialog input::placeholder { color: var(--identity-muted) !important; font-size: 14px; opacity: .8; }
#identity-dialog small { display: block; margin-top: 8px; color: var(--identity-muted); font-size: 11px; line-height: 1.9; }
body #identity-dialog button, body .otp-bg .otp-box .otp-btns button {
    border: 1px solid transparent !important; background: transparent !important; color: var(--identity-ink) !important;
    box-shadow: none !important; text-shadow: none !important; transform: none !important; animation: none !important;
    font-family: inherit; touch-action: manipulation; cursor: pointer; transition: opacity .15s, background .15s;
}
body #identity-dialog button::before, body #identity-dialog button::after, body .otp-box .otp-btns button::before, body .otp-box .otp-btns button::after { display: none !important; }
body #identity-dialog #identity-submit, body .otp-bg .otp-box #otp-confirm {
    min-height: 50px; padding: 12px 18px; border-radius: 14px;
    background: var(--identity-action) !important; color: #fff !important;
    border-color: color-mix(in srgb, var(--identity-accent) 30%, transparent) !important;
    box-shadow: 0 7px 20px color-mix(in srgb, var(--identity-accent) 12%, transparent) !important;
    font-size: 14px; font-weight: 700;
}
#identity-dialog #identity-submit { width: 100%; }
body #identity-dialog #identity-submit:hover, body .otp-bg .otp-box #otp-confirm:hover { opacity: .88; }
body #identity-dialog #identity-close { color: var(--identity-muted) !important; }
body #identity-dialog #identity-close:hover { background: var(--identity-field) !important; }
body #identity-dialog button:disabled, body .otp-bg .otp-box button:disabled { opacity: .5 !important; cursor: default; }
body #identity-dialog button:focus-visible, body .otp-bg .otp-box button:focus-visible { outline: 2px solid var(--identity-accent) !important; outline-offset: 3px; }
.identity-code-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.identity-code-actions button { min-height: 44px; padding: 8px 5px; font-size: 12px; }
body #identity-dialog #identity-code, body .otp-bg .otp-box input#smscode { font-size: 26px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.identity-code-to { margin-top: 24px !important; }
.identity-error, body .otp-box .otp-alert { margin: 16px 0; padding: 12px 14px; border: 1px solid #e8a3a3; border-radius: 12px; background: #fff1f1; color: #9c1b1b; font-size: 12px; }
#identity-dialog .identity-progress { min-height: 22px; margin: 14px 0; color: var(--identity-ink); font-size: 12px; }
.identity-footnote { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--identity-line); color: var(--identity-muted); font-size: 11px; line-height: 1.9; text-align: center; }
body .otp-bg { padding: 16px; box-sizing: border-box; overflow-y: auto; backdrop-filter: blur(8px); }
body .otp-bg .otp-box .otp-text { color: var(--identity-muted); font-size: 14px; line-height: 2; }
body .otp-bg .otp-box input#smscode { margin: 24px 0; }
body .otp-bg .otp-box .otp-btns { display: flex; flex-wrap: wrap; gap: 8px; }
body .otp-bg .otp-box .otp-btns button { min-height: 44px; padding: 10px 14px; border-radius: 12px; }
body .otp-bg .otp-box #otp-confirm { flex: 1; }
body .otp-bg .otp-box #otp-resend, body .otp-bg .otp-box #cancel-otp { border-color: var(--identity-line) !important; background: var(--identity-field) !important; }
@media (max-width: 600px), (max-height: 600px) {
    #identity-dialog .identity-top { padding: 8px 16px 4px; }
    #identity-dialog .identity-scroll { padding-inline: 20px; }
    #identity-dialog .identity-mark { width: 40px; height: 40px; margin-top: 8px; border-radius: 13px; }
    #identity-dialog h2 { margin-top: 12px; font-size: 20px; }
    #identity-dialog p { margin-bottom: 12px; line-height: 1.9; }
    #identity-dialog .identity-notice { margin: 12px 0; padding: 10px 12px; line-height: 1.9; }
    #identity-dialog label { margin-top: 12px; }
    #identity-dialog .identity-footer { padding: 12px 20px max(12px, env(safe-area-inset-bottom)); }
    #identity-dialog .identity-footnote { margin-top: 10px; padding-top: 0; border-top: 0; }
    #identity-dialog .identity-code-actions { margin-top: 4px; }
}
@media (max-width: 380px) { body .otp-bg .otp-box { padding: 22px 18px; } }
@media (prefers-reduced-motion: reduce) { #identity-dialog *, .otp-box * { animation: none !important; transition: none !important; } }