.video-player { position: relative; background: #111715; color: #fffaf3; }
.video-player.is-enhanced { padding-bottom: 68px; }
.video-controls { position: absolute; inset: auto 0 0; min-height: 68px; display: flex; align-items: center; gap: 8px; padding: 14px 12px 8px; background: #17201c; }
.video-player button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fffaf3; padding: 11px; transition: background .2s ease, color .2s ease; }
.video-player button:hover { background: #ffffff1a; color: #e0a997; }
.video-player button svg { display: block; width: 22px; height: 22px; }
.video-player .video-play-overlay { position: absolute; left: 50%; top: calc((100% - 68px) / 2); transform: translate(-50%, -50%); width: 76px; height: 76px; padding: 24px; border: 1px solid #ffffff88; background: #17201ce6; box-shadow: 0 8px 35px #0004; }
.video-play-overlay svg { width: 28px; height: 28px; }
.video-time { font-size: 12px; font-variant-numeric: tabular-nums; margin-right: auto; white-space: nowrap; }
.video-player input[type=range] { appearance: none; -webkit-appearance: none; padding: 0; margin: 0; height: 28px; background: transparent; cursor: pointer; accent-color: #e0a997; border: 0; border-radius: 0; }
.video-player .video-seek { position: absolute; top: -10px; left: 14px; width: calc(100% - 28px); }
.video-player .video-volume { width: 64px; }
.video-player input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #707c75; }
.video-player input.video-seek::-webkit-slider-runnable-track { background: linear-gradient(to right, #e0a997 var(--played, 0%), #707c75 var(--played, 0%)); }
.video-player input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: #707c75; }
.video-player input[type=range]::-moz-range-progress { height: 4px; background: #e0a997; }
.video-player input[type=range]::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border: 0; border-radius: 50%; background: #e0a997; margin-top: -4px; }
.video-player input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #e0a997; }
.video-player input:disabled { opacity: .45; cursor: default; }
.video-player :focus-visible { outline: 2px solid #e0a997; outline-offset: 3px; }
.video-status { position: absolute; bottom: 88px; left: 15px; right: 15px; margin: 0; padding: 12px 16px; color: #fffaf3; background: #17201cf2; text-align: center; font-size: 13px; }
.video-player.is-loading::after { content: ''; position: absolute; top: calc((100% - 68px) / 2 - 18px); left: calc(50% - 18px); width: 36px; height: 36px; border: 2px solid #ffffff44; border-top-color: #e0a997; border-radius: 50%; animation: video-loading .8s linear infinite; pointer-events: none; }
.video-player:fullscreen { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; }
.video-player:fullscreen video { height: calc(100dvh - 68px); max-height: none; }
@keyframes video-loading { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .video-player .video-volume { display: none; } .video-controls { gap: 4px; padding-inline: 8px; } }
@media (prefers-reduced-motion: reduce) { .video-player button { transition: none; } .video-player.is-loading::after { animation: none; } }
@media print { .video-controls, .video-play-overlay, .video-status { display: none; } .video-player.is-enhanced { padding-bottom: 0; } }