:root{
  --bg:#f5f6f8; --panel:#fff; --ink:#1f2329; --sub:#8a919f; --line:#eef0f3;
  --red:#e23a3a; --green:#1aa260; --blue:#2563eb; --blue-d:#1d4ed8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}
/* 顶栏 */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;gap:10px}
.title{display:flex;align-items:center;gap:12px}
.brand-logo{width:40px;height:40px;border-radius:9px;flex:0 0 auto;
  box-shadow:0 2px 8px rgba(79,70,229,.28)}
.title-text{display:flex;flex-direction:column;gap:2px}
.title h1{margin:0;font-size:19px;line-height:1.2}
.tag{color:var(--sub);font-size:12px;margin-left:8px}
.title-text .tag{margin-left:0}
.topctl{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.topctl label{font-size:13px;color:var(--sub);display:flex;align-items:center;gap:6px}
select,input{font:inherit;padding:7px 10px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:var(--ink)}
.periodTabs{display:flex;gap:6px}
.periodTabs button{padding:7px 16px;border:1px solid #d0d5dd;background:#fff;border-radius:8px;
  cursor:pointer;font-weight:600;color:#475467}
.periodTabs button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
/* 控制区 */
.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line)}
.controls label{font-size:13px;color:var(--sub);display:flex;align-items:center;gap:6px}
.btn{padding:8px 16px;border:1px solid var(--blue);background:var(--blue);color:#fff;border-radius:8px;
  cursor:pointer;font-weight:600}
.btn:hover{background:var(--blue-d)}
.btn:disabled{opacity:.6;cursor:default}
.status{font-size:12px;color:var(--sub);margin-left:auto}
.datebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--line)}
.datebar label{font-size:13px;color:var(--sub);display:flex;align-items:center;gap:6px}
.date-hint{font-size:12px;color:var(--sub)}
/* 布局 */
.layout{display:grid;grid-template-columns:minmax(420px,1fr) minmax(420px,1.1fr);gap:16px;padding:16px 20px;align-items:start}
.layout.single{grid-template-columns:1fr}
@media(max-width:980px){.layout{grid-template-columns:1fr}}
.panel{background:var(--panel);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden}
.panel-head{padding:10px 14px;font-size:13px;color:var(--sub);border-bottom:1px solid var(--line)}
.panel-head .hint{margin-left:10px;font-size:12px}
.tableWrap{max-height:78vh;overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 10px;text-align:right;font-size:13px;border-bottom:1px solid var(--line);white-space:nowrap}
th{position:sticky;top:0;background:#f0f2f5;color:#475467;font-weight:600;cursor:pointer;user-select:none;z-index:2}
th:hover{background:#e3e7ec}
th.sortable .arrow{font-size:10px;color:#aeb6c0;margin-left:3px;font-weight:400}
th.sorted{color:#1d2939}
th.sorted .arrow{color:var(--blue);font-weight:700}
th.name,td.name{text-align:left}
td.name b{font-weight:600}
td.name small{color:var(--sub);font-weight:400;margin-left:6px}
.num.main{font-weight:700}
.up{color:var(--red)} .down{color:var(--green)}
.rpshi{color:var(--red);font-weight:700} .rpslo{color:var(--green)}
.cat{color:var(--sub);font-size:12px}
.cmp{text-align:center;width:54px}
.cmp input{cursor:pointer;width:16px;height:16px}
/* 图表 */
.chartPanel{padding:14px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.card h3{margin:0 0 8px;font-size:15px}
.badge{display:inline-block;min-width:18px;padding:1px 7px;background:var(--blue);color:#fff;border-radius:10px;font-size:12px;text-align:center}
.chart{width:100%;height:320px}
#scatterChart{height:300px}
#compareChart{height:300px}
/* RPS 英雄榜 */
.hero{padding:14px 20px;background:var(--panel)}
/* 视图切换导航 */
.viewTabs{display:flex;gap:6px;padding:12px 20px 0;background:var(--panel);border-bottom:1px solid var(--line)}
.viewTabs button{padding:8px 18px;border:1px solid #d0d5dd;background:#fff;border-radius:8px 8px 0 0;
  cursor:pointer;font-weight:600;color:#475467;border-bottom:none;margin-bottom:-1px}
.viewTabs button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.streakView{padding:16px 20px}
.streak-subtabs{display:flex;gap:8px;margin:14px 16px 0}
.streak-subtabs button{padding:6px 18px;border:1px solid var(--line);background:var(--panel);border-radius:16px;font-size:13px;color:var(--sub);cursor:pointer;transition:.15s}
.streak-subtabs button:hover{border-color:var(--blue)}
.streak-subtabs button.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.streakPBody td.empty{text-align:center;color:var(--sub);padding:18px}
.hero-title{font-size:15px;font-weight:700;margin-bottom:10px}
.hero-title .hero-sub{font-size:12px;color:var(--sub);font-weight:400;margin-left:4px}
.hero-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:760px){.hero-cards{grid-template-columns:repeat(2,1fr)}}
.hero-card{background:linear-gradient(135deg,#fbfcfe,#f0f4fb);border:1px solid #e6ebf3;border-radius:10px;padding:12px 14px}
.hero-card.empty{opacity:.55}
.hero-card .hc-p{font-size:12px;color:var(--sub);margin-bottom:4px}
.hero-card .hc-name{font-size:17px;font-weight:700;line-height:1.2}
.hero-card .hc-cat{font-size:12px;color:var(--sub);margin-top:2px}
.hero-card .hc-rps{margin-top:8px;font-size:13px;color:var(--sub)}
.hero-card .hc-rps b{color:var(--red);font-size:18px;margin-left:2px}
.hero-card .hc-line{margin-top:4px;font-size:12px;color:#475467}
.hero-card .hc-line .up{font-weight:600}
.hero-card .hc-line .down{font-weight:600}
.hero-loading{color:var(--sub);font-size:13px}
.hero-empty{padding:18px 14px;color:var(--sub);font-size:13px;text-align:center;background:#fafbfc;border:1px dashed var(--line);border-radius:10px;grid-column:1/-1}
td.empty{text-align:center;color:var(--sub);padding:18px;font-size:13px}
/* 指标说明 */
.metrics-info{margin:14px 20px 0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px 16px}
.metrics-info summary{cursor:pointer;font-weight:600;font-size:14px;padding:10px 0;color:#475467}
.metrics-info summary:hover{color:var(--ink)}
.metrics-body{padding:4px 0 14px;border-top:1px solid var(--line)}
.metric-row{display:flex;gap:14px;padding:7px 0;font-size:13px;line-height:1.5;border-bottom:1px dashed #eef0f3}
.metric-row:last-child{border-bottom:none}
.metric-row>b{flex:0 0 120px;color:var(--blue-d)}
.metric-row>span{color:#475467;flex:1}