:root {
    color-scheme: light;
    forced-color-adjust: none;
    --primary-color: #1e293b;
    --secondary-color: #6366f1;
    --accent-color: #8b5cf6;
    --selected-row-color: #f0f9ff;
    --chorus-color: #fef3c7;
    --chorus-border: #f59e0b;
    --border-color: #e2e8f0;
    --text-color: #1e293b;
    --text-light: #64748b;
    --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --hover-color: #f1f5f9;
    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Default Theme (Classic) variables */
    --block1-bg: #ffffff;
    --block1-border: transparent;
    --block1-text: var(--text-color);
    --block2-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --block2-border: #f59e0b;
    --block2-text: #92400e;
    --block3-bg: #ffffff;
    --block3-border: transparent;
    --block3-text: var(--text-color);
    --block4-bg: #ffffff;
    --block4-border: transparent;
    --block4-text: var(--text-color);
}

/* High Contrast Theme - High Contrast */
body.theme-high-contrast {
    --block1-bg: #dbeafe;
    --block1-border: #93c5fd;
    --block1-text: #1e40af;
    --block2-bg: #fef9c3;
    --block2-border: #fde68a;
    --block2-text: #a16207;
    --block3-bg: #f3e8ff;
    --block3-border: #d8b4fe;
    --block3-text: #6b21a8;
    --block4-bg: #ffe4e6;
    --block4-border: #fda4af;
    --block4-text: #be123c;
}

/* Sunset Theme - Sunset & Lavender */
body.theme-sunset {
    --block1-bg: #e0f2fe;
    --block1-border: #7dd3fc;
    --block1-text: #0369a1;
    --block2-bg: #ffedd5;
    --block2-border: #fdba74;
    --block2-text: #c2410c;
    --block3-bg: #fce7f3;
    --block3-border: #f9a8d4;
    --block3-text: #be185d;
    --block4-bg: #f5f3ff;
    --block4-border: #c4b5fd;
    --block4-text: #6d28d9;
}

/* Electric Theme - Electric Aura */
body.theme-electric {
    --block1-bg: #e0e7ff;
    /* Indigo */
    --block1-border: #a5b4fc;
    --block1-text: #4338ca;
    --block2-bg: #fff1f2;
    /* Rose tint */
    --block2-border: #fecdd3;
    --block2-text: #e11d48;
    --block3-bg: #ecfeff;
    /* Cyan */
    --block3-border: #a5f3fc;
    --block3-text: #0891b2;
    --block4-bg: #fafaf9;
    /* Warm Slate */
    --block4-border: #e7e5e4;
    --block4-text: #44403c;
}

/* Classic - Absolute 1:1 Live Site Recreation (v1.17) */
body.theme-classic {
    --block1-bg: #ffffff;
    --block1-border: transparent;
    --block1-text: var(--text-color);
    --block2-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --block2-border: #f59e0b;
    --block2-text: #92400e;
    --block3-bg: #ffffff;
    --block3-border: transparent;
    --block3-text: var(--text-color);
    --block4-bg: #ffffff;
    --block4-border: transparent;
    --block4-text: var(--text-color);
}

/* Authentic Row Dividers and Zebra Striping */
body.theme-classic .song-row {
    border-bottom: 1px solid #e2e8f0 !important;
}

body.theme-classic .song-row:nth-child(even) {
    background: #f8fafc !important;
}

/* Header Styling - Exact Gradients from Live Site */
body.theme-classic thead {
    background: linear-gradient(to right, #667eea, #764ba2) !important;
    background-attachment: fixed !important;
    border-radius: 20px 20px 0 0 !important;
}

body.theme-classic thead tr {
    background: transparent !important;
}

body.theme-classic th {
    color: white !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Specific border-radius for corner TH elements for Safari compatibility */
body.theme-classic th:first-child {
    border-radius: 20px 0 0 0 !important;
}

body.theme-classic th:last-child {
    border-radius: 0 20px 0 0 !important;
}

body.theme-classic th.chorus-column {
    background: linear-gradient(to right, #fef3c7, #fde68a) !important;
    background-attachment: fixed !important;
    color: #92400e !important;
}

/* Legendary 4px Column Borders */
body.theme-classic .chorus-column,
body.theme-classic .chorus-cell {
    border-left: 4px solid #f59e0b !important;
    border-right: 4px solid #f59e0b !important;
}

body.theme-classic .chorus-cell {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
}

/* Ensure other cells inherit the row background/Zebra effect */
body.theme-classic .verse-cell,
body.theme-classic .prechorus-cell,
body.theme-classic .bridge-cell,
body.theme-classic td:not(.chorus-cell) {
    background: transparent !important;
}

/* Jared4 removed per user request */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    color-scheme: light !important;
    background-color: #f5f7fa !important;
}

/* Disable spellcheck for all input and contenteditable elements */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text-color) !important;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
    background-color: #f5f7fa !important;
    color-scheme: light !important;
    forced-color-adjust: none !important;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

html {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

.container {
    width: 100%;
    margin: 0;
    padding: 30px;
    box-sizing: border-box;
    max-width: 100%;
    transition: opacity 0.3s ease;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Hide main content when row is selected and focused view is ready */
body:has(.selection-overlay:not(.hidden)):has(.focused-view:not(.hidden)) .container {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

header {
    margin-bottom: 20px;
    position: relative;
    flex-shrink: 0;
}

header::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: var(--bg-gradient);
    border-radius: 2px;
}

.header-top {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    transition: margin-bottom 0.3s ease;
}

.header-top-actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-top-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    align-items: center;
}

.profile-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--border-color);
    color: var(--text-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 6px 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    min-width: 20px;
    padding: 0 4px;
}

.notification-badge.hidden {
    display: none;
}

.theme-switcher-btn {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(102, 126, 234, 0.2);
    color: var(--text-color);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 16px;
}

.theme-switcher-btn:hover {
    background: white;
    border-color: var(--secondary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.theme-switcher-btn:active {
    transform: translateY(0);
}

/* Theme-specific Switcher UI Feedback */
body.theme-classic .theme-switcher-btn {
    border-color: #FFD23F;
    color: #92400e;
}

body.theme-high-contrast .theme-switcher-btn {
    border-color: #93c5fd;
    color: #1e40af;
}

body.theme-sunset .theme-switcher-btn {
    border-color: #fdba74;
    color: #c2410c;
}

body.theme-electric .theme-switcher-btn {
    border-color: #a5b4fc;
    color: #4338ca;
}

.profile-btn:hover {
    background: white;
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

.profile-btn .icon {
    font-size: 1.1em;
}

.profile-btn .label {
    font-size: 0.9em;
}

.profile-btn .song-count {
    font-weight: 600;
    opacity: 0.8;
}

.toggle-header-bar-btn {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--border-color);
    color: var(--text-color);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    flex-shrink: 0;
}

.toggle-header-bar-btn.normal-position {
    position: absolute;
    top: 8px;
    right: 8px;
}

.toggle-header-bar-btn.collapsed-position {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
}

.toggle-header-bar-btn.normal-position:hover {
    background: white;
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toggle-header-bar-btn.normal-position:active {
    transform: translateY(0);
}

.toggle-header-bar-btn.collapsed-position:hover {
    background: white;
    border-color: var(--secondary-color);
    transform: translateY(calc(-50% - 2px));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toggle-header-bar-btn.collapsed-position:active {
    transform: translateY(-50%);
}

.header-title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

header h1 {
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2em;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(102, 126, 234, 0.1);
    margin: 0;
    text-align: center;
    transition: font-size 0.3s ease;
}

.header-subtitle {
    font-size: 0.9em;
    color: var(--text-color);
    opacity: 0.7;
    font-weight: 400;
    margin: 0;
    text-align: center;
    letter-spacing: 0.01em;
    transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
    overflow: hidden;
}

/* When header bar is collapsed, make title smaller and hide subtitle */
.header-top.header-bar-collapsed {
    margin-bottom: 5px;
    /* Reduce space between title and table */
}

.header-top.header-bar-collapsed h1 {
    font-size: 1.2em;
}

.header-top.header-bar-collapsed .header-subtitle {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

.search-section {
    flex: 0 0 auto;
    max-width: 300px;
    min-width: 200px;
    margin-left: auto;
}

/* Header Bar - Main container for all controls */
.header-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    background: white;
    padding: 12px 50px 12px 25px;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    max-height: 1000px;
    position: relative;
}

/* Remove gap between filters-section and right-section when on same line */
.header-bar>.filters-section+.right-section {
    margin-left: -15px;
    /* Negative margin to remove gap from header-bar gap */
    padding-left: 0;
    /* Remove any padding */
}

/* On smaller screens, allow wrapping */
@media (max-width: 1100px) {
    .header-bar {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .header-bar>.filters-section+.right-section {
        margin-left: 0;
        width: 100%;
        margin-top: 10px;
        padding-left: 0;
    }

    /* Ensure setlist-group aligns properly when wrapped */
    .right-section .setlist-group {
        margin-left: 0;
    }
}

/* Ensure search container has no right margin/padding */
.filters-section .search-section-container {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.filters-section .search-section-container .search-input-wrapper {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.header-bar.collapsed {
    max-height: 0;
    padding: 0 25px;
    margin: 0 auto;
    opacity: 0;
    border: none;
    box-shadow: none;
    overflow: hidden;
}

.header-bar.collapsed .header-section {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.header-bar.collapsed .toggle-header-bar-btn.normal-position {
    display: none !important;
}

/* Header Section - Individual sections within header bar */
.header-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}

.header-section:not(:last-child)::after {
    content: '';
    width: 1px;
    height: 40px;
    background: var(--border-color);
    margin-left: 10px;
    opacity: 0.5;
}

/* Remove spacing after search field - buttons should connect directly */
.filters-section:not(:last-child)::after {
    display: none;
}

/* Remove separator for search section */
.search-section-container::after {
    display: none;
}

@media (max-width: 1080px) {
    .header-section:not(:last-child)::after {
        display: none;
    }
}

.section-label {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9em;
    white-space: nowrap;
    opacity: 0.8;
}

/* Filters Section */
.filters-section {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-right: 0;
    /* Remove margin after filters section */
    overflow: hidden;
}

.filter-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Search Section Container - now part of filters section */
.search-section-container {
    flex: 1 1 0;
    min-width: 80px;
    margin-right: 0;
    /* Remove margin after search field */
    overflow: hidden;
}

/* Only limit max-width on larger screens */
@media (min-width: 1200px) {
    .search-section-container {
        max-width: 350px;
    }
}

.search-section-container .search-input-wrapper {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-right: 0 !important;
    padding-right: 0 !important;
    flex: 1 1 0;
}

/* Right Section: Setlist & Actions */
.right-section {
    flex: 0 0 auto;
    align-items: center;
    gap: 20px;
}

.setlist-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setlist-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.actions-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}

.import-export-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.import-export-btn {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    border: 2px solid var(--border-color);
    padding: 8px 12px;
    font-size: 1em;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    font-family: inherit;
}

.import-export-btn.with-label {
    flex-direction: column;
    padding: 6px 8px;
    gap: 2px;
    min-width: 50px;
    height: 52px;
    justify-content: center;
}

.import-export-btn .icon {
    font-size: 1.2em;
    line-height: 1;
}

.import-export-btn .label {
    font-size: 0.6em;
    font-weight: 500;
    line-height: 1;
    text-transform: lowercase;
}

.import-export-btn:hover {
    background: white;
    border-color: var(--secondary-color);
    transform: translateY(-1px);
}

.delete-all-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

.delete-all-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #dc2626;
    color: #b91c1c;
}

.print-btn {
    background: rgba(37, 99, 235, 0.08);
    color: var(--secondary-color);
    border-color: rgba(99, 102, 241, 0.4);
}

.print-btn:hover {
    background: rgba(37, 99, 235, 0.12);
    border-color: var(--secondary-color);
    color: #4338ca;
}

.view-toggle-btn {
    background: rgba(139, 92, 246, 0.08);
    color: var(--accent-color);
    border-color: rgba(139, 92, 246, 0.4);
}

.view-toggle-btn:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: var(--accent-color);
    color: #7c3aed;
}

.random-song-btn {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.4);
}

.random-song-btn:hover {
    background: rgba(16, 185, 129, 0.12);
    border-color: #10b981;
    color: #047857;
}

.setlist-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.setlist-select {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    border: 2px solid var(--border-color);
    padding: 8px 14px;
    font-size: 0.9em;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: inherit;
    min-width: 140px;
    max-width: 200px;
    height: 38px;
    box-sizing: border-box;
}

.setlist-select:hover {
    background: white;
    border-color: var(--secondary-color);
}

.setlist-select:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.setlist-btn {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    border: 2px solid var(--border-color);
    padding: 6px 8px;
    font-size: 0.9em;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 50px;
    height: auto;
    min-height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.setlist-btn .icon {
    font-size: 1.2em;
    line-height: 1;
}

.setlist-btn .label {
    font-size: 0.6em;
    font-weight: 500;
    line-height: 1;
    text-transform: lowercase;
}

#createSetlistBtn {
    font-size: 1.4em;
    min-width: 38px;
}

.setlist-btn:hover {
    background: white;
    border-color: var(--secondary-color);
    transform: translateY(-1px);
}

.hidden {
    display: none !important;
}

.setlist-btn.hidden {
    display: none;
}

.delete-setlist-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

.delete-setlist-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #dc2626;
    color: #b91c1c;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    flex: 1 1 0;
}

.search-input {
    width: 100%;
    min-width: 0;
    padding: 10px 40px 10px 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95em;
    font-family: inherit;
    background: white;
    transition: font-size 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-input::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

.clear-search-btn {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 24px;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    font-weight: 300;
}

.clear-search-btn:hover {
    background: var(--hover-color);
    color: var(--text-color);
    transform: scale(1.1);
}

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

.clear-search-btn.hidden {
    display: none;
}

/* Filter controls - now part of filters-section */
.filter-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.filter-btn {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    border: 2px solid var(--border-color);
    padding: 10px 18px;
    font-size: 0.9em;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-btn:hover {
    background: white;
    border-color: var(--secondary-color);
    transform: translateY(-1px);
}

.filter-btn.active {
    background: var(--bg-gradient);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-level-badge {
    position: absolute;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
    font-size: 8.5px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    z-index: 10;
    pointer-events: none;
    line-height: 1;
    letter-spacing: 0.3px;
    font-family: 'Inter', sans-serif;
    transform: rotate(-3deg);
}

.add-song-btn {
    background: var(--bg-gradient);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 0.95em;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-song-btn.with-label {
    flex-direction: column;
    padding: 6px 8px;
    gap: 2px;
    min-width: 50px;
    max-width: 50px;
    height: 52px;
    justify-content: center;
    flex-shrink: 1;
}

.add-song-btn .icon {
    font-size: 1.4em;
    line-height: 1;
    font-weight: bold;
    color: white;
}

.add-song-btn .label {
    font-size: 0.6em;
    font-weight: 500;
    line-height: 1;
    text-transform: lowercase;
}

.add-song-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.add-song-btn:hover::before {
    width: 300px;
    height: 300px;
}

.add-song-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.add-song-btn:active {
    transform: translateY(0);
}

/* Selection overlay - black background */
.selection-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    transition: opacity 0.3s ease;
}

.selection-overlay.hidden {
    display: none;
}

/* Focused view container */
.focused-view {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: 90%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.focused-view.hidden {
    display: none !important;
    visibility: hidden;
    opacity: 0;
}

.focused-table-wrapper {
    width: 100%;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    min-height: 200px;
    /* Ensure minimum height to prevent empty appearance */
}

.focused-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

/* Selected song header - appears at top when row is selected */
.selected-song-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    padding: 20px 30px;
    margin: 0 0 20px 0;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
    transition: all 0.3s ease;
}

.selected-song-header.hidden {
    display: none;
}

.selected-song-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 1.3em;
    font-weight: 700;
}

.selected-artist {
    color: white;
}

.selected-title {
    color: white;
    font-weight: 800;
}

.selected-song-header .separator {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

.deselect-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-weight: 300;
    line-height: 1;
}

.deselect-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

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

/* Responsive adjustments for selected song header */
@media (max-width: 1080px) {
    .selected-song-header {
        padding: 15px 20px;
        margin-bottom: 15px;
    }

    .selected-song-info {
        font-size: 1.1em;
        gap: 8px;
    }

    .deselect-btn {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
}

/* Overlay Header Styles (Piano/Editor) */
.piano-chord-header,
.chord-progression-header {
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    gap: 15px;
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header-row-top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    min-height: 30px;
}

.header-row-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.header-row-top h3 {
    margin: 0 !important;
    font-size: 1.3em !important;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
}

/* Nav buttons - clean character style (no ovals) */
.piano-nav-btn {
    background: none !important;
    border: none !important;
    color: white;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 2.2em;
    line-height: 1;
    transition: all 0.2s ease;
    user-select: none;
    flex-shrink: 0;
    padding: 0 10px;
}

/* Song Detail Hamburger Menu & Header Buttons */
.song-detail-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.hamburger-menu-container {
    position: relative;
}

.song-hamburger-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    z-index: 1000;
    overflow: hidden;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top right;
}

.song-hamburger-menu.hidden {
    display: none;
    opacity: 0;
    transform: scale(0.95);
}

.hamburger-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.hamburger-menu-item:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--secondary-color);
}

.hamburger-menu-item .icon {
    font-size: 1.2rem;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger-menu-item#menuDeleteSong:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Header Instrument Button Styling */
#songDetailInstrumentHeaderBtn {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.05);
}

#songDetailInstrumentHeaderBtn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--secondary-color);
}

/* Capo and Transpose badging in header */
.header-badge-container {
    position: relative;
    display: flex;
    align-items: center;
}

.song-detail-header-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--secondary-color);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 1px solid white;
}

.piano-nav-btn:active {
    transform: scale(0.9);
}

.piano-nav-btn:disabled {
    opacity: 0.2;
    pointer-events: none;
}

.piano-chord-close,
.chord-progression-close {
    position: absolute;
    right: 15px;
    top: 25px;
    background: white;
    border: none;
    color: #667eea;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

.piano-chord-close svg,
.chord-progression-close svg {
    width: 24px !important;
    height: 24px !important;
    display: block;
}

.piano-chord-close:hover,
.chord-progression-close:hover {
    background: #f8fafc;
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.deselect-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 2em;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
    padding: 0;
    font-weight: 300;
    margin-left: 20px;
}

.deselect-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

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

.selected-artist {
    font-size: 1.8em;
    font-weight: 700;
    color: white;
}

.separator {
    font-size: 1.8em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
}

.selected-title {
    font-size: 1.8em;
    font-weight: 600;
    color: #fef3c7;
}

.table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    background: white;
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    margin-bottom: 0;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar but keep scrolling functionality */
    scrollbar-width: auto;
    scrollbar-color: var(--secondary-color) transparent;
    /* Prevent horizontal wobbling on iPad */
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
}

