:root{--brand:#3A8DFF;--bg:#F7FAFF;--card:#fff;--muted:#6B7A90}
body{background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto}
.card{border-radius:16px;border:1px solid #E8EEFF;background:var(--card);box-shadow:0 8px 16px rgba(16,46,130,.04)}
.btn-brand{background:var(--brand);color:#fff;border:none}
.btn-brand:hover{opacity:.9}
.hero{background:linear-gradient(180deg,#F0F5FF,#FFFFFF);border:1px solid #E8EEFF;border-radius:16px}
.badge-soft{background:#E9F1FF;color:#2253A0;border-radius:20px;padding:.35rem .7rem}
.small-muted{color:var(--muted)}
.sidebar .nav-link.active{background:var(--brand);color:#fff}
.bottom-nav{display:none}
@media(max-width: 992px){
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5ecff;justify-content:space-around;padding:.4rem 0;z-index:1000}
  body{padding-bottom:60px}
}
/* Leaderboard styling */
.lb-card .rank-badge {
  width: 36px; height: 36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: 50%; font-weight:700; background:#eef3ff; color:#2d55ff;
}
.lb-card .rank-1 { background: linear-gradient(135deg,#ffe39f,#ffc940); color:#6a4a00; }
.lb-card .rank-2 { background: linear-gradient(135deg,#e6ecf5,#c9d6e8); color:#334e7d; }
.lb-card .rank-3 { background: linear-gradient(135deg,#ffd7c2,#ffb089); color:#6a2b00; }

.lb-card .chip {
  width: 34px; height: 34px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center;
  background:#f1f5ff; color:#355; font-weight:700; text-transform:uppercase;
  border:1px solid #e2e8ff;
}

.lb-card .pill {
  font-size:.75rem; padding:.2rem .5rem; border-radius:999px; background:#eef6ff; color:#205; border:1px solid #e1eeff;
}

.lb-card .bar {
  height: 6px; border-radius: 999px; background: #eef2ff; overflow: hidden;
}
.lb-card .bar > span {
  display:block; height: 100%; width: 0%;
  background: linear-gradient(90deg,#6ea8ff,#3a8dff);
  transition: width .6s ease;
}

/* shimmer while loading */
.lb-shimmer {
  position: relative; overflow: hidden; background: #f5f7ff; min-height: 56px; border-radius: 10px;
}
.lb-shimmer::after {
  content: ""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translateX(-100%); animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.badge-accepted {
  background: linear-gradient(135deg,#8be38b,#4caf50) !important;
  color:#073b07 !important;
  border: none !important;
}
.icon-accept {
  display:inline-block; width:18px; height:18px; line-height:18px;
  text-align:center; border-radius:50%; background:#4caf50; color:#fff;
  font-weight:700; font-size:12px;
}
/* Badge chips */
.badge-topper {
  background: linear-gradient(135deg,#ffd27f,#ff8d00) !important;
  color:#3b2500 !important; border:0 !important;
}
.badge-gold {
  background: linear-gradient(135deg,#ffe39f,#ffc940) !important;
  color:#6a4a00 !important; border:0 !important;
}
.badge-silver{
  background: linear-gradient(135deg,#e6ecf5,#c9d6e8) !important;
  color:#334e7d !important; border:0 !important;
}
.badge-bronze{
  background: linear-gradient(135deg,#ffd7c2,#ffb089) !important;
  color:#6a2b00 !important; border:0 !important;
}
.badge-starter{
  background:#eef3ff !important; color:#2d55ff !important; border:0 !important;
}

/* Print report page */
.report-wrap {
  max-width: 900px; margin: 24px auto; background:#fff; padding:24px; border:1px solid #eee; border-radius:12px;
}
.report-head {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.report-head .title { font-weight:800; font-size:1.5rem; }
@media print {
  .no-print { display:none !important; }
  body { background:#fff !important; }
}
/* Brand colored topbar (safe) */
.brand-nav {
  background: var(--brand-primary) !important;
}
.brand-nav .navbar-brand,
.brand-nav .nav-link,
.brand-nav .dropdown-toggle,
.brand-nav .btn,
.brand-nav .badge {
  color: #fff !important;
}
.brand-nav .dropdown-menu {
  /* dropdown ko readable banane ke liye light bg */
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.brand-nav .dropdown-item {
  color: #111827 !important;
}
.brand-nav .dropdown-item:hover {
  background: #f3f4f6;
}
.brand-nav .btn.btn-light {
  background: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.6);
  color:#111827 !important;
}

.badge-accepted { background: linear-gradient(135deg, #8be38b, #4caf50); color:#073b07; }
/* Mobile tabbar */
@media (max-width: 992px){
  .mobile-tabbar{
    position:fixed;
    left:0; right:0; bottom:0;
    background:#fff;
    border-top:1px solid #e5ecff;
    display:flex;
    justify-content:space-around;
    z-index:1030;
  }
  .mobile-tabbar a{
    flex:1;
    padding:.6rem .2rem;
    text-align:center;
    font-size:.9rem;
    color:#111;
    text-decoration:none;
  }
  .mobile-tabbar a.active{ color:#4F46E5; }
  .mobile-tabbar i{
    display:block;
    font-size:1.2rem;
    margin-bottom:.15rem;
  }
}

<style>
  /* ...aapka existing CSS... */

  /* Notification dropdown sizing */
  @media (min-width: 577px){
    .dropdown-menu.notif-menu{ width:360px; max-height:70vh; overflow:auto; }
  }
  @media (max-width: 576px){
    .dropdown-menu.notif-menu{ width:90vw; max-height:70vh; overflow:auto;
      left:auto !important; right:.5rem; }
  }
</style>