: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-collection: #c62828;
    --color-collection-light: #ef5350;
    --color-collection-dark: #8e0000;
    --color-collection-pale: #ffebee;

    /* פיוטים - 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: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%;
    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;
}

/* 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: 140px;
    overflow-x: hidden;
}

/* 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;
}

.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(74, 124, 201, 0.3);
}

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

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.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;
}

/* Combined Search + Add Button */
.header-combo-btn {
    display: flex;
    align-items: stretch;
    background: var(--gradient-main);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.3);
    height: 40px;
    gap: 3px;
    padding: 3px;
}

.combo-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 22px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    color: white;
    transition: all 0.4s ease;
    flex: 3;
    min-width: 60px;
}

.combo-search-icon {
    width: 16px;
    height: 16px;
    fill: white;
    opacity: 0;
    max-width: 0;
    transition: all 0.4s ease;
}

.combo-search-text {
    transition: all 0.4s ease;
}

.combo-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 22px;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    color: white;
    transition: all 0.4s ease;
    flex: 1;
    min-width: 36px;
}

.combo-add-icon {
    font-size: 1.3em;
    font-weight: 700;
    color: white;
    transition: all 0.4s ease;
}

.combo-add-text {
    color: white;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.4s ease;
}

/* Hover on Search - expands to show icon */
.header-combo-btn:hover .combo-search:hover {
    flex: 10;
    background: rgba(255, 255, 255, 0.25);
}

.header-combo-btn:hover .combo-search:hover .combo-search-icon {
    opacity: 1;
    max-width: 20px;
}

.header-combo-btn:hover .combo-search:hover~.combo-add {
    flex: 0;
    padding: 0;
    min-width: 0;
    opacity: 0;
}

/* Hover on Add - expands to show text */
.header-combo-btn:hover .combo-add:hover {
    flex: 10;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.25);
}

.header-combo-btn:hover .combo-add:hover .combo-add-text {
    opacity: 1;
    max-width: 80px;
}

.header-combo-btn:has(.combo-add:hover) .combo-search {
    flex: 0;
    padding: 0;
    min-width: 0;
    opacity: 0;
}

/* Logo hover effect */
.logo-icon,
.logo-text {
    transition: filter 0.4s ease, transform 0.4s ease;
}

.logo:hover .logo-icon {
    filter: drop-shadow(0 2px 8px rgba(156, 91, 181, 0.4));
}

.logo:hover .logo-text {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.15));
}

/* 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;
}

/* 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 {
    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);
    }
}

.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;
}

/* 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-collection .play-all-btn {
    color: var(--color-collection);
}

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

.theme-collection .play-all-btn.playing:hover {
    background: var(--color-collection-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;
}

/* Personalities tags */
.nigun-modal-hero-personalities {
    display: flex;
    flex-wrap: wrap;
    align-items: 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(233, 30, 99, 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(121, 85, 72, 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 profile - one unified box */
.nigun-modal-mechaber-profile {
    position: absolute;
    top: 0;
    left: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 15;
    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: hidden;
}

.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:hover {
    /* No separate hover - whole stripe scales */
}

.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: 500px) {
    .nigun-modal-hero {
        padding: 30px 15px 30px 15px;
        margin-bottom: 50px;
    }

    .nigun-modal-hero-title {
        font-size: 1.4em;
    }

    .nigun-modal-hero-chatzeros {
        right: 15px;
        bottom: -12px;
    }

    .nigun-modal-mechaber-profile {
        left: 5px;
        bottom: -45px;
    }

    .nigun-modal-mechaber-avatar {
        width: 55px;
        height: 55px;
    }

    .nigun-modal-mechaber-name {
        font-size: 0.7em;
        padding: 4px 10px;
    }
}

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

    .nigun-modal-body {
        padding: 15px;
    }
}
/* 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;
    overflow-y: auto;
    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: 150px;
}

.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-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);
}

/* 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;
}

/* More-trigger container (matches nigun modal) */
.detail-modal-more {
    position: absolute;
    top: 10px;
    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);
}

