/* The original Armaghan Mehr login card, with Foundation's OTP forms. */
body.armaghan-auth {
    --primary: #269ec0;
    --bg1: #6bffb3;
    --bg2: #3c9ddb;
    background: linear-gradient(45deg, var(--bg1), var(--bg2));
    padding: 24px;
}
.armaghan-auth .card { max-width: 500px; background: rgba(255,255,255,.95); border: 0; box-shadow: 0 15px 35px rgba(0,0,0,.2); }
.armaghan-auth .header { background: transparent; color: #253b44; padding: 30px 30px 10px; }
.armaghan-auth .body { padding: 20px 40px 35px; }
.armaghan-auth .auth-brand { display: block; margin: 0 auto 20px; width: fit-content; }
.armaghan-auth .auth-brand img { display: block; width: 90px; height: 90px; object-fit: contain; border-radius: 14px; }
.armaghan-auth .btn { background: linear-gradient(45deg,#24ba92,#269ec0); font-size: 16px; transition: .2s; }
.armaghan-auth .btn:hover { transform: translateY(-2px); }
.armaghan-auth .tab.active { color: #269ec0; box-shadow: inset 0 -3px #269ec0; }
.armaghan-auth .input:focus, .armaghan-auth .otp-input:focus { box-shadow: 0 0 0 4px rgba(38,158,192,.15); }
@media (max-width: 480px) {
    body.armaghan-auth { padding: 20px; }
    .armaghan-auth .body { padding: 20px; }
    .armaghan-auth .header { padding: 25px 20px 10px; }
    .armaghan-auth .otp { gap: 5px; }
    .armaghan-auth .otp-input { height: 48px; font-size: 21px; }
}