/*
 * IMSLP Excerpts - Stylesheet
 * =================
 * Display font: Libre Baskerville - classical headers, logo branding
 * Body font: Alegreya Sans - literary sans-serif for body, controls, buttons
 *
 * Color scheme based on Clara (clara.imslp.org)
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:root {
    --font-display: "Libre Baskerville", "Georgia", serif;
    --font-logo: "Alegreya Sans", "Helvetica Neue", "Arial", sans-serif;
    --font-body: "Alegreya Sans", "Helvetica Neue", "Arial", sans-serif;
    --top-bar-height: 64px;

    /* Clara-inspired color scheme - Light Mode */
    --imslp-navy: #003465;  /* Original IMSLP header color */
    --imslp-blue: #3862F4;
    --imslp-blue-light: #5a7ff6;
    --imslp-blue-dark: #2648BE;
    --imslp-gold: #b8960c;
    --imslp-gold-light: #d4af37;
    --imslp-cream: #FCFCFC;
    --imslp-parchment: #EDEFF5;
    --text-primary: #081226;
    --text-secondary: #4A5263;
    --text-muted: #787E8A;
    --border-color: #DCDEE3;
    --border-light: #EDEFF5;
    --background-page: #F4F4F4;
    --background-card: #FFFFFF;
    --background-raised: var(--background-card);
    --shadow-soft: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-hover: 0 4px 20px rgba(0,0,0,0.12);
    --accent: #3862F4;
    --hover-item: rgba(0, 52, 101, 0.08);
}

/* Dark theme - Clara-inspired */
[data-theme="dark"] {
    --imslp-navy: #7BA3D8;  /* Lighter navy for dark mode */
    --imslp-blue: #5a7ff6;
    --imslp-blue-light: #7a9cf8;
    --imslp-blue-dark: #3862F4;
    --imslp-gold: #e8c547;
    --imslp-gold-light: #f0d060;
    --imslp-cream: #1E1E1E;
    --imslp-parchment: #2F3031;
    --text-primary: #F8F8F8;
    --text-secondary: #F0EDED;
    --text-muted: #B6BABD;
    --border-color: #4E5052;
    --border-light: #3F4142;
    --background-page: #1E1E1E;
    --background-card: #333333;
    --background-raised: var(--background-card);
    --shadow-soft: 0 2px 12px rgba(0,0,0,0.4);
    --shadow-hover: 0 4px 20px rgba(0,0,0,0.5);
    --accent: #5a7ff6;
    --hover-item: rgba(255, 255, 255, 0.1);
}

/* Dark theme specific overrides */
[data-theme="dark"] .extract-preview {
    background: white;
    border-color: var(--border-color);
}


[data-theme="dark"] .extract-viewer {
    background: var(--background-card);
}

[data-theme="dark"] .extract-image-container {
    background: var(--background-card);
}

[data-theme="dark"] .fake-music-full {
    background: white;
}

[data-theme="dark"] .action-bar {
    background: var(--imslp-parchment);
    border-color: var(--border-light);
}

[data-theme="dark"] .action-bar .btn-primary {
    background: #3862F4;
    color: #FFFFFF;
}

[data-theme="dark"] .action-bar .btn-secondary {
    background: var(--background-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* ===== PAGE LOADER ===== */
.page-loader {
    position: fixed;
    top: var(--top-bar-height); /* Below header so nav bar remains visible during load */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-page);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.i18n-pending .page-loader {
    top: 0;
}

.loader-content {
    text-align: center;
}

.loader-spinner,
.nav-spinner-overlay .nav-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--imslp-blue);
    border-radius: 50%;
}

