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

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


:root {

    --primary: #4f46e5;
    --primary-dark: #3730a3;

    --background: #f8fafc;
    --surface: #ffffff;

    --text: #111827;
    --muted: #64748b;

    --border: #e2e8f0;

    --success: #16a34a;

    --shadow:
        0 10px 30px rgba(15, 23, 42, 0.08);

}


/* =========================================
   BODY
========================================= */

body {

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

    background:
        var(--background);

    color:
        var(--text);

    line-height:
        1.6;

    transition:
        background 0.3s,
        color 0.3s;

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input,
select {

    font: inherit;

}


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

.navbar {

    height: 72px;

    background:
        var(--surface);

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

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 6%;

    position:
        sticky;

    top: 0;

    z-index: 100;

}


.logo {

    font-size:
        1.3rem;

    font-weight:
        800;

}


.logo span {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        35px;

    height:
        35px;

    border-radius:
        10px;

    background:
        var(--primary);

    color:
        white;

    margin-right:
        6px;

}


nav {

    display:
        flex;

    gap:
        30px;

}


nav a {

    color:
        var(--muted);

    font-weight:
        600;

}


nav a:hover,
nav a.active {

    color:
        var(--primary);

}


.nav-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.nav-actions button {

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

    background:
        var(--surface);

    width:
        40px;

    height:
        40px;

    border-radius:
        10px;

    cursor:
        pointer;

}


.profile-btn {

    padding:
        9px 15px;

    border-radius:
        9px;

    background:
        #eef2ff;

    color:
        var(--primary);

    font-weight:
        700;

}


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

.hero {

    min-height:
        650px;

    padding:
        80px 7%;

    display:
        grid;

    grid-template-columns:
        1.1fr 0.9fr;

    align-items:
        center;

    gap:
        60px;

}


.badge {

    display:
        inline-block;

    padding:
        7px 14px;

    background:
        #eef2ff;

    color:
        var(--primary);

    border-radius:
        50px;

    font-size:
        0.85rem;

    font-weight:
        700;

    margin-bottom:
        20px;

}


.hero h1 {

    font-size:
        clamp(2.7rem, 6vw, 5rem);

    line-height:
        1.05;

    max-width:
        700px;

    margin-bottom:
        25px;

}


.hero h1 span {

    color:
        var(--primary);

}


.hero-text {

    color:
        var(--muted);

    max-width:
        600px;

    font-size:
        1.1rem;

    margin-bottom:
        30px;

}


.hero-buttons {

    display:
        flex;

    gap:
        15px;

    flex-wrap:
        wrap;

}


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

.btn {

    border:
        none;

    border-radius:
        10px;

    padding:
        12px 20px;

    cursor:
        pointer;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        700;

}


.btn.primary {

    background:
        var(--primary);

    color:
        white;

}


.btn.primary:hover {

    background:
        var(--primary-dark);

}


.btn.secondary {

    background:
        var(--surface);

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

    color:
        var(--text);

}


.btn.full {

    width:
        100%;

}


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

.hero-card {

    min-height:
        430px;

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed
        );

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.learning-illustration {

    font-size:
        9rem;

    filter:
        drop-shadow(
            0 20px 20px rgba(0,0,0,.2)
        );

}


.floating-card {

    position:
        absolute;

    background:
        white;

    padding:
        15px;

    border-radius:
        14px;

    display:
        flex;

    gap:
        10px;

    align-items:
        center;

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

}


.floating-card span {

    font-size:
        1.6rem;

}


.floating-card strong {

    display:
        block;

}


.floating-card small {

    color:
        #64748b;

}


.card-one {

    top:
        55px;

    left:
        -25px;

}


.card-two {

    right:
        -25px;

    bottom:
        55px;

}


/* =========================================
   SECTIONS
========================================= */

.section {

    padding:
        70px 7%;

}


.section-heading {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        30px;

}


.section-label {

    color:
        var(--primary);

    font-size:
        .78rem;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    margin-bottom:
        5px;

}


.section-heading h2 {

    font-size:
        2rem;

}


.view-link {

    color:
        var(--primary);

    font-weight:
        700;

}


/* =========================================
   FEATURES
========================================= */

.features {

    display:
        grid;

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

    gap:
        20px;

}


.feature-card {

    background:
        var(--surface);

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

    padding:
        25px;

    border-radius:
        16px;

    box-shadow:
        var(--shadow);

}


.feature-icon {

    width:
        50px;

    height:
        50px;

    border-radius:
        12px;

    display:
        grid;

    place-items:
        center;

    background:
        #eef2ff;

    font-size:
        1.5rem;

    margin-bottom:
        18px;

}


.feature-card h3 {

    margin-bottom:
        8px;

}


.feature-card p {

    color:
        var(--muted);

}


/* =========================================
   COURSE GRID
========================================= */

.course-grid {

    display:
        grid;

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

    gap:
        25px;

}


/* =========================================
   COURSE CARD
========================================= */

.course-card {

    background:
        var(--surface);

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

    border-radius:
        18px;

    overflow:
        hidden;

    box-shadow:
        var(--shadow);

    transition:
        transform .2s,
        box-shadow .2s;

}


.course-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 40px rgba(15,23,42,.12);

}


