.speaking-guide { margin: 0 0 20px; padding: 14px 16px; border: 1px solid #d9e7e1; border-radius: 10px; background: #f3f8f5; }
.speaking-guide p { margin: 0 0 5px; color: #294f40; font-size: 15px; line-height: 1.6; }
.speaking-guide small { display: block; color: #586b62; font-size: 13px; line-height: 1.6; }
.speaking-practice { min-width: 0; margin-top: 14px; }
.speaking-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; }
.speaking-controls button { min-height: 44px; margin: 0; padding: 8px 11px; border: 1px solid #cdded5; border-radius: 8px; background: #fff; color: #315b47; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.speaking-controls .sound { border-color: #d3e1ef; background: #eff5fb; color: #365d83; }
.speaking-controls .record-voice { background: #eaf3ed; }
.speaking-controls button:hover:not(:disabled) { background: #ddece2; }
.speaking-controls .sound:hover:not(:disabled) { background: #e2eef9; }
.speaking-controls button:focus-visible { outline: 3px solid #438168; outline-offset: 3px; }
.speaking-controls button:disabled { opacity: .55; cursor: default; }
.speaking-controls .record-voice[data-recording="true"] { background: #fff0ed; color: #97372b; border-color: #dfafa7; }
.speaking-feedback { margin-top: 8px; text-align: center; }
.speaking-status { margin: 0; color: #52665b; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.speaking-task-state { display: inline-block; margin-bottom: 4px; color: #315b47; font-size: 13px; font-weight: 600; }
.speaking-time { display: inline-block; margin-top: 4px; color: #97372b; font-size: 13px; font-variant-numeric: tabular-nums; }
.speaking-status[hidden], .speaking-time[hidden], .speaking-task-state[hidden] { display: none; }
.sentence-card { flex-wrap: wrap; }
.sentence-card .sentence-detail { flex: 1 1 220px; min-width: 0; }
.sentence-card .speaking-practice { flex: 1 0 calc(100% - 42px); margin: 10px 0 0 42px; }
.sentence-card .speaking-controls { justify-content: flex-start; }
.sentence-card .speaking-feedback { text-align: left; }
.dialogue-line { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.dialogue-line .speaking-practice { grid-column: 2; margin-top: 0; }
.dialogue-line .speaking-controls { justify-content: flex-start; }
.dialogue-line .speaking-feedback { text-align: left; }
.dialogue-line .speaking-controls .sound { margin-left: 0; }
@media (max-width: 540px) {
 .speaking-guide { padding: 12px; }
 .speaking-controls { gap: 6px; }
 .speaking-controls button { padding: 8px 10px; font-size: 13px; }
 .sentence-card .speaking-practice { flex-basis: 100%; margin-left: 0; }
}