@charset "UTF-8";

.header_bg{
    margin-bottom: -855px;
    height: 824px;
    background: url(/static/index/images/leaderboard/lead_header_bg.webp?v=__VER__) no-repeat;
    background-size: cover;
   
}

/* models -------- */

.models_wrap{

}
.models_title{
    margin-top: 164px;
    font-weight: 700;
    font-size: 56px;
    line-height: 73px;
    text-align: center;

}
.models_title span{
    color: var(--themeColor);
}
.models_txt{
    margin-top: 16px;
    margin-bottom: 32px;

    font-family: Aspekta;
    font-weight: 350;
    font-size: 16px;
    line-height: 29px;

    text-align: center;

    color: #666; 
}

/* Weekly Usage */



/* 模块外层主容器 */
.leaderboard-section {

    margin-top: 120px;

    position: relative;


    width: 100%;
}

.leaderboard-section::before{
    content: "";
    position: absolute;
    top: 190px;
    left: 0;
    background: url(/static/index/images/leaderboard/zuolan.webp?v=__VER__) no-repeat center;
    background-size: cover;
    width: 874px;
    height: 1252px;
    z-index: -1;
}

.leaderboard-section::after{
    content: "";
    position: absolute;
    top: 170px;
    right: 0;
    background: url(/static/index/images/leaderboard/youzi.webp?v=__VER__) no-repeat center;
    background-size: cover;
    width: 851px;
    height: 1210px;
    z-index: -1;
}

/* 标题样式 */
.leaderboard-title {
    font-family: Aspekta;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;

    color: var(--theBcColor);
}

/* ==========================================
    领奖台布局核心：底部对齐 + 容器宽度撑满
    ========================================== */
.podium-container {
    margin-top: 48px;

    display: flex;
    /* align-items: flex-end;  */
    justify-content: center;
    gap: 20px;
    width: 100%;

    height: 312px;
}

/* ==========================================
    卡片基础样式与硬件加速过渡
    ========================================== */
