:root {
            --bg-light: #FAF8F5; /* Matching background */
            --text-dark: #1f2937;
            --text-muted: #6b7280;
            --border-color: #e5e7eb;
            --accent-gold: #cfa874; /* Beige/gold */
            --accent-gold-light: #f3e3cc;
            --accent-gold-dark: #a37c4d;
            --accent-silver: #a1a1aa;
            --accent-bronze: #b45309;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
            margin: 0;
            padding: 0;
        }

        .container {
            width: 90%;
            max-width: 1400px;
            margin: 40px auto 80px;
            position: relative;
            z-index: 10;
        }

        /* ── HEADER / TABS ── */
        .leaderboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .tabs-container {
            display: flex;
            gap: 8px;
            background: #fff;
            padding: 6px;
            border-radius: 50px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.02);
            border: 1px solid rgba(0,0,0,0.03);
            overflow-x: auto;
        }

        .tab-btn {
            padding: 10px 24px;
            border-radius: 50px;
            font-family: 'Outfit', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-muted);
            background: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tab-btn.active {
            background: var(--accent-gold);
            color: #fff;
        }

        .tab-btn:hover:not(.active) {
            background: var(--bg-light);
            color: var(--text-dark);
        }

        .last-update {
            font-size: 13px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* ── GRID LAYOUT ── */
        .leaderboard-grid {
            display: grid;
            grid-template-columns: 2.2fr 1fr;
            gap: 24px;
            align-items: start;
        }

        @media (max-width: 1024px) {
            .leaderboard-grid { grid-template-columns: 1fr; }
        }

        .dash-card {
            background: #fff;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.02);
            border: 1px solid rgba(0,0,0,0.03);
            margin-bottom: 24px;
            min-width: 0; /* Prevents card from stretching out of grid columns due to wide children */
        }
        
        .dash-card.transparent {
            background: transparent;
            box-shadow: none;
            border: none;
            padding: 0;
        }

        .card-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-dark);
            margin: 0 0 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .card-title .link {
            font-size: 12px;
            color: var(--accent-gold);
            font-weight: 600;
            text-decoration: none;
        }

        /* ── PODIUM ── */
        .ranking-wrapper {
            width: 100%;
            max-width: 1120px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 24px;
            margin: 40px auto 60px;
            --dark: #132033;
            --muted: #5f5a53;
            --gold: #d99b2b;
            --gold-light: #fff2d4;
            --silver: #b9bec6;
            --bronze: #b36b2b;
            --shadow: 0 15px 40px rgba(68, 45, 23, 0.12);
        }

        .rank-card {
            width: 220px;
            position: relative;
            border-radius: 24px;
            padding: 50px 20px 25px;
            text-align: center;
            overflow: visible;
            box-shadow: var(--shadow);
            transition: 0.35s ease;
            box-sizing: border-box;
        }

        .rank-card:hover {
            transform: translateY(-6px);
        }

        .rank-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            z-index: 1;
            background:
                radial-gradient(circle at 86% 82%, rgba(255,255,255,0.75), transparent 26%),
                radial-gradient(circle at 18% 16%, rgba(255,255,255,0.55), transparent 28%),
                linear-gradient(135deg, rgba(255,255,255,0.28), transparent 42%);
        }

        .rank-card::after {
            content: "";
            position: absolute;
            inset: 12px;
            border-radius: 18px;
            border: 1px solid rgba(255,255,255,0.48);
            pointer-events: none;
            z-index: 2;
        }

        .rank-card.second {
            background: linear-gradient(145deg, #f7eee0 0%, #eadfce 52%, #f7efe3 100%);
            border: 2px solid rgba(182, 166, 142, 0.75);
        }

        .rank-card.first {
            width: 260px;
            padding-top: 65px;
            padding-bottom: 30px;
            background:
                radial-gradient(circle at 78% 80%, rgba(255, 211, 95, 0.42), transparent 34%),
                linear-gradient(145deg, #fff0c8 0%, #f6d08c 55%, #f2c06f 100%);
            border: 2px solid #f3b542;
            box-shadow:
                0 20px 50px rgba(201, 138, 39, 0.25),
                0 0 0 4px rgba(255, 219, 126, 0.15);
            transform: translateY(-12px);
        }

        .rank-card.first:hover {
            transform: translateY(-18px);
        }

        .rank-card.third {
            background: linear-gradient(145deg, #fae5d6 0%, #edc2a4 55%, #e0aa83 100%);
            border: 2px solid rgba(183, 102, 45, 0.75);
        }

        .premium-line {
            width: 140px;
            height: 12px;
            margin: 16px auto 20px;
            position: relative;
            z-index: 4;
        }

        .premium-line::before,
        .premium-line::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 58px;
            height: 2px;
            background: linear-gradient(90deg, transparent, currentColor);
            color: rgba(176, 102, 34, 0.8);
        }

        .premium-line::before { left: 0; }
        .premium-line::after { right: 0; transform: scaleX(-1); }

        .premium-line span {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 8px;
            height: 8px;
            transform: translate(-50%, -50%) rotate(45deg);
            background: currentColor;
            color: #cf8c2f;
        }

        .badge-number {
            position: absolute;
            top: -22px;
            left: 50%;
            transform: translateX(-50%);
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: #fff;
            font-size: 22px;
            font-weight: 800;
            z-index: 10;
            border: 4px solid rgba(255,255,255,0.75);
            text-shadow: 0 2px 3px rgba(0,0,0,0.22);
            box-shadow:
                0 8px 15px rgba(0,0,0,0.18),
                inset 0 3px 6px rgba(255,255,255,0.35);
        }

        .second .badge-number { background: linear-gradient(145deg, #f3f4f5 0%, #9fa4aa 56%, #6f7379 100%); }

        .first .badge-number {
            width: 54px;
            height: 54px;
            top: -27px;
            font-size: 26px;
            background: linear-gradient(145deg, #ffd875 0%, #eba223 55%, #b96a12 100%);
        }

        .third .badge-number { background: linear-gradient(145deg, #e7a35d 0%, #b66224 55%, #7c3b13 100%); }

        .crown {
            position: absolute;
            top: 28px;
            right: 36px;
            font-size: 30px;
            z-index: 8;
            color: #df941d;
            filter: drop-shadow(0 4px 6px rgba(139, 79, 11, 0.28));
        }

        .avatar {
            position: relative;
            z-index: 5;
            width: 90px;
            height: 90px;
            margin: 0 auto 20px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 38px;
            font-weight: 500;
            letter-spacing: 1px;
            color: #102235;
            background: linear-gradient(145deg, #ffd5df, #ffe9ef);
            border: 4px solid rgba(255,255,255,0.92);
            box-shadow:
                0 10px 15px rgba(30, 26, 20, 0.18),
                0 0 0 3px rgba(204, 146, 63, 0.45);
        }

        .first .avatar {
            width: 110px;
            height: 110px;
            font-size: 46px;
            color: #fff;
            background: linear-gradient(145deg, #6b4937, #4d3328);
            box-shadow:
                0 12px 20px rgba(66, 43, 28, 0.26),
                0 0 0 4px rgba(241, 178, 72, 0.75);
        }

        .name {
            position: relative;
            z-index: 5;
            font-size: 18px;
            line-height: 1.2;
            font-weight: 800;
            letter-spacing: -0.5px;
            margin-bottom: 6px;
            color: #102033;
        }

        .first .name { font-size: 22px; margin-bottom: 8px; }

        .kelas {
            position: relative;
            z-index: 5;
            font-size: 15px;
            color: #5b5147;
            font-weight: 500;
            margin-bottom: 0;
        }
        
        .first .kelas { font-size: 16px; }

        .points {
            position: relative;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .star {
            font-size: 26px;
            color: #e59a24;
            filter:
                drop-shadow(0 3px 3px rgba(120, 75, 13, 0.23))
                drop-shadow(0 0 4px rgba(255, 213, 104, 0.35));
        }

        .point-number {
            font-size: 26px;
            font-weight: 900;
            letter-spacing: -0.5px;
            color: #102033;
        }
        
        .first .point-number { font-size: 32px; }
        .first .star { font-size: 30px; }

        .point-label {
            font-size: 15px;
            color: #4f4a45;
            font-weight: 500;
            margin-left: 2px;
        }

        .shine {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            overflow: hidden;
            z-index: 3;
            pointer-events: none;
        }

        .shine::before {
            content: "";
            position: absolute;
            width: 180%;
            height: 150%;
            right: -110%;
            bottom: -75%;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.42);
            box-shadow:
                0 0 25px rgba(255,255,255,0.38),
                inset 0 0 20px rgba(255,255,255,0.20);
            transform: rotate(-18deg);
        }

        .shine::after {
            content: "";
            position: absolute;
            width: 80px;
            height: 80px;
            right: 15px;
            bottom: 18px;
            background: radial-gradient(circle, rgba(255,255,255,0.9), transparent 62%);
            opacity: 0.45;
            filter: blur(8px);
        }

        @media (max-width: 980px) {
            .ranking-wrapper { flex-direction: column; gap: 34px; }
            .rank-card, .rank-card.first {
                width: 100%;
                max-width: 320px;
                transform: none;
            }
            .rank-card.first { order: 1; }
            .rank-card.second { order: 2; }
            .rank-card.third { order: 3; }
            .rank-card.first:hover, .rank-card:hover { transform: translateY(-8px); }
        }

        /* ── TABLE ── */
        .leaderboard-table {
            width: 100%;
            border-collapse: collapse;
        }

        .leaderboard-table th {
            text-align: left;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            padding: 16px 12px;
            border-bottom: 1px solid var(--border-color);
        }

        .leaderboard-table td {
            font-size: 13px;
            color: var(--text-dark);
            padding: 16px 12px;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }
        
        .leaderboard-table tr:last-child td { border-bottom: none; }

        .rank-cell { text-align: center; width: 60px; font-weight: 700; }
        .rank-medal { font-size: 20px; }
        .rank-1 { color: #f59e0b; }
        .rank-2 { color: #9ca3af; }
        .rank-3 { color: #b45309; }

        .user-cell {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 600;
        }

        .user-cell img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }

        .points-cell { font-weight: 700; color: #d97706; }
        
        .badges-cell {
            display: flex;
            gap: 4px;
        }
        
        .mini-badge {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #fff;
        }

        /* ── RIGHT COLUMN CARDS ── */
        
        /* Badges */
        .badges-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            text-align: center;
        }

        .badge-box { display: flex; flex-direction: column; align-items: center; }
        
        .badge-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-bottom: 8px;
            color: #fff;
        }

        .badge-box h5 { font-size: 11px; font-weight: 600; color: var(--text-dark); margin: 0 0 4px; line-height: 1.2;}
        .badge-box p { font-size: 12px; color: var(--text-muted); margin: 0; font-weight: 500;}

        /* Progress Bars */
        .class-list { display: flex; flex-direction: column; gap: 16px; }
        .class-item { display: flex; align-items: center; gap: 12px; }
        .class-rank { font-weight: 700; font-size: 14px; width: 16px; color: var(--text-muted); }
        .class-name { font-size: 13px; font-weight: 600; width: 70px; }
        
        .progress-wrapper { flex: 1; display: flex; align-items: center; gap: 10px;}
        .progress-bar-bg { width: 100%; height: 8px; background: var(--bg-light); border-radius: 4px; overflow: hidden; }
        .progress-bar-fill { height: 100%; background: var(--accent-gold); border-radius: 4px; }
        .class-points { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap;}

        .btn-full {
            display: block;
            width: 100%;
            padding: 10px;
            text-align: center;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-dark);
            font-family: 'Outfit', sans-serif;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            margin-top: 16px;
            transition: all 0.2s;
        }
        .btn-full:hover { background: var(--bg-light); border-color: #d1d5db; }

        /* Tips List */
        .tips-list { display: flex; flex-direction: column; gap: 12px; }
        .tip-item { display: flex; gap: 12px; align-items: flex-start; }
        .tip-icon { color: var(--text-muted); font-size: 14px; margin-top: 2px;}
        .tip-text { font-size: 13px; color: var(--text-dark); margin: 0; line-height: 1.5; }

        /* Accordion */
        .accordion-item {
            border-bottom: 1px solid var(--border-color);
        }
        .accordion-header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: none;
            border: none;
            padding: 14px 0;
            font-family: 'Outfit', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-dark);
            cursor: pointer;
            text-align: left;
        }
        .accordion-header i { color: var(--text-muted); transition: transform 0.3s; }
        .accordion-header.active i { transform: rotate(180deg); }
        
        .accordion-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .accordion-header.active + .accordion-body { max-height: 300px; }
        
        .calc-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px;}
        .calc-item { display: flex; justify-content: space-between; font-size: 13px; }
        .calc-label { color: var(--text-dark); display: flex; align-items: center; gap: 8px;}
        .calc-label i { color: var(--text-muted); width: 16px; text-align: center;}
        .calc-val { font-weight: 600; color: var(--text-dark); }
        
        .accordion-note { font-size: 11px; color: var(--text-muted); margin-bottom: 14px; }

        /* Custom Bar Chart */
        .bar {
            width: 24px;
            border-radius: 4px 4px 0 0;
            position: relative;
            transition: height 0.4s ease;
        }
        .bar-gold { background-color: #d6a15c; }
        .bar-black { background-color: #2f3131; }
        
        .bar::before {
            content: attr(data-val);
            position: absolute;
            top: -22px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
            font-weight: 700;
            color: var(--text-dark);
        }
        .x-label {
            position: absolute;
            bottom: -28px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
            color: var(--text-muted);
            white-space: nowrap;
        }
        .chart-container {
            border-bottom: 1px solid #e5e7eb;
            margin-bottom: 30px; 
            padding-bottom: 0px;
        }

        /* ── RESPONSIVE MEDIA QUERIES (MOBILE OVERRIDES) ── */
        @media (max-width: 1024px) {
            .leaderboard-grid {
                grid-template-columns: 1fr !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            .left-col, .right-col {
                min-width: 0 !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
        }

        @media (max-width: 768px) {
            .container {
                width: 100% !important;
                padding: 0 16px !important;
                margin: 20px auto 40px !important;
                box-sizing: border-box !important;
            }
            .dash-card {
                padding: 16px !important;
                border-radius: 14px !important;
                margin-bottom: 16px !important;
                box-sizing: border-box !important;
            }
            .card-title {
                font-size: 15px !important;
                margin-bottom: 16px !important;
            }
            
            /* Enforce Table wrapper scroll */
            .table-membaca > div, .table-meminjam > div {
                overflow-x: auto !important;
                width: 100% !important;
                display: block !important;
                -webkit-overflow-scrolling: touch !important;
                box-sizing: border-box !important;
            }
            
            .leaderboard-table th, .leaderboard-table td {
                padding: 8px 4px !important;
                font-size: 12px !important;
            }
            .user-cell {
                gap: 8px !important;
            }
            .user-cell img {
                width: 28px !important;
                height: 28px !important;
            }
        }

        @media (max-width: 576px) {
            /* Limit member name width to prevent table overflow */
            .user-cell {
                max-width: 120px !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                display: inline-flex !important;
            }

            /* Leaderboard tabs adjustments */
            .tabs-container {
                width: 100% !important;
                justify-content: center !important;
                box-sizing: border-box !important;
            }
            .tab-btn {
                padding: 8px 14px !important;
                font-size: 12.5px !important;
            }
            .last-update {
                width: 100% !important;
                justify-content: center !important;
                font-size: 11.5px !important;
            }

            /* Compact Horizontal podium cards */
            .ranking-wrapper {
                flex-direction: column !important;
                gap: 10px !important;
                margin: 16px auto 24px !important;
                padding: 0 !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            
            .rank-card {
                width: 100% !important;
                max-width: none !important;
                height: auto !important;
                padding: 12px 12px !important;
                display: grid !important;
                grid-template-columns: auto auto 1fr auto !important;
                grid-template-rows: auto auto !important;
                align-items: center !important;
                column-gap: 8px !important;
                row-gap: 2px !important;
                border-radius: 12px !important;
                text-align: left !important;
                box-sizing: border-box !important;
            }
            
            .rank-card.first {
                transform: scale(1.01) !important;
                margin: 2px 0 !important;
                border: 2px solid #f3b542 !important;
                padding-top: 14px !important;
                padding-bottom: 14px !important;
            }
            
            .badge-number {
                grid-column: 1 / 2 !important;
                grid-row: 1 / 3 !important;
                position: static !important;
                transform: none !important;
                width: 24px !important;
                height: 24px !important;
                font-size: 13px !important;
                border-width: 2px !important;
                box-shadow: none !important;
                display: grid !important;
                place-items: center !important;
            }
            
            .first .badge-number {
                width: 28px !important;
                height: 28px !important;
                font-size: 15px !important;
            }
            
            .crown {
                position: absolute !important;
                top: -12px !important;
                left: 36px !important;
                right: auto !important;
                font-size: 18px !important;
                transform: rotate(-15deg) !important;
                z-index: 10 !important;
            }
            
            .avatar {
                grid-column: 2 / 3 !important;
                grid-row: 1 / 3 !important;
                width: 40px !important;
                height: 40px !important;
                font-size: 16px !important;
                margin: 0 !important;
                border-width: 2px !important;
                box-shadow: none !important;
            }
            .first .avatar {
                width: 44px !important;
                height: 44px !important;
                font-size: 18px !important;
            }
            
            .rank-card .name {
                grid-column: 3 / 4 !important;
                grid-row: 1 / 2 !important;
                font-size: 13.5px !important;
                margin: 0 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                width: 100% !important;
            }
            .first .name {
                font-size: 14px !important;
            }
            
            .rank-card .kelas {
                grid-column: 3 / 4 !important;
                grid-row: 2 / 3 !important;
                font-size: 11px !important;
                margin: 0 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                width: 100% !important;
            }
            
            .premium-line {
                display: none !important;
            }
            
            .points {
                grid-column: 4 / 5 !important;
                grid-row: 1 / 3 !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: flex-end !important;
                gap: 4px !important;
                margin: 0 !important;
            }
            
            .star {
                font-size: 16px !important;
            }
            .first .star {
                font-size: 18px !important;
            }
            
            .point-number {
                font-size: 16px !important;
            }
            .first .point-number {
                font-size: 18px !important;
            }
            
            .point-label {
                font-size: 11px !important;
                margin: 0 !important;
            }
            
            /* Sidebar items custom responsive grids */
            .badges-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 12px !important;
            }
        }