/* Custom Scrollbar for better UX */
.table-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    display: block;
}

.table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
    border: 3px solid white;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}


table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    min-width: 1000px;
    /* Adjusted for extra columns */
}

/* Simple view - only show Artist and Title columns */
/* Base table behavior for tablets/large phones */
@media (max-width: 1080px) {
    .column-to-hide {
        display: none !important;
    }
}

table.simple-view {
    min-width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    table-layout: auto; /* Changed from fixed for better 3-column distribution */
}

/* Hide columns in simple view: Favorite (4), CTL (5), MAP (6), Added (7), Verse (8), Chorus (9), Pre-Chorus (10), Bridge (11), Actions (12) */
table.simple-view thead tr th:nth-child(n+4),
table.simple-view tbody tr td:nth-child(n+4) {
    display: none !important;
}

.song-detail-action-btn .icon,
.transpose-menu-item .icon {
    pointer-events: none;
    /* Ensure clicks register on the button element */
}

/* Smaller font size and padding in simple view to show more songs on screen */
table.simple-view tbody tr td {
    font-size: 0.8em;
    padding: 3px 10px;
    line-height: 1.2;
    min-height: 0;
    vertical-align: middle;
}

table.simple-view thead tr th {
    font-size: 0.75em;
    padding: 4px 10px;
    line-height: 1.2;
}

table.simple-view thead {
    border-radius: 20px 20px 0 0;
}

table.simple-view tbody tr td.title-cell {
    font-size: 0.85em;
}

/* Make rows more compact in simple view - reduce spacing between rows */
table.simple-view tbody tr {
    min-height: 0;
    height: auto;
    border-bottom: 1px solid var(--border-color);
}

/* Ensure status column stays small in simple view */
table.simple-view th.status-column,
table.simple-view td.status-cell {
    width: 44px !important;
    min-width: 44px !important;
    padding: 0 4px !important;
}

table.simple-view th.artist-cell,
table.simple-view td.artist-cell {
    width: 35% !important;
}

table.simple-view th.title-cell,
table.simple-view td.title-cell {
    width: auto !important;
}

table.simple-view tbody tr:not(:last-child) {
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}


thead {
    background-color: #764ba2;
    /* Fallback for iOS */
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    /* Fix for iPad repeating sticky backgrounds */
    position: sticky;
    top: 0;
    z-index: 100;
    border-radius: 20px 20px 0 0;
}

thead th {
    position: relative;
    background: transparent;
}

/* Colour scheme Sunset - Table Headers (Uniform) */
/* (Currently using Sunset: Sky Blue, Sunset Orange, Pink, Lavender) */
/* Removed individual colored headers to keep it uniform */

th {
    padding: 20px 16px;
    text-align: left;
    font-weight: 700;
    color: white;
    border-bottom: none;
    white-space: nowrap;
    font-size: 0.95em;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 35px;
    transition: background-color 0.2s ease;
}

.status-column,
.status-cell {
    width: 50px !important;
    min-width: 50px !important;
    text-align: center;
    padding: 0 4px !important;
    font-size: 1.25em;
    vertical-align: middle;
}

.artist-cell {
    width: 23.5% !important; /* Reduced to make room for Title */
    min-width: 130px !important;
}

.title-cell {
    width: 30.5% !important; /* 5 characters wider than before */
    min-width: 190px !important;
}

.status-cell .public-icon,
.status-cell .private-icon {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0.9em;
    vertical-align: middle;
}

.status-cell .public-icon {
    color: #3b82f6; /* Blue for public */
}

.status-cell .private-icon {
    color: #94a3b8; /* Grey for private */
    opacity: 0.7;
}

th.sortable:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.sort-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9em;
    color: white;
    opacity: 0.7;
}

.sort-indicator::after {
    content: '\2195';
    opacity: 0.5;
}

th.sortable.asc .sort-indicator::after {
    content: '\2191';
    opacity: 1;
}

th.sortable.desc .sort-indicator::after {
    content: '\2193';
    opacity: 1;
}


tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 70px;
    cursor: pointer;
    background: white;
    opacity: 1;
}

tbody tr:hover {
    background: var(--hover-color);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

/* Simple selected row styling - just a subtle highlight */
tbody tr.selected {
    background: rgba(99, 102, 241, 0.1) !important;
    border-left: 3px solid var(--secondary-color) !important;
}

/* Public Song Stying - Subtle blue tone for distinction */
tbody tr.public-song {
    background-color: rgba(99, 102, 241, 0.03) !important;
}

tbody tr.public-song:hover {
    background-color: rgba(99, 102, 241, 0.06) !important;
}

tbody tr.public-song.selected {
    background: rgba(99, 102, 241, 0.15) !important;
    border-left: 4px solid #3b82f6 !important;
}

.public-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #3b82f6;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 10px;
    vertical-align: middle;
}

/* Read-only mode for public songs (non-owner/non-admin viewers) */
#songDetailModal.public-read-only .editable-title[contenteditable],
#songDetailModal.public-read-only .editable-field[contenteditable] {
    pointer-events: none;
    cursor: default;
    opacity: 0.85;
    user-select: text;
}

#songDetailModal.public-read-only .bar-divider-btn,
#songDetailModal.public-read-only .chord-editor-btn,
#songDetailModal.public-read-only .chord-section-edit-btn,
#songDetailModal.public-read-only #menuDeleteSong {
    pointer-events: none;
    opacity: 0.3;
}

/* Read-only mode for public songs (non-owner/non-admin viewers) */


td {
    padding: 20px 16px;
    vertical-align: middle;
    min-height: 70px;
    font-size: 0.95em;
    color: var(--text-color);
}

.ctl-cell,
.songmap-cell {
    text-align: center;
    width: 60px;
    min-width: 60px;
}

.favorite-column,
.ctl-column,
.songmap-column {
    width: 60px;
    min-width: 60px;
    text-align: center;
}

.date-added-column {
    width: 90px;
    min-width: 90px;
    text-align: center;
}



.date-added-cell {
    width: 90px;
    min-width: 90px;
    text-align: center;
    font-size: 0.8em;
    color: #94a3b8;
}

/* Variable-based Theme - Table Cells */
td.verse-cell {
    background: var(--block1-bg) !important;
    border-left: 3px solid var(--block1-border);
    font-weight: 500;
}

td.chorus-cell {
    background: var(--block2-bg) !important;
    border-left: 4px solid var(--block2-border);
    border-right: 4px solid var(--block2-border);
    font-weight: 600;
}

td.pre-chorus-cell {
    background: var(--block3-bg) !important;
    border-left: 3px solid var(--block3-border);
    font-weight: 500;
}

td.bridge-cell {
    background: var(--block4-bg) !important;
    border-left: 3px solid var(--block4-border);
    font-weight: 500;
}

td.editable {
    cursor: text;
    transition: background-color 0.2s ease;
}


td.editable:hover {
    background-color: rgba(99, 102, 241, 0.08);
    border-radius: 6px;
}

td.title-cell {
    cursor: default;
    font-weight: 600;
    color: var(--secondary-color);
    min-width: 250px;
    font-size: 1.05em;
}

td.title-cell:hover {
    text-decoration: none;
    color: var(--accent-color);
}

td input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--secondary-color);
    border-radius: 8px;
    font-size: inherit;
    font-family: inherit;
    background: white;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

td input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}


.chord-display {
    display: none !important;
}

.actions-column {
    width: auto;
    min-width: fit-content;
    max-width: fit-content;
    text-align: center;
    white-space: nowrap;
    padding-left: 4px;
    padding-right: 4px;
}

th.actions-column {
    padding: 10px 4px;
}

.actions-cell {
    width: auto;
    min-width: fit-content;
    max-width: fit-content;
    text-align: center;
    white-space: nowrap;
    padding: 8px 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.edit-btn {
    background: rgba(99, 102, 241, 0.1);
    color: var(--secondary-color);
    border: 1px solid rgba(99, 102, 241, 0.3);
    padding: 3px 6px;
    font-size: 0.8em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    margin-right: 2px;
    opacity: 0.7;
    white-space: nowrap;
}

.edit-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.5);
    opacity: 1;
    transform: translateY(-1px);
}

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

.row-edit-input {
    width: 100%;
    padding: 8px;
    border: 2px solid var(--secondary-color);
    border-radius: 6px;
    font-size: inherit;
    font-family: inherit;
    background: white;
    transition: all 0.3s ease;
    min-height: 36px;
}

.row-edit-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Make input wider when focused to show all content */
.row-edit-input.input-focused {
    z-index: 1000;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-width: 3px;
    /* Width will be set by JavaScript based on content */
}

/* Ensure parent cell allows input to expand */
td:has(.row-edit-input.input-focused) {
    overflow: visible !important;
    position: relative;
    z-index: 100;
}

.chord-input-wrapper:has(.row-edit-input.input-focused) {
    overflow: visible;
    position: relative;
    z-index: 100;
}

/* For chord input wrapper, make sure input can expand */
.chord-input-wrapper .row-edit-input.input-focused {
    flex: 0 0 auto;
}

/* Allow table to expand when input is focused */
.table-wrapper:has(.row-edit-input.input-focused) {
    overflow: visible;
}

/* Chord input wrapper for edit mode */
.chord-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.chord-input-wrapper .row-edit-input {
    flex: 1;
}

.chord-modal-btn {
    background: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    border-radius: 6px;
    color: white;
    font-size: 1.2em;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.chord-modal-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.05);
}

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

.chord-modal-btn-detail {
    background: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    border-radius: 6px;
    color: white;
    font-size: 0.9em;
    padding: 2px 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    min-width: 28px;
    height: 24px;
}

.chord-modal-btn-detail:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.05);
}

.chord-modal-btn-detail:active {
    transform: scale(0.95);
}

.delete-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 3px 6px;
    font-size: 0.8em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    opacity: 0.7;
    white-space: nowrap;
}

.delete-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    opacity: 1;
    transform: translateY(-1px);
}

.delete-btn:active {
    transform: translateY(0);
    background: rgba(239, 68, 68, 0.2);
}

.remove-from-setlist-btn {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 3px 6px;
    font-size: 1em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    opacity: 0.7;
    white-space: nowrap;
    margin-right: 4px;
}

.remove-from-setlist-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
    opacity: 1;
    transform: translateY(-1px);
}

.remove-from-setlist-btn:active {
    transform: translateY(0);
    background: rgba(59, 130, 246, 0.2);
}

.youtube-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 3px 6px;
    font-size: 0.8em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.8;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.youtube-btn svg {
    display: block;
    width: 16px;
    height: 16px;
}

.youtube-btn:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
    color: #22c55e;
    opacity: 1;
    transform: translateY(-1px);
}

.youtube-btn:active {
    transform: translateY(0);
    background: rgba(34, 197, 94, 0.2);
}

.external-url-btn {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 3px 6px;
    font-size: 0.8em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.8;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.external-url-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
    opacity: 1;
    transform: translateY(-1px);
}

.external-url-btn:active {
    transform: translateY(0);
    background: rgba(59, 130, 246, 0.2);
}

.youtube-url-cell {
    display: none;
}

.youtube-url-cell:not(.hidden) {
    display: table-cell;
}

.youtube-url-input {
    width: 100%;
    min-width: 300px;
    max-width: 500px;
}

/* YouTube Mini Player */
.youtube-mini-player {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    max-width: calc(100vw - 40px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    transition: all 0.3s ease;
    overflow: hidden;
    touch-action: none;
    /* Prevent default touch behavior for dragging */
}

.youtube-mini-player.hidden {
    display: none;
}

.youtube-mini-player.minimized {
    height: 60px;
}

.youtube-mini-player.minimized .youtube-mini-player-body {
    display: none;
}

.youtube-mini-player-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.youtube-mini-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.youtube-player-title {
    font-size: 0.9em;
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
}

.youtube-player-controls {
    display: flex;
    gap: 8px;
}

.youtube-player-minimize-btn,
.youtube-player-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s ease;
}

.youtube-player-minimize-btn:hover,
.youtube-player-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.youtube-mini-player-body {
    padding: 0;
    background: #000;
}

.youtube-player-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.youtube-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.cancel-btn {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
    padding: 6px 12px;
    font-size: 0.9em;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    margin-right: 8px;
    opacity: 0.7;
}

.cancel-btn:hover {
    background: rgba(107, 114, 128, 0.15);
    border-color: rgba(107, 114, 128, 0.5);
    opacity: 1;
    transform: translateY(-1px);
}

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

.cancel-btn.hidden {
    display: none;
}

.favorite-column {
    width: 60px;
    text-align: center;
}

.ctl-column {
    width: 60px;
    text-align: center;
}

.favorite-cell {
    text-align: center;
    width: 60px;
}

.ctl-cell {
    text-align: center;
    width: 60px;
    cursor: default;
}

.favorite-btn {
    background: transparent;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
    transition: all 0.2s ease;
    line-height: 1;
    color: #9ca3af;
    filter: grayscale(1);
}

.favorite-btn:hover {
    transform: scale(1.2);
    filter: grayscale(0.5);
}

.favorite-btn:active {
    transform: scale(1.1);
}

/* Filled star (favorite) - yellow/gold */
.favorite-btn.favorite-active,
.favorite-btn[data-favorite="true"] {
    color: #fbbf24 !important;
    filter: grayscale(0) !important;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.favorite-btn.favorite-active:hover {
    filter: grayscale(0) brightness(1.1) !important;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.7);
}

/* Responsive Design */
@media (max-width: 1080px) {
    .container {
        padding: 15px 10px;
    }

    header {
        margin-bottom: 10px;
    }

    header::before {
        display: none;
    }

    .header-top {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        position: relative;
        padding-top: 10px;
    }

    .header-top-actions {
        position: absolute;
        right: 0;
        top: 0;
        transform: none;
    }

    .header-title-group {
        padding: 0 45px;
        /* Voorkom overlap met knoppen rechtsboven */
    }

    header h1 {
        font-size: 1.5em;
        text-align: center;
    }

    .header-subtitle {
        font-size: 0.8em;
    }

    .search-section {
        max-width: 100%;
        margin-left: 0;
        width: 100%;
    }

    .header-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px 15px;
        overflow: visible;
    }

    .header-section {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow: visible;
    }

    .header-section:not(:last-child)::after {
        display: none;
    }

    .header-section:not(:last-child) {
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 10px;
    }

    .filters-section,
    .right-section {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        overflow: visible;
    }

    .search-section-container {
        flex: 1 1 auto;
        min-width: 80px;
        max-width: 100%;
    }

    .section-label {
        width: auto;
        margin-bottom: 0;
        font-size: 0.8em;
        flex-shrink: 0;
    }

    .filter-buttons {
        width: auto;
        flex-wrap: wrap;
        flex-shrink: 1;
    }

    .setlist-controls {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }

    .filter-btn {
        padding: 6px 10px;
        font-size: 0.8em;
    }

    .setlist-group,
    .actions-group {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .setlist-select {
        flex: 1;
        min-width: 0;
        max-width: none;
        height: 36px;
        font-size: 0.85em;
    }

    .actions-group {
        flex-direction: row;
        justify-content: stretch;
    }

    .add-song-btn {
        flex-shrink: 1;
        min-width: 0;
        height: 36px;
    }

    .add-song-btn.with-label {
        min-width: 45px;
        max-width: 45px;
        padding: 5px 7px;
    }

    .actions-group {
        gap: clamp(5px, 1.5vw, 10px);
        flex-wrap: nowrap;
    }

    /* Mobile button styles - will be applied to all direct siblings in actions-group */
    .actions-group > .import-export-btn,
    .actions-group > .add-song-btn {
        height: 38px;
        flex: 1;
        min-width: 0;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4px 2px;
        border-radius: 8px;
    }

    /* Reset special width for UG button on mobile */
    #importUgBtn.with-label {
        min-width: 0;
        max-width: none;
        padding: 4px 2px;
    }

    #importSongFile+label .label,
    label[for="importSongFile"] .label {
        display: none;
    }

    #importSongFile+label::after,
    label[for="importSongFile"]::after,
    #combinedImportBtn .label {
        content: 'import';
        font-size: 0.6em;
        font-weight: 500;
        line-height: 1;
        text-transform: lowercase;
        display: block;
    }

    /* Hide the long original label for combined button on mobile */
    #combinedImportBtn .label {
        display: none;
    }
    #combinedImportBtn::after {
        content: 'import';
        font-size: 0.6em;
        font-weight: 500;
        line-height: 1;
        text-transform: lowercase;
    }

    .table-wrapper {
        border-radius: 10px;
    }

    table {
        font-size: 0.85em;
        min-width: 100%;
        table-layout: fixed;
    }

    th,
    td {
        padding: 8px 6px;
    }

    th {
        font-size: 0.7em;
        padding: 10px 6px;
    }

    td {
        font-size: 0.75em;
    }

    /* Adjust column min-widths for mobile */
    th:first-child,
    td:first-child {
        min-width: 0;
    }

    th:nth-child(2),
    td:nth-child(2) {
        min-width: 0;
    }

    th:nth-child(5),
    td:nth-child(5),
    th:nth-child(6),
    td:nth-child(6),
    th:nth-child(7),
    td:nth-child(7),
    th:nth-child(8),
    td:nth-child(8),
    th:nth-child(9),
    td:nth-child(9),
    th:nth-child(10),
    td:nth-child(10) {
        min-width: 0;
    }

    .delete-btn {
        padding: 4px 8px;
        font-size: 0.7em;
    }

}

