.login{display:flex;height:100svh;overflow:hidden}.login__left{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--color-background)}.login__right{display:none;border-top-left-radius:50px;border-bottom-left-radius:50px}.login__middle{width:100%;max-width:480px}.login-form{display:flex;flex-direction:column;gap:40px;width:100%}.middle__heading{display:flex;flex-direction:column;gap:12px;text-align:center}.heading{font-family:Recoleta,serif;font-weight:600;font-size:36px;line-height:44px;color:var(--color-primary)}.heading__subtitle{font-size:16px;font-weight:500;line-height:22px;color:var(--color-text-body)}.middle__form{display:flex;flex-direction:column;gap:40px}.form__content{display:flex;flex-direction:column;gap:32px}.input-group{display:flex;flex-direction:column;gap:8px}.input__label{font-size:16px;font-weight:500;line-height:20px;color:var(--color-text-primary)}.password__label{display:flex;align-items:center;justify-content:space-between}.forgot__password{font-size:15px;font-weight:500;color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;transition:opacity var(--transition-fast)}.forgot__password:hover{opacity:.7}.input__wrap{position:relative;display:flex;align-items:center}.input__field{width:100%;padding:14px 16px;font-size:16px;font-weight:500;line-height:20px;color:var(--color-text-primary);background:var(--color-background);border:1.5px solid var(--color-border);border-radius:16px;outline:none;transition:border-color .2s cubic-bezier(.25,.46,.45,.94),box-shadow .2s cubic-bezier(.25,.46,.45,.94);font-family:inherit}.input__field::placeholder{color:#666;font-weight:500}.input__field:focus,.input__field--filled{border-color:#4a7a8a;box-shadow:0 0 0 3px #4a7a8a1f}.input__field--error{border-color:#d93025!important;box-shadow:0 0 0 3px #d930251a!important}.input__eye{position:absolute;right:14px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#666;transition:opacity var(--transition-fast);transform:none}.input__eye:hover{opacity:.6;transform:none}.input__eye{will-change:opacity;transform:translateZ(0)}.input__eye:hover,.input__eye:focus,.input__eye:active{transform:translateZ(0)!important}.input__eye:active{transform:none}#password{padding-right:48px}.input__error{font-size:13px;font-weight:500;line-height:18px;color:#d93025;opacity:0;height:0;overflow:hidden;transform:translateY(-4px);transition:opacity .3s cubic-bezier(.25,.46,.45,.94),transform .3s cubic-bezier(.25,.46,.45,.94),height .3s cubic-bezier(.25,.46,.45,.94);pointer-events:none}.input__error--visible{opacity:1;height:18px;transform:translateY(0)}.form__bottom{display:flex;flex-direction:column;gap:20px}.login__btn{width:100%;height:54px;padding:14px 12px;background:var(--color-primary);color:var(--color-surface);border:none;border-radius:var(--radius-full);font-family:Recoleta,serif;font-weight:700;font-size:24px;line-height:26px;cursor:pointer;transition:background var(--transition-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.login__btn:hover{background:var(--color-primary-dark)}.login__btn:active{transform:scale(.98)}.bottom__account{display:flex;align-items:center;justify-content:center;gap:6px}.bottom__text{font-size:15px;font-weight:500;color:var(--color-text-body)}.account__create{font-size:15px;font-weight:500;color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;transition:opacity var(--transition-fast)}.account__create:hover{opacity:.7}@media(min-width:768px){.heading{font-size:44px;line-height:60px}.heading__subtitle{font-size:18px;line-height:22px}}@media(min-width:1024px){.login{height:100svh;overflow:hidden}.login__left{flex:0 0 50%;padding:60px 80px;overflow-y:auto;align-items:center;justify-content:center}.login__right{display:block;flex:0 0 50%;height:100svh;overflow:hidden;position:sticky;top:0}.login__right-img{width:100%;height:100%;object-fit:cover;display:block}}@media(min-width:1280px){.login__left{padding:60px 100px}}@media(min-width:1580px){.heading{font-size:48px;line-height:66px}}@media(min-width:1024px){.login:has(.login__right:first-child){flex-direction:row}.login:has(.login__right:first-child) .login__right{display:block;flex:0 0 50%;height:100svh;overflow:hidden;position:sticky;top:0}.login:has(.login__right:first-child) .login__left{flex:0 0 50%;overflow-y:auto;padding:60px 80px}}.login--register .login__right{border-radius:0 50px 50px 0}.login__btn:focus{outline:none}.login__btn:focus:not(:focus-visible){background:var(--color-primary)}
