/* ==========================================================
   LEARNOSKILL FREE LOGIN
   PART 1
   Global Styles + Background + Nebula Animation
========================================================== */

:root{

    --bg:#0b0813;

    --bg2:#141021;

    --card:rgba(17,13,29,.82);

    --border:rgba(255,255,255,.08);

    --text:#f5f3ff;

    --muted:#b7aecf;

    --purple:#9f6bff;

    --purple2:#c084fc;

    --purple3:#7c3aed;

    --pink:#e879f9;

    --success:#34d399;

    --danger:#ef4444;

    --radius:24px;

    --shadow:

        0 20px 60px rgba(0,0,0,.45),

        0 0 30px rgba(156,39,176,.18);

}

/* ============================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Space Grotesk",sans-serif;

    background:var(--bg);

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

}

/* Remove ugly blue tap highlight */

*{

    -webkit-tap-highlight-color:transparent;

}

/* Links */

a{

    text-decoration:none;

    color:inherit;

}

/* Buttons */

button{

    border:none;

    outline:none;

    background:none;

    font-family:inherit;

    cursor:pointer;

}

/* Inputs */

input{

    font-family:inherit;

    outline:none;

}

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

.nebula{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-2;

    pointer-events:none;

}

/* Purple Glow 1 */

.nebula-1{

    position:absolute;

    width:620px;

    height:620px;

    left:-180px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(168,85,247,.40),

    transparent 70%);

    filter:blur(80px);

    animation:

    floatOne 18s ease-in-out infinite;

}

/* Purple Glow 2 */

.nebula-2{

    position:absolute;

    width:540px;

    height:540px;

    right:-120px;

    top:180px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(124,58,237,.33),

    transparent 70%);

    filter:blur(100px);

    animation:

    floatTwo 22s ease-in-out infinite;

}

/* Pink Glow */

.nebula-3{

    position:absolute;

    width:450px;

    height:450px;

    bottom:-150px;

    left:35%;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(236,72,153,.18),

    transparent 75%);

    filter:blur(90px);

    animation:

    floatThree 20s ease-in-out infinite;

}

/* Dark Overlay */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(8,6,15,.20),

        rgba(8,6,15,.55)

    );

    z-index:-1;

}

/* ==========================================================
                     ANIMATIONS
========================================================== */

@keyframes floatOne{

    0%{

        transform:

        translate(0,0)

        scale(1);

    }

    50%{

        transform:

        translate(90px,70px)

        scale(1.12);

    }

    100%{

        transform:

        translate(0,0)

        scale(1);

    }

}

@keyframes floatTwo{

    0%{

        transform:

        translate(0,0)

        scale(1);

    }

    50%{

        transform:

        translate(-90px,-50px)

        scale(.92);

    }

    100%{

        transform:

        translate(0,0)

        scale(1);

    }

}

@keyframes floatThree{

    0%{

        transform:

        translateY(0)

        scale(1);

    }

    50%{

        transform:

        translateY(-60px)

        scale(1.08);

    }

    100%{

        transform:

        translateY(0)

        scale(1);

    }

}

/* ==========================================================
   PART 2
   LOGIN WRAPPER + GLASS LOGIN CARD
========================================================== */

/* Center Page */

.login-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px 20px;

}

/* Main Card */

.login-card{

    width:100%;

    max-width:520px;

    padding:42px;

    border-radius:var(--radius);

    background:var(--card);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    position:relative;

    overflow:hidden;

    animation:cardAppear .8s ease;

}

/* Purple Glow */

.login-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(168,85,247,.45),

        transparent 70%

    );

    filter:blur(45px);

}

/* Pink Glow */

.login-card::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    bottom:-90px;

    left:-70px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(236,72,153,.22),

        transparent 70%

    );

    filter:blur(45px);

}

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

.login-logo{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:18px;

}

.login-logo img{

    width:82px;

    height:82px;

    object-fit:cover;

    border-radius:50%;

    border:3px solid rgba(192,132,252,.45);

    box-shadow:

        0 0 18px rgba(168,85,247,.45),

        0 0 38px rgba(168,85,247,.18);

}

/* ==========================================================
                    FREE TIER BADGE
========================================================== */

.tier-badge{

    width:max-content;

    margin:auto;

    margin-bottom:28px;

    padding:8px 18px;

    border-radius:100px;

    background:

    linear-gradient(

        135deg,

        var(--purple),

        var(--purple3)

    );

    color:white;

    font-size:.78rem;

    letter-spacing:1.3px;

    font-weight:700;

    text-transform:uppercase;

    box-shadow:

        0 8px 22px rgba(124,58,237,.35);

}

/* ==========================================================
                    HEADING
========================================================== */

.login-card h1{

    text-align:center;

    font-size:2rem;

    font-weight:700;

    margin-bottom:14px;

    color:var(--text);

}