.course-image {

    height:
        180px;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #ddd6fe
        );

    display:
        grid;

    place-items:
        center;

    position:
        relative;

}


.course-icon {

    font-size:
        5rem;

}


.favorite-btn {

    position:
        absolute;

    top:
        15px;

    right:
        15px;

    width:
        38px;

    height:
        38px;

    border:
        none;

    border-radius:
        50%;

    background:
        white;

    cursor:
        pointer;

    font-size:
        1.2rem;

}


.course-content {

    padding:
        22px;

}


.course-meta {

    display:
        flex;

    gap:
        8px;

    flex-wrap:
        wrap;

    margin-bottom:
        12px;

}


.course-meta span {

    padding:
        4px 9px;

    border-radius:
        20px;

    background:
        #eef2ff;

    color:
        var(--primary);

    font-size:
        .72rem;

    font-weight:
        700;

}


.course-content h3 {

    font-size:
        1.15rem;

    margin-bottom:
        10px;

}


.course-content p {

    color:
        var(--muted);

    font-size:
        .9rem;

}


.course-info {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    color:
        var(--muted);

    font-size:
        .8rem;

    margin:
        18px 0;

}


.course-info.large {

    font-size:
        .9rem;

}


.course-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-top:
        15px;

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

}


.course-footer strong {

    font-size:
        1.25rem;

}


.small-btn {

    padding:
        8px 13px;

    background:
        var(--primary);

    color:
        white;

    border-radius:
        8px;

    font-size:
        .82rem;

    font-weight:
        700;

}


/* =========================================
   CTA
========================================= */

