/* =========================================================
   ENIGMA AUTH — COMPACT PROFESSIONAL LAYOUT
========================================================= */

:root{
    color-scheme:light;

    --auth-bg:#f5f2f2;
    --auth-surface:#ffffff;
    --auth-surface-soft:#f8f4f4;

    --auth-text:#2c2729;
    --auth-text-soft:#6f6669;
    --auth-text-faint:#9b9093;

    --auth-border:#e8dfe1;
    --auth-accent:#8b5d67;
    --auth-accent-dark:#66414a;

    --auth-danger:#ac3e4d;
    --auth-success:#347154;

    --auth-panel-width:520px;
    --auth-radius:30px;

    --auth-shadow:
        0 28px 80px rgba(47,36,40,.10);
}


*,
*::before,
*::after{
    box-sizing:border-box;
}


html,
body{
    width:100%;
    min-width:320px;
    height:100%;
    margin:0;
    overflow:hidden;
}


body{
    color:var(--auth-text);

    background:
        radial-gradient(
            circle at 0 0,
            rgba(204,165,174,.14),
            transparent 30%
        ),
        var(--auth-bg);
}


button,
input{
    font:inherit;
}


.auth-page{
    display:flex;

    width:100%;
    height:100dvh;

    padding:16px;

    align-items:center;
    justify-content:center;

    overflow:hidden;
}


.auth-container{
    display:grid;

    grid-template-columns:
        var(--auth-panel-width)
        minmax(0,1fr);

    width:min(1680px,100%);
    height:calc(100dvh - 32px);
    min-height:650px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.8);
    border-radius:var(--auth-radius);

    background:var(--auth-surface);

    box-shadow:var(--auth-shadow);

    animation:
        authContainerReveal
        .8s
        both
        cubic-bezier(.16,1,.3,1);
}


/* LEFT PANEL */

.auth-panel{
    display:grid;

    grid-template-rows:
        auto
        minmax(0,1fr)
        auto;

    min-width:0;
    height:100%;

    padding:34px 44px 26px;
    gap:14px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fffdfd
        );
}


.auth-top,
.auth-center,
.auth-bottom{
    min-width:0;
}


.auth-center{
    display:flex;
    min-height:0;
    align-items:stretch;
}


.auth-brand{
    display:flex;
    flex-direction:column;
    gap:6px;
}


.auth-logo{
    width:max-content;

    color:var(--auth-text);

    font-size:29px;
    line-height:1;
    font-weight:760;
    letter-spacing:.19em;

    text-decoration:none;
}


.auth-caption{
    color:var(--auth-text-faint);

    font-size:10px;
    line-height:1.2;
    font-weight:650;
    letter-spacing:.18em;
    text-transform:uppercase;
}


.auth-heading{
    display:flex;
    flex-direction:column;
    gap:9px;

    margin-top:22px;
}


.auth-title{
    margin:0;

    color:var(--auth-text);

    font-size:clamp(34px,3vw,42px);
    line-height:1.04;
    font-weight:520;
    letter-spacing:-.035em;
}


.auth-description{
    max-width:400px;
    margin:0;

    color:var(--auth-text-soft);

    font-size:13px;
    line-height:1.55;
}


/* FORMS */

.auth-slider{
    position:relative;

    width:100%;
    height:100%;
    min-height:0;

    overflow:hidden;
}


.forms-wrapper{
    display:flex;

    width:200%;
    height:100%;

    transition:
        transform
        .72s
        cubic-bezier(.23,1,.32,1);

    will-change:transform;
}


.auth-container.register-mode
.forms-wrapper{
    transform:translateX(-50%);
}


.auth-form{
    display:flex;

    width:50%;
    min-width:0;

    height:100%;
    min-height:0;

    flex:0 0 50%;
    flex-direction:column;

    gap:9px;

    overflow-y:auto;
    overscroll-behavior:contain;

    scrollbar-width:thin;
    scrollbar-color:#d7c9cc transparent;
}


.auth-form::-webkit-scrollbar{
    width:5px;
}


.auth-form::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:#d7c9cc;
}


.login-form{
    justify-content:center;
    padding:8px 26px 8px 0;
}


.register-form{
    justify-content:center;
    padding:8px 0 8px 26px;
}


