/* ========================================
   TradChords - Refactored CSS
   Mobile-first responsive design with Celtic aesthetics
   Preserves exact light/dark theme behavior
   ======================================== */

/* Tin Whistle Tablature Font */
@font-face {
    font-family: 'TinWhistleTab';
    src: url('fonts/TinWhistleTab.woff2') format('woff2'),
         url('fonts/TinWhistleTab.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   CSS Custom Properties & Theme System
   ======================================== */
:root {
    /* Light Theme (Warm Celtic) */
    --bg-primary: linear-gradient(135deg, #faf7f0 0%, #f5f2e8 100%);
    --bg-card: white;
    --bg-input: white;
    --bg-accent: linear-gradient(135deg, #faf7f0, #f5f2e8);
    --bg-button-primary: linear-gradient(135deg, #27ae60, #2a5434);
    --bg-button-secondary: linear-gradient(135deg, #f5f5dc, #f0e68c);
    --bg-modal: white;
    --surface-secondary: #f5f2e8;
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #64748b;
    --text-accent: #2a5434;
    --text-brown: #8b4513;
    --text-green: #2a5434;
    --border-color: rgba(0, 0, 0, 0.06);
    --border-input: #e2e8f0;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 8px 20px rgba(42, 84, 52, 0.3);
    --gradient-light-green: linear-gradient(135deg, #f0f7f0, #e8f4e8);
    
    /* Optimized Shadow System */
    --shadow-standard: 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-amber: 0 1px 3px rgba(212, 175, 55, 0.12), 0 1px 2px rgba(212, 175, 55, 0.24);
    --shadow-amber-hover: 0 4px 12px rgba(212, 175, 55, 0.2);
    --shadow-amber-elevated: 0 6px 16px rgba(212, 175, 55, 0.25);
    
    /* 3D Button Effects System */
    --btn-3d-shadow-base: 0 3px 8px rgba(0, 0, 0, 0.15);
    --btn-3d-shadow-hover: 0 5px 12px rgba(0, 0, 0, 0.25);
    --btn-3d-shadow-large: 0 4px 12px rgba(0, 0, 0, 0.2);
    --btn-3d-shadow-large-hover: 0 6px 18px rgba(0, 0, 0, 0.3);
    --btn-3d-inset: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    --btn-3d-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    
    /* Color-specific shadows */
    --btn-green-border: rgba(39, 174, 96, 0.3);
    --btn-green-border-hover: rgba(39, 174, 96, 0.5);
    --btn-green-shadow-hover: 0 5px 12px rgba(39, 174, 96, 0.4);
    --btn-brown-border: rgba(139, 69, 19, 0.2);
    --btn-brown-border-hover: rgba(139, 69, 19, 0.4);
    
    /* Common Gradients */
    --gradient-gold: linear-gradient(135deg, #d4af37, #b8941f);
    --gradient-brown: linear-gradient(135deg, #8b4513, #a0522d);
    --gradient-green: linear-gradient(135deg, #27ae60, #2a5434);
    --gradient-cream: linear-gradient(135deg, #f5f5dc, #f0e68c);
    --gradient-light-green: linear-gradient(135deg, #f0f7f0, #e8f4e8);
    --gradient-sheet-bg: linear-gradient(135deg, #faf7f0, #f5f2e8);
    --gradient-dark-sheet: linear-gradient(135deg, #2c1810, #1a0f08);
}

/* Dark Theme (Cozy Pub) */
.dark-theme {
    --bg-primary: linear-gradient(135deg, #2c1810 0%, #1a0f08 100%);
    --bg-card: #3d2817;
    --bg-input: #4a3019;
    --bg-accent: linear-gradient(135deg, #4a3019, #3d2817);
    --bg-button-primary: var(--gradient-brown);
    --bg-button-secondary: var(--gradient-brown);
    --bg-modal: #3d2817;
    --surface-secondary: #4a3019;
    --text-primary: #f5f0e8;
    --text-secondary: #d4c4a8;
    --text-muted: #b8a082;
    --text-accent: #d4af37;
    --border-color: rgba(212, 175, 55, 0.15);
    --border-input: #5c3f1f;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 8px 20px rgba(212, 175, 55, 0.4);
}

/* ========================================
   Reset and Base Styles
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
    transition: all 0.3s ease;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

/* Scale up on desktop screens */
@media (min-width: 1024px) {
    html {
        zoom: 1.5;
    }
}

/* ========================================
   Typography
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Uncial Antiqua', cursive;
    font-weight: 400;
}

h1 {
    color: var(--text-accent);
    font-size: 2.5rem;
    margin-bottom: 5px;
    letter-spacing: 2px;
}

/* ========================================
   Reusable 3D Button Effects System
   ======================================== */

/* Base 3D effect for standard buttons */
.btn-3d {
    box-shadow: var(--btn-3d-shadow-base), var(--btn-3d-inset);
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .btn-3d:hover {
        transform: translateY(-1px);
        box-shadow: var(--btn-3d-shadow-hover), var(--btn-3d-inset-hover);
    }
}

/* Large button 3D effect */
.btn-3d-large {
    box-shadow: var(--btn-3d-shadow-large), var(--btn-3d-inset);
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .btn-3d-large:hover {
        transform: translateY(-2px);
        box-shadow: var(--btn-3d-shadow-large-hover), var(--btn-3d-inset-hover);
    }
}

/* Green button borders */
.btn-green-border {
    border: 2px solid var(--btn-green-border);
}

@media (hover: hover) {
    .btn-green-border:hover {
        border-color: var(--btn-green-border-hover);
        box-shadow: var(--btn-green-shadow-hover), var(--btn-3d-inset-hover);
    }
}

/* Brown button borders */
.btn-brown-border {
    border: 2px solid var(--btn-brown-border);
}

@media (hover: hover) {
    .btn-brown-border:hover {
        border-color: var(--btn-brown-border-hover);
    }
}

/* ========================================
   Common Button Base Styles (Simplified)
   ======================================== */
.btn-primary, .btn-secondary, .btn-link, .btn-small, 
.btn-danger, .btn-large, button {
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    /* 3D effects applied via additional classes */
}

.btn-primary {
    background: var(--bg-button-primary);
    color: white;
    border: 2px solid rgba(39, 174, 96, 0.3);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.btn-primary-outline {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.02));
    color: #27ae60;
    border: 2px solid #27ae60;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .btn-primary-outline:hover {
        background: linear-gradient(135deg, rgba(39, 174, 96, 0.15), rgba(39, 174, 96, 0.05));
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #219a52, #1e4228);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(39, 174, 96, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        filter: brightness(1.1);
        border-color: rgba(39, 174, 96, 0.5);
    }
}

.btn-secondary {
    background: var(--bg-button-secondary);
    color: var(--text-accent);
    border: 2px solid rgba(218, 165, 32, 0.3);
    box-shadow: var(--btn-3d-shadow-base), var(--btn-3d-inset);
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .btn-secondary:hover {
        background: linear-gradient(135deg, #f0e68c, #daa520);
        color: #654321;
        transform: translateY(-2px);
        filter: brightness(1.1);
        box-shadow: var(--btn-3d-shadow-hover), var(--btn-3d-inset-hover);
        border-color: rgba(218, 165, 32, 0.5);
    }
}

/* Go Premium CTA Button */
@keyframes premium-shimmer {
    0% { left: -100%; }
    15%, 100% { left: 100%; }
}

@media (max-width: 768px) {
    .premium-get-prefix { display: none; }
}

.btn-go-premium {
    background: #F5CA30;
    color: #1a3d1a;
    font-size: 1rem;
    font-weight: 500;
    padding: 6px 12px;
    white-space: nowrap;
    border-radius: 16px;
    text-decoration: none;
    border: 2px solid rgba(180, 130, 10, 0.4);
    box-shadow: 0 5px 12px rgba(212, 160, 23, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-go-premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: premium-shimmer 4s ease-in-out infinite;
}

.btn-go-premium:hover {
    background: #FFD840;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(212, 160, 23, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.dark-theme .btn-go-premium {
    background: #D4A017;
    color: #1a3d1a;
    border-color: rgba(180, 130, 10, 0.5);
    box-shadow: 0 3px 8px rgba(212, 160, 23, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dark-theme .btn-go-premium:hover {
    background: #E8B820;
    box-shadow: 0 5px 12px rgba(212, 160, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-link {
    background: none;
    color: var(--text-accent);
    padding: 5px 10px;
    border: 1px solid var(--btn-green-border);
}

.btn-small {
    font-size: 0.9rem;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--btn-3d-shadow-base), var(--btn-3d-inset);
}

@media (hover: hover) {
    .btn-small:hover {
        transform: translateY(-1px);
        box-shadow: var(--btn-3d-shadow-hover), var(--btn-3d-inset-hover);
    }
}

/* btn-danger now inherits default button styling - ❌ icon conveys meaning */

.btn-large {
    font-size: 1.1rem !important;
    padding: 15px 30px !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gradient-green);
    color: white;
    border-radius: 12px;
}

/* ========================================
   Form Elements
   ======================================== */
input, select, textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-input);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--text-accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.dark-theme input:focus, 
.dark-theme select:focus, 
.dark-theme textarea:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* Dark theme: Make placeholder text muted instead of grey */
.dark-theme input::placeholder,
.dark-theme textarea::placeholder,
.dark-theme select::placeholder {
    color: var(--text-muted) !important;
}

/* Dark theme: Make search input text muted */
.dark-theme #searchInput {
    color: var(--text-muted) !important;
}

/* Dark theme: Make progression description (tips/notes) text muted */
.dark-theme #progressionDescription {
    color: var(--text-muted) !important;
}

textarea {
    resize: vertical;
}

/* ========================================
   Layout Components
   ======================================== */

/* Auth Section */
.auth-section-top {
    position: absolute;
    left: 40px;
    right: 40px;
    top: 40px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* User Profile */
.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient-light-green);
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
}

.dark-theme .user-profile {
    background: var(--gradient-brown) !important;
    border: 1px solid #6b3410 !important;
}

.user-avatar {
    font-size: 1.1rem;
}

/* Affiliate logo (replaces h1 text) */
.affiliate-logo {
    height: 120px;
    width: auto;
    max-width: 500px;
    object-fit: contain;
    vertical-align: middle;
    margin-top: 10px;
}

.home-logo {
    height: 140px;
}

@media (max-width: 768px) {
    .affiliate-logo {
        height: 80px;
        max-width: 300px;
    }
    .home-logo {
        height: 100px;
    }
}

/* Override circular clipping for affiliate logo in top-left button */
.logo-home-button.affiliate-branded,
.logo-home-button.affiliate-branded:hover,
.dark-theme .logo-home-button.affiliate-branded,
.dark-theme .logo-home-button.affiliate-branded:hover {
    border-radius: 0;
    width: auto;
    height: auto;
    border: none;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    padding: 0;
    transform: none;
}

.affiliate-branded .logo-home-img {
    border-radius: 0;
    width: auto;
    height: 50px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .affiliate-branded .logo-home-img {
        height: 35px;
    }
}

.powered-by {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 0;
    text-align: center;
}

.powered-by a {
    color: var(--text-accent);
    text-decoration: none;
}

.affiliate-logo-dark {
    display: none;
}

.dark-theme .affiliate-logo-light {
    display: none;
}

.dark-theme .affiliate-logo-dark {
    display: inline;
}

.user-email {
    color: var(--text-accent);
    font-weight: 500;
    font-size: 0.9rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.dark-theme .user-email {
    color: #d4af37 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3) !important;
}

/* User Dropdown */
.user-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.dropdown-arrow {
    color: var(--text-accent);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.user-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-accent);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    min-width: 160px;
    z-index: 1000;
    display: none;
    margin-top: 8px;
    overflow: hidden;
}

.dropdown-menu.active {
    display: block;
    animation: fadeInDown 0.2s ease-out;
}

.dropdown-item {
    display: block;
    padding: 8px 16px;
    color: var(--text-accent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

@media (hover: hover) {
    .dropdown-item:hover {
        background: linear-gradient(135deg, #27ae60, #2a5434);
        color: white;
    }
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.dark-theme .dropdown-menu {
    background: var(--gradient-brown) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .dropdown-item {
    color: #f4e4bc !important;
    font-weight: 500 !important;
}

@media (hover: hover) {
    .dark-theme .dropdown-item:hover {
        background: var(--bg-accent) !important;
        color: #f4e4bc !important;
    }
}

/* Name availability indicator for registration */
.name-availability {
    font-weight: 500;
}

.name-availability.available {
    color: #28a745;
}

.name-availability.taken {
    color: #dc3545;
}

.name-availability.checking {
    color: var(--text-muted);
}

/* Logo Home Button - matching notifications button style */
.logo-button-container {
    display: flex;
    align-items: center;
}

.logo-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-standard);
    border: 2px solid #d4af37;
    overflow: hidden;
    position: relative;
}

.logo-home-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    transition: transform 0.2s ease;
    object-fit: cover;
}

@media (hover: hover) {
    .logo-home-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
        border-color: #f1c40f;
    }

    .logo-home-button:hover .logo-home-img {
        transform: scale(1.05);
    }
}

/* Dark theme logo button */
.dark-theme .logo-home-button {
    border-color: #d4af37;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-theme .logo-home-button:hover {
    border-color: #f1c40f;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

/* Logged in controls container */
.logged-in-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Activity Button */
.activity-button-container {
    position: relative;
}

.activity-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(135deg, #4a7c59, #2a5434);
    color: white;
    text-decoration: none;
    border-radius: 50%;
    border: 2px solid #d4af37;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-standard);
    position: relative;
    width: 56px;
    height: 56px;
}

@media (hover: hover) {
    .activity-button:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
        background: linear-gradient(135deg, #5a8c69, #3a6444);
    }
}

.dark-theme .activity-button {
    background: var(--gradient-brown) !important;
    border: 2px solid #d4af37 !important;
    box-shadow: 0 3px 8px rgba(212, 175, 55, 0.16) !important;
}

@media (hover: hover) {
    .dark-theme .activity-button:hover {
        background: linear-gradient(135deg, #a0522d, #8b4513) !important;
        box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4) !important;
    }
}

.activity-icon {
    font-size: 1.8rem;
}

.activity-badge-overlay {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: bold;
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    animation: badge-pulse 2s infinite;
}


@keyframes badge-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Theme Toggle - icon only (homepage) */
.theme-toggle {
    background: none;
    color: var(--text-accent);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    opacity: 1;
}

@media (hover: hover) {
    .theme-toggle:hover {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Theme Toggle Button - full button style (fakebook) */
.theme-toggle-button {
    background: var(--bg-button-secondary);
    color: var(--text-accent);
    border: 2px solid rgba(139, 69, 19, 0.2);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 1.2rem;
    gap: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@media (hover: hover) {
    .theme-toggle-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        filter: brightness(1.1);
        border-color: rgba(139, 69, 19, 0.4);
    }
}

.dark-theme .theme-toggle-button {
    background: var(--bg-button-secondary);
    color: var(--text-accent);
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 3px 8px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.dark-theme .theme-toggle-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(212, 175, 55, 0.3);
    filter: brightness(1.1);
    border-color: rgba(212, 175, 55, 0.5);
}

/* Header */
header {
    margin-bottom: 48px;
    padding: 60px 32px 40px 32px;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    position: relative;
}

.tagline {
    color: var(--text-secondary);
    font-size: 1.2rem;
}

/* Show mobile tagline by default, hide desktop */
.tagline-desktop {
    display: none;
}

.affiliate-support-cta img {
    height: 60px;
}

@media (min-width: 768px) {
    .affiliate-support-cta img {
        height: 80px;
    }
}

/* On desktop, hide mobile and show desktop version with non-breaking spaces */
@media (min-width: 768px) {
    .tagline-mobile {
        display: none;
    }
    .tagline-desktop {
        display: block;
    }
}

/* Search Section */
.search-section {
    position: relative;
    margin-bottom: 32px;
}

#searchInput {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.1rem;
    border: 2px solid var(--border-input);
    border-radius: 25px;
    outline: none;
    transition: all 0.3s ease;
    background: var(--bg-input);
    box-shadow: var(--shadow-standard);
    color: var(--text-primary);
}

#searchInput:focus {
    border-color: var(--text-accent);
    box-shadow: var(--shadow-hover);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow-standard);
    border: 1px solid var(--border-color);
    margin-top: 12px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 100;
    min-height: 50px;
}

.search-results.active {
    display: block;
    animation: fadeInDown 0.2s ease-out;
}

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

.search-result-item {
    padding: 16px 24px;
    cursor: pointer;
    border-bottom: 1px solid #f0e68c;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .search-result-item:hover {
        background-color: #f5f2e8;
        transform: translateX(4px);
    }
}

.search-result-item:last-child {
    border-bottom: none;
}

.result-name {
    font-weight: 600;
    color: var(--text-accent);
    font-size: 1rem;
}

.result-type {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Welcome Message */
.welcome-message {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 48px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    text-align: center;
}

.welcome-actions {
    margin-top: 24px;
}

.welcome-actions .btn-primary {
    display: inline-block;
    text-decoration: none;
    padding: 6px 10px;
}

/* Recommended By Social Proof */
.recommended-by {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.recommended-by-label {
    font-family: 'Uncial Antiqua', cursive;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 1px;
    color: var(--text-green);
    margin-bottom: 16px;
}

.dark-theme .recommended-by-label {
    color: var(--text-secondary);
}

.recommended-by-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .recommended-by-logos {
        gap: 32px;
    }
}

.recommended-by-logos a {
    display: inline-block;
    transition: filter 0.3s ease;
}

.recommended-by-logos img {
    height: 100px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6);
    transition: filter 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) {
    .recommended-by-logos a:hover img {
        filter: grayscale(0%) opacity(1);
        transform: scale(1.05);
    }

    .dark-theme .recommended-by-logos a:hover img {
        filter: invert(1) sepia(0.4) brightness(0.85) opacity(1);
    }
}

.dark-theme .recommended-by-logos img {
    filter: invert(1) sepia(0.4) brightness(0.85) opacity(0.6);
}

.browse-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
}

/* Browse section under search */
.browse-section {
    text-align: center;
    margin: 16px 0 24px 0;
}

.browse-section .browse-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.welcome-message h2 {
    color: var(--text-accent);
    margin-bottom: 24px;
    font-family: 'Uncial Antiqua', cursive;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 2rem;
}

.welcome-message p {
    color: var(--text-green);
    margin-bottom: 12px;
    font-size: 1.1rem;
    line-height: 1.6;
    font-style: italic;
}

/* Dark theme keeps secondary color for welcome message */
.dark-theme .welcome-message p {
    color: var(--text-secondary);
}

/* Tune Display */
.tune-display {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    margin-bottom: 32px;
}

.tune-display.hidden {
    display: none;
}

.tune-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}

.tune-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--text-accent), transparent);
}

#tuneName {
    color: var(--text-accent);
    font-size: 2.2rem;
    margin-bottom: 10px;
    font-family: 'Uncial Antiqua', cursive;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Tune Metadata */
.tune-meta {
    display: flex;
    gap: 20px;
    margin: 15px 0;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg-accent);
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-accent);
    box-shadow: var(--shadow-light);
    transition: all 0.2s;
}

@media (hover: hover) {
    .meta-item:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    }
}

.meta-item.type {
    background: linear-gradient(135deg, #fff4e6, #ffe8cc);
    color: #8b4513;
}

.meta-item.key {
    background: linear-gradient(135deg, #e6f4ff, #cce7ff);
    color: #0066cc;
}

.dark-theme .meta-item.type,
.dark-theme .meta-item.key {
    background: linear-gradient(135deg, #a0522d, #8b4513);
    color: #f4e4bc;
}

.tune-aliases {
    margin: 15px 0;
    padding: 15px 20px;
    background: var(--bg-accent);
    border-left: 3px solid var(--text-accent);
    border-radius: 5px;
    font-size: 0.95rem;
}

.alias-label {
    font-weight: 600;
    color: #666;
    margin-right: 8px;
}

#tuneAliases {
    color: #444;
    font-style: italic;
}

/* Dark theme: Make alias label yellow and alias names muted */
.dark-theme .alias-label {
    color: var(--text-accent) !important;
}

.dark-theme #tuneAliases {
    color: var(--text-muted) !important;
}

/* Sheet Music Section */
.sheet-music-section {
    margin: 25px 0;
    padding: 10px;
    background: var(--gradient-sheet-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transform: scale(1.03);
    transform-origin: top center;
}

.dark-theme .sheet-music-section {
    background: var(--gradient-dark-sheet) !important;
    border: 1px solid rgba(212, 175, 55, 0.1) !important;
}

.sheet-music-section h3 {
    color: var(--text-accent);
    margin-bottom: 20px;
    font-size: 1.6rem;
    font-family: 'Uncial Antiqua', cursive;
    font-weight: 400;
    text-align: center;
}

.sheet-music-display {
    margin-top: 15px;
}

/* Tab toggle button - positioned in corner of sheet music panel, grey styling */
.tab-toggle-btn {
    position: absolute !important;
    top: 40px;
    left: 25px;
    z-index: 10;
    background: linear-gradient(135deg, #f5f5f5, #e8e8e8) !important;
    color: #555 !important;
    border: 2px solid rgba(100, 100, 100, 0.2) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.tab-toggle-btn:hover {
    background: linear-gradient(135deg, #ebebeb, #dedede) !important;
    color: #444 !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(100, 100, 100, 0.35) !important;
}

.tab-toggle-btn[aria-pressed="false"] {
    opacity: 0.6;
}

.tab-toggle-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.dark-theme .tab-toggle-btn {
    background: linear-gradient(135deg, #4a4a4a, #555) !important;
    color: #ccc !important;
    border: 2px solid rgba(150, 150, 150, 0.2) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .tab-toggle-btn:hover {
    background: linear-gradient(135deg, #555, #606060) !important;
    color: #ddd !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(150, 150, 150, 0.35) !important;
}

/* Control panel TAB button - hidden by default, shown on mobile portrait */
.ctrl-toggle.tab-toggle-panel {
    display: none;
}

/* Shared TAB button text styling */
.tab-text {
    font-size: 14px;
    font-weight: 600;
    font-family: monospace;
    letter-spacing: 0.5px;
}

.tab-toggle-btn[aria-pressed="false"] .tab-text,
.tab-toggle-panel[aria-pressed="false"] .tab-text {
    opacity: 0.4;
}

/* Mobile portrait: show TAB in control panel, hide on sheet music */
@media (orientation: portrait) and (max-width: 600px) {
    .ctrl-toggle.tab-toggle-panel {
        display: inline-flex;
    }

    .tab-toggle-btn {
        display: none !important;
    }
}

.sheet-music-render {
    position: relative;
    background: var(--bg-card);
    padding: 10px;
    border-radius: 8px;
    overflow-x: auto;
    box-shadow: var(--shadow-light);
}

.sheet-music-render svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.sheet-music-render svg:first-child {
    margin-bottom: 10px;
}

/* Space between music systems (not above first) */
.sheet-music-render svg + svg {
    margin-top: 10px;
}

/* Sheet Music Note Styling */
.sheet-music-render svg text {
    fill: #000000 !important;
    font-weight: 500;
}

/* Handwritten chord font styling - target by data-name attribute */
.sheet-music-render svg text[data-name="chord"],
#modalSheetMusicPreview svg text[data-name="chord"] {
    font-family: 'Indie Flower', cursive !important;
    font-size: 20px !important;
    font-weight: bold !important;
}

.sheet-music-render svg .abcjs-note,
#modalSheetMusicPreview svg .abcjs-note {
    fill: #000000 !important;
}

.sheet-music-render svg .abcjs-staff,
.sheet-music-render svg .abcjs-ledger,
#modalSheetMusicPreview svg .abcjs-staff,
#modalSheetMusicPreview svg .abcjs-ledger {
    stroke: #000000 !important;
}

.sheet-music-render svg .abcjs-stem,
.sheet-music-render svg .abcjs-beam,
#modalSheetMusicPreview svg .abcjs-stem,
#modalSheetMusicPreview svg .abcjs-beam {
    fill: #000000 !important;
}

/* Light mode - override ABCJS colors to prevent red, fill only for crispness */
.sheet-music-render svg .abcjs-note,
.sheet-music-render svg .abcjs-notehead,
.sheet-music-render svg path,
.sheet-music-render svg ellipse,
.sheet-music-render svg circle,
.sheet-music-render svg text,
.sheet-music-render svg tspan,
#modalSheetMusicPreview svg .abcjs-note,
#modalSheetMusicPreview svg .abcjs-notehead,
#modalSheetMusicPreview svg path,
#modalSheetMusicPreview svg ellipse,
#modalSheetMusicPreview svg circle,
#modalSheetMusicPreview svg text,
#modalSheetMusicPreview svg tspan {
    fill: #000000 !important;
}

/* Dark theme sheet music - optimized for performance */
.dark-theme .sheet-music-render svg text {
    fill: var(--text-muted) !important;
}

/* Keep handwritten chord font in dark theme */
.dark-theme .sheet-music-render svg text[data-name="chord"],
.dark-theme #modalSheetMusicPreview svg text[data-name="chord"] {
    font-family: 'Indie Flower', cursive !important;
    font-size: 20px !important;
    font-weight: bold !important;
}

.dark-theme .sheet-music-render svg .abcjs-note,
.dark-theme .sheet-music-render svg .abcjs-notehead,
.dark-theme .sheet-music-render svg path,
.dark-theme .sheet-music-render svg ellipse,
.dark-theme .sheet-music-render svg circle,
.dark-theme .sheet-music-render svg text,
.dark-theme .sheet-music-render svg tspan,
.dark-theme #modalSheetMusicPreview svg .abcjs-note,
.dark-theme #modalSheetMusicPreview svg .abcjs-notehead,
.dark-theme #modalSheetMusicPreview svg path,
.dark-theme #modalSheetMusicPreview svg ellipse,
.dark-theme #modalSheetMusicPreview svg circle,
.dark-theme #modalSheetMusicPreview svg text,
.dark-theme #modalSheetMusicPreview svg tspan {
    fill: var(--text-muted) !important;
}

/* Whistle tab characters - no stroke in dark theme */
.dark-theme .sheet-music-render svg text.whistle-tab-char,
.dark-theme #modalSheetMusicPreview svg text.whistle-tab-char {
    stroke: none !important;
}

/* Volta bracket lines - stroke only for crisp thin lines */
.dark-theme .sheet-music-render svg g[data-name="ending"] path,
.dark-theme #modalSheetMusicPreview svg g[data-name="ending"] path {
    stroke: var(--text-muted) !important;
    fill: none !important;
}

/* Volta bracket numbers */
.dark-theme .sheet-music-render svg g[data-name="ending"] text,
.dark-theme .sheet-music-render svg g[data-name="ending"] tspan,
.dark-theme #modalSheetMusicPreview svg g[data-name="ending"] text,
.dark-theme #modalSheetMusicPreview svg g[data-name="ending"] tspan {
    fill: var(--text-muted) !important;
}

.dark-theme .sheet-music-render svg .abcjs-staff,
.dark-theme .sheet-music-render svg .abcjs-staff-extra,
.dark-theme .sheet-music-render svg .abcjs-ledger,
.dark-theme .sheet-music-render svg line {
    stroke: var(--text-muted) !important;
    fill: none !important;
}

/* Modal ledger lines and staff lines in dark mode */
.dark-theme #modalSheetMusicPreview svg .abcjs-staff,
.dark-theme #modalSheetMusicPreview svg .abcjs-staff-extra,
.dark-theme #modalSheetMusicPreview svg .abcjs-ledger,
.dark-theme #modalSheetMusicPreview svg line {
    stroke: var(--text-muted) !important;
    fill: none !important;
}

.dark-theme .sheet-music-render svg .abcjs-stem,
.dark-theme .sheet-music-render svg .abcjs-beam,
.dark-theme .sheet-music-render svg rect,
.dark-theme #modalSheetMusicPreview svg .abcjs-stem,
.dark-theme #modalSheetMusicPreview svg .abcjs-beam,
.dark-theme #modalSheetMusicPreview svg rect {
    fill: var(--text-muted) !important;
}

/* Cursor animation - highlight currently playing notes (main and modal) */
.sheet-music-render .abcjs-cursor,
.sheet-music-render .abcjs-cursor *,
.sheet-music-render .abcjs-cursor path,
.sheet-music-render .abcjs-cursor ellipse,
.sheet-music-render .abcjs-cursor circle,
.sheet-music-render .abcjs-cursor text,
#modalSheetMusicPreview .abcjs-cursor,
#modalSheetMusicPreview .abcjs-cursor *,
#modalSheetMusicPreview .abcjs-cursor path,
#modalSheetMusicPreview .abcjs-cursor ellipse,
#modalSheetMusicPreview .abcjs-cursor circle,
#modalSheetMusicPreview .abcjs-cursor text {
    fill: #28a745 !important;
    stroke: #28a745 !important;
}

.dark-theme .sheet-music-render .abcjs-cursor,
.dark-theme .sheet-music-render .abcjs-cursor *,
.dark-theme .sheet-music-render .abcjs-cursor path,
.dark-theme .sheet-music-render .abcjs-cursor ellipse,
.dark-theme .sheet-music-render .abcjs-cursor circle,
.dark-theme .sheet-music-render .abcjs-cursor text,
.dark-theme #modalSheetMusicPreview .abcjs-cursor,
.dark-theme #modalSheetMusicPreview .abcjs-cursor *,
.dark-theme #modalSheetMusicPreview .abcjs-cursor path,
.dark-theme #modalSheetMusicPreview .abcjs-cursor ellipse,
.dark-theme #modalSheetMusicPreview .abcjs-cursor circle,
.dark-theme #modalSheetMusicPreview .abcjs-cursor text {
    fill: #2ecc71 !important;
    stroke: #2ecc71 !important;
}

