/* Lettore video personalizzato: sempre scuro, coerente in tema chiaro e scuro */
.vp { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; outline: none; user-select: none; -webkit-user-select: none; color: #fff; font: 500 13px 'Inter', -apple-system, 'Segoe UI', sans-serif; --vpa: linear-gradient(100deg, #ff6b8b, #7c6cff); border-radius: inherit; }
.vp video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; cursor: pointer; }
.vp.idle, .vp.idle video { cursor: none; }
.vp button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.vp svg { width: 20px; height: 20px; display: block; }

.vp::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0,0,0,.62)); transition: opacity .3s; }
.vp.idle::after, .vp.paused:not(.started)::after { opacity: 0; }

.vp-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
.vp-big span { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,20,22,.42); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 10px 40px rgba(0,0,0,.3); transition: transform .3s cubic-bezier(.2,.8,.2,1), background .2s; }
.vp-big span svg { width: 28px; height: 28px; margin-left: 4px; }
.vp.ended .vp-big span svg { margin-left: 0; }
.vp-big small { font-size: 13px; font-weight: 600; opacity: .85; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.vp-big:hover span { transform: scale(1.07); background: rgba(20,20,22,.58); }
.vp::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,.08), rgba(0,0,0,.38)); transition: opacity .4s; }
.vp.started::before { opacity: 0; }
.vp.playing .vp-big { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.85); }

.vp-flash { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0,0,0,.45); display: grid; place-items: center; opacity: 0; pointer-events: none; z-index: 2; }
.vp-flash.on { animation: vpFlash .6s ease-out; } .vp-flash svg { width: 26px; height: 26px; }
@keyframes vpFlash { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(1.35); } }

.vp-load { position: absolute; inset: 0; display: none; place-items: center; z-index: 2; pointer-events: none; }
.vp.waiting.playing .vp-load { display: grid; }
.vp-load i { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: vpSpin .8s linear infinite; }
@keyframes vpSpin { to { transform: rotate(360deg); } }

.vp-unmute { position: absolute; top: 14px; left: 14px; z-index: 4; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(0,0,0,.55) !important; backdrop-filter: blur(12px); font-weight: 600 !important; animation: vpIn .4s ease; }
.vp-unmute svg { width: 18px; height: 18px; }
.vp-unmute[hidden] { display: none; }
@keyframes vpIn { from { opacity: 0; transform: translateY(-6px); } }

.vp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 14px 10px; transition: opacity .3s, transform .3s; }
.vp.paused:not(.started) .vp-bar { opacity: 0; pointer-events: none; transform: translateY(8px); }
.vp.idle .vp-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.vp-seek { position: relative; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.vp-track { position: relative; width: 100%; height: 4px; border-radius: 3px; background: rgba(255,255,255,.22); transition: height .15s; }
.vp-seek:hover .vp-track, .vp.seeking .vp-track { height: 6px; }
.vp-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.vp-buf { background: rgba(255,255,255,.3); } .vp-hov { background: rgba(255,255,255,.22); }
.vp-prog { background: var(--vpa); }
.vp-knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); transform: scale(0); transition: transform .15s; }
.vp-seek:hover .vp-knob, .vp.seeking .vp-knob { transform: scale(1); }
.vp-tip { position: absolute; bottom: 22px; transform: translateX(-50%); padding: 4px 8px; border-radius: 7px; background: rgba(0,0,0,.75); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; }
.vp-seek:hover .vp-tip, .vp.seeking .vp-tip { opacity: 1; }
.vp-row { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.vp-b { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; opacity: .92; transition: background .15s, opacity .15s; }
.vp-b:hover { background: rgba(255,255,255,.14); opacity: 1; }
.vp-txt { width: auto; min-width: 40px; padding: 0 8px !important; font-weight: 700 !important; font-size: 13px; }
.vp-vol { display: flex; align-items: center; }
.vp-vt { width: 0; overflow: hidden; transition: width .25s cubic-bezier(.2,.8,.2,1); }
.vp-vol:hover .vp-vt, .vp-vt:active { width: 84px; }
.vp-vtrack { position: relative; width: 70px; height: 4px; margin: 14px 8px; border-radius: 2px; background: rgba(255,255,255,.25); cursor: pointer; touch-action: none; }
.vp-vtrack::before { content: ''; position: absolute; inset: -10px 0; }
.vp-vtrack i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: #fff; }
.vp-vtrack b { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; }
.vp-time { margin-left: 6px; font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; } .vp-time b { font-weight: 600; } .vp-time span { opacity: .7; }
.vp-sp { flex: 1; }
.vp-menu { position: absolute; bottom: 58px; z-index: 6; min-width: 150px; padding: 6px; border-radius: 14px; background: rgba(28,28,30,.88); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 12px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); animation: vpIn .2s ease; }
.vp-menu small { display: block; padding: 6px 10px 4px; font-size: 11.5px; opacity: .55; font-weight: 600; }
.vp-menu button { display: flex; width: 100%; padding: 8px 10px; border-radius: 9px; font-weight: 500; text-align: left; }
.vp-menu button:hover { background: rgba(255,255,255,.12); }
.vp-menu button.on { font-weight: 700; } .vp-menu button.on::after { content: '✓'; margin-left: auto; }
.vp.fs { border-radius: 0; } .vp.fs .vp-bar { padding: 0 28px 20px; }
@media (max-width: 600px) { .vp-vol .vp-vt { display: none; } .vp-time span:not(.vp-dur), .vp-time .vp-dur { } .vp-b { width: 34px; height: 34px; } .vp-big span { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .vp * { transition: none !important; animation: none !important; } }