.recognition-main { display:grid; gap:20px; }
.recognition-main > .section { margin:0; min-width:0; }
.recognition-heading p { max-width:65ch; line-height:1.6; }
.recognition-heading h1 { margin-bottom:12px; }
.recognition-main [hidden] { display:none !important; }
.recognition-drop { display:flex; flex-direction:column; gap:12px; padding:28px; border:2px dashed var(--border); border-radius:12px; cursor:pointer; }
.recognition-drop.drag { border-color:var(--accent); }
.recognition-drop strong { font-size:20px; }
.recognition-drop span { color:var(--muted); line-height:1.6; }
.recognition-drop input { max-width:100%; font:inherit; }
.recognition-drop input::file-selector-button { padding:10px 16px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font:inherit; }
.recognition-pick-actions,.recognition-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px; }
#recognition-selection { overflow-wrap:anywhere; }
.recognition-progress { margin-top:20px; }
.recognition-progress progress { width:100%; accent-color:var(--accent); }
#recognition-status { line-height:1.6; overflow-wrap:anywhere; }
#recognition-status:empty,#recognition-player-status:empty { display:none; }
.recognition-result-heading { border-top:1px solid var(--border); margin-top:24px; padding-top:20px; }
#recognition-result { scroll-margin-top:110px; }
.recognition-tempo { display:inline-flex; align-items:center; gap:8px; }
.recognition-tempo input { width:76px; padding:9px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); font:inherit; }
.recognition-paper { overflow:hidden; padding:20px; margin-top:20px; background:#e8ebf0; border-radius:12px; }
#recognition-score { width:820px; margin:0 auto; color:#000; transform-origin:top left; }
#recognition-score svg { background:#fff; display:block; margin-bottom:20px; }
#recognition-score img[id^="cursorImg"] { z-index:3 !important; opacity:.3; mix-blend-mode:multiply; }
@media(max-width:600px) {
  #recognition-result { scroll-margin-top:220px; }
  .recognition-drop { padding:18px; }
  .recognition-paper { padding:8px; }
  .recognition-actions button { flex:1 1 auto; }
}
@media print {
  body.recognition-page { background:#fff !important; }
  .recognition-page #site-header,.recognition-page .footer,.recognition-page .recognition-heading,.recognition-page #recognition-picker,.recognition-page #recognition-status,.recognition-page #recognition-progress,.recognition-page .recognition-result-heading,.recognition-page #recognition-review,.recognition-page .recognition-result-actions,.recognition-page #recognition-player-status,.recognition-page .cookie-consent-banner { display:none !important; }
  .recognition-page .page,.recognition-page .section,.recognition-page .recognition-paper { margin:0 !important; padding:0 !important; width:100% !important; height:auto !important; max-width:none !important; border:0; box-shadow:none; background:#fff; overflow:visible; }
  .recognition-page #recognition-score { width:100% !important; transform:none !important; }
  .recognition-page #recognition-score svg { width:100%; height:auto; break-after:page; margin:0; }
  .recognition-page #recognition-score > div { height:auto !important; width:100% !important; margin:0 !important; }
  .recognition-page #recognition-score > div:last-child svg { break-after:auto; }
  .recognition-page #recognition-score img[id^="cursorImg"] { display:none; }
  @page { size:A4; margin:0; }
}