/* 视频中心样式 */
.video-filter { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.video-filter .filter-tag { display:inline-block; padding:8px 20px; border:1px solid #e5e9f0; border-radius:20px; font-size:14px; color:#475569; transition:all .2s; }
.video-filter .filter-tag:hover { border-color:#0a5cd8; color:#0a5cd8; }
.video-filter .filter-tag.active { background:#0a5cd8; border-color:#0a5cd8; color:#fff; }

.video-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px; }
.video-card { background:#fff; border:1px solid #e5e9f0; border-radius:12px; overflow:hidden; cursor:pointer; transition:all .25s; }
.video-card:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(10,92,216,.12); border-color:#0a5cd8; }

.video-thumb { position:relative; aspect-ratio:16/9; background:#0b1f3a; overflow:hidden; }
.video-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.video-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; background:linear-gradient(135deg,#0a5cd8,#0b1f3a); }
.video-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; transition:all .25s; }
.video-play i { color:#fff; font-size:24px; }
.video-card:hover .video-play { background:#0a5cd8; transform:translate(-50%,-50%) scale(1.1); }
.video-badge { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.5); color:#fff; font-size:12px; padding:2px 10px; border-radius:10px; }

.video-info { padding:14px 16px 18px; }
.video-name { font-size:16px; font-weight:600; color:#0b1f3a; margin-bottom:8px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.video-meta { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.video-cat { font-size:12px; color:#0a5cd8; background:rgba(10,92,216,.08); padding:2px 10px; border-radius:10px; }
.video-date { font-size:12px; color:#9aa7b8; }
.video-desc { font-size:13px; color:#6b7a90; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 播放弹窗 */
.video-modal { position:fixed; inset:0; z-index:9999; display:none; }
.video-modal.show { display:block; }
.video-modal-mask { position:absolute; inset:0; background:rgba(0,0,0,.7); }
.video-modal-box { position:relative; width:min(900px, 92vw); max-height:90vh; background:#fff; border-radius:14px; margin:5vh auto; padding:20px; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.video-modal-close { position:absolute; top:10px; right:16px; font-size:28px; line-height:1; color:#6b7a90; cursor:pointer; z-index:2; }
.video-modal-close:hover { color:#0b1f3a; }
.video-modal-title { font-size:18px; font-weight:600; color:#0b1f3a; margin:0 40px 14px 0; }
.video-modal-player { width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden; }
.video-modal-player video, .video-modal-player iframe { width:100%; height:100%; display:block; }
.video-modal-desc { margin-top:14px; font-size:14px; color:#6b7a90; line-height:1.6; }

@media (max-width:768px){
  .video-grid { grid-template-columns:1fr 1fr; gap:14px; }
  .video-modal-box { width:95vw; padding:14px; }
  .video-modal-title { font-size:16px; }
}
@media (max-width:480px){
  .video-grid { grid-template-columns:1fr; }
}