/* 播放器控件样式 - 从全局 style.css 抽取，供所有主题共用 */
/* ===== Play Page ===== */
.player-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 60px -16px rgba(0, 0, 0, 0.8);}
.player-placeholder {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: rgba(255,255,255,.55);}
.player-placeholder i {
    font-size: 64px;
    color: var(--primary);
    opacity: 0.6;}
/* 2026-11-03 兜底提示美化 v2：图标+文字整体居中、颜色强制可见 */
.player-placeholder span { font-size: 15px;}
.player-placeholder i.pp-icon { font-size: 78px; opacity: .85; }
.pp-title { font-size: 23px !important; font-weight: 600; color: #fff !important; letter-spacing: .4px; line-height: 1.5; }
.pp-sub { font-size: 13px !important; color: rgba(255,255,255,.55) !important; line-height: 1.5; }
.vp-loading-text { font-size: 15px; color: rgba(255,255,255,.85); letter-spacing: .3px; }
.vp-retry-btn {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border: 1px solid var(--border, rgba(255,255,255,.18));
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: var(--text-primary, #e8e8e8);
    font-size: 14px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;}
.vp-retry-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35);}
.vp-retry-btn i { font-size: 16px;}
/* ===== Custom Video Player ===== */
.vp-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
    pointer-events: none;}
.vp-loading, .vp-buffering {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    color: rgba(255,255,255,.7);
    font-size: 13px;
    pointer-events: none;
    gap: 12px;}
.vp-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: var(--primary);
    animation: spin 0.8s linear infinite;}
/* Click detection layer */
.vp-click-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    cursor: pointer;}
.vp-big-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    pointer-events: auto;
    cursor: pointer;}
.vp-big-play i {
    font-size: 52px;
    color: #fff;
    background: rgba(139,92,246,.65);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    box-shadow: 0 4px 24px rgba(139,92,246,.4);
    transition: transform .2s, background .2s;}
/* Unmute tip */
.vp-unmute-tip {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    background: rgba(139,92,246,.85);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(139,92,246,.3);
    animation: unmutePulse 2s ease infinite;
    white-space: nowrap;}
/* Autoplay tip */
.vp-autoplay-tip {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    background: rgba(139,92,246,.85);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(139,92,246,.3);
    animation: unmutePulse 2s ease infinite;
    white-space: nowrap;}
/* Long press speed indicator */
.vp-speed-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 24px;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;}
.vp-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
    padding: 24px 16px 12px;
    opacity: 0;
    transition: opacity .3s;}
.vp-controls.visible { opacity: 1;}
.vp-progress {
    position: relative;
    height: 20px;
    cursor: pointer;
    margin-bottom: 6px;
    touch-action: none;
    display: flex;
    align-items: center;}
.vp-progress::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    transition: height .15s;}
.vp-progress:hover::before,
.vp-progress:active::before { height: 6px;}
.vp-progress-buffered {
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.2);
    border-radius: 2px;
    pointer-events: none;
    transition: height .15s;}
.vp-progress-played {
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    transform: translateY(-50%);
    background: var(--primary);
    border-radius: 2px;
    pointer-events: none;
    transition: height .15s;}
.vp-progress:hover .vp-progress-buffered,
.vp-progress:active .vp-progress-buffered { height: 6px;}
.vp-progress:hover .vp-progress-played,
.vp-progress:active .vp-progress-played { height: 6px;}
.vp-progress-thumb {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: var(--primary);
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(139,92,246,.5);
    z-index: 2;}
.vp-progress:hover .vp-progress-thumb,
.vp-progress:active .vp-progress-thumb { opacity: 1;}
.vp-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;}
.vp-controls-left, .vp-controls-right {
    display: flex;
    align-items: center;
    gap: 6px;}
.vp-btn {
    position: relative;
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;}
.vp-btn:hover { background: rgba(255,255,255,.12);}
/* 按钮悬停气泡提示 */
.vp-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(16, 18, 24, .96);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #E8EAEE;
    font-size: 12px;
    line-height: 1.4;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 30;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.vp-btn[data-tip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.vp-text-btn {
    font-size: 13px !important;
    font-weight: 500;
    padding: 4px 10px;
    letter-spacing: .3px;}
.vp-time {
    font-size: 12px;
    color: rgba(255,255,255,.75);
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
    user-select: none;}
/* ---- Popup Menus (speed / quality / fit) ---- */
.vp-menu-wrap { position: relative;}
.vp-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    background: rgba(18, 18, 30, .95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 6px;
    min-width: 90px;
    z-index: 20;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);}