.cta {

    margin:
        30px 7% 80px;

    padding:
        50px;

    border-radius:
        25px;

    background:
        #111827;

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.cta p:not(.section-label) {

    color:
        #cbd5e1;

}


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

footer {

    background:
        #0f172a;

    color:
        white;

    padding:
        35px 7%;

}


.footer-content {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

}


.footer-content p {

    color:
        #94a3b8;

}


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

.page-header {

    padding:
        80px 7% 40px;

    text-align:
        center;

}


.page-header h1 {

    font-size:
        3rem;

    margin-bottom:
        10px;

}


.page-header p:last-child {

    color:
        var(--muted);

}


/* =========================================
   COURSE CONTROLS
========================================= */

.course-controls {

    padding:
        20px 7%;

    display:
        grid;

    grid-template-columns:
        1fr 200px 200px;

    gap:
        15px;

}


.search-box {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 15px;

    height:
        50px;

    background:
        var(--surface);

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

    border-radius:
        10px;

}


.search-box input {

    width:
        100%;

    border:
        none;

    outline:
        none;

    background:
        transparent;

    color:
        var(--text);

}


.course-controls select {

    height:
        50px;

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

    border-radius:
        10px;

    padding:
        0 12px;

    background:
        var(--surface);

    color:
        var(--text);

}


/* =========================================
   COURSE DETAILS
========================================= */

.course-hero {

    padding:
        70px 7%;

    background:
        #eef2ff;

    display:
        grid;

    grid-template-columns:
        250px 1fr;

    gap:
        50px;

    align-items:
        center;

}


.course-hero-icon {

    width:
        250px;

    height:
        250px;

    display:
        grid;

    place-items:
        center;

    background:
        white;

    border-radius:
        25px;

    font-size:
        8rem;

    box-shadow:
        var(--shadow);

}


.course-hero-content h1 {

    font-size:
        3.2rem;

    line-height:
        1.1;

    margin:
        15px 0;

}


.course-hero-content > p {

    max-width:
        750px;

    color:
        var(--muted);

}


.detail-actions {

    display:
        flex;

    gap:
        12px;

    margin-top:
        25px;

}


/* =========================================
   DETAIL LAYOUT
========================================= */

.course-detail-layout {

    display:
        grid;

    grid-template-columns:
        1fr 330px;

    gap:
        30px;

}


.content-card,
.enroll-card {

    background:
        var(--surface);

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

    border-radius:
        18px;

    padding:
        28px;

    margin-bottom:
        25px;

}


.content-card h2 {

    margin-bottom:
        25px;

}


.topic-grid {

    display:
        grid;

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

    gap:
        12px;

}


.topic {

    padding:
        13px;

    background:
        var(--background);

    border-radius:
        9px;

}


.topic span {

    color:
        var(--success);

    font-weight:
        bold;

    margin-right:
        7px;

}


/* =========================================
   LESSON
========================================= */

.lesson {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        16px 0;

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

}


.lesson-number {

    min-width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #eef2ff;

    color:
        var(--primary);

    font-weight:
        bold;

}


.lesson div {

    flex:
        1;

}


.lesson p {

    color:
        var(--muted);

    font-size:
        .8rem;

}


/* =========================================
   ENROLL CARD
========================================= */

.enroll-card {

    position:
        sticky;

    top:
        100px;

    height:
        fit-content;

}


.enroll-icon {

    font-size:
        4rem;

    margin-bottom:
        15px;

}


.enroll-card p {

    color:
        var(--muted);

}


.price {

    font-size:
        2rem;

    font-weight:
        800;

    margin:
        20px 0;

}


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

.dashboard-stats {

    padding:
        20px 7% 40px;

    display:
        grid;

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

    gap:
        20px;

}


.stat-card {

    background:
        var(--surface);

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

    border-radius:
        16px;

    padding:
        22px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}


.stat-card > span {

    font-size:
        2rem;

}


.stat-card strong {

    font-size:
        1.7rem;

}


.stat-card p {

    color:
        var(--muted);

    font-size:
        .85rem;

}


/* =========================================
   EMPTY STATE
========================================= */

.empty-state {

    text-align:
        center;

    padding:
        60px 20px;

    color:
        var(--muted);

}


.empty-state div {

    font-size:
        3rem;

    margin-bottom:
        10px;

}


.empty-state h3 {

    color:
        var(--text);

    margin-bottom:
        8px;

}


.hidden {

    display:
        none !important;

}


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

#toast {

    position:
        fixed;

    bottom:
        25px;

    right:
        25px;

    background:
        #111827;

    color:
        white;

    padding:
        14px 20px;

    border-radius:
        10px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.2);

    transform:
        translateY(100px);

    opacity:
        0;

    transition:
        .3s;

    z-index:
        999;

}


#toast.show {

    transform:
        translateY(0);

    opacity:
        1;

}


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

body.dark {

    --background:
        #0f172a;

    --surface:
        #1e293b;

    --text:
        #f8fafc;

    --muted:
        #94a3b8;

    --border:
        #334155;

}


body.dark .course-hero {

    background:
        #172554;

}


body.dark .profile-btn,
body.dark .badge,
body.dark .course-meta span {

    background:
        #312e81;

    color:
        #ffffff;

}


body.dark .hero-text {

    color:
        #ffffff;

}


body.dark .floating-card {

    color:
        #111827;

}


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