/* 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 {
    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 {
    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-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;
}

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

.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%;
}

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

.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: hidden;
    flex-shrink: 0;
}

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

.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;
}

.modal-hero-avatar .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;
}

/* 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-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%);
}

@media (max-width: 500px) {
    .modal-hero {
        padding: 30px 15px 30px 15px;
    }

    .modal-hero-title {
        font-size: 1.4em;
    }
}

.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;
}

/* 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);
    border-radius: 12px;
    margin: 25px auto 20px auto;
    max-width: 600px;
    position: relative;
    border: 1.5px solid var(--color-mechaber-dark);
    box-shadow: none;
}

#detailModalBody .detail-description-section h3 {
    font-size: 0;
    color: transparent;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--color-mechaber);
    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;
}

#detailModalBody .detail-description-section h3::before {
    content: "i";
    font-size: 1.1rem;
    font-weight: bold;
    font-style: italic;
    color: white;
}

#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));
}

@media (max-width: 600px) {
    .detail-modal-content {
        height: 90vh;
        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 */
.main-nav:has(.nav-ball:not(.nav-ball-nigunim):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 {
    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 {
    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-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="music"]::before {
    background: var(--color-music);
    border-radius: 2px;
    /* Square shape like verter */
}

.nav-dropdown-item[data-dest="collections"]::before {
    background: var(--color-collection);
    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="music"]:hover {
    color: var(--color-music-dark);
    background: var(--color-music-pale);
}

.nav-dropdown-item[data-dest="collections"]:hover {
    color: var(--color-collection-dark);
    background: var(--color-collection-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 {
    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;
}

.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 - 2 Stack Layout */
.home-stats-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
}

/* Hero ניגונים Card - Left Side, Full Height */
.home-stat-hero {
    flex: 0 0 35%;
    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;
}

.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;
}

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

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

/* Right Side - 2 Stacked Rows */
.home-stats-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.home-stats-row {
    display: flex;
    gap: 20px;
    flex: 1;
}

/* Individual Stat Cards */
.home-stat-card {
    flex: 1;
    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-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-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);
}

/* 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;
    }

    .home-stats-grid {
        flex-direction: column;
    }

    .home-stat-hero {
        flex: none;
        padding: 35px 20px;
    }

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

    .home-stat-hero .home-stat-label {
        font-size: 1.5em;
    }

    .home-stats-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .home-stat-card {
        flex: 1 1 45%;
        min-width: 120px;
        padding: 18px 12px;
    }

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

    .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;
    }
}

/* 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-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(198, 40, 40, 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%;
}

/* 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, 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;
}

/* 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);
}

/* 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 stars badge - matches filter count */
.quality-mega-trigger .quality-stars-badge {
    position: absolute;
    left: 8px;
    background: white;
    color: var(--color-nigun);
    font-size: 0.6em;
    font-weight: 700;
    padding: 3px 5px 2px;
    border-radius: 8px;
    letter-spacing: -1px;
    line-height: 1.1;
    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 stars out, fade X in */
.quality-mega-menu:hover .quality-mega-trigger.has-active .quality-stars-badge {
    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%;
}

/* 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;
}

/* 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-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;
    color: var(--text-muted);
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    line-height: 1.6;
}

.home-luach-sponsor strong {
    font-weight: 700;
    color: var(--text-dark);
}

/* 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%);
    }
}

/* 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-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-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-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: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
    padding-bottom: 150px;
}

.pdf-popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

.pdf-popup {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 900px;
    height: 85vh;
    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;
}

.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);
}

/* Collections Grid - Square Cards */
.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.collection-card {
    background: linear-gradient(to bottom, var(--color-collection) 45%, var(--color-collection-pale, #fce4ec) 45%);
    border-radius: 16px;
    border: 3px solid var(--color-collection);
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.08);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}

.collection-card:hover {
    box-shadow: 0 6px 20px rgba(198, 40, 40, 0.2);
    transform: translateY(-3px);
    border-color: var(--color-collection-dark);
}

.collection-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;
}

.collection-title {
    font-weight: 700;
    font-size: 1.2em;
    color: var(--color-collection-dark, #7b1a1a);
    line-height: 1.4;
    word-break: break-word;
    transition: color 0.3s ease;
}

.collection-meta {
    font-size: 0.85em;
    color: var(--color-collection-dark, #7b1a1a);
    opacity: 0.7;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.collection-card-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 36px;
    gap: 4px;
    flex: 1;
}

/* Collection play button icon toggle - scale+fade transition like player */
.collection-play-btn .play-icon,
.collection-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);
}

.collection-play-btn .play-icon {
    opacity: 1;
    transform: scale(1);
}

.collection-play-btn .pause-icon {
    opacity: 0;
    transform: scale(0.5);
}

.collection-play-btn.playing .play-icon {
    opacity: 0;
    transform: scale(0.5);
}

.collection-play-btn.playing .pause-icon {
    opacity: 1;
    transform: scale(1);
}

/* Playing state: overlay fades in with solid color */
.collection-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-collection);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    border-radius: inherit;
}

