.timing-input { padding: 10px !important; font-size: 12px; }
.media-controls { grid-template-columns: auto auto auto 1fr auto; }
.learning-controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.learning-controls button { border: 1px solid; background: white; padding: 9px 12px; cursor: pointer; }
.learning-controls button.active { background: var(--red); color: white; }
.learning-controls span { margin-left: auto; color: var(--muted); font-size: 11px; }
.word-timed i { font-style: normal; color: #888; transition: color .08s linear; }
.word-timed i.read { color: inherit; }
.word-timed i.current { color: var(--red); text-decoration: underline 2px; text-underline-offset: 3px; }
.subtitle-overlay .word-timed i { color: #777; }
.subtitle-overlay .word-timed i.read { color: white; }
.subtitle-overlay .word-timed i.current { color: var(--acid); }
.subtitle-overlay { inset: 0; display: block; pointer-events: none; }
.subtitle-overlay:empty,.subtitle-overlay:not(.has-subtitle) { display: none; }
.subtitle-card { position: absolute; left: 50%; top: 76%; width: max-content; max-width: min(88%,900px); transform: translate(-50%,-50%); padding: 11px 20px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; background: rgba(7,9,8,.62); box-shadow: 0 5px 24px rgba(0,0,0,.24); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: white; cursor: grab; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.subtitle-card.dragging { cursor: grabbing; }
.subtitle-lines { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.subtitle-overlay .subtitle-lines > span { max-width: 100%; padding: 0; background: none; color: rgba(255,255,255,.98); text-align: center; line-height: 1.24; overflow-wrap: anywhere; -webkit-text-stroke: .32px rgba(0,0,0,.8); text-shadow: 0 1px 1px rgba(0,0,0,.95),0 2px 5px rgba(0,0,0,.92); }
.subtitle-overlay .subtitle-lines > .original { font-size: clamp(18px,2.15vw,32px); font-weight: 690; letter-spacing: -.012em; }
.subtitle-overlay .subtitle-lines > .translation { color: rgba(255,255,255,.94); font-size: clamp(15px,1.62vw,24px); font-weight: 520; letter-spacing: .01em; }
.subtitle-handle { position: absolute; left: 50%; top: -24px; width: 34px; height: 17px; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(8,10,9,.58); opacity: 0; transform: translate(-50%,5px); transition: opacity .18s ease,transform .18s ease; box-shadow: 0 2px 8px rgba(0,0,0,.22); pointer-events: none; }
.subtitle-handle::after { content: ""; position: absolute; inset: 4px 8px; background: radial-gradient(circle,rgba(255,255,255,.78) 1px,transparent 1.2px) 0 0/6px 5px; }
.subtitle-overlay.show-handle .subtitle-handle,.subtitle-card:hover .subtitle-handle,.subtitle-card.dragging .subtitle-handle { opacity: 1; transform: translate(-50%,0); }
.subtitle-overlay .word-timed i { color: rgba(255,255,255,.48); }
.subtitle-overlay .word-timed i.read { color: rgba(255,255,255,.98); }
.subtitle-overlay .word-timed i.current { color: var(--acid); text-shadow: 0 1px 1px rgba(0,0,0,.95),0 0 7px rgba(216,255,46,.2); }
.listen-mode { margin-top: 12px; border: 1px solid var(--line); background: #f7f6ef; padding: 13px; display: grid; gap: 11px; }
.listen-mode.active { border-color: var(--ink); background: #fff; box-shadow: inset 4px 0 0 var(--acid); }
.listen-mode-head,.listen-actions,.listen-settings { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.listen-mode-head { justify-content: space-between; }
.listen-mode-head div { display: grid; gap: 2px; }
.listen-mode-head small,.listen-actions output { color: var(--muted); font-size: 11px; }
.listen-mode button,.listen-mode select { border: 1px solid var(--ink); background: white; padding: 8px 10px; }
.listen-mode button { cursor: pointer; }
.listen-mode button:disabled { cursor: default; opacity: .38; }
.listen-mode [data-listen-toggle] { background: var(--ink); color: white; }
.listen-mode.active [data-listen-toggle] { background: var(--acid); color: var(--ink); }
.listen-settings label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: bold; }
.listen-actions output { margin-left: auto; }
@media (max-width:760px) { .media-controls { grid-template-columns:auto auto auto; } .media-controls input,.media-controls output { grid-column:1/-1; } .learning-controls { flex-wrap: wrap; } .learning-controls span { width:100%; margin:0; } }