/* ==========================================================
   AUSTIVE LEARNING PORTAL
   PREMIUM MUJI STYLE AUTH CSS

   PART 1
   Layout + Brand + Card + Message
========================================================== */


/* ==========================
   RESET
========================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html,
body{

    width:100%;

    min-height:100%;

        margin:0;

    overflow-x:hidden;

}


body{

    font-family:
    "Noto Sans",
    sans-serif;


    background:#F5F3EE;


    color:#2B2926;


}



/* ==========================
   PAGE
========================== */


.page{

    min-height:100vh;

    padding:30px clamp(20px,5vw,80px);

    display:flex;

    flex-direction:column;

}





/* ==========================
   BRAND
========================== */


.brand{


    display:flex;


    align-items:center;


    gap:18px;


}




.logo{


    width:58px;


    height:58px;


    background:#FFFFFF;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    border:1px solid #E4DED4;


    box-shadow:


    0 10px 25px rgba(0,0,0,.04);


}




.logo img{


    width:38px;


    height:38px;


    object-fit:contain;


}




.brand-name h2{


    font-size:24px;


    letter-spacing:2px;


    font-weight:600;


    color:#2B2926;


}



.brand-name span{


    display:block;


    margin-top:3px;


    color:#81786D;


    font-size:13px;


    letter-spacing:.5px;


}






/* ==========================
   MAIN CONTAINER
========================== */


.container{


    flex:1;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:clamp(40px,10vw,140px);


    padding:20px 0;


}



/* ==========================
   REGISTER CARD
========================== */


.register-card{

    width:100%;

    width:430px;


    background:#FFFFFF;


    border:1px solid #E6E0D6;


    border-radius:14px;


    padding:40px;


    box-shadow:


    0 25px 60px rgba(0,0,0,.05);


}




.heading{


    margin-bottom:30px;


}


/* ==========================
   AUTH ERROR + SUCCESS
========================== */


.auth-error{


    width:100%;


    margin-bottom:24px;


    padding:16px 20px;


    background:#FEF2F2;


    border:1px solid #FECACA;


    border-radius:10px;


    display:flex;


    align-items:center;


    gap:12px;


    font-size:14px;


    font-weight:600;


    color:#B91C1C;


    line-height:1.6;


    animation:errorFade .4s ease;


}


.auth-error::before{


    content:"⚠";


    font-size:18px;


}


.auth-success{


    width:100%;


    margin-bottom:24px;


    padding:16px 20px;


    background:#ECFDF5;


    border:1px solid #A7F3D0;


    border-radius:10px;


    display:flex;


    align-items:center;


    gap:12px;


    font-size:14px;


    font-weight:600;


    color:#065F46;


    line-height:1.6;


    animation:successFade .4s ease;


}


.auth-success::before{


    content:"✓";


    font-size:18px;


}


@keyframes errorFade{


    from{


        opacity:0;


        transform:translateY(-8px);


    }


    to{


        opacity:1;


        transform:translateY(0);


    }


}


@keyframes successFade{


    from{


        opacity:0;


        transform:translateY(-8px);


    }


    to{


        opacity:1;


        transform:translateY(0);


    }


}





    font-size:34px;


    font-weight:500;


    letter-spacing:-.5px;


    margin-bottom:14px;


}




.heading p{


    font-size:14px;


    color:#81786D;


    line-height:1.8;


    font-weight:300;


}






/* ==========================
   RIGHT MESSAGE
========================== */


.message{


    max-width:420px;


}




.vertical-line{


    width:45px;


    height:1px;


    background:#B8AEA2;


    margin-bottom:35px;


}





.message h2{


    font-size:48px;


    line-height:1.25;


    font-weight:400;


    letter-spacing:-1px;


    color:#2B2926;


}





.message p{


    margin-top:25px;


    color:#81786D;


    font-size:16px;


    line-height:1.9;


    font-weight:300;


}




