/* Approved design: Option 1 "Salesforce Cloud" (design-options/auth/option-1-salesforce-cloud.png). */
@font-face{font-family:SFAvant;src:url('avant-garde-salesforce.woff') format('woff');font-weight:500 800}
*{box-sizing:border-box;margin:0}
body{font-family:'Salesforce Sans',system-ui,-apple-system,'Segoe UI',sans-serif;background:linear-gradient(160deg,#cfe9fb,#eaf5fd);min-height:100vh}
.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.modal{width:410px;max-width:100%;background:#fff;border-radius:16px;border-top:6px solid #0176d3;box-shadow:0 18px 50px rgba(3,45,96,.18);padding:30px 30px 26px;text-align:center}
.logo{width:92px;display:block;margin:0 auto 14px}
.ic{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:6px auto 12px;background:#e5f3fd;color:#0176d3}
.tag{font:700 12px system-ui;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;color:#0176d3}
h1{font:700 23px SFAvant,system-ui;margin-bottom:8px;color:#032d60}
p{font-size:14.5px;line-height:1.5;margin-bottom:18px;color:#4a5b6c}p b{white-space:nowrap}
.body{text-align:left;margin-bottom:18px}.body:empty{display:none}
label{display:block;font-size:12.5px;font-weight:600;margin:10px 0 5px;color:#2e3d4c}
input{width:100%;height:42px;border-radius:8px;padding:0 12px;font:inherit;font-size:14.5px;border:1px solid #c9d3dd;background:#fbfcfd;color:#16212c}
input:focus{outline:none;border-color:#0176d3;box-shadow:0 0 0 3px #cfe6fa}
button{width:100%;height:46px;border:0;border-radius:9px;font:700 15px system-ui;cursor:pointer;background:#0176d3;color:#fff}
button:disabled{opacity:.6;cursor:default}button[hidden]{display:none}
.foot{font-size:12.5px;margin-top:14px;line-height:1.45;color:#4a5b6c}
.foot a{font-weight:600;text-decoration:underline;color:#0176d3;cursor:pointer}
.error{color:#ba0517;font-size:13px;font-weight:600;margin:-6px 0 12px}.error:empty{display:none}
.otp{display:flex;gap:9px;justify-content:center}
.otp input{width:46px;height:56px;padding:0;border-radius:9px;text-align:center;font:700 24px system-ui;border:1.5px solid #c9d3dd;color:#032d60;background:#fff}
.warn{text-align:center;margin-top:12px;font-weight:700;font-size:13.5px;color:#ba0517}
.spin{width:54px;height:54px;border-radius:50%;border:5px solid #0176d3;border-right-color:transparent;margin:8px auto 16px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.note{text-align:center;font-size:13.5px;color:#4a5b6c}
.okline{display:flex;gap:8px;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;padding:11px;border-radius:9px;background:#eef8f1;color:#2e844a}
.s-bad .ic{background:#fdecea;color:#ba0517}.s-bad .tag{color:#ba0517}.s-bad .otp input{border-color:#ea001e;background:#fff5f5;color:#ba0517}.s-bad button{background:#032d60}
.s-ok .ic{background:#e6f6ec;color:#2e844a}.s-ok .tag{color:#2e844a}
@media(max-width:420px){.modal{padding:24px 18px}.otp{gap:6px}.otp input{width:40px;height:50px}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}}