.login-subtitle{

    text-align:center;

    color:var(--muted);

    font-size:.98rem;

    line-height:1.8;

    margin-bottom:36px;

}

/* ==========================================================
                  ENTRY ANIMATION
========================================================== */

@keyframes cardAppear{

    from{

        opacity:0;

        transform:

        translateY(40px)

        scale(.95);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}

/* ==========================================================
   PART 3
   FORM • INPUTS • PASSWORD TOGGLE • REMEMBER ME
========================================================== */

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

#loginForm{

    display:flex;

    flex-direction:column;

    gap:24px;

}

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

.input-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.input-group label{

    font-size:.95rem;

    font-weight:600;

    color:var(--text);

    padding-left:2px;

}

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

.input-box{

    position:relative;

    display:flex;

    align-items:center;

}

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

.input-box i:first-child{

    position:absolute;

    left:18px;

    font-size:1.15rem;

    color:#b89cff;

    pointer-events:none;

    transition:.30s;

}

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

.input-box input{

    width:100%;

    height:58px;

    padding-left:52px;

    padding-right:56px;

    border-radius:16px;

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

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

    color:#ffffff;

    font-size:1rem;

    font-weight:500;

    transition:.35s;

}

/* Placeholder */

.input-box input::placeholder{

    color:#8b82a6;

}

/* Hover */

.input-box input:hover{

    border-color:rgba(192,132,252,.25);

}

/* Focus */

.input-box input:focus{

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

    border-color:var(--purple2);

    box-shadow:

        0 0 0 4px rgba(168,85,247,.12),

        0 10px 30px rgba(168,85,247,.18);

}

/* Icon Animation */

.input-box:focus-within i:first-child{

    color:#ffffff;

    transform:scale(1.12);

}

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

#togglePassword{

    position:absolute;

    right:8px;

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:transparent;

    transition:.30s;

}

#togglePassword:hover{

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

}

#togglePassword i{

    font-size:1.15rem;

    color:#b89cff;

    transition:.30s;

}

#togglePassword:hover i{

    color:#ffffff;

}

/* ===========================
      REMEMBER ROW
=========================== */

.remember-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:-8px;

}

.remember-row label{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:.92rem;

    color:var(--muted);

    cursor:pointer;

    user-select:none;

}

/* Hide Default Checkbox */

.remember-row input[type="checkbox"]{

    appearance:none;

    -webkit-appearance:none;

    width:20px;

    height:20px;

    border-radius:6px;

    border:2px solid rgba(192,132,252,.45);

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

    cursor:pointer;

    transition:.30s;

    position:relative;

}

/* Checked */

.remember-row input[type="checkbox"]:checked{

    background:linear-gradient(

        135deg,

        var(--purple),

        var(--purple3)

    );

    border-color:transparent;

}

/* Tick */

.remember-row input[type="checkbox"]:checked::after{

    content:"✔";

    position:absolute;

    left:50%;

    top:48%;

    transform:translate(-50%,-50%);

    font-size:12px;

    color:white;

}

/* Hover */

.remember-row input[type="checkbox"]:hover{

    transform:scale(1.08);

}

/* Keyboard Focus */

.remember-row input[type="checkbox"]:focus{

    box-shadow:

    0 0 0 4px rgba(168,85,247,.18);

}

/* ==========================================================
   PART 4
   LOGIN BUTTON • DIVIDER • CREDENTIAL CARD • ERROR BOX
========================================================== */

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

.login-btn{

    width:100%;

    height:58px;

    margin-top:6px;

    border:none;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        var(--purple),
        var(--purple3)
    );

    color:#ffffff;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.5px;

    cursor:pointer;

    transition:.35s ease;

    box-shadow:

        0 15px 35px rgba(124,58,237,.30),

        0 0 25px rgba(168,85,247,.18);

}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 25px 50px rgba(124,58,237,.40),

        0 0 35px rgba(168,85,247,.30);

}

.login-btn:active{

    transform:scale(.98);

}

.login-btn:focus{

    outline:none;

    box-shadow:

        0 0 0 4px rgba(168,85,247,.22),

        0 15px 35px rgba(124,58,237,.35);

}

/* ===========================
         DIVIDER
=========================== */

.divider{

    display:flex;

    align-items:center;

    margin:36px 0 28px;

    color:var(--muted);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.divider::before,

.divider::after{

    content:"";

    flex:1;

    height:1px;

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

}

.divider span{

    padding:0 18px;

}

/* ===========================
    DEFAULT CREDENTIAL CARD
=========================== */

.credential-card{

    padding:24px;

    border-radius:18px;

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

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

    transition:.35s;

}

.credential-card:hover{

    border-color:rgba(192,132,252,.22);

    transform:translateY(-3px);

    box-shadow:

        0 15px 35px rgba(124,58,237,.12);

}

.credential-card h3{

    margin-bottom:18px;

    font-size:1.08rem;

    color:#ffffff;

}

.credential-card ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.credential-card li{

    color:var(--muted);

    line-height:1.7;

    font-size:.95rem;

    padding-left:18px;

    position:relative;

}

.credential-card li::before{

    content:"";

    position:absolute;

    left:0;

    top:11px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--purple2);

    box-shadow:

        0 0 8px var(--purple2);

}