.loader-spinner {
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

.loader-text {
    margin-top: 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

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

[data-theme="dark"] .youtube-dropdown-item:hover {
    background: #2a2a32;
}

[data-theme="dark"] .instrument-icon {
    filter: brightness(1.5);
}

/* Dark theme - form controls */
[data-theme="dark"] .search-box input,
[data-theme="dark"] .sort-group select,
[data-theme="dark"] .filter-select,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .add-comment input {
    background: var(--background-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-secondary {
    background: var(--background-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(90, 127, 246, 0.15);
    border-color: #5a7ff6;
    color: #7a9cf8;
}

/* Dark theme - favorite button (should match btn-secondary when not favorited) */
[data-theme="dark"] .favorite-btn {
    background: var(--background-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .favorite-btn:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

[data-theme="dark"] .favorite-btn.favorited {
    background: rgba(231, 76, 60, 0.15);
    border-color: #e74c3c;
    color: #e74c3c;
}

[data-theme="dark"] .btn-primary {
    background: #3862F4;
    color: #FFFFFF;
}

[data-theme="dark"] .btn-primary:hover {
    background: #5a7ff6;
    box-shadow: 0 4px 12px rgba(90, 127, 246, 0.3);
}

[data-theme="dark"] .btn-post {
    background: var(--background-card);
    color: var(--imslp-blue);
    border-color: var(--border-color);
}

[data-theme="dark"] .suggest-form {
    background: var(--background-card);
}

[data-theme="dark"] .pagination button {
    background: var(--background-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .expand-all-btn {
    background: var(--background-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .filter-btn {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .filter-btn.active {
    background: var(--imslp-blue);
    border-color: var(--imslp-blue);
    color: var(--background-page);
}

[data-theme="dark"] .sort-btn {
    background: var(--background-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .controls-pill {
    background: var(--background-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .pill-btn:hover,
[data-theme="dark"] .pill-btn.active {
    background: rgba(90, 127, 246, 0.15);
    color: #7a9cf8;
}

[data-theme="dark"] .pill-divider {
    background: var(--border-color);
}

[data-theme="dark"] .sort-dropdown-menu {
    background: var(--background-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .sort-option {
    color: var(--text-primary);
}

[data-theme="dark"] .sort-option:hover {
    background: var(--imslp-parchment);
}

[data-theme="dark"] .btn-post:hover {
    background: #5a7ff6;
    border-color: #5a7ff6;
    color: #FFFFFF;
}

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

body {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    background: var(--imslp-cream);
    color: var(--text-primary);
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.1s ease-in;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.fonts-loaded {
    opacity: 1;
}

.page-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== COMMON COMPONENTS ===== */

/* ===== TOP BAR ===== */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 10001; /* Above page-loader (9999) so header is always visible during load */
    background: var(--background-card);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
}

.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: var(--top-bar-height);
    gap: 24px;
}

/* Hide back link text on mobile, show icon only */
@media (max-width: 768px) {
    .top-bar .back-link span {
        display: none;
    }

    .top-bar .back-link {
        padding: 8px;
    }
}

/* Logo */
.top-bar .logo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: var(--text-primary);
    flex-shrink: 0;
}

.top-bar .logo .imslp-logo,
.top-bar .imslp-logo-container .imslp-logo {
    height: 24px;
    width: auto;
    color: var(--imslp-navy);
    display: block;
    /* For baseline alignment, use vertical-align to set logo bottom as baseline */
    vertical-align: baseline;
}

.top-bar .imslp-logo-container {
    display: flex;
    align-items: baseline;
}

[data-theme="dark"] .top-bar .logo .imslp-logo,
[data-theme="dark"] .top-bar .imslp-logo-container .imslp-logo {
    color: var(--imslp-gold);
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--imslp-gold);
    line-height: 0.8;
    transform: translateY(-2px);
}

/* Navigation */
.nav-primary {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s;
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--imslp-parchment);
}

.nav-link.active {
    color: var(--imslp-blue);
    background: rgba(56, 98, 244, 0.08);
}

.nav-link svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

/* Header Right - groups instrument selector and user menu */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Instrument Selector in Top Bar */
.instrument-selector {
    position: relative;
}

.instrument-btn {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}

.instrument-btn:hover {
    border-color: var(--imslp-blue-light);
    box-shadow: var(--shadow-soft);
}

.instrument-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--imslp-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* User Menu (floating FAB - default) */
.user-menu {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1001;
}

/* User Menu Inline (in header) */
.user-menu.user-menu-inline {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: auto;
}

.user-menu-inline .user-menu-btn {
    width: 40px;
    height: 40px;
    box-shadow: none;
}

.user-menu-inline .user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    bottom: auto;
    right: 0;
}

/* Responsive: Show nav icons only on mobile */
@media (max-width: 768px) {
    :root {
        --top-bar-height: 56px;
    }

    .top-bar-inner {
        padding: 0 16px;
        height: var(--top-bar-height);
        gap: 12px;
    }

    .nav-primary {
        display: none;
    }

    .logo-text {
        font-size: 1.6rem;
        transform: translateY(-1.5px);
    }

    .header-right {
        gap: 8px;
    }

    .instrument-btn {
        padding: 6px 8px;
        font-size: 0.85rem;
    }

    .instrument-btn span {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Very narrow screens */
@media (max-width: 400px) {
    .top-bar-inner {
        padding: 0 12px;
        gap: 8px;
    }

    .logo-text {
        display: none;
    }

    .instrument-btn {
        min-width: unset;
        padding: 6px;
    }

    .instrument-btn span {
        display: none;
    }

    .header-right {
        gap: 6px;
    }
}

.user-menu-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--background-card);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: var(--shadow-soft);
}

.user-menu-btn:hover {
    box-shadow: var(--shadow-hover);
    color: var(--imslp-blue);
}

.user-menu-btn.logged-in {
    background: var(--background-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
    padding: 0;
}

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

.user-menu-dropdown {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 200px;
    display: none;
    z-index: 1002;
    overflow: hidden;
}

.user-menu-dropdown.show {
    display: block;
}

.user-menu-dropdown .menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background: none;
    border: none;
    font-size: 16px;
    font-family: var(--font-body);
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.user-menu-dropdown .menu-item.menu-item-top {
    padding-top: 16px;
}

.user-menu-dropdown .menu-item.menu-item-bottom {
    padding-bottom: 16px;
}

.user-menu-dropdown .menu-item:hover {
    background: var(--hover-item);
}

.user-menu-dropdown .menu-icon {
    width: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-menu-dropdown .menu-icon svg {
    display: block;
}

.user-menu-dropdown .login-item {
    color: var(--imslp-blue);
    font-weight: 500;
}

/* Mobile-only items in user menu (hidden on desktop) */
.user-menu-dropdown .mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .user-menu-dropdown .mobile-only {
        display: flex;
    }
}

/* Narrow mobile only - shown when header instrument selector is hidden */
.user-menu-dropdown .narrow-mobile-only {
    display: none;
}

@media (max-width: 400px) {
    .user-menu-dropdown .narrow-mobile-only {
        display: flex;
    }
}

/* Theme toggle icons - show sun in dark mode, moon in light mode */
[data-theme="light"] .user-menu-dropdown .menu-icon .icon-moon,
[data-theme="dark"] .user-menu-dropdown .menu-icon .icon-sun {
    display: none;
}

/* User menu header (shows username) */
.user-menu-dropdown .menu-header {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    background: var(--background-alt);
    text-align: left;
}

/* Expand/collapse icon with rotation */
.user-menu-dropdown .expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.user-menu-dropdown .expand-icon.expanded {
    transform: rotate(90deg);
}

/* Language Selector in User Menu */
.user-menu-dropdown .lang-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}

.user-menu-dropdown .lang-select {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--background-card);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-body);
    padding: 4px 8px;
    cursor: pointer;
}

.user-menu-dropdown .lang-select:focus {
    outline: none;
    border-color: var(--imslp-blue);
}

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

.user-menu-dropdown .menu-divider.nav-divider {
    display: none;
}

@media (max-width: 768px) {
    .user-menu-dropdown .menu-divider.nav-divider {
        display: block;
    }
}

/* Modal Overlay (shared between login, membership, etc.) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002; /* Above top-bar (10001) */
    padding: 20px;
}

/* Membership Modal */
.membership-modal {
    background: var(--background-card);
    border-radius: 12px;
    max-width: 480px;
    width: 100%;
    padding: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
    animation: modalSlideIn 0.2s ease-out;
}

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

.membership-modal h2 {
    margin: 0 0 8px 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text-primary);
}

.membership-modal .modal-description {
    margin: 0 0 24px 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.membership-modal .excerpt-preview-box {
    background: var(--imslp-parchment);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    text-align: left;
}

.membership-modal .excerpt-preview-box .work-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.membership-modal .excerpt-preview-box .work-composer {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.membership-modal .excerpt-preview-box .excerpt-details {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.membership-modal .modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.membership-modal .modal-note {
    margin: 20px 0 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ===== INSTRUMENT SELECTOR MODAL ===== */
.instrument-modal {
    background: var(--background-card);
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    padding: 28px 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.25s ease-out;
    max-height: min(85vh, 680px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.instrument-modal h2 {
    margin: 0 0 8px 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--text-primary);
    text-align: center;
}

.instrument-modal .modal-subtitle {
    margin: 0 0 20px 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
}

.instrument-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Section labels */
.instruments-section {
    margin-bottom: 20px;
}

.instruments-section:last-of-type {
    margin-bottom: 24px;
}

.section-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.section-label.coming-soon {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Instruments grid */
.instruments-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.instrument-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--background-card);
    cursor: pointer;
    transition: all 0.15s ease;
}

.instrument-option:hover {
    border-color: var(--imslp-blue-light);
    background: rgba(56, 98, 244, 0.04);
}

.instrument-option.selected {
    border-color: var(--imslp-blue);
    background: rgba(56, 98, 244, 0.08);
}

.instrument-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.instrument-option.disabled:hover {
    border-color: var(--border-color);
    background: var(--background-card);
}

.instrument-option .instrument-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    position: relative;
    flex-shrink: 0;
}

.instrument-option .instrument-icon svg {
    width: 100%;
    height: 100%;
    max-width: 28px;
    max-height: 28px;
}

.instrument-option.selected .instrument-icon {
    color: var(--imslp-blue);
}

.instrument-option .instrument-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

.instrument-option.selected .instrument-name {
    color: var(--imslp-blue);
}

.instrument-option.disabled .instrument-name {
    color: var(--text-muted);
}

/* Instrument modal actions */
.instrument-modal .modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    position: sticky;
    bottom: 0;
    background: var(--background-card);
    padding-top: 16px;
    z-index: 1;
    flex-shrink: 0;
}

.instrument-modal .modal-actions .btn {
    min-width: 140px;
    justify-content: center;
}

.instrument-modal .modal-actions .btn-primary {
    padding: 14px 32px;
    font-size: 1rem;
}

.instrument-modal .modal-actions .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile: Full screen instrument modal */
@media (max-width: 600px), (max-height: 500px) {
    .modal-overlay.instrument-selector {
        padding: 0;
        align-items: stretch;
    }

    .modal-overlay.instrument-selector .instrument-modal {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal-overlay.instrument-selector .instrument-modal h2 {
        font-size: 1.4rem;
        flex-shrink: 0;
    }

    .modal-overlay.instrument-selector .instrument-modal .modal-subtitle {
        flex-shrink: 0;
    }

    .modal-overlay.instrument-selector .instruments-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .modal-overlay.instrument-selector .instrument-option {
        padding: 14px 6px;
    }

    .modal-overlay.instrument-selector .instrument-option .instrument-icon {
        width: 24px;
        height: 24px;
    }

    .modal-overlay.instrument-selector .instrument-option .instrument-name {
        font-size: 0.8rem;
    }

    .modal-overlay.instrument-selector .instrument-modal .modal-actions {
        margin-top: auto;
        padding-top: 20px;
        flex-shrink: 0;
    }

    .modal-overlay.instrument-selector .modal-actions .btn-primary {
        width: 100%;
    }
}

/* Landscape mobile: more compact instrument layout */
@media (max-height: 500px) {
    .modal-overlay.instrument-selector .instrument-modal {
        padding: 16px 20px;
    }

    .modal-overlay.instrument-selector .instrument-modal h2 {
        font-size: 1.2rem;
        margin-bottom: 4px;
    }

    .modal-overlay.instrument-selector .instrument-modal .modal-subtitle {
        margin-bottom: 16px;
        font-size: 0.85rem;
    }

    .modal-overlay.instrument-selector .instruments-section {
        margin-bottom: 16px;
    }

    .modal-overlay.instrument-selector .instruments-section:last-of-type {
        margin-bottom: 16px;
    }

    .modal-overlay.instrument-selector .section-label {
        margin-bottom: 10px;
        font-size: 0.75rem;
    }

    .modal-overlay.instrument-selector .instruments-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .modal-overlay.instrument-selector .instrument-option {
        padding: 10px 4px;
        gap: 4px;
    }

    .modal-overlay.instrument-selector .instrument-option .instrument-icon {
        width: 20px;
        height: 20px;
    }

    .modal-overlay.instrument-selector .instrument-option .instrument-name {
        font-size: 0.7rem;
    }

    .modal-overlay.instrument-selector .modal-actions {
        padding-top: 12px;
    }

    .modal-overlay.instrument-selector .modal-actions .btn-primary {
        padding: 10px 24px;
        font-size: 0.9rem;
    }
}

/* Very small screens: even more compact */
@media (max-width: 350px) {
    .modal-overlay.instrument-selector .instrument-modal {
        padding: 16px 12px;
    }

    .modal-overlay.instrument-selector .instruments-grid {
        gap: 6px;
    }

    .modal-overlay.instrument-selector .instrument-option {
        padding: 10px 4px;
    }

    .modal-overlay.instrument-selector .instrument-option .instrument-name {
        font-size: 0.7rem;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}

.modal-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.modal-close:hover {
    background: var(--imslp-parchment);
    color: var(--text-primary);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: 60vh;
}

.instrument-category {
    margin-bottom: 24px;
}

.instrument-category:last-child {
    margin-bottom: 0;
}

.category-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.instrument-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.instrument-option {
    padding: 12px 16px;
    background: var(--imslp-parchment);
    border: 2px solid transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.instrument-option:hover {
    border-color: var(--imslp-blue-light);
    background: var(--background-card);
}

.instrument-option.selected {
    border-color: var(--imslp-blue);
    background: rgba(56, 98, 244, 0.08);
    color: var(--imslp-blue);
    font-weight: 500;
}

/* Login Modal */
.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.login-modal-overlay.show {
    display: flex;
}

.login-modal {
    background: var(--background-card);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow: hidden;
}

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

.login-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-family: var(--font-display);
    color: var(--text-primary);
}

.login-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.login-modal-close:hover {
    background: var(--background-page);
    color: var(--text-primary);
}

.login-modal-body {
    padding: 0;
}

.login-modal-body iframe {
    width: 100%;
    height: 400px;
    border: none;
}

.login-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* ===== SITE HEADER ===== */
.site-header {
    background: linear-gradient(180deg, var(--background-page) 0%, var(--imslp-cream) 100%);
    padding: 24px 0 16px;
    text-align: center;
    margin-bottom: 12px;
}

.site-header-border {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 14px;
    border-bottom: 1px solid var(--border-color);
}

.site-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.site-branding .logo-combined {
    display: flex;
    align-items: center;
    gap: 0;
    color: var(--imslp-navy);
}

.site-branding .logo-combined svg {
    height: 32px;
    width: auto;
}

.site-branding .site-title {
    font-family: var(--font-display);
    font-size: 35px;
    font-weight: 400;
    color: var(--imslp-navy);
    margin-left: 10px;
    margin-bottom: -3px;
}

.instrument-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    padding: 8px 4px;
    margin-bottom: 14px;
    cursor: pointer;
    font-family: var(--font-display);
}

.instrument-selector-btn .current-instrument {
    font-size: 28px;
    font-weight: 400;
    color: var(--imslp-navy);
}

.instrument-selector-btn .change-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--imslp-navy);
    background: var(--bg-secondary);
    padding: 4px 12px;
    border-radius: 20px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.instrument-selector-btn:hover .change-label {
    background: var(--imslp-navy);
    color: white;
}

.instrument-selector-btn:focus {
    outline: none;
}

.instrument-selector-btn:focus-visible .change-label {
    box-shadow: 0 0 0 2px var(--imslp-navy);
}

/* Mini Site Header for inner pages */
.site-header-mini {
    text-align: center;
    padding: 24px 20px 20px;
    margin-bottom: 8px;
}

.site-header-mini a {
    display: inline-flex;
    align-items: baseline;
    text-decoration: none;
    color: var(--imslp-navy);
    gap: 8px;
}

.site-header-mini a:hover {
    opacity: 0.8;
}

.site-header-mini svg,
.site-header-mini .imslp-logo {
    height: 22px;
    width: auto;
}

.site-header-mini .imslp-logo {
    /* IMSLP wordmark aspect ratio */
    aspect-ratio: 670 / 195;
}

.site-header-mini .site-title {
    font-family: var(--font-display);
    /* Cap height = 22px (logo height), font-size = 22/0.8013 = 27.45px */
    font-size: 27.45px;
    font-weight: 400;
    line-height: 0.8;
    margin-top: -0.08em; /* Fine-tune vertical alignment */
}

/* ===== CONTROLS BAR ===== */
.controls-bar {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-box input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    font-size: 16px;
    font-family: var(--font-body);
    background: white;
}

.search-box input:focus {
    outline: none;
    border-color: var(--imslp-blue);
    box-shadow: 0 0 0 3px rgba(0,52,101,0.1);
}

.search-box::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
}

.controls-right {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Controls Pill (Random + Sort) */
.controls-pill {
    display: flex;
    align-items: center;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 4px;
    gap: 4px;
}

.pill-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pill-btn:hover {
    background: var(--imslp-parchment);
    color: var(--imslp-blue);
}

.pill-btn.active {
    background: var(--imslp-parchment);
    color: var(--imslp-blue);
}

.pill-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pill-btn:disabled:hover {
    background: transparent;
    color: var(--text-secondary);
}

/* Pill button tooltips */
.pill-btn[data-tooltip] {
    position: relative;
}

.pill-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: var(--background-card);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-family: var(--font-body);
    font-size: 13px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: var(--shadow-hover);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.pill-btn[data-tooltip]::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    border: 6px solid transparent;
    border-bottom-color: var(--background-card);
    filter: drop-shadow(0 -1px 0 var(--border-color));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

@media (hover: hover) {
    .pill-btn[data-tooltip]:hover::after,
    .pill-btn[data-tooltip]:hover::before {
        opacity: 1;
    }

    .pill-btn[data-tooltip]:disabled:hover::after,
    .pill-btn[data-tooltip]:disabled:hover::before {
        opacity: 0;
    }
}

.pill-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 2px;
}

.pill-sort-wrapper {
    position: relative;
}

.sort-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: -4px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-hover);
    min-width: 160px;
    z-index: 100;
    overflow: hidden;
}

/* Legacy sort-btn for backwards compatibility */
.sort-dropdown {
    position: relative;
}

.sort-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--background-card);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sort-btn:hover,
.sort-btn.active {
    border-color: var(--imslp-blue);
    color: var(--imslp-blue);
}

.sort-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.sort-option:hover {
    background: var(--imslp-parchment);
}

.sort-option .sort-check {
    width: 16px;
    color: var(--imslp-blue);
    opacity: 0;
}

.sort-option.selected .sort-check {
    opacity: 1;
}

.expand-all-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 16px;
    font-family: var(--font-body);
    color: var(--text-secondary);
    cursor: pointer;
}

.expand-all-btn:hover {
    background: var(--background-card);
    border-color: var(--imslp-blue);
    color: var(--imslp-blue);
}

.suggest-link {
    color: var(--imslp-blue);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    padding: 6px 14px;
    border: 1px solid var(--imslp-blue);
    border-radius: 20px;
    transition: all 0.2s;
}

.suggest-link:hover {
    background: var(--imslp-blue);
    color: white;
}

.results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--text-muted);
}

/* ===== BUTTONS ===== */
.btn {
    padding: 12px 22px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-family: var(--font-body);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--imslp-blue);
    color: white;
    box-shadow: 0 2px 6px rgba(0,52,101,0.2);
}

.btn-primary:hover {
    background: var(--imslp-blue-dark);
    box-shadow: 0 4px 12px rgba(0,52,101,0.3);
}

.btn-loading {
    pointer-events: none;
    opacity: 0.85;
}

.btn-pdf {
    position: relative;
}

.btn-spinner-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-inline-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

.btn-content.invisible {
    visibility: hidden;
}

.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

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

.btn-secondary {
    background: white;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    border-color: var(--imslp-blue);
    color: var(--imslp-blue);
}

/* Clara button - in library state */
.btn-clara.in-library {
    background: #e8f5e9;
    border-color: #4caf50;
    color: #2e7d32;
}

.btn-clara.in-library:hover {
    background: #c8e6c9;
    border-color: #43a047;
    color: #1b5e20;
}

[data-theme="dark"] .btn-clara.in-library {
    background: #1b3d1f;
    border-color: #4caf50;
    color: #81c784;
}

[data-theme="dark"] .btn-clara.in-library:hover {
    background: #2e5233;
    border-color: #66bb6a;
    color: #a5d6a7;
}

.btn-icon {
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 0;
}

.btn-post {
    padding: 8px 16px;
    background: var(--imslp-parchment);
    color: var(--imslp-blue);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
    font-family: var(--font-body);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-post:hover {
    background: var(--imslp-blue);
    border-color: var(--imslp-blue);
    color: white;
}

/* ===== WORK CARDS ===== */
.work-card {
    background: var(--background-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.work-card:hover {
    box-shadow: var(--shadow-hover);
}

.work-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.work-card-header:hover {
    background: rgba(0, 0, 0, 0.02);
}

.work-card-header h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.work-card-header .composer {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Extract Items */
.extract-item {
    display: flex;
    gap: 20px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.1s;
    align-items: center;
    touch-action: manipulation; /* Disable 300ms tap delay on mobile */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */
    user-select: none; /* Prevent text selection on tap */
    -webkit-user-select: none;
}

/* Immediate visual feedback on touch */
.extract-item:active {
    background: var(--hover-item);
    transition: background 0s;
}

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

.extract-item:hover {
    background: rgba(0,52,101,0.02);
}

.extract-preview {
    flex: 0 0 45%;
    max-width: 400px;
    height: 70px;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-pdf-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(180, 36, 36, 0.92);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.preview-pdf-badge svg {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] .preview-pdf-badge {
    background: rgba(215, 72, 72, 0.9);
}

.extract-item:hover .extract-preview {
    transform: scale(1.03);
    box-shadow: var(--shadow-hover);
}

.extract-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.extract-preview img.preview-ready {
    opacity: 1;
}

.extract-preview .preview-spinner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--imslp-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.extract-preview .preview-spinner.hidden {
    display: none;
}

.extract-preview .scan-preview {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 12px;
    height: 100%;
}

.scan-music-content {
    position: relative;
    height: 50px;
    min-width: 280px;
}

.scan-music-content .staff {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    background: repeating-linear-gradient(
        to bottom,
        #555 0px, #555 1px,
        transparent 1px, transparent 7px
    );
}

.scan-music-content .notes {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    color: #333;
    font-size: 16px;
    letter-spacing: 2px;
    white-space: nowrap;
    z-index: 1;
}

.extract-info {
    flex: 1;
    min-width: 0;
}

.extract-info .movement {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.extract-info .movement .movement-name {
    font-weight: 500;
}

.extract-info .movement .measures {
    font-weight: 400;
    color: var(--text-secondary);
}

.extract-info .part-name {
    font-size: 16px;
    color: var(--text-secondary);
}

.extract-arrow {
    color: var(--text-muted);
    font-size: 18px;
    transition: transform 0.2s;
}

.extract-item:hover .extract-arrow {
    transform: translateX(4px);
    color: var(--imslp-blue);
}

.more-extracts {
    padding: 14px 20px;
    background: transparent;
    color: var(--imslp-blue);
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    border-top: 1px solid var(--border-light);
    transition: background 0.15s;
}

.more-extracts:hover {
    background: rgba(0, 0, 0, 0.02);
    color: var(--imslp-blue-dark);
}

.work-card-header:focus-visible,
.extract-item:focus-visible,
.more-extracts:focus-visible,
.instrument-option:focus-visible,
.instrument-name:focus-visible,
.suggest-form-header:focus-visible {
    outline: 2px solid var(--imslp-blue);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ===== BROWSE PAGE ===== */
.browse-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 200px;
}

.loading-more {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 14px;
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 998;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    opacity: 0;
    pointer-events: none;
    color: var(--text-secondary);
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.back-to-top:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-hover);
    color: var(--imslp-blue);
}

/* ===== DETAIL PAGE ===== */
.detail-page {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px 200px;
}

.detail-header {
    margin-bottom: 20px;
}

.detail-header h1 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    margin-bottom: 8px;
}

.detail-header .composer {
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

/* Excerpt meta - inline format matching mockup */
.excerpt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Recommended by */
.recommended-by {
    margin-top: 8px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.recommended-by a {
    color: var(--imslp-blue);
}

/* Excerpt Navigation */
.excerpt-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.excerpt-nav-info {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
}

.excerpt-nav .excerpt-nav-btn svg {
    width: 16px;
    height: 16px;
}

/* ===== SIDEBAR SECTIONS (matching mockup) ===== */
.sidebar-section {
    background: var(--background-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin-bottom: 20px;
}

.sidebar-section:last-child {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: var(--imslp-parchment);
    border-bottom: 1px solid var(--border-light);
}

.section-header h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.section-header svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

/* Sidebar Actions - button layout */
.sidebar-actions .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
}

.sidebar-actions .btn {
    height: 48px;
    line-height: 1.2;
    justify-content: center;
}

.sidebar-actions .action-row {
    display: flex;
    gap: 8px;
}

.sidebar-actions .action-row .btn {
    flex: 1;
}

/* Favorite button styling */
.sidebar-actions .favorite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 12px 22px;
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--background-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.sidebar-actions .favorite-btn:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

.sidebar-actions .favorite-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.15s;
}

.sidebar-actions .favorite-btn.favorited {
    background: rgba(231, 76, 60, 0.08);
    border-color: #e74c3c;
    color: #e74c3c;
}

.sidebar-actions .favorite-btn.favorited svg {
    fill: #e74c3c;
}

.sidebar-actions .favorite-btn:active svg {
    transform: scale(0.9);
}

.excerpt-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--background-card);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.excerpt-nav-btn:hover:not(:disabled) {
    border-color: var(--imslp-blue);
    color: var(--imslp-blue);
    background: var(--background-page);
}

.excerpt-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.extract-viewer {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.extract-image-container {
    background: linear-gradient(to bottom, #f9f8f6, #f5f3ef);
    padding: 24px;
    position: relative;
    min-height: 100px;
}

.pdf-preview-overlay {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 5;
    background: rgba(0, 0, 0, 0.66);
    color: #fff;
    padding: 10px 14px;
    font-size: 14px;
    text-align: center;
    pointer-events: none;
}

.image-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.image-loading-spinner .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--imslp-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Hide Alpine.js elements until initialized */
[x-cloak] { display: none !important; }

/* Excerpt page images */
.excerpt-pages {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: white;
    width: 100%;
}

.excerpt-page-image {
    width: 100%;
    max-width: 100%;
    min-height: 80px;
    height: auto;
    display: block;
}

.excerpt-pages.images-loading {
    opacity: 0.3;
}

.fake-music-full {
    background: white;
    min-height: 380px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 32px 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.music-line {
    height: 50px;
    margin-bottom: 24px;
    position: relative;
}

.music-line .staff-lines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        #444 0px, #444 1px,
        transparent 1px, transparent 10px
    );
}

.music-line .notes-overlay {
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    font-size: 22px;
    color: #333;
    letter-spacing: 4px;
}

.action-bar {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    background: var(--imslp-parchment);
    border-top: 1px solid var(--border-light);
    justify-content: center;
    flex-wrap: wrap;
}

.action-bar .btn {
    height: 48px;
    line-height: 1.2;
}

.action-bar .metronome-inline {
    height: 48px;
}

.action-bar .metronome-inline .btn-metronome {
    height: 100%;
}

.section-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* YouTube Links */
.youtube-links {
    margin-bottom: 32px;
}

.youtube-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.youtube-item:hover {
    background: var(--hover-item);
}

.youtube-item .play-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff0000;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    flex-shrink: 0;
}

.youtube-item .yt-title {
    flex: 1;
    font-size: 18px;
    line-height: 1;
}

.youtube-item .arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    line-height: 1;
}

/* ===== SUGGEST PAGE ===== */
.suggest-page {
    max-width: 1200px;
    min-width: min(900px, 100%);
    margin: 0 auto;
    padding: 0 20px 120px; /* Extra bottom space for floating buttons */
}

.suggest-header {
    text-align: center;
    margin-bottom: 32px;
}

.suggest-header h1,
.page-header h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.page-header {
    text-align: center;
    margin: 32px 0;
}

.page-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.suggest-form-subheading {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.suggest-form {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-soft);
}

.suggest-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    cursor: pointer;
    user-select: none;
    border-radius: 12px;
}

.suggest-form-header:hover {
    background: var(--imslp-parchment);
}

.suggest-form h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    color: var(--text-primary);
}

.suggest-form-toggle {
    color: var(--text-muted);
    transition: transform 0.2s;
    display: flex;
    align-items: center;
}

.suggest-form.expanded .suggest-form-toggle {
    transform: rotate(180deg);
}

.suggest-form-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.suggest-form.expanded .suggest-form-content {
    max-height: 2000px;
    padding: 20px 24px 24px;
}

.suggest-form.expanded .suggest-form-header {
    border-radius: 12px 12px 0 0;
}

/* Form Elements */
.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    flex: 1;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 16px;
    font-family: var(--font-body);
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none;
    border-color: var(--imslp-blue);
    box-shadow: 0 0 0 3px rgba(0,52,101,0.1);
}

.form-group .hint {
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--text-muted);
    margin-top: 4px;
}

.form-actions {
    margin-top: 20px;
    text-align: right;
}

/* Suggestions List */
.suggestions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.suggestions-header h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    background: var(--background-card);
    color: var(--text-primary);
    cursor: pointer;
}

.filter-btn {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    background: transparent;
    border-radius: 20px;
    font-size: 16px;
    font-family: var(--font-body);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    border-color: var(--imslp-blue);
    color: var(--imslp-blue);
}

.filter-btn.active {
    background: var(--imslp-blue);
    border-color: var(--imslp-blue);
    color: white;
}

/* Suggestion Cards */
.suggestion-card {
    display: flex;
    gap: 16px;
    background: var(--background-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-soft);
    transition: all 0.2s;
}

.suggestion-card:hover {
    border-color: var(--border-color);
    box-shadow: var(--shadow-hover);
}

/* Vote Section */
.vote-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 48px;
}

