/* ============================================================
   防雷网 - 实操视频频道样式（前台）
   仅含 vd-* 类；复用全站设计变量（浅色/深色自适应）
   ============================================================ */
.vd-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 28px 0 20px; border-bottom: 1px solid var(--border-light, #eceef2);
  margin-bottom: 22px;
}
.vd-hero-left h1 { font-size: 26px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; color: var(--text, #1a2330); }
.vd-hero-left h1 i { color: #ff4d4f; }
.vd-hero-sub { margin: 0; color: var(--text-muted, #6b7688); font-size: 14px; }
.vd-search { display: flex; border: 1px solid var(--border, #d9dee6); border-radius: 999px; overflow: hidden; background: var(--bg, #fff); }
.vd-search input { border: 0; outline: 0; padding: 10px 16px; width: 280px; max-width: 60vw; background: transparent; color: var(--text, #1a2330); font-size: 14px; }
.vd-search button { border: 0; background: #ff4d4f; color: #fff; padding: 0 18px; cursor: pointer; }
.vd-search button:hover { background: #e63c3e; }

/* 分类 tab */
.vd-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.vd-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border-light, #eceef2);
  background: var(--bg-elev, #f7f9fc); color: var(--text, #1a2330);
  text-decoration: none; font-size: 14px; transition: all .15s;
}
.vd-tab:hover { border-color: var(--c, #ff4d4f); color: var(--c, #ff4d4f); }
.vd-tab.active { background: var(--c, #ff4d4f); border-color: var(--c, #ff4d4f); color: #fff; }
.vd-tab-cnt { font-size: 12px; opacity: .8; background: rgba(0,0,0,.08); border-radius: 999px; padding: 1px 7px; }
.vd-tab.active .vd-tab-cnt { background: rgba(255,255,255,.25); }

/* 网格 */
.vd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.vd-card { text-decoration: none; color: var(--text, #1a2330); background: var(--bg, #fff); border: 1px solid var(--border-light, #eceef2); border-radius: 12px; overflow: hidden; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
.vd-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(20,30,50,.12); }
.vd-card-cover { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #0f1726; }
.vd-card-cover .vd-cover, .vd-card-cover .vd-cover--ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.vd-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-cover--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ph-color, #2f7bff), #0f1726); }
.vd-cover--ph i { font-size: 42px; color: rgba(255,255,255,.85); }
.vd-card-cat { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #fff; background: var(--c, #2f7bff); padding: 3px 9px; border-radius: 999px; }
.vd-card-dur { position: absolute; bottom: 8px; right: 8px; font-size: 12px; color: #fff; background: rgba(0,0,0,.65); padding: 2px 7px; border-radius: 4px; }
.vd-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,77,79,.92); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: 0; transition: opacity .15s; }
.vd-card:hover .vd-card-play { opacity: 1; }
.vd-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.vd-card-title { font-size: 15px; margin: 0; line-height: 1.4; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vd-card-desc { margin: 0; font-size: 13px; color: var(--text-muted, #6b7688); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vd-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted, #6b7688); margin-top: auto; }
.vd-card-tag { background: var(--bg-elev, #f0f3f8); color: var(--text-muted, #6b7688); padding: 2px 8px; border-radius: 999px; }

/* 空态 / 分页 */
.vd-empty { text-align: center; padding: 70px 20px; color: var(--text-muted, #6b7688); }
.vd-empty i { font-size: 46px; color: var(--border, #d9dee6); display: block; margin-bottom: 12px; }
.vd-pager { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 28px 0 10px; }
.vd-pager a { padding: 7px 13px; border-radius: 8px; border: 1px solid var(--border-light, #eceef2); color: var(--text, #1a2330); text-decoration: none; font-size: 14px; }
.vd-pager a.active, .vd-pager a:hover { background: #ff4d4f; color: #fff; border-color: #ff4d4f; }

/* ===================== 详情页 ===================== */
.vd-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; padding-top: 22px; padding-bottom: 30px; }
.vd-player { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; }
.vd-video { width: 100%; height: 100%; display: block; background: #000; }
.vd-iframe { width: 100%; height: 100%; border: 0; display: block; }
.vd-player--err { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; background: #1a2330; font-size: 14px; }
.vd-player--err i { font-size: 34px; opacity: .7; }

.vd-detail-head { margin-top: 16px; }
.vd-detail-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #fff; background: var(--c, #2f7bff); padding: 3px 11px; border-radius: 999px; }
.vd-detail-title { font-size: 22px; margin: 10px 0 8px; color: var(--text, #1a2330); }
.vd-detail-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--text-muted, #6b7688); }
.vd-detail-meta i { margin-right: 5px; }
.vd-detail-desc { margin-top: 18px; background: var(--bg-elev, #f7f9fc); border: 1px solid var(--border-light, #eceef2); border-radius: 10px; padding: 16px 18px; }
.vd-detail-desc h2 { font-size: 16px; margin: 0 0 8px; color: var(--text, #1a2330); }
.vd-detail-desc p { margin: 0; line-height: 1.7; color: var(--text, #1a2330); white-space: pre-wrap; }
.vd-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vd-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted, #6b7688); background: var(--bg-elev, #f0f3f8); padding: 5px 12px; border-radius: 999px; text-decoration: none; }
.vd-tag:hover { color: #ff4d4f; }

/* 侧栏 */
.vd-detail-side { align-self: start; }
.vd-side-title { font-size: 16px; font-weight: 600; margin-bottom: 14px; color: var(--text, #1a2330); display: flex; align-items: center; gap: 7px; }
.vd-side-title i { color: #ff4d4f; }
.vd-side-item { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--border-light, #eceef2); border-radius: 10px; margin-bottom: 10px; text-decoration: none; color: var(--text, #1a2330); transition: border-color .15s; }
.vd-side-item:hover { border-color: #ff4d4f; }
.vd-side-cover { width: 110px; flex: 0 0 110px; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: #0f1726; position: relative; }
.vd-side-cover .vd-side-cover-img, .vd-side-cover .vd-cover, .vd-side-cover .vd-cover--ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.vd-side-cover img { width: 100%; height: 100%; object-fit: cover; }
.vd-side-info { min-width: 0; }
.vd-side-info h4 { font-size: 14px; margin: 0 0 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vd-side-info span { font-size: 12px; color: var(--text-muted, #6b7688); }
.vd-side-empty { color: var(--text-muted, #6b7688); font-size: 14px; }
.vd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 8px; background: var(--bg-elev, #f0f3f8); color: var(--text, #1a2330); text-decoration: none; font-size: 14px; border: 1px solid var(--border-light, #eceef2); }
.vd-btn:hover { border-color: #ff4d4f; color: #ff4d4f; }
.vd-btn--block { display: flex; justify-content: center; margin-top: 8px; }

/* 响应式 */
@media (max-width: 860px) {
  .vd-detail { grid-template-columns: 1fr; }
  .vd-search input { width: 200px; }
}
@media (max-width: 560px) {
  .vd-hero { flex-direction: column; align-items: stretch; }
  .vd-search { width: 100%; }
  .vd-search input { width: 100%; }
  .vd-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .vd-card-title, .vd-card-desc { font-size: 13px; }
}

/* ===================== 列表页布局（主区 + 侧栏） ===================== */
.vd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.vd-main { min-width: 0; }

/* 侧栏 */
.vd-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }
.vd-side-cta {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 16px 18px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(135deg, #ff4d4f, #ff7a1a); color: #fff;
  box-shadow: 0 8px 20px rgba(255,77,79,.28); transition: transform .15s, box-shadow .15s;
}
.vd-side-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(255,77,79,.36); color: #fff; }
.vd-side-cta i { font-size: 20px; }
.vd-side-cta span { font-size: 16px; font-weight: 700; }
.vd-side-cta small { font-size: 12px; opacity: .92; }

.vd-side-block { background: var(--bg, #fff); border: 1px solid var(--border-light, #eceef2); border-radius: 12px; padding: 14px 14px 8px; }
.vd-side-block .vd-side-title { margin-bottom: 10px; font-size: 15px; }
.vd-side-block .vd-side-item { padding: 8px; margin-bottom: 8px; }
.vd-side-cover { width: 96px; flex: 0 0 96px; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: #0f1726; position: relative; }
.vd-side-cover .vd-cover, .vd-side-cover .vd-cover--ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.vd-side-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 最高播放排行 */
.vd-side-rank { display: flex; align-items: center; gap: 10px; padding: 8px 4px; text-decoration: none; color: var(--text, #1a2330); border-bottom: 1px solid var(--border-light, #eceef2); }
.vd-side-rank:last-child { border-bottom: 0; }
.vd-side-rank:hover .vd-rank-title { color: #ff4d4f; }
.vd-rank-no { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; background: var(--bg-elev, #f0f3f8); color: var(--text-muted, #6b7688); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.vd-rank-no.top { background: linear-gradient(135deg, #ff4d4f, #ff7a1a); color: #fff; }
.vd-rank-title { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-rank-views { font-size: 12px; color: var(--text-muted, #6b7688); flex: 0 0 auto; }

/* ===================== 上传表单 ===================== */
.vd-upload-form { background: var(--bg, #fff); border: 1px solid var(--border-light, #eceef2); border-radius: 12px; padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vd-field { display: flex; flex-direction: column; gap: 6px; }
.vd-field-full { grid-column: 1 / -1; }
.vd-field label { font-size: 14px; font-weight: 600; color: var(--text, #1a2330); }
.vd-field .req { color: #ff4d4f; }
.vd-field input[type=text], .vd-field select, .vd-field textarea {
  border: 1px solid var(--border, #d9dee6); border-radius: 8px; padding: 10px 12px; font-size: 14px;
  background: var(--bg, #fff); color: var(--text, #1a2330); outline: 0; font-family: inherit; width: 100%;
}
.vd-field input:focus, .vd-field select:focus, .vd-field textarea:focus { border-color: #ff4d4f; }
.vd-field textarea { resize: vertical; }
.vd-hint { margin: 0; font-size: 12px; color: var(--text-muted, #6b7688); }
.vd-upload-rules { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-muted, #6b7688); background: var(--bg-elev, #f7f9fc); border: 1px solid var(--border-light, #eceef2); border-radius: 8px; padding: 10px 12px; }
.vd-upload-rules i { color: #ff7a1a; margin-top: 2px; }
.vd-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.vd-btn--primary { background: #ff4d4f; color: #fff; border: 1px solid #ff4d4f; }
.vd-btn--primary:hover { background: #e63c3e; color: #fff; border-color: #e63c3e; }
.vd-upload-after { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ===================== 会员中心 ===================== */
.vd-my-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 4px; }
.vd-my-stat { background: var(--bg, #fff); border: 1px solid var(--border-light, #eceef2); border-radius: 12px; padding: 16px; text-align: center; }
.vd-my-stat b { display: block; font-size: 24px; color: var(--text, #1a2330); }
.vd-my-stat span { font-size: 13px; color: var(--text-muted, #6b7688); }
.vd-my-stat.ok b { color: #16b378; }
.vd-my-stat.warn b { color: #ff7a1a; }
.vd-my-list { display: flex; flex-direction: column; gap: 12px; }
.vd-my-item { display: flex; gap: 14px; background: var(--bg, #fff); border: 1px solid var(--border-light, #eceef2); border-radius: 12px; padding: 12px; }
.vd-my-cover { width: 160px; flex: 0 0 160px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #0f1726; position: relative; }
.vd-my-cover .vd-cover, .vd-my-cover .vd-cover--ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.vd-my-cover img { width: 100%; height: 100%; object-fit: cover; }
.vd-my-info { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vd-my-title { font-size: 15px; font-weight: 600; color: var(--text, #1a2330); text-decoration: none; }
.vd-my-title:hover { color: #ff4d4f; }
.vd-my-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--text-muted, #6b7688); }
.vd-cat-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #fff; background: var(--c, #2f7bff); padding: 2px 9px; border-radius: 999px; }
.vd-status { font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.vd-status.on { background: #e7f7ef; color: #16b378; }
.vd-status.off { background: #fff3e6; color: #ff7a1a; }
.vd-my-tip { margin: 0; font-size: 12px; color: #ff7a1a; }

/* 响应式 */
@media (max-width: 980px) {
  .vd-layout { grid-template-columns: 1fr; }
  .vd-side { position: static; }
}
@media (max-width: 640px) {
  .vd-upload-form { grid-template-columns: 1fr; }
  .vd-my-stats { grid-template-columns: repeat(2, 1fr); }
  .vd-my-item { flex-direction: column; }
  .vd-my-cover { width: 100%; flex: none; }
}