/* otp_style.css — premium OTP screen styling, self-contained */

/* tell the browser we control theming — stops Android/Chrome auto-darkening the light theme */
:root{color-scheme:light dark;}
html[data-theme="light"]{color-scheme:light;}
html[data-theme="dark"]{color-scheme:dark;}

[data-theme="dark"]{--bg:#05080F;--surface:rgba(255,255,255,0.04);--surface-2:rgba(255,255,255,0.07);--border:rgba(255,255,255,0.10);--border-2:rgba(255,255,255,0.18);--text:#F0F4FF;--text-2:#8B96B0;--text-3:#586179;--accent:#3B82F6;--accent-2:#6366F1;--green:#22C55E;--orange:#F59E0B;--red:#EF4444}
[data-theme="light"]{--bg:#F4F7FE;--surface:#FFFFFF;--surface-2:#F0F4FC;--border:rgba(13,21,38,0.08);--border-2:rgba(13,21,38,0.16);--text:#0D1526;--text-2:#4B5878;--text-3:#9BA8BF;--accent:#2563EB;--accent-2:#6366F1;--green:#16A34A;--orange:#D98410;--red:#DC2626}
*{box-sizing:border-box;margin:0;padding:0;font-family:'DM Sans',sans-serif}
body{background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;overflow-x:hidden;transition:background .4s,color .4s;position:relative}
body::before{content:'';position:fixed;top:-160px;right:-120px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.20),transparent 70%);filter:blur(70px);pointer-events:none;animation:floatA 9s ease-in-out infinite}
body::after{content:'';position:fixed;bottom:-160px;left:-120px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.16),transparent 70%);filter:blur(70px);pointer-events:none;animation:floatB 11s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,30px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}
h1,h2{font-family:'Syne',sans-serif;letter-spacing:-0.02em}

.theme-toggle{position:fixed;top:20px;right:20px;width:42px;height:42px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;font-size:15px;z-index:10}
.back-home{position:fixed;top:20px;left:20px;color:var(--text-2);text-decoration:none;font-size:14px;display:flex;align-items:center;gap:8px;z-index:10}
.back-home:hover{color:var(--text)}

.otp-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:40px 32px;backdrop-filter:blur(22px);box-shadow:0 30px 80px rgba(0,0,0,0.35);text-align:center;position:relative;z-index:2;animation:rise .55s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

.otp-logo{width:64px;height:64px;object-fit:contain;margin:0 auto 22px;display:block;animation:logoPop .6s cubic-bezier(.2,.9,.3,1.4)}
@keyframes logoPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

.otp-icon{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,rgba(59,130,246,0.15),rgba(99,102,241,0.08));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--accent);margin:0 auto 22px;position:relative}
.otp-icon::after{content:'';position:absolute;inset:-6px;border-radius:24px;border:1px solid rgba(59,130,246,0.2);animation:iconRing 2.5s ease-in-out infinite}
@keyframes iconRing{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.08);opacity:1}}

.otp-card h1{font-size:26px;font-weight:800;margin-bottom:10px}
.otp-card .sub{font-size:14px;color:var(--text-2);line-height:1.55;margin-bottom:8px}
.otp-card .sub strong{color:var(--text)}
.otp-email{font-size:14px;color:var(--accent);font-weight:600;margin-bottom:26px;word-break:break-all}

.otp-alert{padding:13px 16px;border-radius:13px;margin-bottom:22px;font-size:13px;display:flex;align-items:center;gap:9px;text-align:left}
.otp-alert.ok{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.3);color:var(--green)}
.otp-alert.bad{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);color:#F87171}

/* 6-box OTP input */
.otp-boxes{display:flex;gap:10px;justify-content:center;margin-bottom:26px}
.otp-boxes input{width:48px;height:58px;text-align:center;font-family:'DM Mono',monospace;font-size:26px;font-weight:500;color:var(--text);background:var(--surface-2);border:1.5px solid var(--border);border-radius:14px;outline:none;transition:all .2s;caret-color:var(--accent)}
.otp-boxes input:focus{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface-2));box-shadow:0 0 0 4px rgba(59,130,246,0.12);transform:translateY(-2px)}
.otp-boxes input.filled{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface-2))}
@media(max-width:420px){.otp-boxes input{width:42px;height:52px;font-size:22px}.otp-boxes{gap:7px}}