@media (min-width: 769px) {
    .header-top {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    header h1 {
        text-align: center;
    }

    .header-bar {
        flex-direction: row;
        align-items: center;
    }

    .header-section:not(:last-child)::after {
        display: block;
    }

    .setlist-section {
        flex: 1;
        justify-content: center;
    }

    .actions-section {
        justify-content: flex-end;
    }
}

@media (max-width: 1080px) {
    .container {
        padding: 10px 8px;
    }

    header {
        margin-bottom: 8px;
    }

    header h1 {
        font-size: 1.3em;
    }

    .profile-btn .label {
        display: none;
    }

    .profile-btn {
        padding: 6px 10px;
    }

    .header-subtitle {
        font-size: 0.75em;
    }

    .header-bar {
        padding: 8px 12px;
        gap: 8px;
    }

    .add-song-btn {
        height: 38px; /* Already handled by sibling selector but keep for robustness */
    }

    .add-song-btn.with-label {
        min-width: 0;
        max-width: none;
        padding: 4px 2px;
        transform: none;
    }

    .actions-group {
        display: flex;
        width: 100%;
        justify-content: space-between;
        gap: 4px;
        flex-wrap: nowrap;
        align-items: stretch; /* All same height */
    }

    .import-export-btn.with-label,
    .add-song-btn.with-label {
        flex: 1;
        min-width: 0;
        max-width: none;
        padding: 4px 1px;
    }

    /* Target ONLY import ug to be slightly wider */
    #importUgBtn.with-label {
        min-width: 56px;
        max-width: 56px;
        padding: 4px 2px;
    }

    .table-wrapper {
        border-radius: 8px;
    }

    table {
        font-size: 0.75em;
    }

    th,
    td {
        padding: 6px 4px;
    }

    th {
        font-size: 0.65em;
        padding: 8px 4px;
    }

    .delete-btn {
        padding: 3px 6px;
        font-size: 0.65em;
    }

}

/* Auth and Form Groups */
.auth-form-group {
    margin-bottom: 20px;
}

.auth-form-group label {
    display: block;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.auth-form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 1em;
    font-family: inherit;
    background: white;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.auth-form-group input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.auth-error {
    color: #ef4444;
    font-size: 0.85em;
    margin-top: 10px;
    font-weight: 500;
}

.modal-submit-btn {
    width: 100%;
    background: var(--bg-gradient);
    color: white;
    border: none;
    padding: 14px 20px;
    font-size: 1em;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.modal-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.3);
}

/* Chord Selection Modal */
/* Setlist Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    backdrop-filter: blur(5px);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

#confirmationModal {
    z-index: 5000;
}

#infoModal {
    z-index: 12000;
}

/* Profile modal container - ensure it stays within viewport */
#profileModal {
    align-items: flex-start;
    padding-top: 5vh;
    padding-bottom: 5vh;
}

/* YouTube URL modal should appear above song detail modal */
#youtubeUrlModal {
    z-index: 3000;
}

#lyricsEditModal {
    z-index: 3100;
}

#lyricsEditModal .modal-content {
    max-width: 600px;
    height: 70vh;
}

.modal.hidden {
    display: none;
}

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

.confirmation-modal-overlay.hidden {
    display: none !important;
}

.confirmation-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.confirmation-modal {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    animation: modalScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalScaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

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

.confirmation-modal .modal-header {
    background: #f8fafc;
    padding: 18px 25px;
    border-bottom: 1px solid #e2e8f0;
}

.confirmation-modal .modal-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #1e293b;
}

.confirmation-modal .modal-body {
    padding: 25px;
    color: #475569;
    font-size: 1.05em;
    line-height: 1.5;
}

.confirmation-modal .modal-footer {
    padding: 15px 25px 25px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.confirmation-modal .btn {
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
}

.confirmation-modal .btn-secondary {
    background: #f1f5f9;
    color: #64748b;
}

.confirmation-modal .btn-secondary:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.confirmation-modal .btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.confirmation-modal .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.3);
}

.confirmation-modal .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.confirmation-modal .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3);
}

.confirmation-modal .btn-soft-red {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.confirmation-modal .btn-soft-red:hover {
    background: #fecaca !important;
    color: #dc2626 !important;
}

.confirmation-modal .btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.modal-actions-horizontal {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
}

.confirm-btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-transform: uppercase;
}

.confirm-primary {
    background: var(--bg-gradient);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.confirm-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.3);
}

.confirm-secondary {
    background: #fee2e2;
    color: #ef4444;
    border: 1px solid #fecaca;
}

.confirm-secondary:hover {
    background: #fecaca;
    transform: translateY(-1px);
}

.modal-content.modal-large {
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
}

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

/* Modal header actions container for buttons next to close button */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Header action buttons */
.modal-header-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
}

.modal-header-btn.share-btn {
    background: var(--bg-gradient);
    color: white;
    border: none;
}

.modal-header-btn.share-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3);
}

.modal-header-btn.cancel-btn {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-color);
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.modal-header-btn.cancel-btn:hover {
    background: rgba(107, 114, 128, 0.15);
    border-color: rgba(107, 114, 128, 0.5);
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 2em;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: var(--hover-color);
    color: var(--primary-color);
    transform: rotate(90deg);
}

/* Auth modal - hide close button (login is required) */
.auth-modal .modal-close {
    display: none !important;
}

/* Profile modal - show close button */
#profileModal .modal-close {
    display: flex !important;
}

/* Profile modal responsive styling */
#profileModal .modal-content {
    max-height: calc(90vh - 40px);
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: auto;
}

#profileModal .modal-header {
    flex-shrink: 0;
}

#profileModal .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 20px 25px;
}

/* Ensure modal fits on small screens */
@media (max-height: 600px) {
    #profileModal .modal-content {
        max-height: 95vh;
    }

    #profileModal .modal-body {
        padding: 15px 20px;
    }

    .profile-info-section,
    .profile-password-section,
    .profile-actions-section {
        margin-bottom: 15px;
        padding-bottom: 15px;
        padding-top: 15px;
    }

    .auth-form-group {
        margin-bottom: 15px;
    }
}

@media (max-width: 1080px) {
    #profileModal .modal-content {
        width: 95%;
        max-width: 95vw;
        border-radius: 15px;
    }

    #profileModal .modal-header {
        padding: 15px 20px;
    }

    #profileModal .modal-body {
        padding: 15px 20px;
    }

    .profile-info-section,
    .profile-password-section,
    .profile-actions-section {
        margin-bottom: 15px;
        padding-bottom: 15px;
        padding-top: 15px;
    }
}

/* Profile modal specific styles */
.profile-username-edit-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.profile-update-btn {
    background: var(--bg-gradient);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.profile-update-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
}

.profile-update-btn:active {
    transform: translateY(0);
}

.profile-update-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.profile-info-section {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 2px solid var(--border-color);
}

.profile-email-display,
.profile-total-practice-display {
    background: rgba(99, 102, 241, 0.05);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 1em;
    color: var(--text-color);
    font-weight: 500;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.achievement-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 145px;
    text-align: center;
}

.achievement-card.unlocked {
    background-color: var(--tier-color);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
    border: none;
    box-shadow: 0 6px 15px var(--tier-color);
    color: white;
}

.achievement-card.locked {
    background: #e2e8f0;
    border: none;
    box-shadow: none;
}

.achievement-card.unlocked:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--tier-color);
}

.achievement-level {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.achievement-card.locked .achievement-level {
    color: #94a3b8;
}

.achievement-icon {
    font-size: 36px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}

.achievement-card.unlocked .achievement-icon {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    transform: scale(1.1);
}

.achievement-icon.grayscale {
    filter: grayscale(100%) opacity(40%);
    transform: scale(1);
}

.lock-indicator {
    position: absolute;
    bottom: -2px;
    right: -4px;
    font-size: 10px;
    background: #cbd5e1;
    color: white;
    border-radius: 50%;
    padding: 1px;
    filter: none !important;
}

.achievement-name {
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.achievement-card.unlocked .achievement-name {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.achievement-card.locked .achievement-name {
    color: #64748b;
}

.achievement-count {
    font-size: 10px;
    font-weight: 600;
}

.achievement-card.unlocked .achievement-count {
    color: rgba(255, 255, 255, 0.9);
}

.achievement-card.locked .achievement-count {
    color: #94a3b8;
    font-weight: 400;
}

@media (max-width: 1080px) {
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .achievement-card {
        min-height: 135px;
        padding: 12px 6px;
    }

    .achievement-icon {
        font-size: 32px;
    }
}

/* Leaderboard & Category Tabs */
.mini-tab-btn, .mode-tab-btn {
    border: 1px solid #e2e8f0;
    background: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.mini-tab-btn.active, .mode-tab-btn.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.mode-tab-btn {
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 12px;
}

.leaderboard-list {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    min-height: 100px;
}

.leaderboard-entry {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #e2e8f0;
}

.leaderboard-entry:last-child {
    border-bottom: none;
}

.rank-badge {
    width: 24px;
    height: 24px;
    background: #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    margin-right: 12px;
    flex-shrink: 0;
}

.rank-1 .rank-badge { background: #ffd700; color: #856404; }
.rank-2 .rank-badge { background: #c0c0c0; color: #495057; }
.rank-3 .rank-badge { background: #cd7f32; color: #ffffff; }

.leaderboard-name {
    flex-grow: 1;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-score {
    font-weight: 800;
    font-size: 1rem;
    color: #6366f1;
}

.leaderboard-empty {
    padding: 30px 20px;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    font-size: 13px;
}

.achievement-progress-container {
    background: #f8fafc;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
}

.achievement-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 8px;
}

.achievement-progress-bar-bg {
    width: 100%;
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.achievement-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    width: 0%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.achievement-progress-text {
    font-size: 0.75em;
    color: #64748b;
    text-align: right;
    font-weight: 600;
}

.profile-top-songs-table-wrapper {
    margin-top: 15px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border-color);
}

.profile-top-songs-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 0.9em;
}

.profile-top-songs-table th {
    background: #f1f5f9;
    color: #475569;
    padding: 10px;
    text-align: left;
    text-transform: none;
    font-size: 0.8em;
    font-weight: 700;
}

.profile-top-songs-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.profile-top-songs-table tr:last-child td {
    border-bottom: none;
}

.profile-top-songs-table tr:hover {
    background: rgba(99, 102, 241, 0.02);
}

.profile-password-section {
    margin-bottom: 25px;
}

/* Admin Requests Table Adjustments */
#adminRequestsModal .profile-top-songs-table th {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75em;
}

#adminRequestsModal .action-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.2s;
    white-space: nowrap;
}

#adminRequestsModal .fulfill-btn {
    background: #10b981;
    color: white;
}

#adminRequestsModal .fulfill-btn:hover:not(:disabled) {
    background: #059669;
    transform: scale(1.05);
}

#adminRequestsModal .fulfill-btn.fulfilled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: default;
    opacity: 0.8;
}

#adminRequestsModal .delete-req-btn {
    background: #fee2e2;
    color: #ef4444;
}

#adminRequestsModal .delete-req-btn:hover {
    background: #fecaca;
    color: #dc2626;
    transform: scale(1.05);
}

.profile-sharing-section {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 2px solid var(--border-color);
}

.profile-sharing-section h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
    font-size: 1.1em;
    font-weight: 600;
}

.profile-pending-section {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 2px solid var(--border-color);
}

.profile-pending-section h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
    font-size: 1.1em;
    font-weight: 600;
}

.profile-password-section h4 {
    margin: 0 0 20px 0;
    color: var(--primary-color);
    font-size: 1.1em;
    font-weight: 600;
}

.profile-sharing-section {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 2px solid var(--border-color);
}

.profile-sharing-section h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
    font-size: 1.1em;
    font-weight: 600;
}

.profile-pending-section {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 2px solid var(--border-color);
}

.profile-pending-section h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
    font-size: 1.1em;
    font-weight: 600;
}

.profile-actions-section {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 2px solid var(--border-color);
}

.logout-btn {
    width: 100%;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 2px solid rgba(239, 68, 68, 0.3);
    margin-left: 0;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
}

.auth-form-group {
    margin-bottom: 20px;
}

.auth-form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.95em;
}

.auth-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 1em;
    font-family: inherit;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.auth-input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.auth-form {
    margin-top: 15px;
}

.auth-error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9em;
    font-weight: 500;
}

.auth-success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9em;
    font-weight: 500;
}

.auth-submit-btn {
    margin-top: 10px;
}

.auth-toggle {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9em;
    color: var(--text-light);
}

.auth-toggle-link {
    background: none;
    border: none;
    color: var(--secondary-color);
    cursor: pointer;
    text-decoration: underline;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    margin-left: 5px;
}

.auth-toggle-link:hover {
    color: var(--accent-color);
}

.modal-body {
    padding: 15px 25px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-content.modal-large .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Override for Share Songs Modal - body should not scroll */
#shareSongsModal.modal .modal-content.modal-large .modal-body {
    overflow: hidden;
}

.modal-body input:not([type="checkbox"]) {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 1em;
    font-family: inherit;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.modal-body input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.modal-submit-btn {
    width: 100%;
    background: var(--bg-gradient);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.modal-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.modal-submit-btn:active {
    transform: translateY(0);
}

.modal-cancel-btn {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-color);
    border: 2px solid rgba(107, 114, 128, 0.3);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.modal-cancel-btn:hover {
    background: rgba(107, 114, 128, 0.15);
    border-color: rgba(107, 114, 128, 0.5);
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid var(--border-color);
}

/* Filter Modal Styles */
.filter-option-group {
    margin-bottom: 20px;
}

.filter-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.95em;
}

.filter-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 1em;
    font-family: inherit;
    background: white;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1em;
    color: var(--text-color);
    user-select: none;
}

.filter-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
    accent-color: var(--secondary-color);
    flex-shrink: 0;
    margin-bottom: 0 !important;
}

.filter-checkbox-label:hover {
    color: var(--secondary-color);
}

.filter-btn .icon {
    margin-right: 6px;
}

.filter-btn .label {
    font-size: 0.9em;
}

.songs-selection-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.songs-selection-container .songs-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.selection-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
    flex-wrap: wrap;
}

/* Share Songs Modal - Search field above buttons, styled like email field */
#shareSongsModal .songs-selection-container {
    display: flex;
    flex-direction: column;
}

/* Move search field out of selection-controls and style like email field */
#shareSongsModal .selection-search {
    order: -1;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
    flex: none;
    width: 100%;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: none;
    position: relative;
}

#shareSongsModal .selection-search-input {
    border: none;
    outline: none;
    font-size: 1em;
    width: 100%;
    background: transparent;
    padding: 0;
}

#shareSongsModal .selection-search-input:focus {
    outline: none;
}

#shareSongsModal .selection-search:focus-within {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

#shareSongsModal .selection-clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 1.2em;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Selection controls - allow wrapping to keep buttons visible */
#shareSongsModal .selection-controls {
    flex-wrap: wrap;
    gap: 4px;
    overflow-x: visible;
    align-items: center;
    justify-content: flex-start;
}

/* Make all buttons in share songs modal smaller to fit */
#shareSongsModal .selection-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 4px 8px;
    font-size: 0.75em;
    line-height: 1.2;
    height: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Make sort direction button smaller */
#shareSongsModal .sort-direction-btn {
    height: auto !important;
    padding: 4px 8px;
    font-size: 0.75em;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#shareSongsModal .sorting-label {
    flex-shrink: 0;
    font-size: 0.75em;
}

#shareSongsModal .selected-count {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.75em;
}

.selection-sorting {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 280px;
    flex-wrap: wrap;
}

/* Reduce gaps in share songs modal sorting - prevent growing */
#shareSongsModal .selection-sorting {
    gap: 4px;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    flex-wrap: nowrap;
}

#shareSongsModal .sorting-options {
    gap: 3px;
    flex-wrap: nowrap;
}

.sorting-label {
    font-weight: 700;
    color: var(--text-light);
}

.sorting-options {
    display: inline-flex;
    gap: 8px;
    align-items: stretch;
}

.sort-option.active {
    background: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.25);
}

.sort-direction-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    height: 38px;
}

.sorting-options .selection-btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
}

.selection-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.selection-search-input {
    border: none;
    outline: none;
    font-size: 0.95em;
    width: 100%;
    background: transparent;
}

.selection-clear-btn {
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 1.2em;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selection-clear-btn:hover {
    color: var(--secondary-color);
}

.selection-btn {
    background: rgba(99, 102, 241, 0.1);
    color: var(--secondary-color);
    border: 1px solid rgba(99, 102, 241, 0.3);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.selection-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.5);
}

.selected-count {
    margin-left: auto;
    font-weight: 600;
    color: var(--text-light);
}

.songs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Ensure songs-list is scrollable within songs-selection-container */
.songs-selection-container .songs-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-right: 4px;
}

.no-songs-message {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.8);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-light);
    font-weight: 600;
}

.song-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.song-item:hover {
    background: var(--hover-color);
    border-color: var(--secondary-color);
}

.song-item.in-setlist {
    background: rgba(99, 102, 241, 0.05);
    opacity: 0.7;
}

.song-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--secondary-color);
}

.song-item input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.song-item label {
    cursor: pointer;
    flex: 1;
    user-select: none;
}

.in-setlist-badge {
    color: var(--text-light);
    font-size: 0.85em;
    font-style: italic;
}

/* Share Songs Modal */
/* Ensure modal-content has proper height */
#shareSongsModal .modal-content.modal-large {
    height: 80vh;
    min-height: 500px;
}

/* Ensure modal-body doesn't scroll - only songs-list should scroll */
#shareSongsModal .modal-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.share-songs-email-section {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
}

.share-songs-email-section label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    flex-shrink: 0;
}

.piano-nav-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

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

.header-right-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Ensure songs-selection-container takes available space */
#shareSongsModal .songs-selection-container {
    flex: 1 1 auto;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Selection controls should not grow */
#shareSongsModal .selection-controls {
    flex-shrink: 0;
    flex-grow: 0;
}

/* Songs list should take all remaining space */
#shareSongsModal .songs-selection-container .songs-list,
#shareSongsModal #shareSongsListContainer {
    flex: 1 1 auto;
    min-height: 200px;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

/* Note: Share/Cancel buttons are now in the modal header */

/* Accept Songs Modal - Pending Song Items */
.pending-song-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.pending-song-item:hover {
    background: var(--hover-color);
    border-color: var(--secondary-color);
}

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

.pending-song-title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1em;
}

.pending-song-sender {
    font-size: 0.85em;
    color: var(--text-light);
    font-style: italic;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--border-color);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.modal-actions .modal-submit-btn {
    flex: 1;
    min-width: 120px;
}

.modal-actions .modal-cancel-btn {
    flex: 1;
    min-width: 120px;
}