.small-text{


    margin-top:35px;


    font-size:13px;


    color:#8A8178;


    letter-spacing:.5px;


}



.small-text span{


    margin:0 10px;


}

/* ==========================================================
   AUSTIVE LEARNING PORTAL
   PREMIUM MUJI STYLE AUTH CSS

   PART 2
   Form + Input + Button + Interaction
========================================================== */


/* ==========================
   FORM
========================== */


form{

    width:100%;

}



/* ==========================
   FIELD
========================== */


.field{

    margin-bottom:20px;

}




.field label{

    display:block;

    margin-bottom:10px;

    font-size:13px;

    font-weight:500;

    color:#4A453F;

    letter-spacing:.3px;

}



/* ==========================
   INPUT
========================== */


.field input{


    width:100%;


    height:52px;


    padding:0 2px;


    border:none;


    border-bottom:1px solid #D8D1C6;


    background:transparent;


    font-size:15px;


    color:#2B2926;


    outline:none;


    transition:.35s ease;


}





.field input::placeholder{


    color:#B0A79C;


    font-weight:300;


}





.field input:hover{


    border-color:#A89E92;


}





.field input:focus{


    border-color:#2B2926;


}

.password-wrap{

    position:relative;

}

.password-wrap input{

    padding-right:44px;

}

.password-toggle{

    position:absolute;
    right:0;
    top:0;
    width:42px;
    height:52px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#7A7167;
    box-shadow:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:color .2s ease;

}

.password-toggle:hover,
.password-toggle:focus-visible{

    color:#2B2926;
    background:transparent;

}

.password-toggle:focus-visible{

    outline:2px solid rgba(43,41,38,.2);
    outline-offset:2px;
    border-radius:10px;

}

.password-toggle svg{

    width:20px;
    height:20px;

}

.password-toggle .eye-closed{

    display:none;

}

.password-toggle.is-visible .eye-open{

    display:none;

}

.password-toggle.is-visible .eye-closed{

    display:block;

}





/* ==========================
   BUTTON
========================== */


button{


    width:100%;


    height:54px;


    margin-top:18px;


    background:#2B2926;


    color:#FFFFFF;


    border:none;


    border-radius:6px;


    font-size:14px;


    font-weight:500;


    letter-spacing:.5px;


    cursor:pointer;


    transition:.35s ease;


}




button:hover{


    background:#49443E;


    transform:translateY(-2px);


    box-shadow:


    0 12px 30px rgba(0,0,0,.12);


}



button:active{


    transform:scale(.98);


}





/* ==========================
   SIGN IN
========================== */


.signin{


    margin-top:30px;


    text-align:center;


    font-size:13px;


    color:#81786D;


}




.signin a{


    color:#2B2926;


    margin-left:6px;


    text-decoration:none;


    font-weight:500;


    border-bottom:1px solid #2B2926;


    padding-bottom:2px;


    transition:.3s ease;


}




.signin a:hover{


    opacity:.6;


}





/* ==========================
   CARD MICRO ANIMATION
========================== */


.register-card{


    animation:


    cardFade .8s ease;


}





.field{


    animation:


    fieldFade .6s ease both;


}





.field:nth-child(1){


    animation-delay:.1s;


}



.field:nth-child(2){


    animation-delay:.2s;


}



.field:nth-child(3){


    animation-delay:.3s;


}



.field:nth-child(4){


    animation-delay:.4s;


}






@keyframes cardFade{


    from{


        opacity:0;


        transform:


        translateY(20px);


    }



    to{


        opacity:1;


        transform:


        translateY(0);


    }


}





@keyframes fieldFade{


    from{


        opacity:0;


        transform:


        translateY(12px);


    }



    to{


        opacity:1;


        transform:


        translateY(0);


    }


}

/* ==========================================================
   AUSTIVE LEARNING PORTAL
   PREMIUM MUJI STYLE AUTH CSS

   PART 3
   Detail + Responsive + Final Polish
========================================================== */