.podium-card {
    flex: 1;
    background-color: #ffffff;
    border-radius: 24px;
    padding: 24px;
    position: relative;
    
    /* GPU 加速与缓动 */
    transform: translate3d(0, 0, 0);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 悬停微动效：向上平滑浮起并加深阴影 */
.podium-card:hover {
    transform: translate3d(0, -6px, 0);
    /* box-shadow: 0 20px 40px rgba(148, 163, 184, 0.15); */
}

/* ==========================================
    Top 1 / 2 / 3 差异化尺寸与独立配色
    ========================================== */

/* TOP 1：中间最高 */
.card-top1 {
    flex: 0 0 420px;
    min-height: 312px; 

    border: 1px solid transparent;
    border-radius: 20px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to top,  #fff, #FFF4EF), 
                    linear-gradient(180deg, #FF6726 0%, rgba(242, 242, 242, 0) 90%);
                    



}
.card-top1 .rank-tag { 
    color: #ff5722; 

    font-family: Aspekta;
    font-weight: 900;
    font-size: 26px;
    line-height: 37px;

    background: linear-gradient(180deg, #FF4C00 50%, #FFFFFF 100%);


    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* TOP 2：左边次高 */
.card-top2 {
    /* min-height: 222px; */
    margin-top: 46px;
    height: 222px;
    border: 1px solid #a7f3d0;

    border: 1px solid transparent;
    border-radius: 20px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to top,  #fff, #EEFFF9), 
                    linear-gradient(180deg, #53D3A2 0%, rgba(242, 242, 242, 0) 100%);
}
.card-top2 .rank-tag { 
    font-family: Aspekta;
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;

    color: #10b981; 

    background: linear-gradient(180deg, #19C785 50%, #FFFFFF 100%);

    /* border-image-source: linear-gradient(90deg, #285DFF 0%, #C728FF 100%); */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* TOP 3：右边最矮 */
.card-top3 {
    margin-top: 46px;
    height: 212px;
    border: 1px solid #bae6fd;

    border: 1px solid transparent;
    border-radius: 20px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to top,  #fff, #EFFCFF), 
                    linear-gradient(180deg, #9AE9FF 0%, rgba(242, 242, 242, 0) 100%);
}
.card-top3 .rank-tag { 

    font-family: Aspekta;
    font-weight: 700;
    font-size: 24px;
    line-height: 37px;

    background: linear-gradient(180deg, #29A3E7 50%, #FFFFFF 100%);
    
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

}


/* ==========================================
    卡片内部栅格与文本排版
    ========================================== */

/* 顶部排名标签 */
.rank-tag {
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

/* 厂商和模型行 */
.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;

    padding-top: 16px;

    border-top: 1px dashed #E6EBF3;


}
.model-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    color: var(--theBcColor);
}
.provider-name {
    font-size: 14px;
    color: var(--theBcColor);
    font-weight: 400;
}

/* 底部细则两列网格布局 */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
    column-gap: 12px;
    font-size: 14px;
}

.label {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #666;

    margin-right: 10px;
}
.value {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: var(--theBcColor);
}

/* 特殊颜色高亮 */
.card-top1 .highlight-val, .card-top1 .highlight-val .label { color: #FF560F; font-weight: 500; }
.card-top2 .highlight-val, .card-top2 .highlight-val .label { color: #10b981; font-weight: 500; }
.card-top3 .highlight-val, .card-top3 .highlight-val .label { color: #29A3E7; font-weight: 500; }

.card-top2.highlight-val .label{
    color: #10b981; font-weight: 500;
}



/* 表格外层容器 */
.table-container {
    width: 100%;
    max-width: 1200px;
    /* background-color: #ffffff; */
    box-shadow: 
    /* 顶部加深暗角：X偏移0, Y偏移40px, 模糊80px, 不扩散, 极淡的灰蓝 */
    inset -54px 40px 80px -20px rgb(189 189 189 / 10%),
    
    /* 全局四周内收阴影：四周整体向内晕染 */
    inset  0 0 60px rgb(255 255 255);;
    


    border-radius: 24px;

    border: 1px solid #fff;
}

/* Flex 布局统一列宽 */
.table-header, .table-row {
    display: flex;
    align-items: center;
    /* padding: 18px 24px; */

    height: 68px;
}

/* 表头样式 */
.table-header {
    font-size: 13px;
    color: #8e9aaf;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 10px;
}

.table-header div{
    font-family: Aspekta;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;

    color: var(--theBcColor);

}
.table-header div, .table-row div{
    padding-left: 20px;
}

.table-row div{
    font-family: Aspekta;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;

    color: #666;

}

/* ==========================================
    核心改动：极度丝滑的 GPU 加速样式
    ========================================== */
.table-row {
    background-color: transparent;
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: 14px;
    color: #2d3748;
    position: relative;
    cursor: pointer;
    
    /* 关键：默认层级 */
    z-index: 1; 

    /* 核心修改 2: 预先开启 3D 硬件加速。
        即使不移动，也让浏览器准备好 GPU 资源。 */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden; /* 隐藏背面，防止翻转时的闪烁 */
    perspective: 1000px;         /* 设置透视，让 3D 变换更自然 */
    
    /* 核心修改 3: 使用更长、更缓和的自定义贝塞尔曲线。
        让“起飞”和“降落”都有明细的减速过程。 */
    transition: 
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), 
    box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1), 
    background-color 0.3s ease;
}

/* ==========================================
    核心改动：Hover 状态
    ========================================== */
.table-row:hover {
    /* 1. 提升层级，必须在最上层 */
    z-index: 10; 
    
    background-color: #ffffff; 
    background: linear-gradient(90deg, #FFFFFF 0%, #F2FAFF 50%, #FFFFFF 100%);

    
    /* 核心修改 4: 结合 translate3d 和 scale。
        不仅仅是放大，还要微微向上浮起（translateY(-2px)），
        这比单纯的 scale 更有空间感，且不会引起布局晃动。 */
    transform: translate3d(0, -2px, 0) scale(1.03); 
    
    /* 核心修改 5: 使用更“深”但更淡的阴影，模拟更高的高度。 */
    box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.05), 
    0 1px 3px rgba(0, 0, 0, 0.01);
}
.table-row:hover div{

    font-size: 14px;
    font-weight: 400;
    color: var(--theBcColor);
}

/* 列宽分配 (与之前一致) */
.col-rank     { width: 7.2%; }
.col-model    { width: 16%; font-weight: 600; color: #1a202c; }
.col-provider { width: 10%; color: #718096; }
.col-usage    { width: 14.5%; }
.col-growth   { width: 10%; font-weight: 600; }
.col-latency  { width: 10%; }
.col-price    { width: 10%; }
.col-mult     { width: 10%; color: #718096; }
.col-action   { width: 10%;  }

.col-rank img{
    width: 24px;
}

/* 业务着色 */
.pos { color: #10b981; }
.neg { color: #ef4444; }

.btn-details {
    color: #2975DF;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s;
}
.btn-details:hover {
    color: #285DFF;
    text-decoration: underline;
}

/* 排名图标 */
.rank-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;


    font-family: Aspekta;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;

    color: #666;
}
.rank-1 { background-color: #fef3c7; color: #b45309; }
.rank-2 { background-color: #d1fae5; color: #065f46; }
.rank-3 { background-color: #e0f2fe; color: #0369a1; }
.rank-normal { color: #a0aec0; padding-left: 8px; }

.ble_btn_wrap{
    position: relative;
    z-index: 2;


    margin-top: 60px;
    display: flex;
    justify-content: center;
}
/* Weekly Usage end */


/* ---------------------- Model Performance Benchmarks----------------------- */



.dashboard-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 203px auto;
}
.dashboard-wrapper::before{
    content: "";
    position: absolute;
    right: -345px;
    bottom: -185px;

    width: 964px;
    height: 1252px;
    /* border: 1px solid red; */

    background: url(/static/index/images/leaderboard/models_wrap_bg.webp?v=__VER__) no-repeat;
    background-size: cover;

    z-index: 0;
    


}

/* ==========================================
    头部标题区域
    ========================================== */
.dashboard-header {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
}
.title-area h2 {
    
    font-family: Aspekta;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;

    color: var(--theBcColor);

    margin-bottom: 16px;
}
.title-area p {
    font-family: Aspekta;
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;

    color: #666;
}
.update-tag {
    font-family: Aspekta;
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;

    color: #666;
}

/* ==========================================
    上方三大指标卡片布局 (Grid)
    ========================================== */
.top-cards-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.benchmark-card {
    background: rgba(255, 255, 255, 0.1);

    border-radius: 10px;
    padding: 24px;
    /* box-shadow: 0 4px 20px rgba(148, 163, 184, 0.05); */
    border: 1px solid rgba(230, 235, 243, 1);

    box-shadow: 
        /* 全局四周内收阴影：四周整体向内晕染 */
        inset  0 0 15px rgb(255 255 255);;
    
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e2e8f0;
}
.card_title {
    font-family: Aspekta;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;

    color: var(--theBcColor);
}
.card-sub-title {

    font-family: Aspekta;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;

    color: #666;
}

/* 排名数据行 */
.data-list .data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 14px;
}
.data-list .data-item:last-child {
    margin-bottom: 0;
}
.model-name {
    font-family: Aspekta;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;

    color: #666;
}
.model-value {
    font-family: Aspekta;
    font-weight: 500;
    font-size: 15px;
    line-height: 23px;

    color: #1FB97F;
}

/* ==========================================
    下方图表卡片布局 (Grid)
    ========================================== */
.bottom-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.chart-card {
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(226, 232, 240, 0.8);


}


.chart-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.chart-label-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}
.chart-label-left img {
    width: 36px;
}
.chart-label-right {
    font-size: 13px;
    color: #94a3b8;
}

/* 图表渲染实体容器 */
.chart-dom {
    width: 540px;
    height: 280px;
}

/* ---------------------- Model Performance Benchmarks-----end------------------ */


/* -------scenario_wrap------------------------------------- */
.scenario_wrap{
    margin-top: 168px;
}
.scenario_title{
    font-family: Aspekta;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;

    color: var(--theBcColor);

}
.sco_card_grid_list{
    margin-top: 48px;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(386px, 1fr));
    gap: 20px;

}
.sco_card{
    padding: 24px;

    border-radius: 20px;
    border: 1px solid #E6EBF3;

    transition: all 0.3s ease-in-out;
}
.sco_card:hover {
    /* --- */
    background: linear-gradient(to right, #fff, #fff);
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #fff, #fff), 
                      linear-gradient(to top,  #C728FF, #285DFF);

    box-shadow: 0px 4px 18px 0px #285DFF1A;

}


.sco_card_header{
    display: flex;
    gap: 8px;
}
.sco_cardicon{
    width: 24px;
}
.sco_cardicon img{
    width: 24px;

}
.sco_card_title{
    font-family: Aspekta;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;

    color: var(--theBcColor);

}
.sco_model_section{
    margin-top: 16px;


}

.section_label{
    font-family: Aspekta;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;

    color: #666;

}
.tags_container{
    margin-top: 24px;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.sco_tag{
    padding: 0 6px;
    height: 21px;

    border-radius: 4px;
    background: #F3FFFB;
    border: 1px solid #D2EEE3;

    font-family: Aspekta;
    font-weight: 400;
    font-size: 12px;

    color: #999;

}
.sco_line{

}
.sco_btn_wrap{
    height: 176px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sco_desc{
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px dashed #E6EBF3;

    font-family: Aspekta;
    font-weight: 400;
    font-size: 15px;
    line-height: 21px;

    color: #666;
}
.sco_btn{
    margin-top: 24px;
}


/* 按钮 */
.sco_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    
    /* --- */
    background: linear-gradient(to right, #fff, #fff);
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #fff, #fff), 
                      linear-gradient(to right, #285DFF, #C728FF);

    /* ----- */

    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    
    transition: all 0.3s ease-out;
    
}
.sco_btn span{
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    background: linear-gradient(90deg, #285DFF 3%, #C728FF 80%);

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    cursor: pointer;
    transition: all 0.3s ease-out;
}

.sco_btn.primary, .sco_btn:hover {
    background-image: linear-gradient(to right, #285DFF, #C728FF), 
                      linear-gradient(to right, #285DFF, #C728FF);
    gap: 15px;
}

.sco_btn.primary span, .sco_btn:hover span {
    color: #fff;
}

.buy_btn_icon{
    display: inline-block;  
    width: 20px;
    height: 20px;
    background: url(/static/index/images/home/buy_btn_icon01.webp?v=__VER__) no-repeat;
    background-size: 100%;
    transition: all .3s ease-out;
}
.sco_btn:hover {
    opacity: 0.9;
}

.sco_btn:hover .buy_btn_icon, .sco_btn.primary .buy_btn_icon{
    background: url(/static/index/images/home/buy_btn_icon02.webp?v=__VER__) no-repeat;
    background-size: 100%;

}


/* -------scenario_wrap-----end-------------------------------- */