/* Share Songs Modal - Mobile Optimizations */
@media (max-width: 1080px) {
    #shareSongsModal .modal-content {
        max-height: 95vh;
        height: 95vh;
    }

    #shareSongsModal .modal-header {
        padding: 10px 12px;
        flex-shrink: 0;
    }

    #shareSongsModal .modal-header h3 {
        font-size: 1em;
    }

    #shareSongsModal .modal-body {
        padding: 12px;
        overflow: hidden;
    }

    #shareSongsModal .share-songs-email-section {
        margin-bottom: 8px;
        padding-bottom: 8px;
        flex-shrink: 0;
    }

    #shareSongsModal .share-songs-email-section label {
        margin-bottom: 5px;
        font-size: 0.85em;
    }

    #shareSongsModal .share-songs-email-section input {
        padding: 8px 12px;
        font-size: 0.9em;
    }

    /* Search field above buttons, styled like email field */
    #shareSongsModal .selection-search {
        order: -1;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--border-color);
        width: 100%;
        background: white;
        border: 2px solid var(--border-color);
        border-radius: 10px;
        padding: 10px 14px;
        box-shadow: none;
    }

    #shareSongsModal .selection-search-input {
        padding: 0;
        font-size: 0.9em;
    }

    #shareSongsModal .selection-controls {
        margin-bottom: 6px;
        padding-bottom: 6px;
        gap: 3px;
        flex-shrink: 0;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    #shareSongsModal .selection-btn {
        padding: 3px 6px;
        font-size: 0.7em;
        flex-shrink: 0;
        line-height: 1.2;
        height: auto !important;
    }

    #shareSongsModal .sort-direction-btn {
        height: auto !important;
        padding: 3px 6px;
        font-size: 0.7em;
        line-height: 1.2;
        flex-shrink: 0;
    }

    #shareSongsModal .selection-sorting {
        gap: 3px;
        margin-bottom: 0;
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: auto;
        flex-wrap: nowrap;
    }

    #shareSongsModal .sorting-options {
        gap: 2px;
        flex-wrap: nowrap;
    }

    #shareSongsModal .sorting-label {
        font-size: 0.65em;
        flex-shrink: 0;
    }

    #shareSongsModal .selected-count {
        font-size: 0.65em;
        flex-shrink: 0;
    }

    /* Header buttons responsive - 768px */
    #shareSongsModal .modal-header-actions {
        gap: 6px;
    }

    #shareSongsModal .modal-header-btn {
        padding: 5px 10px;
        font-size: 0.8em;
    }

    /* Make song items more compact on mobile */
    #shareSongsModal .song-item {
        padding: 6px 8px;
        gap: 8px;
    }

    #shareSongsModal .song-item input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    #shareSongsModal .song-item label {
        font-size: 0.9em;
    }
}

@media (max-width: 1080px) {
    #shareSongsModal .modal-content {
        max-height: 98vh;
        height: 98vh;
        width: 95%;
    }

    #shareSongsModal .modal-header {
        padding: 8px 10px;
        flex-shrink: 0;
    }

    #shareSongsModal .modal-header h3 {
        font-size: 0.95em;
    }

    #shareSongsModal .modal-close {
        font-size: 1.4em;
        width: 30px;
        height: 30px;
        padding: 0;
    }

    #shareSongsModal .modal-body {
        padding: 10px;
        overflow: hidden;
    }

    #shareSongsModal .share-songs-email-section {
        margin-bottom: 6px;
        padding-bottom: 6px;
        flex-shrink: 0;
    }

    #shareSongsModal .share-songs-email-section label {
        margin-bottom: 4px;
        font-size: 0.8em;
    }

    #shareSongsModal .share-songs-email-section input {
        padding: 6px 10px;
        font-size: 0.85em;
    }

    /* Search field above buttons, styled like email field */
    #shareSongsModal .selection-search {
        order: -1;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--border-color);
        width: 100%;
        background: white;
        border: 2px solid var(--border-color);
        border-radius: 10px;
        padding: 8px 12px;
        box-shadow: none;
    }

    #shareSongsModal .selection-search-input {
        padding: 0;
        font-size: 0.85em;
    }

    #shareSongsModal .selection-controls {
        flex-direction: row;
        align-items: center;
        margin-bottom: 5px;
        padding-bottom: 5px;
        gap: 2px;
        flex-shrink: 0;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    #shareSongsModal .selection-btn {
        padding: 2px 4px;
        font-size: 0.6em;
        flex-shrink: 0;
        white-space: nowrap;
        line-height: 1.2;
        height: auto !important;
    }

    #shareSongsModal .sort-direction-btn {
        height: auto !important;
        padding: 2px 4px;
        font-size: 0.6em;
        line-height: 1.2;
        flex-shrink: 0;
    }

    #shareSongsModal .sorting-label {
        font-size: 0.55em;
        flex-shrink: 0;
    }

    #shareSongsModal .selection-sorting {
        gap: 2px;
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: auto;
        margin-bottom: 0;
        flex-wrap: nowrap;
    }

    #shareSongsModal .sorting-options {
        gap: 1px;
        flex-wrap: nowrap;
    }

    #shareSongsModal .selected-count {
        font-size: 0.55em;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Header buttons responsive - 480px */
    #shareSongsModal .modal-header-actions {
        gap: 4px;
    }

    #shareSongsModal .modal-header-btn {
        padding: 4px 8px;
        font-size: 0.7em;
    }

    /* Make song items even more compact on small mobile */
    #shareSongsModal .song-item {
        padding: 5px 6px;
        gap: 6px;
    }

    #shareSongsModal .song-item input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

    #shareSongsModal .song-item label {
        font-size: 0.85em;
    }

    #shareSongsModal .songs-list {
        gap: 4px;
    }
}

.chord-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.chord-modal.hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.chord-modal-content {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: calc(100vh - 40px);
    height: calc(100vh - 40px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

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

.chord-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-gradient);
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}

.chord-modal-header h3 {
    font-size: 1.3em;
}

.chord-modal-header h3 {
    color: white;
    font-size: 1.5em;
    font-weight: 700;
    margin: 0;
}

.chord-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 2em;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
    padding: 0;
}

.chord-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.chord-modal-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chord-categories {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.chord-category {
    transition: all 0.3s ease;
}

/* Toggleable categories - header always visible, buttons can be hidden */
.chord-category.toggleable {
    display: block;
}

.chord-category h4 {
    color: var(--primary-color);
    font-size: 0.95em;
    font-weight: 600;
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border-color);
}

.chord-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.chord-category-header h4 {
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border-color);
    font-size: 0.95em;
}

.toggle-category-btn {
    background: rgba(99, 102, 241, 0.1);
    color: var(--secondary-color);
    border: 1px solid rgba(99, 102, 241, 0.3);
    padding: 5px 10px;
    font-size: 0.8em;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
}

.toggle-category-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}

.chord-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    transition: all 0.3s ease;
}

.chord-buttons.hidden {
    display: none !important;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.chord-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 50px;
}

.chord-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

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


.chord-input-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid var(--border-color);
    flex-shrink: 0;
}

.chord-input-section label {
    display: block;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1em;
}

#chordCustomInput {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95em;
    font-family: inherit;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

#chordCustomInput:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.chord-add-btn {
    background: var(--bg-gradient);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.chord-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Tablets (iPad, etc.) */
@media (max-width: 1024px) and (min-width: 769px) {
    .container {
        padding: 15px;
    }

    header {
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 1.5em;
    }

    .header-subtitle {
        font-size: 0.85em;
    }

    header::before {
        display: none;
    }

    .header-bar {
        padding: 10px 40px 10px 15px;
        gap: 10px;
    }

    .section-label {
        font-size: 0.8em;
    }

    .filter-btn {
        padding: 6px 12px;
        font-size: 0.8em;
    }

    .setlist-select {
        padding: 6px 10px;
        font-size: 0.8em;
        min-width: 100px;
        height: 32px;
    }

    .setlist-btn,
    .import-export-btn,
    .add-song-btn {
        padding: 6px 10px;
        font-size: 0.85em;
        min-width: 32px;
        height: 32px;
    }

    .search-section-container {
        max-width: none;
    }

    .search-input {
        padding: 8px 35px 8px 12px;
        font-size: 0.85em;
    }

    .table-wrapper {
        border-radius: 12px;
    }

    table {
        min-width: 700px;
    }

    th {
        padding: 10px 8px;
        font-size: 0.75em;
    }

    td {
        padding: 8px 6px;
        font-size: 0.8em;
        min-height: 40px;
    }

    td.title-cell {
        font-size: 0.85em;
        min-width: 150px;
    }

    .favorite-btn {
        font-size: 1.2em;
    }

    .edit-btn,
    .delete-btn {
        padding: 4px 8px;
        font-size: 0.75em;
    }

    .chord-modal-content {
        width: 95%;
        max-width: 600px;
        max-height: calc(100vh - 20px);
        height: calc(100vh - 20px);
    }

    .chord-modal-header {
        padding: 15px 20px;
    }

    .chord-modal-header h3 {
        font-size: 1.3em;
    }

    .chord-modal-close {
        width: 35px;
        height: 35px;
        font-size: 1.8em;
    }

    .chord-modal-body {
        padding: 15px 20px;
    }

    .chord-categories {
        gap: 10px;
        margin-bottom: 12px;
    }

    .chord-category h4 {
        font-size: 0.9em;
        padding-bottom: 5px;
    }

    .chord-btn {
        padding: 6px 12px;
        font-size: 0.85em;
        min-width: 45px;
    }

    .chord-input-section {
        margin-top: 12px;
        padding-top: 12px;
    }

    .chord-input-section label {
        font-size: 0.9em;
        margin-bottom: 6px;
    }

    #chordCustomInput {
        padding: 10px;
        font-size: 0.9em;
        margin-bottom: 10px;
    }

    .chord-add-btn {
        padding: 8px 20px;
        font-size: 0.9em;
    }
}

/* iPad Pro 9.7" and similar tablets - Portrait */
@media (max-width: 810px) and (min-width: 768px) and (orientation: portrait) {
    .container {
        padding: 10px;
    }

    header {
        margin-bottom: 8px;
    }

    header h1 {
        font-size: 1.3em;
    }

    .header-subtitle {
        font-size: 0.75em;
    }

    header::before {
        display: none;
    }

    .header-bar {
        padding: 8px 35px 8px 12px;
        gap: 8px;
        flex-direction: column;
    }

    .table-wrapper {
        border-radius: 10px;
    }

    table {
        min-width: 100%;
        table-layout: fixed;
    }

    th {
        padding: 8px 4px;
        font-size: 0.65em;
    }

    td {
        padding: 6px 4px;
        font-size: 0.7em;
    }

    td.title-cell {
        font-size: 0.75em;
        min-width: 0;
    }
}

/* iPad Pro 9.7" and similar tablets - Landscape */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
    .container {
        padding: 10px 15px;
    }

    header {
        margin-bottom: 8px;
    }

    header::before {
        display: none;
    }

    table {
        min-width: 100%;
        table-layout: fixed;
    }

    th {
        padding: 8px 6px;
        font-size: 0.7em;
    }

    td {
        padding: 6px 5px;
        font-size: 0.75em;
        min-height: 35px;
    }
}

/* Mobile devices */
@media (max-width: 1080px) {
    .chord-modal-content {
        width: 95%;
        max-height: calc(100vh - 20px);
        height: calc(100vh - 20px);
    }

    .chord-categories {
        gap: 10px;
        margin-bottom: 12px;
    }

    .chord-modal-header {
        padding: 15px 18px;
    }

    .chord-modal-header h3 {
        font-size: 1.3em;
    }

    .chord-modal-close {
        width: 35px;
        height: 35px;
        font-size: 1.8em;
    }

    .chord-modal-body {
        padding: 15px 18px;
    }

    .chord-category h4 {
        font-size: 0.85em;
        padding-bottom: 5px;
    }

    .chord-btn {
        padding: 6px 10px;
        font-size: 0.8em;
        min-width: 40px;
    }

    .chord-input-section {
        margin-top: 10px;
        padding-top: 10px;
    }

    .chord-input-section label {
        font-size: 0.9em;
        margin-bottom: 6px;
    }

    #chordCustomInput {
        padding: 10px;
        font-size: 0.85em;
        margin-bottom: 10px;
    }

    .chord-add-btn {
        padding: 8px 18px;
        font-size: 0.85em;
    }
}

/* Song Detail Modal */
.song-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Changed from center to top-align */
    z-index: 2000;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease;
    overflow: hidden;
    padding: 15px;
    box-sizing: border-box;
}

.song-detail-modal.hidden {
    display: none;
}

.song-detail-modal-content {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 1200px;
    height: calc(100vh - 30px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
    margin: auto;
    box-sizing: border-box;
    position: relative;
}

.song-detail-key-display {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 12px 20px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
    user-select: none;
    z-index: 10;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
}

@media (max-width: 1080px) {
    .song-detail-key-display {
        font-size: 1.8rem;
        padding: 8px 15px;
        bottom: 8px;
        right: 12px;
        min-width: 60px;
    }
}

.song-detail-key-display.hidden {
    display: none;
}

.song-detail-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: clamp(13px, 1.8vh, 23px) clamp(15px, 3vw, 35px);
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    gap: clamp(8px, 1.5vw, 15px);
    flex-wrap: nowrap;
    min-height: 90px;
    /* Stabilize height during thumbnail loading */
}

.song-detail-footer-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    /* Ensure vertical centering */
    justify-content: flex-end;
    /* Or center? User said icon is not centered. I'll check the context context. */
}

/* Fix for close button overlapping icons on PC and iPad */
/* Moved to end of file to override mobile styles */

.song-detail-title-section {
    flex: 1 1 auto;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

/* Action buttons group (Play, Edit URL, Favorite) */
.song-detail-action-buttons {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.5vw, 8px);
    flex-shrink: 0;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Capo Feature UI */
.song-detail-capo-container {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: #facc15; /* Yellow */
    cursor: pointer;
    user-select: none;
    z-index: 10;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 2px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}

.song-detail-capo-container:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: translateX(-50%) scale(1.05);
}

.song-detail-capo-container.hidden {
    display: none !important;
}

.capo-digit {
    color: #facc15; /* Yellow */
    opacity: 0.7;
    transition: all 0.2s ease;
}

.capo-digit.active {
    color: #ffffff !important;
    opacity: 1;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.capo-label {
    margin-right: 4px;
    text-transform: uppercase;
    font-size: 9px;
    opacity: 0.9;
}

/* Transpose Menu */
.transpose-menu-container {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.transpose-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    padding: 8px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1000;
    margin-top: 8px;
    min-width: 100px;
    animation: fadeIn 0.2s ease;
}

.transpose-menu.hidden {
    display: none;
}

.transpose-menu-item {
    background: transparent;
    border: none;
    color: white;
    padding: 12px 16px;
    /* Increased padding for better touch target on mobile */
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Increased gap */
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    /* Increased font size */
    transition: background 0.2s;
    white-space: nowrap;
}

.transpose-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.transpose-menu-item .icon {
    width: 16px;
    text-align: center;
    font-size: 1.1em;
}

.song-detail-action-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1em;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-detail-action-btn.with-label {
    flex-direction: column;
    gap: 0;
    width: clamp(55px, 12vw, 70px);
    height: clamp(52px, 10vw, 65px);
    padding: 8px 4px;
    box-sizing: border-box;
    flex-shrink: 0;
    min-width: 0;
    justify-content: center;
}

.song-detail-action-btn .icon {
    font-size: clamp(27px, 6vw, 36px);
    line-height: 1;
    width: clamp(27px, 6vw, 36px);
    height: clamp(27px, 6vw, 36px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-detail-action-btn .icon.youtube-icon svg {
    width: clamp(28px, 5vw, 42px);
    height: clamp(20px, 3.5vw, 30px);
    display: block;
}

.song-detail-action-btn .label {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
}

.song-detail-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    /* Removed scale effect to prevent layout shift */
}

.song-detail-action-btn#songDetailDeleteBtn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.song-detail-action-btn:hover .label {
    color: rgba(255, 255, 255, 0.9);
}

.song-detail-action-btn.favorite-active {
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.song-detail-action-btn.favorite-active:hover {
    color: #f59e0b;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.7);
}

.song-detail-action-btn.practice-active {
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    opacity: 1 !important;
}

#songDetailPracticeBtn:not(.practice-active) .icon {
    opacity: 0.4;
    filter: grayscale(1);
}

#songDetailPracticeBtn:not(.practice-active) .label {
    opacity: 0.6;
}

#songDetailPracticeBtn,
#songDetailSaveBtn {
    width: clamp(80px, 16vw, 110px);
    height: auto !important;
    /* Changed from fixed height to auto for alignment */
    gap: 0px !important;
    /* Removing gap to use margin-top consistently */
    padding: 0 0 6px 0 !important;
    margin: 0 !important;
}

#songDetailPracticeBtn .icon,
#songDetailSaveBtn .icon {
    font-size: clamp(43px, 9.4vw, 56px);
    /* Increased by 10% for iPad/PC (v1.953) */
    width: auto;
    height: auto;
}

#songDetailPracticeBtn .label,
#songDetailSaveBtn .label {
    font-size: clamp(14px, 3vw, 16px);
    text-transform: lowercase;
    margin-top: 8px !important;
    height: 20px !important;
    display: flex !important;
    align-items: flex-end !important;
    line-height: 1 !important;
}

.song-detail-action-btn.practice-active:hover {
    color: #f59e0b;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.7);
}

.song-detail-action-btn.youtube-active {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.song-detail-action-btn.youtube-active .label {
    color: rgba(255, 255, 255, 0.7);
}

.song-detail-action-btn.youtube-active:hover {
    color: #dc2626;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.7);
}

.song-detail-action-btn.hidden {
    display: none;
}

.song-detail-separator {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2em;
    font-weight: 400;
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-block;
}

.song-detail-artist {
    font-size: clamp(0.9em, 2vw, 1.2em);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    letter-spacing: 0.5px;
    white-space: nowrap !important;
    cursor: pointer;
    padding: clamp(2px, 0.5vh, 4px) clamp(4px, 1vw, 8px);
    border-radius: 6px;
    transition: background 0.2s ease;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    min-height: 1.5em;
    position: relative;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block;
    max-width: 100%;
}

.song-detail-artist.empty-field::before {
    content: attr(data-placeholder);
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    pointer-events: none;
}

.song-detail-artist:hover {
    background: rgba(255, 255, 255, 0.1);
}

.song-detail-title {
    font-size: clamp(1.1em, 3vh, 1.6em);
    font-weight: 800;
    color: white;
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
    flex: 0 1 auto;
    min-width: 0;
    cursor: pointer;
    padding: clamp(2px, 0.5vh, 4px) clamp(4px, 1vw, 8px);
    border-radius: 6px;
    transition: background 0.2s ease;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    position: relative;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    word-break: normal !important;
    display: inline-block;
    max-width: 100%;
}

.song-detail-title.empty-field::before {
    content: attr(data-placeholder);
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    pointer-events: none;
}

.song-detail-title:hover {
    background: rgba(255, 255, 255, 0.1);
}

.song-detail-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.song-detail-nav-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: clamp(1.3em, 3vw, 2em);
    width: clamp(32px, 5vw, 45px);
    height: clamp(32px, 5vw, 45px);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
    padding: 0;
    font-weight: 300;
    flex-shrink: 0;
}