/* amount preview (transfer) */
.otp-amount{background:linear-gradient(135deg,rgba(59,130,246,0.10),rgba(99,102,241,0.05));border:1px solid var(--border);border-radius:18px;padding:22px;margin-bottom:26px;position:relative;overflow:hidden}
.otp-amount::after{content:'';position:absolute;top:-50%;right:-15%;width:160px;height:160px;background:radial-gradient(circle,rgba(59,130,246,.14),transparent 70%)}
.otp-amount .lab{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;font-weight:600;position:relative}
.otp-amount .amt{font-family:'Syne';font-weight:800;font-size:32px;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative}
.otp-amount .to{font-size:13px;color:var(--text-2);margin-top:4px;position:relative}

.otp-btn{width:100%;padding:16px;border:none;border-radius:999px;font-family:'DM Sans';font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 12px 28px rgba(59,130,246,.3);transition:transform .2s,filter .2s}
.otp-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.otp-btn:active{transform:translateY(0)}

.otp-resend{background:none;border:none;color:var(--accent);cursor:pointer;font-size:13px;font-family:'DM Sans';font-weight:600;margin-top:16px}
.otp-resend:hover{text-decoration:underline}
.otp-back{display:block;color:var(--text-3);font-size:12px;text-decoration:none;margin-top:12px;font-family:'DM Sans'}
.otp-back:hover{color:var(--text-2)}

/* login form fields (login stage) */
.field{margin-bottom:16px;text-align:left}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:7px}
.input-wrap{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:0 14px;transition:border-color .2s}
.input-wrap:focus-within{border-color:var(--accent)}
.input-wrap i:first-child{color:var(--text-3);font-size:14px}
.input-wrap input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:15px;padding:14px 0;font-family:'DM Sans'}
.input-wrap input::placeholder{color:var(--text-3)}
.input-wrap .eye{cursor:pointer;color:var(--text-3)}
.auth-link{color:var(--accent);text-decoration:none}
.auth-switch{font-size:14px;color:var(--text-2);margin-top:20px}
.auth-switch a{color:var(--accent);text-decoration:none;font-weight:600}

/* ===== login + forgot form (shares otp_style.css) ===== */
.auth-wrap{width:100%;max-width:440px;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0 auto}
.auth-card{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:40px 32px;backdrop-filter:blur(22px);box-shadow:0 30px 80px rgba(0,0,0,0.35);text-align:center;animation:rise .55s cubic-bezier(.2,.8,.2,1)}
.auth-logo{width:60px;height:60px;object-fit:contain;margin:0 auto 20px;display:block;animation:logoPop .6s cubic-bezier(.2,.9,.3,1.4)}
.auth-title{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;margin-bottom:8px}
.auth-sub{font-size:14px;color:var(--text-2);margin-bottom:26px;line-height:1.5}
.auth-btn{width:100%;padding:16px;border:none;border-radius:999px;font-family:'DM Sans';font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 12px 28px rgba(59,130,246,.3);transition:transform .2s,filter .2s;margin-top:6px}
.auth-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.auth-alert{padding:13px 16px;border-radius:13px;margin-bottom:20px;font-size:13px;display:flex;align-items:center;gap:9px;text-align:left}
.auth-alert.ok{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.3);color:var(--green)}
.auth-alert.bad{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);color:#F87171}
.back-home{position:fixed;top:20px;left:20px;color:var(--text-2);text-decoration:none;font-size:14px;display:flex;align-items:center;gap:8px;z-index:10;width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--border);justify-content:center}
.back-home:hover{color:var(--text)}

/* ===== mobile fixes: stop theme-toggle overlapping the card, and give top clearance ===== */
@media(max-width:480px){
  .theme-toggle{top:12px;right:12px;width:36px;height:36px;font-size:13px;}
  .back-home{top:12px;left:12px;width:36px;height:36px;font-size:13px;}
  .auth-wrap{min-height:auto;padding-top:64px;padding-bottom:40px;}
  .auth-card,.otp-card{margin-top:8px;}
}