.vote-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--background-card);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.vote-btn:hover {
    border-color: var(--imslp-blue-light);
    color: var(--imslp-blue);
}

.vote-btn.voted {
    background: var(--imslp-blue);
    border-color: var(--imslp-blue);
    color: white;
}

.vote-btn svg {
    width: 20px;
    height: 20px;
}

.vote-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Suggestion Content */
.suggestion-content {
    flex: 1;
    min-width: 0;
}

.suggestion-content h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.suggestion-meta {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.suggestion-description {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.suggestion-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.suggestion-footer .submitter {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.status-badge.pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-badge.approved {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-badge.closed {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

/* Suggestion Comments */
.suggestion-comments {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.mini-comment {
    display: flex;
    gap: 8px;
    padding: 8px 0;
}

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

.mini-comment .text {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.add-comment-mini {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.add-comment-mini input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    background: var(--background-card);
    color: var(--text-primary);
}

.add-comment-mini input:focus {
    outline: none;
    border-color: var(--imslp-blue);
}

.add-comment-mini button {
    padding: 8px 14px;
    background: var(--imslp-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.add-comment-mini button:hover {
    background: var(--imslp-blue-dark);
}

.add-comment-mini button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Comments - shared between detail and suggest pages */
.comments-section {
    margin-top: 24px;
}

.comments-list {
    margin-bottom: 16px;
}

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

.comments-empty p {
    margin: 0;
}

.comment {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}

.comment:last-child {
    border-bottom: none;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--imslp-parchment);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comment-author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
}

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

.comment-text {
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
    padding-left: 42px; /* align with text after avatar */
}

.comment-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.6;
    flex-shrink: 0;
    margin-left: auto;
}

.comment-delete:hover {
    opacity: 1;
    color: #c00;
}

.no-comments {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}

.no-comments a {
    color: var(--imslp-blue);
}

.add-comment {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.add-comment input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 16px;
    font-family: var(--font-body);
    background: var(--background-card);
    color: var(--text-primary);
}

.add-comment .btn-post {
    padding: 10px 20px;
    background: var(--imslp-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-family: var(--font-body);
    font-weight: 500;
    cursor: pointer;
    min-width: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-comment .btn-post:hover:not(:disabled) {
    background: var(--imslp-blue-dark);
}

.add-comment .btn-post:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.add-comment .btn-post .btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.comment-login-prompt {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 12px;
}

.comment-login-prompt a {
    color: var(--imslp-blue);
}

.suggestion-badge {
    font-size: 14px;
    font-family: var(--font-body);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 500;
    text-transform: uppercase;
    flex-shrink: 0;
    min-width: 80px;
    text-align: center;
}

.badge-pending {
    background: #fff3cd;
    color: #856404;
}

.badge-approved {
    background: #d4edda;
    color: #155724;
}

.badge-closed {
    background: #e2e3e5;
    color: #495057;
}

/* Filter dropdown for suggestions */
.filter-select {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font-body);
    background: var(--background-card);
    color: var(--text-primary);
    cursor: pointer;
}

/* Admin controls for suggestions */
.admin-controls {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.btn-admin {
    padding: 4px 10px;
    font-size: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

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

.btn-approve {
    background: #28a745;
    color: white;
}

.btn-approve:hover {
    background: #218838;
}

.btn-close {
    background: #6c757d;
    color: white;
}

.btn-close:hover {
    background: #5a6268;
}

/* Status dropdown for admin controls */
.status-dropdown {
    position: relative;
}

.status-badge.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
}

.status-badge.dropdown-trigger:hover {
    opacity: 0.85;
}

.dropdown-arrow {
    width: 10px;
    height: 6px;
}

.dropdown-arrow path {
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.status-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 140px;
    overflow: hidden;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.dropdown-item:hover {
    background: var(--hover-item);
}

.dropdown-item.approve .item-icon {
    color: #28a745;
}

.dropdown-item.reject .item-icon {
    color: #dc3545;
}

.dropdown-item .item-icon {
    font-size: 12px;
    font-weight: bold;
}

/* ===== ADMIN PAGE ===== */
.admin-page {
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.admin-header-left h2 {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.admin-header-left p {
    color: var(--text-secondary);
    margin: 0;
}

.admin-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-header-right label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.admin-instrument-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 16px;
    font-family: var(--font-body);
    background: var(--background-card);
    color: var(--text-primary);
    cursor: pointer;
}

.admin-page h2 {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.admin-page > p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.admin-form {
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
}

.admin-form .form-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.admin-form .form-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.admin-form .form-section h3 {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.admin-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.admin-form .form-grid.three-col {
    grid-template-columns: 1fr 1fr 1fr;
}

.admin-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-form .form-group.full-width {
    grid-column: 1 / -1;
}

.admin-form label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.admin-form input,
.admin-form select,
.admin-form textarea {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 16px;
    font-family: var(--font-body);
    background: var(--background-page);
    color: var(--text-primary);
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    outline: none;
    border-color: var(--imslp-blue);
}

.admin-form textarea {
    resize: vertical;
    min-height: 80px;
}

.admin-form .file-upload {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-form .file-upload:hover {
    border-color: var(--imslp-blue);
    background: rgba(0, 52, 101, 0.02);
}

.admin-form .file-upload-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.admin-form .file-upload-text {
    color: var(--text-secondary);
    font-size: 14px;
}

.admin-form .file-upload-text strong {
    color: var(--imslp-blue);
}

.upload-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 16px;
}

.upload-preview-item {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    background: var(--background-card);
}

.upload-preview-item img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    border-radius: 4px;
}

.upload-preview-item .filename {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-preview-item .remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dc3545;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-preview-item .remove-btn:hover {
    background: #c82333;
}

/* Autocomplete dropdown */
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: var(--shadow-hover);
}

.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    line-height: 1.4;
}

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

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background: var(--imslp-parchment);
}

.autocomplete-title {
    font-weight: 500;
    color: var(--text-primary);
}

.autocomplete-composer {
    color: var(--text-secondary);
    flex: 1;
}

.autocomplete-pageid {
    color: var(--text-muted);
    font-size: 12px;
    margin-left: auto;
}

.admin-form .form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.btn-cancel {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    font-family: var(--font-body);
}

.btn-cancel:hover {
    border-color: var(--text-secondary);
}

.youtube-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.youtube-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.btn-remove {
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.btn-remove:hover {
    border-color: #c00;
    color: #c00;
}

.btn-add-youtube {
    background: none;
    border: none;
    color: var(--imslp-blue);
    font-size: 16px;
    font-family: var(--font-body);
    cursor: pointer;
    padding: 8px 0;
    text-align: left;
}

.btn-add-youtube:hover {
    text-decoration: underline;
}

/* ===== EMBEDDABLE WIDGET ===== */
.embeddable-widget {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    font-family: "Lucida Grande", "Trebuchet MS", "Verdana", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
}

.instrument-tabs {
    display: flex;
    background: var(--imslp-parchment);
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
    padding: 0 8px;
}

.instrument-tab {
    padding: 14px 20px;
    font-size: 16px;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    margin-bottom: -1px;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
}

.instrument-tab:hover {
    color: var(--imslp-blue);
}

.instrument-tab.active {
    color: var(--imslp-blue);
    border-bottom-color: var(--imslp-blue);
    background: white;
}

.embeddable-extracts-list {
    max-height: 380px;
    overflow-y: auto;
}

.embeddable-extract-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}

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

.embeddable-extract-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--text-primary);
}

.embeddable-extract-title .movement-name {
    font-weight: 500;
}

.embeddable-extract-title .measures {
    font-weight: 400;
    color: var(--text-secondary);
}

.embeddable-extract-header .part-name {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.embeddable-extract-body {
    margin-bottom: 12px;
}

.embed-scan-preview {
    width: 100%;
    height: 70px;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.embed-scan-preview::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, transparent, white);
    pointer-events: none;
}

.embeddable-extract-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.embeddable-extract-actions .btn {
    font-size: 16px;
    padding: 10px 16px;
}

.youtube-dropdown {
    position: relative;
}

.youtube-dropdown-content {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--shadow-hover);
    min-width: 220px;
    margin-bottom: 4px;
    z-index: 10;
}

.youtube-dropdown:hover .youtube-dropdown-content {
    display: block;
}

.youtube-dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid var(--border-light);
}

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

.youtube-dropdown-item:hover {
    background: #fef2f2;
}

.youtube-dropdown-item .yt-icon {
    color: #cc0000;
    margin-right: 10px;
}

.embeddable-footer {
    padding: 12px 20px;
    background: var(--imslp-parchment);
    border-top: 1px solid var(--border-light);
    text-align: right;
}

.open-full-link {
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--imslp-blue-light);
    text-decoration: none;
}

.open-full-link:hover {
    text-decoration: underline;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .site-branding {
        flex-direction: row;
        justify-content: center;
    }

    .site-branding .logo-combined {
        justify-content: center;
    }

    .site-branding .logo-combined svg {
        height: 28px;
    }

    .site-branding .site-title {
        font-size: 32px;
    }

    /* Controls bar: keep on one row */
    .controls-bar {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
    }

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

    .controls-right {
        gap: 10px;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    /* Hide suggest link on mobile - moved to user menu */
    .suggest-link {
        display: none;
    }

    /* Compact sort button on mobile */
    .sort-btn {
        width: 36px;
        height: 36px;
    }

    /* Results info: compact */
    .results-info {
        flex-direction: row;
        gap: 10px;
        font-size: 14px;
    }

    .expand-all-btn {
        padding: 6px 12px;
        font-size: 14px;
    }

    .extract-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .extract-preview {
        width: auto;
        max-width: 100%;
        min-width: 0;
        flex: none;
        align-self: center;
        aspect-ratio: 400 / 70;
    }

    .scan-music-content {
        min-width: 280px;
    }

    /* Composer below title on mobile */
    .work-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .work-card-header .composer {
        flex-shrink: 1;
    }

    .extract-arrow {
        display: none;
    }

    /* Hide elements on mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Detail page action bar: stacked buttons on mobile */
    .action-bar {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
    }

    .action-bar .btn {
        padding: 12px 16px;
        justify-content: center;
    }

    /* Favorite button in action bar - full width on mobile */
    .action-bar .favorite-btn {
        width: 100%;
        padding: 12px 16px;
        border-radius: 6px;
    }

    .action-bar .favorite-btn .favorite-text {
        display: inline;
    }

    .action-bar .favorite-btn.favorited {
        background: rgba(231, 76, 60, 0.08);
        border-color: #e74c3c;
        color: #e74c3c;
    }

    .action-bar .favorite-btn.favorited svg {
        fill: #e74c3c;
    }

    /* Metronome in action bar - simplified on mobile */
    .action-bar .metronome-inline {
        width: 100%;
    }

    /* When collapsed, button takes full width. When expanded, button shrinks to content */
    .action-bar .metronome-inline .btn-metronome {
        width: 100%;
        justify-content: center;
    }

    .action-bar .metronome-inline.expanded .btn-metronome {
        width: auto;
        flex-shrink: 0;
        padding: 0 12px;
    }

    .action-bar .metronome-inline.expanded .metronome-controls {
        flex: 1;
        justify-content: center;
        max-width: none; /* Override base 200px limit */
    }

    /* Metronome compact */
    .metronome-inline {
        flex-shrink: 0;
    }

    .form-row {
        flex-direction: column;
    }

    .admin-form .form-grid {
        grid-template-columns: 1fr;
    }

    .admin-form .form-grid.three-col {
        grid-template-columns: 1fr;
    }

    /* Suggestion Cards - Mobile */
    .suggestion-card {
        flex-direction: column;
        gap: 12px;
    }

    .vote-section {
        flex-direction: row;
        justify-content: flex-start;
    }

    .suggestion-footer {
        flex-wrap: wrap;
    }

    .suggestions-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .add-comment-mini {
        flex-wrap: wrap;
    }

    .add-comment-mini input {
        min-width: 0;
        flex: 1 1 200px;
    }

    .suggestion-content {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* Responsive text: Desktop shows full, mobile shows short */
.suggest-link .suggest-short,
.btn-text-short { display: none; }

@media (max-width: 768px) {
    .suggest-link .suggest-full { display: none !important; }
    .suggest-link .suggest-short { display: inline !important; }

    /* In action-bar with stacked buttons, show full text */
    .action-bar .btn-text-full { display: inline !important; }
    .action-bar .btn-text-short { display: none !important; }
}

/* Loading States */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
}

.loading::after {
    content: "";
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-top-color: var(--imslp-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 12px;
}

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

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state h3 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 16px;
}

/* Error Banner */
.error-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fee2e2;
    border: 1px solid #ef4444;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #991b1b;
    font-size: 14px;
}

.error-banner .dismiss-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #991b1b;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
    flex-shrink: 0;
}

.error-banner .dismiss-btn:hover {
    opacity: 1;
}

[data-theme="dark"] .error-banner {
    background: #450a0a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .error-banner .dismiss-btn {
    color: #fca5a5;
}

/* Loading Overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100px;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 60px;
    gap: 12px;
    z-index: 10;
    border-radius: 8px;
}

.loading-overlay span {
    color: var(--text-secondary);
    font-size: 14px;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--imslp-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

[data-theme="dark"] .loading-overlay {
    background: rgba(30, 30, 30, 0.9);
}

/* Full-page loading overlay */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 9999;
}

.page-loading-overlay span {
    color: var(--text-secondary);
    font-size: 16px;
}

[data-theme="dark"] .page-loading-overlay {
    background: rgba(30, 30, 30, 0.85);
}

/* =============================================
   V2 OVERRIDES
   ============================================= */

/* Hide arrow icon on browse page (favorite icon now on right) */
.extract-arrow {
    display: none !important;
}

/* =============================================
   FAVORITES SYSTEM
   ============================================= */
.favorite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.favorite-btn:hover {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
}

.favorite-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.15s;
}

.favorite-btn.favorited {
    color: #e74c3c;
}

.favorite-btn.favorited svg {
    fill: #e74c3c;
}

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

/* Filter toggle in control group */
.pill-btn.filter-active {
    background: var(--imslp-blue);
    color: white;
}

/* Favorite button in action bar */
.action-bar .favorite-btn {
    width: auto;
    height: 48px;
    padding: 12px 22px;
    gap: 8px;
    border-radius: 6px;
    background: white;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.action-bar .favorite-btn svg {
    width: 16px;
    height: 16px;
}

.action-bar .favorite-btn:hover {
    background: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.3);
}

.action-bar .favorite-btn.favorited {
    background: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.3);
}

/* Dark mode - action bar favorite button needs higher contrast */
[data-theme="dark"] .action-bar .favorite-btn {
    background: var(--background-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .action-bar .favorite-btn:hover {
    background: rgba(231, 76, 60, 0.12);
    border-color: #e74c3c;
}

[data-theme="dark"] .action-bar .favorite-btn.favorited {
    background: rgba(231, 76, 60, 0.18);
    border-color: #e74c3c;
    color: #f05545;
}

/* =============================================
   MOBILE LAYOUT - Extract Items with Grid
   ============================================= */
@media (max-width: 768px) {
    .extract-item {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 10px;
    }

    .extract-item .extract-preview {
        grid-column: 1 / -1; /* span full width */
        width: auto;
        max-width: 100%;
        min-width: 0;
        flex: none;
        align-self: center;
        aspect-ratio: 400 / 70;
        height: auto;
    }

    .extract-item .extract-info {
        grid-column: 1;
        grid-row: 2;
    }

    .extract-item .favorite-btn {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
    }

    /* Work card header stacked on mobile */
    .work-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* =============================================
   HERO SECTION
   ============================================= */
.browse-hero {
    background: linear-gradient(180deg, var(--imslp-parchment) 0%, var(--imslp-cream) 100%);
    padding: 48px 24px 24px;
    text-align: center;
    position: relative;
    overflow: visible;
}

/* Subtle radial glow */
.browse-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(800px, 100vw);
    height: 400px;
    background: radial-gradient(ellipse, rgba(184, 150, 12, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

[data-theme="dark"] .browse-hero::before {
    background: radial-gradient(ellipse, rgba(232, 197, 71, 0.05) 0%, transparent 70%);
}

.browse-hero h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 8px;
    position: relative;
}

.browse-hero h1 .instrument-name {
    color: var(--imslp-gold);
    cursor: pointer;
    display: inline-block;
    transition: opacity 0.15s;
}

.browse-hero h1 .instrument-name:hover {
    opacity: 0.8;
}

.browse-hero .subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto 24px;
}

/* Hero Stats */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 28px;
}

.hero-stat {
    text-align: center;
}

.hero-stat-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--imslp-navy);
    line-height: 1.2;
}

[data-theme="dark"] .hero-stat-number {
    color: var(--imslp-gold);
}

.hero-stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hero Controls */
.browse-hero .browse-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0 auto;
}

.browse-hero .search-wrapper {
    position: relative;
    flex: 1;
    min-width: 280px;
    max-width: 400px;
}

.browse-hero .search-input {
    width: 100%;
    height: 48px;
    padding: 0 24px 0 48px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-primary);
    transition: all 0.15s;
}