/* Selected start note - user click to select play-from-here position (main and modal) */
.sheet-music-render .selected-start-note,
.sheet-music-render .selected-start-note *,
.sheet-music-render .selected-start-note path,
.sheet-music-render .selected-start-note ellipse,
.sheet-music-render .selected-start-note circle,
#modalSheetMusicPreview .selected-start-note,
#modalSheetMusicPreview .selected-start-note *,
#modalSheetMusicPreview .selected-start-note path,
#modalSheetMusicPreview .selected-start-note ellipse,
#modalSheetMusicPreview .selected-start-note circle {
    fill: #9c27b0 !important;
    stroke: #9c27b0 !important;
    cursor: pointer;
}

/* When selected note is currently being played, green takes precedence over purple */
.sheet-music-render .selected-start-note.abcjs-cursor,
.sheet-music-render .selected-start-note.abcjs-cursor *,
.sheet-music-render .selected-start-note.abcjs-cursor path,
.sheet-music-render .selected-start-note.abcjs-cursor ellipse,
.sheet-music-render .selected-start-note.abcjs-cursor circle,
#modalSheetMusicPreview .selected-start-note.abcjs-cursor,
#modalSheetMusicPreview .selected-start-note.abcjs-cursor *,
#modalSheetMusicPreview .selected-start-note.abcjs-cursor path,
#modalSheetMusicPreview .selected-start-note.abcjs-cursor ellipse,
#modalSheetMusicPreview .selected-start-note.abcjs-cursor circle {
    fill: #28a745 !important;
    stroke: #28a745 !important;
}