.collection-card.playing::before {
    opacity: 1;
}

.collection-card.playing {
    border-color: var(--color-collection);
}

.collection-card-header {
    position: relative;
    z-index: 1;
}

.collection-card.playing .collection-title {
    color: white;
}

.collection-card.playing .collection-meta {
    color: white;
    opacity: 0.85;
}

.collection-card.playing .collection-play-btn {
    background: white;
    color: var(--color-collection-dark);
}

/* Double pulse animation matching minimized player */
@keyframes collectionDoublePulse {
    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 .collection-card.playing {
    animation: collectionDoublePulse 3s ease-out infinite;
}

body:not(.playing) .collection-card.playing {
    animation: none;
}

/* Music Page Styles */
.music-ritem-groups {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.ritem-group {
    background: white;
    border-radius: 20px;
    box-shadow: var(--card-shadow);

}

.ritem-group> :first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.ritem-group> :last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.ritem-group-header {
    background: linear-gradient(135deg, var(--color-music) 0%, var(--color-music-dark) 100%);
    color: white;
    padding: 18px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ritem-group-header h3 {
    margin: 0;
    font-size: 1.25em;
    flex: 1;
}

.ritem-count {
    font-size: 0.9em;
    opacity: 0.9;
}

.ritem-play-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.85em;
}

.ritem-play-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.ritem-scales {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.scale-group {
    background: var(--bg-light);
    border-radius: 15px;

}

.scale-group> :first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.scale-group> :last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.scale-group-header {
    background: var(--color-music-pale);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.scale-name {
    font-weight: 600;
    color: var(--color-music-dark);
}

.scale-song-count {
    background: var(--color-music);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8em;
}

.scale-songs {
    padding: 10px;
}

.music-song-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition-smooth);
    margin-bottom: 6px;
    background: white;
}

.music-song-item:hover {
    background: var(--color-nigun-pale);
    transform: translateX(-3px);
}

.music-song-item.no-audio {
    opacity: 0.6;
    border: 1px dashed var(--border-color);
}

.music-song-name {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-song-meta {
    font-size: 0.8em;
    color: var(--color-mechaber-dark);
    white-space: nowrap;
}

.music-song-details {
    background: transparent;
    border: none;
    color: var(--color-music);
    cursor: pointer;
    padding: 5px;
    font-size: 1em;
    opacity: 0.5;
    transition: var(--transition-smooth);
}

.music-song-details:hover {
    opacity: 1;
}

.scale-more {
    text-align: center;
    padding: 10px;
    color: var(--color-music);
    cursor: pointer;
    font-size: 0.9em;
    transition: var(--transition-smooth);
}

.scale-more:hover {
    background: var(--color-music-pale);
    border-radius: 8px;
}

.collection-play-btn {
    width: 60px;
    height: 60px;
    background: white;
    border: none;
    border-radius: 50%;
    color: var(--color-collection-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);
}

.collection-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

@media (max-width: 600px) {
    .collections-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .collection-card-header {
        padding: 14px 10px;
    }

    .collection-title {
        font-size: 1em;
    }

    .collection-play-btn {
        width: 50px;
        height: 50px;
    }
}

/* Compact inline collection cards for detail pages */
.collections-grid-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: none;
}

.collections-grid-inline .collection-card {
    aspect-ratio: 1;
    width: 150px;
    flex-shrink: 0;
}

.collections-grid-inline .collection-card-header {
    padding: 12px 8px;
}

.collections-grid-inline .collection-title {
    font-size: 0.95em;
}

.collections-grid-inline .collection-meta {
    font-size: 0.75em;
}

.collections-grid-inline .collection-play-btn {
    width: 40px;
    height: 40px;
    font-size: 1em;
}

.collections-grid-inline .collection-play-btn svg {
    width: 22px;
    height: 22px;
}

.collections-grid-inline .collection-card-text {
    padding-top: 20px;
    gap: 2px;
}

@media (max-width: 600px) {
    .collections-grid-inline .collection-card {
        width: 120px;
    }

    .collections-grid-inline {
        gap: 8px;
    }

    .collections-grid-inline .collection-title {
        font-size: 0.85em;
    }

    .collections-grid-inline .collection-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 16px 6px 6px;
    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: 1;
    justify-content: center;
}

.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;
    margin-left: 10px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.3);
}