@media (max-width: 1000px) {

    .features {

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

    }


    .course-grid {

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

    }


    .hero {

        grid-template-columns:
            1fr;

    }


    .hero-card {

        max-width:
            600px;

        width:
            100%;

        margin:
            auto;

    }


    .course-detail-layout {

        grid-template-columns:
            1fr;

    }


    .enroll-card {

        position:
            static;

    }

}


@media (max-width: 700px) {

    .navbar {

        padding:
            0 4%;

    }


    nav {

        display:
            none;

    }


    .profile-btn {

        display:
            none;

    }


    .hero {

        padding:
            60px 5%;

    }


    .hero h1 {

        font-size:
            2.7rem;

    }


    .section {

        padding:
            50px 5%;

    }


    .features,
    .course-grid,
    .dashboard-stats {

        grid-template-columns:
            1fr;

    }


    .course-controls {

        grid-template-columns:
            1fr;

        padding:
            20px 5%;

    }


    .course-hero {

        grid-template-columns:
            1fr;

        padding:
            50px 5%;

    }


    .course-hero-icon {

        width:
            150px;

        height:
            150px;

        font-size:
            5rem;

    }


    .course-hero-content h1 {

        font-size:
            2.3rem;

    }


    .topic-grid {

        grid-template-columns:
            1fr;

    }


    .cta {

        margin:
            20px 5% 50px;

        padding:
            30px;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .footer-content {

        flex-direction:
            column;

    }

}




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

.progress-wrapper {

    margin:
        15px 0;

}


.progress-label {

    display:
        flex;

    justify-content:
        space-between;

    font-size:
        .8rem;

    margin-bottom:
        6px;

}


.progress-bar {

    height:
        7px;

    background:
        #e2e8f0;

    border-radius:
        20px;

    overflow:
        hidden;

}


.progress-bar div {

    height:
        100%;

    background:
        var(--primary);

    border-radius:
        20px;

    transition:
        width .4s;

}


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

.lesson-btn {

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

    background:
        var(--surface);

    color:
        var(--text);

    padding:
        7px 11px;

    border-radius:
        7px;

    cursor:
        pointer;

    font-size:
        .75rem;

    font-weight:
        700;

}


.lesson-btn:hover {

    border-color:
        var(--primary);

}


.lesson-btn.completed {

    background:
        #dcfce7;

    color:
        #15803d;

    border-color:
        #bbf7d0;

}


/* =========================================
   QUIZ CALLOUT
========================================= */

.quiz-callout {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        30px;

}


/* =========================================
   QUIZ
========================================= */

.quiz-container {

    max-width:
        850px;

    margin:
        auto;

}


.quiz-card {

    background:
        var(--surface);

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

    border-radius:
        20px;

    padding:
        35px;

    box-shadow:
        var(--shadow);

}


.quiz-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        25px;

}


.timer {

    padding:
        10px 15px;

    background:
        #eef2ff;

    color:
        var(--primary);

    border-radius:
        10px;

    font-weight:
        800;

}


.quiz-progress {

    height:
        8px;

    background:
        #e2e8f0;

    border-radius:
        20px;

    overflow:
        hidden;

    margin-bottom:
        35px;

}


.quiz-progress div {

    height:
        100%;

    background:
        var(--primary);

    width:
        0;

    transition:
        width .3s;

}


.question-count {

    color:
        var(--primary);

    font-weight:
        700;

    margin-bottom:
        15px;

}


.quiz-card h2 {

    font-size:
        1.6rem;

    margin-bottom:
        25px;

}


.quiz-options {

    display:
        grid;

    gap:
        12px;

}


.quiz-option {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        16px;

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

    background:
        var(--surface);

    color:
        var(--text);

    border-radius:
        12px;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        .2s;

}


.quiz-option:hover {

    border-color:
        var(--primary);

}


.quiz-option span {

    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--background);

    font-weight:
        800;

}


.quiz-option.selected {

    border:
        2px solid var(--primary);

    background:
        #eef2ff;

}


.quiz-actions {

    display:
        flex;

    justify-content:
        flex-end;

    margin-top:
        30px;

}


/* =========================================
   QUIZ RESULT
========================================= */