.browse-hero .search-input::placeholder {
    color: var(--text-muted);
    text-overflow: ellipsis;
}

.browse-hero .search-input:focus {
    outline: none;
    border-color: var(--imslp-blue);
    box-shadow: 0 0 0 3px rgba(56, 98, 244, 0.1);
}

.browse-hero .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: var(--text-muted);
    pointer-events: none;
}

.browse-hero .search-icon svg {
    width: 20px;
    height: 20px;
}

/* Control Group (pill with buttons) in hero */
.browse-hero .control-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 4px;
}

.browse-hero .control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.browse-hero .control-btn:hover {
    background: var(--imslp-parchment);
    color: var(--text-primary);
}

.browse-hero .control-btn.active {
    background: var(--imslp-blue);
    color: white;
}

.browse-hero .control-btn.filter-active {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
}

.browse-hero .control-btn svg {
    width: 18px;
    height: 18px;
}

/* Hide old controls bar in browse page (moved to hero) */
.browse-page > .controls-bar {
    display: none;
}

/* =============================================
   INSTRUMENT SELECTOR - Chevron Dropdown
   ============================================= */
.instrument-selector-btn {
    gap: 8px;
}

.instrument-selector-btn .dropdown-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.15s;
    margin-left: auto;
}

/* =============================================
   WORK CARD STYLING OVERRIDES
   ============================================= */