.song-detail-nav-btn.with-label {
    flex-direction: column;
    width: 75px;
    height: 60px;
    border-radius: 8px;
    padding: 4px 6px;
    gap: 2px;
    box-sizing: border-box;
}

.song-detail-nav-btn .icon {
    font-size: 20px;
    line-height: 1;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-detail-nav-btn .label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-transform: lowercase;
}

.song-detail-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.song-detail-nav-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.song-detail-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.song-detail-close {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: clamp(1.1em, 2.5vw, 1.5em);
    width: clamp(32px, 4.5vw, 40px);
    height: clamp(32px, 4.5vw, 40px);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
    padding: 0;
    font-weight: 300;
    flex-shrink: 0;
}

/* Ability Stars Container */
.ability-stars-container {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    cursor: pointer;
    min-width: 100px;
    justify-content: center;
}

.ability-star {
    font-size: 28px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
}

/* Hover state: highlight stars up to hovered one - handled by JS or simple CSS hover for all */
/* Simple CSS hover for all stars in container when hovering container */
.ability-stars-container:hover .ability-star {
    -webkit-text-stroke: 1px #eab308;
    /* Yellow-500 hover */
    transform: scale(1.1);
}

/* Active state: Filled bright yellow */
.ability-star.active {
    color: #ffd700;
    /* Gold */
    -webkit-text-stroke: 0;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    transform: scale(1.1);
}

.ability-star:hover {
    transform: scale(1.25) !important;
}

.song-detail-close-top {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #94a3b8;
    font-size: 24px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
    padding: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.song-detail-close-top:hover {
    background: white;
    color: #ef4444;
    transform: scale(1.1);
}

.song-detail-close.with-label {
    flex-direction: column;
    width: 75px;
    height: 60px;
    border-radius: 8px;
    padding: 4px 6px;
    gap: 2px;
    box-sizing: border-box;
}

.song-detail-close .icon {
    font-size: 20px;
    line-height: 1;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-detail-close .label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-transform: lowercase;
}

.song-detail-close:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.song-detail-close:active {
    transform: scale(0.95);
}

.song-detail-footer {
    margin-top: 0;
    border-top: none;
    padding: clamp(6px, 1vh, 12px) clamp(15px, 3vw, 35px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0 0 20px 20px;
    gap: 15px;
    flex-shrink: 0;
}

/* Match instrument toggle with Timeline/Lyrics styling */
#instrumentToggleBtn {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 0 6px 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    /* Pin label to bottom */
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    /* Suppress inherited active/hover transforms that shift label */
}

#instrumentToggleBtn:active,
#instrumentToggleBtn:hover {
    /* Removed scale effect to prevent layout shift */
    opacity: 0.9;
}

#instrumentToggleBtn:active {
    transform: scale(0.97) !important;
}

#instrumentToggleBtn .icon {
    width: auto !important;
    height: 48px !important;
    /* Reverted back to original 100% (was 53px) */
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 40px !important;
    /* Reverted back to original 100% (was 44px) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    margin-bottom: 0px !important;
    color: white !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* Sycned footer labels handled at end of file */

/* Specific sizing for mobile to ensures it matches precisely */
@media (max-width: 1080px) {
    #instrumentToggleBtn .icon {
        height: 34px !important;
        /* Matched to timeline icon height for alignment */
        font-size: 30px !important;
        /* ~10% decrease from 34px */
    }

    #instrumentToggleBtn .label {
        margin-top: 8px !important;
        font-size: 0.65rem !important;
        /* Same as other mobile labels */
        height: 18px !important;
        letter-spacing: normal !important;
    }
}

/* Guitar Overlay Styles */
.guitar-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.guitar-info-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    font-weight: 500;
}

.guitar-card {
    min-width: 140px !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease !important;
}

.guitar-card:hover {
    transform: translateY(-5px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
}

.guitar-card:active {
    transform: translateY(-2px) scale(0.98) !important;
}

.guitar-diagram-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    margin-top: 10px;
}

.chord-simplified-hint {
    font-size: 0.7em;
    color: #ffd700;
    margin-left: 5px;
    font-weight: normal;
}

.missing-fingering {
    color: #e53e3e;
    font-size: 0.8rem;
    font-style: italic;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

.song-detail-thumbnail {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    z-index: 15;
    transition: opacity 0.3s;
    flex-shrink: 0;
    margin-right: 12px;
}

@media (max-width: 600px) {
    .song-detail-header {
        padding: clamp(18px, 2vh, 23px) clamp(10px, 2vw, 15px);
        min-height: 85px;
    }

    .song-detail-thumbnail {
        width: 48px;
        height: 48px;
        border-radius: 6px;
        margin-right: 8px;
        margin-left: 40px;
    }
}

@media (min-width: 768px) {
    .song-detail-header {
        min-height: 170px;
        /* For 128px thumbnail + padding */
    }

    .song-detail-thumbnail {
        width: 128px;
        height: 128px;
        border-radius: 12px;
    }
}

.song-detail-thumbnail.hidden {
    display: none;
}

.song-detail-left-badges {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    align-self: center;
}

.song-detail-key-badge,
.song-detail-bpm-badge {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
    height: 32px;
    width: 85px;
    /* Fixed width for stability */
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding-bottom: 2px;
}

.song-detail-key-badge .key-label,
.song-detail-bpm-badge .bpm-label {
    opacity: 0.7;
    margin-right: 4px;
    user-select: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: lowercase;
    flex-shrink: 0;
}

.song-detail-key-badge .key-value,
.song-detail-bpm-badge .bpm-value {
    outline: none;
    cursor: text;
}

.song-detail-key-badge .key-value.editing,
.song-detail-bpm-badge .bpm-value.editing {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0 6px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.song-detail-body {
    padding: clamp(8px, 1.5vh, 18px) clamp(12px, 2.5vw, 35px);
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1vh, 10px);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    min-height: 0;
    padding-bottom: 40px; /* Space to clear floating footer/save btn */
}

.song-chord-section {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: clamp(6px, 1vh, 12px);
    transition: all 0.3s ease;
}

.song-chord-section:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--secondary-color);
}

.chord-section-title {
    font-size: clamp(0.7em, 1.5vw, 0.85em);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 clamp(2px, 0.5vh, 6px) 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(4px, 1vw, 10px);
}

.chord-section-title-text {
    flex: 1;
}

.chord-section-title.editable-title {
    cursor: text;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.2s;
    min-width: 180px;
    display: inline-block;
    border: 1px dashed transparent;
}

.chord-section-title.editable-title:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.chord-section-title.editable-title:focus {
    background: white;
    border-style: solid;
    border-color: var(--secondary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Variable-based Theme - Song Detail Sections */
#verseSection {
    background: var(--block1-bg);
    border-color: var(--block1-border);
}

#verseSection .chord-section-title {
    color: var(--block1-text);
}

#chorusSection {
    background: var(--block2-bg);
    border-color: var(--block2-border);
}

#chorusSection .chord-section-title {
    color: var(--block2-text);
}

#preChorusSection {
    background: var(--block3-bg);
    border-color: var(--block3-border);
}

#preChorusSection .chord-section-title {
    color: var(--block3-text);
}

#bridgeSection {
    background: var(--block4-bg);
    border-color: var(--block4-border);
}

#bridgeSection .chord-section-title {
    color: var(--block4-text);
}

.chord-section-content {
    font-size: clamp(0.75em, 2.5vh, 1.6em);
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.3;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 1.5em;
    display: block;
}

.chord-section-content.editable-field {
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s ease, border 0.2s ease;
    border: 2px solid transparent;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    line-height: 1.2;
    /* Restored line spacing */
}

.chord-section-content.editable-field:hover {
    background: var(--hover-color);
    border-color: var(--border-color);
}

.chord-section-content.editable-field.editing {
    background: white;
    border-color: var(--secondary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.song-chord-section.hidden {
    display: none;
}

.song-detail-artist.editable-field.editing,
.song-detail-title.editable-field.editing {
    background: rgba(255, 255, 255, 0.2);
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.song-detail-footer-actions {
    display: flex;
    gap: 10px;
}

.song-detail-save-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1em;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.song-detail-save-btn.with-label {
    flex-direction: column;
    padding: 8px 16px;
    gap: 4px;
    min-width: 60px;
}

.song-detail-save-btn .icon {
    font-size: 1.2em;
    line-height: 1;
}

.song-detail-save-btn .label {
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    text-transform: lowercase;
}

.song-detail-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.song-detail-save-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.song-detail-save-btn.hidden {
    display: none;
}

/* PC / Landscape Notes Section Styles */
#songNotesSection {
    display: none;
    /* Hidden by default (mobile/portrait) */
    background: #fffdf0;
    /* Very slight yellow tint for "notes" feel */
    border-color: #fde68a;
    /* Soft amber border */
    margin-top: 15px;
    /* Stand apart from the blocks above */
    margin-bottom: 5px;
    /* Tiny gap above footer padding */
}

#songNotesSection .chord-section-title {
    color: #92400e;
    /* Amber-800 for title */
}

.song-notes-textarea {
    width: 100%;
    height: 60px;
    /* Reduced to 50% */
    border: none !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.95em;
    line-height: 1.5;
    color: #334155;
    resize: none;
    padding: 8px 10px;
    outline: none;
    box-sizing: border-box;
    display: block;
}

.song-notes-textarea::placeholder {
    color: #94a3b8;
    font-style: italic;
}

/* PC and iPad Landscape Two-Column Layout */
@media (min-width: 1025px),
(min-width: 768px) and (orientation: landscape) {
    .song-detail-body {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 1fr;
        /* Row 3 takes up all remaining space */
        grid-template-areas:
            "verse preChorus"
            "chorus bridge"
            "notes .";
        gap: 15px;
        /* align-content: start; removed to allow row expansion */
    }

    #verseSection {
        grid-area: verse;
    }

    #chorusSection {
        grid-area: chorus;
    }

    #preChorusSection {
        grid-area: preChorus;
    }

    #bridgeSection {
        grid-area: bridge;
    }

    #songNotesSection {
        display: block;
        grid-area: notes;
        height: auto !important;
        /* Don't stretch to fill the 1fr row */
        align-self: end;
        /* Push to the very bottom */
    }

    /* Ensure the sections take full height of their grid area to stay aligned */
    .song-chord-section {
        height: 100%;
        box-sizing: border-box;
    }
}

/* Responsive adjustments for song detail modal */

/* Tablets (iPad, etc.) */
@media (max-width: 1024px) and (min-width: 769px) {
    .song-detail-modal {
        padding: 10px;
    }

    .song-detail-modal-content {
        max-width: calc(100vw - 20px);
        height: calc(100vh - 80px);
    }

    .song-detail-header {
        padding: 23px 20px;
    }

    .song-detail-artist {
        font-size: 1em;
    }

    .song-detail-title {
        font-size: 1.5em;
    }

    .song-detail-body {
        padding: 10px 15px;
        gap: 6px;
    }

    .song-chord-section {
        padding: 10px;
    }

    .chord-section-title {
        font-size: 0.85em;
        margin-bottom: 6px;
    }

    .chord-section-content {
        font-size: 1.3em;
    }


}

