:root{
    --auth-ink:#24324a;
    --auth-muted:#69758b;
    --auth-primary:#7357d9;
    --auth-primary-dark:#5d43c2;
    --auth-blue:#4f8de8;
    --auth-pink:#ee6f9d;
    --auth-orange:#f4a340;
    --auth-green:#38aa80;
    --auth-card:#ffffff;
    --auth-line:#e7e9f2;
    --auth-soft:#f8f7fc;
    --auth-danger:#bd3658;
}

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
    background:#f6f4fb;
}

body.auth-page{
    min-height:100vh;
    margin:0;
    color:var(--auth-ink);
    background:
        radial-gradient(circle at 7% 8%, rgba(238,111,157,.20), transparent 25%),
        radial-gradient(circle at 91% 14%, rgba(79,141,232,.20), transparent 29%),
        radial-gradient(circle at 80% 92%, rgba(56,170,128,.15), transparent 27%),
        linear-gradient(145deg,#fff9fc 0%,#f4f7ff 52%,#f8fffbc9 100%);
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    overflow-x:hidden;
}

body.auth-page::before,
body.auth-page::after{
    content:"";
    position:fixed;
    width:220px;
    height:220px;
    border-radius:52% 48% 62% 38%;
    z-index:0;
    pointer-events:none;
    opacity:.55;
    filter:blur(1px);
}

body.auth-page::before{
    top:-80px;
    left:-70px;
    background:linear-gradient(135deg,rgba(244,163,64,.32),rgba(238,111,157,.18));
    transform:rotate(25deg);
}

body.auth-page::after{
    right:-105px;
    bottom:-90px;
    background:linear-gradient(135deg,rgba(79,141,232,.30),rgba(115,87,217,.16));
    transform:rotate(-18deg);
}

.auth-layout{
    position:relative;
    z-index:1;
    width:min(1180px,calc(100% - 40px));
    min-height:calc(100vh - 40px);
    margin:20px auto;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(410px,.92fr);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.84);
    border-radius:32px;
    background:rgba(255,255,255,.72);
    box-shadow:0 22px 70px rgba(78,72,122,.16);
    backdrop-filter:blur(16px);
}

.auth-visual{
    position:relative;
    isolation:isolate;
    min-height:680px;
    padding:54px clamp(36px,5vw,72px);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 82% 22%,rgba(255,255,255,.22),transparent 20%),
        radial-gradient(circle at 12% 85%,rgba(255,255,255,.13),transparent 27%),
        linear-gradient(145deg,#7255d5 0%,#5b7fdc 48%,#47a2d2 100%);
}

.auth-visual::before{
    content:"";
    position:absolute;
    inset:auto -70px -90px auto;
    width:330px;
    height:330px;
    border:55px solid rgba(255,255,255,.09);
    border-radius:50%;
    z-index:-1;
}

.auth-visual::after{
    content:"";
    position:absolute;
    top:23%;
    right:-70px;
    width:170px;
    height:170px;
    border-radius:42% 58% 53% 47%;
    background:rgba(255,255,255,.10);
    transform:rotate(30deg);
    z-index:-1;
}

.auth-brand{
    display:inline-flex;
    align-items:center;
    gap:13px;
    width:max-content;
    color:#fff;
    text-decoration:none;
}

.auth-brand__mark{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:#6a50c9;
    background:#fff;
    box-shadow:0 12px 28px rgba(24,31,72,.17);
    font-size:23px;
}

.auth-brand__copy strong{
    display:block;
    font-size:21px;
    letter-spacing:-.02em;
}

.auth-brand__copy span{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.76);
    font-size:12px;
    font-weight:600;
}

.auth-message{
    max-width:570px;
    padding:50px 0 34px;
}

.auth-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:999px;
    background:rgba(255,255,255,.13);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.auth-message h1{
    margin:20px 0 16px;
    color:#fff;
    font-size:clamp(38px,5vw,64px);
    line-height:1.03;
    letter-spacing:-.055em;
}

.auth-message p{
    max-width:500px;
    margin:0;
    color:rgba(255,255,255,.84);
    font-size:17px;
    line-height:1.72;
}

