:root{--blue-dark:#173a82;--blue:#2457d6;--blue-light:#6383f2;--white:#fff;--gray-light:#f8f9fa;--gray:#e9ecef;--border:#dee2e6;--text-dark:#212529;--text-muted:#6c757d;--shadow:0 4px 12px #00000014;--gold:gold;--silver:silver;--bronze:#cd7f32}body{background:var(--gray-light);color:var(--text-dark);margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.main-content{max-width:1200px;margin:0 auto;padding:40px 24px}.header{text-align:center;color:var(--white);background:linear-gradient(135deg,#173a82 0%,#2457d6 55%,#6383f2 100%);padding:60px 24px}.header-content h1{margin:0 0 12px;font-size:2.5rem;font-weight:700}.header-description{opacity:.9;margin:0;font-size:1.1rem}.leaderboard-container{background:var(--white);box-shadow:var(--shadow);border-radius:24px;margin-bottom:32px;padding:32px}.tab-navigation{border-bottom:2px solid var(--border);gap:12px;margin-bottom:32px;padding-bottom:16px;display:flex}.tab-button{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:12px;padding:12px 24px;font-size:.95rem;font-weight:600;transition:all .2s}.tab-button:hover{background:var(--gray-light);color:var(--blue-dark)}.tab-button.active{background:var(--blue);color:var(--white)}.tab-content{display:none}.tab-content.active{display:block}.leaderboard-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.leaderboard-header h2{color:var(--blue-dark);margin:0;font-size:1.5rem;font-weight:700}.filter-dropdown select{border:1px solid var(--border);background:var(--white);color:var(--text-dark);cursor:pointer;border-radius:8px;padding:10px 16px;font-size:.9rem;font-weight:600;transition:border-color .2s}.filter-dropdown select:hover{border-color:var(--blue)}.leaderboard-list{flex-direction:column;gap:12px;display:flex}.school-leaderboard-item{background:var(--gray-light);border-radius:16px;align-items:center;gap:16px;padding:20px 24px;transition:all .2s;display:flex}.school-leaderboard-item:hover{background:var(--gray);transform:translateY(-2px)}.school-leaderboard-item.rank-1{border:2px solid var(--gold);background:linear-gradient(135deg,#ffd70026 0%,#ffd7000d 100%)}.school-leaderboard-item.rank-2{border:2px solid var(--silver);background:linear-gradient(135deg,#c0c0c026 0%,#c0c0c00d 100%)}.school-leaderboard-item.rank-3{border:2px solid var(--bronze);background:linear-gradient(135deg,#cd7f3226 0%,#cd7f320d 100%)}.school-rank-badge{text-transform:uppercase;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1rem;font-weight:700;display:flex}.school-rank-badge.gold{background:var(--gold);color:var(--text-dark);box-shadow:0 4px 12px #ffd70066}.school-rank-badge.silver{background:var(--silver);color:var(--text-dark);box-shadow:0 4px 12px #c0c0c066}.school-rank-badge.bronze{background:var(--bronze);color:var(--white);box-shadow:0 4px 12px #cd7f3266}.school-rank{background:var(--blue);width:48px;height:48px;color:var(--white);border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:700;display:flex}.school-info{flex:1;min-width:0}.school-name{color:var(--text-dark);margin:0 0 6px;font-size:1.1rem;font-weight:700}.school-stats{color:var(--text-muted);margin:0;font-size:.9rem}.school-stats .hours{color:var(--blue);font-weight:700}.school-stats .student-count{color:var(--blue-light);font-weight:600}.school-progress-bar{background:var(--white);border-radius:4px;flex-shrink:0;width:120px;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--blue) 0%, var(--blue-light) 100%);border-radius:4px;height:100%;transition:width .3s}.school-leaderboard-item.rank-1 .progress-fill{background:linear-gradient(90deg, var(--gold) 0%, gold 100%)}.school-leaderboard-item.rank-2 .progress-fill{background:linear-gradient(90deg, var(--silver) 0%, silver 100%)}.school-leaderboard-item.rank-3 .progress-fill{background:linear-gradient(90deg, var(--bronze) 0%, #cd7f32 100%)}.leaderboard-item{background:var(--gray-light);border-radius:16px;justify-content:space-between;align-items:center;padding:20px 24px;transition:all .2s;display:flex}.leaderboard-item:hover{background:var(--gray);transform:translateY(-2px)}.leaderboard-item.rank-1{border:2px solid var(--gold);background:linear-gradient(135deg,#ffd7001a 0%,#ffd7000d 100%)}.leaderboard-item.rank-2{border:2px solid var(--silver);background:linear-gradient(135deg,#c0c0c01a 0%,#c0c0c00d 100%)}.leaderboard-item.rank-3{border:2px solid var(--bronze);background:linear-gradient(135deg,#cd7f321a 0%,#cd7f320d 100%)}.leaderboard-info{flex:1;align-items:center;gap:16px;display:flex}.rank-number{background:var(--blue);width:48px;height:48px;color:var(--white);border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;display:flex}.leaderboard-item.rank-1 .rank-number{background:var(--gold);color:var(--text-dark)}.leaderboard-item.rank-2 .rank-number{background:var(--silver);color:var(--text-dark)}.leaderboard-item.rank-3 .rank-number{background:var(--bronze);color:var(--white)}.leaderboard-avatar{object-fit:cover;border:3px solid var(--white);border-radius:50%;width:56px;height:56px;box-shadow:0 2px 8px #0000001a}.leaderboard-details{flex:1}.leaderboard-name{color:var(--text-dark);margin:0 0 4px;font-size:1rem;font-weight:700}.leaderboard-school{color:var(--text-muted);margin:0;font-size:.85rem}.leaderboard-stats{align-items:center;gap:24px;display:flex}.stat-display{text-align:center}.stat-value{color:var(--blue);font-size:1.2rem;font-weight:700;display:block}.stat-label{color:var(--text-muted);text-transform:uppercase;margin:0;font-size:.75rem;font-weight:600}.top-performers-section{background:var(--white);box-shadow:var(--shadow);border-radius:24px;padding:32px}.section-title{color:var(--blue-dark);margin:0 0 24px;font-size:1.5rem;font-weight:700}.top-performers-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;display:grid}.top-performer-card{background:var(--gray-light);text-align:center;border-radius:20px;padding:32px 24px;transition:all .3s;position:relative}.top-performer-card:hover{transform:translateY(-8px);box-shadow:0 8px 24px #0000001f}.top-performer-card.gold{border:2px solid var(--gold);background:linear-gradient(135deg,#ffd70026 0%,#ffd7000d 100%)}.top-performer-card.silver{border:2px solid var(--silver);background:linear-gradient(135deg,#c0c0c026 0%,#c0c0c00d 100%)}.top-performer-card.bronze{border:2px solid var(--bronze);background:linear-gradient(135deg,#cd7f3226 0%,#cd7f320d 100%)}.rank-badge{background:var(--blue-dark);color:var(--white);text-transform:uppercase;border-radius:20px;padding:8px 20px;font-size:.85rem;font-weight:700;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.top-performer-card.gold .rank-badge{background:var(--gold);color:var(--text-dark)}.top-performer-card.silver .rank-badge{background:var(--silver);color:var(--text-dark)}.top-performer-card.bronze .rank-badge{background:var(--bronze);color:var(--white)}.performer-avatar{border:4px solid var(--white);border-radius:50%;width:100px;height:100px;margin:16px auto;overflow:hidden;box-shadow:0 4px 12px #00000026}.performer-avatar img{object-fit:cover;width:100%;height:100%}.performer-name{color:var(--text-dark);margin:16px 0 8px;font-size:1.2rem;font-weight:700}.performer-school{color:var(--text-muted);margin:0 0 16px;font-size:.9rem}.performer-stats{justify-content:center;gap:24px;display:flex}.stat-item{color:var(--text-dark);margin:0;font-size:.9rem}.stat-item .stat-value{color:var(--blue);font-size:1.4rem;font-weight:700;display:block}.pagination-controls{border-top:1px solid var(--border);justify-content:center;align-items:center;gap:12px;margin-top:32px;padding-top:24px;display:flex}.pagination-button{background:var(--white);border:1px solid var(--border);color:var(--text-dark);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.pagination-button:hover:not(:disabled){background:var(--blue-light);border-color:var(--blue);color:var(--white)}.pagination-button:disabled{opacity:.4;cursor:not-allowed;background:var(--gray-light)}.pagination-numbers{gap:8px;display:flex}.pagination-number{background:var(--white);border:1px solid var(--border);width:40px;height:40px;color:var(--text-dark);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.pagination-number:hover{background:var(--gray-light);border-color:var(--blue)}.pagination-number.active{background:var(--blue);color:var(--white);border-color:var(--blue)}@media (width<=768px){.main-content,.leaderboard-container,.top-performers-section{padding:24px 16px}.leaderboard-header,.leaderboard-item{flex-direction:column;align-items:flex-start;gap:16px}.leaderboard-info{width:100%}.leaderboard-stats{justify-content:space-between;width:100%}.top-performers-grid{grid-template-columns:1fr}.tab-navigation{flex-direction:column}.tab-button{width:100%}.pagination-controls{flex-wrap:wrap}.pagination-button{padding:8px 16px;font-size:.85rem}.pagination-number{width:36px;height:36px;font-size:.85rem}}