@font-face{font-family:Inter;font-style:normal;font-weight:400;src:url(fonts/0.woff2)format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:gb-icons;src:url(fonts/11.woff2)format("woff2")}
@font-face{font-family:"Red Hat Display";src:url(fonts/1.ttf)format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:"Red Hat Display";src:url(fonts/2.ttf)format("truetype");font-weight:700;font-style:normal}
@font-face{font-family:"Red Hat Display";src:url(fonts/3.ttf)format("truetype");font-weight:400;font-style:italic}
@font-face{font-family:"Red Hat Display";src:url(fonts/4.ttf)format("truetype");font-weight:700;font-style:italic}
@font-face{font-family:"Red Hat Display";src:url(fonts/5.ttf)format("truetype");font-weight:300;font-style:normal}
@font-face{font-family:"Red Hat Display";src:url(fonts/6.ttf)format("truetype");font-weight:300;font-style:italic}
@font-face{font-family:"Red Hat Display";src:url(fonts/7.ttf)format("truetype");font-weight:500;font-style:normal}
@font-face{font-family:"Red Hat Display";src:url(fonts/8.ttf)format("truetype");font-weight:500;font-style:italic}
@font-face{font-family:"Red Hat Display";src:url(fonts/9.ttf)format("truetype");font-weight:600;font-style:normal}
@font-face{font-family:"Red Hat Display";src:url(fonts/10.ttf)format("truetype");font-weight:600;font-style:italic}