.dark-theme .sheet-music-render .selected-start-note,
.dark-theme .sheet-music-render .selected-start-note *,
.dark-theme .sheet-music-render .selected-start-note path,
.dark-theme .sheet-music-render .selected-start-note ellipse,
.dark-theme .sheet-music-render .selected-start-note circle,
.dark-theme #modalSheetMusicPreview .selected-start-note,
.dark-theme #modalSheetMusicPreview .selected-start-note *,
.dark-theme #modalSheetMusicPreview .selected-start-note path,
.dark-theme #modalSheetMusicPreview .selected-start-note ellipse,
.dark-theme #modalSheetMusicPreview .selected-start-note circle {
    fill: #ce93d8 !important;
    stroke: #ce93d8 !important;
    cursor: pointer;
}

/* When selected note is currently being played in dark theme, green takes precedence */
.dark-theme .sheet-music-render .selected-start-note.abcjs-cursor,
.dark-theme .sheet-music-render .selected-start-note.abcjs-cursor *,
.dark-theme .sheet-music-render .selected-start-note.abcjs-cursor path,
.dark-theme .sheet-music-render .selected-start-note.abcjs-cursor ellipse,
.dark-theme .sheet-music-render .selected-start-note.abcjs-cursor circle,
.dark-theme #modalSheetMusicPreview .selected-start-note.abcjs-cursor,
.dark-theme #modalSheetMusicPreview .selected-start-note.abcjs-cursor *,
.dark-theme #modalSheetMusicPreview .selected-start-note.abcjs-cursor path,
.dark-theme #modalSheetMusicPreview .selected-start-note.abcjs-cursor ellipse,
.dark-theme #modalSheetMusicPreview .selected-start-note.abcjs-cursor circle {
    fill: #2ecc71 !important;
    stroke: #2ecc71 !important;
}

/* Selected end note styling (blue) - for section looping */
.sheet-music-render .selected-end-note,
.sheet-music-render .selected-end-note *,
.sheet-music-render .selected-end-note path,
.sheet-music-render .selected-end-note ellipse,
.sheet-music-render .selected-end-note circle,
#modalSheetMusicPreview .selected-end-note,
#modalSheetMusicPreview .selected-end-note *,
#modalSheetMusicPreview .selected-end-note path,
#modalSheetMusicPreview .selected-end-note ellipse,
#modalSheetMusicPreview .selected-end-note circle {
    fill: #2196f3 !important;
    stroke: #2196f3 !important;
    cursor: pointer;
}

/* When cursor highlights the end note during playback, use green (playback color takes precedence) */
.sheet-music-render .selected-end-note.abcjs-cursor,
.sheet-music-render .selected-end-note.abcjs-cursor *,
.sheet-music-render .selected-end-note.abcjs-cursor path,
.sheet-music-render .selected-end-note.abcjs-cursor ellipse,
.sheet-music-render .selected-end-note.abcjs-cursor circle,
#modalSheetMusicPreview .selected-end-note.abcjs-cursor,
#modalSheetMusicPreview .selected-end-note.abcjs-cursor *,
#modalSheetMusicPreview .selected-end-note.abcjs-cursor path,
#modalSheetMusicPreview .selected-end-note.abcjs-cursor ellipse,
#modalSheetMusicPreview .selected-end-note.abcjs-cursor circle {
    fill: #28a745 !important;
    stroke: #28a745 !important;
}

.dark-theme .sheet-music-render .selected-end-note,
.dark-theme .sheet-music-render .selected-end-note *,
.dark-theme .sheet-music-render .selected-end-note path,
.dark-theme .sheet-music-render .selected-end-note ellipse,
.dark-theme .sheet-music-render .selected-end-note circle,
.dark-theme #modalSheetMusicPreview .selected-end-note,
.dark-theme #modalSheetMusicPreview .selected-end-note *,
.dark-theme #modalSheetMusicPreview .selected-end-note path,
.dark-theme #modalSheetMusicPreview .selected-end-note ellipse,
.dark-theme #modalSheetMusicPreview .selected-end-note circle {
    fill: #64b5f6 !important;
    stroke: #64b5f6 !important;
    cursor: pointer;
}

.dark-theme .sheet-music-render .selected-end-note.abcjs-cursor,
.dark-theme .sheet-music-render .selected-end-note.abcjs-cursor *,
.dark-theme .sheet-music-render .selected-end-note.abcjs-cursor path,
.dark-theme .sheet-music-render .selected-end-note.abcjs-cursor ellipse,
.dark-theme .sheet-music-render .selected-end-note.abcjs-cursor circle,
.dark-theme #modalSheetMusicPreview .selected-end-note.abcjs-cursor,
.dark-theme #modalSheetMusicPreview .selected-end-note.abcjs-cursor *,
.dark-theme #modalSheetMusicPreview .selected-end-note.abcjs-cursor path,
.dark-theme #modalSheetMusicPreview .selected-end-note.abcjs-cursor ellipse,
.dark-theme #modalSheetMusicPreview .selected-end-note.abcjs-cursor circle {
    fill: #2ecc71 !important;
    stroke: #2ecc71 !important;
}

/* Long-press visual feedback */
.sheet-music-render .long-press-pending,
#modalSheetMusicPreview .long-press-pending {
    opacity: 0.7;
    transition: opacity 0.1s ease;
}

.sheet-music-render .long-press-complete,
#modalSheetMusicPreview .long-press-complete {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Make notes clickable - show pointer cursor on hover (main and modal) */
.sheet-music-render [data-name],
#modalSheetMusicPreview [data-name] {
    cursor: pointer;
}

/* Audio Player Container */
.audio-player-container {
    margin-top: 30px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.dark-theme .audio-player-container {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Audio Controls - Unified Layout */

/* Audio Controls - Compact Design */
.audio-controls-compact {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin: 0 auto;
    max-width: 800px;
}

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

.primary-controls {
    display: flex;
    align-items: stretch;
    gap: 12px;
    justify-content: space-between;
    flex-wrap: wrap; /* Allow wrapping on mobile for 3-2 layout */
}

.controls-row + .controls-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

/* Shared base styling for all compact controls */
.ctrl-btn,
.ctrl-checkbox,
.ctrl-select,
.ctrl-toggle {
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ctrl-btn:hover,
.ctrl-checkbox:hover,
.ctrl-select:hover,
.ctrl-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--text-accent);
}

/* Primary action buttons */
.ctrl-btn {
    padding: 6px 12px;
    white-space: nowrap;
    min-height: 32px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctrl-btn:hover {
    transform: translateY(-1px);
}

/* Toggle buttons (icon-only) - matches arrangement action buttons */
.ctrl-toggle {
    padding: 6px 10px;
    min-height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, #f0f7f0, #e8f4e8);
    color: #2a5434;
    border: 2px solid rgba(42, 84, 52, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ctrl-toggle:hover {
    background: linear-gradient(135deg, #e8f4e8, #ddeedd);
    color: #1e4228;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(42, 84, 52, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: rgba(42, 84, 52, 0.4);
}

/* Toggle button active state - no color change needed (icons show state) */

/* Play button - show stop icon when playing */
#playButton svg.play-icon {
    display: block;
}

#playButton svg.stop-icon {
    display: none;
}

#playButton[aria-pressed="true"] svg.play-icon {
    display: none;
}

#playButton[aria-pressed="true"] svg.stop-icon {
    display: block;
}

/* Play from here - purple gradient (start note selected) */
#playButton.play-from-here {
    background: linear-gradient(135deg, #9b59b6, #8b45b5) !important;
    color: white !important;
    border-color: #8b45b5 !important;
}

/* Play to here - blue gradient (end note only selected) */
#playButton.play-to-here {
    background: linear-gradient(135deg, #2196f3, #1976d2) !important;
    color: white !important;
    border-color: #1976d2 !important;
}

/* Play section - purple to blue gradient (both start and end selected) */
#playButton.play-section {
    background: linear-gradient(135deg, #9b59b6, #2196f3) !important;
    color: white !important;
    border-color: #7c4dff !important; /* violet bridge between purple and blue */
}

/* Melody button - dim when muted */
#melodyButton[aria-pressed="false"] .melody-icon {
    opacity: 0.4;
}

/* Chord button - dim when muted */
#muteChordButton[aria-pressed="false"] .chord-text {
    opacity: 0.4;
}

/* Loop button - show appropriate icon based on state */
#loopButton .loop-off-icon {
    display: block;
}
#loopButton .loop-on-icon {
    display: none;
}
#loopButton[aria-pressed="true"] .loop-off-icon {
    display: none;
}
#loopButton[aria-pressed="true"] .loop-on-icon {
    display: block;
}

/* Drum button - dim when muted */
#drumButton[aria-pressed="false"] .drum-icon {
    opacity: 0.4;
}

/* Drum intro button - show count-in text */
#drumIntroButton .intro-text {
    font-size: 14px;
    font-weight: 600;
    font-family: monospace;
    letter-spacing: 0.5px;
}

/* Dim text when intro is off */
#drumIntroButton[aria-pressed="false"] .intro-text {
    opacity: 0.4;
}

/* Chord button text styling */
#muteChordButton .chord-text {
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 550;
    letter-spacing: 0.5px;
}

/* Greyed out when no chords injected */
#muteChordButton:disabled,
.ctrl-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Greyed out when drums disabled */
#drumIntroButton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Greyed out when no chords injected */
#fakebookButton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Fakebook button - show appropriate icon based on state */
#fakebookButton .fakebook-add-icon {
    display: block;
}
#fakebookButton .fakebook-check-icon {
    display: none;
}
#fakebookButton.in-fakebook .fakebook-add-icon {
    display: none;
}
#fakebookButton.in-fakebook .fakebook-check-icon {
    display: block;
}

.play-icon {
    font-size: 16px;
}

/* Compact checkboxes */
.ctrl-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    user-select: none;
    min-height: 32px;
}

.ctrl-checkbox input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: #f4e4bc;
    width: 16px;
    height: 16px;
}

/* Checkbox label for inline controls (like drum intro) */
.ctrl-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    user-select: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}

.ctrl-checkbox-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: #f4e4bc;
    width: 14px;
    height: 14px;
}

.ctrl-checkbox-label span {
    font-size: 13px;
}

/* Compact icon-only checkbox (for Chords Only) */
.ctrl-compact {
    min-width: auto;
    padding: 6px 8px;
}

.ctrl-compact span {
    font-size: 18px;
}

/* Compact select groups */
.ctrl-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto; /* Don't grow, can shrink, size to content */
}

/* Desktop: separator lines between ctrl-groups */
@media (min-width: 768px) {
    .controls-row .ctrl-group:not(:last-child):not(.desktop-tunebook-link) {
        padding-right: 12px;
        border-right: 1px solid rgba(42, 84, 52, 0.3); /* More visible separator */
    }
}

/* Tune Book link: in controls row on desktop, in add-backing-row on mobile */
.desktop-tunebook-link {
    display: none;
}
@media (min-width: 768px) {
    .desktop-tunebook-link {
        display: flex;
        flex: 1;
        padding-left: 4px;
    }
    .desktop-tunebook-link .btn-fakebook-link {
        position: static;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .add-backing-row .btn-fakebook-link {
        display: none;
    }
}

.ctrl-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-accent); /* Green in light mode */
    white-space: nowrap;
    text-align: right; /* Right-align labels on mobile */
    min-width: 70px; /* Fixed width so dropdowns align */
    flex-shrink: 0; /* Don't shrink labels */
}

.ctrl-select {
    flex: 0 0 auto; /* Don't grow or shrink, size to content */
    width: auto; /* Auto-size to content */
    padding: 5px 8px;
    background: #fffbf0; /* Light yellow */
    color: var(--text-accent); /* Dark green text in light mode */
    border: 1px solid rgba(42, 84, 52, 0.4); /* More visible green-tinted border */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ctrl-select:focus {
    outline: none;
    border-color: var(--text-accent);
    box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.1);
}

/* Compact tempo/swing sliders */
.ctrl-group.ctrl-tempo,
.ctrl-group.ctrl-swing {
    flex: 1.5;
    min-width: 150px;
    gap: 0; /* No gap between label and slider */
    align-items: center; /* Ensure vertical alignment */
}

/* Tempo/swing label - adjust to vertically center with slider */
.ctrl-group.ctrl-tempo .ctrl-label,
.ctrl-group.ctrl-swing .ctrl-label {
    display: flex;
    align-items: center; /* Vertically center contents */
    height: 100%; /* Match slider height */
    flex-shrink: 0;
}

