:root {
    --primary-deep: #4a1259;
    --primary: #7b1fa2;
    --primary-light: #ae52d4;
    --primary-pale: #f3e5f5;
    --accent-gold: #d4af37;
    --accent-warm: #ff6f61;
    --bg-cream: #faf8f5;
    --text-dark: #2c2c2c;
    --text-muted: #666;
    --text-secondary: #888;
    --card-shadow: 0 4px 24px rgba(74, 18, 89, 0.12);
    --card-hover-shadow: 0 12px 40px rgba(74, 18, 89, 0.2);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Category Colors */
    /* חצרות - Purple */
    --color-chatzer: #9c5bb5;
    --color-chatzer-light: #c48fd7;
    --color-chatzer-dark: #7b3f96;
    --color-chatzer-pale: #f3e5f5;

    /* מחברים - Magenta/Pink */
    --color-mechaber: #c435a8;
    --color-mechaber-light: #e066c7;
    --color-mechaber-dark: #9c1b82;
    --color-mechaber-pale: #fce4ec;

    /* ווערטער - Gray */
    --color-verter: #6b7280;
    --color-verter-light: #9ca3af;
    --color-verter-dark: #4b5563;
    --color-verter-pale: #f3f4f6;

    /* זמנים/מועדים - Orange */
    --color-zman: #e96a1b;
    --color-zman-light: #ff8c42;
    --color-zman-dark: #c54e00;
    --color-zman-pale: #fff3e0;

    /* פלעיליסטס - Red */
    --color-playlist: #c62828;
    --color-playlist-light: #ef5350;
    --color-playlist-dark: #8e0000;
    --color-playlist-pale: #ffebee;

    /* קאלעקשנס - Brown/Amber */
    --color-collection: #B05F03;
    --color-collection-light: #D87F23;
    --color-collection-dark: #7A4202;
    --color-collection-pale: #FBEFE0;

    /* פיוטים - Green */
    --color-piyut: #2e8b2e;
    --color-piyut-light: #81c784;
    --color-piyut-dark: #1b5e20;
    --color-piyut-pale: #e8f5e9;

    /* ניגונים - Blue */
    --color-nigun: #4a7cc9;
    --color-nigun-light: #7aa3e0;
    --color-nigun-dark: #2d5aa0;
    --color-nigun-pale: #e3f2fd;

    /* מוזיק/ריטעם - Gold/Yellow */
    --color-music: #d4ac12;
    --color-music-light: #f0c040;
    --color-music-dark: #b8960c;
    --color-music-pale: #fff8e1;

    /* רעסורסן - Light Blue/Cyan */
    --color-resource: #5bc0de;
    --color-resource-light: #8cd4eb;
    --color-resource-dark: #31a5c7;
    --color-resource-pale: #e0f7fa;

    /* דאקומענטן - Teal/Cyan */
    --color-document: #00a0b0;
    --color-document-light: #4dd0e1;
    --color-document-dark: #007c8a;
    --color-document-pale: #e0f7fa;

    /* אלבומס - Teal */
    --color-album: #00838f;
    --color-album-light: #4fb3bf;
    --color-album-dark: #005662;
    --color-album-pale: #e0f7fa;

    /* גרעידיענט טהעמע - Home/General - combining ניגונים, מחברים, חצרות */
    --gradient-main: linear-gradient(135deg, var(--color-nigun) 0%, var(--color-chatzer) 50%, var(--color-mechaber) 100%);
    --gradient-main-reverse: linear-gradient(135deg, var(--color-mechaber) 0%, var(--color-chatzer) 50%, var(--color-nigun) 100%);
    --gradient-main-vertical: linear-gradient(180deg, var(--color-nigun) 0%, var(--color-chatzer) 50%, var(--color-mechaber) 100%);
    --gradient-main-soft: linear-gradient(135deg, var(--color-nigun-light) 0%, var(--color-chatzer-light) 50%, var(--color-mechaber-light) 100%);
    --gradient-main-pale: linear-gradient(135deg, var(--color-nigun-pale) 0%, var(--color-chatzer-pale) 50%, var(--color-mechaber-pale) 100%);
    --gradient-main-dark: linear-gradient(135deg, var(--color-nigun-dark) 0%, var(--color-chatzer-dark) 50%, var(--color-mechaber-dark) 100%);
    /* Combined pale color for home page background */
    --color-home-pale: color-mix(in srgb, var(--color-nigun-pale) 33%, color-mix(in srgb, var(--color-chatzer-pale) 50%, var(--color-mechaber-pale)));
}

/* Full page background color */
html {
    background: #f8fafc;
    scrollbar-gutter: stable;
}

/* Global rule: Remove underlines from all links and buttons */
a,
button,
.nigun-tag,
.chatzer-tag,
.nigun-tag-inline,
.nigun-modal-mechaber-name,
.nigun-modal-mechaber-profile,
.nigun-mechaber-card,
.nigun-mechaber-name {
    text-decoration: none !important;
}

a.formatted-link {
    color: #1565c0 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-weight: 500;
}
a.formatted-link:hover {
    filter: brightness(0.8);
}

a:hover,
button:hover {
    text-decoration: none !important;
}

/* Loading wave bar animation */
.loading-wave-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loading-wave-bar.active {
    opacity: 1;
}

.loading-wave-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(-90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.5) 25%,
            white 50%,
            rgba(255, 255, 255, 0.5) 75%,
            transparent 100%);
    animation: loadingWave 1.5s infinite ease-in-out;
}

@keyframes loadingWave {
    0% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}

/* ===== Global Navigation Progress Bar ===== */
.global-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.global-progress-bar.active {
    opacity: 1;
}

.global-progress-bar .progress-fill {
    height: 100%;
    float: right;
    background: var(--gradient-main);
    border-radius: 0 0 2px 2px;
    width: 0%;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(123, 31, 162, 0.4);
}

.global-progress-bar.active .progress-fill {
    animation: progressGrow 2.5s cubic-bezier(0.1, 0.4, 0.2, 1) forwards;
}

.global-progress-bar.done .progress-fill {
    animation: none;
    width: 100% !important;
    transition: width 0.2s ease-out;
}

.global-progress-bar.done {
    opacity: 0;
    transition: opacity 0.4s ease 0.15s;
}

@keyframes progressGrow {
    0% {
        width: 0%;
    }

    15% {
        width: 25%;
    }

    40% {
        width: 50%;
    }

    65% {
        width: 70%;
    }

    85% {
        width: 85%;
    }

    100% {
        width: 92%;
    }
}

/* ===== Click feedback for interactive elements ===== */
.nav-btn:active,
.nav-dropdown-btn:active,
.nav-dropdown-item:active,
.category-card:active,
.nigun-detail-box:active,
.song-row:active,
.home-category-card:active,
.home-stat-hero:active {
    transform: scale(0.97);
    opacity: 0.8;
    transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Navigation lock indicator - subtle opacity on disabled nav */
.nav-navigating {
    pointer-events: none;
    opacity: 0.7;
}

.page-title-content {
    position: relative;
}

/* Musical notes loader animation */
/* --- LOADER TINY CSS --- */
.loader-tiny {
    position: relative;
    width: 40px;
    height: 20px;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    overflow: visible;
}

.loader-tiny .note {
    position: absolute;
    bottom: 0;
    color: var(--color-nigun);
    font-size: 11px;
    opacity: 0;
    will-change: transform, opacity;
}

/* Note 1 */
.loader-tiny .note.n1 {
    left: 15%;
    animation: floatTinyLeft 2.8s infinite ease-out;
}

/* Note 2 */
.loader-tiny .note.n2 {
    left: 50%;
    animation: floatTinyRight 3.2s infinite ease-out;
    animation-delay: 1s;
}

/* Note 3 */
.loader-tiny .note.n3 {
    left: 85%;
    animation: floatTinyCenter 2.5s infinite ease-out;
    animation-delay: 2s;
}

@keyframes floatTinyLeft {
    0% {
        transform: translate(5px, 2px) rotate(-5deg) scale(0.8);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-10px, -20px) rotate(-10deg) scale(1.0);
        opacity: 0;
    }
}

@keyframes floatTinyRight {
    0% {
        transform: translate(-5px, 2px) rotate(5deg) scale(0.8);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translate(10px, -20px) rotate(10deg) scale(1.0);
        opacity: 0;
    }
}

@keyframes floatTinyCenter {
    0% {
        transform: translate(0, 2px) rotate(0deg) scale(0.8);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translate(2px, -20px) rotate(5deg) scale(1.0);
        opacity: 0;
    }
}

/* --- LOADER MEDIUM CSS --- */
.loader-medium {
    position: relative;
    width: 100px;
    height: 50px;
    display: inline-block;
}

.loader-medium .note {
    position: absolute;
    bottom: 0;
    color: var(--color-nigun);
    font-size: 30px;
    opacity: 0;
    will-change: transform, opacity;
}

.loader-medium .note.n1 {
    left: 15%;
    animation: floatMediumLeft 2.8s infinite ease-out;
}

.loader-medium .note.n2 {
    left: 50%;
    animation: floatMediumRight 3.2s infinite ease-out;
    animation-delay: 1s;
}

.loader-medium .note.n3 {
    left: 85%;
    animation: floatMediumCenter 2.5s infinite ease-out;
    animation-delay: 2s;
}

@keyframes floatMediumLeft {
    0% {
        transform: translate(10px, 5px) rotate(-5deg) scale(0.8);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-25px, -50px) rotate(-15deg) scale(1.1);
        opacity: 0;
    }
}

@keyframes floatMediumRight {
    0% {
        transform: translate(-10px, 5px) rotate(5deg) scale(0.8);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translate(25px, -50px) rotate(15deg) scale(1.1);
        opacity: 0;
    }
}

@keyframes floatMediumCenter {
    0% {
        transform: translate(0, 5px) rotate(0deg) scale(0.8);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translate(5px, -50px) rotate(5deg) scale(1.1);
        opacity: 0;
    }
}

/* Wave bars are now all white - no category-specific colors needed */

.subtitle {
    transition: opacity 0.3s ease-out;
}

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

html {
    overflow-x: hidden;
}

/* Strip the scrollbar end-caps everywhere — those tiny arrow / corner
   artifacts that peek out next to the rounded modal corners. */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

::-webkit-scrollbar-corner {
    background: transparent !important;
    display: none !important;
}

/* Prevent background page scrolling when any modal is active */
html:has(.nigun-modal-overlay.active),
html:has(.detail-modal-overlay.active),
html:has(.addinfo-modal-overlay.active:not(.inline-mode)),
html:has(.pdf-popup-overlay.show),
html:has(.contact-modal-overlay.active),
html:has(.donate-modal-overlay.active) {
    overflow: hidden !important;
}

body {
    font-family: 'Heebo', 'David Libre', sans-serif;
    background: transparent;
    min-height: 100vh;
    direction: rtl;
    color: var(--text-dark);
    padding-bottom: 80px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Phones only: scale all text (and rem-based spacing) down since there is so
   little room. Tablets (>600px) and desktop are unaffected. */
@media (max-width: 600px) {
    html {
        font-size: 85%;
    }
}

/* Header */

/* Sticky header with hide on scroll down, show on scroll up */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: transform 0.4s ease, opacity 0.4s ease, background 0.3s ease;
    background: transparent;
    pointer-events: none;
}

/* On pages without a page-title header, use a pseudo-element for blur behind nav balls */
body:not(:has(.page-title)) .main-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -15px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    z-index: -1;
    pointer-events: none;
}

/* Re-enable pointer events on interactive children */
.main-header .header-main {
    pointer-events: auto;
}

.main-header.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
}

/* Main content - offset for fixed header */
.main-content {
    padding-top: 80px;
    flex: 1;
    width: 100%;
}

.header-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 30px;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.4s ease;
}

.logo-icon {
    width: 42px;
    height: 42px;
    background: var(--gradient-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(156, 91, 181, 0.25);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.logo-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
}

.logo-text span {
    font-weight: 700;
    font-family: 'Heebo', sans-serif;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-text .logo-word-1 {
    font-size: 0.95em;
}

.logo-text .logo-word-2 {
    font-size: 1.1em;
}

/* Search Modal */
.search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    padding-bottom: 150px;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.search-modal-overlay.active {
    display: flex;
}

.search-modal {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

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

.search-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
}

.search-modal-header h3 {
    margin: 0;
    font-size: 1.2em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.search-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    font-size: 1.4em;
    cursor: pointer;
    color: #666;
    transition: var(--transition-smooth);
}

.search-modal-close:hover {
    background: #e0e0e0;
    color: #333;
}

.search-modal-body {
    padding: 24px;
    display: flex;
    gap: 12px;
}

.search-modal-input {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 1.1em;
    font-family: inherit;
    direction: rtl;
    transition: var(--transition-smooth);
}

.search-modal-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-pale);
}

.search-modal-btn {
    padding: 14px 28px;
    background: var(--gradient-main);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.search-modal-btn:hover {
    background: var(--gradient-main-dark);
    transform: translateY(-2px);
}

.nav-divider {
    width: 4px;
    height: 4px;
    background: var(--gradient-main);
    margin: 0 6px;
    opacity: 0.6;
    border-radius: 50%;
}

/* White divider on pages with a colored page header */
body:has(.page-title) .nav-divider {
    background: white;
    opacity: 0.7;
}

.main-nav {
    margin: 0;
}

.header-right-buttons {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

/* Cooperative Actions Group */
.header-actions-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 82px; /* 36px + 10px + 36px = 82px */
    position: relative;
    box-sizing: border-box;
    transition: gap 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.header-actions-group.hover-search,
.header-actions-group.hover-add {
    gap: 0px;
}

/* Individual Header Buttons */
.header-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: var(--gradient-main);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(156, 91, 181, 0.25);
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                padding 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s ease, 
                background 0.3s ease;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden; /* Clean collapse */
}

.header-actions-group.hover-search .header-search-btn,
.header-actions-group.hover-add .header-add-btn {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(156, 91, 181, 0.4);
    background: var(--gradient-main-dark);
}

.header-btn:active {
    transform: scale(0.95);
}

/* Cooperative Hover Expanding behavior */

/* Hover Search: search expands to fill the group, add collapses */
.header-actions-group.hover-search .header-search-btn {
    width: 82px;
}
.header-actions-group.hover-search .header-add-btn {
    width: 0px;
    opacity: 0;
    pointer-events: none;
}

/* Hover Add: add expands to fill the group, search collapses */
.header-actions-group.hover-add .header-add-btn {
    width: 82px;
}
.header-actions-group.hover-add .header-search-btn {
    width: 0px;
    opacity: 0;
    pointer-events: none;
}

.header-btn-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.2px;
    position: absolute;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-btn-text {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-15px);
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease,
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-actions-group.hover-search .header-search-btn .header-btn-icon,
.header-actions-group.hover-add .header-add-btn .header-btn-icon {
    opacity: 0;
    transform: translateX(15px) scale(0.8);
    pointer-events: none;
}

.header-actions-group.hover-search .header-search-btn .header-btn-text,
.header-actions-group.hover-add .header-add-btn .header-btn-text {
    max-width: 80px;
    opacity: 1;
    transform: translateX(0);
}

/* Logo hover effect */
.logo:hover {
    transform: translateY(-50%) scale(1.04);
}

.logo:hover .logo-icon {
    box-shadow: 0 5px 18px rgba(156, 91, 181, 0.45);
}

.logo:hover .logo-text {
    filter: brightness(1.08);
}

/* Thanks page contact button */
.thanks-contact-btn {
    display: inline-block;
    background: #fff;
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none !important;
    font-weight: 700;
    margin-top: 15px;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.thanks-contact-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.thanks-contact-btn span {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

/* ============================================================
   MOBILE HEADER — hamburger menu
   The full nav only fits above ~1024px; below that the logo and
   side buttons overlap the wrapping nav balls. On narrow screens
   we collapse everything into a slide-down panel toggled by ☰.
   ============================================================ */

/* Hamburger button — hidden on desktop */
.nav-toggle {
    display: none;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: var(--gradient-main);
    box-shadow: 0 3px 10px rgba(156, 91, 181, 0.3);
    cursor: pointer;
    z-index: 20;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 0;
}

.nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.main-header.nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.main-header.nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.main-header.nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* On desktop the wrapper is transparent so layout is unchanged */
.header-collapse {
    display: contents;
}

@media (max-width: 1024px) {
    .main-header {
        pointer-events: auto;
    }

    .header-main {
        justify-content: flex-start;
        min-height: 58px;
        padding: 8px 16px;
    }

    .nav-toggle {
        display: flex;
    }

    .logo {
        right: 14px;
    }

    .logo-icon {
        width: 36px;
        height: 36px;
    }

    /* Logomark only on mobile — frees bar space for the action buttons */
    .logo-text {
        display: none;
    }

    /* Collapsible slide-down panel */
    .header-collapse {
        display: block;
        position: absolute;
        top: calc(100% + 6px);
        left: 8px;
        right: 8px;
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
        padding: 12px;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s;
        pointer-events: none;
    }

    .main-header.nav-open .header-collapse {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    /* Nav wraps two-per-row; ניגונים, dividers and the docs dropdown span full
       width (so everything from קאלעקשנס onward sits two to a row). */
    .header-collapse .main-nav {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    .header-collapse .nav-divider {
        flex-basis: 100%;
        width: 100%;
        height: 1px;
        margin: 4px 12px;
        border-radius: 0;
        opacity: 0.25;
    }

    /* Each nav ball: half-width row with icon + always-visible label */
    .header-collapse .nav-ball,
    .header-collapse .nav-ball:hover,
    .header-collapse .nav-ball-nigunim,
    .header-collapse .nav-dropdown:hover .nav-ball-docs,
    .header-collapse .main-nav:has(.nav-ball:hover) .nav-ball:not(:hover) {
        flex: 1 1 calc(50% - 4px);
        width: auto !important;
        min-width: 0;
        height: 46px;
        padding: 0 14px !important;
        border-radius: 12px;
        justify-content: flex-start;
        gap: 12px;
        transform: none;
    }

    /* ניגונים spans the full width on its own row */
    .header-collapse .nav-ball-nigunim {
        flex: 1 1 100%;
    }

    .header-collapse .nav-ball-icon {
        position: static;
        opacity: 1 !important;
        transform: none !important;
        scale: 1 !important;
        pointer-events: auto !important;
        flex-shrink: 0;
    }

    .header-collapse .nav-ball-mechaber .nav-ball-icon {
        transform: scale(1.5) !important;
    }

    .header-collapse .nav-ball-text {
        position: static;
        max-width: none !important;
        opacity: 1 !important;
        transform: none !important;
        font-size: 1.05em;
    }

    /* Docs dropdown: full-width row, sub-items always visible & indented */
    .header-collapse .nav-dropdown {
        flex-basis: 100%;
        width: 100%;
    }

    .header-collapse .nav-dropdown-content {
        display: block;
        position: static;
        transform: none;
        background: transparent;
        box-shadow: none;
        padding: 4px 0 0;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        animation: none;
    }

    .header-collapse .dropdown-inner {
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .header-collapse .nav-dropdown-item {
        padding: 11px 16px 11px 50px;
        border-radius: 10px;
    }

    /* Action buttons + auth widget sit in the top bar (between hamburger and
       logo) but are only shown while the menu is open, fading in/out with the
       same timing as the collapse panel. (Vertical centering via the base
       translateY(-50%) is kept, so only opacity animates.) */
    .header-right-buttons {
        left: 60px;
        right: auto;
        gap: 8px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0s 0.25s;
    }

    .main-header.nav-open .header-right-buttons {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.25s ease;
    }

    .header-login-btn {
        padding: 0.3rem 0.8rem;
        font-size: 0.8rem;
        height: 32px;
    }

    /* Offset for the shorter mobile header bar */
    .main-content {
        padding-top: 66px;
    }
}

/* Nigun Modal Overlay */

.nigun-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(6px);
    padding: 20px 20px 120px 20px;
}

.nigun-modal-overlay.active {
    display: flex;
}

.nigun-modal {
    position: relative;
    background: white;
    border-radius: 20px;
    width: 95%;
    max-width: 850px;
    max-height: 80vh;
    margin-bottom: 100px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 3px rgba(74, 124, 201, 0.3), 0 25px 80px rgba(74, 124, 201, 0.35);
    animation: nigunModalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nigun-modal-overlay.closing .nigun-modal {
    animation: nigunModalOut 0.25s ease-out forwards;
}

@keyframes nigunModalIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }

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

@keyframes nigunModalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* Staggered pop-in for modal content (recordings, cards, files) as it loads.
   Delay is set inline per element by animateNigunModalIn(). */
@keyframes nigunStaggerIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.nigun-stagger-in {
    animation: nigunStaggerIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    will-change: transform, opacity;
}

/* hero-bottom tags pop in place (scale, no upward slide). */
@keyframes nigunPopIn {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
}

.nigun-pop-in {
    animation: nigunPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    will-change: transform, opacity;
}

.nigun-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, var(--color-nigun-pale) 0%, white 100%);
    flex-shrink: 0;
}

.nigun-modal-header h2 {
    margin: 0;
    font-size: 1.3em;
    color: var(--color-nigun-dark);
    font-weight: 700;
}

/* nigun-modal-close styles defined below in hero section */

.nigun-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Custom scrollbar - hidden by default, visible on scroll */
.nigun-modal-body::-webkit-scrollbar {
    width: 8px;
}

.nigun-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.nigun-modal-body::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.3);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.nigun-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 0.5);
}

.nigun-modal-body::-webkit-scrollbar-button {
    display: none;
}

/* Scrollbar fade effect */
.nigun-modal-body {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}

.nigun-modal-body.is-scrolling {
    scrollbar-color: rgba(100, 100, 100, 0.4) transparent;
}

.nigun-modal-body.is-scrolling::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.4);
}

.nigun-modal-body .detail-page {
    padding: 0;
}

.nigun-modal-body .back-button {
    display: none;
}

.nigun-modal-body .detail-header {
    display: none;
}

.nigun-modal-body .detail-category-bar {
    display: none;
}

/* New Nigun Modal Hero Header */
.nigun-modal-hero {
    position: relative;
    background: linear-gradient(135deg, var(--color-nigun) 0%, var(--color-nigun-dark) 100%);
    padding: 45px 25px 40px 25px;
    text-align: center;
    margin: -20px -20px 25px -20px;
    border-radius: 0 0 20px 20px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.nigun-modal-hero .loading-wave-bar {
    border-radius: 0 0 20px 20px;
}

/* Sticky hero header inside modal only */
.nigun-modal-content .nigun-modal-hero {
    position: sticky;
    top: 0;
    z-index: 100;
}

.nigun-modal-hero-title {
    font-size: 2em;
    font-weight: 700;
    color: white;
    margin: 0;
    padding: 0 160px;
    font-family: 'Heebo', sans-serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1.3;
    text-align: center;
    max-width: 100%;
    word-wrap: break-word;
}

/* Close button - positioned outside the card via wrapper */
.nigun-modal-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5em;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    z-index: 1001;
}

.nigun-modal-close:hover {
    background: #f0f0f0;
    color: #333;
}

/* Play All button - on right side of header, vertically centered */
.play-all-btn {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: white;
    border: none;
    border-radius: 50%;
    font-size: 1.3em;
    color: var(--color-nigun);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    z-index: 20;
    transition: all 0.2s ease;
}

.play-all-btn:hover {
    background: #f0f0f0;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.play-all-btn.playing {
    background: var(--color-nigun);
    color: white;
}

.play-all-btn.playing:hover {
    background: var(--color-nigun-dark);
}

.play-all-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Category-specific play-all colors */
.theme-mechaber .play-all-btn {
    color: var(--color-mechaber);
}

.theme-mechaber .play-all-btn.playing {
    background: var(--color-mechaber);
    color: white;
}

.theme-mechaber .play-all-btn.playing:hover {
    background: var(--color-mechaber-dark);
}

.theme-chatzer .play-all-btn {
    color: var(--color-chatzer);
}

.theme-chatzer .play-all-btn.playing {
    background: var(--color-chatzer);
    color: white;
}

.theme-chatzer .play-all-btn.playing:hover {
    background: var(--color-chatzer-dark);
}

.theme-verter .play-all-btn {
    color: var(--color-verter);
}

.theme-verter .play-all-btn.playing {
    background: var(--color-verter);
    color: white;
}

.theme-verter .play-all-btn.playing:hover {
    background: var(--color-verter-dark);
}

.theme-piyut .play-all-btn {
    color: var(--color-piyut);
}

.theme-piyut .play-all-btn.playing {
    background: var(--color-piyut);
    color: white;
}

.theme-piyut .play-all-btn.playing:hover {
    background: var(--color-piyut-dark);
}

.theme-playlist .play-all-btn {
    color: var(--color-playlist);
}

.theme-playlist .play-all-btn.playing {
    background: var(--color-playlist);
    color: white;
}

.theme-playlist .play-all-btn.playing:hover {
    background: var(--color-playlist-dark);
}

.theme-zman .play-all-btn {
    color: var(--color-zman);
}

.theme-zman .play-all-btn.playing {
    background: var(--color-zman);
    color: white;
}

.theme-zman .play-all-btn.playing:hover {
    background: var(--color-zman-dark);
}

/* Tags bar - below hero, centered */
.nigun-modal-hero-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 4px 20px;
    margin-top: -10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Hide empty hero-bottom (no tags) - still in DOM for edit system */
.nigun-modal-hero-bottom.hero-bottom-empty {
    display: none;
}

/* Empty tag section divs collapse to zero height */
.nigun-modal-hero-personalities:empty,
.nigun-modal-hero-chatzeros:empty,
.nigun-modal-hero-maure:empty,
.nigun-modal-hero-resources:empty,
.nigun-modal-hero-albums:empty,
.nigun-modal-hero-documents:empty {
    display: none;
}

/* Hide empty grid / siman / info */
.nigun-details-grid.grid-empty {
    display: none;
}

.nigun-detail-siman-bar.siman-bar-empty {
    display: none;
}

.nigun-info-box.info-box-empty {
    display: none;
}

.nigun-additions-box.additions-box-empty {
    display: none;
}

/* Personalities tags */
.nigun-modal-hero-personalities {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.personality-tag {
    background: var(--color-mechaber);
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(196, 53, 168, 0.3);
}

.personality-tag:hover {
    background: var(--color-mechaber-dark);
    transform: scale(1.05);
}

/* Chatzer tags */
.nigun-modal-hero-chatzeros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.nigun-modal-hero-chatzeros .chatzer-tag {
    background: var(--color-chatzer);
    color: white;
    border: none;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(156, 91, 181, 0.3);
}

.nigun-modal-hero-chatzeros .chatzer-tag:hover {
    background: var(--color-chatzer-dark);
    transform: scale(1.05);
}

/* Ball divider between chatzer and maure */
.nigun-modal-divider {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-nigun);
    margin: 0 6px;
    flex-shrink: 0;
}

/* Maure (gezungen oif) tags */
.nigun-modal-hero-maure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.maure-tag {
    background: var(--color-piyut);
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
}

.maure-tag:hover {
    background: var(--color-piyut-dark);
    transform: scale(1.05);
}

/* Album tags */
.nigun-modal-hero-albums {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.album-tag {
    background: var(--color-album);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 131, 143, 0.3);
}

.album-tag:hover {
    background: var(--color-album-dark);
    transform: scale(1.05);
}

/* Document tags */
.nigun-modal-hero-documents {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.document-tag {
    background: var(--color-document);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 160, 176, 0.3);
}

.document-tag:hover {
    background: var(--color-document-dark);
    transform: scale(1.05);
}

/* Resources tags */
.nigun-modal-hero-resources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.resource-tag {
    background: #1976D2;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.resource-tag:hover {
    background: #1565C0;
    transform: scale(1.05);
}

/* Credits - small and subtle at bottom */
.nigun-credits-section {
    margin-top: auto;
    width: 100%;
    padding-top: 20px;
}

.nigun-credits-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 0 20px;
}

.nigun-credits-divider::before,
.nigun-credits-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(128, 128, 128, 0.2);
}

.nigun-credits-divider-text {
    font-size: 0.65em;
    color: var(--text-tertiary, #999);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    opacity: 0.7;
}

.nigun-credits {
    text-align: center;
    font-size: 0.7em;
    color: var(--text-secondary);
    opacity: 0.6;
    padding: 4px 20px 12px;
    font-style: italic;
}

.nigun-credits a {
    color: var(--text-secondary);
    text-decoration: underline;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.nigun-credits a:hover {
    opacity: 1;
}

/* Mechaber profiles container */
.nigun-modal-hero-mechabrim {
    position: absolute;
    top: 0;
    left: 25px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    z-index: 15;
}

/* Mechaber profile - one unified box */
.nigun-modal-mechaber-profile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    background: var(--color-mechaber);
    padding: 28px 10px 5px 10px;
    border-radius: 0 0 10px 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    transform-origin: top center;
    margin-bottom: -15px;
    max-height: 115px;
    min-width: 85px;
    max-width: 110px;
    overflow: visible;
}

.nigun-modal-mechaber-profile:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(156, 91, 181, 0.3);
}

/* When no mechaber, center the title fully */
.nigun-modal-hero.no-mechaber .nigun-modal-hero-title {
    padding: 0 25px;
}

.nigun-modal-mechaber-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    border: 2px solid white;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0 -5px 5px -5px;
}


.nigun-modal-mechaber-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nigun-modal-mechaber-avatar .placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-mechaber-pale) 0%, var(--color-mechaber-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em;
    color: var(--color-mechaber);
}

.nigun-modal-mechaber-avatar .placeholder .mechaber-icon {
    width: 20px;
    height: 30px;
    background-color: var(--color-mechaber);
    -webkit-mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
    mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
}

.nigun-modal-mechaber-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 9px;
    font-weight: 600;
    color: white;
    padding: 2px 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    text-decoration: none;
    text-align: center;
    width: max-content;
    max-width: 100px;
}

.nigun-modal-mechaber-name .mechaber-formal {
    display: none;
}

.nigun-modal-mechaber-name .mechaber-known {
    font-size: 10px !important;
    text-wrap: balance;
    line-height: 1.15;
}

.nigun-modal-mechaber-name:hover {
    opacity: 0.85;
}

@media (max-width: 600px) {
    /* Keep the hero flush to the modal top. The page wrapper's 10px top padding
       plus the hero's negative top margin can leave a pale strip on browsers
       that don't pull a sticky element up over the padding (e.g. iOS Safari). */
    .nigun-modal-content .nigun-detail-page {
        padding-top: 0;
    }

    /* The title's huge side padding (0 160px) — there to clear the mechaber
       card — squeezes it to one letter per line on a narrow screen. Remove the
       padding so the title runs full width, and render the mechaber as a small
       pill straddling the bottom edge of the header instead of a card. */
    .nigun-modal-hero {
        flex-direction: column;
        gap: 6px;
        padding: 18px 14px 22px;
        margin-bottom: 40px;
    }

    .nigun-modal-hero-title {
        padding: 0 !important;
        font-size: 1.4em;
    }

    /* Mechaber pill on the bottom border of the header */
    .nigun-modal-hero-mechabrim {
        position: absolute;
        top: auto;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        justify-content: center;
        margin: 0;
        max-width: 90%;
        z-index: 16;
    }

    .nigun-modal-mechaber-profile {
        flex-direction: row;
        align-items: center;
        gap: 7px;
        padding: 4px 14px 4px 4px;
        border-radius: 50px;
        background: var(--color-mechaber);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
        margin: 0;
        max-height: none;
        min-width: 0;
        max-width: 100%;
    }

    .nigun-modal-mechaber-avatar {
        width: 30px;
        height: 30px;
        margin: 0;
        border-width: 2px;
    }

    .nigun-modal-mechaber-name {
        flex-direction: row;
        font-size: 11px;
        padding: 0;
        min-width: 0;
        max-width: 55vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
}

@media (max-width: 600px) {
    .nigun-modal {
        max-height: 90vh;
        border-radius: 16px;
    }

    .nigun-modal-body {
        padding: 15px;
    }
}

/* Dynamic divider between hero bottom sections */
.nigun-modal-hero-bottom>*:not(:empty)~*:not(:empty)::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-nigun);
    opacity: 0.6;
    margin: auto 4px;
    flex-shrink: 0;
}
/* Generic Detail Modal Overlay - matches nigun modal */
.detail-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px 20px 120px 20px;
    /* No overflow-y on the overlay (matches the nigun modal): the fixed-height
       content scrolls internally. With align-items:center, an overlay scroll
       container would push a too-tall modal's top off-screen and out of reach. */
    overscroll-behavior: contain;
}

.detail-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.detail-modal-content {
    background: white;
    border-radius: 20px;
    max-width: 850px;
    width: 100%;
    height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    position: relative;
    transform: scale(0.9) translateY(30px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    border: 3px solid var(--color-mechaber);
    padding-bottom: 20px;
}

.detail-modal-overlay.active .detail-modal-content {
    transform: scale(1) translateY(0);
}

/* Expand to full page animation */
@keyframes expandToFullPage {
    0% {
        transform: scale(1) translateY(0);
        border-radius: 20px;
    }

    100% {
        transform: scale(1.3);
        border-radius: 0;
        opacity: 0;
    }
}

.detail-modal-content.expanding {
    animation: expandToFullPage 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.detail-modal-overlay.expanding {
    animation: fadeOut 0.4s ease forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Theme-specific border colors */
.detail-modal-content.theme-mechaber {
    border-color: var(--color-mechaber);
}

.detail-modal-content.theme-chatzer {
    border-color: var(--color-chatzer);
}

.detail-modal-content.theme-verter {
    border-color: var(--color-verter);
}

.detail-modal-content.theme-zman {
    border-color: var(--color-zman);
}

.detail-modal-content.theme-piyut {
    border-color: var(--color-piyut);
}

.detail-modal-content.theme-playlist {
    border-color: var(--color-playlist);
}

.detail-modal-content.theme-collection {
    border-color: var(--color-collection);
}

.detail-modal-content.theme-album {
    border-color: var(--color-album);
}

.detail-modal-content.theme-document {
    border-color: var(--color-document);
}

.detail-modal-content.theme-resource {
    border-color: var(--color-resource);
}

/* Minimal scrollbar for detail modal - matches nigun modal */
.detail-modal-content::-webkit-scrollbar {
    width: 8px;
    margin-right: -10px;
}

.detail-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.detail-modal-content::-webkit-scrollbar-thumb {
    background: var(--color-mechaber);
    border-radius: 10px;
}

.detail-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-mechaber-dark);
}

.detail-modal-content::-webkit-scrollbar-button {
    display: none;
}

/* Firefox scrollbar */
.detail-modal-content {
    scrollbar-width: thin;
    scrollbar-color: var(--color-mechaber) transparent;
}

/* Theme-specific scrollbar colors */
.detail-modal-content.theme-chatzer {
    scrollbar-color: var(--color-chatzer) transparent;
}

.detail-modal-content.theme-chatzer::-webkit-scrollbar-thumb {
    background: var(--color-chatzer);
}

.detail-modal-content.theme-chatzer::-webkit-scrollbar-thumb:hover {
    background: var(--color-chatzer-dark);
}

.detail-modal-content.theme-verter {
    scrollbar-color: var(--color-verter) transparent;
}

.detail-modal-content.theme-verter::-webkit-scrollbar-thumb {
    background: var(--color-verter);
}

.detail-modal-content.theme-verter::-webkit-scrollbar-thumb:hover {
    background: var(--color-verter-dark);
}

.detail-modal-content.theme-zman {
    scrollbar-color: var(--color-zman) transparent;
}

.detail-modal-content.theme-zman::-webkit-scrollbar-thumb {
    background: var(--color-zman);
}

.detail-modal-content.theme-zman::-webkit-scrollbar-thumb:hover {
    background: var(--color-zman-dark);
}

/* Piyyutim Scrollbar & Shadow */
.detail-modal-content.theme-piyut {
    scrollbar-color: var(--color-piyut) transparent;
    box-shadow: 0 0 0 3px rgba(46, 139, 46, 0.3), 0 25px 80px rgba(46, 139, 46, 0.35);
}

.detail-modal-content.theme-piyut::-webkit-scrollbar-thumb {
    background: var(--color-piyut);
}

.detail-modal-content.theme-piyut::-webkit-scrollbar-thumb:hover {
    background: var(--color-piyut-dark);
}

/* Resources Scrollbar & Shadow */
.detail-modal-content.theme-resource {
    scrollbar-color: var(--color-resource) transparent;
    box-shadow: 0 0 0 3px rgba(91, 192, 222, 0.3), 0 25px 80px rgba(91, 192, 222, 0.35);
}

.detail-modal-content.theme-resource::-webkit-scrollbar-thumb {
    background: var(--color-resource);
}

.detail-modal-content.theme-resource::-webkit-scrollbar-thumb:hover {
    background: var(--color-resource-dark);
}

/* Album Scrollbar */
.detail-modal-content.theme-album {
    scrollbar-color: var(--color-album) transparent;
}

.detail-modal-content.theme-album::-webkit-scrollbar-thumb {
    background: var(--color-album);
}

.detail-modal-content.theme-album::-webkit-scrollbar-thumb:hover {
    background: var(--color-album-dark);
}

/* Document Scrollbar */
.detail-modal-content.theme-document {
    scrollbar-color: var(--color-document) transparent;
}

.detail-modal-content.theme-document::-webkit-scrollbar-thumb {
    background: var(--color-document);
}

.detail-modal-content.theme-document::-webkit-scrollbar-thumb:hover {
    background: var(--color-document-dark);
}

/* Playlist Scrollbar */
.detail-modal-content.theme-playlist {
    scrollbar-color: var(--color-playlist) transparent;
}

.detail-modal-content.theme-playlist::-webkit-scrollbar-thumb {
    background: var(--color-playlist);
}

.detail-modal-content.theme-playlist::-webkit-scrollbar-thumb:hover {
    background: var(--color-playlist-dark, var(--color-playlist));
}

/* Collection Scrollbar */
.detail-modal-content.theme-collection {
    scrollbar-color: var(--color-collection) transparent;
}

.detail-modal-content.theme-collection::-webkit-scrollbar-thumb {
    background: var(--color-collection);
}

.detail-modal-content.theme-collection::-webkit-scrollbar-thumb:hover {
    background: var(--color-collection-dark, var(--color-collection));
}

/* Close button - OUTSIDE the card, on the wrapper (matches nigun modal) */
.detail-modal-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    font-size: 1.8em;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    transition: all 0.25s ease, opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: scale(0.3);
}

.detail-modal-overlay.active .detail-modal-close {
    opacity: 1;
    transform: scale(1);
}

.detail-modal-close:hover {
    background: #f5f5f5;
    color: #333;
    transform: scale(1.15);
}

/* Wrapper for modal content + close button */
.detail-modal-wrapper {
    position: relative;
    max-width: 850px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Edit (pencil) button - absolute positioning at top-left, matches nigun modal */
.detail-modal-edit-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1002;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
}

.detail-modal-edit-btn:hover {
    background: white;
    color: var(--modal-color, #1565c0);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.detail-modal-edit-btn.edit-active {
    background: var(--modal-color, #1565c0);
    color: white;
}

/* Touch: the edit button is hidden until the 3-dot menu is opened (it then
   appears in its place, above the trigger). */
@media (hover: none) {
    .detail-modal-edit-btn {
        display: none;
    }

    .detail-modal-edit-btn.more-edit-visible {
        display: flex;
    }
}

/* More-trigger container (matches nigun modal) */
.detail-modal-more {
    position: absolute;
    top: 60px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 20;
}

.detail-modal-more-trigger {
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    font-size: 1.3em;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 20;
    transition: all 0.25s ease;
    position: relative;
}

.detail-modal-more-trigger .more-dots {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.detail-modal-more-trigger .more-expand-icon {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    transition: opacity 0.25s ease, transform 0.25s ease;
    color: #666;
}

/* Morph: dots fade out, expand icon rotates in — stays while dropdown visible */
.detail-modal-more:hover .detail-modal-more-trigger .more-dots,
.detail-modal-more:focus-within .detail-modal-more-trigger .more-dots {
    opacity: 0;
    transform: scale(0.3) rotate(90deg);
}

.detail-modal-more:hover .detail-modal-more-trigger .more-expand-icon,
.detail-modal-more:focus-within .detail-modal-more-trigger .more-expand-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Touch devices: a tap opens the options (it doesn't expand to a full page),
   so keep the dots rather than morphing to the expand icon. */
@media (hover: none) {
    .detail-modal-more:hover .detail-modal-more-trigger .more-dots,
    .detail-modal-more:focus-within .detail-modal-more-trigger .more-dots {
        opacity: 1;
        transform: none;
    }

    .detail-modal-more:hover .detail-modal-more-trigger .more-expand-icon,
    .detail-modal-more:focus-within .detail-modal-more-trigger .more-expand-icon {
        opacity: 0;
    }
}

/* Color/scale effects only when directly hovering the trigger button */
.detail-modal-more-trigger:hover {
    background: var(--primary-pale);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

.detail-modal-more-trigger:hover .more-expand-icon {
    color: var(--primary-dark, var(--primary));
}

/* Dropdown that appears on hover - staggered cascade */
.detail-modal-more-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.detail-modal-more:hover .detail-modal-more-dropdown,
.detail-modal-more:focus-within .detail-modal-more-dropdown,
.detail-modal-more.more-open .detail-modal-more-dropdown {
    pointer-events: auto;
}

/* Action buttons in dropdown */
.detail-modal-action-btn {
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    font-size: 1.2em;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 20;
    transition: all 0.25s ease;
    opacity: 0;
    transform: translateY(-8px) scale(0.5);
}

.detail-modal-more:hover .detail-modal-action-btn,
.detail-modal-more:focus-within .detail-modal-action-btn,
.detail-modal-more.more-open .detail-modal-action-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered entry */
.detail-modal-more:hover .detail-modal-action-btn:nth-child(1),
.detail-modal-more:focus-within .detail-modal-action-btn:nth-child(1) {
    transition-delay: 0.03s;
}

.detail-modal-more:hover .detail-modal-action-btn:nth-child(2),
.detail-modal-more:focus-within .detail-modal-action-btn:nth-child(2) {
    transition-delay: 0.06s;
}

.detail-modal-more:hover .detail-modal-action-btn:nth-child(3),
.detail-modal-more:focus-within .detail-modal-action-btn:nth-child(3) {
    transition-delay: 0.09s;
}

.detail-modal-more:hover .detail-modal-action-btn:nth-child(4),
.detail-modal-more:focus-within .detail-modal-action-btn:nth-child(4) {
    transition-delay: 0.12s;
}

.detail-action-copylink:hover {
    background: #fff8e1;
    color: #f9a825;
    transform: scale(1.15);
}

.detail-action-share:hover {
    background: #e8f5e9;
    color: #2e7d32;
    transform: scale(1.15);
}

.detail-action-addinfo {
    font-size: 1.4em;
}

.detail-action-addinfo:hover {
    background: #e3f2fd;
    color: #1565c0;
    transform: scale(1.15);
}

.detail-action-report {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.detail-action-report:hover {
    background: #fff3e0;
    color: #e65100;
    transform: scale(1.15);
}

/* Theme-specific hover colors for trigger */
.theme-mechaber .detail-modal-close:hover,
.theme-mechaber .detail-modal-more-trigger:hover {
    background: var(--color-mechaber-pale);
    color: var(--color-mechaber-dark);
}

.theme-mechaber .detail-modal-more-trigger:hover .more-expand-icon {
    color: var(--color-mechaber-dark);
}

.theme-chatzer .detail-modal-close:hover,
.theme-chatzer .detail-modal-more-trigger:hover {
    background: var(--color-chatzer-pale);
    color: var(--color-chatzer-dark);
}

.theme-chatzer .detail-modal-more-trigger:hover .more-expand-icon {
    color: var(--color-chatzer-dark);
}

.theme-verter .detail-modal-close:hover,
.theme-verter .detail-modal-more-trigger:hover {
    background: var(--color-verter-pale);
    color: var(--color-verter);
}

.theme-verter .detail-modal-more-trigger:hover .more-expand-icon {
    color: var(--color-verter);
}

.theme-zman .detail-modal-close:hover,
.theme-zman .detail-modal-more-trigger:hover {
    background: var(--color-zman-pale);
    color: var(--color-zman-dark);
}

.theme-zman .detail-modal-more-trigger:hover .more-expand-icon {
    color: var(--color-zman-dark);
}

.theme-piyut .detail-modal-close:hover,
.theme-piyut .detail-modal-more-trigger:hover {
    background: var(--color-piyut-pale);
    color: var(--color-piyut-dark);
}

.theme-piyut .detail-modal-more-trigger:hover .more-expand-icon {
    color: var(--color-piyut-dark);
}

.theme-playlist .detail-modal-close:hover,
.theme-playlist .detail-modal-more-trigger:hover {
    background: var(--color-playlist-pale);
    color: var(--color-playlist-dark);
}

.theme-playlist .detail-modal-more-trigger:hover .more-expand-icon {
    color: var(--color-playlist-dark);
}

.theme-collection .detail-modal-close:hover,
.theme-collection .detail-modal-more-trigger:hover {
    background: var(--color-collection-pale);
    color: var(--color-collection-dark);
}

.theme-collection .detail-modal-more-trigger:hover .more-expand-icon {
    color: var(--color-collection-dark);
}

.theme-album .detail-modal-close:hover,
.theme-album .detail-modal-more-trigger:hover {
    background: var(--color-album-pale);
    color: var(--color-album-dark);
}

.theme-album .detail-modal-more-trigger:hover .more-expand-icon {
    color: var(--color-album-dark);
}

.theme-document .detail-modal-close:hover,
.theme-document .detail-modal-more-trigger:hover {
    background: var(--color-document-pale);
    color: var(--color-document-dark);
}

.theme-document .detail-modal-more-trigger:hover .more-expand-icon {
    color: var(--color-document-dark);
}

.theme-resource .detail-modal-close:hover,
.theme-resource .detail-modal-more-trigger:hover {
    background: var(--color-resource-pale);
    color: var(--color-resource-dark);
}

.theme-resource .detail-modal-more-trigger:hover .more-expand-icon {
    color: var(--color-resource-dark);
}

/* Generic Modal Hero Header - matches nigun modal hero */
.modal-hero-wrapper {
    position: relative;
    margin-bottom: 40px;
}

/* Sticky hero header inside detail modal only */
.detail-modal-body .modal-hero-wrapper {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
}

.modal-hero {
    position: relative;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    padding: 30px 25px;
    text-align: center;
    margin: 0 60px 0 60px;
    border-radius: 0 0 20px 20px;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.modal-hero-left {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    z-index: 20;
}

.modal-hero-border-badges {
    position: absolute;
    top: calc(100% - 15px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    max-width: 100%;
}

.modal-hero-border-badges .modal-hero-badges {
    margin-top: 0;
}

.modal-hero-title {
    font-size: 2em;
    font-weight: 700;
    color: white;
    margin: 0;
    font-family: 'Heebo', sans-serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1.3;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Mechaber-specific: add equal padding on both sides for image clearance */
.theme-mechaber .modal-hero-title {
    padding: 0 100px;
    max-width: 100%;
}

/* Phones: stack the detail-modal hero (image on top, full-width title below).
   The desktop layout positions the image absolutely on the left and pads the
   title to clear it; on a narrow screen that padding squeezes the title to one
   letter per line. */
@media (max-width: 600px) {
    /* Name full width on top, dates full width under it; avatar + play shrink
       to small buttons in the top corners (image on the right — the opposite
       side from the 3-dot menu — so it isn't covered). The .modal-hero prefix
       keeps these overriding the base rules that follow later in the file. */
    .modal-hero {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin: 0 8px;
        /* top padding leaves room for the small corner avatar/play so the
           full-width name sits cleanly below them */
        padding: 48px 14px 12px;
        gap: 2px;
        min-height: 0;
    }

    /* Big gap under the header on mobile was "too much padding after" it. */
    .modal-hero-wrapper {
        margin-bottom: 14px;
    }

    .modal-hero .modal-hero-left {
        position: static;
        /* Clear the base translateY so this stops being the containing block
           for the absolutely-positioned avatar (which kept it pinned here). */
        transform: none;
        order: 2;
        width: 100%;
        align-items: center;
        gap: 2px;
        margin: 0;
    }

    /* Avatar — small, top-right corner */
    .modal-hero .modal-hero-avatar {
        position: absolute;
        top: 8px;
        right: 12px;
        left: auto;
        width: 40px;
        height: 40px;
        border-width: 2px;
        align-self: auto;
        margin: 0;
    }

    /* Play-all — small, top-left corner */
    .modal-hero .play-all-btn {
        top: 8px;
        left: 12px;
        right: auto;
        transform: none;
        width: 36px;
        height: 36px;
    }

    .modal-hero .play-all-btn:hover {
        transform: scale(1.05);
    }

    /* Name — full width, on top */
    .modal-hero .modal-hero-text {
        order: 1;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .modal-hero .modal-hero-title,
    .theme-mechaber .modal-hero-title {
        padding: 0;
        width: 100%;
        font-size: 1.4em;
        line-height: 1.25;
        text-align: center;
    }

    /* Dates — full width, under the name */
    .modal-hero .modal-hero-dates,
    .modal-hero .modal-hero-subtitle {
        width: 100%;
        text-align: center;
        font-size: 0.78em;
    }
}

.modal-hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.modal-hero-subtitle {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.modal-hero-dates {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    margin-top: 2px;
    text-align: center;
}

.modal-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}

/* Meta section under hero (dates + badges) */
.modal-meta-section {
    background: var(--bg-light);
    padding: 15px 25px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.modal-meta-dates {
    font-size: 0.95em;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 10px;
}

.modal-meta-section .modal-hero-badges {
    justify-content: center;
}

/* Profile avatar in modal hero */
.modal-hero-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    border: 4px solid white;
    overflow: visible;
    flex-shrink: 0;
    position: relative;
    align-self: flex-end;
}

.modal-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Album cover in modal hero — square instead of round */
.modal-hero-avatar.album-cover-avatar {
    border-radius: 12px;
}

.modal-hero-avatar.album-cover-avatar img {
    border-radius: 8px;
}

.modal-hero-avatar .placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-mechaber-pale) 0%, var(--color-mechaber-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.modal-hero-avatar .placeholder .mechaber-icon {
    width: 65px;
    height: 65px;
    background-color: var(--color-mechaber);
    -webkit-mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
    mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
}

/* Theme-specific hero colors */
.modal-hero.theme-mechaber {
    background: linear-gradient(135deg, var(--color-mechaber) 0%, var(--color-mechaber-dark) 100%);
}

.modal-hero.theme-chatzer {
    background: linear-gradient(135deg, var(--color-chatzer) 0%, var(--color-chatzer-dark) 100%);
}

.modal-hero.theme-verter {
    background: linear-gradient(135deg, var(--color-verter) 0%, var(--color-verter-dark) 100%);
}

.modal-hero.theme-zman {
    background: linear-gradient(135deg, var(--color-zman) 0%, var(--color-zman-dark) 100%);
}

.modal-hero.theme-piyut {
    background: linear-gradient(135deg, var(--color-piyut) 0%, var(--color-piyut-dark) 100%);
}

.modal-hero.theme-playlist {
    background: linear-gradient(135deg, var(--color-playlist) 0%, var(--color-playlist-dark) 100%);
}

.modal-hero.theme-collection {
    background: linear-gradient(135deg, var(--color-collection) 0%, var(--color-collection-dark) 100%);
}

.modal-hero.theme-album {
    background: linear-gradient(135deg, var(--color-album) 0%, var(--color-album-dark) 100%);
}

.modal-hero.theme-document {
    background: linear-gradient(135deg, var(--color-document) 0%, var(--color-document-dark) 100%);
}

.modal-hero.theme-resource {
    background: linear-gradient(135deg, var(--color-resource) 0%, var(--color-resource-dark) 100%);
}

.modal-body-content {
    padding: 20px;
    background: white;
}

.modal-body-content .detail-page {
    padding: 0 !important;
}

/* Hide back button in modal context */
.detail-modal-body .back-button,
#detailModalBody .back-button {
    display: none !important;
}

.detail-modal-body,
#detailModalBody {
    padding: 0;
    overflow-x: clip;
}

/* Reset detail-page viewport-based calculations inside modal */
.detail-modal-body .detail-page,
#detailModalBody .detail-page {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background: none !important;
    min-height: auto !important;
}

/* Ensure all content respects container width */
.detail-modal-body *,
#detailModalBody * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix image sizing in modal */
.detail-modal-body .detail-image,
#detailModalBody .detail-image {
    max-width: 150px !important;
    height: auto !important;
}

/* Style detail-description-section in modal like nigun-additions-box */
.detail-modal-body .detail-description-section,
#detailModalBody .detail-description-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px 20px 15px 20px;
    background: var(--color-mechaber-pale); /* Fallback */
    border-radius: 12px;
    margin: 25px auto 20px auto;
    max-width: 600px;
    position: relative;
    border: 1.5px solid var(--color-mechaber-dark); /* Fallback */
    box-shadow: none;
}

#detailModalBody .detail-description-section h3 {
    font-size: 0;
    color: transparent;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--color-mechaber); /* Fallback */
    border-radius: 50%;
    margin: -36px 0 10px 0;
    border: 3px solid white;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
    transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-radius 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                padding 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                font-size 0.22s ease,
                color 0.22s ease,
                box-shadow 0.25s ease;
}

#detailModalBody .detail-description-section h3::before {
    content: "i";
    font-size: 1.1rem;
    font-weight: bold;
    font-style: italic;
    color: white;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.18s ease, transform 0.22s ease;
}

#detailModalBody .detail-description-section h3:hover {
    width: max-content;
    padding: 0 14px;
    border-radius: 16px;
    font-size: 0.78rem;
    color: white;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

#detailModalBody .detail-description-section h3:hover::before {
    opacity: 0;
    transform: scale(0.5);
}

#detailModalBody .detail-description-section .detail-description-content {
    font-size: 0.9em;
    color: var(--text-dark);
    line-height: 1.6;
    text-align: right;
}

#detailModalBody .detail-description-section .description-fade-overlay {
    background: linear-gradient(to bottom, transparent, var(--color-mechaber-pale)); /* Fallback */
}

/* Theme overrides for detail-description-section */
.theme-mechaber .detail-description-section { background: var(--color-mechaber-pale) !important; border-color: var(--color-mechaber-dark) !important; }
.theme-mechaber .detail-description-section h3 { background: var(--color-mechaber) !important; }
.theme-mechaber .detail-description-section .description-fade-overlay { background: linear-gradient(to bottom, transparent, var(--color-mechaber-pale)) !important; }

.theme-chatzer .detail-description-section { background: var(--color-chatzer-pale) !important; border-color: var(--color-chatzer-dark) !important; }
.theme-chatzer .detail-description-section h3 { background: var(--color-chatzer) !important; }
.theme-chatzer .detail-description-section .description-fade-overlay { background: linear-gradient(to bottom, transparent, var(--color-chatzer-pale)) !important; }

.theme-verter .detail-description-section { background: var(--color-verter-pale) !important; border-color: var(--color-verter-dark) !important; }
.theme-verter .detail-description-section h3 { background: var(--color-verter) !important; }
.theme-verter .detail-description-section .description-fade-overlay { background: linear-gradient(to bottom, transparent, var(--color-verter-pale)) !important; }

.theme-zman .detail-description-section { background: var(--color-zman-pale) !important; border-color: var(--color-zman-dark) !important; }
.theme-zman .detail-description-section h3 { background: var(--color-zman) !important; }
.theme-zman .detail-description-section .description-fade-overlay { background: linear-gradient(to bottom, transparent, var(--color-zman-pale)) !important; }

.theme-piyut .detail-description-section { background: var(--color-piyut-pale) !important; border-color: var(--color-piyut-dark) !important; }
.theme-piyut .detail-description-section h3 { background: var(--color-piyut) !important; }
.theme-piyut .detail-description-section .description-fade-overlay { background: linear-gradient(to bottom, transparent, var(--color-piyut-pale)) !important; }

.theme-playlist .detail-description-section { background: var(--color-playlist-pale) !important; border-color: var(--color-playlist-dark) !important; }
.theme-playlist .detail-description-section h3 { background: var(--color-playlist) !important; }
.theme-playlist .detail-description-section .description-fade-overlay { background: linear-gradient(to bottom, transparent, var(--color-playlist-pale)) !important; }

.theme-collection .detail-description-section { background: var(--color-collection-pale) !important; border-color: var(--color-collection-dark) !important; }
.theme-collection .detail-description-section h3 { background: var(--color-collection) !important; }
.theme-collection .detail-description-section .description-fade-overlay { background: linear-gradient(to bottom, transparent, var(--color-collection-pale)) !important; }

.theme-album .detail-description-section { background: var(--color-album-pale) !important; border-color: var(--color-album-dark) !important; }
.theme-album .detail-description-section h3 { background: var(--color-album) !important; }
.theme-album .detail-description-section .description-fade-overlay { background: linear-gradient(to bottom, transparent, var(--color-album-pale)) !important; }

.theme-document .detail-description-section { background: var(--color-document-pale) !important; border-color: var(--color-document-dark) !important; }
.theme-document .detail-description-section h3 { background: var(--color-document) !important; }
.theme-document .detail-description-section .description-fade-overlay { background: linear-gradient(to bottom, transparent, var(--color-document-pale)) !important; }

.theme-resource .detail-description-section { background: var(--color-resource-pale) !important; border-color: var(--color-resource-dark) !important; }
.theme-resource .detail-description-section h3 { background: var(--color-resource) !important; }
.theme-resource .detail-description-section .description-fade-overlay { background: linear-gradient(to bottom, transparent, var(--color-resource-pale)) !important; }

@media (max-width: 600px) {
    .detail-modal-content {
        /* 80vh (same as the nigun modal) so it fits within the overlay's
           top/bottom padding and the header stays on-screen. */
        height: 80vh;
        border-radius: 16px;
    }
}
/* Streaming ball button - expands on hover */
.stream-ball-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: transparent;
    border: 2px solid #9c5bb5;
    border-radius: 16px;
    text-decoration: none;
    color: #9c5bb5;
    transition: all 0.3s ease;
    overflow: hidden;
    cursor: pointer;
}

.stream-dot {
    width: 6px;
    height: 6px;
    background: var(--gradient-main);
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.stream-text-new {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s ease;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stream-ball-btn:hover {
    padding: 6px 12px;
    gap: 5px;
    background: rgba(156, 91, 181, 0.05);
}

.stream-ball-btn:hover .stream-text-new {
    max-width: 80px;
    opacity: 1;
    margin-left: 4px;
}

/* Navigation - Clean Layout */
.main-nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.nav-btn {
    padding: 10px 24px;
    background: var(--color-nigun);
    border: none;
    border-radius: 30px;
    font-size: 1.05em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    color: white;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(74, 124, 201, 0.35);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

.nav-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(74, 124, 201, 0.5);
}

/* Nav Ball - icon circle that expands to show label on hover. Unified width version. */
.nav-ball {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    padding: 0 12px;
    background: white;
    border: 2px solid transparent;
    text-decoration: none;
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                padding 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.3s ease,
                background 0.3s ease,
                color 0.3s ease,
                transform 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Hover bridge to eliminate dead zones between items */
.nav-ball::after,
.nav-dropdown-btn::after {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -18px;
    right: -18px;
    z-index: 10;
}

.nav-ball-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-ball-text {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 1.05em;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-15px);
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease,
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-ball:hover {
    width: 130px;
    padding: 0 16px;
}

/* Active ball (current page) gets white border to stand out on colored backgrounds */
.nav-ball.active-ball {
    border-color: white;
}

/* Keep docs ball expanded when dropdown is hovered */
.nav-dropdown:hover .nav-ball.nav-ball-docs {
    width: 160px;
    padding: 0 16px;
}
.nav-dropdown:hover .nav-ball.nav-ball-docs .nav-ball-icon {
    opacity: 0;
    transform: translateX(20px) scale(0.8);
    pointer-events: none;
}
.nav-dropdown:hover .nav-ball.nav-ball-docs .nav-ball-text {
    max-width: 130px;
    opacity: 1;
    transform: translateX(0);
}

/* Docs ball expands wider for longer text */
.nav-ball.nav-ball-docs:hover {
    width: 160px;
}
.nav-ball.nav-ball-docs:hover .nav-ball-text {
    max-width: 130px;
}

.nav-ball:hover .nav-ball-icon {
    opacity: 0;
    transform: translateX(20px) scale(0.8);
    pointer-events: none;
}

.nav-ball:hover .nav-ball-text {
    max-width: 100px;
    opacity: 1;
    transform: translateX(0);
}

/* Nigunim ball - always expanded by default */
.nav-ball-nigunim {
    border: 2px solid var(--color-nigun);
    color: var(--color-nigun);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-nigun) 20%, transparent);
    /* Always expanded */
    width: 130px;
    padding: 0 16px;
}
.nav-ball-nigunim .nav-ball-icon {
    opacity: 0;
    transform: translateX(20px) scale(0.8);
    pointer-events: none;
}
.nav-ball-nigunim .nav-ball-text {
    max-width: 100px;
    opacity: 1;
    transform: translateX(0);
}
.nav-ball-nigunim:hover {
    background: var(--color-nigun-pale);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-nigun) 35%, transparent);
}
.nav-ball-nigunim.active-ball {
    background: var(--color-nigun);
    color: white;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-nigun) 50%, transparent);
}

/* Collapse nigunim when hovering a different ball or the dropdown */
.main-nav:has(.nav-ball:not(.nav-ball-nigunim):hover) .nav-ball-nigunim:not(:hover),
.main-nav:has(.nav-dropdown:hover) .nav-ball-nigunim:not(:hover) {
    width: 44px !important;
    padding: 0 12px !important;
}
.main-nav:has(.nav-ball:not(.nav-ball-nigunim):hover) .nav-ball-nigunim:not(:hover) .nav-ball-text,
.main-nav:has(.nav-dropdown:hover) .nav-ball-nigunim:not(:hover) .nav-ball-text {
    max-width: 0 !important;
    opacity: 0 !important;
    transform: translateX(-15px) !important;
}
.main-nav:has(.nav-ball:not(.nav-ball-nigunim):hover) .nav-ball-nigunim:not(:hover) .nav-ball-icon,
.main-nav:has(.nav-dropdown:hover) .nav-ball-nigunim:not(:hover) .nav-ball-icon {
    opacity: 1 !important;
    transform: scale(1) translateX(0) !important;
    pointer-events: auto !important;
}

/* Double size for mechaber icon */
.nav-ball-mechaber .nav-ball-icon {
    transform: scale(1.6);
}
.nav-ball-mechaber:hover .nav-ball-icon {
    transform: translateX(20px) scale(0.9);
    opacity: 0;
}

/* Nav ball color variants */
.nav-ball-mechaber {
    border: 2px solid var(--color-mechaber);
    color: var(--color-mechaber);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-mechaber) 20%, transparent);
}
.nav-ball-mechaber:hover {
    background: var(--color-mechaber-pale);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-mechaber) 35%, transparent);
}
.nav-ball-mechaber.active-ball {
    background: var(--color-mechaber);
    color: white;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-mechaber) 50%, transparent);
}

.nav-ball-chatzer {
    border: 2px solid var(--color-chatzer);
    color: var(--color-chatzer);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-chatzer) 20%, transparent);
}
.nav-ball-chatzer:hover {
    background: var(--color-chatzer-pale);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-chatzer) 35%, transparent);
}
.nav-ball-chatzer.active-ball {
    background: var(--color-chatzer);
    color: white;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-chatzer) 50%, transparent);
}

.nav-ball-verter {
    border: 2px solid var(--color-verter);
    color: var(--color-verter);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-verter) 20%, transparent);
}
.nav-ball-verter:hover {
    background: var(--color-verter-pale);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-verter) 35%, transparent);
}
.nav-ball-verter.active-ball {
    background: var(--color-verter);
    color: white;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-verter) 50%, transparent);
}

.nav-ball-music {
    border: 2px solid var(--color-music);
    color: var(--color-music);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-music) 20%, transparent);
}
.nav-ball-music:hover {
    background: var(--color-music-pale);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-music) 35%, transparent);
}
.nav-ball-music.active-ball {
    background: var(--color-music);
    color: white;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-music) 50%, transparent);
}

.nav-ball-zman {
    border: 2px solid var(--color-zman);
    color: var(--color-zman);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-zman) 20%, transparent);
}
.nav-ball-zman:hover {
    background: var(--color-zman-pale);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-zman) 35%, transparent);
}
.nav-ball-zman.active-ball {
    background: var(--color-zman);
    color: white;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-zman) 50%, transparent);
}

.nav-ball-playlist {
    border: 2px solid var(--color-playlist);
    color: var(--color-playlist);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-playlist) 20%, transparent);
}
.nav-ball-playlist:hover {
    background: var(--color-playlist-pale);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-playlist) 35%, transparent);
}
.nav-ball-playlist.active-ball {
    background: var(--color-playlist);
    color: white;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-playlist) 50%, transparent);
}

.nav-ball-collection {
    border: 2px solid var(--color-collection);
    color: var(--color-collection);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-collection) 20%, transparent);
}
.nav-ball-collection:hover {
    background: var(--color-collection-pale);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-collection) 35%, transparent);
}
.nav-ball-collection.active-ball {
    background: var(--color-collection);
    color: white;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-collection) 50%, transparent);
}

.nav-ball-piyut {
    border: 2px solid var(--color-piyut);
    color: var(--color-piyut);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-piyut) 20%, transparent);
}
.nav-ball-piyut:hover {
    background: var(--color-piyut-pale);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-piyut) 35%, transparent);
}
.nav-ball-piyut.active-ball {
    background: var(--color-piyut);
    color: white;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-piyut) 50%, transparent);
}

.nav-ball-docs {
    border: 2px solid var(--color-document);
    color: var(--color-document);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-document) 20%, transparent);
}
.nav-ball-docs:hover,
.nav-dropdown:hover .nav-ball-docs {
    background: var(--color-document-pale);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-document) 35%, transparent);
}
.nav-ball-docs.active-ball {
    background: var(--color-document);
    color: white;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-document) 50%, transparent);
}

.nav-dropdown {
    position: relative;
}

/* Dropdown button style (used for דאקומענטאציע) */
.nav-dropdown-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 25px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.nav-dropdown-btn .nav-arrow {
    font-size: 1.1em;
    opacity: 0.6;
    transition: transform 0.3s ease;
}

.nav-dropdown:hover .nav-dropdown-btn .nav-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-btn.nav-docs {
    background: white;
    color: var(--color-document);
    border: 2px solid var(--color-document);
    box-shadow: 0 2px 8px rgba(0, 160, 176, 0.2);
    border-radius: 10px;
    padding: 6px 12px;
    gap: 3px;
    font-size: 0.82em;
}

.nav-dropdown-btn.nav-docs:hover,
.nav-dropdown:hover .nav-dropdown-btn.nav-docs {
    background: var(--color-document-pale);
    transform: translateY(3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 160, 176, 0.4);
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    min-width: 160px;
    z-index: 100;
    overflow: visible;
    padding-top: 12px;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* Bridge between button and dropdown to prevent losing hover */
.nav-dropdown-content::before {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    left: -20px;
    height: 15px;
    pointer-events: none;
}

.nav-dropdown-content .dropdown-inner {
    background: transparent;
    border-radius: 16px;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

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

/* Keep dropdown open when hovering anywhere in the dropdown area */
.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

/* Parent button stays in hover state when dropdown is open */
/* Individual button hover styles handle the transform */

.nav-dropdown-content.hiding {
    display: none !important;
}

/* Beautiful dropdown items - each as separate white card */
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9em;
    font-weight: 500;
    background: white;
    text-decoration: none;
    color: var(--text-dark);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: itemDropIn 0.35s ease-out forwards;
    border: none;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Staggered animation delays - items come in one by one */
.nav-dropdown-item:nth-child(1) {
    animation-delay: 0s;
}

.nav-dropdown-item:nth-child(2) {
    animation-delay: 0.08s;
}

.nav-dropdown-item:nth-child(3) {
    animation-delay: 0.16s;
}

.nav-dropdown-item:nth-child(4) {
    animation-delay: 0.24s;
}

.nav-dropdown-item:nth-child(5) {
    animation-delay: 0.32s;
}

.nav-dropdown-item:nth-child(6) {
    animation-delay: 0.4s;
}

@keyframes itemDropIn {
    from {
        opacity: 0;
        transform: translateY(-15px) scale(0.9);
    }

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

.nav-dropdown-item:hover {
    transform: translateX(-4px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Color indicator dot */
.nav-dropdown-item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Stars need bigger size */
.nav-dropdown-item[data-dest="resources"]::before,
.nav-dropdown-item[data-dest="albums"]::before,
.nav-dropdown-item[data-dest="documents"]::before,
.nav-dropdown-item[data-dest="info"]::before {
    width: 14px;
    height: 14px;
}

.nav-dropdown-item:hover::before {
    transform: scale(1.3);
}

.nav-dropdown-item[data-dest="home"]::before {
    background: var(--color-nigun);
}

.nav-dropdown-item[data-dest="nigunim"]::before {
    background: var(--color-nigun);
}

.nav-dropdown-item[data-dest="mechabrim"]::before {
    background: var(--color-mechaber);
}

.nav-dropdown-item[data-dest="chatzeros"]::before {
    background: var(--color-chatzer);
}

.nav-dropdown-item[data-dest="verter"]::before {
    background: var(--color-verter);
    border-radius: 2px;
    /* Square shape */
}

.nav-dropdown-item[data-dest="zmanim"]::before {
    background: var(--color-zman);
    border-radius: 0;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    /* Play triangle - RTL direction */
}

.nav-dropdown-item[data-dest="rhythm"]::before {
    background: var(--color-music);
    border-radius: 2px;
    /* Square shape like verter */
}

.nav-dropdown-item[data-dest="playlists"]::before {
    background: var(--color-playlist);
    border-radius: 0;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    /* Play triangle - RTL direction */
}

.nav-dropdown-item[data-dest="piyutim"]::before {
    background: var(--color-piyut);
    border-radius: 0;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    /* Play triangle - RTL direction */
}

.nav-dropdown-item[data-dest="resources"]::before {
    background: var(--color-resource);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    /* Star */
    border-radius: 0;
}

.nav-dropdown-item[data-dest="albums"]::before {
    background: var(--color-album);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    /* Star */
    border-radius: 0;
}

.nav-dropdown-item[data-dest="documents"]::before {
    background: var(--color-document);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    /* Star */
    border-radius: 0;
}

.nav-dropdown-item[data-dest="info"]::before {
    background: #999;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    /* Star */
    border-radius: 0;
}

/* Navigation items text colors on hover */
.nav-dropdown-item[data-dest="nigunim"]:hover {
    color: var(--color-nigun-dark);
    background: var(--color-nigun-pale);
}

.nav-dropdown-item[data-dest="mechabrim"]:hover {
    color: var(--color-mechaber-dark);
    background: var(--color-mechaber-pale);
}

.nav-dropdown-item[data-dest="chatzeros"]:hover {
    color: var(--color-chatzer-dark);
    background: var(--color-chatzer-pale);
}

.nav-dropdown-item[data-dest="verter"]:hover {
    color: var(--color-verter-dark);
    background: var(--color-verter-pale);
}

.nav-dropdown-item[data-dest="zmanim"]:hover {
    color: var(--color-zman-dark);
    background: var(--color-zman-pale);
}

.nav-dropdown-item[data-dest="rhythm"]:hover {
    color: var(--color-music-dark);
    background: var(--color-music-pale);
}

.nav-dropdown-item[data-dest="playlists"]:hover {
    color: var(--color-playlist-dark);
    background: var(--color-playlist-pale);
}

.nav-dropdown-item[data-dest="piyutim"]:hover {
    color: var(--color-piyut-dark);
    background: var(--color-piyut-pale);
}

.nav-dropdown-item[data-dest="resources"]:hover {
    color: var(--color-resource-dark);
    background: var(--color-resource-pale);
}

.nav-dropdown-item[data-dest="albums"]:hover {
    color: var(--color-album-dark);
    background: var(--color-album-pale);
}

.nav-dropdown-item[data-dest="documents"]:hover {
    color: var(--color-document-dark);
    background: var(--color-document-pale);
}

.nav-dropdown-divider {
    height: 1px;
    background: #eee;
    margin: 4px 0;
}

/* Main Content */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
}

/* Home Page Styles */
.home-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 20px;
}

.home-hero {
    display: block;
    cursor: pointer;
    text-decoration: none;
    background: var(--gradient-main);
    border-radius: 25px;
    padding: 50px 30px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(74, 124, 201, 0.25), 0 10px 40px rgba(156, 91, 181, 0.2), 0 10px 40px rgba(196, 53, 168, 0.15);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.home-hero:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 16px 50px rgba(74, 124, 201, 0.35), 0 16px 50px rgba(156, 91, 181, 0.28), 0 16px 50px rgba(196, 53, 168, 0.2);
}
.home-hero:active {
    transform: translateY(-2px) scale(1.005);
}

.home-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    /* animation: shimmer 15s infinite linear; removed for new animation */
}

/* Hero Musical Background Animation - Relaxing Floating Notes */
/* Hero Musical Background Animation - Relaxing Floating Notes + Wandering */
.hero-musical-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    perspective: 1000px;
}

/* Wrapper handles the main flight path (center to outward) */
.note-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    animation: flight linear infinite;
}

/* Inner note handles rotation and random wandering */
.musical-note {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    /* font-size set inline */
    transform-style: preserve-3d;
}

.musical-note.wander-1 {
    animation: wander1 ease-in-out infinite alternate;
}

.musical-note.wander-2 {
    animation: wander2 ease-in-out infinite alternate;
}

.musical-note.wander-3 {
    animation: wander3 ease-in-out infinite alternate;
}

@keyframes flight {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(2.5);
        opacity: 0;
    }
}

@keyframes wander1 {
    0% {
        transform: translate3d(0, 0, 0) rotateZ(var(--rot)) rotateX(0deg) rotateY(0deg);
    }

    33% {
        transform: translate3d(250px, -400px, 150px) rotateZ(calc(var(--rot) + 120deg)) rotateX(40deg) rotateY(30deg);
    }

    66% {
        transform: translate3d(-150px, 300px, -200px) rotateZ(calc(var(--rot) + 240deg)) rotateX(-30deg) rotateY(-40deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotateZ(calc(var(--rot) + 360deg)) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes wander2 {
    0% {
        transform: translate3d(0, 0, 0) rotateZ(var(--rot)) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: translate3d(-400px, 0, 300px) rotateZ(calc(var(--rot) - 180deg)) rotateX(-45deg) rotateY(45deg);
    }

    100% {
        transform: translate3d(400px, -200px, -400px) rotateZ(calc(var(--rot) - 360deg)) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes wander3 {
    0% {
        transform: translate3d(0, 0, 0) rotateZ(var(--rot)) rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: translate3d(300px, 300px, 300px) rotateZ(calc(var(--rot) + 90deg)) rotateX(50deg) rotateY(-30deg);
    }

    75% {
        transform: translate3d(-300px, -300px, -300px) rotateZ(calc(var(--rot) + 270deg)) rotateX(-50deg) rotateY(30deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotateZ(calc(var(--rot) + 360deg)) rotateX(0deg) rotateY(0deg);
    }
}

/* Fade in up animation for cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        margin-top: 40px;
    }

    to {
        opacity: 1;
        margin-top: 0;
    }
}

/* Animate cards on load */
.animate-on-load {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Staggered card animation */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        margin-top: 30px;
    }

    to {
        opacity: 1;
        margin-top: 0;
    }
}

/* Staggered Fade Up Animation using Transform for better performance */
@keyframes fadeInUpTransform {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.97);
    }

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

.stagger-fade-up {
    opacity: 0;
    animation: fadeInUpTransform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    will-change: transform, opacity;
}

/* Initial state for elements we want to animate
.home-stat-hero,
.home-stat-card {
    We will add the class via JS, but good to know these are the targets
}
*/

/* Smooth insertion animation - new items pop in */
@keyframes itemPopIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    40% {
        max-height: 100px;
        margin-bottom: 8px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        max-height: 100px;
        margin-bottom: 8px;
    }
}

.item-pop-in {
    animation: itemPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Category card specific pop-in - no max-height constraint */
@keyframes cardPopIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.card-pop-in {
    animation: cardPopIn 0.3s ease-out forwards;
}

.card-stagger {
    animation: cardPopIn 0.35s ease-out forwards;
}

/* Make song items and category cards animate their position smoothly */
.all-songs-grid .song-item,
.category-grid .category-card {
    transition: transform 0.3s ease-out, margin 0.3s ease-out;
}

/* When items need to make room for new ones */
.item-shift-down {
    animation: shiftDown 0.3s ease-out forwards;
}

@keyframes shiftDown {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(0);
    }
}

/* Page transition animation (LTR - left to right) */
/* Forward navigation: enter from bottom */
@keyframes pageSlideInFromLeft {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Forward navigation: exit to bottom */
@keyframes pageSlideOutToRight {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Backward navigation: enter from bottom */
@keyframes pageSlideInFromRight {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Backward navigation: exit to bottom */
@keyframes pageSlideOutToLeft {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Home page specific animation (enter from bottom - dramatic) */
@keyframes pageSlideInUp {
    from {
        opacity: 0;
        transform: translateY(80px) scale(0.97);
    }

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

/* Home page exit (fade to bottom) */
@keyframes homePageExitRight {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Content page transitions - forward */
.page-enter {
    animation: infoPageFadeIn 0.35s ease-out forwards;
}

.page-enter > div:first-child > * {
    animation: pageSlideInFromLeft 0.35s ease-out forwards;
}

.page-exit {
    animation: infoPageFadeOut 0.2s ease-in forwards;
}

.page-exit > div:first-child > * {
    animation: pageSlideOutToRight 0.2s ease-in forwards;
}

/* Content page transitions - backward */
.page-enter-back {
    animation: infoPageFadeIn 0.35s ease-out forwards;
}

.page-enter-back > div:first-child > * {
    animation: pageSlideInFromRight 0.35s ease-out forwards;
}

.page-exit-back {
    animation: infoPageFadeOut 0.2s ease-in forwards;
}

.page-exit-back > div:first-child > * {
    animation: pageSlideOutToLeft 0.2s ease-in forwards;
}

/* Home page transitions */
.page-enter-up {
    animation: pageSlideInUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.page-exit-home {
    animation: homePageExitRight 0.2s ease-in forwards;
}

/* Info page fade animation - no directional movement */
@keyframes infoPageFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes infoPageFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

.page-enter-info {
    animation: infoPageFadeIn 0.3s ease-out forwards;
}

.page-exit-info {
    animation: infoPageFadeOut 0.15s ease-in forwards;
}

/* Count-up number animation */
@keyframes numberPop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.number-animate {
    animation: numberPop 0.4s ease-out forwards;
}

.home-hero-content {
    position: relative;
    z-index: 2;
}

.home-logo {
    font-size: 4em;
    margin-bottom: 15px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.home-title {
    font-size: 5.5em;
    color: white;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
}

.home-subtitle {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.home-search-section {
    margin-bottom: 30px;
}

.home-search-box {
    display: flex;
    gap: 10px;
}

.home-search-input {
    flex: 1;
    padding: 15px 20px;
    font-size: 1.1em;
    border: 2px solid var(--primary-pale);
    border-radius: 15px;
    outline: none;
    font-family: inherit;
    direction: rtl;
    transition: var(--transition-smooth);
}

.home-search-input:focus {
    border-color: var(--color-chatzer);
    box-shadow: 0 0 0 4px rgba(156, 91, 181, 0.15);
}

.home-search-btn {
    padding: 15px 30px;
    background: var(--gradient-main);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.home-search-btn:hover {
    background: var(--gradient-main-dark);
    transform: translateY(-2px);
}

/* Stats Grid - Brick Layout */
.home-stats-grid {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

/* Hero ניגונים Card - Right Side (RTL), Spans 2 rows */
.home-stat-hero {
    grid-column: 1 / span 6;
    grid-row: 1 / span 2;
    background: linear-gradient(145deg, var(--color-nigun-pale) 0%, white 100%);
    border: 2px solid var(--color-nigun-pale);
    border-radius: 22px;
    padding: 40px 30px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

/* Individual Stat Cards */
.home-stat-card {
    background: white;
    border-radius: 18px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(0);
    text-decoration: none;
    color: inherit;
}

.home-stat-hero:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
    border-color: var(--color-nigun);
}

.home-stat-hero .home-stat-number {
    font-size: 4.5em;
    font-weight: 700;
    color: var(--color-nigun-dark);
    font-family: 'Heebo', sans-serif;
    line-height: 1;
}

.home-stat-hero .home-stat-label {
    font-size: 1.8em;
    color: var(--color-nigun);
    font-weight: 600;
    margin-top: 15px;
}

.home-stat-hero .home-stat-subtitle {
    font-size: 1em;
    color: var(--color-nigun);
    opacity: 0.8;
    margin-top: 6px;
}

.home-stat-hero .home-stat-recordings {
    font-size: 0.85em;
    color: var(--color-nigun-dark);
    opacity: 0.8;
    margin-top: 48px;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
}

.home-stat-hero .home-stat-recordings-num {
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
}

/* Grid assignments */
.home-stat-card.stat-mechaber {
    grid-column: 7 / span 6;
    grid-row: 1;
}

.home-stat-card.stat-chatzer {
    grid-column: 13 / span 6;
    grid-row: 1;
}

.home-stat-card.stat-verter {
    grid-column: 7 / span 4;
    grid-row: 2;
}

.home-stat-card.stat-zman {
    grid-column: 11 / span 4;
    grid-row: 2;
}

.home-stat-card.stat-piyut {
    grid-column: 15 / span 4;
    grid-row: 2;
}

.home-stat-card.stat-playlist {
    grid-column: 10 / span 9;
    grid-row: 3;
}

.home-stat-card.stat-collection {
    grid-column: 1 / span 9;
    grid-row: 3;
}

.home-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.home-stat-number {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 5px;
    font-family: 'Heebo', sans-serif;
}

.home-stat-label {
    font-size: 1.05em;
    font-weight: 500;
}

/* Beautiful Category Colors */
.home-stat-card.stat-chatzer {
    background: linear-gradient(145deg, var(--color-chatzer-pale) 0%, white 100%);
    border-color: var(--color-chatzer-pale);
}

.home-stat-card.stat-chatzer .home-stat-number {
    color: var(--color-chatzer-dark);
}

.home-stat-card.stat-chatzer .home-stat-label {
    color: var(--color-chatzer);
}

.home-stat-card.stat-chatzer:hover {
    border-color: var(--color-chatzer);
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.home-stat-card.stat-mechaber {
    background: linear-gradient(145deg, var(--color-mechaber-pale) 0%, white 100%);
    border-color: var(--color-mechaber-pale);
}

.home-stat-card.stat-mechaber .home-stat-number {
    color: var(--color-mechaber-dark);
}

.home-stat-card.stat-mechaber .home-stat-label {
    color: var(--color-mechaber);
}

.home-stat-card.stat-mechaber:hover {
    border-color: var(--color-mechaber);
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.home-stat-card.stat-verter {
    background: linear-gradient(145deg, var(--color-verter-pale) 0%, white 100%);
    border-color: var(--color-verter-pale);
}

.home-stat-card.stat-verter .home-stat-number {
    color: var(--color-verter-dark);
}

.home-stat-card.stat-verter .home-stat-label {
    color: var(--color-verter);
}

.home-stat-card.stat-verter:hover {
    border-color: var(--color-verter);
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.home-stat-card.stat-zman {
    background: linear-gradient(145deg, var(--color-zman-pale) 0%, white 100%);
    border-color: var(--color-zman-pale);
}

.home-stat-card.stat-zman .home-stat-number {
    color: var(--color-zman-dark);
}

.home-stat-card.stat-zman .home-stat-label {
    color: var(--color-zman);
}

.home-stat-card.stat-zman:hover {
    border-color: var(--color-zman);
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.home-stat-card.stat-playlist {
    background: linear-gradient(145deg, var(--color-playlist-pale) 0%, white 100%);
    border-color: var(--color-playlist-pale);
}

.home-stat-card.stat-playlist .home-stat-number {
    color: var(--color-playlist-dark);
}

.home-stat-card.stat-playlist .home-stat-label {
    color: var(--color-playlist);
}

.home-stat-card.stat-playlist:hover {
    border-color: var(--color-playlist);
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.home-stat-card.stat-collection {
    background: linear-gradient(145deg, var(--color-collection-pale) 0%, white 100%);
    border-color: var(--color-collection-pale);
}

.home-stat-card.stat-collection .home-stat-number {
    color: var(--color-collection-dark);
}

.home-stat-card.stat-collection .home-stat-label {
    color: var(--color-collection);
}

.home-stat-card.stat-collection:hover {
    border-color: var(--color-collection);
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.home-stat-card.stat-piyut {
    background: linear-gradient(145deg, var(--color-piyut-pale) 0%, white 100%);
    border-color: var(--color-piyut-pale);
}

.home-stat-card.stat-piyut .home-stat-number {
    color: var(--color-piyut-dark);
}

.home-stat-card.stat-piyut .home-stat-label {
    color: var(--color-piyut);
}

.home-stat-card.stat-piyut:hover {
    border-color: var(--color-piyut);
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.home-stat-card.stat-album {
    background: linear-gradient(145deg, var(--color-album-pale) 0%, white 100%);
    border-color: var(--color-album-pale);
}

.home-stat-card.stat-album .home-stat-number {
    color: var(--color-album-dark);
}

.home-stat-card.stat-album .home-stat-label {
    color: var(--color-album);
}

.home-stat-card.stat-album:hover {
    border-color: var(--color-album);
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.home-stat-card.stat-document {
    background: linear-gradient(145deg, var(--color-document-pale) 0%, white 100%);
    border-color: var(--color-document-pale);
}

.home-stat-card.stat-document .home-stat-number {
    color: var(--color-document-dark);
}

.home-stat-card.stat-document .home-stat-label {
    color: var(--color-document);
}

.home-stat-card.stat-document:hover {
    border-color: var(--color-document);
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.home-stat-card.stat-resource {
    background: linear-gradient(145deg, var(--color-resource-pale) 0%, white 100%);
    border-color: var(--color-resource-pale);
}

.home-stat-card.stat-resource .home-stat-number {
    color: var(--color-resource-dark);
}

.home-stat-card.stat-resource .home-stat-label {
    color: var(--color-resource);
}

.home-stat-card.stat-resource:hover {
    border-color: var(--color-resource);
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

/* Secondary grid layout */
.home-stats-grid-secondary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: -30px;
    margin-bottom: 60px;
}

/* Statistics Link */
.home-stats-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -40px;
    margin-bottom: 50px;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 100%;
    gap: 15px;
    text-decoration: none;
    color: inherit;
}

.home-stats-link-line {
    flex: 1;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    position: relative;
    transition: all 0.3s ease;
}

/* Right line (appears on LEFT in RTL) - has arrow pointing left (outward) */
.home-stats-link-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 8px solid var(--primary);
    transition: all 0.3s ease;
}

/* Left line (appears on RIGHT in RTL) - solid like the other line */
.home-stats-link-line.left {
    background: var(--primary);
}

.home-stats-link-line.left::after {
    display: none;
}

.home-stats-link-text {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 8px 20px;
    position: relative;
    transition: var(--transition-smooth);
}

.home-stats-link:hover {
    transform: scale(1.03);
}



.home-stats-link:hover .home-stats-link-line {
    background: var(--color-mechaber);
}

.home-stats-link:hover .home-stats-link-line::after {
    border-right-color: var(--color-mechaber);
}

.home-stats-link:hover .home-stats-link-line.left {
    background: var(--color-mechaber);
}



/* Instructions */
.instructions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.instruction-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: var(--bg-light);
    border-radius: 10px;
}

.instruction-number {
    width: 30px;
    height: 30px;
    background: var(--gradient-main);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.instruction-text {
    flex: 1;
}

/* Stats detailed */
.stats-detailed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background: var(--bg-light);
    border-radius: 8px;
}

.stat-label-lg {
    color: var(--text-muted);
}

.stat-value-lg {
    font-weight: 700;
    color: var(--primary);
}

/* Credits */
.credits-list {
    margin-top: 15px;
}

.credit-item {
    padding: 10px 15px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 10px;
}

.credit-item:last-child {
    margin-bottom: 0;
}

/* Thanks */
.thanks-list {
    margin: 15px 0;
    padding-right: 20px;
}

.thanks-list li {
    margin-bottom: 8px;
}

.blessing {
    font-style: italic;
    text-align: center;
    color: var(--primary);
    margin-top: 20px;
    padding: 15px;
    background: var(--primary-pale, #f3e5f5);
    border-radius: 10px;
}

/* Terms */
.terms-content ul {
    margin: 15px 0;
    padding-right: 20px;
}

.terms-content li {
    margin-bottom: 8px;
}

@media (max-width: 600px) {
    .home-hero {
        padding: 35px 20px;
    }

    .home-title {
        font-size: 2em;
    }

    .home-logo {
        font-size: 3em;
    }

    .home-search-box {
        flex-direction: column;
    }

    /* Stats grid is handled in its own max-width:1024px block below so it
       matches the hamburger breakpoint (the 18-col desktop grid collapses
       into slivers on tablets too, not just phones). */

    .home-about-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-about-link {
        padding: 14px 10px;
        font-size: 0.85em;
        border-bottom: 1px solid var(--color-chatzer-pale);
    }

    .home-about-link:nth-child(2n+1) {
        border-left: none;
    }

    .home-luach-sponsor {
        font-size: 0.82em;
    }
}

@media (max-width: 500px) {
    .home-stat-card {
        flex: 1 1 100%;
    }

    .home-about-links {
        grid-template-columns: 1fr;
    }

    .home-about-link {
        border-left: none !important;
    }
}

/* ============================================================
   MOBILE STATS GRID
   The desktop layout is a fixed 18-column grid with explicit
   per-card column/row placement. Below the hamburger breakpoint
   (1024px) those tracks become tiny slivers and the cards
   overflow, so we re-lay them out in a simple 2-column grid with
   an explicit order:
     row 1  ניגונים  (hero, full width)
     row 2  מחברים | חצרות
     row 3  ווערטער | פיוטים
     row 4  זמנים  (full width, on its own)
     row 5  קאלעקשנס | פלעיליסטס
   (column 1 is the right-hand side under RTL.)
   Desktop (>1024px) keeps the 18-column design.
   ============================================================ */
@media (max-width: 1024px) {
    .home-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-bottom: 40px;
    }

    .home-stat-hero {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .home-stat-card.stat-mechaber {
        grid-column: 1;
        grid-row: 2;
    }

    .home-stat-card.stat-chatzer {
        grid-column: 2;
        grid-row: 2;
    }

    .home-stat-card.stat-verter {
        grid-column: 1;
        grid-row: 3;
    }

    .home-stat-card.stat-piyut {
        grid-column: 2;
        grid-row: 3;
    }

    .home-stat-card.stat-zman {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .home-stat-card.stat-collection {
        grid-column: 1;
        grid-row: 5;
    }

    .home-stat-card.stat-playlist {
        grid-column: 2;
        grid-row: 5;
    }

    .home-stat-hero {
        padding: 30px 20px;
    }

    .home-stat-hero .home-stat-number {
        font-size: 3.4em;
    }

    .home-stat-hero .home-stat-label {
        font-size: 1.5em;
        margin-top: -6px;
    }

    .home-stat-hero .home-stat-recordings {
        margin-top: 18px;
    }

    .home-stat-card {
        padding: 18px 12px;
    }

    .home-stat-number {
        font-size: 1.8em;
    }

    .home-stats-grid-secondary {
        gap: 14px;
        margin-top: -20px;
        margin-bottom: 40px;
    }
}

/* ============================================================
   Manual Merge Styling
   ============================================================ */

.mg-manual-section.page-settings-bar {
    width: 90%;
    margin: 0 auto 25px auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Remove old manual-box since it's now styled as page-settings-bar */
.mg-manual-box {
    display: contents;
}

.mg-manual-inputs {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.mg-manual-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}


.mg-manual-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-nigun-dark);
    height: 48px;
    align-self: center;
}

/* Autocomplete wrapper & input */
.mg-autocomplete-wrapper {
    position: relative;
    width: 100%;
}

.mg-autocomplete-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1em;
    color: var(--text-dark);
    transition: var(--transition-smooth);
    outline: none;
    background: #f8fafc;
}

.mg-autocomplete-input:focus {
    border-color: var(--color-nigun);
    background: white;
    box-shadow: 0 0 0 3px rgba(74, 124, 201, 0.15);
}

/* Dropdown styling */
.mg-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    max-height: 280px;
    overflow-y: auto;
    margin-top: 6px;
    display: none;
    padding: 8px 4px;
}

/* Custom scrollbar for autocomplete box */
.mg-autocomplete-dropdown::-webkit-scrollbar {
    width: 6px;
}
.mg-autocomplete-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.mg-autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}
.mg-autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.24);
}

.mg-autocomplete-dropdown.active {
    display: block;
}

.mg-autocomplete-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 4px 8px;
    border-radius: 20px;
    cursor: pointer;
    
    --category-color: var(--color-nigun);
    background: color-mix(in srgb, var(--category-color) 8%, rgba(255, 255, 255, 0.9));
    border: 1px solid color-mix(in srgb, var(--category-color) 18%, transparent);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mg-autocomplete-item.highlighted,
.mg-autocomplete-item:hover {
    background: var(--category-color);
    border-color: var(--category-color);
    transform: scale(1.02);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--category-color) 25%, transparent);
}

.mg-item-name-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    text-align: right;
}

.mg-item-name {
    font-weight: 600;
    color: color-mix(in srgb, var(--category-color) 85%, #1a1a1a);
    transition: color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mg-item-subtitle {
    font-size: 0.8em;
    color: color-mix(in srgb, var(--category-color) 60%, #555);
    transition: color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mg-autocomplete-item.highlighted .mg-item-name,
.mg-autocomplete-item:hover .mg-item-name {
    color: #ffffff;
}

.mg-autocomplete-item.highlighted .mg-item-subtitle,
.mg-autocomplete-item:hover .mg-item-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

.mg-autocomplete-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

/* Play button for merge autocomplete */
.mg-autocomplete-dropdown .mention-play-btn {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: var(--category-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 0;
}

.mg-autocomplete-dropdown .mention-play-btn:hover {
    transform: scale(1.15);
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.mg-autocomplete-item:hover .mention-play-btn,
.mg-autocomplete-item.highlighted .mention-play-btn {
    background: rgba(255, 255, 255, 0.9);
    color: var(--category-color);
}

.mg-autocomplete-item:hover .mention-play-btn:hover,
.mg-autocomplete-item.highlighted .mention-play-btn:hover {
    background: #ffffff;
    transform: scale(1.15);
}

.mg-autocomplete-dropdown .mention-play-btn .pause-icon {
    display: none;
}

.mg-autocomplete-dropdown .mention-play-btn.playing .play-icon {
    display: none;
}

.mg-autocomplete-dropdown .mention-play-btn.playing .pause-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Selected tag styling */
.mg-selected-tag-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.mg-selected-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    background: var(--color-nigun-pale);
    border: 2px solid var(--color-nigun-light);
    border-radius: 12px;
}

.mg-tag-text {
    font-weight: 600;
    color: var(--color-nigun-dark);
}

.mg-tag-remove {
    background: none;
    border: none;
    font-size: 1.5em;
    line-height: 1;
    color: var(--color-nigun-dark);
    cursor: pointer;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.mg-tag-remove:hover {
    background: rgba(74, 124, 201, 0.15);
}

/* Actions and confirmation button */
.mg-manual-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 16px;
}

.mg-manual-merge-btn {
    padding: 0 24px;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    align-self: center;
    margin-bottom: 0;
    background: linear-gradient(135deg, var(--color-nigun) 0%, var(--color-nigun-dark) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 4px 12px rgba(74, 124, 201, 0.2);
}

.mg-manual-merge-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(74, 124, 201, 0.3);
}

.mg-manual-merge-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.mg-manual-success-feedback {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #e8f5e9;
    border: 1px solid #81c784;
    color: #2e7d32;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    animation: slideInDown 0.3s ease forwards;
    transition: opacity 0.5s ease;
}

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mobile responsive for manual merge */
@media (max-width: 768px) {
    .mg-manual-section.page-settings-bar {
        width: calc(100% - 32px);
        padding: 16px;
        border-radius: 0 0 16px 16px;
    }
    .mg-manual-inputs {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .mg-manual-arrow {
        align-self: center;
        transform: rotate(90deg);
        height: 24px;
    }
    .mg-manual-merge-btn {
        width: 100%;
        align-self: stretch;
        margin-bottom: 0;
    }
}



/* ============================================================
   Modal scrollbars: thin, gray, auto-fading, no arrow buttons.
   `is-scrolling` is toggled by JS on the active scroll target.
   `scrollbar-gutter: stable` keeps the content from shifting when
   the bar appears, so the horizontal center stays put.
   ============================================================ */
.nigun-modal-content,
.detail-modal-content,
.addinfo-modal-body,
.donate-modal-content,
.credits-modal-content,
.contribute-intro-dialog,
.pdf-popup-body,
.nigun-modal-body {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    scrollbar-gutter: stable;
    /* Default = fade-OUT timing (when is-scrolling is removed). */
    transition: scrollbar-color 0.45s ease;
}

.nigun-modal-content.is-scrolling,
.detail-modal-content.is-scrolling,
.addinfo-modal-body.is-scrolling,
.donate-modal-content.is-scrolling,
.credits-modal-content.is-scrolling,
.contribute-intro-dialog.is-scrolling,
.pdf-popup-body.is-scrolling,
.nigun-modal-body.is-scrolling {
    scrollbar-color: rgba(100, 100, 100, 0.45) transparent;
    /* Fade-IN: snappy, so the bar appears right away. */
    transition: scrollbar-color 0.12s ease;
}

.nigun-modal-content::-webkit-scrollbar,
.detail-modal-content::-webkit-scrollbar,
.addinfo-modal-body::-webkit-scrollbar,
.donate-modal-content::-webkit-scrollbar,
.credits-modal-content::-webkit-scrollbar,
.contribute-intro-dialog::-webkit-scrollbar,
.pdf-popup-body::-webkit-scrollbar,
.nigun-modal-body::-webkit-scrollbar {
    width: 8px;
}

.nigun-modal-content::-webkit-scrollbar-track,
.detail-modal-content::-webkit-scrollbar-track,
.addinfo-modal-body::-webkit-scrollbar-track,
.donate-modal-content::-webkit-scrollbar-track,
.credits-modal-content::-webkit-scrollbar-track,
.contribute-intro-dialog::-webkit-scrollbar-track,
.pdf-popup-body::-webkit-scrollbar-track,
.nigun-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.nigun-modal-content::-webkit-scrollbar-thumb,
.detail-modal-content::-webkit-scrollbar-thumb,
.addinfo-modal-body::-webkit-scrollbar-thumb,
.donate-modal-content::-webkit-scrollbar-thumb,
.credits-modal-content::-webkit-scrollbar-thumb,
.contribute-intro-dialog::-webkit-scrollbar-thumb,
.pdf-popup-body::-webkit-scrollbar-thumb,
.nigun-modal-body::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    transition: background-color 0.45s ease;
}

.nigun-modal-content.is-scrolling::-webkit-scrollbar-thumb,
.detail-modal-content.is-scrolling::-webkit-scrollbar-thumb,
.addinfo-modal-body.is-scrolling::-webkit-scrollbar-thumb,
.donate-modal-content.is-scrolling::-webkit-scrollbar-thumb,
.credits-modal-content.is-scrolling::-webkit-scrollbar-thumb,
.contribute-intro-dialog.is-scrolling::-webkit-scrollbar-thumb,
.pdf-popup-body.is-scrolling::-webkit-scrollbar-thumb,
.nigun-modal-body.is-scrolling::-webkit-scrollbar-thumb {
    background-color: rgba(100, 100, 100, 0.45);
    transition: background-color 0.12s ease;
}

.nigun-modal-content::-webkit-scrollbar-button,
.detail-modal-content::-webkit-scrollbar-button,
.addinfo-modal-body::-webkit-scrollbar-button,
.donate-modal-content::-webkit-scrollbar-button,
.credits-modal-content::-webkit-scrollbar-button,
.contribute-intro-dialog::-webkit-scrollbar-button,
.pdf-popup-body::-webkit-scrollbar-button,
.nigun-modal-body::-webkit-scrollbar-button {
    display: none;
}

/* ============================================================ */
/* Overview Page — live network map (נעץ־מאפע) */
/* ============================================================ */
/* Entry animations for glassy controls */
@keyframes slideDownIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDownInCenter {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes slideUpInCenter {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.overview-page.full-screen-network {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 950 !important;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), var(--gradient-main-pale) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    max-width: none !important;
}
.overview-page.full-screen-network .overview-graph-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}
.overview-page.full-screen-network #overviewGraph {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}
.overview-page.full-screen-network .overview-controls {
    position: absolute;
    top: 162px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: calc(100% - 48px);
    max-width: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    opacity: 0;
    animation: slideDownInCenter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.overview-page.full-screen-network .overview-search-wrap {
    flex: 0 1 360px;
}
.overview-page.full-screen-network .overview-search {
    width: 100%;
    border-radius: 999px !important;
    border: 1px solid rgba(156, 91, 181, 0.25) !important;
    background: linear-gradient(135deg, rgba(74, 124, 201, 0.04) 0%, rgba(156, 91, 181, 0.04) 50%, rgba(196, 53, 168, 0.04) 100%), rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px 24px !important;
    font-family: inherit;
    font-size: 0.95em;
    color: #37474f;
    box-shadow: 0 6px 20px rgba(123, 31, 162, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.overview-page.full-screen-network .overview-search:focus {
    outline: none;
    border-color: rgba(156, 91, 181, 0.6) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(123, 31, 162, 0.12) !important;
}
.overview-page.full-screen-network .overview-marks {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.overview-page.full-screen-network .overview-mark {
    padding: 10px 24px !important;
    border: 1px solid rgba(156, 91, 181, 0.25) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(74, 124, 201, 0.04) 0%, rgba(156, 91, 181, 0.04) 50%, rgba(196, 53, 168, 0.04) 100%), rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.95em;
    color: #607d8b;
    box-shadow: 0 6px 20px rgba(123, 31, 162, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.overview-page.full-screen-network .overview-mark:hover {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(156, 91, 181, 0.4) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(123, 31, 162, 0.08) !important;
}
.overview-page.full-screen-network .overview-mark.active {
    background: var(--gradient-main) !important;
    border: 1px solid transparent !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 24px rgba(123, 31, 162, 0.25) !important;
}
.overview-page.full-screen-network .overview-mark.active:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
/* Density control — a segmented "pill": "ווייז:" title + 3 options with a
   gradient highlight that slides between them. */
.overview-density {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 5px 14px 5px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(156, 91, 181, 0.25);
    box-shadow: 0 6px 20px rgba(123, 31, 162, 0.05);
}
.overview-density-label {
    font-size: 0.85em;
    color: #90a4ae;
    font-weight: 700;
}
.overview-density-seg {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px;
    border-radius: 999px;
    background: rgba(120, 144, 156, 0.12);
}
.overview-density-slider {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: var(--gradient-main);
    box-shadow: 0 4px 14px rgba(123, 31, 162, 0.28);
    opacity: 0;
    transform: translateX(0);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
    pointer-events: none;
}
.overview-dens {
    position: relative;
    z-index: 1;
    padding: 6px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 600;
    color: #607d8b;
    transition: color 0.25s ease;
}
.overview-dens:hover { color: #37474f; }
.overview-dens.active { color: #fff; }
/* Tuning cluster: association / degree-size toggles + min-shared slider */
.overview-tune {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(156, 91, 181, 0.25);
    box-shadow: 0 6px 20px rgba(123, 31, 162, 0.05);
}
.overview-tune-btn {
    padding: 6px 13px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    color: #607d8b;
    transition: all 0.2s ease;
}
.overview-tune-btn:hover { border-color: rgba(156, 91, 181, 0.4); color: #37474f; }
.overview-tune-btn.active {
    background: var(--gradient-main);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(123, 31, 162, 0.22);
}
.overview-minw {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82em;
    color: #607d8b;
    font-weight: 600;
}
.overview-minw-range { width: 86px; accent-color: var(--color-chatzer, #9c5bb5); cursor: pointer; }
.overview-minw-val {
    min-width: 1.2em;
    text-align: center;
    font-weight: 800;
    color: var(--color-chatzer-dark, #7b3f96);
}
.overview-page.full-screen-network .overview-toolbar {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: calc(100% - 48px);
    max-width: none !important;
    background: linear-gradient(135deg, rgba(74, 124, 201, 0.06) 0%, rgba(156, 91, 181, 0.06) 50%, rgba(196, 53, 168, 0.06) 100%), rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(156, 91, 181, 0.25) !important;
    padding: 10px 24px;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(123, 31, 162, 0.08) !important;
    margin: 0 !important;
    opacity: 0;
    animation: slideDownInCenter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.18s forwards;
}
.overview-page.full-screen-network .overview-legend {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    justify-content: center;
    flex-grow: 1;
    margin: 0;
    scrollbar-width: none;
}
.overview-page.full-screen-network .overview-legend::-webkit-scrollbar {
    display: none;
}
.overview-page.full-screen-network .overview-reset {
    flex-shrink: 0;
    background: var(--gradient-main) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.2) !important;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.overview-page.full-screen-network .overview-reset:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(123, 31, 162, 0.3);
}
.overview-page.full-screen-network .overview-reset:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(123, 31, 162, 0.2);
}
.overview-page.full-screen-network .overview-sidepanel {
    top: 236px;
    left: 24px;
    max-height: calc(100vh - 276px);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.overview-page.full-screen-network .overview-hint {
    bottom: 24px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    color: #546e7a;
    font-weight: 500;
    opacity: 0;
    animation: slideUpInCenter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
@media (max-width: 1024px) {
    .overview-page.full-screen-network .overview-controls,
    .overview-page.full-screen-network .overview-toolbar {
        position: static;
        transform: none;
        width: 100%;
        border-radius: 999px;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: none;
        border: 1px solid #e0e0e0;
        margin: 8px 0 !important;
        padding: 8px 12px;
    }
    
    .overview-page.full-screen-network .overview-header-floating {
        position: static;
        text-align: center;
        margin-top: 76px;
    }
    
    .overview-page.full-screen-network {
        position: relative;
        height: auto;
        min-height: 100vh;
        overflow: auto;
        display: flex;
        flex-direction: column;
        padding: 16px !important;
    }
    
    .overview-page.full-screen-network .overview-graph-wrap {
        position: relative;
        height: 60vh;
        min-height: 400px;
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        margin-top: 12px !important;
    }
    
    .overview-page.full-screen-network .overview-sidepanel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        max-height: 50%;
        border-radius: 16px 16px 0 0;
        z-index: 2000;
    }
}
.overview-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.overview-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95em;
    color: #546e7a;
    opacity: 0.38;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.overview-legend-chip.active {
    opacity: 1;
    background: #fff;
    border: 1.5px solid rgba(156, 91, 181, 0.38) !important;
    color: var(--color-primary-deep, #4a1259);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(123, 31, 162, 0.08) !important;
}
.overview-legend-chip:not(.active) .overview-legend-dot {
    background: #b0bec5 !important;
    opacity: 0.6;
}
.overview-legend-chip:not(.active) .overview-legend-count {
    color: #b0bec5;
}
.overview-legend-chip.active .overview-legend-count {
    color: var(--color-primary-light, #ae52d4);
}
.overview-legend-chip:hover { 
    transform: translateY(-1px); 
    opacity: 0.85;
}
.overview-legend-chip.active:hover {
    opacity: 1;
    box-shadow: 0 6px 20px rgba(123, 31, 162, 0.12) !important;
}
.overview-legend-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Concentric white center dot for active personalities category in legend */
.overview-legend-chip.active[data-cat="personalities"] .overview-legend-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.overview-legend-chip.active[data-cat="personalities"] .overview-legend-dot::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: #ffffff;
    border-radius: 50%;
}
.overview-legend-count {
    font-size: 0.82em;
    font-weight: 700;
}
.overview-reset {
    padding: 6px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    color: #607d8b;
    transition: background 0.2s ease;
}
.overview-reset:hover { background: #f5f5f5; }
.overview-graph-wrap {
    position: relative;
    background: radial-gradient(circle at 50% 40%, #fbfbfd 0%, #f1f3f6 100%);
    border: 1px solid #e8eaf0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.03);
}
#overviewGraph {
    display: block;
    width: 100%;
    height: 72vh;
    min-height: 460px;
    touch-action: none;
    cursor: grab;
}
#overviewGraph.panning { cursor: grabbing; }
/* Node groups carry a JS-set translate+scale transform (counter-scaled on
   zoom), so they must NOT have a CSS transition on transform — that would
   fight the per-frame updates and make pan/zoom feel laggy. 
   Additionally, we remove transitions on opacity from the parent group .overview-node 
   itself to completely eliminate SVG jittering/shivering when transforming. */
.overview-node {
    cursor: pointer;
    transition: none !important;
}
.overview-node circle {
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 1.5px;
    transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                stroke-width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.overview-node circle.overview-hole {
    stroke-width: 0 !important;
}
.overview-nodes:not(.faded) .overview-node:hover circle:not(.overview-hole),
.overview-node.hl circle:not(.overview-hole) { stroke-width: 2.5px; }
.overview-node-label {
    font-size: 11px;
    font-weight: 600;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
    transition: opacity 0.15s ease, fill 0.2s ease;
}
.overview-node-hover-wrap {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.overview-node:hover .overview-node-hover-wrap {
    opacity: 1 !important;
}
.overview-node:hover .overview-node-label.default-label {
    opacity: 0 !important;
}
.overview-node-subtitle {
    font-size: 9px;
    font-weight: 600;
    fill: #78909c;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 2.5px;
    stroke-linejoin: round;
    pointer-events: none;
}
.overview-node:hover .overview-node-label.hover-title {
    font-size: 13.5px !important;
    font-weight: 850 !important;
    stroke-width: 4px !important;
}
/* Focused or Search-Hit primary node pop styling */
.overview-node.focused-hit circle,
.overview-node.search-hit circle {
    stroke: rgba(255, 255, 255, 0.95) !important;
    stroke-width: 3px !important;
    filter: drop-shadow(0 3px 8px rgba(74, 18, 89, 0.18));
}
.overview-node.focused-hit .overview-node-label,
.overview-node.search-hit .overview-node-label {
    font-size: 14.5px !important;
    font-weight: 850 !important;
    stroke-width: 4px !important;
    opacity: 1 !important;
}
.overview-node-label.minor { 
    opacity: 0; 
}
.overview-node:hover .overview-node-label.minor,
.overview-node.hl .overview-node-label.minor { 
    opacity: 1; 
}
/* Prevent minor labels of unfocused nodes from fading in at 0.15 when graph is faded */
.overview-nodes.faded .overview-node:not(.hl):not(:hover) .overview-node-label.minor {
    opacity: 0 !important;
}
/* Show all labels of a category when hovering over its active legend chip */
.overview-nodes.hover-cat-chatzeros .overview-node[data-cat="chatzeros"] .overview-node-label.minor,
.overview-nodes.hover-cat-mechabrim .overview-node[data-cat="mechabrim"] .overview-node-label.minor,
.overview-nodes.hover-cat-personalities .overview-node[data-cat="personalities"] .overview-node-label.minor,
.overview-nodes.hover-cat-albums .overview-node[data-cat="albums"] .overview-node-label.minor,
.overview-nodes.hover-cat-verter .overview-node[data-cat="verter"] .overview-node-label.minor,
.overview-nodes.hover-cat-piyutim .overview-node[data-cat="piyutim"] .overview-node-label.minor,
.overview-nodes.hover-cat-zmanim .overview-node[data-cat="zmanim"] .overview-node-label.minor,
.overview-nodes.hover-cat-collections .overview-node[data-cat="collections"] .overview-node-label.minor {
    opacity: 1 !important;
}


.overview-edges line {
    opacity: 0.35;
    transition: opacity 0.12s ease;
}
/* Neighbour-focus: hovering a node dims everything except it + its links. */
.overview-edges.faded line { opacity: 0.06; transition: opacity 0.12s ease; }
.overview-edges.faded line.hl { opacity: 0.85; }
/* Wide invisible hover targets so thin edges are easy to point at. */
.overview-edge-hit { stroke: transparent !important; pointer-events: stroke; cursor: pointer; }
.overview-edge { pointer-events: none; }
.overview-edges.faded .overview-edge-hit { opacity: 1 !important; }

/* Weak edges (below the min-connection threshold) are hidden by default and
   only appear when an endpoint is hovered (gets .hl). */
.overview-edge.weak { display: none; }
.overview-edge-hit.weak { display: none; }
.overview-edges.faded .overview-edge.weak.hl { display: inline; opacity: 0.85; }
.overview-edges:not(.faded) .overview-edge.weak.hl { display: inline; }

/* Per-edge count badges: hidden until the edge (or one of its nodes) is
   hovered. Same colour as the line, white halo around. */
.overview-edge-nums { pointer-events: none; }
.overview-edge-num { opacity: 0; transition: opacity 0.12s ease; pointer-events: auto; cursor: pointer; }
.overview-edge-num.hl { opacity: 1; }
.overview-edge-num text {
    font-size: 7px;
    font-weight: 800;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 2px;
    stroke-linejoin: round;
}
.overview-edge-num circle:first-child { stroke: #fff; stroke-width: 1.5px; }

/* Move opacity transitions completely onto the inner SVG children to prevent transform lag */
.overview-nodes.faded .overview-node circle,
.overview-nodes.faded .overview-node .overview-node-label { 
    opacity: 0.15; 
    transition: opacity 0.15s ease; 
}
.overview-nodes.faded .overview-node.hl circle,
.overview-nodes.faded .overview-node.hl .overview-node-label { 
    opacity: 1; 
}
.overview-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.82em;
    color: #90a4ae;
    background: rgba(255, 255, 255, 0.82);
    padding: 4px 12px;
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
}

/* ---- Controls row: search + hub/orphan toggles ---- */
.overview-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    margin-bottom: 14px;
}
.overview-search-wrap { position: relative; }
.overview-search {
    width: min(320px, 80vw);
    padding: 8px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 0.95em;
    color: #37474f;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.overview-search:focus {
    outline: none;
    border-color: var(--color-nigun, #1565c0);
    box-shadow: 0 0 0 3px rgba(74, 124, 201, 0.16);
}
.overview-marks { display: inline-flex; gap: 8px; }
.overview-mark {
    padding: 7px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    color: #607d8b;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.overview-mark:hover { background: #f5f5f5; }
.overview-mark.active {
    background: var(--color-nigun, #1565c0);
    border-color: var(--color-nigun, #1565c0);
    color: #fff;
}

/* ---- Search pulse on matched nodes ---- */
.overview-node.search-hit circle {
    stroke: var(--color-nigun, #1565c0);
    stroke-width: 3px;
    animation: overview-pulse 1.1s ease-in-out infinite;
}
@keyframes overview-pulse {
    0%, 100% { stroke-opacity: 0.35; }
    50% { stroke-opacity: 1; }
}

/* ---- Hub / orphan marking: opacity transitions on children to prevent transform lag ---- */
.overview-nodes.marking .overview-node circle,
.overview-nodes.marking .overview-node .overview-node-label { 
    opacity: 0.1; 
    transition: opacity 0.12s ease; 
}
.overview-nodes.marking .overview-node.is-hub circle,
.overview-nodes.marking .overview-node.is-hub .overview-node-label,
.overview-nodes.marking .overview-node.is-orphan circle,
.overview-nodes.marking .overview-node.is-orphan .overview-node-label { 
    opacity: 1; 
}
.overview-nodes.marking .overview-node.is-hub circle {
    stroke: #ff7043;
    stroke-width: 3px;
}
.overview-nodes.marking .overview-node.is-orphan circle {
    stroke: #90a4ae;
    stroke-width: 2px;
    stroke-dasharray: 3 3;
}

/* ---- Connections edge tooltip ---- */
.overview-edge-tooltip {
    position: absolute;
    width: 250px;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #e8eaf0;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s ease, transform 0.15s ease;
    visibility: hidden;
}
.overview-edge-tooltip.is-visible {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    pointer-events: auto;
}
.overview-edge-tooltip .overview-sp-head {
    cursor: default;
    background: #fafbfc !important;
}
.overview-edge-tooltip .overview-sp-body {
    padding: 6px 8px;
}
.overview-edge-tooltip .overview-sp-conn {
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.overview-edge-tooltip .overview-sp-conn:hover {
    background: rgba(74, 124, 201, 0.08); /* 8% opacity of var(--color-nigun) */
}

/* ---- Connections side panel ---- */
.overview-sidepanel {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    width: 270px;
    max-height: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #e8eaf0;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    z-index: 3;
    
    /* Premium smooth elastic spring-like entry/exit transition */
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                visibility 0.3s ease;
    opacity: 0;
    transform: translateX(-30px);
    visibility: hidden;
}
.overview-sidepanel.is-open {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}
.overview-sp-head {
    position: relative;
    padding: 14px 16px 13px;
    border-top: 4px solid var(--c, #1565c0);
    background: #fafbfc;
    border-bottom: 1px solid #eceff1;
    cursor: pointer;
    transition: background 0.22s ease;
}
.overview-sp-head:hover {
    background: #f1f3f5;
}
.overview-sp-link-arrow {
    display: inline-block;
    margin-inline-start: 6px;
    color: var(--c, #1565c0);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.overview-sp-head:hover .overview-sp-link-arrow {
    transform: translateX(-4px);
}
.overview-sp-close {
    position: absolute;
    top: 6px;
    inset-inline-end: 8px;
    border: none;
    background: none;
    font-size: 1.4em;
    line-height: 1;
    color: #b0bec5;
    cursor: pointer;
    padding: 2px 6px;
}
.overview-sp-close:hover { color: #607d8b; }
.overview-sp-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--c, #607d8b);
    margin-bottom: 3px;
}
.overview-sp-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c, #607d8b);
    flex-shrink: 0;
}
.overview-sp-title {
    font-size: 1.18em;
    font-weight: 800;
    color: #263238;
    line-height: 1.2;
    padding-inline-end: 18px;
}
.overview-sp-meta {
    font-size: 0.82em;
    color: #78909c;
    margin-top: 3px;
}
.overview-sp-open {
    margin-top: 11px;
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--c, #1565c0);
    border-radius: 8px;
    background: #fff;
    color: var(--c, #1565c0);
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.overview-sp-open:hover { background: var(--c, #1565c0); color: #fff; }
.overview-sp-body {
    overflow-y: auto;
    padding: 8px 8px 12px;
}
.overview-sp-empty {
    padding: 18px 12px;
    text-align: center;
    color: #90a4ae;
    font-size: 0.88em;
}
.overview-sp-group { margin-bottom: 6px; }
.overview-sp-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 4px;
    font-size: 0.76em;
    font-weight: 700;
    text-transform: none;
    color: #90a4ae;
}
.overview-sp-group-n {
    font-size: 0.92em;
    color: #b0bec5;
    font-weight: 700;
}
.overview-sp-conn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 9px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    color: #37474f;
    text-align: start;
    transition: background 0.14s ease;
}
.overview-sp-conn:hover { background: #f1f3f6; }
.overview-sp-conn-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c, #90a4ae);
    flex-shrink: 0;
}
.overview-sp-conn-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overview-sp-conn-w {
    font-size: 0.8em;
    font-weight: 700;
    color: #b0bec5;
    background: #eceff1;
    border-radius: 999px;
    padding: 1px 7px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .overview-stat-num { font-size: 1.5em; }
    #overviewGraph { height: 64vh; }
    .overview-hint { font-size: 0.72em; }
    /* Side panel becomes a bottom sheet on narrow screens. */
    .overview-sidepanel {
        top: auto;
        bottom: 0;
        inset-inline: 0;
        width: auto;
        max-height: 52%;
        border-radius: 16px 16px 0 0;
    }
}

/* Page Title - now the colored box itself */
.page-title {
    background: var(--color-nigun);
    /* Default, overridden by page themes */
    border-radius: 0 0 30px 30px;
    /* Square top, rounded bottom */
    box-shadow: var(--card-shadow);
    margin-bottom: 0;
    /* Pull up into the header space so colored area extends to top */
    margin-top: -80px;
    overflow: hidden;
    position: relative;
    z-index: 99;
    text-align: center;
    /* Extra top padding to push content below the nav bar area */
    padding: 90px 25px 15px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Smooth background color change during page transitions */
    transition: background 0.4s ease;
}

/* Fixed mode - JavaScript controlled */
/* Keep same padding as normal flow so nothing visually changes yet */
.page-title.is-fixed {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 1160px;
    z-index: 99;
    margin-top: 0;
    border-radius: 0 0 20px 20px;
    /* Same padding as normal - no visual change when becoming fixed */
    padding: 90px 25px 15px 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    /* Transition padding to match nav ball slide animation */
    transition: padding 0.4s ease;
}

/* When main header is hidden (nav balls gone), compact the page header */
.page-title.is-fixed.main-hidden {
    padding: 8px 25px 10px 25px;
    border-radius: 0 0 20px 20px;
}

/* Compact title text only after nav balls are hidden */
.page-title.is-fixed.main-hidden .page-title-bar {
    font-size: 2.5em;
    margin-top: 0;
}

/* Hide subtitle only after nav balls are hidden */
.page-title.is-fixed.main-hidden .subtitle {
    opacity: 0;
    max-height: 0;
    min-height: 0;
}

/* Wave bar at bottom of colored box */
.page-title>.loading-wave-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Title name - now below number, BIGGER */
.page-title-bar {
    font-size: 4em;
    font-weight: 700;
    font-family: 'Heebo', sans-serif;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    line-height: 1.2;
    order: 2;
    /* Show second */
    margin-top: 10px;
    transition: font-size 0.4s ease, margin-top 0.4s ease;
}

/* Hide the white content area */
.page-title-content {
    display: none;
}

.page-title-icon {
    display: none;
}

/* Number - now on top, SMALLER */
.page-title .subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    display: block;
    width: 100%;
    order: 1;
    /* Show first */
    transition: opacity 0.3s ease, max-height 0.4s ease;
    min-height: 1.5em;
    max-height: 50px;
    opacity: 1;
    overflow: hidden;
}

/* Filters container inside page-title */
.page-title-filters {
    display: none;
}

/* Sub-header bar for settings/filters */
.page-settings-bar {
    /* Theme color variables — default to nigun, overridden per page-theme */
    --bar-color: var(--color-nigun);
    --bar-color-dark: var(--color-nigun-dark);
    --bar-color-pale: var(--color-nigun-pale);
    --bar-color-light: var(--color-nigun-light);
    --bar-shadow-color: rgba(74, 124, 201, 0.3);

    position: relative;
    z-index: 98;
    background: var(--bar-color-pale);
    padding: 10px 40px;
    display: flex;
    justify-content: center;
    margin: 0 auto 25px auto;
    border-radius: 0 0 25px 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 8px 12px -8px var(--bar-shadow-color);
    border: 2px solid var(--bar-color-light);
    border-top: none;
    width: 90%;
    max-width: calc(100% - 40px);
    transition: padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        top 0.4s ease,
        transform 0.4s ease,
        margin-top 0.4s ease,
        border-radius 0.4s ease;
}

/* Note: settings-bar stays in normal flow, only page-title becomes fixed */

/* ========== Scroll-Aware Sticky Headers ========== */
/* When main header is hidden, page-title shrinks (nav bar gone) */
.page-title.main-hidden {
    padding-top: 8px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* Settings-bar styling when merged with page-title */
.page-settings-bar.merged {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.page-title.sub-merged {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ========== Category-Themed Settings Bars ========== */
/* Each theme only overrides CSS custom properties defined on .page-settings-bar */
.page-theme-mechaber .page-settings-bar {
    --bar-color: var(--color-mechaber);
    --bar-color-dark: var(--color-mechaber-dark);
    --bar-color-pale: var(--color-mechaber-pale);
    --bar-color-light: var(--color-mechaber-light);
    --bar-shadow-color: rgba(196, 53, 168, 0.3);
}

.page-theme-chatzer .page-settings-bar {
    --bar-color: var(--color-chatzer);
    --bar-color-dark: var(--color-chatzer-dark);
    --bar-color-pale: var(--color-chatzer-pale);
    --bar-color-light: var(--color-chatzer-light);
    --bar-shadow-color: rgba(156, 91, 181, 0.3);
}

.page-theme-verter .page-settings-bar {
    --bar-color: var(--color-verter);
    --bar-color-dark: var(--color-verter-dark);
    --bar-color-pale: var(--color-verter-pale);
    --bar-color-light: var(--color-verter-light);
    --bar-shadow-color: rgba(107, 114, 128, 0.3);
}

.page-theme-zman .page-settings-bar {
    --bar-color: var(--color-zman);
    --bar-color-dark: var(--color-zman-dark);
    --bar-color-pale: var(--color-zman-pale);
    --bar-color-light: var(--color-zman-light);
    --bar-shadow-color: rgba(233, 106, 27, 0.3);
}

.page-theme-playlist .page-settings-bar {
    --bar-color: var(--color-playlist);
    --bar-color-dark: var(--color-playlist-dark);
    --bar-color-pale: var(--color-playlist-pale);
    --bar-color-light: var(--color-playlist-light);
    --bar-shadow-color: rgba(198, 40, 40, 0.3);
}

.page-theme-collection .page-settings-bar {
    --bar-color: var(--color-collection);
    --bar-color-dark: var(--color-collection-dark);
    --bar-color-pale: var(--color-collection-pale);
    --bar-color-light: var(--color-collection-light);
    --bar-shadow-color: rgba(176, 95, 3, 0.3);
}

.page-theme-piyut .page-settings-bar {
    --bar-color: var(--color-piyut);
    --bar-color-dark: var(--color-piyut-dark);
    --bar-color-pale: var(--color-piyut-pale);
    --bar-color-light: var(--color-piyut-light);
    --bar-shadow-color: rgba(46, 139, 46, 0.3);
}

/* Grid layout variants for different button counts */
.page-settings-bar .detail-filters-group.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.page-settings-bar .detail-filters-group.cols-1 {
    grid-template-columns: 1fr;
    max-width: 300px;
}

.page-settings-bar .detail-filters-group {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;

    padding: 0;
    width: 100%;
}

/* Phones: the 5-control grid gets too tight and overflows. Switch to a wrap
   layout, drop every text label (icons only), and show the sliders as a
   compact 3-icon segmented control. The two sliders share the top row; the
   three icon buttons share the next.
   (>600px keeps the original grid; category bars with cols-* are untouched.) */
@media (max-width: 600px) {
    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    /* Icons only — hide every text label in the bar */
    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .slider-option-label,
    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .search-label,
    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .filter-mega-label,
    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .quality-mega-label {
        display: none;
    }

    /* Sliders share the top row, shown as 3 equal icon options (like the
       desktop hover state) so every choice stays tappable without a label. */
    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .slider-control {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .slider-option {
        flex: 1;
        padding: 0 6px;
    }

    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .slider-indicator {
        top: 3px;
        bottom: 3px;
        width: calc(33.333% - 4px);
        border-radius: 9px;
    }

    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .slider-indicator[data-position="0"] {
        right: 3px;
    }

    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .slider-indicator[data-position="1"] {
        right: calc(33.333% + 1px);
    }

    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .slider-indicator[data-position="2"] {
        right: calc(66.666% - 1px);
    }

    /* Search / filters / quality become compact square-ish icon buttons */
    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) > .expandable-search,
    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) > .filter-mega-menu,
    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) > .quality-mega-menu {
        flex: 0 0 auto;
    }

    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .search-trigger-btn {
        min-width: 0;
        padding: 0 16px;
        gap: 0;
    }

    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .filter-mega-trigger,
    .page-settings-bar .detail-filters-group:not(.cols-1):not(.cols-3) .quality-mega-trigger {
        gap: 0;
    }
}

/* Phones: category bars (cols-3) — icons only. Sliders keep their default
   collapsed state (just the selected option's icon, no label); a tap on the
   slider cycles to the next option (see cycleCategorySlider). Search becomes a
   compact icon button. (>600px keeps the original grid with labels.) */
@media (max-width: 600px) {
    .page-settings-bar .detail-filters-group.cols-3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .page-settings-bar .detail-filters-group.cols-3 .slider-option-label,
    .page-settings-bar .detail-filters-group.cols-3 .search-label {
        display: none;
    }

    /* Compact slider showing only the active icon; options aren't tapped
       directly — the whole control cycles instead. */
    .page-settings-bar .detail-filters-group.cols-3 .slider-control {
        flex: 0 0 auto;
        width: 60px;
    }

    .page-settings-bar .detail-filters-group.cols-3 .slider-option {
        pointer-events: none;
    }

    /* Compact icon-only search */
    .page-settings-bar .detail-filters-group.cols-3 > .expandable-search {
        flex: 0 0 auto;
    }

    .page-settings-bar .detail-filters-group.cols-3 .search-trigger-btn {
        min-width: 0;
        padding: 0 16px;
        gap: 0;
    }
}

/* Filter Mega-Menu - button stays in normal flow, static so expanded positions to settings bar */
.filter-mega-menu {
    position: static;
    height: 48px;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: visible;
    z-index: 50;
}

.filter-mega-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    height: 100%;
    width: 100%;
    cursor: pointer;
    white-space: nowrap;
    color: var(--color-nigun-dark);
    font-weight: 600;
    font-size: 0.9em;
    border-radius: inherit;
    transition: background 0.2s ease, color 0.2s ease;
}

.filter-mega-trigger .filter-btn-icon {
    width: 18px;
    height: 18px;
    stroke: var(--color-nigun);
    transition: stroke 0.2s ease;
}

/* Filter badge container - both count and X stack here */
.filter-mega-trigger .filter-count,
.filter-mega-trigger .filter-clear-btn {
    position: absolute;
    left: 8px;
    background: white;
    color: var(--color-nigun);
    font-size: 0.75em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    transition: opacity 0.2s ease;
}

/* Count visible by default */
.filter-mega-trigger .filter-count {
    opacity: 1;
}

/* Clear button hidden by default */
.filter-mega-trigger .filter-clear-btn {
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
}

/* On hover: fade count out, fade X in */
.filter-mega-menu:hover .filter-mega-trigger.has-active .filter-count {
    opacity: 0;
}

.filter-mega-menu:hover .filter-mega-trigger.has-active .filter-clear-btn {
    opacity: 1;
    pointer-events: auto;
}

.filter-mega-label {
    transition: opacity 0.2s ease, color 0.2s ease;
}

/* Hover state - subtle effect */
.filter-mega-trigger:hover {
    background: rgba(74, 124, 201, 0.15);
}

/* Active filter state - blue background */
.filter-mega-trigger.has-active {
    background: var(--color-nigun);
    color: white;
}

.filter-mega-trigger.has-active .filter-btn-icon {
    stroke: white;
}

.filter-mega-trigger.has-active .filter-count {
    background: white;
    color: var(--color-nigun);
}

/* Keep menu rounded when filter is active */
.filter-mega-menu:has(.filter-mega-trigger.has-active) {
    background: transparent;
}

.filter-mega-trigger.has-active {
    border-radius: 12px;
}

/* Expanded filter panel - ABSOLUTE for Phase 1 overlay, sub-header grows for Phase 2 */
.filter-mega-expanded {
    position: absolute;
    top: 10px;
    left: 20px;
    right: 20px;
    background: white;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 4px 20px rgba(74, 124, 201, 0.25);
    overflow: hidden;
    z-index: 200;

    /* Collapsed state - clips from top */
    visibility: hidden;
    clip-path: inset(0 0 100% 0 round 12px);
    /* Single combined transition - no delays */
    transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s 0.35s;
}

/* The inner content - grid of columns */
.filter-mega-expanded-inner {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    /* Headers visible immediately - no opacity animation */
}

/* Options animate with panel - no separate phase */
.filter-mega-options {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* Fade in/out with panel */
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
}

.filter-mega-menu.expanded {
    z-index: 199;
    /* Below the expanded panel */
}

.filter-mega-menu.expanded .filter-mega-label {
    opacity: 0;
}

/* Expanded state - single phase animation */
.filter-mega-expanded.expanded {
    visibility: visible;
    clip-path: inset(0 0 0 0 round 12px);
    /* Single combined transition - no delays */
    transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s;
}

/* Headers stay visible during entire animation - no opacity change needed */

/* Sub-header grows to make space for expanded panels */
.page-settings-bar.filter-expanded {
    padding-bottom: 220px;
    /* Make room for expanded options */
    transition: padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-settings-bar.quality-expanded {
    padding-bottom: 50px;
    /* Make room for quality options row */
    transition: padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Options visible when expanded - no delay */
.filter-mega-expanded.expanded.show-options .filter-mega-options {
    max-height: 200px;
    opacity: 1;
    overflow-y: auto;
}

/* ============================================================
   MOBILE / TABLET FILTER PANEL — accordion
   The 7-column grid can't fit, so stack the category headers and
   reveal one category's options at a time when its header is
   tapped (see toggleFilterCategorySearch). Desktop (>1024px) keeps
   the all-columns-visible grid.
   ============================================================ */
@media (max-width: 1024px) {
    .filter-mega-expanded-inner {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .filter-mega-expanded {
        max-height: 65vh;
        overflow-y: auto;
    }

    /* Don't reveal every category at once — only the opened one */
    .filter-mega-expanded.expanded.show-options .filter-mega-options {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
    }

    .filter-mega-expanded.expanded.show-options .filter-mega-column.open .filter-mega-options {
        max-height: 1200px;
        opacity: 1;
        overflow: visible;
    }

    /* Each category is a tappable accordion row */
    .filter-mega-column {
        border: 1.5px solid var(--bar-color-pale, #eee);
        border-radius: 10px;
        overflow: hidden;
    }

    .filter-mega-header {
        justify-content: flex-start;
        max-height: none;
        min-height: 42px;
    }

    /* The big bottom reserve isn't needed — the panel floats and scrolls */
    .page-settings-bar.filter-expanded {
        padding-bottom: 12px;
    }
}

/* Themed scrollbars for each category */
.filter-mega-options::-webkit-scrollbar {
    width: 6px;
}

.filter-mega-options::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.filter-mega-column[data-category="collection"] .filter-mega-options::-webkit-scrollbar-thumb {
    background: var(--color-collection);
    border-radius: 3px;
}

.filter-mega-column[data-category="chatzer"] .filter-mega-options::-webkit-scrollbar-thumb {
    background: var(--color-chatzer);
    border-radius: 3px;
}

.filter-mega-column[data-category="mechaber"] .filter-mega-options::-webkit-scrollbar-thumb {
    background: var(--color-mechaber);
    border-radius: 3px;
}

.filter-mega-column[data-category="verter"] .filter-mega-options::-webkit-scrollbar-thumb {
    background: var(--color-verter);
    border-radius: 3px;
}

.filter-mega-column[data-category="gezungen"] .filter-mega-options::-webkit-scrollbar-thumb {
    background: var(--color-piyut);
    border-radius: 3px;
}

.filter-mega-column[data-category="ritem"] .filter-mega-options::-webkit-scrollbar-thumb {
    background: var(--color-music);
    border-radius: 3px;
}

.filter-mega-column[data-category="skeyl"] .filter-mega-options::-webkit-scrollbar-thumb {
    background: var(--color-music);
    border-radius: 3px;
}

/* Each filter column */
.filter-mega-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Category header - colored based on category */
.filter-mega-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
    max-height: 36px;
    overflow: hidden;
}

.filter-mega-header:hover {
    filter: brightness(0.95);
    transform: scale(1.02);
}

/* Select-all checkbox in category header — pinned to the right edge so it lines
   up with the option checkboxes below; white box with a theme-colored check. */
.filter-mega-selectall {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.filter-mega-selectall input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.92);
    position: relative;
    flex-shrink: 0;
}

.filter-mega-selectall input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 0.5px;
    width: 3px;
    height: 7px;
    border: solid var(--cat-color, #555);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filter-mega-header.searching .filter-mega-selectall {
    display: none;
}

/* Keep header label/tags clear of the right-aligned select-all checkbox, and
   fade the tag row at the edges when it overflows. */
.filter-mega-header-text,
.filter-mega-header-tags {
    padding-right: 22px;
}

.filter-mega-header-tags {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

/* Per-category theme color for the select-all check */
.filter-mega-column[data-category="collection"] { --cat-color: var(--color-collection); }
.filter-mega-column[data-category="chatzer"] { --cat-color: var(--color-chatzer); }
.filter-mega-column[data-category="mechaber"] { --cat-color: var(--color-mechaber); }
.filter-mega-column[data-category="verter"] { --cat-color: var(--color-verter); }
.filter-mega-column[data-category="gezungen"] { --cat-color: var(--color-piyut); }
.filter-mega-column[data-category="ritem"] { --cat-color: var(--color-music); }
.filter-mega-column[data-category="scale"] { --cat-color: var(--color-music); }

/* Search input in category header */
.filter-mega-search {
    display: none;
    width: 100%;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.8em;
    text-align: center;
    outline: none;
}

.filter-mega-header.searching .filter-mega-search {
    display: block;
}

.filter-mega-header.searching .filter-mega-header-text {
    display: none;
}

/* Search icon indicator */
.filter-mega-search-icon {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75em;
    opacity: 0.7;
    color: currentColor;
    font-style: normal;
}

/* Selected filter tags in header */
.filter-mega-header-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-width: 100%;
}

.filter-header-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.3);
    color: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.filter-header-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.filter-header-tag .tag-x {
    font-size: 0.9em;
    opacity: 0.6;
    font-weight: 700;
    margin-right: 2px;
}

.filter-header-tag:hover .tag-x {
    opacity: 1;
}

.filter-mega-header.searching .filter-mega-header-tags {
    display: none;
}

/* Legacy filter mini tags - kept for compatibility */
.filter-mini-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    justify-content: center;
}

.filter-mini-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.7em;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.9);
    color: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-mini-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.filter-mini-tag .tag-x {
    font-size: 0.9em;
    opacity: 0.7;
    font-weight: 700;
}

.filter-mini-tag:hover .tag-x {
    opacity: 1;
}

/* Tags inside main filter button when closed */
.filter-button-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-right: 8px;
}

.filter-button-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-button-tag:hover {
    background: rgba(255, 255, 255, 0.4);
}

.filter-button-tag .tag-x {
    font-size: 0.85em;
    opacity: 0.7;
}

/* Category-specific header colors */
.filter-mega-column[data-category="collection"] .filter-mega-header {
    background: var(--color-collection-pale);
    color: var(--color-collection-dark);
}

.filter-mega-column[data-category="collection"] .filter-mega-header.has-active {
    background: var(--color-collection);
    color: white;
}

.filter-mega-column[data-category="chatzer"] .filter-mega-header {
    background: var(--color-chatzer-pale);
    color: var(--color-chatzer-dark);
}

.filter-mega-column[data-category="chatzer"] .filter-mega-header.has-active {
    background: var(--color-chatzer);
    color: white;
}

.filter-mega-column[data-category="mechaber"] .filter-mega-header {
    background: var(--color-mechaber-pale);
    color: var(--color-mechaber-dark);
}

.filter-mega-column[data-category="mechaber"] .filter-mega-header.has-active {
    background: var(--color-mechaber);
    color: white;
}

.filter-mega-column[data-category="verter"] .filter-mega-header {
    background: var(--color-verter-pale);
    color: var(--color-verter-dark);
}

.filter-mega-column[data-category="verter"] .filter-mega-header.has-active {
    background: var(--color-verter);
    color: white;
}

.filter-mega-column[data-category="gezungen"] .filter-mega-header {
    background: var(--color-piyut-pale);
    color: var(--color-piyut-dark);
}

.filter-mega-column[data-category="gezungen"] .filter-mega-header.has-active {
    background: var(--color-piyut);
    color: white;
}

.filter-mega-column[data-category="ritem"] .filter-mega-header {
    background: var(--color-music-pale);
    color: var(--color-music-dark);
}

.filter-mega-column[data-category="ritem"] .filter-mega-header.has-active {
    background: var(--color-music);
    color: white;
}

.filter-mega-column[data-category="scale"] .filter-mega-header {
    background: var(--color-music-pale);
    color: var(--color-music-dark);
}

.filter-mega-column[data-category="scale"] .filter-mega-header.has-active {
    background: var(--color-music);
    color: white;
}

.filter-mega-header .mega-cat-count {
    background: white;
    color: inherit;
    font-size: 0.75em;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
}

/* Options container */
.filter-mega-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Each option row - white bg, light theme text */
.filter-mega-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.8em;
    cursor: pointer;
    background: white;
    transition: all 0.15s ease;
}

/* Unavailable filter options (cascading filters) */
.filter-mega-option.unavailable {
    opacity: 0.35;
    pointer-events: none;
    order: 999;
}

.filter-mega-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

/* Category-specific checkbox colors */
.filter-mega-column[data-category="collection"] .filter-mega-option input[type="checkbox"] {
    accent-color: var(--color-collection);
}

.filter-mega-column[data-category="chatzer"] .filter-mega-option input[type="checkbox"] {
    accent-color: var(--color-chatzer);
}

.filter-mega-column[data-category="mechaber"] .filter-mega-option input[type="checkbox"] {
    accent-color: var(--color-mechaber);
}

.filter-mega-column[data-category="verter"] .filter-mega-option input[type="checkbox"] {
    accent-color: var(--color-verter);
    /* Green for verter */
}

.filter-mega-column[data-category="gezungen"] .filter-mega-option input[type="checkbox"] {
    accent-color: var(--color-piyut);
}

.filter-mega-column[data-category="ritem"] .filter-mega-option input[type="checkbox"] {
    accent-color: var(--color-music);
    /* Music theme yellow */
}

.filter-mega-column[data-category="scale"] .filter-mega-option input[type="checkbox"] {
    accent-color: var(--color-music);
    /* Music theme yellow */
}

/* Category-specific option colors */
.filter-mega-column[data-category="collection"] .filter-mega-option {
    color: var(--color-collection-light);
}

.filter-mega-column[data-category="collection"] .filter-mega-option:hover {
    background: var(--color-collection-pale);
    color: var(--color-collection-dark);
}

.filter-mega-column[data-category="collection"] .filter-mega-option.selected {
    background: var(--color-collection-pale);
    color: var(--color-collection);
}

.filter-mega-column[data-category="chatzer"] .filter-mega-option {
    color: var(--color-chatzer-light);
}

.filter-mega-column[data-category="chatzer"] .filter-mega-option:hover {
    background: var(--color-chatzer-pale);
    color: var(--color-chatzer-dark);
}

.filter-mega-column[data-category="chatzer"] .filter-mega-option.selected {
    background: var(--color-chatzer-pale);
    color: var(--color-chatzer);
}

.filter-mega-column[data-category="mechaber"] .filter-mega-option {
    color: var(--color-mechaber-light);
}

.filter-mega-column[data-category="mechaber"] .filter-mega-option:hover {
    background: var(--color-mechaber-pale);
    color: var(--color-mechaber-dark);
}

.filter-mega-column[data-category="mechaber"] .filter-mega-option.selected {
    background: var(--color-mechaber-pale);
    color: var(--color-mechaber);
}

.filter-mega-column[data-category="verter"] .filter-mega-option {
    color: var(--color-verter-light);
}

.filter-mega-column[data-category="verter"] .filter-mega-option:hover {
    background: var(--color-verter-pale);
    color: var(--color-verter-dark);
}

.filter-mega-column[data-category="verter"] .filter-mega-option.selected {
    background: var(--color-verter-pale);
    color: var(--color-verter);
}

.filter-mega-column[data-category="gezungen"] .filter-mega-option {
    color: var(--color-piyut-light);
}

.filter-mega-column[data-category="gezungen"] .filter-mega-option:hover {
    background: var(--color-piyut-pale);
    color: var(--color-piyut-dark);
}

.filter-mega-column[data-category="gezungen"] .filter-mega-option.selected {
    background: var(--color-piyut-pale);
    color: var(--color-piyut);
}

.filter-mega-column[data-category="ritem"] .filter-mega-option {
    color: var(--color-music-light);
}

.filter-mega-column[data-category="ritem"] .filter-mega-option:hover {
    background: var(--color-music-pale);
    color: var(--color-music-dark);
}

.filter-mega-column[data-category="ritem"] .filter-mega-option.selected {
    background: var(--color-music-pale);
    color: var(--color-music);
}

.filter-mega-column[data-category="scale"] .filter-mega-option {
    color: var(--color-music-light);
}

.filter-mega-column[data-category="scale"] .filter-mega-option:hover {
    background: var(--color-music-pale);
    color: var(--color-music-dark);
}

.filter-mega-column[data-category="scale"] .filter-mega-option.selected {
    background: var(--color-music-pale);
    color: var(--color-music);
}

/* "More..." link */
.filter-mega-more {
    padding: 4px 8px;
    font-size: 0.75em;
    color: var(--text-muted);
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.filter-mega-more:hover {
    background: var(--color-nigun-pale);
    color: var(--color-nigun-dark);
}

/* Quality Mega-Menu - same animation as Filter Mega-Menu */
.quality-mega-menu {
    position: static;
    height: 48px;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: visible;
    z-index: 50;
}

.quality-mega-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    height: 100%;
    width: 100%;
    cursor: pointer;
    white-space: nowrap;
    color: var(--color-nigun-dark);
    font-weight: 600;
    font-size: 0.9em;
    border-radius: inherit;
    transition: background 0.2s ease, color 0.2s ease;
}

.quality-mega-trigger .audio-icon {
    width: 18px;
    height: 18px;
    stroke: var(--color-nigun);
    transition: stroke 0.2s ease;
}

.quality-mega-trigger .quality-mega-label {
    color: var(--color-nigun-dark);
    font-weight: 600;
    transition: color 0.2s ease;
}

/* Quality count badge - matches filter count */
.quality-mega-trigger .filter-count {
    position: absolute;
    left: 8px;
    background: white;
    color: var(--color-nigun);
    font-size: 0.75em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    transition: opacity 0.2s ease;
    opacity: 1;
}

/* Hover state - subtle effect */
.quality-mega-trigger:hover {
    background: rgba(74, 124, 201, 0.15);
}

/* Active quality state */
.quality-mega-trigger.has-active {
    background: var(--color-nigun);
    color: white;
}

.quality-mega-trigger.has-active .audio-icon {
    stroke: white;
}

.quality-mega-trigger.has-active .quality-mega-label {
    color: white;
}

.quality-mega-menu:has(.quality-mega-trigger.has-active) {
    background: transparent;
}

/* Quality clear button - matches filter clear btn */
.quality-clear-btn {
    position: absolute;
    left: 8px;
    background: white;
    color: var(--color-nigun);
    font-size: 0.75em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

/* On hover: fade count out, fade X in */
.quality-mega-menu:hover .quality-mega-trigger.has-active .filter-count {
    opacity: 0;
}

.quality-mega-menu:hover .quality-mega-trigger.has-active .quality-clear-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Expanded quality panel */
.quality-mega-expanded {
    position: absolute;
    top: 10px;
    left: 20px;
    right: 20px;
    background: white;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 4px 20px rgba(74, 124, 201, 0.25);
    overflow: hidden;
    z-index: 200;

    /* Collapsed state - starts from quality button position + collapsed vertically (clips from bottom) */
    visibility: hidden;
    clip-path: inset(0 95% 100% 5% round 12px);
    /* When closing: collapse clip-path with delay */
    transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
        visibility 0s 0.5s;
}

/* Quality options row */
.quality-mega-expanded-inner {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

/* Single-row quality filter layout */
.quality-mega-expanded-inner.quality-single-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 0;
    width: 100%;
    background: transparent;
    border-radius: 0;
    height: 52px;
    box-shadow: none;
    border: none;
}

/* Quality mode slider within the expanded panel */
.quality-mode-slider {
    flex: 0 0 auto;
    min-width: 130px;
    height: auto;
}

.quality-segmented-group {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    background: #f4f7fa;
    border-radius: 14px;
    box-shadow: inset 0 2px 5px rgba(74, 124, 201, 0.06);
    border: 1px solid rgba(74, 124, 201, 0.08);
}

.quality-filter-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #718096;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Heebo', sans-serif;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.quality-filter-pill:hover {
    color: var(--color-nigun, #4a7cc9);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 6px rgba(74, 124, 201, 0.08);
}

@keyframes pillPopIn {
    0% { transform: scale(0.92); }
    40% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

.quality-filter-pill.active {
    background: white;
    color: var(--color-nigun-dark, #2b4b7c);
    border: 1px solid rgba(74, 124, 201, 0.15);
    box-shadow: 0 4px 12px rgba(74, 124, 201, 0.12), 0 1px 3px rgba(0,0,0,0.04);
    animation: pillPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.quality-filter-pill .pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px; /* RTL, so margin-left space before text */
    opacity: 0.8;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.quality-filter-pill:hover .pill-icon {
    transform: scale(1.15) translateY(-1px);
    opacity: 1;
}

.quality-filter-pill.active .pill-icon {
    opacity: 1;
    transform: scale(1.05);
}

.quality-filter-pill .pill-icon svg {
    height: 18px;
    width: auto;
}

.quality-row-divider {
    width: 2px;
    height: 20px;
    background: rgba(74, 124, 201, 0.15);
    margin: auto 2px;
    flex-shrink: 0;
    border-radius: 2px;
}

/* Each quality option */
.quality-mega-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 10px;
    cursor: pointer;
    background: var(--color-nigun-pale);
    color: var(--color-nigun-dark);
    transition: all 0.2s ease;
    text-align: center;
}

.quality-mega-option:hover {
    background: rgba(74, 124, 201, 0.15);
    transform: scale(1.03);
}

.quality-mega-option.active {
    background: var(--color-nigun);
    color: white;
}

.quality-mega-option .quality-option-stars {
    font-size: 1.1em;
    letter-spacing: 1px;
}

.quality-mega-option .quality-option-label {
    font-size: 0.7em;
    font-weight: 500;
    opacity: 0.9;
}

.quality-mega-menu.expanded {
    z-index: 199;
}

.quality-mega-menu.expanded .quality-mega-trigger {
    opacity: 0;
}

/* When expanded: fully visible */
.quality-mega-expanded.expanded {
    visibility: visible;
    clip-path: inset(0 0 0 0 round 12px);
    transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s;
}

/* Filter Category Overlay Modal */
.filter-category-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.filter-category-overlay.active {
    opacity: 1;
    visibility: visible;
}

.filter-category-modal {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.filter-category-overlay.active .filter-category-modal {
    transform: translateY(0);
}

.filter-category-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-nigun-pale);
}

.filter-category-modal-header h3 {
    margin: 0;
    color: var(--color-nigun-dark);
    font-size: 1.1em;
}

.filter-category-modal-close {
    background: none;
    border: none;
    font-size: 1.5em;
    color: var(--color-nigun);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.filter-category-modal-close:hover {
    background: var(--color-nigun-pale);
}

.filter-category-modal-body {
    padding: 12px;
    overflow-y: auto;
    max-height: 50vh;
}

.filter-category-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-category-option:hover {
    background: var(--color-nigun-pale);
}

.filter-category-option.selected {
    background: var(--color-nigun);
    color: white;
}

.filter-category-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-nigun);
}

.filter-category-option span {
    font-size: 0.95em;
}

/* Slider Control Component */
.slider-control {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
    height: 48px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.slider-control:hover {
    background: transparent;
    box-shadow: none;
}

/* Track container */
.slider-options-track {
    display: flex;
    align-items: stretch;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px;
    gap: 2px;
}

/* Sliding WHITE indicator - visible always, creates the white button effect */
.slider-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        right 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.3s ease,
        box-shadow 0.3s ease;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
}

/* Hover: indicator shrinks to selected position */
.slider-control:hover .slider-indicator {
    top: 3px;
    bottom: 3px;
    width: calc(33.333% - 4px);
    border-radius: 9px;
}

.slider-control:hover .slider-indicator[data-position="0"] {
    right: 3px;
}

.slider-control:hover .slider-indicator[data-position="1"] {
    right: calc(33.333% + 1px);
}

.slider-control:hover .slider-indicator[data-position="2"] {
    right: calc(66.666% - 1px);
}

/* 2-option slider modifier */
/* Active option takes full width (default behavior inherited) */
/* Non-active options hidden by default (inherited from base rules) */

/* On hover: both options visible with 50% width each */
.slider-control.slider-2-options:hover .slider-option {
    flex: 1;
}

.slider-control.slider-2-options:hover .slider-indicator {
    width: calc(50% - 4px);
}

.slider-control.slider-2-options:hover .slider-indicator[data-position="0"] {
    right: 3px;
}

.slider-control.slider-2-options:hover .slider-indicator[data-position="1"] {
    right: calc(50% + 1px);
}

/* Each option slot */
.slider-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 9px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: flex 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s ease,
        box-shadow 0.3s ease;
    background: transparent;
    overflow: hidden;
    flex: 0;
    min-width: 0;
    padding: 0 4px;
}

/* Multi-select slider modifier */
.slider-control.multi-select .slider-indicator {
    display: none;
}

/* All options always visible in multi-select (override base flex:0) */
.slider-control.multi-select .slider-option {
    flex: 1;
    padding: 0 6px;
    color: var(--color-nigun);
}

/* Labels always visible in multi-select (override base max-width:0/opacity:0) */
.slider-control.multi-select .slider-option .slider-option-label {
    max-width: 150px;
    opacity: 1;
    transform: none;
}

.slider-control.multi-select .slider-option.active {
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.slider-control.multi-select:hover .slider-option.active {
    background: white;
}

/* On hover keep labels visible in multi-select */
.slider-control.multi-select:hover .slider-option .slider-option-label {
    max-width: 150px;
    opacity: 1;
    transform: none;
}

.slider-control.multi-select:hover .slider-option:not(.active):hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Default: icon is blue */
.slider-option svg {
    width: 16px;
    height: 16px;
    fill: var(--color-nigun);
    transition: fill 0.3s ease;
    flex-shrink: 0;
    order: -1;
}

/* Active option takes full width by default */
.slider-option.active {
    flex: 1;
    background: transparent;
    transition: flex 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Non-active options: hidden by default */
.slider-option:not(.active) {
    flex: 0;
    padding: 0;
}

/* Default: label is blue */
.slider-option .slider-option-label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-nigun-dark);
    white-space: nowrap;
    overflow: hidden;
    /* Fade-in on collapse: delay the opacity slightly so width expands first */
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease-in-out 0.1s,
        color 0.2s ease,
        transform 0.3s ease-out 0.05s;
    transform: translateX(0);
}

.slider-option.active .slider-option-label {
    max-width: 150px;
    opacity: 1;
    transform: translateX(0);
}

.slider-option:not(.active) .slider-option-label {
    max-width: 0;
    opacity: 0;
    transform: translateX(-5px);
}

/* On hover - all options become equal width */
.slider-control:hover .slider-option {
    flex: 1;
    padding: 0 6px;
}

/* On hover - hide all labels with fade (instant, no delay) */
.slider-control:hover .slider-option .slider-option-label {
    max-width: 0;
    opacity: 0;
    transform: translateX(-5px);
    /* Override delay for quick fade-out on hover */
    transition: max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.15s ease-out,
        color 0.2s ease,
        transform 0.2s ease-out;
}

/* On hover - active icon stays blue (no change) */
.slider-control:hover .slider-option.active svg {
    fill: var(--color-nigun);
}

/* Non-active options on hover: transparent to blend with control bg */
.slider-control:hover .slider-option:not(.active) {
    background: transparent;
}

.slider-control:hover .slider-option:not(.active):hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Settings bar sliders use themed --bar-color */
.page-settings-bar .slider-option svg {
    fill: var(--bar-color);
}

.page-settings-bar .slider-option .slider-option-label {
    color: var(--bar-color-dark);
}

.page-settings-bar .slider-control:hover .slider-option.active svg {
    fill: var(--bar-color);
}

.page-settings-bar .detail-filter-dropdown {
    flex: 1;
}

.page-settings-bar .filter-panel-dropdown {
    flex: 1;
}

.page-settings-bar .detail-filter-current {
    background: white;
    color: var(--bar-color-dark);
    padding: 0 16px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 48px;
    /* Match slider height */
    display: flex;
    /* Centering content */
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.15s ease;
}

.page-settings-bar .detail-filter-current:hover,
.page-settings-bar .detail-filter-dropdown:hover .detail-filter-current {
    background: var(--bar-color);
    color: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.page-settings-bar .filter-panel-btn {
    background: white;
    color: var(--bar-color-dark);
    border: none;
    padding: 0 16px;
    /* Adjusted padding for height */
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 48px;
    /* Match slider height */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.page-settings-bar .filter-panel-btn:hover,
.page-settings-bar .filter-panel-dropdown:hover .filter-panel-btn {
    background: var(--bar-color);
    color: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Search button - base style */
.page-settings-bar .search-trigger-btn {
    background: transparent;
    color: var(--bar-color-dark);
    border: 2px solid var(--bar-color);
    padding: 0 35px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: 600;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

.page-settings-bar .search-trigger-btn:hover {
    background: var(--bar-color);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* When search is active - show the search text */
.page-settings-bar .search-trigger-btn.has-active {
    background: var(--bar-color);
    color: white;
    border: 2px solid var(--bar-color);
    min-width: 140px;
    position: relative;
    font-size: 1em;
}

/* Default state: icon and label visible */
.page-settings-bar .search-trigger-btn .search-icon,
.page-settings-bar .search-trigger-btn .search-label {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Active state: icon and label fade out */
.page-settings-bar .search-trigger-btn.has-active .search-icon,
.page-settings-bar .search-trigger-btn.has-active .search-label {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
}

/* Text display - hidden by default */
.page-settings-bar .search-trigger-btn .search-text-display {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: white;
    color: var(--bar-color);
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.8em;
    font-weight: 600;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

/* Active state: text display fades in */
.page-settings-bar .search-trigger-btn.has-active .search-text-display {
    opacity: 1;
    visibility: visible;
    position: static;
    pointer-events: auto;
}

/* Preparing for fade - set up text display but keep it invisible */
.page-settings-bar .search-trigger-btn.fade-preparing .search-text-display {
    position: static;
    opacity: 0;
    visibility: visible;
}

.page-settings-bar .search-trigger-btn.fade-preparing .search-icon,
.page-settings-bar .search-trigger-btn.fade-preparing .search-label {
    opacity: 0;
    visibility: hidden;
}

.page-settings-bar .search-trigger-btn .clear-search-x {
    display: none;
    position: absolute;
    left: 8px;
    background: white;
    color: var(--bar-color);
    font-size: 0.75em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.page-settings-bar .search-trigger-btn.has-active .clear-search-x {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
}

/* Expandable search container */
.page-settings-bar .expandable-search {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* When search is expanded, fade out the trigger button */
.page-settings-bar .expandable-search.expanded .search-trigger-btn {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* When collapsing, fade in the trigger button */
.page-settings-bar .expandable-search:not(.expanded) .search-trigger-btn {
    opacity: 1;
    transition: opacity 0.3s ease 0.2s;
}

/* The full-width input container */
.page-settings-bar .expandable-search-input-wrapper {
    position: absolute;
    top: 10px;
    left: 20px;
    right: 20px;
    bottom: 10px;
    background: var(--bar-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;

    /* Animation state: Closed */
    visibility: hidden;
    clip-path: inset(0 42% 0 42% round 12px);
    /* Start from center (approx button width) */
    /* Transition for closing: animate clip first, then hide visibility */
    transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.4s;

    z-index: 1000;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.page-settings-bar .expandable-search.expanded .expandable-search-input-wrapper {
    /* Animation state: Open */
    visibility: visible;
    clip-path: inset(0 0 0 0 round 12px);
    /* Transition for opening: show visibility immediately, then animate clip */
    transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

.page-settings-bar .expandable-search-input {
    width: 100%;
    max-width: 800px;
    background: transparent;
    color: white;
    border: none;
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    outline: none;
}

.page-settings-bar .expandable-search-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

.page-settings-bar .expandable-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.page-settings-bar .search-close-btn {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: white;
    font-size: 2em;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.page-settings-bar .search-close-btn:hover {
    opacity: 1;
}

.page-settings-bar .detail-filter-options,
.page-settings-bar .filter-panel-content {
    z-index: 1000;
}

.page-title-filters .detail-filter-dropdown {
    width: 120px;
}

.page-title-filters .filter-panel-dropdown {
    width: 120px;
}

.page-title-filters #searchPanelDropdown {
    width: 150px;
}

.page-title-filters .detail-filter-current {
    background: var(--color-nigun-pale);
    color: var(--color-nigun-dark);
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    justify-content: center;
    text-align: center;
    transition: all 0.15s ease;
}

.page-title-filters .detail-filter-current:hover {
    background: var(--color-nigun);
    color: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.page-title-filters .filter-panel-btn {
    background: var(--color-nigun-pale);
    color: var(--color-nigun-dark);
    border: none;
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.page-title-filters .filter-panel-btn:hover {
    background: var(--color-nigun);
    color: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.page-title-filters .detail-filter-options,
.page-title-filters .filter-panel-content {
    z-index: 1000;
}

/* Make tiny loader white inside page-title */
.page-title .loader-tiny .note {
    color: white;
}

/* Page-specific background colors for page-title */
.page-theme-verter .page-title {
    background: var(--color-verter);
}

.page-theme-zman .page-title {
    background: var(--color-zman);
}

.page-theme-chatzer .page-title {
    background: var(--color-chatzer);
}

.page-theme-nigun .page-title {
    background: var(--color-nigun);
}

.page-theme-playlist .page-title {
    background: var(--color-playlist);
}

.page-theme-collection .page-title {
    background: var(--color-collection);
}

.page-theme-album .page-title {
    background: var(--color-album);
}

.page-theme-document .page-title {
    background: var(--color-document);
}

.page-theme-resource .page-title {
    background: var(--color-resource);
}

.page-theme-music .page-title {
    background: var(--color-music);
}

.page-theme-mechaber .page-title {
    background: var(--color-mechaber);
}

.page-theme-piyut .page-title {
    background: var(--color-piyut);
}

/* Homepage sponsor line inside luach box */
.home-luach-sponsor {
    text-align: center;
    font-size: 0.88em;
    margin-top: 24px;
    line-height: 1.6;
    background: linear-gradient(135deg, var(--primary), var(--primary-deep));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    opacity: 0.65;
    display: block;
}

.home-luach-sponsor strong {
    font-weight: 700;
}

/* Loading Animation for Subtitle */
.page-title .subtitle.loading {
    position: relative;
    color: transparent !important;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    min-width: 100px;
    vertical-align: middle;
}

.page-title .subtitle.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: loadingShimmer 1.5s infinite;
    transform: translateX(-100%);
}

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

/* ============================================================
   MOBILE PAGE TITLE — narrow screens
   The 4em title and 90px top padding overflow on phones, so we
   scale them down to match the shorter mobile header bar.
   ============================================================ */
@media (max-width: 600px) {
    .page-title {
        margin-top: -66px;
        padding: 74px 16px 14px;
        border-radius: 0 0 22px 22px;
    }

    .page-title-bar {
        font-size: 2.4em;
        margin-top: 6px;
    }

    .page-title.is-fixed {
        width: calc(100% - 16px);
        padding: 74px 16px 14px;
        border-radius: 0 0 18px 18px;
    }

    .page-title.is-fixed.main-hidden {
        padding: 8px 16px 10px;
    }

    .page-title.is-fixed.main-hidden .page-title-bar {
        font-size: 1.9em;
    }

    .page-title .subtitle {
        font-size: 1em;
    }

    /* Settings / filter sub-header */
    .page-settings-bar {
        padding: 8px 14px;
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
    }
}
/* Category-themed page title bars - now transparent (using parent background) */

/* Full-width page theme backgrounds */
.page-theme-chatzer,
.page-theme-mechaber,
.page-theme-verter,
.page-theme-zman,
.page-theme-playlist,
.page-theme-collection,
.page-theme-piyut,
.page-theme-nigun,
.page-theme-resource,
.page-theme-document,
.page-theme-album,
.page-theme-music {
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    min-height: calc(100vh - 180px);
}

.page-theme-chatzer {
    background: linear-gradient(180deg, var(--color-chatzer-pale) 0%, color-mix(in srgb, var(--color-chatzer-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.page-theme-mechaber {
    --theme-bg: var(--color-mechaber-pale);
    background: linear-gradient(180deg, var(--color-mechaber-pale) 0%, color-mix(in srgb, var(--color-mechaber-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.page-theme-verter {
    background: linear-gradient(180deg, var(--color-verter-pale) 0%, color-mix(in srgb, var(--color-verter-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.page-theme-zman {
    background: linear-gradient(180deg, var(--color-zman-pale) 0%, color-mix(in srgb, var(--color-zman-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.page-theme-playlist {
    background: linear-gradient(180deg, var(--color-playlist-pale) 0%, color-mix(in srgb, var(--color-playlist-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.page-theme-collection {
    background: linear-gradient(180deg, var(--color-collection-pale) 0%, color-mix(in srgb, var(--color-collection-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.page-theme-piyut {
    background: linear-gradient(180deg, var(--color-piyut-pale) 0%, color-mix(in srgb, var(--color-piyut-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.page-theme-nigun {
    background: linear-gradient(180deg, var(--color-nigun-pale) 0%, color-mix(in srgb, var(--color-nigun-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
    position: relative;

}

/* Floating musical notes container for nigunim page */
.songs-floating-notes {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 50;
    overflow: visible;
}

.songs-floating-notes .note-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    animation: songsNoteFlight linear infinite;
}

.songs-floating-notes .musical-note {
    color: rgba(74, 124, 201, 0.2);
    text-shadow: 0 0 20px rgba(74, 124, 201, 0.1);
    font-size: inherit;
    display: block;
}

/* Wandering animations for notes - reuse hero section's smooth wander animations */
.songs-floating-notes .musical-note.wander-1 {
    animation: wander1 ease-in-out infinite alternate;
}

.songs-floating-notes .musical-note.wander-2 {
    animation: wander2 ease-in-out infinite alternate;
}

.songs-floating-notes .musical-note.wander-3 {
    animation: wander3 ease-in-out infinite alternate;
}

@keyframes songsNoteFlight {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    85% {
        opacity: 0.5;
    }

    100% {
        transform: translate(var(--end-x), var(--end-y)) scale(1.2);
        opacity: 0;
    }
}

/* Ensure content is above the notes but below header */
.page-theme-nigun .page-title {
    z-index: 100;
}

.songs-page-layout {
    position: relative;
    z-index: 50;
}

.page-theme-resource {
    background: linear-gradient(180deg, var(--color-resource-pale) 0%, color-mix(in srgb, var(--color-resource-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.page-theme-document {
    background: linear-gradient(180deg, var(--color-document-pale) 0%, color-mix(in srgb, var(--color-document-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.page-theme-album {
    background: linear-gradient(180deg, var(--color-album-pale) 0%, color-mix(in srgb, var(--color-album-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.page-theme-music {
    background: linear-gradient(180deg, var(--color-music-pale) 0%, color-mix(in srgb, var(--color-music-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

/* Center content within full-width themed pages */
.page-theme-chatzer>*,
.page-theme-mechaber>*,
.page-theme-verter>*,
.page-theme-zman>*,
.page-theme-playlist>*,
.page-theme-collection>*,
.page-theme-nigun>*,
.page-theme-resource>*,
.page-theme-document>*,
.page-theme-album>*,
.page-theme-music>* {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Resources Page */
.category-group {
    margin-bottom: 30px;
}

.category-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.resource-group-header {
    background: linear-gradient(135deg, var(--color-resource-pale) 0%, white 100%);
    border-right: 4px solid var(--color-resource);
}

.document-group-header {
    background: linear-gradient(135deg, var(--color-document-pale) 0%, white 100%);
    border-right: 4px solid var(--color-document);
}

.album-group-header {
    background: linear-gradient(135deg, var(--color-album-pale) 0%, white 100%);
    border-right: 4px solid var(--color-album);
}

.category-group-title {
    font-size: 1.2em;
    font-weight: 600;
    font-family: 'Heebo', sans-serif;
}

.resource-group-header .category-group-title {
    color: var(--color-resource-dark);
}

.document-group-header .category-group-title {
    color: var(--color-document-dark);
}

.album-group-header .category-group-title {
    color: var(--color-album-dark);
}

.category-group-count {
    background: rgba(0, 0, 0, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 500;
}

/* Clickable card elements */
.clickable-header {
    cursor: pointer;
    transition: var(--transition-smooth);
}

.clickable-header:hover {
    filter: brightness(1.1);
}

.clickable-title {
    cursor: pointer;
    transition: var(--transition-smooth);
}

.clickable-title:hover {
    opacity: 0.7;
}

.clickable-cover {
    cursor: pointer;
    transition: var(--transition-smooth);
}

.clickable-cover:hover {
    opacity: 0.85;
}

/* Shared card child border-radius inheritance */
.resource-card> :first-child,
.document-card> :first-child,
.album-card> :first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.resource-card> :last-child,
.document-card> :last-child,
.album-card> :last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* Shared card hover border effect */
.resource-card::after,
.document-card::after,
.album-card::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    border: 2px solid;
    opacity: 0;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    transition: opacity 0.2s ease, top 0s 0.2s, bottom 0s 0.2s, left 0s 0.2s, right 0s 0.2s;
    pointer-events: none;
    box-sizing: border-box;
}

.resource-card:hover::after,
.document-card:hover::after,
.album-card:hover::after {
    opacity: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.resource-card:hover,
.document-card:hover,
.album-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Per-card hover colors */
.resource-card::after {
    border-color: var(--color-resource);
    box-shadow: 0 0 15px rgba(121, 85, 72, 0.15);
}

.document-card::after {
    border-color: var(--color-document);
    box-shadow: 0 0 15px rgba(96, 125, 139, 0.15);
}

.album-card::after {
    border-color: var(--color-album);
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.15);
}


/* Resource hover pulls in tighter than others */
.resource-card:hover::after {
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.resource-card {
    background: white;
    border-radius: 16px;

    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    position: relative;
    /* For pseudo-element */
}

.resource-card-header {
    background: linear-gradient(135deg, var(--color-resource) 0%, var(--color-resource-light) 100%);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-icon {
    font-size: 2.5em;
}

.resource-sort-label {
    font-size: 0.9em;
    font-weight: 600;
    color: white;
    text-align: center;
}

.resource-card-body {
    padding: 15px;
    flex: 1;
}

.resource-title {
    font-weight: 600;
    font-size: 1.1em;
    color: var(--color-resource-dark);
    margin-bottom: 8px;
}

.resource-type {
    display: inline-block;
    background: var(--color-resource-pale);
    color: var(--color-resource-dark);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    margin-bottom: 8px;
}

.resource-chatzer {
    margin-bottom: 8px;
}

.resource-details,
.resource-notes {
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.5;
}

.resource-link-content {
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 6px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.resource-link-content a {
    color: var(--color-resource-dark);
    text-decoration: underline;
    word-break: break-all;
}

.resource-notes-images {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.resource-note-image {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    object-fit: contain;
}

.resource-card-footer {
    padding: 15px;
    border-top: 1px solid var(--color-resource-pale);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resource-link-btn,
.resource-btn-placeholder {
    display: block;
    width: 100%;
    padding: 10px;
    background: var(--color-resource);
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.95em;
    text-align: center;
    transition: var(--transition-smooth);
    box-sizing: border-box;
    min-height: 40px;
}

.resource-btn-placeholder {
    visibility: hidden;
}

.resource-phone-number {
    width: 100%;
    padding: 10px;
    background: var(--color-resource-pale);
    color: var(--color-resource-dark);
    border-radius: 10px;
    font-size: 0.95em;
    text-align: center;
    font-weight: 600;
    white-space: pre-line;
    line-height: 1.6;
}

.resource-link-btn:hover {
    background: var(--color-resource-dark);
}

/* Documents Page */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.document-card {
    background: white;
    border-radius: 16px;

    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    position: relative;
    /* For pseudo-element */
}

.document-card-header {
    background: linear-gradient(135deg, var(--color-document) 0%, var(--color-document-light) 100%);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-preview {
    position: relative;
    width: 100%;
    height: 200px;
    background: #f5f5f5;
    overflow: hidden;
}

.document-preview-frame {
    width: 100%;
    height: calc(100% + 60px);
    border: none;
    pointer-events: none;
    margin-top: -30px;
}

.document-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.document-preview-overlay:hover {
    background: rgba(0, 0, 0, 0.3);
}

.preview-expand-icon {
    font-size: 2em;
    opacity: 0;
    transition: var(--transition-smooth);
}

.document-preview-overlay:hover .preview-expand-icon {
    opacity: 1;
}

.document-icon {
    font-size: 2.5em;
}

.document-sort-label {
    font-size: 0.9em;
    font-weight: 600;
    color: white;
    text-align: center;
}

.document-card-body {
    padding: 15px;
    flex: 1;
}

.document-title {
    font-weight: 600;
    font-size: 1.1em;
    color: var(--color-document-dark);
    margin-bottom: 8px;
}

.document-type {
    display: inline-block;
    background: var(--color-document-pale);
    color: var(--color-document-dark);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    margin-bottom: 5px;
    margin-left: 5px;
}

.document-serie {
    display: inline-block;
    background: var(--color-document-pale);
    color: var(--color-document-dark);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    margin-bottom: 8px;
}

.document-chatzer {
    margin-bottom: 8px;
}

.document-details,
.document-notes {
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.5;
}

.document-card-footer {
    padding: 15px;
    border-top: 1px solid var(--color-document-pale);
}

.document-link-btn,
.document-btn-placeholder {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.95em;
    text-align: center;
    transition: var(--transition-smooth);
    cursor: pointer;
    border: none;
    font-family: inherit;
    box-sizing: border-box;
    min-height: 40px;
    display: block;
}

.document-btn-placeholder {
    visibility: hidden;
}

.document-link-btn {
    background: var(--color-document);
    color: white;
}

.document-link-btn:hover {
    background: var(--color-document-dark);
}

/* PDF Popup */
.pdf-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000002;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px 0 40px;
}

.pdf-popup-overlay.show {
    display: flex;
    animation: attachmentFadeIn 0.25s ease;
}

.pdf-popup-overlay.closing {
    animation: attachmentFadeOut 0.25s ease forwards;
}

.pdf-popup-overlay.show .pdf-popup {
    animation: attachmentPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pdf-popup-overlay.closing .pdf-popup {
    animation: attachmentPopOut 0.22s ease-in forwards;
}

/* Shared entrance/exit for attachment popups (PDF + video) */
@keyframes attachmentFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes attachmentFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes attachmentPopIn {
    from { opacity: 0; transform: scale(0.88) translateY(24px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes attachmentPopOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.92) translateY(16px); }
}

.pdf-popup {
    background: white;
    border-radius: 16px;
    width: 94%;
    max-width: 1150px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pdf-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--color-document);
    color: white;
}

.pdf-popup-title {
    font-weight: 600;
    font-size: 1.1em;
}

.pdf-popup-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1.2em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.pdf-popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.pdf-popup-body {
    flex: 1;
    overflow: hidden;
}

.pdf-popup-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}

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

.powered-by-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 0 14px;
    direction: ltr;
    visibility: hidden;
}

.main-content:has(> *)~.powered-by-footer {
    visibility: visible;
}

.powered-by-footer a {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #1a3a5c;
    font-size: 11px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.powered-by-footer a:hover {
    opacity: 0.8;
}

.powered-by-footer img {
    height: 36px;
    width: auto;
}

.pdf-popup-footer {
    padding: 10px 20px;
    background: #f8fafc;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pdf-download-btn {
    padding: 10px 25px;
    background: var(--color-document);
    color: white;
    border: none;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.95em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.pdf-download-btn:hover {
    background: var(--color-document-dark);
}

/* Albums Page */
.albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.album-card {
    background: white;
    border-radius: 16px;

    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    position: relative;
    /* For pseudo-element */
}

.album-cover {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.album-cover-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--color-album-pale) 0%, var(--color-album-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    color: var(--color-album);
}

.album-card-header {
    background: linear-gradient(135deg, var(--color-album) 0%, var(--color-album-light) 100%);
    padding: 10px 15px;
    text-align: center;
}

.album-producer-label {
    font-size: 0.85em;
    font-weight: 600;
    color: white;
    line-height: 1.4;
}

.album-info {
    padding: 15px;
    flex: 1;
}

.album-title {
    font-weight: 600;
    font-size: 1.05em;
    color: var(--color-album-dark);
    margin-bottom: 5px;
}

.album-producer,
.album-year {
    font-size: 0.85em;
    color: var(--text-muted);
}

.album-chatzer {
    margin: 5px 0;
}

.album-serie {
    display: inline-block;
    background: var(--color-album-pale);
    color: var(--color-album-dark);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    margin-top: 3px;
}

.album-notes {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-top: 5px;
    font-style: italic;
}

.album-actions {
    padding: 0 15px 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.album-booklet-btn,
.album-buy-btn,
.album-btn-placeholder {
    width: 100%;
    padding: 10px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85em;
    text-align: center;
    transition: var(--transition-smooth);
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 38px;
    display: block;
}

.album-btn-placeholder {
    visibility: hidden;
}

.album-booklet-btn {
    background: var(--color-album);
    color: white;
    cursor: pointer;
}

.album-booklet-btn:hover {
    background: var(--color-album-dark);
}

.album-buy-btn {
    background: var(--color-album-pale);
    color: var(--color-album-dark);
    border: 1px solid var(--color-album-light);
}

.album-buy-btn:hover {
    background: var(--color-album-light);
}

/* Playlists Grid - Square Cards */
.playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.playlist-card {
    background: linear-gradient(to bottom, var(--color-playlist) 45%, var(--color-playlist-pale, #fce4ec) 45%);
    border-radius: 16px;
    border: 3px solid var(--color-playlist);
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.08);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}

.playlist-card:hover {
    box-shadow: 0 6px 20px rgba(198, 40, 40, 0.2);
    transform: translateY(-3px);
    border-color: var(--color-playlist-dark);
}

.playlist-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 18px 14px;
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
}

.playlist-title {
    font-weight: 700;
    font-size: 1.2em;
    color: var(--color-playlist-dark, #7b1a1a);
    line-height: 1.4;
    word-break: break-word;
    transition: color 0.3s ease;
}

.playlist-meta {
    font-size: 0.85em;
    color: var(--color-playlist-dark, #7b1a1a);
    opacity: 0.7;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.playlist-card-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 36px;
    gap: 4px;
    flex: 1;
}

/* Playlist play button icon toggle - scale+fade transition like player */
.playlist-play-btn .play-icon,
.playlist-play-btn .pause-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.playlist-play-btn .play-icon {
    opacity: 1;
    transform: scale(1);
}

.playlist-play-btn .pause-icon {
    opacity: 0;
    transform: scale(0.5);
}

.playlist-play-btn.playing .play-icon {
    opacity: 0;
    transform: scale(0.5);
}

.playlist-play-btn.playing .pause-icon {
    opacity: 1;
    transform: scale(1);
}

/* Playing state: overlay fades in with solid color */
.playlist-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-playlist);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    border-radius: inherit;
}

.playlist-card.playing::before {
    opacity: 1;
}

.playlist-card.playing {
    border-color: var(--color-playlist);
}

.playlist-card-header {
    position: relative;
    z-index: 1;
}

.playlist-card.playing .playlist-title {
    color: white;
}

.playlist-card.playing .playlist-meta {
    color: white;
    opacity: 0.85;
}

.playlist-card.playing .playlist-play-btn {
    background: white;
    color: var(--color-playlist-dark);
}

/* Double pulse animation matching minimized player */
@keyframes playlistDoublePulse {
    0% {
        box-shadow: 0 2px 8px rgba(198, 40, 40, 0.08), 0 0 0 0 rgba(198, 40, 40, 0.4);
    }

    20% {
        box-shadow: 0 2px 8px rgba(198, 40, 40, 0.08), 0 0 0 18px rgba(198, 40, 40, 0);
    }

    21% {
        box-shadow: 0 2px 8px rgba(198, 40, 40, 0.08), 0 0 0 0 rgba(198, 40, 40, 0);
    }

    30% {
        box-shadow: 0 2px 8px rgba(198, 40, 40, 0.08), 0 0 0 0 rgba(198, 40, 40, 0.4);
    }

    50% {
        box-shadow: 0 2px 8px rgba(198, 40, 40, 0.08), 0 0 0 18px rgba(198, 40, 40, 0);
    }

    51%,
    100% {
        box-shadow: 0 2px 8px rgba(198, 40, 40, 0.08), 0 0 0 0 rgba(198, 40, 40, 0);
    }
}

body.playing .playlist-card.playing {
    animation: playlistDoublePulse 3s ease-out infinite;
}

body:not(.playing) .playlist-card.playing {
    animation: none;
}

/* ============================================================
   Music Page — rhythm × scale explorer
   ============================================================ */

.music-page {
    direction: rtl;
}

/* Inside the music page, retheme everything that defaults to "nigun"
   blue so it picks up the music page's gold instead. CSS custom-prop
   overrides cascade into every nested .song-item / .song-meta /
   .song-play-btn-new etc. without needing to override each rule. */
.music-module-wrap, .music-page {
    --color-nigun: var(--color-music);
    --color-nigun-light: var(--color-music-light);
    --color-nigun-dark: var(--color-music-dark);
    --color-nigun-pale: var(--color-music-pale);
}

/* Retheme .song-item under .page-theme-music to use gold/rhythm colors */
.page-theme-music .song-item {
    box-shadow: 0 2px 8px rgba(212, 172, 18, 0.1) !important;
}

.page-theme-music .song-item:hover {
    box-shadow: 0 6px 20px rgba(212, 172, 18, 0.35) !important;
}

.page-theme-music .song-item::after {
    border-color: var(--color-music) !important;
    box-shadow: 0 0 15px rgba(212, 172, 18, 0.1) !important;
}

.page-theme-music .song-item.active {
    box-shadow: 0 4px 15px rgba(212, 172, 18, 0.4) !important;
}

.page-theme-music .song-item.active::before {
    background: var(--color-music) !important;
}

.page-theme-music .song-item .song-play-btn-new {
    background: var(--color-music) !important;
}

.page-theme-music .song-item.active .song-play-btn-new {
    background: white !important;
    color: var(--color-music-dark) !important;
    box-shadow: none !important;
}

.page-theme-music .song-item.active .song-play-btn-new:hover {
    background: white !important;
    color: var(--color-music-dark) !important;
    transform: none !important;
}

.page-theme-music .song-item .rating-icon-display {
    color: var(--color-music) !important;
}

.page-theme-music .song-item.active .rating-icon-display {
    color: white !important;
}

/* Filter rails live inside .page-settings-bar so the rhythm page shares
   the same banded sub-header look as playlists / piyutim / collections. */
.music-settings-bar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.music-filters {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Divider between the rhythm rail and the scale rail — uses the
   .zmanim-section-divider markup but recoloured to the music palette.
   Override the inner gradient to lean on --color-music-dark so the
   line reads strongly even on the gold-pale settings-bar background. */
.music-section-divider .zmanim-divider-line {
    background: linear-gradient(90deg, transparent 0%, rgba(212, 172, 18, 0.4) 20%, rgba(212, 172, 18, 0.8) 50%, rgba(212, 172, 18, 0.4) 80%, transparent 100%);
    height: 1px;
}
.music-section-divider {
    padding: 4px 0;
}

.music-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
    justify-content: center;
    align-items: center;
}

/* Music page quality menu theme */
.music-quality-menu .quality-mega-trigger {
    color: var(--color-music-dark);
}
.music-quality-menu .quality-mega-trigger .audio-icon {
    stroke: var(--color-music);
}
.music-quality-menu .quality-mega-trigger .quality-mega-label {
    color: var(--color-music-dark);
}
.music-quality-menu .quality-mega-trigger .filter-count {
    color: var(--color-music);
}
.music-quality-menu .quality-mega-trigger:hover {
    background: rgba(212, 172, 18, 0.15);
}
.music-quality-menu .quality-mega-trigger.has-active {
    background: var(--color-music);
    color: white;
    padding-left: 36px;
    transition: padding 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.music-quality-menu .quality-mega-trigger.has-active .audio-icon {
    stroke: white;
}
.music-quality-menu .quality-mega-trigger.has-active .quality-mega-label {
    color: white;
}
/* Inverted colors when expanded */
.quality-mega-menu.expanded .quality-mega-trigger,
.music-quality-menu.expanded .quality-mega-trigger {
    background: var(--color-music);
    color: white;
}
.music-quality-menu.expanded .quality-mega-trigger .audio-icon {
    stroke: white;
}
.music-quality-menu.expanded .quality-mega-trigger .quality-mega-label {
    color: white;
}

/* Expanded quality panel on music page */
.music-settings-bar .quality-mega-expanded {
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    clip-path: inset(50% 95% 50% 5% round 12px);
}
.music-settings-bar .quality-mega-expanded.expanded {
    clip-path: inset(0 0 0 0 round 12px);
}
.music-settings-bar .quality-mega-expanded-inner {
    box-shadow: 0 4px 20px rgba(212, 172, 18, 0.15);
    border-color: rgba(212, 172, 18, 0.1);
}
.music-settings-bar .quality-segmented-group {
    background: var(--color-music-pale);
    border-color: rgba(212, 172, 18, 0.1);
    box-shadow: inset 0 2px 5px rgba(212, 172, 18, 0.08);
}
.music-settings-bar .quality-filter-pill {
    border-color: transparent;
    color: var(--color-music-dark);
    opacity: 0.65;
}
.music-settings-bar .quality-filter-pill:hover {
    color: var(--color-music);
    opacity: 1;
    box-shadow: 0 2px 6px rgba(212, 172, 18, 0.15);
}
.music-settings-bar .quality-filter-pill.active {
    color: var(--color-music-dark);
    opacity: 1;
    border-color: rgba(212, 172, 18, 0.25);
    box-shadow: 0 4px 12px rgba(212, 172, 18, 0.15), 0 1px 3px rgba(0,0,0,0.04);
}
.music-settings-bar .quality-mode-slider .slider-option.active {
    color: var(--color-music-dark);
}
.music-settings-bar .quality-mode-slider .slider-option.active svg {
    fill: var(--color-music);
}
.music-settings-bar .quality-mode-slider .slider-indicator {
    border-color: rgba(212, 172, 18, 0.2);
    box-shadow: 0 2px 8px rgba(212, 172, 18, 0.15);
}

.music-settings-bar .music-filters {
    transition: opacity 0.3s ease;
}

.music-settings-bar.quality-expanded .music-filters {
    opacity: 0.15;
    pointer-events: none;
}

.music-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: white;
    border: 1px solid var(--color-music-light);
    color: var(--color-music-dark);
    padding: 3px 10px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: background-color 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.22s ease,
                border-color 0.22s ease,
                transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease;
    will-change: transform, background-color;
    line-height: 1.4;
}

.music-pill:hover {
    background: var(--color-music-pale);
    border-color: var(--color-music);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(212, 172, 18, 0.16);
}

.music-pill:active {
    transform: translateY(0) scale(0.94);
}

.music-pill.active {
    background: var(--color-music);
    border-color: var(--color-music-dark);
    color: white;
    transform: scale(1.06);
    box-shadow: 0 3px 10px rgba(212, 172, 18, 0.4);
}

.music-pill.active:hover {
    background: var(--color-music-dark);
    transform: scale(1.06) translateY(-1px);
}

.music-pill-count {
    background: var(--color-music-pale);
    color: var(--color-music-dark);
    padding: 0 6px;
    border-radius: 9px;
    font-size: 0.85em;
    font-weight: 700;
    transition: background-color 0.22s ease, color 0.22s ease;
}

.music-pill.active .music-pill-count {
    background: rgba(255, 255, 255, 0.28);
    color: white;
}

/* Status bar shown when filters are active */
.music-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
}

.music-statusbar-count {
    font-weight: 700;
    color: var(--color-music-dark);
}

.music-statusbar-actions {
    display: flex;
    gap: 8px;
}

.music-play-all-btn,
.music-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 18px;
    padding: 7px 16px;
    font-family: inherit;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.music-play-all-btn {
    position: relative;
    overflow: hidden;
    background: var(--color-music);
    color: white;
}

.music-play-all-btn:hover {
    background: var(--color-music-dark);
    transform: translateY(-1px);
}

.music-play-all-icon-wrapper {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.music-play-all-btn .play-icon,
.music-play-all-btn .pause-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.music-play-all-btn .play-icon {
    opacity: 1;
    transform: scale(1);
}

.music-play-all-btn .pause-icon {
    opacity: 0;
    transform: scale(0.5);
}

.music-play-all-btn.playing .play-icon {
    opacity: 0;
    transform: scale(0.5);
}

.music-play-all-btn.playing .pause-icon {
    opacity: 1;
    transform: scale(1);
}

.music-clear-btn {
    background: #f3f4f6;
    color: var(--text-secondary);
    border: 1px solid #e0e6ed;
}

.music-clear-btn:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

/* Results — group cards when one filter dimension is active */
.music-group {
    background: white;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid #e9ecef;
    margin-bottom: 14px;
    overflow: hidden;
}

.music-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-music-pale);
    color: var(--color-music-dark);
    padding: 11px 16px;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.music-group-header:hover {
    background: rgba(212, 172, 18, 0.12); /* Slightly darker pale gold */
}

.music-group-collapse-icon {
    transition: transform 0.2s ease;
    stroke: currentColor;
    opacity: 0.6;
}

.music-group.collapsed .music-group-collapse-icon {
    transform: rotate(180deg);
}

.music-group.collapsed .music-song-list {
    display: none;
}

.music-group-label {
    font-size: 0.78em;
    font-weight: 600;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.music-group-title {
    flex: 1;
    font-size: 1.05em;
}

.music-group-count {
    background: var(--color-music);
    color: white;
    padding: 2px 11px;
    border-radius: 12px;
    font-size: 0.82em;
}

.music-song-list {
    padding: 8px;
}

/* Song row */
.music-song-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.music-song-item:hover {
    background: var(--color-music-pale);
}

.music-song-item.no-audio .music-song-play {
    opacity: 0.4;
    cursor: not-allowed;
}

.music-song-play {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-music);
    color: white;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.music-song-play:hover:not(:disabled) {
    background: var(--color-music-dark);
    transform: scale(1.08);
}

.music-song-body {
    flex: 1;
    cursor: pointer;
    min-width: 0;
}

.music-song-name {
    font-weight: 600;
    color: var(--text-dark, #1f2937);
    margin-bottom: 4px;
    line-height: 1.3;
}

.music-song-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    cursor: default;
}

/* Mechaber and chatzer tags pulled in via createMetaLinks already get
   their themed colors from .mechaber-tag / .chatzer-tag elsewhere in
   the bundle; reset font-size + padding so they sit tightly inside the
   music-song row. */
.music-song-meta-row .mechaber-tag,
.music-song-meta-row .chatzer-tag {
    font-size: 0.76em;
    padding: 2px 9px;
    border-radius: 11px;
    text-decoration: none;
}

/* Matrix (default view, no filters) */
.music-matrix-wrap {
    background: white;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid #e9ecef;
    padding: 16px;
}

.music-matrix-hint {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--color-music-dark);
    margin-bottom: 14px;
    text-align: center;
    letter-spacing: 0.02em;
}

.music-matrix-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.music-matrix {
    border-collapse: separate;
    border-spacing: 4px;
    width: 100%;
    min-width: 480px;
    direction: rtl;
}

.music-matrix thead th {
    padding: 8px 10px;
    background: var(--color-music-pale);
    color: var(--color-music-dark);
    font-weight: 700;
    border-radius: 8px;
    font-size: 0.85em;
    text-align: center;
    white-space: nowrap;
}

.music-matrix tbody th {
    text-align: right;
    background: var(--color-music-pale);
    color: var(--color-music-dark);
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.88em;
    white-space: nowrap;
}

/* Row + column headers are clickable to filter on just that
   rhythm or scale. Give them a hover affordance. */
.music-matrix-header {
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.music-matrix-header:hover {
    background: var(--color-music) !important;
    color: white !important;
    transform: scale(1.04);
}

.music-matrix-cell {
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-weight: 700;
    color: #705900; /* Dark yellow/brown for better readability while matching theme */
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease;
    min-width: 44px;
    font-size: 0.9em;
}

.music-matrix-cell:hover {
    transform: scale(1.08);
    filter: brightness(0.92);
}

.music-matrix-cell.empty {
    background: transparent; /* Remove gray background */
    color: transparent;
    cursor: default;
}

.music-matrix-cell.empty:hover {
    transform: none;
    filter: none;
}

.music-empty {
    background: white;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    padding: 36px 20px;
    text-align: center;
    color: var(--text-secondary);
}

/* Enter / leave animations for song rows + group cards on the music
   page. Same shape as the search page's keyed update so song-items
   coming in scale up + fade in, and ones being filtered out collapse
   their height and fade out instead of just popping out. */
.music-results .song-item,
.music-results .music-group {
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center top;
    will-change: opacity, transform;
}

.music-results .song-item.music-enter,
.music-results .music-group.music-enter {
    opacity: 0;
    transform: scale(0.85) translateY(8px);
}

.music-results .song-item.music-leave,
.music-results .music-group.music-leave {
    opacity: 0;
    transform: scale(0.85);
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease,
                transform 0.28s ease,
                max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 600px) {
    .music-hero {
        padding: 24px 18px;
    }
    .music-hero-title {
        font-size: 1.6em;
    }
    .music-filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .music-filter-label {
        padding-top: 0;
    }
    .music-statusbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .music-statusbar-actions {
        justify-content: center;
    }
}

.playlist-play-btn {
    width: 60px;
    height: 60px;
    background: white;
    border: none;
    border-radius: 50%;
    color: var(--color-playlist-dark, #7b1a1a);
    font-size: 1.4em;
    cursor: pointer;
    transition: var(--transition-smooth);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.playlist-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

@media (max-width: 600px) {
    .playlists-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .playlist-card-header {
        padding: 14px 10px;
    }

    .playlist-title {
        font-size: 1em;
    }

    .playlist-play-btn {
        width: 50px;
        height: 50px;
    }
}

/* Compact inline playlist cards for detail pages */
.playlists-grid-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: none;
}

.playlists-grid-inline .playlist-card {
    aspect-ratio: 1;
    width: 150px;
    flex-shrink: 0;
}

.playlists-grid-inline .playlist-card-header {
    padding: 12px 8px;
}

.playlists-grid-inline .playlist-title {
    font-size: 0.95em;
}

.playlists-grid-inline .playlist-meta {
    font-size: 0.75em;
}

.playlists-grid-inline .playlist-play-btn {
    width: 40px;
    height: 40px;
    font-size: 1em;
}

.playlists-grid-inline .playlist-play-btn svg {
    width: 22px;
    height: 22px;
}

.playlists-grid-inline .playlist-card-text {
    padding-top: 20px;
    gap: 2px;
}

@media (max-width: 600px) {
    .playlists-grid-inline .playlist-card {
        width: 120px;
    }

    .playlists-grid-inline {
        gap: 8px;
    }

    .playlists-grid-inline .playlist-title {
        font-size: 0.85em;
    }

    .playlists-grid-inline .playlist-play-btn {
        width: 34px;
        height: 34px;
    }
}

/* Category Cards Grid */
/* Zmanim page section divider - fades out at sides */
.zmanim-section-divider {
    grid-column: 1 / -1;
    width: 100%;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zmanim-divider-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--color-zman-light) 20%, var(--color-zman) 50%, var(--color-zman-light) 80%, transparent 100%);
    border-radius: 2px;
    opacity: 0.6;
}

/* Center lone cards on last row of zmanim page */
.page-theme-zman .category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.page-theme-zman .category-card {
    flex: 0 1 calc(33.333% - 14px);
    min-width: 280px;
}

/* First section gets larger cards (up to 2 per row) */
.page-theme-zman .zmanim-section-primary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    grid-column: 1 / -1;
    width: 100%;
}

.page-theme-zman .zmanim-section-primary .category-card {
    flex: 0 1 calc(50% - 10px);
    min-width: 280px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.category-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.category-card> :first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.category-card> :last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* Category-themed card backgrounds and unified hover effect */
.category-card {
    position: relative;
}

/* Unified Hover Effect for Category Cards */
.category-card::after {
    content: '';
    position: absolute;
    border-radius: 16px;
    border: 2px solid transparent;
    /* Color set by theme */
    opacity: 0;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    transition: opacity 0.2s ease, top 0s 0.2s, bottom 0s 0.2s, left 0s 0.2s, right 0s 0.2s;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.category-card:hover::after {
    opacity: 1;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Compact list view for mechabrim - flow/wrap layout */
.mechaber-list-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    justify-content: flex-start;
    grid-column: 1 / -1;
    /* Span full width of grid */
    width: 100%;
}

.mechaber-pill {
    display: inline-flex;
    align-items: center;
    background: var(--color-mechaber);
    border-radius: 50px;
    padding: 6px 44px 6px 16px;
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-mechaber) 30%, transparent);
    white-space: nowrap;
    flex-grow: 0;
    justify-content: center;
    position: relative;
    max-width: 300px;
}

.mechaber-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-mechaber) 40%, transparent);
    filter: brightness(1.1);
}

.mechaber-pill-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.mechaber-pill-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.mechaber-pill-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mechaber-pill-placeholder .mechaber-icon {
    width: 28px;
    height: 28px;
    background: var(--color-mechaber-dark);
    -webkit-mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
    mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
}

.mechaber-pill-name {
    color: white;
    font-weight: 600;
}

/* Compact list view for chatzeros - flow/wrap layout */
.chatzer-list-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    justify-content: flex-start;
    grid-column: 1 / -1;
    width: 100%;
}

.chatzer-pill {
    display: inline-flex;
    align-items: center;
    background: var(--color-chatzer);
    border-radius: 50px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-chatzer) 30%, transparent);
    white-space: nowrap;
    flex-grow: 1;
    justify-content: center;
}

.chatzer-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-chatzer) 40%, transparent);
    filter: brightness(1.1);
}

.chatzer-pill-name {
    color: white;
    font-weight: 600;
}

/* Compact list view for verter - flow/wrap layout */
.verter-list-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    justify-content: flex-start;
    grid-column: 1 / -1;
    width: 100%;
}

.verter-pill {
    display: inline-flex;
    align-items: center;
    background: var(--color-verter);
    border-radius: 50px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-verter) 30%, transparent);
    white-space: nowrap;
    flex-grow: 1;
    justify-content: center;
}

.verter-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-verter) 40%, transparent);
}

.verter-pill-name {
    color: white;
    font-weight: 600;
}
/* Compact list view for playlists - flow/wrap layout */
.playlist-list-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    justify-content: flex-start;
    grid-column: 1 / -1;
    width: 100%;
}

.playlist-pill {
    display: inline-flex;
    align-items: center;
    background: var(--color-playlist);
    border-radius: 50px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-playlist) 30%, transparent);
    white-space: nowrap;
    flex-grow: 1;
    justify-content: center;
}

.playlist-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-playlist) 40%, transparent);
    filter: brightness(1.1);
}

.playlist-pill-name {
    color: white;
    font-weight: 600;
}

/* Compact list view for collections - flow/wrap layout */
.collection-list-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    justify-content: flex-start;
    grid-column: 1 / -1;
    width: 100%;
}

.collection-pill {
    display: inline-flex;
    align-items: center;
    background: var(--color-collection);
    border-radius: 50px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-collection) 30%, transparent);
    white-space: nowrap;
    flex-grow: 1;
    justify-content: center;
}

.collection-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-collection) 40%, transparent);
    filter: brightness(1.1);
}

.collection-pill-name {
    color: white;
    font-weight: 600;
}

/* Compact list view for piyutim - flow/wrap layout */
.piyut-list-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    justify-content: flex-start;
    grid-column: 1 / -1;
    width: 100%;
}

.piyut-pill {
    display: inline-flex;
    align-items: center;
    background: var(--color-piyut);
    border-radius: 50px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-piyut) 30%, transparent);
    white-space: nowrap;
    flex-grow: 1;
    justify-content: center;
}

.piyut-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-piyut) 40%, transparent);
    filter: brightness(1.1);
}

.piyut-pill-name {
    color: white;
    font-weight: 600;
}

/* Mechaber cards styled separately below */

.page-theme-mechaber .category-card::after {
    border-color: var(--color-mechaber);
    box-shadow: 0 0 15px color-mix(in srgb, var(--color-mechaber) 15%, transparent);
}

.page-theme-playlist .category-card {
    background: var(--color-playlist-pale);
    border-color: var(--color-playlist-light);
}

.page-theme-playlist .category-card::after {
    border-color: var(--color-playlist);
    box-shadow: 0 0 15px color-mix(in srgb, var(--color-playlist) 15%, transparent);
}

.page-theme-collection .category-card {
    background: var(--color-collection-pale);
    border-color: var(--color-collection-light);
}

.page-theme-collection .category-card::after {
    border-color: var(--color-collection);
    box-shadow: 0 0 15px color-mix(in srgb, var(--color-collection) 15%, transparent);
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-hover-shadow);
}

.category-card.expanded {
    grid-column: 1 / -1;
    /* border-color: var(--primary);  - Handled by inner content or theme */
}

.category-card.expanded::after {
    opacity: 1;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-color: var(--primary);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.card-image {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--primary-pale);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Mechaber card images styled in redesign section below */

.category-card.has-image .card-header {
    align-items: flex-start;
}

.card-header-text {
    flex: 1;
    min-width: 0;
}

.card-description {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.card-chatzer-tag {
    display: inline-block;
    background: var(--color-chatzer);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.card-chatzer-tag:hover {
    background: var(--color-chatzer-dark);
    transform: scale(1.05);
}

.card-chatzer-display {
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    color: var(--color-chatzer-dark);
    padding: 12px 15px;
    margin-top: 5px;
    cursor: pointer;
    transition: var(--transition-smooth);
    border-top: 1px solid var(--color-chatzer-light);
    background: var(--color-chatzer-pale);
    border-radius: 0 0 14px 14px;
    margin: 0 -20px -20px -20px;
}

.card-chatzer-display:hover {
    background: var(--color-chatzer-light);
    color: var(--color-chatzer-dark);
}

.card-zman-tag {
    display: inline-block;
    background: var(--color-zman);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.card-zman-tag:hover {
    background: var(--color-zman-dark);
    transform: scale(1.05);
}

.card-stats {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Center card-stats on all pages except mechabrim */
.page-theme-verter .card-stats,
.page-theme-piyut .card-stats,
.page-theme-nigun .card-stats,
.page-theme-zman .card-stats,
.page-theme-chatzer .card-stats,
.page-theme-playlist .card-stats,
.page-theme-collection .card-stats,
.page-theme-album .card-stats,
.page-theme-document .card-stats,
.page-theme-resource .card-stats,
.page-theme-music .card-stats {
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* Zman cards: colored stats bar like mechabrim */
.page-theme-zman .card-stats {
    background: var(--color-zman-pale);
    margin: 0 -20px -20px -20px;
    padding: 10px 15px;
    border-radius: 0 0 14px 14px;
    border-top: 1px solid var(--color-zman-light);
    gap: 6px;
}

.page-theme-zman .card-stat {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--color-zman-dark);
}

.page-theme-zman .card-stat-sep {
    font-size: 0.8em;
    color: var(--color-zman);
    opacity: 0.6;
}

.card-stat {
    font-size: 0.8em;
    color: var(--text-muted);
}

.card-stat-sep {
    font-size: 0.7em;
    color: var(--text-muted);
    opacity: 0.5;
}

.card-years {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-top: 2px;
}

.card-stat-zman {
    font-size: 0.8em;
    color: var(--primary);
    font-weight: 600;
}

.section-header {
    color: var(--primary-deep);
    font-size: 1.3em;
    margin: 30px 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-pale);
}

.section-header:first-of-type {
    margin-top: 0;
}

.zman-section {
    background: transparent;
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 25px;
}


.zman-items-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* ====== ZMAN-ITEM-CARD REDESIGN ====== */
.related-item-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: white;
    border-radius: 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    min-width: 180px;
    flex: 0 1 calc(33% - 15px);
}

.related-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.related-item-card .related-item-header {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

.related-item-card .related-item-name {
    font-weight: 600;
    font-size: 1.1em;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-item-card .related-item-stats {
    background: white;
    padding: 8px 12px;
    text-align: center;
    border-top: 2px solid;
}

.related-item-card .related-item-count {
    font-size: 0.8em;
    font-weight: 600;
    margin-top: 0;
}

/* Playlists cards - red gradient */
.zman-section.section-playlists .related-item-card .related-item-header {
    background: linear-gradient(135deg, var(--color-playlist) 0%, var(--color-playlist-dark) 100%);
}

.zman-section.section-playlists .related-item-card .related-item-stats {
    border-color: var(--color-playlist-light);
}

.zman-section.section-playlists .related-item-card .related-item-count {
    color: var(--color-playlist-dark);
}

.zman-section.section-playlists .related-item-card:hover {
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.25);
}

/* Collections cards - brown gradient */
.zman-section.section-collections .related-item-card .related-item-header {
    background: linear-gradient(135deg, var(--color-collection) 0%, var(--color-collection-dark) 100%);
}

.zman-section.section-collections .related-item-card .related-item-stats {
    border-color: var(--color-collection-light);
}

.zman-section.section-collections .related-item-card .related-item-count {
    color: var(--color-collection-dark);
}

.zman-section.section-collections .related-item-card:hover {
    box-shadow: 0 6px 20px rgba(176, 95, 3, 0.25);
}

/* Piyutim cards - green gradient */
.zman-section.section-piyutim .related-item-card .related-item-header {
    background: linear-gradient(135deg, var(--color-piyut) 0%, var(--color-piyut-dark) 100%);
}

.zman-section.section-piyutim .related-item-card .related-item-stats {
    border-color: var(--color-piyut-light);
}

.zman-section.section-piyutim .related-item-card .related-item-count {
    color: var(--color-piyut-dark);
}

.zman-section.section-piyutim .related-item-card:hover {
    box-shadow: 0 6px 20px rgba(46, 139, 46, 0.25);
}

/* Verter cards - gray gradient */
.zman-section.section-verter .related-item-card .related-item-header {
    background: linear-gradient(135deg, var(--color-verter) 0%, var(--color-verter-dark) 100%);
}

.zman-section.section-verter .related-item-card .related-item-stats {
    border-color: var(--color-verter-light);
}

.zman-section.section-verter .related-item-card .related-item-count {
    color: var(--color-verter-dark);
}

.zman-section.section-verter .related-item-card:hover {
    box-shadow: 0 6px 20px rgba(107, 114, 128, 0.25);
}

/* Albums cards in chatzer detail page */
.detail-albums-section .related-item-card .related-item-header {
    background: linear-gradient(135deg, var(--color-album) 0%, var(--color-album-dark) 100%);
}

.detail-albums-section .related-item-card .related-item-stats {
    border-color: var(--color-album-light);
}

.detail-albums-section .related-item-card .related-item-count {
    color: var(--color-album-dark);
}

.detail-albums-section .related-item-card:hover {
    box-shadow: 0 6px 20px rgba(0, 131, 143, 0.25);
}

/* Album name marquee scrolling for long names */
.detail-albums-section .related-item-name {
    -webkit-line-clamp: unset;
    display: block;
    white-space: nowrap;
    overflow: hidden;
}

.detail-albums-section .related-item-name.marquee span {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: albumMarquee var(--marquee-duration, 8s) linear infinite;
}

@keyframes albumMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

.related-item-cover {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* Documents cards in chatzer detail page */
.detail-documents-section .related-item-card .related-item-header {
    background: linear-gradient(135deg, var(--color-document) 0%, var(--color-document-dark) 100%);
}

.detail-documents-section .related-item-card .related-item-stats {
    border-color: var(--color-document-light);
}

.detail-documents-section .related-item-card .related-item-count {
    color: var(--color-document-dark);
}

.detail-documents-section .related-item-card:hover {
    box-shadow: 0 6px 20px rgba(0, 160, 176, 0.25);
}

/* Mobile styles for related-item-card */
@media (max-width: 480px) {
    .zman-items-grid {
        gap: 10px;
    }

    .related-item-card .related-item-header {
        padding: 10px 12px;
        min-height: 45px;
    }

    .related-item-card .related-item-name {
        font-size: 0.95em;
    }
}

/* Search Results Page */
.search-section {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    margin-bottom: 20px;
}

.search-results-searchbar {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

.search-results-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    direction: rtl;
    transition: var(--transition-smooth);
}

.search-results-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-pale);
}

.search-results-btn {
    padding: 12px 24px;
    background: var(--gradient-main);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.search-results-btn:hover {
    background: var(--gradient-main-dark);
}

.search-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bg-light);
}

.search-section-header h3 {
    margin: 0;
    font-size: 1.1em;
}

.see-all-btn {
    background: none;
    border: none;
    color: var(--color-nigun);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
}

.see-all-btn:hover {
    text-decoration: underline;
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-songs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-songs-list .song-item {
    margin-bottom: 0;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: var(--bg-light);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.search-result-item.nigun-result {
    padding: 0;
    gap: 0;
}

.search-result-item .result-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    flex: 1;
    cursor: pointer;
}

.search-result-item .result-detail-btn {
    padding: 8px 15px;
    background: var(--color-nigun-pale);
    border: none;
    border-radius: 0 10px 10px 0;
    color: var(--color-nigun);
    font-family: inherit;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-smooth);
    height: 100%;
}

.search-result-item .result-detail-btn:hover {
    background: var(--color-nigun);
    color: white;
}

.search-result-item:hover {
    background: var(--color-nigun-pale);
    transform: translateX(-5px);
}

.result-play {
    color: var(--color-nigun);
    font-size: 1.2em;
    opacity: 0;
    transition: var(--transition-smooth);
}

.search-result-item:hover .result-play {
    opacity: 1;
}

.result-icon {
    font-size: 1.3em;
    opacity: 0.7;
}

.result-info {
    flex: 1;
}

.result-name {
    font-weight: 600;
    color: var(--text-dark);
}

.result-meta {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 2px;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.search-result-card {
    padding: 15px;
    background: var(--bg-light);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition-smooth);
    border-right: 4px solid transparent;
}

.search-result-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.search-result-card .result-name {
    font-size: 0.95em;
    margin-bottom: 5px;
}

.search-result-card .result-count {
    font-size: 0.8em;
    color: var(--text-muted);
}

/* Search result card category colors */
.search-result-card.result-chatzer .result-name {
    color: var(--color-chatzer-dark);
}

.search-result-card.result-chatzer:hover {
    background: var(--color-chatzer-pale);
}

.search-result-card.result-mechaber .result-name {
    color: var(--color-mechaber-dark);
}

.search-result-card.result-mechaber:hover {
    background: var(--color-mechaber-pale);
}

.search-result-card.result-nigun .result-name {
    color: var(--color-nigun-dark);
}

.search-result-card.result-nigun:hover {
    background: var(--color-nigun-pale);
}

.search-result-card.result-verter .result-name {
    color: var(--color-verter-dark);
}

.search-result-card.result-verter:hover {
    background: var(--color-verter-pale);
}

.search-result-card.result-zman .result-name {
    color: var(--color-zman-dark);
}

.search-result-card.result-zman:hover {
    background: var(--color-zman-pale);
}

.search-result-card.result-playlist .result-name {
    color: var(--color-playlist-dark);
}

.search-result-card.result-playlist:hover {
    background: var(--color-playlist-pale);
}

.search-result-card.result-collection .result-name {
    color: var(--color-collection-dark);
}

.search-result-card.result-collection:hover {
    background: var(--color-collection-pale);
}

.search-result-card.result-resource .result-name {
    color: var(--color-resource-dark);
}

.search-result-card.result-resource:hover {
    background: var(--color-resource-pale);
}

.search-result-card.result-document .result-name {
    color: var(--color-document-dark);
}

.search-result-card.result-document:hover {
    background: var(--color-document-pale);
}

.search-result-card.result-album .result-name {
    color: var(--color-album-dark);
}

.search-result-card.result-album:hover {
    background: var(--color-album-pale);
}

.search-result-card.result-music .result-name {
    color: var(--color-music-dark);
}

.search-result-card.result-music:hover {
    background: var(--color-music-pale);
}

/* Universal Hover Effect for Search Result Cards */
.search-result-card {
    position: relative;
}

.search-result-card::after {
    content: '';
    position: absolute;
    border-radius: 10px;
    border: 2px solid transparent;
    /* Set by category class */
    opacity: 0;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    transition: opacity 0.2s ease, top 0s 0.2s, bottom 0s 0.2s, left 0s 0.2s, right 0s 0.2s;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search-result-card:hover::after {
    opacity: 1;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Assign border colors based on result type */
.search-result-card.result-chatzer::after {
    border-color: var(--color-chatzer);
    box-shadow: 0 0 10px rgba(156, 91, 181, 0.15);
}

.search-result-card.result-mechaber::after {
    border-color: var(--color-mechaber);
    box-shadow: 0 0 10px rgba(239, 83, 80, 0.15);
}

.search-result-card.result-nigun::after {
    border-color: var(--color-nigun);
    box-shadow: 0 0 10px rgba(74, 124, 201, 0.15);
}

.search-result-card.result-verter::after {
    border-color: var(--color-verter);
    box-shadow: 0 0 10px rgba(255, 167, 38, 0.15);
}

.search-result-card.result-zman::after {
    border-color: var(--color-zman);
    box-shadow: 0 0 10px rgba(66, 165, 245, 0.15);
}

.search-result-card.result-playlist::after {
    border-color: var(--color-playlist);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.15);
}

.search-result-card.result-collection::after {
    border-color: var(--color-collection);
    box-shadow: 0 0 10px rgba(176, 95, 3, 0.15);
}

.search-result-card.result-resource::after {
    border-color: var(--color-resource);
    box-shadow: 0 0 10px rgba(121, 85, 72, 0.15);
}

.search-result-card.result-document::after {
    border-color: var(--color-document);
    box-shadow: 0 0 10px rgba(96, 125, 139, 0.15);
}

.search-result-card.result-album::after {
    border-color: var(--color-album);
    box-shadow: 0 0 10px rgba(233, 30, 99, 0.15);
}

.search-result-card.result-music::after {
    border-color: var(--color-music);
    box-shadow: 0 0 10px rgba(67, 74, 84, 0.15);
}

.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.no-results-icon {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.5;
}

.no-results-hint {
    font-size: 0.9em;
    margin-top: 10px;
}

.card-meta {
    font-size: 0.8em;
    color: var(--primary);
    margin-bottom: 8px;
    padding: 4px 10px;
    background: var(--primary-pale);
    border-radius: 8px;
    display: inline-block;
}

.card-icon {
    display: none;
}

/* Show card icon for mechabrim as circular placeholder */
.page-theme-mechaber .card-icon {
    display: flex;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-mechaber-pale);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-theme-mechaber .card-icon .mechaber-icon {
    width: 111px;
    height: 165px;
    background-color: var(--color-mechaber);
    -webkit-mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
    mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
}

/* Hide icon when image loads successfully (inline style override) */
.page-theme-mechaber .card-icon[style*="display:none"],
.page-theme-mechaber .card-icon[style*="display: none"] {
    display: none !important;
}

.card-title {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--primary-deep);
    flex: 1;
    text-align: center;
}

/* Category-specific dark colors for card titles (playlist, album, document, resource only) */
.page-theme-playlist .card-title {
    color: var(--color-playlist-dark, #4a148c);
}

.page-theme-collection .card-title {
    color: var(--color-collection-dark, #7A4202);
}

.page-theme-album .card-title {
    color: var(--color-album-dark, #b8860b);
}

.page-theme-document .card-title {
    color: var(--color-document-dark, #00695c);
}

.page-theme-resource .card-title {
    color: var(--color-resource-dark, #c62828);
}

/* Mechaber formal name (טיטל + ערשטע נאמען + לעצטע נאמען - smaller, lighter) */
.card-mechaber-formal {
    display: block;
    font-size: 0.75em;
    font-weight: 400;
    color: var(--color-mechaber);
    margin-bottom: 3px;
}

/* Mechaber known name (גערופן + פלאץ + סופיקס - bigger, darker) */
.card-mechaber-known {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color-mechaber-dark);
}
/* ====== CATEGORY CARD THEME VARIABLES ====== */
/* Each page-theme defines its color tokens; shared rules below consume them */
.page-theme-mechaber {
    --card-color: var(--color-mechaber);
    --card-color-dark: var(--color-mechaber-dark);
    --card-color-light: var(--color-mechaber-light);
    --card-color-pale: var(--color-mechaber-pale);
    --card-shadow: rgba(156, 91, 181, 0.15);
    --card-hover-shadow: rgba(196, 53, 168, 0.25);
    --card-glow: rgba(196, 53, 168, 0.3);
}

.page-theme-chatzer {
    --card-color: var(--color-chatzer);
    --card-color-dark: var(--color-chatzer-dark);
    --card-color-light: var(--color-chatzer-light);
    --card-color-pale: var(--color-chatzer-pale);
    --card-shadow: rgba(156, 91, 181, 0.15);
    --card-hover-shadow: rgba(156, 91, 181, 0.25);
    --card-glow: rgba(156, 91, 181, 0.3);
}

.page-theme-verter {
    --card-color: var(--color-verter);
    --card-color-dark: var(--color-verter-dark);
    --card-color-light: var(--color-verter-light);
    --card-color-pale: var(--color-verter-pale);
    --card-shadow: rgba(107, 114, 128, 0.15);
    --card-hover-shadow: rgba(107, 114, 128, 0.25);
    --card-glow: rgba(107, 114, 128, 0.3);
}

.page-theme-zman {
    --card-color: var(--color-zman);
    --card-color-dark: var(--color-zman-dark);
    --card-color-light: var(--color-zman-light);
    --card-color-pale: var(--color-zman-pale);
    --card-shadow: rgba(233, 106, 27, 0.15);
    --card-hover-shadow: rgba(233, 106, 27, 0.25);
    --card-glow: rgba(233, 106, 27, 0.3);
}

.page-theme-piyut {
    --card-color: var(--color-piyut);
    --card-color-dark: var(--color-piyut-dark);
    --card-color-light: var(--color-piyut-light);
    --card-color-pale: var(--color-piyut-pale);
    --card-shadow: rgba(46, 139, 46, 0.15);
    --card-hover-shadow: rgba(46, 139, 46, 0.25);
    --card-glow: rgba(46, 139, 46, 0.3);
}

.page-theme-collection {
    --card-color: var(--color-collection);
    --card-color-dark: var(--color-collection-dark);
    --card-color-light: var(--color-collection-light);
    --card-color-pale: var(--color-collection-pale);
    --card-shadow: rgba(176, 95, 3, 0.15);
    --card-hover-shadow: rgba(176, 95, 3, 0.25);
    --card-glow: rgba(176, 95, 3, 0.3);
}

/* ====== SHARED CATEGORY CARD STYLES ====== */
/* Grid */
.page-theme-mechaber .category-grid,
.page-theme-chatzer .category-grid,
.page-theme-verter .category-grid,
.page-theme-zman .category-grid,
.page-theme-piyut .category-grid,
.page-theme-collection .category-grid {
    align-items: stretch;
}

.page-theme-mechaber .category-grid {
    grid-auto-rows: minmax(130px, auto);
}

.page-theme-chatzer .category-grid,
.page-theme-verter .category-grid,
.page-theme-zman .category-grid,
.page-theme-piyut .category-grid,
.page-theme-collection .category-grid {
    grid-auto-rows: minmax(100px, auto);
}

/* Card base */
.page-theme-mechaber .category-card,
.page-theme-chatzer .category-card,
.page-theme-verter .category-card,
.page-theme-zman .category-card,
.page-theme-piyut .category-card,
.page-theme-collection .category-card {
    padding: 0;
    background: white;
    border: none;
    box-shadow: 0 4px 20px var(--card-shadow);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
}

.page-theme-mechaber .category-card {
    min-height: 130px;
}

.page-theme-chatzer .category-card,
.page-theme-verter .category-card,
.page-theme-zman .category-card,
.page-theme-piyut .category-card,
.page-theme-collection .category-card {
    min-height: 100px;
}

/* Card header */
.page-theme-mechaber .category-card .card-header,
.page-theme-chatzer .category-card .card-header,
.page-theme-verter .category-card .card-header,
.page-theme-zman .category-card .card-header,
.page-theme-piyut .category-card .card-header,
.page-theme-collection .category-card .card-header {
    margin: 0;
    gap: 0;
    align-items: stretch;
    flex: 1;
}

.page-theme-mechaber .category-card .card-header {
    flex-direction: row-reverse;
}

.page-theme-chatzer .category-card .card-header,
.page-theme-verter .category-card .card-header,
.page-theme-zman .category-card .card-header,
.page-theme-piyut .category-card .card-header,
.page-theme-collection .category-card .card-header {
    flex-direction: column;
}

/* Banner / header-text */
.page-theme-mechaber .category-card .card-header-text,
.page-theme-chatzer .category-card .card-header-text,
.page-theme-verter .category-card .card-header-text,
.page-theme-zman .category-card .card-header-text,
.page-theme-piyut .category-card .card-header-text,
.page-theme-collection .category-card .card-header-text {
    flex: 1;
    background: linear-gradient(135deg, var(--card-color) 0%, var(--card-color-dark) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-theme-mechaber .category-card .card-header-text {
    padding: 12px 15px;
    height: 150px;
    max-height: 150px;
    overflow: hidden;
}

.page-theme-chatzer .category-card .card-header-text,
.page-theme-verter .category-card .card-header-text,
.page-theme-zman .category-card .card-header-text,
.page-theme-piyut .category-card .card-header-text,
.page-theme-collection .category-card .card-header-text {
    padding: 15px 20px;
    align-items: center;
    min-height: 70px;
}

/* Card title (chatzer, verter, zman, piyut) */
.page-theme-chatzer .category-card .card-title,
.page-theme-verter .category-card .card-title,
.page-theme-zman .category-card .card-title,
.page-theme-piyut .category-card .card-title,
.page-theme-collection .category-card .card-title {
    color: white;
    font-size: 1.4em;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    text-align: center;
}

/* Stats at bottom */
.page-theme-mechaber .category-card .card-stats,
.page-theme-chatzer .category-card .card-stats,
.page-theme-verter .category-card .card-stats,
.page-theme-zman .category-card .card-stats,
.page-theme-piyut .category-card .card-stats,
.page-theme-collection .category-card .card-stats {
    background: white;
    margin: 0;
    padding: 10px 15px;
    justify-content: center;
    gap: 15px;
    border-top: 2px solid var(--card-color-light);
    flex-wrap: wrap;
    min-height: 40px;
    flex-shrink: 0;
}

.page-theme-mechaber .category-card .card-stat,
.page-theme-chatzer .category-card .card-stat,
.page-theme-verter .category-card .card-stat,
.page-theme-zman .category-card .card-stat,
.page-theme-piyut .category-card .card-stat,
.page-theme-collection .category-card .card-stat {
    color: var(--card-color-dark);
    font-weight: 600;
    font-size: 0.85em;
}

/* Bullet dividers between stats */
.page-theme-mechaber .category-card .card-stats {
    gap: 0;
}

.page-theme-mechaber .category-card .card-stat+.card-stat::before {
    content: '·';
    margin: 0 8px;
    color: var(--color-mechaber);
    font-weight: 900;
    font-size: 1.3em;
    line-height: 0;
    vertical-align: middle;
}

/* Hover effects */
.page-theme-mechaber .category-card::after,
.page-theme-chatzer .category-card::after,
.page-theme-verter .category-card::after,
.page-theme-zman .category-card::after,
.page-theme-piyut .category-card::after,
.page-theme-collection .category-card::after {
    border-color: var(--card-color);
    box-shadow: 0 0 20px var(--card-glow);
    border-radius: 16px;
}

.page-theme-mechaber .category-card:hover,
.page-theme-chatzer .category-card:hover,
.page-theme-verter .category-card:hover,
.page-theme-zman .category-card:hover,
.page-theme-piyut .category-card:hover,
.page-theme-collection .category-card:hover {
    box-shadow: 0 8px 30px var(--card-hover-shadow);
}

/* ====== MECHABER-SPECIFIC STYLES ====== */
.page-theme-mechaber .category-card .card-mechaber-formal {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8em;
    margin-bottom: 4px;
}

.page-theme-mechaber .category-card .card-mechaber-known {
    color: white;
    font-size: 1.1em;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.page-theme-mechaber .category-card .card-years {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75em;
    margin-top: 5px;
    text-align: center;
    width: 100%;
}

/* Chatzer tags (purple) attached to mechaber banner */
.page-theme-mechaber .category-card .card-tags {
    margin-top: 8px;
    gap: 5px;
    justify-content: center;
}

.page-theme-mechaber .category-card .card-chatzer-tag {
    background: var(--color-chatzer);
    color: white;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.page-theme-mechaber .category-card .card-chatzer-tag:hover {
    background: var(--color-chatzer-dark);
    transform: none;
}

/* Image section */
.page-theme-mechaber .category-card .card-image {
    width: 110px;
    height: 150px;
    max-height: 150px;
    border-radius: 0;
    border: none;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: none;
}

.page-theme-mechaber .category-card .card-icon {
    width: 110px;
    height: 150px;
    border-radius: 0;
    background: var(--card-color-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em;
    flex-shrink: 0;
}

.page-theme-mechaber .category-card .card-stat-icon {
    margin-left: 3px;
}

/* ====== PIYUT-SPECIFIC: Zman tags inside piyut cards ====== */
.page-theme-piyut .category-card .card-tags,
.page-theme-collection .category-card .card-tags {
    margin-top: 8px;
    gap: 5px;
    justify-content: center;
}

.page-theme-piyut .category-card .card-zman-tag,
.page-theme-collection .category-card .card-zman-tag {
    background: var(--color-zman);
    color: white;
    font-size: 0.75em;
    padding: 3px 10px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.page-theme-piyut .category-card .card-zman-tag:hover,
.page-theme-collection .category-card .card-zman-tag:hover {
    background: var(--color-zman-dark);
    transform: scale(1.05);
}

/* ====== MOBILE STYLES ====== */
@media (max-width: 480px) {
    .page-theme-mechaber .category-card .card-image {
        width: 75px;
        min-height: 80px;
    }

    .page-theme-mechaber .category-card .card-icon {
        width: 75px;
        min-height: 80px;
        font-size: 1.6em;
    }

    .page-theme-mechaber .category-card .card-header-text {
        padding: 10px 12px;
        min-height: 80px;
    }

    .page-theme-mechaber .category-card .card-mechaber-known {
        font-size: 0.95em;
    }

    .page-theme-mechaber .category-card .card-mechaber-formal {
        font-size: 0.7em;
    }

    .page-theme-chatzer .category-card .card-header-text,
    .page-theme-verter .category-card .card-header-text,
    .page-theme-zman .category-card .card-header-text,
    .page-theme-piyut .category-card .card-header-text,
    .page-theme-collection .category-card .card-header-text {
        padding: 12px 15px;
        min-height: 60px;
    }

    .page-theme-chatzer .category-card .card-title,
    .page-theme-verter .category-card .card-title,
    .page-theme-zman .category-card .card-title,
    .page-theme-piyut .category-card .card-title,
    .page-theme-collection .category-card .card-title {
        font-size: 1.2em;
    }
}

/* ====== GENERIC CARD ELEMENTS ====== */
.card-count {
    background: var(--gradient-main);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: 600;
}

.card-expand-icon {
    font-size: 1.2em;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.card-arrow {
    font-size: 1.2em;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.category-card:hover .card-arrow {
    color: var(--primary);
    transform: translateX(-5px);
}

.category-card.expanded .card-expand-icon {
    transform: rotate(180deg);
    color: var(--primary);
}
/* Detail Page Styles */
.detail-page {
    margin: 0 auto;
}

/* Detail pages with page-theme classes need full-width override */
.detail-page.page-theme-album,
.detail-page.page-theme-document,
.detail-page.page-theme-resource {
    max-width: none;
}

.detail-page.page-theme-album>*,
.detail-page.page-theme-document>*,
.detail-page.page-theme-resource>* {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Nigun Detail Page */
.nigun-detail-page {
    max-width: none;
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    /* Match nigunim main page gradient background */
    background: linear-gradient(180deg, var(--color-nigun-pale) 0%, color-mix(in srgb, var(--color-nigun-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.nigun-detail-page>*:not(.back-button):not(.fullpage-more):not(.nigun-detail-notes):not(.detail-edit-btn):not(.nigun-detail-siman-bar) {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
}

/* Siman bar hugs its text — opt it out of the 700px-wide column above. */
.nigun-detail-page > .nigun-detail-siman-bar {
    position: relative;
    z-index: 10;
}

/* Floating notes container for nigun detail page - full viewport */
.nigun-detail-notes {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.nigun-detail-notes .note-wrapper {
    position: absolute;
    animation: songsNoteFlight linear infinite;
}

.nigun-detail-notes .musical-note {
    color: rgba(74, 124, 201, 0.15);
    text-shadow: 0 0 20px rgba(74, 124, 201, 0.1);
    font-size: inherit;
    display: block;
}

.nigun-detail-notes .musical-note.wander-1 {
    animation: wander1 ease-in-out infinite alternate;
}

.nigun-detail-notes .musical-note.wander-2 {
    animation: wander2 ease-in-out infinite alternate;
}

.nigun-detail-notes .musical-note.wander-3 {
    animation: wander3 ease-in-out infinite alternate;
}

.nigun-detail-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 25px;
    color: white;
}

.nigun-detail-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em;
    flex-shrink: 0;
}

.nigun-detail-title-section {
    flex: 1;
}

.nigun-detail-title {
    font-size: 1.8em;
    margin: 0 0 12px 0;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
}

.nigun-mechaber-tag {
    margin-bottom: 10px;
    text-align: center;
}

.nigun-chatzer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.nigun-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9em;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
}

.nigun-tag.mechaber-tag {
    background: var(--color-mechaber);
    color: white;
}

.nigun-tag.mechaber-tag:hover {
    background: var(--color-mechaber-dark);
}

.nigun-tag.chatzer-tag {
    background: var(--color-chatzer);
    color: white;
}

.nigun-tag.chatzer-tag:hover {
    background: var(--color-chatzer-dark);
}

/* Standalone chatzer tag for use in cards */
.chatzer-tag {
    display: inline-block;
    background: var(--color-chatzer);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.chatzer-tag:hover {
    background: var(--color-chatzer-dark);
    transform: scale(1.05);
    position: relative;
    z-index: 100;
}

/* Standalone mechaber tag for use in cards */
.mechaber-tag {
    display: inline-block;
    background: var(--color-mechaber);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.mechaber-tag:hover {
    background: var(--color-mechaber-dark);
    transform: scale(1.05);
    position: relative;
    z-index: 100;
}

/* Standalone verter tag for use in cards */
.verter-tag {
    display: inline-block;
    background: var(--color-verter);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.verter-tag:hover {
    background: var(--color-verter-dark);
    transform: scale(1.05);
}

/* Standalone zman tag for use in cards */
.zman-tag {
    display: inline-block;
    background: var(--color-zman);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.zman-tag:hover {
    background: var(--color-zman-dark);
    transform: scale(1.05);
}

/* Standalone playlist tag for use in cards */
.playlist-tag {
    display: inline-block;
    background: var(--color-playlist);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.playlist-tag:hover {
    background: var(--color-playlist-dark);
    transform: scale(1.05);
}

/* Standalone nigun tag for use in cards */
.nigun-tag-pill {
    display: inline-block;
    background: var(--color-nigun);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.nigun-tag-pill:hover {
    background: var(--color-nigun-dark);
    transform: scale(1.05);
}

/* Standalone album tag for use in cards */
.album-tag {
    display: inline-block;
    background: var(--color-album);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.album-tag:hover {
    background: var(--color-album-dark);
    transform: scale(1.05);
}

/* Standalone document tag for use in cards */
.document-tag {
    display: inline-block;
    background: var(--color-document);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.document-tag:hover {
    background: var(--color-document-dark);
    transform: scale(1.05);
}

/* Standalone resource tag for use in cards */
.resource-tag {
    display: inline-block;
    background: var(--color-resource);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.resource-tag:hover {
    background: var(--color-resource-dark);
    transform: scale(1.05);
}

/* Theme inheritance for SONG ITEMS inside detail pages/modals */
/* Make song item play buttons, borders, backgrounds, and text use the parent theme color */

/* Mechaber theme */
.theme-mechaber .song-item .song-play-btn-new {
    background: var(--color-mechaber) !important;
}

.theme-mechaber .song-item .song-play-btn-new:hover {
    background: var(--color-mechaber-dark) !important;
}

.theme-mechaber .song-item {
    border-color: var(--color-mechaber) !important;
    background: var(--color-mechaber-pale) !important;
}

.theme-mechaber .song-item:hover {
    border-color: var(--color-mechaber-dark) !important;
}

.theme-mechaber .song-item .song-name {
    color: var(--color-mechaber-dark) !important;
}

.theme-mechaber .song-item .song-number {
    color: var(--color-mechaber) !important;
}

/* Chatzer theme */
.theme-chatzer .song-item .song-play-btn-new {
    background: var(--color-chatzer) !important;
}

.theme-chatzer .song-item .song-play-btn-new:hover {
    background: var(--color-chatzer-dark) !important;
}

.theme-chatzer .song-item {
    border-color: var(--color-chatzer) !important;
    background: var(--color-chatzer-pale) !important;
}

.theme-chatzer .song-item:hover {
    border-color: var(--color-chatzer-dark) !important;
}

.theme-chatzer .song-item .song-name {
    color: var(--color-chatzer-dark) !important;
}

.theme-chatzer .song-item .song-number {
    color: var(--color-chatzer) !important;
}

/* Verter theme */
.theme-verter .song-item .song-play-btn-new {
    background: var(--color-verter) !important;
}

.theme-verter .song-item .song-play-btn-new:hover {
    background: var(--color-verter-dark) !important;
}

.theme-verter .song-item {
    border-color: var(--color-verter) !important;
    background: var(--color-verter-pale) !important;
}

.theme-verter .song-item:hover {
    border-color: var(--color-verter-dark) !important;
}

.theme-verter .song-item .song-name {
    color: var(--color-verter-dark) !important;
}

.theme-verter .song-item .song-number {
    color: var(--color-verter) !important;
}

/* Zman theme */
.theme-zman .song-item .song-play-btn-new {
    background: var(--color-zman) !important;
}

.theme-zman .song-item .song-play-btn-new:hover {
    background: var(--color-zman-dark) !important;
}

.theme-zman .song-item {
    border-color: var(--color-zman) !important;
    background: var(--color-zman-pale) !important;
}

.theme-zman .song-item:hover {
    border-color: var(--color-zman-dark) !important;
}

.theme-zman .song-item .song-name {
    color: var(--color-zman-dark) !important;
}

.theme-zman .song-item .song-number {
    color: var(--color-zman) !important;
}

/* Piyut theme */
.theme-piyut .song-item .song-play-btn-new {
    background: var(--color-piyut) !important;
}

.theme-piyut .song-item .song-play-btn-new:hover {
    background: var(--color-piyut-dark) !important;
}

.theme-piyut .song-item {
    border-color: var(--color-piyut) !important;
    background: var(--color-piyut-pale) !important;
}

.theme-piyut .song-item:hover {
    border-color: var(--color-piyut-dark) !important;
}

.theme-piyut .song-item .song-name {
    color: var(--color-piyut-dark) !important;
}

.theme-piyut .song-item .song-number {
    color: var(--color-piyut) !important;
}

/* Playlist theme */
.theme-playlist .song-item .song-play-btn-new {
    background: var(--color-playlist) !important;
}

.theme-playlist .song-item .song-play-btn-new:hover {
    background: var(--color-playlist-dark) !important;
}

.theme-playlist .song-item {
    border-color: var(--color-playlist) !important;
    background: var(--color-playlist-pale) !important;
}

.theme-playlist .song-item:hover {
    border-color: var(--color-playlist-dark) !important;
}

.theme-playlist .song-item .song-name {
    color: var(--color-playlist-dark) !important;
}

.theme-playlist .song-item .song-number {
    color: var(--color-playlist) !important;
}

/* Album theme */
.theme-album .song-item .song-play-btn-new {
    background: var(--color-album) !important;
}

.theme-album .song-item .song-play-btn-new:hover {
    background: var(--color-album-dark) !important;
}

.theme-album .song-item {
    border-color: var(--color-album) !important;
    background: var(--color-album-pale) !important;
}

.theme-album .song-item:hover {
    border-color: var(--color-album-dark) !important;
}

.theme-album .song-item .song-name {
    color: var(--color-album-dark) !important;
}

.theme-album .song-item .song-number {
    color: var(--color-album) !important;
}

/* Document theme */
.theme-document .song-item .song-play-btn-new {
    background: var(--color-document) !important;
}

.theme-document .song-item .song-play-btn-new:hover {
    background: var(--color-document-dark) !important;
}

.theme-document .song-item {
    border-color: var(--color-document) !important;
    background: var(--color-document-pale) !important;
}

.theme-document .song-item:hover {
    border-color: var(--color-document-dark) !important;
}

.theme-document .song-item .song-name {
    color: var(--color-document-dark) !important;
}

.theme-document .song-item .song-number {
    color: var(--color-document) !important;
}

/* Resource theme */
.theme-resource .song-item .song-play-btn-new {
    background: var(--color-resource) !important;
}

.theme-resource .song-item .song-play-btn-new:hover {
    background: var(--color-resource-dark) !important;
}

.theme-resource .song-item {
    border-color: var(--color-resource) !important;
    background: var(--color-resource-pale) !important;
}

.theme-resource .song-item:hover {
    border-color: var(--color-resource-dark) !important;
}

.theme-resource .song-item .song-name {
    color: var(--color-resource-dark) !important;
}

.theme-resource .song-item .song-number {
    color: var(--color-resource) !important;
}

/* Active song state - use theme color for playing songs */
/* Theme overlay color for ::before — apply ALWAYS so transitions don't flash blue */
.theme-mechaber .song-item::before { background: var(--color-mechaber) !important; }
.theme-chatzer .song-item::before { background: var(--color-chatzer) !important; }
.theme-verter .song-item::before { background: var(--color-verter) !important; }
.theme-zman .song-item::before { background: var(--color-zman) !important; }
.theme-piyut .song-item::before { background: var(--color-piyut) !important; }
.theme-playlist .song-item::before { background: var(--color-playlist) !important; }
.theme-album .song-item::before { background: var(--color-album) !important; }
.theme-document .song-item::before { background: var(--color-document) !important; }
.theme-resource .song-item::before { background: var(--color-resource) !important; }
.page-theme-album .song-item::before { background: var(--color-album) !important; }
.page-theme-document .song-item::before { background: var(--color-document) !important; }
.page-theme-resource .song-item::before { background: var(--color-resource) !important; }

.theme-mechaber .song-item.active::before {
    background: var(--color-mechaber) !important;
}

.theme-mechaber .song-item.active {
    box-shadow: 0 4px 15px rgba(196, 53, 168, 0.4) !important;
}

.theme-mechaber .song-item.active .song-name,
.theme-mechaber .song-item.active .song-number {
    color: white !important;
}

.theme-chatzer .song-item.active::before {
    background: var(--color-chatzer) !important;
}

.theme-chatzer .song-item.active {
    box-shadow: 0 4px 15px rgba(156, 91, 181, 0.4) !important;
}

.theme-chatzer .song-item.active .song-name,
.theme-chatzer .song-item.active .song-number {
    color: white !important;
}

.theme-verter .song-item.active::before {
    background: var(--color-verter) !important;
}

.theme-verter .song-item.active {
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4) !important;
}

.theme-verter .song-item.active .song-name,
.theme-verter .song-item.active .song-number {
    color: white !important;
}

.theme-zman .song-item.active::before {
    background: var(--color-zman) !important;
}

.theme-zman .song-item.active {
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4) !important;
}

.theme-zman .song-item.active .song-name,
.theme-zman .song-item.active .song-number {
    color: white !important;
}

.theme-piyut .song-item.active::before {
    background: var(--color-piyut) !important;
}

.theme-piyut .song-item.active {
    box-shadow: 0 4px 15px rgba(46, 139, 46, 0.4) !important;
}

.theme-piyut .song-item.active .song-name,
.theme-piyut .song-item.active .song-number {
    color: white !important;
}

.theme-playlist .song-item.active::before {
    background: var(--color-playlist) !important;
}

.theme-playlist .song-item.active {
    box-shadow: 0 4px 15px rgba(198, 40, 40, 0.4) !important;
}

.theme-playlist .song-item.active .song-name,
.theme-playlist .song-item.active .song-number {
    color: white !important;
}

.theme-album .song-item.active::before {
    background: var(--color-album) !important;
}

.theme-album .song-item.active {
    box-shadow: 0 4px 15px rgba(0, 131, 143, 0.4) !important;
}

.theme-album .song-item.active .song-name,
.theme-album .song-item.active .song-number {
    color: white !important;
}

.theme-document .song-item.active::before {
    background: var(--color-document) !important;
}

.theme-document .song-item.active {
    box-shadow: 0 4px 15px rgba(0, 160, 176, 0.4) !important;
}

.theme-document .song-item.active .song-name,
.theme-document .song-item.active .song-number {
    color: white !important;
}

.theme-resource .song-item.active::before {
    background: var(--color-resource) !important;
}

.theme-resource .song-item.active {
    box-shadow: 0 4px 15px rgba(91, 192, 222, 0.4) !important;
}

.theme-resource .song-item.active .song-name,
.theme-resource .song-item.active .song-number {
    color: white !important;
}

/* Active song play button - pure white background always, dark theme icon color */
.theme-mechaber .song-item.active .song-play-btn-new { background: white !important; color: var(--color-mechaber-dark) !important; box-shadow: none !important; }
.theme-chatzer .song-item.active .song-play-btn-new { background: white !important; color: var(--color-chatzer-dark) !important; box-shadow: none !important; }
.theme-verter .song-item.active .song-play-btn-new { background: white !important; color: var(--color-verter-dark) !important; box-shadow: none !important; }
.theme-zman .song-item.active .song-play-btn-new { background: white !important; color: var(--color-zman-dark) !important; box-shadow: none !important; }
.theme-piyut .song-item.active .song-play-btn-new { background: white !important; color: var(--color-piyut-dark) !important; box-shadow: none !important; }
.theme-playlist .song-item.active .song-play-btn-new { background: white !important; color: var(--color-playlist-dark) !important; box-shadow: none !important; }
.theme-album .song-item.active .song-play-btn-new { background: white !important; color: var(--color-album-dark) !important; box-shadow: none !important; }
.theme-document .song-item.active .song-play-btn-new { background: white !important; color: var(--color-document-dark) !important; box-shadow: none !important; }
.theme-resource .song-item.active .song-play-btn-new { background: white !important; color: var(--color-resource-dark) !important; box-shadow: none !important; }

.theme-mechaber .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-mechaber-dark) !important; transform: none !important; }
.theme-chatzer .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-chatzer-dark) !important; transform: none !important; }
.theme-verter .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-verter-dark) !important; transform: none !important; }
.theme-zman .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-zman-dark) !important; transform: none !important; }
.theme-piyut .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-piyut-dark) !important; transform: none !important; }
.theme-playlist .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-playlist-dark) !important; transform: none !important; }
.theme-album .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-album-dark) !important; transform: none !important; }
.theme-document .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-document-dark) !important; transform: none !important; }
.theme-resource .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-resource-dark) !important; transform: none !important; }

/* Theme-aware shadow for non-active song items (was hardcoded blue) */
.theme-mechaber .song-item { box-shadow: 0 2px 8px rgba(196, 53, 168, 0.1) !important; }
.theme-chatzer .song-item { box-shadow: 0 2px 8px rgba(156, 91, 181, 0.1) !important; }
.theme-verter .song-item { box-shadow: 0 2px 8px rgba(107, 114, 128, 0.1) !important; }
.theme-zman .song-item { box-shadow: 0 2px 8px rgba(233, 106, 27, 0.1) !important; }
.theme-piyut .song-item { box-shadow: 0 2px 8px rgba(46, 139, 46, 0.1) !important; }
.theme-playlist .song-item { box-shadow: 0 2px 8px rgba(198, 40, 40, 0.1) !important; }
.theme-album .song-item { box-shadow: 0 2px 8px rgba(0, 131, 143, 0.1) !important; }
.theme-document .song-item { box-shadow: 0 2px 8px rgba(0, 160, 176, 0.1) !important; }
.theme-resource .song-item { box-shadow: 0 2px 8px rgba(91, 192, 222, 0.1) !important; }

.theme-mechaber .song-item:hover { box-shadow: 0 6px 20px rgba(196, 53, 168, 0.35) !important; }
.theme-chatzer .song-item:hover { box-shadow: 0 6px 20px rgba(156, 91, 181, 0.35) !important; }
.theme-verter .song-item:hover { box-shadow: 0 6px 20px rgba(107, 114, 128, 0.35) !important; }
.theme-zman .song-item:hover { box-shadow: 0 6px 20px rgba(233, 106, 27, 0.35) !important; }
.theme-piyut .song-item:hover { box-shadow: 0 6px 20px rgba(46, 139, 46, 0.35) !important; }
.theme-playlist .song-item:hover { box-shadow: 0 6px 20px rgba(198, 40, 40, 0.35) !important; }
.theme-album .song-item:hover { box-shadow: 0 6px 20px rgba(0, 131, 143, 0.35) !important; }
.theme-document .song-item:hover { box-shadow: 0 6px 20px rgba(0, 160, 176, 0.35) !important; }
.theme-resource .song-item:hover { box-shadow: 0 6px 20px rgba(91, 192, 222, 0.35) !important; }

/* Same for page-theme-* (album/document/resource detail pages) */
.page-theme-album .song-item { box-shadow: 0 2px 8px rgba(0, 131, 143, 0.1) !important; }
.page-theme-document .song-item { box-shadow: 0 2px 8px rgba(0, 160, 176, 0.1) !important; }
.page-theme-resource .song-item { box-shadow: 0 2px 8px rgba(91, 192, 222, 0.1) !important; }

.page-theme-album .song-item:hover { box-shadow: 0 6px 20px rgba(0, 131, 143, 0.35) !important; }
.page-theme-document .song-item:hover { box-shadow: 0 6px 20px rgba(0, 160, 176, 0.35) !important; }
.page-theme-resource .song-item:hover { box-shadow: 0 6px 20px rgba(91, 192, 222, 0.35) !important; }

/* page-theme-* wrappers (album/document/resource detail pages use page-theme-* not theme-*) */
.page-theme-album .song-item.active::before { background: var(--color-album) !important; }
.page-theme-document .song-item.active::before { background: var(--color-document) !important; }
.page-theme-resource .song-item.active::before { background: var(--color-resource) !important; }

.page-theme-album .song-item.active { box-shadow: 0 4px 15px rgba(0, 131, 143, 0.4) !important; }
.page-theme-document .song-item.active { box-shadow: 0 4px 15px rgba(0, 160, 176, 0.4) !important; }
.page-theme-resource .song-item.active { box-shadow: 0 4px 15px rgba(91, 192, 222, 0.4) !important; }

/* page-theme-* play button + rating overrides (for album/document/resource detail pages) */
.page-theme-album .song-item .song-play-btn-new { background: var(--color-album) !important; }
.page-theme-document .song-item .song-play-btn-new { background: var(--color-document) !important; }
.page-theme-resource .song-item .song-play-btn-new { background: var(--color-resource) !important; }

.page-theme-album .song-item.active .song-play-btn-new { background: white !important; color: var(--color-album-dark) !important; box-shadow: none !important; }
.page-theme-document .song-item.active .song-play-btn-new { background: white !important; color: var(--color-document-dark) !important; box-shadow: none !important; }
.page-theme-resource .song-item.active .song-play-btn-new { background: white !important; color: var(--color-resource-dark) !important; box-shadow: none !important; }

.page-theme-album .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-album-dark) !important; transform: none !important; }
.page-theme-document .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-document-dark) !important; transform: none !important; }
.page-theme-resource .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-resource-dark) !important; transform: none !important; }

.page-theme-album .song-item .rating-icon-display { color: var(--color-album) !important; }
.page-theme-document .song-item .rating-icon-display { color: var(--color-document) !important; }
.page-theme-resource .song-item .rating-icon-display { color: var(--color-resource) !important; }

.page-theme-album .song-item.active .rating-icon-display,
.page-theme-document .song-item.active .rating-icon-display,
.page-theme-resource .song-item.active .rating-icon-display {
    color: white !important;
}

/* Rating icon theme color overrides */
.theme-mechaber .song-item .rating-icon-display { color: var(--color-mechaber) !important; }
.theme-chatzer .song-item .rating-icon-display { color: var(--color-chatzer) !important; }
.theme-verter .song-item .rating-icon-display { color: var(--color-verter) !important; }
.theme-zman .song-item .rating-icon-display { color: var(--color-zman) !important; }
.theme-piyut .song-item .rating-icon-display { color: var(--color-piyut) !important; }
.theme-playlist .song-item .rating-icon-display { color: var(--color-playlist) !important; }
.theme-album .song-item .rating-icon-display { color: var(--color-album) !important; }
.theme-document .song-item .rating-icon-display { color: var(--color-document) !important; }
.theme-resource .song-item .rating-icon-display { color: var(--color-resource) !important; }

/* Active song: rating icon white */
.theme-mechaber .song-item.active .rating-icon-display,
.theme-chatzer .song-item.active .rating-icon-display,
.theme-verter .song-item.active .rating-icon-display,
.theme-zman .song-item.active .rating-icon-display,
.theme-piyut .song-item.active .rating-icon-display,
.theme-playlist .song-item.active .rating-icon-display,
.theme-album .song-item.active .rating-icon-display,
.theme-document .song-item.active .rating-icon-display,
.theme-resource .song-item.active .rating-icon-display {
    color: white !important;
}

/* Hover border effect - override the ::after pseudo-element border color */
.theme-mechaber .song-item::after {
    border-color: var(--color-mechaber) !important;
    box-shadow: 0 0 15px rgba(196, 53, 168, 0.2) !important;
}

.theme-chatzer .song-item::after {
    border-color: var(--color-chatzer) !important;
    box-shadow: 0 0 15px rgba(156, 91, 181, 0.2) !important;
}

.theme-verter .song-item::after {
    border-color: var(--color-verter) !important;
    box-shadow: 0 0 15px rgba(107, 114, 128, 0.2) !important;
}

.theme-zman .song-item::after {
    border-color: var(--color-zman) !important;
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.2) !important;
}

.theme-piyut .song-item::after {
    border-color: var(--color-piyut) !important;
    box-shadow: 0 0 15px rgba(46, 139, 46, 0.2) !important;
}

.theme-playlist .song-item::after {
    border-color: var(--color-playlist) !important;
    box-shadow: 0 0 15px rgba(198, 40, 40, 0.2) !important;
}

.theme-album .song-item::after {
    border-color: var(--color-album) !important;
    box-shadow: 0 0 15px rgba(0, 131, 143, 0.2) !important;
}

.theme-document .song-item::after {
    border-color: var(--color-document) !important;
    box-shadow: 0 0 15px rgba(0, 160, 176, 0.2) !important;
}

.theme-resource .song-item::after {
    border-color: var(--color-resource) !important;
    box-shadow: 0 0 15px rgba(91, 192, 222, 0.2) !important;
}

/* Collection theme */
.theme-collection .song-item .song-play-btn-new { background: var(--color-collection) !important; }
.theme-collection .song-item .song-play-btn-new:hover { background: var(--color-collection-dark) !important; }
.theme-collection .song-item { border-color: var(--color-collection) !important; background: var(--color-collection-pale) !important; }
.theme-collection .song-item:hover { border-color: var(--color-collection-dark) !important; }
.theme-collection .song-item .song-name { color: var(--color-collection-dark) !important; }
.theme-collection .song-item .song-number { color: var(--color-collection) !important; }

.theme-collection .song-item::before { background: var(--color-collection) !important; }
.theme-collection .song-item.active::before { background: var(--color-collection) !important; }
.theme-collection .song-item.active { box-shadow: 0 4px 15px rgba(176, 95, 3, 0.4) !important; }
.theme-collection .song-item.active .song-name,
.theme-collection .song-item.active .song-number { color: white !important; }
.theme-collection .song-item.active .song-play-btn-new { background: white !important; color: var(--color-collection-dark) !important; box-shadow: none !important; }
.theme-collection .song-item.active .song-play-btn-new:hover { background: white !important; color: var(--color-collection-dark) !important; transform: none !important; }

.theme-collection .song-item { box-shadow: 0 2px 8px rgba(176, 95, 3, 0.1) !important; }
.theme-collection .song-item:hover { box-shadow: 0 6px 20px rgba(176, 95, 3, 0.35) !important; }

.theme-collection .song-item .rating-icon-display { color: var(--color-collection) !important; }
.theme-collection .song-item.active .rating-icon-display { color: white !important; }

.theme-collection .song-item::after { border-color: var(--color-collection) !important; box-shadow: 0 0 15px rgba(176, 95, 3, 0.2) !important; }

/* Theme overrides for song-item-recording in mechaber theme */
.theme-mechaber .song-item-recording {
    background: var(--color-mechaber-pale) !important;
}

.theme-mechaber .song-item-recording::after {
    border-color: var(--color-mechaber) !important;
    box-shadow: 0 0 15px rgba(196, 53, 168, 0.2) !important;
}

.theme-mechaber .song-item-recording:hover {
    box-shadow: 0 6px 20px rgba(196, 53, 168, 0.35) !important;
}

.theme-mechaber .song-item-recording:not(.active-recording):hover {
    background: var(--color-mechaber-pale) !important;
}

.theme-mechaber .song-item-rec-num {
    background: var(--color-mechaber-pale) !important;
    color: var(--color-mechaber-dark) !important;
}

.theme-mechaber .song-item-recording.active-recording {
    background: linear-gradient(135deg, var(--color-mechaber) 0%, var(--color-mechaber-dark) 100%) !important;
}

.theme-mechaber .song-item-recording.active-recording::before {
    background: var(--color-mechaber) !important;
}

.theme-mechaber .song-item-recording.active-recording::after {
    border-color: var(--color-mechaber) !important;
}

.theme-mechaber .song-item-recording.active-recording .song-item-rec-num {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}


/* Mechaber theme: song-item-header uses mechaber gradient */
.theme-mechaber .song-item-expanded .song-item-header,
.theme-mechaber .song-item-full .song-item-header {
    background: linear-gradient(135deg, var(--color-mechaber-dark) 0%, var(--color-mechaber) 100%) !important;
}

/* Mechaber theme: song-item-header text should be white */
.theme-mechaber .song-item-expanded .song-item-header .song-name,
.theme-mechaber .song-item-full .song-item-header .song-name {
    color: white !important;
}

.theme-mechaber .song-item-expanded .song-item-header .song-meta,
.theme-mechaber .song-item-full .song-item-header .song-meta,
.theme-mechaber .song-item-expanded .song-item-header .song-meta span,
.theme-mechaber .song-item-full .song-item-header .song-meta span,
.theme-mechaber .song-item-expanded .song-item-header .song-meta-tag,
.theme-mechaber .song-item-full .song-item-header .song-meta-tag {
    color: rgba(255, 255, 255, 0.9) !important;
}

.theme-mechaber .song-item-expanded .song-item-header .song-number,
.theme-mechaber .song-item-full .song-item-header .song-number {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
}

.theme-mechaber .song-item-expanded .song-item-header .song-play-btn-new,
.theme-mechaber .song-item-full .song-item-header .song-play-btn-new {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
}

.theme-mechaber .song-item-expanded .song-item-header .song-play-btn-new:hover,
.theme-mechaber .song-item-full .song-item-header .song-play-btn-new:hover {
    background: white !important;
    color: var(--color-mechaber-dark) !important;
}

.theme-mechaber .song-item-expanded .song-item-header .song-wave-animation .wave-bar,
.theme-mechaber .song-item-full .song-item-header .song-wave-animation .wave-bar {
    background: white !important;
}

/* Theme overrides for nested cards (mechaber cards inside other detail pages) */
.theme-chatzer .nigun-mechaber-card {
    background: var(--color-chatzer) !important;
}

.theme-chatzer .nigun-mechaber-card:hover {
    box-shadow: 0 4px 15px rgba(156, 91, 181, 0.4) !important;
}

.theme-chatzer .mechaber-card::after,
.theme-chatzer .nigun-mechaber-card::after {
    border-color: var(--color-chatzer-light) !important;
    box-shadow: 0 0 15px rgba(156, 91, 181, 0.25) !important;
}

.theme-chatzer .nigun-mechaber-placeholder {
    background: linear-gradient(135deg, var(--color-chatzer-pale) 0%, var(--color-chatzer-light) 100%) !important;
}

.theme-chatzer .nigun-mechaber-placeholder .mechaber-icon {
    background-color: var(--color-chatzer) !important;
}

.theme-verter .nigun-mechaber-card {
    background: var(--color-verter) !important;
}

.theme-verter .nigun-mechaber-card:hover {
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4) !important;
}

.theme-verter .mechaber-card::after,
.theme-verter .nigun-mechaber-card::after {
    border-color: var(--color-verter-light) !important;
    box-shadow: 0 0 15px rgba(107, 114, 128, 0.25) !important;
}

.theme-verter .nigun-mechaber-placeholder {
    background: linear-gradient(135deg, var(--color-verter-pale) 0%, var(--color-verter-light) 100%) !important;
}

.theme-verter .nigun-mechaber-placeholder .mechaber-icon {
    background-color: var(--color-verter) !important;
}

.theme-zman .nigun-mechaber-card {
    background: var(--color-zman) !important;
}

.theme-zman .nigun-mechaber-card:hover {
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4) !important;
}

.theme-zman .mechaber-card::after,
.theme-zman .nigun-mechaber-card::after {
    border-color: var(--color-zman-light) !important;
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.25) !important;
}

.theme-zman .nigun-mechaber-placeholder {
    background: linear-gradient(135deg, var(--color-zman-pale) 0%, var(--color-zman-light) 100%) !important;
}

.theme-zman .nigun-mechaber-placeholder .mechaber-icon {
    background-color: var(--color-zman) !important;
}

.theme-piyut .nigun-mechaber-card {
    background: var(--color-piyut) !important;
}

.theme-piyut .nigun-mechaber-card:hover {
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4) !important;
}

.theme-piyut .mechaber-card::after,
.theme-piyut .nigun-mechaber-card::after {
    border-color: var(--color-piyut-light) !important;
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.25) !important;
}

.theme-piyut .nigun-mechaber-placeholder {
    background: linear-gradient(135deg, var(--color-piyut-pale) 0%, var(--color-piyut-light) 100%) !important;
}

.theme-piyut .nigun-mechaber-placeholder .mechaber-icon {
    background-color: var(--color-piyut) !important;
}

.theme-playlist .nigun-mechaber-card {
    background: var(--color-playlist) !important;
}

.theme-playlist .nigun-mechaber-card:hover {
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4) !important;
}

.theme-playlist .mechaber-card::after,
.theme-playlist .nigun-mechaber-card::after {
    border-color: var(--color-playlist-light) !important;
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.25) !important;
}

.theme-playlist .nigun-mechaber-placeholder {
    background: linear-gradient(135deg, var(--color-playlist-pale) 0%, var(--color-playlist-light) 100%) !important;
}

.theme-playlist .nigun-mechaber-placeholder .mechaber-icon {
    background-color: var(--color-playlist) !important;
}

.theme-album .nigun-mechaber-card {
    background: var(--color-album) !important;
}

.theme-album .nigun-mechaber-card:hover {
    box-shadow: 0 4px 15px rgba(139, 195, 74, 0.4) !important;
}

.theme-album .mechaber-card::after,
.theme-album .nigun-mechaber-card::after {
    border-color: var(--color-album-light) !important;
    box-shadow: 0 0 15px rgba(139, 195, 74, 0.25) !important;
}

.theme-album .nigun-mechaber-placeholder {
    background: linear-gradient(135deg, var(--color-album-pale) 0%, var(--color-album-light) 100%) !important;
}

.theme-album .nigun-mechaber-placeholder .mechaber-icon {
    background-color: var(--color-album) !important;
}

.theme-document .nigun-mechaber-card {
    background: var(--color-document) !important;
}

.theme-document .nigun-mechaber-card:hover {
    box-shadow: 0 4px 15px rgba(121, 85, 72, 0.4) !important;
}

.theme-document .mechaber-card::after,
.theme-document .nigun-mechaber-card::after {
    border-color: var(--color-document-light) !important;
    box-shadow: 0 0 15px rgba(121, 85, 72, 0.25) !important;
}

.theme-document .nigun-mechaber-placeholder {
    background: linear-gradient(135deg, var(--color-document-pale) 0%, var(--color-document-light) 100%) !important;
}

.theme-document .nigun-mechaber-placeholder .mechaber-icon {
    background-color: var(--color-document) !important;
}

.theme-resource .nigun-mechaber-card {
    background: var(--color-resource) !important;
}

.theme-resource .nigun-mechaber-card:hover {
    box-shadow: 0 4px 15px rgba(255, 183, 77, 0.4) !important;
}

.theme-resource .mechaber-card::after,
.theme-resource .nigun-mechaber-card::after {
    border-color: var(--color-resource-light) !important;
    box-shadow: 0 0 15px rgba(255, 183, 77, 0.25) !important;
}

.theme-resource .nigun-mechaber-placeholder {
    background: linear-gradient(135deg, var(--color-resource-pale) 0%, var(--color-resource-light) 100%) !important;
}

.theme-resource .nigun-mechaber-placeholder .mechaber-icon {
    background-color: var(--color-resource) !important;
}


}

.theme-resource .nigun-mechaber-placeholder {
    background: linear-gradient(135deg, var(--color-resource-pale) 0%, var(--color-resource-light) 100%) !important;
}

.theme-resource .nigun-mechaber-placeholder .mechaber-icon {
    background-color: var(--color-resource) !important;
}

/* ========================================
   Image Lightbox Gallery
   ======================================== */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.lightbox-overlay.active {
    opacity: 1;
}

.lightbox-content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
}

.lightbox-overlay.active .lightbox-image {
    transform: scale(1);
    opacity: 1;
}

/* Navigation Buttons */
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    z-index: 2;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-nav-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav-prev {
    left: 20px;
}

.lightbox-nav-next {
    right: 20px;
}

/* Close Button */
.lightbox-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    z-index: 2;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

/* Image Counter */
.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 14px;
    border-radius: 20px;
    letter-spacing: 1px;
}

/* Make avatar cursor pointer when we have lightbox */
.modal-hero-avatar.clickable {
    cursor: pointer;
    overflow: hidden;
}

.modal-hero-avatar.clickable img {
    transition: transform 0.3s ease;
}

.modal-hero-avatar.clickable:hover img {
    transform: scale(1.1);
}

/* Loading spinner shown while switching lightbox images */
.lightbox-content-wrapper.lightbox-loading::after {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    animation: lightboxSpin 0.7s linear infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes lightboxSpin {
    to { transform: rotate(360deg); }
}
/* Tags container for displaying multiple tags */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Category-specific text colors - for use anywhere on the site */
.text-chatzer {
    color: var(--color-chatzer-dark);
}

.text-chatzer:hover {
    color: var(--color-chatzer);
}

.text-mechaber {
    color: var(--color-mechaber-dark);
}

.text-mechaber:hover {
    color: var(--color-mechaber);
}

.text-nigun {
    color: var(--color-nigun-dark);
}

.text-nigun:hover {
    color: var(--color-nigun);
}

.text-verter {
    color: var(--color-verter-dark);
}

.text-verter:hover {
    color: var(--color-verter);
}

.text-zman {
    color: var(--color-zman-dark);
}

.text-zman:hover {
    color: var(--color-zman);
}

.text-playlist {
    color: var(--color-playlist-dark);
}

.text-playlist:hover {
    color: var(--color-playlist);
}

.text-collection {
    color: var(--color-collection-dark);
}

.text-collection:hover {
    color: var(--color-collection);
}

.text-resource {
    color: var(--color-resource-dark);
}

.text-resource:hover {
    color: var(--color-resource);
}

.text-document {
    color: var(--color-document-dark);
}

.text-document:hover {
    color: var(--color-document);
}

.text-album {
    color: var(--color-album-dark);
}

.text-album:hover {
    color: var(--color-album);
}

.text-music {
    color: var(--color-music-dark);
}

.text-music:hover {
    color: var(--color-music);
}

/* Category text links with underlines */
.link-chatzer {
    color: var(--color-chatzer-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-chatzer-light);
    cursor: pointer;
}

.link-chatzer:hover {
    color: var(--color-chatzer);
    text-decoration-color: var(--color-chatzer);
}

.link-mechaber {
    color: var(--color-mechaber-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-mechaber-light);
    cursor: pointer;
}

.link-mechaber:hover {
    color: var(--color-mechaber);
    text-decoration-color: var(--color-mechaber);
}

.link-nigun {
    color: var(--color-nigun-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-nigun-light);
    cursor: pointer;
}

.link-nigun:hover {
    color: var(--color-nigun);
    text-decoration-color: var(--color-nigun);
}

.link-verter {
    color: var(--color-verter-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-verter-light);
    cursor: pointer;
}

.link-verter:hover {
    color: var(--color-verter);
    text-decoration-color: var(--color-verter);
}

.link-zman {
    color: var(--color-zman-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-zman-light);
    cursor: pointer;
}

.link-zman:hover {
    color: var(--color-zman);
    text-decoration-color: var(--color-zman);
}

.link-playlist {
    color: var(--color-playlist-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-playlist-light);
    cursor: pointer;
}

.link-playlist:hover {
    color: var(--color-playlist);
    text-decoration-color: var(--color-playlist);
}

.link-collection {
    color: var(--color-collection-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-collection-light);
    cursor: pointer;
}

.link-collection:hover {
    color: var(--color-collection);
    text-decoration-color: var(--color-collection);
}

.link-resource {
    color: var(--color-resource-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-resource-light);
    cursor: pointer;
}

.link-resource:hover {
    color: var(--color-resource);
    text-decoration-color: var(--color-resource);
}

.link-document {
    color: var(--color-document-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-document-light);
    cursor: pointer;
}

.link-document:hover {
    color: var(--color-document);
    text-decoration-color: var(--color-document);
}

.link-album {
    color: var(--color-album-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-album-light);
    cursor: pointer;
}

.link-album:hover {
    color: var(--color-album);
    text-decoration-color: var(--color-album);
}

/* Nigun sections */
.nigun-section {
    position: relative;
    background: transparent;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
}

/* Mechaber Section */
.nigun-mechaber-section {
    background: white;
    border-radius: 15px;
    padding: 20px 25px;
    box-shadow: var(--card-shadow);
    margin-bottom: 20px;
}

.nigun-mechaber-title {
    font-weight: 600;
    color: var(--color-mechaber-dark);
    margin-bottom: 15px;
    font-size: 1em;
    text-align: center;
}

.nigun-mechaber-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.nigun-mechaber-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-mechaber);
    border-radius: 12px;
    padding: 15px 8px 10px 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    position: relative;
    width: 110px;
    text-decoration: none;
}

/* Hover effect for Mechaber Card */
.nigun-mechaber-card::after {
    content: '';
    position: absolute;
    border-radius: 12px;
    border: 2px solid var(--color-mechaber-light);
    opacity: 0;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    transition: opacity 0.2s ease;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(156, 91, 181, 0.25);
}

.nigun-mechaber-card:hover::after {
    opacity: 1;
}

.nigun-mechaber-card:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(156, 91, 181, 0.3);
}

.nigun-mechaber-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nigun-mechaber-placeholder {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-mechaber-pale) 0%, var(--color-mechaber-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Boxy variant for non-person items (albums, documents) */
.nigun-mechaber-card.chatzer-boxy-card .nigun-mechaber-image,
.nigun-mechaber-card.chatzer-boxy-card .nigun-mechaber-placeholder {
    border-radius: 12px;
}

.nigun-mechaber-placeholder .mechaber-icon {
    width: 28px;
    height: 41px;
    background-color: var(--color-mechaber);
    -webkit-mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
    mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
}

.nigun-mechaber-name {
    font-weight: 600;
    color: white;
    text-align: center;
    font-size: 0.85em;
    line-height: 1.2;
    text-wrap: balance;
}

.nigun-mechaber-card.no-image {
    justify-content: center;
}
.nigun-mechaber-card.no-image .nigun-mechaber-name {
    font-size: 1.25em;
    margin: auto 0;
}

/* Personality Section */
.nigun-personality-section {
    background: white;
    border-radius: 15px;
    padding: 20px 25px;
    box-shadow: var(--card-shadow);
    margin-bottom: 20px;
}

.nigun-personality-title {
    font-weight: 600;
    color: var(--color-mechaber-dark);
    margin-bottom: 15px;
    font-size: 1em;
    text-align: center;
}

.nigun-personality-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.nigun-personality-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-light);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 2px solid transparent;
    min-width: 100px;
}

.nigun-personality-card:hover {
    /* border-color handled by ::after */
    background: white;
    transform: translateY(-2px);
    box-shadow: var(--card-shadow);
}

/* Add hover effect for personality card */
.nigun-personality-card {
    position: relative;
}

.nigun-personality-card::after {
    content: '';
    position: absolute;
    border-radius: 12px;
    border: 2px solid var(--color-mechaber);
    opacity: 0;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    transition: opacity 0.2s ease, top 0s 0.2s, bottom 0s 0.2s, left 0s 0.2s, right 0s 0.2s;
    pointer-events: none;
    box-shadow: 0 0 15px rgba(239, 83, 80, 0.15);
}

.nigun-personality-card:hover::after {
    opacity: 1;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nigun-personality-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    border: 2px solid var(--color-mechaber-pale);
}

.nigun-personality-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-mechaber-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    margin-bottom: 8px;
}

.nigun-personality-name {
    font-weight: 500;
    color: var(--text-dark);
    text-align: center;
    font-size: 0.85em;
}

.nigun-details-card {
    display: none;
    /* Hide old card layout */
}

/* New Compact Details Grid */
.nigun-details-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 25px;
    margin-bottom: 30px;
    margin-top: 25px;
    justify-content: center;
    padding-top: 15px;
}

/* Row grouping for specific items */
.nigun-details-row {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    width: 100%;
}

.nigun-detail-box {
    flex: 0 0 auto;
    min-width: 90px;
    max-width: 160px;
    min-height: 60px;
    position: relative;
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-align: center;
    background: var(--color-nigun-pale);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nigun-detail-box[data-action] {
    cursor: pointer;
}

.nigun-detail-box[data-action]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Siman box - styled like info-box - GRAY THEME */
.nigun-detail-siman-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 15px 20px;
    background: #f5f5f5;
    border-radius: 12px;
    margin: 20px auto;
    width: fit-content;
    max-width: 92%;
    border: 1.5px solid #d0d0d0;
}

.nigun-detail-siman-label {
    color: #666666;
    font-size: 1em;
    font-weight: bold;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0e0e0;
    border-radius: 50%;
    font-style: normal;
    margin-top: -29px;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
    transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-radius 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease,
                box-shadow 0.25s ease;
}

.nigun-detail-siman-text {
    font-size: 0.85em;
    color: #555555;
    line-height: 1.6;
}

/* Category-specific backgrounds */
.nigun-detail-box.box-verter {
    background: var(--color-verter-pale);
}

.nigun-detail-box.box-scale {
    background: var(--color-music-pale);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nigun-detail-box.box-scale:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nigun-detail-box.box-ritem {
    background: var(--color-music-pale);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nigun-detail-box.box-ritem:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nigun-detail-box.box-maure {
    background: var(--color-piyut-pale);
}

.nigun-detail-box.box-pasig {
    background: var(--color-piyut-pale);
}

.nigun-detail-box.box-playlists {
    background: var(--color-playlist-pale);
}

.nigun-detail-box.box-collections {
    background: var(--color-collection-pale);
}

.nigun-detail-box.box-albums {
    background: var(--color-album-pale);
}

.nigun-detail-box.box-documents {
    background: var(--color-nigun-pale);
}

.nigun-detail-box.box-resources {
    background: var(--color-nigun-pale);
}

.nigun-detail-box-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-nigun-dark);
    color: white;
    padding: 4px 8px;
    font-size: 0.7em;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

/* Category-specific header backgrounds */
.nigun-detail-box.box-verter .nigun-detail-box-header {
    background: var(--color-verter-dark);
}

.nigun-detail-box.box-scale .nigun-detail-box-header {
    background: var(--color-music-dark);
}

.nigun-detail-box.box-ritem .nigun-detail-box-header {
    background: var(--color-music-dark);
}

.nigun-detail-box.box-maure .nigun-detail-box-header {
    background: var(--color-piyut-dark);
}

.nigun-detail-box.box-pasig .nigun-detail-box-header {
    background: var(--color-piyut-dark);
}

.nigun-detail-box.box-playlists .nigun-detail-box-header {
    background: var(--color-playlist-dark);
}

.nigun-detail-box.box-collections .nigun-detail-box-header {
    background: var(--color-collection-dark);
}

.nigun-detail-box.box-albums .nigun-detail-box-header {
    background: var(--color-album-dark);
}

.nigun-detail-box.box-documents .nigun-detail-box-header {
    background: var(--color-nigun-dark);
}

.nigun-detail-box.box-resources .nigun-detail-box-header {
    background: var(--color-nigun-dark);
}

.nigun-detail-box-content {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 24px 8px 8px 8px;
    font-size: 0.92em;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.5;
    width: 100%;
    word-break: break-word;
}

/* Category-specific content text colors */
.nigun-detail-box.box-verter .nigun-detail-box-content { color: var(--color-verter-dark); }
.nigun-detail-box.box-scale .nigun-detail-box-content { color: var(--color-music-dark); }
.nigun-detail-box.box-ritem .nigun-detail-box-content { color: var(--color-music-dark); }
.nigun-detail-box.box-maure .nigun-detail-box-content { color: var(--color-piyut-dark); }
.nigun-detail-box.box-pasig .nigun-detail-box-content { color: var(--color-piyut-dark); }
.nigun-detail-box.box-playlists .nigun-detail-box-content { color: var(--color-playlist-dark); }
.nigun-detail-box.box-collections .nigun-detail-box-content { color: var(--color-collection-dark); }
.nigun-detail-box.box-albums .nigun-detail-box-content { color: var(--color-album-dark); }
.nigun-detail-box.box-documents .nigun-detail-box-content { color: var(--color-nigun-dark); }
.nigun-detail-box.box-resources .nigun-detail-box-content { color: var(--color-nigun-dark); }

.nigun-detail-box-content .nigun-tag-inline {
    margin: 0;
    font-size: 0.85em;
}

.nigun-detail-box-text {
    font-size: 0.85em;
    color: var(--text-dark);
    line-height: 1.4;
    word-break: break-word;
}

/* Full-text verter box — when a verter has a saved fullText, the box
   takes its own row and shows the text inline (with the verter name in
   the header chip). In edit mode the box collapses back to the standard
   compact pill so the inline-edit tag flow keeps working unchanged. */
/* Each fulltext verter lives in its own row sibling. The row centers
   the box and lets it shrink to the natural width of its content. */
.nigun-details-row.nigun-details-row-verter-fulltext {
    justify-content: center;
}

.nigun-detail-box.has-verter-fulltext {
    flex: 0 1 auto;
    width: fit-content;
    max-width: 92%;
    min-width: 240px;
    min-height: auto;
    padding: 36px 22px 4px 22px;
    align-items: stretch;
}

/* Poem mode: source text has real \n line breaks. Each line gets its
   own block, so the widest line drives the box width and lines align
   to the RTL start (right edge). */
.nigun-detail-box.has-verter-fulltext.is-poem {
    text-align: right;
}

/* Prose mode: one long line in Coda. The single line is wide, so the
   box hits its max-width and the text wraps inside — center each
   wrapped row. */
.nigun-detail-box.has-verter-fulltext.is-prose {
    text-align: center;
}

.nigun-detail-box.has-verter-fulltext > .nigun-detail-box-header {
    text-align: center;
}

.nigun-detail-box.has-verter-fulltext .verter-edit-display {
    display: none;
}

.nigun-verter-box-wrapper {
    position: relative;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    width: 100%;
}

.nigun-verter-box-wrapper.collapsed {
    max-height: 3em;
}

.nigun-verter-box-wrapper.expanded {
    max-height: 25000px;
}

.nigun-verter-box-text {
    font-size: 0.92em;
    line-height: 1.6;
    color: var(--color-verter-dark, var(--text-dark));
    font-weight: 500;
    font-family: 'Heebo', sans-serif;
    text-align: inherit;
}

.nigun-verter-box-text .verter-line {
    font-size: 1em;
    line-height: 1.6;
    color: inherit;
    font-family: inherit;
    text-align: inherit;
}

.nigun-verter-box-text .verter-line.verter-empty {
    height: 0.6em;
}

.nigun-verter-box-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to bottom, transparent, var(--color-verter-pale));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.nigun-verter-box-wrapper.expanded .nigun-verter-box-fade {
    opacity: 0;
}

.nigun-verter-box-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px 4px;
    margin-top: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-verter-dark);
    transition: background 0.2s ease;
    border-radius: 8px;
    position: relative;
}

/* Extend the click target above and below the visible arrow without
   adding visible padding to the button itself. */
.nigun-verter-box-expand-btn::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    bottom: -10px;
}

.nigun-verter-box-expand-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.nigun-verter-box-expand-btn .expand-arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-bottom: 4px;
}

.nigun-verter-box-expand-btn.expanded .expand-arrow {
    transform: rotate(-135deg);
    margin-bottom: -4px;
}

/* Edit mode: swap back to the simple verter pill so inline-edit tag
   handling (add/remove buttons, autocomplete) operates on the same
   compact shape used by every other grid box. */
.nigun-details-row[data-edit-enhanced="1"] .nigun-detail-box.has-verter-fulltext {
    flex: 0 0 auto;
    width: auto;
    max-width: 160px;
    min-width: 90px;
    min-height: 60px;
    padding: 8px 12px;
    align-items: center;
    text-align: center;
}

.nigun-details-row[data-edit-enhanced="1"] .nigun-detail-box.has-verter-fulltext .verter-fulltext-display {
    display: none;
}

.nigun-details-row[data-edit-enhanced="1"] .nigun-detail-box.has-verter-fulltext .verter-edit-display.nigun-detail-box-header {
    display: block;
}

.nigun-details-row[data-edit-enhanced="1"] .nigun-detail-box.has-verter-fulltext .verter-edit-display.nigun-detail-box-content {
    display: flex;
}

@media (max-width: 500px) {
    .nigun-details-grid {
        gap: 12px 8px;
    }

    .nigun-detail-box {
        flex: 0 0 auto;
        min-width: 85px;
        max-width: 140px;
        padding: 6px 8px;
    }

    .nigun-detail-siman-bar {
        padding: 10px 12px;
        font-size: 0.9em;
    }
}

.nigun-detail-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-nigun-pale);
}

.nigun-detail-row:last-child {
    border-bottom: none;
}

.nigun-detail-label {
    font-weight: 600;
    color: var(--color-nigun-dark);
    min-width: 100px;
    flex-shrink: 0;
}

.nigun-detail-value {
    color: var(--text-dark);
    flex: 1;
}

.nigun-detail-value.nigun-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nigun-tag-inline {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.9em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.nigun-tag-inline.tag-mechaber {
    background: var(--color-mechaber, #9c1b82);
    color: white;
}

.nigun-tag-inline.tag-mechaber:hover {
    background: var(--color-mechaber-dark, #7b1568);
    transform: scale(1.05);
}

.nigun-tag-inline.tag-chatzer {
    background: var(--color-chatzer, #7b1fa2);
    color: white;
}

.nigun-tag-inline.tag-chatzer:hover {
    background: var(--color-chatzer-dark, #5c1680);
    transform: scale(1.05);
}

.nigun-tag-inline.tag-scale {
    background: var(--color-music);
    color: white;
    cursor: pointer;
}

.nigun-tag-inline.tag-scale:hover {
    background: var(--color-music-dark, #b8960c);
    transform: scale(1.05);
}

.nigun-tag-inline.tag-ritem {
    background: var(--color-music);
    color: white;
    cursor: pointer;
}

.nigun-tag-inline.tag-ritem:hover {
    background: var(--color-music-dark, #b8960c);
    transform: scale(1.05);
}

.nigun-tag-inline.tag-zman {
    background: var(--color-zman);
    color: white;
}

.nigun-tag-inline.tag-zman:hover {
    background: var(--color-zman-dark);
    transform: scale(1.05);
}

.nigun-tag-inline.tag-piyut {
    background: #2e8b2e;
    color: white;
}

.nigun-tag-inline.tag-piyut:hover {
    background: #1b5e20;
    transform: scale(1.05);
}

.nigun-tag-inline.tag-playlist {
    background: var(--color-playlist);
    color: white;
}

.nigun-tag-inline.tag-playlist:hover {
    background: var(--color-playlist-dark);
    transform: scale(1.05);
}

.nigun-tag-inline.tag-collection {
    background: var(--color-collection);
    color: white;
}

.nigun-tag-inline.tag-collection:hover {
    background: var(--color-collection-dark);
    transform: scale(1.05);
}

.nigun-tag-inline.tag-album {
    background: var(--color-album);
    color: white;
}

.nigun-tag-inline.tag-album:hover {
    background: var(--color-album-dark);
    transform: scale(1.05);
}

.nigun-tag-inline.tag-document {
    background: var(--color-document);
    color: white;
}

.nigun-tag-inline.tag-document:hover {
    background: var(--color-document-dark);
    transform: scale(1.05);
}

.nigun-tag-inline.tag-resource {
    background: var(--color-resource);
    color: white;
}

.nigun-tag-inline.tag-resource:hover {
    background: var(--color-resource-dark);
    transform: scale(1.05);
}

.nigun-tag-inline.tag-verter {
    background: var(--color-verter);
    color: white;
}

.nigun-tag-inline.tag-verter:hover {
    background: var(--color-verter-dark);
    transform: scale(1.05);
}

.nigun-section h3 {
    margin: 0 0 15px 0;
    color: var(--primary);
    font-size: 1.05em;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-pale);
}

.nigun-section-content {
    color: var(--text-dark);
}

/* Subtle info box with icon - centered */
.nigun-info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 15px 20px;
    background: var(--color-nigun-pale);
    border-radius: 12px;
    margin: 20px auto;
    max-width: 600px;
    border: 1.5px solid var(--color-nigun-dark);
}

.nigun-info-icon {
    color: var(--color-nigun);
    font-size: 1em;
    font-weight: bold;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-nigun-light);
    border-radius: 50%;
    font-style: normal;
    margin-top: -29px;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
    transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-radius 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease,
                box-shadow 0.25s ease;
}

.nigun-info-box .nigun-info-text {
    font-size: 0.85em;
    color: var(--color-nigun-dark);
    line-height: 1.6;
    font-weight: normal;
}

/* Additions box - similar to info but different color */
.nigun-additions-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px 20px 15px 20px;
    background: var(--color-piyut-pale);
    border-radius: 12px;
    margin: 25px auto 20px auto;
    max-width: 600px;
    position: relative;
    border: 1.5px solid var(--color-nigun-dark);
}

.nigun-additions-icon {
    color: var(--color-piyut);
    font-size: 1.1em;
    font-weight: bold;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-piyut-light);
    border-radius: 50%;
    font-style: normal;
    margin-top: -34px;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
    transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-radius 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease,
                box-shadow 0.25s ease;
}

/* Shared hover behaviour for the floating round badges that sit on
   the siman / info / additions bars: expand into a pill, fade the
   icon out, fade the data-hover-label text in. */
.nigun-detail-siman-label > *,
.nigun-info-icon > *,
.nigun-additions-icon > * {
    transition: opacity 0.18s ease, transform 0.22s ease;
}

.nigun-detail-siman-label::after,
.nigun-info-icon::after,
.nigun-additions-icon::after {
    content: attr(data-hover-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: inherit;
    padding: 0 10px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.18s ease 0.04s, transform 0.22s ease 0.04s;
    pointer-events: none;
}

.nigun-detail-siman-label:hover,
.nigun-info-icon:hover,
.nigun-additions-icon:hover {
    min-width: 28px;
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.nigun-detail-siman-label:hover {
    width: 68px !important;
}

.nigun-additions-icon:hover {
    width: 98px !important;
}

.nigun-info-icon:hover {
    width: 112px !important;
}

.nigun-detail-siman-label:hover > *,
.nigun-info-icon:hover > *,
.nigun-additions-icon:hover > * {
    opacity: 0;
    transform: scale(0.6);
}

.nigun-detail-siman-label:hover::after,
.nigun-info-icon:hover::after,
.nigun-additions-icon:hover::after {
    opacity: 1;
    transform: scale(1);
}

.nigun-additions-box .nigun-additions-text {
    font-size: 0.85em;
    color: var(--text-secondary);
    line-height: 1.6;
}

.nigun-additions-content {
    width: 100%;
    text-align: right;
}

/* The "add more files" prompt is a call-to-action — show it only while
   inline-editing, never in plain view mode (even when files exist). */
.additions-placeholder {
    display: none;
    font-size: 0.85em;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    margin-bottom: 4px;
}

.nigun-additions-files-edit.editing-active .additions-placeholder {
    display: block;
}

.nigun-siman {
    font-size: 1.1em;
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.nigun-verter {
    font-size: 1em;
}

.nigun-verter .field-link {
    font-size: 1.1em;
    color: var(--color-verter);
    border-bottom-color: var(--color-verter-light);
}

.nigun-verter .field-link:hover {
    color: var(--color-verter-dark);
}

.nigun-info-text {
    line-height: 1.7;
    white-space: pre-wrap;
}

.nigun-music-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nigun-music-tag {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    cursor: pointer;
    transition: var(--transition-smooth);
    color: white;
}

.nigun-music-tag:hover {
    transform: scale(1.05);
    filter: brightness(0.9);
}

.nigun-music-tag.tag-scale,
.nigun-music-tag.tag-ritem {
    background: var(--color-music);
}

.nigun-music-tag.tag-zman {
    background: var(--color-zman);
}

.nigun-music-tag.tag-maure {
    background: var(--color-zman-light);
}

.nigun-music-tag.tag-playlist {
    background: var(--color-playlist);
}

.nigun-music-tag.tag-collection {
    background: var(--color-collection);
}

.nigun-notn-link {
    display: inline-block;
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border-radius: 10px;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.nigun-notn-link:hover {
    background: var(--primary-deep);
    transform: translateY(-2px);
}


/* Nigun recordings - Song card style */
.nigun-recordings-section {
    margin-bottom: 20px;
}

.nigun-recordings-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nigun-recording-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    background: var(--color-nigun-pale);
    border: 1px solid transparent;
    box-shadow: 0 0 0 rgba(74, 124, 201, 0);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.nigun-recording-item:hover {
    background: #4a7cc9;
    border-color: #4a7cc9;
    color: white;
    box-shadow: 0 4px 15px rgba(74, 124, 201, 0.4);
    padding: 14px 16px;
}

.nigun-recording-item:hover .nigun-recording-name {
    color: white !important;
}

.nigun-recording-item:hover .nigun-recording-meta {
    color: rgba(255, 255, 255, 0.9) !important;
}

.nigun-recording-item:hover .nigun-recording-meta .song-meta-tag {
    opacity: 0.9;
}

.nigun-recording-item:hover .nigun-recording-number {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
}

.nigun-recording-item.active {
    background: #4a7cc9 !important;
    color: white !important;
    border-color: #4a7cc9 !important;
}

.nigun-recording-item.active:hover {
    background: #3d6bb5 !important;
}

.nigun-recording-item.active .nigun-recording-name {
    color: white !important;
}

.nigun-recording-item.active .nigun-recording-meta {
    color: rgba(255, 255, 255, 0.9) !important;
}

.nigun-recording-item.active .nigun-recording-meta .song-meta-tag {
    opacity: 0.9;
}

.nigun-recording-item.active .nigun-recording-number {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.nigun-recording-number {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--color-nigun);
    flex-shrink: 0;
}

.nigun-recording-info {
    flex: 1;
    min-width: 0;
}

.nigun-recording-name {
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-nigun-dark);
}

.nigun-recording-name.default-name {
    color: var(--color-nigun-light);
}

.nigun-recording-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    font-size: 0.85em;
}

/* Override tag styles within recording meta to be smaller */
.nigun-recording-meta .song-meta-tag {
    padding: 2px 8px !important;
    font-size: 0.75em !important;
    border-radius: 10px !important;
}

.nigun-recording-play-btn {
    width: 38px;
    height: 38px;
    background: var(--color-nigun);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(74, 124, 201, 0.3);
    transition: var(--transition-smooth);
}

.nigun-recording-play-btn:hover {
    background: var(--color-nigun-dark);
    transform: scale(1.1);
}

.nigun-recording-item.active .nigun-recording-play-btn {
    background: white;
    color: var(--color-nigun);
}

/* Wave animation for playing recording */
.nigun-recording-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 20px;
    margin-left: 8px;
}

.nigun-recording-wave .wave-bar {
    width: 3px;
    background: white;
    border-radius: 3px;
    animation: waveStream 0.8s ease-in-out infinite;
}

.nigun-recording-wave .wave-bar:nth-child(1) {
    height: 6px;
    animation-delay: 0s;
}

.nigun-recording-wave .wave-bar:nth-child(2) {
    height: 12px;
    animation-delay: 0.1s;
}

.nigun-recording-wave .wave-bar:nth-child(3) {
    height: 8px;
    animation-delay: 0.2s;
}

.nigun-recording-wave .wave-bar:nth-child(4) {
    height: 14px;
    animation-delay: 0.15s;
}

.nigun-recording-item.paused .nigun-recording-wave .wave-bar {
    animation-play-state: paused;
}

/* Rating Icon - Interactive */
.player-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Rating container for icon + description */
.player-rating-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

/* Rating description text under icon */
.player-rating-description {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.player-rating:hover .player-rating-description {
    opacity: 1;
}

/* Saving state */
.player-rating.saving {
    pointer-events: none;
    opacity: 0.6;
}

.player-rating.saving .player-rating-icon {
    animation: ratingPulse 1s ease-in-out infinite;
}

@keyframes ratingPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* ======== RATING INVITE SYSTEM ======== */

/* Icon glows when inviting to rate */
.player-rating.rating-invite .player-rating-icon .rating-icon-display {
    animation: iconInviteGlow 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.player-rating.rating-invite .rating-unrated {
    animation: iconInviteGlow 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes iconInviteGlow {

    0%,
    24%,
    100% {
        transform: scale(1);
        filter: none;
        text-shadow: none;
    }

    6% {
        transform: scale(1.15);
    }

    12% {
        transform: scale(1.35);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    }

    18% {
        transform: scale(1.15);
    }
}

/* Flying star particle (created by JS) */
.flying-star {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.9), 0 0 12px rgba(251, 191, 36, 0.5);
    pointer-events: none;
    z-index: 100;
    animation: fly-star var(--fly-duration, 0.8s) ease-out forwards;
    --fly-x: 0px;
    --fly-y: 0px;
}

@keyframes fly-star {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.3);
    }

    20% {
        opacity: 1;
        transform: translate(calc(-50% + var(--fly-x) * 0.3), calc(-50% + var(--fly-y) * 0.3)) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--fly-x)), calc(-50% + var(--fly-y))) scale(0.4);
    }
}

/* Backdrop for popup */
.rating-popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999998;
}

/* Thank You Notification */
.thank-you-notification {
    position: fixed;
    bottom: 90px;
    right: 30px;
    transform: translateY(40px);
    background: white;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    z-index: 15000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border: 2px solid var(--color-nigun);
}

.thank-you-notification.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.thank-you-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.thank-you-icon {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--color-nigun) 0%, var(--color-chatzer) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    flex-shrink: 0;
}

.thank-you-text {
    font-size: 1em;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .thank-you-notification {
        bottom: 80px;
        right: 10px;
        padding: 10px 16px;
    }

    .thank-you-content {
        gap: 8px;
    }

    .thank-you-icon {
        width: 26px;
        height: 26px;
        font-size: 1em;
    }

    .thank-you-text {
        font-size: 0.9em;
    }
}

/* Images section */
.nigun-images-section {
    clear: both;
    margin-bottom: 20px;
}

.nigun-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.nigun-image-item {
    background: var(--bg-light);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid var(--border-color);
}

.nigun-image-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.nigun-image-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.nigun-image-name {
    padding: 10px;
    font-size: 0.8em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: white;
}

.nigun-image-details {
    padding: 5px 10px 10px;
    font-size: 0.75em;
    color: var(--text-secondary);
    background: white;
    border-top: 1px solid var(--border-color);
}

/* PDFs section */
.nigun-pdfs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nigun-pdf-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: var(--bg-light);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-dark);
    transition: var(--transition-smooth);
}

.nigun-pdf-item:hover {
    background: var(--color-document-pale);
}

.nigun-pdf-icon {
    font-size: 1.5em;
}

.nigun-pdf-name {
    flex: 1;
    font-size: 0.95em;
}

.nigun-pdf-action {
    background: var(--color-document);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85em;
}

/* Other Media section (6th attachment) */
.nigun-other-media-section {
    margin-bottom: 20px;
}

.nigun-other-media-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nigun-other-media-text {
    line-height: 1.7;
    white-space: pre-wrap;
    color: var(--text-dark);
    background: var(--bg-light);
    padding: 15px;
    border-radius: 10px;
}

.nigun-other-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

/* Video items */
.nigun-video-item {
    background: var(--bg-light);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid var(--border-color);
    position: relative;
}

.nigun-video-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.nigun-video-item video {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.nigun-video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.nigun-video-item:hover .nigun-video-play-overlay {
    opacity: 0;
}

.nigun-video-play-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: var(--primary);
}

.nigun-video-name {
    padding: 10px;
    font-size: 0.8em;
    color: var(--text-muted);
    background: white;
    text-align: center;
}

/* PDF preview box */
.nigun-pdf-preview {
    background: var(--bg-light);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.nigun-pdf-preview:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.nigun-pdf-preview-box {
    height: 120px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-document);
}

.nigun-pdf-preview-icon {
    font-size: 3em;
    margin-bottom: 5px;
}

.nigun-pdf-preview-label {
    font-size: 0.8em;
    font-weight: 600;
}

.nigun-pdf-preview-name {
    padding: 10px;
    font-size: 0.8em;
    color: var(--text-muted);
    background: white;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* File download items */
.nigun-files-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nigun-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: var(--bg-light);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-dark);
    transition: var(--transition-smooth);
    border: 1px solid var(--border-color);
}

.nigun-file-item:hover {
    background: var(--primary-pale);
    border-color: var(--primary-light);
}

.nigun-file-icon {
    font-size: 1.3em;
}

.nigun-file-name {
    flex: 1;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nigun-file-download {
    background: var(--primary);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8em;
}

/* Video modal/fullscreen */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 20px 20px 150px 20px;
}

.video-modal.active {
    display: flex;
    animation: attachmentFadeIn 0.25s ease;
}

.video-modal.closing {
    animation: attachmentFadeOut 0.22s ease forwards;
}

.video-modal video {
    max-width: 90%;
    max-height: 90%;
}

.video-modal.active video {
    animation: attachmentPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.video-modal.closing video {
    animation: attachmentPopOut 0.22s ease-in forwards;
}

.video-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Image modal */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 20px 20px 150px 20px;
}

.image-modal.active {
    display: flex;
}

.image-modal img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
}

.image-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5em;
    cursor: pointer;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 2px solid var(--primary-pale);
    border-radius: 25px;
    color: var(--primary);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
    /* Position at top-right corner, overlapping the header */
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 10;
    margin-bottom: 0;
}

.back-button:hover {
    background: var(--primary-pale);
    border-color: var(--primary);
}
/* Theme-specific back button styles */
.theme-mechaber .back-button {
    color: var(--color-mechaber);
    border-color: var(--color-mechaber-pale);
}

.theme-mechaber .back-button:hover {
    background: var(--color-mechaber-pale);
    border-color: var(--color-mechaber);
}

.theme-nigun .back-button {
    color: var(--color-nigun);
    border-color: var(--color-nigun-pale);
}

.theme-nigun .back-button:hover {
    background: var(--color-nigun-pale);
    border-color: var(--color-nigun);
}

.theme-chatzer .back-button {
    color: var(--color-chatzer);
    border-color: var(--color-chatzer-pale);
}

.theme-chatzer .back-button:hover {
    background: var(--color-chatzer-pale);
    border-color: var(--color-chatzer);
}

.theme-verter .back-button {
    color: var(--color-verter);
    border-color: var(--color-verter-pale);
}

.theme-verter .back-button:hover {
    background: var(--color-verter-pale);
    border-color: var(--color-verter);
}

.theme-zman .back-button {
    color: var(--color-zman);
    border-color: var(--color-zman-pale);
}

.theme-zman .back-button:hover {
    background: var(--color-zman-pale);
    border-color: var(--color-zman);
}

.theme-piyut .back-button {
    color: var(--color-piyut);
    border-color: var(--color-piyut-pale);
}

.theme-piyut .back-button:hover {
    background: var(--color-piyut-pale);
    border-color: var(--color-piyut);
}

.theme-playlist .back-button {
    color: var(--color-playlist);
    border-color: var(--color-playlist-pale);
}

.theme-playlist .back-button:hover {
    background: var(--color-playlist-pale);
    border-color: var(--color-playlist);
}

.theme-album .back-button {
    color: var(--color-album);
    border-color: var(--color-album-pale);
}

.theme-album .back-button:hover {
    background: var(--color-album-pale);
    border-color: var(--color-album);
}

.theme-document .back-button {
    color: var(--color-document);
    border-color: var(--color-document-pale);
}

.theme-document .back-button:hover {
    background: var(--color-document-pale);
    border-color: var(--color-document);
}

.theme-resource .back-button {
    color: var(--color-resource);
    border-color: var(--color-resource-pale);
}

.theme-resource .back-button:hover {
    background: var(--color-resource-pale);
    border-color: var(--color-resource);
}

.theme-nigun .back-button {
    color: var(--color-nigun);
    border-color: var(--color-nigun-pale);
}

.theme-nigun .back-button:hover {
    background: var(--color-nigun-pale);
    border-color: var(--color-nigun);
}

.detail-header {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 40px;
    background: white;
    /* Ensure it has a background when sticky */
}

.detail-page {
    position: relative;
}

.detail-category-bar {
    display: none;
    /* Hide category bar on full page */
}

.detail-header-content {
    position: relative;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    padding: 30px 25px;
    text-align: center;
    border-radius: 0 0 20px 20px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-header-content.no-image {
    justify-content: center;
    text-align: center;
}

/* Left container for profile image and dates - like modal hero left */
.detail-header-left {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Profile image for full page */
.detail-header-left .detail-image,
.detail-header-left .detail-image-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    border: 4px solid white;
    overflow: hidden;
    object-fit: cover;
}

/* Life dates under image */
.detail-header-left .detail-life-dates {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.detail-header-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    width: 100%;
}

.detail-header-content.no-image .detail-header-text {
    align-items: center;
}

/* Mechaber-specific: add padding for image clearance on full page */
.detail-page.theme-mechaber .detail-header-text {
    padding: 0 100px;
    align-items: center;
    text-align: center;
}

.detail-title {
    font-size: 2em;
    font-weight: 700;
    font-family: 'Heebo', sans-serif;
    color: white;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1.3;
}

/* Category-themed detail pages */
.detail-page.theme-chatzer .detail-category-bar {
    background: var(--color-chatzer);
}

.detail-page.theme-chatzer .detail-header-content {
    background: linear-gradient(135deg, var(--color-chatzer) 0%, var(--color-chatzer-dark) 100%);
}

.detail-page.theme-mechaber .detail-category-bar {
    background: var(--color-mechaber);
}

.detail-page.theme-mechaber .detail-header-content {
    background: linear-gradient(135deg, var(--color-mechaber) 0%, var(--color-mechaber-dark) 100%);
}

/* Mechaber formal name on profile (small, lighter) */
.mechaber-formal {
    display: block;
    font-size: 0.55em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 6px;
}

/* Mechaber known name on profile (big, darker) */
.mechaber-known {
    display: block;
    font-size: 1em;
    font-weight: 700;
    color: white;
}

/* Single line mode when gerufen and city are empty */
:is(.modal-hero-title, .detail-title):has(.mechaber-gerufen:empty):has(.mechaber-city:empty) .mechaber-formal,
:is(.modal-hero-title, .detail-title):has(.mechaber-gerufen:empty):has(.mechaber-city:empty) .mechaber-known {
    display: inline;
}

:is(.modal-hero-title, .detail-title):has(.mechaber-gerufen:empty):has(.mechaber-city:empty) .mechaber-formal {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin-bottom: 0;
}

.detail-page.theme-verter .detail-category-bar {
    background: var(--color-verter);
}

.detail-page.theme-verter .detail-header-content {
    background: linear-gradient(135deg, var(--color-verter) 0%, var(--color-verter-dark) 100%);
}

.detail-page.theme-zman .detail-category-bar {
    background: var(--color-zman);
}

.detail-page.theme-zman .detail-header-content {
    background: linear-gradient(135deg, var(--color-zman) 0%, var(--color-zman-dark) 100%);
}

.detail-page.theme-piyut .detail-category-bar {
    background: #2e8b2e;
}

.detail-page.theme-piyut .detail-header-content {
    background: linear-gradient(135deg, #2e8b2e 0%, #1b5e20 100%);
}

.detail-page.theme-playlist .detail-category-bar {
    background: var(--color-playlist);
}

.detail-page.theme-playlist .detail-header-content {
    background: linear-gradient(135deg, var(--color-playlist) 0%, var(--color-playlist-dark) 100%);
}

.detail-page.theme-album .detail-category-bar {
    background: var(--color-album);
}

.detail-page.theme-album .detail-header-content {
    background: linear-gradient(135deg, var(--color-album) 0%, var(--color-album-dark) 100%);
}

.detail-page.theme-document .detail-category-bar {
    background: var(--color-document);
}

.detail-page.theme-document .detail-header-content {
    background: linear-gradient(135deg, var(--color-document) 0%, var(--color-document-dark) 100%);
}

.detail-page.theme-resource .detail-category-bar {
    background: var(--color-resource);
}

.detail-page.theme-resource .detail-header-content {
    background: linear-gradient(135deg, var(--color-resource) 0%, var(--color-resource-dark) 100%);
}

/* Full-width detail page theme backgrounds */
.detail-page.theme-chatzer,
.detail-page.theme-mechaber,
.detail-page.theme-verter,
.detail-page.theme-zman,
.detail-page.theme-piyut,
.detail-page.theme-playlist,
.detail-page.theme-album,
.detail-page.theme-document,
.detail-page.theme-resource {
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    min-height: calc(100vh - 180px);
}

.detail-page.theme-chatzer {
    background: linear-gradient(180deg, var(--color-chatzer-pale) 0%, color-mix(in srgb, var(--color-chatzer-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.detail-page.theme-mechaber {
    --theme-bg: var(--color-mechaber-pale);
    background: linear-gradient(180deg, var(--color-mechaber-pale) 0%, color-mix(in srgb, var(--color-mechaber-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.detail-page.theme-verter {
    background: linear-gradient(180deg, var(--color-verter-pale) 0%, color-mix(in srgb, var(--color-verter-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.detail-page.theme-zman {
    background: linear-gradient(180deg, var(--color-zman-pale) 0%, color-mix(in srgb, var(--color-zman-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.detail-page.theme-piyut {
    background: linear-gradient(180deg, #e8f5e9 0%, color-mix(in srgb, #e8f5e9 30%, #f8fafc) 300px, #f8fafc 100%);
}

.detail-page.theme-playlist {
    background: linear-gradient(180deg, var(--color-playlist-pale) 0%, color-mix(in srgb, var(--color-playlist-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.detail-page.theme-album {
    background: linear-gradient(180deg, var(--color-album-pale) 0%, color-mix(in srgb, var(--color-album-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.detail-page.theme-document {
    background: linear-gradient(180deg, var(--color-document-pale) 0%, color-mix(in srgb, var(--color-document-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

.detail-page.theme-resource {
    background: linear-gradient(180deg, var(--color-resource-pale) 0%, color-mix(in srgb, var(--color-resource-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
}

/* Center content within full-width themed detail pages */
.detail-page.theme-chatzer>*,
.detail-page.theme-mechaber>*,
.detail-page.theme-verter>*,
.detail-page.theme-zman>*,
.detail-page.theme-piyut>*,
.detail-page.theme-playlist>*,
.detail-page.theme-album>*,
.detail-page.theme-document>*,
.detail-page.theme-resource>* {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Detail page sections and actions */
.detail-section {
    background: white;
    border-radius: 15px;
    padding: 20px 25px;
    box-shadow: var(--card-shadow);
    margin-bottom: 20px;
}

.detail-section h3 {
    margin: 0 0 15px 0;
    color: var(--primary);
    font-size: 1.05em;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-pale);
}

.detail-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.detail-action-btn {
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.detail-action-btn.album-buy-btn {
    background: var(--color-album);
    color: white;
}

.detail-action-btn.album-buy-btn:hover {
    background: var(--color-album-dark);
}

.detail-action-btn.document-link-btn {
    background: var(--color-document-pale);
    color: var(--color-document-dark);
}

.detail-action-btn.resource-link-btn {
    background: var(--color-resource);
    color: white;
}

.detail-action-btn.resource-link-btn:hover {
    background: var(--color-resource-dark);
}

.detail-pdf-preview {
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.detail-songs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px;
    /* Allow shadow to be visible */
    margin: -6px;
    /* Compensate for padding */
}

.detail-subtitle {
    font-size: 1.1em;
    color: var(--text-muted);
}

.detail-chatzer {
    margin-top: 10px;
}

.detail-personalities {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-personalities:empty {
    display: none;
}

/* Personality badge in detail hero (album / document / resource pages) */
.detail-personality-badge {
    display: inline-block;
    background: var(--color-mechaber);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.detail-personality-badge:hover {
    background: var(--color-mechaber-dark);
    transform: scale(1.05);
}

/* Album-specific header tweaks: square cover instead of round avatar */
.detail-page.theme-album .detail-header-left .detail-image,
.detail-page.theme-album .album-cover-image {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    object-fit: cover;
    background: white;
    border: 4px solid white;
    box-shadow: none;
}

.detail-page.theme-album .detail-header-text {
    padding: 0 170px 0 25px;
    align-items: center;
    text-align: center;
}

.detail-page.theme-album .detail-header-content.no-image .detail-header-text {
    padding: 0;
}

.album-producer-line {
    font-size: 1.05em;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.album-series-line {
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

.album-year-line {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.15);
    padding: 3px 12px;
    border-radius: 12px;
    display: inline-block;
}

/* Album action bar (booklet + buy link) — sits above description */
.album-action-bar {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px auto;
    max-width: 700px;
}

.album-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 600;
    background: white;
    color: var(--color-album-dark);
    border: 2px solid var(--color-album-light);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
}

.album-action-btn:hover {
    background: var(--color-album-pale);
    border-color: var(--color-album);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 131, 143, 0.2);
}

.album-action-btn.album-booklet-action {
    background: var(--color-album);
    color: white;
    border-color: var(--color-album);
}

.album-action-btn.album-booklet-action:hover {
    background: var(--color-album-dark);
    border-color: var(--color-album-dark);
}

.album-action-host {
    font-weight: 700;
    opacity: 0.9;
}

/* Document-themed action button */
.album-action-btn.document-link-action {
    background: white;
    color: var(--color-document-dark);
    border-color: var(--color-document-light);
}

.album-action-btn.document-link-action:hover {
    background: var(--color-document-pale);
    border-color: var(--color-document);
    box-shadow: 0 6px 18px rgba(0, 160, 176, 0.2);
}

/* Resource-themed action button */
.album-action-btn.resource-link-action {
    background: white;
    color: var(--color-resource-dark);
    border-color: var(--color-resource-light);
}

.album-action-btn.resource-link-action:hover {
    background: var(--color-resource-pale);
    border-color: var(--color-resource);
    box-shadow: 0 6px 18px rgba(91, 192, 222, 0.2);
}

/* Theme-aware type badges on document/resource hero */
.detail-page.theme-document .detail-type-badge {
    background: var(--color-document-pale);
    color: var(--color-document-dark);
}

.detail-page.theme-resource .detail-type-badge {
    background: var(--color-resource-pale);
    color: var(--color-resource-dark);
}

.detail-page.theme-album .detail-type-badge {
    background: var(--color-album-pale);
    color: var(--color-album-dark);
}

@media (max-width: 600px) {
    /* Stack every detail-page hero on phones: image on top, full-width title
       below. The desktop layout positions the image absolutely on the left and
       pads the title to clear it; on a narrow screen that padding squeezes the
       title to almost nothing (the mechaber title was wrapping one letter per
       line). This was previously fixed for album pages only — generalise it. */
    .detail-header-content {
        flex-direction: column;
        gap: 10px;
        padding: 22px 16px 26px;
    }

    .detail-header-left {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        margin: 0 auto;
    }

    .detail-header-text,
    .detail-page.theme-mechaber .detail-header-text {
        padding: 0;
        width: 100%;
    }

    /* Play-all button to the top-right corner instead of vertically centred
       (scoped to the page header so modal heroes are untouched). */
    .detail-header-content .play-all-btn {
        top: 14px;
        right: 14px;
        transform: none;
    }

    .detail-header-content .play-all-btn:hover {
        transform: scale(1.05);
    }

    /* Album keeps its larger cover image */
    .detail-page.theme-album .detail-header-left .detail-image,
    .detail-page.theme-album .album-cover-image {
        width: 120px;
        height: 120px;
    }
}

.detail-year {
    font-size: 0.95em;
    color: var(--text-muted);
}

.resource-phone-display {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-resource-dark);
    background: var(--color-resource-pale);
    padding: 15px 20px;
    border-radius: 10px;
    text-align: center;
    white-space: pre-line;
    line-height: 1.8;
}

.detail-image {
    width: 120px;
    height: 120px;
    border-radius: 15px;
    object-fit: cover;
    border: 4px solid var(--primary-pale);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Round images for mechabrim */
.mechaber-detail .detail-image,
.detail-page[data-type="mechabrim"] .detail-image {
    border-radius: 50%;
}

/* Placeholder for mechabrim without images */
.detail-image-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--color-mechaber-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--color-mechaber-pale);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.detail-image-placeholder .mechaber-icon {
    width: 75px;
    height: 100px;
    background-color: var(--color-mechaber);
    -webkit-mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
    mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
}

.detail-icon {
    display: none;
}

.detail-type-badge {
    display: inline-block;
    background: var(--gradient-main);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
}

.detail-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    justify-content: center;
}

.detail-tag-badge {
    margin-bottom: 10px;
}

.mechaber-tag-name {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-mechaber) 0%, var(--color-mechaber-light) 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
}

.detail-life-dates {
    margin-top: 8px;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
}

.detail-chatzer-badge {
    display: inline-block;
    background: var(--color-chatzer);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.detail-chatzer-badge:hover {
    background: var(--color-chatzer-dark);
    transform: scale(1.05);
}

.detail-zmanim-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.detail-zman-badge {
    background: var(--color-zman);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.detail-zman-badge:hover {
    background: var(--color-zman-dark);
    transform: scale(1.05);
}

.detail-subtitle {
    margin-top: 10px;
    font-size: 1em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.detail-makor-text {
    display: inline-block;
    background: white;
    color: #666;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.detail-mareh-text {
    color: var(--text-dark);
}

.detail-zman-text {
    color: var(--primary);
    font-weight: 600;
}

.detail-separator {
    color: var(--text-muted);
}

.detail-title {
    font-size: 2em;
    color: white;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.detail-description-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px 25px 15px 25px;
    background: var(--color-nigun-pale);
    border-radius: 12px;
    margin-bottom: 25px;
    max-width: 700px;
    position: relative;
    border: 1.5px solid var(--color-nigun);
    box-shadow: none;
}

.detail-description-section.description-empty {
    display: none;
}

.detail-description-section h3 {
    font-size: 0;
    color: transparent;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--color-nigun);
    border-radius: 50%;
    margin: -38px 0 10px 0;
    border: 3px solid var(--color-nigun-pale);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: none;
}

.detail-description-section h3::before {
    content: "i";
    font-size: 1.2rem;
    font-weight: bold;
    font-style: italic;
    color: white;
}

/* Theme-specific description section */
.theme-mechaber .detail-description-section {
    background: var(--color-mechaber-pale);
    border-color: var(--color-mechaber);
}

.theme-mechaber .detail-description-section h3 {
    background: var(--color-mechaber);
    border-color: var(--color-mechaber-pale);
}

.theme-mechaber .detail-description-section .description-fade-overlay {
    background: linear-gradient(to bottom, transparent, var(--color-mechaber-pale));
}

.theme-chatzer .detail-description-section {
    background: var(--color-chatzer-pale);
    border-color: var(--color-chatzer);
}

.theme-chatzer .detail-description-section h3 {
    background: var(--color-chatzer);
    border-color: var(--color-chatzer-pale);
}

.theme-chatzer .detail-description-section .description-fade-overlay {
    background: linear-gradient(to bottom, transparent, var(--color-chatzer-pale));
}

.theme-verter .detail-description-section {
    background: var(--color-verter-pale);
    border-color: var(--color-verter);
}

.theme-verter .detail-description-section h3 {
    background: var(--color-verter);
    border-color: var(--color-verter-pale);
}

.theme-verter .detail-description-section .description-fade-overlay {
    background: linear-gradient(to bottom, transparent, var(--color-verter-pale));
}

.theme-zman .detail-description-section {
    background: var(--color-zman-pale);
    border-color: var(--color-zman);
}

.theme-zman .detail-description-section h3 {
    background: var(--color-zman);
    border-color: var(--color-zman-pale);
}

.theme-zman .detail-description-section .description-fade-overlay {
    background: linear-gradient(to bottom, transparent, var(--color-zman-pale));
}

.theme-nigun .detail-description-section {
    background: var(--color-nigun-pale);
    border-color: var(--color-nigun);
}

.theme-nigun .detail-description-section h3 {
    background: var(--color-nigun);
    border-color: var(--color-nigun-pale);
}

.theme-nigun .detail-description-section .description-fade-overlay {
    background: linear-gradient(to bottom, transparent, var(--color-nigun-pale));
}


.detail-description-content {
    font-size: 1em;
    color: var(--text-dark);
    line-height: 1.8;
}

.detail-description-content h4 {
    color: var(--primary-deep);
    font-size: 1.1em;
    margin: 20px 0 10px 0;
}

.detail-description-content a,
.formatted-link {
    color: var(--primary);
    text-decoration: underline;
}

.detail-description-content strong {
    color: var(--primary-deep);
}

/* Theme-specific biography/description text colors */
.theme-mechaber .detail-description-content { color: var(--color-mechaber-dark); }
.theme-mechaber .detail-description-content h4,
.theme-mechaber .detail-description-content strong { color: var(--color-mechaber-dark); }
.theme-mechaber .detail-description-content a { color: var(--color-mechaber); }

.theme-chatzer .detail-description-content { color: var(--color-chatzer-dark); }
.theme-chatzer .detail-description-content h4,
.theme-chatzer .detail-description-content strong { color: var(--color-chatzer-dark); }
.theme-chatzer .detail-description-content a { color: var(--color-chatzer); }

.theme-verter .detail-description-content { color: var(--color-verter-dark); }
.theme-verter .detail-description-content h4,
.theme-verter .detail-description-content strong { color: var(--color-verter-dark); }
.theme-verter .detail-description-content a { color: var(--color-verter); }

.theme-piyut .detail-description-content { color: var(--color-piyut-dark); }
.theme-piyut .detail-description-content h4,
.theme-piyut .detail-description-content strong { color: var(--color-piyut-dark); }
.theme-piyut .detail-description-content a { color: var(--color-piyut); }

.theme-playlist .detail-description-content { color: var(--color-playlist-dark); }
.theme-playlist .detail-description-content h4,
.theme-playlist .detail-description-content strong { color: var(--color-playlist-dark); }
.theme-playlist .detail-description-content a { color: var(--color-playlist); }

.theme-collection .detail-description-content { color: var(--color-collection-dark); }
.theme-collection .detail-description-content h4,
.theme-collection .detail-description-content strong { color: var(--color-collection-dark); }
.theme-collection .detail-description-content a { color: var(--color-collection); }

.theme-album .detail-description-content { color: var(--color-album-dark); }
.theme-album .detail-description-content h4,
.theme-album .detail-description-content strong { color: var(--color-album-dark); }
.theme-album .detail-description-content a { color: var(--color-album); }

.theme-document .detail-description-content { color: var(--color-document-dark); }
.theme-document .detail-description-content h4,
.theme-document .detail-description-content strong { color: var(--color-document-dark); }
.theme-document .detail-description-content a { color: var(--color-document); }

.theme-resource .detail-description-content { color: var(--color-resource-dark); }
.theme-resource .detail-description-content h4,
.theme-resource .detail-description-content strong { color: var(--color-resource-dark); }
.theme-resource .detail-description-content a { color: var(--color-resource); }

.theme-nigun .detail-description-content { color: var(--color-nigun-dark); }
.theme-nigun .detail-description-content h4,
.theme-nigun .detail-description-content strong { color: var(--color-nigun-dark); }
.theme-nigun .detail-description-content a { color: var(--color-nigun); }

.detail-info-section {
    background: white;
    padding: 25px;
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    margin-bottom: 25px;
}

.detail-info-section h3 {
    color: var(--primary);
    font-size: 1.2em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-pale);
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.detail-info-item {
    background: #f8fafc;
    padding: 12px 15px;
    border-radius: 10px;
    border-right: 3px solid var(--primary);
}

.detail-info-label {
    display: block;
    font-size: 0.8em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.detail-info-value {
    display: block;
    font-size: 1em;
    color: var(--text-dark);
    font-weight: 600;
}

/* Collapsible Description Section */
.collapsible-section {
    position: relative;
}

.detail-description-wrapper {
    position: relative;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.detail-description-wrapper.collapsed {
    max-height: 120px;
}

.detail-description-wrapper.expanded {
    max-height: 25000px;
}

.description-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--theme-bg, #fce4ec));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.detail-description-wrapper.expanded .description-fade-overlay {
    opacity: 0;
}

.description-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px;
    margin-top: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.description-expand-btn:hover {
    background: rgba(var(--primary-rgb), 0.05);
    border-radius: 8px;
}

.expand-arrow {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-bottom: 5px;
}

.description-expand-btn.expanded .expand-arrow {
    transform: rotate(-135deg);
    margin-bottom: -5px;
}

.detail-songs-section {
    background: transparent;
    padding: 25px;
    border-radius: 20px;
}

/* Collapsible songs list */
.detail-songs-section.collapsible-songs {
    position: relative;
}

.songs-section-container {
    position: relative;
}

.songs-list-wrapper {
    position: relative;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    /* Padding to prevent hover effects from being clipped */
    padding: 12px 12px 0 12px;
    margin: -12px -12px 0 -12px;
}

.songs-list-wrapper.collapsed {
    max-height: 350px;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

.songs-list-wrapper.expanded {
    max-height: 10000px;
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.songs-fade-overlay {
    display: none;
    /* Now using mask-image on wrapper instead */
}

/* All themes fade to white since that's the page background */
.theme-mechaber .songs-fade-overlay,
.theme-chatzer .songs-fade-overlay,
.theme-nigun .songs-fade-overlay {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, #fff 100%);
}


.songs-list-wrapper.expanded .songs-fade-overlay {
    opacity: 0;
    pointer-events: none;
}

.songs-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-nigun);
    font-size: 2rem;
    transition: all 0.3s ease;
    margin-top: -60px;
    position: relative;
    z-index: 10;
}

.songs-expand-btn:hover {
    color: var(--color-nigun-dark);
    transform: scale(1.1);
}

.songs-expand-btn .expand-arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-bottom: 6px;
}

.songs-expand-btn.expanded .expand-arrow {
    transform: rotate(-135deg);
    margin-bottom: -6px;
}

/* Theme-specific expand buttons */
.theme-mechaber .songs-expand-btn {
    color: var(--color-mechaber);
}

.theme-mechaber .songs-expand-btn:hover {
    color: var(--color-mechaber-dark);
}

.theme-chatzer .songs-expand-btn {
    color: var(--color-chatzer);
}

.theme-chatzer .songs-expand-btn:hover {
    color: var(--color-chatzer-dark);
}

.theme-verter .songs-expand-btn {
    color: var(--color-verter);
}

.theme-verter .songs-expand-btn:hover {
    color: var(--color-verter-dark);
}

.theme-zman .songs-expand-btn {
    color: var(--color-zman);
}

.theme-zman .songs-expand-btn:hover {
    color: var(--color-zman-dark);
}


.detail-songs-section.detail-related-songs {
    margin-top: 25px;
    background: transparent;
}

.detail-songs-section.detail-related-recordings {
    margin-top: 25px;
}

.detail-songs-section.detail-related-songs h3,
.detail-songs-section.detail-related-recordings h3 {
    color: var(--color-mechaber-dark);
}

.detail-mechabrim-section {
    background: transparent;
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 25px;
}

/* Albums section on a mechaber detail page: always rendered so inline-edit
   has an anchor, but hidden visually when there's nothing in it. Once the
   grid is enhanced (editor opens edit mode) it becomes editable. */
.detail-albums-section.is-empty {
    display: none;
}

.detail-albums-section.is-empty:has(.detail-albums-grid.editable-tag-section) {
    display: block;
}

/* × button on an album card sits in the corner so it doesn't fight the
   cover image. */
.detail-album-card .tag-remove-btn {
    top: -6px;
    right: -6px;
    left: auto;
}

.detail-mechabrim-section h3 {
    color: var(--primary);
    font-size: 1.2em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-pale);
}

.detail-mechabrim-box {
    background: transparent;
    border-radius: 16px;
    padding: 20px;
}

.detail-mechabrim-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    gap: 20px;
    padding: 10px 0;
    color: var(--color-chatzer-dark);
    font-size: 1.4em;
    font-weight: 700;
    white-space: nowrap;
}

.detail-mechabrim-header::before {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--color-chatzer), transparent);
}

.detail-mechabrim-header::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-chatzer));
}

/* Mechaber-themed variant — albums section on a mechaber detail page
   mirrors the chatzer one but in mechaber colors */
.theme-mechaber .detail-mechabrim-header {
    color: var(--color-mechaber-dark);
}

.theme-mechaber .detail-mechabrim-header::before {
    background: linear-gradient(90deg, var(--color-mechaber), transparent);
}

.theme-mechaber .detail-mechabrim-header::after {
    background: linear-gradient(90deg, transparent, var(--color-mechaber));
}

.theme-mechaber .detail-mechabrim-section h3 {
    color: var(--color-mechaber-dark);
    border-bottom-color: var(--color-mechaber-pale);
}

.theme-mechaber .nigun-mechaber-card:hover {
    box-shadow: 0 4px 15px rgba(196, 53, 168, 0.35) !important;
}

.mechabrim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
}

.mechaber-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 2px solid transparent;
    position: relative;
    /* For pseudo-element */
}


/* Hover effect for Profile Mechaber Card */
.mechaber-card::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 12px;
    border: 2px solid var(--color-mechaber);
    /* Or primary if generic */
    opacity: 0;
    transition: opacity 0.2s ease, top 0s 0.2s, bottom 0s 0.2s, left 0s 0.2s, right 0s 0.2s;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* Note: Mechabrim section uses primary usually, but let's check context. 
   It seems to be in a general list. I'll use primary for safety if not set, or mechaber color if strictly mechaber.
   Line 5420 used border-color: var(--primary). I'll stick to primary or allow theme override. */

.mechaber-card::after {
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(123, 31, 162, 0.15);
}

.mechaber-card:hover::after {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mechaber-card:hover {
    /* border-color handled by ::after */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.mechaber-card-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 3px solid var(--primary-pale);
}

.mechaber-card-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--primary-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    margin: 0 auto 10px auto;
}

.mechaber-card-name {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--primary-deep);
    line-height: 1.3;
}

.detail-verter-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px 20px 15px 20px;
    background: var(--color-verter-pale);
    border-radius: 12px;
    margin: 20px auto 25px auto;
    max-width: 600px;
    border: 1.5px solid var(--color-verter-dark);
    position: relative;
    color: var(--color-verter-dark);
}

.detail-verter-section h3 {
    display: none;
    /* Hide the old header - we use icon instead */
}

/* Text icon floating on top of verter box */
.verter-box-icon {
    color: var(--color-verter);
    font-size: 1em;
    font-weight: bold;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-verter-light, #e8f5e9);
    border-radius: 50%;
    font-style: normal;
    margin-top: -29px;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.verter-box-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.verter-content {
    font-size: 0.95em;
    color: inherit;
    line-height: 1.7;
    text-align: right;
    width: 100%;
    font-family: 'Heebo', sans-serif;
}

.verter-line {
    font-size: 1.05em;
    line-height: 1.8;
    color: inherit;
    font-family: 'Heebo', sans-serif;
}

.verter-line.verter-empty {
    height: 12px;
}

/* Collapsible verter wrapper */
.verter-wrapper {
    position: relative;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.verter-wrapper.collapsed {
    max-height: 100px;
}

.verter-wrapper.expanded {
    max-height: 25000px;
}

.verter-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, var(--color-verter-pale));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.verter-wrapper.expanded .verter-fade-overlay {
    opacity: 0;
}

.verter-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px;
    margin-top: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-verter-dark);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    font-family: 'Heebo', sans-serif;
}

.verter-expand-btn:hover {
    background: rgba(0, 100, 0, 0.05);
    border-radius: 8px;
}

.verter-expand-btn .expand-arrow {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-bottom: 5px;
}

.verter-expand-btn.expanded .expand-arrow {
    transform: rotate(-135deg);
    margin-bottom: -5px;
}

/* Piyut theme overrides for the text section */
.theme-piyut .detail-verter-section {
    background: var(--color-piyut-pale);
    border-color: var(--color-piyut-dark);
    color: var(--color-piyut-dark);
}

.theme-piyut .verter-box-icon {
    color: var(--color-piyut);
    background: var(--color-piyut-light);
}

.theme-piyut .verter-content,
.theme-piyut .verter-line {
    color: var(--color-piyut-dark);
}

.theme-piyut .verter-fade-overlay {
    background: linear-gradient(to bottom, transparent, var(--color-piyut-pale));
}

.theme-piyut .verter-expand-btn {
    color: var(--color-piyut-dark);
}

.theme-piyut .verter-expand-btn:hover {
    background: rgba(128, 0, 128, 0.05);
}

/* Verter section header override (gray theme) on zman page */
.section-header-verter::before {
    background: linear-gradient(90deg, var(--color-verter), transparent) !important;
}

.section-header-verter::after {
    background: linear-gradient(90deg, transparent, var(--color-verter)) !important;
}

.section-header-verter h3 {
    color: var(--color-verter-dark) !important;
}

/* Piyut section header override (purple theme) on zman page */
.section-header-piyut::before {
    background: linear-gradient(90deg, var(--color-piyut), transparent) !important;
}

.section-header-piyut::after {
    background: linear-gradient(90deg, transparent, var(--color-piyut)) !important;
}

.section-header-piyut h3 {
    color: var(--color-piyut-dark) !important;
}

/* Playlist section header override (red theme) on zman/mechaber page */
.section-header-playlist::before {
    background: linear-gradient(90deg, var(--color-playlist), transparent) !important;
}

.section-header-playlist::after {
    background: linear-gradient(90deg, transparent, var(--color-playlist)) !important;
}

.section-header-playlist h3 {
    color: var(--color-playlist) !important;
}

/* Collection section header (brown theme) */
.section-header-collection::before {
    background: linear-gradient(90deg, var(--color-collection), transparent) !important;
}

.section-header-collection::after {
    background: linear-gradient(90deg, transparent, var(--color-collection)) !important;
}

.section-header-collection h3 {
    color: var(--color-collection) !important;
}

.detail-songs-section h3 {
    color: var(--primary);
    font-size: 0.95em;
    font-weight: 600;
    margin-bottom: 25px;
    padding-bottom: 0;
    border-bottom: none;
}

/* Background colors for different section types - now transparent */
.detail-songs-section {
    background: transparent;
}

/* Mechaber modal: first songs list - now transparent */
.theme-mechaber .detail-songs-section:not(.detail-related-songs):not(.detail-related-recordings) {
    background: transparent;
}

.detail-songs-section.detail-related-songs {
    background: transparent;
}

.detail-songs-section.detail-related-recordings {
    background: transparent;
}

/* Detail Section Header with Filters - Modern centered text with lines */
.detail-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    gap: 20px;
    padding: 10px 0;
}

.detail-section-header::before {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--color-nigun), transparent);
}

.detail-section-header::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-nigun));
}

.detail-section-header h3 {
    margin: 0;
    color: var(--color-nigun-dark);
    font-size: 1.4em;
    font-weight: 700;
    white-space: nowrap;
    padding: 0 10px;
}

/* Theme-specific section headers */
.theme-mechaber .detail-section-header::before {
    background: linear-gradient(90deg, var(--color-mechaber), transparent);
}

.theme-mechaber .detail-section-header::after {
    background: linear-gradient(90deg, transparent, var(--color-mechaber));
}

.theme-mechaber .detail-section-header h3 {
    color: var(--color-mechaber-dark);
}

.theme-chatzer .detail-section-header::before {
    background: linear-gradient(90deg, var(--color-chatzer), transparent);
}

.theme-chatzer .detail-section-header::after {
    background: linear-gradient(90deg, transparent, var(--color-chatzer));
}

.theme-chatzer .detail-section-header h3 {
    color: var(--color-chatzer-dark);
}

.theme-verter .detail-section-header::before {
    background: linear-gradient(90deg, var(--color-verter), transparent);
}

.theme-verter .detail-section-header::after {
    background: linear-gradient(90deg, transparent, var(--color-verter));
}

.theme-verter .detail-section-header h3 {
    color: var(--color-verter-dark);
}

.theme-zman .detail-section-header::before {
    background: linear-gradient(90deg, var(--color-zman), transparent);
}

.theme-zman .detail-section-header::after {
    background: linear-gradient(90deg, transparent, var(--color-zman));
}

.theme-zman .detail-section-header h3 {
    color: var(--color-zman-dark);
}

.theme-piyut .detail-section-header::before {
    background: linear-gradient(90deg, var(--color-piyut), transparent);
}

.theme-piyut .detail-section-header::after {
    background: linear-gradient(90deg, transparent, var(--color-piyut));
}

.theme-piyut .detail-section-header h3 {
    color: var(--color-piyut-dark);
}

.theme-playlist .detail-section-header::before {
    background: linear-gradient(90deg, var(--color-playlist), transparent);
}

.theme-playlist .detail-section-header::after {
    background: linear-gradient(90deg, transparent, var(--color-playlist));
}

.theme-playlist .detail-section-header h3 {
    color: var(--color-playlist-dark);
}

.theme-collection .detail-section-header::before {
    background: linear-gradient(90deg, var(--color-collection), transparent);
}

.theme-collection .detail-section-header::after {
    background: linear-gradient(90deg, transparent, var(--color-collection));
}

.theme-collection .detail-section-header h3 {
    color: var(--color-collection-dark);
}

.theme-album .detail-section-header::before {
    background: linear-gradient(90deg, var(--color-album), transparent);
}

.theme-album .detail-section-header::after {
    background: linear-gradient(90deg, transparent, var(--color-album));
}

.theme-album .detail-section-header h3 {
    color: var(--color-album-dark);
}

.theme-document .detail-section-header::before {
    background: linear-gradient(90deg, var(--color-document), transparent);
}

.theme-document .detail-section-header::after {
    background: linear-gradient(90deg, transparent, var(--color-document));
}

.theme-document .detail-section-header h3 {
    color: var(--color-document-dark);
}

.theme-resource .detail-section-header::before {
    background: linear-gradient(90deg, var(--color-resource), transparent);
}

.theme-resource .detail-section-header::after {
    background: linear-gradient(90deg, transparent, var(--color-resource));
}

.theme-resource .detail-section-header h3 {
    color: var(--color-resource-dark);
}

.theme-nigun .detail-section-header::before {
    background: linear-gradient(90deg, var(--color-nigun), transparent);
}

.theme-nigun .detail-section-header::after {
    background: linear-gradient(90deg, transparent, var(--color-nigun));
}

.theme-nigun .detail-section-header h3 {
    color: var(--color-nigun-dark);
}

/* Filters Group Container */
.detail-filters-group {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Individual Filter Dropdown */
.detail-filter-dropdown {
    position: relative;
}

.detail-filter-current {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: var(--color-nigun-pale);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.8em;
    font-weight: 500;
    color: var(--color-nigun-dark);
    white-space: nowrap;
    min-width: 90px;
    justify-content: center;
}

.detail-filter-current:hover {
    background: var(--color-nigun);
    color: white;
}

.detail-filter-current .filter-icon {
    font-size: 1em;
    line-height: 1;
}

.detail-filter-current .filter-label {
    font-size: 0.95em;
}

.detail-filter-options {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 4px;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.detail-filter-dropdown:hover .detail-filter-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.detail-filter-option {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: var(--transition-smooth);
    font-size: 0.85em;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.detail-filter-option:hover {
    background: var(--color-nigun-pale);
    color: var(--color-nigun-dark);
}

.detail-filter-option.active {
    background: var(--color-nigun);
    color: white;
    font-weight: 600;
}

/* Quality Filter Spread Layout */
.quality-filter-spread {
    justify-content: space-between;
    min-width: 120px;
    gap: 12px;
}

.filter-label-left {
    font-size: 0.9em;
    display: flex;
    align-items: center;
}

.audio-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.filter-stars-right {
    font-size: 1em;
    color: var(--color-nigun);
    font-weight: normal;
    letter-spacing: 1px;
}

.detail-filter-current.quality-filter-spread:hover .filter-stars-right {
    color: white;
}

/* Filter Panel Button and Dropdown */
.filter-panel-dropdown {
    position: relative;
}

.filter-panel-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-nigun-pale);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.8em;
    font-weight: 500;
    color: var(--color-nigun-dark);
    white-space: nowrap;
    border: none;
    font-family: inherit;
    min-width: 90px;
    justify-content: center;
}

.filter-panel-btn:hover {
    background: var(--color-nigun);
    color: white;
}

.filter-panel-btn.has-active {
    background: var(--color-nigun);
    color: white;
}

.filter-panel-btn .filter-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.filter-panel-btn:hover .filter-btn-icon,
.filter-panel-btn.has-active .filter-btn-icon {
    stroke: white;
}

.filter-panel-btn .filter-icon {
    font-size: 1.1em;
}

.filter-panel-btn .filter-count {
    background: white;
    color: var(--color-nigun);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.85em;
    font-weight: 600;
    margin-right: 2px;
}

.filter-panel-content {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(74, 124, 201, 0.25);
    padding: 16px;
    min-width: 320px;
    max-width: 400px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    max-height: 70vh;
    overflow-y: auto;
}

.filter-panel-content.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Open filter panel on hover like other dropdowns */
.filter-panel-dropdown:hover .filter-panel-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-panel-content {
    min-width: 280px;
    max-width: 320px;
    padding: 12px;
}

.search-panel-content .filter-panel-search {
    margin-bottom: 0;
}

.search-panel-content .filter-panel-active-tags {
    margin-top: 10px;
    padding-top: 10px;
}

.filter-panel-search {
    display: flex;
    position: relative;
    margin-bottom: 12px;
}

.filter-panel-search-input {
    flex: 1;
    padding: 10px 14px;
    padding-left: 40px;
    border: 2px solid var(--color-nigun-pale);
    border-radius: 10px;
    font-size: 0.9em;
    font-family: inherit;
    direction: rtl;
    transition: var(--transition-smooth);
}

.filter-panel-search-input:focus {
    outline: none;
    border-color: var(--color-nigun);
}

.filter-panel-search-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.1em;
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition-smooth);
}

.filter-panel-search-btn:hover {
    opacity: 1;
}

.filter-panel-search-clear {
    position: absolute;
    left: 38px;
    top: 50%;
    transform: translateY(-50%);
    background: #999;
    color: white;
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-panel-search-clear:hover {
    background: #666;
}

.filter-panel-section-title {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-panel-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-panel-item {
    position: relative;
}

.filter-panel-item-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: 0.9em;
}

.filter-panel-item-btn:hover {
    background: var(--color-nigun-pale);
    border-color: var(--color-nigun-light);
}

.filter-panel-item-btn.active {
    background: var(--color-nigun-pale);
    border-color: var(--color-nigun);
}

.filter-panel-item-label {
    font-weight: 500;
    color: var(--text-dark);
}

.filter-panel-item-value {
    font-size: 0.85em;
    color: var(--text-muted);
}

.filter-panel-item-value.has-selection {
    color: var(--color-nigun);
    font-weight: 600;
}

.filter-panel-item-options {
    display: none;
    margin-top: 6px;
    padding: 8px;
    background: #f8fafc;
    border-radius: 8px;
    max-height: 180px;
    overflow-y: auto;
}

.filter-panel-item.open .filter-panel-item-options {
    display: block;
}

.filter-panel-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85em;
    border-radius: 6px;
}

.filter-panel-option:hover {
    background: var(--color-nigun-pale);
}

.filter-panel-option input {
    accent-color: var(--color-nigun);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.filter-panel-active-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.filter-panel-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-nigun-pale);
    border-radius: 20px;
    font-size: 0.8em;
    color: var(--color-nigun-dark);
}

.filter-panel-tag-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    color: var(--color-nigun);
    padding: 0;
    margin-right: -2px;
}

.filter-panel-tag-remove:hover {
    color: var(--color-nigun-dark);
}

/* Filter colors for panel items */
.filter-panel-item[data-filter="playlist"] .filter-panel-item-btn::before {
    background: var(--color-playlist);
}

.filter-panel-item[data-filter="chatzer"] .filter-panel-item-btn::before {
    background: var(--color-chatzer);
}

.filter-panel-item[data-filter="mechaber"] .filter-panel-item-btn::before {
    background: var(--color-mechaber);
}

.filter-panel-item[data-filter="verter"] .filter-panel-item-btn::before {
    background: var(--color-verter);
}

.filter-panel-item[data-filter="gezungen"] .filter-panel-item-btn::before {
    background: #2e8b2e;
}

.filter-panel-item[data-filter="ritem"] .filter-panel-item-btn::before {
    background: var(--color-music);
}

.filter-panel-item[data-filter="scale"] .filter-panel-item-btn::before {
    background: var(--color-nigun);
}

.filter-panel-item .filter-panel-item-btn::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 10px 10px 0;
}

/* Responsive adjustments for filters */
@media (max-width: 768px) {
    .detail-section-header {
        flex-direction: column;
        gap: 12px;
    }

    .detail-filters-group {
        width: 100%;
        justify-content: flex-start;
    }
}

.detail-songs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 768px) {
    .detail-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .detail-image,
    .detail-icon {
        width: 120px;
        height: 120px;
    }

    .detail-title {
        font-size: 1.5em;
    }

    .detail-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Expanded card info (hidden by default) */
.card-expanded-info {
    display: none;
    margin: 15px 0;
    padding: 15px;
    background: linear-gradient(135deg, var(--primary-pale) 0%, #fff 100%);
    border-radius: 12px;
    border: 1px solid var(--primary-pale);
}

.category-card.expanded .card-expanded-info {
    display: block;
}

.card-image-large {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    float: right;
    margin-left: 15px;
    margin-bottom: 10px;
    border: 3px solid white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card-full-description {
    font-size: 0.95em;
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: 12px;
}

.card-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    clear: both;
}

.info-tag {
    background: white;
    color: var(--primary);
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    border: 1px solid var(--primary-pale);
}

.card-songs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-pale);
}

.card-songs-title {
    font-weight: 700;
    color: var(--primary);
    font-size: 1em;
}

/* Songs List inside Card */
.card-songs {
    display: none;
    margin-top: 20px;
    border-top: 1px solid var(--primary-pale);
    padding-top: 15px;
}

.category-card.expanded .card-songs {
    display: block;
}

.songs-list {
    list-style: none;
    max-height: 400px;
    overflow-y: auto;
    /* Padding to prevent hover effects from being clipped */
    padding: 10px;
    margin: -10px;
}
.song-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    background: var(--color-nigun-pale);
    border: none;
    box-shadow: 0 2px 8px rgba(74, 124, 201, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: visible;
}

/* Border effect using pseudo-element - fade from outside to inside */
.song-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    border: 2px solid var(--color-nigun);
    opacity: 0;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    /* Leave transition: fade out, then reset scale invisibly */
    transition: opacity 0.2s ease, top 0s 0.2s, bottom 0s 0.2s, left 0s 0.2s, right 0s 0.2s;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(74, 124, 201, 0.1);
    z-index: 10;
}

.song-item:hover::after {
    opacity: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Enter transition: animate scale and opacity immediately */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.song-item .song-name,
.song-item .song-number {
    transition: color 0.3s ease, background 0.3s ease;
}

.song-item:hover {
    box-shadow: 0 6px 20px rgba(74, 124, 201, 0.35);
    z-index: 5;
}

.song-item.no-audio {
    background: var(--color-nigun-pale);
    opacity: 0.7;
}

.song-item.no-audio:hover {
    opacity: 1;
    box-shadow: 0 6px 20px rgba(74, 124, 201, 0.35);
}

/* Active song item in minimal mode - dark blue background with fade */
.song-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-nigun);
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.song-item.active::before {
    opacity: 1;
}

.song-item.active {
    box-shadow: 0 4px 15px rgba(74, 124, 201, 0.4);
}

/* Ensure content is above the overlay */
.song-item>* {
    position: relative;
    z-index: 1;
}

.song-item.active .song-name {
    color: white;
}

.song-item.active .song-meta {
    color: rgba(255, 255, 255, 0.9);
}

.song-item.active::after {
    opacity: 0 !important;
}

.song-number {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--color-nigun);
    flex-shrink: 0;
}

.song-item.active .song-number {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.song-info {
    flex: 1;
    min-width: 0;
}

.song-name {
    font-weight: 600;
    font-size: 1.15em;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-nigun-dark);
    transition: color 0.4s ease;
}

.song-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    transition: color 0.4s ease;
}

.song-meta-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.song-meta-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.song-item.active .song-meta-link {
    color: rgba(255, 255, 255, 0.8);
}

.song-item.active .song-meta-link:hover {
    color: white;
}

/* Song meta tags - smaller pill buttons for song list */
.song-meta-tag {
    padding: 2px 8px !important;
    font-size: 0.75em !important;
    border-radius: 10px !important;
}

.song-play-btn {
    width: 35px;
    height: 35px;
    background: var(--gradient-main);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 0.9em;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.song-details-btn {
    padding: 6px 12px;
    background: var(--color-nigun-pale);
    border: 1px solid var(--color-nigun-light);
    border-radius: 8px;
    color: var(--color-nigun-dark);
    font-size: 0.8em;
    cursor: pointer;
    transition: var(--transition-smooth);
    flex-shrink: 0;
    font-family: inherit;
}

.song-details-btn:hover {
    background: var(--color-nigun);
    color: white;
    border-color: var(--color-nigun);
}

.song-item.active .song-details-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

/* New Play Button Styling */
.song-play-btn-new {
    width: 38px;
    height: 38px;
    background: var(--color-nigun);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(74, 124, 201, 0.3);
}

/* Larger clickable area around play button */
.song-play-btn-new::before {
    content: '';
    position: absolute;
    top: -18px;
    left: -18px;
    right: -18px;
    bottom: -18px;
    border-radius: 50%;
    cursor: pointer;
}

.song-play-btn-new:hover {
    background: var(--color-nigun-dark);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(74, 124, 201, 0.5);
}

.song-play-btn-new .play-icon,
.song-play-btn-new .pause-icon {
    position: absolute;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.song-play-btn-new .play-icon {
    opacity: 1;
    transform: scale(1);
}

.song-play-btn-new .pause-icon {
    opacity: 0;
    transform: scale(0.5);
}

.song-play-btn-new.playing .play-icon {
    opacity: 0;
    transform: scale(0.5);
}

.song-play-btn-new.playing .pause-icon {
    opacity: 1;
    transform: scale(1);
}

/* Play buttons in active song items - inverted colors for dark background */
.song-item.active .song-play-btn-new {
    background: white !important;
    color: var(--color-nigun-dark) !important;
    box-shadow: none !important;
}

.song-item.active .song-play-btn-new:hover {
    background: white !important;
    color: var(--color-nigun-dark) !important;
    transform: none !important;
}

/* Recording play button - smaller version */
.rec-play-btn {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
}

.rec-play-btn svg {
    width: 12px !important;
    height: 12px !important;
}

/* ===== ACTIVE NIGUN & RECORDING COLOR SCHEME =====
 * Color hierarchy (darkest to lightest):
 * 1. Active nigun header: var(--color-nigun-dark) #2d5aa0
 * 2. Active nigun body: var(--color-nigun) #4a7cc9  
 * 3. Recordings container: var(--color-nigun-light) with transparency
 * 4. Active recording: White with blue glow
 */

/* === ACTIVE RECORDING - Dark blue with white text and fade === */
.song-item-recording::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-nigun);
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.song-item-recording.active-recording::before {
    opacity: 1;
}

.song-item-recording.active-recording {
    box-shadow: 0 4px 15px rgba(74, 124, 201, 0.4);
}

/* Ensure content is above the overlay */
.song-item-recording>* {
    position: relative;
    z-index: 1;
}

/* Active recording hover - just shadow, no border animation */
.song-item-recording.active-recording::after {
    display: none;
}

.song-item-recording.active-recording:hover {
    box-shadow: 0 6px 20px rgba(74, 124, 201, 0.5);
}

.song-item-recording.active-recording .song-item-rec-num {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.song-item-recording.active-recording .song-item-rec-name {
    color: white;
    font-weight: 600;
}

.song-item-recording.active-recording .song-item-rec-tags .song-meta-tag {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.song-item-recording.active-recording .song-item-rec-tags .song-meta-separator {
    color: rgba(255, 255, 255, 0.6) !important;
}

.song-item-recording.active-recording .rating-icon-display {
    color: rgba(255, 255, 255, 0.9) !important;
}

.song-item-recording.active-recording .rec-play-btn {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
}

.song-item-recording.active-recording .rec-play-btn:hover {
    background: white !important;
    color: var(--color-nigun-dark) !important;
}

/* Low quality indicator button */
.song-btn-low-quality {
    background: var(--color-nigun-pale) !important;
    color: var(--color-nigun) !important;
    cursor: default !important;
    opacity: 0.7;
}

.song-btn-low-quality:hover {
    background: var(--color-nigun-pale) !important;
    transform: none !important;
    box-shadow: none !important;
}

.low-quality-icon {
    font-size: 18px;
    line-height: 1;
    color: var(--color-nigun);
}

/* Wave Animation - default standalone behavior (hidden, expands when active) */
.song-wave-animation {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 16px;
    margin-left: 8px;
    flex-shrink: 0;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, width 0.3s ease, margin 0.3s ease;
}

.song-item.active .song-wave-animation {
    opacity: 1;
    width: 20px;
}

/* Rating-slot: shared container for rating icon + wave (minimal mode only)
   Both children absolutely positioned to overlap in the same spot */
.song-rating-slot {
    position: relative;
    width: 33px;
    height: 16px;
    flex-shrink: 0;
}

.song-rating-slot .rating-icon-display {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, transform 0.2s ease;
}

.song-rating-slot .song-wave-animation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Crossfade: rating fades out + shrinks, wave fades in - same slot */
.song-item.active .song-rating-slot .rating-icon-display {
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
}

.song-item.active .song-rating-slot .song-wave-animation {
    opacity: 1;
    width: 100%;
}

.wave-bar {
    width: 3px;
    background: white;
    border-radius: 2px;
    height: 10px;
    transform-origin: center;
    transition: transform 0.3s ease-out;
}

/* Default state (loading/paused) - all bars at minimum height */
.song-item.active .wave-bar {
    transform: scaleY(0.4);
}

/* Animated state - bars wave when playing (not paused) */
.song-item.active:not(.paused) .wave-bar {
    animation: waveStream 0.8s ease-in-out infinite;
}

.song-item.active:not(.paused) .wave-bar:nth-child(1) {
    animation-delay: 0s;
}

.song-item.active:not(.paused) .wave-bar:nth-child(2) {
    animation-delay: 0.2s;
}

.song-item.active:not(.paused) .wave-bar:nth-child(3) {
    animation-delay: 0.1s;
}

.song-item.active:not(.paused) .wave-bar:nth-child(4) {
    animation-delay: 0.3s;
}

@keyframes waveStream {

    0%,
    100% {
        transform: scaleY(0.5);
    }

    50% {
        transform: scaleY(1.5);
    }
}

/* Fade to minimum keyframes */
@keyframes fadeToMin {
    to {
        transform: scaleY(0.4);
    }
}

/* Paused state - smoothly fade to minimum height */
.song-item.active.paused .wave-bar {
    animation: fadeToMin 0.3s ease-out forwards;
}

/* Player wave animation (bottom player) */
.player-wave-animation {
    display: none;
    align-items: center;
    gap: 2px;
    height: 16px;
    margin-right: 12px;
}

/* Show player wave when audio is loaded */
body.has-audio .player-wave-animation {
    display: inline-flex;
}

/* Player wave bars inherit from .wave-bar base styles */
/* Default: minimum height */
.player-wave-animation .wave-bar {
    transform: scaleY(0.4);
}

/* Playing state - animate */
body.playing .player-wave-animation .wave-bar {
    animation: waveStream 0.8s ease-in-out infinite;
}

body.playing .player-wave-animation .wave-bar:nth-child(1) {
    animation-delay: 0s;
}

body.playing .player-wave-animation .wave-bar:nth-child(2) {
    animation-delay: 0.2s;
}

body.playing .player-wave-animation .wave-bar:nth-child(3) {
    animation-delay: 0.1s;
}

body.playing .player-wave-animation .wave-bar:nth-child(4) {
    animation-delay: 0.3s;
}

/* Paused state for player - fade to minimum */
body.has-audio:not(.playing) .player-wave-animation .wave-bar {
    animation: fadeToMin 0.3s ease-out forwards;
}

/* Player Show Button wave animation */
#playerShowBtn .song-wave-animation {
    display: none;
}

/* Show wave in show button when audio loaded */
body.has-audio #playerShowBtn .song-wave-animation {
    display: inline-flex;
}

/* Playing state for show button */
body.playing #playerShowBtn .song-wave-animation .wave-bar {
    animation: waveStream 0.8s ease-in-out infinite;
}

body.playing #playerShowBtn .song-wave-animation .wave-bar:nth-child(1) {
    animation-delay: 0s;
}

body.playing #playerShowBtn .song-wave-animation .wave-bar:nth-child(2) {
    animation-delay: 0.2s;
}

body.playing #playerShowBtn .song-wave-animation .wave-bar:nth-child(3) {
    animation-delay: 0.1s;
}

body.playing #playerShowBtn .song-wave-animation .wave-bar:nth-child(4) {
    animation-delay: 0.3s;
}

/* Paused state for show button */
body.has-audio:not(.playing) #playerShowBtn .song-wave-animation .wave-bar {
    animation: fadeToMin 0.3s ease-out forwards;
}

/* Expanded song item (recordings mode) */
.song-item-expanded,
.song-item-full {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow: visible;
    height: 100%;
}

/* Hover effect for full mode - on the whole card */
.song-item-full:hover {
    box-shadow: 0 8px 25px rgba(74, 124, 201, 0.4);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.song-item-full {
    transition: all 0.3s ease;
    border-radius: 12px;
}

/* Blue border hover effect for full mode */
.song-item-full::after {
    border-radius: 12px;
    z-index: 100;
}

.song-item-full:hover::after {
    border-radius: 12px;
    z-index: 100;
}

/* === HEADER - Dark blue with white text === */
.song-item-expanded .song-item-header,
.song-item-full .song-item-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--color-nigun-dark) 0%, var(--color-nigun) 100%);
    border-radius: 12px 12px 0 0;
}

.song-item-expanded .song-item-header .song-name,
.song-item-full .song-item-header .song-name {
    color: white;
}

.song-item-expanded .song-item-header .song-meta,
.song-item-full .song-item-header .song-meta {
    color: rgba(255, 255, 255, 0.9);
}

.song-item-expanded .song-item-header .song-number,
.song-item-full .song-item-header .song-number {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.song-item-expanded .song-item-header .song-play-btn-new,
.song-item-full .song-item-header .song-play-btn-new {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.song-item-expanded .song-item-header .song-play-btn-new:hover,
.song-item-full .song-item-header .song-play-btn-new:hover {
    background: white;
    color: var(--color-nigun-dark);
}

/* Wave animation white for dark headers */
.song-item-expanded .song-item-header .song-wave-animation .wave-bar,
.song-item-full .song-item-header .song-wave-animation .wave-bar {
    background: white;
}

/* Wave animation white for active recordings */
.song-item-recording.active-recording .song-wave-animation .wave-bar {
    background: white !important;
}



.song-full-body {
    background: white;
    padding: 8px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    overflow: visible;
    position: relative;
}

/* Full mode header - single row RTL layout */
.song-full-header {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 20px;
    overflow: visible;
    z-index: 10;
    gap: 8px 20px;
}

/* Left section - holds mechaber and wave together */
.song-full-left-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
}

/* Title on the right (RTL) */
.song-full-title-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    max-width: 35%;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* Tags in center - use flex */
.song-full-tags-center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 4px;
    max-width: 50%;
    pointer-events: auto;
}

/* Tag group - keeps same type tags together on wrap */
.song-full-tag-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* White dot divider between tag groups */
.song-full-tag-divider {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9em;
    margin: 0 4px;
}

/* Inline mechaber for full mode - small horizontal pill */
.song-full-mechaber-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 2px 2px 14px;
    background: var(--color-mechaber);
    border-radius: 20px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 0;
}

.song-full-mechaber-inline:hover {
    transform: scale(1.03);
    box-shadow: 0 3px 10px rgba(156, 91, 181, 0.3);
}

.song-full-mechaber-inline .mechaber-avatar-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    overflow: hidden;
    flex-shrink: 0;
}

.song-full-mechaber-inline .mechaber-avatar-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.song-full-mechaber-inline .mechaber-avatar-small .placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-mechaber-pale) 0%, var(--color-mechaber-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-full-mechaber-inline .mechaber-avatar-small .mechaber-icon {
    width: 12px;
    height: 18px;
    background-color: var(--color-mechaber);
    -webkit-mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
    mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
}

.song-full-mechaber-inline .mechaber-name-small {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Mechaber profile in full mode - like modal (for legacy/fallback) */
.song-full-mechaber-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--color-mechaber-pale);
    border-radius: 25px;
    text-decoration: none;
    color: var(--color-mechaber-dark);
    transition: all 0.2s ease;
    cursor: pointer;
}

.song-full-mechaber-profile:hover {
    background: var(--color-mechaber-light);
    color: white;
    transform: scale(1.02);
}

.song-full-mechaber-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-mechaber-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-full-mechaber-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.song-full-mechaber-avatar .placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-mechaber-pale);
}

.song-full-mechaber-avatar .placeholder .mechaber-icon {
    width: 18px;
    height: 18px;
    background: var(--color-mechaber);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.song-full-mechaber-name {
    font-size: 0.9em;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.song-full-mechaber-name .mechaber-formal {
    font-size: 0.75em;
    opacity: 0.8;
    font-weight: 500;
}

.song-full-mechaber-name .mechaber-known {
    font-weight: 700;
}

/* Chatzeros tags in full mode */
.song-full-chatzeros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.song-full-chatzeros .chatzer-tag {
    padding: 6px 14px;
    background: var(--color-chatzer-pale);
    color: var(--color-chatzer-dark);
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.song-full-chatzeros .chatzer-tag:hover {
    background: var(--color-chatzer);
    color: white;
}

/* Simple tags row for full mode */
.song-full-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    justify-content: center;
}

/* Details grid inside full mode - smaller version */
.song-full-body .nigun-details-grid {
    margin: 8px 0;
    gap: 12px 10px;
}

.song-full-body .nigun-detail-box {
    min-width: 70px;
    max-width: 120px;
    min-height: 50px;
    padding: 6px 10px;
}

.song-full-body .nigun-detail-box-header {
    font-size: 0.65em;
    padding: 3px 6px;
}

.song-full-body .nigun-detail-box-content {
    padding-top: 20px;
    font-size: 0.85em;
}

.song-full-body .nigun-detail-siman-bar {
    margin: 8px auto;
    padding: 10px 16px;
    width: fit-content;
    max-width: 92%;
}

/* Song full hero - extends nigun-modal-hero */
.song-full-hero {
    position: relative;
    border-radius: 12px 12px 0 0;
}

.song-full-hero .nigun-modal-hero-title {
    font-size: 1.3em;
    margin-bottom: 8px;
}

.song-full-number {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85em;
}

/* Adjust hero-bottom for song-full */
.song-item-full-card .nigun-modal-hero-bottom {
    background: white;
    padding: 12px 16px;
}

.song-item-recordings {
    position: relative;
    border-top: none;
    padding: 12px 20px 16px;
    background: white;
    border-radius: 0 0 12px 12px;
    flex-grow: 1;
}

/* Individual recordings - light blue background with border animation */
.song-item-recording {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 6px 0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.4s ease;
    background: var(--color-nigun-pale);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(74, 124, 201, 0.3), 0 2px 6px rgba(74, 124, 201, 0.15);
}

/* Border effect using pseudo-element - same as song-item */
.song-item-recording::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 12px;
    border: 2px solid var(--color-nigun);
    background: transparent;
    opacity: 0;
    transition: opacity 0.2s ease, top 0s 0.2s, bottom 0s 0.2s, left 0s 0.2s, right 0s 0.2s;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 0 12px rgba(74, 124, 201, 0.15);
}

.song-item-recording:hover::after {
    opacity: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.song-item-recording:hover {
    box-shadow: 0 4px 15px rgba(74, 124, 201, 0.3);
}

/* Recording items in modal get same style as regular song-items */
.nigun-recordings-list .song-item-recording {
    background: var(--color-nigun-pale);
    box-shadow: inset 0 0 0 1px rgba(74, 124, 201, 0.3), 0 2px 6px rgba(74, 124, 201, 0.15);
    margin: 6px auto;
    border-radius: 10px;
    padding: 12px 14px;
    max-width: 550px;
    transition: box-shadow 0.3s ease;
    position: relative;
}

/* Border effect using pseudo-element - fade from outside to inside */
.nigun-recordings-list .song-item-recording::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 10px;
    border: 2px solid var(--color-nigun);
    background: transparent;
    opacity: 0;
    transition: opacity 0.2s ease, top 0s 0.2s, bottom 0s 0.2s, left 0s 0.2s, right 0s 0.2s;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(74, 124, 201, 0.1);
}

.song-item-recording:not(.active-recording):hover {
    background: var(--color-nigun-pale);
}

.nigun-recordings-list .song-item-recording:hover {
    box-shadow: 0 6px 20px rgba(74, 124, 201, 0.35);
}

.nigun-recordings-list .song-item-recording:hover::after {
    opacity: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.song-item-rec-num {
    width: 24px;
    height: 24px;
    background: var(--color-nigun-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 600;
    color: var(--color-nigun-dark);
    flex-shrink: 0;
}

.song-item-rec-name {
    flex: 1;
    font-size: 0.9em;
    color: var(--color-nigun-dark);
    font-weight: 600;
}

.song-item-rec-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.song-item-rec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.song-item-rec-tags .song-meta-tag {
    font-size: 0.75em;
    padding: 2px 8px;
    box-shadow: none !important;
}

.song-item-recording:not(.active-recording) .song-item-rec-tags .mechaber-tag {
    background: transparent !important;
    border: 1px solid var(--color-mechaber) !important;
    color: var(--color-mechaber-dark) !important;
}

.song-item-recording:not(.active-recording) .song-item-rec-tags .mechaber-tag:hover {
    background: var(--color-mechaber-pale) !important;
}

.song-item-recording:not(.active-recording) .song-item-rec-tags .album-tag {
    background: transparent !important;
    border: 1px solid var(--color-album) !important;
    color: var(--color-album-dark) !important;
}

.song-item-recording:not(.active-recording) .song-item-rec-tags .album-tag:hover {
    background: var(--color-album-pale) !important;
}

.song-item-rec-tags .song-meta-separator {
    font-size: 0.85em;
    opacity: 0.8;
}

/* Album tag color */
.tag-album {
    background: var(--color-album-pale, #e8f5e9) !important;
    color: var(--color-album-dark, #2e7d32) !important;
    border-color: var(--color-album-light, #81c784) !important;
}

/* Gezungen (sung by) tag color */
.tag-gezungen {
    background: #fff8e1 !important;
    color: #f57c00 !important;
    border-color: #ffcc80 !important;
}

/* Rating display slot for recordings to keep vertical alignment */
.song-item-rec-rating-slot {
    width: 33px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.song-item-recording .rating-icon-display {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.song-item-recording .rating-icon-display,
.song-item .rating-icon-display,
.song-rating-slot .rating-icon-display,
.nigun-recording-item .rating-icon-display {
    transform: scale(1);
    cursor: pointer;
}

.song-item-recording .rating-icon-display:hover,
.song-item .rating-icon-display:hover,
.song-rating-slot .rating-icon-display:hover,
.nigun-recording-item .rating-icon-display:hover {
    transform: scale(1.15) !important;
}

.song-item-rec-play {
    width: 28px;
    height: 28px;
    background: var(--color-nigun);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 0.75em;
    cursor: pointer;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.song-item-rec-play:hover {
    background: var(--color-nigun-dark);
    transform: scale(1.1);
}

/* Low quality recording indicator */
.song-item-rec-low-quality {
    background: var(--color-nigun-pale) !important;
    color: var(--color-nigun) !important;
    cursor: default !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-item-rec-low-quality:hover {
    background: var(--color-nigun-pale) !important;
    transform: none !important;
}

.low-quality-rec:not(.active-recording) {
    opacity: 0.65;
    background: white !important;
}

.low-quality-rec:not(.active-recording):hover {
    opacity: 1;
    background: white !important;
}

/* Active low-quality recordings keep their blue style */
.low-quality-rec.active-recording {
    opacity: 1;
}

/* === EXTRA INFO SECTION (Full mode) - Light blue === */
.song-full-details {
    border-top: none;
    padding: 14px 20px;
    background: var(--color-nigun-pale);
}

.song-full-label {
    font-weight: 600;
    color: var(--color-nigun-dark);
    white-space: nowrap;
    min-width: 80px;
}

.song-full-value {
    color: var(--text-dark);
}

.song-full-info .song-full-value {
    font-size: 0.9em;
    line-height: 1.4;
}

/* === RECORDINGS SECTION - White background === */
.song-full-recordings {
    border-top: none;
    padding: 12px 20px 16px;
    background: white;
    border-radius: 0 0 12px 12px;
}

.song-full-rec-title {
    font-weight: 600;
    font-size: 0.85em;
    color: var(--color-nigun-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rec-collapse-toggle {
    color: var(--color-nigun);
    cursor: pointer;
    font-size: 1em;
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.rec-collapse-toggle:hover {
    color: var(--color-nigun-dark);
    transform: scale(1.2);
}

/* Active song items - recordings inside keep normal color */
/* (Only the active-recording row gets blue styling) */

/* Tags container for full mode */
.song-full-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.song-full-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.85em;
}

/* Tag styles for scale and ritem */
.tag-scale {
    background: var(--color-music-pale, #e3f2fd) !important;
    color: var(--color-music-dark, #1565c0) !important;
    border-color: var(--color-music-light, #90caf9) !important;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.tag-scale:hover {
    background: var(--color-music-light, #90caf9) !important;
    transform: scale(1.05);
}

.tag-ritem {
    background: var(--color-music-pale, #fff8e1) !important;
    color: var(--color-music-dark, #b8960c) !important;
    border-color: var(--color-music-light, #ffe082) !important;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.tag-ritem:hover {
    background: var(--color-music-light, #ffe082) !important;
    color: var(--color-music-dark, #b8960c) !important;
    transform: scale(1.05);
}

.tag-siman {
    background: #f0f0f0 !important;
    color: #666666 !important;
    border-color: #d0d0d0 !important;
}

/* Date styling */
.song-full-date {
    font-size: 0.9em;
    color: var(--text-muted);
    background: var(--bg-muted, #f5f5f5);
    padding: 4px 10px;
    border-radius: 8px;
}

/* Active state - tags and date keep normal colors */
/* (No visual change when playing) */


.songs-card {
    background: transparent;
    border-radius: 16px;
    padding: 0;
    box-shadow: none;
}

.filters-container {
    max-width: 700px;
    margin: 0 auto 20px auto;
    background: var(--color-nigun-pale);
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 15px;
    border: 1px solid var(--color-nigun-light);
}

.all-songs-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    /* Default: full mode - 1 per row */
}

/* Minimal mode - 3 per row */
.view-mode-minimal .all-songs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* Recordings mode - 2 per row */
.view-mode-recordings .all-songs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

/* Full mode - 1 per row (default) */
.view-mode-full .all-songs-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .view-mode-minimal .all-songs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .view-mode-recordings .all-songs-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {

    .view-mode-minimal .all-songs-grid,
    .view-mode-recordings .all-songs-grid,
    .view-mode-full .all-songs-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Song item adjustments for minimal mode - compact horizontal layout */
.view-mode-minimal .song-item {
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    gap: 10px;
    overflow: visible;
    /* Keep visible for hover border animation */
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(74, 124, 201, 0.3), 0 2px 6px rgba(74, 124, 201, 0.15);
}

.view-mode-minimal .song-item .song-info {
    position: relative;
}

.view-mode-minimal .song-item .song-number {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    font-size: 0.75em;
}

.view-mode-minimal .song-item .song-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    overflow: visible;
}

.view-mode-minimal .song-item .song-name {
    font-size: 0.95em;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    max-height: 2.6em;
}

.view-mode-minimal .song-item .song-meta {
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
    width: 100%;
}

.view-mode-minimal .song-item .song-play-btn-new {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.view-mode-minimal .song-item .song-wave-animation {
    position: absolute;
    left: 45px;
    top: 50%;
    transform: translateY(-50%);
}

.view-mode-minimal .song-item .song-play-btn-new .play-icon svg,
.view-mode-minimal .song-item .song-play-btn-new .pause-icon svg {
    width: 12px;
    height: 12px;
}

/* Song meta separator styling */
.song-meta-separator {
    color: var(--color-nigun-dark);
}

/* Theme overrides for separator color */
.theme-mechaber .song-meta-separator {
    color: var(--color-mechaber-dark);
}

.theme-chatzer .song-meta-separator {
    color: var(--color-chatzer-dark);
}

.theme-verter .song-meta-separator {
    color: var(--color-verter-dark);
}

.theme-zman .song-meta-separator {
    color: var(--color-zman-dark);
}

.theme-playlist .song-meta-separator {
    color: var(--color-playlist-dark);
}

/* Separator hidden by default, shown via JS when tags are on same row */
.view-mode-minimal .song-item .song-meta-separator {
    display: none;
}

.view-mode-minimal .song-item .song-meta-separator.same-row {
    display: inline;
}

.all-songs-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.sort-btn {
    padding: 8px 16px;
    border: 2px solid var(--primary-pale);
    background: white;
    border-radius: 20px;
    font-size: 0.9em;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
}

.sort-btn:hover,
.sort-btn.active {
    border-color: var(--primary);
    background: var(--primary-pale);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--color-nigun-light);
}

.page-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-nigun-light);
    background: white;
    border-radius: 10px;
    font-size: 1em;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
}

.page-btn:hover:not(:disabled) {
    border-color: var(--color-nigun);
    background: var(--color-nigun-pale);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info {
    padding: 8px 16px;
    background: var(--color-nigun-pale);
    border-radius: 10px;
    font-weight: 600;
    color: var(--color-nigun-dark);
}
/* Phones: in a category detail (incl. its modal) the nigun list should show
   the full title — wrap it instead of truncating, and hide the tag row so the
   card has more room for the words. */
@media (max-width: 600px) {
    .detail-songs-list .song-item .song-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .detail-songs-list .song-item .song-meta {
        display: none;
    }
}

/* Fixed Player */
.player-section {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    width: calc(100% - 80px);
    max-width: 1200px;
    background: linear-gradient(180deg, #4a7cc9 0%, #7b5cbf 45%, #9b4cba 75%, #8b3fa8 100%);
    padding: 12px 25px;
    box-shadow: 0 8px 40px rgba(74, 18, 89, 0.35), 0 -4px 20px rgba(74, 18, 89, 0.15);
    z-index: 10500;
    direction: rtl;
    opacity: 0;
    border-radius: 20px;
    /* Smooth transitions for morph effect - minimal easing */
    transition:
        transform 0.4s ease-out,
        opacity 0.3s ease,
        width 0.4s ease-out,
        max-width 0.4s ease-out,
        padding 0.4s ease-out,
        border-radius 0.4s ease-out,
        left 0.4s ease-out,
        right 0.4s ease-out;
}

.player-section.player-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ========================================
   MINIMIZED PLAYER - SIMPLE CLEAN LAYOUT
    ======================================== */

/* Base minimized pill */
.player-section.player-visible.player-minimized {
    --minimized-progress: 0%;
    /* Position on right side of screen */
    left: auto !important;
    right: 30px;
    transform: translateX(0) translateY(0);
    width: 200px;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 20px;
    opacity: 1;
    cursor: pointer;
    background: var(--color-nigun, #4a7cc9);
    box-shadow: 0 6px 24px rgba(74, 124, 201, 0.5);
    overflow: hidden;
    position: fixed;
    bottom: 20px;
    transition: transform 0.4s ease, opacity 0.3s ease, box-shadow 0.3s ease, right 0.4s ease, left 0.4s ease, width 0.4s ease !important;
}

/* Hide ALL player-inner in minimized state */
.player-section.player-visible.player-minimized .player-inner {
    display: none !important;
}

/* Hide ::before in minimized state - using real element instead */
.player-section.player-visible.player-minimized::before {
    display: none !important;
}

/* Song name element for minimized player */
.minimized-song-name {
    display: none;
    position: absolute;
    left: 40px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9em;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    color: white;
    line-height: 1.2;
    direction: rtl;
}

/* Show only in minimized state */
.player-section.player-visible.player-minimized .minimized-song-name {
    display: block;
}

/* Minimized marquee styling */
.minimized-song-name.marquee span {
    display: inline-block;
    white-space: nowrap;
    animation: marqueeScroll var(--marquee-duration, 8s) linear infinite;
    animation-play-state: paused;
}

.minimized-song-name.marquee.running span {
    animation-play-state: running;
}

/* Progress bar background track via ::after */
.player-section.player-visible.player-minimized::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.9) var(--minimized-progress),
            rgba(255, 255, 255, 0.25) var(--minimized-progress),
            rgba(255, 255, 255, 0.25) 100%);
    border-radius: 0 0 20px 20px;
    pointer-events: none;
}

/* Hover effect - keep same position, just lift slightly */
.player-section.player-visible.player-minimized:hover {
    transform: translateX(0) translateY(-4px) scale(1.02);
    box-shadow: 0 10px 32px rgba(74, 124, 201, 0.6);
}

/* Single pulse that goes out twice, then pauses */
@keyframes double-pulse-out {
    0% {
        box-shadow:
            0 6px 24px rgba(74, 124, 201, 0.5),
            0 0 0 0 rgba(74, 124, 201, 0.4);
    }

    20% {
        box-shadow:
            0 6px 24px rgba(74, 124, 201, 0.5),
            0 0 0 18px rgba(74, 124, 201, 0);
    }

    21% {
        box-shadow:
            0 6px 24px rgba(74, 124, 201, 0.5),
            0 0 0 0 rgba(74, 124, 201, 0);
    }

    30% {
        box-shadow:
            0 6px 24px rgba(74, 124, 201, 0.5),
            0 0 0 0 rgba(74, 124, 201, 0.4);
    }

    50% {
        box-shadow:
            0 6px 24px rgba(74, 124, 201, 0.5),
            0 0 0 18px rgba(74, 124, 201, 0);
    }

    51%,
    100% {
        box-shadow:
            0 6px 24px rgba(74, 124, 201, 0.5),
            0 0 0 0 rgba(74, 124, 201, 0);
    }
}

/* Apply pulse animation when playing */
.player-section.player-visible.player-minimized.playing {
    animation: double-pulse-out 3s ease-out infinite;
}

/* Song name stays the same */
.player-section.player-visible.player-minimized::before {
    z-index: 1;
}

/* Minimized player play/pause button */
.minimized-play-btn {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    padding: 0;
}

/* Show button only in minimized state */
.player-section.player-visible.player-minimized .minimized-play-btn {
    display: flex;
}

.minimized-play-btn:hover {
    transform: translateY(-50%) scale(1.15);
    background: rgba(255, 255, 255, 0.4);
}

.minimized-play-btn svg {
    width: 16px;
    height: 16px;
}

/* Icons stacked with fade transitions */
.minimized-play-btn .mini-play-icon,
.minimized-play-btn .mini-pause-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease;
}

/* Play icon visible by default */
.minimized-play-btn .mini-play-icon {
    opacity: 1;
}

.minimized-play-btn .mini-pause-icon {
    opacity: 0;
}

/* Playing state - fade to pause */
.player-section.playing .minimized-play-btn .mini-play-icon {
    opacity: 0;
}

.player-section.playing .minimized-play-btn .mini-pause-icon {
    opacity: 1;
}

/* Adjust song name in minimized state to not overlap with button */
.player-section.player-visible.player-minimized::before {
    padding-left: 30px;
}

.player-hide-btn {
    position: absolute;
    top: 8px;
    left: 20px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.player-hide-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

.player-show-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    transform: translateY(100px);
    opacity: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 12px 24px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(123, 31, 162, 0.4);
    z-index: 10499;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    pointer-events: none;
}

.player-show-btn.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.player-show-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(123, 31, 162, 0.5);
}

/* Reset margin for wave animation inside button */
.player-show-btn .song-wave-animation {
    margin-right: 0;
    margin-left: 0;
    height: 18px;
    /* Match previous icon height */
}

.player-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    direction: rtl;
    position: static;
    height: auto;
}

/* Top row: song name (right/start) + recording info (left/end) */
.player-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

/* Bottom row: carousel (right/start) + function buttons (left/end) */
.player-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

/* Recording info carousel - left third */
.player-recording-info {
    position: relative;
    flex: 0 0 28%;
    min-width: 0;
    height: 22px;
    text-align: center;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
}

.player-recording-info .rec-carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0.4s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

.player-recording-info .rec-carousel-item.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0s;
}

.player-recording-info .rec-carousel-item.exiting {
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.4s ease, visibility 0s 0.3s;
}

/* Scroll container — stacked lines, scrolls up */
.rec-scroll-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0.4s;
}

.rec-scroll-wrap.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0s;
}

.rec-scroll-wrap.exiting {
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.4s ease, visibility 0s 0.3s;
}

.rec-scroll-inner {
    transition: transform 0.4s ease;
}

.rec-scroll-line {
    height: 22px;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

/* Subtle recording tag styles — thin border, transparent bg */
.player-rec-tag-personality,
.player-rec-tag-album,
.player-rec-tag-playlist,
.player-rec-tag-collection {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    padding: 0 8px;
    font-size: 0.85em;
    line-height: 20px;
    display: inline-block;
    background: transparent !important;
    font-weight: 400;
}

.player-rec-tag-personality:hover,
.player-rec-tag-album:hover,
.player-rec-tag-playlist:hover,
.player-rec-tag-collection:hover {
    border-color: rgba(255, 255, 255, 0.7);
    color: white;
}

.player-rec-tag-playlist {
    background: rgba(198, 40, 40, 0.35) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    border-color: rgba(198, 40, 40, 0.5);
    border-radius: 20px;
    padding: 0 10px;
}

.player-rec-tag-playlist:hover {
    background: rgba(198, 40, 40, 0.5) !important;
    border-color: rgba(198, 40, 40, 0.7);
    color: white;
}

.player-rec-tag-collection {
    background: rgba(176, 95, 3, 0.35) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    border-color: rgba(176, 95, 3, 0.5);
    border-radius: 20px;
    padding: 0 10px;
}

.player-rec-tag-collection:hover {
    background: rgba(176, 95, 3, 0.5) !important;
    border-color: rgba(176, 95, 3, 0.7);
    color: white;
}

/* Function buttons — CSS Grid guarantees center */
.player-functions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    flex: 0 0 28%;
    direction: rtl;
}

/* Button groups — align to edges */
.player-fn-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-fn-group:first-child {
    justify-self: center;
}

.player-fn-group:last-child {
    justify-self: center;
}

/* Stars — auto column = exact center */
.player-functions .player-rating {
    justify-self: center;
    padding: 0 10px;
}

/* ─── VOLUME: Vertically Expanding Pill ─── */
.player-volume-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    direction: ltr;
    z-index: 10;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
        border-radius 0.3s ease 0.15s,
        background 0.25s ease 0.1s,
        margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

.player-volume-wrap:hover {
    height: 80px;
    width: 32px;
    margin-top: -52px;
    border-radius: 16px;
    background: rgba(90, 45, 140, 0.95);
    z-index: 15;
    overflow: visible;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.3s ease,
        background 0.25s ease,
        margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.player-fn-volume {
    width: 28px;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    z-index: 2;
    position: absolute;
    bottom: 0;
    transition: opacity 0.2s ease 0.35s;
}

.player-volume-wrap:hover .player-fn-volume {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.player-fn-volume svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    transition: transform 0.2s ease;
}

/* Volume slider — vertical, fills entire expanded pill */
.player-volume {
    -webkit-appearance: none;
    appearance: none;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 28px;
    height: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s ease;
    z-index: 20;
    padding: 0;
}

.player-volume::-webkit-slider-runnable-track {
    width: 6px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 3px;
}

.player-volume::-moz-range-track {
    width: 6px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 3px;
}

.player-volume-wrap:hover .player-volume {
    opacity: 1;
    pointer-events: auto;
    height: auto;
    top: 6px;
    bottom: 6px;
    transition: opacity 0.3s ease 0.15s;
}

.player-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
    margin-left: -4px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.player-volume::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 1px 4px rgba(0, 0, 0, 0.3);
}

.player-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ─── SPEED: Vertically Expanding Pill ─── */
.player-speed-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    direction: ltr;
    z-index: 10;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
        border-radius 0.3s ease 0.15s,
        background 0.25s ease 0.1s,
        margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

.player-speed-wrap:hover {
    height: 80px;
    width: 32px;
    margin-top: -52px;
    border-radius: 16px;
    background: rgba(90, 45, 140, 0.95);
    z-index: 15;
    overflow: visible;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.3s ease,
        background 0.25s ease,
        margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.player-speed-trigger {
    width: 28px;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: white;
    font-size: 0.6em;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
    z-index: 2;
    position: absolute;
    bottom: 0;
    transition: opacity 0.2s ease 0.35s, transform 0.3s ease 0.35s;
}

.player-speed-wrap:hover .player-speed-trigger {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.player-speed-trigger:hover {
    background: none;
}

/* Speed options — vertical stack fills entire pill */
.player-speed-options {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 20;
    background: transparent;
    border: none;
}

.player-speed-wrap:hover .player-speed-options {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease 0.15s;
}

.player-speed-opt {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.5em;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.1;
}

.player-speed-opt:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.player-speed-opt.active {
    background: rgba(255, 255, 255, 0.35);
    color: white;
    font-weight: 700;
}

/* Direct function buttons (report, add-info, volume) */
.player-fn-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.player-fn-report:hover {
    background: rgba(255, 183, 77, 0.35);
    color: #ffcc80;
    box-shadow: 0 0 8px rgba(255, 183, 77, 0.3);
    transform: scale(1.1);
}

.player-fn-addinfo:hover {
    background: rgba(129, 199, 132, 0.35);
    color: #a5d6a7;
    box-shadow: 0 0 8px rgba(129, 199, 132, 0.3);
    transform: scale(1.1);
}

/* Info Carousel - Centered with flex */
.player-info-carousel {
    position: relative;
    flex: 0 0 28%;
    min-width: 0;
    height: 22px;
    text-align: center;
}

.carousel-item {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0.4s;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

.carousel-item.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0s;
    z-index: 2;
}

.carousel-item.exiting {
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    z-index: 1;
}

/* Playlist: different animation - scale fade */
.carousel-item.carousel-playlist {
    transform: scale(0.85);
}

.carousel-item.carousel-playlist.active {
    transform: scale(1);
}

.carousel-item.carousel-playlist.exiting {
    transform: scale(1.15);
}

.player-recording-name,
.player-personality-tag,
.player-album-tag {
    display: inline-block;
}

.player-personality-tag,
.player-album-tag {
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.55em, 1.5vw, 0.8em);
    color: inherit;
    text-decoration: none;
}

/* New carousel tag styles for mechaber/chatzer/playlists */
.player-carousel-tag {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.player-carousel-tag:hover {
    transform: scale(1.05);
}

/* Mechaber profile image in carousel */
.player-carousel-tag .carousel-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Mechaber: large white text, no background, with avatar */
.player-carousel-mechaber {
    color: white;
    font-size: 1.15em;
    font-weight: 700;
    background: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Chatzer: theme-light bg, white text */
.player-carousel-chatzer {
    padding: 3px 12px;
    border-radius: 14px;
    background: var(--color-chatzer, #4caf50);
    color: white;
    font-size: 0.8em;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Playlist: subtle red-tinted pill that blends with banner */
.player-carousel-playlist {
    padding: 3px 12px;
    border-radius: 14px;
    background: rgba(198, 40, 40, 0.25);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.8em;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 150, 150, 0.2);
}

/* Rating Icon - Left Side */
.player-rating {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

.player-rating-icon {
    display: flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.player-rating-icon .rating-icon-display {
    color: white;
    --rating-stroke-bg: rgba(0, 0, 0, 0.35);
}

/* Player banner styling handled by SVG masks now */

/* Rating icon display (used everywhere) */
.rating-icon-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 33px;
    margin: 0 auto;
    color: var(--color-nigun, #4a7cc9);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.rating-icon-display svg {
    display: inline-block;
    vertical-align: middle;
}

.rating-icon-display[data-quality="2"] {
    justify-content: flex-end;
}

/* SVG masks handle the transparent gap for quality 2+3 */

/* Keep scaled and bright when hovering OR when popup is open */
.rating-icon-display:hover,
.popup-open .rating-icon-display {
    transform: scale(1.15);
}

.rating-unrated {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s ease;
}

.rating-unrated:hover {
    color: rgba(255, 255, 255, 0.7);
}

.rating-label {
    font-size: 0.75rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    margin-inline-start: 4px;
}

.player-rating.saving .rating-icon-display {
    pointer-events: none;
    animation: pulse-star 0.4s ease infinite;
}

/* Saving animation - subtle pulse */
@keyframes pulse-star {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* ─── Rating Dialpad (3×3 grid) ─── */
.rating-dialpad {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    gap: 2px;
    direction: rtl;
    width: 100%;
}

.rating-dialpad-header-row {
    display: contents;
}

.rating-dialpad-col-header {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    padding: 4px 2px;
    white-space: nowrap;
}

.rating-dialpad-corner {
    min-width: 0;
}

.rating-dialpad-row {
    display: contents;
}

.rating-dialpad-row-header {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 8px 4px 4px;
    white-space: nowrap;
}

.rating-dialpad-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: rgba(0, 0, 0, 0.04);
    border: 1.5px solid #e8e8e8;
    min-width: 50px;
}

.rating-dialpad-cell:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: var(--color-nigun, #4a7cc9);
    transform: scale(1.05);
}

.rating-dialpad-cell.active {
    background: linear-gradient(135deg, #4a7cc9 0%, #965fa0 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 10px rgba(74, 124, 201, 0.35);
}

.rating-dialpad-cell-icon {
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
}

.rating-dialpad-cell-icon svg {
    display: block;
}

.rating-dialpad-cell-label {
    font-size: 0.55rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.rating-dialpad-cell.active .rating-dialpad-cell-label {
    color: rgba(255, 255, 255, 0.9);
}

/* Arranged/production row — highlighted as most common */
.rating-dialpad-row-production .rating-dialpad-cell {
    background: linear-gradient(135deg, rgba(74, 124, 201, 0.08) 0%, rgba(150, 95, 160, 0.08) 100%);
    border-color: rgba(74, 124, 201, 0.15);
}

.rating-dialpad-row-production .rating-dialpad-cell:hover {
    background: linear-gradient(135deg, rgba(74, 124, 201, 0.15) 0%, rgba(150, 95, 160, 0.15) 100%);
    border-color: var(--color-nigun, #4a7cc9);
}

.rating-dialpad-row-production .rating-dialpad-row-header {
    color: var(--color-nigun, #4a7cc9);
    font-weight: 700;
}

/* Rating Popup - restyled for dialpad */
.rating-popup {
    position: fixed;
    z-index: 999999;
    animation: popupSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--text-dark, #1a1a2e);
}

/* Transparent bridge to cover the 12px gap between icon and popup */
.rating-popup::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
}

.rating-popup-header {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-dark, #1a1a2e);
    font-weight: 700;
    margin-bottom: 12px;
    direction: rtl;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

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

@keyframes popupSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
}

/* ─── Rating Dialpad Modal — Icon & hover classes ─── */
.rating-dialpad-container .icon-color-dark {
    color: #002744;
}

.rating-dialpad-container .svg-icon-muted-grad {
    fill: url(#icon-grad-light);
}

.rating-dialpad-container .group:hover .svg-icon-muted-grad {
    fill: currentColor;
}

.rating-dialpad-container .group:hover .fade-up {
    opacity: 1;
    transform: translateY(0);
}

/* Search page quality dialpad in dropdown */
.search-quality-dialpad .rating-dialpad {
    margin-top: 8px;
}

.search-quality-dialpad .rating-dialpad-cell {
    background: rgba(0, 0, 0, 0.05);
}

.search-quality-dialpad .rating-dialpad-cell:hover {
    background: rgba(0, 0, 0, 0.1);
}

.search-quality-dialpad .rating-dialpad-cell.active {
    background: var(--color-music, #7c4dff);
    color: white;
}

/* Upload page dialpad in dropdown */
#upload-rating-dropdown .rating-dialpad-cell {
    background: rgba(0, 0, 0, 0.04);
}

#upload-rating-dropdown .rating-dialpad-cell:hover {
    background: rgba(0, 0, 0, 0.08);
}

#upload-rating-dropdown .rating-dialpad-cell.active {
    background: var(--color-music, #7c4dff);
    color: white;
}

.player-rec-tag-personality {
    background: var(--color-mechaber);
    color: white;
    box-shadow: 0 2px 6px rgba(196, 53, 168, 0.35);
    cursor: pointer;
    text-decoration: none;
}

.player-rec-tag-personality:hover {
    background: var(--color-mechaber-dark);
    transform: scale(1.05);
}

.player-rec-tag-album {
    background: var(--color-album);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 131, 143, 0.35);
    cursor: pointer;
    text-decoration: none;
}

.player-rec-tag-album:hover {
    background: var(--color-album-dark);
    transform: scale(1.05);
}

/* Slide album and personality from the right instead of bottom */
/* Now inheriting the base slide animation from .rec-carousel-item */
/* Playlist tags should fade in place without sliding */
.rec-carousel-item:has(.player-rec-tag-playlist) {
    transform: scale(0.95);
}

.rec-carousel-item.active:has(.player-rec-tag-playlist) {
    transform: scale(1);
}

.rec-carousel-item.exiting:has(.player-rec-tag-playlist) {
    transform: scale(1.05);
}

.player-right-song-name {
    font-weight: 700;
    font-size: 1.8em;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex: 0 0 28%;
    min-width: 0;
    direction: rtl;
    position: relative;
    text-align: center;
}

.player-right-song-name:hover {
    opacity: 0.85;
}

/* Marquee: wrapper keeps overflow:hidden, inner span animates */
.player-right-song-name.marquee {
    overflow: hidden;
    text-align: right;
}

.player-right-song-name.marquee span {
    display: inline-block;
    white-space: nowrap;
    /* Animation paused initially until offset is calculated */
    animation: marqueeScroll var(--marquee-duration, 10s) linear infinite;
    animation-play-state: paused;
    will-change: transform;
}

.player-right-song-name.marquee.running span {
    animation-play-state: running;
}

@keyframes marqueeScroll {

    0% {
        transform: translateX(var(--marquee-start, 0px));
    }

    90%,
    100% {
        /* Positive = scroll RIGHT, Copy2 enters from left (correct for RTL) */
        transform: translateX(calc(var(--marquee-start, 0px) + var(--marquee-width, 200px)));
    }
}

.player-hide-btn-inner {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.player-hide-btn-inner:hover {
    background: rgba(255, 255, 255, 0.35);
}

.player-mechaber-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.player-mechaber-row:has(.player-mechaber-profile[style*="display: none"]) {
    display: none;
}

.player-info {
    position: absolute;
    left: 2.5%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    direction: rtl;
    min-width: 0;
    width: calc(50% - 250px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Player more-trigger — expanding pill */
.player-more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    width: 22px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    gap: 0;
    transition:
        width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.25s ease,
        border-color 0.25s ease,
        gap 0.3s ease 0.05s;
    position: relative;
    z-index: 5;
}

.player-more:hover,
.player-more:focus-within {
    width: 52px;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    gap: 3px;
}

.player-more-trigger {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    gap: 2px;
    position: relative;
    transition:
        width 0.25s ease,
        opacity 0.2s ease;
}

.player-more-trigger .dot {
    display: block;
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.player-more:hover .player-more-trigger,
.player-more:focus-within .player-more-trigger {
    width: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
}

.player-more-btn {
    width: 0;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.13);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    transform: scale(0);
    transition:
        width 0.25s ease,
        opacity 0.2s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.player-more:hover .player-more-btn,
.player-more:focus-within .player-more-btn {
    width: 22px;
    opacity: 1;
    transform: scale(1);
}

/* staggered pop-in */
.player-more:hover .player-more-addinfo,
.player-more:focus-within .player-more-addinfo {
    transition-delay: 0.06s;
}

.player-more:hover .player-more-report,
.player-more:focus-within .player-more-report {
    transition-delay: 0.12s;
}

.player-more-addinfo:hover {
    background: rgba(129, 199, 132, 0.35);
    color: #a5d6a7;
    box-shadow: 0 0 8px rgba(129, 199, 132, 0.3);
}

.player-more-report:hover {
    background: rgba(255, 183, 77, 0.35);
    color: #ffcc80;
    box-shadow: 0 0 8px rgba(255, 183, 77, 0.3);
}

.player-song-name {
    font-weight: 700;
    font-size: 1.5em;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    max-width: 260px;
}

.player-song-name:hover {
    opacity: 0.85;
    text-decoration: underline;
}

.player-song-meta {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact mechaber badge - modern style */
.player-info-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.player-info-box:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.3);
}

.player-mechaber-profile {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
}

.player-mechaber-profile:hover {
    opacity: 0.85;
}

.player-mechaber-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    flex-shrink: 0;
}

.player-mechaber-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-mechaber-avatar .placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-mechaber-pale) 0%, var(--color-mechaber-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-mechaber-avatar .placeholder .mechaber-icon {
    width: 14px;
    height: 20px;
    background-color: var(--color-mechaber);
    -webkit-mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
    mask: url('/assets/mechaber-placeholder.svg') center/contain no-repeat;
}

.player-mechaber-name {
    font-size: 0.75em;
    font-weight: 600;
    color: white;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.player-info-content {
    display: none;
}

/* Player tags section */
.player-tags {
    display: none;
}

.player-tags-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    direction: rtl;
    width: 100%;
    overflow: hidden;
}

.player-tags-row:empty {
    display: none;
}

.player-tag-divider {
    color: white;
    font-weight: bold;
    font-size: 0.9em;
    margin: 0 2px;
    opacity: 0.8;
}

.player-tag-overflow {
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.68em;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    flex-shrink: 0;
}

/* Player info loading state */
.player-info-loading .player-tags-row {
    visibility: hidden;
}

.player-info-loading .player-tags-row::before {
    content: '';
    visibility: visible;
    display: block;
    width: 60%;
    height: 16px;
    margin: 0 auto;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.08) 75%);
    background-size: 200% 100%;
    animation: playerTagShimmer 1.2s ease-in-out infinite;
}

.player-info-loading .player-tags-row:empty::before {
    display: none;
}

@keyframes playerTagShimmer {
    0% {
        background-position: 200% 0;
    }

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

.player-tag {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.player-tag-chatzer {
    background: var(--color-chatzer-pale);
    color: var(--color-chatzer);
}

.player-tag-chatzer:hover {
    background: var(--color-chatzer-light);
    transform: scale(1.05);
}

.player-tag-personality {
    background: var(--color-mechaber-pale);
    color: var(--color-mechaber);
}

.player-tag-personality:hover {
    background: var(--color-mechaber-light);
    transform: scale(1.05);
}

.player-tag-playlist {
    background: var(--color-playlist-pale);
    color: var(--color-playlist);
}

.player-tag-playlist:hover {
    background: var(--color-playlist-light);
    transform: scale(1.05);
}

.player-tag-zman {
    background: var(--color-zman-pale);
    color: var(--color-zman);
}

.player-tag-zman:hover {
    background: var(--color-zman-light);
    transform: scale(1.05);
}

.player-tag-gezungen {
    background: var(--color-piyut-pale);
    color: var(--color-piyut);
}

.player-tag-gezungen:hover {
    background: var(--color-piyut-light);
    transform: scale(1.05);
}

.player-tag-verter {
    background: var(--color-verter-pale);
    color: var(--color-verter);
}

.player-tag-verter:hover {
    background: var(--color-verter-light);
    transform: scale(1.05);
}

.player-tag-pasig {
    background: var(--color-piyut-pale);
    color: var(--color-piyut);
}

.player-tag-pasig:hover {
    background: var(--color-piyut-light);
    transform: scale(1.05);
}

.player-tag-rhythm {
    background: var(--color-music-pale);
    color: var(--color-music);
}

.player-tag-rhythm:hover {
    background: var(--color-music-light);
    transform: scale(1.05);
}

.player-tag-scale {
    background: var(--color-music-pale);
    color: var(--color-music);
}

.player-tag-scale:hover {
    background: var(--color-music-light);
    transform: scale(1.05);
}

/* When no mechaber, reduce left padding */
.player-info-box.no-mechaber {
    padding-left: 12px;
}

/* Hide old meta when using new box */
.player-info-box .player-song-meta {
    display: none;
}

.player-meta-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.player-meta-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Entity-specific player meta links */
.player-meta-link-mechaber {
    color: var(--color-mechaber-dark);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.player-meta-link-mechaber:hover {
    color: var(--color-mechaber);
    text-decoration: underline;
}

.player-meta-link-chatzer {
    color: var(--color-chatzer-dark);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.player-meta-link-chatzer:hover {
    color: var(--color-chatzer);
    text-decoration: underline;
}

.player-controls {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -33%);
    z-index: 30;
    direction: ltr;
    /* Ensure buttons are clickable above progress bar */
}

.player-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.1em;
    cursor: pointer;
    border-radius: 50%;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.player-btn svg {
    display: block;
}

.player-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

.player-btn.main {
    width: 70px;
    height: 70px;
    background: transparent;
    color: var(--color-nigun);
    font-size: 1.6em;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: none;
    z-index: 10;
}

.player-btn-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.25);
    border: 3px solid rgba(255, 255, 255, 0.5);
    z-index: 1;
    transition: var(--transition-smooth);
}

.player-btn.main svg {
    width: 42px;
    height: 42px;
    fill: url(#playerBtnGradient);
    z-index: 2;
    position: relative;
}

.player-btn.main:hover .player-btn-bg {
    transform: scale(1.08);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.35);
}

/* Shockwave/Pulse Effect for Main Play Button */
@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.6);
        /* Expand nicely */
        opacity: 0;
    }
}

.player-btn.main::before,
.player-btn.main::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-chatzer);
    /* Use main theme color */
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.4);
    transition: all 0.6s ease-out;
}

.player-btn.main.playing::before {
    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.player-btn.main.playing::after {
    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    animation-delay: 0.6s;
    /* Staggered delay for ripple effect */
}

/* Animated play/pause icons in player */
.player-play-icon,
.player-pause-icon {
    position: absolute;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.player-play-icon svg,
.player-pause-icon svg {
    display: block;
}

.player-play-icon {
    opacity: 1;
    transform: scale(1);
}

.player-pause-icon {
    opacity: 0;
    transform: scale(0.5);
}

.player-btn.main.playing .player-play-icon {
    opacity: 0;
    transform: scale(0.5);
}

.player-btn.main.playing .player-pause-icon {
    opacity: 1;
    transform: scale(1);
}

.player-progress {
    position: absolute;
    left: 50%;
    top: auto;
    /* Remove top positioning */
    bottom: 2px;
    /* Position lower, moved down closer to edge */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    /* Put time display below bar */
    gap: 4px;
    width: 450px;
    max-width: 70%;
    padding: 0;
    /* Remove padding to lower it fully */
    cursor: pointer;
    z-index: 20;
    direction: ltr;
    /* Ensure it's above other elements */
}

/* Larger invisible container for hit testing */
.progress-bar-container {
    width: 100%;
    height: 40px;
    /* Even larger hit area for better usability */
    background: transparent;
    /* Invisible hit area */
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    margin-bottom: 0px;
    /* No margin, time display close to bar */
    /* Flex layout to center the visible inner bar */
    display: flex;
    align-items: center;
}

/* The actual visual progress bar - thinner by default */
.progress-bar-visual-bg {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.25);
    /* Visible track background moved here */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transform: scaleY(0.7);
    /* Start thin */
    transition: transform 0.2s ease;
}

/* Container hover expands the visual bar */
.player-progress:hover .progress-bar-visual-bg,
.progress-bar-container:hover .progress-bar-visual-bg {
    transform: scaleY(1.3);
    /* Grow thicker on hover */
}

/* The fill element */
.progress-bar {
    height: 100%;
    background: white;
    border-radius: 10px;
    width: 0%;
    transition: width 0.15s ease-out;
    /* Smooth movement for seeking and natural playback */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    position: relative;
    will-change: width;
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/* Loading */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--text-muted);
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--primary-pale);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

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

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 300;
    align-items: center;
    justify-content: center;
    padding: 20px 20px 150px 20px;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background: var(--gradient-main);
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.modal-header h2 {
    font-size: 1.3em;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
}

.modal-close {
    width: 35px;
    height: 35px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    font-size: 1.3em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.modal-body {
    padding: 25px;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

/* Modal recordings section */
.modal-recordings-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--primary-pale);
}

.modal-recordings-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 15px;
}

.modal-recordings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-recording-item {
    background: var(--primary-pale);
    border-radius: 12px;
    padding: 12px 15px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    position: relative;
}

/* ::before overlay for fade transition */
.modal-recording-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-nigun);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.modal-recording-item.active::before {
    opacity: 1;
}

/* Ensure content is above overlay */
.modal-recording-item>* {
    position: relative;
    z-index: 1;
}

.modal-recording-item:hover {
    background: var(--primary-light);
    transform: translateX(-3px);
}

.modal-recording-item.active {
    box-shadow: 0 4px 15px rgba(74, 124, 201, 0.4);
}

.modal-recording-item.active .modal-recording-name {
    color: white;
}

.modal-recording-item.active .modal-recording-play-btn {
    background: white;
    color: var(--primary);
}

.modal-recording-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.modal-recording-play-btn {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    flex-shrink: 0;
    transition: var(--transition-smooth);
}

.modal-recording-item:hover .modal-recording-play-btn {
    transform: scale(1.1);
}

.modal-recording-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95em;
}

/* Nigun Modal Overlay - Lightbox style */
.nigun-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px 20px 120px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nigun-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.nigun-modal-content {
    /* Match nigunim main page gradient background */
    background: linear-gradient(180deg, var(--color-nigun-pale) 0%, color-mix(in srgb, var(--color-nigun-pale) 30%, #f8fafc) 300px, #f8fafc 100%);
    border-radius: 20px;
    max-width: 850px;
    width: 100%;
    height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    position: relative;
    transform: scale(0.9) translateY(30px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    border: 3px solid var(--color-nigun);
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
}

/* Minimal scrollbar for nigun modal - just the thumb, no track */
.nigun-modal-content::-webkit-scrollbar {
    width: 8px;
    margin-right: -10px;
}

.nigun-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.nigun-modal-content::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: background 0.35s ease;
}

.nigun-modal-content.is-scrolling::-webkit-scrollbar-thumb {
    background: var(--color-nigun);
}

.nigun-modal-content.is-scrolling::-webkit-scrollbar-thumb:hover {
    background: var(--color-nigun-dark);
}

/* Hide scrollbar arrows */
.nigun-modal-content::-webkit-scrollbar-button {
    display: none;
}

/* Firefox scrollbar */
.nigun-modal-content {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.35s ease;
}

.nigun-modal-content.is-scrolling {
    scrollbar-color: var(--color-nigun) transparent;
}

.nigun-modal-overlay.active .nigun-modal-content {
    transform: scale(1) translateY(0);
}

/* Wrapper for modal content + close button */
.nigun-modal-wrapper {
    position: relative;
    max-width: 850px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Nigun modal close button - OUTSIDE the card, on the wrapper */
.nigun-modal-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    font-size: 1.8em;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    transition: all 0.25s ease, opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: scale(0.3);
}

.nigun-modal-overlay.active .nigun-modal-close {
    opacity: 1;
    transform: scale(1);
}

.nigun-modal-close:hover {
    background: #f5f5f5;
    color: #333;
    transform: scale(1.15);
}

/* Expand button - dropdown item style */
.nigun-modal-expand {
    position: relative;
    top: auto;
    left: auto;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    font-size: 1.2em;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 20;
    transition: all 0.25s ease;
}

.nigun-modal-expand:hover {
    background: var(--color-nigun-pale);
    color: var(--color-nigun-dark);
    transform: scale(1.15);
}

/* 3-dot more menu wrapper */
.nigun-modal-more {
    position: absolute;
    top: 65px;
    left: 20px;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nigun-modal-more-trigger {
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.nigun-modal-more-trigger .more-dots {
    font-size: 1.5em;
    font-weight: bold;
    color: #666;
    line-height: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
}

.nigun-modal-more-trigger .more-expand-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    color: #666;
}

/* Morph: dots fade out, expand icon rotates in — stays morphed while dropdown is open */
.nigun-modal-more:hover .nigun-modal-more-trigger .more-dots,
.nigun-modal-more:focus-within .nigun-modal-more-trigger .more-dots {
    opacity: 0;
    transform: scale(0.3) rotate(90deg);
}

.nigun-modal-more:hover .nigun-modal-more-trigger .more-expand-icon,
.nigun-modal-more:focus-within .nigun-modal-more-trigger .more-expand-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Touch devices: a tap opens the options (it doesn't expand to a full page),
   so keep the dots rather than morphing to the expand icon. */
@media (hover: none) {
    .nigun-modal-more:hover .nigun-modal-more-trigger .more-dots,
    .nigun-modal-more:focus-within .nigun-modal-more-trigger .more-dots {
        opacity: 1;
        transform: none;
    }

    .nigun-modal-more:hover .nigun-modal-more-trigger .more-expand-icon,
    .nigun-modal-more:focus-within .nigun-modal-more-trigger .more-expand-icon {
        opacity: 0;
    }
}

/* Color/scale effects only when directly hovering the trigger button */
.nigun-modal-more-trigger:hover {
    background: var(--color-nigun-pale);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

.nigun-modal-more-trigger:hover .more-expand-icon {
    transform: rotate(90deg);
}

/* Edit button - absolute positioning at top left next to more menu */
.nigun-modal-edit-btn {
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 1002;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
}

.nigun-modal-edit-btn:hover {
    background: white;
    color: var(--color-nigun);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.nigun-modal-edit-btn.edit-active {
    background: var(--color-nigun);
    color: white;
}

/* Touch: the edit button is hidden until the 3-dot menu is opened (it then
   appears in its place, above the trigger). */
@media (hover: none) {
    .nigun-modal-edit-btn {
        display: none;
    }

    .nigun-modal-edit-btn.more-edit-visible {
        display: flex;
    }
}

/* Dropdown that appears on hover - staggered cascade */
.nigun-modal-more-dropdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.nigun-modal-more:hover .nigun-modal-more-dropdown,
.nigun-modal-more:focus-within .nigun-modal-more-dropdown,
.nigun-modal-more.more-open .nigun-modal-more-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Staggered animation for dropdown items */
.nigun-modal-more-dropdown>button {
    opacity: 0;
    transform: scale(0.6) translateY(-10px);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nigun-modal-more-dropdown>button:nth-child(1) {
    transition-delay: 0.02s;
}

.nigun-modal-more-dropdown>button:nth-child(2) {
    transition-delay: 0.07s;
}

.nigun-modal-more-dropdown>button:nth-child(3) {
    transition-delay: 0.12s;
}

.nigun-modal-more-dropdown>button:nth-child(4) {
    transition-delay: 0.17s;
}

.nigun-modal-more:hover .nigun-modal-more-dropdown>button,
.nigun-modal-more:focus-within .nigun-modal-more-dropdown>button,
.nigun-modal-more.more-open .nigun-modal-more-dropdown>button {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Report button inside dropdown */
.nigun-modal-report {
    position: relative;
    top: auto;
    left: auto;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    font-size: 1.4em;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.25s ease;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nigun-modal-report:hover {
    background: #fff3e0;
    color: #e65100;
    transform: scale(1.15);
}

/* Add-info button inside dropdown */
.nigun-modal-addinfo {
    position: relative;
    top: auto;
    left: auto;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    font-size: 1.5em;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.25s ease;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nigun-modal-addinfo:hover {
    background: #e8f5e9;
    color: #2e7d32;
    transform: scale(1.15);
}

/* Copy link button inside dropdown */
.nigun-modal-copylink {
    position: relative;
    top: auto;
    left: auto;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    font-size: 1.35em;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.25s ease;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nigun-modal-copylink:hover {
    background: #fff8e1;
    color: #f9a825;
    transform: scale(1.15);
}

/* Share button inside dropdown */
.nigun-modal-share {
    position: relative;
    top: auto;
    left: auto;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    font-size: 1.35em;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.25s ease;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nigun-modal-share:hover {
    background: #f3e5f5;
    color: #7b1fa2;
    transform: scale(1.15);
}

/* Fullpage more trigger container */
.fullpage-more {
    position: absolute;
    top: 30px;
    left: 80px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0;
}

.fullpage-more-trigger {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.12);
    background: white;
    color: #555;
    font-size: 1.4em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    letter-spacing: 1px;
}

.fullpage-more-trigger:hover {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.25);
    color: #333;
    transform: scale(1.08);
}

/* Dropdown opens to the right of trigger */
.fullpage-more-dropdown {
    display: flex;
    flex-direction: row;
    gap: 6px;
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.fullpage-more:hover .fullpage-more-dropdown,
.fullpage-more:focus-within .fullpage-more-dropdown {
    pointer-events: auto;
    opacity: 1;
}

.fullpage-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    background: white;
    color: #666;
    font-size: 1.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: translateX(-12px) scale(0.7);
}

.fullpage-more:hover .fullpage-action-btn,
.fullpage-more:focus-within .fullpage-action-btn {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Staggered cascade animation */
.fullpage-more:hover .fullpage-action-btn:nth-child(1),
.fullpage-more:focus-within .fullpage-action-btn:nth-child(1) {
    transition-delay: 0.04s;
}

.fullpage-more:hover .fullpage-action-btn:nth-child(2),
.fullpage-more:focus-within .fullpage-action-btn:nth-child(2) {
    transition-delay: 0.09s;
}

.fullpage-more:hover .fullpage-action-btn:nth-child(3),
.fullpage-more:focus-within .fullpage-action-btn:nth-child(3) {
    transition-delay: 0.14s;
}

.fullpage-more:hover .fullpage-action-btn:nth-child(4),
.fullpage-more:focus-within .fullpage-action-btn:nth-child(4) {
    transition-delay: 0.19s;
}

/* Action button hover effects */
.fullpage-action-copylink:hover {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #1565c0;
}

.fullpage-action-share:hover {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #2e7d32;
}

.fullpage-action-addinfo:hover {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #2e7d32;
}

.fullpage-action-report:hover {
    background: #fff3e0;
    color: #e65100;
    border-color: #e65100;
}

/* Theme-specific trigger border colors */
.theme-mechaber .fullpage-more-trigger {
    border-color: var(--color-mechabrim-pale, rgba(0, 0, 0, 0.12));
}

.theme-mechaber .fullpage-more-trigger:hover {
    border-color: var(--color-mechabrim, #9c27b0);
    color: var(--color-mechabrim, #9c27b0);
}

.theme-chatzer .fullpage-more-trigger {
    border-color: var(--color-chatzeros-pale, rgba(0, 0, 0, 0.12));
}

.theme-chatzer .fullpage-more-trigger:hover {
    border-color: var(--color-chatzeros, #00897b);
    color: var(--color-chatzeros, #00897b);
}

.theme-verter .fullpage-more-trigger {
    border-color: var(--color-verter-pale, rgba(0, 0, 0, 0.12));
}

.theme-verter .fullpage-more-trigger:hover {
    border-color: var(--color-verter, #5c6bc0);
    color: var(--color-verter, #5c6bc0);
}

.theme-zman .fullpage-more-trigger {
    border-color: var(--color-zmanim-pale, rgba(0, 0, 0, 0.12));
}

.theme-zman .fullpage-more-trigger:hover {
    border-color: var(--color-zmanim, #ef6c00);
    color: var(--color-zmanim, #ef6c00);
}

.theme-playlist .fullpage-more-trigger {
    border-color: var(--color-playlists-pale, rgba(0, 0, 0, 0.12));
}

.theme-playlist .fullpage-more-trigger:hover {
    border-color: var(--color-playlists, #c62828);
    color: var(--color-playlists, #c62828);
}

.theme-piyut .fullpage-more-trigger {
    border-color: var(--color-piyutim-pale, rgba(0, 0, 0, 0.12));
}

.theme-piyut .fullpage-more-trigger:hover {
    border-color: var(--color-piyutim, #00838f);
    color: var(--color-piyutim, #00838f);
}

.nigun-detail-page .fullpage-more-trigger {
    border-color: var(--color-nigun-pale, rgba(0, 0, 0, 0.12));
}

.nigun-detail-page .fullpage-more-trigger:hover {
    border-color: var(--color-nigun, #e91e63);
    color: var(--color-nigun, #e91e63);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .fullpage-more {
        top: 18px;
        left: 56px;
    }

    .fullpage-more-trigger {
        width: 36px;
        height: 36px;
        font-size: 1.2em;
    }

    .fullpage-action-btn {
        width: 32px;
        height: 32px;
        font-size: 0.95em;
    }

    .fullpage-more-dropdown {
        left: 42px;
    }
}

/* Floating notes container for nigun modal */
.nigun-modal-notes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    border-radius: 20px;
}

.nigun-modal-notes .note-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    animation: songsNoteFlight linear infinite;
}

.nigun-modal-notes .musical-note {
    color: rgba(74, 124, 201, 0.12);
    text-shadow: 0 0 15px rgba(74, 124, 201, 0.08);
    font-size: inherit;
    display: block;
}

.nigun-modal-notes .musical-note.wander-1 {
    animation: wander1 ease-in-out infinite alternate;
}

.nigun-modal-notes .musical-note.wander-2 {
    animation: wander2 ease-in-out infinite alternate;
}

.nigun-modal-notes .musical-note.wander-3 {
    animation: wander3 ease-in-out infinite alternate;
}

/* Hide back button inside modal since we have our own close */
.nigun-modal-content .back-button {
    display: none;
}

/* Remove page-level padding and min-height inside modal */
.nigun-modal-content .detail-page {
    padding-top: 10px;
}

.nigun-modal-content .nigun-detail-page {
    min-height: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    position: static;
    flex: 1;
}

/* Hide fullpage report/addinfo buttons inside modal - modal has its own */
.nigun-modal-content .nigun-fullpage-report,
.nigun-modal-content .nigun-fullpage-addinfo {
    display: none;
}

/* Hide fullpage-more and detail-edit-btn inside modals - modal has its own buttons */
.detail-modal-body .fullpage-more,
.nigun-modal-content .fullpage-more,
.detail-modal-body .detail-edit-btn,
.nigun-modal-content .detail-edit-btn {
    display: none !important;
}

/* Fix overflow in modal */
#nigunModalBody {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Mobile responsiveness for nigun modal */
@media (max-width: 768px) {
    .nigun-modal-overlay {
        padding: 10px;
    }

    .nigun-modal-content {
        max-height: 95vh;
        border-radius: 15px;
    }

    .nigun-modal-close {
        top: -12px;
        right: -8px;
    }
}

/* Report Modal Styles */
.report-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.report-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.report-modal-content {
    background: linear-gradient(180deg, var(--color-nigun-pale) 0%, white 100%);
    border-radius: 24px;
    max-width: 480px;
    width: 90%;
    padding: 0;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    border: 3px solid var(--color-nigun);
    overflow: hidden;
}

.report-modal-overlay.active .report-modal-content {
    transform: scale(1) translateY(0);
}

.report-modal-header {
    background: linear-gradient(135deg, var(--color-nigun) 0%, var(--color-nigun-dark) 100%);
    color: white;
    padding: 24px 28px;
    text-align: center;
    position: relative;
}

.report-modal-header h3 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.report-modal-header h3::before {
    content: '⚠';
    font-size: 1.2em;
}

.report-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    font-size: 1.3em;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.report-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.report-modal-song-name {
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 20px;
    margin-top: 12px;
    display: inline-block;
    font-size: 0.95em;
    font-weight: 500;
}

.report-modal-body {
    padding: 28px;
}

.report-form-group {
    margin-bottom: 20px;
}

.report-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-nigun-dark);
    font-size: 0.95em;
}

.report-form-group select,
.report-form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--modal-color-pale);
    border-radius: 12px;
    font-size: 1em;
    font-family: inherit;
    background: white;
    color: var(--modal-color-dark);
    transition: all 0.25s ease;
    direction: rtl;
}

.report-form-group select:focus,
.report-form-group textarea:focus {
    outline: none;
    border-color: var(--modal-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--modal-color) 20%, transparent), 0 4px 12px color-mix(in srgb, var(--modal-color) 15%, transparent);
}

.report-form-group select {
    cursor: pointer;
    appearance: none;
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 20px;
    padding-left: 44px;
    font-weight: 500;
    accent-color: var(--modal-color);
}

.report-form-group select:hover {
    border-color: var(--modal-color);
}

.report-form-group select option {
    background: white;
    color: var(--modal-color-dark);
    padding: 12px;
}

.report-form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.report-form-group textarea::placeholder {
    color: var(--color-nigun);
    opacity: 0.6;
}

.report-submit-btn {
    width: auto;
    padding: 12px 32px;
    margin: 0 auto;
    display: block;
    background: linear-gradient(135deg, var(--color-nigun) 0%, var(--color-nigun-dark) 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(74, 124, 201, 0.3);
}

.report-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 124, 201, 0.4);
}

.report-submit-btn:active {
    transform: translateY(0);
}

@media (max-width: 480px) {
    .report-modal-content {
        width: 95%;
        border-radius: 20px;
    }

    .report-modal-header {
        padding: 20px;
    }

    .report-modal-body {
        padding: 20px;
    }
}

/* Report Success State */
.report-modal-content.success .report-modal-body {
    display: none;
}

.report-success-message {
    display: none;
    padding: 40px 28px;
    text-align: center;
    color: var(--color-nigun-dark);
}

.report-modal-content.success .report-success-message {
    display: block;
    animation: fadeInUp 0.4s ease;
}

.report-success-message .success-icon {
    font-size: 3em;
    margin-bottom: 16px;
    display: block;
}

.report-success-message h4 {
    font-size: 1.4em;
    margin: 0 0 12px 0;
    color: var(--modal-color);
}

.report-success-message p {
    font-size: 1em;
    line-height: 1.6;
    margin: 0;
    color: #666;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.report-modal-overlay.fade-out .report-modal-content {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
}

.report-modal-overlay.fade-out {
    opacity: 0;
}

/* ====== Scroll-to-playing highlight animation ====== */
@keyframes scrollHighlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 124, 201, 0.6);
    }

    30% {
        box-shadow: 0 0 18px 6px rgba(74, 124, 201, 0.35);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74, 124, 201, 0);
    }
}

/* Audio error toast */
.audio-error-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    direction: rtl;
}

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

.song-item.scroll-highlight {
    animation: scrollHighlightPulse 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    position: relative;
}

/* ============================================================
   MOBILE PLAYER — narrow screens
   On desktop the controls and progress bar are absolutely
   positioned and float over the two text rows. That overlaps
   badly on phones, so here we drop them back into normal flow
   and stack everything vertically.
   ============================================================ */
@media (max-width: 600px) {
    .player-section {
        width: calc(100% - 16px);
        bottom: 8px;
        padding: 10px 12px 12px;
        border-radius: 16px;
    }

    .player-inner {
        gap: 8px;
    }

    /* Controls back into the flow, centred */
    .player-controls {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        order: 2;
        margin: 0 auto;
        gap: 14px;
    }

    .player-btn.main {
        width: 58px;
        height: 58px;
    }

    /* Progress bar back into the flow, full width */
    .player-progress {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        order: 3;
        width: 100%;
        max-width: none;
    }

    .progress-bar-container {
        height: 28px;
    }

    /* Top row: just the song name, centred */
    .player-top-row {
        order: 1;
        gap: 8px;
    }

    .player-right-song-name {
        text-align: center;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .player-recording-info {
        flex: 0 1 auto;
        max-width: 40%;
    }

    /* Bottom row: carousel + function buttons, allowed to wrap */
    .player-bottom-row {
        order: 4;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 12px;
    }

    .player-info-carousel {
        flex: 1 1 100%;
        order: 1;
    }

    .player-functions {
        flex: 1 1 100%;
        order: 2;
        grid-template-columns: 1fr auto 1fr;
        gap: 4px;
    }
}
/* ============================================
   Add Info Modal Styles (Nigun Theme)
   ============================================ */
.addinfo-modal-overlay {
    /* Modal theme colors - dynamically set per category via JS */
    --modal-color: var(--color-nigun);
    --modal-color-dark: var(--color-nigun-dark);
    --modal-color-light: var(--color-nigun-light);
    --modal-color-pale: var(--color-nigun-pale);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* Base z-index, dynamically overridden when opened */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.addinfo-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Inline mode: embed modal in contribute page instead of popup overlay */
.addinfo-modal-overlay.inline-mode {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    background: none;
    backdrop-filter: none;
    z-index: 10;
    isolation: isolate;
    opacity: 1;
    visibility: visible;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: visible !important; /* Prevent parent overlay container from clipping child content */
}

.addinfo-modal-overlay.inline-mode .addinfo-modal-content {
    max-width: none;
    width: 100%;
    height: auto;
    /* Inline on the contribute page: expand to full content height and let the
       PAGE scroll. Without this the mobile max-height:90vh + overflow:hidden
       (from the overlay rules) clips the form. */
    max-height: none;
    overflow: visible !important; /* Ensure content is never clipped */
    border-radius: 0 0 24px 24px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
    border: none !important;
    transform: none;
    margin-top: -2px;
    display: block;
    background: linear-gradient(180deg, var(--modal-color, var(--color-nigun)) 0%, var(--modal-color-pale, var(--color-nigun-pale)) 15%, white 40%);
}

/* In inline mode, header is hidden by JS during wizard step 1,
   and shown again after the first selection. */

.addinfo-modal-overlay.inline-mode .addinfo-modal-close {
    display: none;
}

.addinfo-modal-overlay.inline-mode .addinfo-modal-header {
    z-index: 10;
}

.addinfo-modal-overlay.inline-mode .addinfo-modal-body {
    height: auto;
    overflow: visible !important;
    flex: none;
    padding-bottom: 10px;
}

.addinfo-modal-overlay.inline-mode .addinfo-panel {
    min-height: auto;
}

.addinfo-modal-overlay.inline-mode .addinfo-submit-btn,
.addinfo-modal-overlay.inline-mode #addinfoPanel>.addinfo-submit-btn,
.addinfo-modal-overlay.inline-mode #infoMechaberPanel>.addinfo-submit-btn {
    position: static !important;
    margin-top: 20px;
    margin-bottom: 20px;
}

.addinfo-modal-overlay.inline-mode .wizard-chooser {
    padding-top: 20px;
    overflow: visible !important;
}

.addinfo-modal-content {
    background: linear-gradient(180deg, var(--modal-color-pale) 0%, white 100%);
    border-radius: 24px;
    max-width: 700px;
    width: 95%;
    height: 85vh;
    padding: 0;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    border: 3px solid var(--modal-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Heebo', 'David Libre', sans-serif;
}

.addinfo-modal-content *,
.addinfo-modal-content input,
.addinfo-modal-content button,
.addinfo-modal-content select,
.addinfo-modal-content textarea {
    font-family: inherit;
}

.addinfo-modal-overlay.active .addinfo-modal-content {
    transform: scale(1) translateY(0);
}

.addinfo-modal-header {
    background: linear-gradient(135deg, var(--modal-color) 0%, var(--modal-color-dark) 100%);
    color: white;
    padding: 24px 28px 20px;
    text-align: center;
    position: relative;
    border-radius: 0 0 18px 18px;
    flex-shrink: 0;
}

/* Bottom-to-top color transition pseudo-element */
.addinfo-modal-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--header-new-bg, transparent);
    border-radius: inherit;
    clip-path: none;
    opacity: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 10000;
    transition: opacity 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}
.stats-custom-tooltip.visible {opacity: 1;
}

.addinfo-modal-header.header-color-changing::before {
    opacity: 1;
    transition: opacity 0.35s ease;
}

/* Ensure header content stays above the pseudo-element */
.addinfo-modal-header>* {
    position: relative;
    z-index: 1;
}

/* In inline mode before category selection: start with nigun (blue) to match hero bottom, fade to theme */
.addinfo-modal-overlay.inline-mode .addinfo-modal-header {
    background: linear-gradient(to bottom, var(--color-nigun) 0%, var(--color-nigun) 5%, var(--modal-color) 70%, var(--modal-color-dark) 100%);
}

/* Header expand-down animation — looks like it grows from the hero */
.addinfo-modal-header.header-expand {
    animation: headerExpandDown 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes headerExpandDown {
    0% {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        overflow: hidden;
    }

    100% {
        max-height: 140px;
        padding-top: 24px;
        padding-bottom: 20px;
        opacity: 1;
        overflow: visible;
    }
}

.addinfo-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    font-size: 1.3em;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.addinfo-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.addinfo-modal-song-name {
    font-size: 1.6em;
    font-weight: 700;
    margin-top: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.addinfo-modal-song-name:hover {
    opacity: 0.8;
}

/* Nigun selector in modal header (when no nigun pre-selected) */
.modal-nigun-selector {
    margin-top: 8px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.modal-nigun-selector .addinfo-autocomplete-input {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    text-align: center;
    border-radius: 20px;
    padding: 10px 20px;
}

.modal-nigun-selector .addinfo-autocomplete-input::placeholder {
    color: var(--modal-color);
    opacity: 0.6;
}

.modal-nigun-selector .addinfo-autocomplete-input:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}

.modal-nigun-selector .addinfo-autocomplete-dropdown {
    background: white;
    color: var(--text-dark);
    text-align: right;
}

.modal-nigun-selector .addinfo-selected-tags {
    justify-content: center;
}

/* Add Nigun Name Input - styled like song name header */
.addnigun-name-header-wrapper {
    text-align: center;
    margin-top: 8px;
}

.addnigun-name-input {
    width: 100%;
    font-size: 1.6em;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 8px 0;
    outline: none;
    transition: border-color 0.3s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.addnigun-name-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.addnigun-name-input:focus {
    border-bottom-color: white;
}

.addnigun-name-error {
    color: #fff;
    font-size: 0.95em;
    font-weight: 600;
    margin-top: 8px;
    display: none;
    text-align: center;
    background: #e74c3c;
    padding: 10px 16px;
    border-radius: 8px;
}

.addnigun-name-error.visible {
    display: block;
}

/* Report email field in header */
.report-email-header {
    text-align: center;
    margin-top: 8px;
}

.report-email-header .addnigun-name-input {
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0;
    text-shadow: none;
    text-align: right;
    direction: rtl;
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* Editor email + note fields in header */
.editor-contact-header {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.editor-contact-input {
    flex: 1;
    min-width: 0;
    font-size: 0.85em;
    font-weight: 500;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    color: white;
    padding: 6px 0;
    outline: none;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.editor-contact-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
}

.editor-contact-input:focus {
    border-bottom-color: white;
}

/* Content panels with slide animation */
.addinfo-panel {
    display: none;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    min-height: 50vh;
}

.addinfo-panel.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 1;
    transform: translateX(0);
}


.addinfo-panel.slide-in-right {
    animation: slideIn 0.3s ease forwards;
}

.addinfo-panel.slide-in-left {
    animation: slideInFromLeft 0.3s ease forwards;
}

.addinfo-panel.slide-out-left {
    animation: slideOutLeft 0.3s ease forwards;
}

.addinfo-panel.slide-out-right {
    animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

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

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

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

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

/* Vertical slide animations for category switching */
.addinfo-panel.slide-out-up {
    animation: slideOutUp 0.25s ease forwards;
}

.addinfo-panel.slide-in-from-bottom {
    animation: slideInFromBottom 0.25s ease forwards;
}

@keyframes slideOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Report panel fills space with large textarea */
#reportPanel .addinfo-section {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#reportPanel .addinfo-row:last-child {
    flex: 1;
    display: flex;
}

#reportPanel .addinfo-row:last-child .addinfo-field {
    display: flex;
    flex: 1;
}

#reportPanel textarea {
    flex: 1;
    min-height: 180px;
    resize: none;
}

.addinfo-modal-body {
    padding: 0 24px 24px;
    overflow-y: auto;
    flex: 1;
    height: 55vh;
}

/* Minimal scrollbar for add-info modal */
.addinfo-modal-body::-webkit-scrollbar {
    width: 8px;
}

.addinfo-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.addinfo-modal-body::-webkit-scrollbar-thumb {
    background: var(--modal-color);
    border-radius: 10px;
}

.addinfo-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--modal-color-dark);
}

/* Section styles - no section titles, just clean dividers */
/* Per-field existing value hint - floats on top border of input */
.field-existing-hint {
    position: absolute;
    top: 100%;
    right: 12px;
    margin-top: 4px;
    z-index: 2;
    max-width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    direction: rtl;
}

.field-existing-hint .hint-tag {
    display: inline-block;
    font-size: 0.62em;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 10px;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-existing-hint .hint-tag a {
    color: inherit;
    text-decoration: underline;
}

.addinfo-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--modal-color-pale);
}

.addinfo-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.addinfo-section-title {
    display: flex;
    direction: rtl;
    align-items: center;
    gap: 12px;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--modal-color);
    margin-bottom: 14px;
    margin-top: 8px;
    letter-spacing: 0.3px;
}

.addinfo-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, var(--modal-color), var(--modal-color-light), transparent);
}

/* ---- Collapsible 2-col grid (Add Info panels only) ---- */
/* Uses CSS Grid to avoid conflict with .addinfo-panel.active flex-direction:column */

#addinfoPanel.active,
#bulkAddinfoPanel,
#infoMechaberPanel.active,
#uploadAddinfoPanel.active {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-items: start;
    align-content: start;
}

#uploadAddinfoPanel.active {
    min-height: 0;
}

/* All non-collapsible items span full width */
#addinfoPanel.active>*:not(.addinfo-section.collapsible),
#bulkAddinfoPanel>*:not(.addinfo-section.collapsible),
#infoMechaberPanel.active>*:not(.addinfo-section.collapsible),
#uploadAddinfoPanel.active>*:not(.addinfo-section.collapsible) {
    grid-column: 1 / -1;
}

/* Collapsible sections: clean up spacing for grid */
#addinfoPanel>.addinfo-section.collapsible,
#bulkAddinfoPanel>.addinfo-section.collapsible,
#infoMechaberPanel>.addinfo-section.collapsible,
#uploadAddinfoPanel>.addinfo-section.collapsible {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    min-width: 0;
    /* prevent grid blowout */
    max-width: 100%;
    /* prevent grid blowout */
}

/* Sections marked fullwidth always span both columns */
#addinfoPanel>.addinfo-section.collapsible[data-fullwidth],
#bulkAddinfoPanel>.addinfo-section.collapsible[data-fullwidth],
#infoMechaberPanel>.addinfo-section.collapsible[data-fullwidth],
#uploadAddinfoPanel>.addinfo-section.collapsible[data-fullwidth] {
    grid-column: 1 / -1;
}

/* When a section is opened, it spans both columns */
#addinfoPanel>.addinfo-section.collapsible.open,
#bulkAddinfoPanel>.addinfo-section.collapsible.open,
#infoMechaberPanel>.addinfo-section.collapsible.open,
#uploadAddinfoPanel>.addinfo-section.collapsible.open {
    grid-column: 1 / -1;
}


/* Submit button inside the grid */
#addinfoPanel>.addinfo-submit-btn,
#bulkAddinfoPanel>.addinfo-submit-btn,
#infoMechaberPanel>.addinfo-submit-btn {
    grid-column: 1 / -1;
    width: auto;
    max-width: 300px;
    justify-self: center;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* Mobile: single column */
@media (max-width: 600px) {

    #addinfoPanel.active,
    #bulkAddinfoPanel,
    #infoMechaberPanel.active {
        grid-template-columns: 1fr;
    }
}

/* Title becomes a clickable button when collapsible */
.addinfo-section.collapsible>.addinfo-section-title {
    cursor: pointer;
    margin: 0;
    padding: 14px 20px;
    border: 2px solid var(--section-color, var(--modal-color));
    border-radius: 14px;
    background: white;
    color: var(--section-color-dark, var(--modal-color-dark));
    font-size: 0.95em;
    font-weight: 700;
    font-family: inherit;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.addinfo-section.collapsible>.addinfo-section-title::after {
    display: none;
}

.addinfo-section.collapsible>.addinfo-section-title:hover {
    border-color: var(--section-color, var(--modal-color));
    background: var(--section-color-pale, var(--modal-color-pale));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--section-color, var(--modal-color)) 20%, transparent);
}

.addinfo-section.collapsible>.addinfo-section-title:active {
    transform: translateY(0) scale(0.98);
}

/* Content area — collapsed by default */
.addinfo-section.collapsible>.addinfo-row {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0;
    /* When closing: hide overflow immediately to prevent spilling */
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease,
        margin-bottom 0.3s ease,
        overflow 0s;
}

/* Open state */
.addinfo-section.collapsible.open>.addinfo-section-title {
    background: var(--section-color, var(--modal-color));
    color: white;
    border-color: var(--section-color, var(--modal-color));
    border-radius: 14px 14px 0 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--section-color, var(--modal-color)) 25%, transparent);
}

.addinfo-section.collapsible.open>.addinfo-section-title:hover {
    background: var(--section-color-dark, var(--modal-color-dark));
    transform: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--section-color, var(--modal-color)) 25%, transparent);
}

.addinfo-section.collapsible.open>.addinfo-row {
    max-height: 500px;
    opacity: 1;
    overflow: visible;
    margin-bottom: 12px;
    padding-top: 14px;
    /* When opening: wait for max-height to finish (0.35s delay) before making overflow visible */
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease,
        margin-bottom 0.3s ease,
        overflow 0s 0.35s;
}

.addinfo-section.collapsible.open>.addinfo-row:last-of-type {
    margin-bottom: 4px;
    padding-bottom: 4px;
}

.addinfo-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.addinfo-row:last-child {
    margin-bottom: 0;
}

.addinfo-field {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Ensure space below the input for the absolute positioned hint */
.addinfo-field:has(.field-existing-hint) {
    margin-bottom: 22px;
}

.addinfo-field.full-width {
    flex: 1 1 100%;
}

.addinfo-field label {
    display: none;
    /* Hide labels - using placeholders instead */
}

.addinfo-field input[type="text"],
.addinfo-field textarea,
.addinfo-field select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--modal-color-pale);
    border-radius: 12px;
    font-size: 0.95em;
    font-family: inherit;
    background: white;
    color: var(--modal-color-dark);
    transition: all 0.25s ease;
    direction: rtl;
}

.addinfo-field input[type="text"]:focus,
.addinfo-field textarea:focus,
.addinfo-field select:focus {
    outline: none;
    border-color: var(--modal-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--modal-color) 20%, transparent), 0 4px 12px color-mix(in srgb, var(--modal-color) 15%, transparent);
}

.addinfo-field input[type="text"]::placeholder,
.addinfo-field textarea::placeholder {
    color: var(--modal-color);
    opacity: 0.6;
}

.addinfo-field textarea {
    min-height: 80px;
    resize: vertical;
}

.addinfo-field select {
    cursor: pointer;
    appearance: none;
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 18px;
    padding-left: 40px;
    accent-color: var(--modal-color);
}

/* File upload styling */
.addinfo-file-upload {
    border: 2px dashed var(--modal-color-pale);
    border-radius: 12px 12px 0 0;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    background: rgba(74, 124, 201, 0.05);
    margin-bottom: 0;
}

.addinfo-file-upload:hover {
    border-color: var(--modal-color);
    background: rgba(74, 124, 201, 0.1);
}

.addinfo-file-upload input[type="file"] {
    display: none;
}

.addinfo-file-upload-icon {
    font-size: 2em;
    color: var(--modal-color);
    margin-bottom: 8px;
}

.addinfo-file-upload-text {
    color: var(--modal-color-dark);
    font-weight: 500;
    font-size: 0.9em;
}

.addinfo-file-upload-hint {
    color: var(--modal-color);
    opacity: 0.7;
    font-size: 0.8em;
    margin-top: 4px;
}

/* Link paste alternative */
.addinfo-file-link-divider {
    text-align: center;
    color: var(--modal-color);
    opacity: 0.6;
    font-size: 0.8em;
    margin: 10px 0 6px;
}

.addinfo-file-link-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--modal-color-pale);
    border-top: 1px dashed var(--modal-color-pale);
    border-radius: 0 0 12px 12px;
    font-size: 0.95em;
    font-family: inherit;
    background: white;
    color: var(--text-primary);
    direction: ltr;
    text-align: left;
    transition: all 0.25s ease;
    box-sizing: border-box;
    margin-top: 0;
}

.addinfo-file-link-input::placeholder {
    direction: rtl;
    text-align: right;
    color: var(--modal-color);
    opacity: 0.6;
}

.addinfo-file-link-input:focus {
    outline: none;
    border-color: var(--modal-color);
    box-shadow: 0 0 0 4px rgba(74, 124, 201, 0.2), 0 4px 12px rgba(74, 124, 201, 0.15);
}

.addinfo-file-link-input.link-valid {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.05);
}

.addinfo-file-link-input.link-invalid {
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.05);
}

/* File selected state */
.addinfo-file-upload.file-selected {
    border-color: #4CAF50;
    border-style: solid;
    background: rgba(76, 175, 80, 0.1);
}

.addinfo-file-upload.file-selected .addinfo-file-upload-icon {
    color: #4CAF50;
}

.addinfo-file-upload.file-selected .addinfo-file-upload-icon::after {
    content: ' ✓';
}

.addinfo-file-upload.file-selected .addinfo-file-upload-text {
    color: #2E7D32;
}

.addinfo-file-upload.file-selected .addinfo-file-upload-hint {
    color: #4CAF50;
    opacity: 1;
}

/* File upload failed state */
.addinfo-file-upload.upload-failed {
    border-color: #f44336;
    border-style: solid;
    background: rgba(244, 67, 54, 0.1);
}

.addinfo-file-upload.upload-failed .addinfo-file-upload-icon {
    color: #f44336;
}

.addinfo-file-upload.upload-failed .addinfo-file-upload-icon::after {
    content: ' ✗';
}

.addinfo-file-upload.upload-failed .addinfo-file-upload-text {
    color: #c62828;
}

.addinfo-file-upload.upload-failed .addinfo-file-upload-hint {
    color: #f44336;
    opacity: 1;
}

/* Field validation error styles */
.input-error,
textarea.input-error,
select.input-error {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2) !important;
}

.field-error-msg {
    color: #e53e3e;
    font-size: 13px;
    margin-bottom: 6px;
    display: none;
    width: 100%;
    text-align: right;
    font-weight: 600;
}

/* Submit button loading state */
.addinfo-submit-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.addinfo-submit-btn .btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

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

/* Checkbox styling */
.addinfo-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(74, 124, 201, 0.08);
    border-radius: 10px;
    cursor: pointer;
}

.addinfo-checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--modal-color);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.addinfo-checkbox-wrapper label {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.4;
    cursor: pointer;
    color: var(--modal-color-dark);
    display: block !important;
    /* Keep checkbox label visible */
}

/* Submit button */
.addinfo-submit-btn {
    width: auto;
    padding: 14px 40px;
    margin: 20px auto 0;
    display: block;
    background: var(--wizard-btn-bg, linear-gradient(135deg, var(--modal-color) 0%, var(--modal-color-dark) 100%));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.source-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    direction: rtl;
}

.source-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    border: 1.5px solid #d0d7e2;
    background: #f4f6fa;
    color: #5a6577;
    font-size: 0.78em;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    font-family: inherit;
    line-height: 1.4;
}

.source-chip:hover {
    border-color: var(--modal-color);
    background: #eaf0fb;
}

.source-chip.active {
    background: linear-gradient(135deg, var(--modal-color) 0%, var(--modal-color-dark) 100%);
    color: white;
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(74, 124, 201, 0.35);
}

.source-chip.active::before {
    content: '✓ ';
    font-weight: 700;
}

.addinfo-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 124, 201, 0.4);
}

.addinfo-submit-btn:active {
    transform: translateY(0);
}

/* Success state */
.addinfo-modal-content.success .addinfo-modal-body {
    display: none;
}

.addinfo-success-message {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 55vh;
    padding: 40px 28px;
    text-align: center;
    color: var(--modal-color-dark);
}

.addinfo-modal-content.success .addinfo-success-message {
    display: flex;
    animation: fadeInUp 0.4s ease;
}

.addinfo-success-message .success-icon {
    font-size: 3em;
    margin-bottom: 16px;
    display: block;
    color: var(--modal-color);
}

.addinfo-success-message h4 {
    font-size: 1.4em;
    margin: 0 0 12px 0;
    color: var(--modal-color);
}

.addinfo-success-message p {
    font-size: 1em;
    line-height: 1.6;
    margin: 0;
    color: #666;
}

/* Fade out animation */
.addinfo-modal-overlay.fade-out .addinfo-modal-content {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
}

.addinfo-modal-overlay.fade-out {
    opacity: 0;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .addinfo-modal-content {
        width: 98%;
        max-height: 90vh;
        border-radius: 20px;
    }

    .addinfo-modal-header {
        padding: 16px 20px;
    }

    .addinfo-modal-body {
        padding: 16px;
    }

    .addinfo-row {
        flex-direction: column;
        gap: 10px;
    }

    .addinfo-field {
        flex: 1 1 100%;
    }
}

/* Autocomplete dropdown styling */
.addinfo-autocomplete-wrapper {
    position: relative;
    width: 100%;
}

.addinfo-autocomplete-input {
    width: 100%;
    padding: 14px 16px;
    padding-left: 40px;
    /* Space for dropdown arrow */
    border: 2px solid var(--modal-color-pale);
    border-radius: 12px;
    font-size: 0.95em;
    font-family: inherit;
    background: white;
    color: var(--modal-color-dark);
    transition: all 0.25s ease;
    direction: rtl;
    cursor: text;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234a7cc9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
}

.addinfo-autocomplete-input:focus {
    outline: none;
    border-color: var(--modal-color);
    box-shadow: 0 0 0 4px rgba(74, 124, 201, 0.2), 0 4px 12px rgba(74, 124, 201, 0.15);
}

.addinfo-autocomplete-input::placeholder {
    color: var(--modal-color);
    opacity: 0.6;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.addinfo-autocomplete-dropdown::-webkit-scrollbar {
    width: 6px;
}

.addinfo-autocomplete-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.addinfo-autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: var(--modal-color-pale);
    border-radius: 6px;
}

.addinfo-autocomplete-item {
    display: inline-block;
    margin: 4px;
    padding: 6px 14px;
    background: var(--modal-color);
    color: white;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85em;
    font-weight: 500;
    direction: rtl;
    box-shadow: 0 2px 8px rgba(107, 137, 147, 0.3);
}

/* Category-specific colors for items */
.addinfo-autocomplete-item.source-nigunim {
    background: var(--color-nigun);
    box-shadow: 0 2px 8px rgba(74, 124, 201, 0.3);
}

.addinfo-autocomplete-item.source-mechabrim {
    background: var(--color-mechaber);
    box-shadow: 0 2px 8px rgba(196, 53, 168, 0.3);
}

.addinfo-autocomplete-item.source-chatzeros {
    background: var(--color-chatzer);
    box-shadow: 0 2px 8px rgba(156, 91, 181, 0.3);
}

.addinfo-autocomplete-item.source-verter {
    background: var(--color-verter);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
}

.addinfo-autocomplete-item.source-zmanim {
    background: var(--color-zman);
    box-shadow: 0 2px 8px rgba(233, 106, 27, 0.3);
}

.addinfo-autocomplete-item.source-piyutim {
    background: var(--color-piyut);
    box-shadow: 0 2px 8px rgba(46, 139, 46, 0.3);
}

.addinfo-autocomplete-item.source-playlists {
    background: var(--color-playlist);
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.3);
}

.addinfo-autocomplete-item.source-collections {
    background: var(--color-collection);
    box-shadow: 0 2px 8px rgba(176, 95, 3, 0.3);
}

.addinfo-autocomplete-item.source-scales {
    background: var(--color-music);
    box-shadow: 0 2px 8px rgba(212, 172, 18, 0.3);
}

.addinfo-autocomplete-item.source-rhythms {
    background: var(--color-music);
    box-shadow: 0 2px 8px rgba(212, 172, 18, 0.3);
}

.addinfo-autocomplete-item.source-documents {
    background: var(--color-document);
    box-shadow: 0 2px 8px rgba(0, 160, 176, 0.3);
}

.addinfo-autocomplete-item.source-albums {
    background: var(--color-album);
    box-shadow: 0 2px 8px rgba(0, 131, 143, 0.3);
}

.addinfo-autocomplete-item:hover,
.addinfo-autocomplete-item.highlighted {
    transform: scale(1.05);
    filter: brightness(0.9);
}

.addinfo-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--modal-color-pale);
    border-radius: 16px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 10000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: none;
    padding: 8px;
    text-align: right;
}

.addinfo-autocomplete-dropdown.active {
    display: block;
    animation: dropdownFadeIn 0.2s ease;
}

.addinfo-autocomplete-empty {
    padding: 16px;
    text-align: center;
    color: #888;
    font-size: 0.9em;
    direction: rtl;
}

.addinfo-autocomplete-loading {
    padding: 16px;
    text-align: center;
    color: var(--modal-color);
}

/* Selected tags - separate row below input */
.addinfo-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    padding-top: 4px;
    border-top: 1px solid var(--modal-color-pale);
}

.addinfo-selected-tags:empty {
    display: none;
}

/* Wrapper: column layout so input is above tags */
.addinfo-autocomplete-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: white;
    border: 2px solid var(--modal-color-pale);
    border-radius: 12px;
    direction: rtl;
    min-height: 48px;
    justify-content: center;
}

.addinfo-autocomplete-wrapper:focus-within {
    border-color: var(--modal-color);
    box-shadow: 0 0 0 3px rgba(107, 137, 147, 0.1);
}

.addinfo-autocomplete-input {
    flex: 1;
    min-width: 100px;
    border: none !important;
    padding: 4px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    order: 999;
    /* Input goes last, so tags appear first (right side in RTL) */
}

.addinfo-autocomplete-input:focus {
    border: none !important;
    box-shadow: none !important;
}

/* For single-select: hide input when has selection, allow clicking to reselect */
.addinfo-autocomplete-wrapper[data-multi="false"].has-selection .addinfo-autocomplete-input {
    position: absolute;
    opacity: 0;
    width: 0;
    min-width: 0;
    flex: 0;
    pointer-events: none;
}

/* Hide tags container when no selections for single-select */
.addinfo-autocomplete-wrapper[data-multi="false"]:not(.has-selection) .addinfo-selected-tags {
    display: none;
}

.addinfo-selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--modal-color) 0%, var(--modal-color-dark) 100%);
    border-radius: 20px;
    font-size: 0.9em;
    color: white;
    direction: rtl;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.addinfo-selected-tag .tag-text {
    cursor: pointer;
    transition: opacity 0.15s;
}

.addinfo-selected-tag .tag-text:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Category-specific colors for selected tags */
.addinfo-selected-tag.source-nigunim {
    background: linear-gradient(135deg, var(--color-nigun) 0%, var(--color-nigun-dark) 100%);
}

.addinfo-selected-tag.source-mechabrim {
    background: linear-gradient(135deg, var(--color-mechaber) 0%, var(--color-mechaber-dark) 100%);
}

.addinfo-selected-tag.source-chatzeros {
    background: linear-gradient(135deg, var(--color-chatzer) 0%, var(--color-chatzer-dark) 100%);
}

.addinfo-selected-tag.source-verter {
    background: linear-gradient(135deg, var(--color-verter) 0%, var(--color-verter-dark) 100%);
}

.addinfo-selected-tag.source-zmanim {
    background: linear-gradient(135deg, var(--color-zman) 0%, var(--color-zman-dark) 100%);
}

.addinfo-selected-tag.source-piyutim {
    background: linear-gradient(135deg, var(--color-piyut) 0%, var(--color-piyut-dark) 100%);
}

.addinfo-selected-tag.source-playlists {
    background: linear-gradient(135deg, var(--color-playlist) 0%, var(--color-playlist-dark) 100%);
}

.addinfo-selected-tag.source-collections {
    background: linear-gradient(135deg, var(--color-collection) 0%, var(--color-collection-dark) 100%);
}

.addinfo-selected-tag.source-scales {
    background: linear-gradient(135deg, var(--color-music) 0%, var(--color-music-dark) 100%);
}

.addinfo-selected-tag.source-rhythms {
    background: linear-gradient(135deg, var(--color-music) 0%, var(--color-music-dark) 100%);
}

.addinfo-selected-tag.source-documents {
    background: linear-gradient(135deg, var(--color-document) 0%, var(--color-document-dark) 100%);
}

.addinfo-selected-tag.source-albums {
    background: linear-gradient(135deg, var(--color-album) 0%, var(--color-album-dark) 100%);
}

/* Single-select input styling when has value - looks like a tag */
.addinfo-autocomplete-input.has-value {
    background: linear-gradient(135deg, var(--modal-color) 0%, var(--modal-color-dark) 100%) !important;
    color: white !important;
    font-weight: 500;
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.addinfo-autocomplete-input.has-value::placeholder {
    color: transparent !important;
}

/* Category-specific colors for single-select inputs */
.addinfo-autocomplete-input.has-value.source-nigunim {
    background: linear-gradient(135deg, var(--color-nigun) 0%, var(--color-nigun-dark) 100%) !important;
}

.addinfo-autocomplete-input.has-value.source-mechabrim {
    background: linear-gradient(135deg, var(--color-mechaber) 0%, var(--color-mechaber-dark) 100%) !important;
}

.addinfo-autocomplete-input.has-value.source-chatzeros {
    background: linear-gradient(135deg, var(--color-chatzer) 0%, var(--color-chatzer-dark) 100%) !important;
}

.addinfo-autocomplete-input.has-value.source-verter {
    background: linear-gradient(135deg, var(--color-verter) 0%, var(--color-verter-dark) 100%) !important;
}

.addinfo-autocomplete-input.has-value.source-zmanim {
    background: linear-gradient(135deg, var(--color-zman) 0%, var(--color-zman-dark) 100%) !important;
}

.addinfo-autocomplete-input.has-value.source-piyutim {
    background: linear-gradient(135deg, var(--color-piyut) 0%, var(--color-piyut-dark) 100%) !important;
}

.addinfo-autocomplete-input.has-value.source-playlists {
    background: linear-gradient(135deg, var(--color-playlist) 0%, var(--color-playlist-dark) 100%) !important;
}

.addinfo-autocomplete-input.has-value.source-collections {
    background: linear-gradient(135deg, var(--color-collection) 0%, var(--color-collection-dark) 100%) !important;
}

.addinfo-autocomplete-input.has-value.source-scales {
    background: linear-gradient(135deg, var(--color-music) 0%, var(--color-music-dark) 100%) !important;
}

.addinfo-autocomplete-input.has-value.source-rhythms {
    background: linear-gradient(135deg, var(--color-music) 0%, var(--color-music-dark) 100%) !important;
}

.addinfo-autocomplete-input.has-value.source-documents {
    background: linear-gradient(135deg, var(--color-document) 0%, var(--color-document-dark) 100%) !important;
}

.addinfo-autocomplete-input.has-value.source-albums {
    background: linear-gradient(135deg, var(--color-album) 0%, var(--color-album-dark) 100%) !important;
}

.addinfo-selected-tag button {
    background: rgba(255, 255, 255, 0.25);
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1;
    color: white;
    padding: 2px 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: all 0.15s;
}

.addinfo-selected-tag button:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.4);
}

.detail-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--primary-pale);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    width: 120px;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}

.detail-value {
    flex: 1;
    color: var(--text-dark);
}

.field-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--primary-pale);
    border-radius: 12px;
    transition: var(--transition-smooth);
    display: inline-block;
    margin: 2px;
}

.field-link:hover {
    background: var(--primary);
    color: white;
    text-decoration: none;
}

/* Hover Tooltip Popup */
.hover-tooltip {
    position: fixed;
    background: white;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border: none;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    max-width: 280px;
    min-width: 200px;
    direction: rtl;
    overflow: hidden;
    text-decoration: none;
    display: block;
    color: inherit;
}

.hover-tooltip-type {
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 15px;
    background: var(--primary);
    color: white;
}

/* Category-themed tooltips */
.hover-tooltip.tooltip-chatzer .hover-tooltip-type {
    background: var(--color-chatzer);
}

.hover-tooltip.tooltip-chatzer .hover-tooltip-title {
    color: var(--color-chatzer-dark);
}

.hover-tooltip.tooltip-mechaber .hover-tooltip-type {
    background: var(--color-mechaber-dark);
}

.hover-tooltip.tooltip-mechaber .hover-tooltip-title {
    color: var(--color-mechaber-dark);
}

.hover-tooltip.tooltip-verter .hover-tooltip-type {
    background: var(--color-verter);
}

.hover-tooltip.tooltip-verter .hover-tooltip-title {
    color: var(--text-dark);
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5;
}

.hover-tooltip.tooltip-zman .hover-tooltip-type {
    background: var(--color-zman);
}

.hover-tooltip.tooltip-zman .hover-tooltip-title {
    color: var(--color-zman-dark);
}

.hover-tooltip.tooltip-piyut .hover-tooltip-type {
    background: var(--color-piyut);
}

.hover-tooltip.tooltip-piyut .hover-tooltip-title {
    color: var(--color-piyut-dark);
}

.hover-tooltip.tooltip-playlist .hover-tooltip-type {
    background: var(--color-playlist);
}

.hover-tooltip.tooltip-playlist .hover-tooltip-title {
    color: var(--color-playlist-dark);
}

.hover-tooltip.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    cursor: pointer;
}

.hover-tooltip:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
}

.hover-tooltip-header {
    display: flex;
    gap: 12px;
    padding: 15px;
    align-items: center;
}

.hover-tooltip-image {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.hover-tooltip-image.round {
    border-radius: 50%;
}

.hover-tooltip-image.large {
    width: 60px;
    height: 60px;
}

.hover-tooltip-title-area {
    flex: 1;
}

.hover-tooltip-title {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
}

.hover-tooltip-subtitle {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 4px;
}

.hover-tooltip-stats {
    padding: 10px 15px;
    background: #f8fafc;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.9em;
    color: var(--text-muted);
}

.hover-tooltip-hint {
    padding: 8px 15px;
    font-size: 0.75em;
    color: var(--text-muted);
    text-align: center;
    background: rgba(0, 0, 0, 0.03);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 4em;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* Skeleton Loader - RTL shimmer direction */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

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

.skeleton {
    background: linear-gradient(90deg,
            rgba(200, 200, 200, 0.2) 25%,
            rgba(200, 200, 200, 0.4) 50%,
            rgba(200, 200, 200, 0.2) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-page {
    padding: 20px;
    min-height: calc(100vh - 200px);
}

.skeleton-title-bar {
    height: 50px;
    border-radius: 10px;
    margin-bottom: 10px;
    background: linear-gradient(90deg,
            rgba(180, 150, 180, 0.3) 25%,
            rgba(180, 150, 180, 0.5) 50%,
            rgba(180, 150, 180, 0.3) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-subtitle {
    height: 24px;
    width: 200px;
    margin: 0 auto 30px;
}

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 90px 0 20px;
}

.skeleton-card {
    height: 120px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.skeleton-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(270deg,
            transparent 0%,
            rgba(255, 255, 255, 0.5) 50%,
            transparent 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 2.5s ease-in-out infinite;
}

.skeleton-card:nth-child(2),
.skeleton-card:nth-child(2)::after { animation-delay: 0.15s; }
.skeleton-card:nth-child(3),
.skeleton-card:nth-child(3)::after { animation-delay: 0.3s; }
.skeleton-card:nth-child(4),
.skeleton-card:nth-child(4)::after { animation-delay: 0.45s; }
.skeleton-card:nth-child(5),
.skeleton-card:nth-child(5)::after { animation-delay: 0.6s; }
.skeleton-card:nth-child(6),
.skeleton-card:nth-child(6)::after { animation-delay: 0.75s; }
.skeleton-card:nth-child(7),
.skeleton-card:nth-child(7)::after { animation-delay: 0.9s; }
.skeleton-card:nth-child(8),
.skeleton-card:nth-child(8)::after { animation-delay: 1.05s; }
.skeleton-card:nth-child(9),
.skeleton-card:nth-child(9)::after { animation-delay: 1.2s; }

/* Theme-specific skeleton colors */
.page-theme-chatzer .skeleton-card {
    background: color-mix(in srgb, var(--color-chatzer-pale) 70%, white);
}

.page-theme-mechaber .skeleton-card {
    background: color-mix(in srgb, var(--color-mechaber-pale) 70%, white);
}

.page-theme-verter .skeleton-card {
    background: color-mix(in srgb, var(--color-verter-pale) 70%, white);
}

.page-theme-zman .skeleton-card {
    background: color-mix(in srgb, var(--color-zman-pale) 70%, white);
}

.page-theme-playlist .skeleton-card {
    background: color-mix(in srgb, var(--color-playlist-pale) 70%, white);
}

.page-theme-nigun .skeleton-card,
.page-theme-nigun .skeleton-song-row {
    background: color-mix(in srgb, var(--modal-color-pale) 70%, white);
}

.page-theme-resource .skeleton-card {
    background: color-mix(in srgb, var(--color-resource-pale) 70%, white);
}

.page-theme-document .skeleton-card {
    background: color-mix(in srgb, var(--color-document-pale) 70%, white);
}

.page-theme-album .skeleton-card {
    background: color-mix(in srgb, var(--color-album-pale) 70%, white);
}

.page-theme-collection .skeleton-card {
    background: color-mix(in srgb, var(--color-collection-pale) 70%, white);
}

.page-theme-piyut .skeleton-card {
    background: color-mix(in srgb, var(--color-piyut-pale) 70%, white);
}

.page-theme-music .skeleton-card {
    background: color-mix(in srgb, var(--color-music-pale) 70%, white);
}

.skeleton-songs-layout {
    display: flex;
    gap: 20px;
}

.skeleton-songs-main {
    flex: 1;
}

.skeleton-songs-sidebar {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.skeleton-search-box {
    height: 45px;
    border-radius: 25px;
}

.skeleton-filter {
    height: 40px;
    border-radius: 8px;
}

.skeleton-song-row {
    height: 60px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
}

.skeleton-song-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(270deg,
            transparent 0%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 2.5s ease-in-out infinite;
}

@media (max-width: 768px) {
    .skeleton-songs-layout {
        flex-direction: column;
    }

    .skeleton-songs-sidebar {
        width: 100%;
        order: -1;
    }

    .skeleton-grid {
        grid-template-columns: 1fr;
    }
}

.loading-songs-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.loading-songs-message .loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--primary-pale);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

/* Responsive — on phones/tablets the category card grid shows two smaller
   cards per row (the default auto-fill keeps 280px cards, which drops to one
   per row below ~580px). Desktop (>768px) keeps the auto-fill layout.
   (Header/player mobile rules live in nav-header.css and player.css.) */
@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .category-card {
        padding: 14px;
    }

    .category-card .card-title {
        font-size: 1.05em;
    }
}

/* Filters section for all songs page */
.filters-container {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Songs page layout (sidebar removed - now uses filter panel button) */
.songs-page-layout {
    display: block;
}

.songs-main-content {
    flex: 1;
    min-width: 0;
}

.sidebar-wrapper {
    width: 280px;
    flex-shrink: 0;
}

.songs-sidebar {
    width: 280px;
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: var(--card-shadow);
    position: sticky;
    top: 90px;
    min-height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 124, 201, 0.3) transparent;
}

.songs-sidebar::-webkit-scrollbar {
    width: 4px;
}

.songs-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.songs-sidebar::-webkit-scrollbar-thumb {
    background: rgba(74, 124, 201, 0.3);
    border-radius: 4px;
}

.songs-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 124, 201, 0.5);
}

.sidebar-search-box {
    display: flex;
    position: relative;
    margin-bottom: 10px;
}

.sidebar-search-input {
    flex: 1;
    padding: 8px 12px;
    padding-left: 35px;
    border: 2px solid var(--modal-color-pale);
    border-radius: 8px;
    font-size: 0.9em;
    font-family: inherit;
    direction: rtl;
    transition: var(--transition-smooth);
}

.sidebar-search-input:focus {
    outline: none;
    border-color: var(--modal-color);
}

.sidebar-search-btn {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.1em;
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition-smooth);
}

.sidebar-search-btn:hover {
    opacity: 1;
}

.sidebar-search-clear {
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    background: #999;
    color: white;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-search-clear:hover {
    background: #666;
}

.sidebar-audio-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: var(--modal-color-pale);
    border-radius: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.sidebar-audio-toggle:hover {
    background: var(--modal-color-light);
}

.sidebar-audio-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--modal-color);
    cursor: pointer;
}

/* Sort toggle slider styles */
.sidebar-sort-section {
    margin-bottom: 10px;
}

.sidebar-sort-label {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
    display: block;
}

.sort-toggle-container {
    display: flex;
    background: var(--modal-color-pale);
    border-radius: 10px;
    padding: 4px;
    position: relative;
}

.sort-toggle-option {
    flex: 1;
    padding: 6px 6px;
    text-align: center;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    border-radius: 6px;
    transition: var(--transition-smooth);
    z-index: 1;
    position: relative;
    white-space: nowrap;
}

.sort-toggle-option:hover {
    color: var(--modal-color-dark);
}

.sort-toggle-option.active {
    color: white;
    font-weight: 600;
}

.sort-toggle-slider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background: var(--modal-color);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* Will be positioned dynamically via JavaScript */
}

/* Quality Stars Filter */
.quality-stars-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px;
    background: var(--modal-color-pale);
    border-radius: 10px;
    direction: ltr;
    /* Stars fill left to right */
}

.quality-star {
    font-size: 1.3em;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 4px 3px;
}

.quality-star.active {
    color: var(--modal-color);
}

/* Reset all stars on hover, let JavaScript handle the fill */
.quality-stars-filter:hover .quality-star {
    color: #ccc;
}

.quality-stars-filter .quality-star:hover {
    transform: scale(1.15);
}

/* Use JavaScript for proper hover fill since CSS sibling selectors don't work backwards */
.quality-stars-filter.hovering .quality-star.hover-active {
    color: var(--modal-color);
}

.quality-clear {
    font-size: 1.4em;
    color: #999;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s ease;
    line-height: 1;
}

.quality-clear:hover {
    color: var(--modal-color-dark);
    transform: scale(1.1);
}

.quality-clear.hidden {
    display: none;
}

/* Quality Star Tooltips */
.quality-star[data-tooltip],
.quality-clear[data-tooltip] {
    position: relative;
}

.quality-star[data-tooltip]::after,
.quality-clear[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--modal-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    font-weight: 400;
}

.quality-star[data-tooltip]::before,
.quality-clear[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--modal-color);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}

.quality-star[data-tooltip]:hover::after,
.quality-star[data-tooltip]:hover::before,
.quality-clear[data-tooltip]:hover::after,
.quality-clear[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Sort toggle slider styles */
.sidebar-sort-section {
    margin-bottom: 20px;
}

.sidebar-sort-label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: block;
}

.sort-toggle-container {
    display: flex;
    background: var(--modal-color-pale);
    border-radius: 10px;
    padding: 4px;
    position: relative;
}

.sort-toggle-option {
    flex: 1;
    padding: 10px 8px;
    text-align: center;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    border-radius: 8px;
    transition: var(--transition-smooth);
    z-index: 1;
    position: relative;
    white-space: nowrap;
}

.sort-toggle-option:hover {
    color: var(--modal-color-dark);
}

.sort-toggle-option.active {
    color: white;
    font-weight: 600;
}

.sort-toggle-slider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background: var(--modal-color);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* Will be positioned dynamically via JavaScript */
}

/* Quality Stars Filter */
.quality-stars-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px;
    background: var(--modal-color-pale);
    border-radius: 10px;
    direction: ltr;
    /* Stars fill left to right */
}

.quality-star {
    font-size: 1.6em;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 6px 4px;
}

.quality-star.active {
    color: var(--modal-color);
}

/* Reset all stars on hover, let JavaScript handle the fill */
.quality-stars-filter:hover .quality-star {
    color: #ccc;
}

.quality-stars-filter .quality-star:hover {
    transform: scale(1.15);
}

/* Use JavaScript for proper hover fill since CSS sibling selectors don't work backwards */
.quality-stars-filter.hovering .quality-star.hover-active {
    color: var(--modal-color);
}

.quality-clear {
    font-size: 1.4em;
    color: #999;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s ease;
    line-height: 1;
}

.quality-clear:hover {
    color: var(--modal-color-dark);
    transform: scale(1.1);
}

.quality-clear.hidden {
    display: none;
}

/* Quality Star Tooltips */
.quality-star[data-tooltip],
.quality-clear[data-tooltip] {
    position: relative;
}

.quality-star[data-tooltip]::after,
.quality-clear[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--modal-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    font-weight: 400;
}

.quality-star[data-tooltip]::before,
.quality-clear[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--modal-color);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}

.quality-star[data-tooltip]:hover::after,
.quality-star[data-tooltip]:hover::before,
.quality-clear[data-tooltip]:hover::after,
.quality-clear[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

.sidebar-section {
    margin-bottom: 6px;
}

.sidebar-section-title {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
    display: block;
}

.sidebar-playlist-btn {
    width: 100%;
    padding: 12px 15px;
    background: white;
    border: 2px solid var(--modal-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95em;
    cursor: pointer;
    transition: var(--transition-smooth);
    color: var(--modal-color);
}

.sidebar-playlist-btn:hover,
.sidebar-playlist-btn.active {
    background: var(--modal-color);
    color: white;
}


.sidebar-filter {
    margin-bottom: 6px;
}

.sidebar-filter-dropdown {
    position: relative;
}

.sidebar-filter-btn {
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    border: 1px solid rgba(74, 124, 201, 0.15);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding-right: 14px;
    box-shadow: 0 2px 6px rgba(74, 124, 201, 0.06);
    overflow: hidden;
}

.sidebar-filter-btn::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 12px 12px 0;
    transition: width 0.3s ease;
}

.sidebar-filter-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(74, 124, 201, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.sidebar-filter-btn:hover::after {
    opacity: 1;
}

.sidebar-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(74, 124, 201, 0.15);
    border-color: rgba(74, 124, 201, 0.25);
}

.sidebar-filter-btn:hover::before {
    width: 6px;
}

/* Filter colors as right border */
.sidebar-filter[data-filter="playlist"] .sidebar-filter-btn::before {
    background: linear-gradient(180deg, var(--color-playlist) 0%, var(--color-playlist-dark) 100%);
}

.sidebar-filter[data-filter="chatzer"] .sidebar-filter-btn::before {
    background: linear-gradient(180deg, var(--color-chatzer) 0%, var(--color-chatzer-dark) 100%);
}

.sidebar-filter[data-filter="mechaber"] .sidebar-filter-btn::before {
    background: linear-gradient(180deg, var(--color-mechaber) 0%, var(--color-mechaber-dark) 100%);
}

.sidebar-filter[data-filter="verter"] .sidebar-filter-btn::before {
    background: linear-gradient(180deg, var(--color-verter) 0%, var(--color-verter-dark) 100%);
}

.sidebar-filter[data-filter="gezungen"] .sidebar-filter-btn::before {
    background: linear-gradient(180deg, #2e8b2e 0%, #1e6b1e 100%);
}

/* גרין - פיוטים */
.sidebar-filter[data-filter="ritem"] .sidebar-filter-btn::before {
    background: linear-gradient(180deg, var(--color-music) 0%, var(--color-music-dark) 100%);
}

.sidebar-filter[data-filter="scale"] .sidebar-filter-btn::before {
    background: linear-gradient(180deg, var(--modal-color) 0%, var(--modal-color-dark) 100%);
}

.sidebar-filter-btn .sidebar-filter-label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--modal-color-dark);
}

.sidebar-filter-btn .sidebar-filter-value {
    flex: 1;
    text-align: left;
    color: var(--text-muted);
    font-size: 0.85em;
}

.sidebar-filter-btn .dropdown-arrow {
    color: var(--modal-color);
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.sidebar-filter-btn.active .dropdown-arrow {
    transform: rotate(180deg);
}

.sidebar-filter-btn.active {
    border-color: var(--modal-color);
    background: linear-gradient(135deg, var(--modal-color-pale) 0%, rgba(227, 242, 253, 0.8) 100%);
    box-shadow: 0 4px 16px rgba(74, 124, 201, 0.2);
}

.sidebar-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 124, 201, 0.2);
    border-radius: 12px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 10px 40px rgba(74, 124, 201, 0.2);
    animation: dropdownSlide 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

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

.sidebar-dropdown-content.show {
    display: block;
}

.dropdown-search-box {
    padding: 10px;
    border-bottom: 1px solid rgba(74, 124, 201, 0.1);
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(8px);
    z-index: 1;
}

.dropdown-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(74, 124, 201, 0.2);
    border-radius: 8px;
    font-size: 0.85em;
    font-family: inherit;
    direction: rtl;
    background: rgba(248, 250, 252, 0.8);
    transition: all 0.2s ease;
}

.dropdown-search-input:focus {
    outline: none;
    border-color: var(--modal-color);
    background: white;
    box-shadow: 0 0 0 3px rgba(74, 124, 201, 0.1);
}

.dropdown-options {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
}

.wizard-entity-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    /* Added padding below the input */
}

.sidebar-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.88em;
    border-radius: 8px;
    margin: 2px 0;
}

.sidebar-filter-option:hover {
    background: linear-gradient(135deg, var(--modal-color-pale) 0%, rgba(227, 242, 253, 0.6) 100%);
    transform: translateX(-2px);
}

.sidebar-filter-option input {
    accent-color: var(--modal-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-filter-option input:checked+* {
    color: var(--modal-color-dark);
    font-weight: 500;
}

/* Mobile responsive */
@media (max-width: 900px) {
    .songs-page-layout {
        flex-direction: column;
    }

    .songs-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        margin-bottom: 20px;
    }
}

.search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}

.songs-search-box {
    display: flex;
    flex: 1;
    position: relative;
}

.songs-search-input {
    flex: 1;
    padding: 10px 15px;
    padding-left: 40px;
    border: 2px solid #ddd;
    border-left: none;
    border-radius: 0 8px 8px 0;
    font-size: 0.95em;
    font-family: inherit;
    direction: rtl;
    transition: var(--transition-smooth);
}

.songs-search-input:focus {
    outline: none;
    border-color: var(--modal-color);
}

.search-clear-btn {
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: #999;
    color: white;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.search-clear-btn:hover {
    background: #666;
}

.songs-search-btn {
    padding: 10px 20px;
    background: var(--modal-color);
    color: white;
    border: 2px solid var(--modal-color);
    border-radius: 8px 0 0 8px;
    font-family: inherit;
    font-size: 0.95em;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.songs-search-btn:hover {
    background: var(--modal-color-dark);
    border-color: var(--modal-color-dark);
}

.clear-filters-btn {
    padding: 10px 15px;
    border: 2px solid #e74c3c;
    background: white;
    color: #e74c3c;
    border-radius: 8px;
    font-size: 0.9em;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
    white-space: nowrap;
}

.clear-filters-btn:hover {
    background: #e74c3c;
    color: white;
}



.filters-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-dropdown {
    position: relative;
}

.filter-btn {
    padding: 10px 15px;
    border: 2px solid var(--modal-color-light);
    background: white;
    border-radius: 10px;
    font-size: 0.9em;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--modal-color);
    background: var(--modal-color-pale);
}

.filter-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 2px solid var(--modal-color);
    border-radius: 10px;
    margin-top: 5px;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: var(--card-hover-shadow);
}

.filter-dropdown-content.show {
    display: block;
}

.filter-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-option:hover {
    background: var(--primary-pale);
}

.filter-option input {
    width: 18px;
    height: 18px;
}

.active-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--primary-pale);
}

.active-filters:empty {
    display: none;
}

.filter-tag {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-tag-close {
    cursor: pointer;
    font-weight: bold;
    opacity: 0.8;
}

.filter-tag-close:hover {
    opacity: 1;
}

/* Stats cards on home */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--card-shadow);
}

.stat-number {
    font-size: 2em;
    font-weight: 600;
    color: var(--primary);
    font-family: 'Heebo', sans-serif;
}

.stat-label {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-top: 5px;
}

/* Home About Us Section - Full Width */
.home-about-section {
    margin-top: 60px;
}

.home-about-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradient-main);
    padding: 20px 30px;
    border-radius: 18px 18px 0 0;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    color: inherit;
}

.home-about-header:hover {
    filter: brightness(1.05);
}

.home-about-title {
    font-size: 1.25em;
    font-weight: 600;
    color: white;
}

.home-about-arrow {
    color: white;
    font-size: 1.3em;
    transition: var(--transition-smooth);
}

.home-about-header:hover .home-about-arrow {
    transform: translateX(-5px);
}

.home-about-links {
    background: white;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.home-about-link {
    padding: 18px 15px;
    cursor: pointer;
    transition: var(--transition-smooth);
    border-left: 1px solid var(--color-chatzer-pale);
    color: var(--text);
    font-size: 0.95em;
    text-align: center;
    text-decoration: none;
}

.home-about-link:first-child {
    border-left: none;
}

.home-about-link:hover {
    background: var(--gradient-main-pale);
}

/* Terms Link */
.home-terms-link {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 20px;
    color: var(--text-muted);
    font-size: 0.9em;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    display: block;
}

.home-terms-link:hover {
    color: var(--color-chatzer);
    text-decoration: underline;
}

/* Info Pages Layout */
.info-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 20px;
}

.info-page-header {
    text-align: center;
    margin-bottom: 40px;
}

.info-page-title {
    font-size: 2.2em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    font-weight: 600;
}

.info-page-subtitle {
    color: var(--text-muted);
    font-size: 1.1em;
}

.info-page-content {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: var(--card-shadow);
    line-height: 1.8;
    margin-bottom: 25px;
}

.info-page-content p {
    margin-bottom: 20px;
}

.info-page-content ul {
    margin: 20px 0;
    padding-right: 25px;
}

.info-page-content li {
    margin-bottom: 10px;
}

/* Info Pages Sub-Navigation */
.info-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding: 18px 25px;
    background: var(--gradient-main-pale);
    border-radius: 16px;
    border: 1px solid var(--color-chatzer-pale);
}

.info-nav-item {
    padding: 12px 30px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.95em;
    transition: var(--transition-smooth);
    background: white;
    color: var(--text);
    border: 1px solid var(--color-chatzer-pale);
    text-decoration: none;
}

.info-nav-item:hover {
    background: var(--gradient-main);
    color: white;
    border-color: var(--color-chatzer);
    transform: translateY(-2px);
}

.info-nav-item.active {
    background: var(--gradient-main);
    color: white;
    border-color: var(--color-chatzer);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.info-nav-item.info-nav-featured {
    background: white;
    border: 2px solid;
    border-image: var(--gradient-main) 1;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.15);
    position: relative;
    margin: 0 8px;
}

.info-nav-item.info-nav-featured {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.info-nav-item.info-nav-featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25);
}

.info-nav-item.info-nav-featured.active {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
}

.info-nav-divider {
    width: 1px;
    background: var(--color-chatzer-light);
    margin: 0 5px;
}

/* Stats Page Grid */
.stats-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.stats-page-card {
    background: var(--gradient-main-pale);
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid var(--color-chatzer-pale);
    text-decoration: none;
    color: inherit;
}

.stats-page-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: var(--gradient-main-soft);
}

.stats-page-number {
    font-size: 2.5em;
    font-weight: 700;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Heebo', sans-serif;
}

.stats-page-label {
    font-size: 1.1em;
    color: var(--text);
    margin-top: 8px;
}

/* ============================================================
   Stats Dashboard — interactive charts
   ============================================================ */

.stats-dashboard {
    direction: rtl;
}

/* Compact headline strip (replaces giant count cards) */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 20px 0 36px;
}
.stats-strip-cell {
    --cell-color: var(--color-chatzer, #7b1fa2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border-top: 3px solid var(--cell-color);
}
.stats-strip-cell:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}
.stats-strip-num {
    font-size: 1.9em;
    font-weight: 700;
    color: var(--cell-color);
    font-family: 'Heebo', sans-serif;
    line-height: 1;
}
.stats-strip-label {
    font-size: 0.95em;
    color: var(--text-secondary, #666);
}

/* Section headings */
.stats-section-title {
    font-size: 1.35em;
    font-weight: 600;
    color: var(--text);
    margin: 36px 6px 16px;
    padding-right: 12px;
    border-right: 4px solid var(--color-chatzer, #7b1fa2);
}

/* Chart card grid */
.stats-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}
@media (min-width: 1000px) {
    .stats-charts-grid.stats-grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stats-chart-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 18px 18px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.stats-chart-card-wide { grid-column: 1 / -1; }

.stats-chart-head { margin-bottom: 14px; }
.stats-chart-title {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 2px;
}
.stats-chart-sub {
    font-size: 0.82em;
    color: var(--text-secondary, #888);
    margin: 0;
}

.stats-chart-body { min-height: 80px; }

/* Pie / donut layout */
.stats-pie-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.stats-pie-svg {
    display: block;
    width: 100%;
    max-width: 1000px; /* Make the chart significantly larger */
    height: auto;
    overflow: visible; /* Allow labels to overflow if necessary */
}

.stats-pie-slice-group {
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform-origin: 0 0;
}
.stats-pie-slice-group:hover {
    opacity: 0.9;
    transform: translate(var(--pop-x, 0), var(--pop-y, 0)) scale(1.04);
}
.stats-pie-wedge {
    cursor: pointer;
}

.stats-pie-label-inner {
    fill: #fff;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.stats-pie-label-outer {
    fill: var(--text, #222);
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
}

.stats-pie-line {
    fill: none;
    stroke: var(--border-color, #ccc);
    stroke-width: 1.5;
    pointer-events: none;
}

.stats-pie-label-outer-pct {
    font-size: 10px;
    opacity: 0.7;
}

.stats-donut-center {
    font-size: 24px;
    font-weight: 700;
    fill: var(--text, #222);
}
.stats-donut-center-sub {
    font-size: 12px;
    fill: var(--text-secondary, #888);
}

/* Instant Tooltip for Pie Charts */
#stats-custom-tooltip {
    position: fixed;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.1s;
    white-space: nowrap;
    display: none;
}
#stats-custom-tooltip.show {
    display: block;
    opacity: 1;
}

    color: var(--text, #222);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.stats-legend-pct {
    color: var(--text-secondary, #888);
    font-variant-numeric: tabular-nums;
    font-size: 0.85em;
    min-width: 32px;
    text-align: end;
}

/* Bar chart */
.stats-bars {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.stats-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.95em;
    width: 100%;
}
.stats-bar-row[data-action="detail"]:hover .stats-bar-fill,
.stats-bar-row[data-action="filter"]:hover .stats-bar-fill {
    transform: scale(1.04);
    filter: brightness(1.1);
}
.stats-bar-row:not([data-action]) {
    cursor: default;
}

.stats-bar-track {
    flex: 1;
    height: 32px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    position: relative;
    box-sizing: border-box;
}

.stats-bar-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s ease, filter 0.15s ease;
}

.stats-bar-label {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    pointer-events: none;
}

.stats-bar-count {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.stats-empty {
    text-align: center;
    color: var(--text-secondary, #888);
    padding: 30px 12px;
    font-size: 0.9em;
}

/* ============================================================
   Mechabrim lifetime Gantt timeline
   ============================================================ */
.mech-gantt {
    --mech-gantt-color: var(--color-mechaber, #d84315);
    --mech-gantt-name-w: 170px;
    --mech-gantt-row-h: 30px;
    direction: rtl;
    color: var(--text, #222);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mech-gantt-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.mech-gantt-chatzer-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 240px;
    position: relative;
}
.mech-gantt-chatzer-label {
    font-size: 0.88em;
    font-weight: 600;
    color: var(--color-chatzer, #7b1fa2);
    white-space: nowrap;
}

/* Chatzer selector — styled like the inline-autocomplete dropdown so it
   matches the rest of the editor UI. The trigger is a pill; clicking it
   reveals a real .inline-autocomplete dropdown themed with .source-chatzeros. */
.mech-gantt-chatzer-field {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 14px;
    border: 1.5px solid color-mix(in srgb, var(--color-chatzer, #7b1fa2) 35%, transparent);
    background: #fff;
    color: var(--color-chatzer, #7b1fa2);
    border-radius: 999px;
    font-size: 0.92em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mech-gantt-chatzer-field:hover,
.mech-gantt-chatzer-field:focus,
.mech-gantt-chatzer-field.is-open {
    outline: none;
    border-color: var(--color-chatzer, #7b1fa2);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-chatzer, #7b1fa2) 20%, transparent);
}
.mech-gantt-chatzer-current {
    flex: 1 1 auto;
    text-align: start;
    color: var(--color-chatzer, #7b1fa2);
}
.mech-gantt-chatzer-count {
    opacity: 0.7;
    font-weight: 500;
    margin-inline-start: 2px;
}
.mech-gantt-chatzer-caret {
    color: var(--color-chatzer, #7b1fa2);
    font-size: 0.85em;
    transition: transform 0.2s ease;
}
.mech-gantt-chatzer-field.is-open .mech-gantt-chatzer-caret {
    transform: rotate(180deg);
}

/* The autocomplete-styled dropdown panel itself. Position relative to the
   trigger field. The .inline-autocomplete + .source-chatzeros classes pick
   up the existing themed styles. */
.mech-gantt-chatzer-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    width: auto;
    max-height: 320px;
    z-index: 50;
    cursor: default;
    animation: mechGanttDropdownIn 0.18s ease;
}
@keyframes mechGanttDropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mech-gantt-chatzer-search-row {
    padding: 6px 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-chatzer, #7b1fa2) 12%, transparent);
}
.mech-gantt-chatzer-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.92em;
    color: var(--text, #222);
    outline: none;
    direction: rtl;
}
.mech-gantt-chatzer-list {
    overflow-y: auto;
    max-height: 260px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
    direction: rtl;
    scrollbar-width: thin;
    scrollbar-color: var(--color-chatzer, #7b1fa2) transparent;
}
.mech-gantt-chatzer-item {
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text, #222);
    font-size: 0.94em;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}
.mech-gantt-chatzer-item:hover,
.mech-gantt-chatzer-item.is-active {
    background: color-mix(in srgb, var(--color-chatzer, #7b1fa2) 14%, #fff);
    color: var(--color-chatzer, #7b1fa2);
}
.mech-gantt-chatzer-item[hidden] { display: none; }
.mech-gantt-chatzer-item .mech-gantt-chatzer-count {
    color: color-mix(in srgb, var(--color-chatzer, #7b1fa2) 70%, #888);
}

/* Zoom + / − buttons */
.mech-gantt-zoom-btns {
    display: inline-flex;
    gap: 4px;
}
.mech-gantt-zoom-btn {
    appearance: none;
    border: 1.5px solid color-mix(in srgb, var(--mech-gantt-color) 30%, transparent);
    background: #fff;
    color: var(--mech-gantt-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: inherit;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.mech-gantt-zoom-btn:hover {
    border-color: var(--mech-gantt-color);
    background: color-mix(in srgb, var(--mech-gantt-color) 10%, #fff);
    transform: scale(1.08);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--mech-gantt-color) 25%, transparent);
}
.mech-gantt-zoom-btn:active { transform: scale(0.95); }

.mech-gantt-search {
    flex: 1 1 200px;
    max-width: 280px;
}
.mech-gantt-search-input {
    width: 100%;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.92em;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    direction: rtl;
}
.mech-gantt-search-input:focus {
    outline: none;
    border-color: var(--mech-gantt-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mech-gantt-color) 18%, transparent);
}

.mech-gantt-zoom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: color-mix(in srgb, var(--mech-gantt-color) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--mech-gantt-color) 14%, transparent);
    border-radius: 12px;
}

.mech-gantt-dual-range {
    position: relative;
    flex: 1 1 240px;
    height: 32px;
    /* Match the chart's RTL axis: smaller years on the right, larger on
       the left. Native range inputs honor the inherited direction. */
    direction: rtl;
    cursor: pointer;
}

.mech-gantt-dual-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--mech-gantt-color) 18%, #fff);
    border-radius: 999px;
    pointer-events: none;
}
.mech-gantt-dual-fill {
    position: absolute;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: var(--mech-gantt-color);
    border-radius: 999px;
    pointer-events: none;
    transition: left 0.15s ease, right 0.15s ease;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--mech-gantt-color) 30%, transparent);
}

/* Two range inputs stacked. The whole input ignores pointer events; only
   the thumb listens. That way both thumbs are always draggable, even when
   they overlap. */
.mech-gantt-dual-range .mech-gantt-range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    direction: rtl;
}
.mech-gantt-dual-range .mech-gantt-range::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
    height: 6px;
}
.mech-gantt-dual-range .mech-gantt-range::-moz-range-track {
    background: transparent;
    border: none;
    height: 6px;
}
.mech-gantt-dual-range .mech-gantt-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    cursor: grab;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mech-gantt-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mech-gantt-color) 35%, transparent);
    margin-top: -8px;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease;
}
.mech-gantt-dual-range .mech-gantt-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: color-mix(in srgb, var(--mech-gantt-color) 18%, #fff);
}
.mech-gantt-dual-range .mech-gantt-range::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.2);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mech-gantt-color) 55%, transparent);
}
.mech-gantt-dual-range .mech-gantt-range::-moz-range-thumb {
    pointer-events: auto;
    cursor: grab;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mech-gantt-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mech-gantt-color) 35%, transparent);
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease;
}
.mech-gantt-dual-range .mech-gantt-range::-moz-range-thumb:hover {
    transform: scale(1.15);
    background: color-mix(in srgb, var(--mech-gantt-color) 18%, #fff);
}
.mech-gantt-dual-range .mech-gantt-range::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.2);
}
.mech-gantt-dual-range .mech-gantt-range:focus { outline: none; }

.mech-gantt-range-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 64px;
    text-align: center;
    padding: 5px 10px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--mech-gantt-color) 25%, transparent);
    color: var(--mech-gantt-color);
    font-size: 0.92em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.mech-gantt-reset {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--mech-gantt-color);
    font-family: inherit;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.mech-gantt-reset:hover {
    background: color-mix(in srgb, var(--mech-gantt-color) 12%, transparent);
}

.mech-gantt-scroller {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--mech-gantt-color) 3%, #fff));
    border: 1px solid color-mix(in srgb, var(--mech-gantt-color) 10%, rgba(0, 0, 0, 0.06));
    cursor: grab;
    user-select: none;
}
.mech-gantt.is-panning .mech-gantt-scroller,
.mech-gantt.is-panning .mech-gantt-rows,
.mech-gantt.is-panning .mech-gantt-axis { cursor: grabbing !important; }

.mech-gantt-axis {
    position: relative;
    height: 30px;
    margin-inline-start: var(--mech-gantt-name-w);
    border-bottom: 1px solid color-mix(in srgb, var(--mech-gantt-color) 18%, transparent);
    background: color-mix(in srgb, var(--mech-gantt-color) 5%, #fff);
}
.mech-gantt-tick {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    font-size: 0.78em;
    font-weight: 600;
    color: var(--mech-gantt-color);
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--mech-gantt-color) 18%, transparent);
    white-space: nowrap;
    pointer-events: none;
}

.mech-gantt-grid {
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 0;
    right: var(--mech-gantt-name-w);
    pointer-events: none;
    z-index: 0;
}
.mech-gantt-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in srgb, var(--mech-gantt-color) 10%, rgba(0, 0, 0, 0.05));
}

.mech-gantt-rows {
    position: relative;
    max-height: 540px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mech-gantt-color) 40%, transparent) transparent;
}
.mech-gantt-rows::-webkit-scrollbar { width: 8px; }
.mech-gantt-rows::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mech-gantt-color) 40%, transparent);
    border-radius: 4px;
}

.mech-gantt-row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--mech-gantt-row-h);
    padding: 3px 0;
    cursor: pointer;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translateY(6px);
    animation: mechGanttRowIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--delay, 0ms);
    transition: background 0.18s ease;
}
.mech-gantt-row:hover {
    background: color-mix(in srgb, var(--mech-gantt-color) 8%, transparent);
}
.mech-gantt-row:hover .mech-gantt-bar {
    filter: brightness(1.08) saturate(1.1);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mech-gantt-color) 40%, transparent);
    transform: scaleY(1.08);
}
.mech-gantt-row:hover .mech-gantt-bar-year {
    opacity: 1;
}

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

.mech-gantt-name {
    flex: 0 0 var(--mech-gantt-name-w);
    width: var(--mech-gantt-name-w);
    padding: 0 12px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--mech-gantt-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
    transition: color 0.18s ease, transform 0.18s ease;
}
.mech-gantt-row:hover .mech-gantt-name {
    color: color-mix(in srgb, var(--mech-gantt-color) 75%, #000);
    transform: translateX(2px);
}

.mech-gantt-track {
    position: relative;
    flex: 1;
    height: 20px;
    z-index: 1;
}

/* Wrapper holds the bar + outside year labels. The bar can be masked
   (faded) without clipping the labels that sit just outside it. */
.mech-gantt-bar-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mech-gantt-bar {
    position: absolute;
    inset: 0;
    background: var(--mech-gantt-color);
    border-radius: 6px;
    transform-origin: center;
    transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--mech-gantt-color) 25%, transparent);
}

/* Faded ends for estimated dates. The bar uses a CSS mask so the side(s)
   without a real year fade to transparent over a generous distance. */
.mech-gantt-bar.has-est {
    background: var(--mech-gantt-color);
}
/* In RTL Gantt: bar's right edge = birth (older), left edge = death (newer).
   Fade the side whose year is estimated. The fade ramps over most of the
   bar so the uncertainty reads clearly. */
.mech-gantt-row.is-birth-est .mech-gantt-bar {
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 75%, #000 100%);
            mask-image: linear-gradient(to left, transparent 0%, #000 75%, #000 100%);
}
.mech-gantt-row.is-death-est .mech-gantt-bar {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 75%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 75%, #000 100%);
}
.mech-gantt-row.is-birth-est.is-death-est .mech-gantt-bar {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%, #000 55%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 45%, #000 55%, transparent 100%);
}

.mech-gantt-bar-year {
    position: absolute;
    top: 50%;
    font-size: 0.74em;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    background: color-mix(in srgb, var(--mech-gantt-color) 90%, #000);
    padding: 2px 7px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 2;
}
/* In RTL Gantt the wrap's RIGHT physical edge is the birth (older) year and
   the LEFT physical edge is the death (newer) year. Place the labels just
   outside the wrap on the appropriate physical side. */
.mech-gantt-bar-year-birth {
    left: 100%;
    margin-left: 6px;
    transform: translateY(-50%);
}
.mech-gantt-bar-year-death {
    right: 100%;
    margin-right: 6px;
    transform: translateY(-50%);
}

.mech-gantt-empty {
    text-align: center;
    color: var(--text-secondary, #888);
    padding: 36px 12px;
    font-size: 0.95em;
}

/* Bottom horizontal scrollbar — custom widget that mirrors the visible
   window inside the full year range. Click + drag to pan. */
.mech-gantt-hscroll {
    position: relative;
    height: 14px;
    margin: 4px 6px 0;
    background: color-mix(in srgb, var(--mech-gantt-color) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--mech-gantt-color) 14%, transparent);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
}
.mech-gantt-hscroll-thumb {
    position: absolute;
    top: 1px;
    bottom: 1px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--mech-gantt-color) 80%, #fff),
        var(--mech-gantt-color));
    border-radius: 6px;
    cursor: grab;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--mech-gantt-color) 35%, transparent);
    transition: background 0.15s ease, box-shadow 0.15s ease;
    min-width: 24px;
}
.mech-gantt-hscroll-thumb:hover,
.mech-gantt-hscroll.is-dragging .mech-gantt-hscroll-thumb {
    background: linear-gradient(180deg, var(--mech-gantt-color),
        color-mix(in srgb, var(--mech-gantt-color) 70%, #000));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mech-gantt-color) 50%, transparent);
}
.mech-gantt-hscroll.is-dragging .mech-gantt-hscroll-thumb {
    cursor: grabbing;
}

.mech-gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82em;
    color: var(--text-secondary, #888);
    padding: 0 4px;
}
.mech-gantt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mech-gantt-swatch {
    display: inline-block;
    width: 26px;
    height: 10px;
    border-radius: 3px;
    background: var(--mech-gantt-color);
}
.mech-gantt-swatch-est {
    background: linear-gradient(to right, transparent, var(--mech-gantt-color));
}
.mech-gantt-legend-stat {
    font-weight: 700;
    color: var(--mech-gantt-color);
}

@media (max-width: 720px) {
    .mech-gantt {
        --mech-gantt-name-w: 110px;
    }
    .mech-gantt-bar-year { display: none; }
    .mech-gantt-name { font-size: 0.82em; padding: 0 8px; }
}

/* ============================================================
   Search Page — live multi-section results
   ============================================================ */

.search-page { direction: rtl; }

/* Title block (count → big "זוך") with gradient background */
.search-page-title {
    text-align: center;
    background: var(--gradient-main);
}
.search-page-bar {
    color: #fff;
    -webkit-text-fill-color: #fff;
}
.search-result-count {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95em;
    margin-bottom: 4px;
    min-height: 1.2em;
}

/* Search input bar */
.search-page-bar-row { padding: 8px 16px 16px; }
.search-page-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 0 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-page-input-wrap:focus-within {
    border-color: var(--color-chatzer, #7b1fa2);
    box-shadow: 0 0 0 4px rgba(123, 31, 162, 0.12);
}
.search-page-input-icon {
    color: var(--text-secondary, #888);
    flex-shrink: 0;
}
.search-page-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 14px 12px;
    font-size: 1.05em;
    font-family: inherit;
    color: var(--text, #222);
    direction: rtl;
    min-width: 0;
}
.search-page-input::placeholder { color: rgba(0, 0, 0, 0.35); }
.search-page-clear {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #888);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}
.search-page-clear:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text, #222);
}

/* Results body */
.search-results-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 16px 40px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.search-results-body .search-section {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 4px 0;
}
.search-results-body .search-songs-section {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* Remove hover shadow/borders from entity cards in search */
.search-entity-card,
.search-entity-card:hover {
    box-shadow: none !important;
}
.search-entity-card::after,
.search-entity-card:hover::after {
    display: none !important;
}
.search-results-body .search-section-header { margin-bottom: 10px; }
.search-results-body .search-section-title {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--text, #222);
    margin: 0;
}
.search-section-count {
    color: var(--text-secondary, #888);
    font-weight: 400;
    font-size: 0.9em;
}

/* Pills (categories) */
.search-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.search-pill {
    --pill-color: var(--color-chatzer, #7b1fa2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pill-color);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.92em;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.search-pill:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #fff;
}
.search-pill-count {
    background: rgba(0, 0, 0, 0.2);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.search-pill:hover .search-pill-count {
    background: rgba(0, 0, 0, 0.3);
}

/* Cards (mechabrim & chatzeros — nigun-mechaber-card style) */
.search-cards-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.search-cards-wrap .nigun-mechaber-card {
    width: 110px;
}
.search-cards-wrap .nigun-mechaber-card img.nigun-mechaber-image,
.search-cards-wrap .nigun-mechaber-placeholder {
    width: 75px !important;
    height: 75px !important;
}
.search-cards-wrap .mechaber-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
}
.search-cards-wrap .mechaber-fallback .mechaber-icon {
    width: 60px;
    height: 60px;
    margin-bottom: -5px;
    opacity: 0.8;
}
.search-card {
    --card-color: var(--color-chatzer, #7b1fa2);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-right: 4px solid var(--card-color);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.search-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    background: #fff;
}
.search-card-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-card-img-placeholder {
    font-size: 18px;
}
.search-card-body { min-width: 0; flex: 1; }
.search-card-name {
    font-weight: 600;
    color: var(--text, #222);
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-card-meta {
    font-size: 0.82em;
    color: var(--text-secondary, #888);
    margin-top: 2px;
}

/* Songs list — let .song-item provide its own styling, just contain it. */
.search-songs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.search-songs-more {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.search-see-all {
    background: var(--gradient-main);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95em;
    transition: opacity 0.15s ease;
}
.search-see-all:hover { opacity: 0.9; }

/* Empty state */
.search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary, #888);
}
.search-empty-icon { font-size: 3em; opacity: 0.5; margin-bottom: 12px; }
.search-empty-text { font-size: 1.1em; margin: 0; color: var(--text, #222); font-weight: 500; }
.search-empty-hint { margin: 6px 0 0; font-size: 0.9em; }

/* Live-search animations: enter/leave per item with stagger */
.search-pill,
.search-card,
.search-entity-card,
.search-songs-list > .song-item {
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    will-change: opacity, transform, max-width, padding, margin;
}
.search-pill.search-enter,
.search-card.search-enter,
.search-entity-card.search-enter,
.search-songs-list > .song-item.search-enter {
    opacity: 0;
    transform: scale(0.6);
}
.search-pill.search-leave,
.search-card.search-leave,
.search-entity-card.search-leave,
.search-songs-list > .song-item.search-leave {
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    max-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-width: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Instructions Page */
.instructions-page-grid {
    margin-top: 30px;
}

.instructions-page-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.instruction-page-item {
    flex: 1;
    background: var(--gradient-main-pale);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid var(--color-chatzer-pale);
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.instruction-page-number {
    width: 45px;
    height: 45px;
    background: var(--gradient-main);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    font-weight: 700;
    flex-shrink: 0;
}

.instruction-page-text {
    flex: 1;
}

.instruction-page-text strong {
    display: block;
    font-size: 1.15em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.instruction-page-text .ih {
    font-weight: 600;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Credits Page */
.credits-page-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 30px;
}

.credit-row {
    display: flex;
    align-items: center;
}

.credit-page-item {
    background: var(--gradient-main-pale);
    padding: 25px 25px 25px 80px;
    /* Extra left padding for button overlap area */
    border-radius: 16px;
    border: 1px solid var(--color-chatzer-pale);
    flex: 1;
    /* Ensure it doesn't take full width if we want it to "end early"?
       Actually flex: 1 takes available space. But we have the button next to it.
       The button will take its natural width.
       We want the button to overlap.
    */
    position: relative;
    z-index: 1;
}

.credit-page-item strong {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.1em;
}

.credit-page-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--gradient-main);
    color: #fff;
    border-radius: 12px;
    font-size: 0.95em;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    min-width: 320px;
    /* Wider and uniform */

    /* Overlap logic for RTL */
    margin-right: -70px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.credit-page-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) {
    .credit-row {
        flex-direction: column;
        align-items: stretch;
    }

    .credit-page-action {
        margin-right: 0;
        margin-top: -15px;
        align-self: center;
        width: auto;
    }

    .credit-page-item {
        padding: 25px;
        padding-bottom: 35px;
        /* Space for button */
    }
}

/* Thanks Page */
.thanks-box {
    border: none;
    border-radius: 16px;
    padding: 35px 40px;
    max-width: 750px;
    margin: 30px auto;
    text-align: center;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 12px rgba(74, 124, 201, 0.08);
}

.thanks-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-main);
    border-radius: 16px 16px 0 0;
}

.thanks-box .thanks-label {
    font-size: 0.95em;
    color: #444;
    margin-bottom: 2px;
    font-weight: 400;
}

.thanks-box .thanks-name {
    font-size: 1.65em;
    font-weight: 700;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    line-height: 1.4;
}

.thanks-box .thanks-body {
    font-size: 0.85em;
    color: #444;
    line-height: 1.7;
    margin-bottom: 8px;
}

.thanks-box .thanks-bold {
    font-weight: 700;
    color: #222;
    font-size: 1.0em;
    display: block;
    margin: 6px 0 2px 0;
}

.thanks-box .thanks-bold-lg {
    font-weight: 700;
    color: #222;
    font-size: 1.2em;
    display: block;
    margin: 8px 0 2px 0;
}

.thanks-box .thanks-highlight {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 0.92em;
}

.thanks-box .thanks-footer {
    font-size: 0.85em;
    color: #444;
    margin-top: 14px;
    line-height: 1.7;
}

.thanks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 750px;
    margin: 20px auto 0 auto;
}

@media (max-width: 600px) {
    .thanks-grid {
        grid-template-columns: 1fr;
    }
}

.thanks-grid .thanks-box {
    margin: 0;
    padding: 25px 20px;
}

.thanks-grid .thanks-box .thanks-name {
    font-size: 1.35em;
    margin-bottom: 8px;
}

.thanks-grid .thanks-box .thanks-label {
    font-size: 0.88em;
}

/* Bottom CTA box - gradient background */
.thanks-box.thanks-cta {
    background: linear-gradient(135deg, #4a7cc9 0%, #9c5bb5 50%, #c435a8 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(74, 124, 201, 0.25);
}

.thanks-box.thanks-cta::before {
    display: none;
}

.thanks-box.thanks-cta .thanks-bold {
    color: #fff;
}

.thanks-box.thanks-cta .thanks-body {
    color: rgba(255, 255, 255, 0.9);
}

.thanks-box.thanks-cta .thanks-highlight {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Terms Page */
.terms-page-content {
    max-width: 95%;
    margin: 0 auto;
    text-align: justify;
    direction: ltr;
    font-size: 11px;
    line-height: 1.25;
    color: #888;
    letter-spacing: -0.01em;
}

.terms-last-updated {
    color: #aaa;
    font-size: 10px;
    margin-bottom: 10px;
}

.terms-intro {
    font-size: 11px;
    line-height: 1.25;
    margin-bottom: 15px;
}

.terms-section {
    margin-bottom: 15px;
}

.terms-section-header {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    margin-top: 15px;
    margin-bottom: 4px;
    padding-bottom: 0;
    border-bottom: 1px dotted #ccc;
    text-transform: uppercase;
}

.terms-section p {
    line-height: 1.25;
    margin-bottom: 8px;
    color: #888;
}

.terms-section ul {
    list-style: disc;
    padding-right: 0;
    padding-left: 15px;
    margin: 6px 0;
}

.terms-section li {
    line-height: 1.25;
    margin-bottom: 4px;
    color: #888;
}

.terms-section ol {
    padding-right: 0;
    padding-left: 15px;
    margin: 6px 0;
}

.terms-section ol li {
    margin-bottom: 4px;
    color: #888;
}

.terms-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 10px 0;
}

.terms-email {
    color: #777;
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .info-nav {
        gap: 6px;
        padding: 12px;
    }

    .info-nav-item {
        padding: 8px 14px;
        font-size: 0.85em;
    }

    .info-nav-divider {
        display: none;
    }

    .info-page-content {
        padding: 25px;
    }

    .info-page-title {
        font-size: 1.8em;
    }
}

/* Goals Page - Brick Layout Design */
.goals-intro {
    text-align: center;
    margin-bottom: 35px;
    font-size: 1.15em;
    color: var(--text);
}

.goals-bricks {
    margin-bottom: 40px;
}

.goals-brick-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.goal-brick {
    flex: 1;
    position: relative;
    background: var(--gradient-main-pale);
    border-radius: 14px;
    padding: 22px 25px;
    border: 1px solid var(--color-chatzer-pale);
    overflow: hidden;
}

.goal-brick::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: var(--gradient-main);
    border-radius: 0 14px 14px 0;
}

.goal-brick-text {
    font-size: 1em;
    line-height: 1.7;
    text-align: center;
    color: var(--text-dark);
}

/* Warning Box */
.goals-warning {
    background: white;
    border: 2px solid var(--color-chatzer-light);
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 35px;
    text-align: center;
}

.goals-warning-title {
    font-size: 1.3em;
    font-weight: 700;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

.goals-warning-text {
    font-size: 1.05em;
    color: var(--text-dark);
    line-height: 1.6;
}

/* Contact Box */
.goals-contact {
    background: var(--gradient-main-pale);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    border: 1px solid var(--color-chatzer-pale);
}

.goals-contact-title {
    font-size: 1.25em;
    font-weight: 600;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

.goals-contact-text {
    color: var(--text-muted);
    margin-bottom: 15px;
}

.goals-contact-email {
    display: inline-block;
    padding: 12px 28px;
    background: var(--gradient-main);
    color: white;
    border-radius: 30px;
    font-size: 1.05em;
    text-decoration: none;
    transition: var(--transition-smooth);
    direction: ltr;
}

.goals-contact-email:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Contribute Page Styles */
.contribute-page {
    background: var(--bg-color);
}

.contribute-hero {
    margin: 0 auto;
    max-width: 800px;
    /* Account for the 20px padding on each side of the modal wrapper to align widths perfectly */
    width: calc(100% - 40px);
    position: relative;
    z-index: 2;
    /* Keeps hero above the modal's upward shadow */
    overflow: visible !important;
}

#contributeModalContainer {
    overflow: visible !important;
    width: 100%;
}

.contribute-hero-content {
    /* Layers: Vertical fade into solid nigun matching header, over a right-to-left gradient */
    background: linear-gradient(to bottom, transparent 40%, var(--color-nigun) 90%, var(--color-nigun) 100%),
        linear-gradient(to left, var(--color-mechaber) 0%, var(--color-chatzer) 50%, var(--color-nigun) 100%);
    border-radius: 24px 24px 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 35px 20px !important; /* Make it more compact and sleek */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-radius 0.3s ease, margin-bottom 0.3s ease !important;
}

.contribute-hero-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

.contribute-hero-action-text {
    color: white !important;
    font-size: 1.45em !important;
    font-weight: 800 !important;
    margin: 0 !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.18) !important;
    letter-spacing: 0.01em !important;
}

.hero-plus-icon {
    font-size: 1.85em !important;
    color: white !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.18) !important;
    line-height: 1 !important;
    margin-top: -3px !important;
}

@media (max-width: 600px) {
    .contribute-hero-content {
        padding: 24px 15px !important;
        gap: 8px !important;
    }
    
    .contribute-hero-action-text {
        font-size: 1.2em !important;
    }
    
    .hero-plus-icon {
        font-size: 1.5em !important;
    }
}



.contribute-hero-title {
    color: white;
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.contribute-hero-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2em;
    max-width: 600px;
    margin: 0 auto;
}

.contribute-content {
    padding: 30px 20px 20px 20px;
}

.contribute-intro {
    text-align: center;
    font-size: 1.1em;
    color: var(--text-dark);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.contribute-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.contribute-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(74, 124, 201, 0.1);
    border: 1px solid rgba(74, 124, 201, 0.1);
    transition: all 0.3s ease;
}

.contribute-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(74, 124, 201, 0.2);
    border-color: var(--modal-color);
}

.contribute-card-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

.contribute-card-title {
    color: var(--modal-color-dark);
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 10px;
}

.contribute-card-text {
    color: var(--text-muted);
    font-size: 0.95em;
    margin-bottom: 20px;
    line-height: 1.6;
}

.contribute-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--modal-color) 0%, var(--modal-color-dark) 100%);
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(74, 124, 201, 0.3);
}

.contribute-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 124, 201, 0.4);
}

.contribute-card-btn .btn-arrow {
    transition: transform 0.3s ease;
}

.contribute-card-btn:hover .btn-arrow {
    transform: translateX(-5px);
}

.contribute-contact {
    text-align: center;
    background: linear-gradient(135deg, rgba(74, 124, 201, 0.05) 0%, rgba(74, 124, 201, 0.1) 100%);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid rgba(74, 124, 201, 0.15);
}

.contribute-contact-title {
    color: var(--text-dark);
    font-size: 1.2em;
    margin-bottom: 15px;
}

.contribute-email {
    display: inline-block;
    background: linear-gradient(135deg, var(--modal-color) 0%, var(--modal-color-dark) 100%);
    color: white;
    padding: 15px 30px;
    border-radius: 12px;
    font-size: 1.1em;
    text-decoration: none;
    direction: ltr;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(74, 124, 201, 0.3);
}

.contribute-email:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(74, 124, 201, 0.4);
}

/* Main Nigun Button - Largest */
.contribute-main-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 25px 40px;
    border-radius: 16px;
    text-decoration: none;
    font-size: 1.4em;
    font-weight: 600;
    color: white;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.contribute-main-btn .btn-external {
    transition: transform 0.3s ease;
    font-size: 1.2em;
}

.contribute-main-btn:hover .btn-external {
    transform: translate(3px, -3px);
}

.contribute-btn-main-gradient {
    background: linear-gradient(135deg, var(--modal-color) 0%, var(--modal-color-dark) 100%);
    box-shadow: 0 6px 25px rgba(74, 124, 201, 0.4);
}

.contribute-btn-main-gradient:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 35px rgba(74, 124, 201, 0.5);
}

/* External arrow for all buttons */
.btn-external {
    transition: transform 0.3s ease;
    opacity: 0.9;
}

.contribute-btn:hover .btn-external {
    transform: translate(3px, -3px);
    opacity: 1;
}

/* Gezungen color for piyut */
.contribute-btn-gezungen {
    background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
    box-shadow: 0 4px 15px rgba(245, 124, 0, 0.3);
}

.contribute-btn-gezungen:hover {
    box-shadow: 0 6px 25px rgba(245, 124, 0, 0.4);
}

/* Category Buttons Grid */
.contribute-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}

.contribute-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
    text-align: center;
}

.contribute-btn-icon {
    font-size: 1.3em;
}

.contribute-btn-text {
    text-align: center;
}

.contribute-btn .btn-arrow {
    transition: transform 0.3s ease;
    opacity: 0.8;
}

.contribute-btn:hover .btn-arrow {
    transform: translateX(-5px);
    opacity: 1;
}

.contribute-btn:hover {
    transform: translateY(-3px);
}

/* Category-specific colors */
.contribute-btn-mechaber {
    background: linear-gradient(135deg, var(--color-mechaber) 0%, var(--color-mechaber-dark) 100%);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.contribute-btn-mechaber:hover {
    box-shadow: 0 6px 25px rgba(34, 197, 94, 0.4);
}

.contribute-btn-chatzer {
    background: linear-gradient(135deg, var(--color-chatzer) 0%, var(--color-chatzer-dark) 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.contribute-btn-chatzer:hover {
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.4);
}

.contribute-btn-verter {
    background: linear-gradient(135deg, var(--color-verter) 0%, var(--color-verter-dark) 100%);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
}

.contribute-btn-verter:hover {
    box-shadow: 0 6px 25px rgba(236, 72, 153, 0.4);
}

.contribute-btn-zman {
    background: linear-gradient(135deg, var(--color-zman) 0%, var(--color-zman-dark) 100%);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.contribute-btn-zman:hover {
    box-shadow: 0 6px 25px rgba(249, 115, 22, 0.4);
}

.contribute-btn-piyut {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.contribute-btn-piyut:hover {
    box-shadow: 0 6px 25px rgba(99, 102, 241, 0.4);
}

.contribute-btn-playlist {
    background: linear-gradient(135deg, var(--color-playlist) 0%, var(--color-playlist-dark) 100%);
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3);
}

.contribute-btn-playlist:hover {
    box-shadow: 0 6px 25px rgba(20, 184, 166, 0.4);
}

/* Extra Section */
.contribute-extra-section {
    margin-bottom: 40px;
}

.contribute-section-title {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.55em;
    font-weight: 850;
    margin-bottom: 20px;
    text-align: center;
}

.contribute-extra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.contribute-btn-resource {
    background: linear-gradient(135deg, var(--color-resource) 0%, var(--color-resource-dark) 100%) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-resource) 35%, transparent) !important;
}

.contribute-btn-resource:hover {
    box-shadow: 0 6px 25px color-mix(in srgb, var(--color-resource) 50%, transparent) !important;
}

.contribute-btn-document {
    background: linear-gradient(135deg, var(--color-document) 0%, var(--color-document-dark) 100%) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-document) 35%, transparent) !important;
}

.contribute-btn-document:hover {
    box-shadow: 0 6px 25px color-mix(in srgb, var(--color-document) 50%, transparent) !important;
}

.contribute-btn-album {
    background: linear-gradient(135deg, var(--color-album) 0%, var(--color-album-dark) 100%) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-album) 35%, transparent) !important;
}

.contribute-btn-album:hover {
    box-shadow: 0 6px 25px color-mix(in srgb, var(--color-album) 50%, transparent) !important;
}

/* Terms Link */
.contribute-terms {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
}

.contribute-terms-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.contribute-terms-link:hover {
    color: var(--color-nigun);
}

/* ============================================================
   "זאכן וואס פעלן" — Missing-information board
   ==========/* ============================================================
   "זאכן וואס פעלן" — Gamified Contribution Deck Playroom
   ============================================================ */
.missing-section {
    max-width: 900px;
    margin: 20px auto 40px;
    padding: 35px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(74, 124, 201, 0.03), inset 0 1px 3px rgba(255, 255, 255, 0.6);
}

.missing-intro {
    max-width: 680px;
    margin: -4px auto 30px;
    text-align: center;
    color: var(--text-muted, #666);
    line-height: 1.8;
    font-size: 1.04em;
    font-weight: 500;
}

/* Category Grid Chooser (Aligned with contribute-cards!) */
.missing-grid-chooser {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
    margin-top: 15px;
}

.missing-chooser-card {
    position: relative;
    border-radius: 20px;
    padding: 26px 30px;
    background: #ffffff;
    border: 1.5px solid color-mix(in srgb, var(--mc) 10%, rgba(0, 0, 0, 0.04));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--mc) 6%, transparent);
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                border-color 0.3s ease;
}

.missing-chooser-card::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 5px;
    background: linear-gradient(to bottom, var(--mc), var(--mc-dark));
    transform: scaleY(0.25);
    transform-origin: center;
    opacity: 0.6;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.missing-chooser-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--mc) 16%, transparent);
    border-color: var(--mc);
}

.missing-chooser-card:hover::before {
    transform: scaleY(1);
    opacity: 1;
}

.missing-chooser-card.is-done {
    opacity: 0.55;
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.04);
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}

.mcc-icon-wrap {
    position: relative;
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.25em;
    color: var(--mc);
    background: var(--mc-pale);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 2px 6px color-mix(in srgb, var(--mc) 12%, transparent);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mcc-icon-wrap .nav-ball-icon {
    position: static;
    width: 24px;
    height: 24px;
}

.mcc-icon-wrap .nav-ball-icon.mechaber-icon {
    transform: scale(1.4);
}

.missing-chooser-card:hover .mcc-icon-wrap {
    transform: scale(1.04);
}

.mcc-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.mcc-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mcc-title {
    font-size: 1.25em;
    font-weight: 800;
    color: var(--text-dark, #2b2b2b);
    margin: 0;
    line-height: 1.35;
    transition: color 0.3s ease;
}

.missing-chooser-card:hover .mcc-title {
    color: var(--mc-dark, var(--color-nigun-dark));
}

.mcc-count {
    position: absolute;
    top: -8px;
    inset-inline-start: -8px;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 0.72em;
    font-weight: 850;
    color: #fff;
    background: linear-gradient(135deg, var(--mc) 0%, var(--mc-dark) 100%);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--mc) 24%, transparent);
    border: 2px solid #ffffff;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    white-space: nowrap;
}

.missing-chooser-card.is-done .mcc-count {
    background: linear-gradient(135deg, #a5d6a7 0%, #66bb6a 100%);
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.2);
}

.mcc-desc {
    font-size: 0.92em;
    color: var(--text-muted, #555);
    line-height: 1.6;
    margin: 0;
}

.mcc-action-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 12px;
    font-size: 0.88em;
    font-weight: 750;
    color: #ffffff;
    background: linear-gradient(135deg, var(--mc) 0%, var(--mc-dark) 100%);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mc) 20%, transparent);
    margin-top: 12px;
    align-self: flex-start;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.missing-chooser-card:hover .mcc-action-label {
    box-shadow: 0 6px 15px color-mix(in srgb, var(--mc) 35%, transparent);
    filter: brightness(1.08);
}

/* Playroom Container & Header */
.missing-playroom-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: playroomFadeIn 0.45s ease forwards;
}

.missing-playroom-wrap.playroom-leave {
    animation: playroomFadeOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.missing-chooser-wrap {
    animation: chooserFadeIn 0.35s ease forwards;
}

@keyframes playroomFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes playroomFadeOut {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(12px); }
}

@keyframes chooserFadeIn {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.missing-playroom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 16px;
}

.mdc-back-btn {
    padding: 7px 16px;
    border-radius: 10px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-primary-deep, #1a237e);
    font-family: inherit;
    font-size: 0.86em;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.mdc-back-btn:hover {
    transform: translateX(3px);
    background: #fff;
    border-color: rgba(0, 0, 0, 0.2);
}

.mdc-back-btn:active {
    transform: scale(0.95) translateX(2px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mdc-back-btn.clicked {
    pointer-events: none;
    transform: scale(0.9) translateX(8px);
    opacity: 0.5;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}

.mdc-playroom-title {
    font-size: 1.25em;
    font-weight: 850;
    color: var(--color-primary-deep, #1a237e);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.missing-search {
    position: relative;
    width: 200px;
}

.missing-search-icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    opacity: 0.55;
    pointer-events: none;
    fill: currentColor;
}

.missing-search-input {
    width: 100%;
    padding: 7px 32px 7px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 0.86em;
    color: var(--text, #222);
    font-weight: 600;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.2s ease;
}

.missing-search-input:focus {
    border-color: var(--color-primary-deep, #1a237e);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.15);
}

/* Global Progress Line Synchronization */
.missing-progress-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-cream, #faf8f5);
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(74, 18, 89, 0.06);
}

.missing-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.missing-progress-line {
    height: 100%;
    background: var(--gradient-main, linear-gradient(135deg, #4a7cc9 0%, #9c5bb5 50%, #c423a8 100%));
    box-shadow: 0 0 8px rgba(123, 31, 162, 0.35);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.missing-progress-text {
    font-size: 0.86em;
    font-weight: 750;
    color: var(--text-muted, #666);
    white-space: nowrap;
}

/* 3D stacked deck styles */
.missing-deck-stack {
    position: relative;
    height: 490px;
    perspective: 1200px;
    transform-style: preserve-3d;
    margin: 10px auto 20px;
    max-width: 580px;
    width: 100%;
}

/* Deck stack cards mimicking popup modals (.addinfo-modal-content) */
.missing-deck-card {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(180deg, var(--mc-pale) 0%, #ffffff 40%, #ffffff 100%);
    border: 2.5px solid var(--mc);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.48s cubic-bezier(0.175, 0.885, 0.32, 1.25), 
                opacity 0.45s ease, 
                filter 0.45s ease;
    --modal-color: var(--mc);
    --modal-color-dark: var(--mc-dark);
    --modal-color-pale: var(--mc-pale);
}

/* Stack Layers Depth */
.missing-deck-card.active {
    z-index: 10;
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    visibility: visible;
}

.missing-deck-card.behind-1 {
    z-index: 9;
    transform: translate3d(0, 18px, -24px) scale(0.96);
    opacity: 0.8;
    filter: blur(0.6px);
    pointer-events: none;
}

.missing-deck-card.behind-2 {
    z-index: 8;
    transform: translate3d(0, 36px, -48px) scale(0.92);
    opacity: 0.45;
    filter: blur(2.5px);
    pointer-events: none;
}

/* Staggered entry from deck background */
.missing-deck-card.active:not(.swipe-skip-left):not(.swipe-skip-right):not(.is-submitted) {
    animation: cardSpringForward 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes cardSpringForward {
    0% { transform: translate3d(0, 15px, -20px) scale(0.97); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Active card header/scroller layout (Mimicking addinfo-modal-header!) */
.mdc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 18px;
    background: linear-gradient(135deg, var(--mc) 0%, var(--mc-dark) 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px 20px 0 0;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.mdc-header:hover {
    filter: brightness(1.06);
}

.mdc-title-area {
    flex: 1;
    min-width: 0;
}

.mdc-category-tag {
    font-size: 0.78em;
    font-weight: 850;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 6px;
}

.mdc-item-title {
    font-size: 1.48em;
    font-weight: 850;
    color: #ffffff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.12);
}

.mdc-context-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.mdc-context-btn:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.5);
}

.mdc-body-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #ffffff;
}

/* When the card embeds the nigun's full detail content below the editor,
   the editor must not stretch to fill the whole scroll area. */
.mdc-body-scroll:has(.mdc-context-wrap) .missing-card-editor { height: auto; }

.mdc-context-wrap {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px dashed color-mix(in srgb, var(--mc) 28%, #e2e2e2);
    animation: playroomFadeIn 0.4s ease forwards;
}

.mdc-context-label {
    font-size: 0.8em;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: color-mix(in srgb, var(--mc) 72%, #000);
    text-align: center;
    margin-bottom: 14px;
    opacity: 0.85;
}

/* Tame the embedded detail content so it sits naturally inside the card. */
.mdc-context > * { max-width: 100% !important; }
.mdc-context .nigun-detail-back-btn,
.mdc-context .detail-back-btn,
.mdc-context .back-button { display: none !important; }

/* Forms inside the playroom cards */
.missing-card-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.missing-dup-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
    height: 100%;
    padding: 30px 10px;
}

.mdc-dup-hint {
    font-size: 1.05em;
    color: var(--text-dark, #2c2c2c);
    line-height: 1.7;
    font-weight: 600;
}

.mdc-dup-action-btn {
    padding: 12px 28px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--mc) 0%, var(--mc-dark) 100%);
    color: #fff;
    font-family: inherit;
    font-size: 0.96em;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--mc) 30%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mdc-dup-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--mc) 40%, transparent);
}

.mdc-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: center;
    gap: 16px;
    background: #fafafa;
}

.mdc-action-btn {
    padding: 11px 32px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.94em;
    font-weight: 750;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.2s ease, 
                opacity 0.2s ease;
}

.mdc-skip-btn {
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    color: var(--text-muted, #666);
}

.mdc-skip-btn:hover {
    transform: translateY(-1.5px);
    border-color: rgba(0, 0, 0, 0.22);
    background: #ffffff;
}

.mdc-submit-btn {
    border: none;
    background: linear-gradient(135deg, var(--mc) 0%, var(--mc-dark) 100%);
    color: #fff;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--mc) 36%, transparent);
}

.mdc-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px color-mix(in srgb, var(--mc) 45%, transparent);
}

/* behind-2 is a simple centered placeholder. behind-1 is now a FULL card, so it
   keeps the base column layout (so it's already populated under the active one). */
.missing-deck-card.behind-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.mdc-bg-icon {
    font-size: 4em;
    opacity: 0.15;
    color: var(--mc);
}

.mdc-bg-title {
    position: absolute;
    bottom: 24px;
    font-size: 1.15em;
    font-weight: 750;
    color: var(--color-primary-deep, #4a1259);
    opacity: 0.25;
    text-align: center;
    padding: 0 20px;
}

/* Beautiful Swipe Animation Keyframes */
@keyframes cardSwipeSkipLeft {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
    15% { transform: translate3d(25px, -6px, 0) rotate(2deg); }
    100% { transform: translate3d(-150vw, 80px, 0) rotate(-35deg) scale(0.9); opacity: 0; }
}

@keyframes cardSwipeSkipRight {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
    15% { transform: translate3d(-25px, -6px, 0) rotate(-3deg); }
    100% { transform: translate3d(150vw, 80px, 0) rotate(35deg) scale(0.9); opacity: 0; }
}

@keyframes cardSwipeSubmitUp {
    0% { 
        transform: translate3d(0, 0, 0) scale(1);
    }
    15% { 
        transform: translate3d(0, 18px, 0) scale(1.05, 0.92); 
        background: linear-gradient(180deg, #e8f5e9 0%, #ffffff 40%, #ffffff 100%); 
        border-color: #4caf50;
        box-shadow: 0 15px 30px rgba(76, 175, 80, 0.35);
    }
    35% { 
        transform: translate3d(0, -25px, 0) scale(0.95, 1.08); 
        background: linear-gradient(180deg, #c8e6c9 0%, #ffffff 40%, #ffffff 100%); 
        border-color: #2e7d32;
        box-shadow: 0 25px 45px rgba(76, 175, 80, 0.5);
    }
    100% { 
        transform: translate3d(0, -140vh, 0) scale(0.7, 1.15) rotate(-10deg); 
        opacity: 0; 
        box-shadow: 0 35px 70px rgba(76, 175, 80, 0);
    }
}

.missing-deck-card.swipe-skip-left {
    animation: cardSwipeSkipLeft 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    pointer-events: none;
    transition: none !important;
}

.missing-deck-card.swipe-skip-right {
    animation: cardSwipeSkipRight 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    pointer-events: none;
    transition: none !important;
}

.missing-deck-card.is-submitted {
    animation: cardSwipeSubmitUp 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    pointer-events: none;
    transition: none !important;
}

.missing-deck-card.is-submitted::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.25) 0%, transparent 75%);
    opacity: 0;
    pointer-events: none;
    animation: submitGlow 0.75s ease-out forwards;
}

@keyframes submitGlow {
    0% { opacity: 0; transform: scale(0.8); }
    20% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* Celebration Clear State screen (Aligned with modal styles!) */
.missing-celebration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(74, 124, 201, 0.1);
    box-shadow: var(--card-shadow);
    animation: playroomFadeIn 0.5s ease forwards;
    max-width: 600px;
    margin: 20px auto;
}

.mcel-emoji {
    font-size: 3.5em;
    margin-bottom: 16px;
    animation: emojiFloat 2.5s ease-in-out infinite alternate;
}

@keyframes emojiFloat {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-8px) scale(1.05) rotate(4deg); }
}

.mcel-title {
    font-size: 1.5em;
    font-weight: 850;
    color: var(--color-primary-deep, #4a1259);
    margin: 0 0 10px;
}

.mcel-subtitle {
    font-size: 1em;
    color: var(--text-muted, #666);
    line-height: 1.6;
    margin: 0 0 24px;
    font-weight: 600;
}

.mcel-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.mcel-btn {
    padding: 10px 24px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 750;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mcel-btn-restart {
    border: 1.5px solid var(--color-primary-deep, #4a1259);
    background: rgba(74, 18, 89, 0.04);
    color: var(--color-primary-deep, #4a1259);
}

.mcel-btn-restart:hover {
    transform: translateY(-1.5px);
    background: rgba(74, 18, 89, 0.08);
}

/* No-search-results state — same shell as the celebration, different intent. */
.missing-noresults {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px 24px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(74, 124, 201, 0.1);
    box-shadow: var(--card-shadow);
    animation: playroomFadeIn 0.4s ease forwards;
    max-width: 600px;
    margin: 20px auto;
}

.mnr-emoji { font-size: 2.8em; margin-bottom: 12px; opacity: 0.85; }
.mnr-title { font-size: 1.35em; font-weight: 850; color: var(--color-primary-deep, #4a1259); margin: 0 0 8px; }
.mnr-subtitle { font-size: 0.98em; color: var(--text-muted, #666); line-height: 1.6; margin: 0 0 20px; font-weight: 600; }

.mcel-btn-clear {
    border: 1.5px solid var(--color-primary-deep, #4a1259);
    background: rgba(74, 18, 89, 0.04);
    color: var(--color-primary-deep, #4a1259);
}
.mcel-btn-clear:hover {
    transform: translateY(-1.5px);
    background: rgba(74, 18, 89, 0.08);
}

.mcel-btn-back {
    border: none;
    background: var(--gradient-main, linear-gradient(135deg, #4a7cc9 0%, #9c5bb5 50%, #c423a8 100%));
    color: #fff;
    box-shadow: 0 4px 12px rgba(156, 91, 181, 0.3);
}

.mcel-btn-back:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 16px rgba(156, 91, 181, 0.4);
}

.mcel-btn-back:active {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(156, 91, 181, 0.2);
}

.mcel-btn-back.clicked {
    pointer-events: none;
    transform: scale(0.95);
    opacity: 0.7;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}

/* Theme definition palettes per card matched to website core variables! */
.missing-theme-nigun    { --mc: var(--color-nigun);    --mc-dark: var(--color-nigun-dark);    --mc-pale: var(--color-nigun-pale); }
.missing-theme-mechaber { --mc: var(--color-mechaber); --mc-dark: var(--color-mechaber-dark); --mc-pale: var(--color-mechaber-pale); }
.missing-theme-verter   { --mc: var(--color-verter);   --mc-dark: var(--color-verter-dark);   --mc-pale: var(--color-verter-pale); }
.missing-theme-orphan   { --mc: var(--color-nigun);    --mc-dark: var(--color-nigun-dark);    --mc-pale: var(--color-nigun-pale); }
.missing-theme-piyut    { --mc: var(--color-piyut);    --mc-dark: var(--color-piyut-dark);    --mc-pale: var(--color-piyut-pale); }
.missing-theme-rhythm   { --mc: var(--color-music);    --mc-dark: var(--color-music-dark);    --mc-pale: var(--color-music-pale); }

/* Rhythm card: retint the embedded nigun detail (hero + recordings list) to the
   gold/rhythm palette — same look the nigunim get on the ריטעם page — by
   remapping the nigun color variables within the embedded context. */
.missing-theme-rhythm .mdc-real-header-wrap,
.missing-theme-rhythm .mdc-real-header,
.missing-theme-rhythm .mdc-real-details-wrap {
    --color-nigun: var(--color-music);
    --color-nigun-light: var(--color-music-light);
    --color-nigun-dark: var(--color-music-dark);
    --color-nigun-pale: var(--color-music-pale);
}

/* The recording rows use hard-coded blue shadows (rgba(74,124,201,…)) that the
   variable remap can't reach — repaint them gold inside the rhythm card. */
.missing-theme-rhythm .song-item-recording,
.missing-theme-rhythm .nigun-recordings-list .song-item-recording {
    box-shadow: inset 0 0 0 1px rgba(212, 172, 18, 0.3), 0 2px 6px rgba(212, 172, 18, 0.15);
}
.missing-theme-rhythm .song-item-recording:hover {
    box-shadow: 0 4px 15px rgba(212, 172, 18, 0.3);
}
.missing-theme-rhythm .nigun-recordings-list .song-item-recording:hover {
    box-shadow: 0 6px 20px rgba(212, 172, 18, 0.35);
}
.missing-theme-rhythm .song-item-recording.active-recording {
    box-shadow: 0 4px 15px rgba(212, 172, 18, 0.4);
}
.missing-theme-rhythm .song-item-recording.active-recording:hover {
    box-shadow: 0 6px 20px rgba(212, 172, 18, 0.5);
}
.missing-theme-rhythm .song-item-recording::after,
.missing-theme-rhythm .nigun-recordings-list .song-item-recording::after {
    box-shadow: 0 0 12px rgba(212, 172, 18, 0.15);
}

/* ---- 100%-duplicate merge card — nigun themed, like the other nigun cards ---- */
.missing-theme-duplicates { --mc: var(--color-nigun); --mc-dark: var(--color-nigun-dark); --mc-pale: var(--color-nigun-pale); }

.mdc-dup {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 16px 6px;
}

.mdc-dup-badge {
    align-self: center;
    background: linear-gradient(135deg, var(--mc), var(--mc-dark));
    color: #fff;
    font-size: 0.82em;
    font-weight: 800;
    padding: 5px 16px;
    border-radius: 16px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mc) 36%, transparent);
}

.mdc-dup-pair {
    display: flex;
    align-items: stretch;
    gap: 10px;
    direction: rtl;
}

.mdc-dup-vs {
    align-self: center;
    color: var(--mc);
    font-size: 1.3em;
    opacity: 0.7;
    flex: 0 0 auto;
}

.mdc-dup-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 2px solid color-mix(in srgb, var(--mc) 16%, transparent);
    background: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.mdc-dup-col.is-keep {
    border-color: var(--mc);
    background: var(--mc-pale);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mc) 22%, transparent);
}
/* The non-kept column stays readable but clearly de-emphasized. */
.mdc-dup-col.is-dimmed { opacity: 0.6; }
.mdc-dup-col.is-dimmed .mdc-dup-keep-txt { color: var(--text-secondary, #888); }

.mdc-dup-keep {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--mc-dark);
    cursor: pointer;
}
.mdc-dup-keep input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--mc); cursor: pointer; }
.mdc-dup-keep-txt { line-height: 1.4; }

.mdc-dup-song-open {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: start;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 0;
}
.mdc-dup-song-name {
    font-size: 1.02em;
    font-weight: 700;
    color: var(--text, #222);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mdc-dup-song-open:hover .mdc-dup-song-name { text-decoration: underline; color: var(--mc-dark); }
.mdc-dup-song-meta { font-size: 0.78em; color: var(--text-secondary, #888); }

.mdc-dup-recwrap {
    margin-top: 4px;
    border-top: 1px dashed color-mix(in srgb, var(--mc) 22%, transparent);
    padding-top: 10px;
    display: flex;
    justify-content: center;
}
.mdc-dup-norec { font-size: 0.82em; font-style: italic; opacity: 0.7; color: var(--text-secondary, #666); padding: 6px 0; }

/* Compact recording inside a duplicate column — only a play button + rating. */
.mdc-dup-rec-compact {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 7px 14px !important;
    border-radius: 999px;
    cursor: pointer;
}
.mdc-dup-rec-compact::before,
.mdc-dup-rec-compact::after { display: none !important; }
.mdc-dup-rec-compact .rec-play-btn { position: static !important; flex: 0 0 auto; margin: 0 !important; }
.mdc-dup-rec-rating { display: inline-flex; align-items: center; line-height: 1; }
.mdc-dup-rec-norating { font-size: 0.78em; color: var(--text-secondary, #888); font-style: italic; }

.mdc-dup-keep-row { display: flex; flex-direction: column; gap: 6px; }
.mdc-dup-name-label { font-size: 0.85em; font-weight: 700; color: var(--mc-dark); }
.mdc-dup-name-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--mc) 30%, #ddd);
    background: #fff;
    font-family: inherit;
    font-size: 0.95em;
    color: var(--text, #222);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mdc-dup-name-input:focus { border-color: var(--mc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 16%, transparent); }

.mdc-dup-status-line { min-height: 16px; text-align: center; }
.mdc-dup-status { font-size: 0.84em; font-weight: 700; color: var(--mc-dark); }

.mdc-merge-btn {
    background: linear-gradient(135deg, var(--mc), var(--mc-dark)) !important;
    color: #fff !important;
}
.mdc-dup-footer { flex-wrap: wrap; gap: 8px; }
.mdc-keepsep-btn {
    background: #fff !important;
    color: var(--mc-dark) !important;
    border: 1.5px solid color-mix(in srgb, var(--mc) 45%, transparent) !important;
}
.mdc-keepsep-btn:hover {
    background: var(--mc-pale) !important;
}
.mdc-dup-name-hint { font-weight: 400; font-size: 0.82em; opacity: 0.65; }

/* Keep-separate: choose which duplicate recording to remove */
.mdc-dup-sep {
    border: 1.5px dashed color-mix(in srgb, var(--mc) 40%, transparent);
    background: var(--mc-pale);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 4px;
}
.mdc-dup-sep-prompt { font-size: 0.9em; font-weight: 700; color: var(--mc-dark); margin-bottom: 10px; line-height: 1.5; }
.mdc-dup-sep-note { font-weight: 400; font-size: 0.86em; opacity: 0.8; }
.mdc-dup-sep-choices { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mdc-dup-sep-choice {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--mc) 45%, transparent);
    background: #fff;
    color: var(--mc-dark);
    font-family: inherit;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.mdc-dup-sep-choice:hover:not(:disabled) { background: var(--mc); color: #fff; transform: translateY(-1px); }
.mdc-dup-sep-choice:disabled { opacity: 0.4; cursor: not-allowed; }
.mdc-dup-sep-cancel {
    padding: 8px 14px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #888);
    font-family: inherit;
    font-size: 0.86em;
    cursor: pointer;
}
.mdc-dup-sep-cancel:hover { text-decoration: underline; }

/* Merge feedback toast */
.missing-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translate(-50%, 20px);
    background: #2e7d32;
    color: #fff;
    padding: 11px 22px;
    border-radius: 24px;
    font-size: 0.92em;
    font-weight: 700;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    z-index: 100000;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.missing-toast.show { opacity: 1; transform: translate(-50%, 0); }
.missing-toast.err { background: #c0392b; }

/* ---- Optimistic success celebration (themed per card) ---- */
.mdc-success-burst {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--mc) 20%, #fff) 0%, color-mix(in srgb, var(--mc) 34%, #fff) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    overflow: hidden;
}
.mdc-success-burst.show { opacity: 1; }

.mdc-sb-ring {
    position: absolute;
    width: 92px; height: 92px;
    border-radius: 50%;
    border: 4px solid var(--mc);
    transform: scale(0.2);
    opacity: 0;
}
.mdc-success-burst.show .mdc-sb-ring { animation: mdcRing 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes mdcRing {
    0% { transform: scale(0.2); opacity: 0.9; }
    70% { opacity: 0.45; }
    100% { transform: scale(1.7); opacity: 0; }
}

.mdc-sb-check {
    width: 78px; height: 78px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mc), var(--mc-dark));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 34px color-mix(in srgb, var(--mc) 48%, transparent);
    transform: scale(0);
}
.mdc-success-burst.show .mdc-sb-check { animation: mdcPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s forwards; }
@keyframes mdcPop { to { transform: scale(1); } }
.mdc-sb-check svg {
    width: 46px;
    height: 46px;
    transform: translate(2px, 1px);
}
.mdc-sb-check path {
    fill: none; stroke: #fff; stroke-width: 5;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 60; stroke-dashoffset: 60;
}
.mdc-success-burst.show .mdc-sb-check path { animation: mdcDraw 0.4s ease 0.35s forwards; }
@keyframes mdcDraw { to { stroke-dashoffset: 0; } }

.mdc-sb-msg {
    font-size: 1.12em; font-weight: 800; color: var(--mc-dark);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    text-align: center; padding: 0 26px; line-height: 1.5;
    opacity: 0; transform: translateY(8px);
}
.mdc-success-burst.show .mdc-sb-msg { animation: mdcMsg 0.45s ease 0.5s forwards; }
@keyframes mdcMsg { to { opacity: 1; transform: translateY(0); } }

.mdc-sb-spark {
    position: absolute;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--mc);
    opacity: 0;
}
.mdc-success-burst.show .mdc-sb-spark { animation: mdcSpark 0.75s ease 0.18s forwards; }
.mdc-sb-spark.s1 { --dx: -72px; --dy: -62px; }
.mdc-sb-spark.s2 { --dx: 72px;  --dy: -56px; background: var(--mc-dark); }
.mdc-sb-spark.s3 { --dx: -88px; --dy: 32px; }
.mdc-sb-spark.s4 { --dx: 88px;  --dy: 42px; background: var(--mc-dark); }
.mdc-sb-spark.s5 { --dx: -34px; --dy: 84px; }
.mdc-sb-spark.s6 { --dx: 44px;  --dy: 82px; background: var(--mc-dark); }
@keyframes mdcSpark {
    0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

/* Shake an editor that was submitted empty. */
.me-shake { animation: mdcShake 0.5s ease; }
@keyframes mdcShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .mdc-success-burst *, .me-shake { animation: none !important; }
    .mdc-success-burst.show .mdc-sb-check { transform: scale(1); }
    .mdc-success-burst.show .mdc-sb-check path { stroke-dashoffset: 0; }
    .mdc-success-burst.show .mdc-sb-msg { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
    .mdc-dup-pair { flex-direction: column; }
    .mdc-dup-vs { transform: rotate(90deg); }
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .missing-playroom-header {
        flex-direction: column;
        align-items: stretch;
    }
    .missing-search {
        width: 100%;
    }
    .missing-deck-stack {
        height: 440px;
    }
    .mdc-item-title {
        font-size: 1.25em;
    }
    .mdc-action-btn {
        padding: 9px 20px;
        font-size: 0.88em;
    }
}
.me-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid color-mix(in srgb, var(--mc) 20%, #ddd);
    background: #fff;
    font-family: inherit;
    font-size: 0.92em;
    color: var(--text, #222);
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.me-input:focus {
    border-color: var(--mc);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--mc) 14%, transparent), inset 0 1px 2px rgba(0, 0, 0, 0.01);
}
textarea.me-input { resize: vertical; min-height: 100px; line-height: 1.6; }

.me-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.me-dates { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.me-dates-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.me-dates-title {
    font-size: 0.88em;
    font-weight: 750;
    color: color-mix(in srgb, var(--mc) 75%, #1a237e);
    margin-inline-end: 2px;
}
.me-dates .me-d { width: 68px; padding: 8px 10px; text-align: center; }
.me-dates .me-d[data-f$="Year"] { width: 84px; }

.me-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.me-submit {
    padding: 10px 26px;
    border-radius: 24px;
    border: none;
    background: linear-gradient(135deg, var(--mc) 0%, color-mix(in srgb, var(--mc) 72%, #000) 100%);
    color: #fff;
    font-family: inherit;
    font-size: 0.94em;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mc) 36%, transparent);
    transition: transform 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}
.me-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mc) 44%, transparent);
}
.me-submit:active:not(:disabled) {
    transform: translateY(0);
}
.me-submit:disabled { opacity: 0.6; cursor: default; }
.me-submit.loading { position: relative; color: transparent; }
.me-submit.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: missingSpin 0.7s linear infinite;
}
@keyframes missingSpin { to { transform: rotate(360deg); } }

.me-hint { font-size: 0.82em; color: var(--text-secondary, #888); font-weight: 500; }
.me-status { font-size: 0.88em; font-weight: 750; }
.me-status.ok { color: #2e7d32; }
.me-status.err { color: #c0392b; }

/* ---- Interactive Custom File Uploader ---- */
.me-file-wrap {
    position: relative;
    width: 100%;
}
.me-file-label {
    display: block;
    cursor: pointer;
    width: 100%;
}
.me-file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.me-file-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px dashed color-mix(in srgb, var(--mc) 35%, #ddd);
    background: color-mix(in srgb, var(--mc-pale) 30%, #fff);
    color: color-mix(in srgb, var(--mc) 80%, #222);
    font-size: 0.92em;
    font-weight: 600;
    text-align: center;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.me-file-btn:hover {
    border-color: var(--mc);
    background: color-mix(in srgb, var(--mc-pale) 60%, #fff);
    transform: translateY(-1.5px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mc) 12%, transparent);
}
.me-file-icon {
    font-size: 1.25em;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.me-file-btn:hover .me-file-icon {
    transform: scale(1.2) translateY(-2px);
}
.me-file-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1.5px solid #a5d6a7;
    background: #e8f5e9;
    color: #1b5e20;
    font-size: 0.9em;
    font-weight: 600;
    animation: meFileInfoIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes meFileInfoIn {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.me-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.me-file-remove {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #2e7d32;
    font-size: 1.1em;
    font-weight: 750;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.me-file-remove:hover {
    background: #c8e6c9;
    color: #1b5e20;
    transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .missing-card,
    .missing-row {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 768px) {
    .contribute-hero {
        padding: 40px 20px;
        width: 100%;
        border-radius: 0;
    }

    .contribute-hero-title {
        font-size: 1.8em;
    }

    .contribute-hero-subtitle {
        font-size: 1em;
    }

    .contribute-cards {
        grid-template-columns: 1fr;
    }

    .contribute-card {
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .instructions-page-row {
        flex-direction: column;
    }

    .goals-brick-row {
        flex-direction: column;
    }

    .goal-brick {
        padding: 18px 20px;
    }

    .goals-warning,
    .goals-contact {
        padding: 20px;
    }
}

/* Wizard header title (shown during wizard steps) */
.wizard-header-title {
    display: none;
    color: white;
    font-size: 1.2em;
    font-weight: 700;
    text-align: center;
    margin: 8px 0 4px;
    padding: 0;
    letter-spacing: 0.3px;
}

/* Sub-header for email/notes — flush below header, colored border */
.addinfo-modal-subheader {
    background: var(--modal-color-pale);
    padding: 12px 24px 16px;
    border: 2px solid var(--modal-color);
    border-top: none;
    border-radius: 0 0 16px 16px;
    margin: -1px 20px 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.subheader-prompt {
    text-align: center;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--modal-color-dark);
    padding: 20px 24px 12px;
    direction: rtl;
}

.subheader-prompt:empty {
    display: none;
}

.addinfo-modal-subheader .report-email-header,
.addinfo-modal-subheader .editor-contact-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Override inputs inside sub-header */
.addinfo-modal-subheader .editor-contact-input,
.addinfo-modal-subheader .addnigun-name-input {
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--modal-color-light);
    border-radius: 0;
    color: var(--modal-color-dark);
    padding: 6px 0;
    font-size: 0.85em;
    font-weight: 500;
    outline: none;
    transition: border-color 0.3s ease;
    font-family: inherit;
    width: 100%;
}

.addinfo-modal-subheader .editor-contact-input::placeholder,
.addinfo-modal-subheader .addnigun-name-input::placeholder {
    color: var(--modal-color);
    opacity: 0.7;
    font-weight: 400;
}

.addinfo-modal-subheader .editor-contact-input:focus,
.addinfo-modal-subheader .addnigun-name-input:focus {
    border-bottom-color: var(--modal-color);
}

/* ============================================
   Wizard Chooser Styles
   ============================================ */

/* Chooser container */
.wizard-chooser {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 32px 24px;
    overflow-y: auto;
}

.wizard-chooser-exit {
    animation: wizardFadeOut 0.2s ease forwards;
}

@keyframes wizardFadeOut {
    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* Step container */
.wizard-step {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wizard-step-enter {
    animation: wizardStepIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    overflow: visible !important;
}

@keyframes wizardStepIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Action layout — 2-row: primary big, secondary smaller side-by-side */
.wizard-action-row {
    display: flex;
    gap: 12px;
    /* Gap between the two secondary buttons */
    width: 100%;
}

.wizard-action-primary {
    justify-content: center;
    margin-bottom: 8px;
    /* Added spacing between rows instead of negative margin */
}

.wizard-action-secondary {
    justify-content: center;
}

.wizard-btn-primary {
    font-size: 1.05em;
}

.wizard-btn-secondary {
    padding: 24px 20px !important;
    font-size: 0.9em;
    opacity: 0.85;
}

.wizard-btn-secondary:hover {
    opacity: 1;
}

/* Action buttons (step 1) — gradient fill */
.wizard-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 36px 24px;
    border: none;
    border-radius: 16px;
    background: var(--wizard-btn-bg, var(--gradient-main));
    cursor: pointer;
    text-align: center;
    direction: rtl;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    animation: wizardBtnIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

@keyframes wizardBtnIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

.wizard-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.wizard-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.wizard-btn:hover::before {
    opacity: 1;
}


.wizard-btn:active {
    transform: translateY(0) scale(0.98);
}

.wizard-btn-label {
    font-size: 1.2em;
    font-weight: 700;
    color: white;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Exit animation for unselected buttons */
.wizard-btn-exit {
    animation: wizardBtnOut 0.25s ease forwards;
    pointer-events: none;
}

@keyframes wizardBtnOut {
    to {
        opacity: 0;
        transform: translateX(20px) scale(0.95);
    }
}

.wizard-btn-selected {
    animation: wizardBtnShrink 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
}

@keyframes wizardBtnShrink {
    to {
        opacity: 0;
        transform: translateY(-12px) scale(0.9);
    }
}

/* Category grid (step 2) — colored per category */
.wizard-cat-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 10px;
    width: 100%;
}

.wizard-cat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    min-width: 100px;
    border: 2px solid var(--cat-color, var(--modal-color));
    border-radius: 14px;
    background: white;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    animation: wizardCatIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    position: relative;
    overflow: hidden;
    font-family: inherit;
}

@keyframes wizardCatIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(12px);
    }

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

.wizard-cat-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--cat-color-pale, var(--modal-color-pale)) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.wizard-cat-btn:hover {
    border-color: var(--cat-color, var(--modal-color));
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--cat-color, var(--modal-color)) 25%, transparent);
    background: var(--cat-color-pale, var(--modal-color-pale));
}

.wizard-cat-btn:hover::before {
    opacity: 1;
}

.wizard-cat-btn:active {
    transform: translateY(0) scale(0.97);
}

.wizard-cat-label {
    font-size: 1em;
    font-weight: 700;
    color: var(--cat-color-dark, var(--modal-color-dark));
    position: relative;
    z-index: 1;
}

.wizard-cat-exit {
    animation: wizardCatOut 0.2s ease forwards;
    pointer-events: none;
}

@keyframes wizardCatOut {
    to {
        opacity: 0;
        transform: scale(0.85);
    }
}

.wizard-cat-selected {
    animation: wizardCatSelect 0.25s ease forwards;
    pointer-events: none;
}

@keyframes wizardCatSelect {
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }
}

/* Breadcrumb pills in header */
.wizard-breadcrumbs {
    display: none;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
    margin-top: 10px;
}

.wizard-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    border-radius: 0;
    color: white;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    font-family: inherit;
    clip-path: polygon(12px 0%,
            100% 0%,
            calc(100% - 12px) 50%,
            100% 100%,
            12px 100%,
            0% 50%);
}

.wizard-pill:hover {
    background: rgba(255, 255, 255, 0.4);
}

.wizard-pill-enter {
    animation: wizardPillIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wizardPillIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.85);
    }

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

/* Report category buttons (replaces dropdown) */
.report-cat-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    direction: rtl;
    margin-bottom: 12px;
}

.report-cat-btn {
    padding: 12px 22px;
    border: 2px solid var(--modal-color-pale);
    border-radius: 12px;
    background: white;
    color: var(--modal-color-dark);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.report-cat-btn:hover {
    border-color: var(--modal-color);
    background: var(--modal-color-pale);
    transform: translateY(-1px);
}

.report-cat-btn.active {
    background: var(--modal-color);
    border-color: var(--modal-color);
    color: white;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--modal-color) 30%, transparent);
}

/* Dim unselected buttons when one is active */
.report-cat-btns:has(.report-cat-btn.active) .report-cat-btn:not(.active) {
    opacity: 0.45;
    border-color: #e0e0e0;
    color: #aaa;
}

.report-cat-btns:has(.report-cat-btn.active) .report-cat-btn:not(.active):hover {
    opacity: 0.75;
    border-color: var(--modal-color-pale);
    color: var(--modal-color-dark);
}

/* Mobile adjustments */
@media (max-width: 500px) {
    .wizard-chooser {
        padding: 20px 16px;
    }

    .wizard-btn {
        padding: 22px 18px;
    }

    .wizard-cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .wizard-cat-btn {
        padding: 12px 6px;
    }

    .report-cat-btns {
        gap: 6px;
    }

    .report-cat-btn {
        padding: 8px 14px;
        font-size: 0.85em;
    }
}

/* ============================================
   Wizard Entity Search Step — inline layout
   ============================================ */

/* Step container: column layout, fills modal */
.wizard-entity-step {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    padding: 0 10px;
}

/* Input row at top */
.wizard-entity-input-row {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.wizard-entity-input {
    flex: 1;
    padding: 12px 18px;
    border: none;
    border-radius: 24px;
    font-size: 1em;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    outline: none;
    direction: rtl;
    transition: box-shadow 0.2s ease;
}

.wizard-entity-input::placeholder {
    color: #999;
}

.wizard-entity-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.wizard-entity-arrow {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 1.3em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.wizard-entity-arrow:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.1);
}

/* Inline results area: pills flow full width */
.wizard-entity-results {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    direction: rtl;
    max-height: 340px;
    overflow-y: auto;
    padding: 4px 0;
}

.wizard-entity-option {
    display: inline-block;
    padding: 8px 18px;
    cursor: pointer;
    font-size: 0.88em;
    color: white;
    background: var(--entity-color, var(--modal-color));
    border-radius: 20px;
    transition: all 0.15s ease;
    font-weight: 500;
}

.wizard-entity-option:hover {
    background: var(--entity-color-dark, var(--modal-color-dark));
    transform: scale(1.05);
}

.wizard-entity-no-results {
    padding: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    width: 100%;
}

/* Recording picker inline (within playlists section) */
.recording-picker-row {
    margin-top: 8px;
    animation: slideInFromBottom 0.25s ease forwards;
}

.recording-picker-label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--modal-color-dark);
    margin-bottom: 8px;
    direction: rtl;
}

.recording-picker-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    direction: rtl;
    justify-content: center;
}

.recording-picker-btn {
    padding: 8px 18px;
    border: 2px solid var(--modal-color);
    border-radius: 20px;
    background: white;
    color: var(--modal-color-dark);
    cursor: pointer;
    font-size: 0.88em;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recording-picker-btn:hover {
    background: var(--modal-color-pale);
    transform: scale(1.05);
}

.recording-picker-btn.selected {
    background: var(--modal-color);
    color: white;
    border-color: var(--modal-color-dark);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--modal-color) 40%, transparent);
    transform: scale(1.02);
}

/* Play/pause icon inside recording picker button */
.picker-btn-play {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.picker-icon-play,
.picker-icon-pause {
    position: absolute;
    inset: 0;
    transition: opacity 0.25s ease;
}

.picker-icon-play {
    opacity: 1;
}

.picker-icon-pause {
    opacity: 0;
}

.recording-picker-btn.playing .picker-icon-play {
    opacity: 0;
}

.recording-picker-btn.playing .picker-icon-pause {
    opacity: 1;
}

.recording-picker-btn.playing {
    background: var(--modal-color-pale);
    border-color: var(--modal-color-dark);
}

.recording-picker-btn.selected.playing {
    background: var(--modal-color-dark);
    color: white;
    border-color: var(--modal-color-dark);
}

/* Wizard recording options with play buttons */
.wizard-rec-option {
    display: flex !important;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.wizard-rec-option .picker-btn-play {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-rec-option .picker-icon-play,
.wizard-rec-option .picker-icon-pause {
    position: absolute;
    inset: 0;
    transition: opacity 0.25s ease;
}

.wizard-rec-option .picker-icon-play {
    opacity: 1;
}

.wizard-rec-option .picker-icon-pause {
    opacity: 0;
}

.wizard-rec-option.playing .picker-icon-play {
    opacity: 0;
}

.wizard-rec-option.playing .picker-icon-pause {
    opacity: 1;
}

/* ============================================
   My Submissions UI (Contribute Page)
   ============================================ */
.my-sub-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    direction: rtl;
    text-align: right;
}

.my-sub-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.my-sub-type-badge {
    font-size: 0.7em;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--color-nigun-pale);
    color: var(--color-nigun-dark);
}

.my-sub-type-badge.badge-mechaber {
    background: var(--color-mechaber-pale);
    color: var(--color-mechaber-dark);
}

.my-sub-type-badge.badge-chatzer {
    background: var(--color-chatzer-pale);
    color: var(--color-chatzer-dark);
}

.my-sub-title {
    font-weight: 700;
    font-size: 1.1em;
    flex: 1;
    color: var(--text-dark);
}

.my-sub-title-link {
    color: var(--color-primary-deep);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.my-sub-title-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.my-sub-status {
    font-size: 0.8em;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

.my-sub-status.status-approved {
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.my-sub-status.status-rejected {
    background: rgba(231, 76, 60, 0.15);
    color: #c0392b;
}

.my-sub-status.status-inprogress {
    background: rgba(243, 156, 18, 0.15);
    color: #d35400;
}

.my-sub-status.status-pending {
    background: rgba(189, 195, 199, 0.3);
    color: #7f8c8d;
}

.my-sub-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.my-sub-tag {
    font-size: 0.85em;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 3px 8px;
    border-radius: 6px;
    color: #495057;
}

.my-sub-tag-key {
    font-weight: 600;
    color: #212529;
    margin-left: 4px;
}

.my-sub-reject-reason {
    font-size: 0.9em;
    background: rgba(231, 76, 60, 0.05);
    border-right: 3px solid #e74c3c;
    padding: 8px 12px;
    border-radius: 6px 0 0 6px;
    margin-bottom: 12px;
    color: #c0392b;
}

.my-sub-date {
    font-size: 0.8em;
    color: #adb5bd;
}

.my-sub-empty {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 12px;
    color: #6c757d;
}

.my-sub-type-badge.badge-verter {
    background: var(--color-verter-pale, #eceff1);
    color: var(--color-verter-dark, #455a64);
}

.my-sub-subtype {
    display: inline-block;
    font-size: 0.78em;
    color: var(--text-secondary);
    background: #f1f3f5;
    border-radius: 8px;
    padding: 2px 10px;
    margin-bottom: 8px;
}

.my-sub-duplicate-sep {
    display: inline-block;
    margin: 0 6px;
    color: var(--text-secondary);
    font-weight: 700;
}

.my-sub-summary {
    margin: 16px 0 14px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Toolbar — filters + refresh */
.my-sub-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.my-sub-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.my-sub-filter-label {
    font-size: 0.85em;
    color: var(--text-secondary);
    font-weight: 600;
    margin-left: 4px;
}

.my-sub-filter-chip {
    background: white;
    border: 1px solid #e0e6ed;
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 0.85em;
    color: var(--text-dark);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.my-sub-filter-chip:hover {
    background: #f1f3f5;
    border-color: #ced4da;
}

.my-sub-filter-chip.active {
    background: var(--color-mechaber);
    border-color: var(--color-mechaber);
    color: white;
}

.my-sub-filter-chip.active .my-sub-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.my-sub-filter-count {
    display: inline-block;
    background: #f1f3f5;
    color: var(--text-secondary);
    border-radius: 10px;
    padding: 0 7px;
    margin-right: 4px;
    font-size: 0.85em;
    font-weight: 600;
}

.my-sub-refresh-btn {
    background: white;
    border: 1px solid #e0e6ed;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.1em;
    cursor: pointer;
    color: var(--text-secondary);
    margin-right: auto;
    transition: all 0.15s ease;
}

.my-sub-refresh-btn:hover {
    background: var(--color-mechaber-pale);
    color: var(--color-mechaber-dark);
    transform: rotate(90deg);
}

.my-sub-load-more {
    display: block;
    margin: 16px auto 0;
    background: white;
    border: 1px solid #e0e6ed;
    border-radius: 20px;
    padding: 8px 22px;
    font-size: 0.9em;
    color: var(--color-mechaber-dark);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.my-sub-load-more:hover {
    background: var(--color-mechaber-pale);
    border-color: var(--color-mechaber-light);
}

/* "New" vs "Edit" distinguishing borders */
.my-sub-card[data-action="edit"] {
    border-right: 3px solid #f59e0b;
}

.my-sub-card[data-action="new"] {
    border-right: 3px solid #10b981;
}

.my-sub-card[data-action="duplicate"] {
    border-right: 3px solid var(--color-chatzer);
}

/* "מיינע ביישטייערונגען" / "מיינע ניגונים" tab header. Uses the site
   gradient so the contribute page reads as one coherent section. */
.my-contrib-tabs {
    display: flex;
    gap: 4px;
    background: var(--gradient-main);
    border-radius: 16px 16px 0 0;
    padding: 6px 6px 0;
    overflow: hidden;
}

.my-contrib-tab {
    flex: 1;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: rgba(255, 255, 255, 0.85);
    padding: 14px 18px;
    font-size: 1.05em;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border-radius: 12px 12px 0 0;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.my-contrib-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.28);
    color: white;
}

.my-contrib-tab.active {
    background: white;
    color: var(--color-mechaber-dark);
    text-shadow: none;
}

.my-contributions-content {
    background: white;
    border-radius: 0 0 16px 16px;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
    border-top: none;
    min-height: 200px;
}

/* Centered loader wrappers so the wave bar sits visibly in the empty
   space rather than collapsing against the edge of the card. */
.my-contrib-loading,
.editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
}

.my-contrib-loading .loading-wave-bar,
.editor-loading .loading-wave-bar {
    width: 60%;
    max-width: 320px;
}

/* Download button sits in a card footer row so it's visibly part of
   the recording card, not crammed next to the title pill. */
.my-nigun-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e9ecef;
}

.my-nigun-card-footer .my-sub-date {
    margin: 0;
}

/* "My Nigunim" collapsible section — recordings credited to the user
   (kept for back-compat; no longer used by the tab layout). */
.my-nigunim-section {
    margin-top: 24px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e9ecef;
}

.my-nigunim-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--color-verter-pale, #eceff1) 0%, white 100%);
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--color-verter-dark, #455a64);
    text-align: right;
    direction: rtl;
    transition: all 0.2s ease;
}

.my-nigunim-toggle:hover {
    background: linear-gradient(135deg, var(--color-verter-pale, #eceff1) 0%, #f8fafc 100%);
}

.my-nigunim-toggle-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    color: var(--color-verter, #607d8b);
    font-size: 1.2em;
    line-height: 1;
}

.my-nigunim-section.open .my-nigunim-toggle-arrow {
    transform: rotate(180deg);
}

.my-nigunim-section.open .my-nigunim-toggle {
    border-bottom-color: #e9ecef;
}

.my-nigunim-toggle-label {
    flex: 1;
    text-align: right;
}

.my-nigunim-toggle-count {
    background: var(--color-verter, #607d8b);
    color: white;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
}

.my-nigunim-body {
    padding: 14px 14px 4px;
    background: #fafbfc;
}

.my-nigunim-body[hidden] {
    display: none;
}

.my-nigun-card {
    background: white;
}

.my-nigun-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 18px;
    border: 1px solid var(--color-verter-light, #b0bec5);
    background: var(--color-verter-pale, #eceff1);
    color: var(--color-verter-dark, #455a64);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.my-nigun-download-btn:hover {
    background: var(--color-verter, #607d8b);
    border-color: var(--color-verter-dark, #455a64);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.my-nigun-download-btn:disabled,
.my-nigun-download-btn.is-loading {
    opacity: 0.5;
    cursor: wait;
    transform: none;
}

.my-nigun-download-btn.is-locked {
    opacity: 0.35;
    cursor: not-allowed;
}

.my-nigun-download-btn.is-loading svg {
    animation: my-nigun-download-spin 0.9s linear infinite;
}

@keyframes my-nigun-download-spin {
    to { transform: rotate(360deg); }
}

/* Redesigned Missing Section Cards Styles */
.mdc-real-header-wrap {
    flex-shrink: 0;
    border-radius: 21px 21px 0 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.mdc-real-header-wrap .nigun-modal-hero {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 24px 20px 24px 20px !important;
    min-height: auto !important;
}

.mdc-real-header-wrap .modal-hero-wrapper {
    margin: 0 !important;
    border-radius: 0 !important;
}

.mdc-real-header-wrap .modal-hero {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 24px 20px 24px 20px !important;
    min-height: auto !important;
}

.mdc-real-header-wrap .nigun-modal-hero-title,
.mdc-real-header-wrap .modal-hero-title {
    font-size: 1.5em !important;
    padding: 0 !important;
    text-align: center !important;
}

.mdc-real-header-wrap .nigun-modal-hero-mechabrim {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-top: 10px !important;
    justify-content: center !important;
}

.mdc-real-header-wrap .nigun-modal-mechaber-profile {
    margin: 0 !important;
    padding: 5px 10px !important;
    max-height: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.mdc-real-header-wrap .nigun-modal-mechaber-avatar {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
}

.mdc-real-header-wrap .nigun-modal-mechaber-name {
    font-size: 11px !important;
    color: white !important;
}

.mdc-real-header-wrap .nigun-modal-mechaber-name .mechaber-known {
    font-size: 11px !important;
}

.mdc-real-header-wrap .nigun-modal-hero-bottom {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    gap: 8px !important;
}

.mdc-real-header-wrap .nigun-detail-siman-bar {
    margin: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 8px 16px !important;
    font-size: 0.88em !important;
    color: white !important;
}

.mdc-real-header-wrap .nigun-detail-siman-label svg {
    fill: white !important;
}

.mdc-real-header-wrap .modal-hero-left {
    display: none !important; /* Hide avatar in deck card header to save space */
}

/* Loading state */
.mdc-header-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: linear-gradient(135deg, var(--mc) 0%, var(--mc-dark) 100%);
    color: white;
    font-weight: 750;
    font-size: 1.15em;
    min-height: 70px;
}

.mdc-header-loading .loader-tiny {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

/* Editor Section */
.missing-editor-section {
    position: relative !important;
    background: color-mix(in srgb, var(--mc) 4%, #ffffff);
    border: 1.5px solid color-mix(in srgb, var(--mc) 16%, #e6e6e6);
    border-radius: 18px;
    padding: 24px 20px 18px !important;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
}

.missing-section-header {
    position: absolute !important;
    top: -12px !important;
    right: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
}

.missing-badge-attention {
    background: var(--mc);
    color: white;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 850;
    font-size: 0.78em;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--mc) 25%, transparent);
}

.missing-badge-desc {
    font-weight: 800;
    color: var(--mc-dark);
}

/* Details Section */
.mdc-real-details-wrap {
    margin-top: 10px;
}

.mdc-real-details-title {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    margin: 18px 0 !important;
    padding: 0 !important;
    border: none !important;
    border-top: 1.5px solid var(--mc) !important;
    opacity: 0.45 !important;
}

/* Tame any embedded page details inside card */
.mdc-real-details-wrap .detail-page, 
.mdc-real-details-wrap .nigun-detail-page {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: auto !important;
    background: transparent !important;
    background-image: none !important;
}

.mdc-real-details-wrap .nigun-credits-section {
    display: none !important;
}

.mdc-real-details-wrap .nigun-recordings-list {
    margin-top: 0 !important;
}

.mdc-real-details-wrap .song-item-recordings {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.mdc-real-details-wrap .song-item-recording {
    background: #fafafa !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    padding: 10px 14px !important;
}

.mdc-real-details-wrap .song-item-recording:hover {
    background: #f5f5f5 !important;
    border-color: #e5e5e5 !important;
}

.mdc-real-details-wrap .nigun-details-grid {
    margin-top: 14px !important;
}

.mdc-real-details-wrap .nigun-details-row {
    padding: 0 !important;
    margin-bottom: 8px !important;
}

.mdc-real-details-wrap .nigun-detail-box {
    background: #fafafa !important;
    border: 1.5px solid #f0f0f0 !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
}

.mdc-real-details-wrap .nigun-detail-box:hover {
    background: #f5f5f5 !important;
    border-color: #e5e5e5 !important;
}

.mdc-real-details-wrap .nigun-info-box {
    background: #fafafa !important;
    border: 1.5px solid #f0f0f0 !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    margin-top: 14px !important;
}

/* playroom inputs styled to match inline-edit fields */
.missing-deck-card.active .me-input:not(.me-d),
.missing-deck-card.active .addinfo-autocomplete-input.me-input {
    width: 100% !important;
    padding: 8px 0px !important;
    border: none !important;
    border-bottom: 2px dashed var(--mc) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-family: inherit;
    font-size: 0.95em;
    color: var(--text, #222);
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease !important;
}

.missing-deck-card.active .me-input:not(.me-d):focus,
.missing-deck-card.active .addinfo-autocomplete-input.me-input:focus {
    border-bottom: 2.5px solid var(--mc) !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Date inputs in mechaber birth/death */
.missing-deck-card.active .me-dates .me-d {
    width: 58px !important;
    padding: 6px 2px !important;
    text-align: center !important;
    border: none !important;
    border-bottom: 2px dashed var(--mc) !important;
    border-radius: 0 !important;
    background: transparent !important;
    outline: none !important;
    transition: border-color 0.25s ease !important;
}

.missing-deck-card.active .me-dates .me-d:focus {
    border-bottom: 2.5px solid var(--mc) !important;
}

/* Textarea in verter/piyut cards */
.missing-deck-card.active textarea.me-input {
    resize: vertical !important;
    min-height: 120px !important;
    line-height: 1.6 !important;
    border: 2px dashed var(--mc) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    background: transparent !important;
}

.missing-deck-card.active textarea.me-input:focus {
    border: 2.5px solid var(--mc) !important;
    background: transparent !important;
}

/* Autocomplete wrapper overrides inside missing deck playroom active cards */
.missing-deck-card.active .addinfo-autocomplete-wrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
}

.missing-deck-card.active .addinfo-autocomplete-wrapper:focus-within {
    border-color: transparent !important;
    box-shadow: none !important;
}

.missing-deck-card.active .addinfo-selected-tags {
    border-top: none !important;
    padding-top: 6px !important;
    gap: 6px !important;
}

/* Mechaber image file uploader styling */
.missing-deck-card.active .me-file-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: color-mix(in srgb, var(--mc) 8%, #ffffff) !important;
    border: 1.5px solid color-mix(in srgb, var(--mc) 24%, #cccccc) !important;
    border-radius: 10px !important;
    color: var(--mc-dark) !important;
    cursor: pointer !important;
    font-size: 0.9em !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    transition: background 0.2s, border-color 0.2s, transform 0.15s !important;
    width: 100% !important;
}

.missing-deck-card.active .me-file-btn:hover {
    background: color-mix(in srgb, var(--mc) 14%, #ffffff) !important;
    border-color: var(--mc) !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--mc) 12%, transparent) !important;
}

/* Audio drop zone styling */
.missing-deck-card.active .add-rec-drop-zone {
    border: 2px dashed color-mix(in srgb, var(--mc) 32%, #cccccc) !important;
    background: color-mix(in srgb, var(--mc) 3%, #ffffff) !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: background 0.2s, border-color 0.2s !important;
}

.missing-deck-card.active .add-rec-drop-zone:hover {
    background: color-mix(in srgb, var(--mc) 8%, #ffffff) !important;
    border-color: var(--mc) !important;
}

/* ============================================================
   Wizard Redesign & Category Grid Updates
   ============================================================ */

/* Step 1: When no action is selected (top banner + 2 bottom buttons as 3 separate buttons) */
.contribute-page .editor-hero {
    border-bottom-left-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
    margin-bottom: 35px !important;
}

.contribute-hero:not(.wizard-active) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.contribute-hero:not(.wizard-active) .contribute-hero-content {
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    margin-bottom: 8px !important;
    max-width: 900px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* Spring transition */
    position: relative !important;
}

/* Disabled extended hitbox to prevent hover jitter and layout clipping */
.contribute-hero:not(.wizard-active) .contribute-hero-content::after {
    display: none !important;
}

.contribute-hero:not(.wizard-active) .contribute-hero-content .contribute-hero-action-text,
.contribute-hero:not(.wizard-active) .contribute-hero-content .hero-plus-icon {
    position: relative !important;
    z-index: 2 !important;
}

.contribute-hero:not(.wizard-active) .contribute-hero-content:hover {
    transform: scale(1.015) !important; /* Scale up beautifully */
    box-shadow: none !important;
}

.contribute-hero:not(.wizard-active) .contribute-hero-content:active {
    transform: scale(0.992) !important;
}

.addinfo-modal-overlay.inline-mode:not(.wizard-active) .addinfo-modal-content {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-top: none !important;
    outline: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-chooser {
    padding: 0 0 20px 0 !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
    overflow: visible !important;
}

/* In Step 1, make the wizard chooser step wrapper wider so buttons are wider and align with the top one */
.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-step {
    max-width: 900px !important;
    width: 100% !important;
    align-self: stretch !important;
    overflow: visible !important;
}

.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-action-secondary {
    gap: 8px !important; /* Set horizontal gap to exactly 8px to match the vertical spacing */
    overflow: visible !important;
}

/* Ensure the combined step/row container is laid out horizontally as a row */
.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-step.wizard-action-secondary {
    flex-direction: row !important;
    max-width: 900px !important;
    width: 100% !important;
    align-self: stretch !important;
}

/* Style the bottom buttons to look like separate premium buttons */
.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-btn-secondary {
    background: var(--gradient-main-vertical) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    padding: 28px 24px !important;
    font-size: 1.05em !important;
    flex: 1 !important;
    border: none !important;
    color: white !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* Spring transition */
    position: relative !important;
    transform: scale(1) !important; /* Explicit base transform for smooth transition */
    animation: none !important; /* Prevent keyframe animation from locking transform */
    z-index: 1 !important; /* Keep a base stacking order */
    overflow: visible !important; /* Allow hover scale and shadow to render fully outside boundaries */
}

.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-btn-secondary::before {
    display: none !important; /* Prevent blue background flash overlay on hover */
}

/* Disabled extended hitbox to prevent hover jitter and layout clipping */
.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-btn-secondary::after {
    display: none !important;
}

.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-btn-secondary .wizard-btn-label {
    position: relative !important;
    z-index: 2 !important;
}

/* RTL specific corners for bottom buttons: top corners and bottom-inner corners are sharp, bottom-outer corners are rounded */
.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-action-secondary .wizard-btn-secondary:first-child {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 24px !important;
}

.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-action-secondary .wizard-btn-secondary:last-child {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 24px !important;
    border-bottom-right-radius: 4px !important;
}

.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-btn-secondary:hover {
    transform: scale(1.025) !important; /* Scale up beautifully */
    box-shadow: none !important;
    filter: brightness(1.06) !important;
    z-index: 10 !important; /* Bring hovered element on top of siblings to prevent layout clipping */
}

.addinfo-modal-overlay.inline-mode:not(.wizard-active) .wizard-btn-secondary:active {
    transform: scale(0.985) !important;
    z-index: 10 !important;
}

/* Active State: When wizard is active (connected into a single container) */
.contribute-hero.wizard-active .contribute-hero-content {
    border-radius: 24px 24px 0 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* Disable translate hover animation when connected */
.contribute-hero.wizard-active .contribute-hero-clickable-action {
    transform: none !important;
    box-shadow: none !important;
}

.contribute-hero.wizard-active .contribute-hero-clickable-action:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: brightness(1.03) !important;
}

.contribute-hero.wizard-active .contribute-hero-clickable-action:active {
    transform: none !important;
}

/* Category grid step container width */
.wizard-step-categories {
    max-width: 680px !important;
}

/* Category Grid layout using CSS Grid for 3-column layout (3 3 3 3) */
.wizard-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px 14px !important;
    width: 100% !important;
}

.wizard-cat-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 1.5px solid color-mix(in srgb, var(--cat-color) 35%, rgba(0, 0, 0, 0.08)) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ffffff 40%, var(--cat-color-pale) 100%) !important;
    color: var(--cat-color-dark) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02),
                0 1px 2px rgba(0, 0, 0, 0.03) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* Spring transition */
    position: relative !important;
}

/* Extended invisible hitbox to prevent hover jitter when scaling */
.wizard-cat-btn::after {
    content: '' !important;
    position: absolute !important;
    inset: -12px !important;
    z-index: 0 !important;
    pointer-events: auto !important;
}

.wizard-cat-btn::before {
    display: none !important; /* Hide old background light hover effect */
}

.wizard-cat-btn .wizard-cat-label {
    color: var(--cat-color-dark) !important;
    font-weight: 700 !important;
    font-size: 1.02em !important;
    text-shadow: none !important;
    position: relative !important;
    z-index: 2 !important;
}

.wizard-cat-btn:hover {
    transform: scale(1.03) !important; /* Scale up beautifully */
    background: var(--cat-color-pale) !important;
    border-color: var(--cat-color) !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--cat-color) 15%, rgba(0, 0, 0, 0.06)) !important;
}

/* Responsive columns for category grid */
@media (max-width: 500px) {
    .wizard-cat-grid {
        gap: 12px 8px !important;
    }
    .wizard-cat-btn {
        padding: 15px 8px !important;
        border-radius: 14px !important;
    }
    .wizard-cat-btn .wizard-cat-label {
        font-size: 0.95em !important;
    }
}

/* Playroom Header Grid Layout for Centered Category Title */
.missing-playroom-header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 16px;
    width: 100% !important;
}

.missing-playroom-header .mdc-back-btn {
    justify-self: start !important; /* right side in RTL */
    width: 160px !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.missing-playroom-header .mdc-playroom-title {
    justify-self: center !important; /* centered */
    margin: 0 !important;
    text-align: center !important;
}

.missing-playroom-header .missing-search {
    justify-self: end !important; /* left side in RTL */
    width: 160px !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    .missing-playroom-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .missing-playroom-header .mdc-back-btn {
        justify-self: auto !important;
        width: 100% !important;
    }
    .missing-playroom-header .mdc-playroom-title {
        justify-self: auto !important;
        text-align: center !important;
    }
    .missing-playroom-header .missing-search {
        justify-self: auto !important;
        max-width: none !important;
        width: 100% !important;
    }
}

/* Hide Play All button in missing playroom card headers */
.mdc-real-header-wrap .play-all-btn,
.mdc-real-header-wrap .play-btn {
    display: none !important;
}

/* Playroom Dates Select Dropdowns Adjustments */
.missing-deck-card.active .me-dates select.me-d {
    text-align: center !important;
    text-align-last: center !important; /* Center text inside select dropdowns */
    cursor: pointer !important;
    border: none !important;
    border-bottom: 2px dashed var(--mc) !important;
    border-radius: 0 !important;
    background: transparent !important;
    outline: none !important;
}

.missing-deck-card.active .me-dates select.me-d[data-f$="Day"] {
    width: 65px !important;
}
.missing-deck-card.active .me-dates select.me-d[data-f$="Month"] {
    width: 95px !important;
}
.missing-deck-card.active .me-dates select.me-d[data-f$="Year"] {
    width: 95px !important;
}

/* Hide loading wave bars inside playroom cards */
.missing-deck-card .loading-wave-bar {
    display: none !important;
}
/* ===== Donate Modal ===== */
.donate-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.donate-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.donate-modal-content {
    background: white;
    border-radius: 22px;
    width: 95%;
    max-width: 480px;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.donate-modal-overlay.active .donate-modal-content {
    transform: scale(1) translateY(0);
}

.donate-modal-close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 1.3em;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.donate-modal-close:hover {
    background: rgba(255, 255, 255, 0.4);
}

.donate-modal-header {
    background: var(--gradient-main);
    padding: 22px 24px 18px;
    border-radius: 22px 22px 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.donate-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
}

.donate-hero-title {
    color: white;
    font-size: 1.7em;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.donate-hero-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95em;
    position: relative;
    z-index: 1;
}

.donate-modal-body {
    padding: 16px 22px 20px;
}

.donate-section-label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

/* Preset amount grids */
.donate-presets {
    display: grid;
    gap: 8px;
}

.donate-presets-top {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 8px;
}

.donate-presets-bottom {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 12px;
}

.donate-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 10px 4px;
    border: 2px solid #e0d4e8;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.donate-preset-btn:hover {
    border-color: var(--primary-light);
    background: var(--primary-pale);
}

.donate-preset-btn.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary-pale), #f0e0f7);
    box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.12);
}

.donate-preset-zchus {
    border-color: #d4c8e0;
    background: #faf7fc;
}

.donate-preset-amount {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--primary-deep);
    line-height: 1.2;
}

.donate-preset-label {
    font-size: 0.7em;
    color: var(--text-muted);
}

/* Custom amount */
.donate-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.donate-custom-input {
    flex: 1;
    padding: 9px 12px;
    border: 2px solid #e0d4e8;
    border-radius: 10px;
    font-size: 0.95em;
    font-family: inherit;
    text-align: right;
    outline: none;
    transition: border-color 0.25s ease;
}

.donate-custom-input:focus {
    border-color: var(--primary);
}

.donate-currency {
    font-size: 1em;
    color: var(--text-muted);
    font-weight: 600;
}

/* Zchus dedication fields */
.donate-zchus-fields {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #faf7fc;
    border-radius: 10px;
    border: 1px solid #e0d4e8;
}

.donate-zchus-fields .donate-name-input {
    margin-bottom: 8px;
    background: white;
}

.donate-zchus-fields .donate-name-input:last-child {
    margin-bottom: 0;
}

/* Donor name */
.donate-name-input {
    width: 100%;
    padding: 9px 12px;
    border: 2px solid #e0d4e8;
    border-radius: 10px;
    font-size: 0.9em;
    font-family: inherit;
    outline: none;
    transition: border-color 0.25s ease;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.donate-name-input:focus {
    border-color: var(--primary);
}

/* Stripe Elements container */
.donate-stripe-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.donate-stripe-field {
    padding: 9px 10px;
    border: 2px solid #e0d4e8;
    border-radius: 10px;
    background: white;
    transition: border-color 0.25s ease;
}

.donate-stripe-field.full-width {
    grid-column: 1 / -1;
}

.donate-stripe-field.StripeElement--focus {
    border-color: var(--primary);
}

.donate-stripe-field.StripeElement--invalid {
    border-color: #e74c3c;
}

/* Submit button */
.donate-submit-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: var(--gradient-main);
    color: white;
    font-size: 1.1em;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.donate-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(123, 31, 162, 0.3);
}

.donate-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.donate-submit-btn .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: donate-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-inline-end: 8px;
}

@keyframes donate-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Error / status messages */
.donate-error {
    color: #e74c3c;
    background: #fdf0ef;
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 0.85em;
    display: none;
}

.donate-error.visible {
    display: block;
}

/* Powered by Stripe */
.donate-powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    color: #8898aa;
    font-size: 0.75em;
    letter-spacing: 0.02em;
}

.donate-stripe-logo {
    width: 42px;
    height: 18px;
}

/* Success state */
.donate-success {
    text-align: center;
    padding: 30px 16px;
}

.donate-success-icon {
    font-size: 3em;
    margin-bottom: 14px;
}

.donate-success-title {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--primary-deep);
    margin-bottom: 10px;
}

.donate-success-text {
    color: var(--text-muted);
    font-size: 1em;
    line-height: 1.7;
    margin-bottom: 20px;
}

.donate-success-btn {
    display: inline-block;
    padding: 10px 28px;
    border: none;
    border-radius: 25px;
    background: var(--gradient-main);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-family: inherit;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.donate-success-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(123, 31, 162, 0.3);
}

@media (max-width: 768px) {
    .donate-modal-content {
        width: 96%;
        max-height: 96vh;
        border-radius: 16px;
    }

    .donate-modal-header {
        padding: 18px 16px 14px;
        border-radius: 16px 16px 0 0;
    }

    .donate-hero-title {
        font-size: 1.4em;
    }

    .donate-hero-subtitle {
        font-size: 0.85em;
    }

    .donate-modal-body {
        padding: 14px 14px 16px;
    }

    .donate-section-label {
        font-size: 0.85em;
        margin-bottom: 6px;
    }

    .donate-presets-top,
    .donate-presets-bottom {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .donate-presets-top {
        margin-bottom: 6px;
    }

    .donate-presets-bottom {
        margin-bottom: 10px;
    }

    .donate-preset-btn {
        padding: 8px 3px;
    }

    .donate-preset-amount {
        font-size: 1.05em;
    }

    .donate-custom-input,
    .donate-name-input {
        padding: 8px 10px;
        font-size: 0.88em;
    }

    .donate-name-input {
        margin-bottom: 8px;
    }

    .donate-zchus-fields {
        padding: 8px 10px;
        margin-bottom: 8px;
    }

    .donate-zchus-fields .donate-name-input {
        margin-bottom: 6px;
    }

    .donate-stripe-fields {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 10px;
    }

    .donate-stripe-field {
        padding: 8px 10px;
    }

    .donate-submit-btn {
        padding: 10px;
        font-size: 1em;
    }
}


/* Hebrew Calendar & Luach Section */
.home-luach-box {
    background: white;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 22px 25px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.home-luach-header-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    margin: -22px -25px 0 -25px;
    padding: 25px 25px 50px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
}

.home-luach-header-link:hover {
    background-color: rgba(160, 44, 137, 0.03);
    box-shadow: inset 0 20px 40px -20px rgba(160, 44, 137, 0.08);
}

.home-luach-watermark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    width: 95px;
    height: 95px;
    opacity: 0.05;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 0;
    pointer-events: none;
    transform-origin: center;
}

.home-luach-watermark svg {
    width: 100%;
    height: 100%;
}

.home-luach-header-link:hover .home-luach-watermark {
    opacity: 0.15;
    transform: translateY(-50%) scale(1.15) rotate(-3deg);
}

.home-luach-header-link:hover .home-luach-date-text {
    opacity: 0.95;
    transform: translateY(-2px) scale(1.02);
}

.home-luach-header-link:hover .home-luach-date-title {
    opacity: 0.95;
    transform: translateY(-1px) scale(1.02);
}

.home-luach-date-text {
    font-size: 1.55em;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--primary-deep));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-family: 'Heebo', 'David Libre', sans-serif;
    line-height: 1.4;
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(0) scale(1);
}

.home-luach-date-title {
    font-size: 0.85em;
    font-weight: 700;
    background: linear-gradient(135deg, #a02c89, var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-top: 6px;
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(0) scale(1);
}

.home-luach-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 32px 0 20px;
}

#homeLuachContent > .home-luach-divider:first-child {
    margin-top: 0;
}

.home-luach-divider-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-light));
    opacity: 0.25;
}

.home-luach-divider-line:first-child {
    background: linear-gradient(90deg, var(--primary-light), transparent);
}

.home-luach-divider-text {
    color: var(--primary);
    font-size: 0.92em;
    font-weight: 600;
    white-space: nowrap;
}

/* Theme overrides for dividers */
.home-luach-divider.theme-mechaber .home-luach-divider-line {
    background: linear-gradient(90deg, transparent, rgba(196, 53, 168, 0.5));
}
.home-luach-divider.theme-mechaber .home-luach-divider-line:first-child {
    background: linear-gradient(90deg, rgba(196, 53, 168, 0.5), transparent);
}
.home-luach-divider.theme-mechaber .home-luach-divider-text {
    color: var(--color-mechaber);
}

.home-luach-divider.theme-zman .home-luach-divider-line {
    background: linear-gradient(90deg, transparent, rgba(233, 106, 27, 0.5));
}
.home-luach-divider.theme-zman .home-luach-divider-line:first-child {
    background: linear-gradient(90deg, rgba(233, 106, 27, 0.5), transparent);
}
.home-luach-divider.theme-zman .home-luach-divider-text {
    color: var(--color-zman);
}

.home-luach-divider-link {
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.home-luach-divider-link:hover {
    opacity: 0.75;
    text-decoration: underline;
}

/* Luach section entrance animations */
@keyframes luachSectionIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes luachTagIn {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes luachImageIn {
    from {
        width: 0;
        height: 0;
        opacity: 0;
        margin-inline-end: -14px;
        border-width: 0;
        box-shadow: none;
        transform: scale(0) rotate(-15deg);
    }
    to {
        width: 44px;
        height: 44px;
        opacity: 1;
        margin-inline-end: 0;
        border-width: 2px;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes luachImageInToday {
    from {
        width: 0;
        height: 0;
        opacity: 0;
        margin-inline-end: -14px;
        border-width: 0;
        box-shadow: none;
        transform: scale(0) rotate(-15deg);
    }
    to {
        width: 52px;
        height: 52px;
        opacity: 1;
        margin-inline-end: 0;
        border-width: 2px;
        transform: scale(1) rotate(0deg);
    }
}

.luach-section-animate {
    animation: luachSectionIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.luach-tag-animate {
    animation: luachTagIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.home-yahrzeit-tag-image.luach-image-animate {
    animation: luachImageIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.home-yahrzeit-tag.today-tag .home-yahrzeit-tag-image.luach-image-animate {
    animation: luachImageInToday 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.home-luach-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.home-yahrzeit-tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 10px 18px;
    border-radius: 16px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-mechaber);
    background: linear-gradient(135deg, rgba(196, 53, 168, 0.04), rgba(196, 53, 168, 0.12));
    border: 2px solid rgba(196, 53, 168, 0.35);
    line-height: 1.3;
    min-height: 60px;
    width: 260px;
    max-width: 100%;
    transition: min-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                padding 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease,
                border-color 0.25s ease,
                transform 0.25s ease,
                box-shadow 0.25s ease;
}

.home-yahrzeit-tag.has-image {
    min-height: 68px;
}

.home-yahrzeit-tag:hover {
    background: linear-gradient(135deg, rgba(196, 53, 168, 0.08), rgba(196, 53, 168, 0.18));
    border-color: rgba(196, 53, 168, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(196, 53, 168, 0.12);
}

.home-yahrzeit-tag-image {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(196, 53, 168, 0.25);
    border: 2px solid white;
    background-color: #fce8f8;
}

.home-yahrzeit-tag-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    overflow: hidden;
    text-align: center;
}

.home-yahrzeit-tag-name {
    font-weight: 700;
    font-size: 1.15em;
    color: #a02c89;
    white-space: normal;
    overflow-wrap: break-word;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-yahrzeit-tag-date {
    opacity: 0.75;
    font-size: 0.85em;
    font-weight: 500;
    color: #b54a9f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Modifiers for Today's Yahrzeit */
.home-yahrzeit-tag.today-tag {
    width: 320px;
    padding: 16px 20px;
    font-size: 1.05em;
    min-height: 72px;
}

.home-yahrzeit-tag.today-tag.has-image {
    min-height: 88px;
}

.home-yahrzeit-tag.today-tag .home-yahrzeit-tag-image {
    width: 52px;
    height: 52px;
}

.home-yahrzeit-tag.today-tag .home-yahrzeit-tag-name {
    font-size: 1.25em;
}

.home-yomtov-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 16px 10px;
    border-radius: 16px;
    font-size: 1.25em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: white;
    background: var(--color-zman);
    border: 2px solid var(--color-zman);
    text-align: center;
    line-height: 1.3;
    min-height: 54px;
    overflow: hidden;
    width: 260px;
    max-width: 100%;
}

.home-yomtov-tag-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.home-yomtov-tag:hover {
    background: var(--color-zman-dark, #cc5910);
    border-color: var(--color-zman-dark, #cc5910);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(233, 106, 27, 0.3);
}

.home-luach-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    overflow: hidden;
}

.home-luach-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(-90deg,
            transparent 0%,
            var(--primary-pale, rgba(124, 58, 237, 0.2)) 25%,
            var(--primary, #7c3aed) 50%,
            var(--primary-pale, rgba(124, 58, 237, 0.2)) 75%,
            transparent 100%);
    animation: loadingWave 1.5s infinite ease-in-out;
}

@media (max-width: 600px) {
    .home-luach-box {
        padding: 16px 18px;
    }

    .home-luach-date {
        font-size: 1em;
    }
}

/* Contact Form Modal */
.contact-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.contact-modal {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

/* Custom slide/push transitions for Contribute -> Contact transition */
@keyframes dialogExitSlide {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(120px) scale(0.92);
    }
}

@keyframes dialogEnterSlide {
    0% {
        opacity: 0;
        transform: translateX(-120px) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.contribute-intro-dialog.dialog-leave {
    animation: dialogExitSlide 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.contact-modal.dialog-enter {
    animation: dialogEnterSlide 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.contact-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 10px;
}

.contact-modal-header h3 {
    margin: 0;
    font-size: 1.35em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    font-size: 1.5em;
    cursor: pointer;
    color: #666;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-modal-close:hover {
    background: #e0e0e0;
    color: #333;
}

.contact-modal-body {
    padding: 0 24px 24px;
}

.contact-modal-subtitle {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-bottom: 14px;
    line-height: 1.5;
}

.contact-form-group {
    margin-bottom: 12px;
}

.contact-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.9em;
    color: var(--text-dark);
}

.contact-form-input,
.contact-form-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.95em;
    font-family: inherit;
    direction: rtl;
    transition: var(--transition-smooth);
    box-sizing: border-box;
}

.contact-form-input:focus,
.contact-form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-pale);
}

.contact-form-textarea {
    resize: vertical;
    min-height: 90px;
}

.contact-form-submit {
    width: 100%;
    padding: 12px;
    background: var(--gradient-main);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
    margin-top: 4px;
}

.contact-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(123, 31, 162, 0.3);
}

.contact-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.contact-form-success {
    text-align: center;
    padding: 40px 20px;
}

.contact-form-success-icon {
    font-size: 3em;
    margin-bottom: 16px;
}

.contact-form-success h4 {
    font-size: 1.3em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px;
}

.contact-form-success p {
    color: var(--text-muted);
}

/* Home action buttons for contact & donate */
.home-action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.home-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
    font-family: inherit;
}

.home-action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.home-action-btn-contact {
    background: var(--gradient-main);
    color: white;
}

.home-action-btn-donate {
    background: linear-gradient(135deg, var(--color-mechaber) 0%, var(--color-chatzer) 50%, var(--color-nigun) 100%);
    color: white;
}

/* "Invite a friend" — deliberately smaller/quieter than the action buttons */
.home-share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
}

.home-share-label {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--color-text-muted, #999);
}

.home-share-form {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.home-share-input {
    padding: 8px 14px;
    border-radius: 20px;
    border: 1.5px solid rgba(156, 91, 181, 0.2);
    font-size: 0.85em;
    font-family: inherit;
    background: #fff;
    direction: ltr;
    text-align: right;
    min-width: 210px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-share-input:focus {
    outline: none;
    border-color: var(--color-primary-light, #ae52d4);
    box-shadow: 0 0 0 3px rgba(174, 82, 212, 0.12);
}

.home-share-btn {
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    background: var(--gradient-main);
    color: #fff;
    font-size: 0.85em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.home-share-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(156, 91, 181, 0.3);
}

.home-share-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.home-share-msg {
    font-size: 0.8em;
    min-height: 1em;
    text-align: center;
}

.home-share-msg.success { color: #2e7d32; }
.home-share-msg.error { color: #c62828; }

@media (max-width: 600px) {

    .contact-modal {
        width: 95%;
    }

    .contact-modal-header {
        padding: 20px 20px 12px;
    }

    .contact-modal-body {
        padding: 0 20px 20px;
    }

    .home-action-buttons {
        flex-direction: column;
        align-items: center;
    }

    .home-action-btn {
        width: 80%;
        justify-content: center;
    }
}
/* ============================================================
   Contribute / Takedown intro popup.
   Fires on first /contribute visit and on every contact-modal open.
   Red-warm card with a touch of the main gradient on the header,
   itemized lists for the two flows.
   ============================================================ */
.contribute-intro-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 8, 20, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 20px;
}
.contribute-intro-overlay.active {
    opacity: 1;
    visibility: visible;
}
.contribute-intro-dialog {
    background: #fff;
    border-radius: 20px;
    max-width: 560px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 0;
    position: relative;
    box-shadow: 0 24px 60px rgba(180, 30, 50, 0.25), 0 8px 24px rgba(0,0,0,0.12);
    border: 1px solid rgba(220, 50, 50, 0.18);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    direction: rtl;
    text-align: right;
}
.contribute-intro-overlay.active .contribute-intro-dialog {
    transform: none;
}

/* Header band: red warm wash with a sliver of the main gradient. */
.contribute-intro-header {
    position: relative;
    padding: 26px 28px 20px;
    background:
        linear-gradient(135deg, rgba(255, 235, 235, 0.95) 0%, rgba(255, 220, 220, 0.92) 100%),
        var(--gradient-main, linear-gradient(135deg, #1565c0, #7b1fa2, #c62828));
    background-blend-mode: normal, overlay;
    border-bottom: 2px solid rgba(220, 50, 50, 0.22);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.contribute-intro-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-main, linear-gradient(135deg, #1565c0, #7b1fa2, #c62828));
    opacity: 0.08;
    pointer-events: none;
}
.contribute-intro-header > * { position: relative; z-index: 1; }

.contribute-intro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #c62828;
    color: #fff;
    box-shadow: 0 4px 14px rgba(198, 40, 40, 0.35);
    flex-shrink: 0;
}
.contribute-intro-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    color: #8b1a1a;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.contribute-intro-close {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0,0,0,0.08);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #8b1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    z-index: 2;
}
.contribute-intro-close:hover {
    background: #fff;
    transform: scale(1.06);
}

.contribute-intro-section {
    padding: 20px 28px 4px;
}
.contribute-intro-section + .contribute-intro-section {
    padding-top: 4px;
}
.contribute-intro-section-takedown {
    border-top: 1px dashed rgba(220, 50, 50, 0.22);
    margin-top: 12px;
    padding-top: 20px;
}
.contribute-intro-section-title {
    margin: 0 0 12px 0;
    font-size: 17px;
    font-weight: 800;
    color: #c62828;
    background: linear-gradient(90deg, #c62828, #7b1fa2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.contribute-intro-lead {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary, #555);
    margin: 0 0 12px 0;
}
.contribute-intro-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contribute-intro-list li {
    position: relative;
    padding: 12px 38px 12px 14px;
    background: linear-gradient(135deg, rgba(255, 240, 240, 0.6), rgba(255, 248, 248, 0.6));
    border: 1px solid rgba(220, 50, 50, 0.14);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary, #2c2c2c);
}
.contribute-intro-list li::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c62828, #7b1fa2);
    transform: translateY(-50%);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}
.contribute-intro-list-takedown li {
    background: linear-gradient(135deg, rgba(255, 248, 235, 0.6), rgba(255, 245, 230, 0.6));
    border-color: rgba(198, 40, 40, 0.18);
}
.contribute-intro-list a {
    color: #c62828;
    font-weight: 700;
    text-decoration: underline;
    word-break: break-all;
}
.contribute-intro-list a:hover {
    color: #7b1fa2;
}
.contribute-intro-list strong {
    color: #8b1a1a;
    font-weight: 700;
}

.contribute-intro-actions {
    padding: 18px 28px 14px;
    display: flex;
    justify-content: stretch;
    gap: 10px;
}
.contribute-intro-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 28px 20px;
    font-size: 11px;
}
.contribute-intro-links a {
    color: var(--color-chatzer-dark, #7b3f96);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.contribute-intro-links a:hover {
    color: var(--color-mechaber-dark, #9c1b82);
    text-decoration: underline !important;
}
.contribute-intro-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.contribute-intro-btn-primary {
    background: linear-gradient(135deg, #c62828 0%, #7b1fa2 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(198, 40, 40, 0.28);
}
.contribute-intro-btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(198, 40, 40, 0.35);
}
.contribute-intro-btn-primary:active {
    transform: translateY(0);
}

@media (max-width: 540px) {
    .contribute-intro-header { padding: 22px 20px 16px; }
    .contribute-intro-section { padding-left: 20px; padding-right: 20px; }
    .contribute-intro-actions { padding-left: 20px; padding-right: 20px; }
    .contribute-intro-title { font-size: 19px; }
}

/* Yahrzeit Calendar Page — RTL Hebrew Luach */

/* Month selector — horizontal scrollable, active tab centered & larger */
.yahrzeit-month-selector {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    direction: rtl;
}

.yahrzeit-month-selector::-webkit-scrollbar {
    display: none;
}

.yahrzeit-month-tab {
    padding: 7px 14px;
    border-radius: 20px;
    border: 2px solid var(--color-mechaber-light, #e8c5e2);
    background: white;
    color: var(--color-mechaber, #c435a8);
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    font-family: inherit;
    flex-shrink: 0;
}

.yahrzeit-month-tab:hover {
    background: var(--color-mechaber-pale, #faf0f8);
    border-color: var(--color-mechaber, #c435a8);
    opacity: 1;
}

/* Current month (today) — slightly bigger with glow, but light fill */
.yahrzeit-month-tab.current {
    border-color: var(--color-mechaber, #c435a8);
    background: var(--color-mechaber-pale, #faf0f8);
    color: var(--color-mechaber, #c435a8);
    font-weight: 700;
    padding: 8px 18px;
    font-size: 0.92em;
    box-shadow: 0 0 12px rgba(196, 53, 168, 0.3);
}

/* Active/selected month (the one being viewed) — dark solid fill */
.yahrzeit-month-tab.active {
    background: var(--color-mechaber, #c435a8);
    color: white;
    border-color: var(--color-mechaber, #c435a8);
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(196, 53, 168, 0.35);
}

/* When current AND active are the same tab — dark fill + bigger + glow */
.yahrzeit-month-tab.current.active {
    background: var(--color-mechaber, #c435a8);
    color: white;
    border-color: var(--color-mechaber, #c435a8);
    padding: 8px 18px;
    font-size: 0.92em;
    box-shadow: 0 0 16px rgba(196, 53, 168, 0.45), 0 4px 16px rgba(196, 53, 168, 0.35);
}

/* Month title */
.cal-month-title {
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    color: var(--color-mechaber, #c435a8);
    padding: 8px 0 12px;
    direction: rtl;
}

/* Calendar container */
.cal-container {
    padding: 0 16px 24px;
    max-width: 1100px;
    margin: 0 auto;
    direction: rtl;
}

/* 7-column grid */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: rgba(196, 53, 168, 0.1);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(196, 53, 168, 0.15);
}

/* Day-of-week header cells */
.cal-header-cell {
    background: linear-gradient(135deg, var(--color-mechaber, #c435a8), var(--color-mechaber-dark, #9c2785));
    color: white;
    font-weight: 700;
    font-size: 0.88em;
    text-align: center;
    padding: 10px 4px;
}

/* Day cells */
.cal-cell {
    background: white;
    min-height: 120px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background 0.15s ease;
    overflow: hidden;
}

.cal-cell-empty {
    background: repeating-linear-gradient(
        135deg,
        #f5f3f5,
        #f5f3f5 6px,
        #f0edf0 6px,
        #f0edf0 12px
    );
    min-height: 120px;
    opacity: 0.6;
}

.cal-cell:hover:not(.cal-cell-empty) {
    background: var(--color-mechaber-pale, #faf0f8);
}

/* Today highlight */
.cal-cell.cal-today {
    background: #fef3fc;
    box-shadow: inset 0 0 0 2px var(--color-mechaber, #c435a8);
}

/* Shabbos column subtle highlight */
.cal-cell.cal-shabbos {
    background: #fdfcff;
}

.cal-cell.cal-shabbos.cal-today {
    background: #fef3fc;
}

/* Day number as full-width top bar */
.cal-day-num {
    font-size: 0.85em;
    font-weight: 700;
    color: white;
    background: var(--color-mechaber, #c435a8);
    text-align: center;
    padding: 4px 0;
    margin: -6px -6px 6px -6px;
    width: auto;
}

.cal-today .cal-day-num {
    background: var(--color-mechaber-dark, #9c2785);
    color: white;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(196, 53, 168, 0.4);
}

/* Content area inside cell */
.cal-day-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    justify-content: center;
}

/* Override the home-luach tag styles for compact calendar cells */
.cal-day-content .home-yahrzeit-tag,
.cal-day-content .home-yomtov-tag {
    font-size: 0.72em;
    padding: 2px 6px;
    border-radius: 6px;
    gap: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: center;
    box-shadow: none;
    min-height: auto;
    width: auto;
    box-sizing: border-box;
}

.cal-day-content .home-yahrzeit-tag:hover,
.cal-day-content .home-yomtov-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(196, 53, 168, 0.15);
}

/* Empty state */
.yahrzeit-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted, #999);
    font-size: 1.1em;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cal-container {
        padding: 0 8px 20px;
    }

    .cal-cell {
        min-height: 85px;
        padding: 3px;
    }

    .cal-cell-empty {
        min-height: 85px;
    }

    .cal-day-num {
        font-size: 0.8em;
    }

    .cal-day-content .home-yahrzeit-tag,
    .cal-day-content .home-yomtov-tag {
        font-size: 0.6em;
        padding: 1px 4px;
    }

    .cal-header-cell {
        font-size: 0.75em;
        padding: 6px 2px;
    }

    .cal-month-title {
        font-size: 1.1em;
    }

    .yahrzeit-month-selector {
        padding: 10px 12px;
        gap: 4px;
    }

    .yahrzeit-month-tab {
        padding: 5px 10px;
        font-size: 0.75em;
    }
}

@media (max-width: 480px) {
    .cal-cell {
        min-height: 65px;
        padding: 2px;
    }

    .cal-cell-empty {
        min-height: 65px;
    }

    .cal-day-num {
        font-size: 0.7em;
    }

    .cal-day-content .home-yahrzeit-tag,
    .cal-day-content .home-yomtov-tag {
        font-size: 0.55em;
        padding: 1px 3px;
        border-radius: 4px;
    }

    .cal-header-cell {
        font-size: 0.65em;
        padding: 5px 1px;
    }
}

/* ============================================================
   Auth, Private Playlists, Editor Panel, Admin Panel Styles
   ============================================================ */

/* ============================================================
   DOMINO AUTH MODAL
   ============================================================ */

.domino-auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.domino-auth-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.domino-auth-dialog {
    background: #ffffff;
    border-radius: 24px;
    padding: 2.2rem 2.5rem;
    width: 90%;
    max-width: 440px;
    box-shadow: 0 20px 50px rgba(74, 18, 89, 0.18), 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(156, 91, 181, 0.15);
    text-align: center;
    direction: rtl;
    position: relative;
    transform: scale(0.92) translateY(15px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.domino-auth-overlay.active .domino-auth-dialog {
    transform: scale(1) translateY(0);
}

.domino-auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.8rem;
    border-bottom: 2px solid rgba(156, 91, 181, 0.08);
}

.domino-auth-tab {
    flex: 1;
    padding: 0.8rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--color-text-muted, #666666);
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.domino-auth-tab:hover {
    color: var(--color-primary, #7b1fa2);
}

.domino-auth-tab.active {
    color: var(--color-primary-deep, #4a1259);
    border-bottom-color: var(--color-primary, #7b1fa2);
}

.domino-auth-close {
    position: absolute;
    top: 18px;
    left: 18px;
    background: rgba(156, 91, 181, 0.06);
    border: none;
    font-size: 1rem;
    color: var(--color-text-muted, #666);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s, transform 0.25s, color 0.25s;
}

.domino-auth-close:hover {
    background-color: rgba(156, 91, 181, 0.12);
    color: var(--color-primary-deep, #4a1259);
    transform: rotate(90deg) scale(1.05);
}

.domino-auth-section {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.domino-auth-section input {
    padding: 0.85rem 1.1rem;
    border: 2px solid rgba(156, 91, 181, 0.12);
    border-radius: 14px;
    font-size: 1rem;
    direction: ltr;
    text-align: right;
    font-family: inherit;
    background: #fafafc;
    color: var(--color-text-dark, #2c2c2c);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease, background-color 0.2s;
}

.domino-auth-section input:focus {
    background: #ffffff;
    border-color: var(--color-primary-light, #ae52d4);
    box-shadow: 0 0 0 4px rgba(174, 82, 212, 0.15), 0 4px 10px rgba(156, 91, 181, 0.08);
    outline: none;
    transform: translateY(-1px);
}

/* Password field with an in-box show/hide eye on the left */
.domino-auth-input-wrap {
    position: relative;
    width: 100%;
}

.domino-auth-input-wrap input {
    width: 100%;
    box-sizing: border-box;
    padding-left: 2.9rem;
}

.domino-auth-pw-toggle {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--color-text-muted, #999);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.domino-auth-pw-toggle:hover {
    color: var(--color-primary, #9c5bb5);
    background: rgba(156, 91, 181, 0.06);
}

.domino-auth-pw-toggle:focus {
    outline: none;
}

.domino-auth-pw-toggle svg {
    width: 19px;
    height: 19px;
}

.domino-auth-pw-toggle .pw-eye-off {
    display: none;
}

.domino-auth-pw-toggle.revealed .pw-eye {
    display: none;
}

.domino-auth-pw-toggle.revealed .pw-eye-off {
    display: block;
}

.domino-auth-btn {
    padding: 0.85rem 1.5rem;
    border: none;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* On the white auth buttons the default white wave is invisible, so tint it */
.domino-auth-google-btn > .loading-wave-bar::before,
.domino-auth-otp-btn > .loading-wave-bar::before,
.domino-auth-resend-btn > .loading-wave-bar::before {
    background: linear-gradient(-90deg, transparent 0%, rgba(156, 91, 181, 0.35) 25%, var(--color-primary, #9c5bb5) 50%, rgba(156, 91, 181, 0.35) 75%, transparent 100%);
}

.domino-auth-btn:active {
    transform: scale(0.97);
}

.domino-auth-primary-btn {
    background: var(--gradient-main);
    color: white;
    box-shadow: 0 4px 15px rgba(156, 91, 181, 0.35);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.domino-auth-primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(156, 91, 181, 0.5);
    background: var(--gradient-main-dark);
}

.domino-auth-primary-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* "Get a code on email" button — disabled until a valid email is typed */
.domino-auth-otp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    border-color: rgba(156, 91, 181, 0.15);
    background: white;
}

/* OTP code-entry section (reuses .domino-auth-section for input/layout) */
.domino-auth-otp-section {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

#dominoAuthOtpCode {
    text-align: center;
    letter-spacing: 0.5em;
    font-size: 1.3rem;
    font-weight: 700;
}

#dominoAuthOtpCode::placeholder {
    letter-spacing: normal;
    font-size: 1rem;
    font-weight: 500;
}

.domino-auth-resend-btn {
    background: none;
    border: none;
    color: var(--color-primary, #9c5bb5);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px;
    text-decoration: underline;
    position: relative;
    overflow: hidden;
}

.domino-auth-resend-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Small "forgot password?" link tucked under the password field */
.domino-auth-reset-link {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--color-primary, #9c5bb5);
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
    padding: 2px 4px;
    margin-top: -0.5rem;
    text-decoration: underline;
    position: relative;
    overflow: hidden;
}

.domino-auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.4rem 0;
    color: var(--color-text-secondary, #888);
    font-size: 0.88rem;
    font-weight: 600;
}

.domino-auth-divider::before,
.domino-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(156, 91, 181, 0.12);
}

.domino-auth-google-btn,
.domino-auth-otp-btn {
    background: white;
    color: var(--color-text-dark, #2c2c2c);
    border: 2px solid rgba(156, 91, 181, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.domino-auth-google-btn:hover,
.domino-auth-otp-btn:not(:disabled):hover {
    border-color: var(--color-primary-light, #ae52d4);
    background: rgba(156, 91, 181, 0.02);
    box-shadow: 0 4px 12px rgba(156, 91, 181, 0.08);
    transform: translateY(-1px);
}

.domino-auth-google-btn svg,
.domino-auth-otp-btn svg {
    width: 20px;
    height: 20px;
}

/* Themed focus state — replace the browser's default (mismatched) outline
   with the site's purple ring on the code/verify/submit buttons */
.domino-auth-google-btn:focus,
.domino-auth-otp-btn:focus {
    outline: none;
    border-color: var(--color-primary-light, #ae52d4);
    box-shadow: 0 0 0 4px rgba(174, 82, 212, 0.18);
}

.domino-auth-primary-btn:focus {
    outline: none;
    box-shadow: 0 4px 15px rgba(156, 91, 181, 0.35), 0 0 0 4px rgba(174, 82, 212, 0.28);
}

.domino-auth-terms-row {
    margin-top: 1.1rem;
    padding: 0.2rem 0.4rem 0;
}

.domino-auth-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--color-text-muted, #666);
    cursor: pointer;
    user-select: none;
}

.domino-auth-terms-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary, #7b1fa2);
    cursor: pointer;
}

.domino-auth-terms-label a {
    color: var(--color-primary, #7b1fa2);
    text-decoration: none;
    font-weight: 700;
}

.domino-auth-terms-label a:hover {
    text-decoration: underline;
    color: var(--color-primary-deep, #4a1259);
}

.domino-auth-message {
    padding: 0.85rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
}

.domino-auth-message.success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid rgba(46, 125, 50, 0.15);
}

.domino-auth-message.error {
    background: #ffebee;
    color: #c62828;
    border: 1px solid rgba(198, 40, 40, 0.15);
}

/* ============================================================
   USER MENU (Header)
   ============================================================ */

.auth-widget-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    min-height: 36px;
}

.header-login-btn {
    grid-column: 1;
    grid-row: 1;
    background: none;
    border: 2px solid var(--primary-light);
    color: var(--primary-light);
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    height: 34px;
    opacity: 1;
    transform: scale(1);
    
    /* Morphing transitions */
    transition: 
        width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        padding 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.5s ease,
        border-color 0.5s ease,
        color 0.2s ease,
        opacity 0.4s ease,
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header-login-btn:hover {
    background: var(--primary-light);
    color: white;
}

.user-menu-wrapper {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    transition: 
        opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    margin: 0 6px; /* Compensate for the visual outer ring box-shadow */
}

/* Hover bridge gap covering on the parent to ensure smooth mouse transit */
.user-menu-wrapper::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 18px; /* Covers the 8px gap + overlap */
    background: transparent;
    pointer-events: none;
    z-index: 999;
}

.user-menu-wrapper:hover::after {
    pointer-events: auto;
}

/* Logged In Morph State */
.auth-widget-container.logged-in .header-login-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border-color: var(--primary);
    background-color: var(--primary);
    color: transparent;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

.auth-widget-container.logged-in .user-menu-wrapper {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.user-avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-main);
    color: white;
    border: none;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-primary-light, #ae52d4), 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.3s ease;
}

.user-menu-wrapper:hover .user-avatar-btn,
.user-menu-wrapper:has(.user-dropdown.active) .user-avatar-btn {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px white, 0 0 0 5px var(--color-primary-light, #ae52d4), 0 6px 18px rgba(156, 91, 181, 0.4);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(74, 18, 89, 0.15), 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(156, 91, 181, 0.18);
    min-width: 230px;
    z-index: 1000;
    overflow: hidden;
    direction: rtl;
    
    /* Smooth animated hover state transition */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.96);
    transform-origin: top left;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.user-dropdown.hiding {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(0.96) !important;
}

/* Hover bridge gap covering and safety hover zone */
.user-dropdown::before {
    content: '';
    position: absolute;
    top: -24px;
    bottom: -24px;
    left: -24px;
    right: -24px;
    background: transparent;
    z-index: -1;
}

/* Show on hover of menu wrapper or active class (mobile toggle) */
.user-menu-wrapper:hover .user-dropdown,
.user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.user-dropdown-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(156, 91, 181, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: linear-gradient(180deg, rgba(156, 91, 181, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
}

.user-dropdown-header span:first-child {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary-deep, #4a1259);
}

.user-role-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.role-user {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid rgba(21, 101, 192, 0.1);
}

.role-editor {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid rgba(46, 125, 50, 0.1);
}

.role-admin {
    background: #fce4ec;
    color: #c62828;
    border: 1px solid rgba(198, 40, 40, 0.1);
}

.user-dropdown-credits-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.95rem 1.5rem;
    border-bottom: 1px solid rgba(156, 91, 181, 0.08);
    background: rgba(156, 91, 181, 0.03);
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.user-dropdown-credits-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-main);
    opacity: 0.04;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.user-dropdown-credits-row:hover {
    background: rgba(156, 91, 181, 0.06);
}

.user-dropdown-credits-row:hover::before {
    opacity: 0.08;
}

/* Also trigger refill button scale on row hover */
.user-dropdown-credits-row:hover .user-dropdown-credits-refill {
    transform: scale(1.15);
}

.user-dropdown-credits-label {
    color: var(--color-text-muted, #666);
    flex: 1;
    position: relative;
    font-weight: 500;
}

.user-dropdown-credits-value {
    font-weight: 800;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    font-size: 1rem;
}

.user-dropdown-credits-refill {
    border: none;
    background: var(--gradient-main);
    background-size: 200% 200%;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
    position: relative;
    box-shadow: 0 2px 8px rgba(156, 91, 181, 0.3);
}

.user-dropdown-credits-refill:hover {
    transform: scale(1.18);
    box-shadow: 0 4px 14px rgba(156, 91, 181, 0.5);
}

.user-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.9rem 1.5rem;
    text-align: right;
    background: none;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-dark, #2c2c2c);
    cursor: pointer;
    transition: background-color 0.2s ease, padding-right 0.25s ease, color 0.2s ease;
    font-family: inherit;
    text-decoration: none;
    box-sizing: border-box;
}

.user-dropdown-item:hover {
    background-color: rgba(156, 91, 181, 0.05);
    color: var(--color-primary, #7b1fa2);
    padding-right: 1.75rem; /* Subtle text slide effect */
}

.logout-btn {
    color: var(--color-accent-warm, #ff6f61);
    border-top: 1px solid rgba(156, 91, 181, 0.08);
}

.logout-btn:hover {
    background-color: rgba(255, 111, 97, 0.05);
    color: var(--color-accent-warm, #ff6f61);
}

/* ============================================================
   LOGIN PROMPT PAGE
   ============================================================ */

.login-prompt-page {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-muted);
}

.login-prompt-icon {
    margin-bottom: 1rem;
    color: var(--primary-light);
}

.login-prompt-page h2 {
    color: var(--text-dark);
    margin: 0 0 0.5rem;
}

.login-prompt-btn {
    margin-top: 1.5rem;
    padding: 0.75rem 2rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.login-prompt-btn:hover {
    background: var(--primary-deep);
}

/* ============================================================
   SUGGEST EDIT MODAL
   ============================================================ */

.suggest-edit-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.suggest-edit-overlay.active {
    display: flex;
}

.suggest-edit-content {
    background: white;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    width: 90%;
    max-width: 480px;
    box-shadow: var(--card-hover-shadow);
    direction: rtl;
}

.suggest-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.suggest-edit-header h3 {
    margin: 0;
    color: var(--primary-deep);
}

.suggest-edit-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-muted);
}

.suggest-edit-entity {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.suggest-edit-form label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    margin-top: 0.75rem;
}

.suggest-edit-form select,
.suggest-edit-form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    direction: rtl;
    transition: border-color 0.2s;
}

.suggest-edit-form select:focus,
.suggest-edit-form textarea:focus {
    border-color: var(--primary);
    outline: none;
}

.suggest-edit-old {
    font-size: 0.85rem;
    color: var(--text-muted);
    background: #f5f5f5;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    margin-top: 0.3rem;
}

.suggest-edit-submit {
    margin-top: 1rem;
    width: 100%;
    padding: 0.7rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.suggest-edit-submit:hover {
    background: var(--primary-deep);
}

.suggest-edit-message {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.suggest-edit-message.success {
    background: #e8f5e9;
    color: #2e7d32;
}

.suggest-edit-message.error {
    background: #ffebee;
    color: #c62828;
}

/* ============================================================
   PLAYLISTS PAGE
   ============================================================ */

.private-playlists-page .page-header,
.public-private-playlists-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.private-playlists-page .page-header h1,
.public-private-playlists-page .page-header h1 {
    margin: 0;
    color: var(--primary-deep);
}

.create-private-playlist-btn {
    padding: 0.5rem 1.25rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: var(--transition-smooth);
}

.create-private-playlist-btn:hover {
    background: var(--primary-deep);
}

.create-private-playlist-form {
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.create-private-playlist-form input {
    padding: 0.6rem 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    direction: rtl;
}

.create-private-playlist-form input:focus {
    border-color: var(--primary);
    outline: none;
}

.create-private-playlist-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.btn-primary {
    padding: 0.5rem 1.25rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.btn-primary:hover {
    background: var(--primary-deep);
}

.btn-secondary {
    padding: 0.5rem 1.25rem;
    background: #e0e0e0;
    color: var(--text-dark);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.btn-secondary:hover {
    background: #d0d0d0;
}

/* Playlist Grid */
.private-playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.private-playlist-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
    position: relative;
    cursor: default;
}

.private-playlist-card:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-2px);
}

.public-private-playlist-card {
    cursor: pointer;
}

.private-playlist-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.private-playlist-card-title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-deep);
    font-weight: 700;
}

.private-playlist-action-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.2rem;
    line-height: 1;
}

.private-playlist-card-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

.private-playlist-card-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.private-playlist-author {
    font-weight: 500;
}

.private-playlist-card-footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.private-playlist-play-btn,
.private-playlist-view-btn {
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.private-playlist-play-btn {
    background: var(--primary);
    color: white;
}

.private-playlist-play-btn:hover {
    background: var(--primary-deep);
}

.private-playlist-play-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.private-playlist-view-btn {
    background: #f0f0f0;
    color: var(--text-dark);
}

.private-playlist-view-btn:hover {
    background: #e0e0e0;
}

/* Playlist context menu */
.private-playlist-menu {
    position: absolute;
    top: 3rem;
    left: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: var(--card-hover-shadow);
    z-index: 100;
    overflow: hidden;
    min-width: 140px;
}

.private-playlist-menu button {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    text-align: right;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-dark);
}

.private-playlist-menu button:hover {
    background: #f5f5f5;
}

.private-playlist-menu button.danger {
    color: #c62828;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-state-icon {
    margin-bottom: 0.5rem;
}

.loading-text {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

/* ============================================================
   PLAYLIST DETAIL PAGE
   ============================================================ */

.private-playlist-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.private-playlist-detail-info h1 {
    margin: 0;
    color: var(--primary-deep);
}

.private-playlist-detail-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0.3rem 0 0;
}

.private-playlist-detail-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.private-playlist-detail-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.private-playlist-play-all-btn,
.private-playlist-edit-btn,
.private-playlist-share-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.private-playlist-play-all-btn {
    background: var(--primary);
    color: white;
}

.private-playlist-play-all-btn:hover {
    background: var(--primary-deep);
}

.private-playlist-edit-btn,
.private-playlist-share-btn {
    background: #f0f0f0;
    color: var(--text-dark);
}

.private-playlist-edit-btn:hover,
.private-playlist-share-btn:hover {
    background: #e0e0e0;
}

/* Playlist song list */
.private-playlist-songs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.private-playlist-song-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    transition: background 0.15s;
}

.private-playlist-song-item:hover {
    background: #f9f9f9;
}

.private-playlist-song-item.active {
    background: var(--primary-pale);
}

.private-playlist-song-num {
    width: 24px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    flex-shrink: 0;
}

.private-playlist-song-play {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-smooth);
}

.private-playlist-song-play:hover {
    background: var(--primary-deep);
    transform: scale(1.1);
}

.private-playlist-song-info {
    flex: 1;
    min-width: 0;
}

.private-playlist-song-name {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.private-playlist-song-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.private-playlist-song-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 0.25rem;
}

.private-playlist-song-item:hover .private-playlist-song-remove {
    opacity: 1;
}

.private-playlist-song-remove:hover {
    color: #c62828;
}

/* ============================================================
   ADD TO PLAYLIST DROPDOWN
   ============================================================ */

.add-to-private-playlist-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}

.add-to-private-playlist-btn:hover {
    color: var(--primary);
    background: var(--primary-pale);
}

.add-to-private-playlist-dropdown {
    background: white;
    border-radius: 10px;
    box-shadow: var(--card-hover-shadow);
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    direction: rtl;
}

.private-playlist-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    text-align: right;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-dark);
    transition: background 0.15s;
}

.private-playlist-dropdown-item:hover {
    background: #f5f5f5;
}

.private-playlist-dropdown-item.already-added {
    color: var(--primary);
}

.private-playlist-dropdown-check {
    width: 16px;
    font-size: 0.75rem;
    color: var(--primary);
}

.private-playlist-dropdown-count {
    margin-right: auto;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.private-playlist-dropdown-empty {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.private-playlist-dropdown-divider {
    height: 1px;
    background: #eee;
    margin: 0.25rem 0;
}

.private-playlist-dropdown-new {
    color: var(--primary);
    font-weight: 600;
}

.private-playlist-dropdown-plus {
    font-size: 1.1rem;
}

/* ============================================================
   EDITOR PANEL
   ============================================================ */

.editor-page .page-header h1,
.admin-page .page-header h1 {
    margin: 0;
    color: var(--primary-deep);
}

.editor-tabs,
.admin-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #eee;
}

.editor-tab,
.admin-tab {
    padding: 0.6rem 1.25rem;
    background: none;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.editor-tab:hover,
.admin-tab:hover {
    color: var(--primary);
}

.editor-tab.active,
.admin-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.editor-tab-count {
    background: var(--primary-pale);
    color: var(--primary);
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-weight: 700;
}

.editor-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.editor-filter-btn {
    padding: 0.35rem 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    background: white;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.editor-filter-btn:hover {
    border-color: var(--primary-light);
}

.editor-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.editor-content {
    min-height: 200px;
}

.editor-empty,
.admin-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

/* Editor Card */
.editor-card {
    background: white;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-right: 4px solid #e0e0e0;
}

.editor-card.status-pending {
    border-right-color: var(--accent-gold);
}

.editor-card.status-approved {
    border-right-color: #4caf50;
}

.editor-card.status-rejected {
    border-right-color: #c62828;
}

.editor-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.editor-card-type {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--primary-pale);
    color: var(--primary);
    text-transform: uppercase;
}

.editor-card-entity {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
}

.status-badge-pending {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: #fff8e1;
    color: #f57f17;
    font-weight: 600;
    margin-right: auto;
}

.status-badge-approved {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: #e8f5e9;
    color: #2e7d32;
    font-weight: 600;
    margin-right: auto;
}

.status-badge-rejected {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: #ffebee;
    color: #c62828;
    font-weight: 600;
    margin-right: auto;
}

.editor-card-body {
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.5;
}

.editor-card-field strong,
.editor-card-old strong,
.editor-card-new strong {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.editor-card-old {
    color: var(--text-muted);
    text-decoration: line-through;
    margin-top: 0.25rem;
}

.editor-card-new {
    color: var(--primary-deep);
    font-weight: 500;
    margin-top: 0.25rem;
}

.editor-card-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.editor-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-right: auto;
}

/* Gradient hero across the top of the editor panel — site-wide gradient
   used on the contribute page, with centered white title. */
.editor-hero {
    background: var(--gradient-main);
    border-radius: 16px;
    padding: 32px 24px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.editor-hero-title {
    color: white;
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    letter-spacing: 0.02em;
}

.editor-hero-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.editor-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
    padding: 8px 22px;
    border-radius: 24px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.editor-hero-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.editor-hero-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.editor-hero-btn-icon {
    font-size: 1.15em;
    line-height: 1;
}

@media (max-width: 600px) {
    .editor-hero {
        padding: 22px 18px;
    }
    .editor-hero-title {
        font-size: 1.5em;
    }
    .editor-hero-links {
        gap: 10px;
        margin-top: 14px;
    }
    .editor-hero-btn {
        padding: 6px 16px;
        font-size: 0.85em;
    }
}

/* Editor toolbar — status + type chips, search, refresh */
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.editor-search-input {
    flex: 1;
    min-width: 200px;
    background: white;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.9em;
    font-family: inherit;
    color: var(--text-dark);
}

.editor-search-input:focus {
    outline: none;
    border-color: var(--color-mechaber);
    box-shadow: 0 0 0 2px var(--color-mechaber-pale);
}

.editor-card-email {
    font-size: 0.82em;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.editor-approve-btn,
.editor-reject-btn,
.editor-merge-btn {
    padding: 0.35rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.editor-approve-btn {
    background: #4caf50;
    color: white;
}

.editor-approve-btn:hover {
    background: #388e3c;
}

.editor-reject-btn {
    background: #ef5350;
    color: white;
}

.editor-reject-btn:hover {
    background: #c62828;
}

.editor-merge-btn {
    background: var(--color-chatzer);
    color: white;
}

.editor-merge-btn:hover {
    background: var(--color-chatzer-dark);
}

.editor-reviewer-note {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */

/* Users */
.admin-users-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-search {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    direction: rtl;
}

.admin-search:focus {
    border-color: var(--primary);
    outline: none;
}

.admin-user-total {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-users-table th {
    text-align: right;
    padding: 0.6rem 0.5rem;
    border-bottom: 2px solid #eee;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.admin-users-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.admin-users-table tr:hover td {
    background: #fafafa;
}

.admin-users-table tr.user-blocked td {
    opacity: 0.5;
}

.admin-email {
    direction: ltr;
    text-align: left;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.admin-actions {
    white-space: nowrap;
}

.admin-role-select {
    padding: 0.25rem 0.4rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: inherit;
    direction: rtl;
}

.admin-block-btn {
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    margin-right: 0.25rem;
}

.admin-block-btn.block {
    background: #ffebee;
    color: #c62828;
}

.admin-block-btn.unblock {
    background: #e8f5e9;
    color: #2e7d32;
}

.admin-self {
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.status-active {
    color: #2e7d32;
    font-weight: 600;
}

.status-blocked {
    color: #c62828;
    font-weight: 600;
}

/* Stats */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.admin-stat-card {
    background: white;
    border-radius: 10px;
    padding: 1.25rem 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.admin-stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
}

.admin-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.admin-stats-section {
    margin-bottom: 1.5rem;
}

.admin-stats-section h3 {
    color: var(--text-dark);
    font-size: 1rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.admin-stats-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

/* Cache */
.admin-cache-section {
    margin-bottom: 2rem;
}

.admin-cache-section h3 {
    color: var(--text-dark);
    margin: 0 0 0.75rem;
}

.admin-cache-actions,
.admin-debug-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.admin-action-btn {
    padding: 0.5rem 1rem;
    background: var(--primary-pale);
    color: var(--primary);
    border: 2px solid var(--primary-light);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.admin-action-btn:hover {
    background: var(--primary);
    color: white;
}

.admin-action-btn.danger {
    background: #ffebee;
    color: #c62828;
    border-color: #ef9a9a;
}

.admin-action-btn.danger:hover {
    background: #c62828;
    color: white;
}

.admin-action-status {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.admin-action-status.success {
    background: #e8f5e9;
    color: #2e7d32;
}

.admin-action-status.error {
    background: #ffebee;
    color: #c62828;
}

.admin-link-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.admin-link-btn:hover {
    background: var(--primary-deep);
}

/* Local cache items */
.admin-cache-items {
    margin-top: 0.75rem;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 0.5rem;
}

.admin-cache-item {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
}

.cache-key {
    color: var(--text-dark);
    font-family: monospace;
    direction: ltr;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.cache-size {
    color: var(--text-muted);
    flex-shrink: 0;
}

.admin-cache-more {
    text-align: center;
    padding: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Debug */
.admin-debug-section h3 {
    color: var(--text-dark);
    margin: 1.5rem 0 0.75rem 0;
}

.admin-debug-section h3:first-child {
    margin-top: 0;
}

.admin-debug-rows {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 0.75rem;
}

.admin-debug-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    border-bottom: 1px solid #eee;
}

.admin-debug-row:last-child {
    border-bottom: none;
}

.admin-debug-row code {
    font-family: monospace;
    background: #fff;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
    direction: ltr;
}

.admin-debug-output {
    margin-top: 1rem;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 1rem;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.8rem;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    min-height: 2rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .login-modal {
        padding: 1.5rem;
    }

    .private-playlists-grid {
        grid-template-columns: 1fr;
    }

    .private-playlist-detail-header {
        flex-direction: column;
    }

    .private-playlist-detail-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .admin-users-table {
        font-size: 0.75rem;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .editor-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .editor-card-actions {
        margin-right: 0;
    }

    .admin-users-header {
        flex-direction: column;
    }

    .admin-debug-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
}

/* ============================================================
   MY CONTRIBUTIONS (on contribute page)
   ============================================================ */

.my-contributions-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 20px 8px;
    direction: rtl;
}

.my-contributions-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary, #333);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-color, #4a90d9);
}

.my-contributions-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.my-contributions-loading {
    text-align: center;
    color: var(--text-muted, #888);
    padding: 20px;
}

.my-contributions-empty {
    text-align: center;
    color: var(--text-muted, #888);
    padding: 20px;
    font-style: italic;
}

.my-contributions-group {
    background: var(--bg-secondary, #f8f8f8);
    border-radius: 10px;
    padding: 14px 16px;
}

.my-contributions-group-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.my-contributions-count {
    background: var(--accent-color, #4a90d9);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.my-contributions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.my-contribution-item {
    background: var(--bg-primary, #fff);
    border-radius: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,0.06);
}

.my-contribution-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.my-contribution-name {
    font-weight: 600;
    color: var(--text-primary, #333);
    font-size: 0.95rem;
}

.my-contribution-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

.my-contribution-status.status-pending {
    background: #fff3e0;
    color: #e65100;
}

.my-contribution-status.status-done {
    background: #e8f5e9;
    color: #2e7d32;
}

.my-contribution-status.status-rejected {
    background: #ffebee;
    color: #c62828;
}

.my-contribution-detail {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    margin-top: 4px;
    line-height: 1.4;
}

.my-contribution-date {
    font-size: 0.75rem;
    color: var(--text-muted, #aaa);
    margin-top: 4px;
}


/* ============================================================
 * Profile page (/profile)
 * ============================================================ */

.profile-section {
    background: var(--gradient-main-pale);
    border: 1px solid var(--color-chatzer-pale);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
}
.profile-section h2 {
    font-size: 18px;
    margin: 0 0 14px;
    text-align: center;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.profile-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.profile-row label {
    flex: 0 0 100%;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary, #555);
}
.profile-row input[type="text"],
.profile-row input[type="password"] {
    flex: 1 1 240px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
}
.profile-row input[readonly] {
    background: #f3f3f3;
    color: #666;
}
.profile-input-group {
    display: flex;
    gap: 10px;
    width: 100%;
}
.profile-input-group input {
    flex: 1;
}
.auth-btn {
    background: var(--gradient-main);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.auth-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.auth-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}
.auth-btn.success {
    background: #2e7d32 !important;
    color: #fff !important;
}
.auth-btn-logout {
    background: var(--gradient-main);
    margin-top: 10px;
}
.profile-hint {
    font-weight: normal;
    font-size: 12px;
    color: var(--text-tertiary, #888);
    margin-right: 6px;
}
.profile-msg {
    flex: 1 1 100%;
    font-size: 13px;
    margin-top: 2px;
}
.profile-msg.success { color: #2e7d32; }
.profile-msg.error { color: #c62828; }
.profile-note {
    color: var(--text-secondary, #666);
    font-size: 14px;
    padding: 8px 0;
}
.profile-empty {
    text-align: center;
    padding: 80px 16px;
}
.profile-empty p { margin: 16px 0 24px; color: var(--text-secondary, #666); }

/* Invite-link "set your password" prompt — modern, main-gradient styled */
.invite-pw-dialog {
    text-align: center;
}
.invite-pw-badge {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--gradient-main);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(156, 91, 181, 0.35);
}
.invite-pw-badge svg {
    width: 30px;
    height: 30px;
    color: #fff;
}
.invite-pw-title {
    font-size: 25px;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.25;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary, #9c5bb5);
}
.invite-pw-sub {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted, #777);
    margin: 0 0 22px;
}

/* ============================================================
   Account details — current values as clean text; edit fields
   reveal under each item via the single "טויש דעטאלן" toggle.
   ============================================================ */
.profile-details {
    display: flex;
    flex-direction: column;
    margin: 6px 0 18px;
}
.profile-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 16px 0;
}
.profile-detail-item + .profile-detail-item {
    border-top: 1px solid var(--color-chatzer-pale, #eee);
}
.profile-detail-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #888);
}
.profile-detail-value {
    font-size: 22px;
    font-weight: 700;
    word-break: break-word;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary, #9c5bb5); /* fallback where text-clip is unsupported */
}
.profile-detail-value.is-empty {
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-tertiary, #aaa);
}
.profile-edit-area {
    width: 100%;
    max-width: 420px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    animation: profileEditReveal 0.25s ease;
}
@keyframes profileEditReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.profile-edit-area input[type="text"],
.profile-edit-area input[type="email"],
.profile-edit-area input[type="password"] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-edit-area input:focus {
    outline: none;
    border-color: var(--color-primary-light, #ae52d4);
    box-shadow: 0 0 0 3px rgba(174, 82, 212, 0.12);
}
.profile-edit-toggle {
    background: #fff;
    color: var(--color-primary, #9c5bb5);
    border: 1.5px solid rgba(156, 91, 181, 0.3);
}
.profile-edit-toggle:hover:not(:disabled) {
    background: rgba(156, 91, 181, 0.05);
}
.profile-edit-toggle.open {
    background: rgba(156, 91, 181, 0.08);
}

/* ============================================================
   Download credits + per-recording download button
   ============================================================ */
.profile-credits-section h2,
.profile-owner-section h2 { margin-bottom: 12px; }

/* Profile credits card — wears the main app gradient as a soft pale
   surface with a glossy animated sheen and a gradient-text balance. */
.profile-credits-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 22px 24px;
    background: var(--gradient-main-pale);
    border: 1px solid var(--color-chatzer-pale);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    animation: credits-card-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    box-shadow: 0 4px 18px rgba(156, 91, 181, 0.08);
}
.profile-credits-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-main);
    opacity: 0.06;
    z-index: 0;
    pointer-events: none;
}
.profile-credits-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 200%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: credits-sheen 4.5s ease-in-out infinite;
    animation-delay: 1.2s;
}
@keyframes credits-card-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes credits-sheen {
    0%, 60% { left: 200%; }
    100%    { left: -100%; }
}
.profile-credits-card > * { position: relative; z-index: 1; }

.profile-credits-balance {
    text-align: center;
    padding-left: 18px;
    border-left: 2px solid rgba(156, 91, 181, 0.35);
}
.profile-credits-balance-num {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.profile-credits-balance-num:hover {
    transform: scale(1.08);
}
.profile-credits-balance-label {
    font-size: 13px;
    color: var(--text-secondary, #666);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.profile-credits-meta {
    font-size: 14px;
    color: var(--text-primary, #2c2c2c);
    line-height: 1.7;
}
.profile-credits-hint {
    font-size: 12px;
    color: var(--text-tertiary, #888);
    margin-top: 2px;
}
.profile-credits-refill-btn {
    white-space: nowrap;
    background: var(--gradient-main);
    background-size: 200% 200%;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(156, 91, 181, 0.35);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s,
                background-position 0.6s;
}
.profile-credits-refill-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 22px rgba(156, 91, 181, 0.5);
    background-position: 100% 0;
}
.profile-credits-refill-btn:active { transform: translateY(0) scale(0.98); }

.profile-owner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
}
.profile-owner-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) {
    .profile-owner-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
.profile-owner-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 10px;
    background: var(--gradient-main-pale);
    border: 1px solid var(--color-chatzer-pale);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s;
    animation: credits-card-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.profile-owner-stat:nth-child(2) { animation-delay: 0.08s; }
.profile-owner-stat:nth-child(3) { animation-delay: 0.16s; }
.profile-owner-stat:nth-child(4) { animation-delay: 0.24s; }
.profile-owner-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(156, 91, 181, 0.18);
}
.profile-owner-stat-unpaid {
    background: var(--gradient-main-pale);
    border-color: var(--color-chatzer-light);
    transition: opacity 0.4s ease, filter 0.4s ease;
}
.profile-owner-stat-unpaid.under-threshold {
    opacity: 0.85;
    animation: none;
}
.profile-owner-stat-unpaid.under-threshold .profile-owner-num,
.profile-owner-stat-unpaid.under-threshold .profile-owner-label {
    opacity: 0.6;
}
@keyframes credits-pulse-amber {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 165, 0, 0.15); }
}
.profile-owner-num {
    font-size: clamp(18px, 4vw, 25px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.profile-owner-stat-unpaid .profile-owner-num {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.profile-owner-label {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.profile-owner-note {
    font-size: 12px;
    color: var(--text-tertiary, #888);
    margin-top: 12px;
    text-align: center;
}

@media (max-width: 600px) {
    .profile-credits-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .profile-credits-balance {
        border-left: none;
        border-bottom: 2px solid rgba(156, 91, 181, 0.35);
        padding-left: 0;
        padding-bottom: 14px;
    }
}

/* ============================================================
   Per-recording download button — hidden by default, fades in
   on recording row hover using the parent theme's light color.
   ============================================================ */
.rec-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 4px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--theme-light, var(--color-nigun-light, #90caf9));
    cursor: pointer;
    border-radius: 50%;
    position: relative;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, color 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.song-item-recording:hover .rec-download-btn {
    opacity: 1;
    pointer-events: auto;
}
.rec-download-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--theme-light, var(--color-nigun-light, #90caf9));
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 0;
}
.rec-download-btn svg { position: relative; z-index: 1; transition: transform 0.3s; }
.rec-download-btn:hover {
    color: #fff;
    transform: translateY(-1px);
}
.rec-download-btn:hover::before {
    opacity: 1;
    transform: scale(1);
}
.rec-download-btn:hover svg {
    animation: rec-download-bounce 0.7s ease-in-out infinite;
}
.rec-download-btn:active { transform: translateY(0) scale(0.92); }
@keyframes rec-download-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(2px); }
}

/* Theme-specific download button colors */
.theme-mechaber .rec-download-btn { color: var(--color-mechaber-light, #ce93d8); }
.theme-mechaber .rec-download-btn::before { background: var(--color-mechaber-light, #ce93d8); }
.theme-chatzer .rec-download-btn { color: var(--color-chatzer-light, #b39ddb); }
.theme-chatzer .rec-download-btn::before { background: var(--color-chatzer-light, #b39ddb); }
.theme-nigun .rec-download-btn { color: var(--color-nigun-light, #90caf9); }
.theme-nigun .rec-download-btn::before { background: var(--color-nigun-light, #90caf9); }

/* ============================================================
   Download modal + credits modal — shared shell
   ============================================================ */
.download-modal-overlay,
.credits-modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.28s ease;
}
/* Download modal: no dark page overlay — sits above the nigun modal
   which gets blurred by JS when this opens.  */
.download-modal-overlay {
    z-index: 20000;
    background: transparent;
}
/* Credits modal keeps the classic dark overlay */
.credits-modal-overlay {
    z-index: 20000;
    background: rgba(20, 14, 35, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.download-modal-overlay.active,
.credits-modal-overlay.active {
    display: flex;
    opacity: 1;
    animation: credits-overlay-fade 0.3s ease both;
}
@keyframes credits-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* When download modal is open, blur the nigun modal underneath */
.nigun-modal-overlay.download-blur .nigun-modal {
    filter: blur(6px);
    transition: filter 0.3s ease;
}
.nigun-modal-overlay.download-blur .nigun-modal-close {
    pointer-events: none;
}

.download-modal-content,
.credits-modal-content {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 26px 24px;
    position: relative;
    box-shadow: 0 24px 70px rgba(20, 14, 35, 0.35),
                0 4px 18px rgba(156, 91, 181, 0.18);
    animation: credits-modal-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.download-modal-content::before,
.credits-modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gradient-main);
    border-radius: 20px 20px 0 0;
}
@keyframes credits-modal-pop {
    from { opacity: 0; transform: translateY(20px) scale(0.94); }
    to   { opacity: 1; transform: none; }
}
/* Exit animations — mirrors the entrance */
.download-modal-overlay.closing,
.credits-modal-overlay.closing {
    animation: credits-overlay-fadeout 0.25s ease both;
}
.download-modal-overlay.closing .download-modal-content,
.credits-modal-overlay.closing .credits-modal-content {
    animation: credits-modal-popout 0.25s cubic-bezier(0.55, 0, 1, 0.45) both;
}
@keyframes credits-overlay-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes credits-modal-popout {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(20px) scale(0.94); }
}
.download-modal-close,
.credits-modal-close {
    position: absolute;
    top: 14px;
    left: 14px;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary, #666);
    transition: background 0.2s, color 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.download-modal-close:hover,
.credits-modal-close:hover {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(1.1);
}
.download-modal-title,
.credits-modal-title {
    font-size: 22px;
    font-weight: 800;
    margin: 6px 0 4px;
    text-align: center;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.01em;
}
.download-modal-subtitle,
.credits-modal-subtitle {
    font-size: 13px;
    color: var(--text-secondary, #666);
    text-align: center;
    margin-bottom: 18px;
}

/* Balance row inside the download modal */
.download-credits-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradient-main-pale);
    border: 1px solid var(--color-chatzer-pale);
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    animation: credits-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.download-credits-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-main);
    opacity: 0.05;
    pointer-events: none;
}
.download-credits-label {
    font-size: 14px;
    color: var(--text-secondary, #666);
    position: relative;
}
.download-credits-value {
    font-size: 26px;
    font-weight: 800;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.download-credits-value.balance-flash { animation: balance-flash 0.6s ease; }
@keyframes balance-flash {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.download-cost-row {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary, #666);
    margin-bottom: 14px;
}
.download-cost-row strong {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
.download-modal-error,
.credits-modal-error {
    color: #c62828;
    font-size: 13px;
    text-align: center;
    margin: 8px 0;
    min-height: 18px;
    transition: opacity 0.2s;
}
.download-modal-error:not(:empty),
.credits-modal-error:not(:empty) {
    animation: credits-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes credits-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.download-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

/* Action buttons */
.download-action-btn,
.credits-submit-btn {
    width: 100%;
    padding: 13px 18px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s,
                background-position 0.6s,
                opacity 0.2s;
}
.download-action-primary,
.credits-submit-btn {
    background: var(--gradient-main);
    background-size: 200% 200%;
    color: #fff;
    box-shadow: 0 4px 16px rgba(156, 91, 181, 0.35);
}
.download-action-primary:hover:not(:disabled),
.credits-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 26px rgba(156, 91, 181, 0.5);
    background-position: 100% 0;
}
.download-action-primary:active:not(:disabled),
.credits-submit-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}
.download-action-refill {
    background: linear-gradient(135deg, #c435a8 0%, #9c5bb5 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(196, 53, 168, 0.35);
}
.download-action-refill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(196, 53, 168, 0.5);
}
.download-action-cancel {
    background: #f3f0f7;
    color: var(--text-primary, #2c2c2c);
}
.download-action-cancel:hover {
    background: #e7e1ee;
}
.download-action-btn:disabled,
.credits-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============================================================
   Credits refill modal — gradient amount input + Stripe fields
   ============================================================ */
.credits-amount-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--gradient-main-pale);
    border: 1px solid var(--color-chatzer-pale);
    padding: 20px 18px 16px;
    border-radius: 14px;
    margin-bottom: 18px;
    transition: border-color 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}
.credits-amount-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-main);
    opacity: 0.05;
    pointer-events: none;
}
.credits-amount-row:focus-within {
    border-color: var(--color-chatzer);
    box-shadow: 0 0 0 4px rgba(156, 91, 181, 0.18);
}
.credits-amount-row > * { position: relative; z-index: 1; }
/* Inner row: $ + number side by side, centered */
.credits-amount-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    direction: ltr;
}
.credits-currency {
    font-size: 22px;
    font-weight: 800;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.credits-amount-input {
    border: none;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 36px;
    font-weight: 800;
    width: 80px;
    max-width: 160px;
    outline: none;
    text-align: center;
    line-height: 1;
    caret-color: var(--color-chatzer, #9c5bb5);
    -moz-appearance: textfield;
}
.credits-amount-input::-webkit-outer-spin-button,
.credits-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.credits-amount-suffix {
    font-size: 13px;
    color: var(--text-secondary, #666);
    font-weight: 500;
    opacity: 0.7;
}
.credits-section-label {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin: 10px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.credits-stripe-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}
.credits-stripe-field {
    padding: 13px 14px;
    border: 1.5px solid #e5e0ec;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.credits-stripe-field.full-width { grid-column: 1 / -1; }
.credits-stripe-field:focus-within {
    border-color: var(--color-chatzer);
    box-shadow: 0 0 0 4px rgba(156, 91, 181, 0.15);
}

/* Legal disclaimer under the submit button — small, readable, links to
   the full terms page. Fades in just after the button so the user's eye
   lands on the CTA first. */
.credits-fine-print {
    margin-top: 12px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 9px;
    line-height: 1.5;
    color: var(--text-secondary, #999);
    text-align: center;
    opacity: 0.7;
}
.credits-fine-print ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.credits-fine-print li {
    position: relative;
    padding-right: 14px;
    margin: 4px 0;
}
.credits-fine-print li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gradient-main);
}
.credits-fine-print strong {
    color: var(--text-primary, #2c2c2c);
    font-weight: 700;
}
.credits-fine-print-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}
.credits-fine-print-links a {
    color: var(--color-chatzer-dark, #7b3f96);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.credits-fine-print-links a:hover {
    color: var(--color-mechaber-dark, #9c1b82);
    text-decoration: underline;
}
.credits-stripe-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--text-tertiary, #888);
    margin-left: auto;
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    font-size: 11px;
}

.credits-success {
    text-align: center;
    padding: 28px 0 18px;
    animation: credits-success-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes credits-success-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: none; }
}
.credits-success-icon {
    font-size: 36px;
    color: #fff;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--gradient-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(156, 91, 181, 0.45);
    animation: credits-checkmark-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both,
               credits-checkmark-glow 2.2s ease-in-out 0.6s infinite;
}
@keyframes credits-checkmark-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}
@keyframes credits-checkmark-glow {
    0%, 100% { box-shadow: 0 8px 24px rgba(156, 91, 181, 0.45); }
    50%      { box-shadow: 0 8px 32px rgba(196, 53, 168, 0.6); }
}
.credits-success-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 10px;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.credits-success-text {
    color: var(--text-secondary, #666);
    margin-bottom: 22px;
}
.credits-success-text strong {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 18px;
}
.credits-success-btn {
    background: var(--gradient-main);
    background-size: 200% 200%;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 36px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(156, 91, 181, 0.35);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s,
                background-position 0.6s;
}
.credits-success-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 24px rgba(156, 91, 181, 0.5);
    background-position: 100% 0;
}

/* Spinner shared across modals */
.download-action-btn .spinner,
.credits-submit-btn .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: credits-spin 0.7s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}
@keyframes credits-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Profile → 'My Recordings' (free-download for the uploader).
   Sits between the credits card and the account section. The
   whole block wears the same gradient family as the credits card
   for visual consistency.
   ============================================================ */
.profile-my-recordings-section {
    background: var(--gradient-main-pale);
    border: 1px solid var(--color-chatzer-pale);
    border-radius: 16px;
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(156, 91, 181, 0.08);
}
.profile-my-recordings-section::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-main);
    opacity: 0.06;
    z-index: 0;
    pointer-events: none;
}
.profile-my-recordings-section > * {
    position: relative;
    z-index: 1;
}
.profile-my-recordings-section h2 {
    margin-bottom: 8px;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.profile-my-recordings-section .profile-hint {
    font-size: 13px;
    color: var(--text-secondary, #666);
    margin: 0 0 16px 0;
}
.profile-my-recordings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-my-recordings-list .profile-loading,
.profile-my-recordings-list .profile-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary, #666);
    background: rgba(255,255,255,0.55);
    border-radius: 12px;
    font-size: 14px;
}
.profile-my-rec-nigun {
    font-size: 13px;
    color: var(--text-primary, #2c2c2c);
    opacity: 0.85;
    margin-top: 2px;
}
.profile-my-rec-nigun strong {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}
.rec-download-owner-btn {
    background: var(--gradient-main) !important;
    color: #fff !important;
    border: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.rec-download-owner-btn::before {
    display: none !important;
}
.rec-download-owner-btn:hover {
    filter: brightness(1.08);
    transform: scale(1.08);
}
.rec-download-owner-btn:hover svg {
    animation: none !important;
}
.rec-download-owner-btn[disabled] {
    opacity: 0.7;
    cursor: progress;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   UNIFIED CONTRIBUTE PAGE CONTAINERS STYLING
   ============================================================ */

.editor-hero,
.missing-section,
.my-contributions-section {
    max-width: 900px !important;
    width: 100% !important;
    margin: 0 auto 35px !important;
    background: #ffffff;
    border-radius: 24px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.015) !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Page Hero overrides */
.editor-hero {
    background: var(--gradient-main) !important;
    padding: 32px 24px !important;
}

/* Contribute suggest form container adjustments */
.contribute-hero {
    max-width: 900px !important;
    width: 100% !important;
    margin: 0 auto 35px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Header bar for missing section */
.missing-section-header-bar {
    background: var(--gradient-main);
    border-radius: 24px 24px 0 0;
    padding: 26px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    z-index: 2;
    transition: border-radius 0.4s ease 0.2s;
}

.missing-section.missing-loading .missing-section-header-bar {
    border-radius: 24px;
}

.missing-section-header-bar .loading-wave-bar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.missing-section.missing-loading .missing-section-header-bar .loading-wave-bar {
    opacity: 1;
}

.missing-section-header-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.25;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

.missing-section-title {
    color: white !important;
    font-size: 1.45em !important;
    font-weight: 750 !important;
    margin: 0 !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
    position: relative;
    z-index: 1;
    letter-spacing: 0.02em;
}

.missing-section-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 1;
}

.missing-section:not(.missing-loading) .missing-section-content-wrapper {
    grid-template-rows: 1fr;
}

.missing-section-content {
    min-height: 0;
    overflow: hidden;
    padding: 0 28px !important;
    background: var(--gradient-main-pale) !important;
    opacity: 0;
    transform: translateY(-40px);
    transition: padding 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s ease,
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.missing-section:not(.missing-loading) .missing-section-content {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
    opacity: 1;
    transform: translateY(0);
}

/* My Contributions adjustments */
.my-contributions-section {
    direction: rtl !important;
}

.my-contrib-tabs {
    border-radius: 24px 24px 0 0 !important;
    padding: 6px 6px 0 !important;
    background: var(--gradient-main) !important;
}

.my-contrib-tab {
    border-radius: 14px 14px 0 0 !important;
    font-size: 1.02em !important;
}

.my-contributions-content {
    border-radius: 0 0 24px 24px !important;
    padding: 35px 28px !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

/* Override responsive margins and radii for alignment */
@media (max-width: 768px) {
    .editor-hero,
    .contribute-hero,
    .missing-section,
    .my-contributions-section {
        border-radius: 16px !important;
        margin: 0 10px 24px !important;
        width: calc(100% - 20px) !important;
    }
    
    .missing-section-header-bar {
        border-radius: 16px 16px 0 0;
        padding: 20px 20px;
    }

    .missing-section.missing-loading .missing-section-header-bar {
        border-radius: 16px;
    }
    
    .missing-section-content {
        padding: 0 16px !important;
    }

    .missing-section:not(.missing-loading) .missing-section-content {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    
    .my-contrib-tabs {
        border-radius: 16px 16px 0 0 !important;
    }
    
    .my-contributions-content {
        border-radius: 0 0 16px 16px !important;
        padding: 24px 16px !important;
    }
}

/* Fix playroom card real header badges clipping and add pointer cursor */
.mdc-real-header-wrap {
    overflow: visible !important;
    cursor: pointer;
}

.mdc-real-header-wrap .modal-hero,
.mdc-real-header-wrap .nigun-modal-hero {
    border-top-left-radius: 21px !important;
    border-top-right-radius: 21px !important;
}

/* Custom Scrollbar for Playroom Active Cards & prevent horizontal scroll */
.mdc-body-scroll {
    overflow-x: hidden !important;
}

.mdc-body-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.mdc-body-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.mdc-body-scroll::-webkit-scrollbar-thumb {
    background: var(--mc, var(--color-nigun)) !important;
    border-radius: 10px;
}

.mdc-body-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--mc-dark, var(--color-nigun-dark)) !important;
}

.mdc-body-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--mc, var(--color-nigun)) transparent;
}

/* Constrain playroom inline details content from stretching horizontally */
.mdc-real-details-wrap * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Editor Hero Subtitle styling */
.editor-hero-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.05rem !important;
    margin: 8px 0 0 0 !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}


/* ============================================================
   Inline Edit System — Tags, text fields, batch submit
   ============================================================ */

/* Set --modal-color per theme for edit buttons, panels, etc. */
.theme-mechaber,
.detail-modal-content.theme-mechaber {
    --modal-color: var(--color-mechaber);
}

.theme-chatzer,
.detail-modal-content.theme-chatzer {
    --modal-color: var(--color-chatzer);
}

.theme-verter,
.detail-modal-content.theme-verter {
    --modal-color: var(--color-verter);
}

.theme-zman,
.detail-modal-content.theme-zman {
    --modal-color: var(--color-zman);
}

.theme-piyut,
.detail-modal-content.theme-piyut {
    --modal-color: var(--color-piyut);
}

.theme-playlist,
.detail-modal-content.theme-playlist {
    --modal-color: var(--color-playlist);
}

.theme-collection,
.detail-modal-content.theme-collection {
    --modal-color: var(--color-collection);
}

.theme-album,
.detail-modal-content.theme-album {
    --modal-color: var(--color-album);
}

.theme-document,
.detail-modal-content.theme-document {
    --modal-color: var(--color-document);
}

.theme-resource,
.detail-modal-content.theme-resource {
    --modal-color: var(--color-resource);
}

/* ---- Detail page edit toggle button (sits next to .fullpage-more) ---- */
.detail-edit-btn {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 42px;
    height: 42px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    font-size: 1.2em;
    color: #555;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 10;
    transition: all 0.25s ease;
}

@media (max-width: 768px) {
    .detail-edit-btn {
        top: 18px;
        left: 12px;
        width: 36px;
        height: 36px;
        font-size: 1em;
    }
}

.detail-edit-btn:hover {
    background: #f5f5f5;
    border-color: var(--modal-color, rgba(0, 0, 0, 0.25));
    color: var(--modal-color, #1565c0);
    transform: scale(1.08);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.detail-edit-btn.edit-active {
    background: var(--modal-color, #1565c0);
    border-color: var(--modal-color, #1565c0);
    color: white;
    box-shadow: 0 3px 15px color-mix(in srgb, var(--modal-color, #1565c0) 50%, transparent);
}

.additions-placeholder {
    display: none;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-style: italic;
}

.detail-page.is-editing .additions-placeholder {
    display: block;
}

/* ---- Edit button (pencil) ---- */
.inline-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-right: 4px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #555;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.editable-field:hover .inline-edit-btn,
.nigun-info-box:hover .inline-edit-btn,
.nigun-detail-siman-bar:hover .inline-edit-btn,
.detail-description-section:hover .inline-edit-btn,
.modal-hero-title:hover .inline-edit-btn,
.nigun-modal-hero-title:hover .inline-edit-btn {
    opacity: 0.7;
}

.inline-edit-btn:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.12);
    color: var(--text-primary, #333);
}

/* Hero edit button — visible white pill on right side of title */
.hero-edit-btn {
    opacity: 1 !important;
    position: absolute;
    right: -40px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.92);
    color: #555;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.hero-edit-btn:hover {
    background: #fff;
    color: #333;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* ---- Editable field wrapper ---- */
.editable-field {
    position: relative;
}

[data-edit-enhanced="1"] .editable-field:not(.modal-hero-avatar) {
    border-bottom: 2.5px dashed color-mix(in srgb, var(--modal-color, #1565c0) 35%, transparent) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding-bottom: 2px !important;
}

[data-edit-enhanced="1"] .editable-field:not(.modal-hero-avatar):hover {
    border-bottom-color: var(--modal-color, #1565c0) !important;
    border-bottom-style: solid !important;
    background-color: color-mix(in srgb, var(--modal-color, #1565c0) 6%, transparent) !important;
    border-radius: 4px !important;
}

[data-edit-enhanced="1"] .editable-field.editing-active,
[data-edit-enhanced="1"] .editable-field.editing-active:hover,
[data-edit-enhanced="1"] .editable-field.editing-active:focus,
[data-edit-enhanced="1"] .editable-field.editing-active:focus-within,
[data-edit-enhanced="1"] .editable-field.editing-active:not(.modal-hero-avatar),
[data-edit-enhanced="1"] .editable-field.editing-active:not(.modal-hero-avatar):hover,
[data-edit-enhanced="1"] .editable-field.editing-active:not(.modal-hero-avatar):focus,
[data-edit-enhanced="1"] .editable-field.editing-active:not(.modal-hero-avatar):focus-within,
.editable-field.editing-active,
.editable-field.editing-active:hover,
.editable-field.editing-active:focus,
.editable-field.editing-active:focus-within {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    border-bottom: none !important;
    border-bottom-style: none !important;
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    padding-bottom: 0 !important;
    box-shadow: none !important;
}

/* Base transitions for container box width changes to allow smooth shrink-back */
.nigun-info-box,
.nigun-additions-box,
.detail-description-section,
.detail-verter-section,
.nigun-detail-siman-bar {
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Dynamic width expansion for narrow container boxes when editing fields inside them */
.nigun-info-box:has(.editing-active),
.nigun-info-box.editing-parent-active,
.nigun-additions-box:has(.editing-active),
.nigun-additions-box:has(.inline-edit-direct-textarea),
.nigun-additions-box:has(.inline-edit-direct-upload),
.nigun-additions-box.editing-parent-active,
.detail-description-section:has(.editing-active),
.detail-description-section.editing-parent-active,
.detail-verter-section:has(.editing-active),
.detail-verter-section.editing-parent-active,
.nigun-detail-siman-bar:has(.editing-active),
.nigun-detail-siman-bar.editing-parent-active {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure nested wrappers expand to 100% width when editing description/verter text */
.detail-description-section:has(.editing-active) .detail-description-wrapper,
.detail-description-section.editing-parent-active .detail-description-wrapper,
.detail-description-section:has(.editing-active) .detail-description-content,
.detail-description-section.editing-parent-active .detail-description-content,
.detail-verter-section:has(.editing-active) .verter-wrapper,
.detail-verter-section.editing-parent-active .verter-wrapper,
.detail-verter-section:has(.editing-active) .verter-content,
.detail-verter-section.editing-parent-active .verter-content {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    max-height: none !important;
}

/* Hide collapsible fade overlays and expand buttons during active editing */
.detail-description-section:has(.editing-active) .description-fade-overlay,
.detail-description-section.editing-parent-active .description-fade-overlay,
.detail-description-section:has(.editing-active) .description-expand-btn,
.detail-description-section.editing-parent-active .description-expand-btn,
.detail-verter-section:has(.editing-active) .verter-fade-overlay,
.detail-verter-section.editing-parent-active .verter-fade-overlay,
.detail-verter-section:has(.editing-active) .verter-expand-btn,
.detail-verter-section.editing-parent-active .verter-expand-btn {
    display: none !important;
    opacity: 0 !important;
}

[data-edit-enhanced="1"] .inline-edit-btn:not(.inline-edit-image-trigger):not(.hero-edit-btn) {
    display: none !important;
}

/* ---- Tag remove (×) button ---- */
.tag-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    left: -6px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background: #fff;
    opacity: 1;
    color: #888;
    z-index: 10;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s, background 0.15s, color 0.15s;
}

.tag-remove-btn:hover {
    transform: scale(1.15);
    background: #ff4444;
    color: #fff;
    border-color: #ff4444;
}

/* Personality tag × at default top-left (same as chatzer/maure) */



/* Tags need position relative for the × button */
.personality-tag,
.chatzer-tag,
.detail-chatzer-badge,
.detail-zman-badge,
.detail-personality-badge,
.detail-tag-badge,
.zman-tag,
.maure-tag,
.resource-tag,
.album-tag,
.document-tag {
    position: relative;
}

.nigun-detail-box {
    position: relative;
}

/* Nigun detail box × button positioning */
.nigun-detail-box .tag-remove-btn {
    top: -4px;
    left: -4px;
}

/* Mechaber hero profile × button positioning */
.nigun-modal-mechaber-profile {
    position: relative;
    overflow: visible !important;
}

.nigun-modal-mechaber-profile .tag-remove-btn {
    top: auto;
    bottom: -6px;
    left: -6px;
    right: auto;
    width: 22px;
    height: 22px;
    line-height: 20px;
}

/* ---- Removed tag state ---- */
.tag-removed {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    max-width: 0;
    max-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

/* ---- New tag state (just added) ---- */
.tag-new {
    animation: tagSlideIn 0.3s ease;
    outline: 2px solid var(--accent-color, #4a90d9);
    outline-offset: 1px;
}

@keyframes tagSlideIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- Add (+) button ---- */
.tag-add-btn {
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #555;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Heboo', 'Heebo', sans-serif;
    padding: 2px 12px;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    min-width: 0;
    height: 28px;
    display: inline-flex;
    opacity: 1;
    margin: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.tag-add-btn:hover {
    background: color-mix(in srgb, var(--accent-color, #4a90d9) 10%, transparent);
    border-color: var(--accent-color, #4a90d9);
    color: var(--accent-color, #4a90d9);
}

/* Ensure the + Mechaber button is centered vertically next to the tall profile boxes */
.nigun-modal-hero-mechabrim .tag-add-btn {
    align-self: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: white;
}

/* Grid add row */
.grid-add-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    /* Always fully visible when present in DOM */
    opacity: 1;
    padding-top: 6px;
    transition: padding-top 0.3s ease;
}

.grid-type-btn {
    display: inline-flex !important;
    font-size: 12px;
    padding: 2px 10px;
    height: 26px;
    border-radius: 13px;
}

/* ---- Autocomplete Dropdown ---- */
.inline-autocomplete {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10005;
    width: 280px;
    min-width: 240px;
    flex-shrink: 0;
    max-height: 300px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    direction: rtl;
}

.inline-autocomplete-input {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 14px;
    font-family: inherit;
    direction: rtl;
    outline: none;
    background: transparent;
    color: var(--text-primary, #333);
    box-sizing: border-box;
}

.inline-autocomplete-list {
    overflow-y: auto;
    max-height: 240px;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    text-align: right;
    direction: rtl;
    position: relative;
}

/* ---- Mention Autocomplete ---- */
.mention-autocomplete {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    max-height: 250px;
    z-index: 10005;
    margin-top: 4px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.mention-autocomplete .mention-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
}

.mention-item {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    margin: 2px 0;
    display: flex;
    align-items: center;
    color: var(--text-dark, #333);
    transition: background 0.1s;
    text-align: right;
    background: transparent;
    box-shadow: none;
    font-size: 0.95em;
    font-weight: normal;
}

.mention-item:hover, .mention-item.selected {
    background: rgba(0, 0, 0, 0.05);
    transform: none;
    filter: none;
}

.mention-item-type {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    color: #666;
    margin-left: 10px;
}

.inline-autocomplete-list .pill-btn {
    border-radius: 4px;
    margin: 2px 0;
    justify-content: flex-start;
}

/* Themed scrollbar colors per source class */
.source-mechabrim .inline-autocomplete-list,
.source-mechabrim.inline-autocomplete-list {
    scrollbar-color: var(--color-mechaber, #7b1fa2) transparent;
}

.source-chatzeros .inline-autocomplete-list,
.source-chatzeros.inline-autocomplete-list {
    scrollbar-color: var(--color-chatzer, #6a1b9a) transparent;
}

.source-piyutim .inline-autocomplete-list,
.source-piyutim.inline-autocomplete-list {
    scrollbar-color: var(--color-piyut, #00695c) transparent;
}

.source-verter .inline-autocomplete-list,
.source-verter.inline-autocomplete-list {
    scrollbar-color: var(--color-verter, #1565c0) transparent;
}

.source-scales .inline-autocomplete-list,
.source-scales.inline-autocomplete-list {
    scrollbar-color: var(--color-music, #1565c0) transparent;
}

.source-rhythms .inline-autocomplete-list,
.source-rhythms.inline-autocomplete-list {
    scrollbar-color: var(--color-music, #1565c0) transparent;
}

.source-playlists .inline-autocomplete-list,
.source-playlists.inline-autocomplete-list {
    scrollbar-color: var(--color-playlist, #e65100) transparent;
}

.source-albums .inline-autocomplete-list,
.source-albums.inline-autocomplete-list {
    scrollbar-color: var(--color-album, #ad1457) transparent;
}

.source-documents .inline-autocomplete-list,
.source-documents.inline-autocomplete-list {
    scrollbar-color: var(--color-document, #4e342e) transparent;
}

.source-resources .inline-autocomplete-list,
.source-resources.inline-autocomplete-list {
    scrollbar-color: var(--color-resource, #37474f) transparent;
}

.source-zmanim .inline-autocomplete-list,
.source-zmanim.inline-autocomplete-list {
    scrollbar-color: var(--color-zman, #e96a1b) transparent;
}

/* Webkit scrollbar thumb colors */
.inline-autocomplete-list::-webkit-scrollbar {
    width: 6px;
}

.inline-autocomplete-list::-webkit-scrollbar-track {
    background: transparent;
}

.inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.source-mechabrim .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-mechaber, #7b1fa2);
}

.source-chatzeros .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-chatzer, #6a1b9a);
}

.source-piyutim .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-piyut, #00695c);
}

.source-verter .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-verter, #1565c0);
}

.source-scales .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-music, #1565c0);
}

.source-rhythms .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-music, #1565c0);
}

.source-playlists .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-playlist, #e65100);
}

.source-albums .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-album, #ad1457);
}

.source-documents .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-document, #4e342e);
}

.source-resources .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-resource, #37474f);
}

.source-collections .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-collection, #B05F03);
}

.source-zmanim .inline-autocomplete-list::-webkit-scrollbar-thumb {
    background: var(--color-zman, #e96a1b);
}

/* Pill/tag style items — matches addinfo modal */
.inline-autocomplete-item {
    display: inline-block;
    margin: 4px;
    padding: 6px 14px;
    background: var(--modal-color, #6b8993);
    color: white;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85em;
    font-weight: 500;
    direction: rtl;
    box-shadow: 0 2px 8px rgba(107, 137, 147, 0.3);
}

/* Category-specific colors for items */
.source-mechabrim .inline-autocomplete-item {
    background: var(--color-mechaber);
    box-shadow: 0 2px 8px rgba(196, 53, 168, 0.3);
}

.source-chatzeros .inline-autocomplete-item {
    background: var(--color-chatzer);
    box-shadow: 0 2px 8px rgba(156, 91, 181, 0.3);
}

.source-piyutim .inline-autocomplete-item {
    background: var(--color-piyut);
    box-shadow: 0 2px 8px rgba(46, 139, 46, 0.3);
}

.source-verter .inline-autocomplete-item {
    background: var(--color-verter);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
}

.source-scales .inline-autocomplete-item {
    background: var(--color-music);
    box-shadow: 0 2px 8px rgba(212, 172, 18, 0.3);
}

.source-rhythms .inline-autocomplete-item {
    background: var(--color-music);
    box-shadow: 0 2px 8px rgba(212, 172, 18, 0.3);
}

.source-playlists .inline-autocomplete-item {
    background: var(--color-playlist);
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.3);
}

.source-albums .inline-autocomplete-item {
    background: var(--color-album);
    box-shadow: 0 2px 8px rgba(0, 131, 143, 0.3);
}

.source-documents .inline-autocomplete-item {
    background: var(--color-document);
    box-shadow: 0 2px 8px rgba(0, 160, 176, 0.3);
}

.source-resources .inline-autocomplete-item {
    background: var(--color-resource);
    box-shadow: 0 2px 8px rgba(55, 71, 79, 0.3);
}

.source-nigunim .inline-autocomplete-item {
    background: var(--color-nigun);
    box-shadow: 0 2px 8px rgba(74, 124, 201, 0.3);
}

.source-collections .inline-autocomplete-item {
    background: var(--color-collection);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-collection) 30%, transparent);
}

.source-zmanim .inline-autocomplete-item {
    background: var(--color-zman);
    box-shadow: 0 2px 8px rgba(233, 106, 27, 0.3);
}

.inline-autocomplete-item:hover {
    transform: scale(1.05);
    filter: brightness(0.9);
}

.inline-autocomplete-empty {
    padding: 16px;
    text-align: center;
    color: #888;
    font-size: 0.9em;
    direction: rtl;
    width: 100%;
}

/* ---- Inline Edit Form (text fields) ---- */
.inline-edit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    width: 100% !important;
    align-self: stretch !important;
    animation: inlineEditEntrance 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes inlineEditEntrance {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.inline-edit-input,
textarea.inline-edit-input {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 2px dashed var(--modal-color, #1565c0) !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    direction: rtl !important;
    text-align: inherit !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    resize: none !important;
    overflow: hidden !important;
    display: block !important;
    transition: border-color 0.25s ease !important;
    min-height: unset !important;
}

.inline-edit-input:focus,
textarea.inline-edit-input:focus {
    border-bottom: 2.5px solid var(--modal-color, #1565c0) !important;
    box-shadow: none !important;
}

/* Select dropdown for inline edit */
select.inline-edit-input,
.inline-edit-select {
    appearance: auto;
    -webkit-appearance: menulist;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    min-width: 100px;
    max-width: 200px;
}

select.inline-edit-input:focus,
.inline-edit-select:focus {
    border-color: #fff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Image upload inline edit UI */
.inline-edit-image-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inline-edit-image-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background 0.2s;
}

.inline-edit-image-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.inline-edit-image-filename {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Image upload + overlay button on avatar in edit mode */
.detail-modal-body[data-edit-enhanced="1"] .modal-hero-avatar.editable-field {
    position: relative;
    cursor: pointer;
}

/* Avatar editing mode — shows "+" upload button instead of the image */
.modal-hero-avatar.avatar-editing-mode {
    cursor: pointer !important;
    border: 3px dashed rgba(255,255,255,0.7) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15), 0 0 0 2px rgba(255,255,255,0.3) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
}

.modal-hero-avatar.avatar-editing-mode img,
.modal-hero-avatar.avatar-editing-mode .placeholder {
    opacity: 0.15 !important;
    transition: opacity 0.25s ease !important;
}

.modal-hero-avatar.avatar-editing-mode::after {
    content: '+';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 300;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    z-index: 5;
    pointer-events: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.modal-hero-avatar.avatar-editing-mode:hover {
    border-color: white !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.5) !important;
    transform: scale(1.05);
}

.modal-hero-avatar.avatar-editing-mode:hover::after {
    transform: scale(1.15);
}

.modal-hero-avatar.avatar-editing-mode:hover img,
.modal-hero-avatar.avatar-editing-mode:hover .placeholder {
    opacity: 0.08 !important;
}

/* Mechaber name editable spans — inline flow */
.mechaber-title,
.mechaber-first-name,
.mechaber-last-name,
.mechaber-gerufen,
.mechaber-city,
.mechaber-suffix {
    display: inline;
}

/* Hide empty spans in view mode */
.mechaber-title:empty,
.mechaber-first-name:empty,
.mechaber-last-name:empty,
.mechaber-gerufen:empty,
.mechaber-city:empty,
.mechaber-suffix:empty,
.mechaber-birth-day:empty,
.mechaber-birth-month:empty,
.mechaber-birth-year:empty,
.mechaber-death-day:empty,
.mechaber-death-month:empty,
.mechaber-death-year:empty {
    display: none;
}

/* Show empty spans in edit mode with placeholder */
.detail-modal-body[data-edit-enhanced="1"] .mechaber-title:empty,
.detail-modal-body[data-edit-enhanced="1"] .mechaber-first-name:empty,
.detail-modal-body[data-edit-enhanced="1"] .mechaber-last-name:empty,
.detail-modal-body[data-edit-enhanced="1"] .mechaber-gerufen:empty,
.detail-modal-body[data-edit-enhanced="1"] .mechaber-city:empty,
.detail-modal-body[data-edit-enhanced="1"] .mechaber-suffix:empty,
.detail-modal-body[data-edit-enhanced="1"] .mechaber-birth-day:empty,
.detail-modal-body[data-edit-enhanced="1"] .mechaber-birth-month:empty,
.detail-modal-body[data-edit-enhanced="1"] .mechaber-birth-year:empty,
.detail-modal-body[data-edit-enhanced="1"] .mechaber-death-day:empty,
.detail-modal-body[data-edit-enhanced="1"] .mechaber-death-month:empty,
.detail-modal-body[data-edit-enhanced="1"] .mechaber-death-year:empty {
    display: inline;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
    min-width: 30px;
    padding: 0 2px;
}

/* Date groups layout */
.mechaber-dates-group {
    display: inline;
    white-space: nowrap;
}

.mechaber-dates-label {
    font-weight: 400;
    opacity: 0.75;
    margin-left: 3px;
}

/* Hide birth/death labels when all date parts are empty and not in edit mode */
.mechaber-dates-group:not(:has(.editable-field:not(:empty))) {
    display: none;
}

.detail-modal-body[data-edit-enhanced="1"] .mechaber-dates-group {
    display: inline !important;
}

/* Mechaber birth/death date fields */
.mechaber-birth-day,
.mechaber-birth-month,
.mechaber-birth-year,
.mechaber-death-day,
.mechaber-death-month,
.mechaber-death-year {
    display: inline;
}

.inline-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.inline-edit-save,
.inline-edit-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.inline-edit-save {
    background: var(--modal-color, #1565c0) !important;
    color: #fff !important;
}

.inline-edit-save:hover {
    background: var(--modal-color, #1565c0) !important;
    filter: brightness(1.1);
    transform: scale(1.12);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--modal-color, #1565c0) 40%, transparent) !important;
}

.inline-edit-save:active {
    transform: scale(0.95);
}

.inline-edit-cancel {
    background: color-mix(in srgb, var(--modal-color, #1565c0) 10%, transparent) !important;
    color: var(--modal-color, #1565c0) !important;
}

.inline-edit-cancel:hover {
    background: color-mix(in srgb, var(--modal-color, #1565c0) 18%, transparent) !important;
    transform: scale(1.12);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--modal-color, #1565c0) 25%, transparent) !important;
}

.inline-edit-cancel:active {
    transform: scale(0.95);
}

.inline-edit-error {
    color: #d32f2f;
    font-size: 12px;
    padding: 2px 0;
}

.edit-success {
    animation: editSuccessFlash 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes editSuccessFlash {
    0% {
        background: color-mix(in srgb, var(--modal-color, #4caf50) 20%, transparent);
        box-shadow: 0 0 12px color-mix(in srgb, var(--modal-color, #4caf50) 40%, transparent);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* ---- Submit Bar (sticky at bottom) ---- */
.edit-submit-bar {
    position: sticky;
    bottom: -30px;
    margin-bottom: -30px;
    z-index: 9999;
    padding: 0;
    background: transparent;
    pointer-events: none;
}

.edit-submit-bar.window-wrapper {
    position: fixed;
    bottom: 0;
    transition: bottom 0.3s ease;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    z-index: 9999999; /* Above player/footer */
}

body.has-audio .edit-submit-bar.window-wrapper {
    bottom: 90px;
}

.edit-submit-bar.in-modal-wrapper {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    z-index: 9999;
}

.edit-submit-bar.in-nigun-modal {
    position: sticky;
    bottom: -20px;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    z-index: 9999;
}

.edit-submit-bar.visible {
    pointer-events: auto;
}

.edit-submit-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--modal-color, var(--primary, #1565c0)), var(--modal-color-dark, var(--primary-deep, #1976d2)));
    border-radius: 0 0 16px 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    animation: submitBarSlideUp 0.3s ease;
    direction: rtl;
}

@keyframes submitBarSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

.edit-submit-count {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
}

.edit-submit-btn {
    background: #fff;
    color: #1565c0;
    border: none;
    border-radius: 8px;
    padding: 8px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

.edit-submit-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.edit-submit-btn:active {
    transform: scale(0.97);
}

.edit-submit-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.edit-submit-btn.is-loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    border: 3px solid rgba(21, 101, 192, 0.25);
    border-top-color: #1565c0;
    border-radius: 50%;
    animation: btn-spinner 0.8s linear infinite;
}

@keyframes btn-spinner {
    to { transform: rotate(360deg); }
}

.edit-cancel-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.edit-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.submit-success {
    background: linear-gradient(135deg, #2e7d32, #43a047) !important;
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
    .inline-edit-input {
        background: var(--bg-secondary, #2a2a2a);
        color: var(--text-primary, #e0e0e0);
        border-color: var(--accent-color, #5a9fe6);
    }

    .inline-edit-cancel {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-muted, #aaa);
    }

    .inline-autocomplete {
        background: var(--bg-secondary, #2a2a2a);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .inline-autocomplete-input {
        color: var(--text-primary, #e0e0e0);
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .inline-autocomplete-item {
        filter: brightness(0.85);
    }

    .inline-autocomplete-item:hover {
        filter: brightness(0.75);
        transform: scale(1.05);
    }

    .tag-remove-btn {
        background: var(--accent-color, #5a9fe6);
    }

    .tag-add-btn {
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--text-muted, #aaa);
    }
}

/* ============================================================
   Add Recording / Add Item Panel
   ============================================================ */
.add-recording-panel {
    position: relative;
    margin: 8px auto;
    max-width: 550px;
    width: 100%;
}

.add-recording-toggle-btn {
    width: 100%;
    padding: 14px 16px;
    border: 2px dashed color-mix(in srgb, var(--modal-color, #4a90d9) 40%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--modal-color, #4a90d9) 5%, transparent);
    color: var(--modal-color, #4a90d9);
    font-family: 'Heboo', 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s, border-radius 0.2s;
    outline: none;
}

/* When panel is open, toggle button becomes the header – squared bottom corners */
.add-recording-panel.panel-open .add-recording-toggle-btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    background: color-mix(in srgb, var(--modal-color, #4a90d9) 10%, transparent);
}

.add-recording-toggle-btn:hover {
    background: color-mix(in srgb, var(--modal-color, #4a90d9) 10%, transparent);
    border-color: var(--modal-color, #4a90d9);
    transform: scale(1.01);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--modal-color, #4a90d9) 15%, transparent);
}

.add-recording-form {
    border: 2px dashed color-mix(in srgb, var(--modal-color, #4a90d9) 40%, transparent);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: color-mix(in srgb, var(--modal-color, #4a90d9) 3%, white);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
}

/* Drop zone + link input connected group */
.add-rec-source-group {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    overflow: hidden;
}

.add-rec-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    border: none;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    min-height: 50px;
    font-family: 'Heboo', 'Heebo', sans-serif;
    color: #888;
}

.add-rec-drop-zone:hover,
.add-rec-drop-zone.drag-over {
    background: color-mix(in srgb, var(--modal-color, #4a90d9) 8%, transparent);
    border-color: var(--modal-color, #4a90d9);
    color: var(--modal-color, #4a90d9);
}

.drop-zone-text {
    font-size: 13px;
}

.drop-zone-filename {
    font-size: 13px;
    color: var(--accent-color, #4a90d9);
    font-weight: 600;
}

.add-rec-link-input,
.add-rec-details-input,
.add-rec-tag-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    font-family: 'Heboo', 'Heebo', sans-serif;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

/* Link input inside source-group: no rounded corners, border connects to drop zone */
.add-rec-source-group .add-rec-link-input {
    border-radius: 0;
    border: none;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.add-rec-link-input:focus,
.add-rec-details-input:focus,
.add-rec-tag-input:focus {
    border-color: var(--modal-color, #4a90d9);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--modal-color, #4a90d9) 15%, transparent);
}

.add-rec-source-group .add-rec-link-input:focus {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--modal-color, #4a90d9) 25%, transparent);
}

/* Removed old add-rec-tags-row classes */

.add-rec-tag-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 100;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--modal-color, #4a90d9) transparent;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.add-rec-tag-dropdown::-webkit-scrollbar {
    width: 6px;
}

.add-rec-tag-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.add-rec-tag-dropdown::-webkit-scrollbar-thumb {
    background: var(--modal-color, #4a90d9);
    border-radius: 3px;
}

.add-rec-dropdown-item {
    display: inline-block;
    margin: 4px;
    padding: 6px 14px;
    background: var(--modal-color, #6b8993);
    color: white;
    border-radius: 15px;
    cursor: pointer;
    font-family: 'Heboo', 'Heebo', sans-serif;
    font-size: 0.85em;
    font-weight: 500;
    direction: rtl;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(107, 137, 147, 0.3);
}

.add-rec-dropdown-item:hover {
    transform: scale(1.05);
    filter: brightness(0.9);
}

.add-rec-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.add-rec-selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--modal-color, #4a90d9);
    color: #fff;
    border-radius: 12px;
    font-family: 'Heboo', 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.add-rec-tag-x {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
}

.add-rec-tag-x:hover {
    color: #fff;
}

.inline-empty-placeholder {
    font-size: 0.9em;
    color: var(--text-tertiary, #999);
    pointer-events: none;
    font-style: italic;
    opacity: 0.7;
}

.autocomplete-dropdown,
.addinfo-autocomplete-item {
    font-family: inherit !important;
}

/* ============================================================
   List-item remove buttons — × on song rows, mechaber cards, etc.
   ============================================================ */
.list-item-remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: rgba(220, 53, 69, 0.85);
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    font-size: 14px;
    line-height: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    opacity: 0.7;
}

.list-item-remove-btn:hover {
    opacity: 1;
    transform: scale(1.15);
    background: #dc3545;
}

.list-item-remove-btn.remove-active {
    background: #28a745;
    opacity: 1;
}

/* Removed item visual state */
.list-item-removed {
    opacity: 0.35 !important;
    text-decoration: line-through;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Keep the × button clickable even on removed items */
.list-item-removed .list-item-remove-btn {
    pointer-events: auto;
    opacity: 1;
}

/* ============================================================
   Mechaber Hero Central Edit UI
   ============================================================ */
.mechaber-hero-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    opacity: 0.75;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
}

.mechaber-hero-edit-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    opacity: 1;
    transform: scale(1.1);
}

.mechaber-hero-edit-btn svg {
    width: 14px;
    height: 14px;
}

.mechaber-hero-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    justify-content: center;
}

.mechaber-hero-save,
.mechaber-hero-cancel {
    padding: 3px 12px;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.mechaber-hero-save {
    background: rgba(40, 167, 69, 0.9);
    color: white;
    font-weight: 600;
}

.mechaber-hero-save:hover {
    background: #218838;
}

.mechaber-hero-cancel {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.mechaber-hero-cancel:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Editing state — keep spans inline */
.mechaber-hero-editing {
    display: inline !important;
}

/* Structured form for central hero editing */
.mechaber-hero-edit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(0, 0, 0, 0.15);
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    max-width: 600px;
    margin: 8px auto 0;
    z-index: 10;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mechaber-hero-edit-form.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mechaber-edit-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    justify-content: center;
    width: 100%;
}

.mechaber-edit-group-dates {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.mechaber-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.mechaber-form-field label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    padding-right: 2px;
}

.mechaber-hero-field-input {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    color: #333;
    padding: 4px 6px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
    height: 28px;
    box-sizing: border-box;
    width: 100%;
}

select.mechaber-hero-field-input {
    padding: 2px 4px;
    cursor: pointer;
}

.mechaber-hero-field-input:focus {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.mechaber-hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    justify-content: center;
}

.btn-icon-only {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.inline-edit-image-trigger {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    background: var(--accent-color, #4a90d9);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    border: 2px solid white;
    padding: 0;
    z-index: 10;
}

.inline-edit-image-trigger svg {
    width: 14px;
    height: 14px;
}

/* Fix clipping of remove buttons on related cards in edit mode */
.editable-tag-section .playlist-card,
.editable-tag-section .related-item-card {
    overflow: visible !important;
}

/* ============================================================
   Inline Recording Selection (playlist → recording mapping)
   ============================================================ */

/* Highlighted frame around the recordings section when selection is active */
.nigun-recordings-list.rec-selection-active {
    border: 2px solid var(--color-playlist, #e65100);
    border-radius: 12px;
    padding: 8px;
    margin: 8px 0;
    background: rgba(230, 81, 0, 0.04);
    box-shadow: 0 0 0 4px rgba(230, 81, 0, 0.08),
                0 4px 16px rgba(230, 81, 0, 0.1);
    transition: all 0.3s ease;
    animation: recSelectionPulse 2s ease-in-out 1;
}

@keyframes recSelectionPulse {
    0%   { box-shadow: 0 0 0 4px rgba(230, 81, 0, 0.08), 0 4px 16px rgba(230, 81, 0, 0.1); }
    50%  { box-shadow: 0 0 0 8px rgba(230, 81, 0, 0.15), 0 4px 20px rgba(230, 81, 0, 0.18); }
    100% { box-shadow: 0 0 0 4px rgba(230, 81, 0, 0.08), 0 4px 16px rgba(230, 81, 0, 0.1); }
}

/* Hint label above recordings */
.rec-selection-hint {
    text-align: center;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--color-playlist, #e65100);
    padding: 6px 12px;
    margin-bottom: 6px;
    direction: rtl;
    background: rgba(230, 81, 0, 0.06);
    border-radius: 8px;
    animation: recHintFadeIn 0.4s ease;
}

@keyframes recHintFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Recording items in selection mode — cursor + hover effect */
.rec-selection-active .song-item-recording {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    border-radius: 10px;
    position: relative;
}

.rec-selection-active .song-item-recording:hover {
    background: rgba(230, 81, 0, 0.06);
    border-color: rgba(230, 81, 0, 0.25);
}

/* Selected recording item — colored border + checkmark */
.rec-selection-active .song-item-recording.rec-picker-selected {
    border-color: var(--color-playlist, #e65100);
    background: rgba(230, 81, 0, 0.08);
    box-shadow: 0 2px 10px rgba(230, 81, 0, 0.15);
}

/* Checkmark badge on selected recording */
.rec-selection-active .song-item-recording.rec-picker-selected::after {
    content: '✓';
    position: absolute;
    top: -6px;
    left: -6px;
    width: 22px;
    height: 22px;
    background: var(--color-playlist, #e65100);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(230, 81, 0, 0.35);
    border: 2px solid white;
    z-index: 5;
    animation: recCheckIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes recCheckIn {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* ============================================================
   Recording-level inline editing
   ============================================================ */

/* In edit mode, make recordings taller and wrap content */
.rec-edit-mode .song-item-recording {
    flex-wrap: wrap;
    min-height: auto;
    padding-bottom: 8px;
    cursor: default;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.rec-edit-mode .song-item-recording:hover {
    background: rgba(255,255,255,0.04);
}

/* Hide standard display tags in edit mode */
.rec-edit-mode .song-item-recording .song-item-rec-tags {
    display: none !important;
}

/* Edit panel inside each recording */
.rec-edit-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 6px 6px 34px;
    border-top: 1px dashed rgba(255,255,255,0.1);
    margin-top: 6px;
    animation: recPanelIn 0.3s ease-out;
}

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

/* Row wrappers */
.rec-edit-row {
    position: relative;
    display: flex;
    gap: 8px;
    width: 100%;
}

.rec-edit-row-details {
    width: 100%;
}

.rec-edit-row-tags {
    flex-wrap: wrap;
    align-items: center;
}

/* Individual field wrapper */
.rec-edit-field {
    display: flex;
    align-items: center;
}

.rec-edit-row-details .rec-edit-field {
    flex: 1;
    width: 100%;
}

/* Text input */
.rec-edit-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid color-mix(in srgb, var(--rec-field-color, white) 30%, transparent);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--rec-field-color, #4a90d9);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    direction: rtl;
    outline: none;
    transition: all 0.2s;
}

.rec-edit-input:focus {
    background: rgba(255,255,255,0.12);
    border-color: var(--rec-field-color, rgba(255,255,255,0.4));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rec-field-color, white) 20%, transparent);
}

.rec-edit-input::placeholder {
    color: var(--rec-field-color, #4a90d9);
    opacity: 0.7;
}

/* White text when recording is playing */
.active-recording .rec-edit-input {
    color: white;
}
.active-recording .rec-edit-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Tags container */
.rec-edit-tags {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 28px;
}

/* Individual tag pill overrides to blend with normal tags */
.rec-edit-tag {
    cursor: default !important;
    animation: recTagIn 0.2s ease-out;
    padding-left: 8px; /* Room for the X */
}

@keyframes recTagIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

.rec-edit-tag-x {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
    margin-inline-start: 4px;
    margin-inline-end: -4px;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
}

.rec-edit-tag-x:hover {
    color: white;
}

/* Add button overrides */
.rec-edit-add-btn {
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.95);
    color: #444;
}

.rec-edit-add-btn:hover {
    opacity: 1;
    color: var(--rec-field-color, #4a90d9);
    border-color: var(--rec-field-color, #4a90d9);
    background: color-mix(in srgb, var(--rec-field-color, #4a90d9) 10%, white);
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .rec-edit-panel {
        padding-left: 10px;
    }
    
    .rec-edit-field {
        flex-direction: column;
        gap: 3px;
    }
    
    .rec-edit-label {
        min-width: unset;
        padding-top: 0;
    }
}

/* Playlists are auto-populated, so they shouldn't show in edit mode */
#nigunModalBody[data-edit-enhanced="1"] .nigun-detail-box.box-playlists,
.detail-modal-body[data-edit-enhanced="1"] .nigun-detail-box.box-playlists {
    display: none !important;
}.detail-description.empty-description-placeholder { margin-bottom: 0 !important; }



/* NEW PROGRESS BAR AND ANIMATION STYLES */
.edit-submit-btn.is-loading {
    position: relative;
    color: inherit !important;
    pointer-events: none;
}

.edit-submit-btn.is-loading::after {
    display: none !important;
}

.edit-submit-btn.is-loading::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
    width: 0%;
    border-radius: 8px;
    animation: btn-progress 10s cubic-bezier(0.1, 0.7, 0.1, 1) forwards;
}

.edit-submit-btn.is-success {
    position: relative;
    pointer-events: none;
}

.edit-submit-btn.is-success::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
    width: 100%;
    border-radius: 8px;
    animation: btn-progress-finish 0.3s ease-in forwards;
}

.edit-submit-btn-text {
    position: relative;
    z-index: 2;
    display: inline-block;
}

@keyframes btn-progress {
    0% { width: 0%; }
    10% { width: 30%; }
    50% { width: 60%; }
    90% { width: 85%; }
    100% { width: 95%; }
}

@keyframes btn-progress-finish {
    from { width: 95%; }
    to { width: 100%; }
}

@keyframes submitBarSlideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.submit-flying-star {
    position: absolute;
    font-size: 16px;
    color: gold;
    pointer-events: none;
    z-index: 99;
    animation: submitFlyStar 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes submitFlyStar {
    0% { transform: translate(-50%, -50%) scale(0.5) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(var(--rot)); opacity: 0; }
}

/* ============================================================
   @-mention autocomplete dropdown
   ============================================================ */

.inline-autocomplete.mention-autocomplete {
    position: fixed;
    z-index: 100000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    min-width: 280px;
    max-width: 380px;
    max-height: 350px;
    overflow-y: auto;
    direction: rtl;
    font-family: 'Heebo', sans-serif;
    padding: 8px 4px;
}

/* Custom scrollbar for autocomplete box */
.mention-autocomplete::-webkit-scrollbar {
    width: 6px;
}
.mention-autocomplete::-webkit-scrollbar-track {
    background: transparent;
}
.mention-autocomplete::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}
.mention-autocomplete::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.24);
}

.mention-autocomplete .mention-empty,
.mention-autocomplete .inline-autocomplete-empty {
    padding: 14px 16px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

.mention-autocomplete .mention-section + .mention-section {
    margin-top: 8px;
}

/* Category Variable Mapping */
.mention-autocomplete .source-nigunim { --category-color: var(--color-nigun); }
.mention-autocomplete .source-mechabrim { --category-color: var(--color-mechaber); }
.mention-autocomplete .source-verter { --category-color: var(--color-verter); }
.mention-autocomplete .source-chatzeros { --category-color: var(--color-chatzer); }
.mention-autocomplete .source-piyutim { --category-color: var(--color-piyut); }
.mention-autocomplete .source-zmanim { --category-color: var(--color-zman); }
.mention-autocomplete .source-playlists { --category-color: var(--color-playlist); }
.mention-autocomplete .source-collections { --category-color: var(--color-collection); }
.mention-autocomplete .source-albums { --category-color: var(--color-album); }
.mention-autocomplete .source-documents { --category-color: var(--color-document, #00838f); }
.mention-autocomplete .source-resources { --category-color: var(--color-resource, #5e548e); }

.mention-autocomplete .mention-section-header {
    padding: 4px 10px;
    font-size: 0.72em;
    font-weight: 700;
    color: var(--category-color, #888);
    background: color-mix(in srgb, var(--category-color, #888) 12%, rgba(255, 255, 255, 0.7));
    margin: 6px 8px 4px 8px;
    border-radius: 6px;
    text-align: right;
    display: inline-block;
    border: 1px solid color-mix(in srgb, var(--category-color, #888) 15%, transparent);
}

.mention-autocomplete .mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 4px 8px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.88em;
    font-weight: 600;
    text-align: right;
    
    /* Soft pill tag style at rest */
    background: color-mix(in srgb, var(--category-color, #888) 8%, rgba(255, 255, 255, 0.9));
    color: color-mix(in srgb, var(--category-color, #888) 85%, #1a1a1a);
    border: 1px solid color-mix(in srgb, var(--category-color, #888) 18%, transparent);
    
    /* Smooth transitions */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mention-autocomplete .mention-item:hover,
.mention-autocomplete .mention-item.selected {
    background: var(--category-color, #888);
    color: #ffffff;
    border-color: var(--category-color, #888);
    transform: scale(1.02);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--category-color, #888) 25%, transparent);
}

.mention-autocomplete .mention-item-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--category-color, #888);
    transition: all 0.2s ease;
}

.mention-autocomplete .mention-item:hover .mention-item-dot,
.mention-autocomplete .mention-item.selected .mention-item-dot {
    background: #ffffff;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.mention-autocomplete .mention-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-autocomplete .mention-section-more {
    padding: 4px 16px 8px 16px;
    font-size: 0.75em;
    color: #999;
    font-weight: 500;
    text-align: right;
}

/* Mention play/pause button */
.mention-autocomplete .mention-play-btn {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: var(--category-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 0;
}

.mention-autocomplete .mention-play-btn:hover {
    transform: scale(1.15);
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.mention-autocomplete .mention-item:hover .mention-play-btn,
.mention-autocomplete .mention-item.selected .mention-play-btn {
    background: rgba(255, 255, 255, 0.9);
    color: var(--category-color);
}

.mention-autocomplete .mention-item:hover .mention-play-btn:hover,
.mention-autocomplete .mention-item.selected .mention-play-btn:hover {
    background: #ffffff;
    transform: scale(1.15);
}

.mention-autocomplete .mention-play-btn .pause-icon {
    display: none;
}

.mention-autocomplete .mention-play-btn.playing .play-icon {
    display: none;
}

.mention-autocomplete .mention-play-btn.playing .pause-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mechaber Hero edit step transitions */
.hero-step-transition-el {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-element-fade-out {
    opacity: 0 !important;
    transform: scale(0.96) translateY(-8px) !important;
    pointer-events: none !important;
}

.hero-element-fade-in-prep {
    opacity: 0 !important;
    transform: scale(0.96) translateY(-8px) !important;
}

.hero-element-fade-in {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
}


/* ============================================================
   Merge Page — Grid layout with standard song items
   ============================================================ */

.merge-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

/* Remove the global blue gradient background, keep group backgrounds only */
.merge-page.page-theme-nigun {
    background: transparent !important;
}

.merge-page .subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-size: 14px;
    margin-top: 4px;
}
.merge-subtitle-text {
    color: var(--text-primary, #fff);
}

.merge-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
}

/* ---- Merge Search Bar ---- */
.mg-search-bar {
    max-width: 400px;
    margin: 12px auto 8px;
    padding: 0 16px;
}
.mg-search-input {
    width: 100%;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--accent, #4a90d9);
    background: #fff;
    color: var(--accent, #4a90d9);
    font-size: 1rem;
    font-family: inherit;
    direction: rtl;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.mg-search-input::placeholder { color: rgba(74,144,217,0.5); }
.mg-search-input:focus {
    border-color: var(--accent, #4a90d9);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(74,144,217,0.15);
}

/* ---- Recording-scan button (legacy; bar removed — fingerprint clusters
   now surface automatically in the main list) ---- */
.mg-rec-scan-btn {
    padding: 8px 20px;
    background: var(--accent, #4a90d9);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    direction: rtl;
    transition: background 0.2s, transform 0.1s;
}
.mg-rec-scan-btn:hover { background: #357abd; }
.mg-rec-scan-btn:active { transform: scale(0.97); }
.mg-rec-scan-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Duplicate Recording Panel ---- */
.mg-rec-dup-panel {
    margin: 8px 0 16px;
}
.mg-rec-dup-header {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 14px;
    direction: rtl;
}
.mg-rec-dup-group {
    background: var(--card-bg, #fff);
    border: 1.5px solid #e85d50;
    border-radius: 16px;
    padding: 18px 20px 14px;
    margin-bottom: 18px;
    direction: rtl;
    transition: opacity 0.3s, transform 0.3s;
}
.mg-rec-dup-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary, #222);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mg-rec-dup-name {
    color: var(--color-nigun, #4a7cc9);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}
.mg-rec-dup-name:hover { color: var(--color-nigun-dark, #2d5a9e); text-decoration: underline; }
.mg-rec-dup-reason {
    font-size: 0.72rem;
    font-weight: 400;
    background: #ffe0de;
    color: #c0392b;
    border-radius: 6px;
    padding: 2px 8px;
}
/* A fingerprint match = the SAME recording, with full confidence. It gets a
   distinct certain ✓ badge (green, not the red heuristic "reason" pill) so an
   editor can tell at a glance it is definite, not a guess. */
.mg-rec-dup-certain {
    font-size: 0.74rem;
    font-weight: 700;
    background: #1e7d34;
    color: #fff;
    border-radius: 6px;
    padding: 3px 10px;
    letter-spacing: .2px;
}
/* The whole group is also accented green to set it apart from heuristic
   (probable) duplicate groups. */
.mg-rec-dup-group--certain {
    border-color: #1e7d34;
    box-shadow: 0 0 0 1px rgba(30, 125, 52, .35) inset;
}
.mg-rec-dup-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 600px) {
    .mg-rec-dup-cards { grid-template-columns: 1fr; }
}
.mg-rec-card {
    background: #f8f9fb;
    border: 1px solid #dde1e9;
    border-radius: 12px;
    padding: 12px 14px;
    transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.mg-rec-card.is-keep {
    border-color: rgba(124, 58, 237, 0.6);
    background: rgba(124, 58, 237, 0.06);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.14);
}
.mg-rec-card.is-dimmed { opacity: 0.6; }
.mg-rec-keep {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #6d28d9;
    margin-bottom: 8px;
    line-height: 1.4;
}
.mg-rec-card.is-dimmed .mg-rec-keep { color: #8a93a6; }
.mg-rec-keep input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #7c3aed; cursor: pointer; }
.mg-rec-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.mg-rec-card-info { flex: 1; min-width: 0; }
.mg-rec-card-name {
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 8px;
    color: #333;
    word-break: break-all;
}
.mg-rec-card-meta {
    font-size: 0.78rem;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mg-rec-card-meta span { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.rec-meta-label { color: #888; font-weight: 600; min-width: 55px; flex-shrink: 0; }
/* Play button inherits .song-play-btn-new from songs page */
.mg-rec-play-btn { flex-shrink: 0; margin-top: 2px; }
.mg-rec-dup-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
.mg-rec-merge-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.9);
    color: #555;
    border: 1px solid #dde1e9;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.mg-rec-merge-btn:hover { background: #27ae60; color: #fff; border-color: #27ae60; }
.mg-rec-merge-btn:active { transform: scale(0.93); }
.mg-rec-merge-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mg-rec-dismiss-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #999;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.mg-rec-dismiss-btn:hover { color: #e74c3c; background: rgba(231,76,60,0.08); }

/* ---- Empty ---- */
.merge-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; gap: 12px; color: var(--text-secondary); }
.merge-empty-icon { font-size: 48px; color: var(--accent); opacity: 0.6; }
.merge-empty h2 { margin: 0; font-size: 20px; color: var(--text-primary); }
.merge-empty p { margin: 0; font-size: 14px; }

/* ---- Group ---- */
.mg-group {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 40px; /* Increased separation heavily */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: opacity 0.3s, transform 0.3s, height 0.3s, margin 0.3s, padding 0.3s;
}
.mg-group.mg-success {
    border-color: #4ade80;
    background: var(--card-bg, #ffffff);
    box-shadow: 0 4px 24px rgba(74, 222, 128, 0.15);
}

.mg-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06));
    direction: rtl;
}
.mg-group-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.mg-group-count {
    font-size: 13px;
    color: white;
    background: var(--accent, #7c3aed);
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
}

/* ---- Grid — 3 per row for suggestions, targets full width ---- */
.mg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    direction: rtl;
}

@media (max-width: 900px) { .mg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mg-grid { grid-template-columns: repeat(1, 1fr); } }

/* ---- Card Wrapper ---- */
.mg-card-wrapper {
    background: var(--bg-primary, rgba(128,128,128,0.04));
    border: 1px solid var(--border-color, rgba(0,0,0,0.06));
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0; /* CRITICAL: prevents grid item from expanding tracks unexpectedly */
    transition: border-color 0.2s, opacity 0.3s, transform 0.3s, box-shadow 0.2s;
}
.mg-card-wrapper:hover {
    border-color: var(--accent, #7c3aed);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Primary (target/victim) song styling */
.mg-card-wrapper.mg-target {
    border: 2px solid rgba(124, 58, 237, 0.5);
    background: rgba(124, 58, 237, 0.03);
    /* Make victim song span full width to differentiate it */
    grid-column: 1 / -1;
}
.mg-card-wrapper.mg-target:hover { border-color: rgba(124, 58, 237, 0.8); }

/* No media queries needed for mg-target since it uses 1 / -1 (full width) */

/* ============================================================
   CARD INNER - the white/colored container holding checkbox + song
   ============================================================ */
.mg-card-inner {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: var(--color-nigun-pale, #eef3fb); /* use the standard nigun pale color */
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(74, 124, 201, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

/* Hover border — covers the whole card including checkbox */
.mg-card-inner::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 10px;
    border: 2px solid var(--color-nigun, #4a7cc9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 2;
}
.mg-card-inner:hover::after {
    opacity: 1;
}
.mg-card-inner:hover {
    box-shadow: 0 6px 20px rgba(74, 124, 201, 0.35);
}

/* Active / playing — blue overlay over full card including checkbox */
.mg-card-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--color-nigun, #4a7cc9);
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}
.mg-card-inner:has(.song-item.active)::before {
    opacity: 1;
}

/* Ensure content sits above the overlay */
.mg-card-inner > * {
    position: relative;
    z-index: 1;
}

/* ---- Checkbox badge (replaces the number badge slot) ---- */
.mg-card-check {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    background: rgba(74, 124, 201, 0.12);
    border-radius: 6px;
    margin-right: 12px;
    margin-left: 0;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
.mg-card-check:hover { background: rgba(74, 124, 201, 0.22); }

/* Checkbox adapts when card is playing */
.mg-card-inner:has(.song-item.active) .mg-card-check {
    background: rgba(255, 255, 255, 0.25);
}
.mg-card-inner:has(.song-item.active) .mg-card-check:hover {
    background: rgba(255, 255, 255, 0.35);
}

.mg-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--primary, #7c3aed);
    cursor: pointer;
}

/* ---- Host for standard song-item ---- */
.mg-song-item-host {
    flex: 1;
    min-width: 0;
}

/* Strip the song item's own background/border/shadow — the card-inner provides all that */
.mg-song-item-host .song-item {
    margin: 0;
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-right: 0;
    border-radius: 0;
}

/* Hide the song-item's own active overlay — card-inner handles it */
.mg-song-item-host .song-item::before,
.mg-song-item-host .song-item::after {
    display: none !important;
}

/* Song tree wrap on merge page */
.mg-song-item-host .song-name {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3;
}

/* ---- Rename row ---- */
.mg-rename-row {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, rgba(0,0,0,0.06));
    direction: rtl;
}
.mg-rename-input-wrap {
    display: flex;
    gap: 6px;
}
.mg-rename-input {
    flex: 1; min-width: 0;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1.5px solid var(--border-color, rgba(0,0,0,0.12));
    background: var(--bg-secondary, rgba(0,0,0,0.03));
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    direction: rtl;
    transition: border-color 0.2s, background 0.2s;
}
.mg-rename-input:focus { outline: none; border-color: var(--accent, #7c3aed); }
.mg-rename-input.mg-rename-ready {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.06);
}
.mg-rename-btn {
    width: 42px; height: 42px; min-width: 42px;
    border-radius: 10px;
    border: 1.5px solid #22c55e;
    background: #22c55e;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    transition: background 0.15s, opacity 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.mg-rename-btn:hover:not(:disabled) { background: #16a34a; }
.mg-rename-btn:disabled { opacity: 0.2; cursor: default; background: var(--border-color, #ccc); border-color: var(--border-color, #ccc); }

/* Batch rename button (inline in group actions row) */
.mg-batch-rename-btn {
    padding: 8px 20px; border-radius: 10px; border: 1.5px solid var(--color-nigun, #4a7cc9);
    background: var(--color-nigun, #4a7cc9); color: #fff; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.mg-batch-rename-btn:hover { opacity: 0.85; }
.mg-batch-rename-btn:disabled { opacity: 0.4; cursor: default; }

.mg-suggestions {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.mg-sug {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 14px;
    border: 1px solid rgba(124, 58, 237, 0.3);
    background: rgba(124, 58, 237, 0.08); /* slight purple tint, works on any theme */
    color: var(--accent, #7c3aed);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    direction: rtl;
    white-space: nowrap; /* CRITICAL: Prevent text from stacking vertically */
}
.mg-sug:hover { background: rgba(124, 58, 237, 0.2); }

/* ---- Group actions ---- */
.mg-group-actions {
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, rgba(0,0,0,0.08));
}
.mg-merge-btn {
    padding: 10px 24px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.2);
}
.mg-merge-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}
.mg-merge-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.1); }

/* Secondary action: keep the nigunim separate, merge only the shared recording */
.mg-keepsep-btn {
    padding: 10px 18px;
    border-radius: 12px;
    border: 1.5px solid rgba(124, 58, 237, 0.5);
    background: transparent;
    color: #7c3aed;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: transform 0.15s, background 0.2s;
}
.mg-keepsep-btn:hover:not(:disabled) { transform: translateY(-1px); background: rgba(124, 58, 237, 0.1); }
.mg-keepsep-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.4); }
.mg-skip-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mg-skip-btn:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }

/* ---- Merge dialog overlay ---- */
.mg-dialog-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    animation: mgFadeIn 0.2s ease;
}
@keyframes mgFadeIn { from { opacity: 0; } to { opacity: 1; } }

.mg-dialog {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    border-radius: 20px;
    padding: 0;
    max-width: 440px; width: 92%;
    direction: rtl;
    animation: mgSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 25px 60px rgba(0,0,0,0.2), 0 0 40px rgba(124, 58, 237, 0.08);
    overflow: hidden;
}
@keyframes mgSlideUp { from { transform: translateY(30px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.mg-dialog-title {
    font-size: 18px; font-weight: 700; color: var(--text-primary);
    padding: 20px 24px 14px; text-align: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(139, 92, 246, 0.03));
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06));
}
.mg-dialog-options { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 8px; }
.mg-dialog-option {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--bg-secondary, rgba(0,0,0,0.03));
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    cursor: pointer; font-size: 14px; color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.mg-dialog-option:hover {
    border-color: rgba(124, 58, 237, 0.4);
    background: rgba(124, 58, 237, 0.06);
}
.mg-dialog-option:has(input:checked) {
    border-color: rgba(124, 58, 237, 0.6);
    background: rgba(124, 58, 237, 0.1);
}
.mg-dialog-option input[type="radio"] { accent-color: var(--accent, #7c3aed); width: 16px; height: 16px; }
.mg-dialog-option span { flex: 1; }
.mg-dialog-custom {
    flex: 1; padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    background: var(--bg-primary, rgba(0,0,0,0.02));
    color: var(--text-primary); font-size: 14px; font-family: inherit; direction: rtl;
    transition: border-color 0.2s;
}
.mg-dialog-custom:focus { outline: none; border-color: var(--accent, #7c3aed); box-shadow: 0 0 8px rgba(124, 58, 237, 0.15); }
.mg-dialog-info { font-size: 12px; color: var(--text-secondary); text-align: center; padding: 8px 20px 0; }
.mg-dialog-actions { display: flex; gap: 10px; justify-content: center; padding: 16px 20px 20px; }
.mg-dialog-confirm {
    padding: 10px 28px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #7c3aed, #6d28d9); color: white;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
}
.mg-dialog-confirm:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4); }
.mg-dialog-confirm:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.mg-dialog-cancel {
    padding: 10px 22px; border-radius: 10px;
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px; cursor: pointer; font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.mg-dialog-cancel:hover { background: var(--bg-secondary, rgba(0,0,0,0.05)); color: var(--text-primary); }

/* ---- Keep-row selection section in merge dialog ---- */
.mg-dialog-keep-section {
    padding: 0 20px 8px;
    border-top: 1px solid var(--border-color, rgba(0,0,0,0.06));
    margin-top: 8px;
}
.mg-dialog-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 12px 0 8px;
    text-align: center;
}
.mg-keep-option span {
    font-size: 12px;
}

/* ---- Load more button ---- */
.mg-load-more-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.05)) !important;
    color: var(--accent, #7c3aed) !important;
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    padding: 10px 28px !important;
}
.mg-load-more-btn:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0.1)) !important;
}

/* ---- Wave bar inside merge cards/groups ---- */
.mg-group .mg-wave-bar {
    height: 3px;
    border-radius: 0 0 12px 12px;
}
.mg-group .mg-wave-bar::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(124, 58, 237, 0.3) 25%,
        rgba(124, 58, 237, 0.7) 50%,
        rgba(124, 58, 237, 0.3) 75%,
        transparent 100%);
}
.mg-card-wrapper .mg-wave-bar {
    border-radius: 0 0 10px 10px;
}

/* ---- Same recording checkbox ---- */
.mg-same-rec-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #15803d;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    white-space: nowrap;
    transition: opacity 0.2s;
}
.mg-same-rec-label:has(input:not(:checked)) {
    color: #6b7280;
    background: rgba(107, 114, 128, 0.08);
    border-color: rgba(107, 114, 128, 0.2);
}
.mg-same-rec-check {
    accent-color: #22c55e;
    width: 15px;
    height: 15px;
}

/* ---- Confidence badge ---- */
.mg-confidence-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Certain duplicate: confirmed by acoustic fingerprint (same sound) */
.mg-confidence-badge.mg-confidence-certain {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
    color: #fff;
    border: 1px solid rgba(5, 150, 105, 0.6);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    font-weight: 700;
}
.mg-confidence-badge.mg-confidence-high {
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.mg-confidence-badge.mg-confidence-medium {
    background: rgba(234, 179, 8, 0.15);
    color: #a16207;
    border: 1px solid rgba(234, 179, 8, 0.3);
}
.mg-confidence-badge.mg-confidence-low {
    background: rgba(249, 115, 22, 0.12);
    color: #c2410c;
    border: 1px solid rgba(249, 115, 22, 0.25);
}
.mg-confidence-badge.mg-confidence-unlikely {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Group border tint by confidence level */
.mg-group.mg-confidence-certain {
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25), 0 4px 14px rgba(16, 185, 129, 0.12);
}
.mg-group.mg-confidence-high {
    border-color: rgba(34, 197, 94, 0.25);
}
.mg-group.mg-confidence-medium {
    border-color: rgba(234, 179, 8, 0.25);
}
.mg-group.mg-confidence-low {
    border-color: rgba(249, 115, 22, 0.2);
}
.mg-group.mg-confidence-unlikely {
    border-color: rgba(239, 68, 68, 0.15);
    opacity: 0.75;
}

/* ---- Signal pills row ---- */
.mg-signals-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    direction: rtl;
}
.mg-signal {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    cursor: default;
}
.mg-signal.mg-sig-match {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.mg-signal.mg-sig-conflict {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.mg-signal.mg-sig-neutral {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary, #64748b);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* =========================================================================
   upload Upload Page Styles
   ========================================================================= */

.upload-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    color: var(--text-primary);
}

/* Remove the global page-theme background, keep only the title bar colored */
.upload-page-container.page-theme-nigun {
    background: transparent !important;
}

.upload-page-container .page-title {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: 1.5rem;
}

.upload-page-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Side-by-side dropzones */
.upload-dropzones-row {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.upload-dropzone-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.upload-dropzone-column .upload-dropzone-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.upload-dropzone-column .upload-dropzone {
    flex: 1;
}

.upload-dropzones-divider {
    width: 1px;
    background: var(--border-color);
    margin: 0 1.5rem;
    align-self: stretch;
}

/* Column Headers */
.upload-column-header {
    text-align: center;
    padding: 1.25rem 1rem 1rem;
}

.upload-column-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

.upload-header-nigunim .upload-column-title {
    color: var(--color-nigun);
}

.upload-header-recordings .upload-column-title {
    color: var(--color-music);
}

.upload-column-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Dropzone text elements */
.upload-dropzone-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.25rem;
}

.upload-dropzone-subtext {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}

@media (max-width: 700px) {
    .upload-dropzones-row {
        flex-direction: column;
        gap: 1.5rem;
    }

    .upload-dropzones-divider {
        width: auto;
        height: 1px;
        margin: 0;
    }

    .upload-column-title {
        font-size: 1.35rem;
    }
}

/* Dropzone */
.upload-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    padding: 3rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 2rem;
}

.upload-dropzone.dragover {
    border-color: var(--primary);
    background: rgba(var(123, 31, 162), 0.1);
}

.upload-dropzone.has-files {
    padding: 2rem;
}

.upload-file-hidden {
    display: none;
}

.upload-upload-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    color: var(--primary);
    display: block;
}

/* Cloud Folder Import — connected field (mirrors addinfo-file-link-input pattern) */
.upload-dropzone-group {
    margin-bottom: 2rem;
}

.upload-dropzone-group .upload-dropzone {
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
}

.upload-dropzone-hint {
    font-size: 0.8em;
    color: var(--primary);
    opacity: 0.6;
    margin-top: 0.25rem;
}

.upload-cloud-connected {
    display: flex;
    align-items: stretch;
}

.upload-cloud-url-input {
    flex: 1;
    padding: 14px 16px;
    border: 2px solid #d1d5db;
    border-top: 1px dashed #d1d5db;
    border-left: none;
    border-radius: 0 0 12px 0;
    font-size: 0.95em;
    font-family: inherit;
    background: white;
    color: var(--text-primary);
    direction: ltr;
    text-align: left;
    transition: all 0.25s ease;
    box-sizing: border-box;
    outline: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-cloud-url-input::placeholder {
    direction: rtl;
    text-align: right;
    color: var(--primary);
    opacity: 0.6;
}

.upload-cloud-url-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(123, 31, 162, 0.1), 0 4px 12px rgba(123, 31, 162, 0.08);
    z-index: 1;
    position: relative;
}

.upload-cloud-url-input.link-valid {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.05);
}

.upload-cloud-url-input.link-invalid {
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.05);
}

.upload-cloud-fetch-btn {
    padding: 14px 20px;
    background: var(--primary);
    color: white;
    border: 2px solid var(--primary);
    border-top: 1px solid var(--primary);
    border-radius: 0 0 0 12px;
    font-size: 0.9em;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, background 0.2s;
    flex-shrink: 0;
}

.upload-cloud-fetch-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #bdbdbd;
    border-color: #bdbdbd;
}

.upload-cloud-fetch-btn:not(:disabled):hover {
    opacity: 0.9;
}

.upload-cloud-fetch-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.upload-cloud-status {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.upload-cloud-status.loading {
    background: #e3f2fd;
    color: #1565c0;
}

.upload-cloud-status.success {
    background: #e8f5e9;
    color: #2e7d32;
}

.upload-cloud-status.warning {
    background: #fff3e0;
    color: #e65100;
}

.upload-cloud-status.error {
    background: #fce4ec;
    color: #c62828;
}

/* Global Settings */
.upload-global-settings {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.upload-section-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    color: var(--primary);
}

.upload-section-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-right: 0.5rem;
}

.upload-global-settings h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.upload-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .upload-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Files Grid */
.upload-files-container {
    margin-top: 2rem;
}

.upload-files-container {
    display: none;
    margin-top: 2rem;
}

.upload-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.upload-files-header h2 {
    font-size: 1.5rem;
}

.upload-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    line-height: 1;
}

.upload-btn-primary {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary-deep);
}

.upload-btn-upload-all {
    background: var(--primary);
    color: #ffffff !important;
    font-size: 1.15rem;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--primary-deep);
}

.upload-btn-upload-all:hover {
    background: var(--primary-deep);
    color: #ffffff !important;
}

.upload-option-btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.upload-btn-secondary {
    background: #f3f4f6;
    color: var(--text-primary);
}

.upload-btn:hover {
    opacity: 0.9;
}

.upload-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.upload-files-grid.uploading-mode {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.upload-files-grid.uploading-mode .upload-card {
    padding: 0.5rem 0.75rem;
}

.upload-files-grid.uploading-mode .upload-card.status-uploading {
    border-color: var(--color-nigun, #c8a96e);
    background: rgba(200, 169, 110, 0.08);
    box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.2);
}

.upload-card-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.upload-card-progress-bar-fill {
    height: 100%;
    background: var(--color-nigun, #c8a96e);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

/* File Card */
.upload-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.upload-card.status-success {
    border-color: #2e7d32;
    background: rgba(46, 125, 50, 0.05);
}

.upload-card.status-error {
    border-color: #d32f2f;
    background: rgba(211, 47, 47, 0.05);
}

.upload-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.upload-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

.upload-card-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.upload-card-remove:hover {
    color: #d32f2f;
}

.upload-card-body label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.upload-card-name-input {
    width: 100%;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface-2);
    color: var(--text-primary);
}

.upload-card-status-indicator {
    font-size: 0.85rem;
    font-weight: bold;
    margin-top: 0.5rem;
    min-height: 1.2rem;
}

.upload-card-status-header {
    margin: -1rem -1rem 0.75rem -1rem;
    padding: 0.35rem 1rem;
    font-weight: 700;
    font-size: 0.78rem;
    color: white;
    text-align: center;
    border-radius: 7px 7px 0 0;
    letter-spacing: 0.03em;
    transition: background 0.25s ease;
}

/* Collapsed card during upload */
.upload-card-collapsed {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    direction: rtl;
}

.upload-collapsed-status {
    font-size: 1rem;
    flex-shrink: 0;
}

.upload-collapsed-name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

/* Progress Overlay */
.upload-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.upload-progress-modal {
    background: #ffffff;
    color: #1a1a1a;
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.upload-progress-bar-container {
    height: 12px;
    background: #e5e7eb;
    border-radius: 6px;
    margin: 1.5rem 0;
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    width: 0%;
    float: right;
    background-color: var(--primary, #4a7cc9);
    background-image: linear-gradient(-45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent);
    background-size: 1rem 1rem;
    animation: uploadProgressWave 1s linear infinite;
    transition: width 0.3s ease;
}

@keyframes uploadProgressWave {
    from {
        background-position: -1rem 0;
    }

    to {
        background-position: 0 0;
    }
}

/* Playback progress bar under name textarea */
.upload-name-progress {
    height: 3px;
    width: 100%;
    background: transparent;
    cursor: default;
    position: relative;
    margin-top: -1px;
    /* sit right under the border-bottom */
    transition: height 0.15s ease;
    border-radius: 0 0 2px 2px;
    overflow: visible;
    direction: ltr;
}

.upload-name-progress.active {
    cursor: pointer;
    height: 4px;
    background: color-mix(in srgb, var(--prog-color, var(--color-nigun)) 20%, transparent);
}

.upload-name-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--prog-color, var(--color-nigun));
    border-radius: 0 0 2px 2px;
    transition: width 0.25s linear;
}

.upload-name-progress.active:hover {
    height: 6px;
}

/* Duration-check shimmer bar on match tags area */
.upload-dur-checking-bar {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--color-nigun) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: uploadDurShimmer 1.5s ease-in-out infinite;
    margin: 0.5rem auto 0.3rem;
    width: 60%;
    opacity: 0.6;
}

@keyframes uploadDurShimmer {
    0% {
        background-position: -200% 0;
    }

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

/* Category Theme Borders for Global Settings Autocomplete Wrappers */
.upload-global-settings .addinfo-autocomplete-wrapper {
    border: 1px solid var(--border-color, #e5e7eb) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focused state for wrappers */
.upload-global-settings .addinfo-autocomplete-wrapper:focus-within {
    box-shadow: 0 0 0 2px rgba(123, 31, 162, 0.2) !important;
}

/* Global Settings specific theming */
.upload-global-settings .addinfo-field:has(#upload-chatzer) .addinfo-autocomplete-wrapper {
    border-color: var(--color-chatzer) !important;
}

.upload-global-settings .addinfo-field:has(#upload-mechaber) .addinfo-autocomplete-wrapper,
.upload-global-settings .addinfo-field:has(#upload-personality) .addinfo-autocomplete-wrapper {
    border-color: var(--color-mechaber) !important;
}

.upload-global-settings .addinfo-field:has(#upload-album) .addinfo-autocomplete-wrapper {
    border-color: var(--color-album) !important;
}

.upload-global-settings .addinfo-field:has(#upload-playlists) .addinfo-autocomplete-wrapper {
    border-color: var(--color-playlist) !important;
}

.upload-global-settings .addinfo-field:has(#upload-collections) .addinfo-autocomplete-wrapper {
    border-color: var(--color-collection) !important;
}

.upload-global-settings #upload-rating-trigger {
    border-color: var(--color-music) !important;
}

/* Override global white star colors for the upload rating dropdown */
#upload-rating-dropdown .player-rating-star {
    color: var(--color-music) !important;
}

#upload-rating-dropdown .player-rating-star.empty {
    color: rgba(0, 0, 0, 0.15) !important;
}

#upload-rating-stars-inline .player-rating-star {
    color: var(--color-music) !important;
    -webkit-text-fill-color: var(--color-music) !important;
}

#upload-rating-stars-inline .player-rating-star.empty {
    color: rgba(0, 0, 0, 0.15) !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.15) !important;
}

/* Make the rating dropdown wider so options don't wrap */
#upload-rating-dropdown {
    min-width: 320px;
    right: 0;
}

/* Hover effect for rating rows */
.upload-rating-row:hover {
    background: var(--bg-surface-2, #f5f5f5);
    border-radius: 6px;
}

.upload-rating-row {
    padding: 0.5rem 0.75rem;
    transition: background 0.15s ease;
}