.work-card {
    background: var(--background-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.work-card:hover {
    box-shadow: var(--shadow-hover);
}

.work-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.1s;
    touch-action: manipulation; /* Disable 300ms tap delay on mobile */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */
    user-select: none; /* Prevent text selection on tap */
    -webkit-user-select: none;
}

/* Immediate visual feedback on touch */
.work-card-header:active {
    background: rgba(0, 0, 0, 0.06);
    transition: background 0s;
}

.work-card-header:hover {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .work-card-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.work-card-header h3 {
    font-size: 18px;
    font-weight: 700;
}

.work-card-header .composer {
    font-size: 15px;
    flex-shrink: 0;
}

/* Mobile: work header gap override - must come after main definition */
@media (max-width: 768px) {
    .work-card-header {
        gap: 4px;
    }
}

/* =============================================
   IMMEDIATE TAP FEEDBACK (Navigation Spinner Overlay)
   Style inspired by Clara app's centered overlay spinner
   ============================================= */

body.nav-loading,
body.page-loading {
    overflow: hidden;
    overscroll-behavior: none;
}

body.modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Centered overlay container */
.nav-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10003;
    pointer-events: all;
    cursor: wait;
}

/* Subtle background glow */
.nav-spinner-overlay::before {
    content: '';
    position: fixed;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    border-radius: 12px;
    background: var(--background-card, white);
    mask-image: radial-gradient(circle, white 30%, transparent 100%);
    opacity: 0;
    animation: navOverlayFadeIn 0.15s ease forwards;
    z-index: -1;
}

@keyframes navOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 0.5; }
}