/* Tempo note (crotchet) larger */
.tempo-note,
.swing-symbol {
    font-size: 18px;
}

/* Tempo equals sign */
.tempo-equals {
    font-size: 12px;
}

/* Fixed width for tempo/swing value to prevent shaking */
#tempoValue,
#swingValue {
    display: inline-block;
    min-width: 32px; /* Wide enough for "220" / "100%" */
    text-align: left;
    font-size: 11px; /* Smaller value */
}

/* Mobile: tempo slider full width */
@media (max-width: 767px) {
    .ctrl-group.ctrl-tempo,
    .ctrl-group.ctrl-swing {
        flex: 1 1 100%; /* Fill full width on mobile */
    }

    /* Tempo/swing label should be left-aligned, not right-aligned like Instrument/Key */
    .ctrl-group.ctrl-tempo .ctrl-label,
    .ctrl-group.ctrl-swing .ctrl-label {
        text-align: left;
        min-width: auto; /* Remove 70px spacing meant for dropdown alignment */
    }

    /* Make Instrument and Key ctrl-groups stack on mobile (full width each) */
    .ctrl-group:not(.ctrl-tempo):not(.ctrl-swing) {
        flex: 1 1 100%; /* Force each to take full row */
        justify-content: flex-end; /* Right-align contents */
    }

    /* Make Instrument and Key dropdowns same width on mobile */
    .ctrl-select {
        width: 115px; /* Fits "Ab Mixolydian" */
        flex: 0 0 auto; /* Don't grow, fixed width */
    }

    /* Make primary controls wrap in 3-2 centered layout on mobile */
    .primary-controls {
        justify-content: center; /* Center buttons when wrapped */
    }

    .primary-controls .ctrl-toggle {
        flex: 0 0 calc(33.333% - 8px); /* 3 buttons per row, accounting for gap */
        max-width: calc(33.333% - 8px);
        min-width: 0;
    }
}

/* Desktop: tempo slider width and left-align labels */
@media (min-width: 768px) {
    .ctrl-label {
        text-align: left; /* Left-align on desktop */
        min-width: auto; /* Remove fixed width on desktop */
    }

    .ctrl-group.ctrl-tempo,
    .ctrl-group.ctrl-swing {
        flex: 2;
        min-width: 180px;
        align-items: center; /* Center contents vertically */
        min-height: 32px; /* Match dropdown height */
    }

    /* Remove margin-top from range input on desktop to match dropdown height */
    .ctrl-tempo input[type="range"],
    .ctrl-swing input[type="range"] {
        margin-top: 0;
    }

    /* Keep all buttons in one row on desktop */
    .primary-controls {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    /* Make playback control buttons wider on desktop */
    .primary-controls .ctrl-toggle {
        flex: 0 0 auto; /* Don't grow/shrink, natural size */
        min-width: 56px; /* Slightly smaller to fit 5 buttons comfortably */
    }
}

.ctrl-tempo input[type="range"],
.ctrl-swing input[type="range"] {
    flex: 1; /* Grow to fill remaining space after label */
    width: 100%;
    padding: 5px 8px;
    margin-left: -8px; /* Pull slider closer to label */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #f0f7f0; /* Light green background between track and border */
    -webkit-appearance: none;
    appearance: none;
}
.ctrl-swing input[type="range"] {
    margin-left: -12px;
}

/* Slider track (the line) - consolidated */
.ctrl-tempo input[type="range"]::-webkit-slider-runnable-track,
.ctrl-swing input[type="range"]::-webkit-slider-runnable-track,
#tempoSlider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #c0c0c0;
    border: 1px solid var(--border-color);
    border-radius: 2px;
}

.ctrl-tempo input[type="range"]::-moz-range-track,
.ctrl-swing input[type="range"]::-moz-range-track,
#tempoSlider::-moz-range-track {
    width: 100%;
    height: 4px;
    background: #c0c0c0;
    border: 1px solid var(--border-color);
    border-radius: 2px;
}

/* Slider thumb (knob) styling - consolidated */
.ctrl-tempo input[type="range"]::-webkit-slider-thumb,
.ctrl-swing input[type="range"]::-webkit-slider-thumb,
#tempoSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4CAF50, #2a5434); /* Vibrant to dark green gradient */
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: -6px; /* Center on 4px track + 2px border = 6px total */
}

.ctrl-tempo input[type="range"]::-moz-range-thumb,
.ctrl-swing input[type="range"]::-moz-range-thumb,
#tempoSlider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #4CAF50, #2a5434); /* Vibrant to dark green gradient */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .ctrl-tempo input[type="range"]:hover::-webkit-slider-thumb,
    .ctrl-swing input[type="range"]:hover::-webkit-slider-thumb,
    #tempoSlider:hover::-webkit-slider-thumb {
        transform: scale(1.2);
    }

    .ctrl-tempo input[type="range"]:hover::-moz-range-thumb,
    .ctrl-swing input[type="range"]:hover::-moz-range-thumb,
    #tempoSlider:hover::-moz-range-thumb {
        transform: scale(1.2);
    }
}


/* Dark theme */
.dark-theme .audio-controls-compact {
    background: rgba(44, 24, 16, 0.5);
    border-color: #6b3410;
}

.dark-theme .controls-row + .controls-row {
    border-color: #6b3410;
}

/* Dark theme - shared styling for all compact controls */
.dark-theme .ctrl-btn,
.dark-theme .ctrl-checkbox,
.dark-theme .ctrl-select {
    background: rgba(44, 24, 16, 0.7);
    border-color: #6b3410;
    color: var(--text-secondary); /* Muted tan instead of bright white */
}

.dark-theme .ctrl-btn:hover,
.dark-theme .ctrl-checkbox:hover,
.dark-theme .ctrl-select:hover,
.dark-theme .ctrl-select:focus {
    background: rgba(60, 32, 20, 0.9);
    border-color: #d4af37;
}

/* Dark theme toggle buttons - matches arrangement action buttons */
.dark-theme .ctrl-toggle {
    background: linear-gradient(135deg, #5c4a2a, #6b5630);
    color: #f4e4bc;
    border: 2px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 2px 4px rgba(212, 175, 55, 0.1), inset 0 1px 0 rgba(212, 175, 55, 0.15);
}

.dark-theme .ctrl-toggle:hover {
    background: linear-gradient(135deg, #6b5630, #7a6336);
    color: #f4e4bc;
    box-shadow: 0 3px 6px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.4);
}

/* Dark theme toggle active state - no color change needed (icons show state) */

.dark-theme .ctrl-label {
    color: var(--text-muted); /* Muted tan in dark mode */
}

.dark-theme .ctrl-checkbox-label {
    color: var(--text-primary);
}

.dark-theme .ctrl-checkbox-label input[type="checkbox"] {
    accent-color: #d4af37;
}

.dark-theme .ctrl-checkbox input[type="checkbox"] {
    accent-color: #d4af37;
}

/* Dark theme tempo/swing slider input element border */
.dark-theme .ctrl-tempo input[type="range"],
.dark-theme .ctrl-swing input[type="range"],
.dark-theme #tempoSlider {
    background: rgba(44, 24, 16, 0.7);
    border-color: #6b3410;
}

.dark-theme .ctrl-tempo input[type="range"]::-webkit-slider-runnable-track,
.dark-theme .ctrl-swing input[type="range"]::-webkit-slider-runnable-track,
.dark-theme #tempoSlider::-webkit-slider-runnable-track {
    background: #4a2810; /* Darker for contrast */
    border-color: #6b3410;
}

.dark-theme .ctrl-tempo input[type="range"]::-moz-range-track,
.dark-theme .ctrl-swing input[type="range"]::-moz-range-track,
.dark-theme #tempoSlider::-moz-range-track {
    background: #4a2810; /* Darker for contrast */
    border-color: #6b3410;
}

.dark-theme .ctrl-tempo input[type="range"]::-webkit-slider-thumb,
.dark-theme .ctrl-swing input[type="range"]::-webkit-slider-thumb,
.dark-theme #tempoSlider::-webkit-slider-thumb {
    background: linear-gradient(135deg, #ffd700, #b8860b); /* Bright gold to dark goldenrod gradient */
    border: none;
}

.dark-theme .ctrl-tempo input[type="range"]::-moz-range-thumb,
.dark-theme .ctrl-swing input[type="range"]::-moz-range-thumb,
.dark-theme #tempoSlider::-moz-range-thumb {
    background: linear-gradient(135deg, #ffd700, #b8860b); /* Bright gold to dark goldenrod gradient */
    border: none;
}

.dark-theme #tempoValue {
    color: #d4af37;
}

/* Click-to-play hint (modal version) */
.click-to-play-hint {
    margin-top: 10px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.dark-theme .click-to-play-hint {
    background: rgba(44, 24, 16, 0.3);
    border-color: #6b3410;
    color: var(--text-muted) !important;
}

.dark-theme .click-to-play-hint strong,
.dark-theme .click-to-play-hint p {
    color: #f4e4bc !important;
}

.dark-theme .click-to-play-hint svg:first-of-type path {
    stroke: #b57edc !important; /* lighter purple for dark theme */
}

.dark-theme .click-to-play-hint svg:last-of-type path {
    stroke: #64b5f6 !important; /* lighter blue for dark theme */
}

/* Click-to-play hint (main page - below sheet music) */
.click-to-play-hint-main {
    margin-top: 16px;
    padding: 10px 14px;
    background: var(--bg-accent);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
}

.click-to-play-hint-main strong {
    color: var(--text-green);
    font-weight: 600;
}

.dark-theme .click-to-play-hint-main {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.2);
}

.dark-theme .click-to-play-hint-main strong {
    color: var(--text-accent);
}

.loop-checkbox,
.mute-melody-checkbox,
.tablature-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    width: 100%;
}

.loop-checkbox input[type="checkbox"],
.mute-melody-checkbox input[type="checkbox"],
.tablature-checkbox input[type="checkbox"] {
    width: 12px;
    height: 12px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #dee2e6;
    border-radius: 3px;
    position: relative;
    transition: all 0.2s ease;
    order: 2;
    margin-left: 0;
}

.loop-checkbox input[type="checkbox"]:checked,
.mute-melody-checkbox input[type="checkbox"]:checked,
.tablature-checkbox input[type="checkbox"]:checked {
    background: var(--text-accent);
    border-color: var(--text-accent);
}

.loop-checkbox input[type="checkbox"]:checked::after,
.mute-melody-checkbox input[type="checkbox"]:checked::after,
.tablature-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 10px;
    font-weight: bold;
}

.dark-theme .loop-checkbox input[type="checkbox"],
.dark-theme .tablature-checkbox input[type="checkbox"],
.dark-theme .mute-melody-checkbox input[type="checkbox"] {
    background: rgba(44, 24, 16, 0.7) !important;
    border-color: #6b3410 !important;
}

.dark-theme .loop-checkbox input[type="checkbox"]:checked,
.dark-theme .tablature-checkbox input[type="checkbox"]:checked,
.dark-theme .mute-melody-checkbox input[type="checkbox"]:checked {
    background: #d4af37 !important;
    border-color: #d4af37 !important;
}




/* ========================================
   Chord Injection Buttons
   ======================================== */

