/* 训练记录页（2026-11-04 重做）。外框和商店一样用 rewards-window；画面由 records-page.js 生成。 */
#recordsPage.rewards-window{width:min(1120px,calc(100vw - 40px));background:#f5f7f9}
#recordsPage .rewards-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 28px 18px}
#recordsPage .rewards-heading h2{margin:4px 0 0;font-size:26px}
#recordsPage .page-heading-actions{display:flex;align-items:center;gap:10px}
#recordsPage #clearAllRecords{height:34px;padding:0 14px;border:1px solid #f0d6d8;border-radius:9px;background:#fff;color:#cc4f58;font-size:12.5px;font-weight:600;transition:background .15s ease,border-color .15s ease}
#recordsPage #clearAllRecords:hover{border-color:#e9aeb3;background:#fff5f5}
.rec-body{display:grid;gap:16px;padding:20px 28px 30px}

/* 模式筛选 */
.rec-filters{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;margin:0 -2px;scrollbar-width:none}
.rec-filters::-webkit-scrollbar{display:none}
.rec-filter{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:1px solid #e3e9ec;border-radius:999px;background:#fff;color:#5f6d77;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.rec-filter i{width:8px;height:8px;border-radius:50%;background:var(--chip)}
.rec-filter small{min-width:18px;padding:1px 6px;border-radius:999px;background:#f0f4f6;color:#8b98a1;font-size:10.5px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;transition:background .18s ease,color .18s ease}
.rec-filter:hover{border-color:#cfe3e8;color:#26404e;transform:translateY(-1px)}
.rec-filter.active{border-color:#bfe7ee;background:#e9f7f9;color:#0b8698}
.rec-filter.active small{background:#13b8cf;color:#fff}
.rec-filter:focus-visible{outline:2px solid #13b8cf;outline-offset:2px}

/* 汇总 */
.rec-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rec-stat{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:16px 18px;border:1px solid #e3e9ec;border-radius:14px;background:#fff;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.rec-stat:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(20,48,60,.35)}
.rec-stat-icon{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#e8f8fb,#eef1ff);color:#13a6bd}
.rec-stat:nth-child(2) .rec-stat-icon{background:linear-gradient(135deg,#fff5e3,#fff0e8);color:#e0961b}
.rec-stat:nth-child(3) .rec-stat-icon{background:linear-gradient(135deg,#eaf9ef,#e9f6f9);color:#2f9b5b}
.rec-stat:nth-child(4) .rec-stat-icon{background:linear-gradient(135deg,#f0edff,#eef4ff);color:#6b5cf0}
.rec-stat-icon svg,.rec-empty-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rec-stat>span:not(.rec-stat-icon){color:#8a959e;font-size:12px}
.rec-stat strong{color:#1d2a33;font-family:var(--font-num,inherit);font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.3px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* 趋势 + 单局分析 */
.rec-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:16px}
.rec-card{position:relative;border:1px solid #e3e9ec;border-radius:14px;background:#fff}
.rec-trend{display:flex;flex-direction:column;padding:18px 20px 14px;min-height:300px}
.rec-trend header{display:flex;align-items:center;gap:10px}
.rec-trend header strong,.rec-detail header strong{color:#1d2a33;font-size:14px}
.rec-trend header small{padding:2px 8px;border-radius:999px;background:#f0f4f6;color:#8b98a1;font-size:11px}
.rec-delta{margin-left:auto;padding:3px 10px;border-radius:999px;background:#f0f4f6;color:#6d7b85;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.rec-delta[data-trend="up"]{background:#e8f8ef;color:#1f9a5a}
.rec-delta[data-trend="down"]{background:#fdeef0;color:#d04c58}
.rec-trend-plot.trend{--trend-line:#13b8cf;--trend-area:rgba(19,184,207,.16);--trend-grid:#eef2f4;--trend-base:#dfe5e9;--trend-text:#a3adb5;--trend-ink:#1b2128;position:relative;flex:1 1 auto;min-height:220px;margin-top:10px}
.rec-trend-plot .trend-avg-text{display:none}
.rec-trend-plot.trend .trend-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}

.rec-detail{padding:18px 20px 16px;overflow:hidden}
.rec-detail:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--mode-a,#13b8cf),transparent);opacity:.9;transition:background .3s ease}
.rec-detail header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.rec-detail header div{display:grid;gap:3px;min-width:0}
.rec-detail header small{overflow:hidden;color:#8a959e;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.rec-grade{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:linear-gradient(145deg,var(--grade,#c5ced4),color-mix(in srgb,var(--grade,#c5ced4) 70%,#0d1520));color:#fff;font-family:var(--font-num,inherit);font-size:24px;font-weight:800;box-shadow:0 10px 22px -12px var(--grade,#8a98a3),inset 0 1px 0 rgba(255,255,255,.35)}
.rec-grade.is-pop{animation:rec-grade-pop .45s cubic-bezier(.2,.9,.25,1.3)}
.rec-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rec-metrics>div{position:relative;display:grid;gap:4px;padding:11px 12px 12px;border-radius:11px;background:#f6f9fa}
.rec-metrics span{color:#8a959e;font-size:11.5px}
.rec-metrics strong{color:#1d2a33;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.rec-meter{position:relative;display:block;height:5px;border-radius:999px;background:#e7edf0;overflow:hidden}
.rec-meter>i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#13b8cf,#5b8cff);transform:scaleX(var(--v,0));transform-origin:left center;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.rec-metrics .rec-meter{margin-top:3px}

/* 列表 */
.rec-list-card{overflow:hidden}
.rec-list-head,.rec-row{display:grid;grid-template-columns:minmax(200px,1.7fr) minmax(90px,.8fr) minmax(130px,1.2fr) minmax(80px,.7fr) minmax(70px,.6fr) 132px;align-items:center;gap:12px;padding:0 18px}
.rec-list-head{height:40px;border-bottom:1px solid #edf1f3;color:#97a3ab;font-size:11.5px;font-weight:600}
.rec-row{position:relative;min-height:62px;border-top:1px solid #f1f4f6;cursor:pointer;transition:background .16s ease,opacity .22s ease,transform .22s ease}
.rec-row:first-child{border-top:0}
.rec-row:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--mode-a);transform:scaleY(0);transition:transform .2s ease}
.rec-row:hover{background:#f8fbfc}
.rec-row.selected{background:#f0f9fb}
.rec-row.selected:before{transform:scaleY(1)}
.rec-row:focus-visible{outline:2px solid #13b8cf;outline-offset:-2px}
.rec-row-mode{display:flex;align-items:center;gap:12px;min-width:0}
.rec-row-swatch{position:relative;flex:none;width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,var(--mode-a),var(--mode-b));box-shadow:0 6px 14px -8px var(--mode-b);overflow:hidden}
.rec-row-swatch:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .5s ease}
.rec-row:hover .rec-row-swatch:after{transform:translateX(120%)}
.rec-row-mode>span{display:grid;gap:2px;min-width:0}
.rec-row-mode strong{overflow:hidden;color:#1d2a33;font-size:13.5px;text-overflow:ellipsis;white-space:nowrap}
.rec-row-mode small{color:#93a0a8;font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-row-score{display:flex;align-items:center;gap:7px}
.rec-row-score b{color:#1d2a33;font-family:var(--font-num,inherit);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.rec-row-score em{padding:2px 7px;border-radius:999px;background:linear-gradient(135deg,#ffcf5a,#f2a516);color:#fff;font-size:10.5px;font-style:normal;font-weight:700;letter-spacing:.03em}
.rec-row-acc{display:flex;align-items:center;gap:10px}
.rec-row-acc .rec-meter{flex:1 1 auto;max-width:110px}
.rec-row-acc .rec-meter>i{background:linear-gradient(90deg,var(--mode-a),var(--mode-b))}
.rec-row-acc small,.rec-row-num{color:#56656f;font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-row-num.is-hits{color:#8a959e}
.record-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.record-actions button{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;border:1px solid #e3e9ec;border-radius:8px;background:#fff;color:#4d5c66;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.record-actions svg{width:14px;height:14px}
.watch-local-replay{padding:0 11px 0 9px}
.watch-local-replay svg{fill:currentColor}
.watch-local-replay:hover{border-color:#13b8cf;background:#13b8cf;color:#fff;transform:translateY(-1px)}
.delete-record{width:30px;color:#9aa6ae!important}
.delete-record svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.delete-record:hover{border-color:#f0c4c8!important;background:#fff4f5!important;color:#d04c58!important}
.record-actions button:focus-visible{outline:2px solid #13b8cf;outline-offset:2px}
.rec-list.is-entering .rec-row{animation:rec-row-in .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 32ms)}
.rec-row.is-removing{opacity:0;transform:translateX(18px);pointer-events:none}
.rec-empty{display:grid;justify-items:center;gap:12px;padding:44px 20px;color:#8d99a2;font-size:13px}
.rec-empty.hidden{display:none}
.rec-empty-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#e8f8fb,#eef1ff);color:#13a6bd;animation:rec-float 3s ease-in-out infinite}
.rec-list:empty+.rec-empty{border-top:0}
.rec-list-card:has(.rec-list:empty) .rec-list-head{display:none}

@keyframes rec-row-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rec-grade-pop{0%{transform:scale(.7) rotate(-8deg);opacity:.4}100%{transform:none;opacity:1}}
@keyframes rec-float{50%{transform:translateY(-4px)}}

@media(max-width:980px){
  .rec-grid{grid-template-columns:minmax(0,1fr)}
  .rec-list-head{display:none}
  .rec-row{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"mode mode score" "acc acc acc" "react hits actions";row-gap:8px;padding:12px 16px}
  .rec-row-mode{grid-area:mode}.rec-row-score{grid-area:score;justify-content:flex-end}.rec-row-acc{grid-area:acc}.rec-row-acc .rec-meter{max-width:none}
  .rec-row-num{grid-area:react}.rec-row-num.is-hits{grid-area:hits}.record-actions{grid-area:actions}
}
@media(max-width:760px){
  #recordsPage .rewards-heading{padding:16px 16px 14px}
  .rec-body{padding:14px 14px 20px;gap:12px}
  .rec-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rec-stat{padding:12px 13px;column-gap:10px}
  .rec-stat-icon{width:34px;height:34px;border-radius:10px}
  .rec-stat strong{font-size:19px}
  .rec-trend,.rec-detail{padding:14px 14px 12px}
  .rec-trend{min-height:250px}
  .rec-row{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"mode mode score" "acc react actions";column-gap:12px}
  .watch-local-replay span{display:none}
  .watch-local-replay{width:30px;padding:0}
  .rec-row-num.is-hits{display:none}
}
@media(prefers-reduced-motion:reduce){
  .rec-list.is-entering .rec-row,.rec-grade.is-pop,.rec-empty-icon{animation:none}
  .rec-row,.rec-stat,.rec-filter,.rec-meter>i,.rec-row-swatch:after{transition:none}
  .rec-stat:hover,.rec-filter:hover{transform:none}
}
html[data-reduce-motion] .rec-list.is-entering .rec-row,html[data-reduce-motion] .rec-grade.is-pop,html[data-reduce-motion] .rec-empty-icon{animation:none}

.rec-duration-filters{display:flex;gap:8px;padding:0 2px 2px}.rec-duration-filter{height:34px;padding:0 16px;border:1px solid #dce8ec;border-radius:9px;background:#fff;color:#6b7a84;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}.rec-duration-filter:hover{border-color:#bfe7ee;color:#0b8698}.rec-duration-filter.active{border-color:#13b8cf;background:#13b8cf;color:#fff}.rec-duration-filter:focus-visible{outline:2px solid #13b8cf;outline-offset:2px}