/* The sample and actual imported captions share one text surface. */
.subtitle-surface { --subtitle-scale:1; --subtitle-font:Inter,system-ui,sans-serif; --subtitle-color:#fff; position:relative; display:flex; justify-content:center; align-items:flex-end; text-align:center; }
.subtitle-surface[data-tv-sub-size="small"] { --subtitle-scale:.8; }
.subtitle-surface[data-tv-sub-size="large"] { --subtitle-scale:1.25; }
.subtitle-surface[data-tv-sub-size="extra"] { --subtitle-scale:1.5; }
.subtitle-surface[data-tv-sub-font="serif"] { --subtitle-font:Georgia,'Times New Roman',serif; }
.subtitle-surface[data-tv-sub-font="mono"] { --subtitle-font:ui-monospace,SFMono-Regular,Consolas,monospace; }
.subtitle-surface[data-tv-sub-color="yellow"] { --subtitle-color:#ffe277; }
.subtitle-surface[data-tv-sub-color="green"] { --subtitle-color:#b8f3d8; }
.subtitle-surface[data-tv-sub-position="middle"] { align-items:center; }
.subtitle-surface[data-tv-sub-position="top"] { align-items:flex-start; }
.subtitle-text { color:var(--subtitle-color); font-family:var(--subtitle-font); font-size:calc(var(--subtitle-base,1rem) * var(--subtitle-scale)); line-height:1.35; font-weight:600; text-shadow:0 .08em .28em #000,0 0 .06em #000; white-space:pre-line; overflow-wrap:anywhere; padding:.1em .35em; max-width:100%; }
.subtitle-surface[data-tv-sub-style="box"] .subtitle-text { background:rgba(0,0,0,.78); box-decoration-break:clone; -webkit-box-decoration-break:clone; border-radius:.2em; text-shadow:none; }
.subtitle-surface[data-tv-sub-style="outline"] .subtitle-text { text-shadow:-.045em -.045em #000,.045em -.045em #000,-.045em .045em #000,.045em .045em #000,0 .08em .18em #000; }
.subtitle-preview { --subtitle-base:1.1rem; width:100%; min-height:10.5rem; padding:2.5rem 1rem 1rem; border-radius:var(--r-m); overflow:hidden; background:radial-gradient(ellipse at 75% 15%,#62655588,transparent 55%),linear-gradient(135deg,#343c41,#181d24 55%,#293631); border:1px solid var(--line); }
.subtitle-preview::before { content:''; position:absolute; width:110%; height:50%; left:-10%; bottom:-10%; background:#080d1499; transform:rotate(-8deg); pointer-events:none; }
.subtitle-preview .subtitle-text { position:relative; }
.subtitle-preview-label { position:absolute; top:.8rem; left:1rem; color:#ffffffa6; font-size:.55rem; font-weight:650; letter-spacing:.15em; }
.subtitle-settings-entry .subtitle-preview { max-width:32rem; margin:.9rem 0; }
.subtitle-customize-trigger { margin-top:.4rem; }
.player .player-subtitle-surface { --subtitle-base:clamp(18px,2.3vw,54px); position:absolute; inset:7% 6% 7%; pointer-events:none; z-index:2; transition:bottom .2s var(--ease); }
.player:not(.idle) .player-subtitle-surface { bottom:max(7%,calc(var(--pbH,6rem) + 1rem)); }
.player .player-subtitle-surface[hidden] { display:none; }
dialog.subtitle-dialog.modal-overlay { display:flex; align-items:center; justify-content:center; background:transparent; padding:1.2rem; overflow:auto; animation:none; }
dialog.subtitle-dialog.modal-overlay::backdrop { background:#0009; backdrop-filter:blur(12px); }
.subtitle-dialog-card { width:min(100%,42rem); max-height:calc(100dvh - 2.4rem); overflow:auto; background:var(--panel); border:1px solid var(--line-hi); border-radius:var(--r-l); padding:1.5rem; box-shadow:0 1rem 5rem #0009; animation:subtitle-dialog-in .28s var(--pop); }
.subtitle-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.subtitle-dialog-header h2 { font-size:1.35rem; line-height:1.2; margin:.35rem 0 0; font-weight:650; letter-spacing:-.035em; }
.subtitle-dialog-close { flex:none; font-size:1.5rem; }
.subtitle-dialog-note { margin:.8rem 0 1rem; color:var(--dim); font-size:.78rem; line-height:1.55; }
.subtitle-dialog-options { display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1rem; margin:1.25rem 0; }
.subtitle-setting-row { display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.subtitle-setting-label { color:var(--dim); font-size:.72rem; }
.subtitle-setting-row .qtok { display:flex; align-items:center; justify-content:space-between; width:100%; min-width:0; min-height:44px; }
.subtitle-setting-row .qtok span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subtitle-dialog-footer { border-top:1px solid var(--line); display:flex; align-items:center; gap:.6rem; margin-top:1.1rem; padding-top:1rem; }
.subtitle-save-status { color:var(--dim); font-size:.65rem; flex:1; line-height:1.4; }
.subtitle-file-status { margin:.6rem 0; color:var(--dim); font-size:.7rem; overflow-wrap:anywhere; }
.subtitle-sync { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; margin-top:.5rem; font-size:.72rem; }
.subtitle-sync[hidden] { display:none; }
.subtitle-sync > span { color:var(--dim); margin-right:.35rem; }
.subtitle-timing { min-width:3rem; text-align:center; font-variant-numeric:tabular-nums; }
@keyframes subtitle-dialog-in { from { opacity:0; filter:blur(6px); transform:translateY(12px) scale(.98); } to { opacity:1; filter:blur(0); transform:none; } }
@media (max-width:600px) { dialog.subtitle-dialog.modal-overlay { padding:.7rem; } .subtitle-dialog-card { padding:1rem; max-height:calc(100dvh - 1.4rem); } .subtitle-dialog-footer { flex-wrap:wrap; } .subtitle-save-status { order:3; flex-basis:100%; } .subtitle-done { margin-left:auto; } }
@media (pointer:coarse) { .subtitle-setting-row .qtok { min-height:48px; } }
@media (max-height:500px) and (min-width:600px) { .subtitle-dialog-card { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.2rem; padding:1rem; } .subtitle-dialog-header,.subtitle-dialog-note,.subtitle-dialog-footer { grid-column:1/-1; } .subtitle-dialog-note { margin:0; } .subtitle-dialog-preview { grid-column:1; grid-row:3; } .subtitle-dialog-options { grid-column:2; grid-row:3/5; margin:0; gap:.5rem; } .subtitle-dialog-import { grid-column:1; } .subtitle-dialog-footer { margin:0; } .subtitle-preview { min-height:9rem; } }
@media (prefers-reduced-motion:reduce) { .subtitle-dialog-card { animation:none; } .player .player-subtitle-surface { transition:none; } }