/* The spinner itself */
.nav-spinner-overlay .nav-spinner {
    opacity: 0;
    animation: navSpinnerFadeIn 0.15s ease forwards, spin 0.8s linear infinite;
}

@keyframes navSpinnerFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Work card header navigating state - subtle highlight */
.work-card-header.navigating {
    background: rgba(56, 98, 244, 0.04);
    pointer-events: none;
}

/* Extract item navigating state - subtle highlight */
.extract-item.navigating {
    background: rgba(56, 98, 244, 0.04);
    pointer-events: none;
}

/* Dark mode adjustments */
[data-theme="dark"] .nav-spinner-overlay::before {
    background: var(--background-card);
}

[data-theme="dark"] .nav-spinner-overlay .nav-spinner {
    border-color: var(--border-color);
    border-top-color: var(--imslp-gold);
}

[data-theme="dark"] .work-card-header.navigating,
[data-theme="dark"] .extract-item.navigating {
    background: rgba(56, 98, 244, 0.08);
}

/* Results section styling */
.browse-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    padding-bottom: 80px; /* Extra space for back-to-top button */
}

.results-info {
    padding: 16px 0;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* =============================================
   RESPONSIVE - Hero Mobile
   ============================================= */
@media (max-width: 600px) {
    .browse-hero {
        padding: 32px 16px 20px;
    }

    .browse-hero h1 {
        font-size: 1.75rem;
    }

    .browse-hero .subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .hero-stats {
        gap: 32px;
        margin-bottom: 24px;
    }

    .hero-stat-number {
        font-size: 1.5rem;
    }

    .hero-stat-label {
        font-size: 0.8rem;
    }

    .browse-hero .browse-controls {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .browse-hero .search-wrapper {
        min-width: 0;
        flex: 1;
    }

    .browse-hero .control-group {
        flex-shrink: 0;
    }

    .browse-page {
        padding: 12px;
        padding-bottom: 80px; /* Extra space for back-to-top button */
    }
}

/* =============================================
   DETAIL PAGE - TWO COLUMN LAYOUT
   ============================================= */

/* Override detail page max-width for wider layout */
.detail-page {
    max-width: 1400px;
    padding: 24px;
    padding-bottom: 80px; /* Extra space for back-to-top button */
}

/* Mobile detail page spacing */
@media (max-width: 768px) {
    .detail-page {
        padding: 16px;
        padding-bottom: 80px; /* Extra space for back-to-top button */
    }

    .detail-layout {
        gap: 12px;
    }

    .sidebar-section {
        margin-bottom: 12px;
    }
}

/* Default (Portrait/Mobile): Single column layout */
.detail-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.detail-main {
    flex: 1 1 0;
    min-width: 0;
}

/* Sidebar actions container - hidden on mobile (actions shown in PDF action bar) */
.sidebar-actions {
    display: none;
}

/* Sidebar is visible on mobile (shows below PDF viewer in single column) */
/* YouTube, Notes, Comments sections will be visible */

/* Landscape/Desktop: Two column layout */
@media (min-width: 1024px) and (min-aspect-ratio: 4/3) {
    .detail-layout {
        flex-direction: row;
        gap: 32px;
    }

    .detail-main {
        flex: 1;
        min-width: 0;
    }

    .detail-sidebar {
        width: 380px;
        flex-shrink: 0;
    }

    /* Hide action bar under viewer in desktop, show sidebar actions instead */
    .detail-main .action-bar {
        display: none;
    }

    .sidebar-actions {
        display: block;
        margin-bottom: 24px;
    }
}

/* Also trigger two-column at wider screens regardless of aspect ratio */
@media (min-width: 1200px) {
    .detail-layout {
        flex-direction: row;
        gap: 32px;
    }

    .detail-main {
        flex: 1;
        min-width: 0;
    }

    .detail-sidebar {
        width: 380px;
        flex-shrink: 0;
    }

    .detail-main .action-bar {
        display: none;
    }

    .sidebar-actions {
        display: block;
        margin-bottom: 24px;
    }
}

/* Sidebar actions button styling */
.sidebar-actions .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-actions .btn {
    justify-content: center;
    width: 100%;
}

.sidebar-actions .action-row {
    display: flex;
    gap: 8px;
}

.sidebar-actions .action-row .btn {
    flex: 1;
}

.sidebar-actions .metronome-inline {
    width: 100%;
    height: 48px;
}

.sidebar-actions .metronome-inline .btn-metronome {
    width: 100%;
    height: 100%;
    justify-content: center;
}

.sidebar-actions .metronome-inline.expanded .btn-metronome {
    width: auto;
    flex-shrink: 0;
    padding: 0 12px;
}

.sidebar-actions .metronome-inline.expanded .metronome-controls {
    flex: 1;
    justify-content: center;
    max-width: none;
}

/* Detail header in sidebar */
.detail-sidebar .detail-header {
    margin-bottom: 12px;
    padding-bottom: 0;
}

/* Excerpt nav in sidebar - reduce spacing */
.sidebar-section .excerpt-nav {
    margin-top: 8px;
    padding-top: 12px;
    padding-bottom: 4px;
}

/* YouTube section styling in sidebar */
.detail-sidebar .youtube-links {
    margin-bottom: 24px;
}

/* Notes section styling in sidebar */
.detail-sidebar .excerpt-notes {
    margin-bottom: 24px;
}

/* =============================================
   SIDEBAR SECTIONS (Carded Style)
   ============================================= */
.sidebar-section {
    background: var(--background-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin-bottom: 20px;
}

.sidebar-section:last-child {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: var(--imslp-parchment);
    border-bottom: 1px solid var(--border-light);
}

.section-header svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.section-header h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.section-content {
    padding: 16px 20px;
}

.section-content p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* YouTube list in sidebar section */
.sidebar-section .youtube-list {
    padding: 8px 0;
}

.sidebar-section .youtube-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.15s;
}

.sidebar-section .youtube-item:hover {
    background: var(--hover-item);
}

.sidebar-section .youtube-item .play-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff0000;
    border-radius: 6px;
    color: white;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.sidebar-section .youtube-item .yt-title {
    flex: 1;
    font-size: 0.95rem;
}

.sidebar-section .youtube-item .arrow {
    color: var(--text-muted);
}

/* Comments in sidebar section */
.sidebar-section .comments-section {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

.sidebar-section .comments-section .section-title {
    display: none; /* Hide since we have section-header */
}

.sidebar-section .comments-list {
    padding: 0 20px;
    margin-bottom: 0;
}

/* Remove left padding on comment text in sidebar - align with left edge like mockup */
.sidebar-section .comment-text {
    padding-left: 0;
}

.sidebar-section .add-comment {
    display: flex;
    gap: 8px;
    padding: 14px 20px 16px;
    background: var(--imslp-parchment);
    border-top: 1px solid var(--border-light);
    margin-top: 0;
}

.sidebar-section .comment-login-prompt {
    padding: 12px 20px;
    background: var(--imslp-parchment);
    border-top: 1px solid var(--border-light);
    margin: 0;
}

/* Ensure hidden elements don't affect layout */
.sidebar-section .add-comment[style*="display: none"],
.sidebar-section .comment-login-prompt[style*="display: none"] {
    padding: 0;
    margin: 0;
    border: none;
}

/* Very narrow screens - hide logo text and instrument name */
@media (max-width: 400px) {
    .logo-text {
        display: none;
    }

    .instrument-btn {
        min-width: unset;
        padding: 6px;
    }

    .instrument-btn span {
        display: none;
    }

    .top-bar-inner {
        padding: 0 12px;
        gap: 8px;
    }

    .header-right {
        gap: 6px;
    }
}

/* ===== METRONOME ===== */
.metronome-inline {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 6px;
    min-height: 40px;
}

.metronome-inline.expanded {
    border-color: var(--imslp-blue);
}

.metronome-inline.expanded:hover {
    background: var(--background-card);
    border-color: var(--imslp-blue);
    color: inherit;
}

.btn-metronome {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    min-height: 40px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 500;
    cursor: pointer;
}

.btn-metronome:hover {
    color: var(--imslp-blue);
}

.metronome-inline.expanded .btn-metronome:hover {
    background: rgba(90, 142, 200, 0.15);
}

.btn-metronome.playing {
    color: var(--imslp-blue);
}

.metronome-icon {
    color: var(--text-primary);
    overflow: visible;
}

.btn-metronome:hover .metronome-icon {
    color: var(--imslp-blue);
}

.btn-metronome.playing .metronome-icon {
    color: var(--imslp-blue);
}

.metronome-arm {
    transform-origin: 12px 18px;
    transition: transform 0.06s ease-out;
}

.metronome-arm.tick {
    transform: rotate(20deg);
}

.metronome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--imslp-blue);
    opacity: 0.4;
    transition: opacity 0.06s ease-out, transform 0.06s ease-out;
}

.metronome-dot.active {
    opacity: 0.5;
}

.metronome-dot.pulse {
    opacity: 1;
    transform: scale(1.15);
}

.metronome-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-left: 1px solid var(--border-color);
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.15s ease-out, max-width 0.15s ease-out, padding 0.15s ease-out;
}

