.narration-panel{border:1px solid #cdd5e8;border-radius:8px;background:#ffffffd9;padding:14px 16px;margin:0 0 24px;flex-shrink:0;color:#26344f}
.narration-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px}
.narration-language{display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}
.narration-language select{font:inherit;color:#22355b;background:#fff;border:1px solid #a8b6d0;border-radius:5px;min-height:36px;padding:6px 8px;max-width:145px}
#narration-voice{font-size:11px;color:#526179}
#narration-title{font-size:12px;line-height:1.5;font-weight:600;margin:5px 0 8px;color:#2d3f61}
#narration-audio{display:block;width:100%;height:42px;margin:0 0 10px}
.narration-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.narration-actions label{display:flex;align-items:center;gap:7px;min-height:36px}
.narration-actions input{width:17px;height:17px;accent-color:#3f5de7}
#narration-replay{font:inherit;background:#eef2ff;border:1px solid #acbce3;color:#253a81;border-radius:5px;padding:8px 12px;min-height:36px}
#narration-replay:hover{background:#e0e7fc}
#narration-status{font-size:11px;color:#526179;line-height:1.6;margin:8px 0;min-height:18px}
.narration-panel[data-state=error] #narration-status{color:#a22635}
.narration-panel details{font-size:12px;line-height:1.8;border-top:1px solid #dbe2ef;padding-top:8px}
.narration-panel summary{cursor:pointer;font-weight:600;min-height:30px}
#narration-text{font-size:13px;color:#35445e;line-height:1.85;margin:8px 0 0}
.auto-btn{display:inline-flex!important}
@media(max-width:1050px){.narration-top{flex-direction:column;align-items:flex-start;gap:7px}.narration-panel{padding:12px}.navigation{gap:5px}.count{min-width:48px}}
@media(max-width:400px){.footer .timeline{display:none}.footer{justify-content:center;padding-inline:10px}.navigation{width:100%;justify-content:space-between}.nav-btn{min-width:58px}.narration-actions{font-size:12px}}