/* ====== Quick modern login style ====== */
    body.page-login{
      min-height:50vh;
      background: linear-gradient(135deg, #f5f7ff 0%, #eef7ff 40%, #f8f8ff 100%);
    }
    .auth-wrap{
      min-height:50vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px 12px;
    }
    .auth-card{
      width:100%;
      max-width:430px;
      background:#fff;
      border-radius:16px;
      box-shadow:0 18px 40px rgba(0,0,0,.10);
      overflow:hidden;
    }
    .auth-head{
      padding:22px 22px 14px;
      background: linear-gradient(135deg, #0303a0 0%, #0000fe 50%, #fcff59 100%);
      color:#fff;
    }
    .auth-head h2
    { 
      margin:0;
      font-weight:700;
      font-size:28px;
      color:#ffffff;
      font-weight:700;
    }
    .auth-head p
    { margin:6px 0 0;
      opacity:.9;
      font-size:16px;
      color:#ffffff;
     }

    .auth-body{ padding:20px 22px 22px; }

    body.page-login .input-group{
      display:flex;
      align-items:stretch;
      gap:0;
      width:100%;
    }

    .input-group .input-group-addon{
      height:46px;
      min-width:44px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-right:0;
      border-radius:12px 0 0 12px;
      border:1px solid #e6e6e6;
      background:#f7f7f7;
    }

    .input-head .input-group-addon{
      height:36px;
      width:44px;
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid #e6e6e6;
      background:#f7f7f7;
      border-radius:12px;
      color:#3a3a3a;
    }

    /* override for the eye button on the right */
    .input-group .toggle-pass{
      border-radius:0 12px 12px 0;  /* right rounded */
      border-left:0;               /* prevent double border between input & addon */
    }
    .form-control{
      height:46px;
      border-radius:0 12px 12px 0;
      border:1px solid #e6e6e6;
      box-shadow: none;
    }
    body.page-login .input-group .form-control{
      flex:1 1 auto;
      min-width:0;
      width:1%;
      border-left:0;
    }
    .form-control:focus{
      border-color:#10cdd7;
      box-shadow:0 0 0 3px rgba(34,197,94,.15);
    }

    .btn-primary-auth,
    #fpVerifyBtn,
    #form-submit {
      height:46px;
      width:100%;
      border-radius:12px;
      border:none;
      font-weight:700;
      background: linear-gradient(135deg, #0303a0 0%, #0000fe 50%, #fcff59 100%);
      color:#fff;
      transition: transform .06s ease, opacity .2s ease;
    }
    .btn-primary-auth:active{ transform: translateY(1px); }
    .btn-primary-auth:hover{ opacity:.95; }

    .auth-links{
      display:flex;
      justify-content:space-between;
      gap:12px;
      margin-top:12px;
      font-size:13px;
    }
    .auth-links a{ text-decoration:none; }

    #msg{
      margin-top:12px;
      padding:10px 12px;
      border-radius:12px;
      display:none;
      font-size:14px;
    }
    #msg.ok{
      display:block;
      background:#ecfdf5;
      border:1px solid #bbf7d0;
      color:#166534;
    }
    #msg.err{
      display:block;
      background:#fef2f2;
      border:1px solid #fecaca;
      color:#991b1b;
    }

    .toggle-pass{
      cursor:pointer;
      user-select:none;
    }

     /* default (your current) */
    .otp-wrap{
      margin-top:14px;
      padding:14px;
      border:1px dashed rgba(0,0,0,.18);
      border-radius:14px;
      background:#fbfdff;
    }
    .otp-title{
      font-weight:800;
      font-size:13px;
      margin-bottom:10px;
      color:#1f2a37;
    }

    /* ====== Forgot password OTP card (special) ====== */
    #otpForgotPass.otp-wrap,
    #otpResetPass.otp-wrap{
      margin-top:14px;
      width:100%; /* match auth-body width */
      max-width:430px; /* align with auth card */
      padding:20px 22px 22px; /* same as .auth-body */
      border:1px dashed rgba(0,0,0,.18);
      border-radius:16px;
      background:#fff;
      box-shadow:0 18px 40px rgba(0,0,0,.10);
      margin-left:auto;
      margin-right:auto;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    #otpForgotPass.otp-wrap{
      flex-direction: column !important;
    }

    #otpForgotPass .otp-title,
    #otpResetPass .otp-title{
      font-size:14px;
      margin-bottom:12px;
      display:flex;
      align-items:center;
      gap:8px;
    }

    #otpForgotPass .otp-title i,
    #otpResetPass .otp-title i{
      width:28px;
      height:28px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:10px;
      background: rgba(0,0,254,.10);
      color:#0000fe;
    }

    /* nicer spacing for the inputs inside this card */
    #otpForgotPass .input-head,
    #otpResetPass .input-head{
      display: grid;
      grid-template-columns: 44px 1fr; /* label | icon box */
      margin-top:10px;
      margin-bottom:6px;
    }

    #otpForgotPass .form-control{
      border-radius:12px;
    }

    /* button inside forgot OTP card */
    #otpForgotPass .submit-btn{
      margin-top:12px;
    }

    .resetPass {
      color: black;
    }

    .label{
      display:block;
      font-size:13px;
      font-weight:700;
      color:#2d2d2d;
      margin:12px 0 6px;
      text-align: start;
    }

    .resendOTP {
      color: #0000fe;
      cursor: pointer;
    }