.credential-card strong{

    color:#ffffff;

    font-weight:700;

}

/* ===========================
        ERROR BOX
=========================== */

.error-box{

    margin-top:24px;

    display:none;

    padding:16px 20px;

    border-radius:14px;

    border:1px solid rgba(239,68,68,.28);

    background:rgba(239,68,68,.08);

    color:#ffb4b4;

    font-size:.92rem;

    line-height:1.6;

    animation:errorFade .35s ease;

}

.error-box.show{

    display:block;

}

/* ===========================
      SUCCESS MESSAGE
=========================== */

.success-box{

    margin-top:24px;

    padding:16px 20px;

    border-radius:14px;

    border:1px solid rgba(52,211,153,.25);

    background:rgba(52,211,153,.08);

    color:#9ef2cb;

    font-size:.92rem;

    line-height:1.6;

    animation:errorFade .35s ease;

}

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

.login-btn.loading{

    pointer-events:none;

    opacity:.82;

}

.login-btn.loading::after{

    content:"";

    width:18px;

    height:18px;

    margin-left:10px;

    display:inline-block;

    border:2px solid rgba(255,255,255,.35);

    border-top:2px solid #ffffff;

    border-radius:50%;

    animation:spin .8s linear infinite;

    vertical-align:middle;

}

/* ===========================
        ANIMATIONS
=========================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes errorFade{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   PART 5
   RESPONSIVE • POLISH • SCROLLBAR • SELECTION
========================================================== */

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

::selection{

    background:rgba(168,85,247,.35);

    color:#ffffff;

}

::-moz-selection{

    background:rgba(168,85,247,.35);

    color:#ffffff;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#09070f;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        180deg,

        var(--purple),

        var(--purple3)

    );

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--purple2);

}

/* Firefox */

*{

    scrollbar-width:thin;

    scrollbar-color:var(--purple) #09070f;

}

/* ===========================
      SMOOTH HOVER
=========================== */

.login-card{

    transition:

        transform .35s,

        box-shadow .35s;

}

.login-card:hover{

    transform:translateY(-4px);

    box-shadow:

        0 25px 70px rgba(0,0,0,.55),

        0 0 45px rgba(168,85,247,.18);

}

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

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus{

    -webkit-text-fill-color:#ffffff;

    transition:background-color 5000s ease-in-out 0s;

    -webkit-box-shadow:

    0 0 0px 1000px rgba(255,255,255,.06) inset;

}

/* ===========================
      LOGO ANIMATION
=========================== */

.login-logo img{

    transition:

        transform .35s,

        box-shadow .35s;

}

.login-logo img:hover{

    transform:rotate(6deg) scale(1.06);

}

/* ===========================
      BUTTON RIPPLE FEEL
=========================== */

.login-btn{

    position:relative;

    overflow:hidden;

}

.login-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transition:.8s;

}

.login-btn:hover::before{

    left:130%;

}

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

@media(max-width:768px){

.login-page{

    padding:28px 18px;

}

.login-card{

    padding:32px 24px;

    border-radius:22px;

}

.login-logo img{

    width:72px;

    height:72px;

}

.login-card h1{

    font-size:1.7rem;

}

.login-subtitle{

    font-size:.92rem;

    margin-bottom:30px;

}

.input-box input{

    height:54px;

    font-size:.95rem;

}

.login-btn{

    height:54px;

}

.credential-card{

    padding:20px;

}

}

/* ===========================
      SMALL PHONES
=========================== */

@media(max-width:480px){

.login-page{

    padding:18px 12px;

}

.login-card{

    padding:26px 18px;

}

.login-card h1{

    font-size:1.45rem;

}

.login-subtitle{

    font-size:.88rem;

}

.tier-badge{

    font-size:.72rem;

    padding:7px 15px;

}

.login-logo img{

    width:64px;

    height:64px;

}

.input-group label{

    font-size:.88rem;

}

.input-box input{

    height:50px;

    padding-left:48px;

    padding-right:48px;

}

.input-box i:first-child{

    left:16px;

    font-size:1rem;

}

#togglePassword{

    width:38px;

    height:38px;

}

.login-btn{

    height:50px;

    font-size:.95rem;

}

.credential-card li{

    font-size:.88rem;

}

}

/* ===========================
      LARGE SCREENS
=========================== */

@media(min-width:1400px){

.login-card{

    max-width:560px;

}

}

/* ==========================================================
      END OF LOGIN CSS
========================================================== */