/* Mobile devices */
@media (max-width: 1080px) {
    .song-detail-modal {
        padding: 0;
    }

    .song-detail-modal-content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        border-radius: 0;
        margin: 0;
        overflow: visible;
        /* Ensure absolute children aren't clipped */
    }

    .song-detail-header {
        padding: 5px 15px;
        height: 125px;
        display: grid;
        grid-template-columns: 64px 1fr 45px;
        /* Widened for 59px thumbnail */
        grid-template-rows: 70px 55px;
        grid-template-areas:
            "thumb title close"
            "prev actions next";
        align-items: center;
        gap: 0;
        border-radius: 0;
        flex-shrink: 0;
        box-sizing: border-box;
        z-index: 1001;
    }

    .song-detail-thumbnail {
        grid-area: thumb;
        width: 50px;
        /* Reverted back to original 100% (was 59px) */
        height: 50px;
        /* Reverted back to original 100% (was 59px) */
        border-radius: 8px;
        margin-left: 2px !important;
        /* Less tucked to the left */
        margin-top: -10px !important;
        /* Less tucked to the top */
        justify-self: start;
        align-self: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
        z-index: 20;
    }

    .song-detail-prev {
        grid-area: prev;
        justify-self: start;
        display: flex !important;
        transform: translateY(-7px);
    }

    .song-detail-close-top {
        grid-area: close;
        position: static !important;
        justify-self: end;
        margin: 0 !important;
        display: flex !important;
        transform: translateY(-7px);
    }


    #songDetailNext {
        grid-area: next;
        justify-self: end;
        display: flex !important;
        transform: translateY(-7px);
    }

    .song-detail-title-section {
        grid-area: title;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
        width: 100%;
        min-width: 0;
        /* Critical for ellipsis */
    }

    .song-detail-action-buttons {
        grid-area: actions;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: clamp(4px, 1.5vw, 10px);
        margin-top: 0;
        transform: translateY(-7px);
    }

    /* Fix visual shift on click and sticky hover by preserving translateY while scaling */
    .song-detail-nav-btn:hover,
    .song-detail-nav-btn:active,
    .song-detail-close-top:hover,
    .song-detail-close-top:active,
    #songDetailNext:hover,
    #songDetailNext:active,
    .song-detail-action-buttons:hover,
    .song-detail-action-buttons:active {
        transform: translateY(-7px) scale(1.05) !important;
    }

    .song-detail-nav-btn:active,
    .song-detail-close-top:active,
    #songDetailNext:active,
    .song-detail-action-buttons:active {
        transform: translateY(-7px) scale(0.95) !important;
    }

    .song-detail-header-right {
        display: none !important;
    }

    /* Clear overrides for these buttons on mobile */
    #songDetailNext.hidden,
    #songDetailDeleteBtn.hidden {
        display: none !important;
    }

    .song-detail-artist {
        font-size: 0.85em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .song-detail-title {
        font-size: 1.1em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .song-detail-nav-btn {
        width: 38px;
        height: 38px;
        font-size: 1.4em;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .song-detail-body {
        padding: 15px;
        gap: 12px;
        overflow-y: auto;
    }

    .song-chord-section {
        padding: 12px;
        min-height: 80px;
        /* Base stability */
    }

    .chord-section-content {
        font-size: 1.4em;
    }

    .song-detail-footer {
        border-radius: 0;
    }
}

@media (max-width: 1080px) {
    .song-detail-header {
        height: 125px;
        /* Matches 768px rule for consistency */
        padding: 5px 10px;
    }

    .song-detail-body {
        padding: 10px 8px;
        /* Squeeze body padding */
        gap: 8px;
    }

    .song-chord-section {
        padding: 8px;
        min-height: 60px;
        /* Squeeze section height */
    }

    .chord-section-content {
        font-size: 1.25em;
        /* Slightly smaller text for better fit */
    }
}

/* Knoppen op de tweede regel */
.song-detail-action-buttons {
    display: flex;
    gap: 8px;
}

.song-detail-header-right {
    display: flex;
    gap: 8px;
}

/* Verberg labels en maak knoppen compact */
.song-detail-header .label {
    display: none !important;
}

.song-detail-nav-btn.with-label,
.song-detail-close.with-label,
.song-detail-action-btn.with-label {
    width: clamp(32px, 8vw, 38px);
    height: clamp(32px, 8vw, 38px);
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    flex-shrink: 1;
    min-width: 0;
}

.song-detail-action-buttons {
    gap: clamp(3px, 1vw, 6px);
    flex-wrap: nowrap;
}

/* Default for portrait/small screens under 1080px */
.song-detail-action-btn .icon {
    font-size: clamp(16px, 3.5vw, 20px);
    width: clamp(16px, 3.5vw, 20px);
    height: clamp(16px, 3.5vw, 20px);
}

/* Force more moderate scaling if in landscape orientation, matching original proportions */
@media (orientation: landscape) {
    .song-detail-action-btn .icon {
        font-size: clamp(20px, 4.5vw, 26px);
        width: clamp(20px, 4.5vw, 26px);
        height: clamp(20px, 4.5vw, 26px);
    }
}

.song-detail-body {
    padding: 10px 12px;
    gap: 6px;
}

.song-chord-section {
    padding: 8px;
}

.chord-section-title {
    font-size: 0.8em;
    margin-bottom: 4px;
}

.chord-section-content {
    font-size: 17px !important;
    /* Increased for better readability */
}



.chord-section-content.editable-field {
    padding: 6px !important;
    line-height: 1.2 !important;
    /* Restored to comfortable spacing */
}

/* Removed extra brace that caused lint error */

/* Chord Detector Overlay */
.chord-detector-overlay {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: white;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    min-width: 250px;
    max-width: 300px;
    transition: left 0s, top 0s, min-width 0.3s ease, max-width 0.3s ease, border-radius 0.3s ease;
    font-family: 'Inter', sans-serif;
    overflow: visible;
}

/* Temporarily hide chord detector button - remove or comment out this rule to show it again */
.chord-detector-overlay.minimized {
    display: none !important;
}

/* Original styling - uncomment when showing the button again
.chord-detector-overlay.minimized {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0;
    z-index: 10;
    min-width: 38px;
    max-width: 38px;
    width: 38px;
    height: 38px;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
*/

.chord-detector-overlay.minimized .chord-detector-toggle-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    margin: 0;
    cursor: pointer;
    background: var(--bg-gradient);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    line-height: 1;
    box-shadow: var(--card-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Ensure no inner elements are visible if they were added */
.chord-detector-overlay.minimized .chord-detector-toggle-btn span {
    display: none;
}

.chord-detector-overlay.minimized .chord-detector-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.chord-detector-overlay.minimized .chord-detector-toggle-btn:active {
    transform: translateY(0);
}

.chord-detector-overlay.minimized .chord-detector-header {
    display: none !important;
}

.chord-detector-overlay.minimized .chord-detector-body>*:not(.chord-detector-toggle-btn) {
    display: none !important;
}

.chord-detector-overlay.minimized .chord-detector-body {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    min-height: 0 !important;
    max-height: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.chord-detector-overlay.minimized .chord-detector-toggle-btn {
    position: relative !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    cursor: move;
    /* Show move cursor when minimized */
}

.chord-detector-content {
    display: flex;
    flex-direction: column;
    overflow: visible;
    position: relative;
}

.chord-detector-overlay.minimized .chord-detector-content {
    position: relative;
    width: 60px;
    height: 60px;
}


.chord-detector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 2px solid var(--border-color);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px 12px 0 0;
    transition: padding 0.3s ease, border-radius 0.3s ease;
}

.chord-detector-overlay.minimized .chord-detector-header {
    padding: 8px 12px;
    border-radius: 8px;
    border-bottom: none;
}

.chord-detector-header h3 {
    margin: 0;
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    transition: font-size 0.3s ease;
}

.chord-detector-overlay.minimized .chord-detector-header h3 {
    font-size: 0.9em;
}

.chord-detector-header-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.microphone-select {
    background: white;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85em;
    cursor: pointer;
    width: 100%;
    max-width: 200px;
    margin-top: 10px;
    font-family: 'Inter', sans-serif;
}

.microphone-select:hover {
    border-color: var(--secondary-color);
    background: var(--hover-color);
}

.microphone-select:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.microphone-select option {
    background: white;
    color: var(--text-color);
    padding: 8px;
}

.chord-detector-minimize-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, width 0.3s ease, height 0.3s ease, font-size 0.3s ease;
}

.chord-detector-minimize-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chord-detector-overlay.minimized .chord-detector-minimize-btn {
    width: 22px;
    height: 22px;
    font-size: 12px;
}

.chord-detector-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    visibility: visible;
    opacity: 1;
    min-height: 200px;
    position: relative;
    z-index: 1;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, min-height 0.3s ease;
}

.chord-detector-body .chord-display {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    visibility: visible !important;
    opacity: 1 !important;
}

.detected-chord-display {
    font-size: 3em;
    font-weight: 700;
    color: var(--secondary-color);
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detected-chord-display.no-chord {
    color: var(--text-light);
    font-size: 2em;
    opacity: 0.5;
}

.detected-chord-display.detected-chord {
    animation: pulse 0.5s ease;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

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

.chord-detector-status {
    font-size: 0.9em;
    color: var(--text-light);
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.chord-detector-status.status-listening {
    color: var(--secondary-color);
    background: rgba(99, 102, 241, 0.1);
    font-weight: 500;
}

.chord-detector-status.status-error {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    font-weight: 500;
}

.chord-detector-status.status-inactive {
    color: var(--text-light);
}

.audio-level-container {
    width: 100%;
    margin-top: 15px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    visibility: visible !important;
    opacity: 1 !important;
}

.audio-level-label {
    font-size: 0.85em;
    color: var(--text-color);
    font-weight: 500;
    min-width: 60px;
}

.audio-level-bar {
    flex: 1;
    height: 12px;
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    min-width: 100px;
    visibility: visible !important;
    display: block !important;
}

.audio-level-indicator {
    height: 100%;
    width: 0%;
    background: var(--secondary-color);
    border-radius: 5px;
    transition: width 0.1s ease, background-color 0.2s ease;
    min-width: 2px;
}

.audio-level-indicator.level-low {
    background: #94a3b8;
}

.audio-level-indicator.level-medium {
    background: #f59e0b;
}

.audio-level-indicator.level-high {
    background: #10b981;
}

.chord-detector-toggle-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1001;
}

.chord-detector-overlay.minimized .chord-detector-toggle-btn {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.chord-detector-toggle-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.chord-detector-toggle-btn:active {
    transform: scale(0.95);
}

.chord-detector-toggle-btn.active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    animation: pulse-button 2s infinite;
}

@keyframes pulse-button {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }

    50% {
        box-shadow: 0 4px 20px rgba(239, 68, 68, 0.6);
    }
}

/* Chord History */
.chord-history-section {
    width: 100%;
    margin-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 12px;
}

.chord-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.85em;
    color: #666;
    font-weight: 500;
}

.chord-history-actions {
    display: flex;
    gap: 4px;
}

.clear-history-btn,
.copy-history-btn {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.clear-history-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.copy-history-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.copy-history-btn.copied {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.chord-history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
    padding: 4px 0;
}

.chord-history-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    color: white;
    animation: fadeInChord 0.2s ease;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
    cursor: grab;
    user-select: none;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.chord-history-item:active {
    cursor: grabbing;
}

.chord-history-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.chord-history-item.drag-over {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.chord-history-item.drag-over-left::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #22c55e;
    border-radius: 2px;
}

.chord-history-item.drag-over-right::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #22c55e;
    border-radius: 2px;
}

.chord-history-item {
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
}

/* Touch drag clone styles */
.touch-drag-clone {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 6px;
    padding: 4px 10px;
    color: white;
    font-weight: 600;
}

.touch-drag-clone .remove-chord {
    display: none;
}

@keyframes fadeInChord {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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

.chord-history-item .chord-name {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.chord-history-item .remove-chord {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.chord-history-item .remove-chord:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.chord-history-list::-webkit-scrollbar {
    width: 4px;
}

.chord-history-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}

.chord-history-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.chord-history-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Responsive design for chord detector */
@media (max-width: 1080px) {
    .chord-detector-overlay {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        min-width: auto;
    }

    .detected-chord-display {
        font-size: 2.5em;
        min-height: 60px;
    }

    .chord-detector-body {
        padding: 15px;
    }
}

@media (max-width: 1080px) {
    .chord-detector-overlay {
        top: 5px;
        right: 5px;
        left: 5px;
    }

    .chord-detector-header {
        padding: 12px 15px;
    }

    .chord-detector-header h3 {
        font-size: 1em;
    }

    .detected-chord-display {
        font-size: 2em;
        min-height: 50px;
    }

    .chord-detector-toggle-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body,
    html {
        background: white;
        margin: 0;
        padding: 0;
        font-size: 11px;
    }

    .container {
        padding: 0;
        max-width: 100%;
    }

    .header-bar,
    .toggle-header-bar-btn,
    .selected-song-header,
    .selection-overlay,
    .focused-view,
    .chord-modal,
    .modal,
    .song-detail-modal,
    .chord-detector-overlay {
        display: none !important;
    }

    .table-wrapper {
        box-shadow: none;
        border: none;
        padding: 0;
        margin: 0;
        background: white;
        max-height: none;
        height: auto;
        overflow: visible;
    }

    #songsTable {
        width: 100%;
        border-collapse: collapse;
        box-shadow: none;
        table-layout: fixed;
        min-width: 0;
    }

    #songsTable th,
    #songsTable td {
        border: 1px solid #cbd5e1;
        padding: 6px 8px;
        color: #0f172a;
        word-break: break-word;
        white-space: normal;
    }

    #songsTable thead th {
        background: #e2e8f0;
        color: #0f172a;
    }

    #songsTable tbody tr:nth-child(even) {
        background: #f8fafc;
    }

    #songsTable .actions-column,
    #songsTable .actions-cell,
    #songsTable .favorite-column,
    #songsTable td.favorite-cell,
    #songsTable .ctl-column,
    #songsTable td.ctl-cell,
    #songsTable th:nth-child(5),
    #songsTable td:nth-child(5),
    #songsTable th:nth-child(6),
    #songsTable td:nth-child(6),
    .delete-btn {
        display: none !important;
    }

    /* Fixed column widths so the core song data fits on portrait A4 */
    #songsTable th:nth-child(1),
    #songsTable td:nth-child(1) {
        width: 15%;
    }

    #songsTable th:nth-child(2),
    #songsTable td:nth-child(2) {
        width: 20%;
    }

    #songsTable th:nth-child(7),
    #songsTable td:nth-child(7) {
        width: 17%;
    }

    #songsTable th:nth-child(8),
    #songsTable td:nth-child(8) {
        width: 16%;
    }

    #songsTable th:nth-child(9),
    #songsTable td:nth-child(9) {
        width: 16%;
    }

    #songsTable th:nth-child(10),
    #songsTable td:nth-child(10) {
        width: 16%;
    }

    #songsTable .chorus-cell {
        background: #fff8e1;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ====================================
   Piano Chord Overlay Styles
   ==================================== */

/* Section header with piano button */
.chord-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.chord-section-header .chord-section-title {
    margin-bottom: 0;
}

/* Piano button in section header */
.piano-chord-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    flex-shrink: 0;
}

.piano-chord-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.piano-chord-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Bar divider button in section header - Only visible when editing */
.song-chord-section .bar-divider-btn {
    display: none;
}

.song-chord-section.editing .bar-divider-btn {
    display: flex;
}

.bar-divider-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    flex-shrink: 0;
}

.bar-divider-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.bar-divider-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Piano Chord Overlay Modal */
.piano-chord-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

.piano-chord-overlay.hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.piano-chord-modal {
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.piano-chord-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.piano-chord-header h3 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 700;
}

.piano-chord-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.piano-chord-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

/* Toggle Button in Header */
.piano-toggle-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0 10px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.piano-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.piano-toggle-btn.active {
    background: rgba(255, 255, 255, 0.3);
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.piano-toggle-btn .toggle-icon,
.piano-toggle-btn .duration-icon-container {
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.piano-toggle-btn.active {
    background: rgba(255, 255, 255, 0.3);
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.duration-icon-container svg {
    display: block;
}

.piano-chord-body {
    padding: 25px;
    overflow-y: auto;
    flex: 1;
}

.piano-chord-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

/* Individual Chord Card */
.piano-chord-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 15px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    flex: 0 0 calc(33.333% - 14px);
    min-width: 250px;
    max-width: 300px;
}

.piano-chord-card:hover {
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.piano-chord-card:active {
    transform: translateY(0);
}

.piano-chord-card.playing {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}

.piano-chord-card.playing .piano-key.highlighted {
    animation: keyPress 0.3s ease-out;
}

@keyframes keyPress {
    0% {
        transform: scaleY(1);
    }

    30% {
        transform: scaleY(0.95);
    }

    100% {
        transform: scaleY(1);
    }
}

.chord-card-header {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chord-card-header .play-indicator {
    font-size: 0.9em;
    opacity: 0.4;
    transition: all 0.2s ease;
}

.piano-chord-card:hover .chord-card-header .play-indicator {
    opacity: 0.8;
    transform: scale(1.1);
}

.piano-chord-card.playing .chord-card-header .play-indicator {
    opacity: 1;
    animation: pulse 0.3s ease-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

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

.chord-card-header .chord-name {
    font-size: 1.4em;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Piano Keyboard Styles */
.piano-keyboard {
    position: relative;
    height: 140px;
    margin: 12px 0;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    padding: 12px 8px 8px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.white-keys {
    display: flex;
    height: 100%;
    gap: 2px;
}

.piano-key {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: all 0.15s ease;
}

.song-chord-section {
    position: relative;
    border-radius: 12px;
    padding: 15px;
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid #edf2f7;
    transition: all 0.2s ease;
}

/* Cue Line Inputs */
.song-detail-modal-content .cue-line-input {
    font-size: 8pt;
    border: 1px solid transparent;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    padding: 2px 5px;
    width: calc(100% - 10px) !important;
    max-width: 400px !important;
    margin-left: 0 !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
    display: block;
    color: #64748b;
    font-family: inherit;
    transition: all 0.2s ease;
}

.cue-line-input:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #e2e8f0;
}

.cue-line-input:focus {
    background: white;
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    color: #1e293b;
}

.chord-section-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
    /* Reduced from 10px */
    gap: 12px;
}

.chord-section-title {
    margin: 0;
    flex-shrink: 0;
    min-width: 180px;
    width: auto;
    white-space: nowrap;
    /* Prevent wrapping */
}

.chord-section-buttons {
    margin-left: auto;
    display: flex;
    gap: 4px;
    /* Reduced from 5px */
    flex-shrink: 0;
}

.white-key {
    flex: 1;
    background: linear-gradient(180deg, #fafafa 0%, #e8e8e8 100%);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    border-top: none;
}

.white-key.highlighted {
    background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    border-color: #7c3aed;
}

.white-key.highlighted.root {
    background: linear-gradient(180deg, #f472b6 0%, #ec4899 100%);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    border-color: #db2777;
}

.black-keys {
    position: absolute;
    top: 15px;
    left: 10px;
    right: 10px;
    height: 55%;
    pointer-events: none;
}

.black-key {
    position: absolute;
    width: 5.5%;
    height: 100%;
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
    z-index: 10;
    pointer-events: auto;
}

.black-key.highlighted {
    background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.black-key.highlighted.root {
    background: linear-gradient(180deg, #f472b6 0%, #db2777 100%);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Octave hint overlay */
.octave-hint {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 8px 12px;
    pointer-events: none;
    z-index: 20;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* Subtle octave zone divider lines */
.octave-hint::before,
.octave-hint::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.2) 15%,
            rgba(255, 255, 255, 0.2) 85%,
            transparent 100%);
}

.octave-hint::before {
    top: 33.33%;
}

.octave-hint::after {
    top: 66.66%;
}

.piano-chord-card:hover .octave-hint {
    opacity: 1;
}

.octave-hint span {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.octave-up {
    background: rgba(34, 197, 94, 0.8);
    color: white;
}

.octave-normal {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 8px !important;
}

.octave-down {
    background: rgba(239, 68, 68, 0.8);
    color: white;
}

/* Octave playing visual feedback */
.piano-chord-card.octave-up-playing {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    border-color: #22c55e !important;
}

.piano-chord-card.octave-down-playing {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
    border-color: #ef4444 !important;
}

/* No chords message */
.no-chords-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
}

.no-chords-message p {
    margin: 10px 0;
}

.no-chords-message .hint {
    font-size: 0.9em;
    opacity: 0.8;
}

/* Responsive styles for piano overlay */
@media (max-width: 1080px) {
    .piano-chord-overlay {
        padding: 10px;
    }

    .piano-chord-modal {
        max-height: 95vh;
        border-radius: 16px;
    }

    /* Mobile adjustments for 2-row header */
    .piano-chord-header,
    .chord-progression-header {
        padding: 12px 15px;
        flex-direction: column;
        /* Changed to column for 2-row layout */
        align-items: flex-start;
        /* Align items to start for better layout */
        justify-content: center;
        /* Center content vertically */
        min-height: 80px;
        gap: 12px;
    }

    .piano-chord-header h3,
    .chord-progression-header h3 {
        font-size: 1.2em !important;
        /* Increased font size */
        width: auto !important;
        text-align: left;
        /* Align text to left */
    }

    .header-row-top h3 {
        font-size: 1.2em !important;
    }

    .header-row-bottom {
        gap: 10px;
    }

    .piano-nav-btn {
        font-size: 1.8em;
        padding: 0 5px;
    }

    .header-main {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
    }

    .piano-chord-close {
        position: absolute;
        top: 10px;
        right: 15px;
    }

    .piano-chord-body {
        padding: 12px;
    }

    .piano-chord-list {
        gap: 12px;
    }

    .piano-chord-card {
        padding: 10px;
        flex: 0 0 calc(50% - 6px);
        min-width: 0;
        max-width: none;
    }

    .chord-card-header .chord-name {
        font-size: 1.1em;
    }

    .piano-keyboard {
        height: 100px;
        margin: 8px 0;
        padding: 8px 4px 5px;
    }

    .black-key {
        width: 6.5%;
    }
}

@media (max-width: 1080px) {
    .piano-chord-header {
        padding: 10px 15px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .piano-chord-header .header-main {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .piano-chord-header h3 {
        font-size: 1.1em;
        width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
        margin-bottom: 2px;
    }

    .sound-selector-wrapper {
        padding: 3px 8px;
        gap: 4px;
    }

    .piano-sound-selector {
        font-size: 0.75em;
        max-width: none;
    }

    .piano-toggle-btn {
        padding: 0 8px;
        height: 28px;
        min-width: auto;
    }

    .piano-toggle-btn .toggle-label {
        display: inline;
        font-size: 0.85em;
    }

    .piano-chord-close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.2em;
        width: 28px;
        height: 28px;
    }

    .piano-chord-body {
        padding: 8px;
    }

    .piano-chord-list {
        gap: 6px;
    }

    .piano-chord-card {
        padding: 6px 8px;
        flex: 0 0 calc(50% - 3px);
    }

    .chord-card-header {
        margin-bottom: 4px;
    }

    .chord-card-header .chord-name {
        font-size: 0.9em;
    }

    .chord-card-header .play-icon-btn {
        font-size: 0.8em;
    }

    .piano-keyboard {
        height: 70px;
        margin: 4px 0;
        padding: 4px 2px 3px;
    }

    .piano-chord-btn {
        width: 32px;
        height: 32px;
        font-size: 1em;
    }

    .chord-section-header {
        gap: 4px !important;
    }

    .chord-section-title {
        min-width: 180px !important;
        width: auto !important;
        font-size: 0.85em;
    }

    .song-detail-modal-content .cue-line-input {
        width: calc(100% - 10px) !important;
        max-width: 100% !important;
        font-size: 7.5pt !important;
    }

    .chord-section-content {
        font-size: 22px !important;
    }

    .chord-section-content.editable-field {
        padding: 6px !important;
        line-height: 1.2 !important;
    }
}

/* Mobile landscape fixes */
@media (max-height: 480px) and (orientation: landscape) {
    .container {
        height: 100dvh;
        /* Keep fixed height to allow internal scrolling */
        padding: 5px 10px;
        overflow: hidden;
    }

    header {
        margin-bottom: 2px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .header-top {
        margin-bottom: 0;
        flex-direction: row;
        justify-content: flex-start;
        gap: 5px;
        width: auto;
        flex-shrink: 0;
    }

    header h1 {
        display: none;
        /* Hide title entirely to save vertical space */
    }

    .header-subtitle {
        display: none;
    }

    .header-bar {
        padding: 2px 8px;
        gap: 5px;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        flex: 1;
        border-radius: 8px;
    }

    .header-section {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
        border-right: 1px solid var(--border-color);
        padding-right: 10px;
        flex-shrink: 0;
        width: auto !important;
    }

    .header-section:last-child {
        border-right: none;
    }

    .profile-btn .label,
    .import-export-btn .label,
    .add-song-btn .label,
    .filter-btn .label,
    .random-song-btn .label,
    .print-btn .label,
    .view-toggle-btn .label,
    .section-label {
        display: none;
        /* Hide all labels to save space */
    }

    .profile-btn,
    .import-export-btn,
    .add-song-btn,
    .filter-btn,
    .random-song-btn,
    .print-btn,
    .view-toggle-btn {
        padding: 5px 8px;
    }

    .table-wrapper {
        margin-top: 5px;
        border-radius: 10px;
        flex: 1;
        /* Ensure it takes remaining height */
    }
}

/* ============================================
   CHORD PROGRESSION EDITOR STYLES
   ============================================ */

/* Chord section buttons container */
.chord-section-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Chord Editor Button - Only visible when editing */
.song-chord-section .chord-editor-btn {
    display: none;
}

.song-chord-section.editing .chord-editor-btn {
    display: flex;
}

.chord-editor-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.chord-editor-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.chord-editor-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Chord Progression Editor Overlay */
.chord-progression-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 20px;
}

.chord-progression-overlay.hidden {
    display: none;
}

.chord-progression-modal {
    background: white;
    color: #1e293b;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chord-progression-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 18px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
}

.chord-progression-header h3 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 700;
}


.chord-progression-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Key Selector */
.key-selector-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.key-selector-section label {
    font-weight: 600;
    color: #1e293b;
}

.key-selector {
    padding: 10px 16px;
    font-size: 1em;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}

.key-selector:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Chord Palette */
.chord-palette-section {
    margin-bottom: 20px;
}

.chord-palette-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chord-palette-label.borrowed-label {
    margin-top: 15px;
}

.chord-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Chord Block */
.chord-block {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1.1em;
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
    position: relative;
    min-width: 55px;
    text-align: center;
}

.chord-block:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.chord-block:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.chord-block.playing {
    animation: chordPulse 0.2s ease-out;
}

.chord-block.added {
    animation: chordAdded 0.3s ease-out;
}

@keyframes chordPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
    }

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

@keyframes chordAdded {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.15);
        box-shadow: 0 0 25px rgba(34, 197, 94, 0.7);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
    }
}

.chord-block.dragging {
    opacity: 0.5;
    transform: scale(0.9);
}

.chord-block.borrowed {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    box-shadow: 0 3px 10px rgba(100, 116, 139, 0.3);
}

.chord-block.borrowed:hover {
    box-shadow: 0 6px 20px rgba(100, 116, 139, 0.4);
}

.chord-block-label {
    display: block;
    font-size: 0.65em;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 2px;
}

/* Touch drag clone */
.chord-block.drag-clone {
    position: fixed;
    z-index: 10002;
    pointer-events: none;
    opacity: 0.9;
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Progression Builder */
.progression-builder-section {
    margin-top: 20px;
}

.progression-builder-section label {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 10px;
}

.progression-drop-zone {
    min-height: 100px;
    padding: 16px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    transition: all 0.2s ease;
    position: relative;
}

.progression-drop-zone.drag-over {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.08);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.progression-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 40px;
}

.progression-block {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 10px 14px;
    padding-right: 32px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1.1em;
    cursor: grab;
    user-select: none;
    transition: all 0.15s ease;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
    position: relative;
    display: inline-flex;
    align-items: center;
}

.progression-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

.progression-block:active {
    cursor: grabbing;
}

.progression-block.playing {
    animation: blockPulse 0.2s ease-out;
}

@keyframes blockPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
    }

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

.progression-block.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.progression-block.removing {
    opacity: 0;
    transform: scale(0.8);
}

.progression-block-chord {
    pointer-events: none;
}

.progression-block-delete {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.15s ease;
    padding: 0;
}

.progression-block-delete:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.progression-block.drag-clone {
    position: fixed;
    z-index: 10002;
    pointer-events: none;
    opacity: 0.9;
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.drop-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #94a3b8;
    font-style: italic;
}

.drop-placeholder.hidden {
    display: none;
}

.drop-placeholder span {
    text-align: center;
}

.insertion-indicator {
    width: 3px;
    height: 40px;
    background: #764ba2;
    border-radius: 2px;
    flex-shrink: 0;
    animation: indicatorPulse 0.8s ease-in-out infinite;
}

@keyframes indicatorPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.progression-hint {
    font-size: 0.8em;
    color: var(--text-light);
    margin-top: 10px;
    font-style: italic;
    text-align: center;
}

/* Footer */
.chord-progression-footer {
    padding: 15px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.chord-progression-footer .btn-cancel {
    padding: 12px 24px;
    font-size: 1em;
    font-weight: 600;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chord-progression-footer .btn-cancel:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.chord-progression-footer .btn-done {
    padding: 12px 28px;
    font-size: 1em;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
}

.chord-progression-footer .btn-done:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Responsive styles for Chord Progression Editor */
@media (max-width: 1080px) {
    .chord-progression-overlay {
        padding: 10px;
    }

    .chord-progression-modal {
        max-height: 95vh;
        border-radius: 16px;
    }

    .chord-progression-header {
        padding: 15px 20px;
    }

    .chord-progression-header h3 {
        font-size: 1.1em;
    }

    .chord-progression-body {
        padding: 15px;
    }

    .chord-block {
        padding: 10px 14px;
        font-size: 1em;
        min-width: 48px;
    }

    .chord-editor-btn {
        width: 28px;
        height: 28px;
        font-size: 1em;
    }
}

@media (max-width: 1080px) {
    .chord-progression-header h3 {
        font-size: 1em;
    }

    .chord-progression-close {
        width: 32px;
        height: 32px;
        font-size: 1.2em;
    }

    .key-selector {
        min-width: 120px;
        padding: 8px 12px;
    }

    .chord-block {
        padding: 8px 12px;
        font-size: 0.95em;
        min-width: 42px;
    }

    .progression-input {
        font-size: 1em;
        padding: 12px;
    }

    .chord-progression-footer {
        padding: 12px 15px;
    }

    .chord-progression-footer .btn-cancel,
    .chord-progression-footer .btn-done {
        padding: 10px 18px;
        font-size: 0.95em;
    }
}

/* Fix for Add to Setlist Single Modal Z-Index */
#addToSetlistSingleModal {
    z-index: 10005;
    /* Enforce higher z-index than song detail modal */
}

/* Optimized Mobile Portrait Vertical Spacing */
@media (max-width: 1080px) {
    .chord-section-content.editable-field {
        padding: 2px !important;
        line-height: 1.1 !important;
        min-height: auto !important;
    }

    .song-detail-body {
        padding: 4px 6px !important;
        padding-bottom: 120px !important; /* Ensure last items aren't behind footer on mobile */
        gap: 4px !important;
    }

    .song-chord-section {
        padding: 4px 8px !important;
        margin-bottom: 4px !important;
        border-width: 1px !important;
    }

    .chord-section-title {
        margin-bottom: 2px !important;
    }
}



/* Fix for close button overlapping icons on PC and iPad */
@media (min-width: 768px) {
    .song-detail-header {
        padding-right: 80px !important;
    }
}

.cue-line-input {
    display: none !important;
}

/* Hide Colour Scheme Button on Tablet and Mobile */
@media (max-width: 1024px) {
    .theme-switcher-btn {
        display: none !important;
    }
}

/* Back Button Style */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #64748b;
    font-weight: 600;
    transition: color 0.2s;
    font-size: 14px;
}

.back-link:hover {
    color: #1e293b;
}


/* Premium Back Icon Button (v1.84) */
.back-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid #e2e8f0;
    color: #475569;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    margin-right: 12px;
}

.back-icon-btn:hover {
    background-color: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.back-icon-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}


/* iOS PWA Safe Area Fixes (v1.85) */
.container {
    padding-bottom: env(safe-area-inset-bottom);
}

.song-detail-modal-content {
    padding-bottom: env(safe-area-inset-bottom);
}

.song-detail-footer {
    padding-bottom: calc(15px + env(safe-area-inset-bottom));
}

.song-detail-practice-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin: 0;
}

.song-detail-key-badge .key-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: lowercase;
}

.practice-count-badge {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    color: white;
    padding: 2px 5px !important;
    border-radius: 20px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
    position: absolute !important;
    top: 4px !important;
    left: 10px !important;
    z-index: 20;
    margin: 0 !important;
    height: 18px !important;
    min-width: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none;
    line-height: 1 !important;
}

#songDetailPracticeIncrementBtn {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 6px 6px 6px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
}

