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

    body {
      background: #f0f2f5;
      font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 40px 24px;
    }

    /* main container - card style exactly like image */
    .leaderboard-container {
      max-width: 880px;
      width: 100%;
      background: white;
      border-radius: 32px;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      transition: all 0.2s;
    }

    /* inner padding structure */
    .lb-content {
      padding: 28px 32px 24px 32px;
    }

    /* header area */
    .lb-header h1 {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.3px;
      color: #0a1c2f;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .lb-header h1:before {
      content: "🏆";
      font-size: 28px;
    }

    .tagline {
      color: #4a627a;
      font-size: 15px;
      font-weight: 500;
      margin-top: 8px;
      margin-bottom: 16px;
    }

    .trust-banner {
      background: #f8fafd;
      border-radius: 18px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid #e9edf2;
      margin-top: 8px;
    }

    .trust-banner i {
      font-size: 20px;
      color: #2c7be5;
    }

    .trust-banner span {
      font-size: 13.5px;
      color: #2c3e50;
      font-weight: 450;
      line-height: 1.4;
    }

    /* TOP HELPERS section */
    .top-helpers-wrap {
      margin-top: 28px;
    }

    .section-title {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .section-title h2 {
      font-size: 22px;
      font-weight: 700;
      color: #0f2b3d;
    }

    .rank-badge-label {
      background: #eef3fc;
      padding: 4px 12px;
      border-radius: 40px;
      font-size: 12px;
      font-weight: 600;
      color: #1e6fdf;
    }

    /* rankings list */
    .rank-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .rank-card {
      background: white;
      border: 1px solid #eef2f8;
      border-radius: 24px;
      padding: 18px 22px;
      display: flex;
      gap: 20px;
      transition: 0.2s;
      box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    }

    .rank-card:hover {
      border-color: #dce5ef;
      box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    }

    .rank-number {
      font-size: 40px;
      font-weight: 800;
      color: #2c3e50;
      min-width: 70px;
      text-align: center;
      background: #f7f9fc;
      border-radius: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 70px;
    }

    .rank-details {
      flex: 1;
    }

    .name-badge-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .name-badge-row h3 {
      font-size: 22px;
      font-weight: 700;
      color: #0a2540;
    }

    .badge-pair {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .badge-mini {
      font-size: 11px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 30px;
      background: #f1f5f9;
      color: #1e3a5f;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .badge-rescuer {
      background: #eef2ff;
      color: #1e40af;
    }

    .badge-hunter {
      background: #fff4e6;
      color: #b45309;
    }

    .badge-voice {
      background: #e3f7ec;
      color: #1e6f3f;
    }

    .skills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 12px 0 12px 0;
    }

    .skill {
      background: #f0f4fa;
      padding: 4px 14px;
      border-radius: 30px;
      font-size: 12px;
      font-weight: 500;
      color: #2c577c;
    }

    .stats-line {
      display: flex;
      gap: 24px;
      align-items: center;
      margin-top: 6px;
      flex-wrap: wrap;
    }

    .stat-item {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #fafcff;
      padding: 5px 14px;
      border-radius: 40px;
      font-size: 13px;
    }

    .stat-value {
      font-weight: 800;
      font-size: 15px;
      color: #0f2b3d;
    }

    .stat-label {
      color: #5a6e85;
    }

    /* HelpHub AI banner (exactly as image shows) */
    .ai-banner {
      background: linear-gradient(105deg, #f1f6fe 0%, #eaf1fa 100%);
      border-radius: 20px;
      padding: 12px 20px;
      margin: 16px 0 8px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      border: 1px solid #e1eaf3;
    }

    .ai-identity {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .ai-icon {
      background: white;
      border-radius: 40px;
      padding: 6px 12px;
      font-weight: 700;
      font-size: 15px;
      color: #2563eb;
    }

    .ai-name {
      font-weight: 800;
      font-size: 16px;
      color: #1f2a44;
    }

    .ai-badge-tag {
      background: #cde2ff;
      padding: 4px 12px;
      border-radius: 50px;
      font-size: 11px;
      font-weight: 600;
    }

    .ai-stat {
      background: #fff2e5;
      padding: 4px 14px;
      border-radius: 30px;
      font-size: 12px;
      font-weight: 700;
      color: #ea580c;
    }

    /* BADGE SYSTEM SECTION */
    .badge-system {
      margin-top: 32px;
      background: #fefefe;
      border: 1px solid #edf2f9;
      border-radius: 28px;
      padding: 22px 24px 20px 24px;
    }

    .badge-header {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .badge-header h2 {
      font-size: 22px;
      font-weight: 700;
      color: #0f2b3d;
    }

    .badge-sub {
      background: #eef2ff;
      padding: 4px 14px;
      border-radius: 40px;
      font-size: 12px;
      font-weight: 600;
      color: #2563eb;
    }

    .badge-grid {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .badge-card {
      background: #fafdff;
      border: 1px solid #eef2f9;
      border-radius: 20px;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 1;
      min-width: 150px;
    }

    .badge-icon {
      font-size: 28px;
    }

    .badge-text h4 {
      font-size: 14px;
      font-weight: 700;
      color: #1f2f40;
    }

    .badge-text p {
      font-size: 11px;
      color: #617388;
      margin-top: 4px;
    }

    /* bottom nav */
    .bottom-nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #f8fafd;
      padding: 12px 18px;
      border-radius: 60px;
      margin: 20px 0 16px 0;
    }

    .nav-item {
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      color: #4a627a;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 12px;
      border-radius: 40px;
      transition: 0.2s;
    }

    .nav-item.active {
      background: #eef2ff;
      color: #2563eb;
    }

    .sep {
      color: #cbd5e1;
      font-size: 14px;
    }

    /* user badges row (exact Hassan + Sara) */
    .user-badges-row {
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      border-top: 1px solid #eef2f8;
      padding-top: 18px;
    }

    .user-badge-entry {
      display: flex;
      align-items: center;
      gap: 12px;
      background: white;
      padding: 8px 16px;
      border-radius: 50px;
      border: 1px solid #ecf3fa;
      font-size: 13px;
    }

    .user-badge-entry strong {
      font-weight: 700;
      color: #0f2b3d;
    }

    .medal-icon {
      font-size: 18px;
    }

    .footer-momentum {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 24px;
      padding-top: 12px;
      font-size: 11px;
      color: #6e8aa8;
      border-top: 1px solid #edf2f8;
    }