/* ── Translation reflex ── */
.tr-head-actions { display: flex; gap: 8px; }
.tr-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.tr-topics button { border-radius: 999px; padding: 6px 14px; font-weight: 600; }
.tr-topics button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.tr-topics small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.tr-list { display: flex; flex-direction: column; gap: 10px; }
.tr-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tr-item-body { flex: 1; min-width: 0; }
.tr-item-vi { font-weight: 600; color: var(--text); }
.tr-item-meta { font-size: .84em; color: var(--muted); margin-top: 2px; }
.tr-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tr-card { max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.tr-meta { font-size: .84em; color: var(--muted); margin-bottom: 6px; }
.tr-vi { font-size: 1.25em; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.tr-hints { margin-bottom: 12px; }
.tr-hints summary { cursor: pointer; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.tr-hint-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.tr-hint-table th, .tr-hint-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.tr-hint-table th { color: var(--muted); font-weight: 600; font-size: .9em; }
.tr-hint-table td:first-child { font-weight: 700; color: var(--text); }
.tr-card textarea, .tr-modal textarea, .tr-block textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 1em; line-height: 1.5;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); resize: vertical;
}
.tr-verdict { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.tr-verdict b { font-size: 1.1em; }
.tr-verdict.correct { background: var(--success-soft); }
.tr-verdict.wrong { background: var(--danger-soft); }
.tr-answer { font-size: 1.15em; font-weight: 700; color: var(--text); }
.tr-explain { white-space: pre-line; color: var(--text); }
.tr-media video { width: 100%; max-height: 320px; border-radius: 10px; }
.tr-media audio { width: 100%; }
.tr-words { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tr-words span { padding: 2px 8px; border-radius: 6px; background: var(--success-soft); }
.tr-words span.wrong { background: var(--warn-soft); }
.tr-words span.missing { background: var(--danger-soft); text-decoration: line-through; }

/* Reflex countdown (Dịch & đặt câu, Hội thoại, Nói tự do) */
.reflex-timer { position: relative; margin: 10px 0; padding: 6px 12px; border-radius: 8px; overflow: hidden;
  background: var(--surface-2); font-size: .9em; font-weight: 600; }
.reflex-timer i { position: absolute; inset: 0 auto 0 0; background: var(--primary-soft); transition: width .1s linear; }
.reflex-timer span { position: relative; }
.reflex-timer.over { background: var(--warn-soft); color: var(--warn-text); }
.tr-reflex { margin: 4px 0 12px; align-items: center; flex-wrap: wrap; }
.cv-check.cv-time { align-items: center; }
.cv-suggest.nudge button { border-color: var(--warn-border); background: var(--warn-soft); }

/* Target words of a conversation */
.cv-targets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; font-size: .9em; }
.cv-target { padding: 2px 10px; border-radius: 999px; border: 1px dashed var(--primary-border); }
.cv-target.used { border-style: solid; background: var(--success-soft); border-color: var(--success-border); color: var(--success-text); }

/* Saving corrected sentences to "Sổ lỗi sai" */
.mistakes-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 12px; font-size: .9em; }
.saved-note { display: inline-block; margin-top: 6px; font-size: .85em; color: var(--success-text); }