/* 设计 token 与 cpu/view/newindex.html、cpu/pk.html 同源 */
:root {
    --tt-primary: #6366f1;
    --tt-intel:   #0071c5;
    --tt-amd:     #ed1c24;
    --tt-text-1:  #1e293b;
    --tt-text-2:  #475569;
    --tt-text-3:  #94a3b8;
    --tt-line:    #e8ecf4;
    --tt-line-2:  #f1f5f9;
    --tt-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.xinyue_container { background: #f5f7fc; padding-right: 80px; }
@media (max-width: 768px) { .xinyue_container { padding-right: 0; } }

.tt-wrap { max-width: 1180px; margin: 0 auto; }

/* ---------- 页头 ---------- */
.tt-head { margin-bottom: 18px; }
.tt-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tt-back {
    display: inline-flex; align-items: center; gap: 5px; background: #fff;
    border: 1px solid var(--tt-line); border-radius: 40px; padding: 5px 14px;
    font-size: 12.5px; color: var(--tt-text-2); text-decoration: none; transition: all .15s;
}
.tt-back:hover { border-color: var(--tt-primary); color: var(--tt-primary); }
.tt-head h1 {
    margin: 0; font-size: 24px; font-weight: 700; color: var(--tt-text-1); letter-spacing: -.01em;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.tt-head h1 .tt-mode {
    font-size: 13px; font-weight: 600; color: var(--tt-primary);
    background: #eef2ff; border-radius: 20px; padding: 3px 12px;
}
.tt-head h1 .tt-mode.igpu { background: #ecfdf5; color: #059669; }
.tt-sub { margin: 7px 0 0; font-size: 12.5px; color: var(--tt-text-3); display: flex; gap: 14px; flex-wrap: wrap; }
.tt-sub b { font-family: var(--tt-mono); color: var(--tt-text-2); font-weight: 600; }

/* ---------- 筛选栏 ---------- */
.tt-filters {
    background: #fff; border: 1px solid var(--tt-line); border-radius: 14px;
    padding: 12px 14px; margin-bottom: 14px;
    display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
}
.tt-fgroup { display: flex; align-items: center; gap: 8px; }
.tt-fgroup > label { font-size: 12px; color: var(--tt-text-3); white-space: nowrap; }
.tt-select {
    background: #fff; border: 1px solid var(--tt-line); border-radius: 8px;
    padding: 6px 10px; font-size: 13px; color: var(--tt-text-1); outline: none; cursor: pointer;
    font-family: inherit;
}
.tt-select:focus { border-color: var(--tt-primary); }
.tt-seg { display: flex; background: #f1f5f9; border-radius: 8px; padding: 2px; gap: 2px; }
.tt-seg a {
    padding: 5px 16px; border-radius: 6px; font-size: 13px; color: var(--tt-text-2);
    text-decoration: none; transition: all .15s; white-space: nowrap;
}
.tt-seg a:hover { color: var(--tt-primary); }
.tt-seg a.on { background: #fff; color: var(--tt-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ---------- 榜单 ---------- */
.tt-card { background: #fff; border: 1px solid var(--tt-line); border-radius: 14px; overflow: hidden; }
.tt-thead, .progress-item {
    display: grid;
    /* 名次 | 名称 | 条子 | 分数。名称和条子都给 minmax(0,…)：
       否则长 CPU 名会把 grid 子项顶开,整页横向溢出 */
    grid-template-columns: 52px minmax(0, 1fr) minmax(90px, 2.1fr) 108px;
    align-items: center;
    column-gap: 14px;
}
.tt-thead {
    padding: 11px 18px; border-bottom: 1px solid var(--tt-line);
    font-size: 11.5px; color: var(--tt-text-3); background: #fbfcfe;
    position: sticky; top: 0; z-index: 5;
}
.tt-thead > :nth-child(1) { text-align: right; }
.tt-thead > :nth-child(4) { text-align: right; }

.dual-progress { display: flex; flex-direction: column; }

.progress-item {
    padding: 0 18px; height: 36px; text-decoration: none;
    border-bottom: 1px solid var(--tt-line-2); transition: background .12s;
}
.progress-item:last-child { border-bottom: none; }
.progress-item:hover { background: #f8faff; }

/* 名次 */
.tt-rank {
    text-align: right; font-family: var(--tt-mono); font-size: 12.5px;
    color: var(--tt-text-3); font-weight: 500;
}
/* 前三名克制地强调一下:只改颜色和字重,不加大色块 */
.progress-item.top1 .tt-rank { color: #b45309; font-weight: 700; }
.progress-item.top2 .tt-rank { color: #64748b; font-weight: 700; }
.progress-item.top3 .tt-rank { color: #a16207; font-weight: 600; }
.progress-item.top1 .tt-name { font-weight: 700; }

/* 名称 */
.tt-name {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    font-size: 13px; color: var(--tt-text-1);
}
.tt-name > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tt-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--tt-primary); }
.tt-dot.intel { background: var(--tt-intel); }
.tt-dot.amd   { background: var(--tt-amd); }

/* 条子 */
.tt-bar { height: 8px; background: #eef2f7; border-radius: 6px; overflow: hidden; }
.progress-fill {
    display: block; height: 100%; width: 0; border-radius: 6px;
    background: linear-gradient(90deg, var(--tt-primary), #8b8ff5);
    transition: width .3s;
}
.progress-fill.intel { background: linear-gradient(90deg, var(--tt-intel), #3d9bdd); }
.progress-fill.amd   { background: linear-gradient(90deg, var(--tt-amd),   #f4616a); }

/* 分数 + 百分比 */
.tt-score { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.score-num { font-family: var(--tt-mono); font-size: 13px; font-weight: 600; color: var(--tt-text-1); }
.score-pct { font-family: var(--tt-mono); font-size: 11px; color: var(--tt-text-3); min-width: 34px; text-align: right; }

/* hash 定位命中的那一个 */
.progress-item.active {
    background: #eef2ff;
    box-shadow: inset 3px 0 0 var(--tt-primary);
}

/* ---------- 空态 / 页脚 ---------- */
.tt-empty { padding: 64px 20px; text-align: center; color: var(--tt-text-3); font-size: 13px; }
.tt-foot { margin: 16px 0 8px; text-align: center; font-size: 11.5px; color: var(--tt-text-3); line-height: 1.9; }

@media (max-width: 720px) {
    .tt-thead { display: none; }
    .progress-item { grid-template-columns: 40px minmax(0, 1fr) 74px; column-gap: 10px; padding: 0 12px; }
    .tt-bar { display: none; }
    .tt-head h1 { font-size: 19px; }
    .score-pct { display: none; }
}
@media (max-width: 480px) {
    .xinyue_container { padding: 16px 12px 32px; }
    .tt-filters { flex-direction: column; align-items: stretch; }
    .tt-fgroup { justify-content: space-between; }
    .tt-back { display: none; }
}