/* Inject and Play Button - Prominent magical purple styling */
.btn-inject-play {
    background: linear-gradient(135deg, #8e44ad, #9b59b6) !important;
    color: white !important;
    padding: 6px 14px 7px 14px !important;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: fit-content;
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.3), var(--btn-3d-inset);
    border: 2px solid rgba(142, 68, 173, 0.3);
    transition: all 0.3s ease;
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-inject-play:hover {
        background: linear-gradient(135deg, #9b59b6, #bb8fce) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(142, 68, 173, 0.4), var(--btn-3d-inset-hover);
        border-color: rgba(142, 68, 173, 0.5);
        filter: brightness(1.1);
    }
}

.btn-inject-play:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.3);
}
/* Dark theme support */
.dark-theme .btn-inject-play,
.dark-theme .btn-add-backing {
    background: linear-gradient(135deg, #6a1b9a, #8e44ad) !important;
    color: #f5f5dc !important;
    border: 2px solid rgba(106, 27, 154, 0.4) !important;
    box-shadow: 0 4px 12px rgba(106, 27, 154, 0.2) !important;
}

@media (hover: hover) {
    .dark-theme .btn-inject-play:hover,
    .dark-theme .btn-add-backing:hover {
        background: linear-gradient(135deg, #8e44ad, #9b59b6) !important;
        box-shadow: 0 6px 18px rgba(106, 27, 154, 0.4) !important;
        border-color: rgba(106, 27, 154, 0.6) !important;
    }
}

/* Add Backing Button - matches Inject Chords styling */
.btn-add-backing {
    background: linear-gradient(135deg, #8e44ad, #9b59b6) !important;
    color: white !important;
    padding: 6px 14px 7px 14px !important;
    border-radius: 24px !important;
    font-size: 16px;
    font-weight: 500;
    border: 2px solid rgba(142, 68, 173, 0.3) !important;
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.3), var(--btn-3d-inset);
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .btn-add-backing:hover {
        background: linear-gradient(135deg, #9b59b6, #bb8fce) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(142, 68, 173, 0.4), var(--btn-3d-inset-hover);
        border-color: rgba(142, 68, 173, 0.5) !important;
        filter: brightness(1.1);
    }
}

/* Add Backing row layout */
.add-backing-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    position: relative;
}

.btn-fakebook-link {
    font-size: 0.85em;
    padding: 6px 10px;
    font-weight: 600;
    text-decoration: none;
    position: absolute;
    right: 0;
}

@media (max-width: 480px) {
    .add-backing-row {
        flex-direction: row;
        gap: 8px;
        margin-left: -8px;
        margin-right: -8px;
    }

    .add-backing-row .btn-add-backing,
    .add-backing-row .btn-fakebook-link {
        border-radius: 8px !important;
        padding: 6px 10px !important;
        font-size: 0.85em;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-fakebook-link {
        position: static;
    }
}

/* Fakebook button styles */
.btn-fakebook {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-fakebook:hover {
        background: var(--bg-button-primary);
        color: white;
        border-color: var(--bg-button-primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
}

.btn-fakebook.in-fakebook {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: white;
    border-color: #4caf50;
}

@media (hover: hover) {
    .btn-fakebook.in-fakebook:hover {
        background: linear-gradient(135deg, #45a049, #4caf50);
    }
}

/* Mobile responsiveness for chord injection buttons */
@media (max-width: 768px) {
    .btn-inject-play {
        font-size: 14px;
        padding: 6px 12px;
    }

    .btn-add-backing {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }

    .progression-actions {
        /* flex-direction: column; -- Removed to allow 2-column layout */
        /* align-items: stretch; -- Removed to prevent full-width stretching */
        gap: 8px;
        justify-content: center;
    }
    
    .progression-actions .inject-button-wrapper {
        order: 999; /* Move to end, after other buttons */
        flex: 1 1 100%; /* Take full width */
        display: flex;
        justify-content: center;
        margin-top: 12px;
    }

    .progression-actions .btn-inject-play {
        font-size: 20px;
        padding: 14px 28px;
    }
}

/* Touch-friendly sizing for mobile */
@media (hover: none) and (pointer: coarse) {
    .btn-inject-play {
        min-height: 44px;
        padding: 10px 18px;
    }
}




/* ABCjs Integration */
.abcjs-inline-audio {
    margin-top: 10px;
    pointer-events: auto !important;
}

.abcjs-inline-audio * {
    pointer-events: auto !important;
}

.abcjs-inline-audio .abcjs-btn {
    display: none;
}

.abcjs-inline-audio .abcjs-midi-progress {
    display: block !important;
}

.abcjs-inline-audio .abcjs-midi-progress-background {
    height: 8px;
    background: #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.dark-theme .abcjs-inline-audio .abcjs-midi-progress-background {
    background: var(--border-input) !important;
}

.abcjs-inline-audio .abcjs-midi-progress-indicator {
    height: 8px;
    background: #2ecc71;
    border-radius: 4px;
}

.dark-theme .abcjs-inline-audio .abcjs-midi-progress-indicator {
    background: var(--gradient-gold) !important;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15) !important;
}

/* Community Features */
.add-progression-hero {
    background: var(--gradient-green);
    color: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: var(--shadow-standard);
}

.dark-theme .add-progression-hero {
    background: var(--gradient-brown) !important;
    color: #f4e4bc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.add-progression-hero h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-family: 'Uncial Antiqua', cursive;
    font-weight: 400;
}

.add-progression-hero p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 25px;
    font-style: italic;
}

.add-progression-hero .btn-large {
    background: var(--gradient-cream) !important;
    color: #8b4513 !important;
    border: 2px solid rgba(139, 69, 19, 0.3) !important;
    font-weight: bold;
    font-size: 1.2rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .add-progression-hero .btn-large:hover {
        background: linear-gradient(135deg, #f0e68c, #daa520) !important;
        color: #654321 !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        filter: brightness(1.1);
        border-color: rgba(139, 69, 19, 0.5) !important;
    }
}

.dark-theme .add-progression-hero .btn-large {
    background: var(--gradient-gold) !important;
    color: white !important;
    border: 2px solid rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(212, 175, 55, 0.3) !important;
}

@media (hover: hover) {
    .dark-theme .add-progression-hero .btn-large:hover {
        background: linear-gradient(135deg, #c49c2a, #a0761a) !important;
        color: white !important;
        box-shadow: 0 6px 18px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(212, 175, 55, 0.4) !important;
        border-color: rgba(212, 175, 55, 0.5) !important;
    }
}

.add-progression-hero .btn-large svg {
    width: 32px !important;
    height: 32px !important;
}

/* Existing Arrangements */
.existing-arrangements {
    background: var(--gradient-sheet-bg);
    padding: 32px;
    border-radius: 16px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

.dark-theme .existing-arrangements {
    background: var(--gradient-dark-sheet) !important;
    border: 1px solid rgba(212, 175, 55, 0.1) !important;
}

.arrangements-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 15px;
}

.arrangements-header h4 {
    color: var(--text-accent);
    font-size: 1.5rem;
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: 'Uncial Antiqua', cursive;
    font-weight: 400;
}

.community-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: center;
}

.community-sort select {
    padding: 8px 15px;
    border: 2px solid #ddd;
    border-radius: 5px;
    background: white;
    color: #333;
}

.dark-theme .community-sort select {
    background: var(--bg-input) !important;
    border: 2px solid var(--border-input) !important;
    color: var(--text-primary) !important;
}

/* Arrangement Items */
.community-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.community-progression-item {
    padding: 0;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.community-progression-item:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 25px; 
    margin-bottom: 15px;
}

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

.progression-header h4 {
    color: var(--text-accent);
    margin: 0;
    flex: 1;
}

.progression-badges {
    display: flex;
    gap: 8px;
    align-items: center;
}

.verified-badge {
    background: var(--gradient-green);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: var(--shadow-standard);
}

.dark-theme .verified-badge {
    background: var(--gradient-green) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.difficulty {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: var(--shadow-standard);
    transition: all 0.2s ease;
}

/* New difficulty class names */
.difficulty-standard {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: var(--shadow-standard);
}

.dark-theme .difficulty-standard {
    background: linear-gradient(135deg, #d4af37, #b8941f) !important;
    color: white !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.difficulty-enhanced {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: var(--shadow-standard);
}

.dark-theme .difficulty-enhanced {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: white !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.difficulty-extended {
    background: linear-gradient(135deg, #a855f7, #8b5cf6);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: var(--shadow-standard);
}

.dark-theme .difficulty-extended {
    background: linear-gradient(135deg, #a8334c, #871b2e) !important;
    color: white !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Backwards compatibility - keep old class names with same styling */
.difficulty-beginner {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: var(--shadow-standard);
}

.dark-theme .difficulty-beginner {
    background: linear-gradient(135deg, #d4af37, #b8941f) !important;
    color: white !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.difficulty-intermediate {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: var(--shadow-standard);
}

.dark-theme .difficulty-intermediate {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: white !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.difficulty-advanced {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: var(--shadow-standard);
}

.dark-theme .difficulty-advanced {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.arrangement-meta {
    display: flex;
    gap: 16px;
    font-size: 0.9rem;
    color: var(--text-green);
    margin-bottom: 12px;
}

.dark-theme .arrangement-meta {
    color: var(--text-muted) !important;
}

/* Difficulty badge hover effects */
@media (hover: hover) {
    .difficulty:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-standard);
    }

    .difficulty-beginner:hover {
        box-shadow: var(--shadow-standard);
    }

    .difficulty-intermediate:hover {
        box-shadow: var(--shadow-standard);
    }

    .difficulty-advanced:hover {
        box-shadow: var(--shadow-standard);
    }

    /* New difficulty hover effects */
    .difficulty-standard:hover {
        box-shadow: var(--shadow-standard);
    }

    .difficulty-enhanced:hover {
        box-shadow: var(--shadow-standard);
    }

    .difficulty-extended:hover {
        box-shadow: var(--shadow-standard);
    }
}

.progression-meta {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.arrangement-date {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}

/* Mobile portrait only - stack date below author */
@media screen and (max-width: 600px) and (orientation: portrait) {
    .progression-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .arrangement-date {
        margin-left: 0;
        font-size: 0.8rem;
    }
}

.progression-pattern {
    margin-bottom: 10px;
    text-align: center;
}

.author {
    font-weight: 500;
    color: var(--text-green);
}

.dark-theme .author {
    color: var(--text-muted) !important;
}

.clickable-contributor,
.clickable-link {
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: underline;
    color: #5cb85c; /* Brighter green for light mode */
}

.clickable-contributor:hover,
.clickable-link:hover {
    font-weight: 600;
    opacity: 0.8;
}

/* Dark mode colors */
.dark-theme .clickable-contributor {
    color: #f4e4bc; /* Light tan/cream for contributor names */
}

.dark-theme .clickable-link {
    color: var(--text-accent); /* Yellow accent for other clickable text */
}

.pattern {
    font-family: 'Indie Flower', cursive;
    color: var(--text-green);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: inline-block;
    text-align: left;
}

.dark-theme .pattern {
    color: var(--text-muted) !important;
}

.progression-description {
    color: var(--text-green);
    margin: 10px auto 20px auto;
    font-style: italic;
    display: table;
    text-align: left;
}

.dark-theme .progression-description {
    color: var(--text-muted) !important;
}

/* Progression Videos Section */
.progression-videos {
    margin: 20px 0;
}

.video-embed-container {
    margin-bottom: 20px;
}

.video-embed-container:last-child {
    margin-bottom: 0;
}

.video-embed-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}

.video-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* Progression Action Buttons */
.progression-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.progression-actions button:not(.btn-inject-play) {
    font-size: 0.85rem;
    min-height: 32px;
    min-width: 32px;
    max-width: 40px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #f0f7f0, #e8f4e8) !important;
    color: #2a5434 !important;
    border: 2px solid rgba(42, 84, 52, 0.2) !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.progression-actions button:not(.btn-inject-play):hover {
    background: linear-gradient(135deg, #e8f4e8, #ddeedd) !important;
    color: #1e4228 !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(42, 84, 52, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(42, 84, 52, 0.4) !important;
}

.dark-theme .progression-actions button:not(.btn-inject-play) {
    background: linear-gradient(135deg, #5c4a2a, #6b5630) !important;
    color: #f4e4bc !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.dark-theme .progression-actions button:not(.btn-inject-play):hover {
    background: linear-gradient(135deg, #6b5630, #7a6336) !important;
    color: #f4e4bc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Vote buttons need extra width for icon + count */
.progression-actions button:has(.vote-count) {
    max-width: 70px;
}

.progression-actions button.voted {
    background: var(--gradient-gold);
    color: white;
    border-color: var(--text-accent);
    box-shadow: var(--shadow-standard);
}

.dark-theme .progression-actions button.voted {
    background: linear-gradient(135deg, #d4af37, #c49c2a);
    color: #2c1810;
    border-color: #f4e4bc;
    box-shadow: var(--shadow-standard);
}

/* Delete button now uses default button styling */

/* Chord Display */
.chord-section {
    background: var(--gradient-sheet-bg);
    padding: 10px;
    border-radius: 8px;
}

.dark-theme .chord-section {
    background: var(--bg-accent) !important;
}

.section-label {
    display: block;
    color: var(--text-accent);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 4px 0 2px 0;
}

.section-label:first-child {
    margin-top: 0;
}

/* Compact padding for chord display modal */
.chord-display-modal {
    margin-top: -10px;
}

.chord-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding-bottom: 10px;
}

.chord-measure {
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 3px 2px;
    text-align: center;
    position: relative;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
    min-width: 0; /* Allow shrinking */
    overflow: hidden; /* Prevent overflow */
}

/* Invisible placeholder for right-aligning variation endings */
.chord-measure.chord-placeholder {
    visibility: hidden;
    pointer-events: none;
}

.dark-theme .chord-measure {
    background: var(--bg-card) !important;
    border: 2px solid var(--border-color) !important;
}

.measure-number {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 0.7rem;
    color: #999;
    font-weight: 500;
}

.dark-theme .measure-number {
    color: var(--text-muted) !important;
}

.chord-symbol {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-accent);
    max-width: 100%;
    line-height: 1.2;
    /* Enable responsive scaling for overflow detection */
    overflow: hidden;
    text-overflow: clip;
    word-break: keep-all;
    white-space: nowrap;
    /* Will be dynamically adjusted by JavaScript */
}

/* Dark theme: Make chord symbols cream colored */
.dark-theme .chord-symbol {
    color: #f4e4bc !important;
}

.chord-legend {
    margin-top: 20px;
    padding: 15px;
    background: var(--bg-accent);
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.chord-legend p {
    margin: 0;
}

/* Chord Grid Scrollbar */
.chord-grid::-webkit-scrollbar {
    height: 8px;
}

.chord-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.chord-grid::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.chord-grid::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Dark theme inverted scrollbar */
.dark-theme .chord-grid::-webkit-scrollbar-track {
    background: #2a1810;
    border-radius: 4px;
}

.dark-theme .chord-grid::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 4px;
}

.dark-theme .chord-grid::-webkit-scrollbar-thumb:hover {
    background: #e6c248;
}

/* General dark theme scrollbar for all scrollable elements */
.dark-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-theme ::-webkit-scrollbar-track {
    background: #2a1810;
}

.dark-theme ::-webkit-scrollbar-thumb {
    background: #b8a082;
    border-radius: 4px;
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: #d4af37;
}

/* Chord Input Form */
.chord-input-simple {
    margin-bottom: 25px;
}

.chord-input-simple label {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: var(--text-accent);
}

.dark-theme .chord-input-simple label {
    color: var(--text-accent) !important;
}

.section-input {
    margin-bottom: 20px;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 8px;
}

.dark-theme .section-input {
    background: var(--bg-accent) !important;
    border: 1px solid var(--border-color) !important;
}

.section-input h4 {
    color: #444;
    margin-bottom: 10px;
    font-size: 1rem;
}

.dark-theme .section-input h4 {
    color: var(--text-secondary) !important;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.section-header h4 {
    margin: 0;
    color: var(--text-accent);
}

.dark-theme .section-header h4 {
    color: var(--text-accent) !important;
}

.chord-textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-accent);
    resize: vertical;
    min-height: 60px;
    background: white;
    line-height: 1.4;
    white-space: pre-wrap;
}

.dark-theme .chord-textarea {
    background: var(--bg-input) !important;
    border: 2px solid var(--border-input) !important;
    color: var(--text-accent) !important;
}

.chord-textarea:focus {
    border-color: var(--text-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.dark-theme .chord-textarea:focus {
    border-color: var(--text-accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
}

.chord-example {
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

.dark-theme .chord-example {
    color: var(--text-muted) !important;
}

/* Custom Sections */
.section-input[data-section]:not([data-section="A"]):not([data-section="B"]):not([data-section="C"]) {
    border-left: 3px solid #28a745;
    padding-left: 15px;
    margin-left: 5px;
    background: #f8fff8;
}

.dark-theme .section-input[data-section]:not([data-section="A"]):not([data-section="B"]):not([data-section="C"]) {
    border-left: 3px solid var(--text-accent) !important;
    background: var(--bg-accent) !important;
}

/* Add Part Container */
.add-part-container {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    text-align: center;
}

.dark-theme .add-part-container {
    background: var(--bg-accent) !important;
    border: 2px dashed var(--border-color) !important;
}

.add-part-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.part-name-select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    font-size: 14px;
    min-width: 180px;
    color: var(--text-primary);
}

.dark-theme .part-name-select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-primary) !important;
}

.remove-part-btn {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

@media (hover: hover) {
    .remove-part-btn:hover {
        background: #c82333;
        transform: scale(1.1);
    }
}

/* Form Components */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
}

.dark-theme .form-group label {
    color: var(--text-secondary) !important;
}

.form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.quick-tips {
    background: #e8f4e8;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    border-left: 4px solid var(--text-accent);
}

.dark-theme .quick-tips {
    background: var(--bg-accent) !important;
    border-left: 4px solid var(--text-accent) !important;
}

.quick-tips p {
    margin: 5px 0;
    font-size: 0.95rem;
    color: #2a5434;
}

.dark-theme .quick-tips p {
    color: var(--text-secondary) !important;
}

.quick-tips code {
    background: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.dark-theme .quick-tips code {
    background: var(--bg-input) !important;
    color: var(--text-accent) !important;
}

#progressionDescription {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-input);
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
    transition: all 0.3s ease;
    background: var(--bg-input);
    color: var(--text-primary);
}

.dark-theme #progressionDescription {
    background: var(--bg-input) !important;
    border: 2px solid var(--border-input) !important;
    color: var(--text-primary) !important;
}

#progressionDescription:focus {
    outline: none;
    border-color: var(--text-accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.dark-theme #progressionDescription:focus {
    border-color: var(--text-accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
}

/* Comments Section */
.comments-section {
    margin-top: 20px;
}

.comments-section h3 {
    color: var(--text-accent);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.comments-container {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.comment-item {
    background: var(--bg-card);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    border-left: 3px solid var(--text-accent);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-actions {
    display: flex;
    gap: 8px;
}

.comment-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0.6;
    transition: opacity 0.2s;
    padding: 2px;
}

.comment-action-btn:hover {
    opacity: 1;
}

.edit-comment-textarea {
    width: 100%;
    padding: 8px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    resize: vertical;
}

.dark-theme .edit-comment-textarea {
    background: var(--bg-input) !important;
    border: 2px solid var(--border-input) !important;
    color: var(--text-accent) !important;
}

.edit-comment-textarea:focus {
    outline: none;
    border-color: var(--text-accent);
}

.comment-author {
    font-weight: 600;
    color: var(--text-accent);
    font-size: 0.9rem;
}

.comment-date {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.comment-text {
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Dark theme: Make comment text cream colored */
.dark-theme .comment-text {
    color: #f4e4bc !important;
}

.comment-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.reply-form {
    width: 100%;
}

.comment-vote-btn {
    background: none;
    border: 2px solid rgba(42, 84, 52, 0.2);
    border-radius: 12px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.comment-vote-btn:hover {
    border-color: var(--text-accent);
    color: var(--text-accent);
    background: var(--bg-accent);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.comment-vote-btn.voted {
    background: var(--gradient-green);
    color: white;
    border-color: var(--text-accent);
}

.dark-theme .comment-vote-btn.voted {
    background: var(--gradient-gold);
    color: white;
    border-color: var(--text-accent);
}

.comment-vote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vote-count {
    font-weight: 600;
    min-width: 12px;
    text-align: center;
}

.comment-delete {
    font-size: 0.8rem;
    padding: 4px 8px;
}

.add-comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-comment-form textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    resize: vertical;
    font-family: inherit;
}

.dark-theme .add-comment-form textarea {
    background: var(--bg-input) !important;
    border: 2px solid var(--border-input) !important;
    color: var(--text-accent) !important;
}

.add-comment-form textarea:focus {
    outline: none;
    border-color: var(--text-accent);
}

.add-comment-form button {
    align-self: flex-start;
}

.no-comments {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 20px;
}

.loading-comments {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

/* Reply styling */
.comment-reply {
    margin-left: 40px;
    border-left: 3px solid var(--border-color);
    padding-left: 15px;
    margin-top: 12px;
}

.comment-replies {
    margin-top: 8px;
}

.comment-reply-btn {
    background: none;
    border: 1px solid rgba(42, 84, 52, 0.2);
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.comment-reply-btn:hover {
    background: var(--bg-accent);
    color: var(--text-accent);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(42, 84, 52, 0.4);
    transform: translateY(-1px);
}

.reply-form {
    margin-top: 10px;
    padding: 10px;
    background: var(--bg-accent);
    border-radius: 8px;
}

.reply-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
    background: var(--bg-input);
    color: var(--text-primary);
}

.reply-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.reply-count {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-left: 10px;
    font-style: italic;
}

/* Dark theme support for replies */
.dark-theme .reply-form {
    background: var(--bg-input);
}

.dark-theme .reply-form textarea {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-input);
}

.dark-theme .comment-reply {
    border-left-color: var(--border-color);
}

/* Mobile responsiveness for replies */
@media (max-width: 768px) {
    .comment-reply {
        margin-left: 20px;
        padding-left: 10px;
    }
    
    .reply-form {
        padding: 8px;
    }
    
    .reply-actions {
        flex-direction: column;
        gap: 6px;
    }
    
    .reply-actions .btn-small {
        width: 100%;
        justify-content: center;
    }
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    animation: fadeIn 0.3s;
    align-items: center;
    justify-content: center;
}

#authModal {
    z-index: 1500;
}

/* Link inserter modal needs to be above chord input modal */
#linkInserterModal {
    z-index: 1100;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-modal);
    padding: 32px;
    border-radius: 16px;
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideIn 0.3s;
    box-shadow: var(--shadow-standard);
    border: 1px solid var(--border-color);
}

.modal-content.large {
    max-width: 700px !important;
    width: 80% !important;
}

/* Modal with live preview - wider */
.modal-content.large.with-preview {
    max-width: 1300px !important;
    width: 90% !important;
}

.modal-layout-container {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.modal-input-section {
    flex: 0 0 45%;
    overflow-y: auto;
    max-height: 70vh;
}

.modal-preview-section {
    flex: 1;
    border-left: 2px solid var(--border-color);
    padding-left: 30px;
    overflow-y: auto;
    max-height: 70vh;
}

/* On mobile, remove separate scroll - let modal scroll as one unit */
@media (max-width: 768px) {
    .modal-preview-section {
        overflow-y: visible;
        max-height: none;
    }
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.preview-header h3 {
    font-family: 'Uncial Antiqua', cursive;
    font-size: 1.3rem;
    color: var(--text-accent);
    margin: 0;
}

.preview-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-right: 10px; /* Shift buttons slightly left on desktop */
}

/* Emoji buttons - just plain clickable emojis */
.preview-emoji-btn {
    font-size: 1.5rem;
    cursor: pointer;
    user-select: none;
}

/* Mobile tap feedback - immediate press-in effect while tapping */
.preview-emoji-btn:active {
    transform: scale(0.9) !important;
    opacity: 0.5 !important;
    transition: none !important;
}

/* Only apply hover on pointer devices (desktop mice), NOT touch devices */
@media (hover: hover) and (pointer: fine) {
    .preview-emoji-btn {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .preview-emoji-btn:hover {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.modal-sheet-music-container {
    background: var(--surface-secondary);
    border-radius: 8px;
    padding: 20px;
    min-height: 400px;
}

/* Dark theme support for preview */
.dark-theme .preview-header h3 {
    color: var(--text-accent);
}

.dark-theme .modal-sheet-music-container {
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
}

.dark-theme .modal-preview-section {
    border-left-color: var(--border-color);
}

/* Empty state for preview */
.modal-sheet-music-container:empty::before {
    content: "Sheet music will appear here";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: var(--text-muted);
    font-style: italic;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .modal-content.large.with-preview {
        max-width: 95% !important;
    }

    .modal-layout-container {
        flex-direction: column;
        gap: 20px;
    }

    .modal-input-section {
        flex: 1;
        max-height: none;
    }

    .modal-preview-section {
        flex: 1;
        border-left: none;
        border-top: 2px solid var(--border-color);
        padding-left: 0;
        padding-top: 20px;
    }

    .preview-header {
        /* Keep horizontal layout on mobile, same as desktop */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .preview-header h3 {
        font-size: 1.1rem;
    }

    .preview-controls {
        /* Buttons stay on the right on mobile */
        margin-right: 0;
    }

    .modal-sheet-music-container {
        min-height: 300px;
    }
}

.modal-content h2 {
    font-family: 'Uncial Antiqua', cursive;
    font-weight: 400;
    color: var(--text-accent);
}

.dark-theme .modal-content h2 {
    color: var(--text-accent) !important;
}

/* Limit modal main text styling */
.limit-modal-main-text {
    color: var(--text-accent);
}

.dark-theme .limit-modal-main-text {
    color: #f4e4bc !important;
}

/* Modal title line breaks - mobile only */
@media (max-width: 600px) {
    .modal-title-line2::before {
        content: "\a";
        white-space: pre;
    }

    .limit-modal-features {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* Dark theme: Make modal text muted instead of white */
.dark-theme .modal-content {
    color: var(--text-muted) !important;
}

.dark-theme .modal-content label {
    color: var(--text-muted) !important;
}

/* Dark theme: Make all input text in modals muted colored (except chord inputs) */
.dark-theme .modal-content input:not(.chord-input):not(.section-input),
.dark-theme .modal-content textarea:not(.chord-textarea),
.dark-theme .modal-content select {
    color: var(--text-muted) !important;
}

/* Dark theme: Force progression description to be muted */
.dark-theme .modal-content #progressionDescription {
    color: var(--text-muted) !important;
}

/* Dark theme: Make option text in selects muted colored */
.dark-theme .modal-content select option {
    color: var(--text-muted) !important;
    background: var(--bg-input) !important;
}

/* Dark theme: Override browser autofill background */
.dark-theme input:-webkit-autofill,
.dark-theme input:-webkit-autofill:hover,
.dark-theme input:-webkit-autofill:focus,
.dark-theme input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #4a3019 inset !important;
    -webkit-text-fill-color: #f5f0e8 !important;
    caret-color: #f5f0e8 !important;
}

.close {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 2rem;
    cursor: pointer;
    color: #999;
}

.close:hover {
    color: #333;
}

/* Print chord sheet button - positioned next to close button */
.print-chord-sheet {
    position: absolute;
    right: 60px;
    top: 15px;
    font-size: 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px;
    border-radius: 8px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.print-chord-sheet:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Chord Diagrams Panel */
.chord-diagrams-panel {
    margin-top: 16px;
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.chord-diagrams-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.chord-diagrams-heading {
    font-size: 0.95rem;
    color: var(--text-accent);
    margin: 0;
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .chord-diagrams-heading {
        display: none;
    }
    .chord-diagrams-header {
        justify-content: center;
    }
    .chord-diagrams-panel {
        padding: 16px 8px;
    }
}

.chord-diagrams-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.chord-diagrams-select {
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-modal);
    color: var(--text-primary);
    cursor: pointer;
    width: auto;
    flex-shrink: 0;
}

.chord-diagrams-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    justify-items: center;
}

@media (max-width: 768px) {
    .chord-diagrams-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.chord-diagram-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.chord-diagram-svg {
    width: 100%;
    padding-top: 10px;
}

.chord-diagram-svg svg {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

.chord-diagram-missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 12px 8px;
    width: 100%;
}

.chord-diagram-missing-name {
    font-weight: bold;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.chord-diagram-missing-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Chord Diagrams — locked/blurred for free users */
.chord-diagrams-wrapper {
    position: relative;
}

.chord-diagrams-locked .chord-diagrams-grid {
    filter: blur(4px) grayscale(0.5);
    opacity: 0.45;
    pointer-events: none;
}

.chord-diagrams-locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.chord-diagrams-locked-icon {
    font-size: 1.6rem;
}

.chord-diagrams-locked-cta {
    pointer-events: auto;
    font-size: 0.85rem;
    padding: 4px 12px;
}

.chord-diagrams-locked-message {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-accent);
}

/* Print: show diagrams if visible */
@media print {
    .chord-diagrams-panel {
        break-inside: avoid;
    }
    .chord-diagrams-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .chord-diagrams-select {
        display: none;
    }
    .chord-diagrams-locked .chord-diagrams-grid {
        filter: none;
        opacity: 1;
        pointer-events: auto;
    }
    .chord-diagrams-locked-overlay {
        display: none;
    }
}

/* Share App Button - icon only */
.share-app-btn {
    background: none !important;
    color: var(--text-accent) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    opacity: 1;
}

.share-app-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Tune Share Buttons - matches header share button style */
.tune-share {
    margin: 15px 0;
    text-align: center;
}

.tune-share .btn-small {
    background: linear-gradient(135deg, #f0f7f0, #e8f4e8);
    color: #2a5434;
    border: 2px solid rgba(42, 84, 52, 0.2);
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 8px 16px !important;
    font-size: 1.2rem !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tune-share .btn-small:hover {
    background: linear-gradient(135deg, #e8f4e8, #ddeedd);
    color: #1e4228;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(42, 84, 52, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: rgba(42, 84, 52, 0.4);
}

/* Donate Button - icon only */
.donate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    color: var(--text-accent) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    opacity: 1;
}

.donate-button:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Header Layout */
.header-top {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.logo-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.logo-section h1,
.logo-section .tagline {
    text-align: center;
}

.header-actions {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: space-around;
    margin-top: 60px;
    width: 100%;
}

/* Center header actions when only one button present */
.header-actions:has(> :only-child) {
    justify-content: center;
}

/* Authentication */
.auth-buttons {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.activity-link {
    color: var(--text-accent);
    text-decoration: none;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 12px;
    background: var(--bg-accent);
    font-size: 0.9rem;
    transition: all 0.3s;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (hover: hover) {
    .activity-link:hover {
        background: var(--bg-card);
        transform: translateY(-1px);
        box-shadow: var(--shadow-light);
    }
}

.activity-badge {
    background: #dc3545;
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    animation: pulse-badge 2s infinite;
}

/* Notification dot - simple indicator without numbers */
.notification-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e74c3c; /* Red for light theme */
    margin-left: 6px;
    vertical-align: middle;
}

/* Dark theme notification dot */
.dark-theme .notification-dot {
    background: #d4af37; /* Golden yellow for dark theme */
}


@keyframes pulse-badge {
    0%, 70%, 100% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.1);
    }
}

/* Error Message */
.error-message {
    color: #dc3545;
    font-size: 0.9rem;
    margin-top: 10px;
}

/* Auth Switch */
.auth-switch {
    text-align: center;
    margin-top: 20px;
    color: #666;
}

.auth-switch a {
    color: var(--text-accent);
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* Google Sign-In */
.google-signin-btn {
    width: 100%;
    padding: 12px 20px;
    background: white;
    color: #3c4043;
    border: 2px solid rgba(60, 64, 67, 0.2);
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    margin-top: 25px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.google-signin-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-color: rgba(60, 64, 67, 0.4);
    transform: translateY(-1px);
}

/* Auth Divider */
.auth-divider {
    text-align: center;
    margin: 15px 0;
    position: relative;
    color: #666;
    font-size: 0.9rem;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ddd;
    z-index: 1;
}

.auth-divider::after {
    content: 'or';
    background: white;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

/* Community Features */
.community-feature.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.community-tab {
    position: relative;
}

.community-count {
    font-size: 0.9rem;
}

.community-arrangements {
    margin-top: 30px;
}

/* Donate Reminder in Chord View */
.donate-reminder {
    margin: 20px 0;
}

.donate-reminder p {
    text-align: center;
    color: var(--text-muted) !important;
    margin: 15px 0;
}

.donate-reminder a {
    color: var(--text-accent) !important;
    text-decoration: none;
    font-weight: 600;
}

.donate-reminder a:hover {
    text-decoration: underline;
}

/* Dark theme donate reminder link */
.dark-theme .donate-reminder a {
    color: var(--text-accent) !important;
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #333;
    color: white;
    padding: 15px 30px;
    border-radius: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    opacity: 0;
    transition: all 0.3s;
    z-index: 2000;
}

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

/* Loading States */
.loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

.no-results {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.no-results h3 {
    color: var(--text-accent);
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.no-results p {
    font-size: 1.05rem;
    opacity: 0.8;
    font-style: italic;
}

.audio-warning {
    margin-top: 10px;
    color: #e74c3c;
    font-size: 14px;
}

/* Footer */
footer {
    text-align: center;
    margin-top: 64px;
    padding: 32px 0;
    color: #64748b;
    border-top: 1px solid rgba(139, 69, 19, 0.2);
}

footer a {
    color: var(--text-accent);
    text-decoration: none;
    margin: 0 12px;
    font-weight: 500;
    transition: color 0.2s ease;
}

footer a:hover {
    color: var(--text-secondary);
}

/* Activity Page Styles */
.activity-page {
    margin: 0 auto;
}

.activity-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 40px;
    background: var(--gradient-green);
    color: white;
    border-radius: 12px;
    box-shadow: var(--shadow-standard);
}

.dark-theme .activity-header {
    background: var(--gradient-brown) !important;
    color: #f4e4bc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.activity-header h1 {
    font-family: 'Uncial Antiqua', cursive;
    color: white;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.dark-theme .activity-header h1 {
    color: #f4e4bc !important;
}

.activity-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    font-size: 1.1rem;
}

.dark-theme .activity-subtitle {
    color: rgba(244, 228, 188, 0.9) !important;
}

.activity-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.stat-item {
    background: var(--gradient-light-green);
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    border-left: 4px solid var(--text-accent);
}

.dark-theme .stat-item {
    background: var(--gradient-brown) !important;
    border-left: 4px solid var(--text-accent) !important;
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-accent);
    margin-bottom: 5px;
}

.stat-label {
    color: #666;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-section {
    margin-bottom: 40px;
}

.section-count {
    color: #666;
    font-size: 0.9rem;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.activity-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

@media (hover: hover) {
    .activity-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border-color: var(--text-accent);
    }
}

.item-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.item-content {
    flex: 1;
}

.item-title {
    font-size: 1.1rem;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.item-subtitle {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.item-meta {
    color: #888;
    font-size: 0.85rem;
}

.item-actions {
    flex-shrink: 0;
}

.loading-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 1.1rem;
}

.not-logged-in {
    text-align: center;
    padding: 60px 20px;
}

.login-prompt {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-width: 400px;
    margin: 0 auto;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.no-items {
    text-align: center;
    padding: 30px;
    color: #666;
    font-style: italic;
}

.no-items a {
    color: var(--text-accent);
    text-decoration: none;
    font-weight: 600;
}

.no-items a:hover {
    text-decoration: underline;
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
}

.top-nav .nav-links {
    display: flex;
    gap: 25px;
}

.top-nav .nav-links a {
    color: #666;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.top-nav .nav-links a:hover {
    color: var(--text-accent);
}

.auth-status {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Sheet music animations for chord injection and key changes */
@keyframes chordFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hide chords by default during injection - prevents flash before animation */
.sheet-music-render.animating-chords svg text[data-name="chord"] {
    opacity: 0 !important;
}

/* Accessibility: Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    #sheetMusicRender svg {
        transition: none !important;
    }
    .abcjs-chord {
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================
   Mentions System Styles
   ======================================== */

/* Mention Autocomplete Dropdown */
.mention-autocomplete {
    position: absolute;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-elevated);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10000;
    display: none;
    min-width: 200px;
}

.dark-theme .mention-autocomplete {
    background: var(--bg-card) !important;
    border: 2px solid var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Mention Autocomplete Items */
.mention-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

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

.mention-item:hover,
.mention-item.selected {
    background: var(--bg-accent);
    transform: translateX(2px);
}

.dark-theme .mention-item:hover,
.dark-theme .mention-item.selected {
    background: var(--bg-accent) !important;
    color: var(--text-primary) !important;
}

/* Mention Avatar */
.mention-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-green);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.dark-theme .mention-avatar {
    background: var(--gradient-gold) !important;
    color: #2c1810 !important;
}

/* Mention Info */
.mention-info {
    flex: 1;
    min-width: 0;
}

.mention-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-username {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark-theme .mention-name {
    color: var(--text-primary) !important;
}

.dark-theme .mention-username {
    color: var(--text-muted) !important;
}

/* Mention Highlighting in Comments */
.mention-highlight {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: var(--text-accent);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
    .mention-highlight:hover {
        background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
}

.dark-theme .mention-highlight {
    background: linear-gradient(135deg, #6b5630, #7a6336) !important;
    color: #f4e4bc !important;
    box-shadow: 0 1px 3px rgba(212, 175, 55, 0.2) !important;
}

@media (hover: hover) {
    .dark-theme .mention-highlight:hover {
        background: linear-gradient(135deg, #7a6336, #8b7040) !important;
        box-shadow: 0 2px 6px rgba(212, 175, 55, 0.3) !important;
    }
}

/* Mobile Responsiveness for Mentions */
@media (max-width: 600px) {
    .mention-autocomplete {
        max-width: calc(100vw - 40px);
        max-height: 150px;
    }
    
    .mention-item {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .mention-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    .mention-name {
        font-size: 0.9rem;
    }
    
    .mention-username {
        font-size: 0.8rem;
    }
    
    .mention-highlight {
        padding: 1px 4px;
        font-size: 0.95em;
    }
}

/* Mention Autocomplete Scrollbar */
.mention-autocomplete::-webkit-scrollbar {
    width: 6px;
}

.mention-autocomplete::-webkit-scrollbar-track {
    background: var(--bg-accent);
    border-radius: 3px;
}

.mention-autocomplete::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.mention-autocomplete::-webkit-scrollbar-thumb:hover {
    background: var(--text-accent);
}

.dark-theme .mention-autocomplete::-webkit-scrollbar-track {
    background: var(--bg-input) !important;
}

.dark-theme .mention-autocomplete::-webkit-scrollbar-thumb {
    background: var(--text-muted) !important;
}

.dark-theme .mention-autocomplete::-webkit-scrollbar-thumb:hover {
    background: var(--text-accent) !important;
}

/* ========================================
   Mobile Responsive Styles
   ======================================== */
@media (max-width: 768px) {
    .auth-section-top {
        left: 20px;
        right: 20px;
        top: 25px;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 10px;
    }
    
    .modal-content.large {
        max-width: 95% !important;
        width: 95% !important;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    #tuneName {
        font-size: 1.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .quick-tips p:last-child {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    
    /* Mobile button adjustments */
    .activity-button {
        padding: 12px;
        width: 48px;
        height: 48px;
    }

    .activity-icon {
        font-size: 1.5rem;
    }

    /* Only force 3 columns when there are 6+ buttons (owner view with edit/delete) to avoid 5+1 layout */
    .progression-actions:has(button:not(.btn-inject-play):nth-child(7)) button:not(.btn-inject-play) {
        flex: 0 1 calc(33.333% - 7px);
        max-width: none;
    }

    /* Force 4 columns when there are exactly 4 buttons to fill width */
    .progression-actions:has(button:not(.btn-inject-play):nth-child(5)):not(:has(button:not(.btn-inject-play):nth-child(7))) button:not(.btn-inject-play) {
        flex: 0 1 calc(25% - 6px);
        max-width: none;
    }

    .activity-badge-overlay {
        min-width: 22px;
        height: 22px;
        font-size: 0.75rem;
    }
    
    .user-profile {
        padding: 6px 10px;
    }
    
    .user-email {
        font-size: 0.8rem;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .user-info {
        display: flex;
        gap: 15px;
        align-items: center;
    }
    
    .activity-link {
        font-size: 0.8rem !important;
        padding: 4px 8px !important;
        white-space: nowrap;
        gap: 6px;
    }
    
    .activity-badge {
        min-width: 16px;
        height: 16px;
        font-size: 0.7rem;
    }
    
    .auth-buttons .btn-secondary,
    .auth-buttons .btn-primary {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
    
    .header-actions {
        flex-direction: row;
        gap: 28px;
        justify-content: center;
        margin-top: 50px;
        width: 100%;
    }
    
    header {
        padding: 70px 15px 5px 15px;
        margin-top: 0;
    }
    
    .logo-section {
        margin-bottom: 10px;
        padding: 30px 0;
    }
    
    .tune-header {
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    .tune-share {
        margin: 10px 0;
    }
    
    
    .play-button {
        min-width: 100px;
        padding: 10px 16px;
        font-size: 14px;
    }
    
    /* Sheet music mobile */
    .sheet-music-section {
        padding: 10px;
        margin: 25px -10px;
        border-radius: 0;
        background: var(--gradient-sheet-bg);
    }
    
    /* Existing arrangements mobile */
    .existing-arrangements {
        padding: 15px;
        margin: 0 -10px;
        border-radius: 0;
        background: var(--gradient-sheet-bg);
    }
    
    /* Community arrangement mobile */
    .progression-header h4 {
        padding-right: 10px;
    }
    
    .progression-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .btn-large svg {
        width: 32px !important;
        height: 32px !important;
    }
    
    .btn-large {
        font-size: 1.2rem !important;
        padding: 18px 35px !important;
    }
    
    .add-progression-hero {
        margin: 0 0 30px 0;
        padding: 30px 15px;
    }
    
    /* Add part controls mobile */
    .add-part-controls {
        flex-direction: column;
        gap: 8px;
    }
    
    .part-name-select {
        width: 100%;
        max-width: 250px;
    }
    
    /* Activity page mobile */
    .activity-stats {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .stat-item {
        padding: 20px;
    }
    
    .activity-item {
        padding: 15px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .item-icon {
        width: auto;
        text-align: left;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .top-nav {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    /* Chord grid responsive layout */
    .chord-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .chord-measure {
        min-height: 40px;
        padding: 4px;
    }
}

/* Mobile Portrait Badge Stacking */
@media (max-width: 600px) and (orientation: portrait) {
    .progression-badges {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        justify-content: flex-start;
    }
    
    .progression-badges .verified-badge {
        order: 1;
        margin-top: 0;
    }
    
    .progression-badges .difficulty {
        order: 2;
    }
    
    .progression-header {
        align-items: flex-start;
    }
}

/* Dark theme mobile overrides */
@media (max-width: 600px) {
    .dark-theme .sheet-music-section {
        background: var(--gradient-dark-sheet) !important;
    }
    
    .dark-theme .existing-arrangements {
        background: var(--gradient-dark-sheet) !important;
    }
}

/* Tablet - 3 columns */
@media (min-width: 601px) and (max-width: 768px) {
    .chord-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .chord-symbol {
        font-size: 1.2rem;
    }
}

/* Desktop - more aggressive scaling for 4 columns */
@media (min-width: 769px) {
    .chord-symbol {
        font-size: 1.0rem;
    }
    
    /* Desktop progression actions layout - organized rows with prominent inject button */
    .progression-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        align-items: flex-start;
    }

    /* Wrapper takes full width, button inside stays natural size */
    .progression-actions .inject-button-wrapper {
        order: 999; /* Move to end */
        flex: 1 1 100%; /* Take full width to force new line */
        display: flex;
        justify-content: center; /* Center the button inside */
        margin-top: 12px;
    }

    .progression-actions .btn-inject-play {
        font-size: 18px;
        padding: 14px 28px;
    }

    /* When there are exactly 4 action buttons, make their total width match inject button */
    .progression-actions:has(button:not(.btn-inject-play):nth-child(5)):not(:has(button:not(.btn-inject-play):nth-child(7))) button:not(.btn-inject-play) {
        flex: 0 0 50px; /* 4 × 50px + 3 × 8px gap = 224px ≈ inject button width */
        max-width: 50px;
        min-width: 50px;
    }
}

/* Reposition print button on mobile portrait to avoid title overlap */
@media (orientation: portrait) and (max-width: 600px) {
    .print-chord-sheet {
        top: 60px;
        right: 2px;  /* 2px + 8px padding = 10px, aligned with close button */
    }
}

/* Mobile/tablet landscape chord modal (height constraint excludes desktop) */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
    .modal-content.large {
        max-width: 98% !important;
        width: 98% !important;
        padding: 10px;
    }

    .modal-content.large .close {
        top: 8px;
        right: 10px;
    }

    .modal-content.large .print-chord-sheet {
        top: 8px;
        right: 45px;
    }

    .chord-modal-tune-name {
        font-size: 1rem;
        margin: 0 0 5px 0;
    }

    .chord-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .chord-measure {
        min-width: 36px;
        min-height: 28px;
        padding: 2px;
    }
}

.dark-theme .btn-secondary {
    background: var(--bg-button-secondary);
    color: var(--text-accent);
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 3px 8px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.dark-theme .btn-secondary:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 5px 12px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(212, 175, 55, 0.3);
    border-color: rgba(212, 175, 55, 0.5);
}




/* Mobile/tablet-specific button enhancements for better touch targets */
@media (max-width: 768px) {
    /* Ensure all buttons have minimum 44px touch target (iOS guidelines) */
    .btn-primary, .btn-secondary, .btn-small, .btn-danger {
        min-height: 44px;
        padding: 12px 16px;
    }

    /* Reduce support button padding on mobile */
    #supportButton {
        padding: 6px 10px;
        min-height: auto;
    }

    /* Reduce padding for browse and add chords buttons on mobile */
    .browse-link,
    .welcome-actions .btn-primary,
    .empty-state .btn-primary,
    .add-chords-btn {
        padding: 6px 10px !important;
        min-height: auto !important;
    }
}


/* Dark Theme - Comprehensive 3D Button Effects */
.dark-theme .btn-primary {
    background: linear-gradient(135deg, #a0522d, #8b4513);
    color: #f4e4bc;
    border: 2px solid rgba(160, 82, 45, 0.3);
    box-shadow: 0 3px 8px rgba(160, 82, 45, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dark-theme .btn-primary-outline {
    background: linear-gradient(135deg, rgba(160, 82, 45, 0.2), rgba(160, 82, 45, 0.08));
    color: #d4a574;
    border: 2px solid #a0522d;
    box-shadow: 0 2px 8px rgba(160, 82, 45, 0.15);
}

.dark-theme .btn-primary-outline:hover {
    background: linear-gradient(135deg, rgba(160, 82, 45, 0.3), rgba(160, 82, 45, 0.15));
    box-shadow: 0 4px 12px rgba(160, 82, 45, 0.25);
}

.dark-theme .btn-primary:hover {
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    filter: brightness(1.1);
    border-color: rgba(212, 175, 55, 0.5);
}

.dark-theme .btn-secondary {
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 3px 8px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.dark-theme .btn-secondary:hover {
    box-shadow: 0 5px 12px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(212, 175, 55, 0.3);
    border-color: rgba(212, 175, 55, 0.5);
}

.dark-theme .btn-small.btn-secondary {
    color: #f4e4bc !important;
}

.dark-theme .btn-link {
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 2px 4px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.dark-theme .btn-link:hover {
    box-shadow: 0 3px 6px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(212, 175, 55, 0.3);
    border-color: rgba(212, 175, 55, 0.5);
}

.dark-theme .btn-small {
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 2px 4px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.dark-theme .btn-small:hover {
    box-shadow: 0 3px 6px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(212, 175, 55, 0.3);
    border-color: rgba(212, 175, 55, 0.5);
}

.dark-theme .btn-large {
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(212, 175, 55, 0.3);
}

.dark-theme .btn-large:hover {
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(212, 175, 55, 0.4);
    border-color: rgba(212, 175, 55, 0.5);
}

.dark-theme .google-signin-btn {
    background: #4a3019;
    color: #f5f0e8;
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 3px 8px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.dark-theme .auth-divider {
    color: #b8a082;
}

.dark-theme .auth-divider::before {
    background: #5c3f1f;
}

.dark-theme .auth-divider::after {
    background: var(--bg-modal);
}

.dark-theme .google-signin-btn:hover {
    box-shadow: 0 5px 12px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(212, 175, 55, 0.3);
    border-color: rgba(212, 175, 55, 0.5);
}

.dark-theme .comment-vote-btn {
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 2px 4px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.dark-theme .comment-vote-btn:hover {
    box-shadow: 0 3px 6px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(212, 175, 55, 0.3);
    border-color: rgba(212, 175, 55, 0.5);
}

.dark-theme .comment-reply-btn {
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 2px 4px rgba(212, 175, 55, 0.1), inset 0 1px 0 rgba(212, 175, 55, 0.15);
}

.dark-theme .comment-reply-btn:hover {
    box-shadow: 0 3px 6px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.5);
}

.dark-theme .progression-actions button:not(.btn-inject-play) {
    background: linear-gradient(135deg, #5c4a2a, #6b5630) !important;
    color: #f4e4bc !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 2px 4px rgba(212, 175, 55, 0.1), inset 0 1px 0 rgba(212, 175, 55, 0.15) !important;
}

.dark-theme .progression-actions button:not(.btn-inject-play):hover {
    background: linear-gradient(135deg, #6b5630, #7a6336) !important;
    color: #f4e4bc !important;
    box-shadow: 0 3px 6px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(212, 175, 55, 0.2) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}


.dark-theme .theme-toggle,
.dark-theme .share-app-btn,
.dark-theme .donate-button {
    color: var(--text-accent);
}

.dark-theme .tune-share .btn-small {
    background: linear-gradient(135deg, #a0522d, #8b4513);
    color: #f4e4bc;
    border: 2px solid rgba(160, 82, 45, 0.3) !important;
    box-shadow: 0 2px 6px rgba(160, 82, 45, 0.15), inset 0 1px 0 rgba(160, 82, 45, 0.2) !important;
}

.dark-theme .tune-share .btn-small:hover {
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: white;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(212, 175, 55, 0.3) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
}

/* Dark theme delete button now uses default styling */

/* Dark theme text muting for loading and empty states */
.dark-theme .loading,
.dark-theme .no-results {
    color: var(--text-muted) !important;
}

/* Dark theme dropdown and loading text fixes */
.dark-theme #communitySort {
    color: var(--text-muted) !important;
}

.dark-theme #communitySort option {
    color: var(--text-muted) !important;
}

.dark-theme .loading-state {
    color: var(--text-muted) !important;
}

.dark-theme #searchInput {
    color: #f4e4bc !important;
}

/* GPU Acceleration for Smooth Scrolling */
.tune-display,
.existing-arrangements,
.community-list {
    transform: translateZ(0);
    will-change: transform;
}

/* Container needs separate rule to preserve desktop scale */
.container {
    will-change: transform;
}

.activity-button,
.auth-section-top {
    transform: translateZ(0);
}

/* Mobile smooth scrolling */
* {
    -webkit-overflow-scrolling: touch;
}


/* Note: Dark theme button styles are now handled in the comprehensive section above */


/* Desktop layout for neat button arrangement */
@media (min-width: 769px) {
    .progression-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        align-items: flex-start;
    }
    
    /* Wrapper takes full width, button inside stays natural size */
    .progression-actions .inject-button-wrapper {
        order: 999; /* Move to end */
        flex: 1 1 100%; /* Take full width to force new line */
        display: flex;
        justify-content: center; /* Center the button inside */
        margin-top: 12px;
    }

    .progression-actions .btn-inject-play {
        font-size: 18px;
        padding: 14px 28px;
    }
}

/* ========================================
   Chord Modal Print-Only Elements
   ======================================== */
/* Hide metadata and footer on screen, show only in print */
.chord-modal-metadata,
.chord-modal-print-branding {
    display: none;
}

/* Tune name visible on screen */
.chord-modal-tune-name {
    font-size: 1.2rem;
    margin: 0 0 10px 0;
    text-align: center;
    color: var(--text-primary);
}

/* ========================================
   Print Styles for Chord Modal
   ======================================== */
@media print {
    /* ONLY apply to homepage (not fakebook) - fakebook has its own print CSS */
    /* Hide everything except modal on homepage */
    body:not(.fakebook-page) > * {
        display: none !important;
    }

    /* Show active modal on homepage */
    body:not(.fakebook-page) > .modal.active {
        display: block !important;
        position: relative !important;
        height: auto !important;
    }

    /* Force light theme - override all dark theme styles */
    body,
    .modal.active,
    .modal.active .modal-content,
    .modal.active .modal-content.large,
    .modal.active .chord-display-modal {
        background: white !important;
        color: #000 !important;
    }

    /* Hide everything except the chord display */
    .modal.active .close,
    .modal.active .print-chord-sheet,
    .modal.active .donate-reminder,
    .modal.active .comments-section,
    .modal.active::before {
        display: none !important;
    }

    /* Make modal content full-width and remove styling */
    .modal-content.large {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 30px !important;
        box-shadow: none !important;
        border: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Header styling with theme colors */
    .chord-modal-header {
        text-align: center;
        margin-bottom: 25px;
    }

    /* Tune name - large dark green title */
    .chord-modal-tune-name {
        display: block !important;
        font-family: 'Uncial Antiqua', 'Cinzel', 'Trajan Pro', Georgia, serif;
        font-size: 2rem !important;
        color: #2a5434 !important;
        margin: 0 0 8px 0 !important;
        font-weight: 400;
    }

    /* Tune metadata (type and key) - italic muted */
    .chord-modal-metadata {
        display: block !important;
        font-size: 1rem !important;
        font-style: italic !important;
        color: #64748b !important;
        margin: 0 0 12px 0 !important;
        font-family: Georgia, serif;
    }

    /* Arrangement name - slightly smaller */
    .chord-modal-arrangement-name {
        color: #2a5434 !important;
        margin: 0 !important;
        font-size: 1.3rem !important;
        font-weight: 600;
    }

    /* Optimize chord sections for print */
    .chord-section {
        page-break-inside: avoid;
        margin-bottom: 20px;
        background: #faf7f0 !important;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
        -webkit-print-color-adjust: exact !important; /* Force background printing on mobile */
        print-color-adjust: exact !important;
    }

    .chord-section h3 {
        color: #2a5434 !important;
        border-bottom: 2px solid #2a5434 !important;
        font-size: 1.5rem !important;
        font-family: 'Uncial Antiqua', cursive;
    }

    /* Optimize chord grid for print - keep 4 columns */
    .chord-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        page-break-inside: avoid;
        overflow: visible !important;
    }

    /* Chord measures with clear borders */
    .chord-measure {
        background: white !important;
        border: 2px solid #2a5434 !important;
        padding: 6px 4px;
        min-height: 35px;
        border-radius: 6px;
    }

    /* Chord symbols in dark green */
    .chord-symbol {
        color: #2a5434 !important;
        font-size: 1.1rem;
        font-weight: bold;
    }

    /* Print branding footer - consistent with fakebook */
    .chord-modal-print-branding {
        display: block !important;
        text-align: center;
        font-size: 0.65rem;
        color: #999 !important;
        margin-top: 30px;
        padding-top: 15px;
        border-top: 1px solid #ddd;
        font-style: italic;
    }

    .chord-modal-print-branding a {
        color: #999 !important;
        text-decoration: none;
    }
}

/* ========================================
   Cookie Consent Banner
   ======================================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-button-primary);
    border-top: 3px solid rgba(255, 255, 255, 0.2);
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    animation: slideUpBanner 0.3s ease;
}

.cookie-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 800px;
    margin: 0 auto;
    padding: 16px 20px;
    gap: 20px;
}

.cookie-banner-content p {
    flex: 1;
    margin: 0;
    color: white;
    font-size: 0.95rem;
    line-height: 1.4;
}

.cookie-banner-content a {
    color: white;
    text-decoration: underline;
    opacity: 0.9;
    white-space: nowrap;
}

.cookie-banner-content a:hover {
    opacity: 1;
}

.cookie-banner-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-banner-button {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.cookie-banner-button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.cookie-banner-button.secondary {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.cookie-banner-button.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

@keyframes slideUpBanner {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dark theme adjustments */
.dark-theme .cookie-banner-content p {
    color: #f4e4bc;
}

.dark-theme .cookie-banner-content a {
    color: #f4e4bc;
}

.dark-theme .cookie-banner-button {
    background: rgba(244, 228, 188, 0.2);
    color: #f4e4bc;
    border: 2px solid rgba(244, 228, 188, 0.3);
}

.dark-theme .cookie-banner-button:hover {
    background: rgba(244, 228, 188, 0.3);
    border-color: rgba(244, 228, 188, 0.5);
}

.dark-theme .cookie-banner-button.secondary {
    background: rgba(244, 228, 188, 0.1);
    border-color: rgba(244, 228, 188, 0.2);
}

.dark-theme .cookie-banner-button.secondary:hover {
    background: rgba(244, 228, 188, 0.15);
    border-color: rgba(244, 228, 188, 0.3);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cookie-banner-content {
        flex-direction: column;
        text-align: center;
        padding: 14px 15px;
        gap: 12px;
    }

    .cookie-banner-content p {
        font-size: 0.9rem;
    }

    .cookie-banner-buttons {
        width: 100%;
        justify-content: center;
    }

    .cookie-banner-button {
        flex: 1;
        max-width: 120px;
        padding: 7px 12px;
        font-size: 0.85rem;
    }
}

/* Print - hide cookie banner */
@media print {
    .cookie-banner {
        display: none !important;
    }
}

/* ========================================
   Help FAB & Contact Modal
   ======================================== */

/* Floating Action Button */
.help-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--gradient-green);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--btn-3d-shadow-base), var(--btn-3d-inset);
    border: 1px solid var(--btn-green-border);
    z-index: 999;
    cursor: pointer;
    transition: all 0.2s ease;
}

.help-fab:hover {
    transform: translateY(-3px);
    box-shadow: var(--btn-green-shadow-hover), var(--btn-3d-inset-hover);
}

.help-fab:active {
    transform: translateY(-1px);
}

.dark-theme .help-fab {
    background: var(--gradient-brown);
    border-color: rgba(139, 69, 19, 0.3);
    color: var(--text-primary);
}

/* Contact Modal Overlay */
.contact-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
    padding: 20px;
    backdrop-filter: blur(2px);
}

/* Contact Modal */
.contact-modal {
    background: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: modalSlideIn 0.25s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.contact-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-accent);
}

.contact-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-family: 'Uncial Antiqua', serif;
    color: var(--text-accent);
}

.contact-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.contact-modal-close:hover {
    color: var(--text-primary);
}

/* Login Required State */
.contact-login-required {
    padding: 40px 20px;
    text-align: center;
}

.contact-login-required p {
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 1rem;
}

.contact-login-required .btn-primary,
.contact-login-required .btn-secondary {
    margin: 5px;
    min-width: 100px;
}

/* Contact Form */
.contact-form {
    padding: 20px;
}

.contact-form-group {
    margin-bottom: 18px;
}

.contact-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-accent);
    font-size: 0.9rem;
}

.contact-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-input);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.contact-select:focus {
    outline: none;
    border-color: var(--text-accent);
    box-shadow: 0 0 0 3px rgba(42, 84, 52, 0.1);
}

.contact-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-input);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--bg-input);
    color: var(--text-primary);
}

.contact-input:focus {
    outline: none;
    border-color: var(--text-accent);
    box-shadow: 0 0 0 3px rgba(42, 84, 52, 0.1);
}

.contact-input::placeholder {
    color: var(--text-muted);
}

.contact-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-input);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--bg-input);
    color: var(--text-primary);
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.contact-textarea:focus {
    outline: none;
    border-color: var(--text-accent);
    box-shadow: 0 0 0 3px rgba(42, 84, 52, 0.1);
}

.contact-textarea::placeholder {
    color: var(--text-muted);
}

.contact-submit {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    margin-top: 5px;
}

/* Success State */
.contact-success {
    padding: 40px 20px;
    text-align: center;
}

.contact-success-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-green);
    color: white;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.contact-success h3 {
    margin: 0 0 10px;
    color: var(--text-accent);
    font-size: 1.3rem;
}

.contact-success p {
    margin: 0 0 20px;
    color: var(--text-secondary);
}

/* Dark theme adjustments */
.dark-theme .contact-modal {
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.dark-theme .contact-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b8a082' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

.dark-theme .contact-select:focus,
.dark-theme .contact-textarea:focus {
    border-color: var(--text-accent);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.dark-theme .contact-success-icon {
    background: var(--gradient-gold);
    color: #1a0f08;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .help-fab {
        bottom: 15px;
        right: 15px;
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .contact-modal-overlay {
        padding: 15px;
    }

    .contact-modal {
        max-width: 100%;
        max-height: 85vh;
        overflow-y: auto;
    }

    .contact-form {
        padding: 15px;
    }
}

/* Hide FAB when audio player is visible at bottom (avoid overlap) */
.audio-controls-visible .help-fab {
    bottom: 90px;
}

/* Print - hide help FAB */
@media print {
    .help-fab,
    .contact-modal-overlay {
        display: none !important;
    }
}