/* 四虎 video component states and SEO-presentational utilities */
.video-meta-line { display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:#90a5a7; font-size:11px; }
.video-meta-line strong { color:var(--acid); font-weight:800; }
.video-meta-line time { padding-left:12px; border-left:1px solid rgba(209,228,228,.24); }
.video-chapter { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid #d7e0df; }
.video-chapter:last-child { border-bottom:0; }
.video-chapter b { color:var(--orange); font-size:12px; }
.video-chapter span { color:#3f595e; font-size:13px; }
.video-chapter em { color:#788e四虎; font-size:10px; font-style:normal; }
.video-chapter:hover span { color:var(--orange); }
.video-summary { display:flex; gap:13px; align-items:flex-start; padding:17px; border-radius:10px; background:#edf3f1; }
.video-summary > i { width:25px; height:25px; flex:none; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:var(--acid); font-style:normal; font-size:11px; }
.video-summary p { margin:0; color:#526b70; font-size:12px; }
.video-transcript { padding:22px; border-radius:12px; color:#435c61; background:#f5f6f0; font-size:13px; }
.video-transcript h4 { margin:0 0 8px; color:#18353a; font-size:15px; }
.video-transcript mark { padding:0 2px; color:inherit; background:rgba(231,255,102,.74); }
.video-status { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:99px; color:#44646a; background:#e2ecea; font-size:10px; font-weight:800; }
.video-status::before { content:""; width:6px; height:6px; border-radius:50%; background:#53bc77; }
.video-status.is-review::before { background:var(--orange); }
.video-status.is-archive::before { background:#8da3a5; }
.video-toolbar { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; }
.video-toolbar button { padding:7px 10px; border:1px solid #c4d3d2; border-radius:5px; color:#496267; background:#fff; font-size:11px; }
.video-toolbar button:hover { color:var(--ink); border-color:var(--acid); background:var(--acid); }
.video-cover-frame { position:relative; overflow:hidden; border-radius:13px; background:#14262b; }
.video-cover-frame::before { content:"四虎 VIDEO"; position:absolute; top:13px; left:14px; z-index:2; padding:3px 6px; border:1px solid rgba(255,255,255,.34); border-radius:3px; color:#f4f7f7; background:rgba(7,16,21,.45); font-size:9px; letter-spacing:.1em; }
.video-cover-frame img { width:100%; aspect-ratio:16 / 9; object-fit:cover; }
.video-cover-frame .play-orb { top:50%; right:50%; transform:translate(50%,-50%) scale(.94); }
.video-cover-frame:hover .play-orb { transform:translate(50%,-50%) scale(1); }
.video-topic-link { display:inline-flex; align-items:center; padding:6px 9px; border:1px dashed #7f9da0; border-radius:4px; color:#48656a; font-size:11px; }
.video-topic-link:hover { color:var(--ink); border-style:solid; border-color:var(--orange); background:var(--orange); }
.video-note { border-left:3px solid var(--blue); padding:10px 13px; color:#526c72; background:#eef6f5; font-size:12px; }
.video-note b { color:#24434a; }
.video-divider { display:flex; align-items:center; gap:9px; margin:28px 0; color:#71878a; font-size:10px; letter-spacing:.11em; }
.video-divider::before,.video-divider::after { content:""; height:1px; flex:1; background:#cbd8d7; }
.video-tag-list { display:flex; flex-wrap:wrap; gap:6px; }
.video-tag-list a { padding:3px 7px; border-radius:3px; color:#537075; background:#e4ecea; font-size:10px; }
.video-tag-list a:hover { color:var(--ink); background:var(--acid); }
.video-metric { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #c8d6d5; }
.video-metric div { padding:12px; border-right:1px solid #c8d6d5; }
.video-metric div:last-child { border-right:0; }
.video-metric b { display:block; color:var(--orange); font-family:Impact,"Arial Narrow"; font-size:25px; font-weight:400; line-height:1; }
.video-metric span { color:#61777b; font-size:10px; }
.video-empty { display:grid; min-height:145px; place-items:center; padding:20px; border:1px dashed #a8bbbb; color:#718589; text-align:center; font-size:12px; }
.video-empty strong { display:block; color:#3c575d; font-size:14px; }
@media (max-width:580px) { .video-chapter { grid-template-columns:35px 1fr; } .video-chapter em { display:none; } .video-metric div { padding:10px 7px; } }