/* TaskVox video player (views/partials/video-player.ejs + public/js/tv-video.js) — brand v1 */
.tvv { --tvv-violet: #5B4EFF; --tvv-ink: #0A0A0F; max-width: 960px; margin: 0 auto; }
.tvv-frame { position: relative; border-radius: 16px; overflow: hidden; background: var(--tvv-ink); box-shadow: 0 18px 50px rgba(14,14,22,0.22); aspect-ratio: 16 / 9; }
.tvv-stage, .tvv-stage video { position: absolute; inset: 0; width: 100%; height: 100%; }
.tvv-stage video { background: var(--tvv-ink); }
.tvv-poster { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; background: var(--tvv-ink); display: block; }
.tvv-poster[hidden] { display: none; }
.tvv-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tvv-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,15,0) 45%, rgba(10,10,15,0.55)); }
.tvv-play { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: var(--tvv-violet); box-shadow: 0 10px 30px rgba(91,78,255,0.55); display: flex; align-items: center; justify-content: center; z-index: 1; transition: transform .15s; }
.tvv-play svg { width: 30px; height: 30px; margin-left: 4px; fill: #fff; }
.tvv-poster:hover .tvv-play, .tvv-poster:focus-visible .tvv-play { transform: scale(1.07); }
.tvv-poster:focus-visible { outline: 3px solid var(--tvv-violet); outline-offset: -3px; }
.tvv-dur { position: absolute; right: 14px; bottom: 12px; z-index: 1; font: 600 13px/1 'Geist', 'Inter', system-ui, sans-serif; color: #fff; background: rgba(10,10,15,0.72); padding: 5px 8px; border-radius: 6px; }
.tvv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.tvv-title { font: 600 15px/1.35 'Geist', 'Inter', system-ui, sans-serif; color: inherit; }
.tvv-langs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid rgba(127,127,150,0.35); }
.tvv-langs button { border: 0; background: transparent; color: inherit; opacity: .7; font: 600 13px 'Geist', 'Inter', 'Noto Sans Devanagari', system-ui, sans-serif; padding: 6px 12px; border-radius: 7px; cursor: pointer; min-height: 32px; }
.tvv-langs button.on { background: var(--tvv-violet); color: #fff; opacity: 1; }
.tvv-chapters { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; font-size: 13.5px; }
.tvv-chapters[hidden] { display: none; }
.tvv-chapters a { text-decoration: none; color: inherit; display: flex; gap: 10px; padding: 5px 0; }
.tvv-chapters a:hover span:last-child { text-decoration: underline; }
.tvv-chapters .t { font-variant-numeric: tabular-nums; color: var(--tvv-violet); font-weight: 600; min-width: 34px; }
/* modal (dashboard) */
/* margin/inset restated: the dashboard's global reset (* { margin: 0 }) removes the browser's dialog centring */
dialog.tvv-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: 94vh; border: 0; padding: 0; background: transparent; width: min(960px, 94vw); max-width: none; color: #EEEEF3; overflow: visible; }
dialog.tvv-dialog::backdrop { background: rgba(5,5,10,0.78); }
.tvv-dialog-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.tvv-close { border: 0; background: rgba(255,255,255,0.12); color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
.tvv-close:hover { background: rgba(255,255,255,0.22); }
.tvv-dialog .tvv-langs { border-color: rgba(255,255,255,0.25); }
/* small "watch" link used next to titles in the dashboard */
.tvv-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--primary-text, #5B4EFF); text-decoration: none; background: rgba(91,78,255,0.10); border: 1px solid rgba(91,78,255,0.28); padding: 6px 12px 6px 8px; border-radius: 999px; cursor: pointer; }
.tvv-link:hover { background: rgba(91,78,255,0.16); }
.tvv-link .dot { width: 22px; height: 22px; border-radius: 50%; background: #5B4EFF; display: inline-flex; align-items: center; justify-content: center; }
.tvv-link .dot svg { width: 10px; height: 10px; fill: #fff; margin-left: 2px; }
@media (max-width: 600px) { .tvv-play { width: 62px; height: 62px; margin: -31px 0 0 -31px; } .tvv-title { font-size: 14px; } }