/* 手速测试 */
.cs-durs{display:flex;flex-wrap:wrap;gap:.35rem}
.cs-dur{padding:.2rem .6rem;border:1px solid #e4e8ee;border-radius:.375rem;background:#fff;color:#475467;
  font-size:.8125rem;cursor:pointer}
.cs-dur.is-on{border-color:#f76707;background:#fff4e6;color:#d9480f;font-weight:600}
.cs-dur:disabled{opacity:.5;cursor:not-allowed}

.cs-pad{position:relative;display:flex;align-items:center;justify-content:center;min-height:15rem;
  border:2px dashed #ffd8a8;border-radius:.875rem;background:linear-gradient(180deg,#fff9f0,#fff);
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;overflow:hidden;
  transition:border-color .15s, background .15s}
.cs-pad:hover{border-color:#ffa94d}
.cs-pad.is-run{border-style:solid;border-color:#ffa94d;background:linear-gradient(180deg,#fff4e6,#fff)}
.cs-pad.is-done{border-style:solid;border-color:#b2f2bb;background:linear-gradient(180deg,#f4fff6,#fff)}
.cs-pad-inner{text-align:center;pointer-events:none}
.cs-big{font-size:2.25rem;font-weight:700;color:#d9480f;line-height:1.2}
.cs-pad.is-run .cs-big{font-size:3.25rem;color:#e8590c}
.cs-sub{margin-top:.5rem;font-size:.8125rem;color:#8a94a3}
.cs-count{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-size:5rem;font-weight:800;color:#f76707;opacity:.85}
.cs-pad.is-count .cs-count{display:flex}
.cs-pad.is-count .cs-pad-inner{opacity:.15}
.cs-ripple{position:absolute;width:2.5rem;height:2.5rem;margin:-1.25rem 0 0 -1.25rem;border-radius:50%;
  background:rgba(247,103,7,.28);animation:cs-rip .45s ease-out forwards;pointer-events:none}
@keyframes cs-rip{from{transform:scale(.4);opacity:.9}to{transform:scale(2.4);opacity:0}}

.cs-live{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.875rem}
.cs-live-item{padding:.5rem .625rem;border:1px solid #eef1f5;border-radius:.5rem;background:#fafbfd;text-align:center}
.cs-live-item .cs-k{display:block;font-size:.75rem;color:#8a94a3}
.cs-live-item b{font-size:1.125rem;color:#1f2d3d}

.cs-result{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.cs-score{display:flex;align-items:baseline;gap:.5rem}
.cs-score b{font-size:2.75rem;font-weight:800;color:#e8590c}
.cs-score span{font-size:.8125rem;color:#8a94a3}
.cs-grade{padding:.25rem .75rem;border-radius:1rem;background:#fff4e6;color:#d9480f;font-weight:600}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.625rem;margin-top:.875rem}
.cs-item{padding:.5rem .625rem;border:1px solid #eef1f5;border-radius:.5rem;background:#fafbfd}
.cs-item .cs-ik{font-size:.75rem;color:#8a94a3}
.cs-item .cs-iv{font-size:1rem;color:#1f2d3d;font-weight:600}
.cs-chart-title{margin-top:1rem;font-size:.8125rem;color:#8a94a3}
.cs-chart{display:flex;align-items:flex-end;gap:3px;height:6rem;margin-top:.5rem;padding:.5rem .625rem;
  border:1px solid #eef1f5;border-radius:.5rem;background:#fafbfd;overflow-x:auto}
.cs-bar{flex:1 0 8px;min-width:8px;background:linear-gradient(180deg,#ffa94d,#f76707);border-radius:2px 2px 0 0;
  position:relative}
.cs-bar span{position:absolute;top:-1.05rem;left:50%;transform:translateX(-50%);font-size:.625rem;color:#8a94a3}

.cs-hist{display:flex;flex-direction:column;gap:.4rem}
.cs-hist-row{display:flex;align-items:center;gap:.75rem;padding:.4rem .625rem;border:1px solid #eef1f5;
  border-radius:.5rem;background:#fff;font-size:.8125rem}
.cs-hist-row .cs-h-cps{font-weight:700;color:#e8590c;min-width:4rem}
.cs-hist-row .cs-h-time{margin-left:auto;color:#98a2b3;font-size:.75rem}
.cs-hist-empty{color:#98a2b3;font-size:.8125rem}

@media (max-width:575.98px){
  .cs-pad{min-height:11rem}
  .cs-big{font-size:1.75rem}
  .cs-pad.is-run .cs-big{font-size:2.5rem}
  .cs-live{grid-template-columns:repeat(2,1fr)}
}