.video-hero { position: relative; display: inline-block; cursor: pointer; border-radius: var(--border-radius-lg); overflow: hidden; width: 100%; margin-bottom: 12px; }
.video-hero video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.play-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(0,0,0,0.25); opacity: 0; transition: opacity 0.2s; }
.video-hero:hover .play-hint { opacity: 1; }
.play-hint .play-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #222; line-height: 1; padding-left: 4px; }
.play-hint .play-label { font-size: 13px; color: #fff; font-family: var(--font-sans); letter-spacing: 0.02em; }
dialog { border: none; border-radius: var(--border-radius-lg); padding: 0; background: #000; width: min(90vw, 900px); max-width: 100%; }
dialog::backdrop { background: rgba(0,0,0,0.75); }
.dialog-inner { position: relative; }
.dialog-inner video { display: block; width: 100%; aspect-ratio: 16/9; }
.close-btn { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.6); border: none; color: #fff; cursor: pointer; border-radius: 20px; padding: 6px 12px 6px 8px; font-size: 13px; font-family: var(--font-sans); z-index: 10; }
.close-btn .x-icon { font-size: 18px; line-height: 1; font-weight: 500; }
.close-btn:hover { background: rgba(0,0,0,0.9); }