.video-grid-container {
    display: flex; flex-wrap: wrap; gap: 15px; justify-content: flex-start; margin-bottom: 30px;
}
.video-grid-item {
    width: calc((100% - 45px) / 4); max-width: calc((100% - 45px) / 4);
    border: 1px solid #ddd; padding: 5px; margin-bottom: 15px; border-radius: 5px; background: #fff; box-sizing: border-box;
}
.video-label { font-size: 12px; font-weight: bold; color: #555; margin-bottom: 5px; display: flex; justify-content: space-between; }
.video-num { color: var(--color-primary, #d30000); font-weight: 800; }
.grid-video {
    width: 100%; height: auto; cursor: pointer; display: block; object-fit: cover;
    aspect-ratio: 16 / 9; border-radius: 3px; background: #000;
}
.grid-image {
    width: 100%; height: auto; cursor: pointer; display: block; object-fit: contain;
    aspect-ratio: auto; border-radius: 3px; background: transparent;
}
.video-x-save-btn {
    display: block !important; width: 100% !important; margin-top: 8px !important;
    background-color: #000 !important; color: #fff !important; text-align: center;
    text-decoration: none !important; font-size: 12px; font-weight: bold; padding: 8px 0;
    border-radius: 4px; line-height: 1.2; cursor: pointer;
}
.video-x-save-btn:hover { opacity: 0.8 !important; background-color: #333 !important; }
.video-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.95); justify-content: center; align-items: center; z-index: 999999;
}
.video-modal.active { display: flex; }
body.video-modal-open { overflow: hidden; }
.video-modal-wrapper { position: relative; width: 100%; max-width: 1000px; display: flex; align-items: center; justify-content: center; }
.video-modal video, .video-modal img { max-width: 100%; max-height: 80vh; }
#modalImage { max-width: 90vw; max-height: 80vh; width: auto; height: auto; object-fit: contain; }
.modal-close {
    position: absolute; top: -50px; right: 10px; background: rgba(255,255,255,0.2); color: #fff;
    border: none; font-size: 30px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
}
.modal-nav-prev, .modal-nav-next {
    position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 40px;
    padding: 20px; cursor: pointer; opacity: 0.7; background: rgba(0,0,0,0.3); border: 0;
    border-radius: 5px; appearance: none;
}
.modal-nav-prev:hover, .modal-nav-next:hover { opacity: 1; background: rgba(0,0,0,0.6); }
.modal-nav-prev { left: 10px; }
.modal-nav-next { right: 10px; }
.modal-mute {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: var(--color-primary, #d30000); color: #fff; border: none; padding: 10px 25px;
    border-radius: 30px; font-weight: bold; cursor: pointer; font-size: 14px;
}
.grid-video:focus-visible, .grid-image:focus-visible, .video-x-save-btn:focus-visible,
.modal-close:focus-visible, .modal-nav-prev:focus-visible, .modal-nav-next:focus-visible, .modal-mute:focus-visible {
    outline: 3px solid #005fcc; outline-offset: 2px;
}
@media screen and (max-width: 1024px) {
    .video-grid-item { width: calc((100% - 30px) / 3); max-width: calc((100% - 30px) / 3); }
}
@media screen and (max-width: 768px) {
    .modal-nav-prev, .modal-nav-next { font-size: 24px; padding: 10px; width: 40px; height: 40px; }
}
@media screen and (max-width: 480px) {
    .video-grid-container { gap: 8px; }
    .video-grid-item { width: calc((100% - 8px) / 2); max-width: calc((100% - 8px) / 2); padding: 5px; }
    .video-x-save-btn { font-size: 10px; padding: 6px 0; }
}