.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;
    background: rgba(255, 255, 255, 0.3);
}

.mechaber-pill-placeholder .mechaber-icon {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.8);
    -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 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-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-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;
}

/* Collections cards - red 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(76, 175, 80, 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-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-collection::after {
    border-color: var(--color-collection);
    box-shadow: 0 0 10px rgba(76, 175, 80, 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 (collection, album, document, resource only) */
.page-theme-collection .card-title {
    color: var(--color-collection-dark, #4a148c);
}

.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);
}

/* ====== 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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    margin-top: 8px;
    gap: 5px;
    justify-content: center;
}

.page-theme-piyut .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 {
    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 {
        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 {
        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) {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    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 collection tag for use in cards */
.collection-tag {
    display: inline-block;
    background: var(--color-collection);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.collection-tag:hover {
    background: var(--color-collection-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;
}

/* 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;
}

/* 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-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-collection .song-item.active::before {
    background: var(--color-collection) !important;
}

.theme-collection .song-item.active {
    box-shadow: 0 4px 15px rgba(198, 40, 40, 0.4) !important;
}

.theme-collection .song-item.active .song-name,
.theme-collection .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;
}

/* 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-collection .song-item::after {
    border-color: var(--color-collection) !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;
}

/* 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-collection .nigun-mechaber-card {
    background: var(--color-collection) !important;
}

.theme-collection .nigun-mechaber-card:hover {
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4) !important;
}

.theme-collection .mechaber-card::after,
.theme-collection .nigun-mechaber-card::after {
    border-color: var(--color-collection-light) !important;
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.25) !important;
}

.theme-collection .nigun-mechaber-placeholder {
    background: linear-gradient(135deg, var(--color-collection-pale) 0%, var(--color-collection-light) 100%) !important;
}

.theme-collection .nigun-mechaber-placeholder .mechaber-icon {
    background-color: var(--color-collection) !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;
}


/* 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-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-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 {
    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;
}

/* 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;
    overflow: hidden;
    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;
    max-width: 600px;
    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);
}

.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-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-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;
}

.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;
}

@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-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-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);
}

.nigun-info-box .nigun-info-text {
    font-size: 0.85em;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 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);
}

.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;
}

.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-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 {
    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;
}

/* Star rating for player - INTERACTIVE */
.player-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

.player-rating-star {
    font-size: 1.2em;
    color: white;
    transition: transform 0.15s ease, opacity 0.2s ease, text-shadow 0.2s ease;
    cursor: pointer;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.player-rating-star:hover {
    transform: scale(1.25);
}

/* All 5 stars container */
.player-rating-stars {
    display: flex;
    gap: 3px;
}

/* Each star - white on gradient background */
.player-rating-stars .player-rating-star {
    color: white;
    -webkit-text-fill-color: white;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.4);
    transition: all 0.25s ease;
}

/* Position each star's gradient slice - not needed for white stars but kept for compatibility */
.player-rating-stars .player-rating-star:nth-child(1) {
    background-position: 0% 0;
}

.player-rating-stars .player-rating-star:nth-child(2) {
    background-position: 25% 0;
}

.player-rating-stars .player-rating-star:nth-child(3) {
    background-position: 50% 0;
}

.player-rating-stars .player-rating-star:nth-child(4) {
    background-position: 75% 0;
}

.player-rating-stars .player-rating-star:nth-child(5) {
    background-position: 100% 0;
}

/* Empty stars are translucent white */
.player-rating-stars .player-rating-star.empty {
    -webkit-text-fill-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.35);
    text-shadow: none;
}



/* Theme-specific star colors */
.theme-mechaber .player-rating-stars .player-rating-star {
    background: linear-gradient(90deg, var(--color-mechaber) 0%, var(--color-mechaber-dark) 100%);
    background-size: 500% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

.theme-chatzer .player-rating-stars .player-rating-star {
    background: linear-gradient(90deg, var(--color-chatzer) 0%, var(--color-chatzer-dark) 100%);
    background-size: 500% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

.theme-nigun .player-rating-stars .player-rating-star {
    background: linear-gradient(90deg, var(--color-nigun) 0%, var(--color-nigun-dark) 100%);
    background-size: 500% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

.theme-verter .player-rating-stars .player-rating-star {
    background: linear-gradient(90deg, var(--color-verter) 0%, var(--color-verter-dark) 100%);
    background-size: 500% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

.theme-zman .player-rating-stars .player-rating-star {
    background: linear-gradient(90deg, var(--color-zman) 0%, var(--color-zman-dark) 100%);
    background-size: 500% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Saving state */
.player-rating.saving {
    pointer-events: none;
    opacity: 0.6;
}

.player-rating.saving .player-rating-stars {
    animation: ratingPulse 1s ease-in-out infinite;
}

@keyframes ratingPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Rating container for stars + description */
.player-rating-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

/* Rating description text under stars */
.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;
}

/* ======== RATING INVITE SYSTEM ======== */

/* Stars glow when inviting to rate — smooth calling wave */
.player-rating.rating-invite .player-rating-stars .player-rating-star {
    animation: starInviteGlow 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.player-rating.rating-invite .player-rating-stars .player-rating-star:nth-child(1) {
    animation-delay: 0s;
}

.player-rating.rating-invite .player-rating-stars .player-rating-star:nth-child(2) {
    animation-delay: 0.12s;
}

.player-rating.rating-invite .player-rating-stars .player-rating-star:nth-child(3) {
    animation-delay: 0.24s;
}

.player-rating.rating-invite .player-rating-stars .player-rating-star:nth-child(4) {
    animation-delay: 0.36s;
}

.player-rating.rating-invite .player-rating-stars .player-rating-star:nth-child(5) {
    animation-delay: 0.48s;
}

@keyframes starInviteGlow {

    0%,
    24%,
    100% {
        transform: scale(1) translateY(0);
        -webkit-text-fill-color: inherit;
        text-shadow: none;
        filter: none;
    }

    6% {
        transform: scale(1.15) translateY(-1px);
        -webkit-text-fill-color: rgba(255, 255, 255, 0.85);
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
        filter: none;
    }

    12% {
        transform: scale(1.35) translateY(-3px);
        -webkit-text-fill-color: white;
        text-shadow: 0 0 14px rgba(255, 255, 255, 0.9), 0 0 28px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(255, 255, 255, 0.3);
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
    }

    18% {
        transform: scale(1.15) translateY(-1px);
        -webkit-text-fill-color: rgba(255, 255, 255, 0.85);
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
        filter: none;
    }
}

/* Disable hover effects during invite mode */
.player-rating.rating-invite .player-rating-stars .player-rating-star.hover-preview,
.player-rating.rating-invite .player-rating-stars:hover .player-rating-star.hover-preview {
    -webkit-text-fill-color: inherit !important;
    color: inherit !important;
    text-shadow: inherit !important;
}

.player-rating.rating-invite .player-rating-stars:hover .player-rating-star:not(.hover-preview) {
    -webkit-text-fill-color: inherit !important;
    color: inherit !important;
    text-shadow: inherit !important;
}

.player-rating.rating-invite:hover .player-rating-stars {
    filter: none !important;
}

/* Rating popup card */
.rating-popup {
    position: fixed;
    background: white;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 999999;
    min-width: 240px;
    max-width: 300px;
    animation: popupSlideIn 0.25s ease-out;
}

/* Invisible bridge between popup and stars to prevent hover dead zone */
.rating-popup::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    height: 16px;
}

@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.95);
    }
}

.rating-popup-header {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.4;
}

.rating-popup-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rating-popup-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: white;
}

.rating-popup-option:hover {
    border-color: var(--color-nigun);
    background: linear-gradient(135deg, rgba(74, 124, 201, 0.06) 0%, rgba(150, 95, 160, 0.06) 100%);
    transform: translateX(-2px);
}

.rating-popup-option:active {
    transform: scale(0.97);
}

.rating-popup-option-stars {
    display: flex;
    gap: 1px;
    font-size: 0.9em;
    direction: ltr;
}

.rating-popup-option-stars .star {
    background: linear-gradient(90deg, #e91e6c 0%, #9b4cba 35%, #6a5acd 65%, #4a7cc9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rating-popup-option-stars .star.empty {
    background: none;
    -webkit-text-fill-color: #ddd;
    color: #ddd;
}

.rating-popup-option-text {
    flex: 1;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.78em;
}

/* 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;
}

.video-modal video {
    max-width: 90%;
    max-height: 90%;
}

.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-collection .back-button {
    color: var(--color-collection);
    border-color: var(--color-collection-pale);
}

.theme-collection .back-button:hover {
    background: var(--color-collection-pale);
    border-color: var(--color-collection);
}

.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;
}

.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-collection .detail-category-bar {
    background: var(--color-collection);
}

.detail-page.theme-collection .detail-header-content {
    background: linear-gradient(135deg, var(--color-collection) 0%, var(--color-collection-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-collection {
    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-collection {
    background: linear-gradient(180deg, var(--color-collection-pale) 0%, color-mix(in srgb, var(--color-collection-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-collection>* {
    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-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 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 {
    color: var(--primary);
    text-decoration: underline;
}

.detail-description-content strong {
    color: var(--primary-deep);
}

.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: 2000px;
}

.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;
}

.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));
}

.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;
}

.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: var(--color-verter-dark);
    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: var(--color-verter-dark);
    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: 2000px;
}

.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);
}

.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;
}

/* Collection section header override (red theme) on zman/mechaber page */
.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-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="collection"] .filter-panel-item-btn::before {
    background: var(--color-collection);
}

.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);
}

