:root {
    --body-font: "Roboto", sans-serif;
    --body-color: #2B988F;
}

.main-color {
    color: #2B988F;
    margin-top: 4px;
    font-size: 95% !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    max-height: 350px;
}

h4 {
    font-weight: 700;
    margin-bottom: 18px;
    font-size: 1.3rem;
}

/* =========================
   BOOK / MEDIA UI
========================= */

.book-store {
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

#clubTabsContent {
    min-height: 300px;
    overflow: visible;
}


.book {
    background: #fff;
}

.book-cell {
    display: flex;
    padding: 25px;
    height: 250px;
    width: 100%;
}

.book-photo {
    width: 100%;
    border-radius: 2px;
    box-shadow: -2px 6px 19px 0px #7f818e;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
    display: block;
}



    .book-photo:hover {
        transform: scale(1.03);
    }

.book-content {
    padding: 0 20px;
    overflow: hidden;
}

.book-title,
.book-author {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   HEADER / ALBUM
========================= */

/* Scoped to club dashboard only */
.book-store .album-cover,
.book-cell .album-cover {
    position: relative;
    margin-bottom: -50px;
    z-index: 10;
}


.album-cover-wrapper {
    overflow: hidden;
    border-radius: 8px;
    max-width: 280px;
    margin-left: -5px;
}

.album-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 0 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

    /* gradient layer */
    .album-overlay::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.72), transparent);
        z-index: -1;
    }


/* =========================
   CLUB TABS
========================= */

#clubTabs {
    justify-content: space-between;
    border-bottom: none;
    background: #fff;
    margin-top: -90px;
    padding: 10px 20px;
}

    #clubTabs .nav-link {
        flex: 1;
        text-align: center;
        color: #585858;
        font-size: 13px;
        border-radius: 4px;
        transition: color .2s, background-color .2s;
    }

        #clubTabs .nav-link:hover {
            background-color: #f4f4f4;
            color: #2B988F;
        }

        #clubTabs .nav-link.active {
            color: #2B988F;
            font-weight: 600;
            position: relative;
        }

            #clubTabs .nav-link.active::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 10%;
                width: 80%;
                height: 4px;
                background-color: #2B988F;
                border-radius: 2px;
            }

/* =========================
   CHAT
========================= */

.chat-box,
.review-box,
.message-box {
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.chat-msg-own {
    flex-direction: row-reverse !important;
}

.msg-text {
    line-height: 1.65;
}

.msg-edited-mark {
    opacity: 0.45;
    font-size: 0.85em;
    margin-left: 2px;
    cursor: default;
}

    .chat-msg-own .msg-text {
        background: #DCEBFA !important;
    }

.chat-msg-other .msg-text {
    background: #f1f1f1 !important;
}

/* ── Inline chat message editor ── */
.msg-edit-wrap {
    width: 100%;
}

.msg-edit-quill-mount .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0 0;
    background: #f8f9fa;
    padding: 4px 8px;
    border-color: #d0d5dd;
}

.msg-edit-quill-mount .ql-container.ql-snow {
    border-radius: 0 0 8px 8px;
    border-color: #d0d5dd;
    font-size: 0.9rem;
}

.msg-edit-quill-mount .ql-editor {
    min-height: 52px;
    padding: 8px 10px;
}

.msg-edit-hint {
    font-size: 0.72rem;
    color: #adb5bd;
    padding: 4px 2px 0;
}

.msg-edit-hint kbd {
    font-size: 0.68rem;
    padding: 1px 4px;
    background: #f1f3f5;
    border: 1px solid #ced4da;
    border-radius: 3px;
    color: #495057;
}

.chat-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1rem 0;
    font-size: 0.8rem;
    color: #888;
}

    .chat-divider::before,
    .chat-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #ccc;
    }

/* =========================
   QUEUE
========================= */

.queue-card:not(.add-to-queue-card) { cursor: pointer; }
.queue-card {
    box-shadow: 0 1px 4px rgba(25,25,60,0.06);
    border-radius: 10px;
    transition: box-shadow .14s, transform .13s;
}

    .queue-card:hover {
        z-index: 5;
        box-shadow: 0 0 0 1px rgba(41, 181, 168, 0.22), 0 4px 18px rgba(41, 181, 168, 0.16);
    }

.queue-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    transition: border-color .14s, box-shadow .14s;
    z-index: 2;
}

    .queue-item:hover::after {
        border-color: rgba(41, 181, 168, 0.5);
        box-shadow: inset 0 0 16px rgba(41, 181, 168, 0.1);
    }

.queue-editing-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* =========================
   MEMBERS
========================= */

.member-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    background: #fff;
}

    .member-item.pending {
        background: #F8F9FA !important;
        border: 1px dashed #EBEBEB;
    }

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 0.65rem;
}

/* =========================
   BUTTONS
========================= */

.send-btn-theme {
    background-color: #2B988F !important;
    color: white !important;
}

    .send-btn-theme:hover {
        background-color: #17756D !important;
    }

/* =========================
   FOOTER
========================= */

footer {
    background-color: #0A0A0D;
    border-top: 1px solid #eaeaea;
    font-size: 0.85rem;
    border-radius: 0;
    margin-bottom: 0;
}

    footer a {
        color: white !important;
    }

/* =========================
   ANIMATIONS
========================= */

@keyframes waveMove {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: 120px;
    }
}


/* =====================================================
   ARCHIVE NAV — MATCH FORUM PAGINATION
===================================================== */

/* --- Top nav wrapper: whole block is clickable --- */
.archive-top-nav-wrap {
    display: block;
    text-align: center;
    min-width: 120px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.archive-top-nav-wrap:hover {
    background: rgba(43, 152, 143, 0.07);
}
.archive-top-nav-wrap.disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Arrow button inside wrapper — circular, teal */
.archive-top-arrow-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 16px;
    border: 1px solid #dbe7e6;
    background: #fff;
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* clicks handled by wrapper */
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.archive-top-nav-wrap:hover .archive-top-arrow-btn {
    background: #DEF1EF;
    border-color: rgba(43, 152, 143, 0.5);
}
.archive-top-arrow-btn .material-icons {
    font-size: 20px;
    line-height: 1;
}

/* --- Arrow button: keep original disabled state via JS toggling wrapper --- */
#archivePrevBtn,
#archiveNextBtn {
    /* no extra overrides needed — styled via .archive-top-arrow-btn */
}
#archivePrevBtn:disabled,
#archiveNextBtn:disabled {
    opacity: 0.4;
}

/* --- Album + artist labels under arrows --- */
#archivePrevLabel,
#archiveNextLabel {
    font-size: 0.7rem;
    line-height: 1.2;
    color: #6b7280;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}
.archive-top-nav-wrap:hover #archivePrevLabel,
.archive-top-nav-wrap:hover #archiveNextLabel {
    color: #1f2937;
}

/* --- Dropdown styled like "active page" --- */
#archiveCycleSelect {
    min-height: 32px;
    padding: 7px 14px;
    border: 1px solid rgba(43, 152, 143, .35);
    background-color: transparent;
    color: #2B988F;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}


    /* Focus ring — soft, not Bootstrap blue */
    #archiveCycleSelect:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.25);
    }

    /* Dropdown options (clean, readable) */
    #archiveCycleSelect option {
        color: #222;
        background: #fff;
        font-weight: 500;
    }


    #archiveAlbumHeader img {
        border-radius: 6px;
    }

.archive-tab-wrapper .border {
    background: #fafafa;
}

/* Bottom archive nav */
.archive-bottom-nav {
    padding: 6px 8px;
}

/* ── Bottom nav: whole block is the button ── */
.archive-bot-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    background: none;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    max-width: 50%;
}
.archive-bot-side--right {
    justify-content: flex-end;
    text-align: right;
}
.archive-bot-side:disabled {
    opacity: 0.3;
    pointer-events: none;
}
.archive-bot-side:hover:not(:disabled) {
    background: rgba(43, 152, 143, 0.06);
}
.archive-bot-arrow {
    font-size: 22px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: color 0.15s;
}
.archive-bot-side:hover:not(:disabled) .archive-bot-arrow {
    color: #2B988F;
}
.archive-bot-label {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.3;
    transition: color 0.15s;
}
.archive-bot-side:hover:not(:disabled) .archive-bot-label {
    color: #1f2937;
}


.archive-tab-wrapper h6 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =========================================
   ARCHIVE REVIEW STATS — COMPACT + CLEAN
========================================= */

.archive-rating-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

/* Top row: stars + rating */
.archive-rating-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

    .archive-rating-main .stars {
        display: flex;
        gap: 1px;
        line-height: 1;
    }

    .archive-rating-main .material-icons {
        font-size: 14px; /* 🔑 smaller stars */
        color: #d0d0d0;
    }

        .archive-rating-main .material-icons.filled {
            color: #f5b301;
        }

    .archive-rating-main .rating-value {
        font-size: 0.78rem;
        font-weight: 600;
        color: #2B988F;
        margin-left: 2px;
    }

/* Second row: review count */
.archive-rating-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: #6b7280;
}

    .archive-rating-sub .material-icons {
        font-size: 13px;
        color: #1d6ad4; /* subtle purple */
    }

/* =========================================
   ARCHIVE ALBUM HEADER — STAR RATING
========================================= */

.archive-album-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #6b7280;
}

    .archive-album-rating .rating-count {
        font-size: 0.68rem;
        opacity: 0.85;
        white-space: nowrap;
    }


    .archive-album-rating .stars {
        display: flex;
        gap: 1px;
        line-height: 1;
    }

    .archive-album-rating .material-icons {
        font-size: 14px;
        color: #d0d0d0;
    }

        .archive-album-rating .material-icons.filled {
            color: #f5b301;
        }

    .archive-album-rating .rating-value {
        font-weight: 600;
        color: #2B988F;
        white-space: nowrap;
    }

    .archive-album-rating .rating-count {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 0.68rem;
        color: #1d6ad4; /* purple accent */
    }

        .archive-album-rating .rating-count .material-icons {
            font-size: 13px;
        }

/* =========================================
   ARCHIVE RATING LOADING (INLINE)
========================================= */

.archive-rating-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: #9aa0a6;
}

    .archive-rating-loading .spinner {
        width: 12px;
        height: 12px;
        border: 2px solid rgba(43, 152, 143, 0.25);
        border-top-color: #2B988F;
        border-radius: 50%;
        animation: archiveSpin 0.7s linear infinite;
    }

    .archive-rating-loading .loading-text {
        white-space: nowrap;
    }

@keyframes archiveSpin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================
   Spotify Button (Archive)
   ========================= */
/* =========================================
   ARCHIVE PREVIEW ITEMS — TIGHT + CLEAN
========================================= */

.archive-preview-item {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #e6eaea;
}

    .archive-preview-item:last-child {
        border-bottom: none;
    }

.archive-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #e5e7eb;
}

.archive-preview-body {
    flex: 1;
    min-width: 0;
}

.archive-preview-user {
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-preview-text {
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   ARCHIVE CARDS — STICKY FOOTERS
========================================= */

/* Archive activity boxes: 3-col only at 1162px+, stacked below */
@media (max-width: 1161px) {
    #pane-archive .col-md-4 {
        width: 100%;
    }
}

.archive-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: none;
    border: none;
}

/* ── Archive summary dividers ── */

/* Wide (3 cols side-by-side): vertical dividers */
@media (min-width: 1162px) {
    .archive-summary-row .col-md-4:not(:last-child) .archive-card {
        border-right: 1px solid #e9ecef;
    }
}

/* Narrow (stacked): horizontal dividers */
@media (max-width: 1161px) {
    .archive-summary-row .col-md-4:not(:last-child) .archive-card {
        border-bottom: 1px solid #e9ecef;
        padding-bottom: 18px;
    }
    .archive-summary-row .col-md-4:not(:first-child) .archive-card {
        padding-top: 18px;
    }
}

.arch-full-close {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 1.1rem;
    line-height: 1;
    color: #bbb;
    cursor: pointer;
    transition: color .15s;
}
.arch-full-close:hover { color: #555; }

.archive-card-body {
    flex-grow: 1;
    font-size: 0.85rem;
}

.archive-card-footer {
    margin-top: auto;
    padding-top: 6px;
    font-size: 0.68rem;
}

    .archive-card-footer a {
        color: #2B988F;
        font-weight: 600;
        text-decoration: none;
    }

        .archive-card-footer a:hover {
            text-decoration: underline;
        }

/* =========================================
   ARCHIVE FOOTER LINK — DISABLED
========================================= */

.archive-footer-link.disabled {
    color: #9aa0a6;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

/* =========================================
   ARCHIVE ALBUM HEADER — CLEAN SKELETON
========================================= */

.archive-album-header {
    position: relative;
}

    /* Lock layout so skeleton never jumps */
    .archive-album-header > .d-flex {
        min-height: 100px;
        align-items: center;
    }

/* COVER */
.archive-cover-wrap {
    width: 130px !important;
    height: 130px !important;
    position: relative;
    flex-shrink: 0;
}

.archive-cover-img {
    width: 130px !important;
    height: 130px !important;
    object-fit: cover;
    border-radius: 6px;
}

/* TEXT SKELETONS */
.archive-text-skeleton {
    height: 10px;
    border-radius: 4px;
    background: #e5e7eb;
    margin-bottom: 4px;
}

    .archive-text-skeleton.w-60 {
        width: 60%;
    }

    .archive-text-skeleton.w-50 {
        width: 50%;
    }

    .archive-text-skeleton.w-40 {
        width: 40%;
    }

    .archive-text-skeleton.w-30 {
        width: 30%;
    }

/* SHIMMER */
.shimmer {
    background: linear-gradient( 90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63% );
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* LOADING STATE */
.archive-album-header.is-loading .archive-cover-img {
    opacity: 0;
}

.archive-album-header.is-loading #archiveTitle,
.archive-album-header.is-loading #archiveArtist,
.archive-album-header.is-loading #archiveDates {
    visibility: hidden;
}

/* LOADED STATE */
.archive-album-header:not(.is-loading) .archive-cover-skeleton,
.archive-album-header:not(.is-loading) .archive-text-skeleton {
    display: none;
}

/* Prevent skeleton wrap jump on archive header */
.archive-album-header > .d-flex {
    flex-wrap: nowrap;
}

.archive-cover-skeleton {
    width: 82px;
    height: 82px;
    border-radius: 6px;
    background: #e5e7eb;
}

.archive-album-header:not(.is-loading) .archive-cover-skeleton {
    display: none;
}

/* =========================================
   ARCHIVE TEXT SKELETON — OVERLAY (NO JUMP)
========================================= */

.archive-text-wrap {
    position: relative;
    min-height: 56px; /* locks layout height */
}

.archive-text-skeleton-wrap {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}

.archive-album-header.is-loading .archive-text-skeleton-wrap {
    display: flex;
}

.archive-album-header.is-loading #archiveTitle,
.archive-album-header.is-loading #archiveArtist,
.archive-album-header.is-loading #archiveDates,
.archive-album-header.is-loading #archiveAlbumRating {
    visibility: hidden;
}

.archive-album-header.is-loading #archivePickerRow {
    display: none !important;
}