.metronome-controls.visible {
    opacity: 1;
    max-width: 200px;
    padding: 0 10px;
}

.metronome-controls .tempo-adjust {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--background-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}

.metronome-controls .tempo-adjust:hover {
    border-color: var(--imslp-blue);
    color: var(--imslp-blue);
}

.metronome-controls .tempo-input {
    flex-shrink: 0;
    width: 50px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--background-card);
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    font-family: var(--font-body);
}

.metronome-controls .tempo-input::-webkit-inner-spin-button,
.metronome-controls .tempo-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.metronome-controls .tap-btn {
    flex-shrink: 0;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--background-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.15s;
}

.metronome-controls .tap-btn:hover {
    border-color: var(--imslp-blue);
    color: var(--imslp-blue);
}

/* ===== SITE FOOTER ===== */
.site-footer {
    margin-top: auto;
    padding: 14px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--background-page);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}


.footer-brand {
    color: var(--text-muted);
}

.footer-brand a {
    color: var(--imslp-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.footer-brand a:hover {
    color: var(--imslp-blue-dark);
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.footer-nav .footer-link {
    color: var(--text-muted);
    text-decoration: none;
    padding: 0 10px;
    position: relative;
    transition: color 0.15s ease;
}

.footer-nav .footer-link:hover {
    color: var(--imslp-blue);
}

/* Bullet separators using pseudo-elements */
.footer-nav .footer-link:not(:last-child)::after {
    content: "•";
    position: absolute;
    right: -2px;
    color: var(--text-muted);
    pointer-events: none;
}

.footer-nav .footer-link:last-child {
    padding-right: 0;
}