body { font-family: sans-serif; background: #ffffff; color: #000000; padding: 20px; margin: 0; }
a { color: #0066cc; text-decoration: none; } 
a:hover { text-decoration: underline; }
.breadcrumb { font-size: 1.1em; margin-bottom: 20px; font-weight: bold; }
.section-title { margin-top: 30px; border-bottom: 1px solid #ccc; padding-bottom: 5px; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }
.grid-item { border: 1px solid #ddd; padding: 5px; text-align: center; background: #fff; }
.grid-item img { width: 100%; height: 120px; object-fit: cover; display: block; margin: 0 auto; }
.grid-item .folder-placeholder { width: 100%; height: 120px; line-height: 120px; font-size: 3em; background: #f9f9f9; display: block; }
.grid-name { font-size: 0.85em; margin-top: 5px; word-break: break-all; color: #333; font-weight: bold; }
.video-list { margin-bottom: 30px; line-height: 1.6; }
.pagination { margin: 20px 0; font-size: 1.1em; }
.pagination a, .pagination span { padding: 5px 10px; border: 1px solid #ccc; margin-right: 5px; }
.pagination .current { background: #f0f0f0; font-weight: bold; }

/* --- DARK LIGHTBOX MODAL --- */
.lightbox-modal { 
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.9); /* Dark backdrop overlay */
    text-align: center; 
}
.lightbox-modal:target { display: block; }
.lightbox-content { display: inline-block; margin-top: 5vh; max-width: 90%; max-height: 80vh; position: relative; }
.lightbox-content img { max-width: 100%; max-height: 80vh; box-shadow: 0 0 20px rgba(0,0,0,0.6); border: 1px solid #444; }

/* White text for the image file name caption */
.lightbox-caption { margin-top: 10px; font-size: 1em; color: #ffffff; } 
.lightbox-close-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: default; z-index: -1; }

/* White close button */
.btn-close { 
    position: absolute; 
    top: -45px; 
    right: 0; 
    font-size: 35px; 
    font-weight: bold; 
    color: #ffffff; 
    background: none;
    border: none;
    text-decoration: none;
}
.btn-close:hover { color: #ccc; text-decoration: none; }

/* White navigation arrows */
.btn-nav { 
    position: fixed; 
    top: 50%; 
    transform: translateY(-50%); 
    font-size: 50px; 
    font-weight: bold; 
    color: #ffffff; 
    padding: 20px; 
    user-select: none; 
    text-decoration: none;
}
.btn-nav:hover { color: #ccc; text-decoration: none; }
.btn-prev { left: 2%; } 
.btn-next { right: 2%; }

.gallery-header { margin-bottom: 20px; } 
.gallery-footer { margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px; }