/* ==========================
   SOFT BACKGROUND DETAIL
========================== */


.page::before{


    content:"";


    position:absolute;


    width:520px;


    height:520px;


    background:#ECE5DA;


    opacity:.35;


    border-radius:50%;


    top:-260px;


    left:-220px;


    z-index:-1;


}




.page::after{


    content:"";


    position:absolute;


    width:420px;


    height:420px;


    background:#E7DED2;


    opacity:.25;


    border-radius:50%;


    bottom:-220px;


    right:-160px;


    z-index:-1;


}





/* ==========================
   LOGO DETAIL
========================== */


.logo{


    transition:.35s ease;


}



.logo:hover{


    transform:


    translateY(-3px);


    box-shadow:


    0 15px 35px rgba(0,0,0,.08);


}





/* ==========================
   RIGHT MESSAGE DETAIL
========================== */


.message{


    animation:


    messageFade 1s ease;


}





.message h2{


    transition:.4s ease;


}



.message:hover h2{


    letter-spacing:-.5px;


}





@keyframes messageFade{


    from{


        opacity:0;


        transform:


        translateX(30px);


    }



    to{


        opacity:1;


        transform:


        translateX(0);


    }


}





/* ==========================
   FOOTER
========================== */


footer{


    text-align:center;


    font-size:12px;


    color:#9A9187;


    padding-top:20px;


    letter-spacing:.3px;


}





/* ==========================
   TABLET
========================== */


@media(max-width:1200px){


    .page{


        padding:40px;


    }




    .container{


        gap:70px;


    }




    .message h2{


        font-size:40px;


    }


}





/* ==========================
   MOBILE
========================== */


@media(max-width:900px){


    .page{


        padding:30px 20px;


    }




    .container{


        flex-direction:column;


        gap:50px;


    }




    .register-card{


        width:100%;


        max-width:430px;


        padding:40px 30px;


    }




    .message{


        text-align:center;


        max-width:360px;


    }




    .vertical-line{


        margin-left:auto;


        margin-right:auto;


    }




    .message h2{


        font-size:34px;


    }


}





@media(max-width:480px){



    .brand{


        gap:12px;


    }




    .logo{


        width:52px;


        height:52px;


    }




    .logo img{


        width:34px;


        height:34px;


    }




    .brand-name h2{


        font-size:21px;


    }




    .register-card{


        padding:35px 24px;


        border-radius:12px;


    }




    .heading h1{


        font-size:28px;


    }




    .field input{


        height:50px;


    }




    button{


        height:52px;


    }


}

@media(max-width:900px){


    .page{

        padding:30px 20px;

    }



    .container{


        flex-direction:column;


        gap:50px;


    }



    .message{


        order:-1;


        text-align:center;


    }



    .message h2{


        font-size:34px;


    }



    .register-card{


        padding:35px 25px;


    }


}

@media(max-width:480px){


    .brand-name h2{

        font-size:20px;

    }


    .register-card{

        padding:30px 20px;

    }


    .heading h1{

        font-size:26px;

    }


}

/* ==========================================
   DESKTOP FULL SCREEN MODE
========================================== */


html,
body{

    width:100%;

    height:100%;

}



body{

    overflow:hidden;

}



.page{


    height:100dvh;


    min-height:100dvh;


    overflow:hidden;


    position:relative;


}




.container{


    flex:1;


    min-height:0;


}





/* ==========================================
   MOBILE MODE
========================================== */


@media(max-width:900px){


    body{

        overflow:auto;

    }



    .page{


        height:auto;


        min-height:100dvh;


        overflow:visible;


    }



    .container{


        flex-direction:column;


    }


}

.forgot{

    text-align:right;

    margin-top:-10px;

    margin-bottom:20px;

}



.forgot a{

    font-size:13px;

    color:#81786D;

    text-decoration:none;

}



.forgot a:hover{

    color:#2B2926;

}