.auth-benefits{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.auth-benefit{
    min-height:125px;
    padding:18px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:20px;
    background:rgba(255,255,255,.11);
    backdrop-filter:blur(8px);
}

.auth-benefit i{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    margin-bottom:13px;
    border-radius:12px;
    color:#644cc5;
    background:#fff;
    font-size:15px;
}

.auth-benefit strong{
    display:block;
    margin-bottom:5px;
    color:#fff;
    font-size:14px;
}

.auth-benefit span{
    color:rgba(255,255,255,.71);
    font-size:12px;
    line-height:1.45;
}

.auth-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:54px clamp(28px,5vw,72px);
    background:rgba(255,255,255,.90);
}

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

.auth-card__mobile-brand{
    display:none;
}

.auth-card__header{
    margin-bottom:30px;
}

.auth-card__header .auth-kicker{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:12px;
    color:var(--auth-primary);
    font-size:13px;
    font-weight:800;
}

.auth-card__header h2{
    margin:0 0 10px;
    color:var(--auth-ink);
    font-size:34px;
    line-height:1.15;
    letter-spacing:-.04em;
}

.auth-card__header p{
    margin:0;
    color:var(--auth-muted);
    font-size:14px;
    line-height:1.65;
}

.auth-alert{
    min-height:0;
    margin:0 0 16px;
    color:var(--auth-danger);
    font-size:13px;
    font-weight:800;
    text-align:left;
}

.auth-alert:empty{
    display:none;
}

.auth-form{
    display:grid;
    gap:17px;
}

.auth-field{
    display:grid;
    gap:7px;
}

.auth-field label{
    color:#39455d;
    font-size:13px;
    font-weight:800;
}

.auth-input-wrap{
    position:relative;
}

.auth-input-wrap > i{
    position:absolute;
    top:50%;
    left:17px;
    transform:translateY(-50%);
    color:#9a92b8;
    font-size:15px;
    pointer-events:none;
}

.auth-field input{
    width:100%;
    height:54px;
    padding:0 17px 0 48px;
    border:1px solid var(--auth-line);
    border-radius:15px;
    outline:0;
    color:var(--auth-ink);
    background:#fbfbfe;
    font:inherit;
    font-size:14px;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.auth-field input::placeholder{
    color:#a8adba;
}

.auth-field input:hover{
    border-color:#d7d2e9;
    background:#fff;
}

.auth-field input:focus{
    border-color:rgba(115,87,217,.65);
    background:#fff;
    box-shadow:0 0 0 4px rgba(115,87,217,.11);
}

.auth-submit{
    width:100%;
    min-height:54px;
    margin-top:3px;
    border:0;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#fff;
    background:linear-gradient(135deg,var(--auth-primary),#577bd8);
    box-shadow:0 12px 24px rgba(105,80,204,.22);
    font:inherit;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}

.auth-submit:hover{
    transform:translateY(-2px);
    filter:saturate(1.08);
    box-shadow:0 16px 30px rgba(105,80,204,.28);
}

.auth-submit:active{
    transform:translateY(0);
}

.auth-secondary-row{
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid var(--auth-line);
    color:var(--auth-muted);
    font-size:13px;
    text-align:center;
}

.auth-secondary-row a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-left:5px;
    color:var(--auth-primary);
    font-weight:900;
    text-decoration:none;
}

.auth-secondary-row a:hover{
    text-decoration:underline;
}

.auth-help{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:18px;
    padding:13px 15px;
    border-radius:14px;
    color:#627085;
    background:#f7f8fc;
    font-size:12px;
    line-height:1.45;
}

.auth-help i{
    color:var(--auth-green);
}

@media (max-width:900px){
    .auth-layout{
        grid-template-columns:1fr;
        min-height:auto;
        margin:14px auto;
        width:min(600px,calc(100% - 24px));
        border-radius:26px;
    }

    .auth-visual{
        display:none;
    }

    .auth-panel{
        min-height:calc(100vh - 28px);
        padding:34px 24px;
    }

    .auth-card__mobile-brand{
        display:flex;
        align-items:center;
        gap:11px;
        margin-bottom:34px;
        color:var(--auth-ink);
    }

    .auth-card__mobile-brand .auth-brand__mark{
        color:#fff;
        background:linear-gradient(135deg,var(--auth-primary),var(--auth-blue));
    }

    .auth-card__mobile-brand .auth-brand__copy span{
        color:var(--auth-muted);
    }
}

@media (max-width:520px){
    .auth-layout{
        width:100%;
        margin:0;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .auth-panel{
        min-height:100vh;
        padding:28px 20px;
    }

    .auth-card__header h2{
        font-size:30px;
    }

    .auth-field input,
    .auth-submit{
        min-height:52px;
    }
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}