.archive-picker-skeleton {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.archive-picker-skeleton .arch-skel-line {
    margin-bottom: 0;
}

.archive-album-header.is-loading .archive-picker-skeleton {
    display: flex;
}

/* Rating shimmer line (stars placeholder) */
.archive-rating-skeleton {
    height: 8px;
    margin-top: 6px;
}

/* =========================================
   ARCHIVE — SPOTIFY SHIMMER REVEAL
========================================= */

.archive-spotify-wrap {
    position: relative;
    width: fit-content;
}

/* Real button */
.archive-spotify-btn {
    position: relative;
    z-index: 2;
    transition: opacity 0.25s ease, filter 0.35s ease;
}

/* Skeleton overlay */
.archive-spotify-skeleton {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient( 110deg, rgba(29,185,84,0.25) 25%, rgba(29,185,84,0.4) 37%, rgba(29,185,84,0.25) 63% );
    background-size: 400% 100%;
    pointer-events: none;
    z-index: 3;
}

/* LOADING STATE */
.archive-album-header.is-loading .archive-spotify-btn {
    opacity: 0;
    filter: blur(6px);
}

.archive-album-header.is-loading .archive-spotify-skeleton {
    display: block;
    animation: shimmer 1.2s ease-in-out infinite;
}

/* LOADED STATE */
.archive-album-header:not(.is-loading) .archive-spotify-skeleton {
    display: none;
}

.archive-album-header:not(.is-loading) .archive-spotify-btn {
    opacity: 1;
    filter: blur(0);
}

/* =============================================
   ARCHIVE ALBUM HEADER — IMMERSIVE VINYL
============================================= */

.archive-album-header {
    background: #0f0f12;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
}

/* Blurred album art atmosphere — fills the background with the cover's mood */
.archive-album-header::before {
    content: '';
    position: absolute;
    inset: -30px;
    background-image: var(--arch-bg-url, none);
    background-size: cover;
    background-position: center;
    filter: blur(45px) brightness(0.28) saturate(1.8);
    z-index: 0;
    transition: background-image 0.5s ease;
    pointer-events: none;
}

.arch-hero-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 26px;
    flex-wrap: nowrap;
}

/* Cover */
.archive-album-header .archive-cover-wrap {
    width: 170px !important;
    height: 170px !important;
}

.archive-album-header .archive-cover-skeleton {
    width: 170px !important;
    height: 170px !important;
    border-radius: 8px;
    background: rgba(255,255,255,0.07) !important;
}

.arch-cover-col {
    flex-shrink: 0;
}

/* Cover wrap needs overflow:hidden so the gradient clips to rounded corners */
.archive-album-header .archive-cover-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.arch-cover-img {
    width: 170px !important;
    height: 170px !important;
    object-fit: cover;
    border-radius: 8px;
    box-shadow:
        0 8px 40px rgba(0,0,0,0.75),
        0 2px 10px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.06);
    display: block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.arch-cover-img:hover {
    transform: scale(1.03) translateY(-3px);
    box-shadow:
        0 16px 50px rgba(0,0,0,0.85),
        0 4px 14px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.1);
}

/* Film/TV clubs: portrait poster art (2:3) instead of the square album cover.
   Header gets .archive-album-header--poster from archive.js. */
.archive-album-header--poster .archive-cover-wrap,
.archive-album-header--poster .archive-cover-skeleton,
.archive-album-header--poster .archive-cover-img,
.archive-album-header--poster .arch-cover-img {
    width: 150px !important;
    height: 225px !important;
}

.arch-info-col {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Cover + details row. The wrapper carries the side-by-side layout so the
   mobile badge/stats pill can sit on its own line above it; on desktop the
   wrapper is the only visible child of .arch-hero-wrap and just fills it. */
.arch-hero-cols {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Swipe-hint chevrons are a mobile-only affordance (see dash-mobile.css). */
.arch-swipe-hint { display: none; }

/* The copy-link button is an icon-only circle on desktop; its text label is
   only shown in the mobile hero's inline button row (see dash-mobile.css).
   (.arch-hero-detail / .arch-hero-actions are created only by the mobile
   reflow in archive.js, so they never appear in this desktop layout.) */
.arch-share-btn__label { display: none; }

/* ARCHIVED badge — pill now holds the static label plus an optional
   "Add/Edit review" inline link separated by a thin divider. Flexed so
   both segments share the same height and vertical centring. */
.arch-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2B988F;
    background: rgba(43,152,143,0.12);
    border: 1px solid rgba(43,152,143,0.28);
    border-radius: 4px;
    padding: 2px 7px;
    line-height: 1.7;
    margin-bottom: 8px;
}
.arch-badge__label { display: inline-flex; }
.arch-badge__slot {
    display: inline-flex; align-items: center; gap: 6px;
}
.arch-badge__slot:empty { display: none; }
.arch-badge__divider {
    width: 1px; height: 0.8em;
    background: rgba(43,152,143,0.45);
}
.arch-badge__link {
    color: #2B988F;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.14em;
    transition: color 0.15s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.arch-badge__link-icon {
    font-size: 10px !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    /* Material Icons ship with internal padding around the glyph; nudge
       up a hair so the optical centre lines up with the uppercase label
       (which sits slightly above its em box because of the line-height). */
    margin-top: -1px;
}
.arch-badge__link:hover,
.arch-badge__link:focus {
    color: #3ecac0; text-decoration: none;
    outline: none;
}

/* Title */
.arch-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f0f0f0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.15s;
    letter-spacing: -0.015em;
}

    .arch-title:hover { color: #2B988F; }

/* Artist */
.arch-artist {
    font-size: 0.88rem;
    color: #2B988F;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.15s;
    letter-spacing: 0.01em;
}

    .arch-artist:hover { color: #3ecac0; }

/* Mobile Add/Edit review CTA — a clean pill under the artist name, above
   the date/divider. Desktop uses the inline badge link instead, so this
   row is hidden at >=992px. Empty (no review action) collapses it. */
.arch-review-cta-row {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.arch-review-cta-row:empty { display: none; }
.arch-review-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(94, 232, 224, 0.40);
    background: rgba(94, 232, 224, 0.12);
    color: #5ee8e0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.arch-review-cta:hover,
.arch-review-cta:focus-visible {
    background: rgba(94, 232, 224, 0.20);
    border-color: rgba(94, 232, 224, 0.65);
    color: #8ff5ef;
    outline: none;
}
.arch-review-cta .material-icons { font-size: 1.05rem; line-height: 1; }
@media (min-width: 992px) {
    .arch-review-cta-row { display: none; }
}

/* Subtle rule */
.arch-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 11px 0;
}

/* Meta pills */
.arch-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.arch-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.71rem;
    color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    padding: 3px 10px 3px 7px;
    line-height: 1.4;
}

.arch-pill-icon {
    font-size: 12px !important;
    opacity: 0.55;
    line-height: 1;
}

/* Gradient overlay — always present, not affected by display:none on picker row */
.arch-cover-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
    z-index: 2;
    pointer-events: none;
}

/* Picker row — sits on top of the gradient */
.arch-picker-row {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    color: #fff;
    z-index: 3;
}

.arch-picker-row img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}

.arch-picker-row .small {
    color: rgba(255,255,255,0.55);
    font-size: 0.7rem;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arch-picker-row a {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: color 0.15s;
}

    .arch-picker-row a:hover { color: #2B988F !important; }

/* Skeleton placeholder inside cover */
.arch-picker-skeleton-cover {
    display: none;
    position: absolute;
    bottom: 7px;
    left: 8px;
    right: 8px;
    height: 10px;
    border-radius: 4px;
}

.archive-album-header.is-loading .arch-picker-skeleton-cover {
    display: block;
}

/* Bottom row */
.arch-bottom-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.arch-share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.75);
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
    flex-shrink: 0;
}

.arch-share-btn .material-icons {
    font-size: 17px;
    pointer-events: none;
}

.arch-share-btn:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.55);
    color: #fff;
    transform: translateY(-1px);
}

.arch-share-btn:active {
    transform: translateY(0);
}

.arch-share-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
}

/* Glass tooltip */
.arch-share-btn::after {
    content: attr(data-tooltip-right);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.92);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 10;
}

/* Caret — triangle pointing left toward the button */
.arch-share-btn::before {
    content: '';
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    width: 6px;
    height: 12px;
    background: rgba(255,255,255,0.20);
    clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 11;
}

.arch-share-btn:hover::after,
.arch-share-btn:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Rating */
.arch-rating-num {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.arch-rating-star {
    color: #f59e0b;
    font-size: 1.05rem;
    line-height: 1;
    filter: drop-shadow(0 0 5px rgba(245,158,11,0.45));
}

.arch-rating-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}

.arch-rating-denom {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.25);
    margin-left: 2px;
}

.arch-rating-count {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.25);
    margin-left: 5px;
}

/* Spotify — ghost green on dark, fills on hover */
.arch-spotify-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: rgba(29,185,84,0.12);
    color: #1db954 !important;
    font-size: 0.77rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
    letter-spacing: 0.02em;
    border: 1px solid rgba(29,185,84,0.3);
}

    .arch-spotify-btn:hover {
        background: #1db954;
        color: #fff !important;
        transform: scale(1.04);
        box-shadow: 0 0 14px rgba(29,185,84,0.35);
    }

    .arch-spotify-btn i,
    .arch-spotify-btn .material-icons {
        font-size: 0.95rem;
        line-height: 1;
    }

/* Per-destination color variants for the archive external-link pill.
   The base .arch-spotify-btn already provides the green Spotify look;
   these overrides recolor it for film/book/etc. picks. */
.arch-spotify-btn.arch-ext-tmdb {
    background: rgba(1,180,228,0.12);
    color: #01b4e4 !important;
    border-color: rgba(1,180,228,0.3);
}
    .arch-spotify-btn.arch-ext-tmdb:hover {
        background: #01b4e4;
        color: #fff !important;
        box-shadow: 0 0 14px rgba(1,180,228,0.35);
    }

.arch-spotify-btn.arch-ext-imdb {
    background: rgba(245,197,24,0.15);
    color: #f5c518 !important;
    border-color: rgba(245,197,24,0.35);
}
    .arch-spotify-btn.arch-ext-imdb:hover {
        background: #f5c518;
        color: #000 !important;
        box-shadow: 0 0 14px rgba(245,197,24,0.4);
    }

.arch-spotify-btn.arch-ext-gbooks {
    background: rgba(66,133,244,0.14);
    color: #4285f4 !important;
    border-color: rgba(66,133,244,0.3);
}
    .arch-spotify-btn.arch-ext-gbooks:hover {
        background: #4285f4;
        color: #fff !important;
        box-shadow: 0 0 14px rgba(66,133,244,0.35);
    }

.arch-spotify-btn.arch-ext-amazon {
    background: rgba(255,153,0,0.14);
    color: #ff9900 !important;
    border-color: rgba(255,153,0,0.3);
}
    .arch-spotify-btn.arch-ext-amazon:hover {
        background: #ff9900;
        color: #111 !important;
        box-shadow: 0 0 14px rgba(255,153,0,0.4);
    }

.arch-spotify-btn.arch-ext-generic {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85) !important;
    border-color: rgba(255,255,255,0.2);
}
    .arch-spotify-btn.arch-ext-generic:hover {
        background: rgba(255,255,255,0.18);
        color: #fff !important;
    }

/* Dark-mode shimmer for skeletons inside dark header */
.archive-album-header .shimmer {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.05) 25%,
        rgba(255,255,255,0.11) 37%,
        rgba(255,255,255,0.05) 63%
    ) !important;
    background-size: 400% 100% !important;
}

/* Hide dynamic content during load */
.archive-album-header.is-loading .arch-meta-pills,
.archive-album-header.is-loading .arch-bottom-row,
.archive-album-header.is-loading .arch-badge,
.archive-album-header.is-loading .arch-divider {
    visibility: hidden;
}