.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 - NO change, keep normal blue */
/* (Only the active-recording's button gets white styling) */

/* 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 .nigun-tag-inline {
    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 .rec-rating-display {
    color: rgba(255, 255, 255, 0.9);
}

.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 for Playing Song */
/* Hidden by default, shown only for active song */
.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;
}

/* Show wave only when song-item is active */
.song-item.active .song-wave-animation {
    opacity: 1;
    width: 20px;
}

.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;
    max-width: 100%;
}

/* 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 {
    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(--text-dark);
}

.song-item-rec-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.song-item-rec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.song-item-rec-tags .nigun-tag-inline {
    font-size: 0.7em;
    padding: 2px 6px;
}

/* 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 for recordings */
.rec-rating-display {
    color: var(--color-nigun);
    font-size: 0.7em;
    letter-spacing: -1px;
    flex-shrink: 0;
    margin-left: 8px;
}

.theme-mechaber .rec-rating-display {
    color: var(--color-mechaber);
}

.theme-chatzer .rec-rating-display {
    color: var(--color-chatzer);
}

.theme-nigun .rec-rating-display {
    color: var(--color-nigun);
}

.theme-verter .rec-rating-display {
    color: var(--color-verter);
}

.theme-zman .rec-rating-display {
    color: var(--color-zman);
}