.form-group{
    display:flex;
    flex-direction:column;
    gap:6px;
}


.form-group label{
    color:#82777a;

    font-size:10px;
    line-height:1.2;
    font-weight:760;
    letter-spacing:.08em;
    text-transform:uppercase;
}


.form-group input{
    width:100%;
    height:48px;

    padding:0 16px;

    border:1px solid transparent;
    border-radius:13px;

    color:var(--auth-text);
    background:var(--auth-surface-soft);

    font-size:13px;

    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}


.form-group input::placeholder{
    color:#a49a9d;
}


.form-group input:hover{
    border-color:#eadfe1;
    background:#fffafa;
}


.form-group input:focus{
    outline:none;

    border-color:#c8a8af;
    background:#fff;

    box-shadow:
        0 0 0 4px rgba(139,93,103,.10),
        0 10px 24px rgba(58,42,47,.06);

    transform:translateY(-1px);
}


.auth-privacy-notice{
    margin:1px 0 0;

    color:#8b7e82;

    font-size:9px;
    line-height:1.45;
}


.auth-privacy-notice a,
.auth-consent a{
    color:#76515a;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:2px;
}


.auth-consent{
    display:grid;

    grid-template-columns:
        17px
        minmax(0,1fr);

    gap:9px;
    align-items:start;

    margin:0;

    color:#675d60;

    font-size:9px;
    line-height:1.42;

    cursor:pointer;
}


.auth-consent input[type="checkbox"]{
    width:17px;
    height:17px;
    min-width:17px;

    margin:1px 0 0;

    accent-color:var(--auth-accent);
    cursor:pointer;
}


.auth-consent > span{
    display:block;
    min-width:0;
}


.auth-consent small{
    display:block;

    margin-top:2px;

    color:#a2989b;

    font-size:8px;
    line-height:1.35;
}


.auth-form-status{
    min-height:14px;
    margin:0;

    font-size:9px;
    line-height:1.4;
}


.auth-form-status.error{
    color:var(--auth-danger);
}


.auth-form-status.success{
    color:var(--auth-success);
}


.auth-button{
    width:100%;
    height:50px;
    min-height:50px;

    margin-top:1px;
    padding:0 18px;

    border:1px solid #352e30;
    border-radius:13px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #443b3e,
            #2e282a
        );

    font-size:12px;
    font-weight:720;

    cursor:pointer;

    box-shadow:
        0 12px 26px rgba(47,37,40,.15);

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        opacity .18s ease;
}


.auth-button:hover{
    border-color:var(--auth-accent-dark);

    background:
        linear-gradient(
            135deg,
            #8b5d67,
            #624049
        );

    box-shadow:
        0 15px 30px rgba(105,65,75,.22);

    transform:translateY(-1px);
}


.auth-button:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}


/* TOGGLE */

.auth-bottom{
    padding-top:2px;
}


.auth-toggle{
    position:relative;

    display:flex;

    width:100%;
    height:54px;

    align-items:center;
    overflow:hidden;

    border:1px solid var(--auth-border);
    border-radius:15px;

    background:#f7f3f3;
}


.toggle-pill{
    position:absolute;

    top:5px;
    left:5px;

    width:calc(50% - 5px);
    height:42px;

    border-radius:11px;

    background:#332d2f;

    box-shadow:
        0 9px 20px rgba(47,36,40,.16);

    transition:
        transform
        .58s
        cubic-bezier(.34,1.4,.64,1);
}


.auth-container.register-mode
.toggle-pill{
    transform:translateX(calc(100% + 5px));
}


.toggle-option{
    position:relative;
    z-index:2;

    width:50%;
    height:100%;

    padding:0;
    border:0;

    color:#776c70;
    background:transparent;

    font-size:11px;
    font-weight:720;

    cursor:pointer;

    transition:color .25s ease;
}


.toggle-option.active{
    color:#fff;
}


/* PREVIEW */

.auth-preview{
    position:relative;

    display:flex;

    min-width:0;
    height:100%;

    padding:50px;

    align-items:flex-end;
    overflow:hidden;

    background:#ded7d7;
}


