*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Poppins,sans-serif;
background:#0d0d0d;
color:white;
height:100vh;
overflow:hidden;

}

.dashboard{

display:flex;
height:100vh;

}

.sidebar{

    width:280px;
    height:100vh;

    background:#000;
    border-right:1px solid #222;

    display:flex;
    flex-direction:column;

    flex-shrink:0;

    overflow:hidden;

}

.logo{

padding:30px;
text-align:center;

}

.logo img{

width:140px;

}

.sidebar nav{

    display:flex;
    flex-direction:column;

    padding:20px;

    flex:1;

    overflow-y:auto;
    overflow-x:hidden;

}

.sidebar nav::-webkit-scrollbar{

    width:6px;

}

.sidebar nav::-webkit-scrollbar-track{

    background:#000;

}

.sidebar nav::-webkit-scrollbar-thumb{

    background:#FFD54A;

    border-radius:20px;

}

.sidebar nav::-webkit-scrollbar-thumb:hover{

    background:#e5bd35;

}

.sidebar nav a{

display:flex;
align-items:center;
gap:15px;

padding:16px 18px;

margin-bottom:12px;

color:white;

text-decoration:none;

border-radius:12px;

transition:.3s;

font-size:17px;

}

.sidebar nav a:hover{

background:#222;

}

.sidebar nav a.active{

background:#FFD54A;
color:black;
font-weight:600;

}

.content{

flex:1;

display:flex;

flex-direction:column;

overflow:hidden;
min-width:0;
}

.topbar{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 40px;

background:#111;

border-bottom:1px solid #222;

}

.profile img{

width:55px;

height:55px;

border-radius:50%;

border:3px solid gold;

object-fit:cover;

}

.main{

flex:1;

overflow-y:auto;

padding:40px;

}

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

.hero{

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

align-items:center;

margin-bottom:45px;

}

.hero-left h1{

font-size:54px;

font-weight:800;

line-height:1.1;

margin-bottom:20px;

}

.hero-left span{

color:#FFD54A;

}

.hero-left p{

font-size:20px;

color:#bbbbbb;

line-height:1.8;

max-width:700px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

background:#FFD54A;

color:#000;

padding:18px 35px;

border-radius:14px;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

background:#222;

color:white;

padding:18px 35px;

border-radius:14px;

text-decoration:none;

transition:.3s;

}

.btn-secondary:hover{

background:#333;

}

.member-card{

background:#181818;

padding:35px;

border-radius:25px;

text-align:center;

border:1px solid #2d2d2d;

}

.member-photo{

margin-bottom:20px;

}

.member-photo img{

width:120px;

height:120px;

border-radius:50%;

border:5px solid #FFD54A;

object-fit:cover;

}

.member-card h3{

font-size:24px;

margin-bottom:10px;

}

.member-card p{

color:#aaaaaa;

margin-bottom:25px;

}

.streak{

background:#FFD54A;

color:#000;

padding:12px;

border-radius:12px;

font-weight:700;

}

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

.stats{

display:grid;

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

gap:25px;

margin-bottom:50px;

}

.stat-card{

background:#181818;

padding:35px;

border-radius:20px;

text-align:center;

transition:.3s;

border:1px solid #2d2d2d;

}

.stat-card:hover{

transform:translateY(-8px);

border-color:#FFD54A;

}

.stat-card i{

font-size:34px;

color:#FFD54A;

margin-bottom:20px;

}

.stat-card h2{

font-size:36px;

margin-bottom:12px;

}

.stat-card p{

color:#bbbbbb;

}

/*=====================================
        PRACTICE CENTER
======================================*/

.practice-section{

margin-bottom:50px;

}

.practice-card{

background:#181818;

border-radius:25px;

padding:40px;

border:1px solid #2d2d2d;

}

.practice-header{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:30px;

margin-bottom:35px;

}

.section-tag{

display:inline-block;

background:#FFD54A;

color:#000;

padding:8px 18px;

border-radius:30px;

font-size:14px;

font-weight:700;

margin-bottom:18px;

}

.practice-header h2{

font-size:36px;

margin-bottom:15px;

}

.practice-header p{

color:#bdbdbd;

line-height:1.8;

max-width:700px;

}

.practice-button{

background:#FFD54A;

color:#000;

padding:16px 30px;

border-radius:14px;

text-decoration:none;

font-weight:700;

transition:.3s;

white-space:nowrap;

}

.practice-button:hover{

transform:translateY(-3px);

}

.practice-grid{

display:grid;

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

gap:25px;

margin-bottom:35px;

}

.practice-item{

background:#101010;

padding:25px;

border-radius:18px;

}

.practice-item h4{

color:#FFD54A;

margin-bottom:12px;

}

