@import url("/app/offline-reader.css?v=6");
.save-actions { border: 1px solid #d3d8d5; border-radius: 12px; padding: 1rem; margin: 1.5rem 0; background: white; }
#save-offline { background: #226e68; color: white; width: 100%; }
#save-status { margin-bottom: 0; line-height: 1.6; color: #58625e; }
figure { margin: 1.5rem 0; }
figure img { display: block; width: 100%; max-height: 480px; object-fit: contain; border-radius: 12px; }
figcaption { font-size: .85rem; color: #58625e; line-height: 1.5; margin-top: .5rem; overflow-wrap: anywhere; }
#retry-audio { border-color: #b45309; }
#narration { display: none; }
.audio-player { margin: 1rem 0; padding: 1rem; border: 1px solid #d3d8d5; border-radius: 12px; background: white; }
.playback-buttons { display: flex; gap: .75rem; }
.playback-buttons [data-play] { flex: 1; background: #221664; color: white; }
.seek-bar { display: flex; align-items: center; height: 48px; cursor: pointer; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.seek-bar[aria-disabled="true"] { opacity: .45; cursor: default; }
.seek-track { position: relative; display: block; width: 100%; height: 6px; border-radius: 4px; background: #d3d8d5; pointer-events: none; }
.seek-fill { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: #226e68; }
.seek-thumb { position: absolute; top: 50%; left: clamp(8px, var(--progress, 0%), calc(100% - 8px)); width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: #226e68; }
.playback-time { margin: 0; color: #58625e; font-size: .85rem; font-variant-numeric: tabular-nums; }