.auth-preview-slider,
.login-slide,
.register-slide,
.auth-preview-overlay{
    position:absolute;
    inset:0;
}


.login-slide,
.register-slide{
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;

    opacity:0;
    filter:brightness(.96);
    transform:scale(1.025);

    transition:
        opacity .9s cubic-bezier(.22,.61,.36,1),
        transform 1.4s cubic-bezier(.22,.61,.36,1),
        filter .9s cubic-bezier(.22,.61,.36,1);
}


.login-slide{
    opacity:1;
    transform:scale(1);

    background-image:
        url("../images/auth/login-interior.jpg");
}


.register-slide{
    background-image:
        url("../images/auth/register-interior.jpg");
}


.auth-container.register-mode
.login-slide{
    opacity:0;
    transform:scale(1.02);
}


.auth-container.register-mode
.register-slide{
    opacity:1;
    transform:scale(1);
}


.auth-preview-overlay{
    background:
        linear-gradient(
            to top,
            rgba(20,15,17,.62),
            rgba(20,15,17,.14) 55%,
            rgba(20,15,17,.02)
        );
}


.auth-preview-card{
    position:relative;
    z-index:2;

    max-width:470px;

    color:#fff;

    transition:
        opacity .4s ease,
        transform .52s cubic-bezier(.22,.61,.36,1);
}


.preview-label{
    display:block;

    margin-bottom:12px;

    font-size:9px;
    font-weight:650;
    letter-spacing:.17em;
    text-transform:uppercase;

    opacity:.78;
}


.preview-title{
    margin:0 0 13px;

    font-size:clamp(36px,4vw,52px);
    line-height:1;
    font-weight:520;
    letter-spacing:-.035em;
}


.preview-text{
    max-width:430px;
    margin:0;

    font-size:13px;
    line-height:1.65;

    opacity:.9;
}


/* TRANSITIONS */

.auth-title,
.auth-description{
    transition:
        opacity .38s ease,
        transform .46s cubic-bezier(.22,.61,.36,1);
}


.auth-title.hidden,
.auth-description.hidden,
.auth-preview-card.hidden{
    opacity:0;
    transform:translateX(14px);
}


@keyframes authContainerReveal{
    from{
        opacity:0;
        transform:scale(.992);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}


/* SHORT SCREENS */

@media(max-height:820px) and (min-width:981px){

    .auth-page{
        padding:10px;
    }

    .auth-container{
        height:calc(100dvh - 20px);
        min-height:620px;
    }

    .auth-panel{
        padding:24px 38px 20px;
        gap:10px;
    }

    .auth-heading{
        margin-top:15px;
    }

    .auth-title{
        font-size:32px;
    }

    .auth-description{
        font-size:11px;
        line-height:1.45;
    }

    .form-group input{
        height:44px;
    }

    .auth-form{
        gap:7px;
    }

    .auth-consent,
    .auth-privacy-notice{
        font-size:8px;
    }

    .auth-button{
        height:45px;
        min-height:45px;
    }

    .auth-toggle{
        height:48px;
    }

    .toggle-pill{
        height:38px;
    }

    .auth-preview{
        padding:38px;
    }
}


/* TABLET AND MOBILE */

@media(max-width:980px){

    html,
    body{
        overflow:auto;
    }

    .auth-page{
        min-height:100dvh;
        height:auto;

        padding:12px;

        overflow:visible;
    }

    .auth-container{
        display:block;

        width:min(620px,100%);
        height:auto;
        min-height:calc(100dvh - 24px);

        overflow:visible;
    }

    .auth-panel{
        min-height:calc(100dvh - 24px);

        padding:28px 30px 22px;
    }

    .auth-preview{
        display:none;
    }

    .auth-center{
        min-height:460px;
    }
}


@media(max-width:560px){

    .auth-page{
        padding:0;
    }

    .auth-container{
        width:100%;
        min-height:100dvh;

        border:0;
        border-radius:0;

        box-shadow:none;
    }

    .auth-panel{
        min-height:100dvh;

        padding:25px 20px 18px;
    }

    .auth-title{
        font-size:31px;
    }

    .auth-center{
        min-height:490px;
    }

    .login-form{
        padding-right:15px;
    }

    .register-form{
        padding-left:15px;
    }
}


@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}