/* ── Read along ── */
.ra-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.ra-add input[type=url] { flex: 1; min-width: 220px; }
.ra-stage { max-width: 860px; margin: 0 auto 12px; }
.ra-stage video, .ra-stage iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; background: #000; }
.ra-stage audio { width: 100%; }
.ra-now { max-width: 860px; margin: 0 auto; min-height: 112px; padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.ra-now-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.ra-w { display: inline-flex; flex-direction: column; align-items: center; padding: 2px 4px; border-radius: 8px; cursor: pointer; transition: background .12s, color .12s; }
.ra-w .ra-ipa { font-size: .88em; color: var(--muted); font-family: 'Charis SIL', 'Doulos SIL', 'Noto Sans', serif; min-height: 1.2em; }
.ra-w b { font-size: 1.35em; font-weight: 600; color: var(--text-2); }
.ra-w.past b { color: var(--text); }
.ra-w.on { background: var(--primary-soft); }
.ra-w.on b, .ra-w.on .ra-ipa { color: var(--primary); }
.ra-w.on b { font-weight: 800; }
.ra-now-vi { margin-top: 10px; font-size: 1.05em; color: var(--text-2); font-style: italic; }
.ra-hide-ipa .ra-ipa, .ra-hide-vi .ra-now-vi, .ra-hide-vi .ra-line-vi { display: none; }
.ra-controls { max-width: 860px; margin: 12px auto 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ra-controls button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.ra-lines { max-width: 860px; margin: 8px auto 0; max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ra-line { display: grid; grid-template-columns: 3.6em 1fr; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.ra-line:last-child { border-bottom: 0; }
.ra-line:hover { background: var(--surface-2); }
.ra-line.on { background: var(--primary-soft); }
.ra-line time { color: var(--muted); font-size: .82em; padding-top: 3px; font-variant-numeric: tabular-nums; }
.ra-line-en { color: var(--text); }
.ra-line-en span.on { color: var(--primary); font-weight: 700; }
.ra-line-vi { color: var(--muted); font-size: .9em; margin-top: 2px; }