#songDetailPracticeIncrementBtn .icon {
    font-size: 32px !important;
    margin: 0 !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#songDetailPracticeIncrementBtn .label {
    white-space: nowrap !important;
    font-size: clamp(14px, 3vw, 16px) !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-transform: lowercase !important;
    line-height: 1 !important;
    height: 20px !important;
    display: flex !important;
    align-items: flex-end !important;
}

#songDetailPracticeIncrementBtn:hover {
    background: transparent !important;
    transform: translateY(-2px);
}

#songDetailPracticeIncrementBtn:active {
    transform: scale(0.9) !important;
}

/* Song Detail Footer Layout */
.song-detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Vertical center everything */
    position: relative;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

/* Flatten footer structure for even distribution */
.song-detail-footer-left,
.song-detail-center-actions,
.song-detail-footer-actions {
    display: contents !important;
}

/* Group practice controls to keep badge and button together */
/* Group practice controls to keep badge and button together */
.song-detail-practice-controls,
div.song-detail-practice-controls {
    display: flex !important;
    position: relative !important;
    width: auto !important;
    justify-content: flex-end !important;
    flex-direction: column !important;
    /* Stack context */
    align-items: center !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: transform 0.1s ease !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.song-detail-practice-controls:active {
    transform: scale(0.9) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

.song-detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Align to bottom so labels line up */
    padding-bottom: 12px;
    padding-top: 12px;
}

/* Floating Save Button (FAB) */
#songDetailSaveBtn {
    position: absolute !important;
    bottom: calc(100% + 20px) !important;
    /* Float higher above footer */
    right: 22px !important;
    /* Center horizontally over the Practice List button (increased from 12px) */
    z-index: 100 !important;

    /* FAB Styling - Large */
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    background: white !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-direction: column !important;

    opacity: 1;
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer !important;
}

#songDetailSaveBtn.hidden {
    display: none !important;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

#songDetailSaveBtn .icon {
    font-size: 38px !important;
    /* Doubled icon size */
    margin: 0 !important;
    line-height: 1 !important;
    filter: none !important;
    /* Ensure color is visible */
    margin-top: -2px !important;
    /* Optical centering fix */
}

#songDetailSaveBtn .label {
    display: none !important;
    /* Hide text label for clean icon look */
}

@media (hover: hover) {
    #songDetailSaveBtn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    }
}

#songDetailScrollingChordsBtn {
    background: transparent;
    border: none;
    padding: 0 0 6px 0 !important;
    margin: 0 !important;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative !important;
}

#songDetailScrollingChordsBtn .icon {
    width: 100px;
    /* Reduced from 120px */
    height: 60px;
    /* Reduced from 72px */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#songDetailScrollingChordsBtn .label {
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(14px, 3vw, 16px);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 8px !important;
    margin-left: 0;
    text-transform: lowercase;
    line-height: 1 !important;
    height: 20px !important;
    display: flex !important;
    align-items: flex-end !important;
}

#songDetailLyricsBtn {
    background: transparent;
    border: none;
    padding: 0 0 6px 0 !important;
    margin: 0 !important;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative !important;
}

#songDetailLyricsBtn .icon {
    width: 60px;
    height: 60px;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    /* Matched to KEY badge */
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Matched to KEY badge */
    backdrop-filter: blur(4px);
    border-radius: 50%;
    color: white;
    transition: all 0.2s ease;
}

#songDetailLyricsBtn:hover .icon {
    /* Removed scale effect to prevent layout shift */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#songDetailLyricsBtn .label {
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(14px, 3vw, 16px);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 8px !important;
    margin-left: 0;
    text-transform: lowercase;
    line-height: 1 !important;
    height: 20px !important;
    display: flex !important;
    align-items: flex-end !important;
}

/* Lyrics Ticker Overlay */
.lyrics-ticker-overlay {
    --ticker-height: 300px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: var(--ticker-height);
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(16px);
    border-radius: 24px 24px 0 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    z-index: 1000;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
}

.lyrics-ticker-content {
    flex: 1;
    height: 100%;
    overflow-y: scroll;
    padding: 0 40px;
    display: block;
    position: relative;
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.lyrics-ticker-content::-webkit-scrollbar {
    display: none;
}

.lyrics-ticker-text {
    display: block;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    text-align: center;
    white-space: pre-wrap;
    padding-top: var(--ticker-height);
    padding-bottom: var(--ticker-height);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    width: 100%;
}

@media (max-width: 1080px) {
    .lyrics-ticker-overlay {
        --ticker-height: 160px;
    }

    .lyrics-ticker-text {
        font-size: 10px;
        /* ~30% of 30px */
    }
}

.lyrics-ticker-sidebar {
    display: flex;
    flex-direction: column;
    width: 60px;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.close-ticker-btn {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: white;
    width: 100%;
    height: 60px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.close-ticker-btn:hover {
    background: rgba(239, 68, 68, 0.8);
}

.close-ticker-btn svg {
    width: 20px;
    height: 20px;
}

.ticker-speed-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    flex: 1;
    padding: 10px 0;
}

.speed-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.speed-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
}

.speed-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: scale(1.1);
}

.speed-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15);
}

.speed-btn.pause-toggle-btn {
    color: #38bdf8;
    /* Sky blue for primary action */
    background: rgba(56, 189, 248, 0.1);
}

.speed-btn.pause-toggle-btn:hover {
    background: rgba(56, 189, 248, 0.2);
    color: #7dd3fc;
}

/* Luxury Ticker Controls */
.luxury-plus {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.luxury-minus {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.luxury-icon {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.luxury-plus:hover,
.luxury-minus:hover {
    filter: brightness(1.1);
    transform: scale(1.15) !important;
}

.speed-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

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


.song-detail-center-actions {
    position: relative; /* Changed from absolute to prevent overlapping side items on narrower screens */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 4vw, 50px); /* Reduced from 80px to prevent overflow */
    z-index: 10;
    flex: 1;
}

.song-detail-footer-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

/* Scrolling Chords Modal */
.scrolling-chords-modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000 !important;
    /* Highest priority */
    display: flex;
    align-items: flex-end;
    /* Bottom alignment */
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    /* Dim background */
    padding-bottom: 40px;
    /* Default space from bottom */
    pointer-events: auto;
}

/* Force Timeline Icon Size */
#songDetailScrollingChordsBtn .icon svg {
    width: 70px !important;
    height: 42px !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 70px !important;
    /* Prevent shrinking */
}

#songDetailScrollingChordsBtn .icon {
    display: flex;
    /* Ensure container fits content */
    align-items: center;
    justify-content: center;
}

.scrolling-chords-content {
    width: 98%;
    /* Responsive width */
    max-width: 1400px;
    /* Increased max width */
    height: 250px;
    /* Reduced height (half of original 400-500px range) */
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    pointer-events: auto;
    animation: fadeIn 0.2s ease-out;
    border-radius: 20px;
    /* Rounded corners like YouTube popup */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Button group (Minimize + Close) in the top-right corner */
.scrolling-chords-btn-group {
    position: absolute;
    top: 10px;
    right: 8px; /* Slightly closer to edge */
    display: flex;
    flex-direction: row;
    gap: 4px; /* Reduced gap */
    z-index: 2002;
    pointer-events: auto;
}



.scrolling-chords-close-btn,
.scrolling-chords-minimize-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 24px;
    font-weight: 400;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
    padding: 0;
}

.scrolling-chords-close-btn:hover {
    background: white;
    color: #ef4444;
    transform: scale(1.1);
}

.scrolling-chords-minimize-btn:hover {
    background: white;
    color: #3b82f6;
    transform: scale(1.1);
}

/* Pulsing green dot on the Timeline button when minimized */
#songDetailScrollingChordsBtn.timeline-minimized {
    position: relative;
}

#songDetailScrollingChordsBtn.timeline-minimized::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: timeline-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
}

@keyframes timeline-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Mobile Optimizations for Timeline Modal */
@media (max-width: 1024px) {
    .scrolling-chords-modal-wrapper {
        padding-bottom: 20px;
    }

    .scrolling-chords-content {
        height: 180px;
        /* Even more compact on mobile */
        border-radius: 15px;
    }

    .scrolling-chords-minimize-btn {
        display: none !important;
    }

    .scrolling-chords-close-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
        top: 5px;
        right: 5px;
    }
}

/* Refined Horizontal Mobile Layout (Prevent Collision & Save Space) */
@media (max-width: 1080px) {
    #performAbilityStars {
        display: none !important;
    }

    .song-detail-footer {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 10px !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        gap: 3px !important;
        /* Minimize gaps */
    }

    .song-detail-center-actions {
        position: static !important;
        transform: none !important;
        gap: 0px !important;
        /* Let space-evenly handle all spacing */
        width: auto !important;
        flex: 1;
        justify-content: space-evenly !important;
        /* Evenly distribute piano + timeline */
    }

    /* Footer Layout Fixes */
    .song-detail-footer-left,
    .song-detail-footer-actions {
        flex: 0 0 auto !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    .song-detail-footer-left {
        gap: 8px !important;
    }

    .song-detail-footer-actions {
        gap: 8px !important;
    }

    #songDetailLyricsBtn {
        margin-left: -5px !important;
        margin-right: 15px !important;
    }

    #songDetailLyricsBtn .icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 16px !important;
        margin: 0 !important;
    }

    #songDetailPracticeIncrementBtn .icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        position: relative !important;
    }

    #songDetailPracticeIncrementBtn .icon img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        opacity: 0.9 !important;
    }

    #songDetailScrollingChordsBtn .icon {
        width: 48px !important;
        height: 34px !important;
        /* Matched to lyrics icon height for alignment */
        border-radius: 4px !important;
    }

    #songDetailScrollingChordsBtn .icon img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #songDetailLyricsBtn .label,
    #songDetailScrollingChordsBtn .label,
    #songDetailPracticeIncrementBtn .label,
    .ability-stars-container .label,
    .song-detail-footer-actions .label,
    .song-detail-action-btn .label {
        font-size: 0.65rem !important;
        margin-top: 8px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-weight: 500 !important;
        text-transform: lowercase !important;
        letter-spacing: normal !important;
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        line-height: 1 !important;
        height: 18px !important;
    }

    #songDetailPracticeBtn .label {
        margin-top: 8px !important;
    }

    #songDetailPracticeIncrementBtn .label {
        margin-top: 2px !important;
        /* Adjusted for taller 40px icon to keep label alignment */
    }

    #songDetailPracticeBtn .icon {
        margin-top: -3px !important;
        /* Moved icon up another 3px on mobile as requested (0px -> -3px) */
        font-size: clamp(41px, 8.9vw, 54px) !important;
        /* Reduced size by 5% as requested (was 10% increase, now ~5% increase from base) */
    }

    /* Thinner stroke for tiny mobile stars */
    .ability-star svg {
        --star-stroke: 1.2;
    }

    .song-detail-key-badge,
    .song-detail-bpm-badge {
        width: 44px !important;
        /* Reclaimed space by hiding labels */
        padding: 0 4px !important;
        height: 28px !important;
        justify-content: center !important;
        gap: 0 !important;
        display: flex !important;
        cursor: pointer !important;
    }

    .song-detail-key-badge .key-label,
    .song-detail-bpm-badge .bpm-label {
        display: none !important;
    }

    .song-detail-key-badge .key-value,
    .song-detail-bpm-badge .bpm-value {
        font-size: 0.85rem !important;
        flex: none !important;
        text-align: center !important;
        font-weight: 800 !important;
    }
}

