*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    background:#f5f7ff;

    font-family:Arial,sans-serif;

}



/* NAVBAR */

.navbar{

    height:70px;

    background:#0b1020;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

}



.logo{

    color:white;

    font-size:26px;

    font-weight:bold;

}



.top-right{

    display:flex;

    align-items:center;

    gap:15px;

}



.streak{

    background:#1f2937;

    color:white;

    padding:8px 16px;

    border-radius:30px;

}



.avatar{

    width:40px;

    height:40px;

    border-radius:50%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

}



/* HERO */

.hero{

    width:90%;

    max-width:1200px;

    margin:40px auto;

    background:white;

    border-radius:20px;

    padding:25px 40px;

    display:flex;

    align-items:center;

    gap:30px;

}



.hero-image{

    width:120px;

    height:120px;

    border-radius:50%;

    background:#eef2ff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:60px;

}



.hero-content h1{

    font-size:32px;

    margin-bottom:10px;

}



.hero-content p{

    color:#64748b;

    font-size:18px;

}

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

.categories{

    width:90%;

    max-width:1200px;

    margin:20px auto;

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}



.category{

    border:none;

    background:white;

    padding:12px 18px;

    border-radius:12px;

    cursor:pointer;

    font-weight:600;

    color:#475569;

    box-shadow:
    0 2px 8px rgba(0,0,0,0.05);

}



.category:hover{

    transform:translateY(-2px);

}



.active{

    background:#4f46e5;

    color:white;

}

/* =========================================
   COURSE HEADER
========================================= */

.course-header{

    width:90%;

    max-width:1200px;

    margin:30px auto 20px;

    display:flex;

    align-items:center;

    gap:15px;

}

.course-header h2{

    font-size:28px;

}

.course-header span{

    background:#e0e7ff;

    color:#4f46e5;

    padding:6px 12px;

    border-radius:20px;

    font-size:14px;

    font-weight:600;

}



/* =========================================
   LEVELS
========================================= */

.levels-grid{

    width:95%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(6,1fr);

    gap:20px;

}



.level-card{

    background:white;

    border-radius:18px;

    padding:20px;

    min-height:145px;

    box-shadow:
    0 3px 10px rgba(0,0,0,0.05);

    cursor:pointer;

}



.level-number{

    width:40px;

    height:40px;

    border-radius:50%;

    background:#4f46e5;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

    margin:auto;

}



.level-letters{

    text-align:center;

    margin-top:18px;

    font-size:20px;

    font-weight:bold;

}



.level-title{

    text-align:center;

    color:#64748b;

    margin-top:10px;

}



.stars{

    text-align:center;

    margin-top:20px;

    font-size:22px;

}



.locked{

    opacity:0.45;

}

/* =========================================
   STATS SECTION
========================================= */

.stats-grid{

    width:95%;

    max-width:1400px;

    margin:30px auto;

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:20px;

}



.stat-card{

    background:white;

    border-radius:18px;

    padding:20px;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:
    0 3px 10px rgba(0,0,0,0.05);

}



.stat-icon{

    font-size:32px;

}


/* =========================================
   LOCK ICON
========================================= */

.lock-icon{

    font-size:24px;

    margin-top:10px;

    opacity:0.8;

}

.level-card:not(.locked) .lock-icon{

    display:none;

}

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

@media (max-width:768px){

    .hero{

        flex-direction:column;

        text-align:center;

        padding:20px;

    }

    .hero-content{

        width:100%;

    }

    .hero h1{

        font-size:36px;

    }

    .hero p{

        font-size:16px;

    }

}

/* =========================================
   MOBILE LEVEL GRID
========================================= */

@media (max-width:768px){

   .levels-grid{
    grid-template-columns:
    repeat(2,1fr);

    gap:15px;
}

}

.level-card{
    position:relative;
}

.lock-icon{

    position:absolute;

    top:10px;

    right:10px;

    font-size:16px;

}

/* =========================================
   MOBILE STATS CARDS
========================================= */

@media (max-width:768px){

   .stats-grid{
    grid-template-columns:
    1fr 1fr;
}

    .level-card{

    padding:15px;

}

}

/* =========================================
   PERFECT BADGE
========================================= */

.perfect-badge{

    margin-top:6px;

    font-size:11px;

    font-weight:700;

    color:#f59e0b;

}

/* =========================================
   PROGRESS BAR
========================================= */

.progress-bar{

    width:100%;

    height:8px;

    background:#e5e7eb;

    border-radius:20px;

    margin-top:8px;

    overflow:hidden;

}

.progress-fill{

    height:100%;

    width:0%;

    background:#4f46e5;

    border-radius:20px;

    transition:0.4s;

}

.score{

    font-size:11px;

    font-weight:600;

    color:#64748b;

    margin-top:4px;

}


/* =========================================
   WORDS KEYBOARD
========================================= */

.words-keyboard{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;

    max-width:900px;
    margin:30px auto;

}

.words-keyboard .key{

    width:55px;
    height:55px;

}

/* =========================================
   LOGIN MODAL
========================================= */

.login-modal{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    background:rgba(15,23,42,0.72);

    backdrop-filter:blur(12px);

    display:flex;

    justify-content:center;

    align-items:center;

    visibility:hidden;

    opacity:0;

    transition:0.3s;

    z-index:999999;

}

/* =========================================
   LOGIN BOX
========================================= */

.login-box{

    width:420px;

    background:white;

    border-radius:28px;

    padding:45px;

    position:relative;

    box-shadow:

    0px 20px 45px rgba(0,0,0,0.18);

    transform:scale(0.85);

}



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

.close-login{

    position:absolute;

    top:18px;

    right:22px;

    width:38px;

    height:38px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    background:#f1f5f9;

    cursor:pointer;

    font-size:20px;

}



/* =========================================
   TITLE
========================================= */

.login-box h1{

    margin-top:0;

    font-size:42px;

    color:#111827;

}



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

.login-box p{

    color:#6b7280;

    line-height:1.7;

    margin-bottom:30px;

}



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

.login-box input{

    width:100%;

    height:58px;

    border:none;

    background:#f8fafc;

    border-radius:14px;

    padding:0 18px;

    font-size:16px;

    margin-bottom:18px;

    box-sizing:border-box;

}



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

.login-box button{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    background:#2563eb;

    color:white;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

}



.login-box button:hover{

    background:#4f46e5;

}



/* =========================================
   GOOGLE LOGIN
========================================= */

.google-login{

    margin-top:18px;

    height:58px;

    border-radius:14px;

    border:1px solid #e5e7eb;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:600;

    cursor:pointer;

  color:inherit;

}

.footer-links a{

    display:block;

    color:#d1d5db;

    text-decoration:none;

    margin:12px 0;

}

.footer-links a:hover{

    color:white;

}

/* =========================================
   NAVBAR LEFT
========================================= */

.navbar-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.logo{

    text-decoration:none;

    color:white;

    font-size:18px;

    font-weight:700;

    display:flex;

    align-items:center;

}

.home-link{

    text-decoration:none;

    color:white;

    font-size:15px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:6px;

    padding:8px 12px;

    border-radius:10px;

    transition:0.3s;

}

.home-link:hover{

    background:rgba(255,255,255,0.15);

}