/* Cohesive app polish for the active QuizMaster flow. */

:root{
    --app-bg:#08111f;
    --app-surface:#101b2f;
    --app-surface-2:#14223b;
    --app-border:rgba(222,232,255,0.10);
    --app-text:#f6f8ff;
    --app-muted:#aebbd2;
    --app-soft:#d7e2f6;
    --app-primary:#2ea8ff;
    --app-primary-2:#66d2ff;
    --app-success:#2dd47c;
    --app-warning:#f4b942;
    --app-danger:#ff6470;
    --app-shadow:0 18px 44px rgba(0,0,0,0.28);
    --app-radius:18px;
}

body{
    background:
    linear-gradient(
        180deg,
        #08111f 0%,
        #0b1628 48%,
        #08111f 100%
    );
    color:var(--app-text);
}

.container{
    width:min(1120px,92%);
}

.main-header{
    background:
    rgba(8,17,31,0.92);
    border-bottom:
    1px solid var(--app-border);
}

.navbar{
    height:72px;
}

.logo{
    font-size:24px;
    letter-spacing:0;
}

.nav-item,
#userGreeting{
    color:var(--app-muted);
}

.login-btn,
.dashboard-btn,
.primary-btn,
.start-btn,
.upload-btn{
    border-radius:12px;
    background:
    linear-gradient(
        135deg,
        var(--app-primary),
        var(--app-primary-2)
    );
    box-shadow:
    0 10px 22px rgba(46,168,255,0.18);
}

.logout-btn,
.secondary-btn,
.back-link,
.dashboard-streak{
    background:rgba(255,255,255,0.07);
    border:1px solid var(--app-border);
    color:var(--app-soft);
}

.hero,
.topic-hero{
    min-height:auto;
    padding:
    112px 0 40px;
    background:
    linear-gradient(
        180deg,
        #0b172a,
        #0a1323
    );
    border-bottom:
    1px solid var(--app-border);
}

.hero-content,
.topic-hero .container{
    width:min(1120px,92%);
    max-width:1120px;
    margin:auto;
}

.hero h1,
.topic-hero h1,
#title,
#pageTitle,
#heroTitle{
    max-width:760px;
    font-size:42px;
    line-height:1.16;
    margin-bottom:14px;
}

.hero p,
.topic-subtitle,
.dashboard-subtitle{
    max-width:640px;
    color:var(--app-muted);
    font-size:15px;
    line-height:1.8;
}

.hero-tag,
.hero-badge,
.dashboard-tag,
.quiz-badge{
    display:inline-flex;
    align-items:center;
    width:max-content;
    border-radius:999px;
    border:1px solid rgba(46,168,255,0.22);
    background:rgba(46,168,255,0.10);
    color:#83d7ff;
    font-size:12px;
    font-weight:700;
    padding:8px 13px;
    letter-spacing:0;
}

.section,
.exam-section,
.category-section,
.topic-section,
.dashboard-section{
    width:100%;
    max-width:none;
    padding:
    38px 0 84px;
}

.section-heading,
.section-title,
.topic-section-header{
    width:min(1120px,92%);
    margin:
    0 auto 24px;
    text-align:left;
}

.section-heading h2,
.section-title h2,
.topic-section-header h2,
.analytics-top h2,
.side-box h2{
    font-size:26px;
    line-height:1.25;
}

.section-heading p,
.section-title p,
.topic-section-header p{
    color:var(--app-muted);
    font-size:14px;
}

.exam-grid,
.subject-grid,
.category-grid,
.topic-grid,
.quiz-list-grid,
.grid-3{
    width:min(1120px,92%);
    margin:auto;
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
}

.exam-card,
.subject-card,
.category-card,
.topic-card,
.quiz-card,
.difficulty-card,
.dashboard-card,
.analytics-box,
.recent-box,
.side-box,
.empty-box{
    border-radius:var(--app-radius);
    background:
    linear-gradient(
        180deg,
        rgba(20,34,59,0.94),
        rgba(14,25,43,0.94)
    );
    border:
    1px solid var(--app-border);
    box-shadow:none;
}

.exam-card,
.subject-card,
.category-card,
.difficulty-card{
    padding:24px;
}

.exam-card:hover,
.subject-card:hover,
.category-card:hover,
.topic-card:hover,
.quiz-card:hover,
.difficulty-card:hover,
.dashboard-card:hover,
.result-item:hover{
    transform:translateY(-4px);
    border-color:rgba(46,168,255,0.42);
    box-shadow:var(--app-shadow);
}

.card-icon,
.subject-icon,
.dashboard-icon,
.topic-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    background:rgba(46,168,255,0.12);
}

.card-icon i,
.subject-icon i,
.dashboard-icon i,
.topic-icon i{
    font-size:20px;
    color:var(--app-primary-2);
}

.exam-card h3,
.exam-card h2,
.subject-card h3,
.category-card h2,
.difficulty-card h2,
.quiz-title{
    font-size:21px;
    line-height:1.3;
    margin-bottom:10px;
}

.exam-card p,
.subject-card p,
.category-card p,
.difficulty-card p,
.quiz-description,
.side-text,
.goal-text{
    color:var(--app-muted);
    font-size:14px;
    line-height:1.7;
}

.exam-card span,
.category-card span,
.topic-action{
    color:var(--app-primary-2);
    font-size:13px;
    font-weight:700;
}

.dashboard-section{
    padding-top:104px;
}

.dashboard-top,
.dashboard-stats,
.dashboard-grid{
    width:min(1120px,92%);
    margin-left:auto;
    margin-right:auto;
}

.dashboard-top{
    margin-bottom:24px;
}

.dashboard-top h1{
    font-size:36px;
}

.dashboard-stats{
    gap:16px;
    margin-bottom:24px;
}

.dashboard-card{
    padding:20px;
    gap:16px;
}

.dashboard-card h3{
    color:var(--app-muted);
    font-size:13px;
}

.dashboard-card p{
    font-size:28px;
}

.dashboard-grid{
    gap:20px;
}

.analytics-box,
.recent-box,
.side-box{
    padding:22px;
}

.analytics-top{
    margin-bottom:18px;
}

.result-item{
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:14px;
    padding:16px;
}

.result-title{
    font-size:15px;
}

.result-meta{
    color:var(--app-muted);
}

.progress-ring{
    --progress:0%;
    width:148px;
    height:148px;
    background:
    conic-gradient(
        var(--app-primary) 0 var(--progress),
        rgba(255,255,255,0.08) var(--progress) 100%
    );
}

.progress-ring::before{
    width:108px;
    height:108px;
    background:#101b2f;
}

.ring-value{
    font-size:28px;
}

.goal-progress{
    height:10px;
}

.empty-state,
.empty-box{
    padding:28px;
    color:var(--app-muted);
}

@media(max-width:768px){

    .navbar{
        height:68px;
    }

    .hero,
    .topic-hero{
        padding:
        96px 0 34px;
    }

    .hero h1,
    .topic-hero h1,
    #title,
    #pageTitle,
    #heroTitle{
        font-size:32px;
    }

    .dashboard-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .dashboard-streak{
        width:100%;
        text-align:center;
    }

    .quiz-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .quiz-right{
        align-items:stretch;
        width:100%;
    }

}