/* Auto-extracted from page-ranking.php (P1-5) */
.ranking-tabs{display:flex;gap:4px;margin-bottom:24px;background:white;border-radius:var(--abq-radius-xl);padding:6px;box-shadow:var(--abq-shadow-sm);overflow-x:auto;}
        .ranking-tab{
            flex:1;padding:12px 16px;border:none;background:transparent;
            font-weight:700;font-size:.88rem;color:var(--abq-gray-500);cursor:pointer;
            border-radius:var(--abq-radius-lg);transition:all .3s;white-space:nowrap;
            position: relative; overflow: hidden;
        }
        .ranking-tab::after {
            content: '';
            position: absolute; inset: 0;
            background: var(--abq-primary); opacity: 0;
            border-radius: var(--abq-radius-lg);
            transition: opacity 0.3s ease;
        }
        .ranking-tab.active{background:var(--abq-primary);color:white;box-shadow:0 2px 8px rgba(34,197,94,0.3);}
        .ranking-tab:hover:not(.active){background:var(--abq-gray-100);}

        .podium-container {
            background:linear-gradient(180deg,#dbeafe,#eff6ff);
            border-radius:var(--abq-radius-xl);padding:40px 24px 32px;
            margin-bottom:28px;display:flex;align-items:flex-end;justify-content:center;gap:16px;
            animation: abq-fade-in-up 0.5s 0.1s ease both;
            position: relative; overflow: hidden;
        }
        .podium-container::before {
            content: '';
            position: absolute; top: 10%; left: 10%;
            width: 120px; height: 120px;
            background: radial-gradient(circle, rgba(245,158,11,0.12), transparent 70%);
            border-radius: 50%;
            animation: abq-spotlight 5s ease-in-out infinite;
        }
        @media(max-width:600px){.podium-container{flex-direction:column;align-items:center;}}

        .podium-place{
            text-align:center;display:flex;flex-direction:column;align-items:center;
            animation: abq-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
            position: relative; z-index: 1;
        }
        .podium-place:nth-child(1){animation-delay:0.1s}
        .podium-place:nth-child(2){animation-delay:0.2s}
        .podium-place:nth-child(3){animation-delay:0.35s}
        .podium-avatar{
            width:72px;height:72px;border-radius:50%;background:white;
            display:flex;align-items:center;justify-content:center;font-size:2rem;
            box-shadow:0 4px 16px rgba(0,0,0,0.1);margin-bottom:6px;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .podium-place:hover .podium-avatar{
            transform: scale(1.1) rotate(-5deg);
        }
        .podium-crown{font-size:1.8rem;margin-bottom:-4px;z-index:2;animation: abq-float 2.5s ease-in-out infinite;}
        .podium-place:nth-child(1) .podium-crown{animation-delay:0s}
        .podium-place:nth-child(2) .podium-crown{animation-delay:0.3s, font-size:2.2rem;}
        .podium-place:nth-child(3) .podium-crown{animation-delay:0.6s}
        .podium-name{font-weight:800;font-size:.95rem;}
        .podium-score{font-weight:800;font-size:1.3rem;color:#15803d;}

        .podium-block{width:80px;border-radius:12px 12px 0 0;display:flex;flex-direction:column;
            align-items:center;justify-content:flex-end;padding-bottom:10px;color:white;font-weight:800;font-size:1.5rem;}
        .gold-block{height:100px;background:linear-gradient(180deg,#fbbf24,#f59e0b);}
        .silver-block{height:70px;background:linear-gradient(180deg,#d1d5db,#9ca3af);}
        .bronze-block{height:50px;background:linear-gradient(180deg,#fb923c,#ea580c);}

        .full-ranking-table{background:white;border-radius:var(--abq-radius-xl);overflow:hidden;box-shadow:var(--abq-shadow-sm);}
        .fr-item{
            display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid #f3f4f6;transition:all .25s;
            opacity:0; transform:translateY(10px);
            animation: abq-fade-in-up 0.35s ease forwards;
        }
        .fr-item:nth-child(1){animation-delay:0.05s}
        .fr-item:nth-child(2){animation-delay:0.1s}
        .fr-item:nth-child(3){animation-delay:0.15s}
        .fr-item:nth-child(4){animation-delay:0.2s}
        .fr-item:nth-child(5){animation-delay:0.25s}
        .fr-item:nth-child(6){animation-delay:0.3s}
        .fr-item:nth-child(7){animation-delay:0.35s}
        .fr-item:nth-child(8){animation-delay:0.4s}
        .fr-item:hover{background:#f9fafb;transform:translateX(4px);}.fr-item:last-child{border-bottom:none;}
        .fr-rank{width:36px;font-weight:800;font-size:1rem;color:#9ca3af;flex-shrink:0;transition: transform .3s ease;}
        .fr-item:hover .fr-rank{transform: scale(1.2);}
        .fr-rank.t1{color:#f59e0b}.fr-rank.t2{color:#9ca3af}.fr-rank.t3{color:#ea580c}
        .fr-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#86efac,#3b82f6);
            display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-right:14px;flex-shrink:0;
            transition: transform .3s ease;}
        .fr-item:hover .fr-avatar{transform: scale(1.1);}
        .fr-info{flex:1;}.fr-name{font-weight:700;font-size:.95rem;}
        .fr-streak{font-size:.78rem;color:#9ca3af;font-weight:600;}
        .fr-score{font-weight:800;font-size:1.1rem;color:#22c55e;margin-right:12px;}
        .fr-change{font-size:.85rem;font-weight:700;}.up{color:#22c55e;}.down{color:#ef4444;}

        .my-rank-card{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-radius:var(--abq-radius-xl);
            padding:24px;display:flex;align-items:center;gap:20px;margin-top:24px;
            animation: abq-fade-in-up 0.5s 0.5s ease both;
            transition: transform .3s ease, box-shadow .3s ease;
        }
        .my-rank-card:hover{transform: translateY(-2px);box-shadow: 0 6px 20px rgba(34,197,94,0.12);}
        .my-rank-num{font-size:2rem;font-weight:800;color:#22c55e;transition: transform .3s ease;}
        .my-rank-card:hover .my-rank-num{transform: scale(1.1);}
        .my-rank-info h4{font-weight:800;font-size:1.05rem;margin-bottom:2px;}
        .my-rank-detail{font-size:.82rem;color:#6b7280;font-weight:600;}
        .my-motivation{font-size:.85rem;color:#6b7280;font-style:italic;max-width:160px;line-height:1.4;}
        .my-mascot{font-size:3rem;animation: abq-bounce-gentle 3s ease-in-out infinite;}

        .loading-placeholder{text-align:center;padding:60px 20px;color:var(--abq-gray-400);}
        .loading-placeholder .spinner{display:inline-block;width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:var(--abq-primary);border-radius:50%;animation:abq-spin .8s linear infinite;}
        @keyframes abq-spin{to{transform:rotate(360deg);}}

        .empty-state{text-align:center;padding:60px 20px;}
        .empty-state .icon{font-size:4rem;margin-bottom:16px;animation: abq-float 3s ease-in-out infinite;}
        .empty-state h3{font-size:1.2rem;font-weight:800;margin-bottom:8px;}

        .avatar-emoji{font-size:1.2rem;}

        /* Tab switching pulse */
        .ranking-tab.switched { animation: abq-pop-in 0.3s ease; }
        @keyframes abq-spotlight {
            0%, 100% { transform: translate(0,0) scale(1); }
            50% { transform: translate(30px, -20px) scale(1.3); }
        }