.video-cover { aspect-ratio: 4 / 3; overflow: hidden; background: #001e36; }
.video-cover .video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.video-cover .tag { z-index: 1; top: 12px; left: 12px; max-width: calc(100% - 24px); padding: 5px 10px; border-radius: 5px; color: #fff; background: #002d51ed; font-size: 16px; line-height: 1.3; }
.video-cover .play { position: relative; z-index: 1; width: 54px; height: 54px; color: #003763; border-color: #f6b333; background: #f6b333; box-shadow: 0 2px 14px #0005; }
.video-cover .video-duration { position: absolute; right: 12px; bottom: 12px; z-index: 1; padding: 3px 7px; border-radius: 4px; background: #002d51ed; color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.video-info { display: block; padding: 20px; }
.video-info .video-title { display: block; font-size: 19px; line-height: 1.3; }
.video-info .video-subtitle { display: block; margin-top: 9px; font-size: 16px; color: var(--muted); }
.campaign-video-player { display: block; width: 100%; height: auto; max-height: 65dvh; object-fit: contain; border-radius: 6px; background: #001522; }
.video-error { margin: 14px 0 0; font-size: 16px; color: var(--accent); }
.participation-example { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px; margin: 24px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); text-align: left; }
.participation-example img { width: 104px; height: 78px; flex-shrink: 0; object-fit: contain; border-radius: 4px; background: #001522; }
.participation-example strong, .participation-example small { display: block; }
.participation-example strong { font-size: 16px; line-height: 1.4; }
.participation-example small { margin-top: 4px; font-size: 16px; color: var(--muted); }
.participation-example:hover { border-color: var(--accent); }
#community-grid .video-cover, #archive-grid .video-cover { aspect-ratio: 4 / 5; }
@media(max-width:760px) {
  .video-info { padding: 15px; }
  .video-info .video-title { font-size: 16px; }
  .video-cover .tag { top: 8px; left: 8px; max-width: calc(100% - 16px); font-size: 14px; padding: 4px 7px; }
  .video-cover .play { width: 42px; height: 42px; }
  .video-cover .video-duration { right: 8px; bottom: 8px; }
  #community-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:480px) { #community-grid { grid-template-columns: 1fr; } }