:root {
      --bg:        #0D0712;
      --bg2:       #130B1C;
      --surface:   #1B1027;
      --surface2:  #241533;
      --border:    #2E1E42;
      --border2:   #3B2252;
      --green:     #45b36a;
      --green2:    #00ff56;
      --green-dim: #2d7a47;
      --purple:    #8b6ecf;
      --purple2:   #4f3f75;
      --text:      #F2F0F7;
      --text-dim:  #9985B8;
      --rank1:     #45b36a;
      --rank2:     #8b6ecf;
      --rank3:     #bf9bbc;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Inter', 'DM Sans', -apple-system, sans-serif;
      min-height: 100vh;
      padding-bottom: 60px;
    }

    /* ── Top bars ─────────────────────────────────────────── */
    .topbar-black { background:#000; height:10px; width:100%; }
    .topbar-white {
      background:#fff; padding:14px 24px;
      display:flex; align-items:center; justify-content:center;
      border-bottom:1px solid #e0e0e0;
    }
    .topbar-white img { height:48px; width:auto; }

    /* ── Header ──────────────────────────────────────────── */
    .header {
      background: linear-gradient(160deg, #180821 0%, #0D0712 60%, #130B1C 100%);
      border-bottom: 1px solid var(--border2);
      padding: 36px 24px 32px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .header::before {
      content:''; position:absolute; inset:0;
      background: radial-gradient(ellipse at 50% -10%, rgba(69,179,106,0.12) 0%, transparent 65%);
      pointer-events:none;
    }
    .header::after {
      content:''; position:absolute; inset:0;
      background: radial-gradient(ellipse at 80% 100%, rgba(139,110,207,0.08) 0%, transparent 60%);
      pointer-events:none;
    }
    .page-title {
      font-family:'DM Sans','Inter',sans-serif;
      font-size: clamp(26px,6vw,46px);
      font-weight:800; color:var(--text);
      letter-spacing:-0.5px; line-height:1.1; margin-bottom:8px;
    }
    .page-title span { color:var(--green); }
    .month-badge {
      display:inline-flex; align-items:center; gap:7px;
      background:rgba(69,179,106,0.1); border:1px solid rgba(69,179,106,0.25);
      border-radius:100px; padding:6px 16px;
      font-size:12px; font-weight:700; color:var(--green);
      letter-spacing:1.5px; text-transform:uppercase; margin-top:14px;
    }

    /* ── Stats ───────────────────────────────────────────── */
    .stats-bar {
      display:flex; justify-content:center;
      max-width:600px; margin:0 auto; padding:24px 16px 8px;
    }
    .stat { flex:1; text-align:center; padding:12px 8px; }
    .stat + .stat { border-left:1px solid var(--border); }
    .stat-value { font-size:30px; font-weight:900; color:var(--green); line-height:1; }
    .stat-label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); margin-top:5px; }

    /* ── Leaderboard ─────────────────────────────────────── */
    .leaderboard { max-width:680px; margin:8px auto 0; padding:0 16px; }
    .section-label {
      font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
      color:var(--text-dim); padding:0 4px 10px; border-bottom:1px solid var(--border);
      margin-bottom:10px; display:flex; justify-content:space-between;
    }
    .rep-card {
      display:flex; align-items:center; gap:14px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:12px; padding:16px 20px; margin-bottom:8px;
      position:relative; overflow:hidden;
    }
    .rep-card::before {
      content:''; position:absolute; left:0; top:0; bottom:0;
      width:3px; background:var(--border2); border-radius:3px 0 0 3px;
    }
    .rep-card.rank-1::before { background:var(--green); box-shadow:0 0 10px rgba(69,179,106,0.5); }
    .rep-card.rank-2::before { background:var(--purple); }
    .rep-card.rank-3::before { background:var(--rank3); }
    .rep-card.rank-1 { background:linear-gradient(135deg,rgba(69,179,106,0.06) 0%,var(--surface) 50%); border-color:rgba(69,179,106,0.2); }
    .rank-badge {
      width:34px; height:34px; border-radius:9px;
      display:flex; align-items:center; justify-content:center;
      font-size:15px; font-weight:900; flex-shrink:0;
      background:var(--surface2); color:var(--text-dim); border:1px solid var(--border);
    }
    .rank-badge.rank-1 { background:rgba(69,179,106,0.15); color:var(--green); border-color:rgba(69,179,106,0.3); font-size:17px; }
    .rank-badge.rank-2 { background:rgba(139,110,207,0.15); color:var(--purple); border-color:rgba(139,110,207,0.3); }
    .rank-badge.rank-3 { background:rgba(191,155,188,0.12); color:var(--rank3); border-color:rgba(191,155,188,0.25); }
    .rep-info { flex:1; min-width:0; }
    .rep-name { font-size:16px; font-weight:700; color:var(--text); }
    .rank-1 .rep-name { color:#fff; }
    .progress-row { margin-top:8px; }
    .progress-bg { height:3px; background:var(--border); border-radius:100px; overflow:hidden; }
    .progress-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--green-dim),var(--green)); transition:width 0.8s cubic-bezier(0.34,1.56,0.64,1); }
    .rank-1 .progress-fill { background:linear-gradient(90deg,#2d7a47,#00ff56); }
    .rank-2 .progress-fill { background:linear-gradient(90deg,#4f3f75,#8b6ecf); }
    .contract-block { text-align:right; flex-shrink:0; }
    .contract-num { font-size:26px; font-weight:900; color:var(--text); line-height:1; }
    .rank-1 .contract-num { color:var(--green); }
    .contract-lbl { font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); margin-top:3px; }
    .footer { text-align:center; color:var(--text-dim); font-size:11px; padding-top:28px; }
    .updated { color:var(--green-dim); }
    .loading-state { text-align:center; padding:60px 24px; color:var(--text-dim); }
    .loading-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin:0 3px; animation:pulse 1.2s ease-in-out infinite; }
    .loading-dot:nth-child(2) { animation-delay:0.2s; }
    .loading-dot:nth-child(3) { animation-delay:0.4s; }
    @keyframes pulse { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1)} }
    @media(max-width:480px){
      .rep-card{padding:12px 14px;gap:10px;}
      .contract-num{font-size:22px;}
      .rep-name{font-size:14px;}
    }