.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-collection .song-meta-separator {
    color: var(--color-collection-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);
}

/* 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-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-collection:hover {
    border-color: rgba(255, 255, 255, 0.7);
    color: white;
}

.player-rec-tag-collection {
    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-collection:hover {
    background: rgba(198, 40, 40, 0.5) !important;
    border-color: rgba(198, 40, 40, 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;
}

/* Collection: different animation - scale fade */
.carousel-item.carousel-collection {
    transform: scale(0.85);
}

.carousel-item.carousel-collection.active {
    transform: scale(1);
}

.carousel-item.carousel-collection.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/collections */
.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);
}

/* Collection: subtle red-tinted pill that blends with banner */
.player-carousel-collection {
    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 Stars - Left Side */
.player-rating {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

.player-rating-stars {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
    color: white;
}

.player-rating-star {
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.15s ease, text-shadow 0.2s ease;
    color: white;
}

.player-rating-star.empty {
    color: rgba(255, 255, 255, 0.3);
    text-shadow: none;
}

.player-rating-star:hover {
    transform: scale(1.4);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.player-rating-star.hover-preview {
    color: white;
    -webkit-text-fill-color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.3);
    transform: scale(1.15);
}

.player-rating.saving .player-rating-star {
    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;
    }
}

/* Stars stay stable on success - no animation on them */
.player-rating.rated-success .player-rating-star {
    /* Just ensure they show correct state */
}

/* Container for flying stars */
.player-rating {
    position: relative;
}

/* 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);
    }
}

.player-rating-stars .star-icon {
    width: 20px;
    height: 20px;
}

.player-rating:hover .star-icon {
    filter: brightness(1.2);
}

.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 */
/* Collection tags should fade in place without sliding */
.rec-carousel-item:has(.player-rec-tag-collection) {
    transform: scale(0.95);
}

.rec-carousel-item.active:has(.player-rec-tag-collection) {
    transform: scale(1);
}

.rec-carousel-item.exiting:has(.player-rec-tag-collection) {
    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-collection {
    background: var(--color-collection-pale);
    color: var(--color-collection);
}

.player-tag-collection:hover {
    background: var(--color-collection-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: var(--color-nigun);
    border-radius: 10px;
}

.nigun-modal-content::-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: 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 container */
.nigun-modal-more {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    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);
}

/* 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 {
    color: var(--color-nigun-dark);
}

/* 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 {
    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 {
    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: 30px;
    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-collection .fullpage-more-trigger {
    border-color: var(--color-collections-pale, rgba(0, 0, 0, 0.12));
}

.theme-collection .fullpage-more-trigger:hover {
    border-color: var(--color-collections, #c62828);
    color: var(--color-collections, #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: 12px;
    }

    .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 inside modals - modal has its own buttons */
.detail-modal-body .fullpage-more,
.nigun-modal-content .fullpage-more {
    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;
}
/* ============================================
   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;
}

.addinfo-modal-overlay.inline-mode .addinfo-modal-content {
    max-width: none;
    width: 100%;
    height: auto;
    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-y: visible;
    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;
}

.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;
    transition: none;
    pointer-events: none;
    z-index: 0;
}

.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-collections {
    background: var(--color-collection);
    box-shadow: 0 2px 8px rgba(198, 40, 40, 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-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-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-collection .hover-tooltip-type {
    background: var(--color-collection);
}

.hover-tooltip.tooltip-collection .hover-tooltip-title {
    color: var(--color-collection-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: 20px 0;
}

.skeleton-card {
    height: 120px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    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.3) 50%,
            transparent 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 2.5s ease-in-out infinite;
}

/* 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-collection .skeleton-card {
    background: color-mix(in srgb, var(--color-collection-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);
}

.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 */
@media (max-width: 768px) {
    .header-top {
        flex-direction: column;
        gap: 15px;
    }

    .global-search {
        max-width: 100%;
        margin: 0;
        order: 2;
    }

    .main-nav {
        order: 3;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .player-inner {
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 30px;
    }

    .player-info {
        order: 3;
        width: 100%;
        text-align: center;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
    }

    .player-info-box {
        padding: 6px 10px 6px 55px;
        width: auto;
        max-width: 200px;
    }

    .player-info-box.no-mechaber {
        padding-left: 10px;
    }

    .player-mechaber-profile {
        left: 6px;
        padding: 4px 5px 3px 5px;
    }

    .player-mechaber-avatar {
        width: 30px;
        height: 30px;
    }

    .player-mechaber-name {
        font-size: 6px;
        max-width: 38px;
    }

    .player-info-box .player-song-name {
        font-size: 0.8em;
    }

    .player-controls {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        order: 1;
        margin-bottom: 10px;
    }

    .player-btn.main {
        width: 60px;
        height: 60px;
        margin-top: -35px;
    }

    .player-progress {
        position: static;
        transform: none;
        order: 2;
        width: 100%;
        max-width: none;
        margin-bottom: 8px;
    }

    .player-rating {
        order: 4;
        padding-left: 0;
    }

    .player-tags {
        display: none;
    }

    .player-hide-btn {
        top: 5px;
        left: 10px;
        width: 28px;
        height: 28px;
    }
}

/* 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-collection-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-collection-btn:hover,
.sidebar-collection-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="collection"] .sidebar-filter-btn::before {
    background: linear-gradient(180deg, var(--color-collection) 0%, var(--color-collection-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;
}

/* 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: 800px;
    margin: 0 auto;
    text-align: left;
    direction: ltr;
}

.terms-last-updated {
    color: var(--text-muted);
    font-size: 0.95em;
    margin-bottom: 30px;
}

.terms-intro {
    font-size: 1.05em;
    line-height: 1.8;
    margin-bottom: 40px;
}

.terms-section {
    margin-bottom: 45px;
}

.terms-section-header {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--primary-deep);
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-light);
}

.terms-section p {
    line-height: 1.9;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.terms-section ul {
    list-style: disc;
    padding-right: 0;
    padding-left: 25px;
    margin: 15px 0;
}

.terms-section li {
    line-height: 1.8;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.terms-section ol {
    padding-right: 0;
    padding-left: 25px;
    margin: 15px 0;
}

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

.terms-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 35px 0;
}

.terms-email {
    color: var(--primary);
    font-weight: 500;
}

@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 */
}

.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%);
    padding: 60px 40px;
    border-radius: 24px 24px 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.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-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-collection {
    background: linear-gradient(135deg, var(--color-collection) 0%, var(--color-collection-dark) 100%);
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3);
}

