:root{
    --cute-bg-1:#fff7fc;
    --cute-bg-2:#f4fff7;
    --cute-bg-3:#f2f7ff;
    --cute-text:#3f4a63;
    --cute-muted:#7b88a8;
}
body{
    color:var(--cute-text);
    background:
        radial-gradient(circle at 8% 10%, #ffd9ee 0 6%, transparent 7%),
        radial-gradient(circle at 90% 16%, #d9eeff 0 7%, transparent 8%),
        radial-gradient(circle at 86% 92%, #d8ffe6 0 7%, transparent 8%),
        linear-gradient(135deg,var(--cute-bg-1),var(--cute-bg-2) 46%,var(--cute-bg-3));
}
.ranking-shell{
    max-width:1180px;
    padding:0 14px 20px;
    margin:8px auto 24px;
}
.fans-hero{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    padding:22px 20px;
    background:linear-gradient(120deg,#ffffffd9,#fff0f8d9,#ecf9ffd9);
    border:1px solid rgba(255,255,255,.92);
    box-shadow:0 16px 34px rgba(92,112,156,.14);
    backdrop-filter:blur(6px);
}
.fans-hero::before,
.fans-hero::after{
    content:"";
    position:absolute;
    border-radius:999px;
    opacity:.34;
    background:linear-gradient(135deg,#ffc3e4,#bfeaff);
    z-index:0;
}
.fans-hero::before{
    width:180px;
    height:180px;
    right:-45px;
    top:-45px;
}
.fans-hero::after{
    width:120px;
    height:120px;
    left:-28px;
    bottom:-35px;
}
.fans-hero h1,
.fans-hero p,
.fans-chip-row{
    position:relative;
    z-index:1;
}
.fans-hero h1{
    margin:0 0 8px;
    font-size:31px;
    font-weight:900;
    letter-spacing:.5px;
    color:#2f3c5a;
}
.fans-hero p{
    margin:0;
    color:var(--cute-muted);
}
.fans-chip{
    border:1px solid #ffd4e9;
    background:linear-gradient(90deg,#fff,#f4f9ff);
    color:#e2589f;
    font-weight:700;
}
#nav-tab{
    border:none;
    background:#ffffffc9;
    border-radius:16px;
    padding:8px;
    box-shadow:0 10px 24px rgba(76,100,151,.1);
    margin:12px 0 2px;
}
#nav-tab .nav-link,
#nav-tab .nav-link:hover,
#nav-tab .nav-link:focus{
    border:none;
    border-radius:12px;
    margin:0 4px;
    color:#5b6c91;
    background:linear-gradient(90deg,#fff,#f6f9ff);
    font-weight:800;
    box-shadow:none;
}
#nav-tab .nav-link.active,
#nav-tab .nav-link.active:hover,
#nav-tab .nav-link.active:focus{
    color:#fff;
    background:linear-gradient(90deg,#ff7cbc,#7fc8ff);
    box-shadow:0 8px 18px rgba(104,130,183,.2);
}
#nav-tab .tab-with-arrows{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    line-height:1.2;
}
#nav-tab .tab-sort-arrows{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:18px;
    height:18px;
}
#nav-tab .tab-sort-arrow{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    color:currentColor;
    font-size:0;
    line-height:1;
    cursor:pointer;
}
#nav-tab .tab-sort-arrow::before{
    content:"";
    width:8px;
    height:8px;
    border-right:2.5px solid currentColor;
    border-bottom:2.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transform-origin:center;
}
#nav-tab .tab-sort-arrow[data-sort-direction="asc"]::before{
    transform:rotate(225deg) translateY(-2px);
}
#nav-tab .tab-sort-arrow:hover,
#nav-tab .tab-sort-arrow:focus{
    color:currentColor;
    background:transparent;
    outline:none;
}
[id^="ranking-xiaren-"]{
    margin-top:10px;
    border-radius:20px;
    padding:16px 14px 10px;
    border:1px solid #e9eefc;
    background:linear-gradient(135deg,#ffffffd1,#f7faffd1,#f7fff8d1);
    box-shadow:0 14px 30px rgba(77,96,142,.1);
}
[id^="ranking-xiaren-"] h2{
    font-weight:900;
    color:#2f3c5a;
}
.filter-sort{
    min-width:320px;
    border:1px solid #e8edfb;
    border-radius:14px;
    padding:10px 12px;
    background:#ffffffd4;
    box-shadow:0 8px 18px rgba(76,104,156,.08);
}
.filter-sort .form-select{
    border-radius:12px;
    border:1px solid #dde6fb;
    color:#516286;
    background:#fff;
    min-height:36px;
}
.intro,
.intro-note{
    border-radius:16px;
    border:1px solid #e9eefc;
    background:linear-gradient(120deg,#fff,#fff7fc,#f3f9ff);
    box-shadow:0 10px 22px rgba(79,102,151,.09);
    padding:14px 14px;
}
.ranking-shell .intro-note{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
    text-align:center;
}
.ranking-shell .intro-note p{
    margin-left:auto;
    margin-right:auto;
}
.intro-note h3{
    font-weight:800;
    color:#2f3c5a;
}
.ranking-shell .actor-list{
    gap:14px 14px;
}
.ranking-shell .actor-list li .card,
.ranking-shell .actor-list li a,
.ranking-shell .actor-list a.card,
.ranking-shell .actor-list div.card{
    border-radius:18px;
    border:1px solid #e8eefb;
    background:linear-gradient(135deg,#fff,#fff8fc,#f2f8ff);
    box-shadow:0 12px 26px rgba(73,96,143,.11);
    transition:transform .2s ease,box-shadow .2s ease;
}
.ranking-shell .actor-list li .card:hover,
.ranking-shell .actor-list li a:hover,
.ranking-shell .actor-list a.card:hover,
.ranking-shell .actor-list div.card:hover{
    transform:translateY(-5px) rotate(-.25deg);
    box-shadow:0 18px 34px rgba(73,96,143,.17);
}
.ranking-shell .actor-list .card img,
.ranking-shell .actor-list li img{
    border:2px solid #ffe1f1;
    border-radius:12px;
    box-shadow:0 6px 12px rgba(90,110,151,.12);
}
.ranking-shell .actor-list li .title{
    color:#2f3c5a;
    font-weight:800;
}
.ranking-shell .actor-list li .description{
    color:#6f7fa1;
}
#friend-links{
    margin-top:18px;
    border-radius:16px;
    border:1px solid #e8eefb;
    background:#ffffffcf;
    box-shadow:0 10px 24px rgba(82,103,148,.08);
    padding:12px 14px;
}
#friend-links h3{
    margin:0 0 8px;
    color:#2f3c5a;
    font-weight:800;
}
@media (max-width:760px){
    .ranking-shell{
        padding:0 10px 18px;
    }
    .fans-hero{
        padding:16px 12px;
        border-radius:16px;
    }
    .fans-hero h1{
        font-size:24px;
    }
    #nav-tab{
        padding:6px;
        border-radius:12px;
    }
    #nav-tab .nav-link{
        margin:0 2px;
        padding:8px 6px;
        font-size:13px;
    }
    [id^="ranking-xiaren-"]{
        padding:12px 10px 8px;
        border-radius:14px;
    }
    .filter-sort{
        min-width:0;
        width:100%;
    }
}