:root{--accent:#0d6efd;--accent-2:#4a9fff;--card:#ffffff;--bg:#f5f9ff}
    html,body{height:100vh;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial}
    html, body {
      background: url(../../assets/images/young-woman-pharmacist-pharmacy.jpg) no-repeat bottom center;
      height: 100vh;
      background-size: cover;
    }

    .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:3rem;position:relative;}
    .login-wrap::after{
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100vh;
      background: linear-gradient(180deg, rgb(255 255 255 / 62%) 0%, rgb(255 255 255 / 32%) 50%, rgb(255 255 255 / 58%) 100%);
      opacity: 0.9;
      background-size: cover;
    }

    .card-login{
      max-width: 980px;
      width: 100%;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(11, 20, 30, 0.08);
      overflow: hidden;
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: row;
    }

    .left-panel {
      background: linear-gradient(135deg, #ffffff, #dbeaff);
      color: #fff;
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .left-panel::after{
      content:'';
      position:absolute;
      bottom:0;
      right:0;
      width:100%;
      height:100%;
      background:url(../../assets/images/man-working-as-pharmacist.jpg) no-repeat center top;
      opacity:0.1;
      background-size:cover;
    }
    img.logo-lg{width:auto;margin:0!important;max-width:fit-content;}

    .right-panel{
      padding:36px 36px 44px;
      background:linear-gradient(180deg, #fff, #fbfbfb);
      flex:1;
    }

    .form-title{font-weight:600;margin-bottom:6px;color:#0d6efd}
    .subtle{color:#6b7280;font-size:14px;margin-bottom:18px}

    .input-group .form-control{height:48px;border-radius:10px}
    .btn-primary{
      background:linear-gradient(90deg,var(--accent),var(--accent-2));
      border:none;
      border-radius:12px;
      height:48px;
      padding:0 18px;
    }

    .form-control:focus{box-shadow:0 4px 18px rgba(13,110,253,0.15);border-color:#0d6efd}
    button#togglePass{background:#f8f9fa!important;border-color:#dee2e6!important;}

    @media (max-width:920px){
      .card-login{border-radius:12px;flex-direction:column}
      .left-panel{display:none}
    }

    .fade-section {
      transition: all 0.5s ease;
    }
    .form-label {
        margin-bottom: .5rem;
        FONT-SIZE: 14px;
    }
    .d-flex.justify-content-between.align-items-center.mb-3 {
        font-size: 14px;
    }