/* Extends the existing staff cards and tables. No new theme, app or player pane. */
.original-action-controls{flex-wrap:wrap;gap:8px}
#originalActionCounts{display:flex;gap:6px;flex-wrap:wrap}
#originalActionCounts button[aria-pressed="true"]{outline:1px solid var(--accent);outline-offset:1px}
[data-original-actions] details .mono{overflow-wrap:anywhere;white-space:normal}
[data-original-actions] td{vertical-align:top;white-space:normal}
#originalActionPager{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#originalActionReview summary{cursor:pointer}
#originalActionReview .card-body{overflow-wrap:anywhere}
#keysTable td{overflow-wrap:anywhere}
@media(max-width:640px){[data-original-actions] .tbl{overflow:auto}[data-original-actions] table{min-width:540px}.original-action-controls .input{max-width:100%}}

/* 指法回放面板：沿用后台卡片与色板，不引入新主题或外部资源 */
.replay-card .card-head{flex-wrap:wrap;align-items:flex-start;gap:6px 12px}
.replay-card .card-title{flex:none;white-space:nowrap}
.replay-meta{min-width:0;overflow-wrap:anywhere}
.replay-card .card-body{display:flex;flex-direction:column;gap:10px}
.replay-card .card-body>button{align-self:flex-start}
.replay-card .replay-status,.replay-card .replay-live{margin:0}
.replay-live{color:var(--warn)}
.replay-row{flex-wrap:wrap;gap:8px;align-items:center}
.replay-inline{display:inline-flex;align-items:center;gap:5px}
.replay-clock{font-size:15px;font-variant-numeric:tabular-nums}
.replay-cursor{width:100%;accent-color:var(--accent)}
.replay-cursor.replay-cursor-thin{height:6px;margin:2px 0 6px;opacity:.75;cursor:pointer}
.replay-cursor.replay-cursor-thin::-webkit-slider-thumb{width:10px;height:10px}
.replay-linked{flex-basis:100%;font-size:12px}
/* 0.13.0：照选手端指法展示器的 racing 布局（格子位置由 replay-panel-model.mjs 给），窄了等比缩小、不换行 */
.replay-board{display:grid;grid-template-columns:repeat(var(--kb-cols,5),minmax(0,1fr));gap:clamp(3px,1.1cqw,7px);container-type:inline-size;max-width:720px}
.replay-key{display:flex;flex-direction:column;gap:2px;align-items:flex-start;justify-content:center;text-align:left;min-width:0;min-height:clamp(40px,10cqw,66px);
  padding:clamp(3px,1.2cqw,8px) clamp(4px,1.3cqw,9px);font-size:clamp(10px,2.1cqw,13px);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);cursor:pointer;overflow:hidden}
.replay-key-glyph{font-size:1.25em;margin-right:4px;line-height:1}
.replay-key>span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 复位只有两种外观：按下 = 琥珀亮起（选手端同色 #FFC43D → #E89A10）、松开余辉约 1 秒（--glow 1 → 0）；
   其余一切（抬起、未知）= 暗格（不画键帽底色，轮廓约 10%、小字约 22%），未知只用同样淡的字写「未知」，不套普通键的虚线 / 琥珀底
   （选择器带 [data-state]，压过下面按状态的样式）。不用红色——红色只表示「现在处理」。默认「按下才出现」（2026-10-21 产品负责人定）：不亮时整格不画，余辉一路淡到没有 */
.replay-key[data-role="RESET"][data-state]{--reset-dim:color-mix(in srgb,var(--text) 22%,transparent);--reset-line:color-mix(in srgb,var(--text) 10%,transparent);border-style:solid;border-color:var(--reset-line);background:transparent;box-shadow:none;color:var(--reset-dim);opacity:1}
.replay-board[data-reset-style="pressed"] .replay-key[data-role="RESET"][data-state]{--reset-dim:transparent;--reset-line:transparent}
.replay-board[data-reset-style="pressed"] .replay-key[data-role="RESET"][data-state]:not(.lit){visibility:hidden}
.replay-key[data-role="RESET"][data-state] .replay-key-name,.replay-key[data-role="RESET"][data-state] .replay-key-phys,.replay-key[data-role="RESET"][data-state] .replay-key-state{font-weight:500;color:var(--reset-dim)}
.replay-key[data-role="RESET"][data-state].lit{--g:calc(var(--glow,0) * 100%);border-color:color-mix(in srgb,#FFC43D var(--g),var(--reset-line));
  background:linear-gradient(180deg,color-mix(in srgb,#FFC43D var(--g),transparent),color-mix(in srgb,#E89A10 var(--g),transparent));box-shadow:0 0 calc(var(--glow,0) * 14px) color-mix(in srgb,#FFC43D var(--g),transparent)}
.replay-key[data-role="RESET"][data-state].lit .replay-key-name,.replay-key[data-role="RESET"][data-state].lit .replay-key-phys,.replay-key[data-role="RESET"][data-state].lit .replay-key-state{color:color-mix(in srgb,#2b1b00 var(--g),var(--reset-dim))}
.replay-reset-mark{fill:#E89A10;cursor:pointer}
.replay-reset-style{margin:6px 0 0}
.replay-key:hover{border-color:var(--line-2)}
.replay-key.on{outline:1px solid var(--blue);outline-offset:1px}
.replay-key-name{font-weight:600}
.replay-key-phys{font-size:.85em;color:var(--text-3)}
.replay-key-state{font-size:.92em;color:var(--text-2)}
.replay-key[data-state="2"]{border-color:var(--accent);background:var(--ok-bg)}
.replay-key[data-state="2"] .replay-key-state{color:var(--accent)}
.replay-key[data-state="0"]{border-style:dashed;border-color:var(--warn);background:var(--warn-bg)}
.replay-key[data-state="0"] .replay-key-state{color:var(--warn)}
.replay-key[data-state="none"]{opacity:.55}
.replay-held{margin:0;color:var(--text-2)}
.replay-trace{overflow-x:auto}
.replay-trace svg{display:block;width:100%;min-width:560px;background:var(--surface-2);border-radius:var(--r-sm)}
.replay-grid{stroke:var(--line)}
.replay-axis{fill:var(--text-3);font-size:11px;font-family:var(--mono)}
.replay-cursorline{stroke:var(--warn);stroke-width:2}
.replay-seg{cursor:pointer}
.replay-seg.s2{fill:var(--accent);opacity:.85}
.replay-seg.s1{fill:var(--surface-3);stroke:var(--line-2)}
.replay-seg.s0{fill:none;stroke:var(--warn);stroke-dasharray:3 4}
.replay-events table{width:100%}
.replay-events tr.sel{background:var(--sel)}
.replay-events td{white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.replay-evidence{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r-sm);padding:10px}
.replay-evidence-key{display:flex;flex-direction:column;gap:4px}
.replay-evidence-rows{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:640px){
  .replay-card .input.sm{max-width:100%}
  .replay-events table{min-width:460px}
  .replay-clock{width:100%}
}