/*====================================================
                NEBULA AUTH 2026
====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{

    /* Palette */

    --pistachio:#B7D3A8;
    --fern:#4F7942;
    --emerald:#2E7D5B;

    --emerald-dark:#225E45;

    --cream:#F7F6F2;

    --surface:#FFFFFF;

    --bg:#EEF4EA;

    --text:#203126;

    --muted:#6E7E74;

    --border:#D7E5D1;

    --shadow:

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

    --radius:26px;

    --transition:.35s cubic-bezier(.22,.61,.36,1);

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    min-height:100vh;

}

/*====================================================
                BACKGROUND
====================================================*/

.background-blobs{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-1;

}

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.35;

    animation:float 16s ease-in-out infinite;

}

.blob1{

    width:520px;

    height:520px;

    background:var(--pistachio);

    top:-140px;

    left:-120px;

}

.blob2{

    width:460px;

    height:460px;

    background:var(--emerald);

    right:-140px;

    bottom:-120px;

    animation-delay:4s;

}

.blob3{

    width:340px;

    height:340px;

    background:#D8EBCF;

    top:45%;

    left:48%;

    animation-delay:8s;

}

@keyframes float{

0%{

transform:

translateY(0)

translateX(0)

scale(1);

}

25%{

transform:

translateY(-25px)

translateX(20px)

scale(1.05);

}

50%{

transform:

translateY(18px)

translateX(-18px)

scale(.95);

}

75%{

transform:

translateY(-18px)

translateX(30px)

scale(1.04);

}

100%{

transform:

translateY(0)

translateX(0)

scale(1);

}

}

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

.auth-page{

    width:100%;

    max-width:1400px;

    margin:auto;

    min-height:100vh;

    display:grid;

    grid-template-columns:

        1.1fr

        1fr;

    align-items:center;

    gap:70px;

    padding:50px;

}

/*====================================================
                HERO
====================================================*/

.hero{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.hero-logo{

    width:90px;

    margin-bottom:30px;

}

.hero h1{

    font-size:72px;

    font-weight:800;

    letter-spacing:-2px;

    color:var(--emerald);

}

.hero h2{

    margin-top:18px;

    font-size:54px;

    line-height:1.05;

    font-weight:800;

}

.hero p{

    margin-top:28px;

    max-width:520px;

    color:var(--muted);

    font-size:18px;

    line-height:1.8;

}

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

.hero-footer{

    display:flex;

    gap:18px;

    margin-top:50px;

    flex-wrap:wrap;

}

.hero-footer div{

    display:flex;

    align-items:center;

    gap:10px;

    background:

        rgba(255,255,255,.55);

    backdrop-filter:blur(18px);

    padding:

        15px 22px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.4);

    box-shadow:var(--shadow);

    font-weight:600;

    transition:var(--transition);

}

.hero-footer div:hover{

    transform:

        translateY(-5px);

    background:white;

}

.hero-footer i{

    color:var(--emerald);

}

/*====================================================
            AUTH CONTAINER
====================================================*/

.auth-container{

    display:flex;

    justify-content:center;

    align-items:center;

}

.auth-card{

    width:100%;

    max-width:520px;

    background:

        rgba(255,255,255,.65);

    backdrop-filter:blur(28px);

    border:

        1px solid rgba(255,255,255,.5);

    border-radius:34px;

    overflow:hidden;

    box-shadow:

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

}
/*====================================================
                TABS
====================================================*/

.tabs{

    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    padding:8px;

    background:rgba(255,255,255,.55);

    border-bottom:1px solid rgba(0,0,0,.05);

}

.tab{

    position:relative;

    z-index:2;

    height:54px;

    border:none;

    background:transparent;

    border-radius:16px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    color:var(--muted);

    transition:var(--transition);

}

.tab:hover{

    color:var(--emerald);

}

.tab.active{

    color:white;

}