/* Switch Toggle Styles */
.switch input:checked+.slider {
    background-color: #6366f1 !important;
}

.switch input:focus+.slider {
    box-shadow: 0 0 1px #6366f1;
}

.switch input:checked+.slider:before {
    transform: translateX(20px);
}

.slider:before {
    position: absolute;
    content: '';
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

/* Ability Stars Rating */
.ability-stars-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    background: transparent;
    padding: 0 6px 6px 6px !important;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 60px;
    height: auto !important;
    margin: 0 !important;
}

.ability-stars-container .stars-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px !important;
    height: 60px !important;
    min-width: 140px;
    /* Prevent squashing of 3 stars */
}

.ability-stars-container .label {
    font-size: clamp(14px, 3vw, 16px);
    letter-spacing: 0.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px !important;
    text-transform: lowercase;
    line-height: 1 !important;
    height: 20px !important;
    display: flex !important;
    align-items: flex-end !important;
}

.ability-stars-container:hover .ability-star {
    transform: scale(1.1);
}

.ability-star {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0;
    /* Never squash the stars */
}

.ability-star svg {
    width: 100% !important;
    height: 100% !important;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: var(--star-stroke, 2.5);
    fill: none;
    transition: all 0.2s ease;
    display: block;
    /* Ensure it's not inline with weird sizing */
}

.ability-star.active svg {
    fill: #ffd700;
    stroke: #e6c200;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

.ability-star.active {
    transform: scale(1.1);
}

/* Animations for clicking */
.ability-stars-container:active .ability-star.active {
    transform: scale(0.95);
}

/*
   FINAL MOBILE/TABLET OVERRIDES (v1.938)
   Targets portrait orientation specifically to avoid horizontal overflow
*/
@media (max-width: 900px) and (orientation: portrait) {
    .ability-stars-container {
        display: none !important;
        /* Hide in portrait as requested */
    }

    .ability-star {
        width: 14px !important;
        /* Smaller in portrait */
        height: 14px !important;
    }

    .ability-stars-container .stars-row {
        flex-direction: row !important;
        gap: 2px !important;
        padding: 2px !important;
    }

    .ability-stars-container .label {
        font-size: 0.7em !important;
    }
}

/* Maintain large stars for landscape/desktop */
@media (min-width: 481px) and (orientation: landscape) {
    .ability-star {
        width: 24px !important;
        height: 24px !important;
    }
}


@media (max-width: 1080px) {
    .ability-star svg {
        pointer-events: none !important;
    }
}

/* Piano Chord Overlay Styles - Selector Polish */
.piano-chord-header .header-main {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 15px);
    flex: 1;
    justify-content: flex-end;
    margin-right: 15px;
}

.piano-chord-header h3 {
    margin-right: auto !important;
    font-size: clamp(1.1em, 2vw, 1.4em) !important;
    white-space: nowrap;
}

.sound-selector-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all 0.2s ease;
}

.sound-selector-wrapper:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.piano-sound-selector {
    background: transparent;
    border: none;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    color: white;
}

.piano-sound-selector option {
    background: #764ba2;
    color: white;
}

.sound-icon {
    font-size: 1.1em;
}

/* HUD Notification */
.hud-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 30px 45px;
    border-radius: 28px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.hud-notification.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.hud-icon-circle {
    width: 64px;
    height: 64px;
    background: #4CAF50;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 34px;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.35);
}

.hud-message {
    color: #1a1a1a;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    letter-spacing: -0.01em;
}

/* Modal Stack fix for index consistency */
.modal:not(.hidden) {
    z-index: 20000 !important;
}

/* Custom Confirmation Modal */
.custom-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.custom-confirm-overlay.show {
    opacity: 1;
    visibility: visible;
}

.confirm-modal {
    background: white;
    padding: 30px;
    border-radius: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(20px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}

.custom-confirm-overlay.show .confirm-modal {
    transform: translateY(0) scale(1);
}

.confirm-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    font-family: 'Inter', system-ui, sans-serif;
}

.confirm-message {
    font-size: 1rem;
    color: #4a4a4a;
    margin-bottom: 25px;
    line-height: 1.5;
    font-family: 'Inter', system-ui, sans-serif;
}

.confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', system-ui, sans-serif;
    border: none;
    flex: 1;
}

.confirm-btn-cancel {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.confirm-btn-cancel:hover {
    background: #e5e7eb;
}

.confirm-btn-danger {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.confirm-btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.35);
}

/* Block Title Suggestions */
/* Block Title Suggestions (Portal) */
.title-suggestions-portal {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: white;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    /* Top of everything */
    width: 380px;
    max-width: 90vw;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: auto;
}

.title-suggestions-portal.visible {
    opacity: 1;
    transform: translateY(0);
}

.suggestion-chip {
    padding: 6px 12px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    touch-action: manipulation;
}

.suggestion-chip:hover {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(99, 102, 241, 0.3);
}

.suggestion-chip:active {
    transform: translateY(0);
}

/* Ensure relative positioning for parents of titles */
.header-top {
    position: relative;
}

/* Scrolling Chords Modal Wrapper - iPad Improvements */
.scrolling-chords-modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    /* Darker, more focused background */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(15px);
    pointer-events: auto;
}

.scrolling-chords-modal-wrapper.hidden {
    display: none;
}

.scrolling-chords-content {
    width: 100%;
    height: 100%;
    background: white;
    /* Full opaque white for standalone feel */
    border-radius: 0;
    /* Remove rounding for fullscreen */
    overflow: hidden;
    position: relative;
    box-shadow: none;
    pointer-events: auto;
}

.scrolling-chords-btn-group {
    right: 8px; /* Consistent with line 9604 */
    gap: 4px;
}

.scrolling-chords-close-btn,
.scrolling-chords-minimize-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    color: #94a3b8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.2s, color 0.2s;
}

.scrolling-chords-close-btn:hover {
    background: white;
    color: #ef4444;
}

.scrolling-chords-minimize-btn:hover {
    background: white;
    color: #3b82f6;
}

/* Chord Detail Enhancement Styles (from Chord Timeline) */
.chord-section-content-wrapper {
    position: relative;
    width: 100%;
}

.chord-section-content {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    min-height: 40px;
}

.chord-section-edit-input {
    width: 100%;
    min-height: 60px;
    padding: 10px;
    border: 2px solid #6366f1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    background: white !important;
    outline: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
    margin-top: 5px;
    resize: vertical;
    display: block;
}

.chord-suggestion-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white !important;
    padding: 6px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(102, 126, 234, 0.4);
    transition: all 0.2s;
    min-width: 48px;
    text-align: center;
    user-select: none;
    touch-action: manipulation;
}

.chord-suggestion-btn:hover {
    background: #5a67d8;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(102, 126, 234, 0.4);
}

.chord-suggestion-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.chord-type-verse {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
}

.chord-type-chorus {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
}

.chord-type-pre-chorus {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
}

.chord-type-bridge {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
}

.chord-toolbar-inline-label,
.chord-toolbar-inline-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-weight: 800;
    font-size: 1.4rem;
    color: #64748b !important;
    /* Force grey */
    background: none !important;
    /* Force no background */
    box-shadow: none !important;
    /* Force no shadow */
    min-width: unset;
    padding: 0 1px;
    margin: 0 -2px;
    user-select: none;
    border: none !important;
}

/* Marker text inheriting block colors - REMOVED for plain black */

.chord-toolbar-header-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.header-action-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border-radius: 6px;
    box-shadow: none !important;
}

.header-action-btn:hover {
    background: #f1f5f9;
    color: #475569;
}

.header-action-btn.active {
    background: #4f46e5;
    color: white;
}

/* Practice Streak Styles */
.profile-streak-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.streak-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.streak-main {
    display: flex;
    align-items: center;
    gap: 15px;
}

.streak-fire-icon {
    font-size: 3rem;
    animation: flicker 2s infinite ease-in-out;
}

.streak-count-wrapper {
    text-align: left;
}

.streak-count {
    font-size: 2.5rem;
    font-weight: 900;
    color: #f97316;
    line-height: 1;
}

.streak-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.streak-stats-mini {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
}

.streak-stat-item {
    font-size: 0.8rem;
    color: #64748b;
}

.streak-stat-value {
    font-weight: 700;
    color: #1e293b;
}

.streak-milestones {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.milestone-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: #e2e8f0;
    color: #94a3b8;
    filter: grayscale(1);
    opacity: 0.5;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    border: 2px solid transparent;
}

.milestone-badge.unlocked {
    filter: grayscale(0);
    opacity: 1;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
    border-color: #f97316;
}

.milestone-badge::after {
    content: attr(data-days) "d";
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 800;
    color: #64748b;
}

@keyframes flicker {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.2));
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px rgba(249, 115, 22, 0.5));
    }
}

/* Chord Header Action Buttons - Refined Styles */
.header-action-btn {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    color: white !important;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0;
    margin: 0;
}

/* Hide ALL header icons by default for a super clean look */
.header-action-btn {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    transition: all 0.2s ease;
}

/* Reveal ALL icons on hover (mouse), when editing, or when toggled (touch) */
.song-chord-section.editing .header-action-btn,
.song-chord-section.show-icons .header-action-btn {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
}

@media (hover: hover) {
    .song-chord-section:hover .header-action-btn {
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: auto !important;
    }
}

.header-action-btn:hover {
    background: #b91c1c !important;
    /* DARK RED */
    transform: translateY(-1px) !important;
    filter: brightness(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.header-action-btn.active {
    background: #1e293b;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header-action-btn .icon {
    font-size: 0.9rem;
    font-weight: 700;
}

.header-action-btn svg {
    width: 12px;
    height: 12px;
}

.chord-text-notation {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.1;
    padding: 2px 0 8px 0;
    display: block;
    word-spacing: normal;
    letter-spacing: -0.3px;
}

/* Ensure icons inside action buttons are white */
.header-action-btn .icon,
.header-action-btn svg {
    color: white !important;
}

/* Mobile Adjustments for Chords to Fit Better */
@media (max-width: 600px) {
    .chord-suggestion-btn {
        padding: 4px 10px;
        font-size: 0.9rem;
        min-width: 40px;
        border-radius: 8px;
    }

    .chord-toolbar-inline-label,
    .chord-toolbar-inline-marker {
        font-size: 1.15rem !important;
        margin: 0 2px !important;
    }

    .chord-section-content {
        gap: 6px;
    }
}

/* Song Map Button - PC/Landscape Only */
#songDetailSongMapBtn {
    display: none !important;
}

@media (min-width: 1024px) {
    #songDetailSongMapBtn {
        display: flex !important;
    }
}

/* Match Song Map button to Instrument/Timeline styling */
#songDetailSongMapBtn {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 0 6px 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

#songDetailSongMapBtn:active,
#songDetailSongMapBtn:hover {
    opacity: 1;
}

#songDetailSongMapBtn:active {
    transform: scale(0.97) !important;
}

#songDetailSongMapBtn .icon {
    width: auto !important;
    height: 53px !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    margin-bottom: 0px !important;
    color: white !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

#songDetailSongMapBtn .icon svg {
    width: 44px !important;
    height: 44px !important;
}

/* FORCE SYNC ALL FOOTER ACTION LABELS */
#instrumentToggleBtn .label,
#songDetailScrollingChordsBtn .label,
#songDetailSongMapBtn .label,
#songDetailPracticeBtn .label,
#songDetailPracticeIncrementBtn .label,
.ability-stars-container .label {
    font-size: clamp(14px, 3vw, 16px) !important;
    margin-top: 8px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-transform: lowercase !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    height: 20px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    font-family: 'Inter', sans-serif !important;
    width: 100% !important;
    text-align: center !important;
}

@media (max-width: 1080px) {

    /* Harmonize all action items for alignment */
    #songDetailPracticeBtn,
    #songDetailPracticeIncrementBtn,
    #songDetailSongMapBtn,
    #songDetailScrollingChordsBtn,
    .ability-stars-container {
        height: 65px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding-bottom: 4px !important;
        min-width: 55px !important;
    }

    #songDetailPracticeBtn .icon,
    #songDetailPracticeIncrementBtn .icon,
    #songDetailScrollingChordsBtn .icon,
    #songDetailSongMapBtn .icon,
    .ability-stars-container .stars-row {
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    #songDetailPracticeBtn .label,
    #songDetailPracticeIncrementBtn .label,
    #instrumentToggleBtn .label,
    #songDetailSongMapBtn .label,
    #songDetailScrollingChordsBtn .label,
    .ability-stars-container .label {
        font-size: 0.65rem !important;
        height: 14px !important;
        margin-top: 6px !important;
        letter-spacing: normal !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Nudge ability label up slightly to match others */
    .ability-stars-container .label {
        margin-top: 1px !important;
    }

    /* Make Song Map SVG 10% smaller specifically on mobile */
    #songDetailSongMapBtn .icon svg {
        transform: scale(0.9) !important;
    }

    /* Hide Instrument selection button on mobile footer */
    #instrumentToggleBtn {
        display: none !important;
    }
}

#instrumentToggleBtn.instrument-ukulele .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

#instrumentToggleBtn.instrument-ukulele .icon svg {
    margin-bottom: -2px;
    /* Slight offset for visual center */
}

/* Hide chord blocks in main table ONLY on mobile (below 769px) */
@media (max-width: 1080px) {

    #songsTable .verse-column,
    #songsTable .chorus-column,
    #songsTable .prechorus-column,
    #songsTable .bridge-column,
    #songsTable td.verse-cell,
    #songsTable td.chorus-cell,
    #songsTable td.pre-chorus-cell,
    #songsTable td.bridge-cell {
        display: none !important;
    }

    /* Ensure table doesn't try to maintain huge min-width on mobile */
    #songsTable {
        min-width: 0 !important;
        table-layout: auto !important;
    }
}

/* Specific fix for Chord Timeline button hit area (Request 1) */
#songDetailScrollingChordsBtn {
    position: relative;
    overflow: visible;
}

#songDetailScrollingChordsBtn::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    /* Expanding the hit area even further than the button background */
}
/* Global Leaderboard 4-Column Grid */
.leaderboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.leaderboard-column {
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px 5px;
    border: 1px solid #e2e8f0;
    min-width: 0;
}

.leaderboard-list.compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.leaderboard-entry.compact {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: white;
    border-radius: 6px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.leaderboard-entry.compact .rank-badge {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaderboard-entry.compact.rank-1 { background: #fffbeb; border-color: #fef3c7; }
.leaderboard-entry.compact.rank-1 .rank-badge { background: #fbbf24; color: #92400e; }
.leaderboard-entry.compact.rank-2 { background: #f8fafc; border-color: #e2e8f0; }
.leaderboard-entry.compact.rank-2 .rank-badge { background: #94a3b8; color: white; }
.leaderboard-entry.compact.rank-3 { background: #fff7ed; border-color: #ffedd5; }
.leaderboard-entry.compact.rank-3 .rank-badge { background: #f97316; color: white; }

.leaderboard-entry.compact .leaderboard-name {
    flex: 1;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-entry.compact .leaderboard-score {
    color: #4f46e5;
    font-weight: 700;
}

@media (max-width: 1080px) {
    .leaderboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}


/* Mobile specific Trainer Button */
.mobile-trainer-btn { display: none; }

.trainer-btn { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    background: rgba(255, 255, 255, 0.95); 
    border: 2px solid var(--border-color);
    color: var(--text-color); 
    border-radius: 8px; 
    padding: 8px 12px; 
    font-size: 0.9em; 
    font-weight: 500; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
    white-space: nowrap; 
    margin-right: 12px;
    font-family: inherit;
}
.trainer-btn:hover { 
    background: white;
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.theme-switcher-btn { display: none !important; }
@media (max-width: 1080px) { 
    #headerTrainerBtn { 
        display: flex !important; 
        align-items: center; 
        gap: 5px; 
        background: rgba(255, 255, 255, 0.98) !important; 
        color: var(--text-color) !important; 
        border: 2px solid var(--border-color) !important; 
        border-radius: 25px !important; 
        padding: 4px 11px !important; 
        font-weight: 500 !important; 
        font-size: 0.78rem !important; 
        cursor: pointer !important; 
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; 
        flex: 1 !important; 
        max-width: 170px !important;
        justify-content: center !important; 
        margin: 0 45px 0 4px !important; 
        white-space: nowrap !important; 
        animation: btn-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; 
        flex-direction: row !important; /* Ensure horizontal on mobile */
        height: auto !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
    } 
    #headerTrainerBtn:active { transform: scale(0.98); opacity: 0.9; }
    #headerTrainerBtn .icon { font-size: 1.1rem !important; } 
    #headerTrainerBtn .label { display: inline-block !important; font-size: inherit !important; text-transform: none !important; }
}
@keyframes btn-pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.trainer-btn .icon { font-size: 1.1em; }

/* Utility: Hide elements */
.hidden { display: none !important; }

@media (max-width: 1080px) {
    .hidden-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hidden-desktop { display: none !important; }
}

/* Capo Badge for Mobile Button */
.capo-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #fbbf24; /* Yellow/Amber */
    color: #1e293b;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.capo-badge.hidden {
    display: none !important;
}

.capo-menu-item.active {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
    font-weight: 700;
}

.capo-menu-item {
    font-size: 15px !important;
    padding: 10px 15px !important;
}

/* Bulletproof Body Class Based Mobile Overrides (fixes Motorola G51 issues) */
body.is-mobile-view #headerTrainerBtn { display: flex !important; }
body.is-mobile-view #instrumentToggleBtn { display: none !important; }
body.is-mobile-view .chord-trainer-btn { 
    display: none !important;  /* Hides desktop trainer in detail modal */
} 
/* Add back explicitly for detailed modal if needed */
.song-detail-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: auto;
}

/* Status Icon for Song Detail Modal (🔒 for Public) */
.song-detail-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
    -webkit-user-drag: none;
    line-height: 1;
}

.song-detail-status-icon.hidden {
    display: none !important;
}

@media (max-width: 1080px) {
    .song-detail-title-section {
        align-items: center !important;
    }

    .song-detail-title-row {
        justify-content: center;
        width: 100%;
        gap: 8px;
    }

    .song-detail-status-icon {
        font-size: 16px !important;
    }
}