.auth-box{

width:350px;

margin:80px auto;

background:white;

padding:30px;

border-radius:20px;

box-shadow:0 5px 20px #ddd;

text-align:center;

}


.auth-box input{

width:90%;

padding:12px;

margin:10px;

border-radius:10px;

border:1px solid #ccc;

}
.dashboard{

padding:30px;

}


.stats{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));

gap:20px;

}



.card{

background:white;

padding:25px;

border-radius:20px;

text-align:center;

box-shadow:
0 5px 15px #ddd;

font-size:20px;

}



section{

background:white;

margin-top:30px;

padding:25px;

border-radius:20px;

}

.auth-box button{

padding:12px 30px;

border:none;

border-radius:10px;

cursor:pointer;

background:#1565c0;
#resources{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:20px;

padding:30px;

}



.resource-card{

background:white;

padding:20px;

border-radius:15px;

box-shadow:
0 5px 15px #ddd;

}



.resource-card a{

display:inline-block;

margin-top:15px;

background:#1565c0;

color:white;

padding:10px 20px;

border-radius:10px;

text-decoration:none;

}
  .teacher-dashboard{

padding:30px;

}


.panel{

background:white;

padding:25px;

margin:20px;

border-radius:20px;

box-shadow:
0 5px 15px #ddd;

}



.panel input,
.panel textarea,
.panel select{

width:90%;

padding:12px;

margin:10px;

border-radius:10px;

border:1px solid #ccc;

}



.panel button{

background:#1565c0;

color:white;

padding:12px 30px;

border:none;

border-radius:10px;

cursor:pointer;
  .admin-dashboard{

padding:30px;

}


table{

width:100%;

background:white;

border-collapse:collapse;

}


td,th{

padding:15px;

border-bottom:1px solid #ddd;

}

}
color:white;

}
canvas{

background:white;

padding:20px;

border-radius:20px;

}


.panel input{

padding:12px;

width:80%;

}

@media(max-width:768px){


header{

flex-direction:column;

text-align:center;

}



nav{

display:flex;

flex-direction:column;

}



.hero h2{

font-size:28px;

}



.cards{

grid-template-columns:1fr;

}



.dashboard,
.teacher-dashboard,
.admin-dashboard{

padding:15px;

}


.panel{

margin:10px 0;

}


}
.panel button{

padding:12px 25px;

cursor:pointer;

}
<button id="menuBtn">
☰
</button>
document
.getElementById("menuBtn")
.onclick=function(){

document
.querySelector("nav")
.classList.toggle("open");

};

.auth-box{

max-width:400px;

margin:80px auto;

background:white;

padding:35px;

border-radius:20px;

text-align:center;

box-shadow:
0 5px 20px #ddd;

}



.auth-box input{

width:90%;

padding:14px;

margin:10px;

border-radius:10px;

border:1px solid #ccc;

}



.auth-box button{

background:#1565c0;

color:white;

border:none;

padding:14px 35px;

border-radius:25px;

cursor:pointer;

font-size:18px;

}



.auth-box a{

color:#1565c0;

text-decoration:none;

}
.library{

padding:30px;

}



.library input,
.library select{

padding:12px;

margin:10px;

width:90%;

border-radius:10px;

border:1px solid #ccc;

}



#resources{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:20px;

}



.resource-card{

background:white;

padding:25px;

border-radius:20px;

box-shadow:0 5px 15px #ddd;

}



.resource-card a{

background:#1565c0;

color:white;

padding:10px 20px;

border-radius:10px;

text-decoration:none;

}

#exerciseList{

padding:30px;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:20px;

}


#exerciseList input{

width:90%;

padding:12px;

border-radius:10px;

border:1px solid #ccc;

}


#exerciseList button{

background:#1565c0;

color:white;

padding:10px 25px;

border:none;

border-radius:10px;

margin-top:10px;

}
:root{

--primary:#1565c0;
--secondary:#00bcd4;
--dark:#082b5c;
--light:#f4f8ff;

}


body{

background:var(--light);

}



.navbar{

background:white;

height:80px;

display:flex;

align-items:center;

justify-content:space-between;

padding:10px 50px;

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

position:sticky;

top:0;

z-index:1000;

}