.contribute-btn-collection:hover {
    box-shadow: 0 6px 25px rgba(20, 184, 166, 0.4);
}

/* Extra Section */
.contribute-extra-section {
    margin-bottom: 40px;
}

.contribute-section-title {
    color: var(--text-dark);
    font-size: 1.2em;
    font-weight: 600;
    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, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.contribute-btn-resource:hover {
    box-shadow: 0 6px 25px rgba(14, 165, 233, 0.4);
}

.contribute-btn-document {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.3);
}

.contribute-btn-document:hover {
    box-shadow: 0 6px 25px rgba(100, 116, 139, 0.4);
}

.contribute-btn-album {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
}

.contribute-btn-album:hover {
    box-shadow: 0 6px 25px rgba(168, 85, 247, 0.4);
}

/* 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);
}

@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;
}

@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 collections 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;
}
/* ===== 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;
}

.home-luach-cal-icon {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 32px;
    height: 32px;
    color: var(--color-mechaber, #c435a8);
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-luach-cal-icon:hover {
    opacity: 1;
    transform: scale(1.15);
}

.home-luach-cal-icon svg {
    width: 100%;
    height: 100%;
}

.home-luach-date {
    text-align: center;
    font-size: 1.35em;
    color: var(--primary-deep);
    font-weight: 600;
    font-family: 'Heebo', 'David Libre', sans-serif;
    padding-bottom: 16px;
}

.home-luach-date-title {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--primary-deep);
    margin-top: 4px;
}

.home-luach-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 16px 0 12px;
}

.home-luach-divider-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-light));
}

.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;
}

.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;
}

.home-luach-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.home-yahrzeit-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.82em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: white;
    background: var(--color-mechaber);
    box-shadow: 0 2px 6px rgba(196, 53, 168, 0.25);
}

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

.home-yahrzeit-tag-date {
    opacity: 0.85;
    font-size: 0.92em;
}

.home-yomtov-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.82em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: white;
    background: var(--color-zman);
    box-shadow: 0 2px 6px rgba(233, 106, 27, 0.25);
}

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

.home-luach-loading {
    color: var(--text-secondary);
    font-size: 0.85em;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-luach-loading::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid var(--primary-pale);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

@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: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    padding: 20px;
}

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

.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;
}

.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;
}

@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;
    }
}
/* 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 in corner */
.cal-day-num {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--color-mechaber, #c435a8);
    text-align: start;
    padding: 2px 4px;
    line-height: 1;
}

.cal-today .cal-day-num {
    color: var(--color-mechaber, #c435a8);
    font-weight: 800;
}

/* Content area inside cell */
.cal-day-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* 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;
}

.cal-day-content .home-yahrzeit-tag:hover,
.cal-day-content .home-yomtov-tag:hover {
    transform: scale(1.03);
}

/* 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;
    }
}
/* ============================================================
   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);
}

/* ---- Actions bar (Duplicate Recording Scan button) ---- */
.mg-actions-bar {
    display: flex;
    justify-content: center;
    margin: 6px auto 4px;
    padding: 0 16px;
}
.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;
}
.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;
}
.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); }
.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;
}
.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-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-bottom: 1rem;
    color: var(--primary);
}

/* 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%;
    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-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;
}