/* QConnectX consumer app demo: sign in, sign up, verification, wallet setup and funding sources.
   Shared by the theme's consumer app demo page and the standalone app (apps/app.html). */
.dphone[data-app] .xa-form{margin-top:6px}
.dphone[data-app] .xin{display:block;width:100%;height:48px;border-radius:13px;border:1.5px solid transparent;background:var(--soft);padding:0 14px;font:500 15px var(--font-b);color:var(--ink);outline:0;transition:border-color .2s,background .2s;box-sizing:border-box;margin:0}
.dphone[data-app] .xin:focus{border-color:var(--teal);background:#fff}
.dphone[data-app] .xin::placeholder{color:#94a0b8}
.dphone[data-app] .xin.bad{border-color:#E0527A;background:#FFF5F7}
.dphone[data-app] .dk .xin{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.1)}
.dphone[data-app] .dk .xin:focus{border-color:var(--teal);background:rgba(255,255,255,.13)}
.dphone[data-app] .dk .xin.bad{border-color:#FF8FB0;background:rgba(255,143,176,.1)}
.dphone[data-app] .dk .fld label{color:rgba(226,222,255,.72)}
.dphone[data-app] .ferr{display:block;font:500 11.5px/1.35 var(--font-b);color:#C2335C;margin-top:5px}
.dphone[data-app] .ferr:empty{display:none}
.dphone[data-app] .dk .ferr{color:#FF9DBB}
.dphone[data-app] .xa-link{display:block;margin:10px 0 0 auto;background:none;border:0;padding:0;font:600 13px var(--font-b);color:#0598C2;cursor:pointer}
.dphone[data-app] .dk .xa-link{color:var(--mint)}
.dphone[data-app] .xa-sample{margin:12px auto 0}
.dphone[data-app] .xa-ghost{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);margin-top:10px}
.dphone[data-app] .xa-ghost .ic{width:18px;height:18px}
.dphone[data-app] .xa-alt{text-align:center;font-size:13.5px;margin-top:18px;color:var(--muted)}
.dphone[data-app] .dk .xa-alt{color:rgba(226,222,255,.72)}
.dphone[data-app] .xa-alt button{background:none;border:0;padding:0;font:600 13.5px var(--font-b);color:#0598C2;cursor:pointer}
.dphone[data-app] .dk .xa-alt button{color:var(--mint)}
.dphone[data-app] .xa-fine{text-align:center;font-size:11.5px;color:rgba(226,222,255,.5);margin-top:14px}
.dphone[data-app] .xa-check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:14px;cursor:pointer}
.dphone[data-app] .xa-check input{width:18px;height:18px;flex:none;margin:1px 0 0;accent-color:#04BBE5}
.dphone[data-app] .xa-login .bd{display:flex;flex-direction:column;justify-content:center;padding-top:10px}
.dphone[data-app] .xa-logo{height:26px;width:auto;margin-bottom:26px;align-self:flex-start}
.dphone[data-app] .xa-login .ttl{font-size:28px;color:#fff;margin-bottom:4px}
.dphone[data-app] .xa-login .mut{color:rgba(226,222,255,.68)}

/* verification code */
.dphone[data-app] .otp{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:18px}
.dphone[data-app] .otp .xin{height:54px;padding:0;text-align:center;font:700 22px var(--font-h)}
.dphone[data-app] .otp-sug{display:flex;align-items:center;gap:8px;margin:14px auto 0;border:0;border-radius:999px;background:var(--mint-soft);color:#4602AD;font:500 12.5px var(--font-b);padding:8px 14px;cursor:pointer}
.dphone[data-app] .otp-sug b{letter-spacing:.08em}
.dphone[data-app] .otp-sug .ic{width:16px;height:16px}

/* link bank */
.dphone[data-app] .banks button span em{display:none;font-style:normal;font-weight:500;font-size:10.5px;color:var(--muted)}
.dphone[data-app] .banks button.linked{opacity:.5;cursor:not-allowed}
.dphone[data-app] .banks button.linked span em{display:block}
.dphone[data-app] .acct{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dphone[data-app] .acct button{height:40px;border-radius:11px;border:1.5px solid var(--line);background:#fff;font:600 13.5px var(--font-b);color:var(--ink);cursor:pointer}
.dphone[data-app] .acct button.on{border-color:var(--teal);background:#EBF4FB;color:#4602AD}
.dphone[data-app] .fld .xa-pick{width:100%;cursor:pointer;text-align:left;font-family:var(--font-b)}
.dphone[data-app] .xa-change{font:600 12px var(--font-b);color:#0598C2}
.dphone[data-app] .lst .it.xa-empty{cursor:default;color:var(--muted)}
.dphone[data-app] .sheet .lst .it .ch{color:#04BBE5}
.dphone[data-app] .sheet .abtn.alt{margin-top:12px}

/* step screens: what shows per flow */
.dphone[data-app]:not([data-mode="first"]) [data-only="first"],.dphone[data-app]:not([data-mode="source"]) [data-only="source"]{display:none}
.dphone[data-app][data-mode="first"] [data-s="link"] .apptop .ib{visibility:hidden}

/* scanned QR (step 5) */
.dphone[data-app] .scanbox.sm{width:150px;height:150px;margin-top:4px}
.dphone[data-app] .scanbox.sm .qr{width:118px;height:118px;padding:8px}
.dphone[data-app] .scanbox.sm .br{width:30px;height:30px;border-width:3px}
.dphone[data-app] .scanok{position:absolute;right:-6px;bottom:-6px;width:40px;height:40px;border-radius:50%;background:var(--grad);color:#19013C;display:grid;place-items:center;font-size:20px;box-shadow:0 8px 18px -6px rgba(0,249,253,.7)}
.dphone[data-app] .scanok .ic{stroke-width:3}
.dphone[data-app] .dk .rcpt{background:rgba(255,255,255,.07)}
.dphone[data-app] .dk .rcpt div{border-bottom-color:rgba(255,255,255,.14)}
.dphone[data-app] .dk .mut{color:rgba(226,222,255,.68)}

/* busy buttons */
.dphone[data-app] .abtn.busy{opacity:.85;cursor:progress}
.dphone[data-app] .spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;animation:qxspin .7s linear infinite}
@keyframes qxspin{to{transform:rotate(360deg)}}

/* QR payment flow panel beside the phone */
.flowsteps button{pointer-events:none;transition:opacity .25s,border-color .2s,box-shadow .2s}
.flowsteps button.off{opacity:.38}
[data-flowpanel] [data-flowlabel]{min-height:3em}
[data-flowpanel] .text-link{display:inline-flex}