#cvg-admin, #cvg-gallery { max-width: 1250px; margin: 0 auto; }
.cvg-public-link { margin: 0 0 18px; }
.cvg-section-heading { font-size: 1.35rem; margin: 22px 0 14px; }
.cvg-manage-heading { margin-top: 34px; }
.cvg-tabs { display: flex; gap: 8px; border-bottom: 1px solid #dfe3e7; margin: 16px 0 20px; }
.cvg-tab { border: 0; background: transparent; padding: 10px 18px; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; }
.cvg-tab.active { color: #0f6cbf; border-bottom-color: #0f6cbf; }
.cvg-tab-panel { display: none; }
.cvg-tab-panel.active { display: block; }
.cvg-upload-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.cvg-upload-panel { background: #fff; border: 1px solid #dfe3e7; border-radius: 10px; padding: 18px; margin-bottom: 0; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.cvg-upload-panel[data-upload-type="video"] { border-top: 4px solid #7b61ff; }
.cvg-upload-panel[data-upload-type="image"] { border-top: 4px solid #0f6cbf; }
.cvg-upload-panel h3 { margin-top: 0; }
.cvg-upload-intro { color: #5d6872; min-height: 44px; }
.cvg-upload-meta { color: #6b7280; font-size: .88rem; margin: 8px 0 14px; line-height: 1.55; }
.cvg-local-preview { margin: 14px 0; border: 1px dashed #bac3cb; border-radius: 8px; padding: 12px; background: #f8fafb; }
.cvg-preview-label { font-weight: 600; margin-bottom: 10px; }
.cvg-batch-preview-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cvg-selected-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; border: 1px solid #dfe3e7; border-radius: 8px; background: #fff; overflow: hidden; }
.cvg-selected-media { background: #111; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.cvg-selected-media img, .cvg-selected-media video { width: 100%; height: 145px; display: block; object-fit: contain; background: #111; }
.cvg-selected-info { min-width: 0; padding: 10px 10px 10px 0; }
.cvg-selected-filename { font-weight: 600; overflow-wrap: anywhere; }
.cvg-selected-size { color: #6b7280; font-size: .82rem; margin: 3px 0 8px; }
.cvg-item-title { margin-bottom: 7px; }
.cvg-item-description { resize: vertical; }
.cvg-help { color: #66717b; margin: 10px 0 14px; }
.cvg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; align-items: start; }
.cvg-empty { grid-column: 1 / -1; background: #f7f8f9; border: 1px dashed #c6ccd2; padding: 24px; border-radius: 8px; text-align: center; color: #66717b; }
.cvg-card { position: relative; border: 1px solid #dfe3e7; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform .15s ease, opacity .15s ease; }
.cvg-card[draggable="true"] { cursor: grab; }
.cvg-card.dragging { opacity: .55; transform: scale(.98); }
.cvg-card.is-hidden { opacity: .62; }
.cvg-drag-handle { position: absolute; right: 8px; top: 8px; z-index: 2; background: rgba(0,0,0,.7); color: #fff; border-radius: 5px; padding: 4px 8px; line-height: 1; cursor: grab; }
.cvg-media-wrap { background: #111; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cvg-media-wrap img { width: 100%; height: 100%; object-fit: cover; }
.cvg-media-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.cvg-card-body { padding: 13px; }
.cvg-card-body h3 { font-size: 1rem; margin: 0 0 7px; word-break: break-word; }
.cvg-card-body p { color: #5d6872; margin: 0 0 10px; }
.cvg-status { display: inline-block; font-size: .78rem; padding: 3px 8px; border-radius: 999px; margin-bottom: 10px; }
.cvg-status.on { background: #e6f4ea; color: #176b35; }
.cvg-status.off { background: #f1f3f4; color: #555; }
.cvg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cvg-toast { position: fixed; right: 24px; bottom: 24px; z-index: 10000; background: #188038; color: #fff; padding: 12px 16px; border-radius: 7px; box-shadow: 0 6px 22px rgba(0,0,0,.22); transform: translateY(20px); opacity: 0; transition: .2s; max-width: min(460px, calc(100vw - 48px)); }
.cvg-toast.error { background: #b3261e; }
.cvg-toast.show { transform: translateY(0); opacity: 1; }
.cvg-modal-overlay { position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,.48); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cvg-modal { width: min(430px, 100%); background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 15px 45px rgba(0,0,0,.25); }
.cvg-modal h3 { margin-top: 0; }
.cvg-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 900px) { .cvg-upload-panels { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .cvg-grid { grid-template-columns: 1fr; }
    .cvg-tab { flex: 1; }
    .cvg-selected-card { grid-template-columns: 1fr; }
    .cvg-selected-info { padding: 10px; }
    .cvg-selected-media img, .cvg-selected-media video { height: 220px; }
}

/* v1.2: keep the public Photos / Videos switch clearly visible. */
#cvg-gallery .cvg-public-tabs {
    display: flex !important;
    visibility: visible !important;
    gap: 10px;
    overflow: visible;
}
#cvg-gallery .cvg-public-tabs .cvg-tab {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    visibility: visible !important;
    font-size: 1rem;
}
#cvg-gallery .cvg-card:not(:has(.cvg-card-body)) .cvg-media-wrap {
    border-radius: 10px;
}

/* Chunked upload progress. */
.cvg-upload-progress { margin: 12px 0; }
.cvg-progress-bar { height: 10px; border-radius: 999px; background: #e9ecef; overflow: hidden; }
.cvg-progress-bar span { display: block; height: 100%; width: 0; background: #0f6cbf; transition: width .15s ease; }
.cvg-progress-text { margin-top: 5px; color: #5d6872; font-size: .86rem; }

/* Bulk selection/delete controls. */
.cvg-bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.cvg-delete-selected .cvg-selected-count::before { content: '('; }
.cvg-delete-selected .cvg-selected-count::after { content: ')'; }
.cvg-select-box {
    position: absolute;
    left: 9px;
    top: 9px;
    z-index: 4;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 7px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cvg-select-box input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.cvg-card.is-selected { outline: 3px solid #0f6cbf; outline-offset: 2px; }
.cvg-card.is-selected .cvg-select-box { background: #fff; }
.cvg-admin-filename { color: #6b7280; font-size: .78rem; margin: -2px 0 7px; overflow-wrap: anywhere; }

@media (max-width: 600px) {
    #cvg-gallery .cvg-public-tabs .cvg-tab { min-width: 0; flex: 1 1 50%; }
    .cvg-bulkbar .btn { flex: 1 1 auto; }
}


/* v1.3: public fused masonry collage and play-only video tiles. */
#cvg-gallery {
    max-width: 1650px;
    margin: 0 auto;
}

/*
 * The public gallery uses CSS columns instead of the fixed admin grid.
 * Images keep their natural aspect ratio, so rows do not line up and the
 * result feels like an uneven, fused photo collage.
 */
#cvg-gallery .cvg-collage {
    display: block;
    column-count: 3;
    column-gap: 0;
    width: 100%;
    line-height: 0;
}

#cvg-gallery .cvg-collage .cvg-card {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #000;
    overflow: hidden;
    vertical-align: top;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

#cvg-gallery .cvg-collage .cvg-media-wrap {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    aspect-ratio: auto;
    line-height: 0;
    overflow: hidden;
    background: #000;
}

#cvg-gallery .cvg-photo-collage .cvg-media-wrap img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    object-fit: cover;
    transition: transform .3s ease;
}

#cvg-gallery .cvg-photo-collage .cvg-card:hover img {
    transform: scale(1.02);
}

/* Public cards are media-only. */
#cvg-gallery .cvg-collage .cvg-card-body,
#cvg-gallery .cvg-collage .cvg-status,
#cvg-gallery .cvg-collage .cvg-actions,
#cvg-gallery .cvg-collage .cvg-drag-handle,
#cvg-gallery .cvg-collage .cvg-select-box,
#cvg-gallery .cvg-collage .cvg-admin-filename {
    display: none !important;
}

/* Video tiles use the same fused collage with only a centered play button. */
#cvg-gallery .cvg-video-collage .cvg-card {
    background: #000;
}

#cvg-gallery .cvg-video-wrap {
    position: relative;
    aspect-ratio: 16 / 10 !important;
    cursor: pointer;
}

#cvg-gallery .cvg-video-wrap video {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    background: #000;
    cursor: pointer;
}

#cvg-gallery .cvg-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: 76px;
    height: 76px;
    margin: 0;
    padding: 0;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 50%;
    background: rgba(0,0,0,.56);
    box-shadow: 0 4px 18px rgba(0,0,0,.30);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, opacity .18s ease;
}

#cvg-gallery .cvg-video-play::before {
    content: '';
    position: absolute;
    left: 52%;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 21px solid #fff;
    transform: translate(-42%, -50%);
}

#cvg-gallery .cvg-video-play:hover,
#cvg-gallery .cvg-video-play:focus {
    background: rgba(0,0,0,.76);
    transform: translate(-50%, -50%) scale(1.07);
    outline: none;
}

#cvg-gallery .cvg-video-wrap.is-playing .cvg-video-play {
    opacity: 0;
    pointer-events: none;
}

/* Keep the public type switch readable above the edge-to-edge collage. */
#cvg-gallery .cvg-public-tabs {
    margin-bottom: 0;
}

@media (max-width: 950px) {
    #cvg-gallery .cvg-collage {
        column-count: 2;
    }
}

@media (max-width: 560px) {
    #cvg-gallery .cvg-collage {
        column-count: 1;
    }

    #cvg-gallery .cvg-video-play {
        width: 62px;
        height: 62px;
    }

    #cvg-gallery .cvg-video-play::before {
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-width: 17px;
    }
}