/* ========== B站风格 ArtPlayer 样式 ========== */

/* 进度条容器 - B站风格更细 */
.art-control-progress {
    height: 3px !important;
    transition: height 0.15s ease !important;
}
.art-control-progress:hover {
    height: 7px !important;
}

/* 进度条轨道 */
.art-control-progress-inner {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
}

/* 已播放进度 - B站标志性粉色 */
.art-control-progress .art-loaded {
    background: rgba(255, 255, 255, 0.3) !important;
}
.art-control-progress .art-played {
    background: #fb7299 !important;
    border-radius: 0 !important;
}

/* 进度条拖拽手柄 - B站风格小圆点 */
.art-control-progress .art-played-indicator {
    width: 12px !important;
    height: 12px !important;
    background: #fb7299 !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3) !important;
}
.art-control-progress:hover .art-played-indicator {
    opacity: 1 !important;
}

/* 进度条提示框 - B站风格 */
.art-setting-panel {
    background: rgba(0, 0, 0, 0.85) !important;
    border-radius: 4px !important;
    backdrop-filter: blur(10px) !important;
}

/* 控制栏背景 - B站风格渐变 */
.art-bottom {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)) !important;
    padding: 0 10px 5px !important;
}

/* 播放按钮 - B站风格 */
.art-controls .art-icon {
    color: #fff !important;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3)) !important;
}
.art-controls .art-icon:hover {
    color: #fb7299 !important;
}

/* 音量滑块 - B站风格 */
.art-volume-panel {
    background: rgba(0, 0, 0, 0.85) !important;
    border-radius: 4px !important;
}
.art-volume-panel .art-volume-slider {
    background: #fb7299 !important;
}

/* 加载动画 - B站风格旋转圆圈 */
.art-loading {
    display: none !important;
}

.art-bottom .art-loading,
.artplayer .art-loading {
    display: none !important;
}

/* 自定义B站风格加载动画 */
.artplayer .art-mask {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* B站风格加载旋转圈 */
.art-loading-spinner {
    display: none !important;
}

/* 控制栏时间显示 - B站风格 */
.art-controls .art-time {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 12px !important;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* 设置面板选项 - B站风格 */
.art-setting-panel .art-setting-item {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 8px 12px !important;
    transition: background 0.2s ease !important;
}
.art-setting-panel .art-setting-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}
.art-setting-panel .art-setting-item-on {
    color: #fb7299 !important;
}

/* 右键菜单 - B站风格 */
.art-contextmenus {
    background: rgba(0, 0, 0, 0.85) !important;
    border-radius: 4px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
.art-contextmenus .art-contextmenu-item {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
}
.art-contextmenus .art-contextmenu-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* 通知消息 - B站风格 */
.art-notice {
    background: rgba(0, 0, 0, 0.75) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    backdrop-filter: blur(10px) !important;
}

/* 标题层 - B站风格 */
.art-title {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* 全屏按钮样式 */
.art-fullscreen {
    color: #fff !important;
}

/* 画中画按钮 */
.art-pip {
    color: #fff !important;
}

/* 倍速显示 */
.art-playback-rate {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 12px !important;
}

/* 进度条预览缩略图 */
.art-control-progress .art-progress-tip {
    background: rgba(0, 0, 0, 0.85) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    color: #fff !important;
    font-size: 12px !important;
    backdrop-filter: blur(10px) !important;
}

/* 响应式 - 移动端 */
@media (max-width: 768px) {
    .art-control-progress {
        height: 2px !important;
    }
    .art-control-progress:hover {
        height: 5px !important;
    }
    .art-bottom {
        padding: 0 5px 3px !important;
    }
}