.brand img{

width:200px;

}



.navbar nav a{

margin:15px;

text-decoration:none;

color:var(--dark);

font-weight:bold;

}



.menu-btn{

display:none;

font-size:30px;

background:none;

border:0;

}



@media(max-width:768px){


.menu-btn{

display:block;

}



.navbar nav{

display:none;

position:absolute;

top:80px;

right:0;

background:white;

width:100%;

text-align:center;

}



.navbar nav.active{

display:block;

}



.navbar nav a{

display:block;

padding:15px;

}


}
.tools-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:30px;

padding:40px;

}



.tool-card{

background:white;

padding:30px;

border-radius:25px;

box-shadow:
0 5px 20px #ddd;

text-align:center;

}



.tool-card input{

padding:15px;

width:90%;

border-radius:10px;

border:1px solid #ccc;

}



.tool-card button{

margin:15px;

padding:12px 30px;

background:#1565c0;

color:white;

border:none;

border-radius:20px;

}
.assistant-box{

max-width:800px;

margin:50px auto;

background:white;

padding:40px;

border-radius:30px;

box-shadow:0 10px 30px #ddd;

text-align:center;

}



.assistant-box textarea{

width:90%;

height:150px;

padding:20px;

border-radius:15px;

border:1px solid #ccc;

font-size:18px;

}



.assistant-box button{

background:#1565c0;

color:white;

border:0;

padding:15px 40px;

border-radius:30px;

margin:20px;

font-size:18px;

}



#answer{

background:#f4f8ff;

padding:20px;

border-radius:20px;

}
.result-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 15px;
    padding: 15px;
    margin: 10px 0;
    background: #f4f8ff;
    border-radius: 12px;
}

.result-item small {
    grid-column: 1 / -1;
    opacity: 0.7;
}

@media (max-width: 700px) {
    .stats {
        grid-template-columns: 1fr 1fr;
    }
}
/* =====================================================
   HAMOU MATH LEADERBOARD
   ===================================================== */

.leaderboard-page {
    width: min(1100px, 94%);
    margin: 40px auto 80px;
}

.leaderboard-hero {
    background:
        linear-gradient(
            135deg,
            #0d47a1,
            #1565c0
        );

    color: white;

    border-radius: 30px;

    padding: 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
}

.leaderboard-hero h1 {
    font-size: 42px;
    margin: 10px 0;
}

.leaderboard-hero p {
    margin: 0;
    opacity: .9;
    font-size: 18px;
}

.eyebrow {
    font-size: 13px;
    letter-spacing: 2px;
    opacity: .8;
}

.leaderboard-trophy {
    font-size: 100px;
}

.leaderboard-card {
    background: white;

    border-radius: 25px;

    padding: 25px;

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

.leaderboard-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-bottom: 15px;
}

.leaderboard-header h2 {
    margin: 0;
}

.leaderboard-header button {
    border: 0;

    background: #1565c0;

    color: white;

    padding: 10px 18px;

    border-radius: 12px;

    cursor: pointer;
}

.leaderboard-status {
    color: #607d8b;

    margin-bottom: 15px;
}

.leaderboard-list {
    display: flex;

    flex-direction: column;

    gap: 12px;
}

.leaderboard-row {
    display: grid;

    grid-template-columns:
        70px 1fr 130px;

    align-items: center;

    gap: 15px;

    padding: 15px;

    border-radius: 18px;

    background: #f7f9fc;

    border: 1px solid #edf1f7;
}

.leaderboard-row.top-1 {
    background: #fff8df;
}

.leaderboard-row.top-2 {
    background: #f3f5f7;
}

.leaderboard-row.top-3 {
    background: #fff3ea;
}

.rank {
    font-size: 24px;

    font-weight: 800;

    text-align: center;
}

.student-info {
    display: flex;

    align-items: center;

    gap: 12px;
}

.student-avatar {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #1565c0;

    color: white;

    font-weight: bold;
}

.student-info strong {
    display: block;
}

.student-info small {
    display: block;

    margin-top: 4px;

    color: #78909c;
}

