/* Media viewer */
.viewer-modal { background: #06080d !important; }
.viewer-modal .modal-body { padding: 0; display: flex; }
.viewer { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; color: var(--text); }
.v-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 18px; background: linear-gradient(#0a0d14, #0a0d14e0); border-bottom: 1px solid #1b2232; }
.v-heading { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.v-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.v-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.v-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.v-stage { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, #121826, #06080d 70%); }
.v-video { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
.v-stage:fullscreen { background: #000; } .v-stage:fullscreen .v-video { height: 100vh; }
.v-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 64px; display: grid; place-items: center; border: 0; background: rgba(10, 13, 20, .55); color: #fff; cursor: pointer; border-radius: 12px; opacity: .55; transition: opacity .12s, background .12s; }
.v-nav:hover { opacity: 1; background: rgba(40, 50, 80, .8); } .v-nav.prev { left: 10px; } .v-nav.next { right: 10px; }
.info-open .v-nav.next { right: 306px; }
.v-spin { position: absolute; top: calc(50% - 17px); left: calc(50% - 17px); pointer-events: none; }
.v-bottom { background: #0a0d14; border-top: 1px solid #1b2232; padding: 6px 14px 8px; display: flex; flex-direction: column; gap: 2px; }
.v-bottom:empty { display: none; }
.tp-row { display: flex; align-items: center; gap: 4px; min-width: 0; } .tp-row.ctl { padding-top: 2px; } .tp-row.center { justify-content: center; }
.time-label { font: 12.5px var(--mono); color: var(--muted); padding: 0 8px; white-space: nowrap; }
.chip-btn .ic + span { min-width: 2.2em; text-align: left; }
.vol { display: flex; align-items: center; } .vol-range { width: 84px; }
.v-info { width: 300px; flex: none; background: #0d111a; border-left: 1px solid #1b2232; padding: 14px 16px; overflow: auto; }
.v-info h3 { margin-bottom: 10px; } .ir { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #1b2232; font-size: 13px; } .ir > span:last-child { text-align: right; overflow-wrap: anywhere; }
.v-fail { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 30px; color: var(--muted); } .v-fail .ic { width: 36px; height: 36px; color: var(--warn); } .v-fail b { color: var(--text); }
/* audio */
.v-stage.is-audio { flex-direction: column; gap: 22px; padding: 28px; }
.v-audio-art { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--audio); text-align: center; } .v-audio-art b { color: var(--text); max-width: 80vw; overflow-wrap: anywhere; }
.v-wavewrap { position: relative; width: min(1000px, 92%); height: 160px; background: #0d111a; border: 1px solid #1b2232; border-radius: 12px; overflow: hidden; }
.v-wave { width: 100%; height: 100%; display: block; cursor: pointer; }
.v-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .6); pointer-events: none; }
.v-wave-none { position: absolute; inset: 0; display: grid; place-items: center; }
/* photo */
.v-stage.is-photo { cursor: grab; } .v-photoview { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.v-photoview.grabbing { cursor: grabbing; } .v-img { max-width: none; max-height: none; transform-origin: center center; user-select: none; will-change: transform; image-rendering: auto; }
/* scrubber */
.scrubber { position: relative; flex: 1 1 auto; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.sb-track { position: relative; width: 100%; height: 5px; background: #2a3347; border-radius: 5px; overflow: hidden; }
.sb-buffered { position: absolute; left: 0; top: 0; bottom: 0; background: #48557a; } .sb-played { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.sb-thumb { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--accent); transition: transform .1s; } .scrubber:hover .sb-thumb, .scrubber:focus-visible .sb-thumb { transform: scale(1.25); }
.scrubber:hover .sb-track { height: 7px; }
@media (max-width: 760px) {
  .v-info { position: absolute; right: 0; top: 0; bottom: 0; z-index: 4; width: min(300px, 88vw); } .info-open .v-nav.next { right: 10px; }
  .v-title { max-width: 40vw; } .vol-range { display: none; } .v-nav { width: 38px; height: 54px; }
}