.vp-popup-title {
    font-size: 11px;
    color: rgba(255,255,255,.35);
    padding: 4px 12px 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
    user-select: none;}
.vp-popup-item {
    padding: 7px 16px;
    font-size: 13px;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap;
    text-align: center;
    transition: background .15s, color .15s;}
.vp-popup-item:hover {
    background: rgba(255,255,255,.08);
    color: #fff;}
.vp-popup-item.active {
    color: var(--primary);
    font-weight: 600;}
/* ---- Volume Slider ---- */
.vp-volume-wrap {
    display: flex;
    align-items: center;
    position: relative;}
.vp-volume-slider {
    width: 0;
    overflow: hidden;
    transition: width .25s ease;
    display: flex;
    align-items: center;}
.vp-volume-wrap:hover .vp-volume-slider,
.vp-volume-wrap.expanded .vp-volume-slider {
    width: 80px;
    padding-right: 4px;}
.vp-vol-range {
    -webkit-appearance: none;
    appearance: none;
    width: 76px;
    height: 4px;
    background: rgba(255,255,255,.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;}
.vp-vol-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--primary);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(139,92,246,.5);}
.vp-vol-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--primary);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(139,92,246,.5);}
/* ---- Progress Hover Tooltip ---- */
.vp-progress-tip {
    position: absolute;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: rgba(0,0,0,.85);
    color: #fff;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;}
/* ---- Player corner text logo ---- */
.vp-logo {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    pointer-events: none;
    user-select: none;}
.vp-logo i {
    font-size: 16px;
    color: var(--accent, #8b5cf6);}
.vp-logo img {
    height: 46px;
    width: auto;}
.vp-logo .vp-logo-en {
    font-size: 12px;
    font-weight: 600;
    color: #C00000;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: none;
    white-space: nowrap;}
/* ---- Fullscreen Top Bar ---- */
.vp-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: linear-gradient(rgba(0,0,0,.85), transparent);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;}
.vp-top-bar.visible {
    opacity: 1;
    pointer-events: auto;}
.vp-top-title {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}
/* ---- Mobile tap highlight fix ---- */
.player-wrap,
.player-wrap *,
.vp-click-layer,
.vp-controls,
.vp-controls *,
.vp-top-bar,
.vp-top-bar *,
.vp-big-play,
.vp-unmute-tip {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;}
/* ---- Fullscreen ---- */
.player-wrap:fullscreen { background: #000;}
.player-wrap:fullscreen .vp-video { object-fit: contain;}
.player-wrap:fullscreen .vp-controls { padding-bottom: 16px;}
/* ---- Inner wrapper (for portrait rotation) ---- */
.vp-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;}
/* ---- Portrait mode (fullscreen) ---- */
/* Rotate a single wrapper — all children (video, controls, overlays) rotate together */
.player-wrap:fullscreen.is-portrait {
    overflow: hidden;}
.player-wrap:fullscreen.is-portrait .vp-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 100vw;
    transform: translate(-50%, -50%) rotate(-90deg);}
/* CSS 兜底全屏（iOS/不支持 requestFullscreen 的浏览器） */
.player-wrap.is-css-fs {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #000;
    z-index: 9999;
}
.player-wrap.is-css-fs .vp-inner { border-radius: 0; }
/* 移动端：播放器角标 LOGO 缩小适配（桌面端不动） */
@media (max-width:768px){
  .vp-logo{top:6px;right:8px;gap:2px;font-size:9px;letter-spacing:.5px}
  .vp-logo i{font-size:10px}
  .vp-logo img{height:22px;width:auto}
  .vp-logo .vp-logo-en{font-size:8px;letter-spacing:1px}
  /* 2026-11-03 兜底提示移动端适配：图标/文字/间距缩放，保持居中 */
  .player-placeholder{gap:12px}
  .player-placeholder i.pp-icon{font-size:52px}
  .pp-title{font-size:17px !important;letter-spacing:.3px}
  .pp-sub{font-size:12px !important;padding:0 24px;text-align:center}
  .vp-loading-text{font-size:13px}
  .vp-retry-btn{padding:6px 18px;font-size:13px}
}
.vp-stall-tip{position:absolute;left:50%;top:16%;transform:translateX(-50%);z-index:6;background:rgba(0,0,0,.72);color:#ffd166;font-size:13px;line-height:1.5;padding:8px 16px;border-radius:8px;pointer-events:none;animation:vpFadeIn .25s}
.vp-stall-tip.warn{color:#ff8a8a}
.vp-stall-tip.slow{color:#a8c7e8;font-size:12px;padding:6px 12px}