.tab-indicator{

    position:absolute;

    left:8px;

    top:8px;

    width:calc(50% - 8px);

    height:54px;

    border-radius:16px;

    background:linear-gradient(

        135deg,

        var(--emerald),

        var(--fern)

    );

    transition:var(--transition);

    box-shadow:

        0 10px 30px rgba(46,125,91,.35);

}

.auth-card.register-active .tab-indicator{

    transform:translateX(100%);

}

/*====================================================
                FORMS
====================================================*/

.forms-wrapper{

    display:flex;

    width:200%;

    transition:

        transform .45s cubic-bezier(.22,.61,.36,1);

}

.auth-card.register-active .forms-wrapper{

    transform:translateX(-50%);

}

.form-page{

    width:50%;

    padding:42px;

    flex-shrink:0;

}

.form-page h2{

    font-size:34px;

    font-weight:800;

    letter-spacing:-1px;

    margin-bottom:8px;

}

.form-page p{

    color:var(--muted);

    margin-bottom:34px;

    line-height:1.7;

}

/*====================================================
                INPUTS
====================================================*/

.input-group{

    position:relative;

    margin-bottom:22px;

}

.input-group i:first-child{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:var(--fern);

    font-size:17px;

}

.input-group input{

    width:100%;

    height:62px;

    border:none;

    outline:none;

    border-radius:18px;

    background:rgba(255,255,255,.85);

    padding-left:56px;

    padding-right:58px;

    color:var(--text);

    font-size:15px;

    font-weight:500;

    transition:var(--transition);

    border:2px solid transparent;

}

.input-group input::placeholder{

    color:#8EA18E;

}

.input-group input:focus{

    border-color:var(--emerald);

    background:white;

    box-shadow:

        0 0 0 5px rgba(46,125,91,.08);

    transform:translateY(-2px);

}

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

.toggle-password{

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:transparent;

    transition:var(--transition);

}

.toggle-password i{

    color:var(--muted);

    font-size:18px;

}

.toggle-password:hover{

    background:rgba(46,125,91,.08);

}

.toggle-password:hover i{

    color:var(--emerald);

}

/*====================================================
                BUTTONS
====================================================*/

.auth-btn{

    width:100%;

    height:60px;

    border:none;

    cursor:pointer;

    border-radius:18px;

    margin-top:14px;

    color:white;

    font-size:16px;

    font-weight:700;

    background:

        linear-gradient(

            135deg,

            var(--emerald),

            var(--fern)

        );

    transition:var(--transition);

    box-shadow:

        0 18px 35px rgba(46,125,91,.30);

}

.auth-btn:hover{

    transform:

        translateY(-4px);

    box-shadow:

        0 28px 45px rgba(46,125,91,.40);

}

.auth-btn:active{

    transform:scale(.98);

}

.auth-btn:disabled{

    opacity:.7;

    cursor:not-allowed;

}

/*====================================================
            FORGOT PASSWORD
====================================================*/

.forgot-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:-6px;

    margin-bottom:18px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(46,125,91,.08);

    color:var(--emerald);

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:var(--transition);

}

.forgot-link:hover{

    background:var(--emerald);

    color:white;

}

/*====================================================
            USERNAME STATUS
====================================================*/

.field-status{

    min-height:22px;

    margin-top:-10px;

    margin-bottom:18px;

    font-size:13px;

    font-weight:600;

}

.field-status.success{

    color:#22c55e;

}

.field-status.error{

    color:#ef4444;

}

/*====================================================
        PASSWORD STRENGTH
====================================================*/

.password-strength{

    margin-top:-6px;

    margin-bottom:22px;

}

.strength-bar{

    width:0;

    height:6px;

    border-radius:999px;

    background:var(--emerald);

    transition:.35s;

}

.password-strength span{

    display:block;

    margin-top:8px;

    color:var(--muted);

    font-size:13px;

}
/*====================================================
                SLIDER DOTS
====================================================*/

