/* Start:/local/templates/auth/css/style.css?17847120485605*/
:root{
    --bg: #F5F6F8;
    --surface: #FFFFFF;
    --surface-sunken: #EEF0F3;
    --ink: #12161C;
    --ink-soft: #5B6472;
    --ink-faint: #99A1AD;
    --line: #E3E6EA;
    --accent: #2B5FDB;
    --accent-soft: #EAF0FE;
    --accent-ink: #1B41A8;
    --ok: #178A5E;
    --ok-soft: #E6F5EF;
    --danger: #D6392E;
    --danger-soft: #FCEAE8;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(18,22,28,0.06);
    --shadow-md: 0 8px 24px -8px rgba(18,22,28,0.16);
}

*{
    box-sizing:border-box;
}
html,body{
    height:100%;
}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    display:flex;
    min-height:100vh;
}
::selection{
    background:var(--accent-soft);
    color:var(--accent-ink);
}

/* ============ RIGHT FORM PANEL ============ */
.form-panel{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
}
.form-card{
    width:100%;
    max-width:360px;
}

.form-head{
    margin-bottom:30px;
}
.form-head h1{
    font-family:'Manrope',sans-serif;
    font-size:23px;
    font-weight:800;
    margin:0 0 6px 0;
    letter-spacing:-.01em;
}
.form-head p{
    font-size:13.5px;
    color:var(--ink-soft);
    margin:0;
}

form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:7px;
}
.field label{
    font-size:12.5px;
    font-weight:600;
    color:var(--ink);
}

.input-wrap{
    position:relative;
    display:flex;
    align-items:center;
}
.input-wrap svg.leading-icon{
    position:absolute;
    left:12px;
    width:16px;
    height:16px;
    color:var(--ink-faint);
    pointer-events:none;
}
.input-wrap input{
    width:100%;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:9px;
    padding:11px 13px 11px 38px;
    font-size:14px;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    outline:none;
    transition:border-color .15s, box-shadow .15s;
}
.input-wrap input::placeholder{
    color:var(--ink-faint);
}
.input-wrap input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
}
.input-wrap input.pwd{
    padding-right:40px;
}

.toggle-visibility{
    position:absolute;
    right:6px;
    width:30px;
    height:30px;
    border-radius:7px;
    border:none;
    background:transparent;
    color:var(--ink-faint);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .15s, color .15s;
}
.toggle-visibility:hover{
    background:var(--surface-sunken);
    color:var(--ink);
}
.toggle-visibility svg{
    width:17px;
    height:17px;
}
.toggle-visibility .icon-off{
    display:none;
}
.toggle-visibility.active .icon-on{
    display:none;
}
.toggle-visibility.active .icon-off{
    display:block;
}

.field.error input{
    border-color:var(--danger);
}
.field.error .input-wrap input:focus{
    box-shadow:0 0 0 3px var(--danger-soft);
}
.error-msg{
    font-size:12px;
    color:var(--danger);
    display:none;
    align-items:center;
    gap:5px;
}
.field.error .error-msg{
    display:flex;
}
.error-msg svg{
    width:13px;
    height:13px;
    flex:0 0 auto;
}

.field-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:-2px;
}
.remember{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12.5px;
    color:var(--ink-soft);
    cursor:pointer;
    user-select:none;
}
.remember input{
    width:15px;
    height:15px;
    border-radius:4px;
    border:1px solid var(--line);
    accent-color:var(--accent);
    cursor:pointer;
}
.forgot-link{
    font-size:12.5px;
    color:var(--accent);
    text-decoration:none;
    font-weight:500;
}
.forgot-link:hover{
    text-decoration:underline;
}

.btn-submit{
    margin-top:4px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:600;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:9px;
    padding:12px 16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:background .15s, transform .1s;
}
.btn-submit:hover{
    background:var(--accent-ink);
}
.btn-submit:active{
    transform:scale(.98);
}
.btn-submit svg{
    width:15px;
    height:15px;
}
.btn-submit.loading svg.arrow{
    display:none;
}
.btn-submit .spinner{
    display:none;
    width:15px;
    height:15px;
    border:2px solid rgba(255,255,255,0.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin .7s linear infinite;
}
.btn-submit.loading .spinner{
    display:block;
}
@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

.banner{
    display:none;
    align-items:flex-start;
    gap:9px;
    background:var(--danger-soft);
    color:var(--danger);
    border-radius:9px;
    padding:11px 13px;
    font-size:12.5px;
    line-height:1.5;
    margin-bottom: 15px;
}
.banner.show{
    display:flex;
}
.banner svg{
    width:15px;
    height:15px;
    flex:0 0 auto;
    margin-top:1px;
}

.form-foot{
    margin-top:26px;
    text-align:center;
    font-size:12.5px;
    color:var(--ink-faint);
}

select:focus, input:focus, button:focus-visible, a:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

@media (max-width: 880px){
    .form-panel{
        padding:28px 20px;
    }
}

@media (prefers-reduced-motion: reduce){
    *{
        animation:none !important;
        transition:none !important;
    }
}
/* End */
/* /local/templates/auth/css/style.css?17847120485605 */