*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
:before,:after{--tw-content:""}
html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}
body{margin:0;line-height:inherit;font-family:"Red Hat Display",sans-serif;background:#fafafa;color:#161a23;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:inherit}
button,input{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button{text-transform:none;background-image:none;-webkit-appearance:button;cursor:pointer}
input::-moz-placeholder{opacity:1;color:#9ca3af}
input::placeholder{opacity:1;color:#9ca3af}
:disabled{cursor:not-allowed}
img,svg{display:block;vertical-align:middle}
img{max-width:100%;height:auto}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh;background:#fafafa}

.benefits{flex:0 0 50%;max-width:50%;background:#fafafa}
.benefits-panel{height:100%;display:flex;flex-direction:column;background-color:#0047ba;color:#fff;border:1px solid #0047ba;border-radius:0 48px 48px 0;padding:5rem}
.benefits-panel .brand-logo{margin-bottom:5rem}

.form-panel{flex:1;min-width:0;background:#fafafa;display:flex;flex-direction:column}
.form-inner{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:2rem 2.25rem}
.form-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:3rem}

.mobile-logo{display:none}

.auth-card{width:100%;border-radius:16px;border:1px solid #d5d8dd;background:#fff;box-shadow:0 5px 12px rgba(0,0,0,.10)}
.auth-card--user{padding:3rem}
.auth-card--password{padding:1.75rem 3rem}
.auth-card--margin{margin-left:3.75rem;margin-right:3.75rem}

.register-note{margin-bottom:3rem;text-align:center;font-weight:300;color:#414651;font-size:1rem;line-height:1.75rem}

.footer{display:flex;justify-content:space-between}

/* ---------- Benefits ---------- */
.benefits-title{font-weight:700;font-size:40px;line-height:48px}
.benefits-title .accent{color:#00a7e1}
.benefits-head{margin-bottom:2.5rem}
.benefits-list{display:flex;flex-direction:column;gap:16px;max-width:34em}
.benefit-item{display:flex;align-items:center;gap:16px}
.benefit-item .benefit-icon{padding:.375rem}
.benefit-item .benefit-text{font-weight:500;font-size:1.125rem;line-height:1.75rem}

/* ---------- Cards typography ---------- */
.card-title{font-weight:700;color:#2f343d;font-size:1.875rem;text-align:left}
.card-subtitle{font-weight:300;color:#464a52;text-align:left;font-size:1rem;line-height:1.5rem}
.card-head{margin-bottom:1rem}

.hello-title{font-weight:700;color:#2f343d;font-size:1.875rem;text-align:left}
.hello-title .username{color:#0047ba}

/* ---------- Form controls ---------- */
.field-label{color:#161a23;margin-bottom:10px;display:block;font-size:1rem;line-height:1.5rem;font-weight:500}
.field{position:relative}
.field-input{width:100%;background:#fff;border:1px solid #dfe4ea;border-radius:.375rem;padding:10px .75rem 10px 3rem;font-size:1rem;color:#161a23;outline:2px solid transparent;outline-offset:2px;transition:border-color .15s ease}
.field-input--icon-right{padding-right:3rem}
.field-input:focus{border-color:#0047ba}
.field-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);display:flex;color:#5d6168;font-size:1rem;pointer-events:none}
.field-eye{position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:inline-flex;color:#636469;cursor:pointer;background:none;padding:0}

/* ---------- Checkbox ---------- */
.remember{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;color:#161a23}
.remember input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.checkbox-box{width:1.25rem;height:1.25rem;border:1px solid #dfe4ea;border-radius:.25rem;display:flex;align-items:center;justify-content:center;margin-right:1rem;flex:0 0 auto}
.checkbox-box .checkmark{opacity:0}
.checkbox-box svg{display:block}
.remember input:checked~.checkbox-box{border-color:#0047ba}
.remember input:checked~.checkbox-box .checkmark{opacity:1}

/* ---------- Buttons ---------- */
.btn-primary{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.625rem;padding:.75rem 1.75rem;border-radius:.375rem;font-size:1rem;line-height:1.5rem;font-weight:500;text-align:center;color:#fff;background-color:#0047ba;border:1px solid #0047ba;transition:background-color .15s ease,border-color .15s ease}
.btn-primary:hover{border-color:#2663c4}
.btn-primary:active{background-color:#003a99;border-color:#003a99}
.btn-primary:disabled{background-color:#eaeaeb;border-color:#eaeaeb;color:#5d6168}

.btn-back{display:inline-flex;align-items:center;gap:.625rem;padding:0;border-radius:.375rem;font-size:1rem;line-height:1.5rem;font-weight:600;text-align:left;color:#0047ba;background:transparent}
.btn-back:hover{background-color:#e6edf8}
.back-row{display:flex;align-items:center;padding-bottom:1.5rem}

/* ---------- Helpers ---------- */
.mb-lg{margin-bottom:.625rem}
.mb-2xl{margin-bottom:1rem}
.mb-3xl{margin-bottom:1.25rem}
.mb-4xl{margin-bottom:1.5rem}
.mb-5xl{margin-bottom:1.75rem}

.text-center{text-align:center}
.help-text{font-weight:500;font-size:1rem;line-height:1.75rem}
.link{color:#0047ba;cursor:pointer;font-weight:700}
.recover-link{color:#0047ba;cursor:pointer;font-size:.75rem;line-height:1.25rem}

.security-box{display:flex;justify-content:center;align-items:center;background-color:#fafafa;border-radius:.75rem;padding:1rem;margin-bottom:1.5rem}
.security-avatar{flex:0 0 110px;padding:0;display:flex;align-items:center;justify-content:center}
.spinner{display:block;width:44px;height:44px;border:4px solid #e6edf8;border-top-color:#0047ba;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.security-info{display:flex;flex-direction:column;gap:.5rem;flex:1}
.security-row{display:flex;align-items:center}
.security-row img{border-radius:.5rem;margin-right:.5rem}
.security-text{color:#414651;font-size:1rem}

/* ---------- Icons ---------- */
i[class^="icon-"]:before,i[class*=" icon-"]:before{font-family:gb-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-user-alt:before{content:"\f178"}
.icon-lock-alt:before{content:"\f13f"}
.icon-chevron-left:before{content:"\f626"}
.chevron-icon{color:#0047ba;font-size:24px;line-height:1;width:20px;display:inline-block}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .benefits{display:none}
  .mobile-logo{display:block;margin-bottom:1rem}
  .mobile-logo--password{margin-bottom:2rem}
  .auth-card--margin{margin-left:0;margin-right:0}
  .form-main{margin-top:1.5rem}
}