/* === FORCE forum avatars to be perfectly circular === */
.forum-author img,
.forum-op-avatar {
    width: 56px;
    height: 56px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.forum-reactions {
    line-height: 1;
}

/* =====================================================
   QUILL CUSTOM TOOLBAR ICONS
===================================================== */

.ql-toolbar button.ql-emoji::before {
    content: "\f118";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #555;
}

.ql-toolbar button.ql-gif::before {
    content: "GIF";
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #555;
}

.ql-toolbar button.ql-tag::before {
    content: "\f130";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-album::before {
    content: "\f51f";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-film::before {
    content: "\f008";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-book::before {
    content: "\f02d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-actor::before {
    content: "\f508";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-director::before {
    content: "\f03d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-author::before {
    content: "\f303";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-mention::before {
    content: "@";
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: #555;
    font-style: normal;
    font-family: inherit;
}

/* The film (\f008), actor (\f508) and director (\f03d) glyphs sit a hair lower
   within their line box than the other tag glyphs, so they read as misaligned in
   the toolbar. Nudge just those three up by 1px in the non-chat toolbars (chat
   has its own tuned rules above). Flip the sign if they end up sitting too high. */
.forum-quill-wrap .ql-toolbar button.ql-film::before,
.review-quill-wrap .ql-toolbar button.ql-film::before,
.msg-edit-quill-mount .ql-toolbar button.ql-film::before,
.forum-quill-wrap .ql-toolbar button.ql-actor::before,
.review-quill-wrap .ql-toolbar button.ql-actor::before,
.msg-edit-quill-mount .ql-toolbar button.ql-actor::before,
.forum-quill-wrap .ql-toolbar button.ql-director::before,
.review-quill-wrap .ql-toolbar button.ql-director::before,
.msg-edit-quill-mount .ql-toolbar button.ql-director::before {
    position: relative;
    top: -1px;
}

/* Forum + inline-edit + review Quill: override Quill's own specificity so the @ button aligns correctly */
.forum-quill-wrap .ql-toolbar button.ql-mention,
.msg-edit-quill-mount .ql-toolbar button.ql-mention,
.review-quill-wrap .ql-toolbar button.ql-mention {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
    margin-top: 0;
}

.review-quill-wrap .ql-toolbar button.ql-mention {
    margin-top: -1px;
}

.ql-toolbar button.ql-emoji,
.ql-toolbar button.ql-gif,
.ql-toolbar button.ql-tag,
.ql-toolbar button.ql-album,
.ql-toolbar button.ql-film,
.ql-toolbar button.ql-book,
.ql-toolbar button.ql-actor,
.ql-toolbar button.ql-director,
.ql-toolbar button.ql-author,
.ql-toolbar button.ql-mention,
.ql-toolbar button.ql-spoiler {
    width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ql-toolbar button.ql-gif:hover::before,
.ql-toolbar button.ql-tag:hover::before,
.ql-toolbar button.ql-album:hover::before,
.ql-toolbar button.ql-film:hover::before,
.ql-toolbar button.ql-book:hover::before,
.ql-toolbar button.ql-actor:hover::before,
.ql-toolbar button.ql-director:hover::before,
.ql-toolbar button.ql-author:hover::before,
.ql-toolbar button.ql-mention:hover::before {
    color: #2B988F;
}

.ql-toolbar button.ql-spoiler:hover::after {
    color: #2B988F;
}




/* =========================
   Queue Header Actions
========================= */

.queue-header-actions {
    opacity: 0.65;
    margin-left: 10px;
}

.queue-header-btn {
    background: none;
    border: none;
    padding: 4px;
    color: #9aa0a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

    .queue-header-btn .material-icons {
        font-size: 15px;
    }

    .queue-header-btn:hover {
        color: #ffffff;
        opacity: 1;
        transform: translateY(-1px);
    }

    .queue-header-btn:active {
        transform: translateY(0);
    }

    .queue-header-btn:focus {
        outline: none;
    }

.show-more-members-btn, #openForumTab, #openReviewsTab, #openArchiveTab, #openQueueTab {
    display: block;
    margin: 0 auto;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2B988F;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(43, 152, 143, 0.25);
    transition: transform 0.14s ease, box-shadow 0.18s ease;
}

.forum-sidebar-item {
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .forum-sidebar-item:hover {
        background: rgba(43, 152, 143, 0.08);
    }

    .forum-sidebar-item.unread .fw-semibold {
        color: #2B988F;
    }

.forum-sidebar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}


.queue-expanded {
    width: 100%;
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    animation: expandFade 0.2s ease;
}

.queue-expanded-inner {
    font-size: 0.85rem;
}

.queue-tracklist {
    padding-left: 18px;
    margin-bottom: 6px;
}

@keyframes expandFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.album-info-shimmer {
    position: absolute;
    inset: 0;
    z-index: 10;
    /* CRITICAL */
    display: none;
    pointer-events: none;
}

    .album-info-shimmer.active {
        display: block;
        pointer-events: all;
    }


.shimmer-cover {
    width: 180px;
    height: 180px;
    border-radius: 12px;
    background: #eee;
    flex-shrink: 0;
}

.shimmer-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: .5rem;
}

.shimmer-line {
    height: 14px;
    border-radius: 6px;
    background: #eee;
}

.shimmer {
    position: relative;
    overflow: hidden;
}

    .shimmer::after {
        content: '';
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100% );
        animation: shimmer 1.3s infinite;
    }

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.queue-genre-bubble {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 12px;
    font-size: 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e8f6f4, #f5fbfa);
    color: #1f6f68;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(43,152,143,0.25), 0 1px 4px rgba(43,152,143,0.15);
}

.queue-explicit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    line-height: 1;
    letter-spacing: 0.05em;
}


.latest-review-widget {

}

.review-stars {
    letter-spacing: 1px;
    font-size: 0.9em;
}

.review-comment p {
    margin: 0;
}


.queue-edit-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: rgba(43, 152, 143, 0.08);
    border: 1px solid rgba(43, 152, 143, 0.35);
    border-radius: 8px;
    color: #1e6f68;
}

    .queue-edit-notice .material-icons {
        font-size: 22px;
        color: #2b988f;
    }

.queue-edit-notice-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

    .queue-edit-notice-text span {
        font-size: 0.85rem;
        opacity: 0.85;
    }


.tab-section-header {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 18px 0 14px;
    position: relative;
    display: inline-block;
}


/* =========================================
   TAB SECTION HEADERS SYSTEM
========================================= */

h4 {
    font-weight: 700;
    margin-bottom: 18px;
    font-size: 1.3rem;
}

/* Base class */
.tab-section-header {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 18px 0 14px;
    position: relative;
    display: inline-block;
}

    /* 1 — Underline Accent */
    .tab-section-header.style-1 {
        color: #2B988F;
        padding-bottom: 6px;
    }

        .tab-section-header.style-1::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 42px;
            height: 4px;
            background: #2B988F;
            border-radius: 4px;
        }

    /* 2 — Faded Divider Lines */
    .tab-section-header.style-2 {
        text-align: center;
        width: 100%;
    }

        .tab-section-header.style-2::before,
        .tab-section-header.style-2::after {
            content: "";
            display: inline-block;
            width: 40%;
            height: 1px;
            background: linear-gradient(to right, transparent, #ccc, transparent);
            vertical-align: middle;
            margin: 0 10px;
        }

    /* 3 — Soft Glow */
    .tab-section-header.style-3 {
        color: #2B988F;
        text-shadow: 0 2px 6px rgba(43,152,143,0.35);
    }

    /* 4 — Badge Label */
    .tab-section-header.style-4 {
        color: #2B988F;
        font-size: 1.6rem;
    }

    /* 5 — Gradient Text */
    .tab-section-header.style-5 {
        background: linear-gradient(90deg, #2B988F, #5bd3c7);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* 6 — Left Accent Line */
    .tab-section-header.style-6 {
        padding-left: 14px;
    }

        .tab-section-header.style-6::before {
            content: "";
            position: absolute;
            left: 0;
            top: 4px;
            height: 22px;
            width: 4px;
            background: #2B988F;
            border-radius: 4px;
        }

    /* 7 — Card Label */
    .tab-section-header.style-7 {
        background: #f5fcfb;
        border: 1px solid #dcefed;
        padding: 8px 12px;
        border-radius: 8px;
    }

    /* 8 — Animated Underline */
    .tab-section-header.style-8 {
        padding-bottom: 4px;
    }

        .tab-section-header.style-8::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 3px;
            background: #2B988F;
            transition: width .3s ease;
        }

        .tab-section-header.style-8:hover::after {
            width: 60%;
        }

    /* 9 — Icon Header */
    .tab-section-header.style-9 {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .tab-section-header.style-9 .material-icons {
            font-size: 22px;
            color: #2B988F;
        }

    /* 10 — Elevated Shadow Title */
    .tab-section-header.style-10 {
        color: #2B988F;
        text-shadow: 0 1px 0 white, 0 3px 6px rgba(0,0,0,0.12);
    }


/* =====================================================
   ARCHIVE DROPDOWN ACTION BUTTONS
===================================================== */

.archive-dropdown-row {
    min-height: 60px;
}

#archiveIconRow {
    position: relative;
    width: fit-content;
    margin: 14px auto 0;   /* space between the buttons and the nav row above */
}




.archive-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #dbe7e6;
    background: #fff;
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.archive-action-label {
    display: none;
}

    .archive-action-btn .material-icons {
        font-size: 18px;
        line-height: 1;
        pointer-events: none; /* IMPORTANT: tooltips + hover trigger on the button, not the icon span */
    }


    .archive-action-btn:hover {
        background-color: #DEF1EF;
        border-color: rgba(43, 152, 143, .5);
        transform: translateY(-1px);
    }

    .archive-action-btn:active {
        transform: translateY(0);
    }

    .archive-action-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.25);
    }

/* =====================================================
   ARCHIVE SEARCH EXPAND
===================================================== */

.archive-dropdown-wrapper {
    position: relative;
    width: 100%;
    max-width: 520px;
}

.archive-dropdown-row {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.archive-search-overlay {
    /* Now lives inside #archiveIconRow (position:relative), covers it fully */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

    .archive-search-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .archive-search-overlay > .d-flex {
        width: 60%;
        max-width: 420px;
        background: #fff;
        border-radius: 30px;
        padding: 0 8px;
        transition: width 0.25s ease;
    }

    .archive-search-overlay:not(.active) > .d-flex {
        width: 0;
        overflow: hidden;
    }



/* Smooth input styling */
#archiveSearchInput {
    flex: 1;
    border: 1px solid rgba(43, 152, 143, .35);
    font-size: 0.9rem;
}

    #archiveSearchInput:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.25);
    }


/* =========================================
   ARCHIVE SEARCH RESULTS
========================================= */

.archive-search-input-wrap {
    display: flex;
    gap: 8px;
    width: 100%;
}

.archive-search-results {
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(43,152,143,.25);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    max-height: 260px;
    overflow-y: auto;
    display: none;
    z-index: 10;
}

    .archive-search-results.active {
        display: block;
    }

.archive-search-item {
    display: flex;
    text-align: left;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .archive-search-item:hover,
    .archive-search-item.active {
        background: rgba(43,152,143,.08);
    }

    .archive-search-item img {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        object-fit: cover;
        flex-shrink: 0;
    }

.archive-search-meta {
    flex: 1;
    min-width: 0;
}

.archive-search-title {
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-search-artist {
    font-size: .75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================
   ARCHIVE CALENDAR PANEL (expand-down)
===================================================== */

.archive-calendar-panel {
    margin-top: 10px;
    background: #fff;
    border: 1px solid rgba(43,152,143,.18);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    padding: 12px;
}

.archive-calendar-inner {
    max-width: 520px;
    margin: 0 auto;
}

.archive-calendar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.archive-cal-month-title {
    font-weight: 700;
    color: #2B988F;
    letter-spacing: .01em;
}

.archive-cal-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #dbe7e6;
    background: #fff;
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

    .archive-cal-nav-btn .material-icons {
        font-size: 20px;
        line-height: 1;
    }

    .archive-cal-nav-btn:hover {
        background-color: #DEF1EF;
        border-color: rgba(43, 152, 143, .5);
        transform: translateY(-1px);
    }

    .archive-cal-nav-btn:disabled {
        opacity: 0.45;
        pointer-events: none;
        transform: none;
    }

.archive-calendar-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.archive-cal-dow {
    font-size: 0.68rem;
    font-weight: 700;
    color: #6b7280;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.archive-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.archive-cal-blank {
    height: 36px;
}

.archive-cal-day {
    height: 36px;
    border-radius: 10px;
    border: 1px solid #eef2f1;
    background: #fff;
    color: #111827;
    font-weight: 600;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .12s ease, box-shadow .14s ease, background-color .15s ease, border-color .15s ease;
}

    .archive-cal-day.has-pick {
        background: rgba(43,152,143,.08);
        border-color: rgba(43,152,143,.20);
        color: #1f6f68;
        cursor: pointer;
    }

        .archive-cal-day.has-pick:hover {
            background: rgba(43,152,143,.14);
            border-color: rgba(43,152,143,.35);
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(0,0,0,.06);
        }

        .archive-cal-day.has-pick.is-active {
            background: #2B988F;
            border-color: #2B988F;
            color: #fff;
            box-shadow: 0 8px 18px rgba(43,152,143,.25);
        }

    .archive-cal-day.no-pick {
        opacity: 0.35;
        cursor: default;
    }

/* =====================================================
   ARCHIVE RANDOM SPIN
========================================= */


.archive-action-btn.spinning .material-icons {
    animation: archiveDiceSpin 0.18s ease;
}

@keyframes archiveDiceSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

/* =====================================================
   ARCHIVE COPY LINK TOAST
===================================================== */

.archive-copy-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: #1e2a29;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    display: flex;
    align-items: center;
    gap: 6px;
}

.archive-copy-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


.archive-cal-day {
    position: relative;
}

.archive-cal-day-number {
    position: relative;
    z-index: 1;
}

.archive-cal-avatar {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    z-index: 2;
}


.archive-calendar-loading {
    height: 220px;
    border-radius: 12px;
}

    .archive-calendar-loading.shimmer {
        background: linear-gradient( 90deg, #f0f0f0 25%, #e4e4e4 37%, #f0f0f0 63% );
        background-size: 400% 100%;
        animation: shimmer 1.2s infinite linear;
    }

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.archive-cal-tooltip {
    position: absolute;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    z-index: 9999;
}

    .archive-cal-tooltip.visible {
        opacity: 1;
        visibility: visible;
    }

#archivePrevBtn.disabled,
#archiveNextBtn.disabled {
    opacity: 0.5;
    pointer-events: none;
}


/* =====================================================
   ARCHIVE FILTER PANEL
===================================================== */

.archive-filter-panel {
    margin-top: 12px;
    animation: archiveFilterSlide .18s ease;
}

@keyframes archiveFilterSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Inner card */
.archive-filter-inner {
    border: 1px solid rgba(43,152,143,.18);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.archive-filter-count {
    font-size: 0.8rem;
    color: #2B988F;
    font-weight: 600;
    min-height: 1.2em;
    transition: opacity .15s;
}
.archive-filter-count.is-loading { opacity: .4; }

/* ── Year dual-range slider ── */
.arch-year-slider-wrap { width: 100%; padding-top: 4px; }
.arch-year-labels {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    font-weight: 600;
    color: #2B988F;
    margin-bottom: 6px;
}
.arch-year-track-wrap {
    position: relative;
    height: 24px;          /* room for the thumbs */
    margin: 4px 0;
}
.arch-year-track-wrap::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: #e2e8f0;
    border-radius: 2px;
}
.arch-year-track-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #2B988F;
    border-radius: 2px;
    pointer-events: none;
}
.arch-year-range {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
    margin: 0;
    padding: 0;
}
.arch-year-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2B988F;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    cursor: pointer;
    pointer-events: all;
    transition: transform .1s;
}
.arch-year-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.arch-year-range::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2B988F;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    cursor: pointer;
    pointer-events: all;
}

    /* Section labels */
    .archive-filter-inner .fw-semibold {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #6b7280;
    }

/* Dropdown button */
#archiveUserDropdownBtn {
    border: 1px solid rgba(43,152,143,.35);
    background: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2B988F;
    border-radius: 8px;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    #archiveUserDropdownBtn:hover {
        border-color: #2B988F;
    }

    #archiveUserDropdownBtn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43,152,143,.25);
    }

