/* Opname — nieuwe weergave (2026-09-06): ontwerp-"record surface" om de bestaande
   opname-elementen (app.js ongewijzigd: zelfde ids en toggle-knoppen). */
body.layout2 .record-panel2 { padding: 0; }
body.layout2 .record-surface2 { text-align: center; padding: 35px 20px 32px; gap: 0; display: flex; flex-direction: column; align-items: center; }
body.layout2 .record-surface2 .status { order: 0; font-size: .8125rem; color: var(--teal); font-weight: 500; min-height: 0; display: inline-flex; align-items: center; gap: 6px; }
body.layout2 .record-surface2 .status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body.layout2 .record-btn-wrap { order: 1; margin: 25px auto; }
body.layout2 .record-btn { width: 155px; height: 155px; background: var(--yellow); color: var(--navy); box-shadow: 0 8px 28px #eeb32329; }
body.layout2 .record-btn:active { background: var(--yellow); filter: brightness(.97); }
body.layout2 .record-btn .record-icon { display: none; }
body.layout2 .record-btn .record-mic2 { display: block; }
body.layout2 .record-btn.recording { background: #bf4343; color: #fff; }
body.layout2 .record-btn.recording .record-mic2 { display: none; }
body.layout2 .record-btn.recording .record-icon { display: block; width: 46px; height: 46px; border-radius: 8px; background: #fff; }
body.layout2 .record-btn.paused .record-icon { border-radius: 50%; background: rgba(255,255,255,.75); }
body.layout2 .record-btn:disabled { background: #d8d2cb; color: var(--soft); box-shadow: none; }
body.layout2 .record-surface2 .timer { order: 2; font-size: 2.5rem; font-weight: 500; letter-spacing: -1px; margin: 0 0 6px; min-height: 0; font-family: inherit; }
body.layout2 .record-surface2 .record-actions { order: 3; margin: 6px 0 0; }
body.layout2 .record-surface2 .pause-btn, body.layout2 .record-surface2 .cancel-btn { border-radius: 8px; font: inherit; font-size: .875rem; padding: 8px 14px; min-height: 0; }
body.layout2 .record-options2 { order: 4; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 22px 0 6px; }
/* de drie toggle-knoppen (sprekers / audio bewaren / snelle modus) als vinkjes met tekst */
body.layout2 .record-options2 .opt2 { position: static; width: auto; height: auto; border-radius: 6px; background: transparent; box-shadow: none; color: var(--text2); display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; font: inherit; font-size: .875rem; cursor: pointer; }
body.layout2 .record-options2 .opt2 svg { display: none; }
body.layout2 .record-options2 .opt2::before { content: ''; width: 15px; height: 15px; border: 1.5px solid #9aa4b0; border-radius: 4px; background: #fff; box-sizing: border-box; flex-shrink: 0; }
body.layout2 .record-options2 .opt2[aria-pressed="true"]::before { background: var(--teal); border-color: var(--teal); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 4 4 10-10'/></svg>"); background-size: 11px; background-position: center; background-repeat: no-repeat; }
body.layout2 .record-options2 .opt2::after { content: attr(data-label); }
body.layout2 .record-options2 .opt2:hover { background: #f1f3f1; }
body.layout2 .record-btn-wrap:has(.record-btn.recording) ~ .record-options2 { opacity: .45; pointer-events: none; }
body.layout2 .finish-btn2 { order: 5; margin-top: 16px; }
body.layout2 .finish-btn2[hidden] { display: none; }
body.layout2 .controls-bar2 { max-width: none; justify-content: center; gap: 12px; margin: 20px auto; padding: 0; }
body.layout2 .controls-bar2 .upload2 { width: auto; height: auto; border-radius: 8px; box-shadow: none; background: transparent; color: var(--soft); padding: 9px 14px; font-size: .875rem; gap: 6px; }
body.layout2 .controls-bar2 .upload2 svg { width: 15px; height: 15px; stroke-width: 1.7; }
body.layout2 .controls-bar2 .upload2:hover { background: #f1f3f1; color: var(--text2); }
body.layout2 .controls-bar2 .fab-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
body.layout2 .controls-bar2 .fab-file { position: relative; overflow: hidden; }
body.layout2 .controls-bar.disabled .upload2 { opacity: .45; pointer-events: none; }
/* keuzepaneel, voortgang, resultaat, fout als ontwerp-panelen */
body.layout2 .match-panel { margin: 20px 0 0; box-shadow: none; }
body.layout2 .match-panel.hidden { display: none; }
body.layout2 .match-title { font-size: 1.2rem; font-weight: 620; letter-spacing: -.3px; }
body.layout2 .match-type label { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: .9rem; }
body.layout2 .match-candidate { border-radius: 8px; border-color: var(--line); }
body.layout2 .match-candidate.best { border-color: var(--teal); background: var(--teal-soft); }
body.layout2 .match-manual-input { border-radius: 8px; border-color: #dce1de; }
body.layout2 .match-manual-btn { border-radius: 8px; background: var(--yellow); color: var(--navy); font: inherit; font-size: .875rem; font-weight: 600; }
body.layout2 .match-skip-btn { border-radius: 8px; font: inherit; font-size: .875rem; }
body.layout2 .progress { margin: 20px 0 0; box-shadow: none; }
body.layout2 .progress .spinner { border-top-color: var(--teal); }
body.layout2 .results { margin: 20px 0 0; gap: 14px; }
body.layout2 .results .meta { font-size: .8125rem; }
body.layout2 .results-panel2 { padding: 29px 30px 20px; }
body.layout2 .row2.center2 { justify-content: center; }
body.layout2 .error { margin: 20px 0 0; background: #fff6f6; border-color: #f3d6d6; }
body.layout2 .error h2 { margin: 0 0 8px; font-size: 1.05rem; }
body.layout2 .error.is-notice { background: var(--teal-soft); border-color: #cfe5df; }
@media (max-width: 900px) {
  body.layout2 .record-surface2 { padding: 26px 14px 24px; }
  body.layout2 .record-options2 { gap: 10px 16px; }
  body.layout2 .results-panel2 { padding: 16px 14px 20px; }
}