:root {
     --psy-primary: #6f63ff;
     --psy-primary-dark: #5548e8;
     --psy-bg: #f5f7fb;
 }

 body {
     background: var(--psy-bg);
     min-height: 100vh;
 }

 .login-wrapper {
     min-height: 100vh;
 }

 .login-panel {
     width: 35%;
     background: #fff;
 }

 .register-panel {
     width: 65%;
     background: linear-gradient(135deg, #f8f9ff, #eef1ff);
 }

 .auth-card {
     max-width: 430px;
     width: 100%;
 }

 .register-card {
     max-width: 760px;
     width: 100%;
     border-radius: 24px;
 }

 .btn-psy {
     background: var(--psy-primary);
     border-color: var(--psy-primary);
     color: #fff;
 }

 .btn-psy:hover {
     background: var(--psy-primary-dark);
     border-color: var(--psy-primary-dark);
     color: #fff;
 }

 .form-control:focus {
     border-color: var(--psy-primary);
     box-shadow: 0 0 0 .2rem rgba(111, 99, 255, .15);
 }

 .step-badge {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: var(--psy-primary);
     color: #fff;
     font-weight: 700;
 }

 .code-input {
     letter-spacing: .7rem;
     text-align: center;
     font-size: 1.6rem;
     font-weight: 700;
 }

 @media (max-width: 991px) {
     .login-wrapper {
         flex-direction: column;
     }

     .login-panel,
     .register-panel {
         width: 100%;
         min-height: auto;
     }
 }