/* Dropdown menu */
#archiveUserDropdownMenu {
    border-radius: 10px;
    border: 1px solid rgba(43,152,143,.18);
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
    padding: 10px 12px;
    max-height: 220px;
    overflow-y: auto;
}

/* Checkbox styling */
.archive-user-filter {
    cursor: pointer;
}

    .archive-user-filter:checked {
        background-color: #2B988F;
        border-color: #2B988F;
    }

#archiveUserDropdownMenu .form-check {
    margin-bottom: 6px;
    font-size: 0.82rem;
}

/* =========================================
   FILTER SELECTS — MATCH DROPDOWN STYLE
========================================= */

#archiveFilterRating {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid rgba(43,152,143,.35);
    background-color: #fff;
    color: #2B988F;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    padding: 6px 36px 6px 12px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    background-image: url("data:image/svg+xml,%3Csvg fill='%232B988F' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

    #archiveFilterRating:hover { border-color: #2B988F; }

    #archiveFilterRating:focus {
        outline: none;
        border-color: #2B988F;
        box-shadow: 0 0 0 3px rgba(43,152,143,.25);
    }

    #archiveFilterRating option { color: #111827; }

/* Year range inputs */
#archiveYearFrom,
#archiveYearTo {
    border: 1px solid rgba(43,152,143,.35);
    border-radius: 8px;
    color: #2B988F;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 8px;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease;
    -moz-appearance: textfield;
}
#archiveYearFrom::-webkit-inner-spin-button,
#archiveYearTo::-webkit-inner-spin-button { display: none; }
#archiveYearFrom:focus,
#archiveYearTo:focus {
    outline: none;
    border-color: #2B988F;
    box-shadow: 0 0 0 3px rgba(43,152,143,.25);
}


/* =========================================
   ARCHIVE FILTER ACTION BUTTONS
========================================= */

#archiveApplyFiltersBtn,
#archiveClearFiltersBtn {
    min-height: 34px;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === APPLY (Primary) === */
#archiveApplyFiltersBtn {
    background-color: #2B988F;
    border: 1px solid #2B988F;
    color: #ffffff;
}

    #archiveApplyFiltersBtn:hover {
        background-color: #17756D;
        border-color: #17756D;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(43,152,143,0.25);
    }

    #archiveApplyFiltersBtn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    #archiveApplyFiltersBtn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43,152,143,0.25);
    }

/* === CLEAR (Ghost) === */
#archiveClearFiltersBtn {
    background-color: transparent;
    border: 1px solid rgba(43,152,143,.35);
    color: #2B988F;
}

    #archiveClearFiltersBtn:hover {
        background-color: #DEF1EF;
        border-color: #2B988F;
        transform: translateY(-1px);
    }

    #archiveClearFiltersBtn:active {
        transform: translateY(0);
    }

    #archiveClearFiltersBtn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43,152,143,0.25);
    }


/* Active filter button (icon row) */
#archiveFilterBtn.active {
    background-color: #DEF1EF;
    border-color: rgba(43, 152, 143, .6);
}

/* Small responsive tightening */
@media (max-width: 768px) {

    .archive-filter-inner .row > div {
        margin-bottom: 12px;
    }

    #archiveUserDropdownMenu {
        max-height: 180px;
    }

    /* Quill chat compose — mobile fixes */
    .chat-quill-wrap {
        width: auto; /* override Bootstrap w-100 which causes overflow in flex row */
        min-width: 0;
    }
    .chat-quill-wrap .ql-toolbar.ql-snow,
    .chat-quill-input.ql-container.ql-snow,
    .chat-send-bar {
        margin-left: 0;
    }
    .chat-quill-wrap::before,
    .chat-quill-wrap::after {
        display: none;
    }
    .chat-quill-wrap .ql-toolbar.ql-snow {
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 6px;
        scrollbar-width: none;
    }
    .chat-quill-wrap .ql-toolbar.ql-snow::-webkit-scrollbar {
        display: none;
    }
    .chat-quill-wrap .ql-toolbar.ql-snow .ql-formats {
        display: inline-flex;
        vertical-align: middle;
    }
}


/* Filter has active filters (ON state) */
#archiveFilterBtn.has-active-filters {
    background-color: #2B988F;
    border-color: #2B988F;
    box-shadow: 0 0 0 2px rgba(43,152,143,0.25);
    color: #ffffff;
}

    #archiveFilterBtn.has-active-filters .material-icons {
        color: #ffffff;
    }



/* =========================
   ARCHIVE SEARCH RESULTS
========================= */

.archive-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 380px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 6px 0;
    z-index: 50;
}

/* Individual Item */
.archive-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .archive-search-item:hover,
    .archive-search-item.active {
        background: rgba(0,0,0,0.04);
    }

    /* Album Cover */
    .archive-search-item img {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        object-fit: cover;
        flex-shrink: 0;
    }

/* Meta Wrapper */
.archive-search-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* required for text ellipsis */
}

/* Album Title */
.archive-search-title-link {
    font-weight: 600;
    font-size: 0.95rem;
    color: #111;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Artist Name */
.archive-search-artist-link {
    font-size: 0.85rem;
    color: #666;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .archive-search-artist-link:hover {
        color: #000;
    }

.album-tab {
    padding: 8px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid rgba(43,152,143,.25);
    background: #ffffff;
    color: #6b7280;
    transition: all .18s ease;
}

.album-tab + .album-tab {
    margin-left: 8px;
}

.album-tab:hover {
    border-color: #2B988F;
    color: #2B988F;
    transform: translateY(-1px);
}

.album-tab.active-tab {
    background: #f0fbfa;
    border-color: #2B988F;
    color: #2B988F;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* =========================================
   CLUB TAB — ARCHIVE STYLE MATCH
========================================= */

#queueListView .list-group-item {
    border-bottom: 1px solid #e6eaea;
}

    #queueListView .list-group-item:last-child {
        border-bottom: none;
    }

#queueListView img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#queueListView .fw-semibold {
    font-size: 0.92rem;
}

#queueListView .small.text-muted {
    font-size: 0.75rem;
}

#queueListView .archive-rating-sub {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

/* =========================
   CLUB TAB — QUEUE VIEW SWITCHER (List / Calendar)
========================= */

.queue-view-switcher {
    gap: 10px;
}

.queue-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 7px 12px;
    border: 1px solid rgba(43,152,143,.25);
    background: #ffffff;
    color: #6b7280;
    transition: transform .14s ease, box-shadow .18s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
}

    .queue-view-btn .material-icons {
        font-size: 18px;
        line-height: 1;
        color: #6b7280;
        transition: color .15s ease;
    }

    .queue-view-btn:hover {
        border-color: #2B988F;
        color: #2B988F;
        background: rgba(43,152,143,.06);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
    }

        .queue-view-btn:hover .material-icons {
            color: #2B988F;
        }

    .queue-view-btn.active {
        background: #f0fbfa;
        border-color: #2B988F;
        color: #2B988F;
    }

        .queue-view-btn.active .material-icons {
            color: #2B988F;
        }

/* =========================================
   CLUB QUEUE VIEW SWITCHER (CLEAN STYLE)
========================================= */

.queue-view-switcher {
    gap: 10px;
}

.queue-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 10px;
    border: 1px solid rgba(43,152,143,.25);
    background: #ffffff;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all .18s ease;
    cursor: pointer;
}

    .queue-view-btn .material-icons {
        font-size: 18px;
        line-height: 1;
        transition: transform .18s ease;
    }

    /* Hover */
    .queue-view-btn:hover {
        border-color: #2B988F;
        color: #2B988F;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,.06);
    }

        .queue-view-btn:hover .material-icons {
            transform: scale(1.05);
        }

    /* Active */
    .queue-view-btn.active {
        background: #f0fbfa;
        border-color: #2B988F;
        color: #2B988F;
        box-shadow: 0 8px 18px rgba(43,152,143,.18);
    }

        /* Active icon slight pop */
        .queue-view-btn.active .material-icons {
            transform: scale(1.08);
        }

    /* Click press */
    .queue-view-btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    /* Remove default focus outline */
    .queue-view-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43,152,143,.25);
    }

/* =========================================
   UPCOMING QUEUE — ZEBRA STRIPING
========================================= */

#queueListView .list-group-item:nth-child(odd) {
    background: #ffffff;
}

#queueListView .list-group-item:nth-child(even) {
    background: #f9fbfb; /* ultra-light teal tint */
}

/* Keep hover stronger than zebra */
#queueListView .list-group-item:hover {
}

/* =========================================
   QUEUE VIEW PANEL VISIBILITY CONTROL
========================================= */

.queue-view-panel {
    display: none;
}

    .queue-view-panel.is-active {
        display: block;
    }

/* =========================================
   CLUB CALENDAR (Isolated Namespace)
   - Cover preview in cells
   - Tooltip (custom)
   - Hover pop card
   - Gradient pick indicator
   - Month transitions
========================================= */

.club-cal-panel {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.06);
}

.club-cal-inner {
    width: 100%;
}

.club-cal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.club-cal-month-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
    color: #111;
}

.club-cal-nav-btn {
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 10px;
    transition: background 0.2s ease, transform 0.2s ease;
}

    .club-cal-nav-btn:hover {
        background: rgba(0,0,0,0.06);
        transform: translateY(-1px);
    }

.club-cal-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 10px;
}

.club-cal-dow {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(0,0,0,0.45);
    padding: 6px 0;
    letter-spacing: 0.4px;
}

.club-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    will-change: transform, opacity;
}

/* Month transitions */
.club-cal-anim-out-prev {
    animation: clubCalOutPrev 0.18s ease forwards;
}

.club-cal-anim-out-next {
    animation: clubCalOutNext 0.18s ease forwards;
}

.club-cal-anim-in-prev {
    animation: clubCalInPrev 0.18s ease forwards;
}

.club-cal-anim-in-next {
    animation: clubCalInNext 0.18s ease forwards;
}

@keyframes clubCalOutPrev {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(14px);
    }
}

@keyframes clubCalOutNext {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-14px);
    }
}