.quiz-result {

    background:
        var(--surface);

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

    border-radius:
        20px;

    padding:
        60px 30px;

    text-align:
        center;

    box-shadow:
        var(--shadow);

}


.result-icon {

    font-size:
        4rem;

    margin-bottom:
        10px;

}


.quiz-result h1 {

    margin:
        10px 0;

}


.score {

    font-size:
        4rem;

    font-weight:
        900;

    color:
        var(--primary);

    margin:
        20px 0;

}


.result-actions {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;

}


@media (max-width: 700px) {

    .quiz-card {

        padding:
            22px;

    }


    .quiz-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .quiz-callout {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .lesson {

        align-items:
            flex-start;

    }

}


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

.dashboard-welcome {

    padding:
        60px 7% 30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.dashboard-welcome h1 {

    font-size:
        2.6rem;

    line-height:
        1.2;

}


.dashboard-welcome h1 span {

    color:
        var(--primary);

}


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

.dashboard-layout {

    padding:
        20px 7% 50px;

    display:
        grid;

    grid-template-columns:
        1.4fr .8fr;

    gap:
        25px;

}


.chart-container {

    height:
        320px;

    position:
        relative;

}


/* =========================================
   ACHIEVEMENTS
========================================= */

.achievement-list {

    display:
        grid;

    gap:
        15px;

    margin-top:
        20px;

}


.achievement {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        14px;

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

    border-radius:
        12px;

    opacity:
        .45;

}


.achievement.unlocked {

    opacity:
        1;

    background:
        #f0fdf4;

    border-color:
        #bbf7d0;

}


.achievement > span {

    font-size:
        1.7rem;

}


.achievement strong {

    display:
        block;

}


.achievement p {

    color:
        var(--muted);

    font-size:
        .8rem;

}


/* =========================================
   NOTIFICATIONS
========================================= */

.notification-list {

    display:
        grid;

    gap:
        12px;

    margin-top:
        20px;

}


.notification {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        15px;

    padding:
        15px;

    background:
        var(--background);

    border-radius:
        10px;

}


.notification > span {

    font-size:
        1.5rem;

}


.notification strong {

    display:
        block;

}


.notification p {

    color:
        var(--muted);

    font-size:
        .85rem;

}


/* =========================================
   PROFILE
========================================= */

.profile-layout {

    max-width:
        1000px;

    margin:
        30px auto 80px;

    padding:
        0 5%;

    display:
        grid;

    grid-template-columns:
        300px 1fr;

    gap:
        25px;

}


.profile-card {

    background:
        var(--surface);

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

    border-radius:
        18px;

    padding:
        35px;

    text-align:
        center;

    height:
        fit-content;

    box-shadow:
        var(--shadow);

}


.avatar {

    width:
        100px;

    height:
        100px;

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        white;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 20px;

    font-size:
        2.5rem;

    font-weight:
        800;

}


.profile-card > p {

    color:
        var(--muted);

}


.profile-role {

    display:
        inline-block;

    padding:
        4px 12px;

    background:
        #eef2ff;

    color:
        var(--primary);

    border-radius:
        20px;

    font-size:
        .8rem;

    margin-top:
        12px;

}


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

.form-group {

    margin-bottom:
        20px;

}


.form-group label {

    display:
        block;

    font-weight:
        700;

    margin-bottom:
        7px;

}


.form-group input,
.form-group select {

    width:
        100%;

    height:
        48px;

    padding:
        0 13px;

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

    border-radius:
        9px;

    outline:
        none;

    background:
        var(--background);

    color:
        var(--text);

}


.form-group input:focus,
.form-group select:focus {

    border-color:
        var(--primary);

}


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

@media (max-width: 850px) {

    .dashboard-layout {

        grid-template-columns:
            1fr;

        padding-left:
            5%;

        padding-right:
            5%;

    }


    .dashboard-welcome {

        padding-left:
            5%;

        padding-right:
            5%;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .dashboard-welcome h1 {

        font-size:
            2rem;

    }


    .profile-layout {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 600px) {

    .dashboard-stats {

        padding:
            20px 5%;

    }


    .chart-container {

        height:
            250px;

    }

}