.student-xp {
    text-align: center;
}
:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --text: #17202a;
    --muted: #607d8b;
    --border: #e5eaf0;
    --primary: #1565c0;
    --primary-dark: #0d47a1;
    --shadow: 0 10px 30px rgba(0,0,0,.07);
}

html[data-theme="dark"] {
    --bg: #0f1720;
    --surface: #17212b;
    --surface-soft: #1d2935;
    --text: #f2f5f7;
    --muted: #b0bec5;
    --border: #2c3a46;
    --primary: #42a5f5;
    --primary-dark: #1e88e5;
    --shadow: 0 10px 30px rgba(0,0,0,.25);
}

body {
    background: var(--bg);
    color: var(--text);
    transition:
        background .2s ease,
        color .2s ease;
}

.card,
.panel,
.profile-card,
.stat-card,
.tool-card,
.resource-card,
.leaderboard-card,
.achievement-section,
.summary-card,
.achievement-card,
.result-item {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

p,
small {
    color: var(--muted);
}

input,
textarea,
select {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.student-xp strong {
    font-size: 20px;
}

.student-xp small {
    color: #78909c;
    margin-right: 4px;
}

@media (max-width: 700px) {

    .leaderboard-hero {
        padding: 30px;
        flex-direction: column;
        text-align: center;
    }

    .leaderboard-hero h1 {
        font-size: 32px;
    }

    .leaderboard-trophy {
        font-size: 70px;
    }

    .leaderboard-row {
        grid-template-columns:
            50px 1fr 90px;

        padding: 12px;
    }

    .student-avatar {
        width: 38px;
        height: 38px;
    }

}
.my-ranking-main {
    font-size: 22px;
    margin-bottom: 10px;
}

.my-ranking-main strong {
    font-size: 32px;
}

.my-ranking-details {
    color: #607d8b;
    line-height: 1.8;
}
/* =====================================================
   HAMOU MATH SEARCH
   ===================================================== */

.search-page {
    width: min(1150px, 94%);
    margin: 35px auto 80px;
}

.search-hero {
    background:
        linear-gradient(
            135deg,
            #0d47a1,
            #1565c0
        );

    color: white;

    border-radius: 28px;

    padding: 40px;

    text-align: center;
}

.search-hero h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.search-form {
    display: grid;
    grid-template-columns: 1fr 180px 120px;
    gap: 10px;
    max-width: 900px;
    margin: 25px auto 0;
}

.search-form input,
.search-form select {
    border: 0;
    padding: 14px;
    border-radius: 12px;
    font-size: 16px;
}

.search-form button {
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    background: #00bcd4;
    color: white;
    font-weight: bold;
}

.search-results-section {
    margin-top: 25px;
}

.search-results {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 18px;

    margin-top: 18px;
}

.search-card {
    background: var(--surface, white);
    color: var(--text, #222);

    border: 1px solid var(--border, #e5eaf0);

    border-radius: 20px;

    padding: 22px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.06);
}

.search-badge {
    display: inline-block;

    padding: 6px 10px;

    border-radius: 20px;

    background: #eef6ff;

    color: #1565c0;

    font-size: 13px;

    font-weight: bold;
}

.search-card h3 {
    margin: 12px 0 8px;
}

.search-card p {
    line-height: 1.7;
    color: var(--muted, #607d8b);
}

.search-action {
    display: inline-block;

    margin-top: 12px;

    padding: 10px 16px;

    border-radius: 10px;

    background: #1565c0;

    color: white;

    text-decoration: none;
}

@media (max-width: 700px) {

    .search-form {
        grid-template-columns: 1fr;
    }

    .search-hero h1 {
        font-size: 30px;
    }
}
.search-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0;
}

.search-meta span {
    padding: 5px 9px;
    border-radius: 10px;
    background: var(--surface-soft, #f4f7fb);
    color: var(--muted, #607d8b);
    font-size: 12px;
}
.search-pagination {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    margin: 30px 0;
}

.search-pagination button {
    border: 0;

    padding: 10px 18px;

    border-radius: 10px;

    background: #1565c0;

    color: white;

    cursor: pointer;
}

.search-pagination button:disabled {
    opacity: .45;

    cursor: not-allowed;
}

.search-pagination span {
    color: var(--text, #222);

    font-weight: bold;
}