@layer components {
  .video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--hilite); }
  .video-frame video, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .video-frame iframe { background: #000; }

  .video-card { display: grid; gap: var(--s-3); }
  .video-card h3 { font-size: var(--t-base); }
  .video-meta { display: flex; gap: var(--s-3); align-items: center; color: var(--muted); font-size: var(--t-xs); font-family: var(--font-mono); }
  .video-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

  /* 外链占位：点击再加载 iframe（节省请求 + 隐私） */
  .video-poster { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; color: #fff; background: radial-gradient(ellipse at center, rgb(0 212 255 / .18), transparent 60%), #0D1420; cursor: pointer; }
  .video-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
  .video-poster .play {
    position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
    background: var(--cyan); color: var(--btn-ink); box-shadow: var(--glow); transition: transform var(--dur-fast) var(--ease-out);
  }
  .video-poster:hover .play { transform: scale(1.06); }
  .video-poster .play .icon { width: 32px; height: 32px; }

  /* 模态播放器（<dialog>） */
  .video-modal { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); width: 100%; margin: auto; }
  .video-modal::backdrop { background: rgb(7 11 18 / .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .video-modal-inner { position: relative; }
  .video-modal .video-frame { border-radius: var(--r-md); }
  .video-modal-close {
    position: absolute; top: -52px; right: 0; display: inline-flex; align-items: center; gap: var(--s-2);
    color: #E8EEF6; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-sm); border: 1px solid rgb(232 238 246 / .2); font-size: var(--t-sm);
  }
  .video-modal-close:hover { border-color: var(--cyan); color: var(--cyan); }
}