.slider-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:0 0 32px;

}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#C8D8C2;

    cursor:pointer;

    transition:var(--transition);

}

.dot.active{

    width:38px;

    border-radius:999px;

    background:var(--emerald);

}

/*====================================================
                TOAST
====================================================*/

#toastContainer{

    position:fixed;

    top:25px;

    right:25px;

    z-index:99999;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.toast{

    min-width:320px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 20px;

    background:white;

    border-radius:18px;

    box-shadow:

        0 20px 45px rgba(0,0,0,.12);

    animation:toastIn .35s ease;

}

.toast.success{

    border-left:5px solid #22C55E;

}

.toast.error{

    border-left:5px solid #EF4444;

}

.toast i{

    font-size:22px;

}

.toast.success i{

    color:#22C55E;

}

.toast.error i{

    color:#EF4444;

}

.toast.fade-out{

    animation:toastOut .3s forwards;

}

@keyframes toastIn{

from{

opacity:0;

transform:

translateX(50px);

}

to{

opacity:1;

transform:

translateX(0);

}

}

@keyframes toastOut{

to{

opacity:0;

transform:

translateX(50px);

}

}

/*====================================================
                LOADING
====================================================*/

.loading{

    pointer-events:none;

    opacity:.85;

}

.loading span{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.loading span::before{

    content:"";

    width:18px;

    height:18px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.3);

    border-top-color:white;

    animation:spin .8s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

.auth-card{

    animation:cardAppear .7s ease;

}

@keyframes cardAppear{

from{

opacity:0;

transform:

translateY(35px)

scale(.96);

}

to{

opacity:1;

transform:

translateY(0)

scale(1);

}

}

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

.input-group{

    animation:fadeUp .55s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*====================================================
            SCROLLBAR
====================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--emerald);

    border-radius:999px;

}

::-webkit-scrollbar-track{

    background:#E8EFE3;

}

/*====================================================
                SELECTION
====================================================*/

::selection{

    background:var(--emerald);

    color:white;

}

/*====================================================
            RESPONSIVE
====================================================*/

@media(max-width:1100px){

.auth-page{

grid-template-columns:1fr;

padding:30px;

}

.hero{

text-align:center;

align-items:center;

}

.hero h1{

font-size:56px;

}

.hero h2{

font-size:42px;

}

.hero-footer{

justify-content:center;

}

}

@media(max-width:768px){

.auth-page{

padding:20px;

}

.hero{

display:none;

}

.auth-card{

max-width:100%;

border-radius:28px;

}

.form-page{

padding:28px;

}

.form-page h2{

font-size:28px;

}

.input-group input{

height:58px;

font-size:15px;

}

.auth-btn{

height:56px;

}

}

@media(max-width:480px){

.form-page{

padding:22px;

}

.tabs{

padding:6px;

}

.tab{

height:48px;

font-size:14px;

}

.tab-indicator{

height:48px;

left:6px;

top:6px;

width:calc(50% - 6px);

}

.form-page h2{

font-size:24px;

}

.hero{

display:none;

}

.toast{

min-width:unset;

width:calc(100vw - 30px);

}

#toastContainer{

left:15px;

right:15px;

top:15px;

}

}

/*====================================================
            DARK MODE
====================================================*/

body.dark{

--bg:#0F172A;

--surface:#1E293B;

--text:#F8FAFC;

--muted:#CBD5E1;

--border:#334155;

background:#0F172A;

}

body.dark .auth-card{

background:rgba(30,41,59,.75);

border:1px solid rgba(255,255,255,.06);

}

body.dark .input-group input{

background:#162132;

color:white;

}

body.dark .hero-footer div{

background:rgba(30,41,59,.7);

color:white;

}

body.dark .toast{

background:#1E293B;

color:white;

}

/*====================================================
            UTILITIES
====================================================*/

.hidden{

display:none !important;

}

.fade{

animation:fade .3s ease;

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}