/* BPM节拍器：按参考站截图复刻的居中版面。颜色取自截图，浅色主题给出对应的高对比配色。 */
.bpm-replica { --bpm-ink:#f2f2f2; --bpm-lead:#d3d5de; --bpm-panel:#1f1f2b; --bpm-panel-hover:#252536; --bpm-muted:#9a9aa8; --bpm-dot-off:#3b3c48; --bpm-dot-on:#ff3b50; --bpm-key:#6b64e0; display:flex; flex-direction:column; align-items:center; width:100%; max-width:706px; margin:0 auto; text-align:center; }
:root[data-theme="light"] .bpm-replica { --bpm-ink:#1d1e24; --bpm-lead:#3d3f4a; --bpm-panel:#eceef5; --bpm-panel-hover:#e2e5ef; --bpm-muted:#5b5d6a; --bpm-dot-off:#cfd2de; --bpm-dot-on:#e5283d; --bpm-key:#5a52d5; }
.bpm-title { margin:0; color:var(--bpm-ink); font-size:52px; font-weight:700; line-height:1.25; }
.bpm-lead { margin:24px 0 0; color:var(--bpm-lead); font-size:24px; line-height:1.25; }
.bpm-lead kbd { display:inline-block; padding:0 6px; border:1px solid var(--bpm-key); border-radius:6px; background:transparent; color:inherit; font:inherit; line-height:1.25; }
.bpm-pad { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:100%; min-height:171px; margin-top:42px; padding:20px; border:0; border-radius:0; background:var(--bpm-panel); color:var(--bpm-ink); cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; transition:background .12s; }
.bpm-pad:hover,.bpm-pad.is-hit { background:var(--bpm-panel-hover); }
.bpm-pad:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.bpm-value { font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; font-size:96px; font-weight:200; line-height:1; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.bpm-unit { color:var(--bpm-muted); font-size:13px; line-height:1.5; }
.bpm-dots { display:flex; flex-wrap:nowrap; justify-content:center; gap:16px; margin:40px 0 0; padding:0; list-style:none; }
.bpm-dot { width:10px; height:10px; border-radius:50%; background:var(--bpm-dot-off); transition:background .08s; }
.bpm-dot.is-lit { background:var(--bpm-dot-on); }
/* 节拍器面板：位于点按测速下方，沿用工具页面板配色。 */
.bpm-metro { display:grid; align-content:start; gap:14px; width:100%; min-width:0; margin-top:56px; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--panel); text-align:left; }
.bpm-heading { margin:0; color:var(--ink); font-size:15px; font-weight:600; }
.bpm-field-label { color:var(--muted); font-size:12px; }
.bpm-tempo-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; }
.bpm-step { min-width:48px; font-size:18px; }
.bpm-tempo-input { width:100%; min-width:0; min-height:56px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); text-align:center; font:600 32px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield; }
.bpm-tempo-input::-webkit-outer-spin-button,.bpm-tempo-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.bpm-slider { width:100%; min-height:28px; accent-color:var(--accent); }
.bpm-beats { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:6px 0; padding:0; list-style:none; }
.bpm-beat { width:20px; height:20px; border:1px solid var(--subtle); border-radius:50%; background:transparent; transition:background .06s,border-color .06s,transform .06s; }
.bpm-beat.is-accent { border-color:var(--accent); }
.bpm-beat.is-active { background:var(--purple); border-color:var(--purple); transform:scale(1.2); }
.bpm-beat.is-accent.is-active { background:var(--accent); border-color:var(--accent); }
.bpm-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:end; }
.bpm-field { display:grid; gap:7px; min-width:0; color:var(--muted); font-size:12px; }
.bpm-field select { width:100%; min-height:42px; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink); font:inherit; }
.bpm-toggle { min-height:42px; }
@media(max-width:760px) { .bpm-metro { margin-top:40px; } }
@media(max-width:480px) { .bpm-metro { padding:14px; } }
@media(prefers-reduced-motion:reduce) { .bpm-beat { transition:none; } }
/* 复刻版面自带标题，页面原有的工具名与简介仅留给读屏；收藏星标挪到右上角，与返回链接同一行。 */
.detail-view.is-bare { position:relative; }
.detail-view.is-bare .detail-heading { position:absolute; top:-12px; right:0; margin:0; }
.detail-view.is-bare .detail-heading > div { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.detail-view.is-bare .workbench { display:flex; align-items:flex-start; justify-content:center; min-height:calc(100vh - 340px); padding:48px 0 0; border:0; background:none; }
@media(max-width:760px) { .bpm-title { font-size:40px; } .bpm-lead { font-size:19px; } .bpm-value { font-size:72px; } .bpm-dots { gap:12px; } .detail-view.is-bare .workbench { min-height:0; padding:24px 0; } }
@media(max-width:480px) { .bpm-dots { gap:8px; } .bpm-dot { width:8px; height:8px; } }
@media(max-width:400px) { .bpm-title { font-size:34px; } .bpm-lead { font-size:17px; } .bpm-pad { min-height:140px; } .bpm-value { font-size:60px; } }
@media(prefers-reduced-motion:reduce) { .bpm-pad,.bpm-dot { transition:none; } }