@keyframes clubCalInPrev {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes clubCalInNext {
    from {
        opacity: 0;
        transform: translateX(14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.club-cal-blank {
    height: 76px;
}

.club-cal-day {
    position: relative;
    height: 76px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fafafa;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    overflow: hidden;
}

    .club-cal-day:hover,
    .club-cal-day:focus {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,0.08);
        outline: none;
    }

.club-cal-day-number {
    position: absolute;
    top: 7px;
    right: 9px;
    font-size: 0.74rem;
    font-weight: 800;
    color: rgba(0,0,0,0.55);
    z-index: 3;
}

/* In-cell album cover preview */
.club-cal-day-avatar {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 22px rgba(0,0,0,0.25);
    border: 2px solid #fff;
    z-index: 3;
}

.club-cal-day-status {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    color: #fff;
    background: #2B988F;
}

.club-cal-missing-pick {
    background: #fff5f5;
    border-color: #e11d48;
}

    .club-cal-has-pick.club-cal-missing-pick::before {
        background: radial-gradient(120px 90px at 18% 78%, rgba(225,29,72,0.20), rgba(255,255,255,0) 62%), linear-gradient(135deg, rgba(225,29,72,0.14), rgba(255,255,255,0) 60%);
    }

    .club-cal-has-pick.club-cal-missing-pick::after {
        background: linear-gradient(90deg, #e11d48, #f43f5e, #fb7185);
    }

    .club-cal-missing-pick .club-cal-day-status {
        background: #e11d48;
    }

/* Pick state */
.club-cal-has-pick {
    background: #ffffff;
    border-color: rgba(43,152,143,0.55);
}

    /* Gradient pick indicator (top wash + bottom stripe) */
    .club-cal-has-pick::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120px 90px at 18% 78%, rgba(43,152,143,0.22), rgba(255,255,255,0) 62%), linear-gradient(135deg, rgba(43,152,143,0.18), rgba(255,255,255,0) 60%);
        z-index: 1;
        pointer-events: none;
    }

    .club-cal-has-pick::after {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 7px;
        height: 6px;
        border-radius: 99px;
        background: linear-gradient(90deg, #2B988F, #29B5A8, #1A659E);
        opacity: 0.95;
        z-index: 2;
        pointer-events: none;
    }

/* No pick state */
.club-cal-no-pick {
    background: #f3f3f3;
    color: rgba(0,0,0,0.45);
    cursor: not-allowed;
    box-shadow: none;
}


/* =========================================
   Hover Pop Card
========================================= */
.club-cal-hovercard {
    position: fixed;
    z-index: 99991;
    width: 320px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 18px 44px rgba(0,0,0,0.18);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

    .club-cal-hovercard.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: none;
    }

.club-cal-hovercard-inner {
    display: flex;
    gap: 12px;
    padding: 12px;
    align-items: center;
}

.club-cal-hovercard-cover {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    background-color: #e9e9e9;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    flex: 0 0 auto;
}

.club-cal-hovercard-meta {
    min-width: 0;
    flex: 1 1 auto;
}

.club-cal-hovercard-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: rgba(0,0,0,0.65);
}

.club-cal-hovercard-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.club-cal-hovercard-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: #111;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.club-cal-hovercard-artist {
    margin-top: 4px;
    font-weight: 650;
    font-size: 0.84rem;
    color: rgba(0,0,0,0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.club-cal-hovercard-date {
    margin-top: 8px;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 750;
    color: rgba(0,0,0,0.55);
    background: rgba(43,152,143,0.10);
    border: 1px solid rgba(43,152,143,0.20);
    padding: 4px 8px;
    border-radius: 999px;
}

.club-cal-week-active {
    background: linear-gradient( to bottom, rgba(41, 181, 168, 0.18), rgba(41, 181, 168, 0.08) );
    box-shadow: inset 0 0 0 1px rgba(41,181,168,0.35);
}

/* =========================
   UPCOMING ROTATION STATUS
========================= */

.rt-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    letter-spacing: .4px;
}

.rt-next-up {
    background: linear-gradient(90deg,#2B988F,#29B5A8);
    color: #fff;
}

.rt-on-deck {
    background: rgba(43,152,143,.1);
    border: 1px solid rgba(43,152,143,.4);
    color: #2B988F;
}

.rt-countdown {
    font-weight: 600;
    color: #88231D;
}


/* =========================
/* =========================
   FUTURE PICKS — CENSOR MODES (CLEAN SYSTEM)
========================= */

/*
|--------------------------------------------------------------------------
| BASE WRAPPER (no visual effect by default)
|--------------------------------------------------------------------------
*/

.rt-censor-wrap {
    position: relative;
    border-radius: 10px;
}

/*
|--------------------------------------------------------------------------
| MODE 4 — Hover Reveal (Interactive)
|--------------------------------------------------------------------------
*/

.rt-censor-hover .rt-censor-wrap > * {
    opacity: 0;
    transition: opacity .25s ease;
}

.rt-censor-hover:hover .rt-censor-wrap > * {
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Live Badge
|--------------------------------------------------------------------------
*/

.rt-live {
    background: linear-gradient(90deg,#1A659E,#2B988F);
    color: #fff;
}

/* =========================================
   ROTATION — EMPTY SLOT (no queue)
========================================= */

.rt-empty-slot {
    background: #fffbf0;
    border-left: 3px solid #f0a500 !important;
}

.rt-empty-cover {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: #fef3cd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rt-empty-cover .material-icons {
    font-size: 28px !important;
    color: #c87800;
}

.rt-empty-label {
    color: #92600a;
}

.rt-empty-sub {
    color: #a07030;
}

/* =========================================
   FUTURE PICKS — SOFT FROST (COVER + TEXT)
========================================= */

/* Shared positioning */
.rt-censored .rt-censor-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

/* ---- COVER (blur only, no label) ---- */

.rt-censored .rt-cover-wrap.rt-censor-wrap img {
    filter: blur(10px);
    opacity: 0.75;
    transition: all .25s ease;
    pointer-events: none;
}

/* ---- TEXT BLOCK (blur + overlay label) ---- */

.rt-censored .flex-grow-1 > .rt-censor-wrap > * {
    filter: blur(4px);
    opacity: 0.75;
    transition: all .25s ease;
    pointer-events: none;
}

.rt-censored .flex-grow-1 > .rt-censor-wrap::after {
    content: "🔒 Hidden Until Reveal";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: .3px;
    color: #2B988F;
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 10px;
}

/* =========================================
   UPCOMING ROTATION — GLASS DATE BOX
========================================= */

.rt-date-box {
    width: 80px;
    min-width: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255);
    text-align: center;
    font-family: "Nunito Sans", sans-serif !important;
    border: 1px solid #e5e7eb;
}

.rt-date-month {
    background: #2B988F;
    padding: 6px 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: #f5f5f5;
}

.rt-date-body {
    padding: 8px 6px 10px;
}

.rt-date-day {
    font-size: 0.7rem;
    opacity: .85;
    margin-bottom: 2px;
}

.rt-date-number {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    margin: 2px 0;
}

.rt-date-year {
    font-size: 0.7rem;
    opacity: .7;
}

/* ========================================
   ARCHIVE PREVIEW SHIMMER
======================================== */

.archive-preview-box {
    position: relative;
    min-height: 110px;
}

.archive-preview-loader {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient( 90deg, rgba(240,240,240,0.6) 25%, rgba(220,220,220,0.85) 37%, rgba(240,240,240,0.6) 63% );
    background-size: 400% 100%;
    animation: archiveShimmer 1.2s ease-in-out infinite;
    z-index: 5;
}

@keyframes archiveShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* ========================================
   ARCHIVE PREVIEW SKELETONS
======================================== */

/* shared shimmer mixin — reuses same keyframe */
.arch-skel-circle,
.arch-skel-line,
.arch-skel-stars {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
    background-size: 400% 100%;
    animation: archiveShimmer 1.4s ease-in-out infinite;
}

/* chat row */
.arch-skel-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
.arch-skel-msg:last-child { margin-bottom: 0; }

.arch-skel-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.arch-skel-lines {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
}

/* single skeleton line */
.arch-skel-line {
    height: 10px;
    border-radius: 4px;
    margin-bottom: 6px;
}
.arch-skel-line:last-child { margin-bottom: 0; }

/* width variants */
.arch-skel-line.s-20 { width: 20%; }
.arch-skel-line.s-25 { width: 25%; }
.arch-skel-line.s-30 { width: 30%; }
.arch-skel-line.s-35 { width: 35%; }
.arch-skel-line.s-50 { width: 50%; }
.arch-skel-line.s-65 { width: 65%; }
.arch-skel-line.s-75 { width: 75%; }
.arch-skel-line.s-80 { width: 80%; }

/* forum thread row */
.arch-skel-thread {
    margin-bottom: 14px;
}
.arch-skel-thread:last-child { margin-bottom: 0; }

/* review stars placeholder */
.arch-skel-stars {
    height: 18px;
    width: 152px;
    border-radius: 4px;
    margin-bottom: 6px;
}

/* review row */
.arch-skel-review {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.arch-skel-review:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* divider between club average and user rating */
.archive-reviews-divider {
    height: 1px;
    border: none;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, .12) 70%, transparent);
    margin: 2px 0 14px;
}

/* reviews overlay — covers existing content while re-loading */
.arch-skel-reviews-overlay {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: #fff;
    z-index: 5;
    padding: 4px 0;
}
/* =====================================================
   ARCHIVE — BUTTON FOOTER LINK (matches <a> style)
===================================================== */

button.archive-footer-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #2B988F;
    font-weight: 600;
    font-size: 0.68rem;
    cursor: pointer;
    text-decoration: none;
    display: inline;
    line-height: inherit;
}

button.archive-footer-link:hover {
    text-decoration: underline;
}

button.archive-footer-link.disabled,
button.archive-footer-link:disabled {
    color: #9aa0a6;
    cursor: default;
    text-decoration: none;
}

/* =====================================================
   ARCHIVE — FULL CHAT PANEL
===================================================== */

.archive-full-chat {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

/* Header bar */
.arch-fc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}
.arch-fc-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.arch-fc-header .material-icons {
    font-size: 17px !important;
    color: #2b988f;
}

.arch-fc-count {
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.75rem;
}

/* Scrollable message list */
.arch-fc-messages {
    max-height: 520px;
    overflow-y: auto;
    padding: 14px 16px;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Individual message row */
.arch-fc-msg {
    display: flex;
    gap: 10px;
    padding: 3px 0;
}

/* Grouped (same user within 5 min) — indent to align with text column */
.arch-fc-grouped {
    padding-left: 42px; /* 32px avatar + 10px gap */
}

.arch-fc-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.arch-fc-body {
    flex: 1;
    min-width: 0;
}

.arch-fc-meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 2px;
}

.username-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
    .username-link:hover { text-decoration: underline; }

.arch-fc-user {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2937;
}

.arch-fc-time {
    font-size: 0.68rem;
    color: #9ca3af;
}

.arch-fc-text {
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.5;
    word-break: break-word;
}

/* Strip Quill paragraph margins inside messages */
.arch-fc-text p {
    margin: 0;
}

/* Links inside messages */
.arch-fc-text a {
    color: #2b988f;
    text-decoration: underline;
    text-decoration-color: rgba(43, 152, 143, 0.4);
    text-underline-offset: 2px;
    word-break: break-all;
}

.arch-fc-text a:hover {
    text-decoration-color: #2b988f;
}

/* =====================================================
   ARCHIVE CHAT — LINK PREVIEW CARDS (IG / FB)
===================================================== */

.arch-link-preview {
    margin-top: 6px;
    margin-bottom: 8px;
    margin-left: 42px; /* align with grouped message text */
    max-width: 340px;
}

.arch-link-preview-inner {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    background: #fafafa;
    transition: box-shadow 0.15s ease;
}

.arch-link-preview-inner:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.arch-link-preview-img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.arch-link-preview-body {
    padding: 8px 10px;
}

.arch-link-preview-site {
    font-size: 0.68rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.arch-link-preview[data-site="youtube"]   .arch-link-preview-site { color: #ff0000; }
.arch-link-preview[data-site="spotify"]   .arch-link-preview-site { color: #1db954; }
.arch-link-preview[data-site="instagram"] .arch-link-preview-site { color: #c13584; }
.arch-link-preview[data-site="facebook"]  .arch-link-preview-site { color: #1877f2; }

/* Live-chat preview cards sit directly below the bubble, no extra left indent */
.arch-link-preview.chat-link-preview {
    margin-left: 0;
    max-width: 350px;
}

.arch-link-preview-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.35;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.arch-link-preview-desc {
    font-size: 0.73rem;
    color: #6b7280;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Internal archive-cycle previews: cover-left, info-right card so portrait
   film/book covers don't blow out vertically the way a YouTube thumb does. */
.arch-link-preview[data-kind="archive_cycle"] .arch-link-preview-inner {
    flex-direction: row;
    align-items: stretch;
    background: #fff;
    border-color: #d6d9e0;
}
.arch-link-preview[data-kind="archive_cycle"] .arch-link-preview-img {
    width: 84px;
    height: auto;
    max-height: none;
    flex-shrink: 0;
    align-self: stretch;
    object-fit: cover;
}
.arch-link-preview[data-kind="archive_cycle"] .arch-link-preview-body {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.arch-link-preview[data-kind="archive_cycle"] .arch-link-preview-site {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: 0;
}
.arch-link-preview-badge {
    display: inline-flex;
    align-items: center;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Contain embedded images within the message column */
.arch-fc-text img {
    display: block;
    max-width: 320px;
    height: auto;
    margin-top: 6px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Empty / error state */
.arch-fc-empty {
    padding: 24px;
    text-align: center;
    font-size: 0.82rem;
    color: #9ca3af;
}

/* =====================================================
   ARCHIVE — FULL REVIEWS PANEL
===================================================== */

.arch-rv-avg-pill {
    font-size: 0.72rem;
    font-weight: 600;
    color: #2b988f;
    background: #e6f5f4;
    border-radius: 20px;
    padding: 2px 10px;
}

.arch-rv-sort-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    background: #fcfcfc;
    border-bottom: 1px solid #e5e7eb;
}

.arch-rv-sort-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #9ca3af;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.15s, background 0.15s;
    user-select: none;
}

.arch-rv-sort-btn:hover {
    color: #374151;
    background: #f3f4f6;
}

.arch-rv-sort-btn.arch-rv-sort-active {
    color: #2b988f;
}

.arch-rv-sort-arrow {
    font-size: 13px !important;
    line-height: 1;
}

.arch-rv-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 560px;
    overflow-y: auto;
    padding: 4px 0;
    scroll-behavior: smooth;
}

.arch-rv-item {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.arch-rv-item:last-child {
    border-bottom: none;
}

.arch-rv-mine {
    background: #f8fffe;
}

@keyframes archRvHighlight {
    0%   { background: rgba(43,152,143,0.18); }
    70%  { background: rgba(43,152,143,0.12); }
    100% { background: transparent; }
}
.arch-rv-highlight {
    animation: archRvHighlight 2.4s ease forwards;
    border-radius: 6px;
    outline: 2px solid rgba(43,152,143,0.35);
    outline-offset: -2px;
}

.arch-rv-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.arch-rv-who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.arch-rv-avatar {
    width: 34px;
    height: 34px;
    object-fit: cover;
    flex-shrink: 0;
}

.arch-rv-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.arch-rv-user {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 6px;
}

.arch-rv-you {
    font-size: 0.65rem;
    font-weight: 600;
    background: #2b988f;
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Wraps the username link + inline Edit button so they share a row. */
.arch-rv-user-row {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0;
}
.arch-rv-edit-btn {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 3px;
    background: transparent;
    border: 1px solid #d1d5db;
    color: #2B988F;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.4;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.arch-rv-edit-btn:hover {
    color: #1b6b62; border-color: #2B988F; background: #ecfdf5;
}
.arch-rv-edit-btn .material-icons {
    font-size: 11px !important; line-height: 1;
}

.arch-rv-date {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-top: 1px;
}

.arch-rv-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.arch-rv-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.arch-rv-stars .material-icons {
    font-size: 14px !important;
}

.arch-rv-nums {
    display: flex;
    align-items: center;
    gap: 8px;
}

.arch-rv-rating {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1f2937;
}

.arch-rv-delta {
    font-size: 0.72rem;
    font-weight: 600;
}

.arch-rv-comment {
    margin-top: 10px;
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.55;
    word-break: break-word;
}

.arch-rv-comment p {
    margin: 0 0 6px;
}

.arch-rv-comment p:last-child {
    margin-bottom: 0;
}

.arch-rv-track {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: #6b7280;
    font-style: italic;
}

.arch-rv-track .material-icons {
    font-size: 14px !important;
    color: #2b988f;
}

/* =====================================================
   ARCHIVE — FULL CHAT SKELETON LOADER
===================================================== */

.arch-fc-skeleton {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.arch-skel-circle-spacer {
    width: 32px;
    flex-shrink: 0;
}

/* =====================================================
   ARCHIVE CHAT — IMAGE LIGHTBOX
===================================================== */

.arch-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.88);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 24px;
}

.arch-lightbox-overlay.active {
    display: flex;
}

.arch-lightbox-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    cursor: default;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.arch-lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 10000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    backdrop-filter: blur(4px);
}

.arch-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.arch-lightbox-close .material-icons {
    font-size: 20px !important;
}

/* Prevent page scroll while lightbox is open */
body.arch-lightbox-open {
    overflow: hidden;
}

/* Clickable cursor on embedded chat images */
.arch-fc-text img,
.chat-messages img {
    cursor: zoom-in;
}
.chat-messages .arch-link-preview-img {
    cursor: pointer;
}

/* Reply preview text clamp — must live in stylesheet; -webkit-box-orient is stripped from inline styles */
/* Flash highlight when jumping to a quoted message */
@keyframes chat-msg-highlight-fade {
    0%   { background: rgba(41, 181, 168, 0.25); }
    100% { background: transparent; }
}
.chat-msg-highlight {
    border-radius: 6px;
    animation: chat-msg-highlight-fade 1.5s ease forwards;
}
@keyframes forum-post-highlight-fade {
    0%   { background: rgba(41, 181, 168, 0.2); box-shadow: 0 0 0 2px rgba(43,152,143,0.4); }
    100% { background: transparent; box-shadow: none; }
}
.forum-post-highlight {
    border-radius: 8px;
    animation: forum-post-highlight-fade 2s ease forwards;
}

.reply-clamp {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ==========================================
   ARTIST TAG AUTOCOMPLETE
   ========================================== */
.artist-tag-ac {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}

.artist-tag-ac-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: .92rem;
    color: #222;
    transition: background .1s;
}

.artist-tag-ac-row img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.artist-tag-ac-no-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    flex-shrink: 0;
    display: inline-block;
}

.artist-tag-ac-row.active,
.artist-tag-ac-row:hover {
    background: #d0f4f0;
}

.artist-tag-ac-sub {
    color: #888;
    font-size: 0.82em;
}

/* Chat Quill — speech-bubble caret pointing left toward avatar */
.chat-quill-wrap::before,
.chat-quill-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1;
}
/* Outer triangle — border colour */
.chat-quill-wrap::before {
    left: 2px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 8px solid #dee2e6;
    transform: translateY(-50%);
}
/* Inner triangle — toolbar background, creates the 1px border effect */
.chat-quill-wrap::after {
    left: 3px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 7px solid #f8f9fa;
    transform: translateY(-50%);
}

/* Chat Quill — toolbar + editor unified as one box */
.chat-quill-wrap .ql-toolbar.ql-snow {
    border: 1px solid #dee2e6;
    border-radius: .375rem .375rem 0 0;
    padding: 3px 6px;
    margin-left: 10px;
    background: #f8f9fa;
}

.chat-quill-input.ql-container.ql-snow {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0;
    font-family: inherit;
    font-size: .875rem;
    margin-left: 10px;
    flex: 1 1 0;
    min-width: 0;
}

/* Mobile-only tag buttons in the send bar — hidden on desktop */
.chat-mobile-quick-btns { display: none; }

/* Send bar — always visible in chat */
.chat-send-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid #dee2e6;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(222, 226, 230);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0 0 .375rem .375rem;
    background: #f8f9fa;
    margin-left: 10px;
    margin-top: -1px;
}

.chat-send-bar-hints {
    font-size: 0.68rem;
    color: #6c757d;
    line-height: 1;
}

/* Mobile-only shortcut hints — hidden on desktop */
.chat-mobile-hints {
    display: none;
}
@media (max-width: 768px) {
    .chat-send-bar-hints { display: none; }
    .chat-mobile-hints {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        margin-top: 16px;
        font-size: 0.67rem;
        color: #6c757d;
        padding-left: 48px;
    }
    .chat-mobile-hint-row {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .chat-mobile-hint-label {
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #adb5bd;
    }
}

.chat-send-bar-hints kbd,
.chat-mobile-hints kbd {
    display: inline-block;
    font-size: 0.65rem;
    padding: 2px 5px;
    background: #fff;
    border: 1px solid #adb5bd;
    border-bottom-width: 2px;
    border-radius: 4px;
    color: #2B988F;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.3;
}

/* Fade the bottom border of the editor into the send bar */
.chat-quill-wrap.is-focused .chat-quill-input.ql-container.ql-snow,
.chat-quill-wrap.has-content .chat-quill-input.ql-container.ql-snow {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.chat-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2B988F;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.chat-send-btn:hover {
    background: #237e76;
}

.chat-send-btn:active {
    background: #1d6b63;
}

.chat-send-btn:disabled {
    background: #b0bec5;
    cursor: default;
    pointer-events: none;
}

.send-btn-theme:disabled {
    background-color: #b0bec5 !important;
    cursor: default;
    pointer-events: none;
}

/* Forum new-thread: match chat Quill border color */
.forum-quill-wrap .ql-toolbar.ql-snow {
    border-color: #dee2e6;
}
.forum-quill-wrap .ql-container.ql-snow {
    border-color: #dee2e6;
    border-radius: 0px;
    background: white;
}

/* Forum new-thread: expand on focus / content — mirrors chat behavior */
.forum-quill-wrap.is-focused .ql-editor,
.forum-quill-wrap.has-content .ql-editor {
    min-height: 80px;
}

/* New thread card: expand on focus or content, small when empty+unfocused */
#forum-new-thread-box .forum-quill-wrap .ql-editor {
    min-height: 60px;
    transition: min-height 0.2s ease;
    
}

#forum-new-thread-box .forum-quill-wrap.is-focused .ql-editor,
#forum-new-thread-box .forum-quill-wrap.has-content .ql-editor {
    min-height: 160px;
}

/* Forum thread send bar — identical to .chat-send-bar */
.forum-thread-send-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid #dee2e6;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0 0 .375rem .375rem;
    background: #f8f9fa;
    margin-left: 10px;
    margin-top: -2px;
}

.forum-quill-wrap.is-focused .forum-thread-send-bar,
.forum-quill-wrap.has-content .forum-thread-send-bar {
    display: flex;
}

/* Fade the container's bottom border into the send bar, like chat */
.forum-quill-wrap.is-focused .ql-container.ql-snow,
.forum-quill-wrap.has-content .ql-container.ql-snow {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.chat-quill-input .ql-editor {
    padding: 6px 12px;
    min-height: 60px;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.5;
    transition: min-height 0.2s ease;
    border-radius: 0px;
}

.chat-quill-input.is-focused .ql-editor,
.chat-quill-wrap.has-content .chat-quill-input .ql-editor {
    min-height: 80px;
}

.chat-quill-input .ql-editor.ql-blank::before {
    font-style: normal;
    color: #6c757d;
    left: 12px;
}

/* GIF toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-gif::before {
    content: "GIF";
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #555;
    display: inline-block;
    vertical-align: middle;
}

.chat-quill-wrap .ql-toolbar button.ql-emoji::before {
    font-weight: 900;
    color: #555;
}

/* Attach toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-attach::before {
    content: "\f0c6";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    color: #555;
}

.chat-quill-wrap .ql-toolbar button.ql-gif,
.chat-quill-wrap .ql-toolbar button.ql-attach,
.chat-quill-wrap .ql-toolbar button.ql-emoji,
.chat-quill-wrap .ql-toolbar button.ql-tag,
.chat-quill-wrap .ql-toolbar button.ql-album,
.chat-quill-wrap .ql-toolbar button.ql-film,
.chat-quill-wrap .ql-toolbar button.ql-book,
.chat-quill-wrap .ql-toolbar button.ql-actor,
.chat-quill-wrap .ql-toolbar button.ql-director,
.chat-quill-wrap .ql-toolbar button.ql-author,
.chat-quill-wrap .ql-toolbar button.ql-mention,
.chat-quill-wrap .ql-toolbar button.ql-spoiler {
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
    margin-top: 0;
}

.chat-quill-wrap .ql-toolbar button.ql-gif:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-attach:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-emoji:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-tag:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-album:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-film:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-book:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-actor:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-director:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-author:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-mention:hover::before {
    color: #2B988F;
}

.chat-quill-wrap .ql-toolbar button.ql-actor::before {
    content: "\f508";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}
.chat-quill-wrap .ql-toolbar button.ql-director::before {
    content: "\f03d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}
.chat-quill-wrap .ql-toolbar button.ql-author::before {
    content: "\f303";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}

/* Film toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-film::before {
    content: "\f008";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}

/* Book toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-book::before {
    content: "\f02d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}

.chat-quill-wrap .ql-toolbar button.ql-spoiler:hover::after {
    color: #2B988F;
}

/* Album toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-album::before {
    content: "\f51f";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}

/* Tag toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-tag::before {
    content: "\f130";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}

/* Mention toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-mention::before {
    content: "@";
    font-weight: 700;
    font-size: 13px;
    color: #444;
    line-height: 1;
    font-style: normal;
    font-family: inherit;
}

/* ── Tag Modals (Album + Artist) ── */
.tag-modal-dialog { --tm-accent: #2B988F; }

.tag-modal-dialog { border-radius: 14px; overflow: hidden; }
.tag-modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.tag-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: linear-gradient(135deg, #2B988F 0%, #1d7a72 100%);
    color: #fff;
}
.tag-modal-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tag-modal-icon .material-icons { font-size: .9rem; color: #fff; }
.tag-modal-title {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    flex: 1;
}
.tag-modal-close {
    background: rgba(255,255,255,.15);
    border: none;
    border-radius: 5px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.tag-modal-close:hover { background: rgba(255,255,255,.28); }
.tag-modal-close .material-icons { font-size: .9rem; color: #fff; }

.tag-modal-body { padding: 12px 14px 14px; }

.tag-modal-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.tag-modal-search-icon {
    position: absolute;
    left: 10px;
    font-size: 1.05rem;
    color: #aaa;
    pointer-events: none;
}
.tag-modal-search-input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .875rem;
    background: #f8fafa;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.tag-modal-search-input:focus {
    border-color: #2B988F;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(43,152,143,.12);
}

/* Results list */
.artist-tag-modal-list {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 8px;
}
.artist-tag-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: background .12s;
}
.artist-tag-modal-row:hover,
.artist-tag-modal-row.is-active {
    background: #f0faf9;
}
.artist-tag-modal-row img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.artist-tag-modal-no-img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e0);
    flex-shrink: 0;
    display: inline-block;
}
.artist-tag-modal-loading,
.artist-tag-modal-empty {
    font-size: 0.82rem;
    color: #999;
    padding: 10px 4px;
    text-align: center;
}

/* Member Mention Modal */
.mention-modal-list {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 8px;
}
.mention-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background .12s;
}
.mention-modal-row:hover {
    background: #f0faf9;
}
.mention-modal-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.mention-modal-name {
    font-weight: 600;
    color: #2B988F;
}
.mention-modal-fullname {
    font-size: 0.78rem;
    color: #888;
    margin-left: 2px;
}

/* Album tag badge inside Quill editor */
.ql-album-tag-badge { color: #1e4db7; }
/* Film tag badge inside Quill editor */
.ql-film-tag-badge { color: #b5651d; }
/* Book tag badge inside Quill editor */
.ql-book-tag-badge { color: #7a4cb5; }
/* Actor tag badge inside Quill editor */
.ql-actor-tag-badge { color: #c0392b; }
/* Director tag badge inside Quill editor */
.ql-director-tag-badge { color: #34495e; }
/* Author tag badge inside Quill editor */
.ql-author-tag-badge { color: #0c7a73; }
/* Rendered actor tag — crimson */
a.actor-tag-link {
    display: inline-flex;
    align-items: center;
    color: #c0392b;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.actor-tag-link::before {
    content: "\f508";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.actor-tag-link:hover { color: #8c2a1f; text-decoration: none; }

/* Rendered director tag — slate */
a.director-tag-link {
    display: inline-flex;
    align-items: center;
    color: #34495e;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.director-tag-link::before {
    content: "\f03d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.director-tag-link:hover { color: #22303d; text-decoration: none; }

/* Rendered author tag — teal */
a.author-tag-link {
    display: inline-flex;
    align-items: center;
    color: #0c7a73;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.author-tag-link::before {
    content: "\f303";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.author-tag-link:hover { color: #08544f; text-decoration: none; }

a.actor-tag-link .tag-label,
a.director-tag-link .tag-label,
a.author-tag-link .tag-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* Rendered film tag badge — amber */
a.film-tag-link {
    display: inline-flex;
    align-items: center;
    color: #b5651d;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.film-tag-link::before {
    content: "\f008";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.film-tag-link:hover {
    color: #8a4d15;
    text-decoration: none;
}

/* Rendered book tag badge — violet */
a.book-tag-link {
    display: inline-flex;
    align-items: center;
    color: #7a4cb5;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.book-tag-link::before {
    content: "\f02d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.book-tag-link:hover {
    color: #5d3590;
    text-decoration: none;
}

a.film-tag-link .tag-label,
a.book-tag-link .tag-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
    margin-top: -2px;
}
/* Chat-rendered tags don't need the optical nudge — only reviews do. */
#pane-live-chat .chat-messages a.film-tag-link .tag-label,
#pane-live-chat .chat-messages a.book-tag-link .tag-label {
    margin-top: 0;
}
.ql-album-tag-artist {
    font-weight: 400;
    opacity: 0.75;
}

/* Artist tag badge inside Quill editor */
.ql-artist-tag-badge { color: #177a72; }
.ql-artist-tag-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #0369a1;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    width: 14px;
    height: 14px;
}
.ql-artist-tag-x:hover {
    opacity: 1;
}

/* Truncate long tag label text inside badge links */
a.artist-tag-link .tag-label,
a.album-tag-link .tag-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* Rendered artist tag badge — teal (site primary accent family) */
a.artist-tag-link {
    display: inline-flex;
    align-items: center;
    color: #177a72;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.artist-tag-link::before {
    content: "\f130";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.artist-tag-link:hover {
    color: #0f5e58;
    text-decoration: none;
}

/* Rendered album tag badge — blue (site gradient accent family) */
a.album-tag-link {
    display: inline-flex;
    align-items: center;
    color: #1e4db7;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.album-tag-link::before {
    content: "\f51f";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.album-tag-link:hover {
    color: #1a3a8f;
    text-decoration: none;
}
a.album-tag-link .album-tag-artist {
    font-weight: 400;
    opacity: 0.75;
}

/* User mention badge inside Quill editor */
.ql-user-mention-badge { color: #5b21b6; cursor: default; }
/* Rendered user mention — purple matching artist/album tag style */
a.user-mention-link {
    display: inline-flex;
    align-items: center;
    color: #5b21b6;
    font-size: 0.82em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    margin-top: -3px;
    gap: 2px;
}
a.user-mention-link::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.78em;
    opacity: 0.85;
}
a.user-mention-link:hover {
    color: #4c1d95;
    text-decoration: none;
}

/* ============================================================
   PILL TAGS — unified styling for all 8 tag types.
   Editor badges (.ql-*-tag-badge) + rendered links (a.*-tag-link)
   render as rounded pills with a soft tinted background and a
   subtle border matching the foreground color of each tag type.
   Per-type rules above only set the foreground color + icon; this
   block layers on the pill shape, spacing, and consistent sizing.
   ============================================================ */
a.artist-tag-link,
a.album-tag-link,
a.film-tag-link,
a.book-tag-link,
a.actor-tag-link,
a.director-tag-link,
a.author-tag-link,
a.user-mention-link,
.ql-artist-tag-badge,
.ql-album-tag-badge,
.ql-film-tag-badge,
.ql-book-tag-badge,
.ql-actor-tag-badge,
.ql-director-tag-badge,
.ql-author-tag-badge,
.ql-user-mention-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;   /* applies to editor badges too, matching the
                                 rendered links — keeps icon+label aligned with
                                 the surrounding text instead of dropping to the
                                 baseline (which made badges look "off"). */
    gap: 4px;
    font-size: 0.92em;
    line-height: 1;           /* hug the glyphs so the icon centers ON the text
                                 instead of dropping below it — without this the
                                 inherited editor line-height makes the text item
                                 tall and the centered icon lands too low. */
    font-weight: 700;         /* bold label */
    white-space: nowrap;
    padding: 0;               /* flush — no outer spacing, so it's clear whether
                                 a space exists before/after when typing. */
    margin: -3px 0 0;         /* vertical optical nudge only; no horizontal margin */
    text-decoration: none;
}
a.artist-tag-link:hover,
a.album-tag-link:hover,
a.film-tag-link:hover,
a.book-tag-link:hover,
a.actor-tag-link:hover,
a.director-tag-link:hover,
a.author-tag-link:hover,
a.user-mention-link:hover {
    text-decoration: none;
}

a.artist-tag-link::before,
a.album-tag-link::before,
a.film-tag-link::before,
a.book-tag-link::before,
a.actor-tag-link::before,
a.director-tag-link::before,
a.author-tag-link::before,
a.user-mention-link::before,
.ql-tag-ico {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .78em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    opacity: 0.9;
}

/* Editor icon: unlike the rendered links (where ::before is a direct flex child
   of the <a>), Quill wraps the badge content in cursor-guard nodes + an inner
   span, so the badge's flex align/gap never reach this icon. Align it to the
   label and add the icon↔label gap here instead. */
.ql-tag-ico {
    vertical-align: middle;
    margin-right: 3px;
    margin-top: -3px;
}

/* Editor-only overrides: badges sit inside a contenteditable region so we keep
   no-select behavior. Quill inserts cursor-guard nodes () as extra flex items,
   so the unified gap:4px lands around the guards (phantom side spacing) instead
   of between icon and label — zero it out; the icon↔label gap comes from
   .ql-tag-ico's margin-right above. */
.ql-artist-tag-badge,
.ql-album-tag-badge,
.ql-film-tag-badge,
.ql-book-tag-badge,
.ql-actor-tag-badge,
.ql-director-tag-badge,
.ql-author-tag-badge,
.ql-user-mention-badge {
    user-select: none;
    gap: 0;
}

/* Quote block inside chat bubbles — lighter than forum version */
.msg-text .forum-quote-block {
    padding: 5px 10px 5px 10px;
    margin: 0 0 6px 0;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.06);
    border-left-width: 3px;
}
.msg-text .forum-quote-block .fq-attr {
    font-size: 0.72rem;
    margin-bottom: 4px;
    padding-bottom: 4px;
    flex-wrap: wrap;
    gap: 4px;
}
.msg-text .forum-quote-block .fq-body {
    font-size: 0.82rem;
}
.msg-text .forum-quote-block::before {
    display: none;
}

/* Reply preview bar shown above chat input */
.chat-reply-bar {
    display: block;
    width: 100%;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    color: #212529;
    white-space: normal;
    font-size: 0.875rem;
}

/* Chat input hints bar */
.chat-input-hints kbd {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    color: #374151;
    font-family: inherit;
}

/* =====================================================
   ARCHIVE FULL FORUM
===================================================== */

.arch-forum-list {
    overflow-y: auto;
    max-height: 600px;
    padding: 0;
}

.arch-forum-thread {
    border-bottom: 1px solid #e5e7eb;
    padding: 16px;
}

.arch-forum-thread:last-child {
    border-bottom: none;
}

.arch-forum-thread-op {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.arch-forum-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px;
}

.arch-forum-op-body {
    flex: 1;
    min-width: 0;
}

.arch-forum-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.arch-forum-user {
    font-weight: 600;
    font-size: 0.82rem;
    color: #374151;
}

.arch-forum-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #111827;
    margin-bottom: 6px;
}

.arch-forum-replies {
    margin-top: 12px;
    padding-left: 44px;
    border-left: 2px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.arch-forum-reply {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.arch-forum-reply-body {
    flex: 1;
    min-width: 0;
}

.shadow notification-dropdown {
    margin-top: 10px !important;
}

.dropdown-item:active {
    background-color: rgba(43, 152, 143, 0.25) !important;
    color: #2B988F !important;
}

.thread-link-display:not(:empty) + .reactions-display {
    margin-top: 8px;
}

/* Archive hero: mobile-only row is hidden on desktop */
.arch-mobile-top-row { display: none; }

.chat-forum-thread-link {
    margin-bottom: 4px;
}
/* ── CHAT RESIZE HANDLE (desktop only) ── */
.chat-resize-handle {
    height: 12px;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.chat-resize-handle::after {
    content: '';
    width: 40px;
    height: 3px;
    background: #dee2e6;
    border-radius: 2px;
    transition: background 0.15s, width 0.15s;
}
.chat-resize-handle:hover::after,
.chat-resize-handle.is-dragging::after {
    background: #2B988F;
    width: 56px;
}
@media (max-width: 991px) {
    .chat-resize-handle { display: none !important; }
}

/* ── Queue list-view resize handle (mirrors .chat-resize-handle) ──
   Only shown on desktop in list (compact) view; drag to set the list height. */
.queue-resize-handle {
    height: 12px;
    cursor: ns-resize;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.queue-resize-handle::after {
    content: '';
    width: 40px;
    height: 3px;
    background: #dee2e6;
    border-radius: 2px;
    transition: background 0.15s, width 0.15s;
}
.queue-resize-handle:hover::after,
.queue-resize-handle.is-dragging::after {
    background: #2B988F;
    width: 56px;
}
@media (min-width: 992px) {
    /* Desktop list view: the wrap becomes a fixed-height scroll box whose
       height the handle controls via --queue-list-h (default 460px). Card
       view (no .queue-compact) is unaffected — it flows full height. */
    #pane-queue.queue-compact #queueListWrap {
        max-height: var(--queue-list-h, 460px);
        overflow-y: auto;
    }
    #pane-queue.queue-compact .queue-resize-handle {
        display: flex;
    }
}

/* ── CHAT SKELETON PRELOADER ── */
.chat-skeleton {
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.chat-skel-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.chat-skel-row--right {
    flex-direction: row-reverse;
}
.chat-skel-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e5e7eb;
}
.chat-skel-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-skel-name {
    height: 10px;
    border-radius: 4px;
    background: #e5e7eb;
}
.chat-skel-line {
    height: 12px;
    border-radius: 6px;
    background: #e5e7eb;
}

/* Desktop chat pane: restore top padding that the global * reset strips from .p-3 */
@media (min-width: 992px) {
    #pane-live-chat {
        padding-top: 1rem !important;
    }
}


/* ======================================================================================
   CLUB TAB — Shared AQM queue grid + mobile CT compact rows
   Single source of truth. Do NOT add <style> blocks in PHP partials for these classes.
   Loaded globally via header.php so all lazy-loaded tabs inherit these definitions.
====================================================================================== */

/* ── Section label (shared by club tab and admin queue manager) ── */
.aqm-section-label { font-size: 0.82rem; font-weight: 700; color: #374151; }

/* ── Base row: standalone card style (settings/admin queue manager context) ── */
.aqm-queue-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 6px;
}

/* ── Inside .ct-queue-list: flat list style (club tab desktop) ── */
.ct-queue-list { display: flex; flex-direction: column; gap: 0; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.ct-queue-list .aqm-queue-row { border-radius: 0; margin-bottom: 0; border: none; border-bottom: 1px solid #e5e7eb; padding: 9px 14px; }
.ct-queue-list .aqm-queue-row:last-child { border-bottom: none; }

/* ── Now-playing row modifiers ── */
.aqm-queue-row.now-playing { background: #f0fdf4; border-color: #86efac; box-shadow: 0 1px 4px rgba(34,197,94,0.12); }
.aqm-queue-row.now-playing .aqm-queue-date-label { color: #15803d; }
.aqm-queue-row.now-playing .aqm-queue-date-val   { color: #14532d; }

/* ── On-deck row modifiers ── */
/* On-deck rows + tags use an amber palette to read clearly distinct from
   the green "Live / now-playing" treatment. Same role (next thing up),
   different state — warmer "warming up" feel without competing with live. */
.aqm-queue-row.on-deck { background: #fffbeb; border-color: #fde68a; }
.aqm-queue-row.on-deck .aqm-queue-date-label { color: #b45309; }
.aqm-on-deck-tag { color: #b45309; background: #fef3c7; }

/* ── Skipped / playlist-week row modifiers ── */
.aqm-queue-row.skipped { opacity: 1; }
.aqm-queue-row.skipped > * { opacity: 0.45; }
.aqm-queue-row.skipped > .aqm-queue-divider,
.aqm-queue-row.skipped > .ct-pick-missing,
.aqm-queue-row.skipped > .ct-pick-set { opacity: 1; }
.aqm-queue-row.playlist-week { background: #faf5ff; flex-wrap: wrap; }
.aqm-queue-row.playlist-week .aqm-queue-date-label { color: #7c3aed; }
.aqm-queue-row.playlist-week .aqm-queue-date-val   { color: #6d28d9; }
.aqm-queue-row.playlist-week .aqm-queue-member-name { color: #6d28d9; }

/* ── AQM shared components ── */
.aqm-queue-date { min-width: 68px; text-align: center; flex-shrink: 0; }
.aqm-queue-date-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; line-height: 1.2; }
.aqm-queue-date-val { font-size: 0.7rem; font-weight: 600; color: #374151; line-height: 1.3; }
.aqm-queue-divider { width: 1px; height: 40px; background: #e5e7eb; flex-shrink: 0; }
.aqm-queue-member { display: flex; align-items: center; gap: 7px; flex: 0 0 110px; width: 110px; }
.aqm-queue-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.aqm-queue-member-name { font-size: 0.75rem; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.aqm-queue-album { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.aqm-queue-cover { width: 38px; height: 38px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.aqm-queue-meta { flex: 1; min-width: 0; }
.aqm-queue-title  { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111; }
.aqm-queue-artist { font-size: 0.68rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aqm-queue-empty-pick { font-size: 0.75rem; color: #9ca3af; font-style: italic; flex: 1; }
.aqm-pw-label { font-size: 0.75rem; font-weight: 700; color: #7c3aed; display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.aqm-pw-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: #ede9fe; color: #6d28d9; border-radius: 4px; padding: 1px 6px; }
.aqm-pw-badge--tbd { background: #f3f4f6; color: #6b7280; }
.aqm-pw-queue-icon { font-size: 20px; color: #7c3aed; flex-shrink: 0; }
.aqm-pw-play-icon { font-size: 16px; }
.aqm-pw-desc-panel { flex-basis: 100%; font-size: 0.78rem; color: #6b7280; line-height: 1.5; padding: 8px 4px 2px; border-top: 1px solid #e9d5ff; background: none; margin-top: 6px; }
.aqm-pw-caret .material-icons { font-size: 20px; }
.aqm-pw-spotify-link { display: inline-block; padding: 2px 8px; font-size: 0.68rem; background: #1db954; color: #fff; border-radius: 4px; text-decoration: none; }
.aqm-pw-spotify-link:hover { background: #17a349; color: #fff; }

/* ── Set Theme button (admin, purple) ── */
.btn.aqm-set-theme-btn, .ct-set-theme-btn {
  background: #ede9fe; border: 1px solid #c4b5fd; padding: 2px 8px; font-size: 0.65rem;
  color: #7c3aed; border-radius: 6px; cursor: pointer; white-space: nowrap; line-height: 1.4;
  display: inline-flex; align-items: center; gap: 3px;
  transition: background 0.15s, border-color 0.15s;
}
.btn.aqm-set-theme-btn:hover, .ct-set-theme-btn:hover { background: #ddd6fe; border-color: #a78bfa; color: #5b21b6; }
.ct-set-theme-btn .material-icons { font-size: 13px; }

/* ── Picks set/missing states ── */
.ct-pick-set, .ct-pick-missing { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600; }
.ct-pick-set { color: #059669; }
.ct-pick-set .material-icons, .ct-pick-missing .material-icons { font-size: 18px; }
.ct-pick-missing { color: #dc2626; }

/* ── Admin action buttons (used in both layouts) ── */
.ct-skip-btn { background: none; border: 1px solid #e5e7eb; padding: 2px 9px; font-size: 0.65rem; color: #6b7280; border-radius: 6px; cursor: pointer; white-space: nowrap; line-height: 1.4; display: inline-flex; align-items: center; gap: 3px; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.ct-skip-btn:hover { color: #ef4444; border-color: #fca5a5; background: #fef2f2; }
.ct-undo-btn { background: none; border: 1px solid #fbbf24; padding: 2px 9px; font-size: 0.65rem; color: #92400e; border-radius: 6px; cursor: pointer; white-space: nowrap; line-height: 1.4; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.ct-undo-btn:hover { background: #fef3c7; }

/* ── Desktop club info card helpers ──
   The tab-pane's outer .p-3 already supplies the standard 16px gutter on
   every tab. These wrappers used to add another 12/14px on top of that,
   making the club tab's content sit further inset than reviews/forum.
   Strip their own padding so content lines up with the rest. */
.ct-desktop-info-wrap { padding: 0; }
.ct-desktop-club-img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.ct-desktop-card-body { padding: 0; }

/* ── MOBILE: CT compact rows ── */
.ct-wrap { padding: 0; }
.ct-info { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #e5e7eb; }
.ct-info-img {
  width: 88px; height: 88px; border-radius: 14px; object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.55);
  box-shadow: 0 4px 18px rgba(0,0,0,0.18), 0 1.5px 4px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.45);
  outline: 1.5px solid rgba(255,255,255,0.18); outline-offset: -3px;
}
.ct-info-body { flex: 1; min-width: 0; }
.ct-info-name { font-weight: 700; font-size: 0.95rem; color: #111; margin-bottom: 3px; }
.ct-info-desc { font-size: 0.78rem; color: #6b7280; line-height: 1.4; margin-bottom: 7px; }
.ct-info-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.ct-meta-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 0.65rem; font-weight: 500; color: #4b5563; background: #f3f4f6; border-radius: 20px; padding: 3px 9px; }
.ct-meta-chip .material-icons { font-size: 0.75rem; color: #9ca3af; }
.ct-rotation-hd { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #9ca3af; margin-bottom: 6px; }
.ct-empty { font-size: 0.8rem; color: #9ca3af; padding: 8px 0; }
.ct-row { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; }
.ct-row:last-child { border-bottom: none; }
.ct-row.skipped { opacity: 1; }
.ct-row.skipped > * { opacity: 0.45; }
.ct-row.skipped > .ct-row-actions { opacity: 1; }
/* On-deck shares the flat row style (no separate rounded card) — amber
   accent so it reads clearly distinct from the green Live row above. */
.ct-row.on-deck {
    background: #fffbeb;
    border-left: 3px solid #fde68a;
    padding-left: 9px; /* 12px - 3px border so avatar still aligns */
}
.ct-row.now-playing {
  position: relative; overflow: hidden; border-bottom: none;
  background: linear-gradient(135deg, #f0fdf4 0%, #f9fefb 100%);
  border: 1px solid #bbf7d0; border-radius: 10px 10px 0 0; padding: 10px 11px; margin-bottom: 0;
}
.ct-row.now-playing::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(34,197,94,.07) 50%, transparent 100%);
  animation: ct-live-sweep 3s ease-in-out infinite;
}
@keyframes ct-live-sweep {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  40%, 60% { opacity: 1; }
}
.ct-live-badge { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #15803d; background: #dcfce7; border: 1px solid #86efac; border-radius: 10px; padding: 2px 8px; }
.ct-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; flex-shrink: 0; animation: ct-dot-pulse 1.6s ease-in-out infinite; }
@keyframes ct-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.65); } }
.ct-row-top { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.ct-row-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ct-row-pw-icon { font-size: 18px; color: #7c3aed; flex-shrink: 0; }
.ct-row-name { flex: 1; min-width: 0; font-size: 0.78rem; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row.playlist-week .ct-row-name { color: #6d28d9; flex: 0 0 auto; }
.ct-row-tag { flex-shrink: 0; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 10px; }
.ct-row-tag.on-deck-tag { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.ct-row-tag.upcoming    { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }
.ct-row-tag.pw          { background: #faf5ff; color: #7c3aed; border: 1px solid #c4b5fd; }
.ct-row-tag.skipped-tag { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.ct-row-album { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-left: 32px; position: relative; z-index: 1; }
.ct-row-cover { width: 80px; height: 80px; border-radius: 6px; object-fit: cover; flex-shrink: 0; border: 2px solid #e5e7eb; display: block; }
.ct-cover-link { flex-shrink: 0; display: block; border-radius: 6px; }
.ct-row.now-playing .ct-row-cover { border-color: #86efac; }  /* green = live */
.ct-row.on-deck    .ct-row-cover { border-color: #fcd34d; }  /* amber = next */
.ct-row-meta { flex: 1; min-width: 0; }
.ct-row-title  { font-size: 0.76rem; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row-artist { font-size: 0.67rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row-set { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; color: #059669; margin-top: 5px; padding-left: 32px; }
.ct-row-set .material-icons { font-size: 15px; }
.ct-row-pw-body { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding-left: 26px; flex-wrap: wrap; }
.ct-row.playlist-week { padding: 12px; }
.ct-pw-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: #ede9fe; color: #6d28d9; border-radius: 4px; padding: 2px 7px; }
.ct-pw-badge.tbd { background: #f3f4f6; color: #6b7280; }
.ct-pw-badge-editable { display: inline-flex; align-items: center; gap: 6px; padding-right: 4px; }
.ct-pw-inline-edit-btn { background: none; border: none; border-left: 1px solid #c4b5fd; border-radius: 0; margin-left: 2px; padding: 0 4px 0 6px; font-size: 0.58rem; font-weight: 600; color: #7c3aed; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; text-transform: lowercase; letter-spacing: 0; line-height: 1.5; }
.ct-pw-inline-edit-btn .material-icons { font-size: 11px; }
.ct-pw-inline-edit-btn:hover { background: none; border-color: #a78bfa; color: #5b21b6; }
.ct-pw-spotify { font-size: 0.65rem; font-weight: 600; background: #1db954; color: #fff; border-radius: 4px; padding: 2px 8px; text-decoration: none; }
.ct-pw-spotify:hover { background: #17a349; color: #fff; }
.ct-pw-label-group { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ct-pw-spotify-inline { flex-shrink: 0; }
.ct-pw-caret-btn { background: none; border: none; padding: 0; cursor: pointer; color: #9ca3af; display: flex; align-items: center; line-height: 1; transition: color 0.15s; }
.ct-pw-caret-btn:hover { color: #7c3aed; }
.ct-pw-caret-btn .material-icons { font-size: 17px; transition: transform 0.2s; }
.ct-pw-caret-btn[aria-expanded="true"] .material-icons { transform: rotate(180deg); }
.ct-pw-desc-panel { font-size: 0.75rem; color: #6b7280; line-height: 1.5; margin-top: 8px; padding: 8px 10px 8px 32px; background: #faf5ff; border-radius: 6px; border-left: 3px solid #c4b5fd; }
.ct-row-actions { padding-left: 32px; margin-top: 5px; }
.ct-member-link { color: #374151; text-decoration: none; }
.ct-member-link:hover { color: #2B988F; text-decoration: underline; }
.ct-media-link { color: inherit; text-decoration: none; }
.ct-media-link:hover { color: #2B988F; text-decoration: underline; }

/* ── Queue tab: create playlist button ── */
/* Enabled state mirrors .queue-view-icon-btn.active (white bg, soft shadow). */
#queueCreatePlaylistBtn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 500; color: #333; background: #fff;
  border: none; border-radius: 7px; padding: 4px 8px;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
#queueCreatePlaylistBtn:hover:not(:disabled) {
  background: #f9fafb; color: #111;
  box-shadow: 0 2px 5px rgba(0,0,0,.15);
}
#queueCreatePlaylistBtn:disabled {
  background: #f0f0f0; color: #555; box-shadow: none; cursor: not-allowed;
}
.queue-create-playlist-icon { font-size: 14px; }

/* ── Queue playlist modal ── */
.qpl-modal-dialog { max-width: 440px; }
.qpl-modal-content { border-radius: 14px; overflow: hidden; }
.qpl-modal-header { border-bottom: 1px solid #f0f0f0; padding: 16px 20px 14px; }
.qpl-modal-footer { border-top: 1px solid #f0f0f0; padding: 12px 20px; }
.qpl-modal-title { font-size: 1rem; }
.qpl-modal-subtitle { font-size: 0.75rem; }
.qpl-spotify-svg { width: 20px; height: 20px; flex-shrink: 0; }
.qpl-upload-hint { font-size: 0.72rem; margin-top: 4px; }
.qpl-status { color: #6b7280; }
.qpl-create-btn { background: #1DB954; color: #fff; border: none; font-weight: 600; min-width: 110px; }


/* ── Retroactive review modal — fits the site's teal + slate palette */
.arch-review-modal .modal-dialog { max-width: 480px; }
.arch-review-modal__content {
    border: 0; border-radius: 14px; overflow: hidden;
    box-shadow: 0 14px 40px rgba(12, 53, 48, 0.18);
}
.arch-review-modal__header {
    background: linear-gradient(135deg, #0c3530 0%, #1b6b62 100%);
    color: #fff; border-bottom: 0;
    padding: 18px 20px 16px; align-items: flex-start;
}
.arch-review-modal__header .btn-close {
    filter: invert(1) grayscale(1) brightness(2); opacity: 0.85;
}
.arch-review-modal__title-block { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.arch-review-modal__eyebrow {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #a7f3d0; opacity: 0.9;
}
.arch-review-modal__album {
    margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.25; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arch-review-modal__artist {
    font-size: 0.78rem; color: rgba(255,255,255,0.78);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arch-review-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.arch-review-modal__section { display: flex; flex-direction: column; gap: 8px; }
.arch-review-modal__label {
    font-size: 0.75rem; font-weight: 700; color: #374151;
    text-transform: uppercase; letter-spacing: 0.04em; margin: 0;
}
.arch-review-modal__optional { color: #9ca3af; font-weight: 500; text-transform: none; letter-spacing: 0; }
.arch-review-modal__select,
.arch-review-modal__textarea {
    border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 0.9rem; color: #111827; background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.arch-review-modal__select:focus,
.arch-review-modal__textarea:focus {
    border-color: #2B988F; box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.15);
    outline: none;
}
.arch-review-modal__textarea { resize: vertical; min-height: 96px; }

/* Share-to-forum/chat checkbox group. Hidden native input + a styled
   "card" per option so the choices feel like deliberate publish actions
   instead of an afterthought toggle. */
.arch-review-modal__section--share { gap: 10px; }
.arch-review-share {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 480px) {
    .arch-review-share { grid-template-columns: 1fr; }
}
.arch-review-share__opt {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid #d1d5db; border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    margin: 0;
}
.arch-review-share__opt:hover { border-color: #9ca3af; }
.arch-review-share__opt input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.arch-review-share__box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex-shrink: 0;
    border: 1.5px solid #d1d5db; border-radius: 6px;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
}
.arch-review-share__check {
    font-size: 18px; color: #fff; opacity: 0;
    transition: opacity 0.12s;
}
.arch-review-share__opt input[type="checkbox"]:checked ~ .arch-review-share__box {
    background: #2B988F; border-color: #2B988F;
}
.arch-review-share__opt input[type="checkbox"]:checked ~ .arch-review-share__box .arch-review-share__check {
    opacity: 1;
}
.arch-review-share__opt:has(input[type="checkbox"]:checked) {
    border-color: #2B988F;
    background: #f0fbf9;
    box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.1);
}
.arch-review-share__opt input[type="checkbox"]:focus-visible ~ .arch-review-share__box {
    box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.25);
}
.arch-review-share__text {
    display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.arch-review-share__name {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 600; color: #111827;
}
.arch-review-share__name .material-icons { font-size: 16px; color: #2B988F; }
.arch-review-share__hint {
    font-size: 0.72rem; color: #6b7280; line-height: 1.3;
}

/* Rating row — bg star_border with fg star clipped via width % for
   arbitrary 0.1-precision fills (e.g. 23% for a 2.3 rating). */
.arch-review-rate {
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 12px 14px;
}
.arch-review-stars-stack {
    position: relative; display: inline-flex; cursor: pointer; user-select: none;
    touch-action: pan-y;
}
.arch-review-stars-bg,
.arch-review-stars-fg { display: inline-flex; }
.arch-review-stars-bg .material-icons { font-size: 28px; color: #d1d5db; }
.arch-review-stars-fg {
    position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap;
    pointer-events: none; width: 0%; color: #FFC107;
    transition: width 0.05s linear;
}
.arch-review-stars-fg .material-icons { font-size: 28px; color: #FFC107; }
.arch-review-rate__value { font-size: 0.85rem; color: #0c3530; font-weight: 700; }
.arch-review-rate__suffix { color: #6b7280; font-weight: 500; }

.arch-review-modal__error {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    border-radius: 8px; padding: 8px 12px; font-size: 0.82rem;
}
.arch-review-modal__footer {
    background: #f9fafb; border-top: 1px solid #e5e7eb;
    padding: 12px 20px; gap: 8px;
}
.arch-review-modal__btn {
    appearance: none; border: 0; border-radius: 8px;
    font-size: 0.88rem; font-weight: 600; padding: 8px 18px;
    cursor: pointer; transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.arch-review-modal__btn--ghost {
    background: transparent; color: #6b7280; border: 1px solid #d1d5db;
}
.arch-review-modal__btn--ghost:hover { background: #f3f4f6; color: #111827; }
.arch-review-modal__btn--primary { background: #2B988F; color: #fff; }
.arch-review-modal__btn--primary:hover:not(:disabled) { background: #1b6b62; }
.arch-review-modal__btn--primary:disabled { opacity: 0.7; cursor: default; }
.arch-review-modal__btn--danger {
    background: transparent; color: #b91c1c;
    border: 1px solid #fecaca;
    display: inline-flex; align-items: center; gap: 4px;
}
.arch-review-modal__btn--danger:hover:not(:disabled) {
    background: #fef2f2; color: #991b1b; border-color: #fca5a5;
}
.arch-review-modal__btn--danger:disabled { opacity: 0.6; cursor: default; }
.arch-review-modal__btn--danger .material-icons { font-size: 16px; line-height: 1; }
.arch-review-modal__footer-spacer { flex: 1 1 auto; }

/* ── Add/Edit review modal: bottom-sheet on mobile, stops at tab bar ──
   Mirrors the Member Info / Playlist Week Theme modals (see dash-mobile.css)
   so the add/edit review modal slides up from the bottom, ends above the
   fixed .m-tab-bar (62px + safe-area), and scrolls its body — keeping the
   footer (Save) reachable. Desktop keeps the centered dialog. */
@media (max-width: 991.98px) {
    .arch-review-modal .modal-dialog {
        position: fixed !important;
        top: 82px !important;
        bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }
    .arch-review-modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .arch-review-modal.show .modal-dialog {
        transform: none;
    }
    .arch-review-modal__content {
        height: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }
    .arch-review-modal__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .arch-review-modal__footer {
        flex-shrink: 0;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}