.practice-item p{

line-height:1.7;

}

.practice-actions{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.download-btn{

background:#252525;

color:white;

padding:15px 30px;

border-radius:12px;

text-decoration:none;

font-weight:600;

}

.complete-btn{

background:#FFD54A;

color:#000;

border:none;

padding:15px 30px;

border-radius:12px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.complete-btn:hover{

transform:translateY(-2px);

}

/*=====================================
        CONTINUE LEARNING
======================================*/

.continue-learning{

margin-bottom:60px;

}

.section-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.section-title h2{

font-size:32px;

}

.section-title a{

color:#FFD54A;

text-decoration:none;

font-weight:600;

}

.lesson-grid{

display:grid;

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

gap:30px;

}

.lesson-card{

background:#181818;

border-radius:20px;

overflow:hidden;

transition:.35s;

border:1px solid #2d2d2d;

}

.lesson-card:hover{

transform:translateY(-8px);

border-color:#FFD54A;

}

.lesson-card img{

width:100%;

height:220px;

object-fit:cover;

}

.lesson-body{

padding:25px;

}

.lesson-body h3{

margin-bottom:12px;

}

.lesson-body p{

color:#bdbdbd;

margin-bottom:20px;

line-height:1.7;

}

.progress{

height:10px;

background:#2d2d2d;

border-radius:50px;

overflow:hidden;

margin-bottom:18px;

}

.progress-fill{

height:100%;

background:#FFD54A;

}

.lesson-footer{

display:flex;

justify-content:space-between;

align-items:center;

}

.lesson-footer span{

color:#999;

font-size:14px;

}

.lesson-footer a{

text-decoration:none;

font-weight:700;

color:#FFD54A;

}

/*=====================================
        LEARNING JOURNEY
======================================*/

.journey{

margin-bottom:60px;

}

.journey-card{

background:#181818;

padding:40px;

border-radius:20px;

border:1px solid #2d2d2d;

}

.journey-item{

margin-bottom:30px;

}

.journey-item:last-child{

margin-bottom:0;

}

.journey-header{

display:flex;

justify-content:space-between;

margin-bottom:12px;

font-weight:600;

}

.journey-bar{

height:14px;

background:#2b2b2b;

border-radius:50px;

overflow:hidden;

}

.journey-fill{

height:100%;

background:linear-gradient(90deg,#FFD54A,#FFEA92);

border-radius:50px;

}

.beginner{

width:80%;

}

.intermediate{

width:42%;

}

.advanced{

width:8%;

}

.ear{

width:63%;

}

.praise{

width:31%;

}

/*=====================================
        MOTIVATION
======================================*/

.motivation{

margin-bottom:60px;

}

.motivation-card{

background:linear-gradient(135deg,#1b1b1b,#101010);

padding:45px;

border-radius:22px;

text-align:center;

border:1px solid #2d2d2d;

}

.quote-icon{

font-size:45px;

color:#FFD54A;

margin-bottom:25px;

}

.motivation-card h2{

margin-bottom:20px;

font-size:34px;

}

.motivation-card p{

font-size:22px;

line-height:1.8;

max-width:900px;

margin:auto;

color:#dddddd;

}

/*=====================================
        LATEST LESSONS
======================================*/

.latest-lessons{

margin-bottom:60px;

}

.latest-grid{

display:grid;

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

gap:30px;

}

.latest-card{

background:#181818;

border-radius:20px;

overflow:hidden;

border:1px solid #2d2d2d;

transition:.35s;

position:relative;

}

.latest-card:hover{

transform:translateY(-8px);

border-color:#FFD54A;

}

.lesson-badge{

position:absolute;

top:18px;

left:18px;

background:#FFD54A;

color:#000;

padding:8px 14px;

border-radius:25px;

font-size:13px;

font-weight:700;

}

.latest-card img{

width:100%;

height:220px;

object-fit:cover;

}

.latest-body{

padding:25px;

}

.latest-body h3{

margin-bottom:12px;

}

.latest-body p{

color:#999;

margin-bottom:20px;

}

.latest-body a{

color:#FFD54A;

text-decoration:none;

font-weight:700;

}

/*=====================================
        QUICK ACTIONS
======================================*/

.quick-actions{

margin-bottom:70px;

}

.action-grid{

display:grid;

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

gap:25px;

}

.action-grid a{

background:#181818;

padding:35px;

border-radius:18px;

text-decoration:none;

text-align:center;

color:white;

transition:.35s;

border:1px solid #2d2d2d;

}

.action-grid a:hover{

background:#FFD54A;

color:#000;

transform:translateY(-6px);

}

.action-grid i{

display:block;

font-size:42px;

margin-bottom:18px;

}

.membership-summary{

display:grid;

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

gap:20px;

margin:30px 0;

}

.summary-card{

background:#fff;

padding:20px;

border-radius:12px;

box-shadow:0 5px 15px rgba(0,0,0,.08);

text-align:center;

}

.summary-card h4{

margin-bottom:10px;

color:#666;

}

.summary-card p{

font-size:22px;

font-weight:bold;

color:#111;

}

.sidebar nav a.unsubscribe-link{
    color:#ff8a8a;
}

.sidebar nav a.unsubscribe-link:hover{
    background:#2a1515;
    color:#ff6b6b;
}
/*==================================================
        MOBILE DASHBOARD
==================================================*/

@media(max-width:768px){

    body{

        height:100svh;

        overflow:hidden;

    }


    /*==============================
            DASHBOARD
    ==============================*/

    .dashboard{

        width:100%;

        height:100svh;

        display:flex;

        flex-direction:column;

        overflow:hidden;

    }


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

    .sidebar{

        width:100%;

        height:auto;

        flex-shrink:0;

        border-right:none;

        border-bottom:1px solid #222;

        overflow:hidden;

    }


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

    .logo{

        padding:12px 20px;

        text-align:center;

    }

    .logo img{

        width:100px;

    }


    /*==============================
            HORIZONTAL MENU
    ==============================*/

    .sidebar nav{

        width:100%;

        display:flex;

        flex-direction:row;

        gap:10px;

        padding:10px 15px 15px;

        overflow-x:auto;

        overflow-y:hidden;

        flex:none;

        white-space:nowrap;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

    }


    .sidebar nav::-webkit-scrollbar{

        display:none;

    }


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

    .sidebar nav a{

        flex:0 0 auto;

        display:flex;

        align-items:center;

        gap:8px;

        padding:12px 16px;

        margin-bottom:0;

        border-radius:10px;

        font-size:14px;

    }


    /*==============================
            MAIN CONTENT
    ==============================*/

    .content{

        width:100%;

        min-width:0;

        flex:1;

        overflow:hidden;

    }


    /*==============================
            TOPBAR
    ==============================*/

    .topbar{

        height:auto;

        min-height:75px;

        padding:15px 20px;

    }


    .topbar h1{

        font-size:22px;

    }


    .topbar p{

        font-size:13px;

    }


    .profile img{

        width:45px;

        height:45px;

    }


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

    .main{

        width:100%;

        padding:25px 18px;

        overflow-y:auto;

        overflow-x:hidden;

    }


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

    .hero{

        display:flex;

        flex-direction:column;

        gap:25px;

        margin-bottom:35px;

        align-items:stretch;

    }


    .hero-left h1{

        font-size:36px;

    }


    .hero-left p{

        font-size:16px;

        line-height:1.7;

    }


    .hero-buttons{

        flex-direction:column;

        gap:12px;

    }


    .btn-primary,
    .btn-secondary{

        width:100%;

        text-align:center;

    }


    .member-card{

        padding:25px;

    }


    /*==============================
            MEMBERSHIP SUMMARY
    ==============================*/

    .membership-summary{

        grid-template-columns:1fr;

        gap:15px;

    }


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

    .stats{

        grid-template-columns:1fr 1fr;

        gap:15px;

    }


    .stat-card{

        padding:25px 15px;

    }


    .stat-card h2{

        font-size:28px;

    }


    /*==============================
            PRACTICE
    ==============================*/

    .practice-card{

        padding:25px;

    }


    .practice-header{

        flex-direction:column;

        gap:20px;

    }


    .practice-button{

        width:100%;

        text-align:center;

    }


    .practice-grid{

        grid-template-columns:1fr;

    }


    .practice-actions{

        flex-direction:column;

    }


    .download-btn,
    .complete-btn{

        width:100%;

        text-align:center;

    }


    /*==============================
            LESSONS
    ==============================*/

    .lesson-grid{

        grid-template-columns:1fr;

    }


    .lesson-card img{

        height:200px;

    }


    /*==============================
            JOURNEY
    ==============================*/

    .journey-card{

        padding:25px;

    }


    /*==============================
            MOTIVATION
    ==============================*/

    .motivation-card{

        padding:30px 20px;

    }


    .motivation-card h2{

        font-size:28px;

    }


    .motivation-card p{

        font-size:18px;

    }


    /*==============================
            LATEST LESSONS
    ==============================*/

    .latest-grid{

        grid-template-columns:1fr;

    }


    /*==============================
            QUICK ACTIONS
    ==============================*/

    .action-grid{

        grid-template-columns:1fr 1fr;

        gap:15px;

    }


    .action-grid a{

        padding:25px 15px;

    }

}